Cabeçalho do documento O cabeçalho de uma página HTML fica dentro das Tags <HEAD> e </HEAD>, e dentro dessas Tags podemos usar Tags <TITLE>, <BASE>, <META>, <LINK>, <STYLE> e etc. A Tag TITLE Por exemplo para definir um título para a página podemos digitar qualquer caractere entre a TAG <TITLE>, como por exemplo: <TITLE> ::# título # :: </TITLE> A Tag BASE Através da Tag <BASE> podemos definir a URL padrão de uma página com o endereço completo do site, como por exemplo http://www.site.com/teste.html. O exemplo abaixo mostra um título personalizado e a URL base http://www.site.com para a página teste.html, repare que ao passar o mouse sobre o link a será mostrado a URL http://www.site.com/teste.html como mostra a imagem abaixo. Cabeçalho do documento 1
<html> <title> ::# título # :: </title> <base href=http://www.site.com> <body> <a href=pagina.html> link </a> </body> </html> A Tag META O elemento META contém informações gerais (meta-informação) sobre a página que na maior parte das vezes a Tag META é utilizada para fornecer informações para navegadores ou sites de busca descrevendo o conteúdo da página tais como descrição da página, palavras chaves, autor, url, tempo de recarregamento da página e etc. Descrição da página <META NAME="description" content="este é um site de música"> Palavras chaves Cabeçalho do documento 2
<META NAME="keywords" content="pop, Rock, Heavy Metal"> Autor <META NAME="autor" content="joão da Silva"> Direitos autorais <META NAME="copyright" content="nome DO SITE"> URL do site <META NAME="url" content="http://www.site.com"> Tempo de recarregamento de uma página em segundos <META HTTP-EQUIV="Refresh" content="5"> ou <META HTTP-EQUIV="Refresh" content="5;http://www.site.com/pagina.html"> Linguagem <META HTTP-EQUIV="Content-Language" content="pt-br"> Codificação de caracteres utf-8 (universal) ou iso-8859-1 <META HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8"> Cabeçalho do documento 3
ou <META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1"> <html> <title> :: META Tags :: </title> <META NAME="description" content="este é um site de música"> <META NAME="keywords" content="pop, Rock, Heavy Metal"> <META NAME="autor" content="joão da Silva"> <META NAME="copyright" content="nome DO SITE"> <META NAME="url" content="http://www.site.com"> <META HTTP-EQUIV="Refresh" content="5"> <META HTTP-EQUIV="Content-Language" content="pt-br"> <META HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8"> <body> <h1>meta Tags</h1> </body> </html> A Tag LINK A tag LINK é usada para referenciar um arquivo externo como ícones (.ico) ou arquivos CSS (.css) como mostra os exemplos abaixo: Cabeçalho do documento 4
Exemplo para um ícone: <html> <title> :: Icone :: </title> <link rel="shortcut ICON" href=icone.ico"> <body> <h1>icone</h1> </body> </html> Você pode usar o programa gráfico Gimp para criar o ícone e salvar o arquivo com a extensão.ico no mesmo diretório da página para isso abra o Gimp clicando em : Aplicações Gráficos Gimp Agora crie um arquivo novo com 30 pixels de largura e 30 de altura, aumente o tamanho do ZOOM para 200% ou 400% e faça seu ícone. Cabeçalho do documento 5
Agora salve o ícone clicando no menu Arquivo - Salvar Como, digite o nome para o arquivo.ico e escolha o mesmo diretório da página HTML e escolha em Tipo de Preenchimento (Por Extensão) a opção Ícone do Microsoft Windows. Cabeçalho do documento 6
Apenas confirme clicando em OK a opção de 256 cores Agora abra o arquivo HTML pelo navegador e será mostrado o ícone na barra de endereço. Cabeçalho do documento 7
Exemplo para um arquivo CSS externo: Crie um arquivo chamado Css.html e insira o código abaixo: Css.html <html> <title> :: Arquivo CSS :: </title> <link href="padrao.css" rel="stylesheet" type="text/css"> <body> <font class="font1"> Fonte 1 </font> <br> <font class="font2"> Fonte 2 </font> </body> Cabeçalho do documento 8
</html> Agora crie o arquivo Padrao.css no mesmo diretório do arquivo Css.html, onde é criado duas classes de fontes font1(cor: verde, tamanho: 20 pixels e fonte: Sans-serif e Verdana) e font2 (cor: vermelho, tamanho: 30 pixels e fonte: Sans-serif e Arial. Repare que para criar uma classe é usado um ponto. antes do nome da classe, sendo que isto é muito útil para criação de um site, pois você pode criar várias classes e quando você alterar o arquivo Padrao.css todas as páginas do site serão alteradas automaticamente. Padrao.css.font1 {color:green; font-size:20px; font-family:sans-serif, Verdana;}.font2 {color:red; font-size:30px; font-family:sans-serif, Arial;} Agora abra o arquivo Css.html é verá que a formatação foi aplicada no texto Fonte 1 e Fonte 2 através da opção CLASS da Tag <FONT> (<font class="font1"> Fonte 1 </font> e <font class="font2"> Fonte 2 </font>). A Tag STYLE Podemos usar a Tag <STYLE> dentro da Tag <HEAD> usando um arquivo externo como foi mostrado anteriormente com a Tag <LINK>. <link href="meu_estilo.css" rel="stylesheet" type="text/css"> Cabeçalho do documento 9
Ou usando a Tag <STYLE> internamente no próprio arquivo HTML, podendo ser especificada dentro da Tag <HEAD>, onde será aplicado em todas as Tags especificadas ou no corpo da página dentro da Tag <BODY>, onde será aplicado somente em uma Tag HTML especificada como mostra os exemplos abaixo: Exemplo da Tag <STYLE> entre as Tags <HEAD>...</HEAD> Onde: body {background-color: yellow} É a formatação da cor de fundo da página na Tag body (corpo); p {font-size: 20px; color:green; background-color: orange} É a formatação da Tag p (parágrafo), onde é aplicado o tamanho de 20 pixels, cor de verde, e cor de fundo laranja; hr {background-color: red; width: 200px; height: 1px; border:0} É a formatação da Tag hr (linha horizontal), onde é aplicado a cor de fundo vermelha, largura de 200 pixels, altura de 1 pixel e borda 0. <html> <style type="text/css"> body {background-color: yellow} p {font-size: 20px; color:green; background-color: orange} hr {background-color: red; width: 200px; height: 1px; border:0} </style> <body> <p> Texto 1</p> <p> Texto 2</p> <hr noshade> </body> 10
</html> Abra o arquivo HTML e veja o resultado no navegador onde o CSS é aplicado na Tag <body> e em todas ocorrências das Tags <p> e <hr>, como mostra a imagem abaixo: Exemplo da Tag <STYLE> entre as Tags <BODY>...</BODY> A única diferença de aplicar o CSS no corpo da página é que a Tag <STYLE> é aplicada diretamente nas Tags HTML no corpo da página entre as Tags <BODY>...</BODY> ao invés das Tags <HEAD>...</HEAD> no cabeçalho. <html> <body style="background-color: yellow"> <p style="font-size: 20px; color:green; background-color: orange"> Texto 1</p> <p> Texto 2</p> 11
<hr noshade style="background-color: red; width: 200px; height: 1px; border:0"> </body> </html> Abra o arquivo HTML e veja o resultado no navegador onde o CSS é aplicado somente na Tag <p> que é especificada na Tag <STYLE>, como mostra a imagem abaixo: 12