It doesn't matter what computer you use on CCN as Lynx and its
subsidiary programs, PICO, PINE and TIN control everything that happens
online. The following instructions will work with all computers.
Your basic page layout consists of a title which will carry on
throughout multiple pages to identify your homepage regardless of what
page you are viewing or the various headers and headline types, image
placements, sourcing and the informational tags.
To begin, put at the top left of your document. Although pages
run fine without this tag, it ensures that your HTML document will be
interpreted as such by all of the common Internet browsers.
THE TITLE
Let's start with a title for our homepage. We'll call it 'Our
Homepage'; (how's that for imaginative). We want a title in the
upper-right hand corner of each page. This is accomplished by the following:
Our Homepage
The slashed title in the second set of brackets is 'closing' tag to
tell the system it is finished with that particular command. The title
tag will print 'Our Homepage' on the first and every succeeding page. The
tags are enclosed within the header tags which tells the document it is to
be located at the top of the page regardless of the placement within the
document.
THE BODY
The body of the document is defined using ; the ending
tag placed at the bottom of the document followed only by which
we will get to later. If a background is to be added to the document,
this is phrased as:
This replaces and the 'backing.gif' is just a name I am using
for this tutorial. Your background may be called something different.
See images for an explanation on the use of gifs, etc.
THE HEADLINE
Next, the headline for our main title (not to be confused with the
above - although headlines can contain the same information as the
. To put 'Our Homepage' in the main headline, we use:
<h1>Our Homepage<hr></h1>
Wait a minute; what's <hr>? That stands for horizontal rule, which I
usually put under the headline as it gives it a nice separation point
from the rest of the text. You will see <hr> from time to time in an
HTML document for this reason. The <h1> headline type will automatically
center the headline and place it in the largest of all print on the
page. Using <h2> through <h6> will successfully make the headline
smaller and place it to the left of the page as in 'subtitles'.
IMAGES
Let's say we have a picture file commonly known as an 'image' that we
want to put on our homepage. An image file can be in a multitude of
picture formats, eg...jpg, gif, tiff, pcx, ps etc. For the sake of
brevity, we'll work with a gif file. Let's say we have a picture called
'computer.gif' which we want to place on our page. We would use this type
of referral:
<img src="computer.gif" alt=""></img>
What this translates into is: find the img source called
'computer.gif', place it on the page and then proceed with the rest of the
document. Remember to use </img> to end the image space allotment. HTML
assumes you will be using the entire page across for the vertical size of
the image. Without the </img> closing tag, the unused portion of the page
will remain blank. With the tag, the text will flow up into the unused
portion of the page. The alt="" means that on a browser such as Lynx
(text), you will not see the word [INLINE] or [IMAGE] reminding you that
you can't see them. It is a polite way of not teasing your visitor.
<img align=left src="computer.gif" width=100 height=100 alt=""></img>
This long tag simply means the image is to be placed on the left side
of the page, the source is as above, no teaser for text browsers and that
you want the text to fill in on the right side of the picture.
Naturally, by placing the word 'center' or 'right', the image will place
accordingly and the text will follow up both sides or on the left,
respectively. The width and height numbers refer to the approximate
width and height of the image as it appears on the page and adheres to
the guidelines set out by the various HTML standards committees and may
vary according to the size of the source. You may have to play around
with these numbers a little to find a happy medium and visually pleasing
display.
<BR> and <P>
These are spacing tools to force a new line <br> or a paragraph
(usually 2 lines) <p>. With the paragraph, you can add a </p> to end
that particular paragraph although it works without the end tag being
present. HTML checkers will look for it and render an error if they
can't find it. An HTML checker demands that all tags have end tags.
CENTERING
To center something in a document, regardless if it's an image, a
sentence, a paragraph or a line, you would use:
<p align=center></p>
Do not fall into the trap that so many homepage creators do and use
<center></center>. This is a 'Netscapism' and not true HTML. Lynx may
or may not display it properly as may not many other browsers. There are
some 'Netscapisms' that even other versions of Netscape do not support.
By using HTML standards, you can be assured your pages will always be
correct.
LINKS
These are the tags that connect the Internet and other documents to
your homepage. A typical link connecting you to the CCN Homepage looks
as follows:
<li><a href="http://www.chebucto.ns.ca">CCN</a>
The above line translates into:
<li> link.
<a anchor.
href= hypertext reference.
http:// hypertext transfer protocol (a mode of sending data via
the Internet; others include:
'ftp://' - file transfer protocol
'nntp://' - network news transfer protocol
'smtp://' - sendmail transfer protocol
'telnet://' - telephone line networking
'gopher://' - "go for" this and that protocol
</a> the end anchor tag
The 'CCN' is placed beteen the opening and closing angle brackets and
that will be the only thing you will see of this line besides the link
number (in Lynx). You will notice that there is no reference to
'Home.html". It is not necessary to include it as CCN utilizes the
unwritten industry standard 'index.html' as a backup page. This will load
as a default in the absence of a particular document.
PRE-FORMATTING TEXT
If you know how a document will look or you want the text to be a
certain way, then you can preformat it with the <pre></pre> tag. Placing
<pre> at the beginning of the text and </pre> at the end of the text will
preserve the formatting of that text within the document. Without these
tags, the text will flow as one large, formless clump.
When you're done, you will want to add the final HTML signalling
tags. As at the beginning, you end your HTML document with </html> as
mentioned in the body section of the tutorial.
Good luck with your homepage and happy HTMLing.
--------------------------------------------------------------------------