The Internet - Use And Webpage Creation
A crash course by Waldis Jirgens
Here are the technical terms of the course:
PC: Personal computer.
ASCII: 8 bit code to represent letters, numbers and
special characters to the PC. See also "Encoding".
Windows: Operating system for personal computers. Comes in
various flavours. Here I deal with Windows 95, 98, ME, 2000, and
LINUX: Operating system for personal computers. Comes also
in various flavours. The SeaMonkey software is suitable for it
Platform: Generic term for any operating system that you
may wish to use on your PC.
File: A conglomerate of data. A file can be a document
(like this one), a picture, a piece of sound, a video, a program,
in short anything that can be
processed by a PC.
File name: The name given to a file. It often contains
special characters like the dot ".".
File suffix: The part of a file name after the last dot.
Example: In "COMMAND.COM" the suffix is COM..
File type: The kind of file, that it is (for instance a
sound-wave or a gif-picture). On the windows platforms the file
type is denoted by the suffix.
This is not the case (but is often adhered to for sake of
convenience) on the LINUX platforms.
Folder: Also called directory is a
named place on a disk, that contains files and possibly other
Example Windows: C:\INTERNET. Example LINUX: /usr/lib/netscape.
Web-Page: A file containing text and instructions for a web-browser (see below) on how to interpret that text. Can be very simple, but also sometimes very complex. See examples below.
Encoding: Also called "Character Encoding" - The way that letters of an alphabet are translated to ASCII characters. Many languages have special characters, that are not part of the English language. They need different encodings to the standard one. Each webpage will contain an indication, which encoding must be used to view it correctly.
URL: An address pointing to a webpage on the Internet (or
a file on your own PC).
Example Internet: http://canberraspiritualist.org/programs.html
Example file on PC: file:///home/waldis/orgfree/linux.htm
Link: A part of a webpage, that contains a URL within an instruction, that when clicked leads you to
a location denoted by this URL.
Web-Browser: Software used to view web-pages. Examples:
SeaMonkey Navigator, Google Chrome, Internet Explorer.
Plug-In: An auxiliary piece of software enabling a program
(here a web-browser) to do certain things, that it can't do on its
own, like showing a video or playing a music piece.
Mail-client: The program running on your PC, that you use
to send and receive E-mail.
News-client: The program running on your PC, that you use
to access Newsgroups.
Download: The process of you transfering a file from an
Internet location to your PC. Can be done by an FTP program or a browser.
Upload: The process of you transferring a file from your
PC to an Internet location. Mostly done by an FTP program.
Customise: The process of adapting a program's behaviour (font type and size. background colour etc.) the way you like it.
Spell-checker: A program to check the spelling of a document.
root: The super-user or administrator account of any LINUX
system. It has special privileges, allowing you to alter system files and settings.
rightclick: The process of clicking on something using the right (as opposed to the left) mouse-button.
Hacker: Experienced computer programmer often wanting to access and sometimes damage your PC or misuse your data without your knowledge.
Some Elements of A Webpage
Unordered List: A list showing its items bulletted.
- This List
- is bulletted
- and has 3 elements.
Ordered List: A list showing its items numbered. Example:
- This List
- is numbered
- and has also 3 elements.
Table: An arrangement of items in tabulised form. Example:
Vice President senior:
Vice President junior:
Picture: A file of a type denotig a viewable picture.
Mostly files of the type gif or jpg are used. Most of these files
are static (they look always the same). There are however
"animated gifs", that actually display a few static pictures in a
sequence, simulating a short video.
Multimedia Object: A file of the types sound or video.
There are many formats to chose from.
Tag: An element of the html language. All tags start with
the "less" sign: < and end with the "greater" sign: >.
Preformatted text: Text in proportional font. Example:
This text is in proportional font.
Each character occupies a
certain amount of space on
the screen, regardless if it is an i or an
O or anything else. This can be
useful to line up a simple list.
Basic Browser Use
- Start Seamonkey ether by double-clicking on the Seamonkey icon on the desktop or selecting Seamonkey from the applications menu. Familiarise yourself with the lay-out of the browser, its various menues and control buttons.
- The browser will come up with its "Home Page", a webpage previously selected to be displayed for just this purpose. Personally I use a local page consisting mostly of links, which I use quite often.
- To go to a certain webpage, either single-click on its link (if it is displayed on the "home Page" or enter its URL in the top box designed for such an entry. Links are mostly denoted by text, for example: Weather bureau, sometimes however by pictures. Example:
Clicking the mouse button then leads you to that website. It will normally be displayed in the area of the webpage that you were looking at, but it can also be displayed in a different area, depending on the way the link is coded. More on that in the 3rd lesson. However you can take control yourself - see the next topic.
- When you have followed a link and want To get back to where you were before, press the "Back" button on your browser,
- You can print pages by selecting the "Print" option from the "File" menu. Either print them on paper or print them as .pdf or .ps files, which you can later view on your PC, even if you are no longer connected to the Internet.
- Foreign language websites often need a different encoding to display properly. If the encoding is not done automatically (due to sloppy webpage writing) go to "View" "Character Encoding" and specify it manually. Our
standard encoding is "Western (ISO-8859-1)". If a page does not display correctly the best the best guess will be the encoding "UTF-8".
- When you are done, just close the browser window.
This is a speciality of Firefox and SeaMonkey.
Click on "File" "New" "Navigator Tab". You get another tab within the same browser window.
To open a link in a new tab, rightclick on
it, then select "Open Link in new Tab".
A tab can be closed by clicking on the X at the
top right of its window.
Of course you can also open a link in a new window
instead of a new tab.
Some webpages actually consist of more than one
page. These pages are put into "Frames". Example:
To view ONLY the page you are interested in,
rightclick it, then select "This frame" and: "Show only this frame".
To go back, just click the "Back" control
This handles installation of the SeaMonkey suite
for Windows users.
I recommend to use SeaMonkey as Web-Browser and
SeaMonkey-Mail (part of the package) as mail- and news- client.
The reason simply being, that this software is far less likely
to be targeted by hackers. It is also platform independent. If
you want to use LINUX one day, you will feel straight at home
1. Go to http://www.mozilla.org/projects/seamonkey.
Go to Download now Windows English. This will download SeaMonkey-x.x.x.en_US.win32.installer.exe to a temporary folder
of your choice, say D:\temp. Run it from there. Select a
complete installation. This installs the browser and all other
2. Connect to the Internet and start the browser.
This will bring you to www.mozilla.org for a start.
3. Click on "Help" "About Plug-Ins"
and follow the link to Netscape provided by: https://addons.mozilla.org/en-US/seamonkey/browse/type:7
Find more information about browser plug-ins at the above site.
On this site follow the link to "Plug In
Manager". Click: Apple Quick Time Download.
Download it to the same temporary directory as
above. The download is about 12 MB and will take a while.
The file name is: QuickTimeFullinstaller.exe.
4. Run this program. This will give you the
required plug-in to hear the music on my own (and other
websites). Select the recommended installation.
5. If you want other plug-ins, return to the
Netscape site and follow their suggestions.
6. Please install the Australian English
In composer go to "Edit" "Check Spelling". On the bottom left
there is a box titled English/United States with an arrow down.
Click on that and select "Download more dictionaries". Then
follow the instructions!
7. To customise the browser, mail and news
settings, click on "Edit" then "Preferences" and
specify your personal preferences.
========== Exercise it ============
This handles the creation and update of web pages
using SeaMonkey Composer.
1. Start SeaMonkey
2. From the "Window" menu select "Composer"
3. This gives you a word processor like window.
This is in fact what the composer is. It allows you to create
and update documents, which you can either print, or publish as
Elements of A Webpage
There are basic elements like:
* Page title and properties - From the "Format"
menu select this item.
* Page colours and background - From the "Format"
menu select this item.
Then there are other elements, that you get from
the "Format" menu selecting item "Paragraph":
* Headings 1 to 6 - Topics for the content in
descending order of size (and importance).
* Body text - Your bread and butter text
* Address - Rarely used these days - forget it!
* Preformat - Preformatted text in monospace font
- use for lined up lists for instance.
Text can take on various styles, like bold and
italic. From the "Format" menu select "Text Style".
Text can take on various colours.
From the "Format" menu select "Text Style".
Pictures, Links, Tables
You can insert a picture (for web pages
use only .gif or .jpg files) - From the "Insert" menu select
"Image". It is generally a good idea to keep images in the same
directory as your webpages. Therefore specify the file name of
the image in the "Image Location" section of the dialogue box
and tick the "URL is relative to page location" box. You can
also alter the size of the displayed picture. However it is a
waste of space and time, if you want to display the picture
smaller than it actually is. In this case it is better to create
a smaller picture (with a graphics editor) in the first place.
To insert a link: From the "Insert" menu
select "Link". Type in the text you want the user to see in the
"Link Text" Dialogue box. Insert the URL that the link points to
in the "Link Location" dialogue box. In the "Advanced
Properties" dialogue, you can specify additional attributes like
"target" - often used in the CSA pages.
To insert a table: From the "Insert" menu
select "Table". Complete the dialogue box as required. Inside
table cells you can put virtually any other items - including
To insert an unordered (bulleted) list:
From the "Format" menu select "List" and "Bulleted".
To insert an ordered (numbered) list: From
the "Format" menu select "List" and "Numbered".
To end the lists go to a new line and select from
the "Format" menu "List" and "None".
You cannot add a multimedia object (audio,
video) with the regular edit. To do that, go to "View" "HTML:
Source" and put it in in normal edit mode.
Interaction between Navigator and Composer
You can edit a webpage that you browse by
selecting from the Navigator "File" menu "Edit Page".
This will open the page up in a Composer window!
Homework for Lesson 2
Here is the URL of an accelerated online html
Go there and do the course, it is really easy and an excellent
preparation for lesson 3
Now that you know how simple a html page can be,
here first some simple examples:
This is a very simple html page. It consists of preformatted
========== Exercise it ============
Create a similar page using Notepad, call it exercise.htm, save
it and open it in Navigator.
This page you also can open in Composer and add items and
formatting to your heart's content.
Frames are a non-standard html-tag. They divide
the displayed screen into portions. Example - the old CSA
<frameset cols="22%,78%" frameborder=0>
<frame src="cinx.htm" name="inx" scrolling="auto">
<--! Left hand Index -->
<frame src="csa.htm" name="expl" scrolling="auto">
<--! Introduction -->
Here the screen is divided into 2 sections, the left one
covering 22% and the right one 78% of the screen. It also says,
that scrollbars will be added to each section IF NEEDED.
Additionally it gives NAMES to each section (frame), namely
"inx" and "expl". These can be used later for links, as you will
see. Initially the page "cinx.htm" will be loaded in area "inx",
and "csa.htm" in area "expl".
More on Frames: http://webreference.com/html3andns/frame.html
I said before that multimedia items cannot
be added with the Composer in "normal edit" mode. The tags you
can use for that purpose are <bgsound>, <embed> and
the <bgsound> tag doesn't work with all browsers, neither
does the <object> tag.
If you want to just add sound to a webpage, the safest way is to
use the <embed> tag like that:
<embed src="own.mid" autostart="true" loop="true"
hidden="true" height="0" width="0">
The information following src= is actually a URL. The above
format assumes, that the file own.mid is in the same directory
as the displayed webpage. There is however nothing stopping you
from using any multimedia URL on the web, that you know of! If
you want the music to play only once, say loop="false".
More on the <embed> tag: http://www.webreference.com/js/column20/embed.html
Since I wrote this, the <object> tag has
gotten some wider acceptance. The above example can be coded in
this format as follows:
data="music/own.mid" height="0" width="0">
<param name="autoplay" value="true">
<param name="loop" value="true">
You can also specify a number for the parameter
loop, for instance “2”.
To open a link in special locations use the target subparameter
of the <a> tag. Examples taken from the above frameset:
target="expl">The 7 Principles</a>
This denotes, that the page http://www.snu.org.uk/seven.htm will
be displayed in the right frame, which was called "expl".
target="_parent"><b>Free E-Books on
This denotes, that the page http://www.snu.org.uk/fre_book.htm
will be displayed in the parent window of the one you are
looking at. This is particularly useful to overwrite a framed
This denotes, that the page http://www.spiritual.org.au will
be displayed in a (normally new) Navigator window, which will be
Reference manual of HTML: http://www.webreference.com/html/reference/specs/
Netscape/SeaMonkey specific HTML: http://webreference.com/html3andns/
So far I haven't mentioned CSS = Cascading Style Sheets. To get
info on these try any search engine. Also all of the above all
refers to HTML 4. There is a new standard out: HTML 5, which however in
many cases complicates things. For instance:
HTML 4: <b>This text
appears in boldface</b>
HTML 5: <strong>This text
appears in boldface</strong>
To change over to html5 you have to replace:
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta http-equiv="CONTENT-TYPE" content="text/html;
<b> and </b> with
<strong> and </strong>,
<i> and </i> with
<em> and </em>,
<big> and </big> with
<span style="font-size: larger"> and </span>,
<small> and </small> with
<span style="font-size: smaller"> and </span>,
<font color="#rrggbb">...</font> with
<img src="..." alt="..." width="..." height="..." align="left|right"> with
<img src="..." alt="..." style="width:...; height: ...; float: left|right;">
<br clear="left|right|all"> with
<br style="clear: left|right|both">
<center>... </center> with
<div style="text-align: center">...</div>
Many of these things can be simplified by using a stylesheet
like this one.
Validating Your HTML:
This is done by going to the HTML Validator:
and following the instructions.
Please note that the validator will flag any non-100% standard
tag as illegal! For instance the starting tags
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
<meta http-equiv="CONTENT-TYPE" content="text/html;
charset=iso-8859-1"> are case sensitive!
Also note that if your webpage goes on a free server there might
be some additional html added to it, which you have no influence
upon. So your webpage, which checks out as correct on your own
PC may no longer check out as correct when it's put on the free
Return to my Linux page
Return to my home-page