Skip to main content

7/100: Creating Navigation Bar using

Welcome to day 7 of my 100 days web development challenge. In the last one week, I have learnt and coded some important topics of html. Now, I have a basic understanding of HTML and HTML5. Tomorrow is my last day to learn some interesting and important topics in HTML, and after that I will stop learning html and start with CSS.


Have a look at my progress in last one week.

Learnings till now in HTML
   Days   TopicsCode LinkBlog Link
    Day 1     Syntax   Syntax    Blog
    Day 2     Headings and
     Lists
   Headings
   Lists
    Blog
    Day 3     Formatting Tags   Formatting
    Blog
    Day 4     Images   Images    Blog
    Day 5     Tables   Table    Blog
    Day 6     Anchor Tag   Anchor    Blog

Topic:

  • Navigation bar is used to provide links to different parts of a website in a structural manner.
  • A navigation bar contains some hyperlinked texts that connect some important parts of a website.
  • It makes it easier for users to navigate from one page to another page, and it is used because of it's decent interface.
  • We can make a text-based or graphical-based navigation bar depending on the website's requirement and your choice.
  • A text-based navigation bar is the simplest and easiest, and it is also user-friendly because it specifies the name of the page.
  • You may have seen a horizontal navigation bar that are placed at the top of websites.
  • We can create a horizontal or a vertical navigation bar, but a horizontal navigation bar is mostly preferred by many websites. And, we can make a horizontal navigation bar in a single line.
  • HTML5 provides the <nav> tag which i used to make navigation bar.
  • The <nav> tag is a two sided container tag, which means it has both an opening tag and a closing tag.
  • In this blog, we will be making a text-based horizontal navigation bar.


Creating a Navigation bar:

  • To make a navigation bar, we need to use the anchor tag <a> to provide hyperlinked texts.
  • If you don't know anchor tag you can learn it here.
  • Provide some links in between the opening and closing <nav> tag using <a> tag. And then in between the opening and closing <a> tag write the name of the web page to which you want the user should navigate to.
  • For the navigation bar to look separated and well distinguished, add a horizontal rule with empty <hr> tag which draws a horizontal line. Add the <hr> tag before and after the <nav> tag.
    For example:
<hr>
    <nav>
        <a href="home.html">Home</a>
        <a href="prducts.html">Products</a>
        <a href="services.html">Services</a>
        <a href="about.html">About Us</a>
        <a href="contact.html">Contact Us</a>
    </nav>
    <hr>

  • By running this code you can see a navigation bar, but it is not at all well spaced and also it is towards the left with small size text.
  • To solve this issue, add a style attribute inside the opening <nav> tag and add some space as shown below:
<hr>
    <nav style="text-align: center; font-size: large;" >
        <a href="home.html">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="prducts.html">Products</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="services.html">Services</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="about.html">About Us</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="contact.html">Contact Us</a>
    </nav>
    <hr>



Check the full code for this blog on my GitHub and all my html blogs are listed below.

All Links:


Comments