Creating a basic webpage layout with HTML and CSS

This tutorial will use what we already know about HTML and CSS from the previous tutorials and introduce a couple of new concepts in order to create a basic layout for a web page.

In this tutorial we will use the following CSS properties that we looked at in the previous tutorial:

      • float property – with the float property, an element can be pushed to the left or right letting other elements on the web page wrap around it. It is often used to arrange images and for div layouts.
      • clear property – with the clear property, we can specify which side or sides of an element that are floating elements aren’t allowed to be. The float property can be set to none, left, right, both, or inherit (inherit from the parent element). Setting the clear property to ‘both’ for a div means that no other floating divs can be to the left or the right of this div.

    For this tutorial, we will make a web page with a header, a navigation menu, the main content section, and a footer. We will start off with a horizontal navigation bar that will look like this:

    withhorizontal

    Then we will change the code to make a vertical navigation sidebar that looks like this:

    withsidebar

    The webpage (regardless of whether the navigation menu is horizontal or vertical) will have four different sections: header, nav, section and footer. These are examples of semantic elements.

    • Semantic elements: Describe their meaning to both the developer and the browser – they clearly define the content they hold. Examples include form, table, article, nav, header, footer, section.
    • Non-semantic elements: Don’t give us any information about the content they hold. Examples include div and span.

    PART 1: Creating a layout with a horizontal navigation menu

    Watch the video below and then scroll down to check out the sample HTML and CSS code.

    Here is the HTML code for the web page. The CSS external stylesheet is called theme.css.

    <html>
        <head>
            <title>Basic layout</title>
            <link rel="stylesheet" href="theme.css" type="text/css"/>
        </head>
    
        <body>
            <header>
                <h1>My website</h1>
            </header>
    
            <nav>
                Link 1 Link 2 Link 3
            </nav>
    
            <section>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>
    
            <footer>
                Copyright 2020 Me
            </footer>
        </body>
    </html>

    And here is the CSS code so far:

    body{
        margin: 0;
        font-family: Arial;
    }
    
    header{
        background-color: #002f6c;
        color: #ffffff;
        width: 100%;
        padding: 1%;
        text-align: center;
    }
    
    nav{
        background-color: #01579b;
        color: #ffffff;
        width: 100%;
        padding: 1%;
    }
    
    section{
        width: 90%;
        min-height: 500px;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    footer{
        width: 100%;
        background-color: #4f83cc;
        color: #ffffff;
        text-align: center;
        padding: 1%
    }

    PART 2: Creating a layout with a vertical navigation menu (sidebar)

    Watch the video below to see how you can change the horizontal menu into a vertical sidebar. You could also try having both a horizontal menu and a sidebar too.

    The HTML code remains the same, only the CSS code has changed. Here is the updated CSS code:

    body{
        margin: 0;
        font-family: Arial;
    }
    
    header{
        background-color: #002f6c;
        color: #ffffff;
        width: 100%;
        padding: 1%;
        text-align: center;
    }
    
    nav{
        background-color: #01579b;
        color: #ffffff;
        width: 15%;
        height: 100%;
        padding: 1%;
        float: left;
    }
    
    section{
        width: 70%;
        min-height: 500px;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        float: left;
    }
    
    footer{
        width: 100%;
        background-color: #4f83cc;
        color: #ffffff;
        text-align: center;
        padding: 1%;
        clear: left;
    }

    Tips:

    • Try adding a logo (image) to your header.
    • Already know how to add background images to a div or body of a web page? Why not use an image for your header div’s background instead? Or try using gradients (something we will look at in a later tutorial).
    • Try adding a sidebar to the right and try using buttons for the menu instead of boring text links.
    • Try using both a horizontal menu and a vertical sidebar at the same time
    • You can also create this theme using divs with classes instead of semantic elements, however semantic elements (eg. header, nav, section, footer) describe the content they contain for both the developed and the browser.