Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ Structuring the HTML Document | Building the Blog Website
/
Web Development with ChatGPT

bookStructuring the HTML Document

メニューを表示するにはスワイプしてください

Goal

First, let's create the basic document structure of our website. We would like to have three articles. In each article, we would like to specify the article heading, some article content, and an image.

Note
Note

You can use the prompts that we provide or modify them as needed. There isn't just one way to achieve the goal. ChatGPT is flexible and can assist in various ways.

Possible Prompt

Create an HTML document structure for a blog website that allows for the publication of 3 articles. Each article should consist of:

  • A title (heading);
  • Several paragraphs of text;
  • An image;
  • A topic or category.

The HTML structure should be organized clearly and logically, using HTML tags and semantic meaning properly.

Result

index.html

index.html

copy

If you are interested in delving deep into the code and understanding its functionality, please use the Code Description button below. If you are okay with it, skip this step and move on to the next chapter.

Website State

Video Tutorial

question mark

Why is it a good idea to structure each article inside an <article> element when building a blog page?

正しい答えを選んでください

すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 4.  2

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 4.  2
some-alt