Tutorial-4 (Navigation)

Welcome in Tutorial-4

As you know my purpose is to guide you from beginner to expert in html , CSS and JavaScript so keep learning with me you will find out all that you need in your Front-end web development career.
In previous lesson we had learnt about Multimedia that how can we implement images,videos,audios in our websites in order to make it more attractive, but along with this we also want to become famous ,getting reviews on our work from viewers.For this purpose, there's a need of connection between us and our websites viewers and this is only possible when we have a contact me or contact us page in our website So, in this tutorial we will learn about how to create a "Contact Me" using "Navigation" tag in our html website.

Section 1: Part: 4

Navigation

According to computer Science, Navigation refers to the cat of opening and moving through computer menu, for example the Start menu in our Window Explorer.In other words, Navigation word refers to clicking or tapping buttons and menus or making multi-finger gestures to activate functions in an application or to jump to other sections of a website.

What is Navigation in html?

In Html code, in order to implement table of contents, menus the <nav> bar is used, this <nav> element represents a section of a page whose purpose is to provide navigation links ,either within the current document or to other documents. Some common examples of navigation sections are menu,table of contents,indexes etc.

Navigation bar

The viewers like your website if your content is well organized, so , in order to make our content organized and well follow, we need a Navigation bar .The Navigation bar is list of links like home, About me, contact us, news etc or any other type of menu in websites like in the picture below.

Followings elements are must to create Navigation in Html Code:

• The <nav> element, is must in order to identifies our the menu section of our website page.
• The <ul> element, this is called an unordered list.
• The <li> element , this is used to identify the lists of items that are in ul element.
• The <a> element , which identifies the hyperlink.
• The href element, refers to tell the actual location or destination of the link.
• The URL attribute, refers to identifies the web address of link.

Html Code:

What is Hyperlink?

Hyperlink is type of link which is highlighted on any web page, on clicking get user from one location to another location, as from my this tutorial page just click on this highlighted word Tutorial-1 you will move on another first page of tutorial because I gave a link of my first tutorial page behind this "Tutorial-1" word.But without a element hyperlink doesn't work ,the a element is used to establish the hyperlink and the word href called " Hyperlink Reference" ,it is required to move web page from one location(resource) to another.

Let's look into the image, you can easily understand


                                          Code                                                                            Output

So Guys I think it's quite easy to add menu in our website we can easily give any specific style to our menu as we want by we will discussed it in CSS section, in this Html section we just learn about content structure and meaning in our website. I hope that through this tutorial you will be able to understand each and very thing in a very detailed view that's why I am only tell you about one specific thing in one tutorial if I will tell you about multiple things in one tutorial then it's not easy for you to read the whole post and also you will not pay attention to everything , In my one page tutorial only give your 10 minutes in this busy schedule life and I'm sure you pick things ion your mind very sharply.See you in the next tutorail which is about tables in HTML.

Tutorial-5(HTML Tables)