.jpg)
🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) e aprender no seu idioma.
%20-%20Copia.png)
.png)
.png)
Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.
Mesmo que você nunca tenha programado antes, não se preocupe! Vamos aprender passo a passo, com explicações simples, exemplos práticos e atividades para colocar o conhecimento em prática.
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.
Introdução
Quando hoje abrimos um navegador, digitamos um endereço e, em poucos segundos, acessamos um mundo inteiro de informações, dificilmente pensamos sobre as origens desse processo.
O primeiro passo concreto para a Internet moderna foi dado em 1969, com o surgimento da ARPANET, um projeto financiado pelo Departamento de Defesa dos Estados Unidos.
A ARPANET foi criada com o objetivo de permitir que diferentes universidades compartilhassem informações e recursos computacionais, utilizando linhas telefônicas para transmitir dados.
Conforme a ARPANET cresceu, novas redes apareceram. Logo, cientistas e engenheiros perceberam a necessidade de padronizar protocolos de comunicação, criando o famoso conjunto de regras conhecido como TCP/IP, que organizava a maneira como os computadores trocavam dados.
Foi nesse cenário que entrou em cena um físico britânico chamado Tim Berners-Lee, que trabalhava no CERN (Organização Europeia para a Pesquisa Nuclear) em Genebra, na Suíça.
Tim Berners-Lee teve então uma ideia revolucionária: criar uma forma de organizar informações de maneira que qualquer pessoa, em qualquer computador, pudesse acessá-las de forma intuitiva.
Para isso, ele propôs um sistema de documentos interconectados por links, acessíveis via rede. Esse conceito viria a ser conhecido como World Wide Web (WWW), e o HTML seria a linguagem que tornaria isso possível.
A ARPANET foi criada com o objetivo de permitir que diferentes universidades compartilhassem informações e recursos computacionais, utilizando linhas telefônicas para transmitir dados.
Conforme a ARPANET cresceu, novas redes apareceram. Logo, cientistas e engenheiros perceberam a necessidade de padronizar protocolos de comunicação, criando o famoso conjunto de regras conhecido como TCP/IP, que organizava a maneira como os computadores trocavam dados.
Foi nesse cenário que entrou em cena um físico britânico chamado Tim Berners-Lee, que trabalhava no CERN (Organização Europeia para a Pesquisa Nuclear) em Genebra, na Suíça.
Tim Berners-Lee teve então uma ideia revolucionária: criar uma forma de organizar informações de maneira que qualquer pessoa, em qualquer computador, pudesse acessá-las de forma intuitiva.
Para isso, ele propôs um sistema de documentos interconectados por links, acessíveis via rede. Esse conceito viria a ser conhecido como World Wide Web (WWW), e o HTML seria a linguagem que tornaria isso possível.
O nascimento do HTML
Entre 1989 e 1991, Berners-Lee começou a desenvolver a base da sua ideia. Ele criou três componentes fundamentais da web:
1. O HTML (HyperText Markup Language) – uma linguagem de marcação simples usada para estruturar e formatar documentos.
2. O HTTP (HyperText Transfer Protocol) – o protocolo que define como as informações são transferidas entre clientes (navegadores) e servidores.
3. O URL (Uniform Resource Locator) – o formato de endereçamento que permite identificar e localizar qualquer recurso na web.
A expansão da web
O Mosaic foi um dos primeiros navegadores populares a integrar imagens ao texto, mas não foi o primeiro navegador a exibir imagens.
Pouco depois, apareceu o Netscape Navigator, e a web começou a evoluir em um ritmo incrivelmente acelerado.
Assim, em 1994, Berners-Lee fundou o W3C (World Wide Web Consortium). O W3C foi um dos que iniciou o trabalho de padronização do HTML, garantindo que todos os navegadores interpretassem o código da mesma maneira.
Isso foi fundamental para que a web se tornasse uma plataforma universal, acessível em qualquer lugar e em qualquer dispositivo.
Evolução do HTML
Ao longo dos anos, o HTML passou por diversas versões e aprimoramentos:
Ao longo dos anos, o HTML passou por diversas versões e aprimoramentos:
A filosofia por trás do HTML
Mais do que uma linguagem técnica, o HTML foi criado com uma filosofia poderosa: acessibilidade universal.
Desde sua concepção, Tim Berners-Lee acreditava que a web deveria ser livre, aberta e acessível a todos — independentemente de seu sistema operacional, localização geográfica ou condição econômica.
O impacto do HTML na sociedade
O HTML democratizou a publicação de informações. Antes dele, criar algo visível para o mundo era restrito a grandes instituições. Depois dele, qualquer pessoa com um computador e curiosidade pôde se tornar criador de conteúdo.
Compreender a história do HTML é fundamental para qualquer pessoa que queira dominá-lo. Cada tag, cada atributo e cada mudança reflete uma necessidade real de comunicação e evolução tecnológica.
O HTML democratizou a publicação de informações. Antes dele, criar algo visível para o mundo era restrito a grandes instituições. Depois dele, qualquer pessoa com um computador e curiosidade pôde se tornar criador de conteúdo.
Compreender a história do HTML é fundamental para qualquer pessoa que queira dominá-lo. Cada tag, cada atributo e cada mudança reflete uma necessidade real de comunicação e evolução tecnológica.
🧩 O que é HTML?
Criar uma página HTML é, essencialmente, dar forma ao conteúdo. É como construir a fundação de uma casa.
Antes de pensar em decoração (CSS) ou em automações (JavaScript), precisamos ter paredes sólidas e uma estrutura bem organizada. Esta estrutura é o coração de qualquer página web. Vamos começar entendendo o conceito de marcação.
O que é uma linguagem de marcação?
Linguagem de “Marcação” (markup) é uma maneira de identificar e organizar o conteúdo dentro de um documento por meio de elementos delimitados por tags (ou etiquetas).
HTML significa HyperText Markup Language — ou, em português, Linguagem de Marcação de Hipertexto.
Uma pequena observação: 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.
Essas tags informam ao navegador o papel e o tipo de cada
parte do conteúdo.
Por exemplo:
●
<p>
indica um parágrafo de texto.
●
<h1>
indica um título principal.
●
<a>
indica um link.
Essas tags sempre vêm com um início e um fechamento,
assim como um par de parênteses.
O início tem o formato <tag>, e o
fechamento é escrito como </tag>.
➡️ Exemplo:
<p>Este é um parágrafo de exemplo.</p>
Aqui o navegador entende que o texto dentro de <p> e </p> é um
parágrafo.
A estrutura de um documento HTML segue uma hierarquia lógica:
cada página deve conter um início, um corpo e um encerramento organizados
de forma clara.
Por exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Esta é a minha primeira página em HTML.</p>
</body>
</html>
🔎 Veja como fica no VScode
Esse pequeno código já forma uma página funcional. Ele define onde ficam os títulos, os parágrafos, as imagens, os vídeos e todos os demais elementos.
Ao abrir este arquivo no navegador, você verá o título “Olá, mundo!” e um parágrafo logo abaixo.
🔎 Veja como fica o resultado no Live Server
Linguagem de “Marcação” (markup) é uma maneira de identificar e organizar o conteúdo dentro de um documento por meio de elementos delimitados por tags (ou etiquetas).
HTML significa HyperText Markup Language — ou, em português, Linguagem de Marcação de Hipertexto.
Uma pequena observação: 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.
Essas tags informam ao navegador o papel e o tipo de cada
parte do conteúdo.
Por exemplo:
● <p> indica um parágrafo de texto.
● <h1> indica um título principal.
● <a> indica um link.
Essas tags sempre vêm com um início e um fechamento,
assim como um par de parênteses.
O início tem o formato <tag>, e o
fechamento é escrito como </tag>.
➡️ Exemplo:
<p>Este é um parágrafo de exemplo.</p>
Aqui o navegador entende que o texto dentro de <p> e </p> é um parágrafo.
A estrutura de um documento HTML segue uma hierarquia lógica: cada página deve conter um início, um corpo e um encerramento organizados de forma clara.
Por exemplo:
<!DOCTYPE html>
Vamos agora analisar cada parte com calma.
1. O DOCTYPE
A primeira linha de qualquer documento HTML moderno é o <!DOCTYPE html>.
Essa declaração diz ao navegador qual versão do HTML
ele deve usar para interpretar o código. Ou seja informa
ao navegador que o documento deve ser interpretado no modo padrão de
renderização do HTML moderno.
No caso do HTML5, a linha é simples e
universal — não precisa mais de números de versão ou URLs complexos, como nas
versões antigas do HTML.
Exemplo:
<!DOCTYPE html>
Essa declaração não é uma tag HTML, mas sim uma
instrução. Isso garante que o navegador entre no chamado modo padrão,
evitando comportamentos imprevisíveis.
2. A tag <html> — A Raiz do Documento
A tag <html>
indica o início e o fim do código HTML.
Todo o conteúdo da página, sem exceções,
deve estar dentro dela.
<html lang="pt-BR">
...
</html>
O atributo lang="pt-BR"
especifica o idioma principal da página.
Isso é importante para ferramentas de
acessibilidade, como leitores de tela, e para os mecanismos de busca
(SEO), que usam essa informação para oferecer resultados mais adequados ao
usuário.
3. A seção <head> — Informações e
Metadados
Todo o conteúdo da página, sem exceções, deve estar dentro dela.
Isso é importante para ferramentas de acessibilidade, como leitores de tela, e para os mecanismos de busca (SEO), que usam essa informação para oferecer resultados mais adequados ao usuário.
A tag <head>
contém informações que o navegador e os mecanismos de busca utilizam,
mas que normalmente não aparecem diretamente no corpo da página.
Dentro do <head>,
inserimos:
- Metadados, como o conjunto de caracteres (<meta charset="UTF-8">) e <meta name="viewport" content="width=device-width, initial-scale=1.0"> Ela ajuda a página a ser exibida adequadamente em celulares e outros dispositivos.
- Título da página, que é exibido na aba do navegador (<title>)
- Links para estilos CSS ou scripts JavaScript externos
- Descrições e palavras-chave para SEO
Exemplo de uma seção <head> completa:
<head>
<meta
charset="UTF-8">
<meta
name="description" content="Curso completo de HTML do zero ao
avançado">
<meta
name="author" content="Seu Nome">
<title>Meu Site
de Exemplo</title>
</head>
Essas informações são como a “capa do livro” da sua página —
essenciais para performance, acessibilidade e ranqueamento.
4. A seção <body> — O conteúdo visível
É no <body>
que colocamos tudo o que o visitante vai ver: textos, imagens, botões, vídeos,
menus, links, etc.
Dentro do <body>,
usamos elementos de conteúdo e elementos estruturais para
organizar a página.
Por exemplo:
<body>
<header>
<h1>Curso de
HTML</h1>
</header>
<main>
<p>Aprenda HTML
passo a passo.</p>
</main>
<footer>
<p>© -
Todos os direitos reservados.</p>
</footer>
</body>
Note que usamos <header>, <main> e <footer> — tags semânticas introduzidas no
HTML5. Elas tornam o código mais legível e significativo, tanto para pessoas
quanto para máquinas.
Como o navegador interpreta o HTML
O navegador (como Google Chrome, Firefox, Edge ou Safari) funciona como um tradutor.
Ele lê o código HTML de cima para baixo,
linha por linha, e constrói uma estrutura de árvore chamada DOM
(Document Object Model).
Essa estrutura representa a hierarquia de todos os elementos
da página.
Por exemplo, neste código:
<html>
<head></head>
<body>
<h1>Título</h1>
<p>Texto de
exemplo</p>
</body>
</html>
O navegador cria uma árvore onde <html> é o nó raiz, <head> e <body> são filhos, e dentro do <body> existem
os elementos <h1>
e <p>.
O CSS e o JavaScript interagem com essa árvore DOM para
estilizar e manipular o conteúdo.
Comentários em HTML
Comentários são úteis para documentar o código. Eles não
aparecem na página quando aberta pelo navegador.
Usamos a seguinte sintaxe:
<!-- Abertura
--> Fechamento
Exemplo:
<!-- Este é um comentário -->
<p>O comentário acima não será exibido.</p>
Comentários ajudam na organização e manutenção do código,
especialmente em projetos grandes.
Usamos a seguinte sintaxe:
Vamos revisar com mais um pouco de detalhe
<!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="pt-BR"> → Especifica o idioma principal da página.
<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.
<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.
Boas práticas na estrutura HTML
Mesmo que o HTML seja relativamente permissivo, seguir boas
práticas desde o início é essencial.
Algumas recomendações:
- Indentação adequada — facilite a leitura e manutenção:
<ul>
<li>Item
1</li>
<li>Item
2</li>
</ul>
<ul>
- Fechar todas as tags corretamente, mesmo quando o navegador as corrige automaticamente.
- Usar atributos com aspas:
<img src="foto.jpg" alt="Descrição da imagem">
- Manter o idioma e codificação corretos, especialmente em português (UTF-8 é essencial).
- Evitar código redundante ou obsoleto, como tags depreciadas (<center>, <font>, etc.).
Exemplo prático: Criando sua primeira página web
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:
Clique com o botão direito na pasta New File (Novo Arquivo) e digite: index.html
Crie o arquivo dessa forma 👉 index.html, no painel esquerdo (Explorer):
🔎 Veja como fica no VScode
💡 Dica do VScode:
Digite: ! E pressione Enter VScode criará essa estrutura automaticamente.
Ou digite html e dê enter na opção html:5
🔎 Veja como fica 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:
Clique com o botão direito na pasta New File (Novo Arquivo) e digite: index.html
💡 Dica do VScode:
Digite: ! E pressione Enter 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 👇.
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 👇.
O papel da semântica e da estrutura
A estrutura correta do HTML não é apenas estética. Ela tem um forte impacto em:
●
Acessibilidade: Leitores de tela e dispositivos
de apoio dependem de tags estruturadas para interpretar o conteúdo
corretamente.
●
SEO (Search Engine Optimization): Motores de
busca avaliam a hierarquia (H1, H2, meta tags) para determinar o tema principal
da página.
●
Manutenção: Um código limpo e organizado
facilita alterações futuras.
🌐 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.
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 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:
● 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.
● 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.
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
✍️ Exercício:
Crie um arquivo chamado index.html e coloque o seguinte conteúdo:
Crie um arquivo chamado index.html e coloque o seguinte conteúdo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="description" content="Minha primeira página completa em HTML">
<title>Olá, Mundo!</title>
</head>
<body>
<header>
<h1>Bem-vindo ao HTML</h1>
<p>Do zero ao avançado</p>
</header>
<main>
<section>
<h2>Primeiro Passo</h2>
<p>Este é o início da sua jornada no desenvolvimento web.</p>
<p>Aprender HTML é o primeiro degrau para dominar a internet.</p>
</section>
</main>
<footer>
<p>Desenvolvido por [Seu Nome] - [Ano]</p>
</footer>
</body>
</html>
Salve o arquivo e abra-o no navegador. ✨
Parabéns — você acabou de criar sua primeira página HTML completa!
🧠 Desafio:
Parabéns — você acabou de criar sua primeira página HTML completa!
Adicione uma segunda linha com a tag <h2> e uma frase que descreva seu objetivo de aprendizado.
Adicione uma segunda linha com a tag <h2> e uma frase que descreva seu objetivo de aprendizado.
❓ Perguntas Frequentes sobre HTML
(FAQ)
1. O que é HTML e para que ele serve?
HTML (HyperText Markup Language) é uma linguagem de marcação
utilizada para estruturar o conteúdo de páginas da Web, como títulos,
parágrafos, imagens, links e formulários. Ele trabalha junto com CSS e
JavaScript para criar páginas completas e interativas.
2. Preciso saber programar para aprender HTML?
Não! Você pode começar a aprender HTML mesmo sem ter
experiência com programação. Com explicações passo a passo, exemplos práticos e
exercícios, é possível aprender a criar suas primeiras páginas e evoluir
gradualmente no desenvolvimento web.
3. Qual programa posso usar para criar páginas HTML?
Você pode utilizar o Visual Studio Code (VS Code), um editor
de código gratuito que permite criar e editar arquivos HTML. Para visualizar
sua página no navegador e acompanhar as alterações durante o desenvolvimento,
também pode utilizar a extensão Live Server. Se preferir, pode começar com um
editor de código online.
Conclusão
Parabéns por concluir a primeira etapa do curso de HTML do
zero ao avançado da Academy Code Christ!
Nesta etapa, você aprendeu o que é HTML, conheceu os
fundamentos do funcionamento da Web, compreendeu a estrutura básica de um
documento HTML e deu os primeiros passos na criação de sua própria página.
Também conheceu ferramentas importantes para o
desenvolvimento web, como o Visual Studio Code e o Live Server.
Lembre-se: aprender programação exige prática, paciência e
curiosidade. Não tenha medo de experimentar, cometer erros e tentar novamente.
Cada linha de código é uma oportunidade de aprender algo novo.
📚 Continue aprendendo HTML:
Siga para a próxima etapa e continue avançando na sua jornada pelo desenvolvimento web!
🟠 Etapa 01 👉 Você está nessa Aula
🟠 Etapa 02 👉 Textos, Parágrafos
🟠 Etapa 03 👉 Listas
🟠 Etapa 04 👉 Imagens, Vídeos e Mídias
🟠 Etapa 05 👉 Links e Navegação no HTML
🟠 Etapa 06 👉 Formulários e Interatividade
🟠 Etapa 07 👉 Estrutura Semântica
🟠 Etapa 08 👉 Tabelas e Organização de Dados
🟠 Etapa 09 👉 Layouts e Responsividade (com CSS introdutório)
🟠 Etapa 10 👉 CSS Moderno: Layout no HTML
.png)
Este conteúdo faz parte do Academy Code Christ.
Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.
Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e sem enrolação.
Você pode apoiar o projeto se quiser com um café.
.png)
.png)
.png)
Postar um comentário