Creating a basic web page layout with HTML and CSS

Web Design with HTML & CSS

🕑 This lesson will take about 10 minutes

In this lesson, we 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:

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

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, and 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 and CSS code for the web page with a horizontal navigation menu. The CSS external stylesheet is called theme.css.

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 HTML and CSS code:

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.

Next lesson: Parent and child elements in CSS