In Lesson One you used the basic tags to make a simple web page. In this lesson you will begin to assign attributes to tags. Attributes make the tags more specific. Many tags have several attributes to choose from - such as color, width, height, alignment, etc.
Lesson Two covers:
- Changing the background color of a page.
- Using an image as a page background.
- Centering.
- Making text bold.
Begin by opening the file page01.html that you created in Lesson One. It should look something like what you see below (the proper tag order). If not, then make it so before you continue.
<HTML>
<HEAD><TITLE>My First Web Page</TITLE></HEAD>
<BODY>
Everything I want to say on my page is right here.
</BODY>
</HTML>
That is the basic web page. Now you will edit it to spruce it up. Before you do, duplicate the page01.html file by using SAVE AS. (SAVE AS is usually listed under the drop down FILE menu.) Rename it to page02.html.
By using SAVE AS and renaming it, you preserve page01.html as it is. You should do this for each page for each consecutive lesson. Do this in case you make some major error or just want to go back a step.
Working with page02.html, change the TITLE text to My Second Web Page.
Section 1 - PAGE COLOR
The BODY tags open and close your page content. To change the background of the entire page you add an attribute to the opening <BODY> tag as follows:
<BODY BGCOLOR="#00FFFF">
What determines the color in that attribute is the value 00FFFF, which in this case would make the page light blue. To see how this value is determined, see Web Color Picker and Color Converter from the Main Menu.
If you do not specify a background color for your web page, the default may be grey or white. So just to be sure, it is a good idea to specify the background as white - unless of course you want some other color.
<BODY BGCOLOR="#FFFFFF"> makes it white.
Section 2 - PAGE BACKGROUND IMAGE
You are not limited to only background colors. Instead, you can tell the browser to use an image for the background. So, you need a background image for this lesson.
Go my example page02.htm by clicking here to get the image you will use for this tutorial. A new browser window will open. Simply close it when you are done with this lesson.
To use that image as the background on your page02.htm file, change the <BODY> tag to:
<BODY BACKGROUND="blueback.jpg">
The BGCOLOR and BACKGROUND attributes can also be used to change the color or background in specific parts of a web page which we will get to in the lesson on creating Tables.
Hopefully you noticed more than the background on my page02.htm sample page. If not go back and look. Some of the type is CENTERED at the top of the page, some of it is BOLD.
Section 3 - CENTER and BOLD
To center text (and other elements on your page) you surround it with the open and close CENTER tags, shown in this example:
