PART 3

11. MetaTags

This is not a necessary tag, by any means... but when indexed by search engines such as Alta-Vista, Yahoo, or WebCrawler, you may be found by someoneseeking your info on the net!

This is an example of what my MENU page META tags look like...

<html>
<head>
<title>Learn HTML : MENU</title>
<META NAME="description" CONTENT="Learn HTML">
<META NAME="keywords" CONTENT="HTML,Learn,Tutorial">
<META NAME="robots" CONTENT="index,nofollow">
<META NAME="author" CONTENT="Marco Peschiera, Jr.">
</head>

META tags should be placed between <HEAD> & </HEAD> at the top of the page. The "keywords" in the META tag give specific words that can lead someoneto finding your page on the web, if they are using a search engine.The "robots" in the META tag has 4 "CONTENT" words to choose from: "index", "follow", "noindex", "nofollow".

Note: You cannot use 2 contradicting CONTENT words in the same META tag.
If you put "index" the robot indexes your page, if it sees "follow" it will follow the links on that page. The "noindex" and "nofollow" do the opposite.

BACK TO MENU

12. Tables

Tables are very useful and very good looking if used well. You can organize virtually anything with tables. You can organize images, lists, hyperlinks, text, etc... Here are 3 things you can do with tables:
  1. Each <TD> can have a different BGCOLOR
  2. BORDER=0 gives the appearance of pure organization without lines.
  3. In Table Tag, width=% of screen, then, in TD tag, width=% of Table's 100%
Definitions:

<TABLE> = Table Tag

<TH> = Table Header Tag
<TR> = Table Row Tag
<TD> = Table Data Tag
<CAPTION> = Caption Above Table
You can use BGCOLOR, WIDTH=#, WIDTH=#%, ROWSPAN="#" and ALIGN=..., and COLSPAN="#" for Table Rows, Table Headers, and Table Data.
You can use BGCOLOR, BORDER=#, WIDTH=#, WIDTH=#%, PADDING=#, SPACING=# in the Table tag.

Table Example #1Table Example #2
A simple table
DayNetworkShowTime
WednesdayFOXBeverly Hills 902108:00 pm
ThursdayNBCSeinfeld9:00 pm
A more complex table

gender 		average other
category
height weight
males 5' 10" 170 lbs XY
females 5' 3" 145 lbs XX

HTML for Table Example #1 HTML forTable Example #2
<table border=10 spacing=0 padding=0>
<caption>A simple table</caption>
<th>Day</th><th>Network</th>
<th>Show</th><th>Time</th>
<tr>
<td>Wednesday</td><td>FOX</td>
<td>Beverly Hills 90210</td>
<td>8:00 pm</td>
</tr><tr>
<td>Thursday</td><td>NBC</td>
<td>Seinfeld</td><td>9:00 pm</td>
</tr></table>		 <table border=1>
<caption>A more complex table</caption><tr>
<th rowspan=2> <br>gender</th>
<th colspan=2>average</th>
<th rowspan=2>other <br>category</th></tr><tr>
<th>height</th>
<th>weight </th></tr>
<tr><th align=left>males </th>
<td>5' 10" </td><td>170 lbs </td><td>XY </td></tr>
<tr><th align=left>females </th>
<td>5' 3" </td><td>145 lbs</td>
<td>XX</td></tr></table>

Table Example #3
This table uses lists...
WHO'S HOTWHO'S NOT
  • New York Mets
  • Chicago Bulls
  • BC Hockey
  • New York Knicks
  • Chicago White Sox
  • BC Football

HTML for Table Example #3
<center>
<table BORDER="0" WIDTH="100%">
<caption>This table uses lists...</caption>
<tr><th>WHO'S HOT</th><th>WHO'S NOT</th></tr>
<tr>
<td width=50% bgcolor="#FFFF80">
<ul><font color=red>
<li>New York Mets</li>
<li>Chicago Bulls</li>
<li>BC Hockey</li></font></ul></td>
<td width=50% bgcolor="#D1E2F1">
<ul><font color=blue>
<li type=square>New York Knicks</li>
<li>Chicago White Sox</li>
<li>BC Football</li></font>
</ul></td></tr></table></center>

THE GENERAL IDEA OF...
...Placing images: <table><td><img src="name.extension"><td></table>
Table Example #4
 <table spacing=0 padding=0 border=10>
<td><img width=50 height=100 src="bk1.jpg" border=0></td>
<td><img width=50 height=100 src="bk2.jpg" border=0></td>
<td><img width=50 height=100 src="bk1.jpg" border=0></td>
<td><img width=50 height=100 src="bk2.jpg" border=0></td>
</table>
...Placing hyperlinks: <table><td><a href="address">TEXT OR IMAGE</a><td></table>

Table Example #5
Yahoo Web
Crawler
<table spacing=0 padding=0 border=10>
<td><a href="http://www.yahoo.com"><img width=50 height=150 src="bk1.jpg" border=0></a></td>
<td><a href="http://www.yahoo.com">Yahoo</a></td>
<td><a href="http://www.webcrawler.com"><img width=50 height=150 src="bk2.jpg" border=0></a></td>
<td><a href="http://www.webcrawler.com">Web <br>Crawler</a></td>
</table>
BACK TO MENU

13. Client Site Maps

Client Site Maps are very cool. They give you the opportunity to place several hyperlinks in one image.

This is a wee-bit involved... I will only give a brief intro, and some examples,if you would like a more detailed and precise explanation, please go to Netscape and find the Client Site Map Page there. It's an extension of HTML.

The first thing to do is to open the MAP tag. Inside that tag, you should addthe NAME tag, to be able to refer to it later. Then you want to determine thearea specifications, such as shape (SHAPE), coordinates (COORDS), and HREF orNOHREF. After you assign the AREA specifications you need to close the MAP and place the image tag that specifies which image to use as a MAP. Within the IMG tag, you should add the USEMAP tag to specify what MAP to use. Then add the ISMAP tag to the IMG tag.

For the SHAPE tag, there are three options: RECT (rectangle), CIRCLE (circles), and POLY (polygon). (I'm not certain how the polygon shape works.)

The rectangle coordinates are like this: "X1,Y1,X2,Y2".
X1,Y1 stands for the coordinates of the TOP LEFT corner of the desired rectangular area to be linked or non-linked.
X2,Y2 stands for the coordinates of the BOTTOM RIGHT corner of the desired rectangular area to be linked or non-linked.

The circle coordinates go like this: "X3,Y3,R"
X3,Y3 stands for the coordinates for the center of thecircle.
R stands for the radius (in pixels) of the circular area to be linked ornon-linked.

If two AREAS have conflicting (or overlapping) coordinates, the AREA typed infirst takes priority. An example of this can be seen in the Client Site Map Example #2.

Any region not specified will be assumed to be NOHREF.

Client Site Map Example #1

This is the HTML for the Client Site Map Example #1
<center>
<MAP NAME="clientsitemap1">
<AREA SHAPE=rect COORDS="2,32,451,51" HREF="mailto:[email protected]">
<AREA SHAPE=rect COORDS="5,5,90,27" HREF="../../../multi_year/bridgeweb/younes/part2.html#fonttags">
<AREA SHAPE=rect COORDS="95,5,182,27" HREF="../../../multi_year/bridgeweb/younes/learnhtml.html">
<AREA SHAPE=rect COORDS="187,6,274,27" HREF="../../../multi_year/bridgeweb/younes/part3.html#metatags">
<AREA SHAPE=rect COORDS="277,5,365,27" HREF="../../../multi_year/bridgeweb/younes/part3.html#othertags">
<AREA SHAPE=rect COORDS="371,5,457,27" HREF="../../../multi_year/bridgeweb/younes/tips.html">
</MAP>
<IMG SRC="clientsitemap1.gif" WIDTH="460" HEIGHT="54" BORDER="0" ALT="CSM 1" USEMAP="#clientsitemap1" ISMAP>
</center>
Client Site Map Example #2
This is the HTML for Client Site Map Example #2
<center>
<map name="clientsitemap2">
<area shape=circle coords="50,50,10" href="../../../multi_year/bridgeweb/younes/tips.html">
<area shape=circle coords="50,50,25" href="../../../multi_year/bridgeweb/younes/part3.html#tables">
<area shape=circle coords="50,50,50" href="../../../multi_year/bridgeweb/younes/part2.html#fonttags">
</map>
<img src="clientsitemap2.gif" width=100 height=100 border=0 alt="CSM 2"usemap="#clientsitemap2" ismap>
</center>

BACK TO MENU

14. Columns

This is only supported in Netscape 3.0 or better.

COLS = #, is the number of columns per page.
GUTTER = #, is the number of spaces between columns.

<MULTICOL COLS="#" GUTTER="#"> Text Goes in Here</MULTICOL>

The settings for this example are: COLS = 4, GUTTER =20...
Hello. This is an example of columns. You can only view this in Netscape 3.0 or better. If you don't have Netscape 3.0 or better, you will view this as regular text. Okay, start over, please.Hello. This is an example of columns. You can only view this in Netscape 3.0 or better. If you don't have Netscape 3.0 or better, you will view this as regular text. Okay, start over, please.Hello. This is an example of columns. You can only view this in Netscape 3.0 or better. If you don't have Netscape 3.0 or better, you will view this as regular text. Okay, start over, please.Hello. This is an example of columns. You can only view this in Netscape 3.0 or better. If you don't have Netscape 3.0 or better, you will view this as regular text. Okay, start over, please.BACK TO MENU

15. Other Tags

  1. The BLINK tag.
    2. <blink>This text blinks</blink>
    This text blinks
  2. The ADDRESS tag.
    3. <address>Your Name - <a href="mailto:your@address">your@address</a></address>
    Your Name - your@address
BACK TO MENU