- About HyperText Markup Language
- Structure in an HTML Document
- Images, Links and Other Tags
- Sample HTML Document
- HTML References
- Resources on the Web
About HyperText Markup Languagetagsbrowser
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
Structure in an HTML Document
<HEAD><TITLE>This is the title</title>
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
Some Headline Here</H1>. The
H1 tag makes the text
as large as possible. We could also use
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:
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:
Sample HTML Document
<HEAD><TITLE>This goes on the window bar</TITLE></HEAD>
<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
This would appear as:
This is an HTML Sampler
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
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/
The Common Gateway Interface: http://hoohoo.ncsa.uiuc.edu/cgi/
Yahoo's List of CGI Resources: http://www.yahoo.com/Computers_and_Internet/
Yahoo's List of Perl Script Resources: http://www.yahoo.com/Computers_and_Internet/
Yahoo's List of PERL Resources: http://www.yahoo.com/Computers_and_Internet/Programming_Languages/Perl/
PERL Manual On-Line (Technical): http://www.ai.mit.edu/!info/perl.info/!!first