Internet

The basics of HTML

What is the programming language for creating a web page on the Internet?

The Internet publishing/programming language that makes it all happen as far as creating fancy web pages are concerned is called the HyperText Markup Language (or HTML).

Is it hard to create a web page using HTML?

Many newcomers to the world of web page designing often believe it is hard to build a web page because HTML is too complicated.

While many dedicated HTML editors like Macromedia Dreamweaver 3.0 have helped many people to create web pages by taking out much of the memory work of learning most (if not all) of the HTML codes, we will attempt to make it easy for you to understand the language in this section. We will show that anyone can create a web page using HTML with the help of any simple word processing application.

And the advantage of doing so is that you can easily tweek all your commercially-produced HTML pages to suit your specific needs as well as to get rid of any extra garbage from the HTML files you don't need and so make for smaller and easier to download HTML files for your readers.

The basic structure of a HTML file

The basic structure of any well-constructed HTML file is shown below:

<html>
<head>
<title>title of document</title>
<meta name="copyright" content="Who owns this page?">
<meta name="author" content="Who wrote this rubbish?">
<meta name="publisher" content="Who published the page?">
<meta name="generator" content="The software you used">
<meta name="robots" content="all">
</head>
<body text="#text colour" bgcolor="#background colour" background="graphic.jpg" link="#link text colour" vlink="#followed link text colour" alink="#active link text colour">
[ Write what you want to say here ]
</body>
</html>

Looks like goobledygook to you? Relax. It is really quite simple. The HTML command <html> tells an Internet browser to read everything between <html> and </html> as HTML; otherwise HTML commands we implement in the file may not get noticed or fully activated within an Internet browser.

The HTML command <head> and everything inbetween is optional and will not be displayed in your web pages. It is there (i) to help the reader to look at your file in detail so they can find out who is the author and title of the document; (ii) to set an overall design style for the text of the web page; and (iii) to assist other people to find your web page or file using a search engine.

Now whatever you wish to display on an Internet browser for your readers to read or look at is typed between <body> and </body>. How this information should actually be presented in an Internet browser is set by the parameters specified inside <body....>. For example, a picture can be inserted into the background using the command:

background="graphic.jpg"

where graphic.jpg is the name of your graphic file.

Remove the appropriate parameters of text/background colours if you want your readers to use the default colours of their own browser. At any rate,

text="#color"
sets the standard colour of the text.

link="#color"
sets the colour of links yet to be visited

vlink="#color"
sets the colour of links already visited

alink="#color"
sets the colour of the links at the moment the user clicks on them.

Finally, the following HTML commands to be discussed will provide the finishing touches you may need to make your web page look good, and thus are not critical to learn if you so desire.

Colours in HTML

All colours specified in an HTML document (e.g. vlink="#rrggbb") are given in hexadecimal numbering mode. The code is of the form #rrggbb. In other words, rr is the red component in hex, gg is for green, and bb for blue. The hexadecimal codes for the most common colours are as follows:

Red
Black
Blue
Green
Yellow
White
Orange

#FF0000
#000000
#0000FF
#00FF00
#FFFF00
#FFFFFF
#FFA800

However, remembering these hexadecimal numbers can be a bugger to remember sometimes. So we recommend typing in the following codes:

Red
Black
Blue
Green
Yellow
White
Orange

RED
BLACK
BLUE
GREEN
YELLOW
WHITE
ORANGE

You can also use "PURPLE", "VIOLET", "BROWN" as well. For example, if you type <FONT COLOR="PURPLE">Hello</FONT> you will get Hello.

For a more comprehensive range of colours, you may need to download from the Internet a freeware utility to help you determine the hexadecimal number for almost any colour imaginable.

Or here is a table of colours for you to select:

#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003366 #003399 #0033CC
#0033FF #006600 #006633 #006666 #006699 #0066CC
#0066FF #009900 #009933 #009966 #009999 #0099CC
#0099FF #00CC00 #00CC33 #00CC66 #00CC99 #00CCCC
#00CCFF #00FF00 #00FF33 #00FF66 #00FF99 #00FFCC
#00FFFF #330000 #330033 #330066 #330099 #3300CC
#3300FF #333300 #333333 #333366 #333399 #3333CC
#3333FF #336600 #336633 #336666 #336699 #3366CC
#3366FF #339900 #339933 #339966 #339999 #3399CC
#3399FF #33CC00 #33CC33 #33CC66 #33CC99 #33CCCC
#33CCFF #33FF00 #33FF33 #33FF66 #33FF99 #33FFCC
#33FFFF #660000 #660033 #660066 #660099 #6600CC
#6600FF #663300 #663333 #663366 #663399 #6633CC
#6633FF #666600 #666633 #666666 #666699 #6666CC
#6666FF #669900 #669933 #669966 #669999 #6699CC
#6699FF #66CC00 #66CC33 #66CC66 #66CC99 #66CCCC
#66CCFF #66FF00 #66FF33 #66FF66 #66FF99 #66FFCC
#66FFFF #990000 #990033 #990066 #990099 #9900CC
#9900FF #993300 #993333 #993366 #993399 #9933CC
#9933FF #996600 #996633 #996666 #996699 #9966CC
#9966FF #999900 #999933 #999966 #999999 #9999CC
#9999FF #99CC00 #99CC33 #99CC66 #99CC99 #99CCCC
#99CCFF #99FF00 #99FF33 #99FF66 #99FF99 #99FFCC
#99FFFF #CC0000 #CC0033 #CC0066 #CC0099 #CC00CC
#CC00FF #CC3300 #CC3333 #CC3366 #CC3399 #CC33CC
#CC33FF #CC6600 #CC6633 #CC6666 #CC6699 #CC66CC
#CC66FF #CC9900 #CC9933 #CC9966 #CC9999 #CC99CC
#CC99FF #CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC
#CCCCFF #CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC
#CCFFFF #FF0000 #FF0033 #FF0066 #FF0099 #FF00CC
#FF00FF #FF3300 #FF3333 #FF3366 #FF3399 #FF33CC
#FF33FF #FF6600 #FF6633 #FF6666 #FF6699 #FF66CC
#FF66FF #FF9900 #FF9933 #FF9966 #FF9999 #FF99CC
#FF99FF #FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC
#FFCCFF #FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC
#FFFFFF

Changing Background Colour

To change the background colour of the browser when your HTML document is opened, insert the hexadecimal number in the HTML command <body bgcolor="..."> between the inverted commas like so,

<body bgcolor="#FFFFFF">

Changing Text Colour

The text colour for an entire HTML document can be set by inserting the hexadecimal number in the HTML command <body text="#rrggbb"> between the inverted commas. Otherwise, completely remove text="..." from the <body...> command for default colour (i.e. which is normally black).

To change the colour of text anywhere in an HTML document:

<font color="#text colour">text</font>

Line Break

To position text on a new line, place a <BR> just before it or just after the end of the previous text. For example,

text1<BR>text2

text1
text2

Paragraph Break

To position text as a new paragraph with one line space after the previous paragraph, place a <P> just before the new paragraph or after the end of the previous paragraph. Note that <P> is equivalent to two <BR>. That is,

<P>=<BR><BR>

Lists

(i) To create a standard, unordered text list in dot/bullet form:

<ul>
<li>text1</li>
<li>text2</li>
</ul>

  • text1
  • text2

Continue with the pattern,

<li>text3</li>
<li>text4</li> etc.

until all the information has been added to the list. The HTML command <li> and ending with </li> simply tells a browser to treat the information between them as a text list, meaning that it should be indented to the right slightly and a dot placed in front of it. The commands <ul> and </ul> tells a browser where a text list begins and ends, respectively.

(ii) To create squares instead of dots in a text list:

<ul type=square>
<li>text1</li>
<li>text2</li>
</ul>

(iii) To create open circles for dots in a text list:

<ul type=circle>
<li>text1</li>
<li>text2</li>
</ul>

(iv) To create a text list in numbered mode:

<ol type=A start=number1>
<li>text1</li>
<li>text2</li>
</ol>

where A is either A, a, I or i and number1 starts the numeration.

A: A, B, C,...
a: a, b, c,...
I: I, II, III, IV,...
i: i, ii, iii, iv,...

For numbers only (i.e. 1,2,3,...) remove the command type altogether.

(v) To create a text list in menu mode with a custom icon in front of the text (not supported on all browsers):

<menu dingbat="icon.gif">
text1<BR>
text2
</menu>

Character/Text Styles

(i) To place a character or text in superscript mode:

<sup>text</sup>

(ii) To place a character or text in subscriptmode:

<sub>text</sub>

(iii) To strikethrough a character or text with a line:

<strike>text</strike>
or
<s>text</s>

(iv) To make a character or text blink on-and-off:

<blink>text</blink>

(v) To turn plain text into bold:

<b>text</b>

(vi) To turn plain text into italics:

<i>text</i>

(vii) To turn text into a fixed width font:

<tt>text</tt>

(viii) To change the colour, size and font type of any text:

<font size=number1 color="#textcolour" face=font1, font2, font3,...>text</font>

where number1 specifies the size of the font; #textcolour the hex code for the colour of the text; and font1, font2, etc for the name of the font for displaying the text, assuming of course that the font is available on another person's machine. If the font type is not available, the browser will use font2, font3 and so on. This changing of font face may not be available on earlier browsers, including Netscape 2.02.

(ix) To turn text into a blockquote (especially useful for positioning long quotations on a separate paragraph):

<blockquote>text</blockquote>

(x) To change the font size of a character or text:

<font size=n>text</font>

where n is an integer between -2 and +4 inclusive. The font size is largest when n=+4. Note also that,

<font size=0>text</font>

is equivalent to,

text

In other words, you don't need the HTML tags at all.

(xi) To create bold-type headings of various font sizes:

<hn>text</hn>

where n is an integer between 1 and 6 inclusive. <h1> produces the largest heading, but an even bigger heading is possible by doing the following:

<h1><font size=+4>text</font></h1>

However, a new HTML tag has become available under version 3.0 to create big text on a browser:

<big>text</big>

For really small text, use:

<small>text</small>

Special Characters

Special characters can be inserted as &#ascii or as &code. For a comprehensive table of special characters you can insert into an HTML document, click here.

Character/Text Alignment

(i) To force the alignment of text, pictures and other contents to the right, left or center of a page:

<div align=alignment>text</div>

where alignment is either left, center or right.

(ii) To align ordinary text in the centre of a page:

<center>text</center>

(iii) To align text to the left side of a page, just place text normally on a page - no need for any HTML alignment commands for this one!

(iv) To indent text to the right:

<ul>text</ul>

To indent text to the right again:

<ul><ul>text</ul></ul>

Keep repeating the <ul>....</ul> pattern to indent text further to the right.

(v) To define the left and top margin of a page in pixels for text and other information to begin:

<body leftmargin=number1 topmargin=number2>

Horizontal Lines

(i) To insert a standard horizontal line on a page:

<hr>

(ii) To place a horizontal line of a different size and width on a page:

<hr size=number1 width="number2%">

where number1 is a positive integer that determines the thickness of the line and number2 is a positive integer between 0 and 100 which determines the width of the line. A positive integer can also be used in place of the percentage when specifying the width of the horizontal line in pixels.

(iii) To create a solid horizontal line (i.e. with no 3D shading effect):

<hr noshade size=number1 width="number2%">

For example,

<hr>

<hr noshade>



(iv) To align the horizontal bar either left or right:

<hr align=alignment>

where alignment is either left or right.

Images

(i) To insert an image into an HTML document:

<img src="filename">

where filename is the name of the image file (either in gif or jpeg format, it does not matter). Type this HTML command anywhere in your HTML document where you want the image to be placed, so long as the image file is in the same folder as where the HTML document is located. If the image file is in another folder:

<img src="/foldername1/foldername2/.../foldernameN/filename">

Where the image is located outside the folder containing your web page and other images, type:

<img src="../foldername/filename">

(ii) To display a preview of the picture in a document while the page is being loaded first before the main source picture is acquired:

<img lowsrc="filename">

(iii) To change the height and width of the image:

<img src="filename" height=number1 width=number2>

where number1 and number2 are positive integers specifying the pixel size of the image. The height and width of an image can be specified as a percentage of the actual picture size. Just use:

<img src="filename" height="number1%" width="number2%">

(iv) To align an image on a page:

<img src="filename" align=alignment>

where alignment=left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom. Note that the use of the words left or right as the alignment code will cause text to wrap around the image when viewed with a browser like Netscape Navigator.

(v) To increase the amount of space on the top and bottom and left and right of an image:

<img src="filename" hspace=number1 vspace=number2>

where hspace is the extra space in pixels to be placed on the left and right side of an image; and vspace is the space in pixels on the top and bottom of an image.

(vi) To create a border around an image:

<img src="filename" border=number>

(vii) The filenames given for your Internet images need not always have to have the.gif or.jpg extension to work. But to make it easier for you and other people to know what type of image format you use (especially for PC users), it is customary to include the extensions for convenience.

Links

(i) To link text to an image file or another HTML document named nextpage:

<a href="nextpage">text</a>

If the file or document is located in another folder, use the same technique to locate the file as you would when placing images in an HTML document (see Images). To link to an email address, use:

<a href="mailto: mymailbox@anywhere.com">my mailbox</a>

(ii) If a specific image called filename is to be linked with another HTML document/page or image file:

<a href="nextpage"><img src="filename"></a>

(iii) To link text or images to some point on the same page, you need to create an anchor at that specific point. Position the cursor to where you want the anchor to be and type the following command:

<a name="anchorname"></a>

Now link the text or image to the anchor on the page by doing the following:

<a href="#anchorname">text</a>

By clicking on this linked text, you will be immediately transferred to the anchor position.

(iv) To embed a quicktime movie file on a page for viewing:

<embed href="movie.qtr" height=number1 width=number2>text</embed>

Use <noembed href="movie.qtr">text</noembed> if you just want text to be displayed only for a reader to decide whether or not to view the movie file. This command may not work on many of the earlier browsers, including Netscape Navigator 2.02.

Selecting fonts for your text

To change the typeface of your text with a font of your choosing, do this:

<font face="Arial">text</font>

If you are not sure whether the reader will have the font you are looking for, you may include alternative fonts in your HTML tag like so:

<font face="Arial, Verdana, Helvetica">text</font>

This means your preferred font to display the text should be in Arial, but if that is not available, choose Verdana, or instead go for Helvetica as a last resort.

NOTE: Please remember, this feature may not always work. For instance, your readers may not have the fonts on their computer. Or they may have selected their preferred fonts in the Internet Browser preferences section. When choosing fonts, try to select the ones most likely to be available on most computers (e.g. Arial, Times, Times New Roman, Helvetica etc).

Tables

(i) To create a simple 2x2 table consisting of four cells arranged as two rows and two columns with a basic border, cell spacing and cell padding in pixels:

<table border=number1 cellspacing=number2 cellpadding=number3>
<tr>

<td>text or images for first cell in first row</td>
<td>text or images for second cell in first row</td>

</tr>
<tr>

<td>text or images for first cell in second row</td>
<td>text or images for second cell in second row</td>

</tr>
</table>

Use the repeating combination of <tr></tr> and <td></td> for any number of rows and columns for the table. The command <tr> simply tells a browser to treat all text between <tr> and </tr> as a row of information in the table, whereas the command <td> tells a browser to treat all text between <td> and </td> as a column of information in the table.

(ii) To create a basic 2x2 table with a fixed width as a percentage of the main page:

<table border=number1 cellspacing=number2 cellpadding=number3 width="number4%">
<tr>

<td>text or images for first cell in first row</td>
<td>text or images for second cell in first row</td>

</tr>
<tr>

<td>text or images for first cell in second row</td>
<td>text or images for second cell in second row</td>

</tr>
</table>

(iii) To change the background colour of the table, border colour and place a caption on top of the table (up to the width of the table only):

<table border=number1 cellspacing=number2 cellpadding=number3 bgcolor="background table colour" bordercolor="border colour" bordercolorlight="light shadow colour" bordercolordark="dark shadow colour"> <caption>This is the caption for the table</caption>
<tr>

<td>text or images for first cell in first row</td>
<td>text or images for second cell in first row</td>

</tr>
<tr>

<td>text or images for first cell in second row</td>
<td>text or images for second cell in second row</td>

</tr>
</table>

Note that to place the caption below the table:

<caption align=bottom>Caption for Table</caption>

(iv) To align information inside the cells of a table:

<table border=number1 cellspacing=number2 cellpadding=number3>
<tr align=alignment valign=verticalalignment>

<td align=alignment valign=verticalalignment nowrap colspan=number 4 rowspan=number5 width=number6>text or images for first cell in first row</td>

</tr>
</table>

where alignment=left, right or center; verticalalignment=top, middle, bottom, or baseline; nowrap prevents the browser from wrapping the cell contents; number4 allows the cell to go over more than number4 columns, normal is 1; number5 allows the cell to go over more than number5 lines, normal setting is 1; and number6 fixes the width of the cell.

(v) To display the contents of a cell in bold, use <th...> instead of <td...> in a table. The HTML command stands for "table header".

(vi) Do you want the list items to be plainly numbered? Or do you want Roman numerals or bullets displayed as squares or circles? The options are:

<OL>

List items will be numbered beginning with 1.

<OL type="I">

List items will be numbered using capital Roman numerals.

<OL type="i">

List items will be numbered using lower-case Roman numerals.

<OL type="A">

List items will be sequenced using capital letters.

<OL type="a">

List items will be sequenced using lower-case letters.

<UL>

List items are displayed with bullets.

<UL type ="square">

List items are displayed with square bullets.

<UL type ="circle">

List items are displayed with open circular bullets.

Frames

Frames only works with Netscape Navigator 2.0 or higher and Microsoft Internet Explorer 3.0 or higher.

(i) To insert a column on the left-side of a page for information and two rows on the right-side of the page for other information with scrolling tools for each one as default:

<frameset cols="number1,*">
<frame src="file1.html" marginheight=number2 marginwidth=number3>
<frameset rows="number4,*">
<frame src="file2.html" marginheight=number5 marginwidth=number6>
<frame src="file3.html" marginheight=number7 marginwidth=number8>
</frameset>
</frameset>

 

where numbers for marginheight and marginwidth are positive intergers specifying how far inside a frame (in pixels) the information from a given file is to display itself; and number1 and number4 are positive integers specifying the width and height of the frames respectively from the left-side and top end of the browser's window.

(ii) To remove the scrolling tool:

<frame src="file1.html" scrolling="no">

(iii) To remove the resizing of the frame option for readers:

<frame src="file1.html" noresize>

(iv) For browsers that do not support a frame facility, include at the end of your frame commands the following:

<noframe>
Alternative information for browsers having no frame facility.
</noframe>

What names can I give to my HTML files?

When you have finished creating your masterpiece, save it using almost any name you like. The only limitations are the length of the file name set by your computer's operating system, and to avoid using special characters on the keyboard like &, % or <, or even the "spacebar" to create spaces in the file name otherwise your file will not be seen by an Internet browser.

It is also customary for people to include the ".htm" or ".html" at the end of HTML file names and ".gif", ".jpg" or ".jpeg" for GIF and JPEG graphic file images. Why? So that anyone using Windows/PC computers can quickly determine whether the files are HTML or a graphic as well as making it easier for Internet browsers running on a PC to see the files straight away.

When naming files, keep it simple and concise for quicker downloading of other files that link up to it. But don't use something like 2.HTM. Name files in a meaningful way (e.g. PETER.HTM). It will help you later to know what the files mean should you decide to make modifications to them in the future.

Will HTML guarantee my web pages will look exactly as I have created it on other people's computer monitors?

The HTML commands you have just read are common enough for Internet browsers to display the information in just about any way you intend it. We say just about because each Internet browser will have a slightly different way of displaying information depending on the type of HTML tags you use.

For example, the inclusion of a simple border around a table using the BORDER=x HTML tag may look nice in Microsoft Explorer 4.0 or higher, but pretty ordinary (if not down right ugly) on Netscape Navigator 4.0 or higher. There is little you can do about this other than try to compromise a little and find a design that looks acceptable in both browsers.

Then there are the preferences set by people using their own Internet browsers to determine how the information will finally appear on their computer monitors. For example, you may choose to use the Arial font in your web page and state it explicitly within your HTML file that this is what you want. However, a visitor who will look at your site may choose to set their Internet browser to display text only in the Times New Roman font which is a very different look and could spoil your original design.

Again there is little you can do about this other than develop a good design to make your information look good under almost any condition. But remember, don't get too carried away with HTML as there are limitations in what you can achieve from this simple web publishing language.

You will also discover during your experimentation with creating web pages using HTML how unforgiving the language can be. If you leave out just one > sign in any of your HTML codes, it can throw out your web page design completely.

Or even typing the word <CENTRE> instead of the American version <CENTER> can easily spoil your design.

Not to mention how difficult it can be to find the culprit responsible for stuffing up your design in a relatively large HTML file. That's why we recommend downloading a shareware or freeware utility from the Internet that is specifically designed to check your HTML code for errors.

In essence, whatever HTML tags you use in your web page, remember to keep them simple, use commonly known HTML tags, and design your web page so that your readers can still enjoy reading your information despite their choice of browsers, or the preferences they may choose on how they want to view your information.