Home - Assignments - Getting a Web Page Indexed by an Internet Search Engine - Phase Four

In this phase you will be adding level-three headers and formatting them by putting a line in your style sheet. You will then create a new division in your web page. Within that new division you will add an "unordered" (unnumbered) list. Links to your colleagues' web pages will then be incorporated into that list.

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 previous phases, 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_bk3.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 Level-Three Headers to Your Web Page

At the end of phase 3 the body of the html coding for your web page looked like this (with your color and character name):

<body>

<h2>Galadriel's LIS 694 Experiment Page </h2>

<div class="plum_box">

<p>
Aloha!
</p>
<p>
This web page is part of an experiment being undertaken by the students in the LIS 694 course entitled "Seminar on Information Communication Policy Issues." In this experiment students will create similar web pages that link to the pages created by other students. Each web page will include metadata in the form of Dublin Core meta tags. Effects on indexing by search engines will be observed.
</p>

</div>

</body>

Use your arrow key to place your cursor immediately below your level-two header. Add a level-three header with the heading "purpose" as seen below.

<body>

<h2>Galadriel's LIS 694 Experiment Page </h2>

<h3>Purpose</h3>

<div class="plum_box">

<p>
Aloha!
</p>
<p>
This web page is part of an experiment being undertaken by the students in the LIS 694 course entitled "Seminar on Information Communication Policy Issues." In this experiment students will create similar web pages that link to the pages created by other students. Each web page will include metadata in the form of Dublin Core meta tags. Effects on indexing by search engines will be observed.
</p>

</div>

</body>

Now add another level-three header with the word "Links" below your ending div tag, as seen below.

<body>

<h2>Galadriel's LIS 694 Experiment Page </h2>

<h3>Purpose</h3>

<div class="plum_box">

<p>
Aloha!
</p>
<p>
This web page is part of an experiment being undertaken by the students in the LIS 694 course entitled "Seminar on Information Communication Policy Issues." In this experiment students will create similar web pages that link to the pages created by other students. Each web page will include metadata in the form of Dublin Core meta tags. Effects on indexing by search engines will be observed.
</p>

</div>

<h3>Links</h3>

</body>

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. You should see both of your level-three headers.

Step Six: Format Your Level-Three Headers Using Your Style Sheet

Now use your arrow key to move up into your style sheet, located in the head portion of your document. At the end of phase 3 your style sheet looked like this:

<style type="text/css">

body { background-color : #FFCCFF ;
font-family : Verdana, Arial, sans-serif;}

h2 { color : DarkMagenta ;
background-color : white ;
text-align : center ;
padding : 10px ; }

div.plum_box { background-color : plum ;
border : solid 2px Purple ;
padding-left : 20px ; padding-right : 20px ;
font-weight : bold ; }

</style>

Pick a color for your level-three header. Be sure to pick a color that contrasts with your background color and distinguishes it from your level-two header. You can use a named color or a hexadecimal code for a color.

Use your arrow key to place your cursor below the rule formatting your level-two header. Add the following text, substituting your color:

h3 { color : DarkViolet ; }

Your style sheet should now look like this (with your colors instead of mine):

<style type="text/css">

body { background-color : #FFCCFF ;
font-family : Verdana, Arial, sans-serif;}

h2 { color : DarkMagenta ;
background-color : white ;
text-align : center ;
padding : 10px ; }

h3 { color : DarkViolet ; }

div.plum_box { background-color : plum ;
border : solid 2px Purple ;
padding-left : 20px ; padding-right : 20px ;
font-weight : bold ; }

</style>

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. Both of your level-three headers should have changed color.

Step Seven: Add a New Division to Your Web Page

Now add a new division to your web page. To do this you need to move your cursor back down into the body portion of your document.

Place your cursor beneath the level-three header that says "Links." Add another set of beginning and ending div tags, using the same class name as you did for your previous division.

<div class="plum_box">

<div>

<body>

<h2>Galadriel's LIS 694 Experiment Page </h2>

<h3>Purpose</h3>

<div class="plum_box">

<p>
Aloha!
</p>
<p>
This web page is part of an experiment being undertaken by the students in the LIS 694 course entitled "Seminar on Information Communication Policy Issues." In this experiment students will create similar web pages that link to the pages created by other students. Each web page will include metadata in the form of Dublin Core meta tags. Effects on indexing by search engines will be observed.
</p>

</div>

<h3>Links</h3>

<div class="plum_box">

</div>

</body>

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

Step Eight: Add an Unordered List

You're going to be adding links to your colleagues' web pages. However, in order for them to be formatted nicely you are going to add them as elements of a list. In this step you will create the coding for the list.

In order to do create an unordered list we start by adding the beginning and ending "unordered list" tags. The unordered list tags will give us a bulleted list rather than numbering each line.

Between your newly-added div tags type the following:

<ul>

</ul>

Your second division should now look like this:

<h3>Links</h3>

<div class="plum_box">

<ul>

</ul>

</div>

Now add a list element. Each list element is enclosed within beginning and ending list tags. Type:

<li>
x
</li>

You'll be substituting a link to a web site for the x in a moment. This area of your code should now look like this:

<h3>Links</h3>

<div class="plum_box">

<ul>

<li>
x
</li>


</ul>

</div>

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. You should see something like this:

Here's a hint that will save you time. Add a bunch of these list tags before you continue. This will make your life much easier.

<h3>Links</h3>

<div class="plum_box">

<ul>

<li>
x
</li>

<li>
x
</li>


<li>
x
</li>


<li>
x
</li>


<li>
x
</li>


<li>
x
</li>


<li>
x
</li>


</ul>

</div>

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. You should now see a bunch of bullets, each followed by an x.

Step Nine: Add Links to Your List

In this step you will start adding links to your list. First you will link to the Galadriel page created by your instructor. Then you will use that as a pattern in creating links to your colleagues' web pages.

Use your arrow key to place your cursor immediately to the left of the first x.

To create a link we need beginning and ending anchor tags. The beginning anchor tag must include the address of the destination for the link. Between the anchor tags is placed the text that will constitute the link.

Immediately to the left of the x type the following:

<a href="">

Now use your arrow key to move your cursor immediately to the right of the x. To the right of the x type:

</a>

Your code should look something like this.

<div class="plum_box">

<ul>

<li>
<a href="">x</a>
</li>

At this point we have our anchor tags but we don't have anyplace to go. To give the destination use your arrow key to place your cursor between the quotation marks. Type the following:

http://www2.hawaii.edu/~donnab/infocomm/galadriel_experiment.html

Your code should look something like this.

<div class="plum_box">

<ul>

<li>
<a href="http://www2.hawaii.edu/~donnab/infocomm/galadriel_experiment.html">x</a>
</li>

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. At this point your first x, when clicked, should take you to the Galadriel page.

In the library world we prefer to give more informative links than just "x." So let's give our user a more informative link. Place your cursor immediately to the right of the x. Backspace to remove the x. Now type:

Visit Galadriel's LIS 694 Experiment Page

Your code should look something like this.

<div class="plum_box">

<ul>

<li>
<a href="http://www2.hawaii.edu/~donnab/infocomm/galadriel_experiment.html">Visit Galadriel's LIS 694 Experiment Page</a>
</li>

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. Now clicking on your newly added text should take you to the linked page.

Your page should look something like this:

Now, following the above pattern, replace each x in your list with a link to a colleague's web page. By now you should have received the URLs via the course listserv.

Step Ten: Inform Your Instructor and Your Classmates

When you have finished adding your links to your colleagues' web pages send an e-mail to your instructor (donnab@hawaii.edu) and to the course listserv (lis694-infocomm-l) letting us know that your colorful page is ready to be viewed!


Click here to return to the main course page.