Introduction to HTML

U Bielefeld, LiLi, Gibbon: Text Description with Text Description Languages (HS, Summer 1996)

Introduction to HTML

Ulf Ehlers

Class: Text Construction with Text Description Languages

16 May 1996

Contents of this Document

1 Tags and markup codes - Text description signs
2 The structure of a HTML Document
3 Creating texts with HTML
3.1 Headlines
3.2 Formatting text
3.3 Paragraphs and Line Breaks
3.4 Lists
3.4.1 Unordered Lists
3.4.2 Ordered List
3.4.3 Definition List
3.5 Creating Tables
4 URL s - Reference to other files
5 Links - Text becomes Hypertext
5.1 Linking to Local Documents
5.2 Linking URL s
6 Literature

1. Tags and markup codes - Text description signs

What distinguishes an HTML file from any other plain-text file on the computer is the presence of simple markup codes. These markup codes are entered in plain text and are always surrounded by special markers called tags ( < > ) to set them off fr om the substantive text of the document. All the codes are typed just right into the HTML document and will be visible there. HTML uses the tags as symbols to signal the beginning (the <) and end (the >) of markup instructions. Every opening tag must ha ve a corresponding closing tag.
Most markup codes must appear in pairs. Not only must a markup code start with <some-code>, but also the text to with the markup code applies must end with a corresponding markup code, usually </some-code> to show the en d of the markup instructions. The ending markup code always begins with a forward slash.
This example shows an HTML fragment containing start and end markers for a headline:

`<H2>`This is a Level Two Headline`</H2>`

There is a beginning markup code, <H1> and an ending one, </H1> surrounding the actual text of the headline.
HTML markup codes are not case-sensitive. As far as HTML tags are concerned, <H1> is the same as <h1> and <body> (the code for demarking the body of a HTML document) is the same as <BoDy> or <bOdY>.

2. The structure of a HTML Document

Every HTML Document follows a logical structure that contains at least the following syntax:

<HTML>
<HEAD>
<TITLE>The title of the document</TITLE>
</HEAD>
<BODY> The text of the document...
</BODY>
</HTML>

Every HTML document must begin with the <HTML> tag and end with the </HTML> tag, declaring the document an HTML document.
All HTML documents are devided into two parts - the head and body. The Web browsers need to distinguish between them to interpret the documents properly. After the beginning HTML tag the <HEAD> tag follows. The Head of a document contain s the <TITLE> tag. The title of a document is usually displayed just above the URL or Location box at the top of the browsers window. Of course both, <HEAD> and <TITLE> tags need closing equivalents cont aining a forward slash.

3. Creating texts with HTML

To create texts with HTML we need to know more about the markup tags we need to create headlines, paragraphs, lists and styles.

3.1 Headlines

HTML allows to create headlines of six various sizes: <H1> to <H6> It is important to surround the headline with a start and a stop headline tag:

<H1>Überschrift 1</H1>
<H2>Überschrift 2</H2>
<H3>Überschrift 3</H3>
<H4>Überschrift 4</H4>
<H5>Überschrift 5</H5>
<H6>Überschrift 6</H6>

3.2 Formatting text

There are various possibilities to emphasise single words or whole sentences. To do that "logical tags" and "physical tags" can be used. Logical and physical tags have the same function but usually physical tag are used because not every Web browser is a ble to read logical tags. The table below shows the meaning of those tags that are used for formatting text.

Meaning	Logical Tag	Physical Tag	Example
Bold/Emphasis	`<Strong>`	`<B>`	`<B>`Bold`<B>`
Italic	`<EM>`	`<IT>`	`<IT>`Italic`</IT>`
Typewriter (Code)	`<Code>`	`<TT>`	`<TT>` `Typewriter<TT>`
Citation	`<Cite>`	no phys. tag	`<Cite>`Citation`</Cite>`

3.3 Paragraphs and Line Breaks

Line breaks or blank lines occurring in the source code of a HTML document are not understood by Web browsers. It is necessary to explicitly mark a paragraph or a line break. There are three possible ways to do so:

Break: The tag <br> inserts a line break. It does not need a closing tag!
Paragraph: The <P> tag is interpreted by Web browsers to cause display of a blank line between the matter preceding the tag and that following it. Multiple <P> tags are ignored, so it is not possible to use them to a dd extra blank lines. There is no need for a closing tag.
Horizontal Ruler: <HR> is a tag the inserts a horizontal line running over the whole page. There is no need for a closing tag.

This example shows the function of the above listed tags:

HTML Source Code Shown in Web Browser

HTML Source Code	Shown in Web Browser
For more information, contact `<P>` John Doe `<BR>` 123 Main Street `<BR>` Hamiltown, USA 5555 `<P>` Further text of the document	For more information, conta ct John Doe 123 Main Street Hamiltown, USA 5555 Further text of the document1

For more information, contact
<P>
John Doe <BR>
123 Main Street <BR>
Hamiltown, USA 5555
<P>
Further text of the document

For more information, conta ct

John Doe
123 Main Street
Hamiltown, USA 5555

Further text of the document1

3.4 Lists

In addition to ordinary paragraphs of text it is useful to have HTML documents contain formatted lists of items. HTML defines several types of listings. The most useful are listed below:

Lists

unordered list
ordered list
definition list

3.4.1 Unordered Lists

Unordered lists are also called "bullet lists" because they highlight each item on a list by adding a typographical bullet. (Like the list shown above!)In HTML those bullets are created by using the unordered list markup tag: <UL> togeth er with the generic tag <LI>. The list shown above would contain the following syntax:
<UL>
<LI>unordered list
<LI>ordered list
<LI>definition list
</UL>
The <LI> tag is used in all types of HTML lists.

3.4.2 Ordered List

Instead of bullets it is possible to have the lists numbered. To do that we have to use the HTML ordered list tag: <OL>. Our example would then look like this:

HTML Source Code Shown in Web Browser

<OL>
<LI>unordered List
<LI>ordered List
<LI>definition List
</OL>
unordered list
ordered list
definition list

HTML Source Code	Shown in Web Browser
`<OL>` `<LI>`unordered List `<LI>`ordered List `<LI>`definition List `</OL>`	unordered list ordered list definition list

3.4.3 Definition List

A definition list allows to include a description of each item listed. The HTML tag code><DL> denotes such a list but uses a couple of other tags to format the defining list. Here is an example of a definition list:

HTML Source Code Shown in Web Browser
<H1> HTML List Elements</H1>
<DL>
<DT>The UL Tag
<DD> Creates an unordered list
<DT> The OL Tag
<DD>Crea tes an ordered list
</DL>
HTML List Elements

The "<UL>" tag
Creates an unordered list
The "<OL>" Tag
Creates an ordered list

It is also possible to use one type of list within a different type of list.

HTML Source Code	Shown in Web Browser
`<H1>` HTML List Elements`</H1>` `<DL>` `<DT>`The UL Tag `<DD>` Creates an unordered list `<DT>` The OL Tag `<DD>`Crea tes an ordered list `</DL>`	HTML List Elements The "`<UL>`" tag Creates an unordered list The "`<OL>`" Tag Creates an ordered list

3.5 Creating Tables

Tables are created using the <TABLE> tag. This allows you to define a caption and to differentiate header and data cells. Cells can be merged, e.g. to define a header which spans two columns. A simple table could look like this:

A simple table
Year	Month	Day
1972	June	23rd
1982	October	7th

This table would be defined by the markup:

<table border>
<caption>A simple table</caption>
<th>Year<th>Month<th>Day<tr>
<td>1972<td>June<td>23rd<tr>
<td>1982<td>October<td>7th<tr>
</table>

The "border" attribute acts as a hint to the browser to draw lines enclosing each cell. The <TH>tag (Table Header) precedes header cell text and the <TD> tag (Table Data Cell) precedes data cell text. The <TR> tag (Table Row) is used to separate table rows. By default text is centred in each cell. Header text is shown emphasised.

4. URL s - Reference to other files

A URL is a Uniform Resource Locator. A URL is the complete address of a file located somewhere in the Internet. Mr. Gibbon s page of "Summer classes 1996" in the WWW for example has the following address:
http://coral.lili.uni-bielefeld.de/Classes/Summer96. The Web browser uses this address to locate the "target" page. The following table shows the meaning of each element of a URL:

URL - The WWW Address
Element URL type Name of Server File

Example http: //coral.uni-bielefeld.de /Classes/Summer96

Meaning HyperText Transfer Protocol: The way Web servers and clients communicate over the network. Name of the server on which the file that is addressed is located. Exact location of the file t hat is referred to.

**URL - The WWW Address**
Element	URL type	Name of Server	File
Example	http:	//coral.uni-bielefeld.de	/Classes/Summer96
Meaning	HyperText Transfer Protocol: The way Web servers and clients communicate over the network.	Name of the server on which the file that is addressed is located.	Exact location of the file t hat is referred to.

5. Links - Text becomes Hypertext

Hyperlinks are the coloured/highlighted words and phrases you see in Web documents. When you click them, you jump to other documents on the local Web server or documents or services somewhere out on the Internet, across town or halfway around the world. Hyperlinks are the elements that connect a vast amount of information in a huge electronic net, the World Wide Web.
Hyperlinks are based on so called "anchor" HTML tags. Like all HTML tags, the anchor tags must open with the "<" symbol and close with the ">" symbol.
This is the general syntax:

<A COMMAND="target">Highlighted Text</A>
Lets take this apart and look at it piece by piece. First the tag on the left hand side:

<A COMMAND="target">

There are two parts separated by the "=" sign. The part on the right-hand side is shown inside double quotation marks.
On the left-hand side substitute HREF or NAME for COMMAND. HREF signifies a hyperlink, while NAME signifies a marked place in the document.
The HREF command inside the anchor tag announces that the text on the right-hand side of the "=" sign is the target of a hyperlink.

On the right hand side of the anchor we have:

Highlighted Text</A>
This part of the anchor text specifies the word or phrase to appear highlighted in the HTML document. The closing </A> states the end of the anchor tag. When the HTML document is displayed, the material represented by "Highlighted Text" in the above example appears highlighted, and will be an active hyperlink. Two important types of link s can be distinguished:

Linking to local documents
Linking URL s

5.1 Linking to Local Documents

The simplest hyperlink is one which points to another document on the same computer. Lets say you have two documents in the same directory, named "doc1.html" and "doc2.html". To enable the user to jump from the first to the second document you would have to use the following syntax:

<A Href="doc2.html">Dokument 2</A>
"Document 2" will be highlighted and an active hyperlink.

5.2 Linking URL s

Lets now turn to the hard stuff. This is what makes the World Wide Web become the World Wide Web. We are talking about links that point to documents or files on other systems. The URL has the function of giving the address of the document that we want to jump to. With URL s it does not matter if a document is located on our own system or on a system somewhere around the world. What has been our "target" (address of Mr. Gibbon s Class) in the example above becomes now the URL for the hyperlink:

<A HREF= "http:\\coral.lili.uni-Bielefeld.de/Classes/Summer96/textdes/node4.html"> References</A> If a user would click on "References" he/she would immediately be able to read the References for our text description class.

Back to beginning

6. Literature:

Evans, Tim, "10 Minute Guide to HTML", 1995, Indianapolis, USA
Koch-Steinheimer, Peter, "HTML: Ver/ffentlichen im Internet", 1995, Frankfurt am Main
Online Dokumentationen zu HTML:Stuttgart HTML Crash Course
Hypertext and Discussion

Ul f Ehlers, 15 - 05 - 1996 - mail an mich