One of the least used areas of web design is the use of background colors to help the viewer understand the layout of the web pages. Imagine you have an online retail store with dozens of products in different categories on your Home page. Or imagine you have a news website with dozens of news articles in different categories on your Home page. In both cases and many more, using different background colors can help separate products or articles in one category from products or articles in the next category. In this lesson, we will discuss how to add more color to your web pages.

Here is an example of the use of background colors to divide and organize content on a web page.

Recall from a previous lesson, we learned how to use the style attribute to add color to heading and paragraph elements. To make the text of a paragraph blue, we inserted the attribute into the opening paragraph tag like this: <p style=”color: blue;”> This paragraph text is colored blue.</p>

We then provided several other color options such as green, red and orange. However, there is a more precise way to define thousands of color options using a 6 digit coding system called the Hexadecimal Color Code.

Originally, there were no images on web pages. Just a lot of text. Then in 1992, Tim Bernes Lee placed the first image on the internet. It was a band made up of staff members. Here is a copy of that now famous image:

Images are in some ways even more important than links for your website. This is because many people (more than half of your viewers) are visual learners. They learn more from images than from reading text. Your viewers will learn more and be more likely to recommend your website to others if you make an effort to include several images on every web page. Most of the web pages on my educational websites have an average of ten or more images per web page.

Some courses mistakenly discourage the use of images. They argue that placing many images on your web page will slow down the loading speed. This is true if you fail to compress or reduce the file size of your images before adding them to your website. However, as long as you keep the file size of each image under 100KB, you should be able to have 10 or more images on a page and still have it load in under one second – assuming your viewers have a reasonable high speed internet connection.

Steps to Add an Image to Your Home Page
Before we add an image to our home page, we first need to optimize or reduce the file size of the image and then place the image in our images folder. Copy any image to a Writer document. Then right click on the image and click Compress. Then click OK.

Then right click again on the image and click Save. Then navigate to your website root folder and open your images folder. Name the image my_first_image and click save. The image by default will be saved as a JPG file.

Note that the file size is only 23.7 KB. Now add a new line to our index.html file and type “Here is a copy of the first image ever placed on the internet.”

In our last lesson, we introduced simple HTML elements like headings and paragraph tags. In this lesson, you will learn how to customize the appearance of heading text and paragraph text using style attributes.

The goals of this lesson:

1. Learning parts of an HTML attribute

2. Learning the following 5 attribute Properties and Values: Font Color, Font Size, Font Weight, Font Family, Text Align.

An HTML attribute is a way to improve the appearance of the content on our web pages. In this lesson, we will describe HTML elements that have one or more attributes attached to them. HTML Attributes are used to modify HTML elements. We will use the Style Attribute to customize the appearance of the text in our headings and paragraphs.

What happens to the appearance of elements if you do not use attributes to modify them? Attributes are usually optional because browsers have their own preset automatic attributes they will apply to define the appearance of elements. But the style applied by the browser is can be improved. For example, at the end of the last lesson, we created three heading elements and three paragraph elements.

This looks pretty boring. You website will look much more interesting if you can change the color and size of your elements to make it look like this:

In the above example, we used the Bluefish editor to add the style attribute to various elements in order to change the font-color, font-size, font-weight and font-family of these elements. Here is what the above web page looks like in our Bluefish editor.

The goals for today’s lesson are to:

1. Create an HTML root folder.

2. Understand a few HTML terms.

3. Create your first web page with a Text Editor.

Use your File Manager to Create Your Website Root Folder
The first step in building any website is to create a website root folder. A website root folder is the folder that holds all of the documents used to make your website. We are going to do that now. Open Your File Manager and create a folder called My First Website. There are two ways you can create a new folder with your file manager. The first way is to go to your file manager top menu and click File, Create New Folder:

This will place a folder in your file manager called Untitled Folder.

In the last lesson, we used a Text Editor to create a web page. In this lesson, we will create a web page using the Bluefish Editor.

Using Bluefish to make a web page
A long time ago, people used to use HTML and a simple text editor to create web pages- just like you just did. Writing HTML with a text editor takes a lot of time because each opening and closing tag has to be typed in manually. Because it takes a lot of time and we want to make learning HTML easier, we have a better way to do things. We will use an open source code editor called Bluefish.

Bluefish adds the HTML tags for us and allows us to quickly view our progress while at the same time helping us to learn HTML. With Bluefish we don’t have to actually type in the opening and closing brackets. <YAY!>
You do not need a license to download and run Bluefish. If you have a Windows or Apple computer, you can download Bluefish from the Bluefish download page: http://bluefish.openoffice.nl/download.html

If you have a Linux Mint computer, just open the Software Manager and type Bluefish in the Search Box. Then click on Bluefish and click INSTALL. Either way when you open Bluefish, you will see this Editor screen.

The Bluefish Editor Screen

This screen looks complicated– even intimidating with all of its options. But most of these options are rarely used.

Because we want to focus on the workspace, we will hide the Side Panel, Status Bar and Snippets menu. These can all be re-opened with a click of a button if and when we need them. This will create a much simpler interface.

In the last section, we introduced the Bluefish Editor. In this article, we will use the Bluefish Editor to add Heading and Paragraph tags to a web page. But first, we will take a closer look at the anatomy of an HTML tag.

Parts of a Simple HTML Element
The Bluefish Editor comes with a Tag tool that will automatically insert the correct tag syntax as you type in new lines on your web page documents. We will look at how this tag tool works in a moment. However, it is useful to first have a basic understanding of HTML tags. HTML tags come in pairs and tend to look like the following: <tagname>Content</tagname>

Note the slanted forward slash in the end tag or closing tag.

Note that there is a slight difference between the terms “HTML element” and “HTML tag.” An HTML element has a pair of tags and includes the content between the tags. Here is an example of an HTML element: <p>This is my first paragraph</p>

The Two Most Important HTML Elements
There are more than one hundred HTML elements. But most of the time, we will use the following two common elements: Heading Tags and Paragraph Tags.

Heading Tags
Every HTML document should include a heading tag because Search Engines will look for the heading tag in order to categorize the web page. HTML defines six special types of tags for use as headings on a web page. The six are <h1> through <h6>. The intent of these tags is to define divisions and subdivisions in the document, similar to chapters, sections or topics of a book. Headings form the structure of your web page and the structure of your entire website. Here is an example of a pair of heading tags: <h1>This is my first heading!</h1>

Paragraph tags
Paragraphs are containers used to hold our sentences. A paragraph can have a single sentence. Or it can have a bunch of sentences. Every paragraph should begin with an opening <p> tag and end with a closing </p> tag. Here is an example of a pair of paragraph tags:
<p> This is an example of a paragraph that has more than one sentence. This paragraph has two sentences. </p>

Side by Side Editing
Now that we have a better understanding of the Bluefish Editor, we are almost ready to create our first web page. But first, resize the Bluefish Editor so that it only takes up the left half of the screen. Then open your web browser in the right half of the screen. Our goal is to create the document with Bluefish and then view the result with our web browser. Here is what the end result should look like on our desktop:

Four Ways Bluefish Makes Coding Super Easy
In a moment, we will use the Bluefish Editor to make more paragraph and heading tags. But before we do, we should explain that Bluefish offers four different tools to create HTML code. These are a Code Template Tool, a Code Completion Tool, a Code Insertion Tool and a Code Wizard Tool.

Let’s review how each of these tools work.