First, A Note to All Participants:
What you will see in here is just a quick guideline. I do not cover all the exceptions to the general statements that I make in here. This tutorial's goal is to help you get started. Details of the HTML language can be found in numerous books in bookstores and tutorials on the net covering all terminology, all tags, and all exceptions. With that in mind let's follow the tutorial.
Getting Started
The documents for the World-Wide-Web (WWW, www, WEB, Web, or web) are written in HTML format. HyperText Markup Language (HTML) is a set of markup tags that define the various components of a World-Wide-Web document. What makes an HTML document extremely powerful is its platform-independent characteristics. It does not make a difference, whether you used a PC, a Mac, or a UNIX platform to create the document, and in general, it should not make much of a difference which platform you are using to look at the created document via a specific browser. HTML was invented by Tim Berners-Lee while working at the European Laboratory for Particle Physics in Geneva (known as CERN). In more detailed terms, HTML is an SGML DDT. Standard Generalized Markup Language (SGML) is a standard for describing markup languages, and Document Type Definition (DTD) is the formal specification of a markup language, written using SGML. For those who have used WordPerfect as a word processor, HTML documents look very familiar to the Reveal Code option for a document. There, you would notice that for example a bold letter W had a set of tags around it like this: (bold)W(bold) which would result in showing the letter W as a bold letter. As you will shortly see, that tag is very similar to the way HTML tags work in a document.
Basic Format of an HTML Document
HTML documents are plain-text (also known as ASCII) files that can be created using any text editor such as notepad in Windows 95, and vi, or pico on UNIX machines. You can also use your regular word processors such as WordPerfect, or Word for the creation of the file, but you must be careful when you save them. They must be saved as text files (with line breaks). Notepad does that automatically.

Different portions of an HTML document are marked up with tags to specify specific actions to be taken by your browser. Notice that the document by itself can not display the results of those tags in the document, rather it is a browser that would translate those tags into their appropriate actions.

The tags in an HTML document are contained within "<" and ">" signs. For example, <center>, <ul>, and <h1> are examples of HTML tags.

Majority of tags in an HTML document are double tags, one to indicate the start of area to be affected by the tag and one to denote the end of its affecting area. For example, in the statement "I am very happy" , if I wanted to make the word "very" italic, I would place a tag after the word 'am' and before the word 'very' in the sentence. I would also place an ending tag for italic after the word 'very' and before the word 'happy'. The ending tags are similar to the tag itself, except that they are preceded by a front slash (/) right after the "<:" sign. The result of "I am <i>very</i> happy" would be "I am very happy". An example of a single tag is <br>, or <hr> as opposed to italic tag, for example, that must come in pairs---beginning (<i>) and ending (</i>).

Some tags also have additional required and optional attributes. For example the <hr> tag can have an optional width attribute which might make it look like, <hr width=50%>. Another example is the body tag which may have some optional attributes. So instead of a simple <body> tag, I can have, say

<body bgcolor= #ff0000 text= #000000 link= #00ff00>

Notice that ending tag for body is still </body> regardless of the number of options used in the body tag.

A basic HTML document should contain two sections, the head and the body. When you look at a document through a browser, you only see the parts contained in the body part of the document. The information in the head part of the document is used by the browser to perform certain tasks, including running Java scripts.

The majority of HTML tags are related to the body part of the documents. The main tag for the head part is the title tag. Browsers use the information in your title part of the head section for several things, including the default name for bookmarking the page. Here is a basic homepage named 'My First Homepage'.

    <html>
    <head>
    <TITLE>My First Homepage</TITLE>
    </head>
    <body>
    This is my first homepage, but I will promise you it will not be the last one.
    </body>
    </html>

When you look at this document with a browser, the only thing that you will see is a one line statement which says, "This is my first homepage, but I will promise you it will not be the last one."

Basic Tags for Text formatting in an HTML Document

Let's say that you decided to create an HTML document for the beautiful poem "Kids who are different" by Digsby Wolfe. Here is the poem:
 
KIDS WHO ARE DIFFERENT

Here’s to the kids who are different,
The kids who don’t always get A’s,
The kids who have ears twice the size of their peers,
And noses that go on for days.

Here's to the kids who are different,
The kids they call crazy or dumb,
The kids who don’t fit, with the guts and the grit,
Who dance to a different drum.

Here's to the kids who are different,
The kids with a mischievous streak,
For when they have grown, as history's shown,
It's their difference that makes them unique.

Digsby Wolfe, 1982

 
So, go ahead and create an HTML document. In the body portion of the document, you type the poem. You make sure to press the ENTER or RETURN key once after each line, and twice when the new paragraph starts. You save your work and check it with a browser, and what do you see...all sentences are displayed in a long paragraph, connected to each other from the top to the bottom of the poem. This is because:
HTML ignores the blank spaces and considers them only a single blank space, including one, or more times hitting the RETURN key at the end of the sentences. So,
 
Happy New Year Happy        New Year Happy
New

Year


will all be displayed as Happy New Year.
Now let us look at some basic text formatting tags.
 

To Center a portion of a document, use the center tag:

<center>This will be centered</center>

actually showing up as:
 
This will be centered

 

To Make Bold a portion of a document, use the bold tag:

<b>This will be bold</b>

actually showing up as:
 
This will be bold

 

To Italicize a portion of a document, use the italic tag:

<i>This will be italic</i>

actually showing up as:
 
This will be italic

 

To Subscript or Superscript a portion of a document, use the subscript or Superscript tags:

(X<sub>2</sub>)<sup>-3</sup>

actually showing up as:
 
(X2)-3

 

To Start a New Line use the break tag:

The primary colors are:<br>
red:<br>
green:<br>
blue

actually showing up as:
 
The primary colors are:
red
green
blue

 

To Start a New Paragraph use the paragraph tag:

The kids who don’t fit, with the guts and the grit,<br>
Who dance to a different drum.<p>
Here’s to the kids who are different,<br>
The kids with a mischievous streak,<br>

actually showing up as:
 
The kids who don’t fit, with the guts and the grit,
Who dance to a different drum.

Here’s to the kids who are different,
The kids with a mischievous streak,


 

To Use Different Headings use the headings tag. Headings are displayed in larger and/or bolder fonts than normal body text. HTML has six sizes of headings, numbered from 1 through 6, with 1 being the largest size. The syntax for the headings is: <Hn>a selected text for heading <Hn>
where n is a number between 1 and 6 specifying the level of the heading. Here is an example of how they are used and how the look.


 
If you have this in your document... It will look like this in www
<H1> Green Bay Packers </H1>

Green Bay Packers

<H2> San Francisco 49ers </H2>

San Francisco 49ers

<H3>Chicago Bears </H3>

Chicago Bears

<H4> Baltimore Ravens </H4>

Baltimore Ravens

<H5> Maryland Terepins </H5>
Maryland Terrapins
<H6> Morgan Bears</H6>
Morgan Bears
This is regular text This is regular text
Lists

HTML supports several types of lists including unnumbered (bulleted), ordered (numbered), and definition lists. They can be nested just like loops used in computer programming.

Unnumbered Lists

To make an unnumbered, bulleted list, use the following format:

    <UL>
    <LI>first bulleted item
    <LI>second bulleted item
    <LI>more bulleted items
    </UL>

To see an actual application, check humor#55 from the Humor! Humor! Archives.

Ordered Lists

To make an ordered (numbered) list, use the following format:

    <OL>
    <LI>first numbered item
    <LI>second numbered item
    <LI>more numbered items
    </OL>

To see an actual application, check humor#14 from the Humor! Humor! Archives.

Definition Lists

A definition list, usually consists of alternating a definition term (coded as <DT>) and a definition definition (coded as <DD>). Web browsers generally format the definition on a new line. To make a definition list, use the following format:

    <DL>
    <DT> first definition term
    <DD> definition of the first definition term.
    <DT> second definition term
    <DD> definition of the second definition term.
    <DT> more definition terms
    <DD> definition of the more definition terms.
    </DL>

To see an actual application, check humor#31 from the Humor! Humor! Archives.

Nested Lists

Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single list item.

To see an actual application, check humor#61 from the Humor! Humor! Archives.

Additional Tags

We study two more tags in the first week, the blockquote tag and the simple font tag to change the size of the text.

Blockquote Tag

We use the <BLOCKQUOTE> tag to include lengthy quotations in a separate block on the screen. Most browsers generally reduce the margins (both from left and from right) for the quotation to separate it from previous or succeeding text.

A good example of the use of blockquote tag is the document you are looking at. Use the View/Source sequence from your browser's menu to see the source of the document for applications of the blockquote.

Simple Font Tag

Although font tag has more optional fields, we can use the font tag to increase (or decrease) the size of the font for an area of our interest. The format is as follows:

<font size=+1>Text</font>

The plus sign can also be a minus sign and the value 1 can be 2, 3, ..., -1, -2, and so on (There is a limit for that value. Try to see whether you can find it.)

You can also use the same format without the plus or minus sign, defining absolute sizes. Here are some examples of the use of the font tag.
 
If you have this in your document.. It will look like this in www
<font size=+3> USA </font> USA
<font size=+2> Maryland </font> Maryland
<font size=+1>Baltimore </font> Baltimore
This is regular text This is regular text
<font size=-1> Morgan State University </font> Morgan State University
<font size=-2> School of Engineering </font> School of Engineering
<font size=-3> Industrial Engineering Department</font> Industrial Engineering Department
<font size=3>Font Size 3</font> Font Size 3
<font size=2>Font Size 2</font> Font Size 2
<font size=1> Font Size 1</font> Font Size 1

Unit One Tutorial Revisited

Unit One Tutorial introduced the following tags and concepts:

html head title body center
bold italic headings paragraph break
superscript subscript ordered lists unnumbered list definition list
blockquote font

In Unit Two, we will revisit some of these tags again to work with the optional attributes of these tags. We will also introduce some new tags for text formatting. Please, notice that in these tutorials I am going to avoid using all optional attributes of the tags. The formal definition of tags is left to another document. I will only mention the most useful attributes of tags when I discuss them.