Administrative Stuff
Please sign up for CIS services on MUGSI if you have not done so already. Visit http://www.mcmaster.ca/dataserv-htm/mcss0001.htm. You must register with MUGSI to log on to Windows in the computer labs and to use e-mail.
Also, please sign up for the class electronic discussion list. Francois has put up instructions for this at http://www.chass.utoronto.ca/~lachance/mcmaster/humcom.htm
HTML: Advanced Linking with the Anchor
Last week, we learned how to link to a local file, an external file, and an e-mail address.
This week, we'll take that one step further.
Sometimes, you want to link to a specific part on a page. For example, you may want to give a link at the bottom of a page to get all the way back up to the top of that page. To do this, you will need to establish an anchor.
Select the place on the page that you would like to link to. You will have to set you anchor as close to this place as possible. For example, if you are trying to give a link to the very top of your page, set you anchor as the first item between your BODY tags. If you are trying to link to a specific paragraph, set your anchor just before that paragraph.
At this desired location, type <A NAME="XXXX"></A>, where XXXX is some name of your choice. It can be as long as you want, and in can use letters or numbers. Try to make it relevant. For example, if it is for linking to the top of your page, why not call it TOP?
Choose the hot text for linking to this part of the page. Surround this hot text with these tags: <A HREF="#XXXX"></A>, again where XXXX is the name of the anchor that you placed.
Save your page, load it up, and test it out.
For a sample of this type of linking, click here. For a look at its coding, view its source, or click here.
Note that if you would like to link to a specific section of another local page, you must use
<A HREF="filename.htm"></A>and add a # and then the anchor name. For example, to link to the TOP anchor of a local file called intro.htm, the tags would be
<A HREF="intro.htm#TOP"></A>
Similarly, to link to a specific section of an external page, use the
<A HREF="http://www.whatever.com"></A>tags, and add a # and then the anchor name. For example, to link to the INDEX anchor of the imaginary web site http://www.gordroberts.com, the tags would be
<A HREF="http://www.gordroberts.com#INTRO"></A>
HTML: Using Colour
One of the most fun elements to work into a web page is colour.
However, when you use colour, you should keep this in mind: everyone's screen shows content differently! Some monitors can show millions of colours, while some can only show 16. (Similarly, some monitors have a higher resolution, so a single web page can look too squished-in on one monitor and too spread-out on another.)
The trick to using colour is to choose carefully.
Francois has put a palette of the 16 safest colours here. These colours look the same on absolutely every computer, PC or Mac.
Many monitors can handle 256 different colours. Of these, 216 look the same on PCs and Macs. So, the next best choice above the 16 colour palette is the 216 colour palette. A good place to look for one of these palettes is http://www.whatis.com, and specifically, at http://www.whatis.com/216color.htm#table.
If you are really feeling brave and you want to experiment even more with colour, visit the hIdaho ColorCenter at http://www.hidaho.com/colorcenter/cc.html. Remember, though, that the colours that you choose from there may not be "web-safe".
Note that colours are coded on the Web in hexadecimal. This is a numbering system that uses the digits 0 through 9 as well as the letters A through F (with 0 being the lowest and F the highest). Each colour code has 6 digits, with the first 2 digits representing red light, the second 2 representing green light, and the final 2 representing blue light. For example, the colour red is represented by FF0000 (full red + no green + no blue), green by 00FF00 (no red + full green + no blue), and blue by 0000FF (no red + no green + full blue); similarly, white is FFFFFF (full red + full green + full blue), and black is 000000 (no red + no green + no blue). With 256 (16 x 16) choices for each of red, blue, and green, that works out to 16777216 (256 x 256 x 256) colours in all!
There are five different ways that you can alter the colour on a web page. You can change...
If you were going to change the colour for each of these 5 items, you would change your opening <BODY> tag to
<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX" VLINK="#XXXXXX" ALINK="#XXXXXX">where XXXXXX is the hexadecimal value for the colour of your choice.
Note that you are not obligated to change each of these items. For example, you might only wish to change the colour of the background and of the text. To do this, add only the elements that you would like to alter to the <BODY> tag, in this case
<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX">
Keep in mind that any colour selections that you add to the <BODY> tag affect the entire page.
For more information on colour, visit the aforementioned ColorCenter.
You can also use an image as your background. You do this, too, by changing your opening <BODY> code. For the image filename.xxx, the code would be
<BODY BACKGROUND="filename.xxx">For example, to use the image mcbanner.gif as the background for your page, the code would be
<BODY BACKGROUND="mcbanner.gif">
Of course, you can combine this with the colour codes!
HTML: Font Options
You have a couple of options at your disposal when it comes to fonts.
First of all, you can change the size of your font. Choose the text that you would like to alter, and surround it with <FONT SIZE="X"></FONT> tags, where X is some number between 1 and 7 (1 being the smallest, 7 being the biggest, and 3 being the default). Click here for font size samples.
Secondly, you can change the colour of the text that you use, even if you have already set the text colour for the page in the <BODY> code! You could make every word a different colour just like this! Just surround the desired text with <FONT COLOR="#XXXXXX"></FONT>, where XXXXXX is the hexadecimal value (described above) of the colour of your choosing.
However, one thing that you should avoid is changing the font style itself. That is, you should refrain from using other font styles on your webpage. Your computer may have 200 different fonts on file, but you have no guarantee that your site's visitors will have those same fonts. To be safe, just leave the font style alone.
HTML: Tables
A table is just what it sounds like: it is a chart that you can build into your web page.
You might use a table to organize information into rows and columns just as you would with a spreadsheet.
However, tables are also great for laying out information. For example, you could design a table with one row and two columns that places an image in the left-hand cell and some text in the right-hand cell.
Tables can have invisible borders, so you don't even have to know that they're there.
For a brief introduction to tables, click here. For even more information, check the handbook that came with your text, Web Page Creation & Design Compact Guide by Linda Ericksen.
HTML: Managing your Files and Folders
Here are a few pointers on keeping track of your files and folders.
Make sure that you keep all of the files for your site together in one place. This can be in one directory on your hard drive or on one floppy disk. (Keep in mind that it is a good idea to make several copies of your site and to store them in different places, just in case!)
For example, let's say that you are storing your site on a floppy disk. If your site uses an image file, then put a copy of that file on your floppy. Similarly, if you are storing your site in a directory on your hard drive, then put a copy of that image file in that directory.
If you don't keep all of your files together, then your site will not load up correctly. As an illustration, you might have all of your HTML files saved to floppy, but all of your image files saved to you hard drive. If you looked at your site on a friend's computer, would it load up correctly? No, because your friend does not have a copy of those pictures.
Make sure that your file names match your links. If you have a file called HAPPY.JPG and you try to insert it into your web page with the code <IMG SRC="happy.jpg">, it may not load up, because the file name is not in lower-case letters.
HTML: Everything Else
Many of the other codes that you might be looking for are listed in Web Page Creation & Design Compact Guide, the handook by Linda Ericksen that accompanies your text. Take a look in there.
You can also search the web for more information. There are some great HTML help sites out there. (Just avoid the not-so-great ones!)
And don't forget: When all else fails, VIEW SOURCE!
This page copyright Gord Roberts, May 1999. |