In this phase you will be adding div tags and a cascading style sheet to your web page. This will allow you to add additional formatting elements such as color.

Step One: Log on to UHUNIX

First establish a connection to your ISP or use a computer with a permanent Internet connection.

As you did in Phase Two, use the SSH Secure Shell Client to log onto UHUNIX.

Step Two: Use the Change Directory Command To Move Into Your Infocomm Subdirectory.

At the % prompt type:
cd public_html/infocomm then press the Enter key.

Notice that you moved down two levels by listing both the public_html directory and the infocomm subdirectory separated by a slash.

Step Three: Create a Back-Up Copy of Your File before Starting to Work

Substituting the name of your file, at the % prompt type:
cp galadriel_experiment.html galadriel_experiment_bk2.html
then press the Enter key.

Use the list command (ls) to verify that your back-up copy was created.

Step Four: Use Pico To Open Your File for Editing

At the % prompt type:
pico galadriel_experiment.html
(Substitute the name of your file for galadriel_experiment.html.)

Step Five: Add Beginning and Ending Div Tags

Div tags are used to delineate a section of the web page. That division can be used for formatting purposes. In this case we are going to use div tags to section off part of the web page. In the process we will assign the division to a particular class. In later steps we will then use our style sheet to format that division.

Before proceeding you will need to pick out a color. Go to the World Wide Web Consortium's list of "Color Names Supported by All Browsers." Pick a background color for your web division. Be careful about your color selection. You do not want to select a color that is too dark as you want to have sufficient contrast between your font color and your background color. Note the official name for your color.

Use your down arrow key to place your cursor above the paragraph tag (<p>) above the word "Aloha!." Substituting the name of your color for "plum" type: <div class="plum_box">

For example, if you were to choose Aqua as the background color for your division you would type: <div class="aqua_box">.

By adding a class attribute you can tell the browser to format only those divisions that are in a particular class. This is especially handy when you create more complex web pages with many divisions.

Now add the ending div tag (</div>) as seen below.

Step Six: Add Beginning and Ending Style Tags

Now let's add a style sheet. A style sheet allows us to format multiple instances of an entity with a single line of code within the style sheet. In a later phase you will be adding another division within your web page. The formatting in the style sheet that you are about to add will automatically be applied to that additional division, as you will give it the same class designation.

A cascading style sheet is encapsulated by beginning and ending style tags. These must be within your head tags. The beginning style tag must include the type, which in this case is "text/css". Add the beginning and ending style tags as seen below.

Hold down the Control key and hit o (Ctrl + o) to save your changes without exiting the file.

Step Seven: Add a Rule to Your Style Sheet

Use your arrow key to move your cursor between the beginning and ending style tags.

Let's start with a non-complex rule to format your level-two header (h2). First, return to the World Wide Web Consortium's list of "Color Names Supported by All Browsers." Pick a color for the text of your header. In this case you should select a color that is fairly dark. Note the official name for your color.

Substituting the color you have chosen for "DarkMagenta," between your style tags type:
h2 { color : DarkMagenta ; }

Hold down the Control key and hit o (Ctrl + o) to save your changes without exiting the file.

Now view your web page using your browser. Refresh the page to see your change. The color of your level-two header should be the one you have chosen.

Step Eight: Add a Rule to Format Your Division

Now let's add some background color to your division. Using your arrow key move your cursor below your first rule.

In order to format a division in a particular class you must add the class to your div tag preceded by a period: div.plum_box (substituting the color you have chosen for the background of your division).

Type the following, substituting the name of the background color you have chosen for the word plum:
div.plum_box { background-color : plum ; }

Hold down the Control key and hit o (Ctrl + o) to save your changes without exiting the file.

Now view your web page using your browser. You will need to refresh the page to see your change. The background color of your division should be the one you have chosen.

Step Nine: Add Additional Formating to Your Division

We can add a colored border around our division, indent it, and make the text bold by simply adding those characteristics to our rule.

Place your cursor before the ending curly bracket of your div.plum_box declaration but after the semi-colon. Type the following, substituting for "Purple " any named color (other than your background color) supported by all browsers for your border color:
border : solid 2px Purple ;
padding-left : 20px ; padding-right : 20px ;
font-weight : bold }

You do not have to put each attribute on a different line. However, I find that it is easier to troubleshoot if I do.

Hint: Double-check to be sure that your entire declaration is within the curly brackets.

Hold down the Control key and hit o (Ctrl + o) to save your changes without exiting the file.

Now view your web page using your browser. You will need to refresh the page to see your change.

Hint: If there is no empty space around the text within your box make sure that there is no space between the 20 and px.

Step Ten: Add Additional Formating to Your Header

We can add a contrasting background, center the text, and add space around the text all in the one rule regarding our level-two header.

Within your h2 formatting rule add the following:
background-color : white ;
text-align : center ;
padding : 10px ;

Hold down the Control key and hit o (Ctrl + o) to save your changes without exiting the file.

Now view your web page using your browser. You will need to refresh the page to see your changes.

Step Eleven: Format the Body of Your Web Page

Pick a background color for the body of your web page. This should be a light color and contrast with the background color you have chosen for your division. You can either use a named color or use a hexidecimal number to define a particular shade. You can find hexadecimal codes for colors at http://www.december.com/html/spec/color.html.

Now add a background color and a font family by typing the following in your style sheet, substituting the name or hexadecimal code for the background color you have chosen:
body { background-color : #FFCCFF ;
font-family : Verdana, Arial, sans-serif; }

Hold down the Control key and hit o (Ctrl + o) to save your changes without exiting the file.

Now view your web page using your browser. You will need to refresh the page to see your change.

Your web page should now look something like this, although with the colors you have chosen.

If your web page looks like the above (but with your color scheme) close your file by holding down the Control key and pressing x (Ctrl + x). If you have made no changes since your last save the file will close and you will be presented with a % prompt. If you have made any changes, the system will ask you if you would like to save. The answer is yes.

When you are presented with the % prompt log out of UHUNIX by typing logout and pressing the Enter key.

Step Twelve: Notify Your Instructor That You Have Finished This Phase

Send an e-mail to your instructor informing her that you have finished this phase of the project.

Click here to return to the Assignments page.

Click here to return to the main course page.