HTML needs no introduction. HTML expands as HyperText Markup Language. It is the most popular and widely-used language for web application development. Created in 1991 by Berners-Lee, but published first in 1995, the HTML programming language has gone through a lot of changes and resulting versions over the years. Released in 1999, HTML 4 was a popular breakthrough version that attracted a lot of attention and was adopted across the world fairly quickly - soon becoming the language of choice for web application development for many. The language has been upgraded once more - HTML5; and was published in the year 2012.
In this HTML Navigation Bar article, we focus on navigating between web pages using the navigation bar. We will also add a little bit of CSS to make the webpage look and feel good.
In this article, you will get to learn to code and work on an HTML web application along with us. The application under discussion can navigate between pages using the links provided in the navigation bar. So without further ado, let’s get started!
The project directory should look like this in the end.
Fig: Project Directory
Let’s now start coding this HTML web application. As you can see in the project directory, there are four pages in this web application. Our main goal is to allow users to navigate these pages using the navigation bar to add to all the web pages. Therefore, code will mostly be similar for all four web pages with minor tweaks here and there.
This is the home (landing) page of the website. Let’s go ahead and get a better understanding of the code in this file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Home</title>
</head>
<body>
<nav>
<div class="heading">
<h4>Navigation Bar</h4>
</div>
<ul class="nav-links">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="pages/about.html">About</a></li>
<li><a href="pages/services.html">Services</a></li>
<li><a href="pages/contact.html">Contact</a></li>
</ul>
</nav>
<div class="body-text"><h1>This is Home Page!</h1></div>
</body>
</html>
That’s all the code we needed for this webpage. Going forward, we have to create three more pages to illustrate the concept of navigation in HTML properly. The code is mostly the same, so let’s point out the code’s differences between the pages.
This is the second page of the website with a very similar code to the first one. Let’s go ahead and look at the differences in the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="../style.css" />
<title>About</title>
</head>
<body>
<nav>
<div class="heading">
<h4>Navigation Bar</h4>
</div>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a class="active" href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="body-text"><h1>This is About Page!</h1></div>
</body>
</html>
This is the third page of the website with a very similar code to the previous pages. Let’s go ahead and look at the differences in the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="../style.css" />
<title>Services</title>
</head>
<body>
<nav>
<div class="heading">
<h4>Navigation Bar</h4>
</div>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a class="active" href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="body-text"><h1>This is Services Page!</h1></div>
</body>
</html>
This is the fourth and last page of the website with a similar code to the previous pages. Let’s go ahead and look at the differences in the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="../style.css" />
<title>Services</title>
</head>
<body>
<nav>
<div class="heading">
<h4>Navigation Bar</h4>
</div>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a class="active" href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="body-text"><h1>This is Services Page!</h1></div>
</body>
</html>
This is the CSS stylesheet that we add to the website to make it look and feel good. Let’s go ahead and have a look at the styles added in this stylesheet.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.body-text {
display: flex;
font-family: "Montserrat", sans-serif;
align-items: center;
justify-content: center;
margin-top: 250px;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: teal;
font-family: "Montserrat", sans-serif;
}
.heading {
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
padding: 14px 16px;
}
.nav-links a:hover:not(.active) {
background-color: lightseagreen;
}
.nav-links li a.active {
background-color: #4caf50;
}
This is how the application should look when you code it. So congratulations, you just coded your HTML web application with navigation features.
Fig: HTML Navigation Bar Output
You can further style your web applications using CSS stylesheet, add interactivity using JavaScript, and build a good website. Keep in mind that you will need to know all three languages at a beginner level.
We hope this HTML Navigation Bar article helped you grasp a few essential navigation concepts in HTML websites. We highly recommend you go through other tutorials and learn more about CSS and JavaScript to become a full-fledged web developer.
Now that you’ve learned the basics of HTML and the HTML Navigation bar, an ideal next step would be for you to obtain the skills necessary to take advantage of its immense popularity of this language. Simplilearn’s comprehensive PGP Full Stack Developer Program, is a great choice for this as it will help you become career-ready upon completion.
To learn more, we encourage you to go through our Youtube video providing a quick introduction to HTML Navigation Bar and how to navigate between the HTML web pages.
If you’re an aspiring web and mobile developer, HTML training is almost an essential skill you will need to broaden your career horizons. Do you have any questions for us? Feel free to place your queries in the comments section of this article. Our SMEs will get to them shortly and answer them promptly, at the earliest.
Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.
Cohort Starts: 15 Apr, 2024
Cohort Starts: 28 Feb, 2024
Cohort Starts: 19 Mar, 2024
Cohort Starts: 17 Apr, 2024
Getting Started With Web Application Development in the Cloud
What Makes a Full Stack Web Developer?
Implementing Stacks in Data Structures
Combating the Global Talent Shortage Through Skill Development Programs
Average Full Stack Developer Salary
The Perfect Guide for All You Need to Learn About MEAN Stack
© 2009 -2024- Simplilearn Solutions
Follow us!
Company
Work with us
Discover
For Businesses
Learn On the Go!
Trending Post Graduate Programs
Trending Bootcamp Programs
Trending Master Programs
Trending Courses
Trending Categories
Trending Resources
source
