Sei sulla pagina 1di 8

Computer Seminar Notes

Introduction HTML
26 April 1995

Jamie Stephens
jamies@math.utexas.edu
Chapter 2: Creating an HTML document 1

This document discusses Web page authoring in the UT-Austin Math Department. The discus-
sion assumes you are familiar with at least one Web browser (e.g. Mosaic).

1 Introduction
The document attempts to answer the following question: "How do I make a personal Web page
in the UT-Austin Math Department?" The current process is simple. Create an HTML document.
Then put it in the right place with the right name. We will discuss each step in turn.

2 Creating an HTML document


HTML is an acronym for HyperText Markup Language. An HTML document is simply a text
le containing HTML expressions. By convention, the name of an HTML le ends with `.html'.

HTML instructions are called elements, and elements are denoted with tags. Like LaTeX,
HTML contains elements for making headings and generating lists. HTML also contains elements
for pointing to other Internet resources. This chapter presents an overview of HTML. For detailed
HTML documentation, look on our Web page, or See Chapter 4 [HTML documentation], page 4.

2.1 Basic HTML syntax


A tag looks like <ElementName [Args]>, where ElementName is the name of the element and
[Args] is a possibly empty list of arguments. The tag <HR> is a good example of a simple tag. It
contains no arguments; it simply draws a horizontal line across the page.

Many elements come in pairs. For example,


<TITLE> This text is the title </TITLE>

This example de nes the title of the HTML document. The name of the closing tag is the name
of the opening tag prepended with a /. Here's an example of a pair of tags, the rst of which takes
an argument.
<A HREF="http://www.somewhere.ca/file.html"> marked text </a>
2 Introduction HTML

This code makes a pointer to http://www.somewhere.ca/file.html. The pointer is labeled


with the phrase "marked text". Someone reading a page with this code can click on "marked text"
to jump to http://www.somewhere.ca/file.html.

HTML tags are not case-sensitive.

2.2 The minimal HTML document


The following HTML text is a good example of a minimal HTML document.
<HEAD>
<TITLE> HTML Example One </TITLE>
<BASE HREF="http://henri.ma.utexas.edu/personals/ExampleOne.html">
</HEAD>
<BODY>
This text is in the body of the HTML document.
</BODY>

First note that an HTML document has a head and a body. The head begins with a <HEAD>
tag, and it ends with a </HEAD> tag. Similarly for the body. Common elements for the head of the
document include TITLE and BASE. The BASE element should point to the document itself.

2.3 The body


The body contains most of a page's contents. The following table lists some of examples of tags
suitable for the body of a page. Note that the elements correspond to logical (rather than physical)
chunks of the document. For complete documentation, see See Chapter 4 [HTML documentation],
page 4.

<H1> A Big Heading </H1>


The Hn element makes a heading. The integer n is either 1, 2, 3, 4, 5, or 6. The larger
the number, the smaller the heading.
<P> Marks the beginning of a new paragraph. You usually don't need to mark the beginning
of a paragraph after a list (see below).
<BR> Denotes a line break. The tag is useful when writing addresses.
<HR> Makes a horizontal line. The line starts at the left hand margin.
Chapter 2: Creating an HTML document 3

<IMG SRC="http://henri.ma.utexas.edu/utseal.gif">
This tag inserts an inline image in the page.
<A HREF="http://henri.ma.utexas.edu/index.html"> Our Home Page </A>
The <A ...> tag makes a hypertext link. The link points to the resource speci-
ed by the HREF argument. The text that the reader sees comes just before the
closing </A>. In this case, the reader can click on "Our Home Page" to view
http://henri.ma.utexas.edu/index.html.

You can also format lists with HTML elements. Lists come in two styles: glossaries and regular
lists. Here's an example of the latter kind:
<UL>
<LI> Item One
<LI> Item Two
<LI> Item Three
</UL>

This code will tell browsers to format a list of three items. The "LI" stands for "List Item" I
guess. Here's an example of a glossary-style list:
<DL>
<DT> Things that are cool
<DL> Fire, anything from or near Seattle, mean dogs, Metallica, money.
<DT> Things that suck
<DD> Axl Rose, things I don't like, orange squares.
</DL>

The text after the <DT> tag must be less than a line long. Text after the <DD> tag can span
many lines. You can nest lists.

Finally, here are a few more elements that change the way browsers present text. Tags for these
elements come in pairs { an opening tag and a closing tag.

 EM { emphasis
 STRONG { stronger emphasis
 CODE { example of typed code
 KBD { example of keyboard input
 VAR { a variable name
 DFN { a de ning instance of a term
 CITE { a citation
4 Introduction HTML

Again, for complete information see See Chapter 4 [HTML documentation], page 4.

2.4 Finding HTML examples


Learning from example is often a good way to learn. Most Web browsers allow you to "source"
an HTML document. Instead of displaying the formatted page, a "sourced" document is the exact
HTML le. So if you nd a page you like, you should be able to use your browser to obtain the
HTML source that generated what you see.

3 Where to put your page


Once you have written your home page, you can put it in the directory `/public/www_personal_pages'.
To make that directory easy to browse, use your name in the name of your le. For example,
`/public/www_personal_pages/Jamie_Stephens.html' is a good lename for me.

If you have written other pages, you should put them in a directory called `public_html' in
your home directory. You can then point to these pages with the URL
http://henri.ma.utexas.edu/~loginname

where loginname is your login name.

If you would like to add non-personal pages or other information to our department's server,
send mail to www@math.utexas.edu. For example, if you want to write a page for number theory,
then www@math.utexas.edu is the contact you want.

4 HTML documentation
The best HTML documentation is written in HTML. The following URL points to excellent
HTML documentation. Use your Web browser of choice to navigate it. The bibliography in this
document contains many pointers to other good sources of HTML documentation.
http://www.utirc.utoronto.ca/HTMLdocs/NewHTML/htmlindex.html
Chapter 4: HTML documentation 5

The following URL points to the Web FAQ. This resource includes lots of pointers about HTML.
http://sunsite.unc.edu/boutell/faq/www_faq.html

Our Web pages include links to both of these resources.


i

Table of Contents
1 Introduction :::::::::::::::::::::::::::::::::::::::::: 1
2 Creating an HTML document ::::::::::::::::::::::: 1
2.1 Basic HTML syntax ::::::::::::::::::::::::::::::::::::::::::::::: 1
2.2 The minimal HTML document :::::::::::::::::::::::::::::::::::: 2
2.3 The body::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 2
2.4 Finding HTML examples :::::::::::::::::::::::::::::::::::::::::: 4
3 Where to put your page ::::::::::::::::::::::::::::: 4
4 HTML documentation ::::::::::::::::::::::::::::::: 4