Create a home layout along with different menu links also creates pages for
Signup,SignIn and forgot password and link with Home Layout.
(Note-Do this work using include/require functions and try to create a proper
layout)
Answers
Answer:
Explanation:
Introduction
In this article we’ll talk about web site navigation and menus. You’ll learn about different types of menus and how to create them in HTML. We’ll also touch on the subject of menu usability and accessibility. We won’t go into styling menus yet, but this article will lay the foundations. There are code examples to download to go along with this article — we will refer to these throughout the tutorial.
the HTML5 <nav> menu
HTML5 defines a <nav> menu, which is to be used to contain the primary navigation of a web site, be it a list of links or a form element such as a search box. This is a good idea, as previous to this we would contain the navigation block inside something like <div id="navigation">. Yes, you can identify this for styling purposes pretty well, but it is a <div>, and therefore semantically anonymous. <nav> gives us a consistent way to unambiguously define with the primary navigation is, which is good for things like search engine optimization, and for visually impaired users using a screen reader, who will be able to find the navigation much more easier if it is clearly signposted (this does depend on the screen reader they are using supporting the <nav> element, so it might be a little way off yet). So, a navigation block would look something like this:
<nav>
<ul>
<li><a href="#">Navigation</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Links</a></li>
</ul>
</nav>
Bear in mind that <nav> should only be used for the main user navigation of a web page, not for advertising links down the bottom of the page, or for a secondary navigation relating to a small part of the page.
Your main HTML menu tools — links, anchors and lists
There are several different types of menu and navigation idioms to consider in HTML, all connected closely with <link> and <a> (anchor) elements. In a nutshell:
<link> elements describe relationships across several documents. You can for example tell a user agent that the current document is part of a larger set that spans several documents, including a table of contents, and define the relationships between the documents.
Anchors (aka <a> elements) allow you to either link to another document, resource or document section, or to a certain section of the current document. These don’t get automatically followed by the user agent; instead they’ll be activated by your visitors by whatever mean available to them (mouse, keyboard, voice recognition, etc.)
If you haven’t read the links and lists articles earlier in the course, you should do, as they a required prerequisites for understanding this one.
Anchors/links do not just become menus on their own — you need to structure and style them to let both the browser and your users know that their function is as a navigation menu, not just a set of random links. If the order of the pages is not important you can use an unordered list as in this unordered list menu example.
If the order in which the visitors go through all the documents is important then you need to use an ordered list. If for example you have a multi-document online course where one tutorial builds on top of the last one, you could use an ordered list like in this ordered list example.
Using <nav> and lists to create menus is great for several reasons:
It is easy to differentiate the primary navigation lists/links from other lists and links on the page because they are the ones inside the <nav>. Not only will this make finding it easier for screen reader users, as mentioned above, but it makes targeting it with CSS and JavaScript easier too.
Lists can be nested, which means you can easily create several levels of navigation hierarchy.
Even without any styling applied to the list, the browser rendering of the HTML makes sense and it is easy to grasp for a visitor that these links belong together and make up one logical unit.
You nest lists by embedding the nested list inside the <li> element, not after it. you can see a correct and an incorrect example here.