HTML 5 page layout and Navigation

        Hello guys now in this post we are discuss about HTML 5 page layout and Navigation. This post are very interesting so read carefully 

1. Planning the Website Organization

Planning, organizing, and visualizing website and web page layout important than coding using HTML.

• The web designer should determine the purpose of the website commerce, entertainment, marketing, information, promotion, press march and education, technical support etc.
• No matter how the site is structured, it is important to keep it cohesive and logical.
• Establishing a consistent look and feel for the site is rather important regardless of the multitude of functions it serves.
• User should feel comfortable moving through and traversing through the paper and not feel lost on the website.
• Even if the website is built in modules, a consistent user interface breed familiarity and generates unanimous feeling. An inconsistent interface may lead to confusion while the user navigates and explores the website.
• A web designer should audience.

2. Website Organization

Organizing the information and planning the layout to present information is just as important na the information itself. Organizing content or information i grouping similar items in the same place. Information in the website may be organized using various structures like,

• Tree structure where user can navigate level by level to find appropriate information
• Pure Linear structure where the webpages are organized using linear progression like a slide show or a tour.
• Linear Structure with alternatives may allow the user to choose between alternatives as he progresses sequentially to find useful information thereby engaging the user.
• Linear Structure with options allows the user to skip over the information which is not relevant to him still preserving the general linear path like in case of surveys.
• Linear Structure with Side Trip may allow the user to explore supplementary information of his interest but later returning to the mainstream which is linear in form of a tree.
• Grid Style Structure is a spatial organization and is good for related items associated with a particular product line like in case of a catalogue.
• Mixed Hierarchy is considered by developer for complex websites where different parts of websites are designed using different structures to solve the problems of hierarchies.
• Pure Web Structure is a tangled mess of links where the organization remains unclear
• Such a structure has links which are fully connected to each other. If the user is familiar with the data navigation then web form has its obvious benefits.

3. Creating Navigational Links

Wikipedia defines hypertext as a system in which objects like text,  pictures, music, or programs can be creatively linked to each other. Nelson's idea of connecting content through the use of hypertext linking influenced the web developers. With hypertext-linked content, users can transverse information in any order or method they choose, creating their own unique view.

• Planning site navigation is important and the developers should not rely on navigation cues, options or contextual links.
• Hypertext is a rich environment the users can access information instantly in a non-sequential manner. Hypertext serves as a navigational aid just like the tables of contents and cross-references, where related content can be consistently displayed alongside.
• Effective navigation not only includes links to other web pages but also provides cues to the user's location like buttons for logical next and previous location in the website, back, home and information of the current location. HTML allows us to create text-based and attractive graphic-based navigational aids.

Creating Text Based Navigation Bar

A navigation bar helps users browse through and locate information on your site easily. Text-based navigation bar can be built using HTML.
Here's an example of a typical text navigation bar for a commercial site:

Home | Products | Gallery | Career | Feedback | Contact us

This Navigation Bar has several tabs which are underlined to depict that they are links to same or other web pages. In the above example Home tab is not underlined as we are in the home page itself thus as and when you visit a particular link the text navigation bar reflects where you are. When the user clicks on the Gallery link the navigation bar looks like:

Home | Products | Gallery | Career | Feedback | Contact us

Following are the steps to create a text navigation bar:

1. Create a navbar.html file in notepad++
2. Type following code in the editor:
<p>Home | Products | Gallery | Career | Feedback | Contact us </p>
3. Include hyperlinks for each tab using <a> tag as follows:
<p><a href = "home.html">Home</a> | 
<a href = "products.html"> Products</a> | 
<a href - "photos.html"> Gallery </a> | 
<a href = "career.html">Career </a> |
<a href - "feedback.html">Feedback </a>|
<a href = "contact.html">Contact us </a></p>
4. The navigation bar is created and by clicking on each link the user can navigate through the website.

Creating Graphical Navigation Bar

• Hyperlinks can be provided using attractive graphical objects. Graphical links enhance the appeal of the website.
• The only disadvantage of graphical objects in that they may take a long time to download. Moreover, graphical elements may be suppressed if the use turn off graphics for the browser. The user may not be able to navigate the other pages in this case.
• Keeping navigation graphics simple and reusing the same graphical throughout your web site may allow the navigation graphics to be loaded in the user's cache and the server does not have to download it again for subsequent pages.
• The graphics can be standardized so that they provide predictable navigation cues for the user.
• Even though graphite-based links enhance the feel of the website, text-base links should also be provided in addition to graphic-based links so even if the graphics or icon are not displayed due to any reason the user can navigate through text-based links.

Text-Based navigation versus Graphic-based Navigation

• Text-based navigation does not suffer from the overhead of downloading like in the case of graphic-based navigation.
• Text-based graphics are visible even if the user turns off the graphics of the browser.
• Text-based graphics work well with all types of browsers.
• Graphic-based links are more appealing as compared to text-based links.

4. Creating Image Maps 

Pictures, logos, and other graphical effects are placed into a document using and the <IMG> tag. Pictures, graphics and multimedia objects enhance the lock and feel of a website.

<body>
<img src="image.img" alt="photo"/>
</body>

Linking using an Image

The image can be hyperlinked to different sections of the website using:

<a href="gallery.html"><img src="photo.jpg"/></a>

       The above code allows image to be linked to gallery page. Here a single image is linked to single web page. However an image can be multi-linked to various pages using <MAP> and <AREA> tags along with <IMG> tag. This called Image Mapping. If the image mapping is created on the client side then the browser will process the same as is called Client-side.
       Image Mapping where an if created on the server side then it is processed b the server and in called a Server-side Image Mapping.

Following is the code for renting client-side Image map

<lmg width=600 height=120 src="/images/logo.gif " alt ="Welcome to Techsmart Publication" USEMAP="# main"

Here the <IMG >tag has "src" attribute to specify the url of the image which is mapped, "alt" attribute carries information of the alternate content and USEMAP specific client-side map name.. Therefore we include <MAP> tag to include the mapping information.

Attributes of CIMG

• SRC - Specifies the URL of the image file 
• ALT - A text-based description of the image content (alternative text).
• WIDTH and HEIGHT -Gives the width and height of the image in pixels 
• ISMAP-identifies the image as being used as a part of a server-side imagemap
•  USE MAP - Not equal to the name of the client-side image map to be use with the image 

Many browser display it as tooltip when mouse is moved over the image 

Image Mapping Tags

<MAP> and<AREA>tag are used to specify mapping information for the image so that it can be multilinked.

Example: 
< MAP NAME="main">
 <AREA SHAPE ="POLY" HREF="product.html" COORDS="35,80,16 8,99.92.145"><AREA SHAPE="CIRCLE" HREF="contact.html" COORDS=" 288306268334 "<AREA SHAPE="DEFAULT" HREF="home.html">
< /MAP >
<MAP> contains HTML tags that define the clickable regions (hot regions) of an image map

Attribute of <MAP>
 NAME - Gives the map information unique name can be referenced by the USEMAP attribute in the <IMG>to that places the image map graphics
<AREA> Defines a hot region in a diet-side image map.

Attributes of <AREA>

• ALT - Provide a text alternative for the hot region in the event that the image does not load defined SHAPE Specifies the shape of the hot region being defined.
• Possible values of SHAPE include: REACT . rectangles CIRCLE - circles POLY-polygons DEFAULT - for any point on the image not part of another hot region
• HREF - Set equal to the URL of the document to associate with the hot region
• HREFLANG. A two-letter language code that specifies the language of the linked document, e.g., MEDIA - Specifies what media device the target URL is best, eg, Printer, speaker, monitor, etc.
• REL - Specifies the relationship between target document and current document
• TARGET - Specifies into which frame to load the linked document 
• TYPE - Specifies the MIME type of the target URL 
• COORDS - Specifies coordinates that define the hot region in different shapes as follows:

      Reet xl, y1, x2, y2 coordinates of the top-left comer and the bottom-right corner of the rectangle)          Circle: x, y, radius (coordinates of the circle x and y which will provide us the center and the radius)
     Poly:x1, y1, x2, y2,...... xn, yn coordinates of the edge of the polygon)

Example of Client-side Image Map

<!DOCTYPE HTML>
<HTML>
<BODY>
<IMG WIDTH=400 HEIGHT=SRC=''/images/logo.gif'''  ALT=''Welcome to techmax
Publication''USEMAP=''#main''>
<MAP NAME=''main''>
<AREA SHAPE=''POLY''HREF=''profile.html''COORDS=''35,80,16 8,99,92,145''>
AREA SHAPE=''CIRCLE''HREF=''feedback.html''COORDS=''288,306,288,334''>
<AREA SHAPE=''DEFAULT''HREF=''index.html''>
</MAP>
</BODY>
</HTML>

Example of Server Side Image map :

<!DOCTYPE HTML>
<HTML>
<BODY>
<IMG WIDTH=400 HEIGHT=100 SRC=''/images/logo.gif'  ALT=''Welcome to Techmax
Publication'' ISMAP>
</BODY>
</HTML>

Redirecting to Another URL

•  A redirect happens when a web page is visited at certain URL, but it changes to a different URL.
•  For e.g a person tries to visit ''techsmartbooks.com/page-a'' in their browser and he/she is redirected to "Techsmartbooks.com/page-b"  instead.
• This is very useful if we want to redirect a certain page to a new location change the URL structure of a site like removing "www." portion of the URL or even redirect the users to entirely another website.
• While designing a website, it is often required to change the location of a web page
•  However, if the page is visited frequently, users may have already linked to it
• Moreover, the search engines have already indexed the page. Therefore best to replace your page with a new page that will redirect the users to the new page
• However, when using this HTML redirect code, make sure that it is not used to trick the Search Engine. There are alternative ways to drive traffic to a desired web site.

<meta HTTP-EQUIV="REFRESH" content=" 2";
url="http://www.techsmartbooks.com/index.html">

• The above HTML redirects the users another web page instantly Content="2; may be changed to the number of seconds the browser should wait before redirecting.

Thanks for visiting