Documento básico e seus componentes A estrutura de um documento HTML apresenta os seguintes componentes: <HTML> <HEAD><TITLE>Titulo do Documento</TITLE></HEAD> <BODY> texto, imagem, links, ... </BODY> </HTML> As etiquetas HTML não são sensíveis à caixa. Traduzindo: tanto faz escrever <HTML>, <Html>, <html>, <HtMl>, ... Os documentos se dividem em duas seções principais, que veremos a seguir. A seção <HEAD> <HEAD> contém informações sobre o documento. O elemento <TITLE>, por exemplo, define um título, que é mostrado no alto da janela do browser. Nesta página, por exemplo, está definido assim: <HEAD><TITLE>A seção <HEAD> - Tutorial HTML do ICMC-USP</TITLE></HEAD> Todo documento WWW deve ter um título; esse título é referenciado em buscas pela rede, dando uma identidade ao documento. Para ver na prática a importância do título, se você adicionar esta página aos seus Favoritos (Bookmarks), o resultado será semelhante a este: Note que o título da página se tornou a âncora de atalho para ela. Por isso é sugerido que os títulos dos documentos sejam sugestivos, evitando-se títulos genéricos como "Introdução". O título também é bastante significativo para a listagem de uma página nos resultados de pesquisas nos catálogos da Internet. Além do título, <HEAD> contém outras informações de importância para os robôs de pesquisa, indicadas nos campos <META>. Campos <META> Os campos <META> têm dois atributos principais: NAME, indicando um nome para a informação HTTP-EQUIV, que faz uma correspondência com campos de cabeçalho do protocolo HTTP; a informação desse campo pode ser lida pelos browsers, e provocar algumas ações. <HEAD> <TITLE>Título do Documento</TITLE> <META NAME="nome" CONTENT="valor"> <META HTTP-EQUIV="nome" CONTENT="valor"> </HEAD> Este documento, por exemplo, tem as seguintes informações: <HEAD><META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1"><META HTTP-EQUIV="pragma" CONTENT="no-cache"><TITLE>A seção <HEAD> - Tutorial HTML do ICMC-USP</TITLE><META NAME="Author" CONTENT="Maria Alice Soares de Castro -
[email protected]"><META NAME="Generator" CONTENT="Namo WebEditor v5.0"><META NAME="Description" CONTENT="Manual de referência para webdesigners e desenvolvedores de sites"><META NAME="KeyWords" CONTENT="HTML, WWW, Webpublishing, Internet, Webdesign"><LINK REL="stylesheet" HREF="folhatut.css"></HEAD> Alguns valores dos atributos META NAME são inseridos automaticamente por alguns editores, por exemplo: Generator e Author. Os campos Description e KeyWords ajudam a classificação da página em algumas ferramentas de busca. Essas informações não têm qualquer efeito na apresentação da página, mas servem como uma explicação ou documentação sobre as informações contidas nela. Há poucos valores para META HTTP-EQUIV em uso. O mais comum é content-type, que indica o conjunto de caracteres usado na página: essa informação ajuda o browser a exibir corretamente os caracteres especiais que estiverem presentes no texto. Um exemplo de uso comum do atributo HTTP-EQUIV é promover a mudança automática de páginas, atribuindo-lhe o valor Refresh. Veja este exemplo.Agora que você voltou do exemplo, veja como esse efeito é conseguido: <HEAD> <TITLE> ... </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="segundos; URL= pagina.html"> </HEAD> onde: pagina.html é a página a ser carregada automaticamente segundos é o número de segundos passados até que a página indicada seja carregada. Como foi comentado no exemplo, o efeito é interessante, mas para que serve? Se não pensamos em uma finalidade útil para esse efeito, caímos na tentação de usá-lo “à toa”. A aplicação mais utilizada é a atualização automática de um documento que, por exemplo, tenha uma foto produzida por uma câmara de vídeo: pode-se forçar, com o Refresh, a atualização dessa página, mostrando para o leitor sempre uma imagem mais atual de algum evento sendo focalizado pela câmara. Outra utilização é em “chats”, ou em páginas que desviem a navegação por documentos desenvolvidos para browsers avançados. A seção <BODY> Tudo que estiver contido em <BODY> será mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos. Veja um documento básico em HTML. Atributos de <BODY> Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d’água): <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL"> onde: BGCOLOR cor de fundo (quando não é indicada, o browser irá mostrar uma cor padrão, geralmente o cinza ou branco; alguns editores poderão estabelecer o branco para o fundo da página) TEXT cor dos textos da página (padrão: preto) LINK cor dos links (padrão: azul) ALINK cor dos links, quando acionados (padrão: vermelho) VLINK cor dos links, depois de visitados (padrão: azul escuro ou roxo) Seus valores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece uma interface bem amigável através da qual escolhemos as cores desejadas, sem nos preocuparmos com números esdrúxulos tais como #FF80A0. Browsers que seguem a definição de HTML 3.2 em diante, também aceitam 16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR="BLUE". Porém, browsers mais antigos não apresentarão as cores indicadas. BACKGROUND indica o URL da imagem a ser replicada no fundo da página, como uma marca d’água. Veja o exemplo de uma página cuja imagem de fundo é . Para efeitos de design, é possível fixar a imagem de fundo, para que ela não se mova junto com o texto ao se rolar a página. Esse efeito não é padrão e funciona no Internet Explorer. Cabeçalhos Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>: <H1>Este é um cabeçalho de nível 1</H1><H2>Este é um cabeçalho de nível 2</H2> <H3>Este é um cabeçalho de nível 3</H3><H4>Este é um cabeçalho de nível 4</H4><H5>Este é um cabeçalho de nível 5</H5><H6>Este é um cabeçalho de nível 6</H6> Esses cabeçalhos são mostrados da seguinte forma: Este é um cabeçalho de nível 1 Este é um cabeçalho de nível 2 Este é um cabeçalho de nível 3 Este é um cabeçalho de nível 4 Este é um cabeçalho de nível 5 Este é um cabeçalho de nível 6 Aninhamento de cabeçalhos Os cabeçalhos não podem ser aninhados, isto é, a formatação: <H2>Este é <H1>um cabeçalho de ní
