|
(This page was last changed around May 1997, but hey, good information is timeless! At least until the XML hits the fan....)
Further down this page, you will find information on graphics, html frames and perl, but let's start with some...
BASIC HTML TIPS
<img src="yourimagename" width=xxx height=xxx alt="Description here">This speeds up display of your page, allowing the browser to lay out all the elements on the page before it has downloaded the image, and gives the image a description which can be used for many purposes - text only browsers, indexing tools, etc.
You can also add a description to Anchor tags. If you put: <a href="yoururl" onMouseOver="window.status='Click me'; return true"> Then 'Click Me' will appear in the browser's status bar when the mouse moves over this link. (this only works with Netscape versions 2 and later, and Internet Explorer 3 and later)
Putting text inside a table with a specified width can make it much more legible, although you risk alienating a few people with archaic browsers. For example, <table width=400>This piece of code will limit the width of your text to 400 pixels, leaving the rest of the screen as whitespace. The text on this page is in a table 420 pixels wide.
There are a number of meta tags which can be added within your page's header for completeness. Common ones include description, which gives a brief summary of the page and keywords which lists words relevant to the topic of your page, but not necessarily mentioned in the text of the page. Both of these tags are used by search engines such as AltaVista and Hotbot when they index your page. The code for them will look something like: <META NAME="description" CONTENT="This is the Homepage of Daniel (Nathan?) Sumption. If you're looking for me, this is where I am. All links spring from this page. That's it!">Other tags I have come across include those for specifying the content type and alphabet used in your page: <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">And the page's author: <META NAME="Author" CONTENT="Dan Sumption">Meta tags which include HTTP-EQUIV rather than NAME perform the same function as the equivalent Hypertext Transfer Protocol command (got that?), so: <META HTTP-EQUIV="Refresh" content='30; url="http://www.mysite.com/nextpage.html"'>instructs the webserver to perform a Refresh command using the given content. In this case, the result is that in 30 seconds the current page will be replaced with the page http://www.mysite.com/nextpage.html. Sending a Refresh command with no url means that the current page will be reloaded after the specified wait. There are also various schemes which generate meta-tags for rating your pages according to their content. For example, RSAC allows you to specify levels of nudity, sex, violence and bad language on your page, then generates a meta-tag which certain browsers can use to protect the innocent from your evil creations. It will look something like: <META HTTP-EQUIV="PICS-Label" content='(PICS-1.0 "http://www.rsac.org/ratingsv01.html" l gen true comment "RSACi North America Server" by "dan@sumption.org" for "http://www.fictionalsite.com" on "1996.04.16T08:15-0500" exp "1997.07.01T08:15-0500" r (n 4 s 4 v 4 l 4))'>(if, that is, you have a particularly salacious site!) Remember that all <META> tags must come in between the <HEAD> and </HEAD> tags in your document. If you find any more interesting meta tags, let me know.
Finally (for the time-being), if you are using a background texture on your page then remember to set the background colour of the page to match the texture. For example: <body background="blackblobs.gif" bgcolor="#000000" text="#ffffff">The reason for this is that if, for some reason, your background image won't display (like if it's corrupted or deleted or moved or incorrectly spelt or any of the 5,000 other reasons) then at least people will be able to read what's on the page. Otherwise, white writing on a light grey background (or whatever) may cause unnecessary eye-strain. As an added bonus, people will be able to start reading the text on your page before the background has finished downloading.
Transparent images also need this smoothing effect along any edges which are not horizontal or vertical. To achieve this, you must make the background (the area to become transparent) the same colour as, or similar to, the colour you will use as your webpage's background. Again, in Photoshop the fill tool will create anti-aliased edges by default. However, there can be problems, such as when your page's background has more than one colour (although similar colours - such as a range of light blues - will not be noticeably affected), or when the picture uses the same colours as the webpage's background (e.g. if the background is white, white areas in your picture will come out transparent)..
Animated gifs are a whole 'nuther kettle of fish, and I will tackle them when I have a few months to spare!
To set up two frames, one 100 pixels wide, the other filling the remainder of the screen, use: <html>When a link within a frame is chosen, the browser loads the next page in the same frame by default. In the above example, to make a link in the side window load a page into the main window you would use <a href="newmainwindow.html" target="mainwindow">
For a more complex display, where framesets are nested, you could use: <html>
#!/usr/bin/perl Always save your perl files using UNIX linebreaks - Programmer's File Editor for the PC or BBEdit for the Mac can both do this. To send output as html, make sure that you print "Content-Type:text/html\n\n" to the standard output before anything else. The "\n\n" is two newlines.
[Hopefully, I will soon get around to writing a perl wrapper program which handles all sorts of useful web-type things, and you'll be able to steal it from me here!]
|