Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Estrutura do Documento HTML | Construindo o Site do Blog
Essenciais de Desenvolvimento Web com IA

book
Estrutura do Documento HTML

Objetivo

Primeiro, vamos criar a estrutura básica do documento do nosso site. Gostaríamos de ter três artigos. Em cada artigo, gostaríamos de especificar o título do artigo, algum conteúdo do artigo e uma imagem.

Possível Prompt

Crie uma estrutura de documento HTML para um site de blog que permita a publicação de 3 artigos. Cada artigo deve consistir em:

  • Um título (cabeçalho);
  • Vários parágrafos de texto;
  • Uma imagem;
  • Um tópico ou categoria.

A estrutura HTML deve ser organizada de forma clara e lógica, usando adequadamente as tags HTML e o significado semântico.

Resultado

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Blog</title>
</head>
<body>
<header>
<h1>Welcome to My Blog</h1>
</header>

<main>
<article>
<h2>Article 1: Exploring Nature</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, tortor non
ullamcorper commodo, justo libero maximus purus, vel pulvinar turpis quam vitae mi. Nullam
auctor, tortor id sagittis fermentum, leo lacus venenatis tortor, at tristique leo magna
in lorem.
</p>
<img src="nature.jpg" alt="Nature Image" />
<p>Category: Nature</p>
</article>

<article>
<h2>Article 2: Cooking Adventures</h2>
<p>
Phasellus rutrum tincidunt sapien, sed vestibulum velit vehicula nec. Sed pharetra dui in
fermentum sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas.
</p>
<img src="cooking.jpg" alt="Cooking Image" />
<p>Category: Cooking</p>
</article>

<article>
<h2>Article 3: Traveling Around the World</h2>
<p>
Nullam efficitur lacus nec urna fringilla, ut venenatis tortor lacinia. Duis vitae mauris
sed mi semper aliquet. Aenean vestibulum libero eget nibh malesuada, id luctus libero
pharetra. Fusce auctor mauris sed tristique efficitur.
</p>
<img src="travel.jpg" alt="Travel Image" />
<p>Category: Travel</p>
</article>
</main>

<footer>
<p>&copy; 2024 My Blog. All rights reserved.</p>
</footer>
</body>
</html>

Se você está interessado em se aprofundar no código e entender sua funcionalidade, por favor, use o botão Descrição do Código abaixo. Se estiver tudo bem, pule esta etapa e avance para o próximo capítulo.

Estado do Site

Tutorial em Vídeo

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 2
some-alt