30 KiB

Raw Permalink Blame History Unescape Escape

Projeto Terrário Parte 1: Introdução ao HTML

journey
    title A tua jornada de aprendizagem de HTML
    section Fundamentos
      Create HTML file: 3: Student
      Add DOCTYPE: 4: Student
      Structure document: 5: Student
    section Conteúdo
      Add metadata: 4: Student
      Include images: 5: Student
      Organize layout: 5: Student
    section Semântica
      Use proper tags: 4: Student
      Enhance accessibility: 5: Student
      Build terrarium: 5: Student

Sketchnote por Tomomi Imura

HTML, ou HyperText Markup Language, é a base de todos os websites que alguma vez visitou. Pense no HTML como o esqueleto que dá estrutura às páginas web – define onde o conteúdo vai, como está organizado e o que cada parte representa. Enquanto o CSS mais tarde vai "vestir" o seu HTML com cores e layouts, e o JavaScript dará vida com interatividade, o HTML fornece a estrutura essencial que torna tudo o resto possível.

Nesta lição, vai criar a estrutura HTML para uma interface virtual de terrário. Este projeto prático ensinar-lhe-á conceitos fundamentais de HTML enquanto constrói algo visualmente apelativo. Vai aprender a organizar conteúdo usando elementos semânticos, trabalhar com imagens e criar a base para uma aplicação web interativa.

No final desta lição, terá uma página HTML funcional a mostrar imagens de plantas organizadas em colunas, pronta para estilização na próxima lição. Não se preocupe se parecer básico no início – é exatamente assim que o HTML deve ser antes do CSS adicionar o polimento visual.

mindmap
  root((Fundamentos do HTML))
    Estrutura
      Declaração DOCTYPE
      Elemento HTML
      Secção Head
      Conteúdo Body
    Elementos
      Tags & Atributos
      Tags Auto-fechadas
      Elementos Aninhados
      Bloco vs Inline
    Conteúdo
      Elementos de Texto
      Imagens
      Contêineres (div)
      Listas
    Semântica
      Tags Significativas
      Acessibilidade
      Leitores de Ecrã
      Benefícios SEO
    Melhores Práticas
      Aninhamento Adequado
      Marcação Válida
      Texto Alt Descritivo
      Estrutura Organizada

Questionário Pré-Aula

Questionário pré-aula

📺 Assista e Aprenda: Veja este vídeo explicativo útil

Configurar o Seu Projeto

Antes de mergulharmos no código HTML, vamos configurar um ambiente de trabalho adequado para o seu projeto de terrário. Criar uma estrutura de ficheiros organizada desde o início é um hábito crucial que o ajudará durante toda a sua jornada no desenvolvimento web.

Tarefa: Crie a Estrutura do Seu Projeto

Vai criar uma pasta dedicada para o seu projeto terrário e adicionar o seu primeiro ficheiro HTML. Aqui estão duas abordagens que pode usar:

Opção 1: Usar o Visual Studio Code

Abra o Visual Studio Code
Clique em "File" → "Open Folder" ou use Ctrl+K, Ctrl+O (Windows/Linux) ou Cmd+K, Cmd+O (Mac)
Crie uma nova pasta chamada terrarium e selecione-a
No painel Explorer, clique no ícone "New File"
Dê ao seu ficheiro o nome index.html

Opção 2: Usar Comandos de Terminal

mkdir terrarium
cd terrarium
touch index.html
code index.html

O que estes comandos fazem:

Cria um novo diretório chamado terrarium para o seu projeto
Navega para dentro do diretório terrarium
Cria um ficheiro vazio index.html
Abre o ficheiro no Visual Studio Code para edição

💡 Dica Profissional: O nome do ficheiro index.html é especial no desenvolvimento web. Quando alguém visita um website, os browsers procuram automaticamente o index.html como página padrão para apresentar. Isto significa que um URL como https://mysite.com/projects/ vai servir automaticamente o ficheiro index.html da pasta projects sem precisar de especificar o nome do ficheiro no URL.

Compreender a Estrutura do Documento HTML

Cada documento HTML segue uma estrutura específica que os browsers precisam de entender e apresentar corretamente. Pense nesta estrutura como uma carta formal – tem elementos obrigatórios numa ordem específica que ajudam o destinatário (neste caso, o browser) a processar o conteúdo adequadamente.

flowchart TD
    A["<!DOCTYPE html>"] --> B["<html>"]
    B --> C["<head>"]
    C --> D["<title>"]
    C --> E["<meta charset>"]
    C --> F["<meta viewport>"]
    B --> G["<body>"]
    G --> H["<h1> Cabeçalho"]
    G --> I["<div> Contentores"]
    G --> J["<img> Imagens"]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#fff3e0
    style G fill:#e8f5e8

Vamos começar por adicionar a fundação essencial que todo documento HTML necessita.

A Declaração DOCTYPE e o Elemento Raiz

As primeiras duas linhas de qualquer ficheiro HTML servem como a "introdução" do documento ao browser:

<!DOCTYPE html>
<html></html>

Entender o que este código faz:

Declara o tipo de documento como HTML5 usando <!DOCTYPE html>
Cria o elemento raiz <html> que vai conter todo o conteúdo da página
Estabelece padrões web modernos para renderização correta pelo browser
Assegura apresentação consistente em diferentes browsers e dispositivos

💡 Dica VS Code: Passe o cursor sobre qualquer tag HTML no VS Code para ver informações úteis da MDN Web Docs, incluindo exemplos de uso e detalhes de compatibilidade com browsers.

📚 Saiba Mais: A declaração DOCTYPE impede que os browsers entrem em "modo incompatível" (quirks mode), que era usado para suportar sites muito antigos. O desenvolvimento web moderno usa a simples declaração <!DOCTYPE html> para garantir renderização conforme os padrões.

🔄 Verificação Pedagógica

Pause e Reflita: Antes de continuar, certifique-se de que entende:

✅ Porque é que todo documento HTML precisa de uma declaração DOCTYPE
✅ O que o elemento raiz <html> contém
✅ Como esta estrutura ajuda os browsers a renderizar as páginas corretamente

Auto-Teste Rápido: Consegue explicar com as suas próprias palavras o que significa "renderização conforme os padrões"?

Adicionar Metadados Essenciais ao Documento

A secção <head> de um documento HTML contém informações cruciais que os browsers e motores de busca precisam, mas que os visitantes não veem diretamente na página. Pense nela como a informação "por trás das câmaras" que ajuda a sua página web a funcionar corretamente e a aparecer bem em diferentes dispositivos e plataformas.

Estes metadados indicam aos browsers como mostrar a sua página, que codificação de caracteres usar e como lidar com diferentes tamanhos de ecrã – tudo essencial para criar páginas web profissionais e acessíveis.

Tarefa: Adicione a Cabeça do Documento

Insira esta secção <head> entre as suas tags de abertura e fecho <html>:

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

Explicação do que cada elemento faz:

Define o título da página que aparece nas abas do browser e nos resultados de pesquisa
Especifica a codificação de caracteres UTF-8 para apresentação correta de texto globalmente
Garante compatibilidade com versões modernas do Internet Explorer
Configura design responsivo definindo o viewport para corresponder à largura do dispositivo
Controla o nível inicial de zoom para mostrar o conteúdo no tamanho natural

🤔 Pense Nisto: O que aconteceria se definisse uma meta tag viewport assim: <meta name="viewport" content="width=600">? Isto forçaria a página a ter sempre 600 pixels de largura, quebrando o design responsivo! Saiba mais sobre configuração correta do viewport.

Construir o Corpo do Documento

O elemento <body> contém todo o conteúdo visível da sua página web – tudo o que os utilizadores vão ver e com que vão interagir. Enquanto a secção <head> forneceu instruções ao browser, a secção <body> contém o conteúdo real: texto, imagens, botões e outros elementos que formam a sua interface.

Vamos adicionar a estrutura do corpo e entender como as tags HTML funcionam em conjunto para criar conteúdo significativo.

Compreensão da Estrutura das Tags HTML

HTML usa tags emparelhadas para definir elementos. A maioria das tags tem uma tag de abertura como <p> e uma tag de fecho como </p>, com conteúdo pelo meio: <p>Olá, mundo!</p>. Isto cria um elemento de parágrafo que contém o texto "Olá, mundo!".

Tarefa: Adicione o Elemento Body

Atualize o seu ficheiro HTML para incluir o elemento <body>:

<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my Virtual Terrarium</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body></body>
</html>

O que esta estrutura completa provê:

Estabelece a estrutura básica do documento HTML5
Inclui metadados essenciais para renderização correta pelo browser
Cria um corpo vazio pronto para o seu conteúdo visível
Segue as melhores práticas modernas de desenvolvimento web

Agora está pronto para adicionar os elementos visíveis do seu terrário. Usaremos elementos <div> como contentores para organizar diferentes secções de conteúdo e elementos <img> para mostrar as imagens das plantas.

Trabalhar com Imagens e Contentores de Layout

Imagens são especiais em HTML porque usam tags "self-closing". Ao contrário de elementos como <p></p> que envolvem conteúdo, a tag <img> contém toda a informação dentro da própria tag usando atributos como src para o caminho do ficheiro da imagem e alt para acessibilidade.

Antes de adicionar imagens ao seu HTML, precisa de organizar os seus ficheiros de projeto corretamente criando uma pasta de imagens e adicionando os gráficos das plantas.

Primeiro, prepare as suas imagens:

Crie uma pasta chamada images dentro da sua pasta de projeto terrário
Descarregue as imagens das plantas da pasta da solução (14 imagens de plantas ao todo)
Copie todas as imagens das plantas para a sua nova pasta images

Tarefa: Criar o Layout de Exibição das Plantas

Agora adicione as imagens das plantas organizadas em duas colunas entre as suas tags <body></body>:

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/pt-PT/plant1.d87946a2ca70cc43.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/pt-PT/plant2.8daa1606c9c1ad89.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/pt-PT/plant3.8b0d484381a2a2a7.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/pt-PT/plant4.656e16ae1df37be2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/pt-PT/plant5.2b41b9355f11ebcc.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/pt-PT/plant6.3d1827d03b656994.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/pt-PT/plant7.8152c302ac97f621.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/pt-PT/plant8.38d6428174ffa850.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/pt-PT/plant9.f0e38d3327c37fc2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/pt-PT/plant10.b159d6d6e985595f.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/pt-PT/plant11.2a03a1c2ec8ea84e.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/pt-PT/plant12.60e9b53e538fbaf3.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/pt-PT/plant13.07a51543c820bcf5.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/pt-PT/plant14.6e486371ba7d36ba.png" />
		</div>
	</div>
</div>

Passo a passo, isto é o que acontece neste código:

Cria um contentor principal da página com id="page" para conter todo o conteúdo
Estabelece dois contentores de colunas: left-container e right-container
Organiza 7 plantas na coluna da esquerda e 7 plantas na coluna da direita
Envolve cada imagem de planta num div com classe plant-holder para posicionamento individual
Aplica nomes de classes consistentes para estilização CSS na próxima lição
Atribui IDs únicos a cada imagem de planta para interação com JavaScript mais tarde
Inclui caminhos de ficheiros corretos apontando para a pasta de imagens

🤔 Considere Isto: Repare que todas as imagens têm atualmente o mesmo texto alternativo "plant". Isto não é ideal para acessibilidade. Utilizadores de leitores de ecrã iriam ouvir "plant" 14 vezes repetidamente sem saber qual planta específica cada imagem mostra. Consegue pensar num texto alternativo mais descritivo para cada imagem?

📝 Tipos de Elementos HTML: Os elementos <div> são de "bloco" e ocupam toda a largura disponível, enquanto os elementos <span> são "inline" e ocupam apenas a largura necessária. O que acha que aconteceria se mudasse todas estas tags <div> para <span>?

🔄 Verificação Pedagógica

Compreensão da Estrutura: Tire um momento para rever a sua estrutura HTML:

✅ Consegue identificar os contentores principais no seu layout?
✅ Entende porque cada imagem tem um ID único?
✅ Como descreveria o propósito dos divs plant-holder?

Inspeção Visual: Abra o seu ficheiro HTML num browser. Deve ver:

Uma lista básica de imagens de plantas
Imagens organizadas em duas colunas
Layout simples, sem estilos

Lembre-se: Esta aparência simples é exatamente como o HTML deve parecer antes da aplicação do CSS!

Com este markup adicionado, as plantas vão aparecer no ecrã, embora ainda não estejam polidas visualmente – para isso serve o CSS na próxima lição! Por agora, tem uma base sólida de HTML que organiza corretamente o seu conteúdo e segue as melhores práticas de acessibilidade.

Usar HTML Semântico para Acessibilidade

HTML semântico significa escolher elementos HTML com base no seu significado e propósito, não apenas na aparência. Quando usa marcação semântica, está a comunicar a estrutura e o significado do seu conteúdo aos browsers, motores de busca e tecnologias assistivas como leitores de ecrã.

flowchart TD
    A[Precisa adicionar conteúdo?] --> B{Que tipo?}
    B -->|Título principal| C["<h1>"]
    B -->|Subtítulo| D["<h2>, <h3>, etc."]
    B -->|Parágrafo| E["<p>"]
    B -->|Lista| F["<ul>, <ol>"]
    B -->|Navegação| G["<nav>"]
    B -->|Artigo| H["<article>"]
    B -->|Secção| I["<section>"]
    B -->|Contentor genérico| J["<div>"]
    
    C --> K[Leitores de ecrã anunciam como título principal]
    D --> L[Cria hierarquia adequada de títulos]
    E --> M[Proporciona espaçamento correto do texto]
    F --> N[Permite atalhos de navegação em listas]
    G --> O[Identifica pontos de navegação]
    H --> P[Marca conteúdo autónomo]
    I --> Q[Agrupa conteúdo relacionado]
    J --> R[Use apenas quando nenhuma tag semântica se adequa]
    
    style C fill:#4caf50
    style D fill:#4caf50
    style E fill:#4caf50
    style F fill:#4caf50
    style G fill:#2196f3
    style H fill:#2196f3
    style I fill:#2196f3
    style J fill:#ff9800

Esta abordagem torna os seus websites mais acessíveis para utilizadores com deficiências e ajuda os motores de busca a compreender melhor o seu conteúdo. É um princípio fundamental do desenvolvimento web moderno que cria melhores experiências para todos.

Adicionar um Título Semântico à Página

Vamos adicionar um cabeçalho próprio à sua página de terrário. Insira esta linha logo após a sua tag de abertura <body>:

<h1>My Terrarium</h1>

Porque é que a marcação semântica importa:

Ajuda os leitores de ecrã a navegar e entender a estrutura da página
Melhora a otimização para motores de busca (SEO) ao clarificar a hierarquia do conteúdo
Aumenta a acessibilidade para utilizadores com deficiências visuais ou cognitivas
Cria melhores experiências para utilizadores em todos os dispositivos e plataformas
Segue os padrões web e melhores práticas para desenvolvimento profissional

Exemplos de escolhas semânticas vs. não semânticas:

Propósito	✅ Escolha Semântica	❌ Escolha Não Semântica
Cabeçalho principal	`<h1>Title</h1>`	`<div class="big-text">Title</div>`
Navegação	`<nav><ul><li></li></ul></nav>`	`<div class="menu"><div></div></div>`
Botão	`<button>Click me</button>`	`<span onclick="...">Click me</span>`
Conteúdo de artigo	`<article><p></p></article>`	`<div class="content"><div></div></div>`

🎥 Veja em Ação: Assista a como os leitores de ecrã interagem com páginas web para entender porque a marcação semântica é crucial para acessibilidade. Note como a estrutura HTML adequada ajuda os utilizadores a navegar eficientemente.

Criar o Contentor do Terrário

Agora vamos adicionar a estrutura HTML para o próprio terrário – o contentor de vidro onde as plantas eventualmente serão colocadas. Esta secção demonstra um conceito importante: o HTML fornece estrutura, mas sem estilização CSS, estes elementos ainda não serão visíveis.

O markup do terrário usa nomes de classes descritivos que tornarão a estilização CSS intuitiva e fácil de manter na próxima lição.

Tarefa: Adicione a Estrutura do Terrário

Insira este markup acima da última tag </div> (antes da tag de fecho do contentor da página):

<div id="terrarium">
	<div class="jar-top"></div>
	<div class="jar-walls">
		<div class="jar-glossy-long"></div>
		<div class="jar-glossy-short"></div>
	</div>
	<div class="dirt"></div>
	<div class="jar-bottom"></div>
</div>

Compreender esta estrutura do terrário:

Cria um contentor principal do terrário com um ID único para estilização
Define elementos separados para cada componente visual (topo, paredes, terra, fundo)
Inclui elementos aninhados para efeitos de reflexão no vidro (elementos brilhantes)
Usa nomes de classes descritivos que indicam claramente a função de cada elemento
Prepara a estrutura para o estilo CSS que criará o aspeto do terrário de vidro

🤔 Repara em Algo?: Embora tenhas adicionado esta marcação, não vês nada de novo na página! Isto ilustra perfeitamente como o HTML fornece estrutura enquanto o CSS fornece aparência. Estes elementos <div> existem, mas ainda não têm estilo visual – isso vem na próxima aula!

flowchart TD
    A[Documento HTML] --> B[Cabeçalho do Documento]
    A --> C[Corpo do Documento]
    B --> D[Elemento Título]
    B --> E[Meta Charset]
    B --> F[Meta Viewport]
    C --> G[Título Principal]
    C --> H[Contêiner da Página]
    H --> I[Contêiner Esquerdo com 7 plantas]
    H --> J[Contêiner Direito com 7 plantas]
    H --> K[Estrutura do Terrário]
    
    style A fill:#e1f5fe
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style H fill:#f3e5f5

🔄 Verificação Pedagógica

Domínio da Estrutura HTML: Antes de avançar, certifica-te de que sabes:

✅ Explicar a diferença entre estrutura HTML e aparência visual
✅ Identificar elementos HTML semânticos vs. não semânticos
✅ Descrever como uma marcação adequada beneficia a acessibilidade
✅ Reconhecer a estrutura completa da árvore do documento

Testa o Teu Entendimento: Tenta abrir o teu ficheiro HTML num navegador com o JavaScript desativado e o CSS removido. Isto mostra-te a estrutura semântica pura que criaste!

Desafio do Agente GitHub Copilot

Utiliza o modo Agente para completar o seguinte desafio:

Descrição: Cria uma estrutura HTML semântica para uma secção de guia de cuidados de plantas que possa ser adicionada ao projeto do terrário.

Enunciado: Cria uma secção HTML semântica que inclui um título principal "Guia de Cuidados de Plantas", três subseções com os títulos "Rega", "Requisitos de Luz" e "Cuidados com o Solo", cada uma contendo um parágrafo de informação sobre cuidados com plantas. Usa etiquetas HTML semânticas adequadas como <section>, <h2>, <h3>, e <p> para estruturar corretamente o conteúdo.

Sabe mais sobre o modo agente aqui.

Desafio Explorar a História do HTML

Aprender Sobre a Evolução da Web

O HTML evoluiu significativamente desde que Tim Berners-Lee criou o primeiro navegador web no CERN em 1990. Algumas etiquetas antigas como <marquee> estão agora obsoletas porque não funcionam bem com os padrões modernos de acessibilidade e princípios de design responsivo.

Tenta Este Experimento:

Envolve temporariamente o teu título <h1> numa etiqueta <marquee>: <marquee><h1>O Meu Terrário</h1></marquee>
Abre a tua página num navegador e observa o efeito de deslocamento
Pensa por que esta etiqueta foi descontinuada (dica: considera a experiência do utilizador e acessibilidade)
Remove a etiqueta <marquee> e volta à marcação semântica

Perguntas de Reflexão:

Como poderá um título em movimento afetar utilizadores com deficiência visual ou sensibilidade ao movimento?
Que técnicas modernas de CSS poderiam alcançar efeitos visuais semelhantes de forma mais acessível?
Porque é importante usar padrões web atuais em vez de elementos obsoletos?

Explora mais sobre elementos HTML obsoletos e depreciados para entender como os padrões web evoluem para melhorar a experiência do utilizador.

Questionário Pós-Aula

Questionário pós-aula

Revisão & Autoestudo

Aprofunda o Teu Conhecimento de HTML

O HTML tem sido a base da web durante mais de 30 anos, evoluindo de uma simples linguagem de marcação de documentos para uma plataforma sofisticada para construir aplicações interativas. Compreender esta evolução ajuda-te a valorizar os padrões web modernos e a tomar melhores decisões de desenvolvimento.

Caminhos de Aprendizagem Recomendados:

História e Evolução do HTML
- Pesquisa a linha temporal do HTML 1.0 ao HTML5
- Explora porque certas etiquetas foram depreciadas (acessibilidade, compatibilidade móvel, manutenção)
- Investiga funcionalidades e propostas emergentes do HTML
Imersão em HTML Semântico
- Estuda a lista completa de elementos semânticos do HTML5
- Pratica identificar quando usar <article>, <section>, <aside>, e <main>
- Aprende sobre atributos ARIA para maior acessibilidade
Desenvolvimento Web Moderno
- Explora como construir websites responsivos na Microsoft Learn
- Entende como o HTML se integra com CSS e JavaScript
- Aprende boas práticas de desempenho web e SEO

Perguntas de Reflexão:

Quais etiquetas HTML depreciadas descobriste e porquê foram removidas?
Que novas funcionalidades HTML estão a ser propostas para futuras versões?
Como é que o HTML semântico contribui para acessibilidade web e SEO?

⚡ O Que Podes Fazer nos Próximos 5 Minutos

Abre as Ferramentas de Desenvolvedor (F12) e inspeciona a estrutura HTML do teu website favorito
Cria um ficheiro HTML simples com tags básicas: <h1>, <p>, e <img>
Valida o teu HTML usando o Validador HTML da W3C online
Tenta adicionar um comentário ao teu HTML usando

🎯 O Que Podes Atingir Nesta Hora

Completa o questionário pós-licção e revê conceitos de HTML semântico
Constrói uma página web simples sobre ti usando estrutura HTML correta
Experimenta diferentes níveis de cabeçalhos e etiquetas de formatação de texto
Adiciona imagens e links para praticar integração multimédia
Pesquisa funcionalidades HTML5 que ainda não experimentaste

📅 A Tua Jornada HTML de Uma Semana

Completa o projeto do terrário com marcação semântica
Cria uma página web acessível usando rótulos ARIA e roles
Pratica a criação de formulários com vários tipos de input
Explora APIs do HTML5 como localStorage ou geolocalização
Estuda padrões de HTML responsivo e design mobile-first
Revê o código HTML de outros desenvolvedores para melhores práticas

🌟 A Tua Fundação Web de Um Mês

Constrói um website portfólio que demonstre o teu domínio de HTML
Aprende a templatear HTML com um framework como Handlebars
Contribui para projetos open source melhorando documentação HTML
Domina conceitos avançados de HTML como elementos customizados
Integra HTML com frameworks CSS e bibliotecas JavaScript
Orienta outros que estejam a aprender os fundamentos do HTML

🎯 O Teu Cronograma de Domínio do HTML

timeline
    title Progressão na Aprendizagem de HTML
    
    section Fundamentos (5 minutos)
        Estrutura do Documento: Declaração DOCTYPE
                             : Elemento raiz HTML
                             : Compreensão de Cabeçalho vs Corpo
        
    section Metadata (10 minutos)
        Meta Tags Essenciais: Codificação de caracteres
                             : Configuração da viewport
                             : Compatibilidade com browsers
        
    section Criação de Conteúdo (15 minutos)
        Integração de Imagem: Caminhos de ficheiro corretos
                           : Importância do texto alternativo
                           : Tags autocontidas
        
    section Organização do Layout (20 minutos)
        Estratégia de Contentor: Elementos Div para estrutura
                            : Nomeação de classes e IDs
                            : Hierarquia de elementos aninhados
        
    section Domínio Semântico (30 minutos)
        Marcação Significativa: Hierarquia de títulos
                             : Navegação por leitor de ecrã
                             : Boas práticas de acessibilidade
        
    section Conceitos Avançados (1 hora)
        Funcionalidades HTML5: Elementos semânticos modernos
                             : Atributos ARIA
                             : Considerações de desempenho
        
    section Competências Profissionais (1 semana)
        Organização do Código: Padrões de estrutura de ficheiros
                             : Marcação sustentável
                             : Colaboração em equipa
        
    section Nível de Especialista (1 mês)
        Normas Web Modernas: Aperfeiçoamento progressivo
                            : Compatibilidade entre browsers
                            : Atualizações da especificação HTML

🛠️ O Resumo da Tua Caixa de Ferramentas HTML

Após concluíres esta lição, agora tens:

Estrutura do Documento: Fundação completa HTML5 com DOCTYPE correto
Marcação Semântica: Etiquetas com significado que melhoram acessibilidade e SEO
Integração de Imagens: Organização correta dos ficheiros e boas práticas de texto alternativo
Contêineres de Layout: Uso estratégico de divs com nomes de classes descritivos
Consciência de Acessibilidade: Entendimento da navegação com leitores de ecrã
Padrões Modernos: Práticas atuais de HTML5 e conhecimento sobre tags depreciadas
Fundação para o Projeto: Base sólida para o estilo CSS e interatividade JavaScript

Próximos Passos: A tua estrutura HTML está pronta para o estilo CSS! A fundação semântica que construíste tornará a próxima lição muito mais fácil de compreender.

Trabalho de Casa

Pratica o teu HTML: Cria um mockup de blog

Aviso: Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos por garantir a precisão, por favor tenha em conta que traduções automáticas podem conter erros ou imprecisões. O documento original no seu idioma nativo deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações erradas decorrentes da utilização desta tradução.

30 KiB Raw Permalink Blame History Unescape Escape

Projeto Terrário Parte 1: Introdução ao HTML

Questionário Pré-Aula

Configurar o Seu Projeto

Tarefa: Crie a Estrutura do Seu Projeto

Compreender a Estrutura do Documento HTML

A Declaração DOCTYPE e o Elemento Raiz

🔄 Verificação Pedagógica

Adicionar Metadados Essenciais ao Documento

Tarefa: Adicione a Cabeça do Documento

Construir o Corpo do Documento

Compreensão da Estrutura das Tags HTML

Tarefa: Adicione o Elemento Body

Trabalhar com Imagens e Contentores de Layout

Tarefa: Criar o Layout de Exibição das Plantas

🔄 Verificação Pedagógica

Usar HTML Semântico para Acessibilidade

Adicionar um Título Semântico à Página

Criar o Contentor do Terrário

Tarefa: Adicione a Estrutura do Terrário

🔄 Verificação Pedagógica

Desafio do Agente GitHub Copilot

Desafio Explorar a História do HTML

Questionário Pós-Aula

Revisão & Autoestudo

⚡ O Que Podes Fazer nos Próximos 5 Minutos

🎯 O Que Podes Atingir Nesta Hora

📅 A Tua Jornada HTML de Uma Semana

🌟 A Tua Fundação Web de Um Mês

🎯 O Teu Cronograma de Domínio do HTML

🛠️ O Resumo da Tua Caixa de Ferramentas HTML

Trabalho de Casa

30 KiB

Raw Permalink Blame History Unescape Escape