Before writing code, plan the page layout. The most common layout splits a page into three parts, top to bottom:
| Part | Tag | What goes in it? |
|---|---|---|
| Header | <header> | Site name, logo and section menu |
| Main content | <div class="main"> | The main information (the cafe items and pictures) |
| Footer | <footer> | Directions, contact and copyright |
Why split it? Each part gets a name, so you can style it with CSS or change it later without touching the rest of the page.
The header
Wrap the top of the page in a <header> tag. It is only a marker saying "the header starts here and ends here", so it does not change the look by itself. But its name works as a CSS selector, so one rule colours the whole header background:
header {
background-color: rgb(255, 255, 180);
}Main content with div
The <div> tag groups different content (a heading, a list, pictures) into one section. It has no special meaning, so we give it a class that says what is inside: class="main". In each list item we write the item name, then <br>, then its picture with alt:
<header>
<h1>CAFE MENU</h1>
<ul>
<li>About the Cafe</li>
<li>Menu</li>
</ul>
</header>
<div class="main">
<h1>Menu List</h1>
<ul>
<li>Donut<br><img src="img/donut.svg" alt="Donut image"></li>
<li>Cafe latte<br><img src="img/cup.svg" alt="Cafe latte image"></li>
</ul>
</div>The footer
Wrap the bottom of the page in a <footer> tag. Colour it with a hex code and make its text white #ffffff so it reads clearly on the blue background. Here is the complete page; try changing the colours:
header {
background-color: rgb(255, 255, 180);
}
footer {
background-color: #1e90ff;
color: #ffffff;
}</div> and the footer ends up inside the main content. Write the start and end tags together first, then fill in between.Practice
Fill both blanks to wrap the top of the page in a header tag.
___
<h1>CAFE MENU</h1>
<ul>
<li>About the Cafe</li>
<li>Menu</li>
</ul>
___Make the header background rgb(255, 255, 180): selector header, property background-color.
Wrap the main content (the Menu List heading and the list under it) in a div with the class main.
<header>
<h1>CAFE MENU</h1>
<ul>
<li>About the Cafe</li>
<li>Menu</li>
</ul>
</header>
<h1>Menu List</h1>
<ul>
<li>Donut<br><img src="img/donut.svg" alt="Donut image"></li>
</ul>In the Cafe latte item, after the <br>, add a picture with src img/cup.svg and alt Cafe latte image.
<header>
<h1>CAFE MENU</h1>
<ul>
<li>About the Cafe</li>
<li>Menu</li>
</ul>
</header>
<div class="main">
<h1>Menu List</h1>
<ul>
<li>Donut<br><img src="img/donut.svg" alt="Donut image"></li>
<li>Cafe latte<br></li>
</ul>
</div>After the header rule, add a footer rule: background #1e90ff, then text colour #ffffff.
header {
background-color: rgb(255, 255, 180);
}A restaurant page: put the restaurant name inside header, the menu inside div, and Contact Us inside footer.
___
<h3>Delicious Pasta Restaurant</h3>
___
___
<ul>
<li>Pasta</li>
<li>Pizza</li>
</ul>
___
___
<p>Contact Us</p>
___Build a page for your school book fair (the CSS is ready): a header with an h1 title, then a div with the class main holding a list of what is on show with at least one picture from img/book.svg, img/cake.svg or img/ball.svg, then a footer with the fair date. Choose your own text.
Key points
- The common page layout:
<header>, then the main content, then<footer>. <div class="main">groups different content into one section.- Tag and class names work as selectors:
header { },footer { },.main { }.