A home page is the starting page of a multipage website. It welcomes visitors, establishes the site’s identity, and directs people to the main pages. Build it first so later pages can share its visual style and navigation. section 6.2 section 7.3
For an information site, a useful home page has a header with a title and tagline, navigation links, a welcoming lead paragraph, engaging sections, and a copyright footer. An interest site can use the same structure while adding a full-window hero image and sections that introduce each subtopic. section 6.2.3 section 7.1
Create the page by giving ChatGPT clear content and formatting instructions:
- Choose a logo, title, tagline, heading and body typefaces, and background and text colors before prompting. section 6.2.3 section 7.3.2
- Request HTML for a header, navigation, main content, sections, and footer; name each link’s text and destination file. section 6.2.3 section 7.3.2
- Request CSS separately in the same prompt, specifying colors, fonts, type sizes, and a main-content maximum width. section 6.2.3 section 7.3.2
- Save the HTML as index.html and the stylesheet as styles.css in the same folder; keep the image file there too when the page uses one. section 6.2.3 section 7.3.2
- Tell ChatGPT that later pages must use the same CSS file and must not add inline or extra styles. section 6.2 section 7.3
A hobby-site home page
A bread-focused site can place a hero image named hero.jpg behind its title and tagline, then offer Home, History, Culture, and Language links. Its main area opens with a welcome paragraph and uses sections to introduce the site’s topics and link onward. section 7.3.2
I want to build a website home page. I don't know how to code, so I need you to provide the code for me. First, write the HTML code for a web page that includes the following: * A header that uses the file hero.jpg as a hero image. * The header also includes the title "Bread in the Bone" and the tagline "A half-baked look at the history and culture of bread". * The header should also include four links in the upper-right corner: * The text "Home" that links to the file "index.html". * The text "History" that links to the file "history.html". * The text "Culture" that links to the file "culture.html". * The text "Language" that links to the file "language.html". * A main element that includes the following five elements: * An introductory paragraph that includes the text "Welcome to Bread in the Bone, where I, a bread baker, a bread eater, and an unabashed bread nerd, try to make sense of the historical, cultural, and linguistic significance of that most humble of home staples: the loaf of bread. It's the greatest thing since, well, you know..." * A second paragraph that consists of the text "This site is divided into three sections:" * The second-level heading "History" followed by a paragraph that includes the text "A potted and probably not very accurate history of bread, from its ancient origins to today's ancient grains." Then the text "Check it out." as a link to "history.html". * The second-level heading "Culture" followed by a paragraph that includes the text "A remarkably shallow examination of the cultural significance of bread, from its religious meanings to its social uses." Then the text "Read it." as a link to "culture.html". * The second-level heading "Language" followed by a paragraph that includes the text "A not-all-that-deep dive into the linguistic roots and uses of the word bread, from its etymology to its varied metaphors." Put the word "bread" in italics. Then add the text "Go there." as a link to "language.html". * A footer element that includes the Copyright symbol, followed by the current year, followed by "Paul McFedries". * In the page head section, include the tag <meta charset="utf-8">. Second, in a separate file write the CSS code for the following: * The page background color is wheat. * The hero image covers the entire browser window. * Add a linear gradient to the header background to darken the hero image slightly. * Make all the header text white. * Make the title and tagline centered both horizontally and vertically. * Make the title 72px. * Make the tagline 36px. * Make the header links 24px. * Style the headings with size 48px, no bottom margin, the color saddlebrown, and the Raleway typeface from Google Fonts. * Style the rest of the page text with size 24px, a 20px bottom margin, and the Lato typeface from Google Fonts. * Style the main element's links with the color saddlebrown. * The main section has 25px padding all around and a maximum width of 800px. * The footer has a top border.
Use this full prompt as a model for naming a hero image, defining navigation destinations, and describing the welcome text and topic sections. section 7.3.2
Customize a generated page either by revising the prompt or by making small code edits. Change title and tagline text without removing their HTML tags; update link text and filenames; copy an existing section to add another topic. In CSS, adjust hero-image darkness, line spacing, maximum width, colors, or font sizes. section 7.4.3
