Index
Introduction

Basic HTML

Contents

 Anchors, Links, and Images

What is HTML?

 HTML stands for Hypertext Markup Language. If you ask a technically inclined person, they might tell you that it is a text formatting language used on the World Wide Web. From a layperson's point of view, it is a series of codes used to put information on a "home page" on the Internet. Who is correct? Both.

Why is it used with Chebucto Community Net?

HTML is format for all documents on CCN. HTML describes the logical structure of the document, not its appearance, and the way the document is displayed depends on the browser you're using. There are two types of browsers available: text based and graphical. Lynx is text based and cannot view graphics. It is the interface most CCN users see when they dial up. Netscape, as one example is graphical. Netscape is used on the Public Access Terminals which can be found at the Halifax City Regional Library. HTML source code should be written so that it looks good on both types of browsers. It is used on CCN because it is the format of most documents used on the World Wide Web.

Tell me more about these HTML codes

If you've ever used WordPerfect, you may have seen "reveal codes". Looking at "reveal codes" will show codes used to format the document. It is a similar concept for HTML. For example, to bold a phrase in HTML, the following code might be used.

<strong>This text is in bold</strong>

The output would look like this: This text is in bold

All that is required to format the text are the codes between the < sign, and the > sign. So <strong> is considered a code, commonly known as a tag. A pair of tags, such as <strong> and </strong> is known as an element. One thing to note is that in paired tags, the indicaters for the beginning tag are < and >. The indicaters for the ending tag are </ and >.

There are many examples of tags and elements used in HTML. Some tags are used by themselves, such as <p> and some are used as a pair, such as <em> </em>. In Lynx, the HTML source code can be seen by pressing the '\' key.

Also note that what you see is not always what you get. Bold text in Netscape may not be bold in Lynx. A bulleted list in Mosaic might not be the same as one in Netscape even though the codes are the same. All codes are dependent upon how your browser wants to interpret it.

Models for an HTML Document

If you have done a bit of web browsing, you'll notice that an HTML document has structure, much like books or any reading material. Just looking at this page will reveal that it contains paragraphs, section headings, and lists. Links to other documents are also important, they are covered later on.

Back to contents

The Minimal HTML Document

It is recommended that every HTML document should have a basic structure.

First, in order to be an html document, and for tags to work properly, the file must be named with an html extender, as in filename.html

From the name, the browser knows it is an html document, and will follow the HTML rules in displaying the contents.

While documents will display HTML without them. it is also recommended that every HTML document should include the following standard tags:

<html>
<head>
<title> </title>
</head>

<body>

</body>
</html>

This is a convention that helps the many different browsers used by others to interpret your HTML document properly. Some modern browsers appear about to begin using these standard tags to position important parts of their code, and in future may not work properly on files that do not have them.

Should you include them? One prolific HTML author says Yes! He says he doesn't want to have to go back and put them in each of his 200-300 pages if one day he finds a new browser will not read his files.

In Lynx the title element will display the title text in the upper right corner of the screen, a useful reminder for viewers.

The other elements are used to denote different parts of the HTML document. The <html> and </html> tags identify everything between them as being formal html code. It is expected some future browsers will place certain commands outside these tags.

Usually, the only thing appearing in the Head portion is the title. Generally, all of the actual text and HTML formatting is in the Body section.

Back to Contents

How HTML Places Text

This simple page will be used to show how HTML positions text on a screen display.

To illustrate, we will use only the <p> tag, or paragraph tag.

It puts a blank line between blocks of text, to separate them into two paragraphs. If there were no <p> tag, there would be no separation. It would all be one paragraph

When a browser like Lynx opens an HTML file (one with a name like filename.html) it automatically reads and adjusts all the text.

Every space between characters, no matter how large, is reduced down to a single blank space one character wide. If there are six blank lines between two words, they will be compressed into one single space.

If tabs were inserted, each reduces down to one space. If several tabs in a row contained no data, all would reduce down to one space. Carefully positioned text with several spaces between words, would each close up to a single space between each word.

End-of-lines are ignored. With a nice vertical list of words, the remainder of each line will be reduced to a single space. 

A
list
like
this
will
become
a
single
line
of
text,
with
one
space
between
each
item.
Note that Paragraphs are automatically filled, or justified, following the <p> tag. Two sentences with 5 returns between them would still display in the same paragraph.

Note also that HTML tags can be either upper or lower case, or a mixture. It doesn't matter which. Some html authors prefer writing all tags in upper case so they can more easily be seen in lengthy documents.

Back to Contents

Simple HTML Tags

A line break <br>is used when you want to start a new line, but don't want the extra white space that is used to separate paragraphs. Here is an example:

Some Company Inc.
1234 Anywhere Street
Smalltown, NS
OXO XOX

Italics <em> </em> and boldface <strong> </strong> can be used to emphasize text. You may also have seen <i> </i> used for italics and <b> </b> used for boldface. The former is more correct because it allows the browser to interpret what "strong" and "em" mean. For example, Lynx does not support italics and "em" may mean something else, such as underline or a differnt color on your terminal

Finally, the horizontal rule <hr> is useful for drawing horizontal lines to separate the parts of your document. Here is an example:

This is often used to separate different sections in a document.

Back to Contents

Headers

There are six different headers in HTML.

Viewed with a graphics browser, header 1 is the most prominent, and header 6 is the least prominent. Header one is displayed in a very large font, while 6 is displayed in a tiny one.

Lynx has only fixed-size fonts, so it cannot change the size for emphasis. Instead, Lynx shows the Headers in different positions on the screen, to show their relative importance.

Viewed with Lynx, Header 1 is automatically centered.

The others are all offset from the left side of the screen, Header 2 is nearest the left edge and Header 6 is offset most.

Usually, only headers 1 through 3 are used. Headers are used as headings for various sections of a document. They help keep the document organized for the viewer.

This is an example of a

header 1

This is an example of a

header 2

This is an example of a

header 3

This is an example of a

header 4

This is an example of a
header 5
This is an example of a
header 6

Back to Contents

Unordered Lists

Unordered lists are used to achieve a bulleted list effect. Here is an example of an unordered list:

Different browsers will display bullets differently. You cannot control that.

To create an unordered list you need to use the <ul> </ul> tag. This tells the browser that this is an unordered list. For every item on the list you need to use the <li> tag to tell the browser that this is a list item.

So the previos list would be:

<ul>
<li>Apples
<li>Oranges
<li>Peaches
<li>Bananas
</ul>

You can create nested lists; notice how they are indented:

For each nest you create it must begin with an Unordered List tag, and later must be turned off with the ending tag. Typing the lists already indented makes it easier to keep track of these beginning and ending tags. You just glance straight down the source page to find matching <ul> and </ul> tags.

Back to Contents

Ordered Lists

Here is an example of an ordered list:

  1. Wake up
  2. Get dressed
  3. Eat breakfast
  4. Go to work
Each item in the list is numbered.

An ordered list works similar to an unordered list, except you use the <ol> </ol> tag instead of the <ul> </ul> tag. List items inside the list still use the <li> tag.

You can also nest ordered lists.

  1. Wake up
  2. Get dressed
  3. Eat breakfast
  4. Go to work
    1. Turn on computer
    2. Make coffee
    3. Check email
Ordered lists can be used to dynamically number items. Be careful with their use because users may confuse the numbers with numbered links in Lynx.

Generally, It is recommend that you DO NOT use ordered lists.

If you need to nest ordered lists, nesting unordered lists withen ordered lists may be a solution.

Back to Contents

Definition Lists

Definition lists (sometimes called description lists) look like this:
Nova Scotia
This Canadian province is almost entirely surrounded by water: Atlantic Ocean to the east and south, Bay of Fundy to the west, and Northumberland Strait to the North. Halifax is a major shipping port.
Ontario
Canada's largest province is in the middle of the country, but has excellent shipping. The St Lawrence Seaway gives access to the Atlantic Ocean, and large bulk carriers travel on as far as Thunder Bay for shipments of grain and ore.
Saskatchewan
A Western province that is landlocked. Wheat is shipped by rail across Manitoba to the Port of Churchill on Hudson's Bay, and to grain terminals in Thunder Bay. Potash and other minerals are shipped by rail to Vancouver, on the Pacific Ocean.
Definition lists are useful for defining terms, such as terms for a new technical dictionary.

Creating a definition list is more complicated than creating another kind of list, but not much more. First, you use the <dl> </dl> tag to show that it is a definition list. Then, for the definition term you use the <dt> tag. For the definition you then use the <dd> tag.

In the above list then each province has a <dt> tag in front of it and the description has a <dt> tag in front of it.

Many authors use them for just plain lists, where they do not want the bullets that are automatically placed in unordered lists. For example:

Arrivals: Western
10:00 AC222
11:00 AC300
11:15 TW443
11:55 CA199
12:10 EA113
13:45 AC119
14:50 AC221
16:40 AC311
Arrivals: Overseas
10:05 AC225
11:10 AC320
11:15 TW413
11:45 CA299
12:00 EA413
13:35 AC119
14:10 CA221
16:50 AC311
Note that this format is quite neat, and the new definition title (arrival overseas) creates a nice break in front of it to separate the lists.

Back to Contents

Preformatted Text

Sometimes you don't want a block of text to be filled and justified like a paragraph. Sometimes you may want to keep all the spaces and returns exactly as they are, as in a table like this, where you want everything to properly display in columns: 
Date         Holiday

Oct 31       Halloween
Dec 25       Christmas
Jan 1        New Year's Day

To do this use the <pre> </pre> tag.

This is the same text, without using the tag for preformatted text:

Date Holiday Oct 31 Halloween Dec 25 Christmas Jan 1 New Year's Day

Using preformatted text tags is an easy way to display large tables like the spreadsheet below:.

1995 Shipments From Southern Ports (tonnes)

FRUIT      Jan  Feb  Mar  Apr  May  Jun  Jul  Aug  Sep  Oct  Nov  Dec

Bananas     85   71  105   89   92  110   96   84   72   75   79   84
Grapes      17   19   16   11   12    9    8    9   12   14   17   16
Oranges    501  423  440  372  420  432  490  510  522  503  488  471
Figs         1    1    2    3    3    2    3    1    -    -    -    2
Dates        2    -    -    2    3    3    2    2    3    2    1    1
Lemons      11    8    9   10   11   13   11    9    8    7    6    9
Grapefruit 105   89   92  110   96   84   72   75   79   84   93  101

Using preformatted text is an easy way to display a table in HTML. Just insert a <pre> before the table text and a </pre> after it.

Back to Contents

Special Characters

Have you tried to use < or > or something like >>>>> and wondered why it wouldn't show on your screen?

All HTML browsers look for the < character and the > character to indicate tags in HTML documents.

That is, they look for these tag characters in any file like filemame.html that is named with a .html extender. The browser reads the information between the < and > characters to determine how to best format or display the document.

In such files, the < and > do not appear on the screen (nor does any text that is typed between them.)

So, what happens when you want to describe tags in your html document? Or, if you want to use these characters for another purpose?

To make them appear you need to use a special character tag. Each special character tag begins with an & sign and ends with a ;

The following are called Special Characters because they have a special purpose in HTML, and cannot be used for their normal purpose.

< or less-than symbol is used to begin a tag, to display it use &lt;

> or greater-than symbol is used to end a tag, to display it use &gt;

" or double-quote symobol which is used to isolate file names and URLs within tags. Use &quot; to display it.

& or ampersand symbol is used to help display the other special characters, use &amp;.

They are quite simple codes:
Each ends with a ; semi-colon
Each begins with the &: character
An abbreviation is used to describe the character to show.
E.g., it is lt for Less-than symbol, and gt for greater-than

To use double-quotes throughout an html document, you may have to substitute the code above for each of them. Otherwise, you will not be sure it is showing properly on all browsers.

For a large document with many quotes, you can easily use a text editor or word processor to Find and Replace the " symbol with &quot;

There are many other proposed symbols that can be created in the same way, but unfortunately most browsers are not yet capable of displaying them.

© 1996 is the copyright symbol. Only the date may show on some browsers. It is safer for now to type out Copyright © 1996 John Smith. It is created by using &copy;

Some other very useful proposed symbols are:
® for a registration mark, &reg;
£ for Pounds Sterling as in £1,738.50, &pound;
¥ for Japanese Yen curency as in ¥4 million, &yen;
° for degrees as in 45 degrees or 45°, &deg;
± for plus/minus or as in plus or minus 2 degrees or ±2°, &plusmn;

We do not recommend you use any without testing them for your application. We only show them here so you wll be aware of their possible use in the near future. Back to Contents

Anchors, Links, and Images

What Are Links?

Hypertext links allow your page to point to other places on the Internet. When the link taken it will take the person to that place.

Back to Contents

Creating Links

To create hypertext links you must use the anchor tag, <a>. The anchor key is different from most tags because it is longer than most of the others. The full link is in the form of <a href="address">what you want to appear on the screen</a>. So if you wanted to create a link that went to the CCN homepage your link would like this:

<a href="http://ccn.cs.dal.ca/">Chebucto Community Net</a>

Where http://ccn.cs.dal.ca is the address for the homepage and Chebucto Community Net is what will appear highlighted as a link on the user's screen.

Now the http:// tells the computer that this is a hypertext link, which means that the location is on the World Wide Web.

Other types of links are:

file transfer protocol
ftp://
gopher
gopher://
telnet
telnet://

Note that gopher is rarely used anymore, and ftp is being phased out by the web.

All of these would then have an address following them.

So a ftp link could be:

<a href="ftp://sunsite.unc.edu/">Sunsite</a>

A gopher link could be: <a href="gopher://ac.dal.ca:70">Dal's Gopher Server</a>

Telnet can be very useful though. It allows you to log into another server on the internet. So if you were at a university and had an account there you could still get back to CCN and log into your account by using:

<a href="telnet://ccn.cs.dal.ca/">CCN</a>

You could even use a friend's account to then log on to your ccn account and be able to access your files.

Back to Contents

Mailing Links

You could also create a link that sends an email message to someone. To do this you would create a mailto link:

<a href="mailto: email address">screen text</a>

Where you would put whatever email address you wanted into that spot.

Back to Contents

Relative Links

A useful thing with links is that you don't have to supply the whole address if the document is on the same site. If this is the case then you can just give the link relative to the page you are on. So if in your public_html directory you had a Hobbies directory that had a rock climbing site called rock.html then you could link this to your homepage just by using the link:

<a href="Hobbies/rock.html">Rock Climbing</a>

Instead of having to have the link:

<a href="http://ccn.cs.dal.ca/~username/Hobbies/rock.html">Rock Climbing</a>

(Note that not only is the second link much longer, it also slows down the system more when you follow that link)

The path for the directory above the directory you are in is ".." so if you were in the rock climbing page and wanted to make a link back to your homepage you could just use the link:

<a href="../Profile.html">My Homepage</a>

Back to Contents

Named Anchors

In long documents it can be useful to have a table of contents at the beginning that allows the user to jump to different parts of the document. This is very similar to a hypertext link so it isn't much more difficult.

Normally when you set up a link <a href="document.html">Document</a> it takes you to the top of the document, but by using named areas it is possible make links to that document that go to specific parts, or to put a table of contents at the beginning of the document that lead to the different parts of the document.

In the document that has the section you need to use the anchor tag like this:

<a name="section">Section Title</a>

You can make the section anything, but it is usually an abbreviation of the section title for convenience. The section title is what appears on the screen at the beginning of that section so you may want to format the section title to add emphasis or to change the size of the title like this:

<h2><a name="zilla">Godzilla Movies</a><h2>

This way the title "Godzilla Movies" will display however header 2 is displayed in the browser. You could also use any other formating tag.

Then to link to that spot you just have to add #section to the link to that document. So if the section "Godzilla Movies" was in a document called movies.html then the link would be:

<a href="movies.html#zilla">Godzilla Movies</a>

If there was a table of contents at the beginning of the movies.html document then the link could just be:

<a href="#zilla">Godzilla Movies</a>

Back to Contents

Using Images

Another useful tag that you can use is the image tag. You can use this to put pictures in your pages (but lynx users won't be able to see them).

The image tag works similarly to the anchor tag. It looks like this:

<img src="filename">

Where filename is the name of the picture. Note that the filename must include the pathname of the file. So if you had a file called picture.gif in your graphics directory your image tag would be:

<img src="graphics/picture.gif">

If you wanted to though you could use a picture as a hypertext link. In this case you would include the image tag in the screen text area like this:

<a href="http://ccn.cs.dal.ca/"><img src="graphics/picture.gif"></a>

This would then display picture.gif and a user would then be able to select that picture and it would take them to the CCN homepage.

Back to Contents

Alternate Text

Bear in mind that lynx users cannot view pictures, only text. So if a lynx user was to view the page then they would not see this link. In order to make the link visible you must add the alternate tag to the image tag. The alternate tag tells the computer to display text that you specify instead of the picture, if the browser cannot view graphics.

So if you used the last link then you would want to modify it to:

<a href="http://ccn.cs.dal.ca/"><img src="graphics/picture.gif alt=CCN's Homepage"></a>

This way graphical users would see the picture.gif but text viewers would just see a link that says "CCN's Homepage". The important thing to remember is to provide text that gives the user some clue as to what the link does. If the link just said "image" then the user wouldn't know where it goes, but as it is now the user can still use your page effectively.

Another useful way to use the alt tag is to include the size of the file so that text users can determine if they want to download the image. This can be useful if you have a number of small images linked to their full-size counterparts. The graphical users would then see a small graphic and the text users would see a text description and how big the file is.

So if you had a big vacation photo (bigvacation.gif) of the Eifel Tower and a small preview version (smallvacation.gif) then you could make the following link:

<a href="http://qraphics/bigvacation.gif"><img src="smallvacation.gif" alt="Picture of the Eifel Tower, gif 156k"></a>

So then in a graphical browser the person would see a small picture of the Eifel tower and could click on it to see a big version, and the text browser user would see a link that tells them that the link leads to a picture of the Eifel tower that is a gif file and is 156k, so that if they want to download it they can.

You can then how it is important to use the alt tag well. In the last example the text could have said anything, but then it's not really useful to the text user.

Back to Contents

Aligning Images

Another thing that you can do with images is to use the align tag. This way you can control where the image is displayed, and how text relates to it. When you just put an image in around text then the text goes to the bottom of the image like this: 

   -----------
   |         |
   | image   |
   |         |
   ----------- text text text text text text text text
To make this display better then you can do a number of things.

  1. Start a new paragraph or line before the image, that will put the text before the image on the line above.
  2. You can then start a new paragraph or line after the image to move the text after the image to the line below.

But to get the best control you can use the align tag. The align tag controls how the text after the image is displayed so you may still have to use a new paragraph or line before the image to get just the right look.

To align the text that follows the image with the center of image you use the align center tag:

<img src="graphic.gif" align=center>

And then it would look like this: 

   text text text text text text text text text text text text text text
   -----------
   |         |
   | image   | text text text text text tex tex text text text text
   |         |
   -----------
To align the text that follows the image with the top of the image then you use the align top tag:

<img src="graphic.gif" align=top>

So it would look like this: 

   ----------- text text text text text text text text text text text text
   |         |
   | image   |
   |         |
   -----------
   text text text text text text text text text text text text text text
If you wanted the text to wrap around the image then you can use the align left or right tag:

<img src="graphic.gif" align=left>

So then it would look like this: 

   ----------- text text text text text text text text
   |         | text text text text text text text text
   | image   | text text text text text text text text
   |         | text text text text text text text text
   ----------- text text text text text text text text
(note that this diagram is for align left. If you aligned right then the image would be on the right with the text to the left)

Of course if your images are not integrated with your text then you could just use normal formatting tags like <center> or <right>:

<p> <center><img src="graphic.gif"></center>

This would then have the graphic separate from the text and centered on the page.

If you want to make your images load faster then you can include the height and width of the image (in pixels) in the image tag:

<img src="graphic.gif" height=480 width=200>

What this does is it tells the browser what the size of the image is before it starts to load the image, so that it doesn't have to ask the server what the size is. This way the browser will load the images faster.

So in the end you can create a very long image tag that does a lot of things:

<img src="graphic.gif" alt="graphic, gif 156k" height=480 width=200 align=left>

This would display the picture graphic.gif, which is 480x200 pixels, along the left side of the screen, with text on the right. And if the person had a text browser then instead they would see the text, "graphic, gif 156k".

Back to Contents

Creating HTML Files

HTML documents can be created with a plain text editor. It doesn't have to be on CCN, it can be done on your PC with your favourite editor, and then uploaded to your home directory. Note that if you're using a word processor, you should save as plain text, not as a word processor file. When working on HTML, it is useful to have a program to view it with. Netscape, Mosaic, MacWeb, and Cello are a few viewers that can be used for testing. There are also programs for IBM and for Mac which will help you compose HTML; e.g. HTML Assistant for Windows, macros for use with WordPerfect, programs that will convert from RTF (produced by some word processors) to HTML, etc. New versions of some word processors such WordPerfect 6.1 with the required add-on, have the ability to save as an HTML file.

Here are some popular HTML Tools:

Back to Contents

Index