How to Write Web Pages
(Introduction to HTML)

HTML (=Hypertext Mark Up Language) is the language to typeset web pages. It is a computer language much like FORTRAN, COBOL, BASIC, ..... but it is especially designed for typesetting web pages for use in the Internet.

It is a language extremely easy to learn, and if you work through all the exercises here, which you can probably do in one or two days, you can already write web pages!

(Note : there are other languages to "automate" writing of web pages, e.g. "javascript, vbscript, java, PHP, .... ", but you do not have to learn them now. HTML is already powerful for your 95 ~ 99% needs!)

Once you have mastered this language, you can use it for organizing your own data, or writing web pages for advertising, or even for electronic-filing, ....

In all the exercises below, you will have to open 3 windows (i.e. 3 tasks), one is "notepad", for keying in your exercises, one is "Internet Explorier, or Netscape" - browser to view the result of your exercises, still another one, another "Internet Explorer" for viewing this web page - you have already opened this one because you are reading this web page now! Hence you have only to open 2 windows , another "Internet Explorer" and "Notepad".

As only one task (window) may be active at one time, to activate the window, you click the icon on the task bar at the very bottom of your screen.

Now please make a directory called "test" under C:, this directory is used to store all your exercises. If you do not know how to "make a directory", then you may read my web page on Qbasic Chapter 5 DOS Commands. I am of the opinion that you should learn Qbasic first before learning HTML.

The address you type to the browser may be the usual "www.abc.com" , but it can also be a file, e.g. "c:\test\filea.htm". Notice that the extension of the file must be .htm (or .html)

Heading Tag

Exercise : Use "notepad" and key in the simplest web page, just one sentence

<h2>Testing, testing, 1, 2, 3</h2>

Now "save" this in "c:\test\e1.htm" (File -> Save). Next, do not close "notepad", but use the second "Internet Explorer" to view the result of your exercise. Just type in "c:\test\e1.htm" for the usual "www.abc.com".

You will see something like this

Testing, testing, 1, 2, 3

Exercise :Do not close "Internet Explorer", but re-activate "notepad" and edit your file "c:\test\e1.htm" into

<h2 align=center>Testing, testing, 1, 2, 3</h2>

Save this file. (File -> Save). Do not close "Notepad", but re-activate "Internet Explorer". Either you type in again "c:\test\e1.htm" or simply click the "refresh" bottom. You should see something like

Testing, testing, 1, 2, 3

The sentence have been aligned in the center.

Exercise : Now activate "Notepad", without closing "Internet Explorer", and edit the file "c:\test\e1.htm" into

<h1 align=right>Testing, testing, 1, 2, 3</h1>

Save it (File -> Save), and use "Internet Explorer" to view the result (click "refresh" buttom). You should see something like

Testing, testing, 1, 2, 3

Exercise :Edit the file into

<h3 align=left>Testing, testing, 1, 2, 3</h3>

and view the result, you will see something like

Testing, testing, 1, 2, 3

Heading Tag <h1> ,</h1> etc.

There are six "heading tags", from "h1" to "h6", "h1" being the biggest and "h6" the smallest.
"align = left, center, right", if you leave this out, the default is "align=left".

Paragraph tag
< p > .... </p>

This tag will format a "paragraph". There will be one blank line between paragraphs.

Exercise :Use "Notepad" to open another file "c:\test\e2.htm". And type in the following

<p>put whatever you like in the first paragraph.</p>
<p>put whatever you like in the second paragraph.</p>
<p>put whatever you like in the third paragraph.</p>

Save the file, and use "Internet Explorer" to view your result.

Exercise :Edit your file "c:\test\e2.htm" by enclosing some words with tags

<i> .... </i> (italic)

<u> .... </u> (underline)

<s> .... </s> (strike through)

<sup> .... </sup> (super-script)

<sub> .... </sub> (sub-script)

For example

<p>put <i>whatever</i> you like in the first paragraph.</p>
<p>put whatever you like in the <u>second paragraph</u>.</p>
<p><s>put whatever you like in the third paragraph.</s></p>
<p>Water is H<sub>2</sub>O</p>
<p>2<sup>2</sup> = 4</p>

Save the file, and use "Internet Explorer to view your result. You should see something like

put whatever you like in the first paragraph.

put whatever you like in the second paragraph.

~~put whatever you like in the third paragraph.~~

Water is H₂O

2² = 4

Exercise :Now open another file (File -> New) "c:\test\e2b.htm" and key in the following (you may first "select" them, and then "copy" and "paste" to your "Notepad" to save effort.)

        <p align=center> Blessed is everyone who fears the LORD,<br>
        who walks in his ways!<br>
        You shall eat the fruit of the labour of your hands;<br>
        You shall be happy, and it shall be well with you<br>
        </p>

(Notice that the "break tag" <br> is used to cause a line break. If you put two consecutive line breaks, e.g. <br><br>, then one blank line will be inserted.)

You should see something like

Blessed is everyone who fears the LORD,
who walks in his ways!
You shall eat the fruit of the labour of your hands;
You shall be happy, and it shall be well with you

Ordered List

Exercise :Open a new file in "Notepad", "c:\test\e3.htm" and key in the following

        <ol>
              <li> apple, 10 cents </li>
              <li> orange, 20 cents </li>
              <li> banana </li>
        </ol>

Save it, and view it with "Internet Explorer", you should see something like

apple, 10 cents
orange, 20 cents
banana

Exercise : Edit "c:\test\e3.htm" into

        <ol type=i>
              <li> apple, 10 cents </li>
              <li> orange, 20 cents </li>
              <li> banana </li>
        </ol>

Save it, and view it with "Internet Explorer", you should see something like

apple, 10 cents
orange, 20 cents
banana

Exercise : Edit "c:\test\e3.htm" again

        <ol type=I>
              <li> apple, 10 cents </li>
              <li> orange, 20 cents </li>
              <li> banana </li>
        </ol>

(Note : it is capital "I"), save it, and view it with "Internet Explorer", you should see something like

apple, 10 cents
orange, 20 cents
banana

Exercise : Edit "c:\test\e3.htm" into

        <ol type=a>
              <li> apple, 10 cents </li>
              <li> orange, 20 cents </li>
              <li> banana </li>
        </ol>

(Note : it is "type = a" now) ,save it, and view it with "Internet Explorer", you should see something like

apple, 10 cents
orange, 20 cents
banana

Exercise :Edit "c:\test\e3.htm" into

        <ol type=A>
              <li> apple, 10 cents </li>
              <li> orange, 20 cents </li>
              <li> banana </li>
        </ol>

(Note : "type =A", capital "A" ), save it, and view it with "Internet Explorer", you should see something like

apple, 10 cents
orange, 20 cents
banana

Ordered list <ol> </ol> the numbering will be 1, 2, 3, ... or you may use "type=i, I, a , A" to change it. If you want to start at some number other than 1, you may use, e.g. <ol start=4> , to start from 4.

Unordered List

Exercise : Edit "c:\test\e3.htm" changing "ol" into "ul"

        <ul>
              <li> apple, 10 cents </li>
              <li> orange, 20 cents </li>
              <li> banana </li>
        </ul>

Save it, and view with "Explorer". You should see something like

apple, 10 cents
orange, 20 cents
banana

Description List <dl> .... </dl>

Sometimes, we wish to format as :

xxxxxxxxxxxxxxxx     ----- description title
    
     xxxxxxxxxxxx
     xxxxxxxxxxxx    ----- description
     xxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxx    ----- description title

     xxxxxxxxxxxx
     xxxxxxxxxxxx             ----- description
     xxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxx      ----- description title
   
     xxxxxxxxxxxx
     xxxxxxxxxxxx           ----- description
     xxxxxxxxxxxx

Exercise : Open a new file with "Notepad", "c:\test\e3d.htm". "select", then "copy, paste" the following from this webpage onto the "Notepad"

       <dl>
           <dt>The Computer Language COBOL</dt>
                  <dd>COBOL stands for Common Business Oriented Language, and is 
                      the language developed many years ago for commercial purposes.
                      It takes longer time to code a COBOL program than it takes to code
                      in Qbasic, doing the same thing.
                  </dd>

            <dt>The Computer Language FORTRAN</dt>
                  <dd>FORTRAN stands for Formula Translation, and is used mainly for
                      scientific, number crunching purposes.  It is easy to code.
                      And so, there once appeared "Commercial Fortran" to replace
                      COBOL. 
                  </dd>

            <dt>The late comer Qbasic</dt>
                  <dd>BASIC was developed many years ago, by a kind programmer.
                      BASIC has helped lots of people to learn programming.  If one
                      starts with COBOL, or FORTRAN, or Pascal, one couldn't learn as fast as
                      one who starts with Basic.  Microsoft has made tremendous
                      improvement to it, and called it Quick Basic.
                  </dd>
        </dl>

Save it, and view with "Internet Explorer" this file "c:\test\e3d.htm". You should see something like

The Computer Language COBOL: COBOL stands for Common Business Oriented Language, and is the language developed many years ago for commercial purposes. It takes longer time to code a COBOL program than it takes to code in Qbasic, doing the same thing.
The Computer Language FORTRAN: FORTRAN stands for Formula Translation, and is used mainly for scientific, number crunching purposes. It is easy to code. And so, there once appeared "Commercial Fortran" to replace COBOL.
The late comer Qbasic: BASIC was developed many years ago, by a kind programmer. BASIC has helped lots of people to learn programming. If one starts with COBOL, or FORTRAN, or Pascal, one couldn't learn as fast as one who starts with Basic. Microsoft has made tremendous improvement to it, and called it Quick Basic.

Here

dl = description list

dt = description title

dd = description data

HORIZONTAL RULE <hr>

This draws a horizontal line, you may experiment with any .htm file by adding <hr> there.
Variations are <hr width=m% align=[center,right,left] size=n>

e.g. <hr width=75% align=center size=10> will produce (Note : "size" is in pixels, "width" will occupy 75 percent of the screen)

Paragraph Indentation

<blockquote>
.............
.............
.............
</blockquote>

Now everything within the <blockquote> ..... </blockquote> tag will be shifted to the right (indented to the right-hand side).

Photographs

When you buy a scanner, usually there will be a stripped down "photo" software included (but still sufficient for our use). Photograph scanned will be in "bit-mapped format", and file extension is ".bmp"

Usually we will have to compress the file.

Let us do a little calculation : suppose the photo is 300 x 300 pixels, 24 bits color (i.e. 3 bytes per pixel color), then file size will be = 300 x 300 x 3 bytes = 270000 bytes. To download it with 56K modem (56K bit, roughly translates to 5.6 K bytes per second, but 3.5 K bytes per second seems to be the upper limit), it will take 270000/3.5 = 77 seconds. This is very inconsiderate to your viewers. Hence compression is needed.

There are 2 forms of compression. ".gif" uses 8 bits color, and is used for line art and illustration. ".jpg" uses 16/24/32 bits color and is used for photographs.

After you have scanned your photo, the photo will be in ".bmp" (bit-mapped format) in the "photo" software. Then you "File -> Save as -> (choose ".jpg" format, then type in filename)".

But if you draw the illustration using Microsoft's "painter program, Mspaint.exe", the file will be in bit-mapped format. Then you will have to open the "photo" software, "File -> Old -> key in the bit-mapped file from painter program)", then "File -> Save as -> (choose ".gif", then type in filename)."

If you do not have a scanner, you may draw with Microsoft's painter (Mspaint.exe), and save them as "c:\test\pic1.bmp", "c:\test\pic2.bmp", ... Whenever you see "c:\test\pic1.jpg" or "c:\test\pic2.gif" below, use the ".bmp" files instead.

Exercise : Suppose the photo measures 4 cm width, and you want the photo to appear 200 pixels wide on the screen, how should you set the resolution of the scanner ?

Ans : resolution is 200/4 = 50 pixels per cm.

Exercise : Find a photo, and use the scanner to scan it. The file will be in bit-mapped form. Next, save it in ".jpg" form (File -> Save as -> choose .jpg format and enter filename "c:\test\pic1.jpg"). Now use "Notepad" to enter a file "c:\test\e3b.htm" with just one sentence,

<p> This is my photo <img src="c:\test\pic1.jpg"> </p>

After that, save it and view it with "Internet Explorer". (Note : img = image, src = source file name). The result should be somewhat like

This is my photo

(Note : default alignment is align=bottom)

Exercise :Edit the file into

<p> This is my photo <img src="c:\test\pic1.jpg" align=top> </p>

Result should be

This is my photo

Exercise :Edit the file into

<p> This is my photo <img src="c:\test\pic1.jpg" align=middle> </p>

Result should be

This is my photo

Exercise :Edit the file into

<p> This is my photo <img src="c:\test\pic1.jpg" align=right> </p>

Result should be

This is my photo

And the paragraph will be wrapped around on the right side. To break clear of the photograph use <br clear=all >

Exercise :Edit the file into

<p> <img src="c:\test\pic1.jpg" align=left> This is my photo </p>

Result should be

This is my photo

And the paragraph will be wrapped around on the left side. To break clear of the photograph use <br clear=all >

Exercise :Now use Microsoft's painter program ("Mspaint.exe") to draw a picture. Then save it in "c:\test\pic2.bmp". Next open the "photo" software, (File -> Old -> key in filename "c:\test\pic2.bmp") and then save it as ".gif" format (File -> Save as -> choose ".gif" format and enter filename "c:\test\pic2.gif").

Now edit "c:\test\e3b.htm" into (or just "select", then "copy", then "paste" onto your "Notepad")

<p> <img src="c:\test\pic2.gif" border=3 align=right > This picture is drawn with "painter" program. We can simulate water color by ((Option -> Edit color), then define color of our choice. You will notice that the paragraph wraps around the photo. To break clear, use <br clear=all > </p> <p> Now this paragraph breaks clear of the picture. And will not wrap around it, as you can see from this demonstartion </p>

The result should be like

This picture is drawn with "painter" program. We can simulate water color by ((Option -> Edit color), then define color of our choice. You will notice that the paragraph wraps around the photo. To break clear, use

Now this paragraph breaks clear of the picture. And will not wrap around it, as you can see from this demonstartion

You may draw a border around the "image", e.g.
<img src="c:\test\pic2.gif" border=4 >
or leave horizontal-spaces and vertical-spaces around the picture, e.g.
<img src="c:\test\pic2.gif" border=4 hspace=15 vspace=15>
Now there will be 15 pixels empty space around, and a border of 4 pixels wide. "border=0" means "no border"

Sound File

To record a voice (Start -> Programs -> Applications -> Multi-media -> Recorder), click the "record" buttom, and record your voice. You may set sampling rate (8000, 11000, 22000, 44000 samples per second), and the resolution (8 bits, 16 bits ....). Then save the file (File -> Save -> key in name "c:\test\mysound.wav") and this file will be needed in the exercises below.

Exercise : Suppose the recording is set at 22000 samples per second, with 16 bits (= 2 bytes) resolution. And the duration of the recording is 20 seconds. What will be the file size in bytes? How long will it takes to download, assuming download rate = 3 Kbytes per second, which is a typical rate of a 56 Kbit modem.

Ans : file size = 22000 * 2 * 20 = 880000 bytes. Time to download = 880000/3000 = 293 seconds.

Usually, the sound file is compressed into "mp3" format before transmission. But if you use the sound file only on your PC, you need not compressed the file.

For music, there is a standard "MIDI" ( = Musical Instrument Digital Interface ), which is used by manufacturers of electronic musical instruments. It records down the note pressed, when it starts, when it ends, the force with which the note is hit (=velocity), .... And the file is extremely small! It is the preferred format nowadays when bandwidth is still a problem.

Link

(Note : another name for "link" is "anchor". If you click that, another web page will be opened)

Exercise : Key in "c:\test\e4.htm" as follows

<a href="c:\test\e1.htm" > first choice </a> <br>
<a href="c:\test\e2.htm" > second choice </a> <br>
<a href="c:\test\e3.htm" > third choice </a> <br>

Save the file, and then use "Internet Explorer" to view it. Click "first choice", and the file "c:\test\e1.htm" will appear. Click "previous page" (browser usually has 2 buttons at the top, "previous page" and "next page"), then click "second choice", and the file "c:\test\e2.htm" will appear. Click "previous page" again, and click "third choice", and the file "c:\test\e3.htm" will appear.

Exercise : Edit the file into

<a href="c:\test\mysound.wav" > first choice </a> <br>
<a href="c:\test\e2.htm" > second choice </a> <br>
<a href="c:\test\e3.htm" > third choice </a> <br>

This time, when you click "first choice", the sound file your recorded previously will be played.

Exercise : Edit the file into

<a href="c:\test\mysound.wav" > first choice </a> <br>
<a href="c:\test\pic1.jpg" > second choice </a> <br>
<a href="c:\test\e3.htm" > third choice </a> <br>

This time, when "second choice" is clicked, the picture will appear.

Exercise : Next open another "Notepad" and create a new file "c:\test\text.txt" (note : this is a text file), putting whatever you like into it. Next edit the file "c:\test\e4.htm" into

<a href="c:\test\mysound.wav" > first choice </a> <br>
<a href="c:\test\pic1.jpg" > second choice </a> <br>
<a href="c:\test\text.txt" > third choice </a> <br>

Now, when we click "third choice", the text file will appear.

Exercise :Picture may be used as "clickable icons". Edit file "c:\test\e4.htm" into

<a href="e1.htm" > <img src="pic1.jpg"> </a> <br>
<a href="e2.htm" > <img src="pic2.gif" align=middle > and wordings </a> <br>
<a href="e3.htm" > third choice </a> <br>

Now use "Internet Explorer" to view it, you should see something like

and wordings
third choice

The words "first choice", "second choice" have been replaced by two pictures. If you click the first picture, file "c:\test\e1.htm" will appear. If you click the second picture, file "c:\test\e2.htm" will appear.

Link within the same document

"Link" will usually be used for another document, but it can be used within the same document. When you click it, it will jump to the "anchored place", when you click "previous page", it will jump back.

        <h1>Content:</h1>

        <a href="#chap1">Chapter 1: Introduction</a> <br>
        <a href="#chap2">Chapter 2:  ......     </a> <br>
        <a href="#chap3">Chapter 3:  ......     </a> <br>

                       .............
                       .............
                       .............

        <a name=chap1>CHAPTER 1    INTRODUCTION

                       .............
                       .............
                       .............

        <a name=chap2>CHAPTER 2    ............

                       .............
                       .............
                       .............
        <a name=chap3>CHAPTER 3    ............

                       .............
                       .............
                       .............

(Note :

If that is a local link, put a "#" in front, e.g. #chap1, #chap2, #chap3.
In the place where we want to jump to, put <a name=chap1> ... (here without "#")
ABSOLUTE PATH NAME AND LOCAL PATH NAME
If all the ".htm" files are in one directory, say "c:\test\", then we may use "relative path name", and omit the "c:\test\" part, e.g.
<a href="e1.htm"> ....
Otherwise, we will have to use the full path name (absolute path name), e.g.
<a href="c:\test\e1.htm"> .....
If it jumps to a web page on another server, it should be, e.g.
<a href="http://www.abc.com/e1.htm">....
The address in <a href="http://www.abc.com/e1.htm"> is usually called URL ( = Uniform Resource Locator).

Nesting

e.g.

1. Lessons to be taken by year 1 student. a. Mathematics b. Physics c. Chemistry 2. Lessons to be taken by year 2 student. a. Calculus b. Differential Equation 3. Lessons to be taken by year 3 student. a. Elasticity Theory b. Statistics.

The ".htm" file will be


      <ol>
          <li>Lessons to be taken by year 1 student.<br>
               <ol type=a>
                   <li>Mathematics</li>
                   <li>Physics</li>
                   <li>Chemistry</li>
               </ol>
          </li>

          <li>Lessons to be taken by year 2 student.<br>
               <ol type=a>
                   <li>Calculus</li>
                   <li>Differential Equation</li>
               </ol>
          </li>

          <li>Lessons to be taken by year 3 student.<br>
               <ol type=a>
                   <li>Elasticity Theory</li>
                   <li>Statistics.</li>
               </ol>
          </li>
       </ol>

Nesting may be done to many levels. Each tag is paired off, <xxx> paired with </xxx>, and within each pair of tags, we may put other pairs of tags. This resembles nested "if" statement in Qbasic.

Pre-formatted

Every often, we wish to do the formatting ourselves, then we may enclose the material within pairs of <pre> ...... </pre> , e.g.

<pre>
         The students may take many courses, to get an idea of what are
           inside the courses, you may click the items below :

                 <a href="e1.htm">Course 1</a>

                 <a href="e2.htm">Course 2</a>

                 <a href="e3.htm">Course 3</a>

          For those who like communication by graphic means, here are some pictures
            for you :

                 Picture 1 <img src="pic1.jpg" border=1 align=middle>

                 Picture 2 <img src="pic2.gif" border=1 align=middle>
</pre>

The result should be like

         The students may take many courses, to get an idea of what are
           inside the courses, you may click the items below :

                 Course 1

                 Course 2

                 Course 3

          For those who like communication by graphic means, here are some pictures
            for you :

                 Picture 1 

                 Picture 2

"Pre-formatting" is very useful when the layout is too complicated to be described in HTML.

TABLES

Tables are quite useful. But to write tables in HTML would be difficult for many people, and I would suggest you use Microsoft's painter program to draw the table, then save and compress the file into ".gif" file, and present the table just as a picture.

Below is an example of tags used in tables

      <table border=1 width=300 height=100 >
           <caption align=top><h3><u>Table of Male and Female Students</u></h3></caption>
           <tr align=center>
                <th>Male</th>
                <th>Female</th>
           </tr>

           <tr align=center>
                <td>60%</td>
                <td>40%</td>
           </tr>
       </table>

You may "select", "copy", "paste" the above file onto "c:\test\e5.htm". You should see something like

Table of Male and Female Students
Male	Female
60%	40%

Here is another example

<table width=50% border=1>
<tr><td rowspan=2></td><th colspan=2>SEX</th></tr>
<tr><th>Male</th><th>Female</th>
<tr align=center><td>F1</td><td>40%</td><td>60%</td></tr>
<tr align=center><td>F2</td><td>50%</td><td>50%</td></tr>
</table>

And the result is

	Male	Female
	SEX
F1	40%	60%
F2	50%	50%

(Note :

<table border=n width=n height=n bgcolor="#rrggbb" background=URL hspace=n vspace=n >
where "border=n" specifies the border in pixel, if =0, no border will be drawn.
"width=n height=n", apart from specifying in pixels, we specify in percentage , e.g. "width=85%".
"bgcolor="#rrggbb" is the background color in hexadecimals, specifying "red, green, blue", e.g. "bgcolor="#ff0000" for red.
The "background='c:\test\pic2.gif'" may be a picture file for wallpaper effect; but be considerate, wallpaper would usually make viewing difficult.
"hspace=n vspace=n" are spacing left around the table in pixels.
<captain align=[left,center,right] valign=[top,bottom] > ...... </captain>
This is the "title" of the table, and may be placed at the top or bottom, or ....
Table row <tr> .... </tr>
<tr align=[left,center,right] valign=[top,bottom] bgcolor="#rrggbb"> ...... </tr>
"bgcolor='#rrggbb'" is the color for the whole row.
This specifies properties for the whole row.
Table Heading <th> .... </th>
Table Data <td> ..... </td>
The description in "table heading" would usually be in "bold" and "centered", but not for "table data". The parameters for both of them are the same,
<td align=[left,center,right] valign=[top,bottom] width=n height=n colspan=n rowspan=n bgcolor="#rrggbb"> ...... </td>
Here "width=n height=n" may be in pixel or in %, e.g. "width=20%".
"colspan=n rowspan=n", for the effect of which, please see example above.
Note also that "tables" may be defined inside "table data", <td> <table> .... </table> </td> i.e. table within a table.

Clickable Picture

Draw a picture with "Microsoft painter" of size 400 x 80 pixels, like that shown below, and divide the picture into 4 portions.

Then key in a file "c:\test\e6.htm" as follows,

      <img src="c:\test\pic3.gif" usemap="#map1" border=1>
      <map name=map1>
            <area shape=rect coords="0,0,100,80" href="e1.htm">
            <area shape=rect coords="100,0,200,80" href="e2.htm">
            <area shape=rect coords="200,0,300,80" href="e3.htm">
            <area shape=rect coords="300,0,400,80" href="e4.htm">
      </map>

Now try to click the various portions, and you will see various files "e1.htm, e2.htm, e3.htm, e4.htm" being displayed.

(Note :

usemap="#map1"
Notice there is a "#" before the name, that means the anchor is within the same document.
But in <map name=map1> there is no "#". Compare this with "link within the same document".
shape=rect
means "rectangle", and "coords='n1,m1,n2,m2'" where (n1,m1) is coordinates in pixel of top-left corner, and (n2,m2) is the coordinates of lower-right corner in pixel.

shape=circ
means "circle", and "coords = 'x0,y0,r'" where (x0,y0) is the centre, and r the radius in pixel.

shape=poly
means "polygon", and "coords ='x0,y0, x1,y1, ...., xn,yn'" vertices of the polygon.

Frames <frameset .... > .... </frameset>

My opinion is that if we are to use HTML as a data-organizational tool (e.g. students, research workers), then we should not use "frames", but if it is to be used for "advertising, presentation tool", then we may use "frame". Reasons are twofold : firstly, "linear in and linear out", using "click" and "previous page" will give us peace of mind. Whereas, if we use "frame", such "linear in and linear out ordering" will be lost. Secondly, our monitor is of size 14 ~ 15 inches mostly, and it is advisable to use full screen.

Exercise :Key in the following file "c:\test\e7.htm"

<frameset cols="30%,70%" border=5> <frame name=lframe src="e1.htm"> <frame name=rframe src="e2.htm"> </frameset>

(Note that if border=0, then there will be no border dividing the frames. Here the border dividing the frames is of 5 pixels wide.) Now view the file "c:\test\e7.htm"

Exercise :Modify the file "c:\test\e7.htm" into

<frameset rows="20%,40%,*" border=5> <frame name=aframe src="e8.htm"> <frame name=bframe src="e1.htm"> <frame name=cframe src="e2.htm"> </frameset>

and also input another new file "c:\test\e8.htm"

        <a href="pic1.jpg" target=bframe>First picture</a><br>
        <a href="pic2.gif" target=cframe>Second picture</a><br>
        <a href="e1.htm" target=bframe>First file</a><br>
        <a href="e2.htm" target=cframe>Second file</a><br>

Now view "c:\test\e7.htm" with "Internet Explorer". When we click "First picture", the picture will be displayed in the "bframe", when we click "Second picture", the picture will be displayed in the lowest frame, i.e. "cframe". Now click "First file", and the file will be restored to the second frame, "bframe". Click "Second file", and the file will be restored to the lowest frame, "cframe"

(Note :

rows="20%,40%,*"
The last entry is "*", this instructs the computer to compute the remaining percentage (=40%) for the third frame. In this way, we avoid making error in arithmetics.
We give each frame a name, "name=aframe", "name=bframe", "name=cframe".
"c:\test\e7.htm" loads three frames. Source file for the uppermost frame is "c:\test\e8.htm", for the other frames, their source files are 'src="e1.htm"', 'src="e2.htm"'
Note the use of "target=bframe", "target=cframe", it tells the computer which frame to display the web page.

Final remarks :

HTML language are specified with tags, <....> </....>
There may be many parameters inside the tag. These parameters are called "properties", and its format is
property-name = string
If "string" is a single word, then no quotation marks are needed. If "string" consists of more than one word, then quotation mark (single quotation mark, or double quotation mark) must be used.
All the files in these exercises are in "c:\test\". But they need not be so, they may be "http://www.abc.com/e1.htm", any file in any server. This address is called URL (=Uniform Resource Locator).
They may also be other services provided by server, e.g. "ftp://....", "gopher://...", "mailto: ....", ....
The common "property-names" used within HTML tags are mostly
1. name=
  (=name of object). This is similar to variable name in Qbasic.
2. align=
  (=alignment). It may be "left, right, center, top, bottom, middle, ...."
3. src=
  (=source file). It may be a local file, e.g. "c:\test\e1.htm" (absolute pathname, or relative pathname), or files in other servers, e.g. "http://www.abc.com/file2.htm", or other services provided by servers.
4. border=
  (=border size in pixel).
5. height=
  (=height in pixels, may also be in percent e.g. 30%)
6. width=
  (=width in pixels, may also be in percent e.g. 30%)
7. hspace=n , vspace=
  (=horizontal space and vertical space to be left around the pictures or objects, in pixels.)
8. background=.gif, .jpg file
  (=filename to be used as background wallpaper.)
9. bgcolor="#rrggbb"
  (= background color in hex, "red, green, blue", "#rrggbb" ).
10. Others ...
  There are properties pertaining to particular "tag". And you may find such in manuals or in reference books.
You may inspect HTML files written by other people. (Within Internet Explorer, click "View -> source code")
Many such HTML files contain "javascript" from Netscape, or "vbscript" from Microsoft, or "Java applets" from Sun-Micro-System, .... You may learn them from books. But I think HTML would already suffice for most of your needs.

Usually a HTML file contains two parts, <head> ... </head> and <body> ... </body> e.g.

        <html>
        <head>
             <basefont face="courier new">
             <title>Qbasic lession</title>
             <meta name="keywords" content="basic, computer, computer language">
             <meta name="description" content="It is a series of lessons on Qbasic for
                         beginners">
             <script language=javascript>
                  ........
                  ........
             </script>
        </head>
        <body>
             .......  (HERE CONTAINS WHAT WE HAVE BEEN CALLING A HTML FILE)
             .......
             .......
             .......
        </body>
        </html>

In all the exercises above, we have omitted <head> .... </head> and <body> .... </body> . But most browser would still be able to display the page.
Also note the use of <basefont face="courier new"> , it means "the basic font to be used through the web page".
There is a tag <font color="#rrggbb" face="font-name" size=[1 to 7] > ... </font> for changing the font of the text being enclosed.

You may add "background wallpaper", and "background sound" as follows,

        <body background="c:\test\pic1.jpg">
        <bgsound  src="c:\test\abc.mid"  loop=infinite> 
             ...........
             ...........
             ...........
        </body>

(You may skip this.)
We haven't discussed "FORM" here. In "FORM", there are "text, (submit, reset) button, ordinary button, radio button, check box, drop-down selection list ...."
"FORM" are for inter-active responses. And to use them, you will have to learn "javascript" (or others, e.g. "vbscript" ...) to do "client-side data validation", also, you will have to learn "C" to write programs for the server to response (It is called "cgi-bin" programs = Common Gateway Interface, "cgi-bin" is the directory containing Binary executable files.")
When a "form" which uses <form action="http://www.abc.com/cgi-bin/filename" method=get> is submitted, the "query_string" will be sent to char* arg[1] of
int main(int narg, char *arg[])
of the C program.
If the form uses <form action="http://www.abc.com/cgi-bin/filename" method=post>
then the "query_string" will be inputted through "stdin" (standard input).
The output of the C program, through "stdout", should be in HTML format, and the WWW server will send the output to the browser.
Hence it is quite convenient to use C for cgi-bin programming.
Nowadays, there are many "server-scripts" appearing, from Netscape, from Microsoft, PERL, PHP, .... But in my opinion, C is the easiest.
There is a book "CGI Internet Programming with C++ and C, by Mark Felton, Prentice Hall" which is quite informative.
Reference Book: HTML The Definitive Guide, by Chuck Musciano, Bill Kennedy.

How to use FTP (=File Transfer Protocol) to upload ".htm" files onto the Home-Page Server

When you subscribe to the service of an ISP, (=Internet Service Provider), usually he will give you certain disk space in his server to store your homepage. Also, there are many free homepage providers on the Internet, you may locate them with search engines like Yahoo, ...

The ISP provider will usually give you a CDROM too, and in the CDROM are browsers (e.g. Netscape or Microsoft's Internet Explorer), "ftp" programs, email programs ... etc. And you should read the instructions and follow them to install the softwares. It is best to have an experienced person with you when installing the software.

"File Transfer Program ("ftp")" is used to upload files to the server. Microsoft's Window Operating System has a "ftp" program, but there is also a free "ftp" program, called "wu_ftp" which you may download (or it may already be in the CDROM from your ISP).

"wu_ftp" is quite intuitive to use. Please ask someone familiar with it to show you how, and you can learn it in a few minutes.

The following illustrates how to use Microsoft's "ftp"

Assume that we have prepared many ".htm" files in the directory "c:\test\". The first file should be something like "home.htm" or "index.htm" and you have to ask your ISP to make sure .

To launch the Microsoft's "ftp" program

Start -> Programs -> Dos Prompt

then type the command

ftp www.abc.com

(Note : "www.abc.com" is an example, your ISP provider will tell you the proper name to use.)

You will be asked your "user name", and "password". (Also, your ISP should have provided you with these).

After you have successfully logged in, you may issue "commands".

The commands for "ftp" are similar to those for "DOS"

mkdir directoryname ( = make directory)
rmdir directoryname ( = remove directory)
cd directoryname ( = change directory. We may use "relative pathname" or "absoulte pathname". Caution: Some ISP will require you make a directory called "public_html" and put all your files there. Then you will have to
mkdir public_html
cd public_html
before uploading files).
cd .. ( = change up 1 level = change to parent directory ).
lcd directoryname ( = local change directory. The "mkdir, rmdir, cd" are done in the server. "lcd" (Local change directory) is executed on our own PC. e.g.
lcd c:\test
because all our files are there.
dir * ( = list all the files in the directory matching the template)
e.g.

dir *.htm

dir *.gif

dir *.jpg

dir Qbasic*.*
pwd ( = path to working/current directory. Tell the computer to print out the "absolute path name" of the directory we are currently in.)
delete filename ( = delete a file)
rename oldfilename newfilename ( = rename a file)
bin ( = tell the computer that all transfer will be in BINARY mode. This command must be used. Otherwise, the transfer will be in ASCII mode, and may cause errors.)
put filename
put filename newname ( = to upload "filename", it may retain its old filename, or it may take a new filename on the server.)
get filename
get filename newname ( = download "filename". Also we may give it a new filename.)
help
help commandname ( = "help" will display all commands of "ftp". We may also tell it to display information about particular commands.)
status ( = tell the computer to display the current status. Is it in "binary mode" or "ascii" mode, is verbose on or off, ...)
bye ( = exit "ftp")

Example

         Start -> Programs -> MSDOS prompt ->
         ftp www.abc.com
         (key in user ID)
         (key in password)
         bin                        (set to binary transfer mode)
         lcd c:\test                ("local change directory" to where we put
                                        the .htm files)
         mkdir public_html          (Some ISP requires user put their files under
                                     the directory "public_html".
                                     This step is not needed if your ISP does not require
                                     this.)
         cd public_html             (change to this directory)
         put home.htm
         put e1.htm
         put e2.htm                 (up-load files)
         put e3.htm
         put e4.htm
         dir *.htm                  (Check if upload is successful?)
         bye                        (exit ftp)
         exit                       (exit "DOS"  operating system, 
                                     and back to "Window" operating system.)

[Home]

<i> .... </i>	(italic)
<u> .... </u>	(underline)
<s> .... </s>	(strike through)
<sup> .... </sup>	(super-script)
<sub> .... </sub>	(sub-script)

How to Write Web Pages(Introduction to HTML)

Heading Tag

Testing, testing, 1, 2, 3

Testing, testing, 1, 2, 3

Testing, testing, 1, 2, 3

Testing, testing, 1, 2, 3

Heading Tag <h1> ,</h1> etc.

Paragraph tag < p > .... </p>

Ordered List

Ordered list <ol> </ol> the numbering will be 1, 2, 3, ... or you may use "type=i, I, a , A" to change it. If you want to start at some number other than 1, you may use, e.g. <ol start=4> , to start from 4.

Unordered List

Description List <dl> .... </dl>

HORIZONTAL RULE <hr>

Paragraph Indentation

Photographs

Sound File

Link

Link within the same document

Nesting

Pre-formatted

TABLES

Table of Male and Female Students

Clickable Picture

Frames <frameset .... > .... </frameset>

Final remarks :

How to use FTP (=File Transfer Protocol) to upload ".htm" files onto the Home-Page Server

Example

How to Write Web Pages
(Introduction to HTML)

Paragraph tag
< p > .... </p>