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
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.

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

Se você está interessado em se aprofundar no código e entender sua funcionalidade, por favor, use 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 estiver tudo bem, pule esta etapa e avance para o próximo capítulo.

Embarque em uma jornada envolvente pelos fundamentos da teoria e tecnologias da web. Aprofunde seu entendimento com as percepções do ChatGPT e conclua seu aprendizado criando seu próprio site totalmente funcional com IA. Este curso é sua porta de entrada para dominar os fundamentos de HTML, CSS e JavaScript, enquanto aproveita o poder do ChatGPT para aumentar a interatividade e inteligência em seus projetos web.

Seja introduzido aos conceitos e tecnologias chave no desenvolvimento web, incluindo o papel da IA na codificação moderna. Esta seção estabelece a base para sua jornada de aprendizado, cobrindo os fundamentos do desenvolvimento web e como a IA melhora a produtividade, criatividade e eficiência na codificação.

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

Descubra o poder do ChatGPT enquanto explora suas capacidades e aprende a utilizá-lo de forma eficaz. Obtenha insights sobre como criar prompts e trabalhar com código através do ChatGPT. Conclua com dicas práticas sobre como aproveitar o ChatGPT em várias aplicações.

Construa o site do Blog! Crie um site de blog completo e funcional do zero, incorporando várias técnicas de desenvolvimento web usando o ChatGPT.

Estrutura do Documento HTML

Objetivo

Possível Prompt

Resultado