If you have been through the exercises already, you may want to go directly to the sections on Web Production Resources, Searching for Information or How to Get Started at UH.
Spend a few minutes looking at the file butler.html and then return to this page. Elements of this file include images, links to resources, internal transfer of control, and text (including changes in font size, font type, font color, and indented text -- lists).
Web resources are produced in HTML (HyperText Markup Language). For any HTML file you view with Netscape, or any other Internet browser, you can look at the underlying set of "commands or tags" which control what you are seeing.
Load butler.html again. In Netscape select View (from the top menu) and then select Document Source. A copy of the underlying HTML code will appear on the screen and a copy of the file will be on the desktop. From Netscape, select Open File from the File menu. Click on the copy of butler.html that is on your desktop -- Netscape can read and display HTML files on your machine! This makes preparation of new material much easier as you will not need to have your material on a server until you are satistifed with the first draft.
Look at the first three lines in butler.html
The first three lines define the document.
<html>
<head><title>Exercise1.html</title></head>
<body bgcolor=#ffffff>
There are other commands which control features not used in this document. As you progress with understanding HTML, these commands will be introduced. All of these commands should appear at the top of the document. At the end of the document HTML should be turned off (</html>).
HTML consists of a number of commands called "tags". In the file butler.html there are a number of "tags" which start with < and end with >.
Switch back and forth between this document and the script for butler.html. Find the a tag in butler.html and see how it appears on the screen when you view butler.html
<p> means start a new paragraph (skips a line) and <br>means to insert a line break (does not skip a line). HTML is not case sensitive so <p> and <P> are equivalent.
Most of the other HTML tags are turned on and then turned off (/ turns off tags).
<b> is the tag to make the following text bold. The command </b> turns off the bold command. If you forget to turn off the tag the remainder of the text will be in bold. <i> turns on italics and </i> turns italics off. Look for examples of the bold tag in the butler.html file. Compare what is in the file with what appears on the screen.
<h1> causes the text that follows to be printed in bold and in a large size. </h1> turns off the heading command.
<h1>This is a h1 heading</h1> appears as follows:
<h3>This is a h3 Heading</h3> appears as:
<h6>This is a h6 Heading</h6> prints it so small that I can hardly read it.
Sizes
Types
and Colors
You can change the font size with the command <font size = +1>. This is font size +1. The initial font size is set in your browser (see Options). The +1 increases the font size by 1 unit.
<font size=+2> changes the size of the font from +1 to +2. and <font size=+0> changes it from + 2 to +0.
<font face="geneva"> changes the font type to geneva and </font face> turns off the change in font face.
<font color="orange"> changes the font color to orange. <b><font color="orange"></b> changes it to a bold orange
<HR size=10> draws a "horizontal line" with width = 10. Like <p> (new paragraph) and <br> (line break), <hr> is not turned off.
You can produce several kinds of lists:
Research Interests:
<ul>
will appear with bullets:
Research Interests
or
Research Interests:
<ol>
uses numbers (1, 2, .....)
Research Interests
Horizontal Lines
Lists
<li> Data Analysis
<li>Mineralogy
</ul>
<li> Data Analysis
<li>Mineralogy
</ol>
Images
Note that there are some images:<img src="butler.gif">
where the name of the image file is butler.gif. Be consistent in labeling files. Although some server software (like MACHTTP) is very forgiving, a UNIX server is not and is truly user surly. Mariposa, the UH Internet server, is a unix machine and is somewhat fussy. If the file is butler.gif but you refer to it in a document as butler.Gif you will get the dreaded file not found on this server message.
Building links to other Internet sites is a very powerful feature of HTML. A link to the UH Home page looks like:
<a href="http://www.uh.edu/home.html"> UH Home Page </a>.
The tag <a ...........> is called an anchor. Note that the anchor is turned off with </a>. Any text which appears between <a .... > and </a> is a "clickable command" (UH Home Page in the example given above). Netscape allows the user to define the colors of these clickable commands in Options. You can specify a link never followed (on the machine you are using) as one color and a link which has been followed as another. Look under Options on the main menu for General Preferences.
Point at the clickable text. Double clicking with the pointer will transfer control to the address (URL) given in the command. www.uh.edu/home.html is the URL - Uniform Resource Locator. The address is www.uh.edu and the file is home.html
A special type of anchor is a command which allows the reader to send an e-mail message to the producer of the document or any individual whose e-mail address is built into the command.
<a href="mailto:jbutler@uh.edu"> Send E-mail</a>
The text "Send E-mail" is highlighted and is a "clickable command".
You may design a Table of Contents for your page and allow the reader to select which portion he/she wishes to examine. A marker can be inserted in the document at a place where you want someone to be able to transfer. The following command inserts a "marker" in your text.
<a href = "html.html#marker">Go To marker</a>
The file you are reading is html.html. This is an internal transfer of control. You can also transfer from one file to a marker in another file by specifying the file name and the marker. Note that any word could substitute for marker.
Many of you will have text that you want to put on the Internet. The <pre> and </pre> commands allow you to insert pre formatted text into an HTML document.
<pre>
This command means that the following text will be printed on the screen as is. You may have to do some editing but it is a quick way to get started. Note that special features like bold do not survive the transfer but you can add the appropriate html tags to bring back those features. </pre> turns off the pre formatting feature.
The following text was pasted into this html document from a survey prepared in Mac Write Pro.
College_____________________ Department _____________________ Processing Graduate Student Admission Applications 1. Does your department (circle correct response): 1) indicate on printed material that your office is to receive the initial application or 2) indicate on printed material that the initial application should be returned to the Office of Graduate Admissions? 2. Does your department (circle correct response): 1) send all completed applications to the Office of Graduate Admissions (those accepted and those rejected) or 2) do you only forward applications from students that you accept into your graduate program?
This is a good way to take existing electronic material and get it into a form nearly ready for distribution via the Internet.
So far, you have been downloading files from the University server. Netscape allows you to develop materials without having access to a server.
Select Exercise 1
Point the cursor at the picture and hold down on the "clicker" until a menu appears on the screen. Save a copy of the picture on your desk top.
From View select Document Source.
Under File there is an Open File command. If you click on the file exercise1.html on your desk top you will see the file on your screen.
Think of the implications. With Document Source you can download any file from the Internet and with the point and click you can download any image!
You will have to move back and forth from these instructions to the file exercise1.html on your desk top and back to these instructions. Once you make changes to the file you will need to save it before you open it again with Netscape.
Open the exercise1.html file that is on your desk top. Find the command that displays the image. Place <center> in front of the command and </center> behind it. Save the changes and open the file from Netscape.
Change the image command as shown below (you can copy the line(s) from the screen and paste them into the file):
<img align = right src="nsm.gif">
Now make the following change:
<img border = 4 align = right src="nsm.gif">
Now make the following change:
<img height = 200 width = 200 border = 4 align = right src="nsm.gif">
Note that there is a limit to expansion!
You can put a fame (actually a table) around an image using the following commands: (copy the following 5 lines and paste them into the document - delete the line with the existing image command.
<center><table border = 3>
<tr>
<td><img src="nsm.gif"></td></tr>
</table></center>
<p>
In this example a table with one element is produced. The image is displayed in that element.
You can add a link to the UH Home Page:
<a href="http://www.uh.edu">GO TO THE UH HOME PAGE </a>
Commands are executed from the top down. If you paste this line above the image command, the link to the UH Home Page will occur before the picture of our leaders.
Now for some creative work. Substitute up to 6 numbers or letters for the ffffff in the <body bgcolor> line (keep the " "). Reload the file again using Netscape. I like the "bright white"background but you can choose your favorite color and probably make a page that no one can read! Hint. Try "Glenn" and then try "William".
Making Data Tables
The following commands set up a more extensive table.
<Table Border=3 cellpadding= 3 cellspacing=3 width="100%">
<TR>
<th>Subject</th> <th> University</th><th>Course</th>
</tr>
<tr><td> <b>Geology and the Internet</b></td><td></td></tr>
<tr> <td> </td> <td>Eastern Illinois</td> <td> <a href="http://oldsci.eiu.edu/geology/jorstad/InterNet.html">Exploring the Internet </a> </td> </tr>
<tr> <td> </td> <td>UC Santa Barbara</td> <td> <a href="http://oceanography.geol.ucsb.edu/Multimedia/Index.html">Multimedia in Science Education </a> </td> </tr>
</table>
This table appears as follows:
| Subject | University | Course |
|---|---|---|
| Geology and the Internet | ||
| Eastern Illinois | Exploring the Internet | |
| U California @ Santa Barbara | Multimedia in Science Education |
Spend some time looking at the parts in the table commands. <tr> turns on the new row command and </tr> indicates the end of a row. <th> turns on the column label command and </th> turns it off. Note that there are three columns in this table : Subject, University, and Course and there are three sets of <th> and </th>. The command <td> indicates that an element of the table follows the tag and </td> indicates that the element has been completed.
Copy the table tags into exercise1.html. Experiment with the values in the border, cell padding and cell spacing commands. A good way to build up an understanding of HTML tags is to experiment.
You now know enough to be dangerous but there are other topics that you will want to learn about -- including , frames, cgi scripts, java script, java applets., etc. -- but start small and think big.
Software
I prefer to develop HTML documents with a simple text editor like Simple Text or BBEdit for the Mac. BBEdit allows you to "search and change". If you use your word processor to prepare material be aware that the TEXT version may not be fully compatible with HTML but you can make necessary changes with a text editor. View the material and make changes as needed.
Commercial programs that make preparation easier (???) are available but I have not tried them. Virginia Commenwealth University has developed a web course in a box which looks interesting -- especially for those that want to get up and running now!
The Internet itself is the best reference for using the Internet and designing pages. The following links will help you to get started.
Return To Start or continue scrolling.
An Electronic Guide To The Internet
Is There Intelligent Life Elsewhere?
Return To Start or continue scrolling.
Someone once noted that using the Internet is like trying to drink from a firehose. There are a number of "search engines" which you can use to try and locate specific information. I have found that the best way to learn about the characteristics of these engines is to try them out! Be different and read the accompanying descriptions of each engine.
Several of my favorites are listed below. Pick one and try and locate the information needed to answer the questions that follow. In fact, try a couple of these and see if they locate the same resources.
An Internet Scavenger Hunt will give you the chance to experiment with locating Internet resources.
Searching For Information
alta vista
lycos
webcrawler.com
Return To Start or continue scrolling.
Once you have decided that you would like to produce Internet-based resources for your classes, the first thing to do is to stop reading and try. Use the small number of tags presented in these short exercises as a starting point. Work with the open file command on your browser and don't worry about mounting the files on a server until you have something you are satisfied with. When you run into a problem, use the resources given above.
An incomplete list of UH faculty who have course-related materials on the Internet should be consulted. Most, if not all of these individuals, enjoy what they are doing and you should feel free to contact them for ideas. Additional information on faculty using the Internet has been prepared by Cynthia Freeland and Mike Walters.
Information about the UH Web Server and the Users Guide should be consulted when you are ready to get an account.
Links to other universities will give you a sense of how electronic organizations can work to everyone's advantage.
Return To The UH Moles Home Page
Since October 5, 1996