Description

In this exercise you will add formatting, a table, and a hypertext link to the test file you created in Exercise 2 and modified in Exercise 3.

Overview

There are seven basic phases to this exercise:

  1. Log onto UHUNIX using the "secure shell client" utility of SSH.
  2. Change to your public_html directory.
  3. Open your test file using Pico.
  4. Add formatting tags, a table, and a hypertext link, saving as you go.
  5. View your test file to confirm that your assignment has been done correctly.
  6. Close your file and exit Pico.
  7. Send an e-mail to your instructor to say that you have completed the assignment.
Step 1: Log onto UHUNIX using ssh

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

When connected to your ISP, just as you did in previous exercises, use the "secure shell client" utility of SSH to log onto uhunix.hawaii.edu.

Step 2: Move into your public_html directory

Use the "change directory" command to move into your public_html directory:

cd public_html

At this point you may wish to use the instructions in Exercise 3 to make a back-up copy of your test file.

Step 3: Open your test_file for editing

As you did in Exercise 3, use pico to open your test file.

The syntax of the command to open your file and edit it with pico is:

pico [your file name]

(Substitute the name of your file for [your file name].)

For example, if you named your file test_file.html you would type:

pico test_file.html.

Step 4: Add headers to your document

Let's add some formatting tags to change the look of your document. First, let's add some headers.

Headers come in different sizes. Although individual users can change the way headers display in their browsers, usually the size of the header is inversely proportional to the header type number. In other words, the largest header is:

Header H1

The next size down is:

Header H2

The next size down is:

Header H3

And so on.

Headers are created by surrounding the text of your header with a pair of header tags. For example, to create an H1 header we use:

<H1> Text of header </H1>


Let's add some headers to your document:

Between the beginning and ending BODY tags in your document type the following:

<H1>Humongous Header 1</H1>
<H2>Hugely Popular Header 2</H2>
<H3>Hardly a Header 3</H3>

After you have inputted your headers, while holding down the Ctrl key hit o (the letter "o") to save the change to your file without exiting the text editor.

View your file using a browser. If you already had your file on the screen, you will need to hit the Refresh button.

Step 5: Add a table to your document

Tables are useful for arranging data on a Web page. Tables are built using the <TABLE> tag. This is a paired tag so the beginning and ending of our table is demarcated by:

<TABLE>
</TABLE>

To give our table borders we add the border attribute and designate the thickness of our border within our <TABLE> tag:

<TABLE BORDER=7>
</TABLE>

We can stretch our table horizontally across the page by adding a width attribute to our <TABLE> tag:

<TABLE BORDER=7 WIDTH=100%>
</TABLE>

Within the <TABLE> tags we build our table row by row using <TR> ("table row") tags. These are also paired tags.

Within each row we build our cells from left to right using our <TD> ("table data") tags. These are also paired tags.

Let's build the following table in your document:

Peace Love
Harmony Compassion

 

Between the beginning and ending BODY tags in your document type the following:

<TABLE WIDTH=100% BORDER=7>

<TR>
<TD>Peace</TD>
<TD>Love</TD>
</TR>

<TR>
<TD>Harmony</TD>
<TD>Compassion</TD>
</TR>

</TABLE>

After you have inputted the above, while holding down the Ctrl key hit o (the letter "o") to save the change to your file without exiting the text editor.

View your file using a browser. You will need to hit the Refresh button.

Step 6: Add a style sheet to your document

Let's add some color to your document. We'll do that using a Cascading Stylesheet. Adding a stylesheet allows us to change the attributes of a number of elements in our Web page at once. For example, we can center all of our headers or turn them a different color, change the look of the paragraphs in our document, and so forth.

There are different types of stylesheets. An "External style sheet" is a separate file that can be used to format multiple Web pages. An "Internal style sheet" (inside the <head> tag) is used to format a single Web page. (If you are viewing this document online you can select "Page source" from the View menu of your browser to see an internal stylesheet.) An "Inline style" (inside an HTML element) is used to format only a portion of a Web page. In this exercise you will create an Internal stylesheet.

Between the beginning and ending HEAD tags (not your header tags) at the top of your document type the following:

<STYLE type="text/css">
BODY { background-color: #FFDDFF }
H1,H2,H3 { color: #9900AA }
</STYLE>

After you have inputted the above, while holding down the Ctrl key hit o (the letter o) to save the change to your file without exiting the text editor.

View your file using a browser. You will need to hit the Refresh button. Notice the changes in color?

Step 7: Add a hypertext link

Hypertext links allow us to create an extensive information infrastructure on the World Wide Web. Creating a hypertext link is actually fairly easy. You encase your link text with anchor tags. The beginning anchor tag includes the destination of the link.

In this step you add a hypertext that will take your viewer to the American Library Association website. Your link, when added to your document, will look like this:

Click here to visit the ALA website.

Between the beginning and ending BODY tags of your document type the following:

<a href="http://ala.org">Click here to visit the ALA website.</a>

After you have inputted the above, while holding down the Ctrl key hit o (the letter o) to save the change to your file without exiting the text editor.

View your file using a browser. You will need to hit the Refresh button. Click on your link to see if your link works correctly.

Step 8: Proofread your document

At each stage you have been reviewing your document. Pause now to take a look at your complete document, checking to see that there are no stray codes, typographical errors, etc.

Step 9: Save your file and exit Pico

To close your file and exit Pico, while holding down the Ctrl key hit x. When asked if you would like to save your file say "yes" to make sure that all of your changes have been saved.

When you have saved your file and exited Pico you can safely Disconnect from UHUNIX.

Step 10: Send an e-mail to your instructor

As before, send an e-mail to your instructor (donnab@hawaii.edu) to let her know that you have completed Exercise 4.



Click here to return to the Exercises page.

Click here to return to Assignments page.

Click here to return to main LIS 670 Web page.