Reply to Thread
Results 1 to 4 of 4

Thread: HTML Layouts

  1. 03-04-2012, 09:10 AM #1
    mucfbmt's Avatar
    mucfbmt
    mucfbmt is offline Banned
    Join Date
    Mar 2012
    Posts
    185
    Points
    63.380

    HTML Layouts

    HTML Layouts


    Web page layout is very important to make your website look good.
    Design your webpage layout very carefully.
    Website Layouts

    Most websites have put their content in multiple columns (formatted like a magazine or newspaper).
    Multiple columns are created by using <table> or <div> tags. Some CSS are normally also added to position elements, or to create backgrounds or colorful look for the pages.
    HTML Layouts - Using Tables

    The simplest way of creating layouts is by using the HTML <table> tag.
    The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:
    Example

    <html>
    <body>

    <table width="500" border="0">
    <tr>
    <td colspan="2" style="background-color:#FFA500;">
    <h1>Main Title of Web Page</h1>
    </td>
    </tr>

    <tr valign="top">
    <td style="background-color:#FFD700;width:100px;text-align:top;">
    <b>Menu</b><br />
    HTML<br />
    CSS<br />
    JavaScript
    </td>
    <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
    Content goes here</td>
    </tr>

    <tr>
    <td colspan="2" style="background-color:#FFA500;text-align:center;">
    Copyright © 2011 W3Schools.com</td>
    </tr>
    </table>

    </body>
    </html>

    Try it yourself »
    The HTML code above will produce the following result:
    Main Title of Web Page
    Menu
    HTML
    CSS
    JavaScript    		 Content goes here
    Copyright © 2011 W3Schools.com
    Note: Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!
    HTML Layouts - Using Div Elements

    The div element is a block level element used for grouping HTML elements.
    The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:
    Example

    <html>
    <body>

    <div id="container" style="width:500px">

    <div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left; ">
    <b>Menu</b><br />
    HTML<br />
    CSS<br />
    JavaScript</div>

    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left; ">
    Content goes here</div>

    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    Copyright © 2011 W3Schools.com</div>

    </div>

    </body>
    </html>

    Try it yourself »
    The HTML code above will produce the following result:
    Main Title of Web Page

    Menu
    HTML
    CSS
    JavaScript
    Content goes here
    Copyright © 2011 W3Schools.com


    HTML Layout - Useful Tips

    Tip: The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file. To learn more about CSS, study our CSS tutorial.
    Tip: Because advanced layouts take time to create, a quicker option is to use a template. Search Google for free website templates (these are pre-built website layouts you can use and customize).
    HTML Layout Tags

    Tag Description
    <table> Defines a table
    <div> Defines a section in a document


    Reply With Quote Reply With Quote
  2. 08-16-2012, 10:14 AM #2
    Revok's Avatar
    Revok
    Revok is offline Junior Member
    Join Date
    Aug 2012
    Posts
    2
    Points
    5.949
    you are going right way.This is the interesting layout designing in html.
    Reply With Quote Reply With Quote
  3. 09-04-2012, 09:57 AM #3
    Antonybanga's Avatar
    Antonybanga
    Antonybanga is offline Junior Member
    Join Date
    Sep 2012
    Posts
    2
    Points
    5.759
    nice post for new designer.Just continue
    Reply With Quote Reply With Quote
  4. 01-12-2013, 06:24 AM #4
    phyl6058's Avatar
    phyl6058
    phyl6058 is offline Junior Member
    Join Date
    Jan 2013
    Posts
    10
    Points
    43.278

    service ammarF

    Hello
    I appreciated your distinguished manner of writing the p[ost. You have ame it very easy for me to understand.
    Last edited by phyl6058; 01-12-2013 at 06:32 AM.
    Air Conditioners Houston TX
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. HTML Iframes
    By mucfbmt in forum HTML & Website Design
    Replies: 0
    Last Post: 03-04-2012, 09:03 AM
  2. HTML Fonts
    By mucfbmt in forum HTML & Website Design
    Replies: 0
    Last Post: 03-04-2012, 08:56 AM
  3. HTML Paragraphs
    By mucfbmt in forum HTML & Website Design
    Replies: 0
    Last Post: 03-04-2012, 08:53 AM
  4. HTML Headings
    By mucfbmt in forum HTML & Website Design
    Replies: 0
    Last Post: 03-04-2012, 08:53 AM
  5. Html 4.0
    By mucfbmt in forum HTML & Website Design
    Replies: 0
    Last Post: 03-04-2012, 08:43 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Forum Rules