Introdução ao HTML: Estrutura Básica de uma Página HTML

O que é HTML

Certo, pessoal, vamos mergulhar no mundo do HTML. HTML significa HyperText Markup Language, e é a linguagem padrão usada para criar páginas web. Pense no HTML como o esqueleto de um prédio. Ele fornece a base e a estrutura para o conteúdo que será exibido no navegador… Com HTML, você pode adicionar texto, imagens, links, vídeos e muito mais à sua página web.

Estrutura Básica de uma Página HTML

Agora, toda página HTML segue uma estrutura básica… Vamos desmembrar passo a passo para que você possa ver como tudo se encaixa.

Doctype

Primeiro de tudo, a declaração Doctype. Isso pode parecer técnico, mas é bem simples. O Doctype informa ao navegador qual versão do HTML você está usando… Como estamos usando o HTML5, a declaração é direta:

<!DOCTYPE html>

1 2	<!DOCTYPE html>

Assim mesmo. Esta linha vai no topo do seu documento HTML.

Tags de Início e Fim

Em seguida, vamos falar sobre tags… No HTML, usamos tags para marcar o início e o fim dos elementos. Colchetes angulares são usados para fechar as tags, assim: < >. A maioria das tags vem em pares: uma tag de abertura e uma tag de fechamento… A tag de fechamento é igual à tag de abertura, mas com uma barra (/) antes do nome do elemento. Por exemplo:

<p>Este é um parágrafo.</p>

1 2	<p>Este é um parágrafo.</p>

Aqui, <p> é a tag de abertura e </p> é a tag de fechamento… Simples, né?

Elementos do Cabeçalho

Seguindo em frente, temos a seção <head> de um documento HTML. Esta parte contém meta-informações sobre a página… Pense nela como os bastidores onde configuramos coisas como o título da página, conjunto de caracteres, estilos, scripts e outras meta tags. Aqui está um exemplo do que você pode encontrar na seção <head>:

<head>
    <meta charset="UTF-8">
    <title>Minha Primeira Página HTML</title>
</head>

<head>

<title>Minha Primeira Página HTML</title>

</head>

A tag <meta charset=”UTF-8″> especifica a codificação de caracteres para o documento…

A tag <title> define o título da página, que aparece na aba do navegador.

Elementos do Corpo

Agora vamos para a parte divertida—a seção <body>. É aqui que vai o conteúdo real da página web… Tudo o que você quer exibir no navegador, como texto, imagens e links, será colocado aqui. Aqui está um exemplo simples de uma seção <body>:

<body>
    <h1>Bem-vindo ao Meu Site</h1>
    <p>Este é um parágrafo de texto na minha primeira página HTML.</p>
</body>

<body>

<h1>Bem-vindo ao Meu Site</h1>

<p>Este é um parágrafo de texto na minha primeira página HTML.</p>

</body>

A tag <h1> é uma tag de cabeçalho usada para títulos principais…

A tag <p> é uma tag de parágrafo usada para blocos de texto.

Juntando Tudo

Certo, vamos juntar todas essas partes para criar um documento HTML completo… Veja como fica:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Minha Primeira Página HTML</title>
</head>
<body>
    <h1>Bem-vindo ao Meu Site</h1>
    <p>Este é um parágrafo de texto na minha primeira página HTML.</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Minha Primeira Página HTML</title>

</head>

<body>

<h1>Bem-vindo ao Meu Site</h1>

<p>Este é um parágrafo de texto na minha primeira página HTML.</p>

</body>

</html>

Neste exemplo:

A declaração <!DOCTYPE html> define o tipo e a versão do documento HTML…

A tag <html> envolve todo o documento HTML…

A seção <head> contém meta-informações sobre o documento…

A seção <body> contém o conteúdo que será exibido no navegador.

Entendendo e usando essa estrutura básica, você pode começar a criar suas próprias páginas web com HTML… Lembre-se, HTML é a base do desenvolvimento web e dominá-lo abrirá portas para tópicos e tecnologias mais avançadas.