RSSHTML5 - CANVAS

Html5 : Create html page using Html5 and CSS3

Before we start…. There’s a couple of things in your mind before adventuring on boat of new markup, first of all we start our talking with the question what is HTML5?

Introduction

HTML5 will be the new standard for HTML, XHTML. HTML 5 introduces a whole set of new elements that make it much easier to structure pages.


So what’s new?
Most of the elements of html5 is similar to html4, just some new elements are added:


<canvas> is a drawing area controlled by JavaScript. You can use it for a wide variety of things - graphs, games, presentations etc. Because it's controlled by JavaScript, you can interact with it very easily.


<video> The video tag makes it easier to embed video clips into your web pages. It has attributes like src (naturally), autoplay, and loop.


<audio> The  audio tag is much like the <video>, but for audio files.


<header> —header is used to displayed items in the header of the page. For example, rather than put your site banner and logo with <div id="header"></div>, you would simply use <header></header> instead.


<section> —  section is used to displayed particular section of the page. This makes it possible to group a series of related items in a semantically meaningful way. For example,  you can wrapped a series of articles on a page with <section></section> rather than <div id="articles"></div>


<article> — The article element is used to specify the items on a page that are associated with a particular article. Each article on the page is simply wrapped in a nice <article></article> element.


<nav> — we can use the <nav> element anywhere, we need to display a set of navigational link-the sidebar, the header, the footer, whatever- just put <nav></nav>. No divs required.


<footer> — finally, with footer element, it is easy to clearly specify the region of the page containing the footer content.


<aside> — with the aside element, designers finally markup sidebars, pullquotes, and footnotes.


<figure> —  the <figure> tag is used  to group some elements such as images and objects (object, embed, and iframe).

 

Structure:

I have created a demo for explain the structure of html5 more : 

structure

We are going to convert this image into html5 now.

The header

header

Header’s html code

 <!--Header starts-->
	     <header id="page-header">
		    <div id="logo"> <img src="images/logo.jpg" alt="logo" /></div>
			 <nav id="main-navigation">
				<ul>
					<li class="current"><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Portfolio</a></li>
					<li><a href="#">Contact</a></li>					
					<li><a href="#">Support</a></li>
				</ul>
</nav>
		 <figure><img src="images/banner.jpg" alt="header-banner" /></figure>		  
		 </header>
		 <!--Header ends-->



The layout body content:

content

Html code for layout body content

 

<!--Page contents-->
	      <article id="page-content">			        	
				 <section class="grey-header">
				    <p class="header-txt">Lorem Ipsum</p>
					<p class="header-txt">Lorem Ipsum</p>
					<p class="header-txt2">Lorem Ipsum</p>
				 </section>	
				 <section class="content">
				    <aside class="block-content">
					<p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit
					Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturi- ent montes, nascetur ridiculus mus. Nulla dui. Fusce                        feugiat malesuada odio. Morbi nuncae- cenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet                        eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna.</p>
                       </aside>
					<aside class="block-content">
					<p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit
					Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturi- ent montes, nascetur ridiculus mus. Nulla dui. Fusce                        feugiat malesuada odio. Morbi nuncae- cenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet                        eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna.</p>
					</aside>
					<aside class="block-content">
					<p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit
                       Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturi- ent montes, nascetur ridiculus mus. Nulla dui. Fusce                        feugiat malesuada odio. Morbi nuncae- cenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet                        eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. </p>
					</aside>
				 </section>		 
		   </article>		   			 
	 
	 <!--Page contents ends-->	 



The footer

footer

Html code for footer

<footer>
   <p>© Copyright Company Name 2009</p>	
</footer>



When we summing it all, it will be:

<pre class="brush:xhtml; gutter:false"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Html5 Demo</title>
<!-- meta tags -->
<meta name="keywords" content="">
<meta name="description" content="">

<!-- stylesheets -->
<link href="css/layout.css" rel="stylesheet" type="text/css" />


<!-- javascript -->
<!--conditional comments -->
<!--[if IE]>  
	<script src="js/html5.js"></script>
<![endif]--> 

</head>

<body>
     <div id="container">
	     <!--Header starts-->
	     <header id="page-header">
		    <div id="logo"> <img src="images/logo.jpg" alt="logo" /></div>
			 <nav id="main-navigation">
				<ul>
					<li class="current"><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Portfolio</a></li>
					<li><a href="#">Contact</a></li>					
					<li><a href="#">Support</a></li>
				</ul>
        </nav>
		 <figure><img src="images/banner.jpg" alt="header-banner" /></figure>		  
		 </header>
		 <!--Header ends-->
		 <!--Page contents-->
		      <article id="page-content">			        	
					 <section class="grey-header">
					    <p class="header-txt">Lorem Ipsum</p>
						<p class="header-txt">Lorem Ipsum</p>
						<p class="header-txt2">Lorem Ipsum</p>
					 </section>	
					 <section class="content">
					    <aside class="block-content">
						<p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit
						Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturi- ent montes, nascetur ridiculus mus. Nulla dui. Fusce                        feugiat malesuada odio. Morbi nuncae- cenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet                        eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna.</p>
                        </aside>
						<aside class="block-content">
						<p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit
						Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturi- ent montes, nascetur ridiculus mus. Nulla dui. Fusce                        feugiat malesuada odio. Morbi nuncae- cenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet                        eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna.</p>
						</aside>
						<aside class="block-content">
						<p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit
                        Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturi- ent montes, nascetur ridiculus mus. Nulla dui. Fusce                        feugiat malesuada odio. Morbi nuncae- cenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet                        eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. </p>
						</aside>
					 </section>		 
			   </article>		   			 
		 
		 <!--Page contents ends-->	 
	</div>
	 <footer>
	      <p>© Copyright Company Name 2009</p>	
        </footer>

</body>
</html>
</pre>
 
 
 

The stylesheet

 

/* ~~~~~~~~~ generic ~~~~~~~~~~ */

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
	
}
img {
	vertical-align: bottom;
}
img, fieldset {
	border: 0;
}
html {
	overflow-y: scroll;
}
header, nav, section, article, figure,aside, footer {
	display: block;	
}

/* ~~~~~~~~~ common ~~~~~~~~~~ */

body, select, input, textarea {
	font: 0.625em/1.4 tahoma, verdana, arial, helvetica, sans-serif;
	color: #333;
}
body {
	 background: #fff;
}
h1 {
	font-weight: normal;
	color: #666;
	font: 3.2em/1.4 georgia, 'times new roman', times, serif;
	margin: 0.2em 0 0;
}
h2 {
	font-weight: normal;
	color: #666;
	font: 2.4em/1.4 georgia, 'times new roman', times, serif;
	margin: 0.2em 0;	
}
section p, section ul, section ol,
aside p, aside ul, aside ol {
	font-size: 1.4em;
	margin: 1em 0;
}
section ul {
	margin-left: 1em;
}
section ol {
	margin-left: 1.4em;
}

/* ~~~~~~~~~ layout ~~~~~~~~~~ */

#container {
	width: 950px;
	margin: 20px auto;	
	overflow: hidden;	
}

.grey-header{
  margin-top:20px;
 -moz-border-radius-topleft:8px;
 -moz-border-radius-topright:8px;
 -webkit-border-top-left-radius:8px;
 -webkit-border-top-right-radius:8px;
 background-color:#e9e9e9;
 height:58px;
 width:100%; 
 }
 
 .header-txt{ border-right:#fff solid 1px; width:300px; float:left; height:58px; vertical-align:top; margin:0px; text-align:left; padding-top:15px; font-weight:bold; padding-left:15px;}
 .header-txt2{width:300px; float:left; height:58px; vertical-align:top; margin:0px;padding-top:15px; text-align:left;font-weight:bold; padding-left:15px;} 
 .content{  width:100%;}



/* ~~~~~~~~~ nav ~~~~~~~~~~ */

#main-navigation {	
	margin: 20px 0;
}

#main-navigation ul {
overflow: hidden; width: 100%; list-style: none; font-size: 1.6em;
}
#main-navigation li {
float: left;
}
#main-navigation li a {
background:url(../images/nav-active-btn.jpg) no-repeat;				
margin: 0 5px 0 0;
padding: 5px 0px;
display: block;
color: #000;
text-decoration: none;
width:131px;
height:43px;
text-align:center;
padding-top:13px;	
			
}
#main-navigation li.current a {
background:url(../images/nav-hover-btn.jpg) no-repeat;	
width:131px;
height:43px	
}
#main-navigation li a:hover {
background:url(../images/nav-hover-btn.jpg) no-repeat;	
width:131px;
height:43px	
}
			
/* ~~~~~~~~~ article ~~~~~~~~~~ */

article {
	width: 100%;
	overflow: hidden;

}

section {
	float: left;
	width: 100%;
}

/* ~~~~~~~~~ aside ~~~~~~~~~~ */

aside {
	 width:310px; float:left; vertical-align:top; margin:0px;  padding-left:5px;
}
aside p { width:270px;  text-align: left;   font-size: 11px; padding-left:15px;}
			
/* ~~~~~~~~~ footer ~~~~~~~~~~ */
			
footer {
background:url(../images/footer-rep.jpg) repeat-x left top;
width: 100%;
font-size: 1.4em;
text-align: center;
height:73px;
}
footer p {
   padding-top:20px;}
 

....and this is done, Now bye! bye! div and welcome new markup through html5 and css3. Click here to get demo.

 

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu