What is HTML and the Web anyway?

HTML stands for HyperText Markup Language. It was first coined by Ted Nelson in 1956. The idea was not fully implemented until 1989 when Tim Berners-Lee at CERN (European Physics Particle Research Institute) invented the World Wide Web. The starting point of the Web is always a home page, which in essence is a document or file that is composed of plain text, hypertext, images, audio, and video sources. When all these home pages are linked together into a web of information through hyperlinks, we call them the World Wide Web. What makes these hyperlinks possible is HTML, the HyperText Markup Language.


What's the Magic of HTML?

There's no magic in HTML. It is a language that uses markup tags enclosed in less than and greater than signs (e.g.: <TAG_NAME>) to encode information for reading by the World Wide Web browsers such as Netscape and Mosaic. For example, to make a word bold in a document, the tags would be: <B> and </B>.

What you do: What you see:
<B>
I want this line to be bold.
</B>
I want this line to be bold.
What you try:
  • Use the tags you just learned for a trial.
  • Copy the example from "What you do" or type any text.
  • Make sure you put your tags in the appropriate place.


As you can see, <B> begins a markup, and </B> ends a markup, and the text in between became bold as a result of the tags.


Now how do you think HTML produces Italic text ? Is "Put <I> and </I> around the text" what you said loudly in your mind? If yes, you have grasped the essence of HTML. Let's make the above example into italic texts.

What you do: What you see:
<I>
<B>
I want this line to be bold and italic.
</B>
</I>
I want this line to be bold and italic..
What you try:
  • Use the text window below to type your tags and text.
  • Type in any text or copy the example from "What you do".
  • Make sure you put your tags in the appropriate place.




Magic, is it not?! That is all there is to HTML. Now you just need to know more tags to be a proficient HTML programmer.


The First and the Last:

As a rule of thumb, don't tag and write your ideas simultaneously. Type your ideas in a word processor, spell check the document, and save it as ASCII text before you put in tags. When you put tags in your document, it is a good idea to use one of the many HTML Editors to avoid syntax problems caused by typos. When you save, make sure you save your document as "filename.html" or "filename.htm" (for Windows users). "filename" is whatever name you want for your document. "html" or "htm" are the extentions that every HTML document must have. Keep all file names in lower cases. It will save you tons of time when you do hyperlinks. Now that you are prepared, let's start learning some other often used tags in HTML.


The Head and the Body

Every home page has two major sections: Head and Body. A simple head contains the title of the home page which appears in the title bar of your browser such as Netscape or Mosaic. The body is where all the content of the home page goes. The following is a skeleton of a home page for me:

What you do: What you see:
<HTML>
<HEAD>
<TITLE>David Tai's Home Page</TITLE>
</HEAD>
<BODY>
<H3>Welcome to my home page!</H3>
<HR>
The 1st paragraph goes here.
<P>
The 2nd paragraph will be in here.
<HR>
By David H. Tai in Nov. 1995
</BODY>
</HTML>

Welcome to my home page!


The 1st paragraph goes here.

The 2nd paragraph will be in here


By David H. Tai in Nov. 1995

What you try:
  • Use the text window below to type your tags and text.
  • Type in any text or copy the example from "What you do".
  • Make sure you put your tags in the appropriate place.


As you can see from the above example, every HTML document starts with a <HTML> and ends with a </HTML> to indicate that it is an HTML document. Following <HTML> is the Head, which contains the title of the document. The Body makes up the rest of the HTML document.


Up to now, you probably have noticed that all the HTML tags are in pairs. The first tag begins the markup, and the second ends the markup. The only difference is that the ending tag has an extra slash (/) in it. In HTML, 95% of the tags are paired tags except a few such as the Paragraph Tag (<P>), Line Break Tag (<BR>), Horizontal Ruler (<HR>), and the Image Tag (<IMG SRC="file_name.gif">). Now that you understand the basic structure of HTML, you can get yourself familiarized with a few more tags and be on your way to producing home pages.


How to Tag Titles and Headings

What you tags: What you see: Explanation
<H1>Heading Level 1</H1>

Heading Level 1

There are 6 levels of headings. <H1> being the biggest and <H6> the smallest. These tags format the font size of texts so that your titles and headings can be differentiated from each other and the text body. Different levels of headings should be used according to the sequential arrangement of your document in your home page.
<H2>Heading Level 2</H2>

Heading Level 2

<H3>Heading Level 3</H3>

Heading Level 3

<H4>Heading Level 4</H4>

Heading Level 4

<H5>Heading Level 5</H5>
Heading Level 5
<H6>Heading Level 6</H6>
Heading Level 6
What you try:
  • Use the text window below to type your tags and text.
  • Type in any text or copy the example from "What you do".
  • Make sure you put your tags in the appropriate place.



How to Make a List

What you tag What you see: Explanation

Steps to use the Web (An ordered list):

<OL>
<LI>Turn on your computer
<LI>Launch Netscape
<LI>Browse and surf
</OL>

Steps to use the Web (An ordered list):

  1. Turn on your computer
  2. Launch Netscape
  3. Browse and surf
<OL> starts an ordered list, while <UL> starts an unordered list. <LI> is a single tag that is used in both ordered and unordered lists. Use an ordered list when the content of your list has a sequential importance; otherwise use an unordered list.

Errands to Run Today (An unordered list):

<UL>
<LI>Shopping
<LI>Go to the bank
<LI>Post Office
</UL>

Errands to Run Today (An unordered list):

  • Shopping
  • Go to the bank
  • Post Office
What you try:
  • Use the text window below to type your tags and text.
  • Type in any text or copy the example from "What you tag".
  • Make sure you put your tags in the appropriate place.



How to Make a Hyperlink?

What you tag: <A HREF="/David/tai.html">Who is David Tai?</A>

What you see: Who is David Tai?

"Who is David Tai?" is now made into hypertext. If you click on it, you will be brought to a home page about David Tai. "A" means anchor, HREF means hypertext reference. "tai.html" is the file or anchor that the hyperlink refers to. </A> is, of course, used to end the anchor of a hyperlink.

What you try:




How to Tag an Image?

What you tag: What you see:
<IMG SRC="/David/tai.gif" ALIGN="center" ALT="Tai's Picture">
What you try:
  • Use the text window below to type your tags and text.
  • Type in any text or copy the example from "What you tag".
  • Use "tai.gif" as your image file.
  • Make sure you put your tags in the appropriate place.


"IMG" means image; "SRC" means source; "tai.gif" is the image file that Netscape will find and put on the screen. "ALIGN" means alignment. It adjusts the image position according to its adjacent texts. Other values for the "ALIGN" attribute are "top", "bottom", "left", and "right". "ALT" means alternative. It allows an alternative text to be displayed on the screen of a browser in case the image can not be displayed. Look, this is a single tag; there is no ending tag that goes with it.


How about Audio and Video?

What you tag: <A HREF="/David/welcome.au">Listen to my welcome message.</A>

What you see: Listen to my welcome message.

What you try:



What you tag: <A HREF="http://fcit.coedu.usf.edu/David/welcome.mov">See my welcome video</A>

What you see: See my welcome video

What you try:



As you can see from the above tags, they are just hyperlink tags. The only difference is that instead of linking to an HTML document, the above tags link to an audio file such as "welcome.au" and a video file "welcome.mov".


Notice that the audio file reference is "/David/welcome.au", and the video file reference is "http://fcit.coedu.usf.edu/David/welcome.mov". The first kind is called a relative file path reference, while the second is called a complete file path reference. Use relative file path references when you are refering to files on your own HTTP (HyperText Transfer Protocol) server; use complete file path references when refering files somewhere else on the Web.


Now that we have learned enough HTML tags, let's put all the tags together and make a home page. I will do this one for you, but after you finish taking the achievment test, you will be given an opportunity to make your own home page on line.

What you do:
<HTML>
<HEAD><TITLE>David Tai's Home Page</TITLE></HEAD>
<BODY>
<H1>Welcome to David Tai's Home Page</H1>
<HR>
<P>
<IMG SRC="/David/tai.gif" ALIGN="RIGHT" ALT="David Tai's Picture">I am a Ph.D. student in Instructional Technology. Please listen to my <A HREF="/David/welcome.au">welcome message</A> and watch my <A HREF="/David/welcome.mov">welcome video</A>. Currently, I am conducting research on hypertext design for the World Wide Web. The three kinds of designs are as follow:
<P>
<UL>
<LI><A HREF="/David/hypertext1.html">Web pages without hypertext</A>
<LI><A HREF="/David/hypertext2.html">Web pages with embedded hypertext</A>
<LI><A HREF="/David/hypertext3.html">Web pages with guided hypertext</A>
</UL>
<P>
Click on one of the above hypertexts to browse.
<HR>
E-mail questions and suggestions to <A HREF=MAILTO:Tai@typhoon.coedu.usf.edu>David Tai</A>
</BODY>
</HTML>
What you see:

Welcome to David Tai's Home Page


David Tai's 
PictureI am a Ph.D. student in Instructional Technology. Please listen to my welcome message and watch my welcome video. Currently, I am conducting research on hypertext design for the World Wide Web. The three kinds of designs are as follow:

Click on one of the above hypertexts to browse.


E-mail questions and suggestions to David Tai

What you try:




This is the end of the tutorial. I hope it has helped you in learning HTML.

To check your understanding of HTML, please do the practice exercise.


Author: David H. Tai
Florida Center for Instructional Technology ©1995