Scribd Logo
Upload

Welcome to Scribd!

  • HTML Page Layout Using Div Tags

    Uploaded by

    Gurpreet Bansal
    29 views2 pages
    HTML Page Layouts

    Original Title

    HTML Page layout using Div tags

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    HTML Page Layouts

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    29 views2 pages

    HTML Page Layout Using Div Tags

    Uploaded by

    Gurpreet Bansal
    HTML Page Layouts

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    Basic HTML Page layout using Div tags

    The div element is a block level element used for grouping HTML elements. While the div tag is
    a block-level element, the HTML span element is used for grouping elements at an inline level.
    A webpage layout is made of multiple columns. These columns are treated as different sections
    of data. There are two most popular ways to create those columns in html page. One way is
    using <div> tag and another way is using HTML <table> tag.
    Most of the website layout has one common header area where we place website logo or
    tagline (sometimes menu as well). Then we have main content section divided into two or three
    columns. Bottom of the webpage contains a common footer section, where we can place logo,
    copyright statement, menu or some other content.
    In two columns we have one left or right sidebar area and one content area. In three columns
    page design, we have left sidebar area, main content area and then one right sidebar area.

    Creating a HTML page layout using DIV tags

    Let us create a two column layout along with header and footer area using DIV tags.
    1 <!DOCTYPE html>
    2 <html>
    3     <head>
    4         <title>Basic HTML Layout using Div</title>
    5     </head>
    6     <body>
    7         <div style="width:100%">
    8             <div style="background-color:cyan; text-align:center">
    9                This is website tagline
    10             </div>
    11             <div style="background-color:lightgreen; height:400px;
    12 width:30%; float:left;">
    13                 <b>Main Menu</b><br />
    14                 Link 1 <br />
    15                 Link 2 <br />
    16                 Link 3
    17             </div>
    18             <div style="background-color:orange; height:400px; width:70%;
    19 float:left;">
    20                 This is sample content.
                </div>
    21             <div style="background-color:lightblue; clear:both">
    22                 <center>
    23                     Copyright © TutorialsClass.com
    24                 </center>
    25             </div>
    26         </div>
    27     </body>
    </html>

    You might also like