Website page with CSS3 & HTML5

Web development is a region during which you have got to stay up with the newest technologies and techniques, so you’re at the highest of your game.  And no surprise – this is often a region that changes with an incredible pace. what’s the quality currently are going to be obsolete in precisely a few of years.

But changes don’t return out of thin air. the first adopters square measure already victimisation what we have a tendency to square measure getting to use every day a number of years from currently. one amongst these technologies is HTML5 – the new edition of the elemental language of the net.

  • The Design

    Design for html 5

    Every style method starts with AN initial plan that you later hinge upon. At this stage, designers sometimes associate with programs like Photoshop, to figure on the main points and see however it’ll all work along.

    After this, the look is hand coded with hypertext mark-up language and CSS going hand by hand, moving from planning the background, colours and fonts, to detail work on the content section.

 

  •  The 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 family of 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. And just for this purpose, we are releasing a pure XHTML version of this template as well.

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: -->

	<!--[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, that tells the browser that the page is made with the HTML5 commonplace. it’s additionally abundant shorter and easier to recollect than older doctypes.

After specifying the cryptography of the document and therefore the title, we have a tendency to go to together with a special JS file that may alter net human (any version) to render HTML5 tags properly. Again, this suggests that if a traveler is exploitation i.e. and has JavaScript disabled, the page goes to indicate all tousled.

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

			</ul>

		</nav>

	</header>

Here we tend to use the new section tags, that divide your page into separate linguistics sections. outmost is that the #page section that is ready to a breadth of 960px within the piece of paper (a fairly normal breadth with older pc displays in mind). when this comes the header tag and therefore the navigation tag.

Notice the href attributes of the links – the half when the hash image # corresponds to the ID of the article we would like to scroll to.

  • The 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="http://cdn.tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>

			</figure>

			<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 higher than is shared between all of the articles. initial is that the line (the best answer semantically would be associate degree <hr> line, that in HTML5 has the additional role of a logical dividing component, however sadly it’s not possible to vogue during a cross-browser fashion, therefore we are going to follow a DIV). once this we’ve the new article tag, with associate degree distinctive ID, that is employed by the navigation to scroll the page.

Inside we’ve the title of the article, 2 paragraphs and therefore the new figure tag, that marks the utilization of pictures within the article.

  • The 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>
	<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
	<script src="script.js"></script>

	</body>

</html>

Lastly, we’ve got the footer tag, that will specifically what you expect it to try to to. At rock bottom of the page square measure the remainder of the JavaScript includes, that add the jQuery library and also the scrollTo plug-in, that we tend to square measure about to use within the next steps.

  • The CSS

As we tend to area unit victimisation HTML5, we’ve to require some additional measures with the styling. The tags that this remake of HTML introduces, aren’t nonetheless supplied with a default styling. this can be but simply fastened with a few of lines of CSS code and also the page works and appears because it is meant to:

styles.css – Part 1

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;
}

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;
}

We primarily ought to set the show price of the new tags to dam, as you’ll be able to see from the primary number of lines. once this we will vogue them as we’d do with regular divs.

We vogue the horizontal lines, the articles, and therefore the navigation buttons, with the latter organized as AN unordered list within the nav tag. At rock bottom we have a tendency to assign the border-radius property for four differing types of components of once, that saves lots 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{
	-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;
}

footer a:hover{
	text-decoration:none;
	background-color:#142830;
}

footer a.by{
	float:left;

}

footer a.up{
	float:right;
}

In the second a part of the code, we tend to apply additional careful styling to the weather. A breadth for the page section, a hover property for the figure tag and designs for the links inside the footer. There also are many designs that don’t seem to be enclosed here, however you’ll be able to see them in designs.css.

Now lets continue with successive step.

  • The JQuery

To enhance the templet, we are going to produce a swish scrolling impact once a navigation link has been clicked, victimization the scrollTo jQuery plug-in that we tend to enclosed within the page earlier. to create it work we tend to simply got to loop through the links within the navigation bar (and the UP link within the footer) associated assign an onclick event which is able to trigger the $.srollTo() operate, that is outlined 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();
	});

});

Now our website template it’s Complete !