[CIMIC] [MUSIC]

Introduction to the HyperText Markup Language (HTML)


What is HTML



A Simple Example

   <HTML>

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

   </HTML>


HTML Markup Tags



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 CodeResult
<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 CodeResult
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 CodeResult
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 CodeResult
<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:

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 CodeResult
This line will show up. <!-- This is a comment --> This line will also show up. This line will show up. This line will also show up.


Including Images in HTML

Here is my picture:
HTML CodeResult
Here is my picture: <IMG SRC="earth.gif">
HTML CodeResult
Here is my picture: <IMG SRC="earth.gif" ALIGN=LEFT> and here is some additional text. Here is my picture: and here is some additional text.
Here is my picture: <IMG SRC="earth.gif" ALIGN=RIGHT> and here is some additional text. Here is my picture: and here is some additional text.
Here is my picture: <IMG SRC="earth.gif" ALIGN=MIDDLE> and here is some additional text. Here is my picture: and here is some additional text.
Here is my picture: <IMG SRC="earth.gif" ALIGN=TOP> and here is some additional text. Here is my picture: and here is some additional text.
Here is my picture: <IMG SRC="earth.gif" ALIGN=BOTTOM> 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:
  1. A brief but descriptive TITLE
  2. The last date (and time) the page was modified.
  3. The author/maintainer of the page including his or her e-mail address.
  4. Purpose of the page: Why anyone would want to read it ?
  5. Links back to the "Home Page"



[Previous Class] [MUSIC Home] [Next Class]


Last update: July 10, 1996
Sidan Lin sidan@cimic3.rutgers.edu