Html5 Tutorial - Future Technology

Wednesday 2 January 2013

HTML5 Tutorial - Sections and Outlines of an HTML5 Document


Title : Sections and Outlines of an HTML5 Document.

Details:Technology : HTML5/JavaScript

Completion Time: 1 Hour

Difficulty : easy

Description :
    
                   I am going to explain some new elements in HTML5 allowing web developers to describe the web document with standard semantics.

Problems solved in HTML5 compared to HTML 4 

1)HTML5 removes the need for <br />
<div>
elements from the outlining algorithm by introducing     a new element,<br />
<section>,the Html Section element.

2)Merging several documents is hard: inclusion of a sub-document in a main document     means changing the level of the HTML Headings Element so that the outline is kept. This  is solved in HTML5 as the newly introduced sectioning elements (<article>, <section>, <nav> and <aside>) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings.

3)Because each HTML Heading Element is part of the outline, it is not possible to describe a subtitle or secondary title (e.g., <h1>
Justine</h1>
<h2>
Les Malheurs de la Vertu</h2>
creates the outline 1. Justine 1.1 Les Malheurs de la Vertu). HTML5 introduces the <hgroup> element that hides all the heading elements except the first one of the highest rank (e.g., <hgroup><h1>
Justine</h1>
<h2>
Les Malheurs de la Vertu</h2>
</hgroup> creates the outline 1. Justine).

4)In HTML4, every section is part of the document outline. But documents are often not that linear. A document can have special sections containing information that is not part of, though it is related to, the main flow, like an advertisement block or an explanation box. HTML5 introduces the <aside> element allowing such sections to not be part of the main outline.

5)Again, in HTML4, because every section is part of the document outline, there is no way to have section containing information related not to the document but to the whole site, like logos, menus, table of contents, or copyright information and legal notices. For that purpose, HTML5 introduces three specific sections elements: <nav> for collections of links, such as a table of contents, <footer> and <header> for site-related information.

Here is an Example for Showing Basic Html5 Elements(<section>,<article>,<header>,<nav>,<footer>,<aside>):

<section>  : Our Home page has been divided into number of sections which consisits of header,article 1,article 2 and footer.we have innersections also where we can embed animations inside section , we can write articles inside section element for more details , please go through the code , demo and image below.






From , the above image we can see <header>,<nav,<article>,<aside>,<footer> and some animations where a girl rides a bicycle,birds flies in the sky.

All this elements are aligned with particular space looking the code our body of the page starts with <section> tag with id="wrapper" for style and this section consists <header>,<nav>,<article>,<aside>,<footer> elements.
<header> : Next going through code we have <header> element where place some logo there.
<article>  : We have article tag for writing some articles like some tutorials,stories etc.
<aside>    : We have this element for writing some notes side to our articles or displaying some
                    advertisements.
<footer>  : We have this tag for writing some copy write notices or linking up some back links for              our sitemap index.
animation : I have included some sections which wraps css3 elements or style elements using id's assigned in the css style sheet.

Index.html












 
 
 
         HTML5 Semantics Example
 

 


    

HTML5 Semantics Example

What We Provide?

Posted on by Alex Jones
We Provide All Domestic academic admissions for B.Tech,M.tech,Mca,Mba,Bds,Mbbs through out the country.we provide admissions for councilling fee only with out any donations,we look after accomdation along with career guidence.we are developing mobile app for colleges and students to communicate with each others and get admissions online from your mobile only.we provide online tutorials for students who want to learn new technologies with out any fee

Technologies

Posted on by Alex Jones
We Provide online courses for the following : JAVA HTML5 JavaScript Mobile Development
SS Educational Consultancy
Here is the code for css
@charset "utf-8";
/* CSS Document

Name: Vivek Kumar
Email: vivekwebmaker@gmail.com
Company:IDS Infotech Ltd.
 */

* {
	margin:0px;
	padding:0px;
}
body {
	overflow-x:hidden;
}

/*
//////////////////////////////////////////////////
				CLOUD
//////////////////////////////////////////////////
*/
#clouds {
	padding:100px 0px 0px;
	background:#c9dbe9;
	background:-webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background:-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background:-moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
.cloud {
	width:200px;
	height:60px;
	background:#fff;
	border-radius:200px;
	-moz-border-radius:200px;
	-webkit-border-radius:200px;
	position:relative;
}
.cloud:before, .cloud:after {
	content:'';
	position:absolute;
	width:100px;
	height:80px;
	background:#fff;
	position:absolute;
	top:-15px;
	left:10px;
	border-radius:100px;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	-webkit-transform:rotate(30deg);
	transform:rotate(30deg);
	-moz-transform:rotate(30deg);
}
.cloud:after {
	width:120px;
	height:120px;
	top:-55px;
	left:auto;
	right:15px;
}

/*
//////////////////////////////////////////////////
				CLOUD Animation Code
//////////////////////////////////////////////////
*/

.x1 {
	-webkit-animation:moveclouds 18s ease-in-out infinite;
	-moz-animation:moveclouds 18s ease-in-out infinite;
	-o-animation:moveclouds 18s ease-in-out infinite;
	top:-10px;
	
}
.x2 {
	left:200px;
	top:-50px;
	-webkit-transform:scale(0.6);
	-mox-transform:scale(0.6);
	transform:scale(0.6);
	opacity: 0.6; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 25s ease-in-out infinite;
	-moz-animation:moveclouds 25s ease-in-out infinite;
	-o-animation:moveclouds 25s ease-in-out infinite;
	}
.x3 {
	left:0px;
	top:-175px;
	-webkit-transform:scale(0.8);
	-mox-transform:scale(0.8);
	transform:scale(0.8);
	opacity: 0.6; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 30s ease-in-out infinite;
	-moz-animation:moveclouds 30s ease-in-out infinite;
	-o-animation:moveclouds 30s ease-in-out infinite;
	
}
.x4 {
	left:470px;
	top:-195px;
	-webkit-transform:scale(0.75);
	-mox-transform:scale(0.75);
	transform:scale(0.75);
	opacity: 0.75; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 15s ease-in-out infinite;
	-moz-animation:moveclouds 15s ease-in-out infinite;
	-o-animation:moveclouds 15s ease-in-out infinite;
	
}
.x5 {
	left:-100px;
	top:-150px;
	-webkit-transform:scale(0.8);
	-mox-transform:scale(0.8);
	transform:scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 35s ease-in-out infinite;
	-moz-animation:moveclouds 35s ease-in-out infinite;
	-o-animation:moveclouds 35s ease-in-out infinite;
	
}
.x6 {
	left:50px;
	top:-280px;
	opacity: 0.4; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 22s ease-in-out infinite;
	-moz-animation:moveclouds 22s ease-in-out infinite;
	-o-animation:moveclouds 22s ease-in-out infinite;
	
}
.x7 {
	left:-80px;
	top:-255px;
	-webkit-transform:scale(0.8);
	-mox-transform:scale(0.8);
	transform:scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	-webkit-animation:moveclouds 40s ease-in-out infinite;
	-moz-animation:moveclouds 40s ease-in-out infinite;
	-o-animation:moveclouds 40s ease-in-out infinite;
	
}
@-webkit-keyframes moveclouds {
	0% {
		margin-left:110%;
	}
 	100% {
		margin-left:-110%;
	}
}
@-moz-keyframes moveclouds {
	0% {
		margin-left:110%;
	}
	100% {
		margin-left:-110%;
	}
}
@-o-keyframes moveclouds {
	0% {
		margin-left:110%;
	}
100% {
		margin-left:-110%;
	}
}

/*
//////////////////////////////////////////////////
				GRASS
//////////////////////////////////////////////////
*/
.grass {
	background:url(grass.png) bottom center no-repeat;
	height:295px;
	width:100%;
	bottom:0px;
	position:absolute;
}
.cycle {
	/*background:url(cycle-2.png) no-repeat;*/
	width:279px;
	height:260px;
	position:absolute;
	right:0px;
	bottom:-2px;
	
}
.bycycle {
	background:url(cycle-2.png) no-repeat;
	width:279px;
	height:260px;
	position:absolute;
	z-index:1;
}
/*
//////////////////////////////////////////////////
				Cycle Animation Code
//////////////////////////////////////////////////
*/
.cycle-ride {
	-webkit-animation:movecycle 25s ease-in-out infinite;
	-moz-animation:movecycle 25s ease-in-out infinite;
	-o-animation:movecycle 25s ease-in-out infinite;
}
@-webkit-keyframes movecycle {
	0% {
		margin-right:100%;
	}
	100% {
		margin-right:-100%;
	}
}
@-moz-keyframes movecycle {
	0% {
		margin-right:100%;
	}
	100% {
		margin-right:-100%;
	}
}
@-o-keyframes movecycle {
	0% {
		margin-right:100%;
	}
	100% {
		margin-right:-100%;
	}
}

/*
//////////////////////////////////////////////////
				BIRD
//////////////////////////////////////////////////
*/
.bird {
	background:url(birds.png) no-repeat;
	width:376px;
	height:191px;
	position:absolute;
}
/*
//////////////////////////////////////////////////
				BIRD Animation Code
//////////////////////////////////////////////////
*/
.fly {
	-webkit-animation:birdfly 20s ease-in-out infinite;
	-moz-animation:birdfly 20s ease-in-out infinite;
	-o-animation:birdfly 20s ease-in-out infinite;
}
@-webkit-keyframes birdfly {
	0% {
		margin-left:100%;
		top:300px
	}
	20% {
		top:200px;
	}
	40% {
		top:150px;
	}
	50% {
		top:100px;
	}
	60% {
		top:50px;
	}
	70% {
		top:-300px;
	}
	80% {
		top:-50px;
	}
	100% {
		margin-left:-100%;
		top:-70px;
		opacity:.4;
		-webkit-transform:scale(0.4);
		-moz-transform:scale(0.4);
		transform:scale(0.4);
	}
}
@-moz-keyframes birdfly {
	0% {
		margin-left:100%;
		top:300px
	}
	20% {
		top:200px;
	}
	40% {
		top:150px;
	}
	 50% {
		top:100px;
	}
	60% {
	 	top:50px;
	}
	70% {
		top:-300px;
	}
	80% {
		top:-50px;
	}
	100% {
		margin-left:-100%;
	 	top:-70px;
	 	opacity:.4;
	 	-webkit-transform:scale(0.4);
	 	-moz-transform:scale(0.4);
	 	transform:scale(0.4);
	}
}
@-o-keyframes birdfly {
	0% {
		margin-left:100%;
		top:200px
	}
	20% {
		top:150px;
	}
	40% {
		top:100px;
	}
	50% {
		top:500px;
	}
	60% {
		top:0px;
	}
	70% {
		top:-50px;
	}
	80% {
		top:-70px;
	}
	100% {
		margin-left:-100%;
	 	top:-100px;
	 	opacity:.4;
	 	-webkit-transform:scale(0.4);
	 	-mox-transform:scale(0.4);
	 	transform:scale(0.4);
	}
}

.name{
	font-size:30px;
	color: transparent;
	right:20px;
	position:absolute;
	bottom:0px;
	
	-webkit-animation:name 25s ease-in-out infinite;
	-moz-animation:name 25s ease-in-out infinite;
	-o-animation:name 25s ease-in-out infinite;
}

@-webkit-keyframes name {
	0% {
		text-shadow: 0 0 0px rgba(0,0,0,1);
	}
	100% {
		text-shadow: 0 0 10px rgba(0,0,0,0.5);
	}
}
@-moz-keyframes name {
	0% {
		text-shadow: 0 0 0px rgba(0,0,0,1);
	}
	100% {
		text-shadow: 0 0 10px rgba(0,0,0,0.5);
	}
}
@-o-keyframes name {
	0% {
		text-shadow: 0 0 0px rgba(0,0,0,1);
	}
	100% {
		text-shadow: 0 0 10px rgba(0,0,0,0.5);
	}
}





/* Create the animation blocks */


/* Spinning, gradient circle; CSS only! */
.cycle-front, .cycle-back {
  width: 108px;
  height: 107px;
  position:absolute;
  bottom:8px;
  right:8px;

  background:url(wheel-front.png) no-repeat;  
 
  -webkit-animation:spin 3s ease-in-out infinite;
  -moz-animation:spin 3s ease-in-out infinite;
  -o-animation:spin 3s ease-in-out infinite;
 
}

.cycle-back{
	background:url(wheel-back.png) no-repeat;
	bottom:8px;
  	left:8px;
}

@-webkit-keyframes spin {
  from {  
    -webkit-transform: rotate(0deg);  
}  
to {  
    -webkit-transform: rotate(360deg);  
    }  
}
@-moz-keyframes spin {
  from {  
    -moz-transform: rotate(0deg);  
}  
to {  
    -moz-transform: rotate(360deg);  
    }  
}
@-o-keyframes spin {
  from {  
    -o-transform: rotate(0deg);  
}  
to {  
    -o-transform: rotate(360deg);  
    }  
}

Tuesday 1 January 2013

Html5 Example showing some graphics example using css3


<h1> Html5 Example showing some graphics example using css3 </h1>
Hi , i am going to explain you how to create a graphics or animations with out java script page background for your website using html5 and css3. First create a file named index.html and paste the following code shown below:












	CSS3 animation
     
   





Developed By: Vivek Kumar
Now create a file named style.css and replace with the following code:
body {
	background-color: #F6F4F2;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: .9em;
	line-height: 1.1em;
	margin: 0px;
}
h1,ul,li {
	margin: 0px;
	padding: 0px;
}
#header {
	background-color: #515151;
	background: #515151
		-webkit-gradient(linear, left top, left bottom, color-stop(0.2, #515151),
		color-stop(0.8, #302F2D) );
	border-top: 1px solid #919192;
	height: 32px;
	left: 0px;
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 1;
}
#subheader { display: none; }
#footer {
	display: none;
	background-color: #515151;
	background: #515151
		-webkit-gradient(linear, left bottom, left top, color-stop(0.2, #515151),
		color-stop(0.8, #302F2D) );
	border-top: 1px solid #919192;
	height: 32px;
 	position: fixed;
	bottom: 0px;
	width: 100%;
	z-index: 1;
}
#sidebar {
	background-color: #ECEAE7;
	overflow: auto;
	padding: 30px 2% 20px 0px;
	text-align: right;
    /* position: fixed; */
	float: left;
	width: 22%; 
	top: 33px;
	bottom: 0px;
	z-index: 1;
	border-right: 1px solid #999;
}
#sidebar ul,#sidebar li {
	margin: 0px;
	padding: 0px;
}
#sidebar li, #sidebar li a {
	color: #767573;
	font-size: 1.06em;
	list-style: none;
	margin: 1.05em 0px;
}
#scrollable {
	/* position: fixed; */
	padding: 20px 2% 0px 1%;
	float: right;
	width: 72%;
	overflow: auto;
	top: 33px;
}
#content { 
	margin: 20px 2% 0px; 
	color: #313131;
	/*  position:absolute;*/
	/*  overflow:auto;*/
	z-index: 0;
}
#header h1, #footer h1 {
	color: #F6F4F2;
	font-size: 1.2em;
	font-weight: normal;
	line-height: 32px;
	margin: 0px;
	text-align: center;
	text-shadow: 0px -1px 1px #222222;
}
#footer h1 {
	font-size: .9em;
	text-align: left;
	padding-left: 16px;
}
#content h2 {
	border-bottom: 1px solid #ccc;
	padding-bottom: 0.25em;
	color: #e87a12;
	font-size: 1.4em;
	font-weight: bold;
	margin: 1.3em 0px 0.8em 0px;
	text-shadow: #FFFFFF 0px 1px 1px;
}
code { 
	font-weight: bold; 
	font-size: 1.0em;
	color: #bc6108;
}
blockquote {
	color: #767573;
	font-style: normal;
	margin-left: 30px;
	margin-right: 10px;
	padding-left: 6px;
	position: relative;
	text-shadow: #FFFFFF 0px 1px 0px;
}
blockquote p {
	padding: 5px 0px;
	font-size: 0.8em;
}
blockquote::before {
	font-style: normal;
	content: '\201C';
	font-size: 400%;
	font-family: Georgia, Palatino, 'Times New Roman', Times;;
	position: absolute;
	left: -25px;
	top: 0.2em;
	color: #E0E0E0;
}
ul {
	margin-left: 40px;
}
ul>li {
	list-style: disc;
	list-style-position: outside;
}
ul ul {
	margin-bottom: 0.5em;
	margin-top: 0.5em;
}
a.btn {
  	border: 1px solid #555;
  	-webkit-border-radius: 5px;
  	border-radius: 5px;
  	text-align:center;
  	display:block;
/*   	float:left; */
  	clear: both;
  	background:#eceae7;
  	width:90%;
  	color:#e87a12;
  	font-size:1.1em;
  	font-weight: bold;
  	text-decoration:none;
  	padding:0.7em 0.1em;
 	margin: 5px auto;	
}
a.btn.deux {
	clear: none;
	float:left;
  	width: 45%;	
  	margin:6px 3px 3px;
}
a.btn.trois {
	clear: none;
	float:left;
	width: 30%;
  	margin:6px 2px 3px;
}
#deviceinfo {
	border-collapse:collapse;
	width:75%;
	margin: 20px auto;
}
#deviceinfo tr th.alt, #deviceinfo tr td.alt {
	text-align:left;
}
#deviceinfo, th, td {
	border: 1px solid #ccc;
}
#deviceinfo th {
	font-size:1.15em;
	padding-top:4px;
	padding-bottom:4px;
	background-color:#e89442;
	color:#f0f0f0;
	height: 1.3em;
}
#deviceinfo td, #deviceinfo th {
	padding:3px 7px 2px 7px;
	vertical-align:bottom;
	text-align:right;
}
.result-block {
	clear: both;
	margin-top: 0.3em;
}
#accel-data {
	margin-bottom: 15px;
	width: 95%;
}
dl{
  	clear:both;
  	list-style-type:none;
  	padding-left:2px;
  	overflow:auto;
}
dl > dt{
  	float:left;
  	margin-top: 15px;
  	margin-left:5px;
}
dl > dd{
  	float:left;
  	font-weight:bold;
  	margin-top: 15px;
  	margin-left: 10px;
  	margin-right: 25px;
  }
.api-div {
 	display: none;
	margin-bottom: 0.6em;
}
.api-div h4 {
 	display: block; 
 	font-size: 0.8em;
 	font-weight: normal; 
 	background: #eceae7; 
 	border-left: 6px solid #de2c2c;
 	padding: 5px 8px;
}
.api-div .help {
 	border-left: 6px solid #188f8f;
}
#cameraImage {
	border: 2px solid #666;
	display: none;
	margin: 1.7em auto;
	width:200px;
	height:150px;
}
#eventOutput {
	height:1.5em;
	display: block;
}
#map {
	width: 180px; 
	height: 140px; 
	border: 2px solid #666;
 	display: none;
	margin: 1.0em auto; 
}

@media screen and (max-width: 320px) and (orientation:portrait) {
	/* #header h1 { color: #f00; }  For TESTING */	
	#sidebar { display: none; }	
	#scrollable {
		padding: 0px;
		margin: 64px 1% 0px 1%;
		float: left;
		width: 97%;
		overflow: auto;
	}	
	#subheader {
		display: block;
		background-color: #CBCBCB;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F9F9F9),color-stop(1.0, #CBCBCB) );
		border-top: 1px solid #383A3C;
		border-bottom: 1px solid #919395;
		height: 42px;
		left: 0px;
		position: fixed;
		top: 33px;
		width: 100%;
		z-index: 1;
		text-align:center;
		}
	select {
		font-size: 1.65em;
		font-weight: bold;
		padding: 5px 16px 5px 20px;
		color: #444;
		background-color: #e8a35f;
		margin: 3px auto;
	}
	#deviceinfo {
		width:90%;
	}	
}
@media all and (min-width: 800px){
	 /* #header h1 { color: #0f0; } FOR TESTING */
	#content {
		font-size: 1.0em;
		line-height: 1.2em;
	}
	#content h2 {
		padding-bottom: 0.4em;
		font-size: 2em;
 		margin-top: 2em;
	}
	blockquote {
		margin-top: 20px;
		margin-bottom: 30px;
	}
	blockquote p {
		/* padding: 5px 0px; 10px 0px; */
		font-size: 0.95em;
	}
	blockquote code {
	  	font-size: 1.2em;
	}
	#cameraImage {
		width: 400px;
		height: 300px;
    }
    #map {
		width: 360px; 
		height: 280px; 
		margin: 1.5em auto;
	}
	#content {
		margin: 30px 3% 0px;
	}
	#sidebar {
		padding-top: 15px;
    	position: fixed;
	}
	#sidebar li,#sidebar li a {
		font-size: 1.2em;
		margin: 1.8em 0px;
	}	
	.api-div h4 {
 		font-size: 0.9em;
	}
	#footer {
		display: block;
	}
}

@media all and (min-width: 1200px){
	/*#header h1 { color: #ff0; }   FOR TESTING */
	blockquote p {
		/* padding: 5px 0px; 10px 0px; */
		font-size: 1.0em;
	}
	blockquote code {
	  	font-size: 1.3em;
	}
	#deviceinfo {
		width:50%;
	}
	#deviceinfo th {
		font-size:1.35em;
		height: 1.4em;
	}
	#deviceinfo td, #deviceinfo th {
		font-size: 1.1em;
	}
	#footer {
		display: none;
	}
}