![]() |
![]() |
![]() |
![]() |
A BEGINNER'S GUIDE TO HTML
This is a primer for producing documents in HTML, the markup language
used by the World Wide Web.
* Acronym expansion - the World Wide Web alphabet soup
* The minimal HTML document
+ Titles
+ Headings
+ Paragraphs
* Linking to other documents
+ Uniform Resource Locator (URL)
+ Anchors to specific sections in other documents
+ Anchors to specific sections in the same document
* Additional markup tags
+ Lists
o Unnumbered lists
o Numbered lists
o Descriptive lists
o Nested Lists
+ Preformatted text
+ Extended quotes
+ Character formatting
+ Special characters
* Inline images
* External images
* Troubleshooting
* A longer example
* For more information
Introduction
ACRONYM EXPANSION
_WWW_ World Wide Web
_SGML_
Standard Generalized Markup Language - This is perhaps best be
thought of as a programming language for style sheets.
_DTD_ Document Type Definition - This is a specific implementation of
document description using SGML. One way to think about this
is: Fortran is to a computer program as SGML is to a DTD.
_HTML_
HyperText Markup Language - HTML is a SGML DTD. In practical
terms, HTML is a collection of styles used to define the
various components of a World Wide Web document.
WHAT THIS PRIMER DOESN'T COVER
This primer assumes that you have:
* at least a passing knowledge of how to use NCSA Mosaic or other
WWW browser
* a general understanding of how World Wide Web servers and client
browsers work and
* access to a World Wide Web server for which you would now like to
produce HTML documents
CREATING HTML DOCUMENTS
HTML documents are in plain text format and can be created using any
text editor (e.g., Emacs or vi on Unix machines). A couple of WWW
browsers (tkWWW for X Window System machines and CERN's WWW browser
for the NeXT) do include rudimentary HTML editors in a WYSIWYG
environment, and you may want to try one of them first before delving
into the details of HTML.
_ You can preview documents in progress with NCSA Mosaic (and some
other WWW browers). Open the document using the Open Local option
under the _File_ menu. Use the Filters, Directories, and Files
fields to locate the document or enter the path and name of the
document in the Name of Local Document to Open field. Press __OK__.
If you see edits you want to make, enter them in the source file.
Save the changes. Return to NCSA Mosaic and press the _Reload_
button on the bottom menu. The edits are reflected in the on-screen
display.
_
The minimal HTML document
Here is a barebones example of HTML:
____________________________________________________________________
The simplest HTML example
This is a level one heading
Welcome to the world of HTML.
This is one paragraph.
And this is a second.
____________________________________________________________________
Click here to see the formatted version of the example.
HTML uses tags to tell the World Web viewer how to display the text.
The above example uses
* the
tag (which has a corresponding tag), which
specifies the title of the document,
* the header tag (with corresponding
), and
* the end-of-paragraph tag.
HTML tags consist of a left angular bracket (<), known as a ``less
than'' symbol to mathematicians, followed by some text (called the
directive) and closed by a right angular bracket (>). Tags are usually
paired, e.g.
and
. The ending tag looks just like the
starting tag except a slash (/) precedes the text within the brackets.
In the example, tells the viewer to start formatting a top level
heading;
tells the viewer that the heading is complete.
The primary exception to the pairing rule is the end-of-paragraph
tag. There is no such thing as
.
_Note:_ HTML is _not_ case sensitive. is completely equivalent
to or .
Not all tags are supported by all World Wide Web browsers. If a
browser does not support a tag, it should just ignore it, though.
TITLES
Every HTML document should have a title. A title is generally
displayed separately from the document and is used primarily for
document identification in other contexts (e.g., a WAIS search).
Choose about half a dozen words that describe the document's purpose.
_ In NCSA Mosaic, the Document Title field is at the top of the
screen just below the pulldown menus.
_
The directive for the title tag is . The title generally goes
on the first line of the document.
HEADINGS
HTML has six levels of headings (numbered 1 through 6), with 1 being
the most prominent. Headings are displayed in larger and/or bolder
fonts than the normal body text. The first heading in each document
should be tagged . The syntax of the heading tag is:
Text of heading
where y is a number between 1 and 6 specifying the level of the
heading.
For example, the coding for the ``Headings'' section heading above is
Headings
_Title versus first heading_: In many documents (including this one),
the first heading is identical to the title. For multi-part documents,
the text of the first heading should be suitable for a reader who is
already browsing related information (e.g., a chapter title), while
the title tag should identify the node in a wider context (e.g.,
include both the book title and the chapter title).
PARAGRAPHS
Unlike documents in most word processors, carriage returns and white
space in HTML files aren't significant. Word wrapping can occur at any
point in your source file, and multiple spaces are collapsed into a
single space (except in the field). Notice that in the
barebones example, the first paragraph is coded as
Welcome to HTML.
This is the first paragraph.
In the source file, there is a line break between the sentences. A Web
browser ignores this line break and starts a new paragraph only when
it reaches a
tag.
_Important:_ You must end each paragraph with
. The viewer ignores
any indentations or blank lines in the source text. Without the
tags, the document becomes one large paragraph. HTML relies almost
entirely on the tags for formatting instructions. (The exception is
text tagged as ``preformatted,'' explained below.) For instance, the
following would produce identical output as the first barebones HTML
example:
______________________________________________________________________
__
The simplest HTML example This is a level
one heading
Welcome to the world of HTML. This is one
paragraph.And this is a second.
______________________________________________________________________
__
However, to preserve readability in HTML files, headings should be on
separate lines, and paragraphs should be separated by blank lines.
Linking to other documents
The chief power of HTML comes from its ability to link regions of text
(and also images) to another document (or an image). These regions are
typically highlighted by the browser to indicate that they are
hypertext links.
_ In NCSA Mosaic, hypertext links are in color and underlined by
default. It is possible to modify this in the Options menu as well
as in your .Xdefaults file. _
HTML's single hypertext-related directive is A, which stands for
anchor. To include anchors in your document:
1. Start by opening the anchor with the leading angle bracket and the
anchor directive followed by a space:
3. Enter the text that will serve as the hypertext link in the
current document (i.e., the text that will be in a different color
and/or underlined)
4. Enter the ending anchor tag:
Below is an sample hypertext reference:
Maine
This entry makes ``Maine'' the hyperlink to the document
MaineStats.html.
UNIFORM RESOURCE LOCATOR
A Uniform Resource Locator (URL) refers to the format used by WWW
documents to locate other files. A URL gives the type of resource
being accessed (e.g., gopher, WAIS) and the path of the file. The
format used is:
scheme://host.domain[:port]/path/filename
where scheme is one of:
file a file on your local system, or a file on an anonymous ftp
server
http a file on a World Wide Web server
gopher
a file on a Gopher server
WAIS a file on a WAIS server
The scheme can also be news or telnet, but these are used much less
often than the above. The port number can generally be omitted from
the URL.
For example if you wanted to insert a link to this primer, you would
insert
NCSA's HTML Primer
into your document. This would make the text ``NCSA's HTML Primer'' a
hyperlink leading to this document.
Refer to the Addressing document prepared by CERN for additional
information about URLs. A Beginner's Guide to URLs is located on the
NCSA Mosaic Help menu.
ANCHORS TO SPECIFIC SECTIONS IN OTHER DOCUMENTS
Anchors can also be used to move to a particular section in a
document. Suppose you wish to set a link from document A and a
specific section in document B. First you need to set up what is
called a named anchor in document B. For example, to add an anchor
named ``Jabberwocky" to document B, you would insert
Here's some text.
Now when you create the link in document A, you include not only the
filename, but also the named anchor, separated by a hash mark(``#''):
This is my link.
Now clicking on the word ``link'' in document A would send the reader
directly to the words ``some text'' in document B.
ANCHORS TO SPECIFIC SECTIONS WITHIN THE CURRENT DOCUMENT
The technique is exactly the same except the file name is now omitted.
_Note:_ The NCSA Mosaic _Back_ button does not work for an anchor
within a document because the _Back_ button is designed to move to a
previous document. Move back manually within the document using the
scroll bar. (The _Back_ button will return to the start of a hyperlink
effective with Version 2.0 of NCSA Mosaic.)
Additional markup tags
The above is sufficient to produce simple HTML documents. For more
complex documents, HTML also has tags for several types of lists,
extended quotes, character formatting and other items, all described
below.
LISTS
HTML supports unnumbered, numbered, and descriptive lists. For list
items, no paragraph separator is required. The tags for the items in
the list terminate each list item.
Unnumbered Lists
1. Start with an opening list
tag.
2. Enter the - tag followed by the individual item. (Remember that
no closing tag is needed.)
3. End with a closing list
tag.
Below an example two-item list:
- apples
- bananas
The output is:
* apples
* bananas
Note that different viewers display an unordered list differently. A
viewer might use bullets, filled circles, or dashes to show the items.
Numbered Lists
A numbered list (also called an ordered list, from where the
abbreviation comes) uses the directive to start a list rather
than the directive. The items are tagged using the same - tag
as for a bulleted list. For example:
- oranges
- peaches
- grapes
The list looks like this online:
1. oranges
2. peaches
3. grapes
Descriptive Lists
A description list usually consists of alternating a description title
(abbreviated as dt) and a description description (abbreviated as dd).
The description generally starts on a new line, because the viewer
allows the full line width for the contents of the dt field.
Below is an example description list as included in your source file:
- National Center for Supercomputing Applications
- NCSA is located on the campus of the University
of Illinois at Urbana-Champaign. NCSA is a one of
four member institutions in the National Metacenter for
Computational Science and Engineering.
- Cornell Theory Center
- CTC is located on the campus of Cornell
University in Ithaca, New York. CTC is another member
of the National Metacenter for Computational Science
and Engineering.
The output looks like this:
National Center for Supercomputing Applications
NCSA is located on the campus of the University of Illinois at
Urbana-Champaign. NCSA is a one of four member institutions in
the National Metacenter for Computational Science and
Engineering.
Cornell Theory Center
CTC is located on the campus of Cornell University in Ithaca,
New York. CTC is another member of the National Metacenter for
Computational Science and Engineering.
The - and
- entries can contain multiple paragraphs (separated
by paragraph tags), lists, or other description information.
Nested Lists
Lists can be arbitrarily nested. A list item can itself contain lists.
You can also have a number of paragraphs, each themselves containing
nested lists, in a single list item, and so on.
Remember that the display of an unordered list varies with the viewer.
A browser may not provide successive levels of indentation or modify
the bullets used at each level.
_ NCSA Mosaic indents the second level in the following list and
changes the ``bullet'' from a bullet to a small box.
![]() |
![]() |
![]() |
![]() |
![]() |