Meloria • Ever Better
Search Tools Main Menu

Learning HTML

Contents

About HyperText Markup Language

tagsbrowser

Many tags come in pairs, with a beginning tag and a closing or ending tag. For example, to make a phrase appear bold, you precede it with <B> and end it with </B>. Tags with a / symbol indicate the end of a section. For example, if you typed:

Only one <B>word</B> will be bold

in a text file, the Web browser would display it like this:

Only one word will be bold

Notice that you never see these tags when viewing pages in Netscape or Lynx. You only see their effect. The text inside tags can be capitalized or lower case or both (<B> is the same as <b>).

Structure in an HTML Document

<HTML></HTML><HEAD></HEAD><TITLE></TITLE>

<HTML>
<HEAD><TITLE>This is the title</title>
</HEAD>
<BODY>
</BODY>
</HTML>

Notice that the different tags do not have to be on different lines or the same line. Spacing does not matter in HTML; four blank lines, one line break, one space, or sixteen spaces all come out looking like one space.

Now we need to fill in the body of the file. The body contains the meat of the page - all the information and images. Usually, the body begins with a headline, so after <BODY> we want to type <H1>Put Some Headline Here</H1>. The H1 tag makes the text as large as possible. We could also use H2 or H3 to make the text slightly smaller.

Images, Links and Other Tags

<IMG SRC="filename.gif" ALT="altnernate text">

You can link from one document to another using the following format: <A HREF="URL">. A stands for anchor; HREF stands for hyperlink reference; URL is the Uniform Resource Locator of the document you are linking to. For example, <A HREF="http://www.rochester.edu/"> links to the University of Rochester home page. You can link to documents in the same directory by simply giving their filename. For example, <A HREF="index.html"> links to the index file in that directory. The text that follows the anchor tag is underlined and "clickable" up to the closing tag, </A>. For example, a link to the UR home page would probably look like this:

<A HREF="http://www.rochester.edu/">University of Rochester</A>

which would appear as:

University of Rochester

Sample HTML Document

 

<HTML>
<HEAD><TITLE>This goes on the window bar</TITLE></HEAD>
<Body>
<CENTER><H1>This is an HTML Sampler</H1></center>

 

<P>Here's some text that will appear normal. Parts of it may be <I>italics</I>. The text will automatically wrap from one line to the next as necessary. Let's start a new paragraph now.</P>

This is some more text, with a link in it to the <A HREF="http://www.rochester.edu">University of Rochester</A>.</P>
<UL>
<LI>This is an unordered list item.
<LI>So is this.
<LI>As is this.
</UL>
<OL>
<LI>This is an ordered list item.
<LI>So is this.
</OL>


</BODY>
</HTML>

This would appear as:

This is an HTML Sampler

 

Here's some text that will appear normal. Parts of it may be italics. The text will automatically wrap from one line to the next as necessary. Let's start a new paragraph now.


This is some more text, with a link in it to the University of Rochester

  • This is an unordered list item.
  • So is this.
  • As is this.
  1. This is an ordered list item.
  2. So is this.

HTML References

There are many, many HTML guides available on the World Wide Web, so I won't try to reinvent the wheel by writing a complete one here. There are also many lists of HTML guides you can refer to, but all of them contain so many guides it is hard to locate the best, most helpful, and most complete. At University IT we recommend A Beginner's Guide to HTML as a very good starting point for beginners. A more complete list of tags and descriptions is presented clearly in the HTML Quick Reference Guide.

It is important to remember that when you are creating Web pages, getting the HTML right is only half the problem. It is just as important to lay out your information logically and clearly. The "look" of your page should not be too busy (it is easy to get carried away with images, backgrounds, and icons). For this reason, it is a good idea to cruise the Web for a while before beginning your actual home page. Decide what you like and dislike about other home pages. Read the University IT style suggestions. Remember that often simpler and shorter is actually better.

When you are in the process of creating your pages, try to look at them on other types of computers. If you usually use a Macintosh, check them out on a PC. Also remember that dial-up modems access pages much slower than computers on the campus network. Many large images make pages painfully slow to load for many people. If you would like someone at University IT to review your pages before making them official, call 275-2811 (Taylor Hall).

Resources on the Web

Writing Forms

HTML Quick Reference: http://www.cc.ukans.edu/info/HTML_quick.html
Carlos' FORMS Tutorial: http://robot0.ge.uiuc.edu/~carlosp/cs317/cft.html
Yahoo's List of Form Resources: http://www.yahoo.com/Computers_and_Internet/ Internet/World_Wide_Web/Programming/Forms/

About CGI

The Common Gateway Interface: http://hoohoo.ncsa.uiuc.edu/cgi/
Yahoo's List of CGI Resources: http://www.yahoo.com/Computers_and_Internet/
Internet/World_Wide_Web/CGI___Common_Gateway_Interface/

PERL

Yahoo's List of Perl Script Resources: http://www.yahoo.com/Computers_and_Internet/
Internet/World_Wide_Web/Programming/Perl_Scripts/
Yahoo's List of PERL Resources: http://www.yahoo.com/Computers_and_Internet/Programming_Languages/Perl/
http://www.yahoo.com/Computers_and_Internet/
Programming_Languages/Perl/
PERL Manual On-Line (Technical): http://www.ai.mit.edu/!info/perl.info/!!first