Layout and background in HTML

In the last lesson, Class Selector and CSS text styling, we showed the basics of text styling. Today in HTML / CSS tutorial we start to do the layout.

Page layout

You know that websites have a certain layout of elements, often called a layout. In the past, so-called frames were used, but they have been removed from HTML, they are not valid and therefore we will not use them.

For most websites, we find the header, inside or below it, the article itself, and the footer at the end. The navigation was in the past in the form of a vertical menu with links in the left column, later moved to a horizontal menu under the heading, it is certainly a good idea to put it right there. It is customary to place the sidebar on the right side of the web, such as here on PHPweb. This layout is sometimes referred to as the Web 2.0 concept.

Each page on the site has this same layout, which includes the header, navigation, and footer. Only the content of the article is different from each other. Layout is created by inserting elements for different parts of the web into HTML and then styling them using CSS so that they are placed as we want.

Positioning is not exactly the strength of CSS, but we're getting through it :) To get you started, after completing the following few articles, we'll drag our website into this form:

Previous (CSS and Class Selector)

Back to Learn HTML and CSS main menu