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
- Próxima Página: Títulos de Páginas
- Página Anterior: Começando
- Declarações – Definindo o Tipo do Documento (Tutorial Avançado de HTML)
Referência
Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.
Codando 
Muito legal!
Parece coisa de outro mundo!
O site explica tudo muito bem e se seguirmos tudo da forma certa conseguiremos bons resultados. É aí que as coisas começaram a complicar, mas até agora foi de fácil compreensão. Difícil mesmo deve ser lembrar todas essas tags, atributos e elementos, mas nada que praticar não resolva.
Obrigado a todos os idealizadores do curso, estou realmente aprendendo bastante!
Fico muito feliz que você esteja aprendendo, Mike.
E não existem tantas tags pra você decorar. Você só vai precisar se lembrar das mais utilizadas. Quanto as outras, você só precisa saber que existem e ter o google por perto, pra quando precisar. =D
Continue aprendendo!
Olá Elomar,
muito interessante esse seu curso ! Parabéns pela inciativa. Já conheço o assunto, mas estou acompanhando desde o primeiro capitulo. Sou um recente usuário de mac e estou usando o CODA para ir editando o código, nele ainda não achei como usar a opção salvar como “UTF-8” ela será necessária para que o código fique completo e entenda a tag meta charset UTF-8 ?
Aguardo sua resposta !
Abraços !
Olá, Rodrigo
Obrigado!
Não uso Mac, nunca usei coda, por isso não tenho muito como te ajudar. Mas essa opção, na maioria dos programas, se não estiver na janela de “salvar” vai estar em “preferências” ou “configurações”. Se não encontrar em lugar algum, deve ser o padrão. 😉
Quero saber qual a tag que utilizo para por meu título passando >>>>>>>>>>para aparecer aki do lado
<< ! sei la o nome disso ! podem me ajudar
terminei meu curço de web designer e a tag e texto
<marquee
muito obrigado pela informacao. agora so capaz de diferenciar as tags dos atributos.
Uso chrome, esses navegador salva direto em charset UTF-8?
Outra pergunta, é pra voltar o arquivo em txt e colar o procedimento que pediu e depois salvar novamente com html?