2 of 7
This lesson is closed. Finish the one before it. Do the practice. Pass the assessment. Then this one opens.
Back to the lesson. Three tries are used. Read this again, then try the code.
You finished. The lesson is open again.
The five buttons must show on the pages, and each of the five webpages should be linked for easy accessibility.
The clay outline is the part this lesson is about.
The paper says buttons. It also says the pages should be linked. In HTML those two sentences mean: make links, and paint them so they look like buttons. A button label does not open another file. An a label with an href does.
href="about.html" means: open the file called about.html that sits in the same folder. The words the person sees are About Us. You copy this same menu onto every page. On the home file, the Home link gets class="here" so the paint can mark the page you are on. Move that class when you copy the menu onto the next file.
A marker who clicks Home and stays on the same screen will mark the menu down, even if the boxes look right. The test is the click. Each word opens its own file.
<nav>
<a class="here" href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="services.html">Our Services</a>
<a href="clients.html">Our Clients</a>
<a href="contact.html">Contact Us</a>
</nav>nav a {
display: inline-block;
margin: 6px;
padding: 10px 14px;
color: #1a1712;
background: #ffffff;
border: 1px solid #e4d9ce;
text-decoration: none;
}
nav a.here {
background: #1a1712;
color: #faf7f2;
}<a href="about.html">A link to a file in the same folder. The href is the file name, not a # jump. This is the difference from the profile menu.About UsThe words on the button. The paper’s five are Home, About Us, Our Services, Our Clients, Contact Us.class="here"Marks the current page. On about.html, move class="here" onto the About Us link and take it off Home.display: inline-blockThe same paint as the profile menu. Border, padding, margin. The link looks like a button and still works as a link.This is not your file, and it is not the version to copy. It is here so you can see the difference after the right labels.
<button>Home</button>
<button>About Us</button>
<button>Our Services</button>
<button>Our Clients</button>
<button>Contact Us</button>A friend used button labels for the menu. They look like the paper’s drawing, and they go nowhere. A button stays on the page. A link opens a file. Paint the link. Keep the href.
The next lesson opens after you practice and pass the assessment.
The paper drew buttons. These are real buttons, so they do not open the other files. Fix the menu.
The code is right. Start the assessment when you are ready. The lesson stays closed until both answers are right.
The lesson is closed. Pick one answer each, then mark it. A wrong answer tells you why, what to do, and what to remember.