|
LIS 670 |
|
|
|
LIS 670 |
|
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.
There are seven basic phases to this exercise:
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.
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.
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.
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:
The next size down is:
The next size down is:
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> 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. |
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> 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. |
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"> 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? |
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. |
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.
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.
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.