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.
| Days | Topics | Code Link | Blog 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 in HTML:
- 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>
<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>
Check the full code for this blog on my GitHub and all my html blogs are listed below.
All Links:
Comments
Post a Comment
If you have any doubts, Please let me know.