1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make a website layout easily?

Discussion in 'HTML & Website Design' started by Md.Saddam Hossain, Oct 27, 2013.

  1. #1
    Hi Everybody,

    How can I make a layout easily? I usually use below this method for creating a layout with : header logo, menu, content & sidebar and footer. I want to know about HTML5 layout. Please share your technique and thoughts.

    Thanks!

    <html>
        <head>
            <title> This is a title</title>
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
            <div class="wrapper">
                <div class="header">
                    <div class="logo">
                        <img src="#">
                    </div> <!-- logo div END -->
                    <div class="nevigate_menu">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Home</a></li>
                        </ul>
                    </div> <!-- Nevigate_menu div END -->
                </div> <!-- Header div END -->
                <div class="content">
                    <div class="left_content">
                        <p>This is a Paragraph content.</p>
                    </div> <!-- Left_content div END -->
                    <div class="right_content">
                        <h2>Sidebar</h2>
                        <ul>
                            <li><a href="#">Archives (1)</a></li>
                            <li><a href="#">Archives (1)</a></li>
                            <li><a href="#">Archives (1)</a></li>
                            <li><a href="#">Archives (1)</a></li>
                        </ul>
                    </div> <!-- Right_content div END -->
                </div> <!-- content div END -->
                <div class="footer">
                    <p>All Right Reserved &copy;</p>
                </div> <!-- footer div End -->
            </div> <!-- wrapper div End -->
        </body>
    </html>
    Code (markup):
     
    Md.Saddam Hossain, Oct 27, 2013 IP
  2. WebPageMistakes

    WebPageMistakes Active Member

    Messages:
    91
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    60
    #2
    Here is a Document Outlines article from HTML5 Doctor: html5doctor.com/outlines/ You can also Google html5 document structure.
     
    WebPageMistakes, Oct 28, 2013 IP
  3. barbi

    barbi Active Member

    Messages:
    160
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    55
    #3
    Check out bootstrap html5 base templates. These have a lot of small examples that can help you understand the various components of html5.

    http://getbootstrap.com/2.3.2/getting-started.html#examples
     
    barbi, Nov 1, 2013 IP