13
Coding a CSS3 & HTML5 One- Page Website Template  jQuery Trickshots is our new epic jQuery tips and tricks book. Check it out!  Web development is an area in which you have to keep up with the latest technologies and techniques, so that you are at the top of your game. And no wonder  this is an area which changes with an amazing pace. What is the standard now will be obsolete in just a couple of years. But changes do not come from nowhere. The early adopters are already using what we are going to use day-to-day a few years from now. One of these technologies is HTML5  the new version of the fundamental language of the web. Today we are making a HTML5 web template, using some of the new features brought by CSS3 and  jQuery, w ith the scrollTo plug-in. As HTML5 is still a work in progress, you can optionally download a XHTML versionof the template here. Step 1  The Design Every design process starts with an initial idea which you later build upon. At this stage, designers usually go with programs such as Photoshop, to work on the details and see how it will all fit together.

HTML5 Template

Embed Size (px)

Citation preview

Page 1: HTML5 Template

7/28/2019 HTML5 Template

http://slidepdf.com/reader/full/html5-template 1/13

Coding a CSS3 & HTML5 One-Page Website Template

 jQuery Trickshots is our new epic jQuery tips and tricks book. Check it out!  Web development is an area in which you have to keep up with the latest technologies and technique

so that you are at the top of your game. And no wonder  – this is an area which changes with an

amazing pace. What is the standard now will be obsolete in just a couple of years.

But changes do not come from nowhere. The early adopters are already using what we are going to u

day-to-day a few years from now. One of these technologies is HTML5  – the new version of the

fundamental language of the web.

Today we are making a HTML5 web template, using some of the new features brought by CSS3 and

 jQuery, with the scrollTo plug-in. As HTML5 is still a work in progress, you can optionally download

a XHTML versionof the template here. 

Step 1  – The Design

Every design process starts with an initial idea which you later build upon. At this stage, designers

usually go with programs such as Photoshop, to work on the details and see how it will all fit together

Page 2: HTML5 Template

7/28/2019 HTML5 Template

http://slidepdf.com/reader/full/html5-template 2/13

Photoshop Design

 After this, the design is hand coded with HTML and CSS going hand by hand, moving from designing

the background, colors and fonts, to detail work on the content section.

Step 2  – HTML

It is a good time to note, that HTML5 is still a work in progress. It will remain so probably till

around 2022 (I am absolutely serious about this). However some parts of the standard are complete,

and can be used today.

In this tutorial, we are using a few of the tags introduced with this new version of HTML:

  header   – wraps your page header;

  footer   – wraps your page footer;

  section  – groups content into sections (e.g. main area, sidebar etc);

  article  – separates the individual articles from the rest of the page;

  nav  – contains your navigation menu;

  figure  – usually contains an image used as an illustration for your article.

These are used exactly as you would use normal divs. With the difference being that these tags

organize your page semantically. In other words, you can present your content in such a way, that the

subject matter of your page can be more easily determined. As a result services, such as search

engines, will bring you more targeted visitors and thus boost your revenue (and theirs actually).

However, there are some implications in using HTML5 today. One of the most notable is the IE famof browsers, which does not support these tags (it can be fixed with a simple JavaScript include file

though). This is why you should base your decision for moving to HTML5 on your site’s audience. An

 just for this purpose, we are releasing a pure XHTML version of this template as well.

template.html  – Head section

<!DOCTYPE html> <!-- The new doctype -->  

<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>Coding A CSS3 &amp; HTML5 One Page Template | Tutorialzine demo</title>  

<link rel="stylesheet" type="text/css" href="styles.css" />  

<!-- Internet Explorer HTML5 enabling script: -->  

Page 3: HTML5 Template

7/28/2019 HTML5 Template

http://slidepdf.com/reader/full/html5-template 3/13

  <!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<style type="text/css">

.clear {

zoom: 1;

display: block;

}

</style>

<![endif]-->  

</head>  

You can notice the new <DOCTYPE> at line one, which tells the browser that the page is created wit

the HTML5 standard. It is also much shorter and easier to remember than older doctypes.

 After specifying the encoding of the document and the title, we move on to including a special JS file

that will enable Internet Explorer (any version) to render HTML5 tags properly. Again, this means tha

a visitor is using IE and has JavaScript disabled, the page is going to show all messed up. This is

why, depending on your audience, you should consider the regular XHTML version of this template,

which works in any browser and isreleased free for all of our readers here. 

template.html  – Body Section

<body>  

<section id="page"> <!-- Defining the #page section with the section tag -->  

<header> <!-- Defining the header section of the page with the appropriate tag -->  

<h1>Your Logo</h1>  

<h3>and a fancy slogan</h3>  

<nav class="clear"> <!-- The nav link semantically marks your main site

navigation -->  

<ul>  

<li><a href="#article1">Photoshoot</a></li>  

<li><a href="#article2">Sweet Tabs</a></li>  

<li><a href="#article3">Navigation Menu</a></li>  

Page 4: HTML5 Template

7/28/2019 HTML5 Template

http://slidepdf.com/reader/full/html5-template 4/13

  </ul>  

</nav>  

</header>  

Here we use the new section tags, which divide your page into separate semantic sections. Outermois the#page section which is set to a width of 960px in the style sheet (a fairly standard width with o

computer displays in mind). After this comes the header tag and the navigation tag.

Notice the href attributes of the links – the part after the hash symbol # corresponds to the ID of 

the article we want to scroll to.

template.html  – Article

<!-- Article 1 start -->  

<div class="line"></div>  <!-- Dividing line -->  

<article id="article1"> <!-- The new article tag. The id is supplied so it can be

scrolled into view. -->  

<h2>Photoshoot Effect</h2>  

<div class="line"></div>  

<div class="articleBody clear">  

<figure> <!-- The figure tag marks data (usually an image) that is part of

the article -->  

<a href="http://tutorialzine.com/2010/02/photo-shoot-css-jquery/">  

<img src="https://reader009.{domain}/reader009/html5/0405/5ac6275af2 

width="620" height="340" /></a>  

</figure>  

Page 5: HTML5 Template

7/28/2019 HTML5 Template

http://slidepdf.com/reader/full/html5-template 5/13

  <p>In this tutorial, we are creating a photo shoot effect with our just-

released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page

into a photo shooting stage simulating a camera-like feel.</p>  

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus

quam quis .... </p>  

</div>  

</article>  

<!-- Article 1 end -->  

The markup above is shared between all of the articles. First is the dividing line (the best solutionsemantically would be an <hr> line, which in HTML5 has the added role of a logical dividing element,

but unfortunately it is impossible to style in a cross-browser fashion, so we will stick with a DIV). After

this we have the new article tag, with an unique ID, which is used by the navigation to scroll the pa

Inside we have the title of the article, two paragraphs and the new figure tag, which marks the use of

images in the article.

template.html  – Footer 

<footer> <!-- Marking the footer section -->  

<div class="line"></div>  

<p>Copyright 2010 - YourSite.com</p> <!-- Change the copyright notice -->  

<a href="#" class="up">Go UP</a>  

<a href="http://tutorialzine.com/" class="by">Template by Tutorialzine</a>  

</footer>  

</section> <!-- Closing the #page section -->  

<!-- JavaScript Includes -->  

<script

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>  

Page 6: HTML5 Template

7/28/2019 HTML5 Template

http://slidepdf.com/reader/full/html5-template 6/13

  <script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>  

<script src="script.js"></script>  

</body>  

</html>  

Lastly, we have the footer tag, which does exactly what you expect it to do. At the bottom of the page

are the rest of the JavaScript includes, which add the jQuery library and the scrollTo plug-in, which

we are going to use in the next steps.

 An HTML5 & CSS3 Website Template

Step 3 –

CSS As we are using HTML5, we have to take some extra measures with the styling. The tags that this ne

version of HTML introduces, are not yet provided with a default styling. This is however easily fixed w

a couple of lines of CSS code and the page works and looks as it is supposed to:

styles.css  – Part 1

Page 7: HTML5 Template

7/28/2019 HTML5 Template

http://slidepdf.com/reader/full/html5-template 7/13

header,footer,

article,section,

hgroup,nav,

figure{

/* Giving a display value to the HTML5 rendered elements: */  

display:block;  

}

article .line{

/* The dividing line inside of the article is darker: */  

background-color:#15242a;  

border-bottom-color:#204656;  

margin:1.3em 0;  

}

footer .line{

margin:2em 0;  

}

nav{

background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;  

padding:0 5px;  

position:absolute;  

right:0;  

top:4em;  

border:1px solid #FCFCFC;  

-moz-box-shadow:0 1px 1px #333333;  

-webkit-box-shadow:0 1px 1px #333333;  

box-shadow:0 1px 1px #333333;  

Page 8: HTML5 Template

7/28/2019 HTML5 Template

http://slidepdf.com/reader/full/html5-template 8/13

}

nav ul li{

display:inline;  

}

nav ul li a,

nav ul li a:visited{

color:#565656;  

display:block;  

float:left;  

font-size:1.25em;  

font-weight:bold;  

margin:5px 2px;  

padding:7px 10px 4px;  

text-shadow:0 1px 1px white;  

text-transform:uppercase;  

}

nav ul li a:hover{

text-decoration:none;  

background-color:#f0f0f0;  

}

nav, article, nav ul li a,figure{

/* Applying CSS3 rounded corners: */  

-moz-border-radius:10px;  

-webkit-border-radius:10px;  

border-radius:10px;  

}

Page 9: HTML5 Template

7/28/2019 HTML5 Template

http://slidepdf.com/reader/full/html5-template 9/13

We basically need to set the display value of the new tags to block, as you can see from the first

couple of lines. After this we can style them as we would do with regular divs.

We style the horizontal lines, the articles, and the navigation buttons, with the latter organized as an

unordered list inside of the nav tag. At the bottom we assign the border-radius property for four 

different types of elements of once, which saves a lot of code.

styles.css –

Part 2

/* Article styles: */  

#page{

width:960px;  

margin:0 auto;  

position:relative;  

}

article{

background-color:#213E4A;  

margin:3em 0;  

padding:20px;  

text-shadow:0 2px 0 black;  

}

figure{

border:3px solid #142830;  

float:right;  

height:300px;  

margin-left:15px;  

overflow:hidden;  

width:500px;  

}

figure:hover{

Page 10: HTML5 Template

7/28/2019 HTML5 Template

http://slidepdf.com/reader/full/html5-template 10/13

  -moz-box-shadow:0 0 2px #4D7788;  

-webkit-box-shadow:0 0 2px #4D7788;  

box-shadow:0 0 2px #4D7788;  

}

figure img{

margin-left:-60px;  

}

/* Footer styling: */  

footer{

margin-bottom:30px;  

text-align:center;  

font-size:0.825em;  

}

footer p{

margin-bottom:-2.5em;  

position:relative;  

}

footer a,footer a:visited{

color:#cccccc;  

background-color:#213e4a;  

display:block;  

padding:2px 4px;  

z-index:100;  

position:relative;  

}

Page 11: HTML5 Template

7/28/2019 HTML5 Template

http://slidepdf.com/reader/full/html5-template 11/13

footer a:hover{

text-decoration:none;  

background-color:#142830;  

}

footer a.by{

float:left;  

}

footer a.up{

float:right;  

}

In the second part of the code, we apply more detailed styling to the elements. A width for 

the page section, ahover property for the figure tag and styles for the links inside of the footer. There

are also a few styles that are not included here, but you can see them in styles.css.

Now lets continue with the next step.

Page 12: HTML5 Template

7/28/2019 HTML5 Template

http://slidepdf.com/reader/full/html5-template 12/13

 

Structure Of The Page - HTML5 Tags

Step 4  – jQuery

To enhance the template, we will create a smooth scrolling effect once a navigation link has been

clicked, using the scrollTo jQuery plug-in that we included in the page earlier. To make it work we jus

need to loop through the links in the navigation bar (and the UP link in the footer) and assign an oncli

event which will trigger the$.srollTo() function, which is defined by the plug-in.

script.js

$(document).ready(function(){

/* This code is executed after the DOM has been completely loaded */  

$('nav a,footer a.up').click(function(e){

// If a link has been clicked, scroll the page to the link's hash target:  

$.scrollTo( this.hash || 0, 1500);

e.preventDefault();

Page 13: HTML5 Template

7/28/2019 HTML5 Template

http://slidepdf.com/reader/full/html5-template 13/13

});

});

With this ou r template is com plete!  

Wrapping it upIn this tutorial, we leveraged the new semantic features provided by HTML5, to design and code a on

page web template. You can use it for free both personally and commercially, providing you leave the

back link intact.