Summary  
This chapter covers using HTML5 semantic elements to organize a document’s structure into a header, main section with multiple articles (each containing headings, paragraphs, images, and categories), and a footer.  

General domain of usage  
Building a blog website

## Objetivo
Primeiramente, vamos criar a estrutura básica do documento do nosso site. Desejamos ter três artigos. Em cada artigo, queremos especificar o título do artigo, algum conteúdo textual e uma imagem.

## Prompt Possível
Crie uma estrutura de documento HTML para um site de blog que permita a publicação de 3 artigos. Cada artigo deve conter:
- 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, utilizando corretamente as tags HTML e o significado semântico.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+TXkgQmxvZzwvdGl0bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGgxPldlbGNvbWUgdG8gTXkgQmxvZzwvaDE+CiAgICA8L2hlYWRlcj4KCiAgICA8bWFpbj4KICAgICAgPGFydGljbGU+CiAgICAgICAgPGgyPkFydGljbGUgMTogRXhwbG9yaW5nIE5hdHVyZTwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzY2luZyBlbGl0LiBTZWQgZXVpc21vZCwgdG9ydG9yIG5vbgogICAgICAgICAgdWxsYW1jb3JwZXIgY29tbW9kbywganVzdG8gbGliZXJvIG1heGltdXMgcHVydXMsIHZlbCBwdWx2aW5hciB0dXJwaXMgcXVhbSB2aXRhZSBtaS4gTnVsbGFtCiAgICAgICAgICBhdWN0b3IsIHRvcnRvciBpZCBzYWdpdHRpcyBmZXJtZW50dW0sIGxlbyBsYWN1cyB2ZW5lbmF0aXMgdG9ydG9yLCBhdCB0cmlzdGlxdWUgbGVvIG1hZ25hCiAgICAgICAgICBpbiBsb3JlbS4KICAgICAgICA8L3A+CiAgICAgICAgPGltZyBzcmM9Im5hdHVyZS5qcGciIGFsdD0iTmF0dXJlIEltYWdlIiAvPgogICAgICAgIDxwPkNhdGVnb3J5OiBOYXR1cmU8L3A+CiAgICAgIDwvYXJ0aWNsZT4KCiAgICAgIDxhcnRpY2xlPgogICAgICAgIDxoMj5BcnRpY2xlIDI6IENvb2tpbmcgQWR2ZW50dXJlczwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBQaGFzZWxsdXMgcnV0cnVtIHRpbmNpZHVudCBzYXBpZW4sIHNlZCB2ZXN0aWJ1bHVtIHZlbGl0IHZlaGljdWxhIG5lYy4gU2VkIHBoYXJldHJhIGR1aSBpbgogICAgICAgICAgZmVybWVudHVtIHNvZGFsZXMuIFBlbGxlbnRlc3F1ZSBoYWJpdGFudCBtb3JiaSB0cmlzdGlxdWUgc2VuZWN0dXMgZXQgbmV0dXMgZXQgbWFsZXN1YWRhCiAgICAgICAgICBmYW1lcyBhYyB0dXJwaXMgZWdlc3Rhcy4KICAgICAgICA8L3A+CiAgICAgICAgPGltZyBzcmM9ImNvb2tpbmcuanBnIiBhbHQ9IkNvb2tpbmcgSW1hZ2UiIC8+CiAgICAgICAgPHA+Q2F0ZWdvcnk6IENvb2tpbmc8L3A+CiAgICAgIDwvYXJ0aWNsZT4KCiAgICAgIDxhcnRpY2xlPgogICAgICAgIDxoMj5BcnRpY2xlIDM6IFRyYXZlbGluZyBBcm91bmQgdGhlIFdvcmxkPC9oMj4KICAgICAgICA8cD4KICAgICAgICAgIE51bGxhbSBlZmZpY2l0dXIgbGFjdXMgbmVjIHVybmEgZnJpbmdpbGxhLCB1dCB2ZW5lbmF0aXMgdG9ydG9yIGxhY2luaWEuIER1aXMgdml0YWUgbWF1cmlzCiAgICAgICAgICBzZWQgbWkgc2VtcGVyIGFsaXF1ZXQuIEFlbmVhbiB2ZXN0aWJ1bHVtIGxpYmVybyBlZ2V0IG5pYmggbWFsZXN1YWRhLCBpZCBsdWN0dXMgbGliZXJvCiAgICAgICAgICBwaGFyZXRyYS4gRnVzY2UgYXVjdG9yIG1hdXJpcyBzZWQgdHJpc3RpcXVlIGVmZmljaXR1ci4KICAgICAgICA8L3A+CiAgICAgICAgPGltZyBzcmM9InRyYXZlbC5qcGciIGFsdD0iVHJhdmVsIEltYWdlIiAvPgogICAgICAgIDxwPkNhdGVnb3J5OiBUcmF2ZWw8L3A+CiAgICAgIDwvYXJ0aWNsZT4KICAgIDwvbWFpbj4KCiAgICA8Zm9vdGVyPgogICAgICA8cD4mY29weTsgMjAyNCBNeSBCbG9nLiBBbGwgcmlnaHRzIHJlc2VydmVkLjwvcD4KICAgIDwvZm9vdGVyPgogIDwvYm9keT4KPC9odG1sPg==

Caso haja interesse em analisar detalhadamente o código e compreender sua funcionalidade, utilize o botão <span style="padding: 0 10px; border: 2px solid lightgray; border-radius: 10px; color: black; background-color: #fff;">Descrição do Código</span> abaixo. Se preferir, pule esta etapa e avance para o próximo capítulo.

Aprenda os fundamentos do desenvolvimento web enquanto aproveita o poder de ferramentas de IA como o ChatGPT. Compreenda os papéis do HTML, CSS e JavaScript na construção de sites e como a IA pode aprimorar sua velocidade e criatividade na codificação. Pratique a elaboração de prompts eficazes e a geração de código com o ChatGPT. Construa um site de blog completo do zero utilizando o desenvolvimento assistido por IA, adquirindo habilidades práticas para seus projetos web.

Seja apresentado aos principais conceitos e tecnologias do desenvolvimento web, incluindo o papel da IA na programação moderna. Esta seção estabelece a base para sua jornada de aprendizado, abordando os fundamentos do desenvolvimento web e como a IA potencializa a produtividade, criatividade e eficiência na programação.

Aprenda as tecnologias essenciais do desenvolvimento web. Explore os fundamentos de HTML, CSS e JavaScript, compreendendo suas funcionalidades individuais e o papel coletivo na formação do cenário digital.

Descubra o potencial do ChatGPT ao explorar suas capacidades e aprender como utilizá-lo de forma eficaz. Obtenha insights sobre a elaboração de prompts e o trabalho com código por meio do ChatGPT. Finalize com dicas práticas sobre como aproveitar o ChatGPT em diversas aplicações.

Construa o site do blog. Criação de um site de blog completo e funcional do zero, incorporando diversas técnicas de desenvolvimento web utilizando o ChatGPT.

Estruturando o Documento HTML

Objetivo

Prompt Possível

Resultado

Estado do Site