The Internet - Use And Webpage Creation

A crash course by Waldis Jirgens

Terminology

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 XP.
LINUX: Operating system for personal computers. Comes also in various flavours. The SeaMonkey software is suitable for it too.
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 folders.
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. Example:

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:

Office Bearers:
President:	Joan Citizen
Vice President senior:	Mary Smith
Vice President junior:	Selma Jones
Secretary:	Noel Taylor
Treasurer:	Geoff Barber

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: >. Example:<pre>
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 3^rd 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.

Tabbed Browsing

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.

Frames

Some webpages actually consist of more than one page. These pages are put into "Frames". Example:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_rows
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

Lesson 1

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 with SeaMonkey.

Installing SeaMonkey

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 components.
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 spell-checker:
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 ============

Lesson 2

This handles the creation and update of web pages using SeaMonkey Composer.

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 webpages.

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 information.
* 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 tables!.
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".

Restrictions

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 course:
http://www.edwebproject.org/htmlintro.html Go there and do the course, it is really easy and an excellent preparation for lesson 3

Lesson 3

Example

Now that you know how simple a html page can be, here first some simple examples:
<html>
<body>
<pre>
This is a very simple html page. It consists of preformatted text only
</pre>
</body>
</html>

========== 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

Frames are a non-standard html-tag. They divide the displayed screen into portions. Example - the old CSA webpage:

<html>
<head><Title>Canberra Spiritualist Association</Title><META NAME="keywords"
CONTENT="Religion,Spiritual,Spiritualism,Paranormal,Occult,NewAge"></head>
<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 -->
</frameset>
</html>

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

Special Tags

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 <object>.
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:

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:

<a href="http://www.snu.org.uk/seven.htm" 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".

<a href="http://www.snu.org.uk/fre_book.htm" target="_parent">Free E-Books on Spiritualism</a>
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 webpage.

<a href="http://www.spiritual.org.au" target="da3">Australian Spiritual Association</a>
This denotes, that the page http://www.spiritual.org.au will be displayed in a (normally new) Navigator window, which will be named "da3".

Reference manual of HTML: http://www.webreference.com/html/reference/specs/
Netscape/SeaMonkey specific HTML: http://webreference.com/html3andns/

There's More

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: This text appears in boldface
HTML 5: This text appears in boldface
To change over to html5 you have to replace:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=whatever">
with:
<!DOCTYPE html>
<html>
<head>
<meta charset="whatever">
also:
 and with and ,
 and with and ,
<big> and </big> with and ,
 and with and ,
... with ...,
<img src="..." alt="..." width="..." height="..." align="left|right"> with <img src="..." alt="..." style="width:...; height: ...; float: left|right;">
 with 
<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:
http://validator.w3.org
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 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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 server!

Return to my Linux page
Return to my home-page