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

Here are the 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.

In order to put some space above and below the link you will place the link inside a paragraph using beginning and ending paragraph tags.

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

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

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: Adding lists

Lists are useful for organizing information within your text.

There are two types of lists: ordered and unordered. When you create an ordered list the browser will automatically number your list items for you. When you create an unordered list the list items will appear bulleted.

Let's start by creating an ordered list. An ordered list looks like this:

  1. List item
  2. List item
  3. List item
  4. List item
  5. List item

To create an ordered list we start by typing paired beginning and ending ordered list tags. Then we place our list items between these tags. Each list item is encapsulated by list-item tags.

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

<ol>
<li>purple</li>
<li>mauve</li>
<li>pink</li>
<li>green</li>
<li>blue</li>
</ol>

After you have inputted your list, 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.


Now let's create an unordered (bulleted) list:


Beneath your ordered list type following:

<ul>
<li>loving kindness</li>
<li>compassion</li>
<li>empathetic joy</li>
<li>equanimity</li>
</ul>

After you have inputted your new list, 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.


Now, just for fun, let's add a bit of formatting to these lists. To do this you're going to scroll up to the top of your html file and add formatting information for your lists to your stylesheet:


Within your style sheet add a line to format your list items:

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

li { margin-bottom : 5px ; font-size : 24px ; font-weight : bold ; }

     </STYLE>

After you have inputted your formatting, 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.

So, what were we doing in this last step? We added 5 pixels of space below each of our line items in order to spread them apart. We also made the size of the text 24 pixels high and the weight of the text bold-face. All in one step! That is the beauty of a stylesheet. We can format many items with little work.


Optional step:

You can also turn a single word in your list (or anywhere in your web page) a different color by using the span tag with an in-line style sheet. If you would like to try it, do the following:

Scroll back down to your ordered list. Within a line of your list surround a word with the highlighted text:

<li><span style="color : purple ;">purple</span></li>

After you have inputted your formatting, 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 9: 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 10: 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 11: 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.