Beginner’s Guide To: Building HTML5/CSS3 Webpages

Posted by Harshad

Beginner’s Guide To: Building HTML5/CSS3 Webpages

Posted: 04 Oct 2011 05:33 AM PDT

HTML5 and CSS3 have swept the web by storm in only 2 years. Before them there have been many altered semantics in the way web designers are expected to create web pages, and with their arrival come a slew of awesome supports such as alternative media, XML-style tags, and progressive input attributes for web designers to achieve dreamy features like animation.

html5 css3 Beginners Guide To: Building HTML5/CSS3 Webpages
(Image Source: SARBARTHA DAS, HeskinRadiophonic)

Though most developers seem to showcase potential yet complicated demos, HTML5/CSS3 are not really rocket science, and I’ll be walking you through the relaxing process to build a standard HTML5/CSS3 web page with comprehensive yet in-depth explanation and tada! Bonuses like learning resources and free HTML5 templates are available for you, so take this chance to kick-start your HTML5 journey!

Changes between HTML4 and HTML5

You may be wondering why it’s even important to switch into HTML5. There are a myriad of reasons, but mostly because you’ll be working with the global Internet standards like every other designer. In this way you’ll find more support online and your websites will render properly in modern browsers which are constantly improved.

html5 semantics Beginners Guide To: Building HTML5/CSS3 Webpages
(Image Source: W3C)

Comparison between HTML4 and HTML5 is difficult to spot at surface level. From viewing the new HTML5 draft you can see featured elements and corrected error handling procedures. Browser developers have specifically enjoyed the new specifications for rendering default web pages.

What’s more from HTML5 is the conversion of our modern web browser. With these new specifications the web as a whole is now viewed as an application platform for HTML (especially HTML5), CSS, and JavaScript to be built upon. Also, this system elegantly creates harmony between web designers and developers by setting common standards which all browsers should follow.

Additionally many elements have been created to represent new-age digital media. These include <video> and <audio> which are huge for multimedia support. In some browsers you may complete form validation directly in HTML. Granted there is still a heavy need for jQuery, since there are many software developers who have yet to recognize the features. If you’d like a list of tags check this W3Schools table to learn more about them.

Bare HTML5 Skeleton

I find the easiest way to understand any topic is to dive right into it. So I’ll be constructing a very basic HTML5 skeleton template for a web page. I included a few of the newer elements, which I hope to categorize a bit later.

<!doctype html> <head>   <meta charset="utf-8">   <title>Our First HTML5 Page</title>   <meta name="description" content="Welcome to my basic template.">   <link rel="stylesheet" href="css/style.css?v=1"> </head>  <body>     <div id="wrapper">     	<header>             <h1>Welcome, one and all!</h1>              <nav>             	<ul>                     <li><a rel="external" href="#">Home</a></li>                     <li><a rel="external" href="#">About us</a></li>                     <li><a rel="external" href="#">Contacts</a></li>                 </ul>             </nav>         </header>          <div id="core" class="clearfix">             <section id="left">             	<p>some content here.</p>             </section>              <section id="right">                 <p>but some here as well!</p>             </section>         </div>          <footer>             <p>Some copyright and legal notices here. Maybe use the © symbol a bit.</p>         </footer>     </div>  </body> </html>

Right away this isn’t very different from a standard HTML4 web page. What you may notice is that we do not need to include any more self-closing tags. This is truly wonderful news as it will save lots of time off your development projects.

For those who don’t know, in XHTML drafts there were many elements labelled self-closing. These would end with a forward slash before the ‘greater than’ operator to signify you wouldn’t need to include another closing tag elsewhere. As an example, to create a meta keywords tag you would use <meta name="keywords" content="HTML5,CSS3,JavaScript" /> without the need for a closing </meta> elsewhere.

This rule still applies in HTML5. But now you don’t even need the extra forward slash! <meta name="keywords" content="HTML5,CSS3,JavaScript"> is completely valid, although you are allowed to continue using the XHTML/XML standard. For all standards-compliant browsers both elements will render the same way.

Defining our Page Areas

The majority of our new code shouldn’t be too shocking. Our doctype is hilariously simpler than ever, no need for excessive body attributes, and information in our heading is clearly labelled. Moving on I’d like to focus your attention on the content inside our <body> tag. This includes all of the main page’s structure. I’ve purposefully used a few nice HTML5 tags to signify how you may include them in your own work.

First you’ll see the entire page is encapsulated within a div tag. I’ve labelled this with an ID of wrapper, meaning it wraps around our entire website content. This is useful to set a maximum width or position content around on the screen. Next I’ve fractured the page into 3 core elements – one <header>, a core <div>, and a short <footer>. Inside my custom header area I have added a simplistic display of the page’s title, and navigation items using the <nav> tag as a wrapper.

Now for the <div> with an ID of core I have applied a secondary clearfix. This feature makes it so we can freely float 2 columns inside and we won’t experience any dropped content or strange phenomena. And rightfully so, as inside I have placed two <section> tags which will include our main content area and sidebar, respectively. We’ll be using CSS styles to float them apart.

Similarly the quiet footer tag works well to differentiate this content among the page. Inside I have placed a solemn paragraph which may contain some copyright and ownership information. But chances are good you’ll want to include a bit more content, such as secondary links to your pages.

Creative CSS3 Wizardry

To finish off this basic stencil layout we can use a few CSS styles. In the basic HTML5 template I added an external CSS stylesheet so we can keep our code areas separated. This will clear up a lot of confusion in the long run when your pages and styles begin to run on for different pages.

html5 css3 styling Beginners Guide To: Building HTML5/CSS3 Webpages
(Image Source: W3C)

So I haven’t spent a great deal of time with CSS, but enough to showcase a couple of neat effects. First off I’ve used some of the border-radius settings to build very cool navigation link hover effects. You can target this same effect in the template code, just add the following lines into the CSS document.

 nav { 	display: block; 	margin-bottom: 10px; } nav ul { 	list-style: none; 	font-size: 14px; } nav ul li { 	display: inline; } nav ul li a { 	display: block; 	float: left; 	padding: 3px 6px; 	color: #575c7d; 	text-decoration: none; 	font-weight: bold; } nav ul li a:hover { 	background: #deff90; 	color: #485e0f; 	-webkit-border-radius: 3px; 	-moz-border-radius: 3px; 	border-radius: 3px; 	padding: 3px 6px; 	margin: 0; 	text-decoration: none; }

Another neat effect is the clearfix styles. This isn’t an entirely new concept with CSS3, but it is important for building standards-compliant web pages. Often when you’re looking to float content next to each other you’ll experience buggy positioning glitches. This is caused by offset margins and errors in setting absolute widths for your floated content.

This concept can seem a bit confusing, and I’ve added a small bit of code below to help. Basically we’re targeting two <section> elements, #left and #right to correspond to their side of the page. I’ve set each with a definite width and floating left, so they’ll stack right up next to each other. Since our container div#core contains the clearfix class, this means all internal content can be move around freely and automatically clears extra space afterwards.

/* page core */ div#core { 	display: block; 	clear: both; 	margin-bottom: 20px; } section#left { 	width: 550px; 	float: left; 	margin: 0 15px; } section#right { 	float: left; 	width: 300px; }  /* clearfix */ .clearfix:after { 	content: "."; 	display: block; 	clear: both; 	visibility: hidden; 	line-height: 0; 	height: 0; } .clearfix { 	display: inline-block; }  html[xmlns] .clearfix { 	display: block; } * html .clearfix { 	height: 1%; }

These bits of code are simple for getting started. They also pertain to our HTML5 template code constructed earlier, so this is simple practice. But when it comes to real web junkies you’ll be looking into more CSS3 functionality.

Lesser Known CSS3 Syntax

To construct full HTML5/CSS3 web pages you’ll begin to use some much more complex stylesheets. Many designers know of shorthand code (such as the font: property), since these have been standards even before CSS2.

But there are a few new properties in CSS3 which many designers aren’t thinking about. Many of these aren’t just for aesthetics, but also include animation effects. Below is a short list explaining a few of the properties you may consider playing with. Try googling for syntax examples if you feel lost.

box-shadow: adds a neat shadow effect to your page elements. You are given 4 parameters which set the position left/right, up/down, shadow blur and color. Note that box shadows are not considered additional space to the original width/height.
text-shadow: creates beautiful shadows behind your page text. With the right effects your letters could appear to pop right off the page. Read a bit more about text shadows at this post.
border-radius: Rounded corners have taken a long time to become accepted standards. Few years ago many web 2.0 designers were crafting background images just to fit rounded corners in with CSS. But using CSS3 border-radius you can manipulate the curve of each border on any element.
opacity: Seems like a simple property which many designers don’t consider. Opacity expects a single numerical input ranging from 0 to 1.0 (0% – 100%). This effect works great as a hover animation.
@font-face: Another beautiful example of some complex CSS styles and typography. Web designers are now able to work with their own custom fonts by defining them as variables inside your CSS documents. The process is a bit confusing, but Zen Elements has outlined the process in a very simplistic manner.
box-sizing: by default box-sizing will set all of your elements as content-box. This means width, padding, and borders are all included into the max width. But set to border-box you can define a max width (say 20px) and added padding/borders will include themselves into this, thus removing space inside the object. It’s a fantastic property once you master its resourcefulness.

These properties all have their upsides and downfalls. I wouldn’t recommend trying to cram them all into your web pages. But practice will give you a clear mindset to enter into developing further websites with ease.

One more core piece of added syntax worth mentioning is attribute selectors. With CSS3 you can now define styles based on HTML attributes (such as type, href, title) and even provide specific values. So for example we could target links with a defined title attribute and give them a set of background icon.

 ul li[title^="ico"] { 	background: url('my-icon.gif'); }

If you notice I’ve included a carrot symbol before the equals sign. This is an operator which defines all list items holding the prefix, ico. Alternatively you can replace the carrot(^) with a dollar sign($) to target the suffix area of your title. In this way CSS3 knows to add background images where you could set the titles as ‘first ico’ or ‘book ico’. Read up a bit more about attribute selectors if you’re interested.

Putting it All Together

At the core of HTML5 and CSS3 web pages is simplicity. Web developers are trying to build highly creative websites in less time and with less stress. The new features in HTML5 allow this with plenty of wiggle room. And using some of the new CSS3 selectors and properties will give you advantages in the long run.

html5 performance and integration Beginners Guide To: Building HTML5/CSS3 Webpages
(Image Source: W3C)

But as well you should be considering the end user. The process of building a web page ultimately ends after launching the website public. Your goal is to please audience with easy-to-access information, and not just human readers, but search engine crawlers and indexing bots. Semantics have greatly evolved to include new HTML5 layout elements, splitting up page layouts consistently. It’s never been easier to construct a small navigation and footer section in line with all modern web browsers.

Once you have become comfortable building HTML5 web pages you’ll likely start looking into page animations. Even minor effects with JavaScript and AJAX can majorly improve user experience and site performance. Although this isn’t part of the article scope, I recommend toying around with jQuery if you have any time. The open source library is astounding and allows for rapid prototyping on top of HTML5 page elements.

Additional Resources

Bloggers all around the world have been discussing the new trends in HTML5 and CSS3 and sharing resources to the public. The time is changing and the web community is changing with them. You should consider a few niche areas to study into and build a small interest.

Below are some additional lists, articles and tutorials you may enjoy. I’ve taken the liberty of splitting the lists into HTML5 and CSS3 resources. Based on what you’re looking into there should be a few topics here for everybody. Also enjoy the brief gallery of free HTML themes available for download online!

HTML5

CSS3

Future 2 tech.

all the latest information of the cool stuffs with their details.

Archive

visits

About me

G$earch