HTML5 Two Column Tutorial

In this tutorial, we will create the page below using HTML5.

eaw_html5

Example: http://www.everythingaboutweb.com/classes/examples/html5-two-column/

Starter Code: http://www.everythingaboutweb.com/html5-two-column-css-layout/

Below are the 5 steps

  1. Start with basic tags
  2. Create reset.css
  3. Create style.css
  4. Add logo, navigation, content, rightcol and markup to HTML
  5. Add CSS for navigation, content, and rightcol
1. Start with basic tags

Go to the link below and copy and paste the HTML for the basic HTML5 tags:
http://www.everythingaboutweb.com/html5-two-column-css-layout/

2. Create reset.css

Go to the link below and copy and paste the code for a basic reset.css file:
http://www.everythingaboutweb.com/html5-two-column-css-layout/

3. Create style.css

Go to the link below and copy and paste the code for a basic style.css file:
http://www.everythingaboutweb.com/html5-two-column-css-layout/

4. Add lthe logo, navigation, content, rightcol and markup to HTML


4.1 Insert the logo (image below) into a div named logo

Download image


4.2 Insert Navigation

Using the navigational sections outlined below, create an unordered list using the <ul> and <lu></li> tags to include the 4 sections below. Don’t forget to link the pages.

Home (Add link to index.html)

About (Add link to about.html)

Tutorials (Add link to tutorials.html)

Contact (Add link to contact.html)


4.3 Add the h1 text (below) to content div

Learning HTML5 The Two-Column Layout


4.4 Add the text below to content div

H2 Heading
Genuine investments university art purebred investments. Imported property philanthropic estate, designer, first-class educated dynasty luxury purebred manor high-rise enthusiast. Inspiring diplomatatic pedigree wine vacation cutlery genuine wine handmade. Repertoire panoramic townhome, enthusiast, pearl gilded brilliant gentlemen, charity purebred. Impressive investments crafted, accredited, marquis affluent repertoire doctoral, enthusiast.

H2 Heading
Using cutlery fashion suite, portfolio guests fashion dynasty, wine rare investments a. Affluent sport noble first-class, sterling butler. European, townhome travel university, stockmarket in bonds art educated presidential le panoramic brokerage. Fashion with wealth le marquis townhome classical suite property auction purebred.


4.5 Add the text for the rightcol div

H2 Recent Posts
H3 Subheading
This is a short description.
H3 Subheading
This is a short description.
H3 Subheading
This is a short description.


4.6 Add the text to the footer

everything about web © 2012 (remember to change the copyright symbol to an HTML character)


5. Add CSS for navigation, content, and rightcol

 

 

5.1. Add the font-family to the body in the CSS

Add font-family: Helvetica, Arial, sans-serif


5.2 To help build the horizontal navigation, refer to the code from Listamatic
http://css.maxdesign.com.au/listamatic/horizontal03.htm

background-color: #209a9b;
hover color: #999


5.3 Define the width, float and any padding for content div and rightcol div

#content {
width: 660px;
float: left;
padding-bottom: 20px;
}

#rightcol {
width: 300px;
float: left;
}


5.4 Add additional CSS properties to complete the page

Add font properties and padding to:

#content h1
#content h2
#content p
#rightcol h2
#rightcol h3
#rightcol p
footer p
footer a

One thought on “HTML5 Two Column Tutorial”

  1. tutorialsplane says:

    This Blog Helpful For Me !!!! Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *