sendesignz

HTML5 and jQuery Techniques to Build a Webpage

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



See the final design

HTML 5

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

 

Basic Structure



<!doctype html>

<html>

<head>

<title>Page title</title>

</head>

<body>

<div id="content">

<div id="main">

<section>

<header id="logo">

<h1>Logo comes here</h1>

</header>

<header id="banner">

<!--Banner-->

</header>

</section>

<section id="maincontent">

<article class="blog">

<header>

<h1>This is the Title of your Blog</h1>

</header>

<!--Content-->

</article>

</section>

</div>

<nav id="navigation">

<!-- Navigation -->

</nav>

</div>

<footer id="footer">

<!-- Footer -->

</footer>

</body>

</html>

  • 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.

<section id="maincontent">

<article class="blog">

<header>

<h1>This is the Title of your Blog</h1>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis nulla vitae augue pharetra eget adipiscing ante semper. Ut tristique lacinia vestibulum. In hac habitasse platea dictumst. Ut porta ante eros. Quisque in dolor felis. Integer suscipit enim eget libero adipiscing vulputate nec et est. Donec volutpat placerat est, a vestibulum justo eleifend non. Etiam consectetur, libero at lacinia feugiat, odio purus fermentum eros, nec ultrices sapien urna id ipsum. Morbi sit amet massa ac lorem vestibulum auctor. Phasellus at orci metus. Praesent metus arcu, molestie sit amet sagittis et, imperdiet ac nisi. Cras eu elit vel augue vulputate commodo eget eu velit. Duis ut erat ac lorem malesuada cursus quis nec tellus. Donec aliquet pellentesque sem sed condimentum. Morbi sapien tortor, auctor et tincidunt a, bibendum viverra erat.</p>

 

<p>Aenean id lacus diam. Duis eu mi non diam gravida lobortis in a massa. Etiam et dui lacus, at mollis nunc. Nam varius aliquam arcu eget aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ac enim ut lorem luctus egestas. Ut gravida nunc quis est auctor imperdiet. Duis arcu mauris, tincidunt at tincidunt a, porta in metus. Duis eget nulla eu mi interdum eleifend mattis ut dui. Phasellus gravida tincidunt lacinia. Phasellus iaculis hendrerit consequat. Nam eget risus eu nibh lacinia blandit et at purus. Donec sit amet lobortis tortor. Sed dictum porttitor ipsum non lacinia. Morbi dignissim laoreet purus non suscipit. Nam pellentesque mauris sed lectus posuere molestie. Nullam eleifend justo nibh, at aliquet libero. Vestibulum a erat nunc, sit amet rutrum arcu.</p>

</article>

</section>

Marking Up the Navigation

The navigation is marked up as usual in HTML 4, using an unordered list.

<nav id="navigation">

<ul class="sidemenu">

<li><a href="#">Company</a>

</li>

<li><a href="#">Industry</a>

</li>

<li><a href="#">Services</a>

</li>

<li><a href="#">Product</a>

</li>

<li><a href="#">Contact</a>

</li>

</ul>

</nav>

Styling with CSS3

Basic Setup

To start, we are going to define some basic rules in CSS,Margin, padding, background color of the page, etc.

{

margin: 0;

padding: 0;

}

header, footer, nav, article {

display: block;

}

body {

margin: 0 auto;

width: 1000px;

font: 13px/25px Helvetica, Arial, sans-serif;

background: #000;

}

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.

<div id="content">

<div id="main">

</div>

<nav id="navigation">

</nav>

</div>

Now we can use "Content" as table,"Main" as a table cell and "navigation" as a table cell

#content

{

display:table;

}

#main

{

display:table-cell;

width:850px;

}

#navigation

{

display:table-cell;

background-color:#FFF;

width:150px;

background-color:#6d7581;

vertical-align:top;

}

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

ul.sidemenu {

padding: 0;

margin: 0;

list-style: none;

width: 150px;

background-color: #EEEEDC;

}

ul.sidemenu li {

text-align: left;

float:right;

clear:both;

background-color: #EEEEDC;

width:150px;

height:30px;

}

ul.sidemenu li a {

text-decoration: none;

display: block;

width: auto;

color: #FFFFFF;

font-weight: bold;

padding: 2px 10px;

background-color:#1e3355;

}

ul.sidemenu li a:hover {

background-color: #1e3355;

width:auto;

color: #FFFFFF;

}

Styleing logo , banner and footer

#logo

{

float:left;

background-color:#666;

width:150px;

height:150px;

}

#banner

{

float:left;

width:700px;

background-image:url(../images/image2.jpg);

height:150px;

}

#footer

{

clear:both;

background-color:#4a5360;

height:30px;

padding:5px;

}

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.

I have created a  "animated-menu.js" file into “js” folder. All of our jQuery code will go into this javascript file.

Download the Followings:

jquery-1.4.4.min.js
jquery.easing.1.3.js

<head>

<title>Page Title</title>

<script src="/js/jquery-1.4.4.min.js" type="text/javascript"></script>

<script src="/js/jquery.easing.1.3.js" type="text/javascript"></script>

<script src="/js/animated-menu.js" type="text/javascript"></script>

</head>

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.

// JavaScript Document

$(document).ready(function(){

//When mouse rolls over

$("li").mouseover(function(){

$(this).stop().animate({width:'250px',height:'150px'},{queue:false, duration:400, easing: 'swing'})

});

//When mouse is removed

$("li").mouseout(function(){

$(this).stop().animate({width:'150px',height:'30px'},{queue:false, duration:600, easing: 'swing'})

});

});

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.

Finally

The page renders correctly in morern browsers only.Internet Explorer will not support for HTML 5. so I’ve chosen to ignore Internet Explorer.

Leave your comments

Post comment as a guest

0
terms and condition.

People in this conversation