This page will house some ideas on HTML - some creative ways
to use HTML, and at last - how to get to grips with FRAMES!
This section will grow over time as I will add more and more
to this page - also later onj, you'll also find some JavaScript
for you to use.
So good luck with HTML, and one tip:
If you want to create GOOD looking web pages, DONT use 'wysiwyg'
(What You See Is What You Get) HTML editors such as FrontPage
or HomeSite - Notepad that comes with windows will suffice!
Contents:
1. Getting to grips with Frames
2. How to create Tables
3. How to use Links & Anchors
4. Special symbols
5. Standard colour table
6. Helpful utilities for creating web pages
1. Getting to grips with Frames
Contents of this section:
1. Creating a simple frameset
2. Creating frames in columns
3. Creating frames in rows and columns
4. Creating a floating frame
5. Adjusting a frame's margins
6. Showing or hiding scroll bars
7. Adjusting the colour of the borders
8. Adjusting the borders' thickness
9. Hiding or showing the borders
10. Keeping users from resizing frames
11. Adjusting the spacing between frames
12. Targeting links to particular frames
13. Targeting links to special spots
14. Nesting framesets
15. Creating alternatives to frames
Think of a frameset as a window with individual panes. Each pane shows
different information. You decide how many panes your window will have,
what size each pane will be, how its borders should look and if it
should have scroll bars or not. Once you've built the window, you create
the landscape behind the window by assigning individual URLs to each
pane, that is, frame.
First you'll learn to create a simple frameset with three horizontal
rows, but only one column.
To create a simple frameset:
1. Type <FRAMESET after the </HEAD> tag on the frameset page.
2. Type ROWS="a where a is the height of the first row. The value may
either be a percentage (40%), an exact number of pixels (35), or
completely variable, depending on the size of the other rows (with
an asterisk: * ).
3. Type , b where b is the height of the second row, again expressed
as a percentage, an absolute value in pixels, or a variable (with an
asterisk: * )
4. Repeat step 3 for each additional row.
5. Type "> to complete the row definition.
6. Type <FRAME to assign a URL and other attributes to the top row/pane.
7. Type NAME="name" where name is a reference for the frame.
You can use the name to target the display of a URL in a particular
frame. For more information on targeting frames, consult Targeting links
to particular frames.
8. Type SRC="content.html"> where content.html is the URL for the page
that you want to be displayed in this frame when the user initially
navigates to this frameset.
9. Repeat steps 6-8 for each frame.
10. Type </FRAMESET> to finish the frameset and the construction of your "window"
Another simple way to divide a frameset is into columns instead of rows.
To create frames in columns:
1. Type <FRAMESET after the <HEAD> tage in the frameset page.
2. Type COLS="a,b"> where a and b (and any others) represent
the width of the corresponding column, as a percentage, number of pixels,
or a variable ( * ).
3. Type <FRAME to define the leftmost frame/column.
4. Type NAME="name" where name is a reference for the frame. You can
use the name to target the display of a URL in a particular frame. For
more information on targeting frames, consult Targeting links to particular
frames.
5. Type SRC="content.html"> where content.html is the URL of the page that
you want to be displayed in this frame when the user initially navigates
to this frameset. This is the landscape for the frame.
6. Repeat steps 3-5 for each frame/column.
7. Type <FRAMESET>.
8. Create the Web pages that will be shown initially in the frameset page
3. Creating frames in rows and columns
Some information is best displayed horizontally while some looks berret vertically.
Meanwhile, a large, relatively square frame is often ideal for displaying your
pages main data. You can create both rows and columns in the same frameset to
accommodate different kinds of information.
To create a frameset with both rows and columns:
1. Make a sketch of your frameset and determine how mahy rows and columns
you will need.
2. Type <FRAMSET to begin.
3. Type ROWS="a,b"> where a and b (and any others) represent the height of
the corresponding rows. For more information on creating rows, consult
Creating a simple frameset.
4. In the example shown here
The first and third rows are a single frame while the second row is divided
into columns. For a row with just a single frame, type <FRAME NAME="name"
SRC="contents.html"> in the usual way.
5. For the second row, which is divided into columns in this example,
type <FRAMESET COLS="a,b"> where a and b (and any others) represent the
width of each column in the row.
6. Type <FRAME NAME="name" SRC="contents.html"> where name is the
reference for the frame and contents.html is the page that will be initially shown in
that frame.
7. Repeat step 6 for each frame in the column. (In this example, there are
two columns, so you'll have to define two frames in the inner frameset)
8. When you've finished defining the frames/columns in the divided row,
type </FRAMESET>
9. Continue defining each row individually. For a row with just one frame
(i.e., just one column), just use a FRAME tag. For rows divided into
multiple columns, repeat steps 5-8.
10. Type </FRAMESET> to cplete the frameset definition.
If you want to mix text, graphics and a frame all on one page, you'll need
to create a floating frame - andhope that yourusers view the page with
Internet Explorer.
To create a floating frame:
1. In the container page, type <IFRAME SRC=frame.url, where frame.url is the
first page that should be displayed in the floating frame.
2. Type WIDTH=x HEIGHT=y where x and y represent the width and height,
respectively, of the floating frame as a percentage or as an absolute
value in pixels.
3. If desired, type HSPACE=h and/or VSPACE=v where h and v determine the amount
of space, in pixels, that will surround the floating frame.
4. If desired, type ALIGN=LEFT or ALIGN=RIGHT to wrap the text that comes
after the frame around the frame.
5. Type >.
6. Type <FRAME.
7. Copy each of the attributes used in steps 2-4.
8. Type >.
9. Type </IFRAME> to complete the floating frame.
5. Adjusting a frame's margins
By default, both Netscape aand Internet Explorer display a frame's contents
with a margin of 8 pixels on each side. You can adjust the margin so that
there is more space, or, if you prefer, so that the frames contents start
right in the top left corner.
To adjust a frame's margins:
1. In the desired FRAME tag, before the final >, type MARGINWIDTH=w where
w is the desired amount of space, in pixels, between the left and right
edges of the frame and the frame's contents (see here for example)
2. Type MARGINHEIGHT=h where h is the desired amount of space, in pixels,
between the top and bottom edges of the frame and the frame's contents.
6. Showing or hiding scroll bars
You can decide whether each individual frame should have a scroll bar
all the time, never, or only when needed. Only when needed means that
the scroll bars will appear only when there is more information than
can be shown at one time in the frame. If the user makes the window
big enough, all the scroll bars will eventually disappear.
To show scroll bars all the time:
In the FRAME tag of the particular frame for which you wish to show
the scroll bar, type SCROLLING=YES.
To hide scroll bars all the time:
In the FRAME tag of the particular frame for which you wish to hide
the scroll bar, type SCROLLING=NO.
7. Adjusting the colour of the borders
In therory, you can change the colour of each frame (viewed with Netscape)
individually. In practice, however, since the borders are shared between
frames, the possiblities are more limited.
To adjust the colour of all the borders in the frameset:
Inside the topmost FRAMESET tag before the final >, type BORDERCOLOR="#rrggbb"
where rr is the hexadecimal equivalent of the Red component, gg is the
hexadecimal equivalent of the Green component and bb is the hexadecimal
equivalent of the Blue component (see here for an example)
To adjust the colour of rows, columns, or individual frames:
In the appropriate FRAMESET or FRAME tag, type BORDERCOLOR="#rrggbb".
8. Adjusting the borders' thickness
You can change the thickness of the frames' borders to suit your design as
long as your public used Netscape, and not Internet Explorer, to view them.
To make the borders thicker or thinner:
Inside the topmost FRAMESET tag, before the final >, type BORDER=n where n
is the desired width of the border in pixels (see here for an example).
9. Hiding or showing the borders
Depending on the content of your frames, you may not want to have any
visible division between them at all. In that case, you can make the
borders disappear.
To make all the borders disappear:
Type FRAMEBORDER=0 inside the topmost FRAMESET tag, before the final >
To make only the vertical borders disappear:
Within each FRAME tag in the desired row, type FRAMEBORDER=0
10. Keeping users from resizing frames
Frames are always resized when the user changes the size of the browser
window. However, you can also choose whether to let the user resize
individual frames
To keep users from resizing your frames:
Type NORESIZE in the FRAME tag for the desired frame (see here for an example)
11. Adjusting the spacing between frames
Adding spacing between frames is very similar to adding space between
cells, rows and columns in a table. Tha major difference is that only
Internet Explorer recognizes the FRAMESPACING tag, thereby limiting
its usefulness.
To adjust the spacing of all the frames at the same time:
Within the topmost FRAMESET tag, type FRAMESPACING=n where n is the
width in pixels of the desired spacing (see here for an example).
12. Targeting links to particular frames
The initial contents of a frame is specified in the frameset with the SRC
tag. However, the idea of a frame is that the user be able to view additional
information in it by clicking a link in another frame, which remains constant.
The trick is to target the desired frame within the link.
To target a link to a particular frame:
1. Make sure the frame on the frameset page has a name (see here for
an example). For more information, consult Creating a simple frameset.
2. On the page where the link should appear, type <A HREF=contents.html
where contents.html is the file that should be displayed in the desired frame.
3. Type TARGET=name where name is the reference given to the frame
within the FRAME tag.
4. Add any other attributes as desired to the link and then type the final >.
For more information, see How to use Links & Anchors
13. Targeting links to special spots
Although many times you'll be happy with targeting a link to a particular
frame, as described in Targeting links to particular frames, other times
you will want to make more general instructions, like having the link
open in a new window, or opening the link in the same window that
contained the link.
To target a link to a special spot:
1. Type <A HREF="contents.html" where contents.html is the page that you
wish to be displayed in the special spot.
2. Type TARGET=_blank to have the link open in a new, blank window. This
is the ideal targeting for external links which may not fit very well
inside your frames.
Or type TARGET=_self to open the link in the same frame that contains
the link. The information in the frame (including the link itself) will
be replaced by the contents.html file specified in step 1.
Or type TARGET=_top to open the link in the current browser window but
independently of the rest of the frameset to which it currently belongs.
Or type TARGET=_parent to open the link in the frame that contains the
current frameset. This will only be different from _top when you are
using nested framesets. For more information on nested framesets,
consult Nesting framesets.
As if frames and framesets weren't complicated enough, you can put
framesets inside of frames in a different frameset to achieve special
effects.
To nest framesets:
1. Build the child, or inner, frameset as described in Creating a simple frameset.
2. Build the parent, or outer, frameset as described in Creating a simple
frameset. (see here for an example)
When you reach the frame in which you wish to nest the child frameset,
type SRC=childframes.html within the FRAME tag, where childframes.html
is the file you built in step 1.
15. Creating alternatives to frames
Although Netscape and Internet Explorere have been able to display frames
since version 2, frames are still not a standard part of HTML 3.2 You can
add information to your page that will appear if your user's browser
doesn't support frames.
To create alternatives to frames:
1. Type <NOFRAMES> after the last </FRAMESET> tag (see here for an example).
2. Create the BODY section and continue writing your page as usual
using HTML (however, DONT use frameset's in this section!!).
3. When you've finished creating the alternative to frames, type
</NOFRAMES>
Contents of this section:
1. A simple table
2. Putting headers across the top of the table
3. Putting headers on top and left
4. Dividing a table into sections
5. Adding a border
6. Choosing which borders to display
7. Adding a caption
8. Spacing and padding the cell's
9. Changing a table's width and height
10. Changing a cell's size
11. Spanning a cell across two or more columns
12. Spanning a cell across two or more rows
13. Aligning a cell's contents
14. Changing a cell's colour
15. Controlling line breaks in a cell
16. Mapping out a table
There are many kinds of tables, and even many kinds of simple tables. Here
we will create a table with two columns and three rows, using the first
column to contain the data.
To create a simple table:
1. Type <TABLE>
2. Type <TR> to define the beginning of the first row. We will add two
elements to the first row: a header cell and a regular cell. If desired,
press Return and Tab to visually disstinguish the row elements.
3. Create a header cell in the first row by typing <TH>.
4. Type the contents of the first header cell.
5. Type </TH> to complete the definition of the first cell header.
6. Create a regular cell after the header cell in the first row by
typing <TD>.
7. Type the contents of the regular cell.
8. Complete the definition of the regular cell by typing </TD>.
9. Complete the definition of the row by typing </TR>.
10. Repeat steps 3-9 for each row. In this example, there are two more
rows, each containing a header cell and a regular cell.
11. To finish the table, type </TABLE>.
2. Putting headers across the top of the table
In the previous step, in our simple table, we placed the headers along
one side of the table. To have the headers appear along the top of the
table, you have to define the cells in a slightly different order.
To create a table with headers across the top:
1. Type <TABLE>.
2. Type <TR> to define the beginning of the first row. If desired, press
Return and Tab to visually distinguish the table elements.
3. Create the first header cell in the row by typing <TH>.
4. Type the contents of the first header cell.
5. Type </TH> to complete the definition of the cell header.
6. Repeat steps 3-5 for each header cell.
7. Type </TR> to complete the row.
8. Type <TR> to begin the second row.
9. Type <TD> to define the first regular cell in the second row.
10. Type the cell data.
11. Type </TD> to complete the definition of the regular cell.
12. Repeat steps 9-11 for each regular cell.
13. Type </TR> to finish the row.
14. To finish the table, type </TABLE>.
3. Putting headers on top and left.
The objective of a table is to present complicated data in a clear way.
Often you will need headers across the top of the table and down the
left side to identify the data being discussed.
To create a table with headers on top and down the left side:
1. Type <TABLE>.
2. Type <TR> to define the beginning of the first row. If desired,
press Return and Tab to visually distinguish the table elements.
3. Create the empty cell in the top left corner by typing <TD><BR></TD>.
4. Create a header by typing <TH>cell contents</TH>, where cell
contents is the data that the cell should contain.
5. Repeat step 4 for each header cell in the first row.
6. Type </TR> to finish the row.
7. Type <TR> to begin the second row.
8. To define the first header on the left siode, type <TH>cell contents</TH>.
9. Type <TD>cell contents</TD> to create a regular cell after the
header cell in the second row.
10. Repeat step 9 for each remaining regular cell in the row.
11. Type </TR> to finish the row.
12. Repeat steps 7-11 for each remaining row.
13. To finish the table, type </TABLE>.
4. Dividing a table into sections
The folks at Microsoft have followed Netscape's lead by offering
extensions that work only when viewed with Internet Explorer. There
are several that affect tables: THEAD, TBODY, TFOOT and COLGROUP.
You can use these tags to devide your table into understandable
chunks , and to determine where dividing lines should be drawn.
However, they have unpredictable results in Netscape, so use them
with caution.
To divide a table into sections:
1. Before the first <TR> tag that defines the head, body or foot
section, type <THEAD>, <TBODY>, or <TFOOT>.
2. After the last </TR> tag that defines the section, type the
corresponding closing tag, </THEAD>, </TBODY>, or </TFOOT>, that
matches the tag you used in step 1.
Another useful way to divide your tables - at least when viewed with
Internet Explorer - is into column groups. In this way, you can set the
alignment for several columns at a time, in addition to determining the
position of the rules.
To divide a table into column groups:
1. After the initial <TABLE> tag, type <COLGROUP.
2. If the column group has more than one column, type SPAN=n, where n
is the number of columns in the group.
3. If desired, type ALIGN=direction, where direction is left, right or center.
4. Type the final >.
5. Repeat steps 1-4 for each column group that you wish to define.
Giving your table a border helps seperate it from the rest of the text.
To create a border:
1. Inside the initial TABLE tag, type BORDER.
2. If desired, type =n, where n is the thickness in pixels of the border.
3. If desired, type BORDERCOLOR="#rrggbb", where rrggbb is the
hexadecimal representation of the desired colour for the border.
4. If desired, type BORDERCOLORDARK="#rrggbb", where rrggbb is the
hexadecimal representation of the colour that you want to use for the
darker parts of the border (top and left borders of cells, right and
bottom borders of the table itself).
5. If desired, type BORDERCOLORLIGHT="#rrggbb", where rrggbb is the
hexadecimal representation of the colour that you want to use for the
lighter parts of the border (bottom and right borders of cells, top
and left borders of the table itself)
6. Choosing which borders to display
When you use the BORDER tag, described in Adding a border, a border
appeares both between each cell and around the table itself. Internet
Explorer lets you choose which external sides of the table should
have a border as well as which internal borders should be displayed.
To choose which external sides should have a border:
In the TABLE tag, after the required BORDER attribute, type FRAME=location,
where location is one of the values listed below:
- void, for no external borders.
- above, for a single border on top.
- below, for a single border on the bottom.
- hsides, for a border on both the top and bottom sides.
- vsides, for a border on both the right and left sides.
- rhs, for a single border on the right side.
- lhs, for a single border on the left side.
- box or border, for a border on all sides (default).
To choose which internal borders should be displayed:
In the TABLE tag, after the required BORDER sttribute, type RULES=area,
where area is one of the following values:
- none, for no internal rules.
- groups, for horizontal rules between groups as defined by the tags.
- rows, for horizontal rules between each row in the table.
- cols, for vertical rules between each column in the table.
- all, for rules between each row and column in the table.
The CAPTION tag lets you attatch a descriptive title to your table.
To create a caption:
1. After the initial <TABLE> tag, but not inside any row or cell tags,
type <CAPTION.
2. By default, the caption will appear above the table. However, if
desired, type ALIGN=bottom to place the caption below the table.
3. Type the final >.
4. Type the caption for the table.
5. Type </CAPTION>.
8. Spacing and padding the cell's
Our table is a little squished, to be frank. Making the cells a bit
larger helps make the information easier to read.
Cell spacing adds space between cells, making the table bigger without
changing the size of individual cells.
To add cell spacing:
1. Within the initial TABLE tag, type CELLSPACING=n, where n is the number
of pixels desired between each cell. (The attribute cellspacing is one word.
2. The default value for cell spacing is 2 pixels.
Cell padding adds space around the contents of a cell, in effect, pushing
the walls of the cell outward.
To add cell padding:
Within the initial TABLE tag, type CELLPADDING=n, where n is the number
of pixels desired between the contents and the walls of the cell. (The
attribute cellpadding is one word.) The default value for cell padding
is 1 pixel.
9. Changing a table's width and height
You can use the WIDTH and HEIGHT attributes to resize the whole table,
or to define the dimensions of particular cells.
To set the table size:
Within the initial TABLE tag, type WIDTH=x HEIGHT=y, where x and y
are either absolute values in pixels for the height and width of the
table or percentages that indicate how big the table should be with
respect to the full window size.
You can change the width and height of individual cells to emphasize
important information.
To change the size of individual cells:
1. Place the cursor insode the cell tag (either TH or TD).
2. Type WIDTH=x HEIGHT=y, where x and y are either absolute values in
pixels for the width and height of the cell or percentages that indicate
how big the cell should be with respect to the full table size.
11. Spanning a cell across two or more columns
If you have a lot of information you wish to convey with a table,
you can divide a table header into several categories by having it
span several columns, and adding more specific headers in the row
below.
To span a cell across two columns:
1. When you get to the point in which you need to define the cell that
spans more than one column, either type <TH or type <TD, depending on
whether the cell should be a header cell or a regular cell, respectively.
2. Type COLSPAN=n>, where n equals the number of columns the cell should span.
3. Type the cell's contents.
4. Type </TH> or </TD>, to match the tag you used in step 2.
5. Complete the rest of the table. If you create a cell that spans 2
columns, you will need to define one less cell in that row. If you
create a cell that spans 3 columns, you will define two less cells for
the row.
12. Spanning a cell across two or more rows
Creating a cell that spans more than one row is essentially identical to
spanning more than one column - just from another angle. It is ideal for
dividing the headers on the left side of the table into subcategories.
To span a cell across two or more rows:
1. When you get to the point in which you need to define the cell that spans
more than one row, either type <TH or type <TD, depending on whether the cell
should be a header cell or a regular cell, respectively.
2. Type ROWSPAN=n>, where n equals the number of rows the cell should span.
3. Type the cell's contents.
4. Type </TH> or </TD>, to match the tag you used in step 2.
5. Complete the rest of the table. If you define a cell with a rowspan of 2,
you will not need to define the corresponding cell in the next row. If you
define a cell with a rowspan of 3, you will not need to define the corresponding
cells in the next two rows.
13. Aligning a cell's contents
Each browser shows the contents of the different cells in a table in it's
own way, by default, which may or may not be how you think the data looks
best. To gain a little more control over the alignment of a cell's contents,
use the ALIGN and VALIGN tags.
To align a cell's contents horizontally:
1. Place the cursor in the initial tag for the cell, after <TD or <TH but
before the final >.
2. Type ALIGN=direction, where direction is either left, center, or right.
You can use the VALIGN attribute to align the cell's contents vertically.
To align a cell's contents vertically:
1. Place the cursor in the initial tag for the cell, after <TD or <TH
but before the final >.
2. Type VALIGN=direction, where direction is either top, middle, or bottom.
Changing the colour of one or more cells is a great way to set off
important information, like for example, the column of totals in a table.
To change a cell's colour:
1. Within the TH or TD cell, type BGCOLOR=.
2. Type "#rrggbb", where rrggbb is the hexadecimal representation of the
desired colour.
Or type colour, where colour is one of the sixteen predefined colour names.
15. Controlling line breaks in a cell
Unless you specify otherwise, browsers will divide the lines of text in a
cell as it decides on the height and width of each column and row. The
NOWRAP attribute keeps all the text in a cell on one line.
To keep text in a cell on one single line:
1. Place the cursor in the initial tag for the cell, after the <TD
or <TH but before the final >.
2. Type NOWRAP.
Setting up complicated tables in HTML can be really confusing. All you need
are a couple of column spans to throw the whole thing off. The trick is to
draw a map of your table before you start.
To map out your table:
1. Skatch your table quickly on a piece of paper (yes, with a pen!).
2. Divide the table into rows and columns. Number each row and column.
3. Mark the cells that will span more than one column or row.
4. Count the number of cells in each row (1 point for single cells,
2 points for cells that span two columns, 3 for cells that span three
columns, ect.). There should be as many cell definitions in each row
as there are columns in the table.
5. Once you have your table straight on paper, write the HTML code, row by row.
Contents of this section:
1. Creating links
2. Using the BASE tag
3. Creating a link to another Web page
4. Targeting links to specific windows
5. Creating anchors
6. Linking to a specific anchor
7. Linking to an anonymous FTP site
8. Linking to an FTP site with a user name
9. Linking to Gopher servers
10. Linking to e-mail
11. Linking to a newsgroup
12. Creating navigational buttons
13. Dividing an image into clickable regions
14. Creating a client-side image map
15. Using a server-side image map
Links are the distinguishing feature of the World Wide Web. They let you
skip from one page to another, call up a movie or a recording of Bill
playing his sax, and download files with FTP.
To create a link:
1. Type <A HREF="url.address">, where url.address is the URL of the
destination file to be viewed.
2. Type the clickable text, thats is, the text that will be the underlined of
highlighted in blue, and that when clicked upon will take the user to the URL
reference in step 1.
3. Type </A> to complete the definition of the link.
Generally , relative URLs are constructed according to the current location
of the HTML document that contains the URL. If you use relative URLs in
your HTML documents, you can use the BASE tag to define the URL of the current
HTML document - regardless of its actual location on the server.
To create a base URL:
1. In the HEAD section of your HTML document (after <HEAD> but before </HEAD>),
type <BASE HREF=".
2. Type http://www.site.com/path/filename.html where http://www.site.com/path/
filename.html indicates the desired URL for the HTML file. All relative URLs
contained in the HTML document will be built using this URL as a reference.
3. Type "> to complete the BASE tag.
3. Creating a link to another Web page
If you have more than one Web page, you will probably want to create links
from one page to the next (and back again). You can also create connections
to Web pages designed by other people on other computers. Whenever you create
a link to another Web page, you must use the HTTP protocol.
To create a link to another Web page using HTTP:
1. Type <A HREF="http://www.site.com/homepage.html"> where www.site.com/homepage.html
is the URL of the Web page. www.site.com is the name of the server and homepage.html
is the file name of the destination page.
2. Type the clickable text, that is, the text that will be underlined of
highlighted in blue, and that when clicked upon will take the user to the
URL referenced in step 1.
3. Type </A> to complete the definition of the link.
4. Targeting links to specific windows
One of the most useful additions to HTML 3.2 is the ability to open a link in
a particular window, or even in a new window created especially for that link.
This way, the page that creates the link stays open, enabling the user to go
back and forth between the page of links and the information from each of those
links.
To target links to specific windows:
Within the link definition, type TARGET=title, where title is the name of the
window where the corresponding page should be displayed.
Generally, a click on a link brings the user to the top of the appropriate
Web page. If you want to have the user jump to a specific section of the
Web page, you have to create an anchor and then reference that anchor in
the link.
To create an anchor:
1. Place the cursor in the part of the Web page that you wish the user to jump to.
2. Type <A NAME="anchor name">, where anchor name is the text you will use
internally to identify that section of the Web page.
3. Add whe words or images that you wish to be referenced.
4. Type </A> to complete the definition of the anchor.
6. Linking to a specific anchor
Once you have created an anchor you can define a link so that a user's
click will bring him/her directly to the section of the document that
contains the anchor, not just the top of that document.
To create a link to an anchor:
1. Type <A HREF="#.
2. Type anchor name" where anchor name is the NAME of the destination
section (see Creating anchors).
3. Type the clickable text, that is, the text that will be underlined
or highlighted in blue, and that when clicked upon will take the user
to the section referenced in step 1.
4. Type </A> to complete the definition of the link.
7. Linking to an anonymous FTP site
You can create links to FTP servers directly from your Web page. Many
browsers can complete non-Web type connections, while others automatically
open an appropriate helper program (like Fetch) if they can't handle
the connection directly.
To create a link to an FTP site:
1. Type <A HREF="ftp://ftp.site.com/directory/filename"> where ftp.site.com/
directory/filename is the URL of the destination file available through FTP.
2. Type the clickable text, that is, the text that will be underlined or
highlighted in blue, and that when clicked upon will take the user to the
URL referenced in step 1.
3. Type </A> to complete the definition of the link.
8. Linking to an FTP site with a user name
Not all FTP sites accept anonymous connections. You may include a link
to an FTP site using your user name and password, but since there is no way
to hide your password, you should not use this kind of link in a page that
is published on the Web for all to see.
To create a link to an FTP site with a user name and password:
1. Type <A HREF="ftp://yourname:password@ftp.site.com/directory/"> where
yourname is your user name, password is your password and ftp.site.com/directory/
is the URL of the destination directory available through FTP.
2. Type the clickable text, that is, the text that will be underlined or
highlighted in blue, and that when clicked upon will take the user to the
URL referenced in step 1.
3. Type </A> to complete the definition of the link.
Creating a link to a Gopher server is very similar to creating a link to an FTP site.
To create a link to a Gopher server:
1. Type <A HREF="gopher://site.edu"> where site.edu is the URL of the Gopher server.
2. Type the clickable text, that is, the text that will be underlined or
highlighted in blue, and that when clicked upon will take the user to the
URL referenced in step 1.
3. Type </A> to complete the definition of the link.
Although not all browsers currently support e-mail links, the ones that do
make it quite easy for your users to contact you. A link to e-mail is called
a mailto and it a special link that pops up automatically addressed e-mail form.
To create a mailto link:
1. Type <A HREF="mailto:name@site.com">, where name@site.com is the
electronic mail address of the person who should receive the mail.
2. Type the clickable text, that is, the text that will be underlined
or highlighted, and that when clicked upon will open an e-mail form
addressed to the person in step 1.
3. Type </a> to complete the definition of the link.
You can create a link from your page to an entire newsgroup or to just
one article in the newsgroup.
To create a link to a newsgroup:
1. Type <A HREF="news:newsgroup"> where newsgroup is the name of the
newsgroup (like alt.binaries.games or 3dfx.game.titles).
2. Type the clickable text, that is, the text that will be underlined or
highlighted in blue, and that when clicked upon will take the user to the
URL referenced in step 1.
3. Type </A> to complete the definition of the link.
To create a link to a single article:
1. Type <A HREF="news:articlenumb"> where articlenumb is the number (as
shown in the header) of the individual article.
2. Type the clickable text, that is, the text that will be underlined or
highlighted in blue, and that when clicked upon will take the user to the
URL referenced in step 1.
3. Type </A> to complete the definition of the link.
12. Creating navigational buttons
In this age of graphical interfaces, people are used to clicking
on images and icons to make things happen. Adding an image to a link
allows the user to click the image to access the referenced URL.
To create links with buttons:
1. Type <A HREF="url.address">, where url.address identifies the page
that the user will jump to when they click the button.
2. Type <IMG SRC="image.location" whete image.location gives the location
of the image file on the server. (Only GIF and JPG files will work).
3. If desired, type BORDER=n, where n is the width in pixels of the border.
Use a value of 0 for no border.
4. Add other image attributes as desired and then type the final >.
5. Type the clickable text, that is, the text that will be underlined
or highlighted in blue, that when clicked upon will take the user to
the URL referenced in step 1.
6. Type </A> to complete the link.
13. Dividing an image into clickable regions
A clickable image is like a collection of buttons combined together in one
image. A click in one part of the image brings the user to one destination.
A click in another brings the user to a different destination
There are two important steps to implementing a clickable image: First
you must map out the different regions of your image, and second you
must create a script that defines which destinations correspond to
which areas of the image.
To divide an image into regions:
1. Create a GIF image in your favourite image editing program - we use Adobe
Photoshop throughout this tutorial.
2. Open the GIF image in Photoshop, or other image editing program.
3. Choose Show Info in the Palettes sub-menu in the Window menu.
4. Point the cursor over the region you wish to define. Using the Info
window, write down the x and y coordinates.
5. Repeat step 4 for each corner of a rectangle, or each point of a polygon.
14. Creating a client-side image map
Image maps link the areas of an image with a series of URLs. A click in each
area brings the user to a different page. There are two kinds of image maps,
client-side and server-side (see Using a server-side image map). Client-side
image maps run more quickly because they are interpreted in your users' browsers
and don't have to consult the server for each click. In addition since they do
not require a CGI script, they are simpler to create and you don't need to
consult your Internet service provider (ISP), nor get their permission. But,
older browsers may not understand them.
To create a client-side image map:
1. In the HTML document that contains the image, type <MAP.
2. Type NAME="label">, where label is the name of the map.
3. Type <AREA to define the first clickable area.
4. Type SHAPE="type", where type represents the areas shape. Use rect for
a rectangle, circle for a circle, and poly for an irregular shape.
5. For a rectangle, type COORDS="x1,y1,x2,y2", where x1, y2, x2, and y2
represent the corners of the rectangle, as obtained in Dividing an image
into clickable regions.
For a circle , type COORDS="x,y,r" where x and y represent the center of the
circle and r is the radius.
For a polygon, type COORDS="x1,y1,x2,y2,x3,y3" (and so on), giving the
x and y coordinates of each point on the polygon.
6. Type HREF="url.html", where url.html is the address of the page that should
appear when the user clicks in this area.
Or type NOHREF if a click in this area should have no result.
7. Type TARGET=windowname, where windowname is the name of the window
where the page should appear. For more information consult Targeting
links to specific windows.
8. Type > to complete the definition of the clickable area.
9. Repeat steps 3 to 8 for each area.
10. Type </MAP> to complete the map.
11. Type <IMG SRC="image.gif", where image.gif is the name of the image to
be used as an image map.
12. Add any other image attributes.
13. Type USEMAP="#label", where label is the map name defined in step 2.
14. Type the final > for the image.
15. Continue creating the page as usual.
15. Using a server-side image map
To use a server-side image map, you have to have the imagemap program on
your NCSA HTTPd server or htimage on your CERN server. The program should
be located in the cgi-bin directory. Ask your server administrator for
help, if necessary.
To use a server-side image map:
1. In your HTML document type <A HREF="http://www.yoursite.com/cgi-bin/imagemap,
where imagemap is the name of the program that interprets your set of coordinates.
2. Type /path/coords" (adding no spaces after step 1) indicating the path to
the text file that contains the coordinates (the map) for the image.
3. Type the final > of the link definition.
4. Type <IMG SRC="clickimage.gif" where clickimage.gif is the image that
you want your readers to click.
5. Type ISMAP to indicate a clickable image for a server-side map.
6. Add any other image attributes as desired and then type the final >.
7. Type the clickable text that should appear next to the image, if any.
8. Type </A> to complete the link.
Some symbols that you may want to use in your HTML documents are not available by just typing them, or they may cause certain problems when your user views that page. To avoid problems, use the following table to find special html code for displaying those characters and symbols.
| To get this... | ...type this... | ...or this. |
|---|---|---|
| " | " | " |
| # | # | - |
| & | & | & |
| < | < | < |
| > | > | > |
| % | % | - |
| ‰ | ‰ | - |
| ¢ | ¢ | - |
| $ | $ | - |
| £ | £ | - |
| ¥ | ¥ | - |
| ™ | ™ | - |
| © | © | - |
| ® | ® | - |
| @ | @ | - |
| … | … | - |
| “ | “ | - |
| ” | ” | - |
| • | • | - |
| º | º | - |
| § | § | - |
| ¶ | ¶ | - |
| ª | ª | - |
This table will show you the 16 predefined colours that are recognized
by almost all browsers, including Netscape and Internet Explorer, by
their names.
To use one of these colours look for the required colour and then look
at its name then use the COLOR="colour.name" attribute.
(example: <FONT COLOR="TEAL"> would give you teal coloured text until you
decided to turn off the tag with the </FONT> tag.)
| Colour name | Colour sample |
| white | |
| black | |
| red | |
| lime | |
| blue | |
| magenta | |
| yellow | |
| cyan | |
| silver | |
| gray | |
| maroon | |
| green | |
| navy | |
| purple | |
| olive | |
| teal |
6. Helpful utilities for creating web pages
Here's a small collection of programs to help you with creating your web pages!
| File | Size | What it is: |
| Paint Shop Pro 5 | 7MB | Excellent graphics editing program |
| HoTMetaL Pro 5 Evaluation | 9.3MB | The top WYSIWYG HTML editor, and very advanced! |
| Map Edit 2 | 245KB | Helps with creating image maps |
| HexPad | 105KB | Excellent hexadecimal colour finder! |
| HTML Reference Library 3 | 359KB | Extended library of HTML tags and commands |