December 20, 2014
Hot Topics:

Creating a Complete Web Page With HTML5

  • December 17, 2011
  • By Tapas Pal
  • Send Email »
  • More Articles »

Introduction

In this article we shall make a web page using the features of HTML5 and CSS. It is assumed that reader is more or less conversant with CSS in general and HTML tags in particular. You do not have to be a professional but you should at least have an idea of what goes where.

First Things First

HTML5 is a basically an enhancement of HTML4. It has almost all the tags of its forefather with some elements termed as deprecated. Deprecation does not mean that they cannot be used in the development, but they are deemed as a caution, as those features will be ultimately removed. This is an emerging technology still in its infancy. The current draft is still under development and we can only surmise what changes will be standardized in the final draft. The draft committee does not yet have a proposal for standardization. So creating web pages in HTML5 right now has a flip side – all current browsers may not support its features, although the most prominent of them are trying hard to keep up in their newest releases.

No doubt the W3C's HTML5 project is quite ambitious and ready to leave a mark on how web pages will be rendered especially in the arena of audio/video streaming, as it is being freed from the bondage of proprietary players like Flash. There is lot of debate on the issue, such as codec standardization for video streaming in a native HTML5 player. Though the dust has not settled yet, it will be worthwhile for developers to learn HTML5 sooner than later. If you are not afraid to try your hand at this new technology, then dive in, as it is said--the best way to learn how to swim is to get wet.

Here I shall create a web page, rather a home page for a fictitious company. I have used the elements of both HTML4 and HTML5 and last but not the least a CSS file for the look and feel of the page. While working with the code in this article I had used Google Chrome and IE9 as the test browser. And for HTML and CSS coding I have used Eclipse. Readers may choose this or any other IDE, as eclipse is not a very good editor for HTML and CSS, but it suits me at least for this project.

There are different approaches followed by developers in designing a web page, which I fondly call "weaving a webpage" rather than designing. So I generally follow the steps mentioned below:

  • Requirement: analyze the content of the page, navigation links, any graphics/images, logo, forms etc.
  • Layout which suits the requirement; tools to use: pen and paper
  • Write basic CSS to create the layout
  • Write HTML
  • Test in a browser

Readers should note that steps are not as linear as they seem to be. Steps 3, 4 and 5 often run simultaneously.

Let's have a glimpse at what we will be up to.

The Beginning and the End

This is the sample layout of our project we start with, and how we reach the end result

Conjoin HTML with CSS

As can be seen in the sample layout block shown below, it contains 6 sections viz. header, main menu, featured and video, form and canvas.

In the CSS code below there is a section called General, here by putting margin parameters value to 0, we remove all the default margin of the HTML page. We also put a background color of the HTML page and apply common font to “Trebuchet MS” throughout the page. Page width is set to 934px and margin to auto. This gives the page a fixed width and positioned centered in the browser window.

Most of the tags are self-explanatory. Reader may refer following link:

http://www.w3schools.com/html5/html5_reference.asp for HTML5 tags.

http://www.w3schools.com/css/default.asp for CSS tags.

CSS of Header Section

@CHARSET "ISO-8859-1";
/*************************** General section *************************/
{
margin: 0 0;
}
html{
background:#f2f4f5;
}
body {    
font-family: "Trebuchet MS";
width: 934px;
margin: 0px auto;
padding: 12px 20px 12px 20px;
}

Header section defines the look and feel of the home page header in this case company name and tagline.

/************************* header style *************************/
header h1 {
font-size: 36px;
margin: 0px;
color: #f3390a;
}
header span {
color: #000000;
}
header h2 {
font-size: 12px;
margin: 0px;
color: #444;
text-transform: uppercase;
}

The navigation section has a background image (which otherwise you can put - background: #000000;). Other <nav> parameters define the look and feel and behavior of the links.
    
nav {
background: #000000 url('images/navbar.jpg');
font-size: 1.143em;
height: 40px;
line-height: 30px;
/*margin: 0px auto 2em auto;*/    
padding: 0px;
text-align: left;
border-radius: 5px;
}
nav ul {
list-style: none;
margin: 0px auto;
width: 800px;
}
nav li {
float: left;
display: inline;
margin: 0px;
}
nav a:link,nav a:visited {
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 1.5em;
text-decoration: none;
}
nav a:hover,nav a:active,nav .active a:link,nav .active a:visited {    
color: #65b0f7;
text-shadow: none;
}

HTML of Header Section

In HTML we define the header section as follows:

    <header>
        <hgroup>
            <h1>
                Company<span>Name</span>
            </h1>
            <h2>you can put here a very nice company tagline</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">About Us</a>
            </li>
            <li><a href="#">Contact Us</a>
            </li>
        </ul>
    </nav>

CSS of Featured section

/**************************** featured section *************************/
#featured{
background: #fff url(images/banner.jpg) no-repeat;
height:320px;
margin: 0px auto;        
border-radius: 10px;
}
#featured h2{
font-size:18px;
padding:20px 20px 20px 20px;
color:#f3390a;
text-shadow: black threeddarkshadow;
text-transform:none;
}
#featured p{
font-size:12px;
padding:20px 20px 20px 20px;
width:65%;
text-align: justify;
color:#000000;
}
#featured div{
font-size:12px;
margin-left:22px;
margin-right:22px;
padding-left:5px;
width:63%;
text-align: justify;
color:#000000;
background:#f67a56;
border-radius:20px;
}
#featured div>p{
font-size:12px;
padding:20px 20px 20px 20px;
width:90%;
text-align: justify;
color:#000000;
}

HTML of Featured Section

<header id="featured">
        <h2>About your company</h2>
        <p>
            <b>You can put here summary of your company details.</b><br />Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis
            nunc vitae libero iaculis elementum. Nullam et justo non sapien
            dapibus blandit nec et leo. Ut ut malesuada tellus.Lorem ipsum dolor
            sit amet, consectetur adipiscing elit
        </p>
        <div>
            <p>
                <b>Highlight points about your company.</b> <br />Lorem ipsum dolor
                sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae
                libero iaculis elementum. Nullam et justo non sapien dapibus blandit
                nec et leo. Ut ut malesuada tellus.Lorem ipsum dolor sit amet,
                consectetur adipiscing elit
            </p>
        </div>
</header>

CSS of Video, Form and Canvas Section

/********************* video/form/canvas section *****/
article{
margin: 0px auto;
background: #ffffff;
border-radius:10px;
padding: 20px;     
}
article>h2{
font-size:18px;
padding:20px 20px 20px 20px;
color:#f3390a;    
text-transform:none;
}
article>section video {     
width: 320px;
height: 240px;
background:#ffffff;
border-radius:5px;
}
article>section>table td{
padding:0px 20px 0px 20px;
font-size:12px;
}
article>section form {    
padding: 10px;
margin-bottom: 30px;
}
article>section label {
font-weight: bold;
font-size: 13px;
}
article>section input {
margin-bottom: 3px;
font-size: 13px;
}
canvas {
margin-left: 70px;
border: 1px solid #888;
background-color: #f67a56;
}

HTML of Video Section

<article>
    <section>
        <header>
            <h2>This is a video section.</h2>
        </header>
        <table>
            <tr>
                <td rowspan="2">
                          <video controls="controls">
                <source src='robotics.webm'
                    type='video/webm; codecs="vp8.0, vorbis"'></source>
                <source src='robotics.ogv'
                    type='video/ogg; codecs="theora, vorbis"'></source>
                <source src='robotics.mp4'
                    type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'></source>
                </video></td>
                <td><h2>This video heading</h2></td>
                </tr>
                <tr>
                    <td><p style="text-align: justify;">Lorem ipsum dolor sit
                             Nullam et justo non sapien dapibus
                            blandit nec et leo. Ut ut malesuada tellus.</p>
                    </td>
                </tr>
            </table>
        </section>
    </article >

HTML of Form and Canvas Section

<article >
    <section>
        <header>
            <h2>This is a feedback form and canvas section. You can put
                some drawings in the canvas area.</h2></header>            
        <form>
            <table>
                <tr>
                <td><label>Name:</label></td>
                <td><input placeholder="Enter your name" autofocus />    </td>
                <td rowspan="6"><canvas id="my_canvas" width="480"    height="320">
                You need a Canvas-compatible browser to view this area.</canvas></td>
                </tr>
                <tr>
                    <td><label>Email:</label></td>
                    <td><input placeholder="Enter your email" />    </td>
                </tr>
                <tr>
                    <td><label>Phone:</label></td>
                    <td><input placeholder="Enter your phone" /></td>
                </tr>
                <tr>
                    <td><label>Callback on:</label></td>
                    <td><input type="datetime" /></td>
                </tr>
                <tr>
                    <td><label>Priority:</label></td>
                    <td><input type="range" min="1" max="5" value="1" />    </td>
                </tr>
                <tr><td><input type="submit" value="Submit" /></td><td></td></tr>
            </table>
        </form>
    </section>
</article >

CSS of Footer Section

/********************** copyright/footer section *********/
footer{
text-align:center;
}

HTML of footer section

<footer >
    <p>&copy; 2009 Company Name. All rights reserved.</p>
</footer >

Putting It All Together in HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 and CSS3 Demo</title>
<link rel="stylesheet" href="style.css" />
<script>
    function loadCanvas() {
        var canvas = document.getElementById('my_canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(245, 160, 150, 0, Math.PI * 2, true);
            ctx.fillStyle = "rgb(255,255,204)";
            ctx.fill();
            ctx.stroke();
            ctx.fillStyle = "black";
            ctx.beginPath();
            ctx.arc(200, 110, 15, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(280, 110, 15, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(240, 170, 20, 4, Math.PI * 2, true);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(240, 190, 60, 0, Math.PI, false);
            ctx.stroke();
        } else {
            document.getElementById('my_canvas').style.display = 'none';
            document.getElementById('no-canvas').style.display = 'block';
        }
    }
</script>
</head>
<body>
    <header>
        <hgroup>
            <h1>
                Company<span>Name</span>
            </h1>
            <h2>you can put here a very nice company tagline</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">About Us</a>
            </li>
            <li><a href="#">Contact Us</a>
            </li>
        </ul>
    </nav>
    <header id="featured">
        <h2>About your company</h2>
        <p>
            <b>You can put here summary of your company details.</b><br />Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis
            nunc vitae libero iaculis elementum. Nullam et justo non sapien
            dapibus blandit nec et leo. Ut ut malesuada tellus.Lorem ipsum dolor
            sit amet, consectetur adipiscing elit
        </p>
        <div>
            <p>
                <b>Highlight points about your company.</b> <br />Lorem ipsum dolor
                sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae
                libero iaculis elementum. Nullam et justo non sapien dapibus blandit
                nec et leo. Ut ut malesuada tellus.Lorem ipsum dolor sit amet,
                consectetur adipiscing elit
            </p>
        </div>
    </header>
    <br />
    <article>
        <section>
            <header>
                <h2>This is a video section.</h2>
            </header>

            <table>
                <tr>
                    <td rowspan="2"><video controls="controls">
                    <source src='robotics.webm'
                    type='video/webm; codecs="vp8.0, vorbis"'></source>
                    <source src='robotics.ogv'
                    type='video/ogg; codecs="theora, vorbis"'></source>
                    <source src='robotics.mp4'
                    type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'></source>
                    </video></td>
                    <td><h2>This video heading</h2></td>
                </tr>
                <tr>
                    <td><p style="text-align: justify;">Lorem ipsum dolor sit
                         Nullam et justo non sapien dapibus
                        blandit nec et leo. Ut ut malesuada tellus.</p>
                    </td>
                </tr>
            </table>
        </section>
    </article>
    <br />
    <article>
        <section>
            <header>
                <h2>This is a feedback form and canvas section. You can put
                    some drawings in the canvas area.</h2></header>            
            <form>
                <table>
                    <tr>
                    <td><label>Name:</label></td>
                    <td><input placeholder="Enter your name" autofocus />    </td>
                    <td rowspan="6"><canvas id="my_canvas" width="480"    height="320">
                    You need a Canvas-compatible browser to view this area. </canvas>
                                </td>
                    </tr>
                    <tr>
                        <td><label>Email:</label></td>
                        <td><input placeholder="Enter your email" />    </td>
                    </tr>
                    <tr>
                        <td><label>Phone:</label></td>
                        <td><input placeholder="Enter your phone" /></td>
                    </tr>
                    <tr>
                        <td><label>Callback on:</label></td>
                        <td><input type="datetime" /></td>
                    </tr>
                    <tr>
                        <td><label>Priority:</label></td>
                        <td><input type="range" min="1" max="5" value="1" />    </td>
                    </tr>
                    <tr><td><input type="submit" value="Submit" /></td><td></td></tr>
                </table>
            </form>
        </section>
    </article>
    <br />
    <footer>
        <p>&copy; 2009 Company Name. All rights reserved.</p>
    </footer>
</body>
</html>

Putting It All Together in CSS

@CHARSET "ISO-8859-1";

/*********************************** General section *************************/
* {
    margin: 0 0;
}
html{
    background:#f2f4f5;
}

body {    
    font-family: "Trebuchet MS";
    width: 934px;
    margin: 0px auto;
    padding: 12px 20px 12px 20px;
}

/*********************************** header style *************************/

header h1 {
    font-size: 36px;
    margin: 0px;
    color: #f3390a;
}

header span {
    color: #000000;
}

header h2 {
    font-size: 12px;
    margin: 0px;
    color: #444;
    text-transform: uppercase;
}

/*********************************** main menu style*****************/

nav {
    background: #000000 url('images/navbar.jpg');
    font-size: 1.143em;
    height: 40px;
    line-height: 30px;
    /*margin: 0px auto 2em auto;*/    
    padding: 0px;
    text-align: left;
    border-radius: 5px;
    /* -moz-border-radius: 5px;
    -webkit-border-radius: 5px; */
}

nav ul {
    list-style: none;
    margin: 0px auto;
    width: 800px;
}

nav li {
    float: left;
    display: inline;
    margin: 0px;
}

nav a:link,nav a:visited {
    color: #fff;
    display: inline-block;
    height: 30px;
    padding: 5px 1.5em;
    text-decoration: none;
}

nav a:hover,nav a:active,nav .active a:link,nav .active a:visited {    
    color: #65b0f7;
    text-shadow: none;
}


/*********************************** featured section *************************/

#featured{
    background: #fff url(images/banner.jpg) no-repeat;
    height:320px;
    margin: 0px auto;        
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
#featured h2{
    font-size:18px;
    padding:20px 20px 20px 20px;
    color:#f3390a;
    text-shadow: black threeddarkshadow;
    text-transform:none;
}
#featured p{
    font-size:12px;
    padding:20px 20px 20px 20px;
    width:65%;
    text-align: justify;
    color:#000000;
}

#featured div{
    font-size:12px;
    margin-left:22px;
    margin-right:22px;
    padding-left:5px;
    width:63%;
    text-align: justify;
    color:#000000;
    background:#f67a56;
    border-radius:20px;
}
#featured div>p{
    font-size:12px;
    padding:20px 20px 20px 20px;
    width:90%;
    text-align: justify;
    color:#000000;
}


/*********************************** video/form/canvas section *************************/
 article{
     margin: 0px auto;
     background: #ffffff;
     border-radius:10px;
     padding: 20px;     
 }
 
 article>h2{
     font-size:18px;
    padding:20px 20px 20px 20px;
    color:#f3390a;    
    text-transform:none;
 }
 article>section video {     
    width: 320px;
    height: 240px;
    background:#ffffff;
    border-radius:5px;
}
article>section>table td{
    padding:0px 20px 0px 20px;
    font-size:12px;
}

article>section form {    
    padding: 10px;
    margin-bottom: 30px;
}

article>section label {
    font-weight: bold;
    font-size: 13px;
}

article>section input {
    margin-bottom: 3px;
    font-size: 13px;
}


canvas {
margin-left: 70px;
border: 1px solid #888;
background-color: #f67a56;
}


/*********************************** copyright/footer section *************************/
footer{
    text-align:center;
}

Conclusion

HTML5 is the next major milestone in the lineage of web development in HTML. Developers can reap immense benefits in their career by learning this early. HTML5 is not just another technology, it is going to stay and leave a firm footprint. Although it is not fully ready, it will make your efforts worthwhile in the long run.


Tags: HTML5, Web development, CSS, Web page, tutorial, creating a complete web page with HTML5

Originally published on http://www.developer.com.


Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel