[Computer Science]

[HTML]

Lists: If you need a list where order isn't important, then you can use the <UL></UL> tags (UL stands for unordered list):

<UL>
    <LI>pencils
  • pencils
    <LI>crayons
  • crayons
    <LI>erasers
  • erasers
</UL>

Note that the <LI> does not have an ending tag. You can edit the type of bullet (the little symbol before your word, usually a little round dot) by changing the <UL> tag to show the type (as in <UL TYPE="round">); note that the </UL> does not change. The default is circles.

circles: <UL TYPE="circle">
  • circle
squares: <UL TYPE="square">
  • square
discs: <UL TYPE="disc">
  • disc

If you need an ordered list, you can use numbers, letters, etc.:

<OL>
    <LI>pencils
  1. pencils
    <LI>crayons
  1. crayons
    <LI>erasers
  1. erasers
</OL>

As above you can change the opening tag, <OL>. The default is numbers.

lower case letters: <OL TYPE="a">
  1. Lower case letters
upper case letters: <OL TYPE="A">
  1. Upper case letters
lower roman numerals: <OL TYPE="i">
  1. Lower case numerals
upper roman numerals: <OL TYPE="I">
  1. Upper case numerals
[Typical JPG Image]
A Typical JPG Image
[Typical GIF Image]
A Typical GIF Image

Images: When you insert an image, you don't need an ending tag because you are only inserting a file, not surrounding a text.

<IMG SRC="directory/file.gif">	
    OR	
<IMG SRC="directory/file.jpg">

A GIF has 256 colours and a JPG has 16 million. The JPG uses a compression program and guesses the colours given a starting colour and an ending colour. A JPG is mainly used for representing real life pictures where there is a lot of fading into other colours. A GIF is good for animation pictures and colours that switch from one colour to another colour suddenly.

Links: If you want links that make words or images clickable, use these tags:

<A HREF="http://vv.carleton.ca">Virtual Ventures</A>
    OR
<A HREF="http://vv.carleton.ca"> <IMG SRC="vv/vv.gif"> </A>

You can insert a link to a URL, a telnet, an ftp, a gopher, a file, etc. into your document using the <A HREF=" "> tag. For example, if you wanted to link to a telnet connection, you would type <A HREF="telnet://telnet.ncf.carleton.ca">Telnet to Ottawa's National Capital Freenet</A>.

To allow people to click on text or pictures and be able to e-mail you immediately, type the following tag:

<A HREF="mailto:director@vv.carleton.ca">Click here to e-mail</A>

Colour: You can change the background or the text colour of a web page using red-green-blue (RGB). This system works on hexadecimal, a numbering system with base 16. Our normal numbering system is called "decimal" and it has 10 digits: 0123456789. Another common computer numbering system is called "binary" and it works with only two digits, 1 and 0. In hexidecimal, you have digits 0 to 9 and A to F (where A to F represents 10 to 15) - 16 different characters (0123456789ABCDEF) instead of 10.

You must always have 6 numbers/letters from the hexadecimal code system. The first two digits (either numbers or letters) represent the amount of red in the colour. FF0000 would be red. The next two letters or numbers represent green, so 00FF00 is green. And finally, the last two letters represent blue, so 0000FF would be blue. (FF is the biggest number that can fit into those two digits.) FFFFFF would mean white (all the colours at full strength) and 000000 would mean black (no colours). Here are some other colours to give you an idea of how it works:

Table of Colours
#000000 #FF0000 #FF7F00 FFFF00
#5C4033 #8E2323 #FF8000 #EAEEAA
#9932CD #4D4DFF #ADEAEA #A0FFA0
#FF00FF #0000FF #00FFFF #00FF00

Note: When you change colours in HTML, you must use the word color (the American spelling) rather than the word colour (the Canadian and British spelling).

Backgrounds: You can change the background colour of your page by inserting a command inside the <BODY> tag.

<BODY BGCOLOR="#000000">

You still end the page with </BODY>.

You can also insert images for backgrounds. You should make sure that there is a pattern within the image, or the background may look strange.

<BODY BACKGROUND="file.gif">

Text Colour: You can change the text colour throughout the whole page by inserting the following command inside the <BODY> tag. Make sure that there is space between each command in the <BODY> tag.

<BODY TEXT="#35A4F1">

You can also change the colours of the links (default is blue) by inserting the following tag:

<BODY LINK="#123456">

You can change the colour of a visited link (vlink) and an active link (alink) with the following tags:

<BODY VLINK="#654321" ALINK="#524316">

You can also change the colour of the text anywhere in the document by inserting the following tags:

<FONT COLOR="#FFF123">Words</FONT>
[Conclusions:]
Now you've learned enough HTML to create your own web pages. If you want to work on more complex pages, you might consider taking a look at our list of more HTML tags to see what other things you can do with HTML. Make sure to experiment with lots of different ideas to see what sort of results you can get. If just reading tags from a list isn't quite your style and you prefer this tutorial style which explains things in more detail, there are many good tutorials online which will cover more of the tags. (Just do a search for "HTML Tutorial" to find some. One online tutorial can be found at http://www.cwru.edu/help/introHTML/toc.html.) There are also many good books available from your library or bookstore.

Perhaps the most important site related to HTML is run by the World Wide Web Consortium. It is the organization that helps to define the standard for HTML. You may notice, as you look around, that some tags work only for certain browsers. The W3C defines which tags should work in all browsers. Their site, http://www.w3.org/, has all kinds of information about HTML which can be really useful when you are trying to set up a web site of your own.

Two major web browsers, Netscape Navigator and Microsoft Internet Explorer, have added some of their own extensions to HTML. You can learn about these at their sites. Microsoft Internet Explorer's site is available at http://www.microsoft.com/ie/. Netscape Navigator's is at http://www.netscape.com/. (Netscape's developer site is available at http://developer.netscape.com/ and they link to some HTML-specific stuff, including a tutorial here.)

Have fun learning more and creating more pages! Once you feel confident in your skills using HTML, you might like to offer to set up a website for someone. Perhaps your local community centre would like help putting their programs online? Or maybe the Boy Scouts or Girl Guides in your area would like help setting up a new website? Or maybe your school would let you get together a bunch of students and teachers to set up a site? It never hurts to ask! This is not only a nice way to help out, but it will also give you a chance to use your skills and increase your abilities.

[Back]

[Home][Canadian Scientists][Credits][Français]

Physics | Chemistry | Biology | Engineering | Computer Science | Understanding Science and Technology

Produced by Galactics.
Comments: galactics@spacesim.org.
Last updated on 14 August 1998.