News article

As explained in Build a Website with ChatGPT

An article page is a web page that presents a written work focused on one topic and potentially divided into subtopics.

A news article is a written work focused on one topic, often organized into several subtopics. On the web, an article page gives that writing a clear home within a larger page layout. section 12.0 section 12.2

A typical article page places the article alongside supporting site elements:

• A header with a logo, title, and tagline. section 12.1
• A navigation bar linking to other areas of the site. section 12.1
• A main area containing the article title, sections, headings, and paragraphs. section 12.1
• A sidebar with related information and a footer with a copyright notice. section 12.1

Choosing the layout

Use an article layout when the news writing focuses on one subject and divides that subject into multiple subtopics. Build the page skeleton with HTML, arrange the article and sidebar in two CSS Grid columns, then add the article sections manually. Keeping lengthy content out of the generation prompt makes the page easier to create and edit. section 12.2 section 12.2.10 section 12.2.4

Figure 12.1 An article page generated by ChatGPT

Use the page preview to recognize how the header, navigation, article, sidebar, and footer fit together. section 12.1

How Build a Website with ChatGPT covers it

How deep it goes

Defines selection criteria, page components, responsive layout, and manual section creation without covering article-writing technique.

Examples

Uses a fictional travel guide and identifies news items, essays, reviews, biographies, and historical accounts as applications.

What it assumes

Assumes basic HTML page-layout elements and requires content, fonts, colors, and header details before prompting.

What you can do after

Build it from scratch by prompting for a page skeleton, adding article sections manually, and checking the layout on smaller screens.

How it connects

Connects HTML elements, CSS Grid, navigation, sidebars, footers, and media queries.

liveBookmanning.com

Read Build a Website with ChatGPT on liveBook Get the book at manning.com

Related concepts

• request messageequivalent to · An HTTP request is a message sent by a client to a server that specifies a method and target and may include headers and a body.
• CSS Gridconfigured by · CSS Grid is a CSS layout system for arranging elements in two-dimensional rows and columns.
• content creatorproduced by · A content creator is a person or entity that originates or produces content for publication or an audience.
• userused by · A user is a person or other entity that interacts with, or is represented within, a system to access or use its functions.
• HTMLkind of · HTML (HyperText Markup Language) is the standard markup language for structuring content and elements in web documents.
• header elementhas part · The HTML header element represents introductory content or navigational aids for a document or section.

This explainer was generated by Manning's knowledge graph from the text of Build a Website with ChatGPT. The section links point to the parts of the book it draws on.