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
@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);
}
}
No comments:
Post a Comment