` para criar os elementos separados numa página. Vamos criar uma série de elementos `

` que conterão imagens. ### Imagens Uma tag html que não precisa de uma tag de encerramento é a ``, porque ela tem um elemento `src` que contém todas as informações necessárias para renderizar o item na página. Crie uma pasta na sua aplicação chamada `images` e, dentro dela, adicione todas as imagens da [pasta de código fonte](../../../../3-terrarium/solution/images); (são 14 imagens de plantas). ### Tarefa Adicione essas imagens de plantas em duas colunas entre as tags ``: ```html

``` > Nota: Spans vs. Divs. Divs são considerados elementos 'block', e Spans são 'inline'. O que aconteceria se transformasse esses divs em spans? Com este código, as plantas agora aparecem no ecrã. Parece muito feio, porque ainda não foram estilizadas com CSS, e faremos isso na próxima lição. Cada imagem tem um texto alternativo (alt) que aparecerá mesmo que não consiga ver ou renderizar uma imagem. Este é um atributo importante para incluir por questões de acessibilidade. Aprenda mais sobre acessibilidade em lições futuras; por agora, lembre-se de que o atributo alt fornece informações alternativas para uma imagem caso um utilizador, por algum motivo, não consiga visualizá-la (devido a uma conexão lenta, um erro no atributo src ou se o utilizador usar um leitor de ecrã). ✅ Reparou que cada imagem tem o mesmo texto alternativo? Isso é uma boa prática? Porquê? Consegue melhorar este código? --- ## Marcação semântica Em geral, é preferível usar 'semântica' significativa ao escrever HTML. O que isso significa? Significa usar tags HTML para representar o tipo de dados ou interação para os quais foram projetadas. Por exemplo, o texto principal de um título numa página deve usar uma tag `

`. Adicione a seguinte linha logo abaixo da sua tag de abertura ``: ```html

My Terrarium

``` Usar marcação semântica, como ter cabeçalhos como `

` e listas não ordenadas renderizadas como `
`, ajuda leitores de ecrã a navegar por uma página. Em geral, botões devem ser escritos como `

`: ```html

``` ✅ Apesar de ter adicionado esta marcação ao ecrã, não vê absolutamente nada renderizado. Porquê? --- ## 🚀Desafio Existem algumas tags 'antigas' no HTML que ainda são divertidas de usar, embora não deva usar tags obsoletas como [estas tags](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) na sua marcação. Ainda assim, consegue usar a antiga tag `` para fazer o título h1 rolar horizontalmente? (se o fizer, não se esqueça de removê-la depois) ## Questionário Pós-Aula [Questionário pós-aula](https://ff-quizzes.netlify.app/web/quiz/16) ## Revisão & Autoestudo HTML é o sistema de construção 'testado e comprovado' que ajudou a construir a web como a conhecemos hoje. Aprenda um pouco sobre a sua história estudando algumas tags antigas e novas. Consegue descobrir por que algumas tags foram descontinuadas e outras adicionadas? Que tags podem ser introduzidas no futuro? Saiba mais sobre como construir sites para a web e dispositivos móveis em [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon). ## Tarefa [Pratique o seu HTML: Crie um modelo de blog](assignment.md) --- **Aviso Legal**: Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, é importante notar que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.