How to make a website layout easily?

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

0
  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 Well-Known Member

    Messages:
    91
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    110
    #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