Advanced HTML Tricks
Covered in this section: frames, tables, thumbnails, email tricks, etc
Frames - use, creation
Frames are used to divide pages into sections. They can be
used to place a content or navigation bar on the page. To create
a frame, there are two main tags:
<frameset> : this starts the code for
frames.
<frame> : this tag indicates the start of
one frame.
In the <frameset> tag, you can add the
following:
rows : indicates that rows will be used. add the
height of the rows here. (rows="50%,50%") numbers can
be in percent or pixels.
cols : same as above, except columns instead of
rows
frameborder : indicates the width of the border
in between frames
In the <frame> tag, you can add the
following:
name : name the frame
SRC : the source of the information in the
frame.
marginheight : the height of the margin
marginwidth : the width of the margin
scrolling : "auto" indicates that a
scroll bar will automatically be created if needed.
"none" means no scroll bar will be created.
noresize : the frames cannot be resized
Each frame needs its own HTML page. This means, as shown in the example below, that it actually takes 3 HTML pages to make a 2 frame page. Frames are written in the order they will appear. Frames can also be used with images, as in the example. The code for frames is added after you close the <head> tag, but before you open the <body> tag.
Click here for an example of frames, using the code below. Press "back" on your browser to return.
<FRAMESET cols="50%, 50%"
frameborder=1>
<FRAME name=frame1 SRC="ky1.gif" marginheight=10
marginwidth=10 scrolling=auto noresize>
<FRAME name=frame2 SRC="ky2.gif" marginheight=10
marginwidth=10 sccrolling="auto" noresize>
</FRAMESET>
After you close the <frameset> tag, start the <body> tag. Then add a <noframes> tag. This tag is for people who don't have frame capabilities. After the <noframes> tag, add a message for people who don't do frames. Say something like, "Sorry, your browser can't handle frames. Click here for a no-frames version," using a link to a no frames version. Close the <noframes> tag, then close the <body> tag. Finish the page by closing the <html> tag.
If you click on a link inside a frame, it will open in the
same frame. If you want the link to open in a different frame,
use this code:
<a href="whatever.html" target=frame1>,
or whatever you named the frame you want the link to open in.
Thanks Sarah
for letting me steal this from her ; )
Thumbnails - creation, using
Creating thumbnails is an easy process. If you have an image
editor, you can just shrink the image. If you don't, you can use
this following process:
Create a "test" webpage. On this page, insert
all the images you need to make into thumbnails, resizing them
with the height and width tags. When you view the page,
right-click and save the images. Don't forget to change the file
name. The saved images will be thumbnails.
NEVER "create" thumbnails by just resizing them with
the height and width tags on your gallery page. This causes the
viewer to have to download the entire large picture. The purpose
of thumbnails is to reduce loading time while providing the
viewer with a preview of the picture.
Thumbnails can be used in conjunction with a table for easy
organizing.
Tables - creation, using
Tables are very useful tools. They can be used to organize
thumbnails, information, or a layout. (Corner layouts will be
covered in Advanced Design Tricks).
To create a table, there are 3 main tags. They are : <table>
, <tr> , <td> .
The <table> tag starts a table. Inside
this tag, you can add:
border : in pixels, how wide you want the border
cellpadding : used with the border, how much
space you want inbetween cells
cellspacing : how much space you want around the
information or picture in the cell
background : if you want a background image, the
location of this image
bordercolor : what color you want the border
bordercolordark : if you want a two color
border, the color that will be on the right and bottom sides of
the table
bordercolorlight : if you want a two color
border, the color that will be on the left and top sides of the
table.
bgcolor : if you don't want an image, what color
you want the background. If you leave this out, there will be no
background.
example:
This table's code is:
<table border="5" cellpadding="5"
cellspacing="5" bordercolordark="lime"
bordercolorlight="silver" bgcolor="blue">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
It looks like a little window, doesn't it?
The <tr> tag adds a new row to the table.
The <td> tag adds a new cell (square) to
the table.
Information can be added after a <td> tag.
Remember to close all tags, especially the <table>
tag. If you don't, anything outside of your table might
"disappear".
Leave out any tags you don't want. If you don't want a border, leave out all border tags. If you only want a one-color border, leave out the bordercolorlight and bordercolordark tag. If you don't want any spacing between cells, leave out the cellpadding and cellspacing tags. Experiment for a while, and you will come up with the code you want.
Email tricks
I have used several email tricks in the making of this page.
The Subject trick
If you want to have a specific subject in emails sent to you
from your page, use this code:
<a href="mailto:you@you.com?subject=MyPage">email
me</a>
Keep in mind that with many browsers, spaces in the subject you
enter will be interpretted as a %20.
Send it to a friend
Want to have people send email about your page to a friend? Use
this code:
<a href="mailto:?subject=MyPage">email
a friend about my page</a>
This tells the browser a subject, but not an address to send to.
The viewer can click on the link, then type in the addresses of
friends to send the email to.
To overcome the %20 problem, I like to add a dot (.). It gives the look of a space without a space.
If I come up with more tips I will add more to the page. If you have any that you would like to add, email me.