O título <TITLE> é o único elemento obrigatório do bloco do cabeçalho. Ele exibe o título do documento que aparece geralmente, fora da página, na barra de título do browser. O título deve conter informações que descrevam o documento. Não deve ser excessivamente longo nem muito curto a ponto de não conter informação suficiente. O exemplo a seguir é o título usado nesta página:
<TITLE>Elementos do cabecalho</TITLE>
Agora observe o seu canto superior esquerdo, esse título está lá. Portanto <TITLE> contém informações que descrevem o documento.
Pode conter: texto simples. Não pode conter outros elementos.
Ativa uma janela que permite a entrada de palavras-chaves para a realização de pesquisa e localização, precedida pela mensagem:
"This is a searcheable index. Enter search keywords:"
Atributo opcional:
PROMPT="mensagem"
Permite usar mensagem alternativa (em vez da mensagem default em inglês). Exemplo:
<ISINDEX PROMPT="Este é um índice de pesquisa. Entre com palavras-chave: ">
Especifica o endereço base do URL onde está armazenado o documento.
Principais Atributos:
HREF="URL".
Entre as aspas deve-se incluir uma URL absoluta. Exemplo:
<BASE HREF="http://www.qualquer.lugar/base/">
TARGET="nome".
Entre as aspas deve-se incluir o nome de um alvo (quadro ou janela) que será
destino de todos os links da página.
Exemplo:
<BASE TARGET="frame1">
Usado para relacionar o documento com outro (geralmente com índices, glossários, informações sobre o autor, etc.). Pode também ser usado para mesclar uma folha de estilos com uma página.
Atributos:
HREF="URL".
Entre as aspas deve-se incluir um URL absoluta (endereço/nome do arquivo) ou relativa (só o nome de arquivo), caso ambos os arquivos estejam no mesmo diretório.REL="nome".
Explica a relação desse documento com aquele especificado pelo URL.METHODS="string".
Indica o método empregado para acessar o documento ao qual foi feita a referência.TITLE="string".
Título do arquivo ao qual o URL faz referência (o título identifica o conteúdo do arquivo).Nota: String = grupo de caracteres, letras ou números (abcdefgh... 123456...)
Como exemplo de aplicação desse comando observe o barra personalizada desta página. Ela foi configurada através da mesclagem de um arquivo de folha de estilo. O parâmetro de mesclagem é:
<LINK REL="STYLEsheet" HREF="matrix.css" TITLE="Barra personalizada">
Este parâmetro é inserido dentro do comando <HEAD>...</HEAD> da página HTML onde o efeito deve acontecer. O arquivo matrix.css, que se encontra no mesmo diretório desta página (e por isso usei o URL relativo), é onde está configurado as cores da barra.
Sintase do arquivo matrix.css
BODY { scrollbar-face-color: #C02420;
scrollbar-highlight-color: #ffd700;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #8b4513;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #cd853f;
scrollbar-darkshadow-color: #8b4513; }
| ONDE | CORRESPONDE A | COR |
|---|---|---|
| scrollbar-face-color | Cor da barra | #C02420 |
| scrollbar-highlight-color | Cor do sombreamento interno superior | #ffd700 |
| scrollbar-shadow-color | Cor do sombreamento interno inferior | #000000 |
| scrollbar-3dlight-color | Cor do sombreamento externo superior | #8b4513 |
| scrollbar-arrow-color | Cor da seta | #000000 |
| scrollbar-track-color | Cor da faixa de rolagem | #cd853f |
| scrollbar-darkshadow-color | Cor do sombreamento externo inferior | #8b4513 |
Mais outro exemplo bem prático da aplicação da tag LINK. Quem possui o Internet Explorer v5x tem visualizado um iconezinho personalizado que aparece na barra de favoritos. Aqui vou explicar como ele é criado e inserido em sua homepage para que apareça na barra de favoritos.
|
O primeiro passo é adquirir um aplicativo criador de ícones que são os "arquivos.ico". Eu crio os meus ícones usando o Icodraw, um programinha simples e prático com 71,9Kbytes de tamanho. Ou talvez queira procurar algum outro nos sites de downloads relacionados abaixo. |
|
 |
 |
 |
Uma vez criado o seu ícone, copie-o no diretório onde está hospedada a sua homepage. Depois é só colocar um comando de acionamento do ícone entre <HEAD>...</HEAD> de sua página de abertura (index.htm). Como exemplo vou mostrar minha própria página. O ícone que coloquei foi esse:
Dragao.ico
A sintaxe que está dentro da seção <HEAD> do meu arquivo index.htm é essa:
<LINK REL="SHORTCUT ICON" HREF="http://orbita.starmedia.com/~edaurelio/Dragao.ico">
Observe que neste exemplo o URL que está dentro de HREF é o absoluto, ou seja, o endereço está completo. Agora faça um teste, vá para HOME de minha página e salve-a em favoritos (desde que seu browser seja o Internet Explorer v5x) e ele aparecerá lá.
Pronto!
Os Meta Tags ou Meta-informações ou Meta-dados consistem em blocos de informações sobre a sua página que são utilizadas pelo servidor HTTP. Quando você está fazendo uma pesquisa na Rede e coloca uma ferramenta de busca para localizar uma palavra (ou grupo de palavras), ele irá fazer uma varredura nas metatags de todas as páginas online e apresentar uma relação de documentos encontrados baseados na(s) palavra(s) que você digitou.
Embora uma página funcione perfeitamente bem sem as metatags esse seria um péssimo negócio para quem quer conquistar seu espaço na Rede, pois sua página será relegada ao anonimato absoluto pelos robôs de search engines (ferramentas de busca) não aparecendo na relação de documentos encontrados. Percebeu a importância delas?
As meta tags devem ser especificadas entre os comandos <HEAD> </HEAD> do arquivo HTML. Elas são compostas de duas partes: NAME (identificador) e CONTENT (conteúdo). Aqui estão as metatags mais importantes com suas respectivas sintaxes e, como exemplos, estarei apresentando as referências de minha página, para um melhor entendimento.
NAME="...".
Contém o nome da variável que está sendo criada, e que deve ser atribuída a um conteúdo
da opção CONTENT.
robots
Esta, sem dúvida é a tag mais importante pois será através dela que a sua homepage será localizada ou não. Existem softwares que realizam varreduras na Rede com o propósito de localizar e relacionar determinados termos digitados pelo internauta, estes softwares são conhecidos como robots ou spiders. Aqui estão as opções que você deve configurar em CONTENT. Você pode escolher, no máximo, duas (desde que elas não possuam funções inversas, evidentemente, tais como CONTENT="index, noindex").index - Fará com que a página SEJA indexada, (default).
noindex - Fará com que a página NÃO SEJA indexada.
follow - Fará com que os links da página SEJAM pesquisados e indexados, (default).
nofollow - Fará com que os links da página NÃO SEJAM pesquisados.
all - Fará com que a página SEJA indexada, bem como todos os seus links.
none - Fará com que a página NÃO SEJA indexada, bem como todos os seus links.Exemplo: <META NAME="robot" CONTENT="index, follow">
revisit-after
Essa metatag determina uma data para que o robot atualize sua indexação em relação a página. Assim, quando você atualizar a página o robot não apresentará o index antigo. Exemplo:<META NAME="revisit-after" CONTENT="10 days">
keywords
Contém uma lista de palavras-chaves, associadas a homepage que serão lidas pelos mecanismos de busca antes de apresenta-lo na relação que o internauta procura. Geralmente é usada para adicionar sinônimos e alternativas para as palavras do título. Exemplo:<META NAME="keywords" CONTENT="HTML, edaurelio, curso, tutorial, comandos, www, glossário">
description
Apresenta uma descrição do conteúdo da homepage. É usado pelas ferramentas de busca para descrever a sua homepage. Exemplo:<META NAME="description" CONTENT="Curso de HTML, básico & avançado, guia de comandos, glossário WWW. Mais de 1,7MBytes de informação">
author
Identifica o autor da homepage. Exemplo:<META NAME="author" CONTENT="Eloy Dorival Aurélio">
generator
Indica o tipo de editor que criou a sua página HTML. Exemplo:<META NAME="generator" CONTENT="WordPad, Windows 98">
copyright
Apresenta informações sobre direitos autorais. Exemplo:<META NAME="copyright" CONTENT="copyright 2001 Edaurelio">
Essas metatags são alinhadas dentro do cabeçalho em ordem aleatória..
HTTP-EQUIV="...".
Também conhecidas como Variáveis de Sistema, as Metas Tags com esse
parâmetro possibilitam criar páginas dinâmicas que enviam instruções ao browser e promove seu
auto-recarregamento (técnica client pull) ou captura de arquivos de
imagens que recarregam automaticamente sem que seja necessário a interferência do usuário.
CONTENT="...".
Contém o valor do cabeçalho. Vários exemplos de aplicação do parâmetro "CONTENT" é exibidos nos exemplos abaixo.
Declara o seu E-mail. Exemplo:<META HTTP-EQUIV="email" CONTENT="edaurelio@hotmail.com">city
Apresenta o nome de sua cidade. Exemplo:<META HTTP-EQUIV="city" CONTENT="Sao Paulo">state
Apresenta o nome de seu estado. Exemplo:<META HTTP-EQUIV="state" CONTENT="Sao Paulo">category
Declara a categoria do seu site. Exemplo:<META HTTP-EQUIV="category" CONTENT="Internet/didático">refresh
Recarrega a página num período de tempo estipulado pelo CONTENT=segundos. Também pode abrir uma página diferente. Exemplo:<META HTTP-EQUIV="refresh" CONTENT="30; URL=imagem2.htm">Abaixo você poderá ver este recurso funcionando no slide de fotos.
cache-control
A diretiva Cache-Control com o valor "no-cache" faz com que o controle de cache do browser não armazene a página no diretório de cache. Exemplo:<META HTTP-EQUIV="control-cache" CONTENT="no-cache">
control-language
Define para o browser qual o idioma utilizado da página. O código da língua está definido na norma ISO 3166.<META HTTP-EQUIV="control-language" CONTENT="br">
expires
Especifica a data e a hora, após a qual, a homepage deve ser considerada obsoleta pelos robôs de varredura da Web. A data deve ser informada no formato GMT. Exemplo:<META HTTP-EQUIV="expires" CONTENT="Mon, 31 Dec 2001 11:59:59 GMT">
URL=endereço
Indica o URL do documento.
Sintaxe do arquivo imagem1.htm:
<HTML>
<HEAD>
<TITLE>Imagens</TITLE>
<META HTTP-EQUIV="refresh" CONTENT="30; URL=imagem2.htm">
</HEAD>
<BODY BGCOLOR="#ffe4c4">
<CENTER><IMG SRC="../imagens/macaco_prego.jpg" BORDER="0"></A></CENTER>
<CENTER>Arquivo imagem1.htm</CENTER>
</BODY>
</HTML>
Neste exemplo o comando META carrega (refresh), a cada 30 segundos (CONTENT="30;), o arquivo imagem2.htm (URL=imagem2.htm...). O imagem2.htm, por sua vez, possui a sintaxe que carrega o imagem3.htm, e assim vai até o imagem5.htm. Então o imagem5.htm recarrega o imagem1 criando um looping de imagens. Para abrir a janela onde aparece as imagens usei o comando IFRAME. Logicamente a sintaxe para carregar os demais arquivos de imagem está em cada arquivo subsequente. É tudo uma questão de endereçar corretamente cada arquivo em URL=... para o que se quer abrir.