Apesar de HTML básico ser texto puro, nós precisamos de um pouco mais pra fazer um documento HTML válido.
Tags
A estrutura básica de um documento HTML inclui tags, que cercam conteúdo e dão significado a ele.
Modifique seu documento para que ele fique assim:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
Essa é minha primeira página web
</body>
</html>
Agora salve seu documento, volte para o navegador e clique em “Atualizar” (que irá recarregar a página).
A aparência não mudou em nada, porque a função do HTML é dar significado ao conteúdo, e não modificar seu visual. Esse exemplo definiu alguns dos elementos fundamentais numa página web.
A primeira linha no topo que começa com <!DOCTYPE… serve pra avisar ao navegador que você sabe o que tipo de conteúdo está enviando. Você pode até pensar que na verdade ainda não sabe, mas é importante colocar isso aÃ. Se você não fizer isso, os navegadores vão trabalhar no “modo sujo” e agir de uma maneira muito peculiar. Não se preocupe com isso agora, você vai aprender mais sobre “tipos de documento” no Tutorial Avançado de HTML. Por enquanto, só lembre-se de colocar essa linha no topo de suas páginas web e seja feliz. Esse elemento é obrigatório em um documento XHTML válido (o que é um documento válido, você vai ver depois. =D).
Voltando ao assunto, <html> é a tag de abertura que começa tudo e diz ao navegador que tudo que estiver entre ela e a tag de fechamento </html> é um documento HTML.
O elemento head (aquele que começa com a tag de abertura <head> e termina com a tag </head>) contém informações sobre a página. A informação no elemento head não aparece na janela do navegador.
A tag meta tem vários usos, que você vai conhecer melhor no tutorial intermediário. Nessa página, ela está indicando ao navegador qual o conjunto de caracteres do conteúdo sendo enviado. Leia esse texto sobre conjuntos de caracteres. Quando você envia texto com caracteres acentuados ou ç, você deve especificar o charset UTF-8, como nós fizemos aà em cima.
Em alguns tutoriais mais antigos, você vai ver “ã” ou “ç” substituÃdos por códigos como “ã” ou “ç”, chamados de html entities. Isso é desnecessário quando você salva seu arquivo como UTF-8 (vide página anterior) e declara o charset UTF-8. Pra conhecer os usos dessas entities, leia esse texto do Revolução.
O que estiver entre <body> e </body> é o conteúdo principal do documento que vai aparecer na janela do navegador.
Fechando Tags
</body> e </html> fecham suas respectivas tags. TODAS as tags HTML devem ser fechadas. Apesar de versões mais antigas do HTML permitirem, por preguiça, que algumas tags não fossem fechadas, os padrões mais recentes requerem que todas as tags sejam fechadas. Esse é, de qualquer forma, um bom hábito.
Nem todas as tags tem tags de fechamento como essa (<html></html>). Algumas que não cercam conteúdo fecham elas mesmas. A tag de quebra de linha, por exemplo, é assim: <br />. Mais à frente nós veremos mais desses exemplos. Tudo que você precisa lembrar é que todas as tags precisam ser fechadas e a maioria delas (as que tem conteúdo dentro) estão no formato tag de abertura > conteúdo > tag de fechamento.
Atributos
Tags também podem ter atributos, que são pedaços extra de informação. Atributos aparecem dentro da tag de abertura e seu valor está sempre dentro de aspas duplas. Eles se parecem com <tag atributo=”valor”>Conteúdo</tag>. Nós veremos exemplos de tags com atributos nas próximas lições.
Elementos
Tags servem quase que somente pra marcar o inÃcio e o fim de um elemento. Elementos são as partes que fazem as páginas web. Você pode dizer, por exemplo, que tudo que está entre as tags <body> e </body> (incluindo as próprias tags) é o elemento body. Um outro exemplo: como ‘<title>’ e ‘</title>’ são tags, ‘<title>TÃtulo</title>’ é um elemento tÃtulo.
Os elementos obrigatórios numa página xhtml são <DOCTYPE…, <head>, <title> e <body>.
Páginas Relaciondas
Referência
Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.
