# Projeto Terrário Parte 1: Introdução ao HTML ```mermaid 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 ``` ![Introdução ao HTML](../../../../translated_images/pt-PT/webdev101-html.4389c2067af68e98.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) 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. ```mermaid 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](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Assista e Aprenda**: Veja este vídeo explicativo útil > > [![Vídeo Fundamentos HTML](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## 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** 1. Abra o Visual Studio Code 2. Clique em "File" → "Open Folder" ou use `Ctrl+K, Ctrl+O` (Windows/Linux) ou `Cmd+K, Cmd+O` (Mac) 3. Crie uma nova pasta chamada `terrarium` e selecione-a 4. No painel Explorer, clique no ícone "New File" 5. Dê ao seu ficheiro o nome `index.html` ![Explorador do VS Code a mostrar criação de novo ficheiro](../../../../translated_images/pt-PT/vs-code-index.e2986cf919471eb9.webp) **Opção 2: Usar Comandos de Terminal** ```bash 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. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] 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: ```html <!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](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **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>`: ```html <head> <title>Welcome to my Virtual Terrarium ``` **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: ``? 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](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Construir o Corpo do Documento O elemento `` 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 `` forneceu instruções ao browser, a secção `` 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 `

` e uma tag de fecho como `

`, com conteúdo pelo meio: `

Olá, mundo!

`. 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 ``: ```html Welcome to my Virtual Terrarium ``` **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 `
` como contentores para organizar diferentes secções de conteúdo e elementos `` 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 `

` que envolvem conteúdo, a tag `` 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:** 1. Crie uma pasta chamada `images` dentro da sua pasta de projeto terrário 2. Descarregue as imagens das plantas da [pasta da solução](../../../../3-terrarium/solution/images) (14 imagens de plantas ao todo) 3. 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 ``: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **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 `
` são de "bloco" e ocupam toda a largura disponível, enquanto os elementos `` são "inline" e ocupam apenas a largura necessária. O que acha que aconteceria se mudasse todas estas tags `
` para ``? ### 🔄 **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 `div`s `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ã. ```mermaid flowchart TD A[Precisa adicionar conteúdo?] --> B{Que tipo?} B -->|Título principal| C["

"] B -->|Subtítulo| D["

,

, etc."] B -->|Parágrafo| E["

"] B -->|Lista| F["

    ,
      "] B -->|Navegação| G["