Introduction to HTML

Introduction to the HyperText Markup Language (HTML)

What is HTML

HyperText Markup Language
it is a language understood by WWW browsers (e.g., netscape)
it is used for creating hypertext on the World Wide Web
it marks the logical structure of a document using markup tags

A Simple Example

   <HTML>

        <HEAD>
             <TITLE> Title of Page </TITLE>
            </HEAD>
        
        <BODY>
                The Main body of the document
        </BODY>

   </HTML>

HTML Markup Tags

The HTML language is a series of "Markup Tags" placed in and around ASCII text.
Tags tell WWW browser how to display the text
Can use a text editor or a word processor:
Tags come either singly or in pairs: <TAG>Some text here</TAG>
Tags can be either upper or lower case.
A WWW browser interprets the tags as the HTML file is being sent.

Physical Markup Tags

Physical tags change the physical appearance of the text directly. The WWW browser has no influence over the typeface used.

Section titles/headers use H1 through H6 tags:

HTML Code Result
<H1>Big and Bold Header</H1>

Big and Bold Header

<H2>Slightly Smaller Header</H2>

Slightly Smaller Header

<h3>Smaller Header</h3>

Smaller Header

Also H4, H5 and H6

HTML Code	Result
`<H1>Big and Bold Header</H1>`	Big and Bold Header
`<H2>Slightly Smaller Header</H2>`	Slightly Smaller Header
`<h3>Smaller Header</h3>`	Smaller Header
Also H4, H5 and H6

Other physical tages

HTML Code Result
This word is <B> Bold </B> This word is Bold
This word is <I> Italics </I> This word is Italics
This word is <U> Underlined </U> This word is Underlined
These words <TT> are in Typewriter font </TT> These words are in Typewriter font

HTML Code	Result
`This word is <B> Bold </B>`	This word is Bold
`This word is <I> Italics </I>`	This word is Italics
`This word is <U> Underlined </U>`	This word is Underlined
`These words <TT> are in Typewriter font </TT>`	These words `are in Typewriter font`

Logical Markup Tags

Logical markup tags give a specific reason for changing the appearance of text. It is up to the browser to decide in what fashion to change the appearance.

HTML Code Result
This word is <EM> Emphasized </EM> This word is Emphasized
This word is <STRONG> Strong </STRONG> This word is Strong
These words are <CODE> some code </CODE> These words are some code
<CITE> This is a citation </CITE> This is a citation

HTML Code	Result
`This word is <EM> Emphasized </EM>`	This word is Emphasized
`This word is <STRONG> Strong </STRONG>`	This word is Strong
`These words are <CODE> some code </CODE>`	These words are `some code`
`<CITE> This is a citation </CITE>`	This is a citation

Text Layout

There are several tags that deal with the layout of the text.

HTML Code Result
<P> This starts a new paragraph.
This starts a new paragraph.
This line will break <BR> in the middle. This line will break
in the middle.
<CENTER> This text will be Centered </CENTER> This text will be Centered

HTML Code	Result
`<P> This starts a new paragraph.`	This starts a new paragraph.
`This line will break <BR> in the middle.`	This line will break in the middle.
`<CENTER> This text will be Centered </CENTER>`	This text will be Centered

Document Structure

Web pages have a common document structure that includes the following tags:

<HTML> This surrounds the entire document and lets the browser know what language is being used (<SGML> might also be used).
<HEAD> This surrounds the header portion of the document. Title is within the head as well.
<TITLE> The title of the document as shown in the title bar of the WWW browser.
<BODY> The main body of the document.

Comments in HTML Code

As with programming, it is nice to put in comments that will be helpful to others (and yourself after some time) to understand what you are doing in the HTML file. Typical comments include who wrote the HTML page, the date it was last modified, a reminder to work on a section, etc.

HTML Code Result
This line will show up. This line will also show up.

HTML Code	Result
	This line will show up. This line will also show up.

Including Images in HTML

By now you have noticed almost all WWW pages have pictures or images on them.
These are called "In-Line" images.
In word processors like WordPerfect or MS Word, you can paste in pictures where you want them and they become part of word processing file.
With HTML, you simply make a reference to an image file in your directory.
1. Graphics Interchange Format - GIF
2. Joint Photographer's Experts Group - JPEG (pronounced "Jay- Peg")
Tag is called IMG. Also need to supply the "source" of the image - the file name.

Here is my picture:

HTML Code	Result

There are various options for the IMG tag that dictate:
1. Where the image will show up on the page
2. How the text will flow around the image
The ALIGN option:
- LEFT
- RIGHT
- MIDDLE
- TOP
- BOTTOM

HTML Code	Result
	Here is my picture: and here is some additional text.
	Here is my picture: and here is some additional text.
	Here is my picture: and here is some additional text.
	Here is my picture: and here is some additional text.
	Here is my picture: and here is some additional text.

General rules

All WWW pages should have the following:

A brief but descriptive TITLE
The last date (and time) the page was modified.
The author/maintainer of the page including his or her e-mail address.
Purpose of the page: Why anyone would want to read it ?
Links back to the "Home Page"

Last update: July 10, 1996

Sidan Lin sidan@cimic3.rutgers.edu