HTML Layouts

You can layout your web page in a manner that looks more attractive/interactive and user friendly (easy to navigate).

Websites often display content in multiple columns (like a magazine or newspaper) which looks more fancy and interactive.

HTML Layouts

About HTML Layouts

In the tutorial of HTML layout, you will learn how to design or layout your web page that looks more attractive and more interactive. As you know that, everybody wants to visit a web page whose layout is user friendly, in other word whose navigation, web page topic, content, footer, all looks simple.

To attract users, you have to make your web page whose navigation menu, topic name, content or article, and footer looks user friendly.

HTML Layout Using <div> Tag

Here is an example shows how to layout your web page using the div tag.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Layout Example</title>
   <style>
      #header { background-color:red; color:white; text-align:center; padding:10px; }
      #nav { line-height:30px; background-color:silver; height:210px; width:20%;
      float:left; padding:5px; }
      #section { width:80% float:left; padding:10px; }
      #footer { background-color:red; color:white; clear:both; text-align:center;
      padding:5px; }
   </style>
</head>
<body>

<div id="header">
   <h2>HTML Layout</h2>
</div>
<div id="nav">
   HTML Basics<br/>
   HTML Fonts<br/>
   HTML List<br/>
   HTML Links<br/>
   HTML Tables<br/>
   HTML Forms<br/>
   HTML Layout<br/>
</div>
<div id="section">
   <h2>About HTML Layout</h2>
   <p>In the tutorial of HTML layout, you will learn how to design or layout your web page
   that looks more attractive and more interactive. As you know that, everybody wants to visit a
   web page whose layout is user friendly, in other word whose navigation, web page topic, content,
   footer, all looks simple.</p>
</div>
<div id="footer">
   Copyright @ codescracker.com
</div>

</body>
</html>

Here is the sample output produced by the above HTML layout example code:

Website Layout Using HTML5

HTML5 offers new semantic tags that define different parts of a web page as shown in the following figure.

The table given below describes all the tags shown in the above figure.

Tag	Description
<header>	Defines a header for a document or a section
<nav>	Defines a container for navigation links
<section>	Defines a section in a document
<article>	Defines an independent self-contained article
<aside>	Defines content aside from the content (like a sidebar)
<footer>	Defines a footer for a document or a section

Here is an example shows how to layout your web page using new HTML5 semantic tags.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Layout Example</title>
   <style>
      header { background-color:blue; color:white; text-align:center; padding:10px; }
      nav { line-height:30px; background-color:silver; height:210px; width:20%;
      float:left; padding:5px; }
      section { width:80% float:left; padding:10px; }
      footer { background-color:blue; color:white; clear:both; text-align:center;
      padding:5px; }
   </style>
</head>
<body>

<header>
   <h2>HTML Layout</h2>
</header>
<nav>
   HTML Basics<br/>
   HTML Fonts<br/>
   HTML List<br/>
   HTML Links<br/>
   HTML Tables<br/>
   HTML Forms<br/>
   HTML Layout<br/>
</nav>
<section>
   <h2>About HTML Layout</h2>
   <p>In the tutorial of HTML layout, you will learn how to design or layout your web page
   that looks more attractive and more interactive. As you know that, everybody wants to visit a
   web page whose layout is user friendly, in other word whose navigation, web page topic, content,
   footer, all looks simple.</p>
</section>
<footer>
   Copyright @ codescracker.com
</footer>

</body>
</html>

Here is the sample output of the above HTML layout example code:

HTML Layout Using Tables

Here is another example shows how to layout your web page using table.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Layout Example</title>
</head>
<body>
 
<table class="layout_using_table">
<tr>
   <th colspan="2" style="background-color:black;color:white;padding:20px;">HTML Layout</th>
</tr>
<tr>
   <td style="width:20%;background-color:silver;">HTML Basics<br/>HTML Fonts<br/>
   HTML List<br/>HTML Links<br/>HTML Tables<br/>HTML Forms<br/>HTML Layout</td>
   <td style="width:80%;background-color:white;"><h2>About HTML Layout</h2>
   In the tutorial of HTML layout, you will learn how to design or layout your web page
   that looks more attractive and more interactive. As you know that, everybody wants
   to visit a web page whose layout is user friendly, in other word whose navigation,
   web page topic, content, footer, all looks simple.</td>
</tr>
<tr>
   <td colspan="2" style="background-color:black;color:white;text-align:center;
   padding:5px;">Copyright @ codescracker.com</td>
</tr>
</table>

</body>
</html>

The above HTML layout example code will produce the output given below:

HTML Online Test

« Previous Tutorial Next Tutorial »