Step 2.4 · Home page (HTML)

Add text, images and links

Replace the placeholder content with your writing, your images and links to your gallery pages.

You will work in: site/index.html
Learning outcome: Semantic HTML

Text

Replace the placeholder text inside <section class="intro"> with your theme title and introduction. Text goes between the opening and closing tags.

site/index.html

<section class="intro">
  <h1>De Stijl</h1>
  <p>Founded in Leiden in 1917, De Stijl reduced art to straight lines,
     right angles and the three primary colors.</p>
</section>

Use headings in order. Each page has one <h1> (the page title). Card titles are <h2>. Never skip a level just to get a smaller size; change the size with CSS instead.

Search engines and screen-reader users rely on headings to understand and skim a page.
Use character codes for a few special symbols: & for &, © for ©, < for <. See the W3Schools entity list.

Images

HTML

<img src="images/thumbs/red-01-sm.jpg" alt="Red front door with a brass knocker" width="280" height="280">

Attribute	Job
`src`	The path to the image file
`alt`	Describes the image for screen readers and when it fails to load. Required.
`width`, `height`	The display size. Lets the browser reserve space so the page doesn't jump while loading.

Replace the logotype images/logo.svg with your exported logotype, and set its alt text to your site name.
Replace each card image with one thumbnail from that topic and write its alt text.

VS Code shortcut

Type img and press Tab. Inside src="", start typing images/ and VS Code lists the files in that folder.

Links

HTML

<!-- Internal link: another page in your site -->
<a href="red.html">Red</a>

<!-- External link: another website, opens in a new tab -->
<a href="https://www.moma.org/artists/4057" target="_blank" rel="noopener">Piet Mondrian at MoMA</a>

<!-- Image link: the whole image is clickable -->
<a href="red.html"><img src="images/thumbs/red-01-sm.jpg" alt="Red front door"></a>

Check every link in your navigation and cards points to the right file name.
Write link text that makes sense out of context. Use “Piet Mondrian at MoMA”, not “click here”.
Save and preview in a browser. Click every link.

Use the Integrated Browser or an external browser (see Using Visual Studio Code), and refresh it after every save.