Advanced Web Site Topics
Introduction
E-mail response forms
Writing Custom CGI Scripts
Password-protecting Web pages
Image maps
Monthly images
Introduction
Once you have created your Web site and have become comfortable with the basics, you might want to start adding more advanced features, to enhance your Web experience. Keep in mind that the University of Calgary has limited bandwidth to offer. With over 40,000 community members, most of them wired in and online, we do not have much power to spare to run complex cgi scripts or streaming multimedia. As such, we do not allow some Web technologies on our servers. If you have any questions about what is allowed and what is not, please contact the Information Technologies Support Centre. For now, here are some advanced topics that might interest you.
E-mail response forms
It is very common to want to provide your users with a form for providing feedback or soliciting information. IT provides a very flexible tool for building these types of forms, called formresponse.
See the IT Web Utilities: User Forms page for more information.
Writing custom CGI scripts
IT offers application hosting services on a dedicated server. For more information, please click here.
Password-protecting Web Pages
It is often desirable to require users to log on before they can view a web page. You can do this using .htaccess.
.htaccess can be used when you want to create usernames and passwords for the people who will access your site. You might want to create a single username/password shared by everyone (e.g. chessclub/king) or set up a different one for each individual user.
For detailed information about using .htaccess click here.
If your site is FrontPage enabled, then you can use the access control mechanism built into FrontPage, which is actually based on .htaccess.
Image maps
An image map is a special type of image which has sensitive areas. Someone using a graphical Web browser like Mozilla, Netscape or Internet Explorer can click certain spots within the image and jump to different pages, depending on where they clicked. This is often used for maps or menus.
An image map has three components:
- An image file, which is what the user sees.
- A map file, which contains the coordinates for regions on the map, and what links they represent.
- An HTML file that includes the image, and a special link to the map file.
To create a working image map, all three of these files need to be present on the Linux system, installed in your webdisk/public_html directory, and readable by the server.
For the purposes of these directions, we will use campusmap.gif as the image file, campusmap.map as the map file, and campusmap.html as the HTML file. The first thing you will need is an image file. The preferred formats for image files on the Web is .GIF and .JPEG. GIF images are good for small images, or images that use a limited range of colors. JPEG images are good for large images that use a wide range of colors, like photographs.
You can use any graphics program you like to create the image file, if it can create GIF or JPEG files.
You must upload the image file to your IT user account, and put it in your webdisk/public_html directory. To make the file readable to the server, type
setfacl -m u:nobody:r webdisk/public_html/campusmap.gif
The partial URL for the image is: /~username/ campusmap.gif . Substitute your IT username and your image file name to get the actual partial URL. You need to know this for later.
There are three ways to create a map file:
- Using a microcomputer program
- Using an online service
- By hand (a text editor on Linux)
If you use a microcomputer program, you can point-and-click to generate a map file. The important thing to know is that you want to generate an NCSA-style imagemap, not CERN-style. One image mapping programs is MapEdit (32-bit). This program is not supported by IT.
You can also use an online service to create your map file. These allow you to interactively create the map file by sending the service the URL of the image (from step 1) and then picking points on it. They create a map file for you which you can download. One service is MapMaker. MapMaker actually requires you to send it the URL of a page with the document included, so follow the instructions on creating the HTML file, then send the URL to Map Maker.
You should also try to make your map usable by people who have set their browsers not to load images, or those using text-based browsers. When someone using a text browser tries to access your map, they will see something like this:
(poly) /~jsmith/maps/science.html
(rect) /~jsmith/maps/chicken.html
(circle) /~jsmith/maps/rock.html
(default) /~jsmith/maps/elsewhere.html
You can make your map file into a menu for text-browser users by editing it with the pico editor on Linux and adding "Menu text" between the URL of a region and the coordinates.
To set your map up on Linux:
- If it is not already in your IT user account, upload the map file to Linux and move it to your webdisk/public_html directory.
- Make the file readable to the WWW server by typing
setfacl -m u:nobody:r webdisk/public_html/campusmap.map
The partial URL of the map file is: /~username/ campusmap.map . Substitute your IT username and your map file name to get the actual partial URL. You need to know this for later.
You now need to create an HTML file. This file will be just the same as any normal HTML file. The only tricky part is getting the map to work. Add these lines to your document in the position where you want the image map to appear:
<A href="/cgi-bin/imagemap/partial URL of map file">
<IMG src="partial URL of image file" ALT="Description" ISMAP></A>
The <A href="..."> ... </A> part is a hyperlink to the map file. Hopefully you noticed that the URL is not like the ones to typical pages. For anyone doing image maps with the IT Linux systems, the first portion will be the same: http://www.ucalgary.ca/cgi-bin/imagemap . This specifies that instead of just returning a document when someone clicks the link, the IT Web server should run a special program which takes the coordinates of the mouse click, looks at the map file, and then figures out which document to return. The next part is the partial URL of the map file: /~username/campusmap.map . This is actually the following file on the Linux system: ~username/webdisk/public_html/campusmap.map . The <IMG src="partial URL of image file" ALT="..." ISMAP> tag is like a normal image in a Web page, but the ISMAP attribute tells the browser to send the coordinates of the mouse click to the Web server when it asks for the file. The ALT="Description" should indicate to text-based browser users that they will see a menu if they follow that link.
So in the end, the whole thing might look like this:
<A href="/cgi-bin/imagemap/~jsmith/ campusmap.map">
<IMG src="/~jsmith/campusmap.gif" ALT="Go to a Campus Directory" ISMAP>
</A>
Monthly images
This utility is of limited appeal, but it is still interesting. If you want an image on your page to change based on what month it is, follow these steps:
- Create a new directory under your webdisk/public_html directory, calling it monthpics for example: mkdir ~/webdisk/public_html/monthpics
- Create 12 GIF images with the following names: Jan.gif, Feb.gif, Mar.gif, Apr.gif, May.gif, Jun.gif, Jul.gif, Aug.gif, Sep.gif, Oct.gif, Nov.gif, and Dec.gif. Note: Case is important in this one, so JAN.GIF and jan.gif will not work!
- Place all of these images into the directory you made in Step 1.
- Make the directory and images readable to the world:
chmod a+rx ~/webdisk/public_html/monthpics
chmod a+r ~/webdisk/public_html/monthpics/* - Add the following HTML tag to the HTML document you want the images to appear in:
<IMG src="/cgi-bin/monthlygif/~username/monthpics" ALT=""> where username is your Linux user id.