🎓CURSO DE <HTML>

🎯 Objetivo Geral

Levar o aluno a compreender de forma teórica e prática todos os aspectos da linguagem de códigos, desde a criação de páginas simples até o desenvolvimento de estruturas completas e frameworks modernos.

O CURSO DE <HTML>

Será dividido em 5 módulos principais, cada um contendo várias aulas detalhadas.

📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos

📚Módulo 1

⚙️ Introdução ao HTML e Fundamentos da Web

💻 Aula 1: 👉 Introdução ao HTML e Fundamentos da Web.

💻 Aula 2: 👉 Trabalhando com Conteúdo.

💻 Aula 3: 👉 Estrutura Semântica e Organização Avançada.

💻 Aula 1: 👉 O que é HTML e Como a web funciona.

🎯 Objetivos da Aula:

● Entender o que é HTML e qual o seu papel na construção da Web.

● Compreender como funciona a comunicação entre navegador, servidor e usuário.

● Conhecer a diferença entre HTML, CSS e JavaScript.

🧩 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.

Pense no HTML como o esqueleto de um site. Ele define onde ficam os títulos, os parágrafos, as imagens, os vídeos e todos os demais elementos.

💡 Por exemplo:

Esse pequeno código já forma uma página funcional. 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.

⚙️ Diferença entre HTML, CSS e JavaScript

Para criar páginas completas, HTML trabalha junto com outras duas linguagens:

Tecnologia Função Principal

HTML → Estrutura o conteúdo da página (textos, imagens, seções).

CSS → Define o estilo visual — cores, fontes, tamanhos, posicionamento.

JavaScript → Adiciona interatividade e lógica (menus dinâmicos, formulários, animações).

💡 Exemplo ilustrativo:

Imagine construir uma casa:

● O HTML → é a fundação e as paredes (estrutura).

● O CSS → são as tintas, móveis e decoração.

● O JavaScript → são as portas automáticas e sistemas elétricos inteligentes.

🔧 Ferramentas Necessárias

Para começar a programar em HTML, você precisa de apenas duas coisas:

1. Um editor de texto (como Visual Studio Code, Sublime Text, Notepad++, ou até o Bloco de Notas).

2. Um navegador web (como Chrome ou Firefox) para visualizar o resultado.

💡 Dica prática: Criar index.html no VScode.

Vá até a Á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 é abrir arquivo é essa opção não vai para o computador, a opção que vai para seu computador é Open Folder abrir pasta.
Selecione a pasta: meu-primeiro-site
Clique em Selecionar pasta

Depois:

Criar o arquivo index.html

No painel esquerdo (Explorer):
Clique com o botão direito na pasta
New File (Novo Arquivo)
Digite: index.html

💡 Dica do VScode:

Digite ! e pressione Enter o VScode criará essa estrutura automaticamente.

Salve. Clique com o botão direito e selecione Open with Live Server (se tiver a extensão instalada) ou simplesmente abra o arquivo no navegador.

Na imagem ao lado exemplifica como acessar a extensões do VScode 👉

Na imagem abaixo mostra como é a extensão Live Server

Quando você usar a extensão Live Server aparecerá uma tela como a imagem abaixo.

🧩 Estrutura Básica de um Documento HTML

Todo arquivo HTML segue uma estrutura-padrão, composta pelos seguintes elementos:

<!DOCTYPE html>

<head>

<title>Título da Página</title> 👉

</head>

<body>

<h1>Conteúdo principal</h1>

<p>Texto explicativo.</p>

</body>

</html>

🔎 Explicação das partes:

<> → Tag de abertura.

</> → Tag de fechamento.

<!DOCTYPE html> → Diz ao navegador qual é a versão do documento HTML5. <html> → Tag de abertura raiz que envolve todo o conteúdo.

<html lang="en"> → Especifica o idioma principal. <"en"> → É linguagem inglesa, e <"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).

<title>Título da Página</title> → É o título 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>Conteúdo principal</h1> → <h1></h1> → é o título mais importante da página, geralmente usado uma única vez por documento.

<p>Texto explicativo.</p> → um parágrafo.

</body> → Tag de fechamento do body = corpo

</html> → Tag de fechamento raiz que envolve todo o conteúdo.

💡 Dica:

Quando for instalar o Css, JavaScript ou qualquer tipo de programa, sempre instale na <head> → É a “cabeça” de comando do html.

Já <h1> → título, <p> → parágrafo, <img> → imagem, <a> → link etc. Sempre coloque no <body> Que é o “corpo” da página.

✍️ Exercício Prático 1

Crie um arquivo chamado primeira_pagina.html e coloque o seguinte conteúdo:

<!DOCTYPE html>

<head>

<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>

🧠 Desafio:

Adicione uma segunda linha com a tag <h2> e uma frase que descreva seu objetivo de aprendizado.

📘 Conclusão da Aula 1

Nesta primeira aula, você:

● Entendeu o que é HTML e por que ele é a base da web.

● Conheceu como funciona a comunicação entre navegador e servidor.

● Aprendeu a estrutura fundamental de um documento HTML5.

● Criou sua primeira página.

💬 Próxima aula:

💻 Aula 2 👉 Títulos, Parágrafos e Quebras de Linha.

🎯 Objetivos da Aula:

● Aprender como os textos são estruturados em HTML;

● Usar corretamente títulos, parágrafos e quebras de linha;

● Conhecer as principais tags de formatação;

● Diferenciar as boas práticas no uso de texto semântico e visual.

🧩 Entendendo a Estrutura de Texto no HTML

O HTML organiza textos utilizando tags semânticas, criadas especificamente para representar o papel que cada trecho de conteúdo desempenha.

Essas tags não servem apenas para “formatar visualmente”, mas também para dar significado ao texto, ajudando buscadores (como o Google) e equipamentos de acessibilidade (como leitores de tela) a compreenderem a hierarquia e a estrutura do conteúdo.

🏷️ Títulos (Headings)

As tags de títulos vão de <h1> até <h6>.

Tag Descrição Uso comum

<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>

🔎 VScode

🔎 Live Server

💡 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.

<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.

🔎 VScode

🔎 Live Server

🧾 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.

<p>Curso de HTML do Zero ao Avançado<br>Aprenda e pratique no seu ritmo!</p>

🔎 Resultado no Live Server

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 mais importantes:

Tag Função Exemplo

<strong> → Dá ênfase forte (negrito semântico) → <strong>Importante!</strong>

<em> → Dá ênfase suave (itálico semântico) → <em>Palavra destacada</em>

<b> → Texto em negrito (visual) → <b>Texto em destaque</b>

<i> → Texto em itálico (visual) → <i>Texto estilizado</i>

<u> → Sublinha o texto → <u>Texto sublinhado</u>

<mark> → Marca o texto como um marcador → <mark>Texto marcado</mark>

<small> → Define texto menor → <small>Aviso legal</small>

<del> → Mostra texto removido (riscado) → <del>Antigo preço</del>

<ins> → Mostra texto inserido (sublinhado suave) → <ins>Novo conteúdo</ins>

Exemplo 1

Nesse exemplo ficarão todos lado a lado, na web

Exemplo 2

Nesse exemplo fica todos um embaixo do outro, na web

⚡ 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>

🔎 VScode

🔎 Live Server

🕮 Citando, Destacando e Referenciando

Há também tags específicas para citações e referências:

Tag Descrição Exemplo

<blockquote> → Citação longa, com recuo → <blockquote>Citação de um autor</blockquote>

<q> → Citação curta → <q>Texto entre aspas</q>

<abbr> → Abreviação com explicação → <abbr title="Cascading Style Sheets">CSS</abbr>

<cite> → Referência a obras ou autores → <cite>HTML & CSS Design</cite>

<code> → Exibe código de programação → <code><html></code>

<pre> → Mantém espaços e quebras

de linha do texto original → <pre>Linha 1\nLinha 2</pre>

Exemplo completo:

<p>Segundo <cite>Tim Berners-Lee</cite>, criador da Web:</p>

A Web é mais uma criação social do que técnica.

</blockquote>

<p>Para inserir código, usamos a tag <code><code></code>.</p>

🔎 VScode

🔎 Live Server

🧩 Estrutura Prática: Criando uma Página de Artigo

Vamos criar uma página simples com títulos, subtítulos e parágrafos:

<!DOCTYPE html>

<head>

<title>Artigo sobre HTML</title>

</head>

<body>

<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>

🔎 VScode

🔎 Live Server

💻 Exercício Prático 2

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.

✅ Desafio Extra:

Adicione um trecho com <abbr> explicando a sigla “HTML”.

🔎 Conclusão da Aula 2

Nesta aula, você aprendeu:

● O papel dos títulos e sua hierarquia;

● Como usar parágrafos e quebras de linha;

● As principais tags de formatação e semântica;

● Como estruturar textos completos de forma clara e acessível.

💬 Próxima aula:

💻 Aula 3 👉 Trabalhando com Listas em HTML (Ordenadas, Não Ordenadas e de Definição)

🎯 Objetivos da Aula

● Entender o conceito e a utilidade das listas;

● Aprender a criar listas ordenadas, não ordenadas e de definição;

● Combinar listas entre si e compreender a hierarquia de itens;

● Aplicar boas práticas semânticas e estruturais.

📋 O que são listas em HTML?

As listas são fundamentais no HTML para organizar informações em sequência, seja em forma de tópicos, etapas, menus ou definições.
Elas melhoram a legibilidade, a acessibilidade e o design lógico de um conteúdo.

Há três tipos principais de listas:

1. Listas não ordenadas – <ul> (unordered list).

2. Listas ordenadas – <ol> (ordered list).

3. Listas de definição – <dl> (definition list).

Vamos explorar cada uma delas com exemplos práticos.

🧾 Listas Não Ordenadas: <ul>

As listas não ordenadas são compostas por itens que não seguem uma sequência numérica específica.
Cada item é marcado com um símbolo (•), por padrão.

A estrutura é:

<ul>

</ul>

🔎 VScode

🔎 Live Server

➡️ Tags usadas:

● <ul> → define o início e o fim da lista;

● <li> → representa um item da lista (list item).

💡 Exemplo prático:

<h2>Listas de Compras</h2>

<ul>

<li>Leite</li>

<li>Frutas</li>

</ul>

🔎 VScode

🔎 Live Server

⚙️ Personalizando o marcador (via CSS)

Embora o HTML não tenha controle direto sobre os símbolos, podemos alterar isso usando CSS:

<li>Açúcar</li>

<li>Farinha</li>

</ul>

A função <ul style="list-style-type: square;"> é usada para criar uma lista não ordenada (com marcadores), onde os marcadores são exibidos como quadrados sólidos.

🔎 VScode

🔎 Live Server

Tipos de marcadores:

● disc → bolinha padrão; → <ul style="list-style-type: disc;">

● circle → círculo vazio; → <ul style="list-style-type: circle;">

● square → quadrado sólido; → <ul style="list-style-type: square;">

● none → remove o marcador. → <ul style="list-style-type: none;">

📋 Listas Ordenadas: <ol>

As listas ordenadas seguem uma sequência lógica, exibindo números, letras ou algarismos romanos.

Estrutura básica:

<ol>

<li>Passo 1</li>

<li>Passo 2</li>

<li>Passo 3</li>

</ol>

🔎 VScode

🔎 Live Server

💡 Exemplo prático:

<h2>Passos para Criar um Site</h2>

<ol>

<li>Planejar o conteúdo.</li>

<li>Escrever o código HTML.</li>

<li>Estilizar com CSS.</li>

<li>Publicar na web.</li>

</ol>

🔎 VScode

🔎 Live Server

🔢 Alterando o tipo de numeração

O <ol> possui o atributo type, que muda o formato da contagem:

Atributo Resultado Exemplo

type="1" Números (padrão) 1, 2, 3

type="A" Letras maiúsculas A, B, C

type="a" Letras minúsculas a, b, c

type="I" Algarismos romanos maiúsculos I, II, III

type="i" Algarismos romanos minúsculos i, ii, iii

🔧 Exemplo:

<li>Front-end</li>

<li>Banco de Dados</li>

</ol>

🔎 VScode

🔎 Live Server

🔎 VScode

🔎 Live Server

🔎 VScode

🔎 Live Server

🎯 Começar de um número específico

Você pode iniciar a contagem de uma lista a partir de um número específico com o atributo start:

<li>Configurar servidor.</li>

<li>Testar funcionalidades.</li>

<li>Deploy final.</li>

</ol>

🔎 VScode

🔎 Live Server

📋 Listas de Definição: <dl>

As listas de definição são diferentes — usadas para explicar termos e conceitos.
Nelas, usamos três tags distintas:

Tag Nome Função

<dl> Definition list Delimita toda a lista

<dt> Definition term Marca o termo ou título

<dd> Definition description Explica o termo anterior

💡 Exemplo prático:

<h2>Glossário de HTML</h2>

<dl>

<dd>HyperText Markup Language — estrutura o conteúdo da web.</dd>

<dd>Cascading Style Sheets — define o estilo visual das páginas.</dd>

<dt>JavaScript</dt>

<dd>Linguagem de programação usada para interatividade.</dd>

</dl>

🔎 VScode

🔎 Live Server

🧱 Listas Aninhadas (Listas Dentro de Listas)

Você pode combinar listas dentro de outras listas — criando hierarquias.

💡 Exemplo prático:

<h2>Conteúdos do Curso</h2>

<ul>

<li>HTML

<ul>

<li>Introdução</li>

<li>Formulários</li>

</ul>

</li>

<li>JavaScript</li>

</ul>

🔎 VScode

🔎 Live Server

💡 Dica:

Evite aninhar listas profundamente — além de dificultar a leitura, torna o código menos acessível.

🧠 Boas Práticas com Listas

1. Use <ul> para listas genéricas (itens sem ordem específica).

2. Use <ol> para etapas sequenciais ou classificatórias.

3. Use <dl> para termos e descrições (glossários, dicionários, FAQ).

4. Sempre feche todas as tags (</li>, </dl>, etc.).

5. Cuidado com listas aninhadas em excesso — afetam a acessibilidade.

💻 Exercício Prático 3

Crie um arquivo chamado listas_html.html e adicione:

1. Um título principal <h1>: Listas em HTML.

2. Um subtítulo <h2>: Lista de Tarefas da Semana

○ Crie uma lista ordenada (<ol>) com 5 tarefas.

3. Adicione outro subtítulo <h2>: Itens de Estudo

○ Crie uma lista não ordenada (<ul>) com 5 temas de estudo.

4. Por fim, adicione um glossário (<dl>) com os termos:

○ HTML

○ CSS

○ JavaScript
Cada um com sua respectiva descrição do curso.

✅ Desafio extra:

Crie uma lista aninhada dentro da sua lista não ordenada, mostrando, por exemplo:
“Linguagens da Web → (HTML, CSS, JS)”.

✨ Conclusão da Aula 3

Agora você domina:

● A criação e estrutura de listas não ordenadas, ordenadas e de definição;

● Como organizar informações hierárquicas e agrupadas;

Boas práticas semânticas e legibilidade de código.

💬 Próximo Módulo:

Vamos trabalhar com Imagens, Vídeos e Mídias Incorporadas, aprendendo a inserir conteúdo multimídia e torná-lo acessível e responsivo.

📚 Módulo 2 → Introdução ao HTML e Fundamentos da Web.

💻 Aula 4: 👉 Formulários e Interatividade.

💻 Aula 5: 👉 Recursos Avançados e APIs do HTML5.

💻 Aula 6: 👉 Projeto Final — Criando um Site Completo.

Módulo 2 Acesse Aqui!

📚 Adquira Nosso Livro Impresso

A venda dos livros e materiais didáticos é utilizada exclusivamente para sustentar e expandir o projeto, possibilitando que mais jovens tenham acesso a educação de qualidade e preparo para o mercado de trabalho.

🛒 Adquira nossos livros