Headings
Title versus first heading In many documents, the first heading is identical to the title. For multipart documents, the text of the first heading should be sure displayed in larger and/or bolder fonts than 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 headin at the top of the screen just
below the pulldown menus. In NCSA Mosaic for Macintosh, text tagged
as appears as the window title.
Headings
HTML has six levels of headings, numbered 1 through 6, with 1 being the
most prominent. Headings a 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 the X Window System and Microsoft Windows versions of NCSA
Mosaic, the Document Title field is
Not all tags are supported by all World Wide Web browsers. If a browser
does not support a tag, it just ignores it.
Basic Markup Tags
Title
Every HTML document should have a title. A title is generally displayed
separately from the document and is usedt formatting a level-one heading; </H1>tells the browser that the
heading is complete.
The primary exception to the pairing rule is the <P>tag. There is no
such thing as </P>.
NOTE: HTML is not case sensitive. <title>is equivalent to <TITLE> or
<TiTlE>.
of the tag and closed by a right
angular bracket (>). Tags are usually paired, e.g. <H1> and </H1>. The
ending tag looks just like the starting tag except a slash (/) precedes
the text within the brackets. In the example, <H1> tells the Web browser
to star tag), which specifies
the title of the document
the header tag (and corresponding
)
the
paragraph-separator tag HTML tags consist of a left angle bracket (<), (a ``less than'' symbol to mathematicians), followed by name ML. This is one paragraph.
And this is a second.
Click here to see the formatted version of the example. HTML uses markup tags to tell the Web browser how to display the text. The above example uses: the
This is a level-one heading
Welcome to the world of HTHTML. You can preview a document in progress with NCSA Mosaic (and some other Web browsers). Open it with the Open Local command under the File menu. After you edit the source HTML file, save the changes. Return to NCSA Mosaic and Relputers) include rudimentary HTML editors in a WYSIWYG environment. There are also some WYSIWIG editors available now (e.g. HotMetal for Sun Sparcstations, HTML Edit for Macintoshes). You may wish to try one of them first before delving into the details of ns; space following aor
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 separate paragraphs with . The browser ignores
any indentations or blank lines in the source text. HTML relies almost
entirely on that
comprise a user manual. Links within this group should be relative
links. Links to other documents (perhaps a reference to related
software) should use full path names. This way, if you move the user
manual to a different directory, none of the links wo It's easier to move a group of documents to another location,
because the relative path names will still be valid.
However, use absolute pathnames when linking to documents that are not
directly related. For example, consider a group of documents th are called relative links. You can also use the absolute pathname
of the file if you wish. Pathnames use the standard UNIX syntax.
Relative Links Versus Absolute Pathnames
In general, you should use relative links, because
You have less to type.
ther directories by specifying the
relative pathfrom the current document to the linked document. For
example, a link to a file NJStats.html located in the subdirectory
AtlanticStateswould be:
New Jersey
These: .
Here is an sample hypertext reference:
Maine
This entry makes the word ``Maine'' the hyperlink to the document
MaineStats.html, which is in the same directory as the first document.
You can link to documents in opecify the document that's being pointed to by entering the
parameter HREF="filename" followed by a closing right angle bracket:
>
Enter the text that will serve as the hypertext link in the current
document.
Enter the ending anchor tagthat they are
hypertext links (often shortened to hyperlinks or simply links).
HTML's single hypertext-related tag is , which stands for anchor. To
include an anchor in your document:
Start the anchor with
This is a centered paragraph. This is HTML+, so you can't do it yet.
This change won't effect any documents you write now, and they will
continue to look just tees a , it knows that there must be an implied is a
beginning-of-paragraph marker.
The advantage of this change is that you will be able to specify
formatting options for a paragraph. Fo>becomes a
``container'' of text, just as the text of a level-one heading is
``contained'' within
This is a paragraph in HTML+.
tags).
NCSA Mosaic handles by ending the current paragraph and insert
ing a blank line.
In HTML+, a successor to HTML currently in development, And this is a second.
However, to preserve readability in HTML files, headings should e tags for formatting instructions, and without the
tags, the document becomes one large paragraph. (The exception is text
tagged as ``preformatted,'' which is explained below.) For instance, the
following would produce identical output as the first bauld have to be
updated.
Uniform Resource Locator
The World Wide Web uses Uniform Resource Locators (URLs) to specify the
location of files on other servers. A URL includes the type of resource
being accessed (e.g., gopher, WAIS), the address of the server, and the
location of the file. The syntax 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 af the participants in the
National MetaCenter for Computational Science and Engineering.
paragraph tags.
Numbered Lists
A numbered list (also called an orlists.
Unnumbered Lists
To make an unnumbered list,
Start with an opening list
The result is:
I still have a dream. It is a dream deeply rooted in the American
dream.
I have a dreamscreen. Most browsers generally indent to separate it from
surrounding text.
An example:
I have a dream that one day this nation will rise up and
ou have to
use their escape sequences (<, >, and &, respectively) to
enter these characters. See the section Special Characters for more
information.
Extended Quotations
Use the paragraph tags), lists, or other definition information.
Nested Lists
Lists can be arbitrarily nested, although in practice s'' was tagged as a ``definition.'' The same effect
(formatting those words in italics), could have been achieved via a
different tag that specifies merely ``put these words in italics.''
Physical Versus Logical: Use Logical Styles When Possible
If physical and logical styles produce the same result on the screen,
why are there both? We devolve, for a couple of paragraphs, into the
philosophy of SGML, which can be summed in a Zen-like mantra: ``Trust
your browser.''
In the ideal SGML universe, content islable.
NOTE: Unlike the rest of HTML, the escape sequences are case sensitive.
You cannot, for instance, use < instead of <.
Forced Line Breaks
The paragraph tag with an additional
blank line to more clearly indicate the beginning the new paragraph.)
One use of
...
:
This is a level
one heading
Welcome to the world of HTML. This is one
paragraph.
The output looks like:
NCSA
NCSA, the National Center for Supercomputing Applications, is
located on the campus of the University of Illinois at
Urbana-Champaign. NCSA is one of the participants 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 participant in the National MetaC with special styles. There
are two types of styles: logical and physical. Logical stylestag text
according to its meaning, while physical stylesspecify the specific
appearance of a section. For example, in the preceding sentence, the
words ``logical styleesult is
A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
NOTE: is notused for postal addresses. See ``Forced Line
Breaks'' on page 10 to see how to format postal addresses.
Character Formatting
You can code individual words or sentencesns of contacting the author (e.g., an email address). This is
usually the last item in a file.
For example, the last line of the online version of this guide is
A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
The r that one day this nation will rise up and live out
the true meaning of its creed. We hold these truths to be
self-evident that all men are created equal.
Addresses
The tag is generally used to specify the author of a document
and a mea live out the true meaning of its creed. We hold these truths
to be self-evident that all men are created equal. instead
of
. The items are tagged using the same
list:
The output is:
apples
bananas
The tag.
Enter the
tag.
Below an example two-item ufficient to produce simple HTML documents. For more
complex documents, HTML has tags for several types of lists,
preformatted sections, extended quotations, character formatting, and
other items.
Lists
HTML supports unnumbered, numbered, and definition e same except the filename is omitted.
For example, to link to the Jabberwocky anchor from within the same file
(Document B), use
This is Jabberwocky link from within Document B.
Additional Markup Tags
The preceding is s= "documentB.html#Jabberwocky">link to document B.
Now clicking on the word ``link'' in document A sends the reader
directly to the words ``some text'' in document B.
Links to Specific Sections Within the Current Document
The technique is exactly th anchor named
``Jabberwocky'' to document B, enter
Here's some text
Now when you create the link in document A, include not only the
filename, but also the named anchor, separated by a hash mark (#).
This is my
NCSA's Beginner's Guide to HTML
This would make the text ``NCSA's Beginner's Guide to HTML'' a hyperlink
to thi Gopher server
WAIS
a file on a WAIS server
news
an Usenet newsgroup
telnet
a connection to a Telnet-based service
The port number can generally be omitted. (That means unless someone
tells you otherwise, leave it out.)
For example, to includional MetaCenter
for Computational Science and Engineering.
I still have a dream. It is a dream deeply rooted in the
American dream.
tag to include quotations in a separate block on
the mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
Hyperlinks can be used within
sections. You should avoid using
other HTML tags within
sections, however.
Note that because <, >, and & have special meaning in HTML, y fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
display as
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out ines break in the same locations as in the source HTML file.) This
is useful for program listings. For example, the following lines
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
e:
Michigan
Preformatted Text
Use the tag (which stands for ``preformatted'') to generate text
in a fixed-width font and cause spaces, new lines, and tabs to be
significant. (That is, multiple spaces are displayed as multiple spaces,
and l
The nested list is displayed as
A few New England states:
Vermont
New Hampshire
One Midwestern statyou probably
should limit the nesting to three levels. You can also have a number of
paragraphs, each containing a nested list, in a single list item.
An example nested list:
tag forces a line break with no extra space between lines. (By
contrast, most browsers format
ö
the escape sequence for a lowercase o with an umlaut: #
ñ
the escape sequence for a lowercase n with an tilde: #
È
the escape sequence for an uppercase E with a grave accent: i
A full list of supported characters is avaiu must enter its
escape sequence instead:
<
the escape sequence for <
>
the escape sequence for >
&
the escape sequence for &
"
the escape sequence for "
Additional escape sequences support accented characters. For example:and therefore cannot be used
``as is'' in text. (The angle brackets are used to indicate the
beginning and end of HTML tags, and the ampersand is used to indicate
the beginning of an escape sequence.)
To use one of these characters in an HTML document, yo.
End the passage with .
Special Characters
Escape Sequences
Four characters of the ASCII character set -- the left angle bracket
(<), the right angle bracket (>), the ampersand (&) and the double quote
(") -- have special meaning within HTML c text
typewriter text, e.g. fixed-width font.
Using Character Tags
To apply a character style,
Start with
for snippets of computer code. Displayed in a fixed-width font. (The
HTML tags.
The word ``overlapping'' is contained within both the and tags.
How does the browser format it? You won't know until you look, and
different browsers will likely react differently. In gime movie
.mov
MPEG movie
.mpeg or .mpg
Make sure your intended audience has the necessary viewers. Most UNIX
workstations, for instance, cannot view QuickTime movies.
Troubleshooting
Avoid Overlapping Tags
Consider this snippet of HTML:
than
to remember that level-one headings are 24-point bold Times or whatever.
The same is true for charr in concept to style sheets in many word processors) is
that if you decide to change level-one headings to be 20-point
left-justified Helvetica, all you have to do is change the definition of
the level-one heading in the presentation device (i.e., your Wo divorced from presentation. Thus,
SGML tags a level-one heading as a level-one heading, but does not
specify that the level-one heading should be, for instance, 24-point
bold Times centered on the top of a page. The advantage of this approach
(it's similathe
is in formatting addresses:
National Center for Supercomputing Applications
605 East Springfield Avenue
Champaign, Illinois 61820-5518
Horizontal Rules
The
tag produces a horizontal line the width of the browser window.
In-line Images
Most Web browsers can display in-line images (that is, images next to
text) that are in X Bitmap (XBM) or GIF format.modify the appearance of other tags:
However, avoid embedding other types of HTML element tags. For example,
it is tempting to embed a heading within a list,hin an anchor:
My heading
Although most browsers currently handle this example, it is forbidden by
the official HTML and HTML+ specifications, and will not work with
future browsers.
Character tags eneral, avoid
overlapping tags.
Embed Anchors and Character Tags, But Nothing Else
It is acceptable to embed anchors within another HTML element:
My heading
Do not embed a heading or another HTML element wit>This is an example of overlapping
where UpArrow.gif is the picture of an upward pointing arrow. With NCSA
Mosaic and other graphics-capable viewers, the user sees the up arrow
graphic. With URL>
ALIGN=MIDDLEaligns the text with the center of the image.
Alternate Text for Browsers That Can't Display Images
Some World Wide Web browsers, primarily those that run on VT100
terminals, cannot display images. The ALT option allows you to specify
tgned with the text as shown in
this paragraph.
Add the ALIGN=TOPoption if you want the browser to align adjacent text
with the top of the image as shown in this paragraph. The full in-line
image tag with the top alignment is:
where image_URL is the URL of the image fi in order to make the
font size larger:
A large heading
Although some browsers, such as NCSA Mosaic for the X Window System,
format this construct quite nicely, it is unpredictable (because it is
undefined) what other browsers will do. For compatibility with all
browsers, avoid these kinds of constructs.
What's the difference between embedding a within a Something slightly smaller
within a
This is the end of my example document.
.
