Lesson 12 - Navigation menu, footer and HTML entities

HTML and CSS First website Navigation menu, footer and HTML entities

In the previous lesson, Border, shadow and the boxmodel in CSS, we introduced you to borders, shadows, and the boxmodel. We also finished the article area on our website. In today's lesson, we're going to code a navigation menu and a footer, as promised.

Header

We'll use the <header> element once again for the header. We've already used it to define the article header. Now, we'll use it to define a header for the entire body. Adding the header tag helps search engines treat the element as a header. As you already know, div elements were used at one point as headers, but doing so nowadays is considered unsemantic. A website full of div elements is hard to read for both programmers and search engines.

Let's go ahead and add a <header> tag at the very beginning of the <body>:

<header>

</header>

There will only be 2 things in the header: a logo and a navigation menu.

Logo

Insert the logo into a <div> element and add an id attribute with the value set to "logo".

<div id="logo">HoBi</div>

The id attribute is kind of similar to the class attribute. It assigns a particular style to a specific element. The main difference between them is that only one element can be affected because each id must be unique (like we did here with the "logo" id) in the entire HTML document. Whereas we are allowed to assign a single class to as many elements as we wanted. We use ids to style specific elements on a website. Take the logo, for example, there is only one logo on a page. We'll come back to ids later when we style the logo.

Navigation menu

As for the second element in the header, we said we'd have a navigation menu. We use the <nav> tag to set a navigation area. As you probably could have guessed, it has benefits over unsemantic divs because search engines can recognize

 

Download

Downloaded 37x (76.84 kB)
Application includes source codes in language HTML

 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
1 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Activities (9)

 

 

Comments

Avatar
sadhath
Member
Avatar
sadhath:15. March 5:31

<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class="gallery">

<img src="fjords.jpg" alt="Fjords" width="300" height="200">

<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">

<img src="forest.jpg" alt="Forest" width="300" height="200">

<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">

<img src="lights.jpg" alt="Northern Lights" width="300" height="200">

<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">

<img src="mountains.jpg" alt="Mountains" width="300" height="200">

<div class="desc">Add a description of the image here</div>
</div>

</body>
</html

 
Reply 15. March 5:31
Avatar
IT Man
Member
Avatar
Replies to sadhath
IT Man:15. March 11:16
  1. Next time use button </> for code. It's hard to read it now.
  2. Stylesheet should be in own file with CSS. So put it in style.css and link it in HTML in head:
<link rel="stylesheet" href="style.css" />
Reply 15. March 11:16
Don't be silly, smile!
To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

2 messages from 2 displayed.