1. Introdução ao documento HTML
Bora entender como são estruturados os documentos HTML. Como começa qualquer documento HTML? Cada documento HTML tem uma estrutura que é composta de três tags aninhadas: html, head e body. Isso é padrão, exemplo:
<!DOCTYPE html>
<html>
<head>
Tags de serviço
</head>
<body>
Documento principal
</body>
</html>
Tudo o que é exibido no navegador está dentro da tag de par body (corpo do documento). Dentro da tag head estão as tags com informações de serviço/auxiliares para o navegador.
Também é comum (não obrigatório) escrever no início do documento o tipo do documento — DOCTYPE, pra ajudar o navegador a interpretar melhor os erros. Muitos navegadores conseguem exibir documentos com layout quebrado de forma razoável.
2. Exemplo de documento HTML
O documento HTML é a base de qualquer página web. Ele informa ao navegador como a página deve ser exibida. Aqui vai um exemplo simples de documento HTML:
<!DOCTYPE html>
<html>
<head> <title>Nome da página</title> </head>
<body> <h1>Olá, mundo!</h1> <p>Essa é minha primeira página web.</p> </body>
</html>
Partes principais de um documento HTML
Essa linha é chamada de declaração do tipo do documento (doctype). Ela diz ao navegador que o documento foi escrito em HTML5, a versão mais recente da linguagem HTML. Isso é importante para exibir a página corretamente.
<html>
A tag <html> abre o documento HTML. Todo o conteúdo da página web deve estar dentro desta tag. Ela representa o início e o fim do documento HTML.
<head>
A tag <head> contém informações de serviço sobre a página. Essas informações não são exibidas diretamente na página web, mas são importantes para navegadores e mecanismos de busca.
A tag <title> define o nome da página, que é exibido na aba do navegador. É a primeira coisa que um usuário vê ao abrir a página.
<body>
A tag <body> contém todo o conteúdo visível da página web: texto, imagens, links, tabelas e por aí vai. Tudo o que o usuário vê na tela está dentro dessa tag.
<h1>Olá, mundo!</h1>
A tag <h1> representa um cabeçalho de primeiro nível. É utilizada para os cabeçalhos mais importantes da página. O texto dentro dessa tag é exibido em uma fonte grande e em negrito.
<p>Essa é minha primeira página web</p>
A tag <p> representa um parágrafo de texto. Ela é usada para separar o texto em blocos lógicos. O texto dentro dessa tag é exibido como um parágrafo normal.
GO TO FULL VERSION