Multi
Multi
[HTML5 & CSS3] From HTML4 & CSS2 to HTML5 & CSS3; Vector Series
Topic Started: Monday, 10. October 2011, 15:12 (759 Views)
Andrew
Member Avatar
ぼくたちがすべてはばか。
From HTML4 and CSS2 to HTML5 and CSS3


Many of you are still coding in HTML4 and CSS2, which I must admit, I still do sometimes. However, if you wanna stay ahead of the rest, I would suggest you start using HTML5 and CSS3, or at least get the basics down before all browsers fully integrate them. As an example of how powerful these new tools are, we will be building a basic example page.

HTML5

What You Need To Know
You need to know that HTML5 is not just a small expansion of HTML4. HTML5 is an entire rework of concept of HTML itself. New tags rewrite the ways web layouts are created and new interactive elements provide even more user functionality. Elements such as the canvas, video, and audio tags. A complete list of HTML5 elements can be found here at w3schools.

What You'll Need From Top To Bottom

  • Doctype - Tells the browser the current page was written in HTML5.
  • Header - The header tag specifies that the space is for the page header or section header. Things such as page titles, introductions, etc.
  • Nav - The nav tag specifies that the space is to be used for a navigation menu.
  • Section - The section tag specifies that the current space is to be used for a certain section of the document. Anything can go in here, even another section.
  • Aside - The aside tag specifies that the current space is to be used for content that is aside from other content. The contents of an aside should make sense on its own which means you can't go:
    Code: HTML
     
    2 + 2 <aside>= 4</aside>
    This is, however not a practical example of what an aside would be used for, asides are typically used for content that is wrapped around the main content. Sidebars and things like that. The #nav element on this page could be used as an aside.

  • Footer - The footer tag contains additional information for the current page. It should not contain additional main content. Things such as copyrights, authors, affiliates, etc should be included in footers.

You may have noticed that I only included elements that had to do with layout. We will be going over more content based elements later.

So here's what a typical and basic HTML5 layout would look like.
Code: HTML
 
<!doctype html>
<html>
<head>
<!--Document Header-->
</head>
<body>
<header>
<!--Page Header-->
</header>
<nav>
<!--Page Navigation-->
</nav>
<section>
<!--Page Content-->
</section>
<aside>
<!--Some Sidebar Or Ad-->
</aside>
<footer>
<!--Page Footer-->
</footer>
</body>
</html>

Simple enough right?

Let's build the HTML structure of our sample page. But before we get started. Let's take a look at the basic structure.

Click To Enlarge

Posted Image


We have 3 headers, 2 content sections, one navigation menu, and one footer. Now let's get started with the structure.

We'll start with the top section, and give it the id "top".
Code: HTML
 
<section id="top">
<header>
<h1>From HTML4 and CSS2 to HTML5 and CSS3</h1>
<h3>Learning By Example</h3>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</section>

Inside it we have a header element containing 2 headers, the page title, and the page subtitle. We also have our navigation containing the links "Home", "About", and "Contact".

Now we're gonna add the content sections.
Code: HTML
 
<section>
<article><header><h2>Lorem Ipsum</h2></header><p><img src="http://flickholdr.com/300/300/wave" />Dolor sit amet, consectetur adipiscing elit. Ut eu tortor mi, eu varius tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod, felis ut lacinia imperdiet, quam libero rhoncus risus, vel dictum ipsum ligula vitae nisl. Donec ullamcorper risus in neque volutpat ac congue magna elementum. Proin id dictum dui. Nulla enim nisi, semper vel tempus ac, cursus in quam. Cras ac orci turpis, eget auctor purus. Nunc venenatis fermentum varius. Curabitur sagittis tortor at lacus viverra eu ornare velit varius. In euismod ligula et nisi tincidunt commodo. Nulla nisi neque, scelerisque non pharetra vel, egestas sed velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ullamcorper, nisl ac hendrerit pharetra, mauris ipsum vehicula eros, sed aliquet arcu ipsum vitae justo. Maecenas a est at mauris dapibus pretium ut venenatis nisi. Maecenas erat nunc, elementum sit amet pharetra ut, eleifend eget magna. Nulla suscipit eros a dui dapibus suscipit.

Nullam pulvinar nibh non erat dignissim adipiscing. Quisque mollis odio quis tortor tempus aliquet. Vivamus vel augue nulla. Donec justo neque, scelerisque vel luctus in, tempus quis est. Integer vel consectetur lectus. Aliquam ullamcorper dapibus neque, non accumsan velit tincidunt sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc tellus mauris, convallis ac eleifend eget, tristique blandit sem. Maecenas condimentum adipiscing lacus sit amet vehicula. Fusce nec erat tristique risus venenatis mattis. Proin rutrum tristique sollicitudin. Phasellus lorem mauris, bibendum non lacinia ac, interdum ac magna. Donec malesuada pellentesque ultricies. Cras at nulla lacus. Praesent in lacus lorem. Quisque ornare tristique elit, at sagittis libero placerat eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Nullam vitae feugiat ante. Vestibulum metus arcu, commodo a faucibus quis, luctus sit amet erat. Vestibulum sit amet justo quis urna ullamcorper laoreet sed at sapien. Integer varius erat dui, ut consequat lectus. Morbi condimentum auctor velit non tincidunt. Vivamus eget est augue, at commodo lacus. Vestibulum mollis, ipsum quis congue vestibulum, eros augue ultricies leo, ac faucibus ante tortor sed lacus. Morbi dignissim ultrices eros et tincidunt. Praesent fringilla augue id magna aliquam mollis. Proin convallis, est mattis tristique iaculis, nulla nisl tincidunt risus, a interdum magna lacus quis neque. Vivamus semper purus euismod elit fermentum et vehicula sem elementum. Ut et ligula venenatis justo adipiscing imperdiet. Vivamus ullamcorper fringilla tincidunt. Suspendisse sodales tortor et neque consequat tincidunt. Pellentesque fringilla accumsan quam nec vehicula.</p></article>

<article><header><h2>
Proin Non Neque</h2></header> <p>Dui. Integer tempor interdum enim at tincidunt. Mauris metus tortor, dictum eu elementum tempus, aliquam non enim. Integer venenatis placerat magna, a luctus elit pharetra vel. Mauris nec sollicitudin velit. Pellentesque nec tortor ac purus auctor fringilla sed a lorem. Aenean sit amet urna sit amet nisl fringilla bibendum. Integer sed velit quis orci feugiat imperdiet sed vehicula urna. Cras pretium quam nec augue egestas iaculis. Vestibulum elementum mauris ac risus rutrum tempus. Ut luctus leo at diam mattis non faucibus sapien cursus. Aenean non enim nulla, tempus mattis odio. Proin ac nibh vitae justo aliquet auctor. Aliquam id erat et nulla sagittis rutrum eu vel quam. Morbi vel leo magna, at accumsan odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper adipiscing iaculis.

Donec porta felis in nisl scelerisque ut faucibus augue venenatis. Ut rhoncus condimentum dui vel tincidunt. Nam varius nibh sed magna placerat molestie. Sed bibendum, urna id rhoncus pulvinar, purus sapien scelerisque elit, id pulvinar augue ipsum id mauris. Duis lacinia sapien ac nibh tincidunt sit amet vulputate velit condimentum. Suspendisse vel ultrices mauris. Donec at lobortis ligula. Ut blandit sodales turpis, eleifend accumsan enim egestas scelerisque. Nulla facilisi. Mauris vitae laoreet tellus. Sed et est ut lacus fringilla hendrerit. Quisque id nisl nulla. Cras ac augue eu tortor posuere viverra. Mauris tellus neque, vestibulum id pharetra eget, blandit at tortor. Proin a turpis nisl. Praesent in mauris a dui vehicula sollicitudin id nec orci. Etiam in purus et lacus faucibus pretium.

Nulla a nulla diam, quis aliquet augue. Nam in varius risus. Sed sed turpis nunc, et ultricies mi. Morbi ac nunc eu elit porta pulvinar. Mauris et sem erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam commodo bibendum mauris, id bibendum sapien tempor quis. Cras in mi eros, eu semper ante. Donec feugiat auctor lacinia. Suspendisse diam eros, blandit sit amet tempor et, faucibus nec sapien. Donec eu lorem magna. Nullam eu massa in diam ornare tempus. Proin scelerisque lobortis elementum. Sed tincidunt, purus ac aliquam blandit, erat dolor euismod lacus, et dignissim ante ante quis ipsum.

Praesent pretium sagittis tellus vitae varius. Quisque enim mi, tincidunt ac dictum luctus, ullamcorper eu urna. In hac habitasse platea dictumst. Nulla a venenatis arcu. Phasellus bibendum, massa at ullamcorper porta, ipsum metus mollis ante, in congue massa purus at nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam orci nisl, blandit a euismod a, laoreet quis sem. Cras justo quam, aliquet nec dapibus vel, porttitor et sem. Sed at mauris purus, et aliquet enim. Vivamus at mi sed erat laoreet gravida. Maecenas at porttitor leo. Cras sem libero, tincidunt ac congue in, pharetra nec sapien. Nam tempus aliquet metus et pharetra. Proin sit amet justo purus.</p></article>
</section>

Please excuse my lack of indentation in that one.

Now if you look at it. We have one section element. Inside it are our articles. Each article has a heading, and the article itself. There is also an image in the first article, so the page doesn't look so bland :P

Now for the aside, or sidebar.
Code: HTML
 
<aside>
Praesent pretium sagittis tellus vitae varius. Quisque enim mi, tincidunt ac dictum luctus, ullamcorper eu urna. In hac habitasse platea dictumst. Nulla a venenatis arcu. Phasellus bibendum, massa at ullamcorper porta, ipsum metus mollis ante, in congue massa purus at nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam orci nisl, blandit a euismod a, laoreet quis sem. Cras justo quam, aliquet nec dapibus vel, porttitor et sem. Sed at mauris purus, et aliquet enim. Vivamus at mi sed erat laoreet gravida. Maecenas at porttitor leo. Cras sem libero, tincidunt ac congue in, pharetra nec sapien. Nam tempus aliquet metus et pharetra. Proin sit amet justo purus.
</aside>

We're almost done. We just need to add the footer now and then style everything.
Code: HTML
 

<footer>
Copyright zetaNetwork 2011
</footer>

Our footer element consists of a simple copyright to zetaNetwork.

Now that we're done with the layout, it's time to style everything.

CSS3

What You Need To Know
Like HTML5 is from HTML4, CSS3 is much different from CSS2 and CSS1. CSS3 provides developers and designers many more powerful tools in order to give their web pages that extra little flare. With rounded borders, text shadows, and multiple background images, the next generation of web design is here.

The New And Shiny Stuff

  • Multiple Backgrounds - This new addition to CSS allows developers to have multiple background images rendering many different "hacks" useless, including, the 3-piece h2 code for ZetaBoards.
  • Box Shadows - This CSS3 property allows you to have box shadows thus giving you the ability to apply drop shadows to various elements.
  • Text Shadow - This CSS3 property, like box shadows, allows you to apply drop shadows to text.
  • Rounded Borders - This highly flexible CSS3 property allows you to apply rounded corners on any element you wish.

We just went over the ones that were mentioned in this tutorial. There are many more but it would take too long to list them all out. Read about all of them at CSS3.info and CSS3.com.

Now that you know about some of the CSS3 we're gonna use to style our HTML5, let's get started. We'll start with the body.
[/b]
Code: CSS
 
body {
margin: 0;
font-family: Calibri, Sans-Serif;
zoom: 1.2;
margin: 0px 50px;
color: #272727;
}

We'll set the margins to 0 because the default stylesheet sets it to 8 automatically. The reason the default stylesheet is for HTML4 is because a default stylesheet for HTML5 has not been defined yet by w3c.

We set the font to Calibri and as a fallback Sans-Serif. Why Calibri? I felt like making it Calibri. We'll also give the page a 120% zoom, and set the text color to #272727.

Now it's time to style the top section, or the container for the header and navigation.
Code: CSS
 
#top {
padding: 3px 18px;
background: #e6e6e6;
border-radius: 12px 12px 0px 0px;
border: 1px solid #fff;
box-shadow: 0px 0px 3px #000;
margin-top: 35px;
}

Give the top a nice double border of dark and bright and a top margin so it's not touching the top of the page. Then we round the top left and right corners.

It's time to style the headers now.
Code: CSS
 

header {
text-shadow: 1px 1px 1px #fff;
}

header h3 {
margin-top: -25px;
}

header h2 {
margin-top: -5px;
}

We'll just give them all a white 1px blur 1px distance right bottom drop shadow.

After that we style all the h2s and h3s by giving the h3s a -25px top margin, making move up 25px from its original position, and by giving the h2s a -5px top margin, making it move up 5px from its original position.
Code: CSS
 
nav a {
padding: 5px 8px;
text-decoration: none;
}

Now we style all the navigation elements by giving them a vertical padding of 5px and a horizontal padding of 8px. Then setting their text decoration to none so they don't have an ugly underline.

Now we style the content section. We can't use section as our selector because then every section would be styled and we only want the content section to be styled so we'll use section + section, which selects the section that comes right after another section.
Code: CSS
 

section + section {
background: #e6e6e6;
border: 1px solid #fff;
box-shadow: 0px 0px 3px #000;
padding: 8px 13px;
zoom: 0.8;
width: 80%;
display: table-cell;
vertical-align: top;
}

We'll set the background color of our content section to #e6e6e6 and give it a 1px white border and a 3px blur black drop shadow just like our header. Then we set the padding to 8px vertical and 13px horizontal so there is some space in between the content and the borders. Having 80% as our zoom makes the content of the section smaller than the rest of the page content. Then we set the width of the section to 80% so it doesn't fill the entire page and to finish it up we change the display to table-cell and set our vertical-align to top.

We're almost done so bear with me please. We're gonna style the aside now, or sidebar, whichever you prefer to call it.
Code: CSS
 

aside {
display: table-cell;
background: #e6e6e6;
border: 1px solid #fff;
box-shadow: 0px 0px 3px #000;
padding: 8px 13px;
zoom: 0.8;
width: 15%;
vertical-align: top;
}

We do the same thing with the aside as we did with our content section except this time we set the width to 15%.

Now we style the footer, which is relatively simple actually.
Code: CSS
 

footer {
text-align: center;
background: #e6e6e6;
border: 1px solid #fff;
box-shadow: 0px 0px 3px #000;
border-radius: 0px 0px 12px 12px;
padding: 10px 0px;
margin-bottom: 35px;
}

Center the text, give it the same styling as our aside and content section, then round the bottom right and left borders using the same radius as our header.

To wrap it all up we're just gonna style that image in our content section like so.
Code: CSS
 

img {
float: right;
margin: 3px 10px;
border: 1px solid #fff;
box-shadow: 0px 2px 3px #000,
0px 0px 3px #000;
}

Now we're finally done :)

The Completed Product

If you have any questions, please do not hesitate to ask them.
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
I think learning the basics and whatnot of CSS3 and HTML5 would be a good idea for any coder out there; however, implementing it before it can be used perfectly, cross-browser, doesn't seem like the best idea. Nonetheless, this is a really nice article/documentation. Nicely done. :)
Off
Profile
Quote
Top
 
Andrew
Member Avatar
ぼくたちがすべてはばか。
Thanks :D

If you liked this article you'll like the next one in the Vector Series. It'll blow you away, box-model, templates, and grid positioning :o
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
VoidPC
No Avatar
Level 1
If a browser does not support HTML5, what will happen?
Off
Profile
Quote
Top
 
Steven
Member Avatar
WeDesignTheNet
@Void- I believe it would ignore the data entered that was HTML 5 or CSS3.
Outline Documentations
T H E M E S

Documentation accepted in to the Themes database
Steven | Outline Retiree | Ask your Favorite Retiree a Question!
Off
Profile
Quote
Top
 
silvershoes
Member Avatar
Level 4
Why is this called the Vector Series? Vector to me means graphics, and you're discussing code. I keep expecting to read tips on using vector programs like Inkscape or AI to make graphics for themes. Which is a completely different topic of course.

It's kinda confusing?
Off
Profile
Quote
Top
 
Andrew
Member Avatar
ぼくたちがすべてはばか。
It's called Vector cause Vector can be expanded without quality loss.
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..