W19

WEEK 19

The Navigation Bar
web.selah-hcs.orgweb design for kids // html5 + css3one day academy
THIS WEEK'S JOB // Give every page of your shop the same row of doors along the top. (Book pages 146-151 in Mrs. Gaiser's book.)

THE THREE IDEAS

nav is a list of links
A navigation bar is honestly just a list of a elements, usually inside a nav element. Later CSS turns the list sideways and makes it pretty.
Same nav, every page
Visitors learn where your doors are once. Copy the same nav onto every page so the doors never move on them.
You are here
A good nav shows which page the visitor is on. Even just leaving the current page unlinked is a kindness.

TRY IT IN THE PAINT BOOTH

<nav>
  <a href="index.html">Home</a> |
  <a href="about.html">About</a> |
  <a href="gallery.html">Gallery</a>
</nav>
<h1>Welcome</h1>
OPEN THE PAINT BOOTH, PRELOADED »

ON YOUR LOT

Build your nav and paste it into every page of your site. Click through every door on every page; every one must work.
« W18W20 »