|
|
 |
On last few pages I haven't told you to use view source for a reason if you did any way you seen a lot of things like this < &
Note that because <, >, and & have special meanings in HTML, you must use their escape sequences (<, >, and &, respectively)
The escape for the special keys are as follows:
| If you see on the screen |
The escape sequence {HTML code is |
| & | & |
| < | < |
| > | > |
| If you need a blank space |
|
| " | " |
So far we have covered the HTML tags that are needed to format a web, page put text on a page, put an image on a page, use tables on a page, use hyper links, and use an image as a background for a page, for a table or for a table division.
Look at the line of text above the table. It is highlighted with a yellow background.
The codes for that line are below.
<p align="center"><b><font color="#FF0000"><span style="background-color: #FFFF00">The escape for the special keys are as follows:</span></font></b></p>
The
part that makes the highlight is
<span style="background-color:
#FFFF00">xxxxxxxxxxx </span>
The xxxxx is where he text you want highlighted go.
Image mapping .
There
is another trick on this page.
Run the
mouse over the banner at the top of the page. yow will that it has three
different hyperlinks. this is image mapping and uses the
<map
name=" ">
</map> tags.
the
banner above is in a table. the codes looked like this before we mapped it.
<table>
<tr>
<td><img border="0"
src="logo_Web_Applets_ann.gif"
width="360"
height="63"
></td>
</tr>
</table>
And like this with the map
<table>
<tr>
<td><map name="FPMap0">
<area href="NotWorkingYet.html"
shape="rect"
coords="0,0, 84,63">
<area href="getting_started9.htm"
shape="rect"
coords="156,0, 305,23">
<area href="NotWorkingYet.html"
shape="rect"
coords="104, 27, 342, 42">
</map><img
border="0"
src="logo_Web_Applets_ann.gif"
width="360"
height="63"
usemap="#FPMap0"></td>
</tr>
</table>
The banner is 360 pixels wide and 63
pixels in height
The first coords="0,0 is
the upper left corner of the banner and of the .first hyperlink in the image
The 84,63"
is the
lower right of the area of the first hyperlink in the image.
00,00__ 00,23__ 00,63__ |
|
00,104|
00,156|
00,342| |
__360.27 |
The
coords="156, 0, 305, 23">
is the second hyperlink (Tom's
Web)
The coords="104, 27, 342, 42">
is the third hyperlink
(Applets
by Tom short)
Now we will hyperlink an image on the page that isn't in a table move the mouse over the image there are two hyperlinks on it.
The codes that do this are.
<map name="FPMap2">
<area href="Test4.htm"
target="_blank"
shape="rect"
coords="0,1, 61, 45">
<area href="Test5.htm"
shape="rect"
coords="113, 0, 203, 18"></map>
<img border="0"
src="logo_Web_button3.gif"
usemap="#FPMap2"
width="260"
height="46">
The <map
name="FPMap2">
can be any name you want as long as it is unique.
The <area href="Test4.htm"
is the page the link go to.
The target="_blank"
means it will open in a new page.
The shape="rect"
means that the link area is rectangle
( Can
be, shape="circle"
coords="26, 14, 14">
for a circler area )
(Or shape="polygon" coords="0,0,
10,24, 33,0">
for an area that you
specify.
This is an example of a rectangle hyperlink in an image.
| 0,0_ 25-- 41_ |
rectangle area |22 71| 84WX63H |
_00 _63 |
Circle
area 
|
<map name="FPMap5">
<area href="circle-hpl.htm"
target="_blank"
shape="circle"
coords="26, 27, 15"></map>
<img border="0"
src="logo10-cir-hpl.gif"
usemap="#FPMap5"
width="84"
height="63">
The coords="26, 27 is
the X, Y position from the top left corner of the image to the center of
the area we want to link. (the top left of the image is always X=0, Y=0 no
matter where it is on the
page) the 15" is
the radius from the center in pixels.
This is an example of a polygon hyperlink in an image.
0,0_ 10,24-- |
polygon area |34,0  |
the code for a polygon hyper linked image
<map name="FPMap3">
<area href="naaaa1.htm"
target="_blank"
shape="polygon"
coords="0,0, 10,24, 34,0"></map>
<img border="0"
src="logo10-ta-hpl.gif"
usemap="#FPMap3"
width="84"
height="63">
This is how the image would look the
red areas in the other I put in so you could see what was talking about.
So How do we find the X , Y position to put in ?
Bring up the image you want to map right click on it and chose copy to put it on the clipboard. Then go to start then programs then accessories and chose paint to bring up the paint program that comes with windows. the click on the Edit menu and chose Past to get the image in paint . Then click on the View menu and make sure the status bar is checked. now click on the View menu again and and chose zoom then large size then click on the View menu again and choose show grid. now click on the pen in the tool bar and move it around the image and write down the position it shows you in the status bar that you want to hyperlink. for a circle you only need the center and the radius. for a rectangle you need the upper left and lower right corners. For a polygon you need at least 3 and as many as it takes to define the area you are working with.
Now a little about alt tags run the mouse over this image.
The codes to put this image on the page alone are.
<center>
<img border="0"
src="logo10_s.gif"
width="84"
height="63">
</center>
The code to put an image and an alt tag are.
<center>
<img alt="This is an alt= tag it can be
attached to any image and say any thing." border="0"
src="logo10_s.gif" width="84"
height="63">
</center>
Next we will make a scrolling marquee .