- Created on Monday, 17 January 2011 00:00
- Last Updated on Saturday, 14 December 2013 11:09
- Written by Terrence
- Hits: 6378
In this tutorial, we are going to build a web page using HTML 5, CSS and jQueryÂ techniques. The tutorial aims to demonstrate how to build a website when the specifications are finalized . If you already know HTML ,CSS and jQuery, it will be easy to follow the steps.
The Final Design
HTML 5 introduces a lots of new elements that will make our pages more Specific. This will make it Â lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone.Letâ€™s get started marking up the page
- In HTML 5, there is only one doctype. It is declared in the beginning of the page by <!doctype html>. It simply tells the browser that itâ€™s dealing with an HTML-document.
- The new tag header is dealing with header elements, such as the page title, logo or Banner. Every header typically contains a heading tag from <h1> to <h6>.
- The nav-tag is used to contain navigational elements, such as the main navigation on a site or more specialized navigation like next/previous-links.
- The section-tag is used to denote a section in the document. It can contain all kinds of markup and Â sections can be nested inside each other.
- The footer-tag should contain additional information about the main content, such as copyright information, links to related documents and so on.
- Instead of using divs to contain different sections of the page we are now using appropriate, significs tags. They will make it a lot easier for search engines.
Marking Up the Introduction
We already defined the Main content section. Now we will add some content in that section.
We start a new section and wrap the whole text in an article-tag. The article tag is used to denote an independent entry in a article, blog, discussion, etc.
The header element is used to present the header and metadata about the article.
Marking Up the Navigation
The navigation is marked up as usual in HTML 4, using an unordered list.
Styling with CSS3
To start, we are going to define some basic rules in CSS,Margin, padding, background color of the page, etc.
Styling content area and navigation area
The content area and navigations are going to be aligned beside each other. Earlier days we would do this using Â floats, but in CSS 3 we are going to use tables.
You alreay learn how to use tables for web layout. In CSS 3 we can make elements behave like tables without it ever showing in the markup! To start off with, we will arrange our div in a logical manner.
Now we can use "Content" as table,"Main" as a table cell and "navigation" as a table cell
thatâ€™s all! No more floating, clearing or collapsing margins. Weâ€™ve made the elements behave like a table, and this makes it much easier for us to do layout.
Styling the Navigation
Styleing logo , banner and footer
Animate Navigation Using jQuery
In this tutorial we are going to Â use jQuery easing Plugin for animate our Â navigation.jQuery Easing can really bring life to an effect. The Â easing plugin offers 30 different easing methods. default easing is "swing." Â Today we will see Swing easing effect.
Nothing out of the ordinary here. Start by loading in the necessary libraries and external files in the head. I have placed jQuery Library and easing plugin into the â€œjsâ€ folder.
Download the Followings:
We have already created the navigation menu. Now we are going to add our java script into the "animated-menu.js" file. Add the following code intoÂ animated-menu.js file file.
There are two actions in the above code. When the mouse Â over on the menu item, that item starts an animation where it expands to 150px height, the duration Â 0.4 seconds. The easing applied through the plugin is "swing" When the mouse is moved off the animation to the starting size is triggered.
If you are using this within the context of a larger site, simply substitute the element selected (currently "li") for the mouse events to the necessary selector.
The stop() method is chained before the animate in order to prevent a buffer from building where the animation will loop repeatedly if the mouse is moved around quickly over it.
The page renders correctly in morern browsers only.Internet Explorer will not support for HTML 5. so Iâ€™ve chosen to ignore Internet Explorer.