Hello, world!

Layouts HTML

The HTML Tutorial provides examples on how to build a easy but functioning layout for your webpage by applying tables, multiple columns, and applying layout div and span.



HTML Layouts

Frequently, websites show content in multiple columns in their layout.
They appear like a magazine or newspaper.
HTML layout is very simple but allows you to build a better looking website.

Website Layout Via HTML5

Different parts of a web page in HTML5:
header - Identifies a header for a document or a section
nav - Identifies a container for navigation links
section - Identifies a section in a document
article - Identifies an independent self-contained article
aside - Identifies content aside from the content (like a sidebar)
footer - Identifies a footer for a document or a section
details - Identifies further details
summary - Identifies a heading for the details element

HTML Layout - Via Tables

Application of HTML <table> tag is the most basic and popular method for attaining advanced layouts in HTML.
These tables are placed in column or row for each main section, wherein you can develop these rows and colums to achieve good layouts .

HTML code example html layout - via tables:

<table width="100%" border="0">
  <tr>
    <td colspan="2" bgcolor="blue">
      <h1>Web Page Main title</h1>
    </td>
  </tr>
  <tr valign="top">
    <td bgcolor="#aab" width="50">
      <b>Main Menu</b><br />
      About Us<br />
      News<br />
      Contact...
    </td>
    <td bgcolor="green" width="100" height="200">
        How to create HTML Layout via Tables
    </td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="blue">
      <center>
      Copyright © 2015 ny.pe
      </center>
    </td>
  </tr>
</table>

HTML output html layout - via tables:

Web Page Main title

Main Menu
About Us
News
Contact...
How to create HTML Layout via Tables
Copyright 2015 ny.pe


HTML Layouts - Via DIV, SPAN

The <div> and <span> element are block level element that can be used in HTML layouts.
The <div> tag for grouping HTML element while the <span> tag for grouping element at an inline level.

HTML code example html layouts - via div, span:

<div style="width:100%">
  <div style="background-color:#b2dcd4; width:100%">
      <h1>Web Page Main title</h1>
  </div>
  <div style="background-color:#cfcfcf; height:200px;width:100px;float:left;">
      <div><b>Menu</b></div>
      About<br />
      News<br />
      Contact...
  </div>
  <div style="background-color:#4a4a4a; height:200px;width:450px;float:left;">
    <p>How to create HTML Layouts - Via DIV and SPAN</p>
  </div>
  <div style="background-color:#cfcfcf; height:200px;width:100px;float:right;">
      <div><b>Site Map</b></div>
      About<br />
      News<br />
      Contact...
  </div>
  <div style="background-color:#b2dcd4;clear:both">
  <center>
      Copyright © 2015 ny.pe
  </center>
  </div>
</div>


HTML output html layouts - via div, span:

Web Page Main title

Menu
About
News
Contact...

How to create HTML Layouts - Via DIV and SPAN

Site Map
About
News
Contact...
Copyright 2015 ny.pe


Multiple Columns Layout - Via Tables

There are various methods to create a multi column layout.
Websites can display content in multiple columns and you can design it the way you want it.

HTML code example multiple columns layout - via tables:

<table width="100%" border="0">
  <tr valign="top">
    <td bgcolor="#aa2" width="20%">
      <b>Main</b><br />
      About<br />
      News<br />
      Contact...
    </td>
    <td bgcolor="#b5dcb3" height="200" width="60%">
        How to create Multiple Columns Layout - Via Tables
    </td>
    <td bgcolor="#aa2" width="20%">
      <b>Site Map</b><br />
      About<br />
      News<br />
      Contact...
    </td>
   </tr>
<table>

HTML output multiple columns layout - via tables:

Main
About
News
Contact...
How to create Multiple Columns Layout - Via Tables Site Map
About
News
Contact...