Lesson 9 - Layout and backgrounds in HTML

HTML and CSS First website 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

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
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

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

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, Floating content in HTML, 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.


 

Download

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

 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
2 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 College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Activities (10)

 

 

Comments
Display older comments (31)

Avatar
Patrik Valkovic:9/29/2016 12:23

Nějaký koment

 
Reply 9/29/2016 12:23
Avatar
David Capka
ICT.social team
Avatar
Reply 9/29/2016 12:25
You can walk through a storm and feel the wind but you know you are not the wind.
Avatar
David Capka
ICT.social team
Avatar
Reply 9/29/2016 12:26
You can walk through a storm and feel the wind but you know you are not the wind.
Avatar
Replies to David Capka
Patrik Valkovic:9/29/2016 12:27

Reply from Kowal

 
Reply 9/29/2016 12:27
Avatar
Aniceth Alphonce:23. March 17:10

i haven't get you well on how to make those sub pages and on how to arrange them Mr David

 
Reply 23. March 17:10
Avatar
David Capka
ICT.social team
Avatar
Replies to Aniceth Alphonce
David Capka:24. March 12:17

If you miss anything, you can always download the archive under each article. Your subpages are just HTML files. You make them by copying some other and changing the content. You link them using the a tag.

Reply 24. March 12:17
You can walk through a storm and feel the wind but you know you are not the wind.
Avatar
saviour
Member
Avatar
saviour:8. April 15:49

i am trying to apply code for the background colour in style.css but it is not working. Here is the sample of my code: background: url ("photo.png"). Is it wrong?

 
Reply 8. April 15:49
Avatar
David Capka
ICT.social team
Avatar
Replies to saviour
David Capka:8. April 16:50

Isn't the file in a subdirectory? (images/... or something like this?) Also the filename extension can mismatch.

Reply 8. April 16:50
You can walk through a storm and feel the wind but you know you are not the wind.
Avatar
Ardouin Best Saint Jean:9. July 8:47

<!DOCTYPE.html>

<html>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Ardouin's life</title>

<head>

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

</header>

<section>
<p>Welcome to my first site,still learning how to script, getting better each time</p>
<p class="center"><img src="images/AR­DOUIN.jpg" alt="My picture" /></p>

<p>My name is Ardouin Saint Jean and i'm 20 years old, i went to school in the united states </p>
<p>it's been four years since i'haven't been doing a thing only walking, around the streets. </p>
<p>My main hobby right now n on will be making program still learning at ICT.SOCIAL!</p>

</section>

</article>

</body>

</html>

 
Reply 9. July 8:47
Avatar
IT Man
Member
Avatar
Replies to Ardouin Best Saint Jean
IT Man:9. July 9:03

Please, check my comment in the previous article, you made similar mistakes. :)

Reply 9. July 9:03
Don't be silly, smile!
To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

10 messages from 41 displayed. Show all