Get up to 80 % extra points for free! More info:

Lesson 9 - Layout and backgrounds in HTML

In the previous lesson, The class selector and styling text in CSS, we introduced you to basic text styling. In today's lesson, we're going to start creating our page's layout.

Page layout

I'm sure you are aware that websites have a specific layout for their elements. Back in the old days, frames were used to create layouts. However, since then, frames have been completely removed from HTML. Meaning that they are not valid, and we will not be using them.

Most websites have a header with some sort of a navigational system in it or under it. Then, under that, would be an article with its content and finally, a footer. The navigational part of the page used to be a vertical menu with links, as a column on the left-hand side. Later, it was moved below the head and set up as a horizontal menu. It was most definitely a good idea to put it there. It's always a good idea to add a sidebar the right as well. Like we did here at ICT.social! This kind of layout is sometimes referred to as Web 2.0.

Every page on a website has to have the same layout, i.e. a header, a navigational section, and a footer. Subpages differ only by the article content. To create a layout, we insert elements representing different parts of the website in the HTML document and then style them using CSS (so that they are where we want them to be).

Positioning isn't the strongest part of CSS, so we'll have to deal with with its low points :) As a motivational incentive, here's what your website is going to look like after a couple of more lessons:

Finished layout in HTML and CSS - Make Your First Website, Step by Step!

Create a new layout.html file, set up the standard HTML structure, and link it to our style.css:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" type="text/css" />
        <title>HoBi's portfolio</title>
    </head>

    <body>

    </body>
</html>

Article

We'll start with the simplest part, which is the area representing an article (the blue spot in the picture above).

In HTML, we insert articles into the paired <article> tag. Before, <div> elements were used to do things of the sort, but doing so was wrong which is why they're no longer used to set up articles.

Insert an <article> tag into the website body. Also, we will split the article's content into two parts - header and section. To do that, we use the <header> and <section> tags. The header is the head of a part of an HTML content and shouldn't be mistaken with the document's head (the head of the HTML page itself is not visible). A header usually contains the article's title(s). The section is the part of the article where the actual content is. We could add a footer to the article using the <footer> tag where the publication date and article rating might be. However, our personal website won't need that sort of feature.

Your HTML body code should now look like this:

<article>
    <header>
    </header>

    <section>
    </section>
</article>

Add a first-level heading to the <header> part. Then, in the <section> part, add the content you wrote for the index.html page since we need to test it out on some content:

<article>
    <header>
        <h1>About me</h1>
    </header>

    <section>
        <p>Welcome to my first site. I'm still learning how to script, but I think I'm getting good at it.</p>
        <p class="center"><img src="images/avatar.png" alt="HoBi the programmer" /></p>

        <p>My name is Jack Bittner and I'm 20 years old. I go to school in the United States.           </p>
            <p>I like to read and sometimes, mainly in summer, play sports.</p>
            <p>My main hobby, which I eventually plan on making a full career, is <strong>programming</strong>!</p>

    </section>
</article>

Background

Now, set the background for the article. The background will be a blue image with what we call "noise" (which is very popular at the moment). Basically, what we're adding is an image with a base color and a transparent layer with grey-scale noise over it. As a result, you get a sharp and non-intrusive look. As you can see, it's the little details that make a design good. Lots of small details result in beautiful web designs.

We'll have the noise be generated. As I did with the icon database, I will give you an online tool for generating noise images, you can find it at the following address: http://www.noisetexturegenerator.com/. Play with it a little, download your masterpiece by clicking the download button, and save it as background.png in your "images" folder.

My generated noise looks like this:

Background noise - Make Your First Website, Step by Step!
Background

We set background of an article using the background property in style.css:

background: url('images/background.png');

Notice the URL function, which is used to add images from a specific location. You should now see something like this:

Article background in HTML - Make Your First Website, Step by Step!

We should always keep in mind that the background image may not load properly or may take a while. As a quick fix, we will also add blue background color in case the image doesn't load. Another similar problematic scenario would be if we used white text on a blue background and the background wouldn't load for some reason. There, what you would have is white text on a white background with no chance of reading it. This is why we always define both image and colors for page backgrounds.

We specify the color simple after the background image. Background is a shorthand property, just like a font, that allows us to add both a background image and color. In this case, we will specify both, but know that you are able to set a single type of background when using the "Background" property.

background: url('images/background.png') #009aca;

I'm sure you noticed that the h1 heading in the article is a bit smaller than the rest of our first-level headings. Mainly, it is because we haven't to edited its style yet. Let's go ahead and do just that (you could also change its color if you want):

h1 {
    font-size: 2em;
    font-weight: normal;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 1px #0a294b;
}

Also, make sure you remove h1 from the selector with the other headings.

We have gone over all of the properties above except for font-weight, which specifies whether the text should be bold or normal. Headings are bold by default. In this case, leaving it bold wouldn't look very good. Which is why we have set the value to "normal" (if you want it to be bold set the value to "bold").

Styling headings of the HTML layout - Make Your First Website, Step by Step!

Soon, we will have the heading move towards the left and the article to the right. For no purpose other than elegant design. In the next lesson, Solved tasks for HTML and CSS lessons 6-9, we'll go over the basics of positioning and learn how to stack elements next to and under one another. As always, the code we worked on today can be downloaded in the attachment below.

In the following exercise, Solved tasks for HTML and CSS lessons 6-9, we're gonna practice our knowledge from previous lessons.


 

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.

Download

By downloading the following file, you agree to the license terms

Downloaded 81x (76.61 kB)
Application includes source codes in language HTML

 

Previous article
The class selector and styling text in CSS
All articles in this section
Make Your First Website, Step by Step!
Skip article
(not recommended)
Solved tasks for HTML and CSS lessons 6-9
Article has been written for you by David Capka Hartinger
Avatar
User rating:
6 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn university David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.
Activities