JWS Docs / Build Steps / Changing the Header

Changing the Header

In the header you will need to change the websites main heading text inside the <h1> tags.

We changed ours to <h1>Our Grand Day Out</h1>

Header Addins

Header With Logo

If you are following this tutorial but adding your own contents. You may be needing to add either a club, product or company, logo or icon in the header alongside your <h1> name.

This can be done by adding a class to the <header> element as follows:

<header class="header_with_img">

The CSS for this class is already included in our CSS file so you only need to make changes in the HTML page.

Next we need to add the <img> on the first line inside the header before the <h1>

Included inside the image tag there must be each of the following tags

• src a link to the file where your image is stored
• width and height of the image
• alt this will display if your image can't and is also important for accessibility as it is used by screen readers.

Put together they will look like this:

<header class="header_with_img">
    <img src="img/stephensonrocket.jpg" width="300" height="225" alt="Stephenson Rocket photo">
    <h1>Our Grand Day Out</>
</header>

Header With Navigation

In the Next Steps section of the docs we will show how to add more pages to your website which will also include adding a navigation element to your header.