Download Creating your own web pages at MMU using Netscape Composer

Creating your own web pages at MMU using Netscape Composer
Tutorial 1
Introduction
This document shows how you can create your own web pages at Manchester Metropolitan University
using Netscape Composer. It explains what is meant by a Web Server and how it is used to return your web
pages to your web browser. It is also applicable for other users, only differing in the initial setup of your
web page access. This is done through your Internet Service Provider.
Assumptions
The tutorial assumes you are familiar with web page browsing, and have used a browser such as Netscape
and/or Internet Explorer, and that you are familiar with the typical types of reference within a web page
document. These include links, images and email addresses.
Contents
1.
2.
3.
4.
What is a web page and web server?
Setting up your web account at MMU
Creating your default web page at MMU
Starting and using Netscape Composer
When you see the  symbol, you should do what it says in the guide
Web Page Creation using Netscape Composer 4 -1-
1. What is a web page and Web Server?
Web servers allow you to serve content over the Internet using the Hyper Text Markup Language (HTML).
The Web server accepts requests from browsers like Netscape and Internet Explorer and then returns the
appropriate HTML documents. A number of server-side technologies can be used to increase the power of
the server beyond its ability to deliver standard HTML pages; these include CGI scripts, server-side
includes, SSL security, and Active Server Pages (ASPs).
Web pages are kept on a computer that is permanently connected to the internet. Why?




If not people would not be able to get the web pages when the computer was off
Cannot have your C: drive on a PC, not always switched on
Cannot use J: drive at college, not accessible (easily) outside college
Must have a disk that is attached to the web server. The computer "dali" within the
Department of Computing and Mathematics is attached to the Internet, and has the Internet
address (or domain name) dali.doc.aca.mmu.ac.uk Your web pages are stored in a
special folder, or directory, on dali, named after your user id on that server. For example, for
A. Turing, the folder would be in /WWW/STAFF/A.Turing . This folder is given special
status to allow web users to "read only" what is in that folder. The rest of your account is still
private.
We will return to this later, as the information will be needed to upload your web pages to the
Web Page Creation using Netscape Composer 4 -2-
How a Web Server Works - Overview
When discussing how a Web server works, it is not enough to simply outline a diagram of how low-level
network packets go in and out of a Web server. To give such a nuts-and-bolts explanation some sort of
practical value, it must be placed in context. Thus, this tutorial will discuss what a Web server does to
enable a better understanding of how it does its work.
Years ago, when Web servers were first prototyped, they served simple HTML documents and images.
Today they are frequently used for much more.
The first step is to view the Web server as a black box and ask the questions: How does it work; What can
it achieve? It's a safe assumption that most Internet users believe a Web site's success or failure is due to its
content and functionality rather than the server used to power it. However, the choice of the correct server,
and understanding its capabilities and limitations is an important step on the road to success.
So what does a Web server do? As we mentioned earlier, it serves static content to a Web browser at a
basic level. This means that the Web server receives a request for a Web page such as
http://www.Webcompare.com/index.html and maps that Uniform Resource Locater (URL) to
a local file on the host server.
In this case, the file index.html is somewhere on the host file system. The server then loads this file
from disk and serves it out across the network to the user's Web browser. This entire exchange is mediated
by the browser and server talking to each other using Hypertext Transfer Protocol (HTTP). This workflow
is shown in the figure below.
That's all there is to it.
But if it's that simple, then why so much fuss?
Because this simple arrangement, which allows the serving of static content such as Hypertext Transfer
Protocol (HTTP) and image files to a Web browser was the initial concept behind what we now call the
World Wide Web. The beauty of its simplicity is that it has led to much more complex information
exchanges being possible between browsers and Web servers.
Perhaps the most important expansion on this was the concept of dynamic content (i.e., Web pages created
in response to a user's input, whether directly or indirectly). The oldest and most used standard for doing
this is Common Gateway Interface (CGI). This is a pretty meaningless name, but it basically defines how a
Web server should run programs locally and transmit their output through the Web server to the user's Web
browser that is requesting the dynamic content.
Web Page Creation using Netscape Composer 4 -3-
For all intents and purposes the user's Web browser never really has to know that the content is dynamic
because CGI is basically a Web server extension protocol. The figure below shows what happens when a
browser requests a page dynamically generated from a CGI program.
The second important advance, and the one that makes e-commerce possible, was the introduction of
HyperText Transfer Protocol, Secure (HTTPS). This protocol allows secure communication to go on
between the browser and Web server.
In a nutshell, this means that it is safe for user and server to transmit sensitive data to each another across
what might be considered an insecure network. What happens when the data arrives at either end is another
matter, however, and should not be ignored.
The simplicity of the above arrangements is deceptive, and underestimating its complexities often leads to
bad decisions being made about the design of a Web-hosting infrastructure. It is too easy to focus on the
design of the Web pages themselves and the technologies used to create dynamic content, such as Java,
Javascript, Perl, C/C++, and ASP, and to subsequently miss the fact that each of these technologies can be
aided, or hindered, by the platform on which they are to be run -- the Web server itself..
You have a username on the webserver, normally your Initial and Surname. This is used to identify your
web address when it is set up.
If your username is A.Turing, say, then your web page will be
http://www.doc.mmu.ac.uk/STAFF/A.Turing
NB The case of the web address or URL is significant. Ensure you use the format shown above.
 Try this now
Write down your web page address here :
Web Page Creation using Netscape Composer 4 -4-
2. Setting up and accessing your web account at MMU
All staff who have accounts within the Department of Computing and Mathematics at MMU automatically
have web page accounts set up. Most of them are simply blank for now, until you create your initial web
page.
When you open up a web page, say at http://www.doc.mmu.ac.uk/STAFF/A.Turing then a
default web page is opened, called index.html
 Try this now
1.
2.
3.
Open up Netscape by clicking the desktop icon for it, or selecting from the program menu
Enter the address of your web page at MMU according to the format shown previously
If you have no web page yet, you will just see a listing of files something like the one below
(different files will be listed, if any at all):
4.
If you already have created a web page in the past at MMU, you should see your own page
displayed
If you have no web page as yet, don’t worry, this is precisely the purpose of this first section – to create
your default home page.
Your default home page will be called index.html and will be stored in your root web page folder.
If you already have a home page, you should look for the notes indicating to store your page as a different
name to avoid losing your current default home page.
Web Page Creation using Netscape Composer 4 -5-
3. Your default web page at MMU
In this section, we will:



Create a default home page using Netscape Composer
Upload the page to the web server using an ftp (file transfer protocol) program
View the page in Netscape Navigator
Netscape Communicator
In this tutorial, we will be using Netscape Communicator Version 4.7 to create, edit and view our web
pages. It is not the only web page editor available, nor the only "free" one. However, it is a standard one in
use at MMU, and is easy to use. You may well find a more preferable one for home use.
Netscape Communicator has two components we will use extensively here:

Netscape Navigator
o This is the Browser. It allows you to see the web pages as they appear to the
user. You will probably already be familiar wit using this, as it is the main piece
of Netscape software that people use. You may also be familiar with the more
popular browser Internet Explorer, from Microsoft.
o Used for viewing your documents

Netscape Composer
o This is the web page editor that allows you to edit the contents of your web
pages. It is interlinked to Navigator to allow you to view the final results
o You will edit your web pages, save them, then publish them on your web server
to make them available to the outside world.
o Used for editing your documents
It is initially easy to get confused between the two.
Netscape Composer (and other web page editors) is an example of a Visual Web Page Editor in that the
author is able to see what the final page will approximately look like as the page is created.
Hyper Text Markup Language HTML
HTML is a markup language. It is used to format text and information. All web pages are written in
HTML, or extended versions. HTML describes how the information should be laid out on the page (or
marked up). The web page editors all create HTML for you.
There is some debate as to whether to learn HTML or use a visual type editor. In reality, you use both.
Writing "raw" HTML can be very tedious. We will look at HTML in later lessons. A knowledge of HTML
is still needed for more advanced work.
For the moment, we will use the visual editor, and examine the HTML as we go along.
Web Page Creation using Netscape Composer 4 -6-
Creating your default web page
 Try this now
Assuming you have Netscape open and viewing a web page (if not… open it…)

From the File menu, select New – Blank Page

This will create you a new blank page to work on, as shown below:
Note the menu at the top, basically a word-processing type menu,
and the icon used to indicate Composer, the Pen in the top left
corner, also shown on your task bar.
Web Page Creation using Netscape Composer 4 -7-
 Try this now
Create a screen something like the one shown below, simply to create some text. We will look at formatting
the text and adding extras in a moment. Try some bold and colours for text for now.
No need for anything extravagant just yet, we will simply create a first page, and upload it.
 Try this now

Save your document

Save the document in your work space on your pc. It will be
transferred in a moment.
You will be asked for a filename and a page title
o The filename should be
index.html
 Unless you already have a web page, in
which case, call it something you can find
easily, such as introindex.html
o The title of the page is important. It appears in the
top of the window when you web page is opened,
and is used by search engines to find your web
page. Put in a title like "A.Turing at MMU"

Preview your page!
Click the Preview button in Netscape Composer
 Bookmark your own page.
Web Page Creation using Netscape Composer 4 -8-
4. Altering the look of your web page
Now that you have seen your web page, you can edit the page using Netscape Composer to alter the text,
add links, pictures etc.
 Try this now
Close the window with Netscape, for Composer. We will practice opening up the file.
First, from the File Menu in Netscape Navigator, select Open Page. Ensure the Composer tag is clicked,
and enter the filename shown, on your work drive.
Enter the file location (or browse)

Ensure Composer is checked
Select OPEN when ready
You now see you page open in the Netscape Composer Editor
Notice how it seems to be a word processor type interface. The menu bar holds many of the useful buttons :
Type of text to enter
Text formatting
Web Page Creation using Netscape Composer 4 -9-
Lists
Indenting Justification
 First, we will alter some of your details on screen.
 Using the mouse and arrow keys, move into the text and put in your own name
 Put in a few details about yourself, your teaching/research interests etc. We will use these to
form links later on.
 Take some time and just enter some text, fill in your background, teaching areas etc.
 Use the List button to add a list of items that we will create links from, so the user can go to another
page. We will create the links later.
Changing the Properties of your page
There are many things you can alter about the look of a page :
 You can alter the colours of the page,
 The title that appears in the Blue menu bar at the top (the Page Title) – this is used by search
engines as an aid to locating web pages on the Internet
 The keywords associated with the page for Search Engines to find (useful if you want people
to find your page quickly on the internet)
These are all altered in the Page Properties selection of the Format Menu
Web Page Creation using Netscape Composer 4 -10-
 Select the Page Colour and Properties from
the Format Menu, and change the heading and
Author to reflect the correct nature of the page.
Also, add some keywords to search for. DO
NOT press OK yet…. There is more….
Setting the page default colours
You can alter the background colour, the link text colours (new, visited and active) and set a background
image.
 Select the "Colours and
Background"tab. Select suitable
screen colours and link text
colours. Press OK when chosen.
Click the Background Tab to
get a set of colours to choose
Now click OK and see how your page looks
Web Page Creation using Netscape Composer 4 -11-
Lovely!! (but what colours!!)…. I wonder how many of you decided on garish colours….. a common act is
to use "outrageous" colours. Remember… your pages have to be attractive.
Looking at your page so far
 Click on the Preview button, to see how your page will look so far.
 Click on the Save button to save your changes
Adding links to your page
We will now make some of the links you wanted into actual hyperlinks, which will link to another page
when pressed. This consists of
1.
2.
Highlight the text you want to make into a link
Select from the menu Insert…Link, or Right-Click the mouse on the text to select an option to
make a link (shown below)
 We will make a link from a mention of MMU to link to the main web site for the Department of
Computing and Mathematics at MMU.


Highlight the words Manchester Metropolitan University by clicking and dragging over the word
or phrase
Then, select from the Insert…Link menu item, or right click the mouse when you are over the
selected area to select the option to make a link (see diagram)
This will give you a screen to enter up the web address for that link
Web Page Creation using Netscape Composer 4 -12-
 Make a link to the MMU site (http://www.doc.mmu.ac.uk) in the screen that follows:
 Now save your file, and preview to see the result. Test your link
EXERCISE
1.
2.
3.
Go back to Netscape Composer. Create text/list entries to make links to other pages that you use
regularly.
Put a link in to a friend's web page – note that this will not actually link until we publish your
page in the next section.
Spend some time tidying up your web page a little, with relevant links.
Web Page Creation using Netscape Composer 4 -13-
Publishing your web page
To make your web page available for the world to see, you have to upload your web page to the web
server. This will differ according to which web server you are using. These notes will deal with the MMU
web server.
We will use an FTP (File Transfer Protocol) program, WS_FTP LE to upload our web pages. This
program allows you to transfer files from one computer to another via the internet.
This requires some initial setup, indicating the remote server and location of files.
The following screens are for WS_FTP LE, but will be similar for all ftp programs. The basic information
needed is



The web server domain name. In this case dali.doc.aca.mmu.ac.uk
The folder on the server to store the web pages. In this case /WWW/STAFF/N.Whittaker
o NB use your own account name!
The username and password for that account
 Do this now
1. Locate the FTP LE icon on the desktop or Program menu and start
2. You will get an initial screen, select the NEW option to make a new FTP session
Web Page Creation using Netscape Composer 4 -14-
it
3. Enter in the details of the web server etc as shown, altering for your own account:
DO NOT press OK yet, we have another screen to fill in
Select the Startup Tab to enter the remote folder to start in, ie /WWW/STAFF/N.Whittaker (changing
for your own). You may also wish to enter the local folder too.
Press OK to complete the setup.
You will now be connected to the remote server.
Web Page Creation using Netscape Composer 4 -15-
The Left side is your local pc, the Right side is the remote server.
If you do not have the correct folders listed, use the navigation arrows in each screen to locate your local
and remote folders.
Transferring your files
Once you see your remote web folder, simply drag the file index.html over to the remote window.
This copies the file to the web server, and it is now ready for previewing.
 Do this now
In your Netscape Navigator window, enter the address of your web page, ie
http://www.doc.mmu.ac.uk/STAFF/N.Whittaker
You should see your published web page.
EXERCISE
1.
2.
Continue editing your web page, inserting links in to a colleagues page.
Publish the web page and ensure it loads in a web browser
Congratulations. You should now be able to create a simple web page with links to other pages, and
to be able to publish your results on the MMU web site
Web Page Creation using Netscape Composer 4 -16-
Further Web Page Links
Important Note
The links you create do not have to be to other web pages. You can simply link to any file that is available





Email addresses
Document files (Word processing, Spreadsheets etc)
Picture Files
Program files
Archive (zip) files
This means that your links can point to documents you wish to be made available. When the browser
attempts to load the page, if it cannot display it, it will ask the user if they want to save it on their disk.
You could create a list of documents to download to the user if needed, with suitable description in the link
text, and the filename as the actual web document



Ensure the document is available in your web directory (ie in your web folder)
Later, you may wish to organise work into subfolders
Later lessons show how to implement security of access to only allow certain users access to
data
Adding an email link to your web page
A useful utility on a web page is to be able to click someone's name and use it to send an email to that
person. We will do this with your own web page link.
 Do this now
1. Go to your document in Netscape Composer.
2. If you do not have it already, create a line on your web page that says somthing like
"To email me click here Nick Whittaker"
3. Highlight the name part (Nick Whittaker
above) and create a link. The difference is that the
link is not an http link (ie to a web page) but a
mailto link. Enter the link as
mailto:[email protected]
(or whichever)
4. Save the file and preview your page. Try the
link out. It should invoke the default email
program on your system (this may need setting
up).
Web Page Creation using Netscape Composer 4 -17-
Adding Images to your web page
The default web page already has an image attempting to load. All you need are images in your directory.
Images are picture files, in different formats. Most browsers will handle different types



BMP or "bitmap" files, were common, but can be very large
GIF files, smaller, more common now. Sometimes "animated"
JPG ("j-peg") small file size, are "compressed" Good for downloading
To put an image on your page:
!!! Ensure you have an image file to display. Copy it into your work folder. If you do not have one,
find one on your work pc. Alternatively, locate one from any web page and save the image to your
work area (to save the image, right click on the picture in a web browser and save it)
 Enter some text to describe the picture and move to the point on your page where you want the image,
and select Insert Image from the menu
Web Page Creation using Netscape Composer 4 -18-
 Now, select the image from your work folder. Note other options to resize the image and where
surrounding text should go :
 Click OK and see the result
Web Page Creation using Netscape Composer 4 -19-
Changing the properties of your picture
 Right-Click on the image to get a menu to select Image Properties. Here, you will be able to set some of
the properties again.
Important notes about your pictures
1.
2.
3.
4.
5.
6.
Have pity on your viewers! Don’t make them download huge picture file.
Image files normally need adjusting for file size and physical dimensions. A typical screen is
640x480 or 800x640 pixels. Adjust the physical size of an image bearing this in mind.
You can use Netscape (ir HTML) to "fit" the file in a given area on screen, but the whole file is
still downloaded and squashed in.
Avoid using BMP (BitMap) or TIFF files. They tend to be very large. They are the default file
types that scanners often use.
Use JPG or GIF files, try to keep the image file size small – you don't need phot-quality on a web
page. About 30K is the maximum you should have for a file
Use an image manipulation program such as Lview or Photoshop to get the images to the correct
size.
Exercises
1.
2.
3.
4.
Spend time adding links, setting properties of the page and images.
Add pictures and links.
Try making an image into a link itself (right click the image and Make Link)
Practice, practice, practice
Next Lesson……
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Creating brand new pages
Linking your pages together
Making secure access to local users
"Thumbnail" images and links
Icons on your web page
Design Styles
More formatting, characters etc
Tables of data/links/text
Links within the same document, named links
Where do we go from here?
Web Page Creation using Netscape Composer 4 -20-