Map Edit

W3 Schools HTML tags (great page, with examples of how to use each tag)
http://www.w3schools.com/tags/default.asp

Ferry table
<html>
<head>
<title>Bob Felix Ferry Service</title>
<style type="text/css" media="all">

h1{background-image: url(images/ferryicon.gif);padding: 15 15 0 40; background-repeat: no-repeat; border-bottom: groove thick; margin-bottom: 0; text-align: center; height: 135px; font-family: garamond; font-size: 20pt;}
h2{text-align: center;}

tr#black{color: white; background-color: black; font-weight: bold; text-align: center;}
/*above is a dependent ID selector*/

body{
background-color: tan;}

table{
font-size: 12pt;
font-family: arial,helvetica,sans-serif;
background-color: wheat;
border-collapse: collapse;}

td,th{padding: .3em}

/*following are dependent ID selectors*/

table#data{
background-color: lightblue;
width: 100%;
border: black solid thick;
border-collapse: collapse;}

caption#green{
color: white;
background-color: green;
font-weight: bold;}

td#header{
font-size: 16pt;
text-align: center;}

tr#navy{
color: white;
background-color: navy;}

/*tr#blue{background-color: lightblue;} finally fixed it so I didn't need this*/

/*table#black{border: black solid thick;} finally didn't need this either*/

</style>
</head>

<!--.black{border: black solid thick;}
.black{border: black solid thick;}I tried making the table#data ID selector and applying it, but it did not create the thick black border around the table. Then I created an individual ID selector (table#black) and applied that. It didn't work. Then I created a class (.black) and applied that. None of them worked. And yes, I originally had them all up in the styles section.-->

<table border="1" id="data">
<table id="black">
<table class="black">

<body>

<!--first row of table-->
<tr>
<td style="width:760;" colspan="2"><h1>THE SOUND BAY FERRY SERVICE<br />Serving Sound Bay for Over 50 Years</h1></td>
<!--cell not needed<td style="width:380;">&nbsp;</td>-->
</tr>
<!--row 2 of table-->
<tr>
<td style="width:380;"><table border="1" title="The Sound Bay Ferry Schedule" summary="The Sound Bay Ferry runs from May through September. Extra service is provided on the following days: Memorial Day, July 4, and Labor Day. Ample parking is available at all ferry terminals.">

<table id="data" border="1">
<tr><!--1st row of nested table-->
     <td style="width: 352; text-align: center" colspan="4" id="header">Ferry Schedule</td>
     <!--cells not needed<td style="width: 100">&nbsp;</td>
     <td style="width: 100">&nbsp;</td>
     <td style="width: 100">&nbsp;</td>-->
</tr>
<tr><!--row 2 of nested table-->
     <th style="width: 88">Ferry</th>
     <th style="width: 88">Departs</th>
     <th style="width: 88">Arrives</th>
     <th style="width: 88">Returns</th>
</tr>
<tr><!--row 3 of nested table-->
     <td style="width: 88">Bayrunner</td>
     <td style="width: 88">11 a.m.</td>
     <td style="width: 88">12:15 p.m.</td>
     <td style="width: 88">2 p.m.</td>
</tr>
<tr id="navy"><!--row 4 of nested table-->
     <td style="width: 88">Sound Skipper</td>
     <td style="width: 88">12 p.m.</td>
     <td style="width: 88">1:15 p.m.</td>
     <td style="width: 88" rowspan="2">Time Approximate</td>
</tr>
<tr><!--row 5 of nested table-->
     <td style="width: 88">Sea Mist</td>
     <td style="width: 88">2 p.m.</td>
     <td style="width: 88">3:15 p.m.</td>
<!--this cell not needed<td style="width: 90">&nbsp;</td>-->
</tr>
<caption align="bottom" id="green">May &ndash; September Timetable </caption>

</table></td>
<td style="width:380;" rowspan="2"><p>The Sound Bay Ferry Service is pleased to announce that service from Sound Bay to Bay Island will resume on Sunday, May 1. We will be running limited service from May 1 until Memorial Day.</p>

<p>Extra service will be provided during the entire Memorial Day weekend. There will be additional stops in Breeze Lake and Smithville. Ten-trip tickets and monthly passes will be available starting June 1.</p>

<p>Starting July 4, we will be launching a new era in ferry service as we commission our fourth ferry, the Cove Cruiser. More details will be forthcoming as we get closer to the maiden voyage. The Cove Cruiser will be one of our more spacious ferries. There will be plenty of room for passengers on deck and below.</p>

<p>The first 100 passengers on the Cove Cruiser will ride for free! The first 1000 passengers will receive raffle tickets. First prize in the raffle is an all-expenses-paid trip to Madison, Wisconsin. You'll stay as our guest for three days and two nights at the new Madison Towers Resort Hotel. All meals and round-trip transportation are included.</p></td>
</tr>
<!--row 3 of table-->
<tr>
<td style="width:380; vertical-align: top"><img src="images/seamist.jpg"width="380" height="285" alt="image of ferry" title="image of ferry"</td>
<!--cell not needed<td style="width:380;">&nbsp;</td>-->
</tr>
<!--row 4 of table-->

<!--below is the dependent ID selector applied-->
<tr id="black">
<td colspan="2">Sound Bay Ferry Service &middot; 121 Bay Avenue &middot; Sound Bay, WI 54000</td>
<!--cell not needed<td style="width:380;">&nbsp;</td>-->
</tr>

</table>
</body>
</html>
................................
US Flag

<html>
<head>
<title>US Flag</title>
<style type="text/css">

td.red{background-color: red;}

</style>
</head>
<body>

<table border="0" title="US Flag" summary="table showing US flag as homework assignment for HTML class">

<tr><!--row 1 main table-->
<td style="width: 200; background-color: navy" rowspan="7" ;><img src="images/star.jpg" width="200" height="170" title="image of stars" alt="image of stars" usemap="#star" style="border-style:none" /></td>
<td style="width: 400" colspan="2" class="red" ;>&nbsp;</td>
<!--cell not needed<td style="width: 200";>&nbsp;</td>-->
</tr>
<tr><!--row 2 main table-->
<!--cell not needed<td style="width: 200";>&nbsp;</td>-->
<td style="width: 400" colspan="2" ;>&nbsp;</td>
<!--cell not needed<td style="width: 200";>&nbsp;</td>-->
</tr>
<tr><!--row 3 main table-->
<!--cell not needed<td style="width: 200";>&nbsp;</td>-->
<td style="width: 400" colspan="2" class="red" ;>&nbsp;</td>
<!--cell not needed<td style="width: 200";>&nbsp;</td>-->
</tr>
<tr><!--row 4 main table-->
<!--cell not needed<td style="width: 200";>&nbsp;</td>-->
<td style="width: 400; background-color: white" colspan="2" ;>&nbsp;</td>
<!--cell not needed<td style="width: 200";>&nbsp;</td>-->
</tr>
<tr><!--row 5 main table-->
<!--cell not needed<td style="width: 200";>&nbsp;</td>-->
<td style="width: 400" colspan="2" class="red" ;>&nbsp;</td>
<!--cell not needed<td style="width: 200";>&nbsp;</td>-->
</tr>
<tr><!--row 6 main table-->
<!--cell not needed<td style="width: 200";>&nbsp;</td>-->
<td style="width: 400" colspan="2" ;>&nbsp;</td>
<!--cell not needed<td style="width: 200";>&nbsp;</td>-->
</tr>
<tr><!--row 7 main table-->
<!--cell not needed<td style="width: 200";>&nbsp;</td>-->
<td style="width: 400" colspan="2" class="red" ;>&nbsp;</td>
<!--cell not needed<td style="width: 200";>&nbsp;</td>-->
</tr>
<tr><!--row 8 main table-->
<td style="width: 600" colspan="3" ;>&nbsp;</td>
<!--cells not needed<td style="width: 200";>&nbsp;</td>
<td style="width: 200";>&nbsp;</td>-->
</tr>
<tr><!--row 9 main table-->
<td style="width: 600" colspan="3" class="red" ;>&nbsp;</td>
<!--cells not needed<td style="width: 200";>&nbsp;</td>
<td style="width: 200";>&nbsp;</td>-->
</tr>
<tr><!--row 10 main table-->
<td style="width: 600" colspan="3" ;>&nbsp;</td>
<!--cells not needed<td style="width: 200";>&nbsp;</td>
<td style="width: 200";>&nbsp;</td>-->
</tr>
<tr><!--row 11 main table-->
<td style="width: 600" colspan="3" class="red" ;>&nbsp;</td>
<!--cells not needed<td style="width: 200";>&nbsp;</td>
<td style="width: 200";>&nbsp;</td>-->
</tr>
<tr><!--row 12 main table-->
<td style="width: 600" colspan="3" ;>&nbsp;</td>
<!--cells not needed<td style="width: 200";>&nbsp;</td>
<td style="width: 200";>&nbsp;</td>-->
</tr>
<tr><!--row 13 main table-->
<td style="width: 600" colspan="3" class="red" ;>&nbsp;</td>
<!--cells not needed<td style="width: 200";>&nbsp;</td>
<td style="width: 200";>&nbsp;</td>-->
</tr>


</table>

<!--I added a couple of mapedit links to flag just for the practice.-->
<div>
<map id="star" name="star">
<area shape="rect" alt="Bob's website" coords="4,6,193,90" href="http://www.iceagenow.com" title="Bob's website" />
<area shape="rect" alt="Rare Snow Blankets South as East Braces for Storm " coords="3,93,194,161" href="http://news.yahoo.com/s/ap/20090301/ap_on_re_us/winter_storm" title="Rare Snow Blankets South as East Braces for Storm " />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>
</body>
</html>
...................................

ID selectors
Container Box
#container{width: 775px; color: navy; background-color: beige; font-size: 11pt; font-family: arial; margin-left: auto; margin-right: auto;}
     (to apply, under <body> type the following)<div id="container">(just before </body> put </div>

#banner{width: 775px; height: 100px; margin-top: 0; margin-bottom: 10px, text-align: center; font-weight: bold; font-size: 24pt; font-family: arial; background-image: url(flag.gif); background-repeat: repeat-x; color: navy; background-color: white; border: navy solid thick ;}
     (to apply, under <body> type the following)<div id="banner">(just before </body> put </div>

#sidebar{width: 300px; overflow: hidden: float: left; border: red thick inset; padding: .5em; padding-left: 1em; font-weight: bold; font-size: 12pt; color: white; background-color: black; }
             (overflow - visible
allows box to expand if too much text or if image is too large
                                hidden does not display overflow text
                                scroll displays scroll bars so users can scroll through box, while size of box remains the same
                                auto displays scroll bars only if necessary. Size of box remains the same
To apply (under <body>)
                <div id="container">
                     <div id="sidebar">
                     <a href="whateverlink.htm">About Us<a/>
                      <a href="whateverlink.htm">Air Taxi</a>
                      </div>
                     </body>
               (Div tags divide the page, specifying exactly where on the page my sidebar goes)

#main{float: left; width: 510px; padding: 1em; font-size: 11pt; font-family: arial; color: black; background-color: white; border-left: navy solid em; border-right: navy solid 1em; background-color: wheat; text-align: left;}(creates large container to right of sidebar)

#main{margin-left: 255px;} (creates 255 pixels of blank left of everything below it)
Apply on htm page <div id="main">      </div>

#footer{height: 50px; clear: both; color: black; margin-top: 5em; border: navy thin inset; padding: .5em; letter-spacing: .1em; text-transform: uppercase;}
To apply <div id="footer">xxtextxx</div>

     to add background image to sidebar,
     within brackets for #sidebar, say:{background-image: url(curtains.jpg); background-repeat: no-repeat;}

     to add image within sidebar, place cursor where you want image to appear and do regular <img src="cast.gif" etc etc />

     to set style for only the h3 selector in sidebar
     #sidebar h3{width: 250px; text-align:center; color: white; background-color: navy; padding: .2em;}
            to apply, when you're typing text within sidebar, simply enclose it with <h3></h3>

#left{float: left; margin-right: 2em;}
To apply <img src="image/collage.gif" id="left" alt="" etc etc /> Cool - allows text to move up beside it

#salebox{position: absolute; top: 20; left: 20; width: 140px; height: 100px;z-index: 2; overflow: auto;}

#salebox p{color: orange; font-size: 14pt;font-weight: bold; margin: 0;}
To apply <div id="container">
<div id="salebox">xxtextxx</div>

Styling links a{font-weight: bold; font-size: 12pt; color: navy;}

Hanging indent inline p {text-indent: 2em;} (Can also be in pixels or a percentage)

Hanging indent CSS first line of paragraph is at left edge of window
      and remaining lines are indented (as in the paragraph)
      On style sheet, create a dependent class
      p.hanging{text-indent: -4em; margin-left:4 em;}
          To apply on html sheet write <p class="hanging">xxtextxx</p>

Changing case of text
h3{text-transform:capitalize;}
   or : overline:}
   or:: uppercase;}
   or : line-through;}
   or : blink;}
   or : none;}

List styles (bullets) are filled circles by default. Can also specify circle (a hollow circle), square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none.

list-style-position can be :inside; or :outside; In Sol del Mer I put ul{list-style-type: square; list-style-position: inside;}

Psuedo-element - creates drop cap
p.cap:first-letter{font-size: 36pt; font-family: Garamond;; margin-right: 4px; color:orange; background-color: black;}
Apply on htm sheet <p class="cap">xxtextxx</p>

Map Edit
1. Note where you want the link to go.
2. Close all Notepad related files.
3. Go to MapEdit on internet.
4. It will ask if you want to Open a web page or open an image
5. Browse to the web page (htm) that you're working with. The images on that page will be the only images that appear.
5. Place cursor where you want to begin hot spot and drag.
7. In first box, insert (or browse to) URL where you want link to take people.
8. In second box, type title you want people to see when they hover
9. When you close map edit it will say: "This file already exists. Overwrite it?"
10. Say "yes" and you're done.

Positioning properties
The following stacks second line directly on top of first line.
h1 {font-family: arial;  font-size:72pt; margin:0; padding:0;}

#firstline{position: absolute: top: 100px; left: 30px; color: red;}
#secondline{postion: absolute; top: 100px; left: 100px; color:black; z-index:1;}
(Z-index of 0 puts it on bottom of stack. The higher the number, the higher it will be.)

By default, bottom of image is aligned with a line of text beside it.
Vertical-align property will position image
img.align{border-width: 0; margin-right: 1em; margin-bottom: 0; vertical-align: middle;}
To apply <p><a href="top"><img src="uparrow.jpg" alt= "" title= "" width="" height= ""; class= "align" />Back to Top</a></p>

Thumbnail links
<a href="marie.htm"><img src="jacket.gif" width="" height="" alt="" title="" />Fashions</a>

........................................................................................................
Spaghetti.css
/*Felix gina css page feb 2*/

body{color:black;
background-color=bisque;
font-size:12pt;
font-family:arial;
margin:30px 20px;}

h2{font-size: 14pt;
color:green;
margin-top: .5em; }

h3{font-size: 12pt;
color:maroon;}

ul{list-style-image: url(../images/tomato.gif);}
.....................................................................................................
Indexgina
<html>
<head>
<title>Gina and Dina's Simple Home Cooking</title>
<style>
<link rel="stylesheet" href="pages/spaghetti.css" type="text/css">
<style type="text/css">


.center{text-align:center;}

</Style>
</head>
<body>

<p class="center"><img src="images/ginalogo.gif" width="650" height="100" alt="ginalogo" title="ginalogo" /></p>
<p class="center"><img src="images/veggies.gif" width="650" height="50" alt="horiz rule images of vegetables" title="horiz rule images of vegetables" />
<hr />

<img src="images/spaghetti.jpg" width="500" height="334" alt="spaghetti" title="spaghetti"/></p>

<h2>This Week's Recipe &mdash; Spaghetti with Meatballs</h3>

Spaghetti and meatballs is an inexpensive dish that everyone seems to enjoy. The trick is to get the spaghetti al dente, which is to cook the pasta so that it is not too firm (uncooked) and yet not too tender so that it becomes a pile of blonde mush.

<h3>Getting Started</h3>

Don't scrimp on the water. Cook your pasta in plenty of water in a high-rimmed saucepan. Some people like to add oil to the water, but oil and water don't mix, so a better strategy is to put a little extra virgin olive oil on the pasta after it's been cooked and drained. That will add flavor and keep the pasta from sticking.

Water does matter. If you live in an area where the water quality is not up to par, consider boiling the pasta in bottled water or filtered water from a tap if you have a filter installed on the faucet. The pasta can pick up bad odors and taste from water that does not taste good to begin with.

<p class="center">Home
<img src="images/tomato.gif" width="20" height="18" alt="image of tomato" title="image of tomato" />
<a href="pages/gina1b.htm">Gina1b</a>
<img src="images/tomato.gif" width="20" height="18" alt="image of tomato" title="image of tomato" />
<a href="pages/gina1c.htm">Gina1c</a>

</body>
</html>
......................................................................................................
Gina1b

<html>
<head>
<title> Gina and Dina's </title><!--need more title here - also add title to GinaC-->
<img src="../images/paste.jpg" width="250" height="186" alt="image of paste jar" title="image of paste jar" style="float:right;"/>
<h3> Boil that Water</h3>
<link rel="stylesheet" href="spaghetti.css" type="text/css">
<style type="text/css">
p{border:green thin dotted}
body{background-image:url(../images/flakes.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;}

</style>
</head>
<body>

<p>Get the water to a roiling (that means "really bubbling") temperature. Toss in the pasta and stir with a wooden spoon or fork. Follow the package label for cooking times, but generally cook the pasta in boiling water for about 10-12 minutes. The last 3 minutes are critical. You want the pasta al dente (firm, yet tender). Try tasting some of the pasta every minute for the last three minutes. When you think you've got the right tenderness, strain the pasta in a colander and then pour cold water on the pasta to stop the pasta from cooking any further.</p>

<h3>Make Some Sauce</h3></p>

<p>For the sauce, you can use any commercial canned or jar sauce to save time. Most of the sauces sold in the supermarket are quite good. If you want to make your own sauce, chop up a medium-sized onion and 1 or 2 cloves of garlic. Toss the onion and garlic into a large saucepan. Add two 28-ounce cans of whole tomatoes, one 6-ounce can of tomato paste, and 1 tablespoon of extra virgin olive oil.</p>

<p>Heat in a saucepan and stir on very low heat. Some people feel that sauce should be cooked for several hours. Most people don't have such discriminating palettes, so a slow simmer on low heat for about 10-15 minutes is just fine.</p>

<p style="text-align:center">
<a href="../indexgina.htm">HOME </a>
<img src="../images/tomato.gif" width="20" height="18" alt="image of tomato" title="image of tomato" />ginab
<img src="../images/tomato.gif" width="20" height="18" alt="image of tomato" title="image of tomato" />
<a href="gina1c.htm">Ginac</a> </p>

</body>
</html>
........................................................................................................
Gina1c
<html>
<title></title>
<head>
<img src="../images/meatballs.jpg" width="186" height="250" alt="image of plate of spaghetti" title="image of plate of spaghetti" />
<h3>Cook the Meatballs</h3>
<link rel="stylesheet" href="spaghetti.css" type="text/css">
</head>
<body>
Of course, while the pasta is cooking (set the timer to 10 minutes) you can make the meatballs and the sauce. For the meatballs, in a large mixing bowl, mix one cup of breadcrumbs, 2 large eggs, and 1 pound of lean, ground beef. You can season as you like with salt, pepper, chicken broth, oregano, and basil. For an added touch, you can also mix in 1/4 cup freshly grated Romano or Parmesan cheese. Mix all the ingredients together and spoon into meatballs about 1" round. After you've formed the meatballs, one by one, place the meatballs into a frying pan that has been greased with one or two tablespoons of extra virgin olive oil. Cook on low-to-medium heat until the meatballs are brown.

<h3>Pour it On</h3>
Put the pasta on a large platter, spoon on the meatballs, and cover with the sauce.

<h3>Ingredients</h3>
Pasta:
You may use either boxed pasta or refrigerated, fresh pasta.

<ul>
<li>1 pound spaghetti</li>
<li>(Or more</li>
</ul>

<h3>Meatballs:</h3>

<p>Use either 93% lean beef or a mix or ground turkey and ground pork.</p>

<ul>
<li>1 cup of breadcrumbs</li>
<li>2 large eggs</li>
<li> pound lean ground beef</li>
<li>1/4 cup grated Romano cheese</li>
<li>1 teaspoon fresh oregano</li>
<li>1/2 teaspoon salt</li>
<li>1/4 teaspoon pepper</li>
</ul>

<h3>Tomato Sauce:</h3>
If you wish to have home made, rather than from a jar or can.</p>

1 teaspoon vegetable oil</li>
1 medium onion, chopped</li>
<li>2 cloves garlic, chopped</li>
2 28-ounce cans whole tomatoes
<li>1 6-ounce can tomato paste</li>
<li>lightly salt and pepper to taste

<p style="text-align:center">
<a href="../indexgina.htm">HOME </a>
<img src="../images/tomato.gif" width="20" height="18" alt="image of tomato" title="image of tomato" />
ginac
<img src="../images/tomato.gif" width="20" height="18" alt="image of tomato" title="image of tomato" />
<a href="gina1b.htm">Ginab</a> </p>

</body>
</html>
......................................................................................................
indexlawyers
<html>
<head>
<title>The Green Lawyers Group</title>
<style type="text/css" media="all">

body {background-color: lightgreen; }

<!--Created by Bob Felix on 15 Feb 09--><!--When I added these comments above the body tag the page color turned from green to white. When I moved them below the body tag the page color turned green again. I don't know why-->

p {font-size: 14pt;
font-family: arial,helvetica,sans-serif; }

img {float: left;
margin: 0 20 10 0; }

.clear {clear: both; }

a:link{color: blue;}

a:visited{color: purple;}

a:hover{color: green;} <!--This wouldn't work at first, until I discovered that I had left a space between the colon and the word hover-->

a:active{color: yellow;}

</style>
</head>
<body>

<img src="greenlogo.gif" alt="image of Green Lawyers logo" width="502" height="88" />

<!-- image map begins here -->

<img src="Team.gif" alt="" usemap="#Team" style="border-style:none" />

<p>We are the Green Lawyers Group. We are experienced lawyers in the field of environmental law. We are advocates for strict, comprehensive laws on environmental protection.</p>

<p>We are there for you whenever you have been the victim of corporate pollution. We work with local, state, and federal officials to protect the land, the rivers, lakes, oceanfront, and the sky. We are there to fight against burgeoning encroachment that fails to take into account our environment.</p>

<p>We believe in smart development, not development at any cost. If you feel the same way, then you've found the right group to represent you.</p>

<p class="clear">Pictured from left to right are: Susan Singh, Anthony Scaffini, Sharon Clarkson, Rashif Jackson, and Rosemarie Dale.</p>
<br /><br />
<a href="biosnewfelix.htm">Lawyers' Biographies Page</a>

<div>
<map id="Team" name="Team">
<area shape="rect" alt="Susan" coords="3,73,93,168" href="biosnewFelix.htm#susan" title="Susan" />
<area shape="rect" alt="Anthony" coords="91,35,192,157" href="biosnewfelix.htm#anthony" title="Anthony" />
<area shape="rect" alt="Sharon" coords="188,41,277,169" href="biosNewFelix.htm#sharon" title="Sharon" />
<area shape="rect" alt="Rashid" coords="258,19,340,110" href="biosNewFelix.htm#rashid" title="Rashid" />
<area shape="rect" alt="Rosemarie" coords="384,58,476,162" href="biosNewFelix.htm#Rosemarie" title="Rosemarie" />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>
</body>
</html>
........................................................................................................
indexflight
<html>
<head>
<title>Success AirlinesNewFelix</title>

<style type="text/css">
#sidebar{ font-size:12pt; width:201px; float:left; color:navy; background-color:bisque; border:black thick solid; text-align:center;}
a:link {color:cyan;}
a:visited{color:yellow;}
a:hover{color:pink;}
a:active{color:red;}

</style>
</head>
<body>
<a id="start"></a>

<div id="sidebar">

<a href="pages/about.htm">About Us</a>
<br /><br /><a href="pages/cargo.htm">Cargo</a>
<br /><br /><a href="pages/info.htm">Information</a>
<br /><br /><a href="pages/reserve">Reservations</a>
<br /><br /><a href="pages/taxi.htm">Air Taxi</a>
<br /><br /><img src="images/attendant.jpg" width="201" height="275" alt="" title="" />

<img src="images/terminal.gif" alt="map of terminal" title="terminal" width="201" height="275" usemap="#terminal" style="border-style:none" />
<img src="images/arrival.jpg" alt="arrival" title="arrival" width="201" height="275" />

</div>
<p><img src="images/jet.gif" alt="Success Airlines logo" width="440" height="100" />
</p>

<h2>Are You Successful?</h2>
<p>You know you are when you fly <em>Success Airlines</em>. We offer the finest on-demand service for the busiest and most successful executives in the country along the East Coast corridor, from Canada to Florida and the Caribbean. Pass your mouse over the map of our renovated New York terminal to see its new features.</p>

<h3>Service</h3>
<p>We have unparalleled in-flight service. Our jets seat from 6 to 16 passengers. Our flight attendants will cater to your every need. First-class dining is all we offer. Your meals are prepared either just prior to flight or on board. We will arrange to follow any special dietary principles or restrictions you may have.</p>

<h3>Safety</h3>
<p><em>Success Airlines</em> flies the newest fleet of small jet aircraft of any airline. All of our planes are TechJSX jet aircraft manufactured within the last five years. Equipment is fully state-of-the-art. Our pilots have been hand-picked from among the best of commercial and private air carriers. Each pilot has more than 15 years of full-time flying experience with the airline industry, and all our pilots are recertified at least once a year.</p>

<h3>Productivity</h3>
<p>Think it's not cost-effective to fly Success Airlines? Think about all the lost time wasted in traveling to a busy airport and dealing with lengthy security delays. As a frequent flyer with <em>Success Airlines</em>, you are security-vetted once a year. You arrive at our terminal, get on the plane, and take off. We have our own private terminals. Your baggage travels on board with you or on the flight itself. Your baggage never gets lost or misrouted. All of our seats fully recline, so you can sleep comfortably on longer flights. Whether you choose to do paperwork, read, or get some sleep, you'll be ready to go for that upcoming executive meeting. You'll be at your peak performance because you traveled with <em>Success Airlines</em>.</p>

<h3>Convenience</h3>
<p>We can arrange for limousine service to bring you to the airport and take you back to your office or residence. Ride in comfort for your entire trip, from door to door. Now that's the way to do business!</p>

<p>Contact us today so you can join our Air Taxi Club for even better service. We'll fly you from your heliport to ours.</p>
Latest <a href="http://www.weather.com">Weather</a>
<br />
<br />
<a href="http://www.usps.com">
<img src="images/email.jpg" width="62" height="39" alt="Postcard" title="Postcard" />
<br />
<br />
<a href="mailto:rwfelix@juno.com">Contact Us</a>
<br /> <br />
<a href="#start">Go to Top</a>

<div>
<map id="terminal" name="terminal">
<area shape="rect" alt="seatac" coords="100,32,184,72" href="http://www.portseattle.org/seatac" title="seatac" />
<area shape="rect" alt="jfk airport" coords="101,80,187,124" href="http://www.nyctourist.htm" title="jfk airport" />
<area shape="circle" alt="Limo" coords="143,153,24" href="pages/Taxi.htm" title="Limo" />
<area shape="poly" alt="Info" coords="29,132,95,133,95,170,16,172,17,148,29,148" href="pages/Info.htm" title="Info" />
<area shape="rect" alt="ice age website" coords="21,179,182,268" href="http://www.iceagenow.com" title="ice age website" />
<area shape="poly" alt="author email" coords="14,32,93,32,96,132,29,131,28,148,13,147" href="mailto:rwfelix@juno.com" title="author email" />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>
</body>
</html>
.......................................................................................................
indexmentor
<html>
<head>
<title>My Mentor &mdash; Lou Guzzo
</title>
<link rel="stylesheet" href="pages/MentorFelixCSS.css" />
<style type="text/css" />

#overkill{
position: absolute;
left: 150px;
}
a:link {color:blue;}
a:visited{color:purple;}
a:hover{color:red;}
a:active{color:yellow;}

#trashing{
position:absolute;
left:410px;}

<H1 style="text-align:center">

h3 {font-size:18pt; color: red; font-style: bold font-family: arial; text-align: center;}

#right{float:right;
border:maroon thin solid;
margin-top:5

ul{list-style-image:url(../images/snowflake.gif)};

</style>
</head>
<body>
<a id="top"></a>
<div id="container"><!--I thought this would make the page only 750 pixels wide, but I don't seem to have it worked out yet-->

<h1>My Mentor &ndash; Lou Guzzo </h1>

<p style="text-align: center"><img src="images/guzzo.jpg" width="126" height="174 alt=" photo of Lou" title="Lou Guzzo"></p>


<p>I remember my first meeting with Lou Guzzo, when I asked him to read the manuscript for my first book, <a href="http://www.iceagenow.com"><i>Not by Fire but by Ice</i>.</a> <!--I met Lou for lunch just last week-->He called back the very next day, and I could hear the excitement in his voice. He explained that just before she died, Dixy Lee Ray, former chairman of the Atomic Energy Commission, had confided that her next book would be about magnetic reversals because they were so important. Lou endorsed my book soon after, and has since endorsed my latest book, <i>Magnetic Reversals and Evolutionary Leaps.</i></p><!--This webpage is far too wide. How do I make it narrower?--></p>

<p>Lou Guzzo is former managing editor of The <i>Seattle Post Intelligencer</i>, so I felt that his endorsement was a real feather in my cap.</p>


<ul><li>yes</li>
<li>No</l1>
<li>Maybe</li></ul><!--These bullets looked like snowflakes before I made them so small-->

<hr />

<div id="overkill"><img src="images/overkill-1.gif" width="200" height="300" alt="Book cover" title="book cover" usemap="#overkill-1" style="border:solid green medium" />
</div><!--At first, when I put a green border around this, and it rendered blue ... but I finally figured it out-->

<div id="trashing"><img src="images/trashing.jpg" width="200" height="300" alt="Book cover" title="book cover" style="border: green solid medium" />

</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br />
<hr />
<br />
<h3>Still going strong at 90</h3>
<p><blockquote><strong>Lou Guzzo,</strong> author<sup>&dagger;</sup> of both <i>Trashing the Planet</i> and <i>Environmental Overkill</i>, turned 90 just last month &mdash; and is still going strong.</p>

<p style="font-family: arial;font-size: 8pt;"><sup> &dagger;</sup> with Dixy Lee Ray</style></blockquote></p><!--I can't figure out why this font won't render as 8pt--><!--Hooray. Now it has.-->

</div>
<div>
<map id="overkill-1" name="overkill-1">
<area shape="rect" alt="Buy book here" coords="21,20,180,77" href="http://www.amazon.com/s/ref=nb_ss_gw_2_15?url=search-alias%3Daps&field-keywords=environmental+overkill&sprefix=environmental+o" title="Buy book here" />
<area shape="rect" alt="Dixy Wikipedia Bio" coords="32,219,172,264" href="http://en.wikipedia.org/wiki/Dixy_Lee_Ray" title="Dixy Wikipedia Bio" />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>

<p style="text-align:center"><a href="#top">Back to Top</a>&nbsp;&nbsp;
<a href="morephotos.htm">More Photos</a>&nbsp;&nbsp;<a href="mailto:louguzzo@msn.com">Contact Lou </a></p>
</div>

</body>
</html>
.......................................................................................................
mentor css
/*Created by Bob Felix for use with indexmentorfelix.htm*/

h1 {color: red; font-family: arial; font-size: 22pt; text-align:center;}
h3 {color: white; font: arial; font-size:18pt; background-color:green; text-align:center;}

body {background-color: wheat; font-family: arial;}

ul{list-style-image:url(../images/snowflake20.gif)}; vertical-align: bottom;}

#container {width: 750px;
margin-left: auto;
margin-right: auto;}
......................................................................................................
MorePhotos (Mentor)
<html>
<head>
<title>More Photos</title>
<link rel="stylesheet" href="pages/mentorfelixcss.css" />
<style type="text/css" />

a:link {color:blue;}
a:visited {color:purple;}
a:hover {color:red;}
a:active {color:yellow;}

</style>
</head>
<body>

<h3> More Photos</h3>
<p style="text-align:center"><img src="images/dixy lee ray.jpg" width="150" height="190" alt="photo of Dixy" title="Dixy" /></p>

<p style="text-align:center">Dixy Lee Ray</p>

<br /><br /><br /><br /><br /><br /><br /><br />

<p style="text-align:center"><a href="indexmentorfelix.htm">Home</a>
</body>
</html>
.....................................................................................................
Bisoncss

/*All files for the Bison file to link to this style sheet*/

h2 {color: blue; font: arial;}

h4{background-color: blue; color: white; text-align: center; font-size: 18pt; font-family: arial;}

#container{width: 750px; color: navy; background-color: wheat; font-size: 11pt; font-family: arial; margin-left: auto; margin-right: auto;}

#banner{width: 750px; height: 100px; margin-top: 0; margin-bottom: 10px, text-align: center; font-weight: bold; font-size: 24pt; font-family: arial; background-image: url(../images/bison.jpg); background-repeat: repeat-x; color: navy; background-color: white; border: navy solid thick ;}



#sidebar{width: 200px; overflow: auto; float: left; border: red thick inset; padding: .5em; padding-left: 1em; font-weight: bold; font-size: 12pt; color: white; background-color: blue; }

#main{float: left; width: 550px; padding: 1em; font-size: 11pt; font-family: arial; color: black; background-color: white; border-left: navy solid em; border-right: navy solid 1em; text-align: left;}

#footer{height: 50px; clear: both; color: black; margin-top: 5em; border: navy thin inset; padding: .5em; letter-spacing: .1em; text-transform: uppercase;}
 

.....................................................................................................
Indexbison
<html>
<head>
<title>Bison</title>
<link rel="stylesheet" href="pages/bison.css" type="text/css" />

</style>

</head>
<body>
<div id="container">
<div id="banner"></div>
<div id="sidebar">Say something in here appropriate to a sidebar.
</div>
<div id="main">
<h1>How Bison Affect Climate</h1>
<p>If all goes as expected, this will act as the index page.</p>

<img src="images/deer.jpg" width="150" height="150" alt="image of deer" title="image of deer"/>

<h2>Sample of smaller headline</h2>
<p>And again, if it does go as expected, the above headline will have been rendered in blue. And I want to continue this line in order to see what happens when I use the ID selector for containers.</p>

<div id="footer"><p>Thus ends the bison page</p>
<a href="pages/nature.htm">Nature</a></div>
</div>
<h4>Banner at bottom of page</h4>
</body>

</html>
......................................................................................................
Scene (bison)
<html>
<head>
<title>Scene</title>
<link rel="stylesheet" href="bison.css" type="text/css" />
<h2>Creating a scene</h2>

</style>
</head>

<body>
<p>I'm creating a web page here called scene just for homework practice.</p>
<br />
<img src="../images/wildlife.jpg" width="256" height="192" alt="wildlife photo" alt="wildlife photo" />
<br />
<br />

<a href="scene/indexbison.htm">Home</a>

</body>
</html>
.................................................................................
Nature (bison)

<html>
<head>
<title>Nature</title>
<link rel="stylesheet" href="bison.css" type="text/css" />
<h2>Nature's Craziness</h2>
</style>

</head>
<body>

<p>This is meant, not to show nature's craziness, but so I can see if I understand HTML.</p>

<br /><a href="scene.htm">Scene</a>
</body>
</html>
.................................................................................

Inline style w/acronym and inline change of font color
<html>
<head>
<title>Shep's Ice Cream</title>
<meta name="description" content="Shep's is New England's finest ice cream parlour." />
</head>
<body>
<h1>Shep's Old-Fashioned Ice Cream Parlour</H1>
<P><IMG SRC="icecream.jpg"width="450"height="320"alt="picture of Shep's sign"title="picture of Shep's sign"/>
</P>
<hr />
<h3>What We Do</h3>
<P>Shep's Ice Cream has been at the same site for more than one hundred years. Located in the small town of Hefferton, Vermont, people from all over New England come to Shep's Ice Cream Parlour. You must drop by and try our <address>dream supreme ice cream.</address></p>

<h3>You Haven't Tried These</h3>
Shep's Ice Cream is noted for making ice cream from very unusual flavors. Some of our new flavors include cheesecake, banana mint, and white chocolate brownie. Try all of our flavors with <acronym title="Incredibly Scrumptious Toppings">IST</acronym>&reg;, our Incredibly Scrumptious Toppings. See the list below:

<h3>Toppings Include</h3>
<ul><li>cherries and berries</li>
<li>shaved fudge</li>
<li>twice whipped cream</li>
<li>sprinkles and showers</li>
</ul>
James Dunn<sup>&dagger;</sup> says:

<p><blockquote>"This is certainly one of the finer Ice Cream Parlours in all of New England. I am always amazed at the <em style="color: red">freshness of the ingredients</em>. Many people travel to Hefferton just to visit Shep's. It's definitely worth the trip."</blockquote></p>

<sup>&dagger;</sup>Food critic for the Lancaster Gazette

<h3>Visit us at:</h3>
<address>Shep's Ice Cream
<br />123 Benson Street
<br />Hefferton, VT</address>
</body>
</html>
...................................................................................

Embedded style:

<html>
<head>
<title>Otto's Old-Fashioned Optical Store</title>
<style type="text/css">
body {background-color:#FF0;}

p {font-weight:bold; font-size:14pt; font-family:garamond; line-height:2.0; margin:0;}

em {font-style:normal; font-weight:bold; font-size:16pt; color:brown;}

h2,h3 {color:blue;}

li {font-size:14pt; font-family:papyrus;}

</style>
</head>
<body>
<!-- image will be inserted below -->

<img src="optical.gif" width="450" height="161" alt="otto's optical logo" title="Otto's optical logo" />

<h2>2020 Mirinda Drive &middot; Rio Lejos, California</h2>

<h3>Otto's Old-Fashioned Optical &mdash; is for You</h3>

<p>At Otto's Old-Fashioned Optical, you get treated the old-fashioned way. <em style="font-size: 18pt; color: red; font-weight:bold">We're not some 60-minute store </em>trying to get you in and out the door. We take our time to make sure you are getting your prescription filled correctly. You choose the style you want. Take your time doing so.</p>

<p>You don't have to be old to get good old-fashioned service. Mom and Dad &mdash; bring in your kids to make sure they are getting the right prescription at the right price. We have styles to fit any budget.</p>

<ul>
<li>Sunglasses</li>
<li>Reading glasses</li>
<li>Polarized</li>
<li>Clip Ons</li>
<li>Designer Closeouts</li></ul>

<h2 style="font-size:16pt; color:navy">Special!</h3>

<p><em>Otto's is having a One-Week Special</em>. All frames are discounted up to 50%.
<em style="font-size:14pt; font-weight:bold; color:red">This offer Won't Last!</em> Come in today and see for yourself. Beat the heat. Get a free bottle of our special H<sup>2</sup>O. Our address is easy to remember. We are located at 2020 Mirinda Drive, right here in downtown Rio Lejos.</p>
</body>
</html>
..........................................................................................................
External style .css page in notepad

/*This web page was created by Bob Felix for careernewfelix.htm*/
body{font-size:14pt; font-family: arial; color: black; background-color: wheat;}

h3{text-transform:uppercase; color: purple}

h6{text-align:center; font-size: 20pt; letter-spacing: .3em; word-spacing: .2em; color: red;}

.center{text-align:center;}

.indent {text-indent:-4em; margin-left:4em;}

.cap:first-letter{font-size:36pt;
color:orange; background-color:black;
font-family:garamond;}                        

......................................................................................
External style htm sheet in notepad
<html>
<head>
<title>Welcome to the Career Fair</title>
<link rel="stylesheet" href="careernewfelix.css" type="text/css" />

</head>
<body>
<p class="center"><p style="text-align:center"><span style="width: 400; height: 50; font-size: 40pt; font-family: Arial; color: black; Filter: Glow(Color=orange strength=20)">The Career Fair</span></p>

<h6>Make Your Contacts at the Career Fair</h6>

<div class="center">
<img src="career.jpg" alt="image of students posing at the career fair" width="500" height="332"title:"career" />
</div>

<p class="cap">Career fairs present an opportunity for you to showcase yourself before potential employers. You do not have to be a graduating senior to attend the Fair. You may attend just to see what opportunities are available for employment after you graduate. There's more to attending a career fair than just taking notes or bringing a stack of resumes with you.</p>

<p>If you are a graduating senior, let's start by talking about your resume. A good resume alone won't get you the job, but it should &ndash; in one page &ndash; sum up your accomplishments to date.</p>

<h3>Your Resume</h3>
<p>Your resume is a reflection of yourself, and like yourself, it should be perfect. There is absolutely no room in your resume for typographical errors, punctuation errors, spelling errors, or any other errors. Choose a paper that has substantial weight; don't type your resume on copying paper. Choose white or beige for both the resume and the cover letter.</p>

<h3>Dress the Part</h3>
<p>Make sure your shoes are polished (and don't wear athletic shoes). Hair should be neat and well groomed. Fingernails should be trimmed. No nail tips, please. Remove any visible body piercing. Carry only what you'll need for the fair. Don't have pockets jingling with coins or bulging with other personal belongings. Don't bring a large handbag. Both men and women should choose conservative clothes and colors &ndash; black, navy or charcoal gray in the colder months; olive or beige for the warmer months.</p>

<p class="indent"><strong>Women</strong> should choose a skirted suit or a well-tailored pants suit. A blouse and skirt is also okay, just as long as the skirt is not too short. The skirt should not be more than two inches off the knee. Dress shoes with a heel of not more than two inches would also be appropriate.</p>

<p class="indent"><strong>Men</strong> should select a classically cut and well-tailored suit. A shirt in lighter color than the suit, such as white, and a conservative patterned or striped tie is recommended. Shoes and socks should match and be either black or dark brown.</p>

<h3>Make the Right First Impression</h3>
<p>Most people make judgments about you in the first five seconds. Give the right non-verbal signals. Stand up straight, walk confidently, give a firm handshake. Make eye contact, exhibit good listening skills, and above all, remember the name of the person whom you've been introduced to. Turn off your cell phone. Carry all your paperwork in a professional-looking briefcase or attache case.</p>

<h3>Attract, Don't Distract</h3>
<p>Women should use accessories and jewelry sparingly. Don't have bangles and bracelets that make a lot of noise or attract attention. Leave the flashy jewelry at home. Makeup should be understated; don't overdo. Do not use cologne or perfume. Shower before the fair with a mild, fragrant soap. In general, don't be casual and don't be flashy.</p>

<h3>Speak Up</h3>
<p>In all your dealings at the fair, make sure that the person you are speaking to can hear you. This is not the time to be either shy or pushy either. Strike a balance between the two that will convey self-confidence without being pompous or overbearing.</p>

<h3 class="center">Don't Overstate</h3>
<p>If you are asked if you meet a particular qualification for a job, tell the truth if you don't. If you don't have training in an area, stress that you have always been a quick learner and look forward to training in that area. Want More Information? Contact:</p>
<br />
<p id="offset">(This indents)<span style="width: 300; height: 30; font-size: 24pt; font-family: arial; color: black; filter: shadow (color=gray,direction=45)">The Career Fair<br />
P.O. Box 35657A<br />
San Morillo, TX<br />
37888</span></p>
</body>
</html>
................................................................................................
External stylesheet for Power-css
/* File created by Robert Felix.22 Jan 09 To be used with PowerNewFelix.htm */
body{font-size: 12pt; font-family: arial; background-color: linen;}
.spread{letter-spacing: .3em; word-spacing: .3em; margin: 0;}
p.dropcap:first-letter{font-size: 36pt;font-weight: bold;rt-margin: 2px; color: green;background: linen;}
p.contact:first-line{font-size: 13pt;font-weight: bold;color:green; }
ul{font-size:14pt; color:brown;}
strong{color:green;}
.......................................................................................................
External htm sheet for Power
<html>
<head>
<title>Alternative Clean Energy from Panama River Power Solutions</title>
<link rel="stylesheet" href="PowerNewFelix.css" type="text/css" />(Must insert this link on htm page to my CSS page-->

<p><span style="filter: dropshadow(color=black offX=4, offY=-1, positive=2); width: 550px; height: 50px; color: orange; font-size: 30pt; font-family: arial;">Panama River Power Solutions</p>(Remember to remove the pop-up blocker)

<img src="Power.jpg" width="250" height'"166" alt="image of solar panels" title="image of solar panels" />

<p><h2 class="spread">Alternative Clean Energy</h2></p><!--If I remember correctly, this closing tag was was missing, and it took me awhile to notice it-->
</span>
</head>
<body>

<p class="dropcap">Here at <strong>Panama River Power Solutions</strong>, we are dedicated to supplying the nation and the world with <strong>"green"</strong> energy &ndash; energy that is clean, reliable, abundant, inexpensive, renewable, and environmentally friendly. It's energy with a "zero-carbon footprint." There is no use of fossil or nuclear fuels. In today's uncertain times, it is imperative that new solutions for today's &ndash; and tomorrow's energy needs be implemented. When you factor in global warming and national security concerns, green energy supplied by <strong>Panama River Power Solutions</strong> is the right choice at the right time. Don't delay in getting started now.</p>

<p>We specialize in the following green energy sources:</p> <!--If I remember correctly, this closing tag was was also missing, and it took me awhile to notice it-->

<ul>
<li>Wind Turbine Power</li>
<li>Ocean Wave and Tidal Energy</li>
<li>Hydrogen Fuel Cell</li>
<li>Solar Energy</li>
<li>Geothermal Energy</li></ul>

<hr />
<p class="contact">Contact Panama River Power Solutions today for a free evaluation of your alternative energy needs.</p>

<p class="spread">220 &middot; The Landing &middot; Mt. Marrone, Washington 67845</h4></p>
</body>
</html>
............................................................................................................

http://www.w3.org/TR/CSS21/tables.html (discusses border collapse and lots more)

 

The next rules specify that the top row will be surrounded by a 3px solid blue border and each of the other rows will be surrounded by a 1px solid black border:

table   { border-collapse: collapse }

tr#row1 { border: 3px solid blue }

tr#row2 { border: 1px solid black }

tr#row3 { border: 1px solid black }
 

Note, however, that the borders around the rows overlap where the rows meet. What color (black or blue) and thickness (1px or 3px) will the border between row1 and row2 be? We discuss this in the section on border conflict resolution.
 

The following rule puts the table caption above the table:

caption { caption-side: top }

 

http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution

 

 

 

 

 

 


 

BACK TO HOME PAGE