pt flag
pt flag

Aula 5 - Programando com HTML: Guia Prático para Iniciantes

Se você está começando a aprender desenvolvimento web, o HTML é o primeiro passo. Neste post, você vai aprender o que é HTML, para que serve e como criar suas primeiras páginas com exemplos simples e objetivos.

DESENVOLVIMENTO WEB

Prof. Leonardo Gomes Guidolin

4/9/20251 min ler

🔎 O que é HTML?

HTML significa HyperText Markup Language (Linguagem de Marcação de Hipertexto). Ele é o alicerce da web, usado para estruturar o conteúdo de páginas que acessamos diariamente.

Com o HTML, você pode criar:

  • Títulos

  • Parágrafos

  • Imagens

  • Links

  • Listas

  • Tabelas e muito mais

📦 Estrutura Básica de um Documento HTML

Todo arquivo HTML segue uma estrutura base. Veja um exemplo:

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="UTF-8">

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

</head>

<body>

<h1>Olá, mundo!</h1>

<p>Essa é a minha primeira página em HTML.</p>

</body>

</html>


Explicando o código:

  • <!DOCTYPE html>: Informa ao navegador que o documento é HTML5.

  • <html>: Elemento raiz da página.

  • <head>: Contém informações da página (título, codificação, etc).

  • <body>: Onde colocamos o conteúdo visível da página.

🏷️ Principais Tags HTML

<h1> a <h6> Títulos e subtítulos (h1 é o maior)

<p> Parágrafo de texto

<a> Link para outra página

<img> Exibe uma imagem

<ul>, <ol>, <li> Listas (não ordenadas e ordenadas)

<div> Bloco genérico de conteúdo

<span> Conteúdo em linha (inline)

<br> Quebra de linha

🖼️ Exemplo: Página com Imagem e Link

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="UTF-8">

<title>Sobre Mim</title>

</head>

<body>

<h1>Bem-vindo ao meu site</h1>

<p>Me chamo João e sou estudante de programação.</p>

<img src="foto.jpg" alt="Minha foto" width="200">

<p>Conheça meu <a href="https://codandodozero.blog">blog de programação</a></p>

</body>

</html>

📈 Dicas de SEO para HTML

SEO (Search Engine Optimization) é essencial para que sua página seja encontrada no Google. Veja algumas práticas recomendadas:

  • Use títulos com palavras-chave em <title> e <h1>.

  • Adicione descrições relevantes nas imagens com o atributo alt.

  • Estruture bem o conteúdo usando headings hierárquicos (<h1>, <h2>, etc).

  • Mantenha URLs amigáveis e utilize links internos e externos.

🚀 Próximos Passos

Agora que você entendeu como programar com HTML, o próximo passo é aprender CSS, a linguagem responsável por deixar seu site bonito.

✅ Conclusão

Programar com HTML é o primeiro passo para criar páginas web incríveis. Com prática, você vai dominar essa linguagem e estar pronto para evoluir para estilos com CSS e interatividade com JavaScript.

Continue acompanhando o blog codandodozero.blog para mais tutoriais, dicas práticas e guias para aprender a programar do zero!