- HTML Basics
- HTML Home
- HTML Basics
- HTML Document Structure
- HTML Data Types
- HTML Attributes
- HTML Fonts
- HTML Headings
- HTML Character Entities
- HTML Horizontal Line
- HTML Line Break
- HTML Paragraph
- HTML Citation Definition
- HTML Quotations
- HTML Comments
- HTML Styles
- HTML Formatting
- HTML CSS
- HTML Tags
- HTML Basic Tags
- HTML All Tags
- HTML Root Tags
- HTML Metadata Tags
- HTML Section Tags
- HTML Head Heading Tags
- HTML Flow Tags
- HTML Phrasing Tags
- HTML Embedded Tags
- HTML Interactive Tags
- HTML Meta Tags
- HTML Texts
- HTML Text Formatting
- HTML Physical Style Text
- HTML Logical Style Text
- HTML Organizing Text
- HTML Arranging Text
- HTML Displaying Lists
- HTML List
- HTML Links Tables
- HTML Links URLs
- HTML Links
- HTML URL Encode
- HTML Tables
- HTML Images Colors
- HTML Images Colors
- HTML Images
- HTML Color Codes
- HTML Canvas
- HTML Backgrounds
- HTML Forms
- HTML Forms
- HTML Form Tag
- HTML Input Tag
- HTML Button Tag
- HTML Multiple-Choice
- HTML Select Tag
- HTML Option Tag
- HTML Optgroup Tag
- HTML Textarea Label
- HTML Fieldset Legend
- HTML Datalist Tag
- HTML Keygen Tag
- HTML Output Tag
- HTML Progress Tag
- HTML Meter Tag
- HTML Submit Form
- HTML enctype Attribute
- HTML action Attribute
- HTML Method Attribute
- HTML Get Method
- HTML Post Method
- HTML Interactive
- HTML Interactive Web
- HTML Details Summary
- HTML Menu Tag
- HTML Command Tag
- HTML KBD Tag
- HTML Time Tag
- HTML Multimedia
- HTML Multimedia
- HTML Multimedia Tags
- HTML Audio Video
- HTML Embedded Multimedia
- HTML EMBED Tag
- HTML OBJECT Tag
- HTML FIGURE FIGCAPTION
- HTML Advance
- HTML Blocks
- HTML Classes
- HTML Iframes
- HTML JavaScript
- HTML Layouts
- HTML Responsive
- HTML Test
- HTML Online Test
- Give Online Test
- All Test List
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.
Copyright @ codescracker.com
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:

« Previous Tutorial Next Tutorial »