Tips for creating and editing readable web pages
FrontPage is widely used for creating web content, Microsoft has
loaded it with features that can generate web pages that work with
Internet Explorer, but may not work with other browsers. For
example, FrontPage creates web pages that do not conform to
standard HTML. As well, it also uses a proprietary Microsoft
character set, so that some characters will not appear normally in
non-Microsoft browsers such as Firefox or Safari.
DreamWeaver is probably a good choice if you want a commercial
A good free
alternative is the Seamonkey composer, which is part of Mozilla
http://www.mozilla.org/projects/seamonkey/. It is probably
the easiest way to make web pages.
Creating Web pages using Seamonkey Composer
1. Visual organization
Perhaps the most important point in
creating web content is that the visual layout should help the
viewer understand the organization of topics.
Use visual components that catch the eye, such as large main
headings and smaller subheadings. Make headings a different
color than text. Bullet points and indentation also help to show
how the information is organized.
2. Capturing and creating
Images can be
saved from remote Web pages, or captured directly from the screen.
Most web browsers can display images from files in PNG
(*.png), GIF (*.gif) or JPEG (.jpg) formats.
images from Web sites
Any image on any Web
page can be saved from Seamonkey by mousing over the image,
holding down the right mouse button and choosing Save Image As. Images
should be cited by the URL from which they were taken.
- Embedding images from web sites
image from a remote web site can be displayed directly on your
web page without the need to click on a link. In Seamonkey,
when you insert an image, normally do so in the Image
Properties menu, in which you choose an image file to include
from the directory in which your web page is located. However,
any URL can be pasted into the Image Location field in the
Image Properties menu. The important point is that the URL
must go directly to the image, rather than a page on which the
image is displayed.
- Capturing images from the screen
rectangular area, or full screen can be captured using 'xv',
the Screenshot Tool, or in gimp, both of which can be launched
at the command line or from the Graphics section of the Launch
menu. All of these programs can directly save files in formats
such as PNG (.png) GIF (.gif) JPEG (.jpg),and TIFF (.tif).
Other formats are available, but GIF, JPEG and PNG files are
usually the smallest and most universally-read formats.
- Draw your own figures Several
programs exist for drawing figures, which can be launched from
the Graphics section of the workspace menu, or by typing their
names at the command line: 'tgif' as well as
OpenOfice/LibreOffice Draw. tgif
is especially convenient for making quick diagrams. It
produces files in several formats including PNG, GIF, JPG, and
|Hint: Keep graphics files
The more detail, the bigger the file. Large files take
a long time to download. TIF files tend to be much
larger than GIF or JPEG.
- Upload images from a PC
from a PC can be uploaded to your Unix account using FTP (File
Transfer Protocol). One of the most comprehensive FTP programs
is Filezilla (http://www.sourceforge.net/projects/filezilla).
3. Text and images must be
readable by people in the back of the room
Putting up text and
graphics that your viewers can't see or read accomplishes
nothing. Again, make sure headings, subheadings, and
tables are readable on the screen. For some reason, the
Ariel/Helvetica family of fonts seem to be more readable, from a
distance, than fonts such as Times.
Another consideration is contrast.
Text should contrast strongly with the background. Although it
may look cool, a dark blue text against a black background is
virtually unreadable. Use bright text against a dark
background, or dark text against a bright background.
You can barely read this.
This is best both for viewing and printing.
This looks great on
the screen or monitor, but is not so good for printing.
This isn't very
4. Keeping text with
|When you want to keep a
block of text with a graphic image, it is best to embed
both in a table. For example, the text in this
paragraph, and the window to the right, are in separate
columns of a table with 1 row. The Insert Table window
shown is the actual window used to create this table, in
the web page you are reading now.
Usually, a table with 1 row and 2 columns works
well. If you set the border to 0 pixels, it will not
even look like a table, but rather, like an image that
is set to wrap text to the left.
Notice that you can even insert a caption by inserting
text below the image.
Settings for creating a table that keeps text with
When I look at my web page in the web browser, it doesn't
appear. Instead there is an empty box.
A: In the SeaMonkey Composer, double click on the image,
which will bring up and Image Properties window for your
image. Under the heading Image Location you can see
the URL for the image. It is possible that the name was
spelled incorrectly. But another possibility is that
SeaMonkey inserted a fully qualified file path to the file,
rather than just the name of the file:
The fully qualified path will only work if you open the HTML
file using File --> Open. When you navigate to the page
through the web server, there will be no file at that exact
file path, so you get a file not found error.
5. Relative links versus
There are two
kinds of hypertext links:
Wherever possible, use relative links.
This is important, because at a later time you may reorganize your
directory structure, or even copy and re-use web directories for
other purposes. Relative links should not need to be changed, in
most cases. Usually, the only time you need absolute links is for
pointing to external web sites.
- absolute (external) link
- a fully-qualified URL, consisting of a domain name, path and
filename. For example, the absolute link for this file is
- relative (internal) link - a link
pointing to an HTML file, whose path is relative to the
current directory. For example, this page is lec02.3.html. A
relative link to the previous page would be lec02.2.html. We
don't need to include any web server or path components,
because both files are in the same directory.
6. Organize your web files
in a hierarchical directory tree
is everything. Your web files should be organized in a directory
tree that reflects the relationships between web pages. Often,
there is a master page which has links to many other pages. The
master page would be in a high-level directory, and there would be
a subdirectory for each of the other pages. Most importantly, all
graphics files for a given page are kept in the same directory as
the page that displays them. This means that you can use relative
links for everything, and that the relative links will only need
the filename, and no path.
directory, shown at the beginning of section C, illustrates
7. Use fixed fonts for program
generate output that only makes sense with a fixed font.
Most fonts commonly-seen in documents are proportional fonts,
meaning that narrow letters such as 'i' or 'l' take up very little
width, whereas wide letters such as 'O' take up more space. In
fixed fonts, all letter and numbers take up exactly the same width
on a line of text. For example, output from the BACHREST program,
listing restriction cutting sites and restriction fragments for a
sequence cut with the enzyme AcoI, are shown in both fixed and
proportional fonts. Make sure that when output is shown on a web
page, it is in a fixed font.
Frags Begin End
2817 2533 5349
977 1556 2532
2817 2533 5349
977 1556 2532
Most fonts are proportional, eg. Helvetica, Times.
Examples of fixed fonts include Courier, Lucida typewriter and
connection to your Unix account
1. Remote text-based connection - ssh
encryption is a mechanism for sending messages that can only be
encrypted by the recipient, and no one else. A pair of numbers,
called a Public Key and a Private Key, can be generated using one
of several methods. The most important point is that any message
encrypted using the Public Key can only be decrypted using the
Private Key. To make it possible for others to send you encrypted
messages, you make your Public Key available, for example, on your
web site. However, your Private Key is kept secret.
if Bob wants to send Alice an encrypted message, he reads Alice's
Public Key and encrypts the message. Next, he sends the encrypted
message to Alice, who can decode it using her Private Key. Even if
the encrypted message is intercepted by someone else, they can not
For more on Public key encryption see http://en.wikipedia.org/wiki/Public-key_cryptography
SSH - secure shell
SSH is a
program that uses public key encryption to let you run a
text-based session on a remote server. SSH automatically generates
a Public Key/Private Key pair, so the user doesn't have to know
how to do that.
There are actually three related programs:
|run a remote shell
|copy files to remote server
|transfer files to remote
Unix from another Unix machine
Any Unix or
Linux host will have ssh as a standard part of the installed
software. To connect to the U. of M. Unix system, from another
Unix host type:
where userid is your unix
userid. You will be prompted for you Unix password. If the
password is correct, you will see the command line prompt
appear. When you are done, simply type 'logout' to end your
The Windows DOS command line doesn't include an SSH command. On
Windows, you need to download a program that will run a terminal
session. See Running a comandline session from
a Windows PC