HTML
📘 Bem-vindo ao Curso
HTML do Zero ao Avançado
Seja muito bem-vindo à Academy Code Christ!
Você está começando uma jornada para aprender uma das principais tecnologias utilizadas na construção da Web: o HTML.
Talvez este seja o seu primeiro contato com programação. Talvez você já tenha visto alguns códigos e queira finalmente entender como eles funcionam.
Não importa se você está começando agora ou se já possui algum conhecimento: este curso foi pensado para conduzir você passo a passo, dos fundamentos à construção de um projeto completo.
🌐 Por onde vamos começar?
Antes de construir páginas complexas, precisamos entender os fundamentos.
Você vai descobrir o que é HTML, como uma página é estruturada, como o navegador interpreta o código e quais ferramentas podem ser utilizadas para criar e visualizar seus primeiros projetos.
Depois, vamos avançar gradualmente para a criação e organização de conteúdos, utilização de elementos semânticos, acessibilidade, SEO, formulários, recursos do HTML5 e outros conceitos importantes para quem deseja construir páginas web bem estruturadas.
No final da jornada, vamos reunir os conhecimentos aprendidos em um projeto completo, passando pelo planejamento, organização dos arquivos, criação das páginas, navegação, formulário, validação, testes e implantação.
🧩 Como o curso está organizado?
Para tornar o aprendizado mais organizado, o curso foi dividido em 6 módulos. Cada módulo representa uma nova etapa da nossa jornada. O link para os módulos estará no final de cada módulo.
Módulo 1 — Introdução ao HTML e Fundamentos da Web
Vamos começar do princípio: entender o que é HTML, como a Web funciona, como uma página HTML é formada e quais ferramentas utilizaremos durante o curso. Este módulo está nesta página os demais estarão em outras páginas.
Módulo 2 — Trabalhando com Conteúdo
Depois de conhecer os fundamentos, vamos aprender a trabalhar com títulos, parágrafos, textos, listas, imagens, vídeos, links e outros tipos de conteúdo.
Módulo 3 — Estrutura Semântica e Organização Avançada
Aqui vamos aprofundar a organização das páginas utilizando HTML5, conhecendo elementos semânticos e entendendo a importância da acessibilidade, da semântica e da estrutura adequada para SEO.
Módulo 4 — Formulários e Interatividade
Nesta etapa, vamos aprender a criar formulários, trabalhar com diferentes tipos de campos, validação nativa do HTML5, labels e boas práticas para coleta e envio de informações.
Módulo 5 — Recursos Avançados e APIs do HTML5
Depois de dominar os fundamentos, conheceremos recursos mais avançados do HTML5, incluindo mídia, canvas, armazenamento local, geolocalização e conceitos como Progressive Enhancement.
Módulo 6 — Projeto Final: Criando um Site Completo
🎯 Aprender fazendo
A proposta deste curso não é simplesmente apresentar uma lista de tags para você decorar.
Queremos que você entenda o que está fazendo.
Por isso, durante o curso, não fique apenas lendo os
exemplos. Abra o editor, escreva os códigos, faça alterações e observe o que
acontece.
Para facilitar esse processo, você pode utilizar o Code
Editor da Mr Digitals, um editor online que permite trabalhar com HTML, CSS e
JavaScript e visualizar o resultado diretamente no navegador.
👉 Acesse o Code Editor ecomece a praticar
Você pode abrir o editor enquanto acompanha as aulas e
reproduzir os exemplos apresentados no curso.
Por exemplo, quando encontrarmos um código como:
<h1>Olá, mundo!</h1>
<p>Esta é minha primeira página HTML.</p>
não fique apenas olhando para o exemplo.
Digite o código no editor, execute e veja o resultado.
Depois, experimente fazer alterações:
<h1>Meu primeiro site</h1>
<p>Estou aprendendo HTML!</p>
Mude o texto, adicione novos elementos, remova partes do
código e veja como a página se comporta.
É dessa forma que você começa a desenvolver não apenas o
conhecimento da linguagem, mas também a prática de programação.
💡 Dica:
Sempre que possível, faça os exercícios diretamente no editor. Testar, errar, corrigir e experimentar faz parte do aprendizado.
Não tenha medo de errar.
Um erro no código não significa que você não consegue programar. Ele faz parte do processo de aprendizagem. Leia a mensagem de erro, observe o código, faça testes e tente novamente.
🚀 Uma jornada que começa aqui
Ao terminar este curso, você terá construído uma base sólida em HTML e terá desenvolvido um projeto completo utilizando os principais conceitos estudados ao longo da jornada.
HTML é uma das portas de entrada para o desenvolvimento web, e o conhecimento adquirido aqui servirá como base para seus próximos passos com CSS, JavaScript e outras tecnologias da Web.
Prepare seu editor de código, abra o navegador e venha aprender na prática. Vamos começar essa jornada? 🚀
📚Módulo 1
Introdução ao HTML e Fundamentos da Web
🧩 O que é HTML?
HTML significa HyperText Markup Language — ou, em português, Linguagem de Marcação de Hipertexto.
Ela não é uma linguagem de programação, mas sim uma linguagem de marcação, usada para estruturar o conteúdo de uma página da web.
Caso precise de mais aprofudamento nesse assunto temos "a origem do HTML"
Pense no HTML como o esqueleto de um site.
Por exemplo:
Ao abrir este arquivo no navegador, você verá o título “Olá, mundo!” e um parágrafo logo abaixo.
🌐 Como a Web funciona
Para entender o papel do HTML, é preciso enxergar o funcionamento da Web em camadas simples:
1. O Navegador (Client): é o programa que você usa para acessar sites — como Chrome, Firefox, Edge ou Safari. Ele entende o código HTML, interpreta-o e exibe o conteúdo visualmente.
2. O Servidor (Server): é onde os arquivos do site ficam armazenados, aguardando pedidos vindos dos navegadores.
3. O Protocolo HTTP/HTTPS: é a língua pela qual navegador e servidor se comunicam.
O processo ocorre assim:
● O usuário digita, por exemplo, www.meusite.com no navegador.
● O navegador envia um pedido (request) ao servidor.
● O servidor responde com o conteúdo HTML, CSS, imagens, scripts e dados relevantes.
● O navegador lê o código HTML e o exibe de forma gráfica ao usuário.
Anatomia de uma página HTML
💬 Estrutura Básica de um Documento HTML
Todo arquivo HTML segue uma estrutura-padrão, composta pelos seguintes elementos:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Título da Página</title>
</head>
<body>
<h1>Conteúdo principal</h1>
<p>Texto explicativo.</p>
</body>
</html>
🔎 Vamos entender a anatomia de cada parte da linguagem de marcação:
<> → Tag de abertura.
</> → Tag de fechamento.
<!DOCTYPE html> → Diz ao navegador qual é a versão do documento HTML.
<html> → Tag de abertura raiz que envolve todo o conteúdo.
<html lang="en"> → Especifica o idioma principal.
<"en"> → É linguagem inglesa.
<"pt-br">→ linguagem brasileira, ou português do brasil.
<head> → É a “cabeça” da página, contém informações invisíveis ao usuário (metadados, css, JavaScripts, título).
<meta charset="UTF-8"> → Garante que acentos e caracteres especiais funcionem.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> → Garante o design responsivo de sites, instruindo o navegador a ajustar o tamanho da página à largura do dispositivo (como celulares e tablets),
viewport = janela de visualização.
width = largura.
device = dispositivo etc.
<title> → É o título da página que aparece na aba do navegador.
</head> → Tag de fechamento da head = cabeça.
<body> → Onde fica o conteúdo visível da página (textos, imagens, links, formulários).
<h1> → É o título principal ou o conteúdo mais importante da página, geralmente usado uma única vez por documento.
<p> → um parágrafo, ou um texto explicativo.
</body> → Tag de fechamento do body = corpo.
</html> → Tag de fechamento raiz que envolve todo o conteúdo.
💡 Dica:
👉Já 👇
<p> → parágrafo,
<img> → imagem,
<a> → link etc.
Sempre coloque no <body> Que é o “corpo” da página.
Ferramentas de trabalho (editores e navegadores)
🔧 Para você começar a programar em HTML, você precisará de duas coisas: editores e navegadores.
Tipos de editor de texto:
Visual Studio Code,
Sublime Text,
Notepad++, ou até o Bloco de Notas.
Tipos de navegador web:
Chrome
Firefox
Edge, etc.
Ferramentas de trabalho: VScode
Você vai precisar criar um arquivo chamado index.html no VScode.
Para você criar , vá até sua Área de Trabalho ou Documentos do seu computador,
Clique com o botão direito → Nova pasta.
Nomeie, por exemplo: meu-primeiro-site
Depois: Abra o VScode
Clique em File (Arquivo) → Open Folder (Abrir Pasta)
💡 Atenção:
Open file → Ele abri o arquivo. (Essa opção não vai para o computador).
Open Folder → Abrir pasta.(Está opção é a que vai para seu computador).
Selecione a pasta: meu-primeiro-site e Clique em Selecionar pasta
Depois:
Crie o arquivo index.html, no painel esquerdo (Explorer):
Clique com o botão direito na pasta New File (Novo Arquivo) e digite: index.html
💡 Dica do VScode:
Digite: ! e pressione Enter o VScode criará essa estrutura automaticamente.
Ou digite html e dê enter na opção html:5
Você também vai precisar instalar a extensão do Open with Live Server o (Live Server) no VScode. Exemplo: Na imagem 👇 abaixo exemplifica como acessar a extensões do VScode.
Na imagem abaixo 👇 mostra como é a extensão Live Server no VScode.
Quando você usar a extensão Live Server aparecerá uma tela como a imagem abaixo 👇.
Todo arquivo HTML segue uma estrutura-padrão, composta pelos seguintes elementos:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Título da Página</title>
</head>
<body>
<h1>Conteúdo principal</h1>
<p>Texto explicativo.</p>
</body>
</html>
✍️ Exercício:
Crie um arquivo chamado primeira_pagina.html e coloque o seguinte conteúdo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Minha Primeira Página HTML</title>
</head>
<body>
<h1>Bem-vindo ao Meu Primeiro Site!</h1>
<p>Este é o início da minha jornada no desenvolvimento web.</p>
</body>
</html>
Adicione uma segunda linha com a tag <h2> e uma frase que descreva seu objetivo de aprendizado.
Entendendo as tags, atributos, Parágrafos e Quebras de Linha
O HTML utiliza tags semânticas para definir o papel de cada trecho de texto dentro de uma página. Isso significa que, além da apresentação visual, cada elemento carrega um significado específico, tornando o conteúdo mais organizado e compreensível.
As tags de títulos vão de <h1> até <h6> veja as tag e suas descrição e como usa-las.
🏷️ Títulos (Headings)
<h1> → Título principal da página → Apenas 1 por página
<h2> → Subtítulo importante → Divisões principais
<h3> → Subtítulo secundário → Subseções
<h4> → Título menos relevante → Subseções internas
<h5> → Subnível de detalhamento → Detalhes ou notas
<h6> → Nível mais baixo → Observações ou apêndices
💡 Exemplo prático:
<h1>Introdução ao HTML</h1>
<p>O HTML é a base da web moderna e permite estruturar textos e imagens.</p>
<h2>Como funcionam as tags</h2>
<p>Cada tag define um papel específico dentro da página.</p>
<h3>Estrutura de hierarquia</h3><p>Usar os níveis corretamente é essencial para SEO e acessibilidade.</p>
💡 Boas práticas:
● Use apenas um <h1> por página, ele indica o tema principal do documento.
● Trabalhe com os outros níveis de forma hierárquica (como em tópicos de um livro).
● Nunca use <h3> antes de um <h2> mantenha a sequência lógica.
✏️ Parágrafos e Quebras de Linha
A principal tag de texto é <p>, usada para definir parágrafos. Dentro dela, podemos inserir frases, links, palavras em negrito, etc. Exemplo:
<p>O HTML foi criado para permitir a estruturação de documentos na web.</p>
<p>Cada parágrafo é representado pela tag <p> e termina automaticamente.</p>
Observe que, ao criar dois parágrafos, o navegador adiciona um pequeno espaçamento entre eles automaticamente.
🧾 Quebras de linha (<br>)
A tag <br> é usada quando você não quer iniciar um novo parágrafo, mas precisa forçar uma quebra de linha. Exemplo:
<p>Curso de HTML do Zero ao Avançado<br>Aprenda e pratique no seu ritmo!</p>
🔎 O Resultado no Live Server fica:
Curso de HTML do Zero ao Avançado
Aprenda e pratique no seu ritmo!
💡 Dica:
use <br> moderadamente. Para blocos longos de texto, prefira criar novos <p> isso mantém a semântica do conteúdo.
🧠 Formatação Básica de Texto Com o HTML5, há diversas tags semânticas e visuais de formatação de texto. Veja as tags e funções mais importantes:
<strong> → Dá ênfase forte (negrito semântico)
A tag é → <strong>Importante!</strong>
<em> → Dá ênfase suave (itálico semântico)
A tag é → <em>Palavra destacada</em>
<b> → Texto em negrito (visual)
A tag é → <b>Texto em destaque</b>
<i> → Texto em itálico (visual)
A tag é → <i>Texto estilizado</i>
<u> → Sublinha o texto
A tag é → <u>Texto sublinhado</u>
<mark> → Marca o texto como um marcador
A tag é → <mark>Texto marcado</mark>
<small> → Define texto menor
A tag é → <small>Aviso legal</small>
<del> → Mostra texto removido (riscado)
A tag é → <del>Antigo preço</del>
<ins> → Mostra texto inserido (sublinhado suave)
A tag é → <ins>Novo conteúdo</ins>
💡 Observação: As tags em html é a linguagem de marcação de hipertexto.
 |
| Só que dessa forma todos ficarão lado a lado, na web. |
Para que fique um embaixo do outro e necessário acrescentar as tags de títulos que vão de <h1> até <h6>.
🧠 Lembre-se: <h1> → Título principal da página → Apenas 1 por página, por isso que no exemplo acima quando acaba o limite de tags eu repito de <h2> em diante.
⚡ Outro exemplo prático:
<p>O HTML <strong>estrutura</strong> um site, enquanto o <em>CSS</em> define o visual.</p>
<p><mark>Importante:</mark> Use tags semânticas para dar significado ao texto.</p>
 |
| Ob: Deixei as tags afastadas para melhor aprendizado. |
🕮 Citando, Destacando e Referenciando
Há também tags específicas para citações e referências: Veja as descrições das tags:
<blockquote> → Citação longa, com recuo
A tag é → <blockquote>Citação de um autor</blockquote>
<q> → Citação curta
A tag é → <q>Texto entre aspas</q>
<abbr> → Abreviação com explicação
A tag é → <abbr title="Cascading Style Sheets">CSS</abbr>
<cite> → Referência a obras ou autores
A tag é → <cite>HTML & CSS Design</cite>
<code> → Exibe código de programação
A tag é → <code><html></code>
<pre> → Mantém espaços e quebras de linha do texto original
A tag é → <pre>Linha 1\nLinha 2</pre>
Coloquei todos em <h3> só por didática.
💡 Outro exemplo completo:
<p>Segundo <cite>Tim Berners-Lee</cite>, criador da Web:</p>
<blockquote>
A Web é mais uma criação social do que técnica.
</blockquote>
<p>Para inserir código, usamos a tag <code><code></code>.</p>
🧩 Criando uma Página de Artigo
Vamos criar uma página simples com títulos, subtítulos e parágrafos:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Artigo sobre HTML</title>
</head>
<body>
<h1>O Que é HTML?</h1>
<p>HTML significa <strong>HyperText Markup Language</strong> e é utilizado para estruturar o conteúdo de páginas na web.</p>
<h2>Tags e Estrutura</h2>
<p>Cada página é composta de elementos marcados por <em>tags</em>.</p>
<h3>Exemplo Básico</h3>
<pre>
<h1>Título da Página</h1>
<p>Este é um parágrafo.</p>
</pre>
</body>
</html>
💻 Exercício: Crie um arquivo chamado texto_basico.html com o seguinte conteúdo:
1. Um título principal (<h1>) apresentando o tema.
2. Um subtítulo (<h2>) contextualizando.
3. Três parágrafos sobre o tema (use <strong>, <em> e <mark> pelo menos uma vez).
4. Uma citação usando <blockquote> e uma explicação curta logo abaixo.
5. Exiba em <pre> e <code> um exemplo de tag HTML.
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
✅ Desafio Extra: Adicione um trecho com <abbr> explicando a sigla “HTML”.
Estrutura básica de um documento HTML
Com tudo que já apredemos nesse módolo 1 encerramos com um estrutura básica de um documento profissional de página HTML5:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="description" content="Curso completo de HTML do Zero ao Avançado">
<title>Curso HTML - Página Semântica</title>
</head>
<body>
<header>
<h1>Curso HTML do Zero ao Avançado</h1>
<nav>
<ul>
<li><a href="#inicio">Início</a></li>
<li><a href="#aulas">Aulas</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
</header>
<main>
<section id="inicio">
<h2>Bem-vindo!</h2>
<p>Aprenda HTML de forma prática e estruturada.</p>
</section>
<section id="aulas">
<h2>Nossas Aulas</h2>
<article>
<h3>Aula 1: Introdução</h3>
<p>Conceitos fundamentais sobre a linguagem HTML e sua estrutura.</p>
</article>
<article>
<h3>Aula 2: Trabalhando com Textos</h3>
<p>Aprenda a formatar, organizar e aplicar semântica aos textos.</p>
</article>
</section>
<aside>
<h4>Materiais Extras</h4>
<ul>
<li><a href="https://developer.mozilla.org/">Documentação MDN</a></li>
<li><a href="https://w3.org">Padrões da W3C</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 - Desenvolvido para o Curso HTML do Zero ao Avançado</p>
</footer>
</body>
</html>
/* Reset básico */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}
header {
background-color: #0077cc;
color: white;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
margin-top: 10px;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
text-decoration: underline;
}
main {
display: flex;
gap: 20px;
padding: 20px;
}
section {
flex: 3;
background: white;
padding: 20px;
border-radius: 8px;
}
article {
margin-top: 15px;
padding: 10px;
border-left: 4px solid #0077cc;
background: #f9f9f9;
}
aside {
flex: 1;
background: #fff;
padding: 20px;
border-radius: 8px;
height: fit-content;
}
aside ul {
list-style: none;
margin-top: 10px;
}
aside ul li {
margin-bottom: 8px;
}
aside ul li a {
text-decoration: none;
color: #0077cc;
}
aside ul li a:hover {
text-decoration: underline;
}
footer {
text-align: center;
background: #333;
color: white;
padding: 15px;
margin-top: 20px;
}
🌟 Explicação geral da estrutura
● <header> – Identidade visual e navegação principal.
● <main> – Corpo central da página (onde vive o conteúdo temático).
● <section> – Agrupamentos de temas dentro do main.
● <article> – Blocos independentes (cada um pode ser reutilizado).
● <aside> – Conteúdos complementares (não essenciais).
● <footer> – Créditos e navegação secundária.
⚙️ Outras tags semânticas úteis
<figure> → Agrupar imagens, gráficos ou mídias ilustrativas.
<figcaption> → Legenda para a figura.
<time> → Define datas e horas.
<address> → Exibe informações de contato (endereços físicos ou e-mails).
💡 Exemplo:
<figure>
<img src="imagens/html_logo.png" alt="Logo do HTML5">
<figcaption>Imagem ilustrativa do logotipo HTML5</figcaption>
</figure>
🧠 Boas práticas para estrutura semântica
1. Use cada tag de acordo com seu significado real.
2. Evite <div> e <span> genéricos quando existir uma tag específica.
3. Sempre mantenha uma hierarquia lógica do conteúdo (h1 → h2 → h3).
4. Utilize IDs claros para navegação por âncoras internas.
5. Combine semântica + CSS para garantir forma e função sem misturar papéis.
🎉 Parabéns por concluir o Módulo 1!
Você chegou ao final do primeiro módulo da nossa jornada! 🚀
Agora você já conhece os fundamentos do HTML, entende como uma página web é estruturada, conhece algumas das principais tags e já deu os primeiros passos escrevendo e executando seus próprios códigos.
Mas isso é apenas o começo!
No próximo módulo, vamos começar a trabalhar de forma mais prática com o conteúdo das páginas, aprendendo a criar títulos, parágrafos, listas, imagens, vídeos, links e muito mais.
Antes de seguir, aproveite para praticar um pouco o que aprendeu. Quanto mais você escrever e testar seus códigos, mais natural será o aprendizado.
Obrigado por chegar até aqui e fazer parte da Academy Code Christ. ❤️
Continue firme, pratique no seu ritmo e não tenha medo de errar. Cada linha de código que você escreve é mais um passo na sua evolução.
🚀 Pronto para continuar?
Então vamos para o próximo desafio:
👉 Módulo 2 — Trabalhando com Conteúdo
Nos vemos no próximo módulo! Bons estudos e mãos ao código. 💻
Eu poderia colocar este curso em plataformas como Kiwify ou Hotmart e cobrar pelo acesso. Mas escolhi fazer diferente.
Mas em vez de tentar provar que o meu trabalho é bom nas redes sociais, prefiro deixar que você tenha liberdade para estudar, praticar e tirar suas próprias conclusões.
Por isso, a proposta da Academy Code Christ é oferecer este conteúdo gratuitamente para quem deseja aprender programação e desenvolver novas habilidades.
Se o conteúdo foi útil para você, se ajudou nos seus estudos e você quiser contribuir sem obrigação, para que o projeto continue crescendo,
você pode apoiar a Academy Code Christ com um café. ☕
Pix: antropologiacrista@gmail.com
Comentários
Postar um comentário