Let's work on your web pages
Some of this comes from:
John Butler's web page at the Univeristy of Houston (Get through the funny
stuff about moles and there are links to a Mac and PC version of his Short
Course. It shows examples of the header sizes, etc. and what all the
various open/close commands mean. Thanks Pam!)
Fire up the html editor: Alpha
1) On the Macintosh side of the computers, connect to your afs space.
This can also be done by FTP.
2) Launch Alpha.
Set up your home page
3) You need to get into the HTML mode with may have to be done by saving a
file to your afs space (www directory) called
index.html without any formatting. That should get a menu to appear that
will have the Netscape N.
I figured out that you can get into the html mode by looking under the
Config menu->Current mode-> Menus->Html menu.
Note that the file called
index.html is your actual HOME page and the
browsers look for it when they enter your space.
Your home page will thus be at:
From it you can then link off to other pages.
Create the document
4) Once the page appears in Alpha, select
new document under the
HTML menu (we will use it almost all of the time).
5) You will get a dialogue box asking about parameters such as background
You can experiment with colors by looking under the html menu->html
utilities->Colors...->View, etc. Once you get a color that you like, you
can give it a nmae (only saved on that local machine in the Alpha Prefs
files. Change the background color on a page by going to html menu->html
utilities->Colors...->View->html picker (find this on the column on the
left), find you color, and then copy the color code and paste it into the
background color spot in the body tag.
6) Now you are ready. Start typing, and format away. Save often, and
then send the file to the browser to see how it looks occasionally.
Other things to consider:
Last modified tag
7) Link things up by copying the link if you can or otherwise making a note
of it, highlighting the link text, and then find links under the html mode
menu. You can choose images or actual links.
8) Add images by choosing to link to an image instead of a site.
9) Markers can be used to navigate within your page:
use this <a name="marker"> to
indicate the location to which you can transfer, and then in a table of
contents or otherwise set up the link, give the file name and then
#marker: <a href = "html.html#marker">Go To marker </a>.
Page layout considerations
Try to think a bit about how you want your pages to look. Try to use a
uniform style (backround color, headings, etc.). Add navigation buttons
so that the users can get around in your pages. Note how all of our class
pages have that graphic linked to the class home page.
Converting other files to web ready ones
Note that browsers only like to see *.jpeg or *.gif files for graphics.
These are bitmap file formats with 72 dpi resolution. If you want to
convert a graphic that you may have drafted in Canvas, save as *.gif and
select 72 dpi. Note that you may want to go into Adobe Photoshop to adjust
the size and resolution to be appropriately sized.
Here is a big graphic that uses a smaller thumbnail as a link:
Here is how I did it:
<A HREF="../CentralAsia.gif"><IMG SRC="../CentralAsia.gif" WIDTH="117"
Notice that I squashed the figure to be one-tenth of its original size in
the image tag. That could be done also by making a second smaller file in
Photoshop, but this seems ok.
Word processor to html
I like to use
rtftohtml to go from Rich text format (saved as from
Microsoft Word) to html.
See other links on this page
for other converters.
Have a look at the map that Steve Reynolds has developed by viewing the
page source on this page:
The basic point is that you define a series of zones on the image and
those zones correspond to links (that is called the map).
Then when you display the image, you tell the browser the name of the map
that you will use:
<MAP NAME="azrelief" WIDTH=400 HEIGHT=480>
<AREA shape="poly" coords=" 102,1, 60,94, 217,177, 221,215 ,403,283 ,402,1, 102,1
" href="az_northern/azn_relief.htm ">
<AREA shape="poly" coords=" 8,74, 57,0 ,102,1, 60,94,99,220, 34,227, 9,74, 8,74"
<AREA shape="poly" coords=" 63,93, 99,219, 405,353, 404,283 ,221,216, 216,177, 60,93, 63,93 "
<AREA shape="poly" coords=" 1,380,34,225, 99,219 ,404,351, 402,479, 259,477, 1,380"
<IMG align=left SRC="azrelief_color_reduced.jpg" usemap="#azrelief">
Assignment 9 is to make your own web home page with formatted text, links
to other sites, and have at least one graphic. Include a link to a page
that is the outline of your final project, and add at least one link to a
formatted presentation page. Email the url of your home page by Wednesday,
November 26 at the beginning of class to email@example.com
Pages maintained by
Prof. Ramón Arrowsmith
Last modified December 28, 1997