Community Learning Network
Location: Internet Tools and CD > - Intro to HTML Visitor: Login Printable version
CLN Pages
· Training
· Internet Tools & CD
    - Content Management
    - Intro to HTML
       - HyperLinks
       - Images
       - Tables
       - Web Building Links
       - Appendices
    - Multimedia
    - Skills Inventories
· Community pages
· Home Page

Intro to HTML

Click on the links below to access the information or visit the sub-pages.

Creating HTML

Accents and Diacriticals

About HTML

Viewing the Source

Special Characters

HTML tags

Lists

What is CGI?

Choosing HTML Colours

About HTML
HTML stands for "Hypertext markup language" and is the simple set of codes that are used to define the appearance and functioning of a World Wide Web page. HTML is a constantly evolving set of codes, which are also known as tags.

Do I have to learn this HTML stuff?

If you're not used to computers, some of the information presented here may seem a little daunting. But don't worry! You only need to learn HTML if you decide that your organization wants to write its own Web pages.
If you simply want your group's basic information on the CommunityNet without learning HTML, just register for an account and we will automatically generate a web page with your own URL, name, description of what your group does, address, phone number, fax number and email button from your registration. You don't have to do anything. This single web page can then be edited later if you want to.
However, if you want to build and maintain your own set of pages, this section of the manual is for you! Learning HTML is not much more difficult than learning a word processing program, and can be quite fun. Of course, don't forget that there are also lots of skilled HTML consultants in town to whom you can contract out Web page creation services.

About HTML files.

HTML files are always plain, unformatted text (ASCII) files. Such files can be created with any text editor or word processor or a web editor such as Arachnophilia. If you have a Macintosh you can use SimpleText or TeachText, which come free with your Mac, to edit text files. If you use a Windows PC you can use the Windows Notepad. Other computers have similar free text editors available.
By convention an HTML file will end with the suffix ".html". Also by convention, HTML file names are usually in lower-case. Note that Windows and DOS systems, which have severe file name restrictions, truncate this suffix to ".htm", and often have upper-case file names.
The HTML codes themselves are bracketed with angle brackets <like so>. Anything within angled brackets is assumed to be an HTML tag by the browser and thus is normally not displayed on-screen for the user to see. HTML codes are thus analogous to the codes used by word processors such as Wordperfect. (the "Reveal Codes" function)
This raw HTML - a document marked up with these tags - is called the "source" file. Your browser takes this source file and creates the final marked-up copy for you to read.

Back to top

Choosing HTML Colours

Here is a site which lays out all the HTML colours, and provides the codes for them:

http://www.visibone.com/colorlab/big.html

Back to top

Creating HTML

There are three basic ways to create an HTML file:
  1. The first is to open a word processor or text editor and type in the tags manually. This gives you complete control over the appearance of the document, but obviously requires familiarity with HTML codes.
  2. The second is to use a special HTML editing program such as Arachnolphilia. These programs show you the HTML code that is being produced but help you create lists, paragraphs and links by putting in the correct tags at the click of a button. These programs require basic knowledge of HTML but produce clean pages that are easy to view regardless of browser and also simple to update.
  3. Finally, there are "wysiwyg" editors an acronym for "what you see is what you get". These programs let you manipulate text on-screen, just like a word processor. The editor then generates the HTML code. You have probably noticed that you can save word processed documents to HTML with newer software. These can be easy to use but obviously tend to be somewhat restricting.

    Back to top

Viewing the Source

If you use Lynx, pressing the "\" key lets you view the raw HTML source for a document, which is a great learning tool. Netscape and Explorer and most other graphical browsers have similar "View Source" functions that let you see the unformatted HTML that makes up a given Web page. One of the best ways to learn how Web pages work is to look at a page you like and examine its source.

Back to top

What is a CGI?

CGI stands for Common Gateway Interface. Basically a CGI is a software program or tool that links a Web server with some external service. For example, you might have a little program that keeps track of the number of times your page is viewed. This page counter could be a CGI.

Here at the CommunityNet we make extensive use of CGIs on our system, and provide a small library of free CGIs for the use of any organization that wants one. The CGIs are documented in our Cool Stuff file, at: http://www.vcn.bc.ca/help/guides/coolstuff.html

Back to top

HTML Tags

HTML tags generally have two parts - the opening tag and the closing tag. Take the example below.

This is <B>boldface</B> text!

On a browser this HTML code would look like this:

This is boldface text!

Notice how this works. The opening tag, <B>, tells the browser to make the text boldface. The closing tag, </B> tells the browser to stop using boldface. In other words the attributes of the text between the opening and closing tag are defined by the opening tag.

 

Case sensitivity

HTML is not case sensitive. Therefore <B> and <b> are equivalent tags. HTML is often typed in uppercase for legibility, however. Uppercase tags are easier to spot in a document than lowercase or mixed case tags.

 

<HTML>…</HTML>

Indicates the document is an HTML document. Note that at the very end of the document is a </HTML> tag. This is a closing tag. Most HTML tags are followed by a closing tag. The text between the opening and closing tags is controlled by the opening tag. Think of the text as being within a container.

You don't have to include the <HTML> tag at the start and end of a document, but it's good form to do so.

<HEAD>…</HEAD>

The second tag indicates the header portion of the document. This is also optional, and is generally the section of the document used to store information about the file that's normally not directly viewed by the user, such as the document's title.

 <TITLE>…</TITLE>

Each document should have an informative title explaining its purpose in life. The title of a document is usually displayed at the top of the screen or on the title of the window bar of the browser, separate from the text of the document itself. Any text enclosed in <TITLE> tags is the title. Titles should only be a brief line of text.

 <BODY>…</BODY>

Now the actual document begins! The <BODY> tag is yet another optional tag, but is used to indicate the actual text of the document. This actual text of the document is displayed by the browser.

 

<Comments>…</COMMENTS> OR <!-- -->None.

At times you might want to put a comment into a document that you don't want others to see. For example, you may write the current date into every document so you know when you last changed it. There's no need to make this date visible to viewers, so you could put it in as an HTML comment. <!-- and --> has the same effect. You can only view the text when you view the source for the file.

 

 <META> None

Embeds information about the document. You can use the tag with the following attributes provided you use it within the bounds of the <HEAD> element:

<META NAME = "Description" CONTENT = "a description of page">

This gives a search engine a description to use.

<META NAME = "Keywords" CONTENT = "comma separated keywords">

This gives a search engine help for indexing

 

Headings <H*>…</H*>

HTML supports six levels of headings. These headings are used to separate out important headings from the body of text of a document. To choose a heading level, replace the * with a number between 1 to 6. Here is a top level heading, Heading 1.

<H1>This is the first level heading</H1>

This heading will appear differently depending on what browser you have. Generally, level 1 headings are shown in large bold type onscreen. The remaining 5 headings are shown in correspondingly less dramatic type.

<H2>This is a level 2 heading</H2>

 

<FONT SIZE = "*">…</FONT>

You may specify an absolute height such as <FONT SIZE = "4"> or you may specify a size relative to the basefont using increments <FONT SIZE = "+2">

 

<BIG>…</BIG>

Like the <FONT> tag, this tag enlarges the base font size.

 

<I>…</I>

This is similar to our friend <B>. However the <I> tag italicizes text. At least, it does so in browsers capable of italicizing text. Some browsers can't display italics and so underline the text.

 

<P>

The <P> tag is a paragraph marker, and is a bit different from the preceding tags. Normally HTML documents flow on and on and ignore any carriage returns you may put in. This is totally unlike most word processors. Not only that but your browser will collapse multiple spaces or blank lines into a single space. (you can put all the blank lines - carriage returns - you want into your HTML source file, and it'll appear as a single space when viewed by a browser. Often HTML documents are spacious and use tabs to make it easier to understand them when the time come to change them.)

If you want to indicate a blank line you must use the <P> tag. The closing </P> tag is not essential.

 

<BR>

You've probably noticed that inserting a paragraph break puts in a whole blank line. This is obviously undesirable in some instances, where you simply want a new line to start. The line break tag is used for this purpose. Thus:

Vancouver Community Network<BR>
411 Dunsmuir Street<BR>
Vancouver, BC. V6B 1X4<P>

 

<BLOCKQUOTE>…</BLOCKQUOTE>

Sometimes you'd like to be able to indent text in from the left side of the screen, much as this document does throughout. Unfortunately basic HTML has no provisions for tabbing and so on, but does have a tag called "blockquote".

Block quotes are intended to be used when you quote a sizeable portion of someone else's work. Normally when you do that in a print document the text is indented from the left side. So, by using the blockquote tag you can move things in from the left margin. This is not using the code precisely as it was intended, but it achieves an effect on virtually all browsers, so why not?

 <HR> … Horizontal Rules

Most browsers can draw horizontal lines across the screen. This is one of those tags with no closing tags.

 

 <PRE>…</PRE> Preformatted Text.

Another useful trick is putting in preformatted text. As noted above, your browser will collapse any lines of spaces to a single space, and any blank lines of text to a single space. This can be a problem if you want to display something like a table of text that has been formatted with spaces to make things line up.

The answer? The <PRE> tag, which allows you to insert preformatted text. When you put in preformatted text the browser won't collapse any spaces. Graphical browsers also usually display preformatted text with a typewriter-style font.

<PRE>
          This  is
  preformatted  text.
        Notice  how
    text lines  up?
</PRE>

Back to top

Lists

Unordered Lists

A common element of many Web pages is a list of items, marked with bullets. (dots) HTML can do this for you automatically.

<UL>
<LI>Trees
<LI>Fish
<LI>Doughnuts
</UL>

This code is displayed by the browser like this:

  • Trees
  • Fish
  • Doughnuts

The <UL> tag specifies an "unordered list." The <LI> tag specifies a "list item". And the closing </UL> tag marks the end of the list.

 

Ordered Lists

Sometimes you want numbered lists, though. HTML supports them too!

<OL>
<LI>Combine ingredients
<LI>Bake at 375 degrees until brown
<LI>Cool before eating
</OL>

This becomes:

    1. Combine ingredients
    2. Bake at 375 degrees until brown
    3. Cool before eating

 

Definition Lists

Maybe you want a list of words with their definitions indented and following:

<DL>
<DT>Cube
<DD>a six sided object with planes intersecting at 90 degrees
<DT>Tetrahedron
<DD>a four sided object with each face consisting of an equilateral triangle
</DL>
This becomes:
Cube
a six sided object with planes intersecting at 90 degrees
Tetrahedron
a four sided object with each face consisting of an equilateral triangle

 

Back to top

Special Characters

Since the angled brackets < and > and the quotation mark " have special meaning in HTML, how can you use these characters within a document? Obviously if you were to type an angled bracket into a document the browser would assume you were trying to put in a tag and things would break down.

HTML solves this problem by using "escape sequences". An escape sequence starts with the ampersand (&) character and ends with a semicolon (;). Unlike the rest of HTML, these escape sequences are case sensitive!

In other words, uppercase differs from lowercase.

&lt; is <
&gt; is >
&amp; is &
&quot; is "

Back to top

Accents and Diacriticals

One very useful feature for a "World Wide" Web is the ability to support non-English accents and diacritical characters. Since different computers - PCs, Macs, UNIX systems - all handle accents differently, HTML has its own way. HTML accents are similar to special characters. Here are a few HTML diacriticals used in French.
  • &ccedil; is a lowercase c with a cedilla. Français.
  • &eacute; is a lowercase e with an acute accent. Café
  • &ecirc; is a lowercase e with a circumflex accent. Fenêtre.
  • &egrave; is a lowercase e with a grave accent. Brève.

For a complete list of all the non-English diacritical characters, check this URL:

http://www.vcn.bc.ca/help/guides/latin1.html

Back to top