How To Link Pages To Navigation Bar HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Pragati
In this tutorial we will show you the solution of how to link pages to navigation bar HTML and how you are able to link webpages/ html pages to navigation bar in html, which is at top of page.
In previous tutorial, we already show you how we are able to make a navigation bar in html and how to make submenu under navigation bar.
We hope that you understand those articles and now, without wasting more time, let us understand this article.
Step By Step Guide On How To Link Pages To Navigation Bar HTML :-
The tag which we are going to use here is anchor tag. Yes! With the help of anchor tags you are able to links webpages to navigation bar in html.
Before, starting we have to know about how to make a navigation bar. If you don’t know then you can visit to the article in which we show you how to make this.
Now, here below there is code of this article, let us go through this.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<style>
ul{
margin: 200px;
}
ul li{
list-style-type: none;
float: left;
font-size: 20px;
text-transform: capitalize;
}
ul li a{
text-decoration: none;
color: white;
background-color: black;
padding: 25px;
margin: 2px;
}
</style>
</head>
<body >
<ul>
<li>
<a href="./demo1.html">
link 1
</a>
</li>
<li>
<a href="./demo2.html">
link 2
</a>
</li><li>
<a href="./demo3.html">
link 3
</a>
</li>
<li>
<a href="./demo4.html">
link 4
</a>
</li>
<li>
<a href="./demo5.html">
link 5
</a>
</li>
<li>
<a href="./demoo.html">
link 6
</a>
</li>
</ul>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page.
- In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags.
- So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, in body we create a list with the help of ul, li tags to make a navigation bar and after this we create anchor tags under lists.
- The main task is here that you have to give the link of that webpage under href attribute of anchor tag. You can see the example of this in our html code.
- Whereas in style tag, we use some CSS properties so that to make unordered list look like navigation bar. We hope that you understand the codes properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to links pages to navigate bar in html. We hope that you understand this article properly.
Now, there is one assignment for you in which you have to link webpages in submenu of navigation bar.
For submenu, you can go through our article in which we show you how to make submenus in navigation bar. I hope this article on how to link pages to navigation bar HTML helps you.
About Pragati
