Guia de HTML Básico: Construindo a Estrutura da Web
Olá, futuro(a) desenvolvedor(a)! Bem-vindo(a) ao mundo do HTML.
Pense no HTML como o esqueleto de qualquer site que você visita. Ele não define as cores ou as fontes (isso é trabalho para o CSS), mas define a estrutura: onde fica o título, os parágrafos, as imagens e os links.
O que é HTML?
HTML significa HyperText Markup Language (Linguagem de Marcação de Hipertexto). E a palavra-chave aqui é Linguagem de Marcação.
Importante: HTML não é uma linguagem de programação. Ele não executa lógicas complexas. Em vez disso, ele “marca” ou “etiqueta” o conteúdo para dizer ao navegador como exibi-lo.
Usamos o HTML para criar elementos, que são os blocos de construção de uma página.
A Anatomia de um Elemento HTML
Todo o conteúdo de uma página HTML é construído com elementos. Vamos analisar a estrutura de um elemento de parágrafo:
HTML
<p>Este é um parágrafo de exemplo.</p>
As partes principais são:
- Tag de Abertura (
<p>): Indica onde o elemento começa. É formada pelo nome do elemento (pde parágrafo) dentro de colchetes angulares (<>). - Conteúdo: O texto, imagem ou outro conteúdo que o elemento afeta. No nosso caso, é a frase “Este é um parágrafo de exemplo.”.
- Tag de Fechamento (
</p>): Indica onde o elemento termina. É igual à tag de abertura, mas com uma barra (/) antes do nome.
Dica de Ouro: Esquecer de fechar uma tag é um dos erros mais comuns! O navegador pode tentar corrigir, mas muitas vezes o resultado é imprevisível. Sempre feche suas tags.
Atributos: Adicionando Informações Extras
Os atributos fornecem informações adicionais sobre um elemento e são sempre definidos na tag de abertura.
A sintaxe é nome="valor".
HTML
<a href="https://www.google.com">Este é um link para o Google</a>
Neste exemplo:
- O elemento é
<a>(âncora, usado para links). - O atributo é
href(hypertext reference). - O valor do atributo é
"https://www.google.com", o destino do link.
Aninhando Elementos (Um Dentro do Outro)
Você pode colocar elementos dentro de outros. Isso é chamado de aninhamento. É fundamental para criar estruturas complexas.
HTML
<p>Meu gatinho é <strong>muito</strong> mal-humorado.</p>
Aqui, o elemento <strong> (que deixa o texto em negrito/forte) está aninhado dentro do elemento <p>.
A regra é simples: o último elemento que você abre é o primeiro que você fecha.
❌ Incorreto: <p>Meu gatinho é <strong>muito mal-humorado.</p></strong>
✅ Correto: <p>Meu gatinho é <strong>muito</strong> mal-humorado.</p>
Elementos Vazios: Nem Todo Mundo Precisa de um Par
Alguns elementos não têm conteúdo para “envolver”. Eles existem para inserir algo na página. São chamados de elementos vazios e não possuem tag de fechamento.
O exemplo mais comum é a imagem <img>:
HTML
<img src="imagens/logo-da-escola.png" alt="Logotipo da nossa instituição">
Este elemento possui dois atributos:
src: (source) O caminho para o arquivo de imagem.alt: (alternative text) Um texto descritivo que aparece se a imagem não carregar e é essencial para acessibilidade (leitores de tela para deficientes visuais).
Outro exemplo comum é o <br>, que força uma quebra de linha.
A Estrutura Básica de um Documento HTML
Agora que conhecemos os blocos, vamos ver como eles montam a casa inteira. Todo arquivo HTML segue esta estrutura básica:
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minha Página Incrível</title>
</head>
<body>
<h1>Meu Título Principal</h1>
<p>Um parágrafo explicando o assunto.</p>
<img src="caminho/para/imagem.jpg" alt="Uma imagem de exemplo">
</body>
</html>
Vamos entender cada parte:
<!DOCTYPE html>: A primeira linha de todas. Apenas diz ao navegador: “Este é um documento HTML5”. É obrigatório.<html>: O elemento raiz que envolve todo o conteúdo da página. O atributolang="pt-br"informa que o idioma principal da página é o português do Brasil.<head>: A “cabeça” do documento. Contém metadados e informações que não são visíveis na página, como:<meta charset="UTF-T-8">: Define o padrão de caracteres para que acentos e símbolos como “ç” funcionem corretamente. Essencial!<meta name="viewport"...>: Garante que sua página se adapte a diferentes tamanhos de tela (como celulares).<title>: O texto que aparece na aba do navegador.
<body>: O “corpo” do documento. Tudo o que você quer que o usuário veja (textos, imagens, links, vídeos) deve estar aqui dentro.
Ferramentas Essenciais para Começar
Antes de praticar, você precisa de duas coisas:
- Um Editor de Código: Esqueça o Bloco de Notas. Use um editor que ajude com cores e sugestões. A recomendação padrão da indústria é o Visual Studio Code (VS Code). É gratuito e poderoso.
- Um Navegador Web: Google Chrome, Mozilla Firefox, Microsoft Edge. Você já tem um!
Exercícios Práticos
Exercício 1: “Olá, Mundo!”
- Abra o VS Code.
- Crie um novo arquivo e salve-o como
index.html. - Copie e cole a estrutura básica que vimos acima.
- Dentro do
<body>, mude o<h1>e o<p>para:<h1>Olá, Mundo!</h1><p>Esta é a minha primeira página web criada no curso de Desenvolvimento de Sistemas.</p>
- Salve o arquivo.
- Encontre o arquivo no seu computador e dê um duplo clique. Ele abrirá no seu navegador!
Exercício 2: Adicionando Conteúdo
Agora, vamos evoluir o mesmo arquivo index.html. Modifique o <body> para que ele contenha:
- Um título principal (
<h1>) sobre um hobby seu. - Um parágrafo (
<p>) descrevendo por que você gosta desse hobby. - Dentro do parágrafo, deixe uma palavra importante em negrito usando a tag
<strong>. - Abaixo do parágrafo, adicione uma imagem relacionada ao seu hobby usando a tag
<img>. (Pode pegar qualquer imagem da internet para testar).
Exemplo de como o body poderia ficar:
HTML
<body>
<h1>Meu Hobby: Fotografia</h1>
<p>Eu amo fotografia porque ela me permite capturar momentos <strong>únicos</strong> e contar histórias através de imagens.</p>
<img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32" alt="Uma câmera fotográfica antiga em cima de um mapa" width="500">
</body>
Nota: O atributo
width="500"no exemplo da imagem não é a melhor prática (faremos isso com CSS), mas é útil para controlar o tamanho da imagem por enquanto.
Compartilhe:
2 comments