W3 Schools HTML tags (great page, with
examples of how to use each tag)
http://www.w3schools.com/tags/default.asp
aligning text in table:
<td style="width: 150; vertical-align="top" rowspan="2";>text</td>
<td style="width: 450; text-align: center;" colspan="3">text</td>
<td style="width: 150; text-align: right";>coffee</td>
....................................................................
body{background-image: url(whatever.jpg;)
(Will fill entire screen)
For less than that, go)
body{background-image: url(whatever.jpg); background-position: 0% 0%;
background-repeat: repeat-y;}
(or repeat-x; or no-repeat)
#trashing{position:absolute; left: 460px; z-index: 0;}
#overkill{position: absolute; left: 316px; top: 457px; z-index:1;} (z-index: 1;
placed this image on top of the other
Wardrobe (Form inside table) Top
<html>
<head>
<title>Wardrobe Wonderful</title>
<style type="text/css" media="all">
td#center{text-align: center;}
td,th{padding: .3em;}
table{background-color: wheat;}
Top
button{color: white;
background-color: navy;
border: silver outset thick;
margin-right: .5em;
text-align: center;
font-weight: bold;
font-size: 10pt;
font-family: arial, helvetica, sans-serif;}
fieldset{color: navy;
background-color: orange;
border: navy inset medium;}
legend{color: red;background-color: white;
border: navy solid thin;
padding: .1em;
margin-left: 2em;}
/*Styling horizontal rule*/
hr{height: 5px;
width: 85%;
color: navy;}
</style>
Top
</head>
<body>
<form name="transaction"
action="http://mywebsite.com/cgi-bin/myscript.cgi" method="post">
<table border="2">
<tr> <!--1st row of table-->
<!--<td style="width:200"> </td>-->
<td style="width:700" colspan="2" id="center"><img src="images/wardrobe.gif"/></td>
</tr>
<tr> <!--2nd row of table-->
<td style="width:200">Last Name</td>
<td style="width:500"><input type="text" id="ln" size="25" maxlength="25"
/></td>
</tr>
<tr> <!--3 row of table-->
<td style="width:200">First Name</td>
<td style="width:500"><input type="text" id="fn" size="25" maxlength="25"
/></td>
</tr>
Top
<tr> <!--4 row of table-->
<td style="width:200">Address</td>
<td style="width:500"><input type="text" id="address" size="25" maxlength="25"
/></td>
</tr>
<tr> <!--5 row of table-->
<td style="width:200">City</td>
<td style="width:500"><input type="text" id="city" size="25" maxlength="25"
/></td>
</tr>
<tr> <!--6 row of table-->
<td style="width:200">State;</td>
<td style="width:500"><input type="text" id="state" size="2" maxlength="2"
/></td>
</tr>
<tr> <!--7 row of table-->
<td style="width:200">Zip</td>
<td style="width:500"><input type="text" id="zip1" size="5" maxlength="5"/> -
<input type="text" id=zip2" size="4" maxlength="4"/> </td>
</tr>
Top
<tr> <!--8 row of table-->
<td style="width:200">Color</td>
<td style="width:500"><input type="radio" name="color" value="green"
checked="checked"/>Green<input type="radio" name="color"
value="white"/>White<input type="radio" name="color" value="yellow"
/>Yellow<input type="radio" name="color" value="black" />Black</td>
</tr>
<tr> <!--9 row of table-->
<td style="width:200">Accessories</td>
<td style="width:500">
<fieldset>
<legend>$3.99 Each if you Buy Today!</legend><input type="checkbox" name="black
scarf" value="scarf" checked="checked"/>Black Scarf <input type="checkbox"
name="lapel pin" value="pin"/>#34 Pin <input type="checkbox" name="brooch"
value="brooch"/>#56 Brooch
Top
</td>
</tr>
<tr> <!--11 row of table-->
<td style="width:200">Customer Feedback</td>
<td style="width:500"><textarea id="feedback" rows="5" cols="50"></textarea> </td>
</tr>
<tr> <!--12 row of table-->
<td id="center" style="width:700" colspan="2"><button type="submit">Submit
Order</button><button type="reset">Cancel</button></td>
<!--cell not needed<td style="width:500"> </td>-->
</tr>
<tr> <!--Added row to try out the horizontal rule - styled it above-->
<td style="width:700" colspan="2"><hr /></td>
<!--cell not needed<td style="width:500"> </td>-->
</tr>
</table>
</form>
</body>
</html>
Top
....................................................................
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;}
Top
table{
font-size: 12pt;
font-family: arial,helvetica,sans-serif;
background-color: wheat;
border-collapse: collapse;}
td,th{padding: .3em}
/*the 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;}
Top
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>
Top
<!--.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 id="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 neede<td style="width:380;"> </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.">
Top
<table id="data" border="1">
<caption align="bottom" id="green">May – September Timetable </caption>
<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"> </td>
<td style="width: 100"> </td>
<td style="width: 100"> </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>
Top
<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"> </td>-->
</tr>
<!--<caption align="bottom" id="green">May – 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>
Top
<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;"> </td>-->
</tr>
<!--row 4 of table-->
<!--below is the dependent ID selector applied-->
<tr id="black">
<td colspan="2" style="width: 760">Sound Bay Ferry Service · 121 Bay
Avenue · Sound Bay, WI 54000</td>
<!--cell not needed<td style="width:380;"> </td>-->
</tr>
Top
</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" ;> </td>
<!--cell not needed<td style="width: 200";> </td>-->
</tr>
<tr><!--row 2 main table-->
<!--cell not needed<td style="width: 200";> </td>-->
Top
<td style="width: 400" colspan="2" ;> </td>
<!--cell not needed<td style="width: 200";> </td>-->
</tr>
<tr><!--row 8 main table-->
<td style="width: 600" colspan="3" ;> </td>
<!--cells not needed<td style="width: 200";> </td>
<td style="width: 200";> </td>-->
</tr>
<tr><!--row 12 main table-->
<td style="width: 600" colspan="3" ;> </td>
<!--cells not needed<td style="width: 200";> </td>
<td style="width: 200";> </td>-->
</tr>
<tr><!--row 13 main table-->
<td style="width: 600" colspan="3" class="red" ;> </td>
Top
<!--cells not needed<td style="width: 200";> </td>
<td style="width: 200";> </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>
Top
...................................
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">
Top
<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 Top
#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;}
Top
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>
Top
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.
Top
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>
Top
........................................................................................................
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);}
Top
.....................................................................................................
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 — Spaghetti with Meatballs</h3>
Top
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>
Top
......................................................................................................
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);
Top
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>
<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>
Top
........................................................................................................
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>
<h3>Ingredients</h3>
Pasta:
You may use either boxed pasta or refrigerated, fresh pasta.
Top
<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>
Top
</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>
Top
......................................................................................................
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;}
Top
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>
Top
<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>
Top
........................................................................................................
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>
Top
<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>
Top
<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 />
Top
<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>
Top
................................................................................
indexmentor
<html>
<head>
<title>My Mentor — 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;}
Top
#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 – 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>
Top
<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>
<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>
Top
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/><br /><br />
<hr />
<br />
Top
<h3>Still going strong at 90</h3>
<p><blockquote><strong>Lou Guzzo,</strong> author<sup>†</sup> of both <i>Trashing
the Planet</i> and <i>Environmental Overkill</i>, turned 90 just last month —
and is still going strong.</p>
<p style="font-family: arial;font-size: 8pt;"><sup> †</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>
<a href="morephotos.htm">More Photos</a> <a href="mailto:louguzzo@msn.com">Contact
Lou </a></p>
</div>
</body>
</html>
Top
.......................................................................................................
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;}
Top
......................................................................................................
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>
Top
.....................................................................................................
Bison css
/*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;}
Top
.....................................................................................................
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>
Top
......................................................................................................
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>
Top
.................................................................................
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>
Top
.................................................................................
Inline style w/acronym and inline
change of font color
Try all of our flavors with <acronym title="Incredibly Scrumptious Toppings">IST</acronym>®
<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>†</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>†</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>
Top
...................................................................................
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 · Rio Lejos, California</h2>
<h3>Otto's Old-Fashioned Optical — is for You</h3>
Top
<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>
<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>
Top
..........................................................................................................
External style .css page in notepad
/*This
web page was created by Bob Felix for whatever.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;}
(These are classes)
.indent
{text-indent:-4em;
margin-left:4em;}
.cap:first-letter{font-size:36pt;
color:orange;
background-color:black;
font-family:garamond;}
Top
......................................................................................
External style htm sheet in notepad
<html>
<head>
<title>Welcome to the Career Fair</title>
<link rel="stylesheet" href="whateever.css" type="text/css" />
</head>
<body>
(Applying a class)
<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>
Top
<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 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 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>
Top
................................................................................................
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;}
Top
.......................................................................................................
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 stylesheet 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>
Top
<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 – 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 – 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>
<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 · The Landing · Mt. Marrone, Washington
67845</h4></p>
</body>
</html>
Top
...........................................................................................................
/* This stylesheet created by Bob Felix, 8 Feb 09, to link to all pages
in beachnewfelix.htm */
body {font-size: 12pt; font-family: arial; font-style: bold; color: navy;
background-color: wheat; background-image: url(../images/sand.gif);}
h3 {color: cadetblue;}
hr {height: 5px; width: 100%; color: navy; backgrond-color:navy;}
ul {list-style-type: square; list-style-position: inside;}
h4 {height: 20px; text-align: center; width: 100%; color:white;
background-color:navy;}
#left { float: left; margin-right; 2em; background-position: 0% 0%;}
#main {margin-left: 255px;}
#content {width: 750px; margin-left: auto; margin-right: auto;}
Top
............................................................................................................
Beach-htm
<html>
<head>
<title>Sol Mer Luxury Residences by the Sea</title>
<link rel="stylesheet" href="pages/beachnewfelix.css" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<div id="content">
<img src="images/beach.gif" alt="the sol mer beach logo" width="100%"
height="150" />
<img src="images/collage.gif" id="left" alt="collage of beach images"
width="198" height="750" />
<div id="main">
<h3>The Villas</h3>
Top
<p>The Villas represents everything you can ask for in retirement or vacation
living. We are located on the Virginia coast, right on the beautiful Atlantic
Ocean. All amenities are included. The Villas are fully-appointed, five-star
living at its finest. We have three-bedroom and two bath units with spacious,
modern kitchens and pantries. Laundry facilities are included. Two-car garages
are standard, as are central air and gas heat.</p>
<h3>Come Visit Us</h3>
<p>You can drop by Sol Mer anytime. Just do the following:</p>
<ul>
<li>Please sign in at the front gate. We are a fully-gated, private, secure
residence community that caters to all your needs.</li>
<li>Get your visiting pass. Follow the signs and park in the VIP Guest
Parking.</li>
</ul>
</div>
<h4>Sol Mer · Atlantic Point Beach · Carlisle, Virginia</h4>
</body>
</html>
........................................................................................
Carforms
Top
<html>
<head>
<title>whatever by Bob Felix</title>
<style type="text/css" media="all">
h1{background-image: url(images/car1.jpg); padding: 0 15 0 40;
background-repeat: no-repeat; border-bottom: groove thick; margin-bottom: 0;
text-align: center; height: 106px; font-family: papyrus; font-size 20pt;}
also see applying button
button{color: white;
background-color: red;
border: silver outset thick;
text-align: center;
font-weight: bold;
font-size: 10pt;
font-family: arial,helvitica,sans-serif;}
legend{color: red;
background-color: yellow;
border: navy solid thin;
padding: .1em;
margin-left: 2em}
(fieldset styling)
fieldset{color: navy;
border: navy inset medium;}
Top
td,th{padding: .3em;}
.center{text-align: center;}
body{
background-color: tan;}
table{font-family: arial, helvitica, sans-serif; background-color: wheat;}
</style>
</head>
<body>
<form name="survey" action="http://www.macedo.post.asp" method="post">
<table border="2">
<tr> <!--first row of table-->
<td style="width: 700" colspan="2"><h1>What Kind Of Car?</h1></td>
<!--cell not needed<td style="width: 500"> </td>-->
</tr>
Top
<tr> <!--2nd row of table-->
<td style="width: 200">First Name</td>
<td style="width: 500"><input type="text" id="1st" size="20"
max size="25"/></td>
</tr>
<tr> <!--3rd row of table-->
<td style="width: 200">Last Name</td>
<td style="width: 500"><input type="text" id="last" size="20" max
size="25"/></td>
</tr>
<tr> <!--4th row of table-->
<td style="width: 200">E-mail Address</td>
<td style="width: 500"><input type="text" id="email" size="20" max
size="20"/></td>
</tr>
<tr> <!--5th row of table-->
<td style="width: 200">Make</td>
<td style="width: 500"><input type="text" id="make" size="15" max
size="20"/></td>
</tr>
Top
<tr> <!--6th row of table-->
<td style="width: 200">Model</td>
<td style="width: 500"><input type="text" id="model" size="15" max
size="20"/></td>
</tr>
<tr> <!--7th row of table-->
<td style="width: 200">Type</td>
<td style="width: 500"><input type="radio" name="auto"
value="automatic"/>Automatic <input type="radio" name="stnd"
value="standard"/>Standard</td>
</tr>
<tr> <!--8th row of table-->
<td style="width: 200">Colors Available</td>
<td style="width: 500"><input type="checkbox" name="red"
value="red"checked="checked">Red <input type="checkbox" name="blue"
value="blue">Blue <input type="checkbox" name="grn"
value="green">Green <input type="checkbox" name="white"
value="white">White</td>
</tr>
<tr> <!--9th row of table-->
<td style="width: 200">Other Options Wanted<br />(Check All That Apply)</td>
<td style="width: 500"><input type="checkbox" name="nav" value="nav">Navigation <input
type="checkbox" name="rad" value="radio">Radio <input type="checkbox"
name="ac" value="ac">A/C <input type="checkbox" name="mnrf" value="moonroof">Moon
Roof <input type="checkbox" name="4x" value="4-wheel">4-Wheel
Drive</td>
</tr>
Dropdown list
Top
<tr> <!--10th row of table-->
<td style="width: 200">Geographic availability<br /> to pick up the car</td>
<td style="width: 500">
<select id="range" size="2" multiple="multiple" width="20">
<optgroup label="Eastside">
<option>Bellevue</option>
<option>Redmond</option>
</optgroup>
<optgroup label="Seattle Area">
<option>Queen Anne</option>
<option>Finney Hill</option>
</optgroup>
</select> Pick up location - Eastside or Seattle area</td>
</tr>
Top
<tr> <!--Added row to table-->
<td style="width: 200">Today's Special</td>
<td style="width: 500">
<fieldset>
<legend>Low,<b> low price of $11,995.00 - Today Only!!!</legend>1965 Red Ford
Mustang <input
type="checkbox" name="now" value="Order Now"><em style="color: red; font-size:
16pt; font-weight: bold;"> Order Now!</em></fieldset></td>
</tr>
<tr> <!--11th row of table-->
<td style="width: 200">Customer Feedback</td>
<td style="width: 500"><textarea id="feedback" rows="5"
cols="40"></textarea> </td>
</tr>
<tr> <!--last row of table-->
<td class="center" style="width: 700; text-align: center;" colspan="2"><button
type="submit">Submit Order</button> <button
type="reset">Cancel</button></td>
<!--cell not needed<td style="width: 500"> </td>-->
</tr>
Top
</table>
</form>
</body>
</html>
.........................................................................................
Top
Marquee
<tr>
<td><b>< Marquee > </b></td>
<td>Marquee is a code that makes text scroll to a side. it can be manipulated by
typing <b>behavior</b> or <b>direction</b> ex:<br>
< Marquee >
<marquee>
this is normal
</marquee>
< /Marquee > <br>
< Marquee behavior="alternate" >
<marquee behavior="alternate">
this is alternating
</marquee>
< /Marquee > <br>
< Marquee direction="right" >
<marquee direction="right">
this is going backwards...
</marquee>
Top
< /Marquee > <br>
< Marquee behavior="alternate" direction="up" >
<marquee behavior="alternate" direction="up">
for more examples google marquee and check out some of the sites.
</marquee>
< /Marquee ></td>
</tr>
<tr>
.........................................
James' Cheat sheet 1
<html>
<head>
<title>Page 1 Basic Codes</title>
<meta name="keywords" content="Html; Codes; help">
<meta name="generator" content="html codes">
<meta name="description" content="a site with complicated and basic html codes
to help you make a website.">
<link rel="stylesheet" type="text/css" href="final.css" />
<style type="text/css" media="all">
#header {
background-color:#009900;
text-align: center;
color: #006;
}
#mainContent {
background-color:#009900;
}
body {
background-color:#009900;
}
h1 {
font-family:garamond;
font-weight: bold;
font-size: 20pt;
}
</style>
</head>
<body bgcolor="009900">
<div id="wrapper">
<div id="header"><a id="top"><font color="ffff33">
<h1>HTML Basic Codes</h1>
<h4>By: James Guberlet</h4>
</font></div>
<div id="nav">
<span id="digitalclock" class="styling"></span>
<script>
<!--
/*****************************************
* LCD Clock script- by Javascriptkit.com
* Featured on/available at http://www.dynamicdrive.com/
* This notice must stay intact for use
*****************************************/
Top
var alternate=0
var standardbrowser=!document.all&&!document.getElementById
if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock"
size="6"></form>')
function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") :
document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"
if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes
if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+" "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'> : </font>"+minutes+"
"+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'> : </font>"+minutes+"
"+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show
-->
</script>
<ul id="topnav">
<li class="clicked"><font color="#1C5191">Page 1 Basic Codes</font></li>
<li><a href="james_9pg2.htm" target="_self">Page 2 Complicated Codes</a></li>
<li><a href="james_9pg4.htm" target="_self">HTML Links</a></li>
</ul>
</div>
Top
<div id="mainContent">
<table cellpadding="5" cell spacing="10" width="100%" border="1">
<tr>
<td><b><font size="6">The code</font></b></td>
<td><b><font size="6">Definition and Example</font></b></td>
</tr>
<tr BGCOLOR="#999900">
<td><b>< !-- > </b></td>
<td BGCOLOR="#999900">Comment, it will not show up on the browser, only in the
html.</td>
</tr>
<tr>
<td><b>< A - > </b></td>
<td>Anchor, part of a hyperlink code t tell what words will become the link. ex:
< A HREF="http://www.google.com" > <a href="http://www.google.com">Google</a>
< /A > is the hyperlink.</td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< B > </b></td>
<td BGCOLOR="#999900">Makes words bold ex: <B>< b > this is bold < /b >
</B ></td>
</tr>
Top
<tr>
<td><b>< Big > </b></td>
<td>Makes text big ex: < big > <big>this is big</big> < /big ></td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< Body > </b></td>
<td BGCOLOR="#999900">the body of your page, like a body paragraph but its for
your entire web site. ex: < body > contents of web site... < /body ></td>
</tr>
<tr>
<td><b>< Br > </b></td>
<td>A break line, its like clicking enter in html <br>
ex: Its like < br > <br>
Clicking enter</td>
</tr>
Top
<tr>
<td BGCOLOR="#999900"><b>< Center > </b></td>
<td BGCOLOR="#999900">Centers words or images on your web site ex:<br>
<center>
< center > this text is centered < /center >
</center></td>
</tr>
<tr>
<td><b>< DD > </b></td>
<td>Description of the definition, ex:<br>
< DL > <br>
< DT > Definition term <br>
< DD > <b>Definition of the term</b> <br>
< /DL ></td>
</tr>
Top
<tr>
<td BGCOLOR="#999900"><b>< DL > </b></td>
<td BGCOLOR="#999900">its the start of a vocab list... ex: <br>
<b>< DL ></b> <br>
< DT > Definition term <br>
< DD > Definition of the term <br>
<b>< /DL ></b></td>
</tr>
<tr>
<td><b>< DT > </b></td>
<td>Definition Term ex: <br>
< DL > <br>
< DT > <b>Definition term</b> <br>
< DD > Definition of the term <br>
< /DL ></td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< EM > </b></td>
<td BGCOLOR="#999900">emphasis, or italics, ex: this is an < EM > <em>example.</em>
< /EM ></td>
</tr>
Top
<tr>
<td><b>< Embed > </b></td>
<td>This embeds something into your web site, like a video or a play list so
people can listen to music while they are on your site. ex: I don't have an
example that i can embed into this site, but you use this code for videos and
music that you might find on the internet.</td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< Font > </b></td>
<td BGCOLOR="#999900">There are a lot of things you can do with the font tag,
like the <b>Face</b>, which is text style, or <b>Size</b> which changes the size
of your text, and there is <b>Color</b> which changes the color of you text.
ex:<br>
< font face="verdana" > <font face="verdana">this changes the font
style,</font> < /font > <br>
< font size="24" > <font size="24">this text is bigger,</font> < /font
> <br>
< font color="color code" > <font color="#ff3333">this text is a different
color.</font> < /font ></td>
</tr>
<tr>
<td><b>< Form > </b></td>
Top
<td>this code is for starting a form, or a quiz. it is used to make a submit
button so you can get people's input from the quiz. ex:<br>
<br>
< FORM action="mailto:you@yourdomain.com" ><br />
Name: < INPUT name="Name" value="" size="10" > <BR />
Email: <INPUT name="Email" value="" size="10" > <BR />
<CENTER > <INPUT type="submit" > <INPUT type="reset" > </CENTER
><br />
<FORM action="mailto:diablo.haha@gmail.com">
<CENTER>
Name:
<INPUT name="Name" value="" size="10">
<BR />
Email:
<INPUT name="Email" value="" size="10">
<BR />
<INPUT type="submit" value="submit">
<input type="reset" value="reset">
</CENTER>
</FORM></td>
</tr>
Top
<tr>
<td BGCOLOR="#999900"><b>< H1 > </b></td>
<td BGCOLOR="#999900">Heading #1 ex: < H1 >
<h1>this is heading 1</h1>
< /H1 ></td>
</tr>
<tr>
<td><b>< H2 > </b></td>
<td>Heading #2 ex: < H2 >
<h2>this is heading 2</h2>
< /H2 ></td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< H3 > </b></td>
<td BGCOLOR="#999900">Heading #3 ex: < H3 >
<h3>this is heading 3</h3>
< /H3 ></td>
</tr>
Top
<tr>
<td>< H4 > </b></td>
<td>Heading #4 ex: < H4 >
<h4>this is heading 4</h4>
< /H4 ></td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< H5 > </b></td>
<td BGCOLOR="#999900">Heading #5 ex: < H5 >
<h5>this is heading 5</h5>
< /H5 ></td>
</tr>
<tr>
<td><b>< H6 > </b></td>
<td>Heading #6 ex: < H6 >
<h6>this is heading 6</h6>
< /H6 ></td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< Head > </b></td>
<td BGCOLOR="#999900">The heading of the web page, its just like h1-h6 but its
normal text. ex:<br>
< head > the text would appear like this but at the top of the page, its a
heading. < /head ></td>
</tr>
Top
<tr>
<td><b>< Hr > </b></td>
<td>this is a horizontal line, like the one below this text. the code is < Hr
> <br>
<hr></td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< HTML > </b></td>
<td BGCOLOR="#999900">this is the start of a web page, you must have this. and
at the end you must have a < /html > tag. everything in the web site has
to be in between these two tags or else it won't be html.</td>
</tr>
<tr>
<td><b>< I > </b></td>
<td>this is used to make text italic... ex: < I > <i>this text is italic</i>
< /I ></td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< Img > </b></td>
<td BGCOLOR="#999900">this is part of a code to put an image on you web site,
ex:<br>
< img src="image source" width="image width" height="image height"
border="border around image" alt="image caption in case image doesn't appear"
title="title of the image" > <br>
<img src="../images/coolgraffidi.jpg"><br>
this is an image.</td>
</tr>
Top
<tr>
<td><b>< Input > </b></td>
<td>Its an input field, a place to type information. ex:<br>
<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2"><TR><TD BGCOLOR="#8463FF"><<b>INPUT</b>
type="text" style="color=ff3333" size="10" bgcolor="72a4ds" MAXLENGTH="30"></TD><TD
BGCOLOR="#8463FF" VALIGN="Middle"> <<b>INPUT</b> type="submit"
name="submit"</TD></TR> </TABLE>
</FORM>
<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2">
<TR>
<TD BGCOLOR="#8463FF"><INPUT type="text" style="color:#ff3333" size="10" bgcolor="#72a4ds"
MAXLENGTH="30"></TD>
<TD BGCOLOR="#8463FF" VALIGN="Middle"><INPUT type="submit" name="submit"</TD>
</TR>
</TABLE>
</FORM></td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< Li > </b></td>
<td BGCOLOR="#999900">List Item, this is for making a list weather it be an
ordered list or an unordered list. ex:<br>
< ol > for ordered list<br>
<b>< Li > an item<br>
< Li > another item<br>
</b> < /ol > to end the list.</td>
</tr>
<tr>
<td><b>< Marquee > </b></td>
Top
<td>Marquee is a code that makes text scroll to a side. it can be manipulated by
typing <b>behavior</b> or <b>direction</b> ex:<br>
< Marquee >
<marquee>
this is normal
</marquee>
< /Marquee > <br>
< Marquee behavior="alternate" >
<marquee behavior="alternate">
this is alternating
</marquee>
< /Marquee > <br>
< Marquee direction="right" >
<marquee direction="right">
this is going backwards...
</marquee>
< /Marquee > <br>
< Marquee behavior="alternate" direction="up" >
<marquee behavior="alternate" direction="up">
for more examples google marquee and check out some of the sites.
</marquee>
< /Marquee ></td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< Menu > </b></td>
<td BGCOLOR="#999900">this is another type of list. ex:<br>
<b><MENU></b><br>
<LI type="disc">List item 1<br>
<LI type="circle">List item 2<br>
<LI type="square">List item 3<br>
<b></MENU></b> <MENU>
<LI type="disc">List item 1
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU></td>
</tr>
Top
<tr>
<td><b>< Meta > </b></td>
<td> it makes a description of the site so if you search for it on google then
you would see a result. its in the script, no example can be seen. </td>
<hr>
<tr>
<td BGCOLOR="#999900"><b>< OL > </b></td>
<td BGCOLOR="#999900">OL is an ordered list ex:<br>
<ol><br>
<li>#1<br>
<li>#2<br>
</ol><br>
<ol>
<li>#1
<li>#2
</ol></td>
</tr>
<tr>
<td><b>< Option > </b></td>
Top
<td>this tag is for list boxes, option is one of the options inside the box ex:<br>
<FORM METHOD=post ACTION="/cgi-bin/example.cgi"><br>
Select an option:<br>
<SELECT><br>
<OPTION>option 1<br>
<OPTION SELECTED>option 2<br>
<OPTION>option 3<br>
<OPTION>option 4<br>
<OPTION>option 5<br>
<OPTION>option 6<br>
</SELECT><BR>
</FORM><br>
<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
Select an option:
<SELECT>
<OPTION>option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT>
<BR>
</FORM></td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< P > </b></td>
<td BGCOLOR="#999900">Paragraph, you need this tag to <b>align</b> your text to
the right, left, or center.ex:<br>
< P align="right" >
<p align="right">this text is on the right....</p>
< /P > < P align="center" >
<p align="center">this text is centered...</p>
< /P > < P >
<p>this stays on the left with out having to type "align="</p>
< /P ></td>
</tr>
<tr>
<td><b>< S > </b></td>
<td>this is strike, it puts a strike through your text ex: < s ><s>striked
out text</s>< /s ></td>
</tr>
Top
<tr>
<td BGCOLOR="#999900"><b>< Small > </b></td>
<td BGCOLOR="#999900">this makes text small, kind of like the big tag but its
the opposite. ex: < small ><small>this text is small</small>< /small ></td>
</tr>
<tr>
<td><b>< Strong > </b></td>
<td>this is like bolding text, it emphasizes the text and makes it thicker. ex:
< strong ><strong>this text is strong</strong>< /strong ></td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< Table > </b></td>
<td BGCOLOR="#999900"> this explains it's self, the table tag makes a table.
ex:<br>
<TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="100%"><br>
<TR><br>
<TD BGCOLOR="#CCCCCC">Column 1, Row 1</TD><br>
<TD BGCOLOR="#CCCCCC">Column 2, Row 1</TD><br>
</TR><br>
<TR><br>
<TD>Column 1, Row 2</TD><br>
<TD>Column 2, Row 2</TD><br>
</TR><br>
</TABLE><br>
<br>
<TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD BGCOLOR="#cccccc">Column 1, Row 1</TD>
<TD BGCOLOR="#cccccc">Column 2, Row 1</TD>
</TR>
Top
<TR>
<TD>Column 1, Row 2</TD>
<TD>Column 2, Row 2</TD>
</TR>
</TABLE></td>
</tr>
<tr>
<td><b>< TD > </b></td>
<td>Table data (see the example for table)</td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< TH > </b></td>
<td BGCOLOR="#999900">Table header (see the example for table)</td>
</tr>
<tr>
<td><b>< Title > </b></td>
<td>this is the title of you page, it is what shows up at the very top of the
browser... not the heading, above the url. ex: no example but look at the words
at the top, for this page its "HTML basics pg1".</td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< TR > </b></td>
<td BGCOLOR="#999900">Table row (see the example for table)</td>
</tr>
Top
<tr>
<td><b>< TT > </b></td>
<td>TeleType, it makes the text like typewriter text. ex: < TT ><tt>this
is teletype</tt>< /TT ></td>
</tr>
<tr>
<td BGCOLOR="#999900"><b>< U > </b></td>
<td BGCOLOR="#999900">Underline, this underlines words you want underlined.ex: <
u ><u>this is underlined.</u>< /u ></td>
</tr>
<tr>
<td><b>< UL > </b></td>
<td>Unordered List, this is another list, but this one has no particular order.
for example look at the other list codes, but change the ol to ul. its the same
coding.</td>
</tr>
</table>
</div>
<div id="footer" align="center"><a href="#top">Back to Top</a></div>
</div>
</body>
</html>
................................. Top
James cheat sheet 2
<html>
<head>
<title>Page 2 Complicated Codes</title>
<script language="JavaScript1.2">
/*
Glowing Text Script-
� Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/
Top
function glowit(which){
if (document.all.glowtext[which].filters[0].strength==3)
document.all.glowtext[which].filters[0].strength=2
else
document.all.glowtext[which].filters[0].strength=3
}
function glowit2(which){
if (document.all.glowtext.filters[0].strength==3)
document.all.glowtext.filters[0].strength=2
else
document.all.glowtext.filters[0].strength=3
}
Top
function startglowing(){
if (document.all.glowtext&&glowtext.length){
for (i=0;i<glowtext.length;i++)
eval('setInterval("glowit('+i+')",150)')
}
else if (glowtext)
setInterval("glowit2(0)",150)
}
if (document.all)
window.onload=startglowing
</script>
<link rel="stylesheet" type="text/css" href="final.css" />
<style type="text/css" media="all">
#header {
background-color:#666666;
text-align: center;
color: #006;
}
#mainContent {
background-color:#666666;}
Top
body {
background-color:#009900;
}
h1 {
font-family:garamond;
font-weight: bold;
font-size: 20pt;
}
</style>
</head>
<body bgcolor="666666">
<div id="wrapper">
<div id="header"><a id="top">
<h1>HTML Complicated Codes</h1>
</div>
<div id="nav">
<span id="digitalclock" class="styling"></span>
<script>
<!--
/*****************************************
* LCD Clock script- by Javascriptkit.com
* Featured on/available at http://www.dynamicdrive.com/
* This notice must stay intact for use
*****************************************/
var alternate=0
var standardbrowser=!document.all&&!document.getElementById
if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock"
size="6"></form>')
function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") :
document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"
Top
if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes
if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+" "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'> : </font>"+minutes+"
"+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'> : </font>"+minutes+"
"+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show
//-->
</script>
<ul id="topnav">
<li><a href="james_9pg1.htm" target="_self">Page 1 Basic Codes</a></li>
<li class="clicked">Page 2 Complicated Codes</li>
<li><a href="james_9pg4.htm" target="_self">HTML Links</a></li>
</ul>
Top
</div>
<div id="mainContent"><span id="glowtext">
<hr color="009900" />
</span> the first code i want to show you is the clock in the top left conner of
my page, i think its cool, but if you want it on your page then you need to put
this code in you <head >tags...<br>
<font color="990000"> <style><br>
<!--
.styling{
background-color:black;
color:lime;
font: bold 15px MS Sans Serif;
padding: 3px;
}
--><br>
</style> </font><br>
And this code where you acctually want the clock...<br>
<br>
<font color="990000"> <span id="digitalclock" class="styling"></span>
<script>
<!--
/*****************************************
* LCD Clock script- by Javascriptkit.com
* Featured on/available at http://www.dynamicdrive.com/
* This notice must stay intact for use
*****************************************/ Top
var alternate=0
var standardbrowser=!document.all&&!document.getElementById
if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock"
size="6"></form>')
function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") :
document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"
if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes
Top
if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+" "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'> : </font>"+minutes+"
"+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'> : </font>"+minutes+"
"+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show
Top
//-->
</script> </font> <span id="glowtext">
<hr color="009900">
</span> some codes i have found and realy like are the glowing text code, you
and can also use it on horizontal lines and hyperlinks, ect. here is an
example... <font color="990000"><span id="glowtext"> glowing text</span></font>
the tags for this code are <font color="990000">< span id="glowtext" ></font>text
goes here <font color="990000">< /span ></font> , but in order to use glow
text you <u>must</u> have this in your page:<br>
<br>
<font color="990000"> < style >
< !--
#glowtext{
filter:glow(color=FFFF00,strength=3);
width:100%;
}
-- >
< /style >
Top
< script language="JavaScript1.2" >
function glowit(which){
if (document.all.glowtext[which].filters[0].strength==3)
document.all.glowtext[which].filters[0].strength=2
else
document.all.glowtext[which].filters[0].strength=3
}
function glowit2(which){
if (document.all.glowtext.filters[0].strength==3)
document.all.glowtext.filters[0].strength=2
else
document.all.glowtext.filters[0].strength=3
}
Top
function startglowing(){
if (document.all.glowtext&&glowtext.length){
for (i=0;i < glowtext.length;i++)
eval('setInterval("glowit('+i+')",150)')
}
else if (glowtext)
setInterval("glowit2(0)",150)
}
if (document.all)
window.onload=startglowing
< /script ><br>
</font> <span id="glowtext">
<hr color="009900">
</span> Do you want something following your cursor? if you want commets
following you cursor then you simply put in this code in your <body>
tags.<br>
<br>
<font color="990000"> <script language="JavaScript">
Top
colours=new Array('#ff0000','#00ff00','#ffffff','#ff00ff','#ffa500','#ffff00','#00ff00','#ffffff','ff00ff')
n = 10;
y = 0;
x = 0;
n6=(document.getElementById&&!document.all);
ns=(document.layers);
ie=(document.all);
d=(ns||ie)?'document.':'document.getElementById("';
a=(ns||n6)?'':'all.';
n6r=(n6)?'")':'';
s=(ns)?'':'.style';
if (ns){
for (i = 0; i < n; i++)
document.write('<layer name="dots'+i+'" top=0 left=0 width='+i/2+' height='+i/2+'
bgcolor=#ff0000></layer>');
}
if (ie)
document.write('<div id="con" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
if (ie||n6){
for (i = 0; i < n; i++)
document.write('<div id="dots'+i+'"
style="position:absolute;top:0px;left:0px;width:'+i/2+'px;height:'+i/2+'px;background:#ff0000;font-size:'+i/2+'"></div>');
}
if (ie)
document.write('</div></div>');
(ns||n6)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
y = (ns||n6)?evnt.pageY+4 - window.pageYOffset:event.y+4;
x = (ns||n6)?evnt.pageX+1:event.x+1;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function animate(){
o=(ns||n6)?window.pageYOffset:0;
if (ie)con.style.top=document.body.scrollTop;
for (i = 0; i < n; i++){
var temp1 = eval(d+a+"dots"+i+n6r+s);
Top
randcolours = colours[Math.floor(Math.random()*colours.length)];
(ns)?temp1.bgColor = randcolours:temp1.background = randcolours;
if (i < n-1){
var temp2 = eval(d+a+"dots"+(i+1)+n6r+s);
temp1.top = parseInt(temp2.top);
temp1.left = parseInt(temp2.left);
}
else{
temp1.top = y+o;
temp1.left = x;
}
}
Top
setTimeout("animate()",10);
}
animate();
// -->
</script> </font> <span id="glowtext">
<hr color="009900">
</span> another thing that you can get to follow your cursor is a
elastic trail of images. but you have to put in the
url to the images for them to show(most preferably small images). like the other
one all you have to do is put this code in the <body> tag and change the
urls...<br>
<br>
<font color="990000"> <div id="dot0" style="position: absolute; visibility:
hidden; height: 11; width: 11;">
<img src="<u><b>URL</b></u>" height=11 width=11>
</div><br>
<div id="dot1" style="position: absolute; height: 11; width: 11;">
<img src="<u><b>URL</b></u>" height=11 width=11>
</div><br>
<div id="dot2" style="position: absolute; height: 11; width: 11;">
<img src="<u><b>URL</b></u>" height=11 width=11>
</div><br>
<div id="dot3" style="position: absolute; height: 11; width: 11;">
<img src="<u><b>URL</b></u>" height=11 width=11>
</div><br>
<div id="dot4" style="position: absolute; height: 11; width: 11;">
<img src="<u><b>URL</b></u>" height=11 width=11>
</div><br>
<div id="dot5" style="position: absolute; height: 11; width: 11;">
<img src="<u><b>URL</b></u>" height=11 width=11>
</div><br>
<div id="dot6" style="position: absolute; height: 11; width: 11;">
<img src="<u><b>URL</b></u>" height=11 width=11>
</div><br>
<script LANGUAGE="JavaScript">
<!-- hide code
var nDots = 7;
var Xpos = 0;
var Ypos = 0;
Top
// fixed time step, no relation to real time
var DELTAT = .01;
// size of one spring in pixels
var SEGLEN = 10;
// spring constant, stiffness of springs
var SPRINGK = 10;
// all the physics is bogus, just picked stuff to
// make it look okay
var MASS = 1;
// Positive XGRAVITY pulls right, negative pulls left
// Positive YGRAVITY pulls down, negative up
var XGRAVITY = 0;
var YGRAVITY = 50;
// RESISTANCE determines a slowing force proportional to velocity
var RESISTANCE = 10;
// stopping criterea to prevent endless jittering
// doesn't work when sitting on bottom since floor
// doesn't push back so acceleration always as big
// as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
// BOUNCE is percent of velocity retained when
// bouncing off a wall
var BOUNCE = 0.75;
Top
var isNetscape = navigator.appName=="Netscape";
// always on for now, could be played with to
// let dots fall to botton, get thrown, etc.
var followmouse = true;
var dots = new Array();
init();
function init()
{
var i = 0;
for (i = 0; i < nDots; i++) {
dots[i] = new dot(i);
}
Top
if (!isNetscape) {
// I only know how to read the locations of the
// <LI> items in IE
//skip this for now
// setInitPositions(dots)
}
// set their positions
for (i = 0; i < nDots; i++) {
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}
if (isNetscape) {
// start right away since they are positioned
// at 0, 0
startanimate();
} else {
// let dots sit there for a few seconds
// since they're hiding on the real bullets
setTimeout("startanimate()", 1000);
}
}
Top
function dot(i)
{
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
if (isNetscape) {
this.obj = eval("document.dot" + i);
} else {
this.obj = eval("dot" + i + ".style");
}
}
function startanimate() {
setInterval("animate()", 20);
}
Top
// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
// initialize dot positions to be on top
// of the bullets in the <ul>
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
dots[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
dots[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
// put 0th dot above 1st (it is hidden)
dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;
}
// just save mouse position for animate() to use
function MoveHandler(e)
{
Xpos = e.pageX;
Ypos = e.pageY;
return true;
}
Top
// just save mouse position for animate() to use
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop;
}
if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}
function vec(X, Y)
{
this.X = X;
this.Y = Y;
}
Top
// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}
}
function animate() {
// dots[0] follows the mouse,
// though no dot is drawn there
var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos;
start = 1;
}
Top
for (i = start ; i < nDots; i++ ) {
var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);
}
// air resisitance/friction
var resist = new vec(-dots[i].dx * RESISTANCE,
-dots[i].dy * RESISTANCE);
// compute new accel, including gravity
var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY,
(spring.Y + resist.Y)/ MASS + YGRAVITY);
// compute new velocity
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);
Top
// stop dead so it doesn't jitter when nearly still
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;
}
// move to new position
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;
// get size of window
var height, width;
if (isNetscape) {
height = window.innerHeight + window.pageYOffset;
width = window.innerWidth + window.pageXOffset;
} else {
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}
Top
// bounce off 3 walls (leave ceiling open)
if (dots[i].Y >= height - DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width - DOTSIZE) {
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}
// move img to new position
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}
}
Top
// end code hiding -->
</script> </font> <span id="glowtext">
<hr color="009900">
</span>
<h2>
<script language="JavaScript1.2">
//Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
//visit http://www.beta-cc.de
//Visit http://www.dynamicdrive.com for this script
Here are the codes that make text
light up in bright yellow, letter by letter, moving across the page
James called it Neon
var message="Thank you for using my site for your HTML needs."
var neonbasecolor="gray"
var neontextcolor="yellow"
var neontextcolor2="#FFFFA8"
var flashspeed=100 // speed of flashing in milliseconds
var flashingletters=3 // number of letters flashing in neontextcolor
var flashingletters2=1 // number of letters flashing in neontextcolor2 (0 to
disable)
var flashpause=0 // the pause between flash-cycles in milliseconds
///No need to edit below this line/////
Top
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) :
document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1)
crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
Top
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>
</h2>
to do that with your text you have to put in this code...<br>
<br>
<font color="990000"> <h2 ><script language="JavaScript1.2" >
Top
//Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
//visit http://www.beta-cc.de
//Visit http://www.dynamicdrive.com for this script
var message="<u><b>TEXT GOES HERE</b></u>"
var neonbasecolor="gray"
var neontextcolor="yellow"
var neontextcolor2="#FFFFA8"
var flashspeed=100 // speed of flashing in milliseconds
var flashingletters=3 // number of letters flashing in neontextcolor
var flashingletters2=1 // number of letters flashing in neontextcolor2 (0 to
disable)
var flashpause=0 // the pause between flash-cycles in milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0; <message.length;m++)
document.write('<span id="neonlight'+m+'" >'+message.charAt(m)+'</span
>')
document.write('</font >')
}
else
document.write(message)
Top
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) :
document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n >flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n >(flashingletters+flashingletters2)-1)
crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
Top
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script ></h2 > </font></div>
<div id="footer" align="center"><a href="#top">Back to Top</a></div>
</div>
</body>
</html>
............................................................
James' cheat sheet 3
Additional helpful sites
<html>
<head>
<title>HTML Links</title>
<script language="JavaScript1.2">
/*
Glowing Text Script-
� Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/
function glowit(which){
if (document.all.glowtext[which].filters[0].strength==3)
document.all.glowtext[which].filters[0].strength=2
else
document.all.glowtext[which].filters[0].strength=3
}
function glowit2(which){
if (document.all.glowtext.filters[0].strength==3)
document.all.glowtext.filters[0].strength=2
else
document.all.glowtext.filters[0].strength=3
}
function startglowing(){
if (document.all.glowtext&&glowtext.length){
for (i=0;i<glowtext.length;i++)
eval('setInterval("glowit('+i+')",150)')
}
else if (glowtext)
setInterval("glowit2(0)",150)
}
if (document.all)
window.onload=startglowing
</script>
<link rel="stylesheet" type="text/css" href="final.css" />
<style type="text/css" media="all">
#header {
background-color:#F90;
text-align: center;
color: #006;
}
#mainContent {
background-color:#F90;
}
body {
background-color:#009900;
}
h1 {
font-family:garamond;
font-weight: bold;
font-size: 20pt;
}
</style>
</head>
<body bgcolor="ff9900">
<div id="wrapper">
<div id="header"><a id="top"></a>
<h1>HTML Links</h1>
</div>
<div id="nav">
<span id="digitalclock" class="styling"></span>
<script>
<!--
/*****************************************
* LCD Clock script- by Javascriptkit.com
* Featured on/available at http://www.dynamicdrive.com/
* This notice must stay intact for use
*****************************************/
var alternate=0
var standardbrowser=!document.all&&!document.getElementById
if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock"
size="6"></form>')
function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") :
document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"
if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes
if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+" "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'> : </font>"+minutes+"
"+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'> : </font>"+minutes+"
"+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show
//-->
</script>
<ul id="topnav">
<li><a href="james_9pg1.htm" target="_self">Page 1 Basic Codes</a></li>
<li><a href="james_9pg2.htm" target="_self">Page 2 Complicated Codes</a></li>
<li class="clicked">HTML Links</li>
<li><a href="james_9pg3.htm" target="_self"><font
color="999999">Games</font></a></li>
</ul>
</div>
<div id="mainContent"> <span id="glowtext">
<hr color="009900">
</span> <font color="000099" size="6"><b>Here are some really good HTML sites i
know of that will be able to help you with HTML if there is something you need
that isn't on my site. Thank You for using my site...</b></font><br />
<br />
<span id="glowtext"><a href="http://www.dynamicdrive.com"
target="_blank">Dynamic Drive</a><br>
<br>
<a href="http://www.htmlgoodies.com/" target="_blank">HTML Goodies</a><br>
<br>
<a href="http://www.html-reference.com/MARQUEE.htm" target="_blank">Marqee
Codes</a><br>
<br>
<a href="http://www.w3schools.com/html/default.asp" target="_blank">HTML
Tutorials</a><br>
</span></div>
<div id="footer" align="center"><a href="#top">Back to Top</a></div>
</div>
........................
Lynn's horticulturist
Page 1 - blue on blue
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Garden Design by Hege</title>
<link rel="stylesheet" href="design.css" type="text/css" />
<style type="text/css" media="all">
h1{
margin-left:1em;
color:#b2bef3;
}
p{
margin-left:2em;
line-height:1.4em;
}
body{
background-color:#b2bef3;
}
.spread{
background-color:#588527;
}
#bar{
background-color:#588527;
}
.background{
background-color:#7e89be;
}
img.rule{
border:#b2bef3 solid thick;
background-color:#99cc33;
}
#logo{
text-align:center;
}
a:link{color:white; text-decoration:none;}
a:visited{color:#a0e34e text-decoration:none;} /*already been there*/
a:hover{color:#b2bef3; text-decoration:none;} /*roll over effect*/
a:active{color:black; text-decoration:none;} /*holding down button*/
</style>
</head>
<body>
<div id="container">
<img src="../images/web-logo.gif" width="900" height="150" id="logo"
title="simply garden design logo" alt="simply garden design logo" />
<div class="spread">GARDEN DESIGN <img src="../images/hege-leaf-sm.gif"
width="15" height="15" alt="leaf" />
<a href="container.html">CONTAINER GARDENS</a> <img src="../images/hege-leaf-sm.gif"
width="15" height="15" alt="leaf" />
<a href="coaching.html">GARDEN COACHING</a> <img src="../images/hege-leaf-sm.gif"
width="15" height="15" alt="leaf" />
<a href="hege.html">ABOUT HEGE</a> <img src="../images/hege-leaf-sm.gif"
width="15" height="15" alt="leaf" />
<a href="../index.html">HOME</a></div>
<div class="background">
<br />
<br />
<!--<table starts here>-->
<!--<Row 1>-->
<table border="0">
<tr>
<td style="width:550"><h1>Garden Design by Hege</h1>
<p>Garden Design services include site analysis, conceptual design and plant
selection. Features such as plant combinations, entertainment and recreation
areas, pathways and water features are discussed and designed to meet the
client’s wishes and desires. Hand-drawn images are produced to aid in the
creative design process.</p>
</td>
<!--<nested table starts here>-->
<td style="width:450">
<!--<Row 1>-->
<table border="0">
<tr>
<td style="width:150"><img src="../images/garden4.jpg" width="180" height="250"
class="rule" title="landscape design by Hege" alt="pot" /></td>
<td style="width:150"><img src="../images/before1.jpg" width="180" height="250"
class="rule" title="before new landscaping" alt="landscape" /></td>
</tr>
<!--<Row 2>-->
<tr>
<td style="width:150"><img src="../images/garden2.jpg" width="180" height="250"
class="rule" title="landscape design by Hege" alt="coaching" /></td>
<td style="width:150"><img src="../images/after1.jpg" width="180" height="250"
class="rule" title="after new landscaping" alt="pot" /></td>
</tr>
</table>
<!--<nested table Ends here>-->
</td>
</tr>
</table>
<!--<table Ends here>-->
<div id="bar"><a href="hege.html"><strong>Hege Watkins,</strong> Certified
Professional Horticulturist</a>
<img src="../images/hege-leaf-sm.gif" width="15" height="15" alt="leaf" />
424.894.6477
<img src="../images/hege-leaf-sm.gif" width="15" height="15" alt="leaf" />
<a href="mailto:hege@simplygardendesign.com">hege@simplygardendesign.com</a>
</div>
</div>
</div>
</body>
</html>
....................
Lynn's horticulturist page 2 - mustard on lighter mustard
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Container Gardens</title>
<link rel="stylesheet" href="design.css" type="text/css" />
<style type="text/css" media="all">
h1{
margin-left:1em;
color:#feb341;
}
p{
margin-left:2em;
line-height:1.4em;
}
body{
background-color:#feb341;
}
.spread{
background-color:#3f5f1d;
}
#bar{
background-color:#3f5f1d;
}
.background{
background-color:#e28f26;
}
img.rule{
border:#feb341 solid thick;
background-color:white;
}
#logo{
text-align:center;
}
a:link{color:white; text-decoration:none;}
a:visited{color:#a0e34e text-decoration:none;} /*already been there*/
a:hover{color:#feb341; text-decoration:none;} /*roll over effect*/
a:active{color:black; text-decoration:none;} /*holding down button*/
</style>
</head>
<body>
<div id="container">
<img src="../images/web-logo.gif" width="900" height="150" id="logo" alt="simply
garden design logo" />
<div class="spread"><a href="garden.html">GARDEN DESIGN</a>
<img src="../images/hege-leaf-sm.gif" width="15" height="15" alt="leaf"
/>
CONTAINER GARDENS <img src="../images/hege-leaf-sm.gif" width="15"
height="15" alt="leaf" />
<a href="coaching.html">GARDEN COACHING</a> <img src="../images/hege-leaf-sm.gif"
width="15" height="15" alt="leaf" />
<a href="hege.html">ABOUT HEGE</a> <img src="../images/hege-leaf-sm.gif"
width="15" height="15" alt="leaf" />
<a href="../index.html">HOME</a></div>
<div class="background">
<br />
<br />
<!--<table starts here>-->
<!--<Row 1>-->
<table border="0">
<tr>
<td style="width:550"><h1>Container Gardens</h1>
<p>Potted plants can serve as focal points or mark the entrance to your front
door. They are ideal for highlighting a flight of stairs and for accenting the
patio. With container gardens you can fill a bare spot in the garden or liven up
a shady corner. The possibilities are endless and <em>Simply Garden Design</em>
can create stunning container gardens to suit your needs.</p>
</td>
<!--<nested table starts here>-->
<td style="width:450">
<!--<Row 1>-->
<table border="0">
<tr>
<td style="width:150"><img src="../images/pot5.jpg" width="180" height="250"
class="rule" title="container garden by Hege" alt="pot" /></td>
<td style="width:150"><img src="../images/pot2.jpg" width="180" height="250"
class="rule" title="container garden by Hege" alt="pot" /></td>
</tr>
<!--<Row 2>-->
<tr>
<td style="width:150"><img src="../images/pot4.jpg" width="180" height="250"
class="rule" title="container gardens by Hege" alt="pot" /></td>
<td style="width:150"><img src="../images/pot3.jpg" width="180" height="250"
class="rule" title="container gardens by Hege" alt="pot" /></td>
</tr>
</table>
<!--<nested table Ends here>-->
</td>
</tr>
</table>
<!--<table Ends here>-->
<div id="bar"><a href="hege.html"><strong>Hege Watkins,</strong> Certified
Professional Horticulturist</a>
<img src="../images/hege-leaf-sm.gif" width="15" height="15" alt="leaf" />
424.894.6477
<img src="../images/hege-leaf-sm.gif" width="15" height="15" alt="leaf" />
<a href="mailto:hege@simplygardendesign.com">hege@simplygardendesign.com</a>
</div>
</div>
</div>
</body>
</html>
......................................
Lynn's horticulturist
Page 3 - mint on yellow
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Garden Coaching</title>
<link rel="stylesheet" href="design.css" type="text/css" />
<style type="text/css" media="all">
h1{
margin-left:1em;
color:#fad62a;
text-align:left;
}
p{
margin-left:2em;
line-height:1.4em;
text-align:left;
}
body{
background-color:#fad62a;
}
.spread{
background-color:#588527;
}
#bar{
background-color:#588527;
}
.background{
background-color:#ddbb00;
}
img.rule{
border:#fad62a solid thick;
}
li{
line-height:1.4em;
text-align:left;
}
logo{
text-align:center;
}
a:link{color:white; text-decoration:none;}
a:visited{color:#a0e34e text-decoration:none;} /*already been there*/
a:hover{color:#fad62a; text-decoration:none;} /*roll over effect*/
a:active{color:black; text-decoration:none;} /*holding down button*/
</style>
</head>
<body>
<div id="container">
<img src="../images/web-logo.gif" width="900" height="150" id="logo"
title="simply garden design logo" alt="simply garden design logo" />
<div class="spread">
<a href="garden.html">GARDEN DESIGN</a> <img src="../images/hege-leaf-sm.gif"
width="15" height="15" alt="leaf" />
<a href="container.html">CONTAINER GARDENS</a> <img src="../images/hege-leaf-sm.gif"
width="15" height="15" alt="leaf" />
GARDEN COACHING <img src="../images/hege-leaf-sm.gif" width="15"
height="15" alt="leaf" />
<a href="hege.html">ABOUT HEGE</a> <img src="../images/hege-leaf-sm.gif"
width="15" height="15" alt="leaf" />
<a href="../index.html">HOME</a></div>
<div class="background">
<br />
<br />
<!--<table starts here>-->
<!--<Row 1>-->
<table border="0">
<tr>
<td style="width:550"><h1>Garden Coaching</h1>
<p>Whether you are new to gardening and need help with gardening basics, or you
are a seasoned gardener that wants help with a specific challenge, I can help
you with your gardening needs.</p>
<p>A consultation includes walking around your property<br /> and giving you
horticultural advice and design tips.<br />This advice can include:
<ul>
<li>pruning tips</li>
<li>plant suggestions</li>
<li>ideas for plant combinations</li>
<li>how to build healthy soil</li>
<li>plant identification and more.</li>
</ul></p>
<p>I am also available for personal shopping to help you choose plants for your
garden and to show what to look for in healthy plants.</p>
</td>
<!--<nested table starts here>-->
<td style="width:450">
<!--<Row 1>-->
<table border="0">
<tr>
<td style="width:150"><img src="../images/garden1.jpg" width="180" height="250"
class="rule" title="container gardens" alt="pot" /></td>
<td style="width:150"><img src="../images/garden6.jpg" width="180" height="250"
class="rule" title="../landscape design by Hege" alt="landscape" /></td>
</tr>
<!--<Row 2>-->
<tr>
<td style="width:150"><img src="../images/garden5.jpg" width="180" height="250"
class="rule" title="garden coaching" alt="coaching" /></td>
<td style="width:150"><img src="../images/garden3.jpg" width="180" height="250"
class="rule" title="container gardens" alt="pot" /></td>
</tr>
</table>
<!--<nested table Ends here>-->
</td>
</tr>
</table>
<!--<table Ends here>-->
<div id="bar"><a href="hege.html"><strong>Hege Watkins,</strong> Certified
Professional Horticulturist</a>
<img src="../images/hege-leaf-sm.gif" width="15" height="15" alt="leaf" />
424.894.6477
<img src="../images/hege-leaf-sm.gif" width="15" height="15" alt="leaf" />
<a href="mailto:hege@simplygardendesign.com">hege@simplygardendesign.com</a>
</div>
</div>
</div>
</body>
</html>
Top
........................................................................................
http://www.w3.org/TR/CSS21/tables.html (discusses border collapse and lots
more)
Tables
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 }
Top
http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution
http://www.louguzzo.com/pubs.php
………………………..
Lou posts a column daily at his Daily
Voice of Reason
“Whatever Happened to Common Sense?”
http://www.louguzzo.com/dvor.php
Archives for past Daily Voice of Reason articles
http://www.louguzzo.com/archive.php
Here’s what Wikipedia has to say about Lou:
Lou Guzzo is a former
journalist, author, and television commentator in
Seattle, Washington, USA. He was an art and theater critic for 20 years at
the
Seattle Times, then served as the managing editor of the
Seattle Post-Intelligencer, where his
investigative team wrote stories that led to the
indictments of more than fifty corrupt government officials.
He was closely associated with
Dixy Lee Ray. He worked with her when she was at the
U.S. Atomic Energy Commission, co-authored books with her, and helped her in
her successful bid for
governor of Washington.
He appeared regularly on
KIRO-TV, where he was also an editorial consultant.
By today's standards, Guzzo's commentaries were largely
inoffensive and moderate, if slightly right-of-center. In 1986, his commentaries
caught the attention of the punk-metal band
The Dehumanizers, who named their debut
7" EP (and its title track) "Kill Lou Guzzo." Lawsuits and outrage ensued,
and the EP has since become difficult to find.
Guzzo has since retired from KIRO, but maintains a website
where he continues to write a daily commentary on the events of the day.
http://en.wikipedia.org/wiki/Lou_Guzzo
Lou also writes a column for WhacyNation.com
Here’s a link to one of his latest articles, written on
February 13, 2009-02-16
http://www.whackynation.com/
The Dehumanizers
kill lou guzzo 7"
subcore records. sub7ep0001 / 5
tracks / 1986
Title track caused the band to be sued
by Lou's daughter. Distribution was prohibited, still copies with the xeroxed
letter by the lawyers were sold. Three different sleeves, promo copies came with
"Have you seen these three bunnies?" sleeve, first press had black & white
"skeleton in bathtub" sleeve, second pressing had the "missiles & screen" sleeve
on pink paper. Record and lyric sheet are identical. + lyric sheet & xeroxed
letter with newer copies (see above).
The
Dehumanizers formed in 1984 and recorded a few records, swapped out some band
members, played a ton of shows, and then broke up in the late 1980s. Our
favorite line-up was the one featured on the 1986
Kill Lou Guzzo EP (Subcore Records SUB7EP0001) and consisted
of Mort (bass/vocals), Zoli (guitar), Infra Ed (drums), Intense (bass), and
Gobot (vocals). They played fast hardcore punk with a slight thrash metal
influence that was creeping into the scene by the mid-80s. Their label, Subcore
Records, is also long gone, but at the time, label honcho David Portnow had a
bit of a record label empire. Besides Subcore, he ran Ever Rat Records (metal),
Ever Dread (reggae), and Ever Rap (uh, rap), and he released records by the pre-Treepeople
band State of Confusion, Coven,
A.M.Q.A., the Accused, the Mentors, Lethal Dose, Dumt, and the
Metal Metaldown compilations. The
Kill Lou Guzzo EP was probably
his most infamous record because it set off a legal brouhaha.
The band, like a lot of decent people, thought Lou Guzzo, a former newspaper
journalist/KIRO commentator/Washington governor
Dixy Lee Ray salad-tosser/professional curmudgeon, was an annoying windbag.
Mr. Guzzo, who we feel helped pave the way for other irritating Seattle TV
blabbermouths like Ken Schram and John Carlson, polluted the local airwaves for
most of the 80s and was known for his grumpy old man rants. One of his most
notorious commentaries was when Lou Guzzo, miffed about a recent Circle Jerks/Dehumanizers
riot, came out in favor of the Teen Dance Ordinance and basically called punk
rockers losers who need to find better hobbies than music. On the song “Kill Lou
Guzzo,” the band sampled the commentary and included some lyrics about dating
Lou’s daughter. Lou, being the square fuddyduddy that he is, caught wind of the
song and promptly
sued the band for copyright infringement and defamation/invasion of his
daughter’s privacy. Subcore, smelling a hit, promptly pressed more records,
which further pissed off KIRO and Lou.
While kids are
now free to enjoy all-ages shows, during the mid-eighties, all-ages shows and
dances were a source of controversy amongst lame Seattle politicians and dumb
Seattle media members. To the
Seattle elite, punk rockers were a source of
all that was evil in this town, and the elite claimed that all-age venues were
dens of drug, alcohol, sex, and deviant behavior. This led the city council to
write the draconian Teen Dance Ordinance in 1985, which essentially put the
kybosh on all-ages shows by making them unprofitable via requiring club
owners/promoters to purchase million-dollar insurance policies, to hire two
off-duty police officers for security, and to restrict entry to persons aged
15-20 years. Outside of some trouble at the occasional punk show, most of the
ordinance was aimed at places like the Monastery, which was a nonprofit
Universal Life
Church that held all-ages dances and was allegedly a hotbed for child
prostitution, drug and alcohol use, and other abuses. Since I prostituted my
teenage self at a different Catholic church, I cannot comment on whether the
Monastery allegations were true or exaggerated. Of course,
Seattle’s
dumbass politicians never bothered to legally define the difference between a
dance and a concert and also allowed an exception for nonprofits and schools, so
technically, the ordinance didn’t affect places like the Monastery. So good job,
geniuses! Anyhow, this law lasted until 2002, when it was replaced by the
All-Ages Dance Ordinance, which eased restrictions by quite a bit, and kids have
been happy ever since. Not only that, but the city now subsidizes the all-ages
venue, the
Vera Project, which probably pisses that old geezer Lou off to no end.
Anyhow, back to the Man of the Hour, Mort.
After leaving
the Dehumanizers, Mort packed his bags, moved north, and formed the garage rock
power trio, Game for Vultures. Along with guitarist/singer Mort, the band
featured bassist Shauna and drummer Jeff. Their sole EP,
Goin’ My Way, was recorded by Conrad Uno at Egg Studios in
1989, released by Estrus records in 1990, and reissued in 1994. The band also
contributed “He’s Waiting” to the 1989 Here
Aren’t The Sonics tribute record (Estrus/Popllama), the Easybeats
cover “Sorry” to the 1990 Estrus Lunch
Bucket 3x7” boxset, and “Don’t Bring Me in There” to the 1991
On the Rocks Volume One 7” (Estrus).
The song “Arizona,”
which was recorded live at the Up & Up Tavern, was included on the Gritty Kitty
Records compilation cd, North of Nowhere.
The band lasted a few years before Mort joined the Mono Men and Shauna and Jeff
formed
Medelicious, who recorded a couple singles in the early 90’s before
disbanding.
Former Dehumanizers have since formed the surf band,
the Manatees, and there is talk of a re-mastered, re-mixed Dehumanizers
retrospective. Regarding Lou, he is still alive and kicking and busies himself
with a blog where he spouts off on random topics and provides the answers for
every goddamn problem in the world. His daughter’s current whereabouts are
unknown.
http://lamestainnorthwest.blogspot.com/2007/03/morts-pre-mono-men-rock-history-and-why.html
………..
Lou Guzzo,
who at 89 may be the World's Oldest Blogger, never fails to come up with new
ways to be a public scold:
http://waldoathome.blogspot.com/2008/07/guzzos-government-interventions.html
……………………………….
Kill
Lou Guzzo
by
The Dehumanizers
From the Album
The First Five Years (Of
Drug Abuse) and End of Time
http://www.amazon.com/Kill-Lou-Guzzo/dp/B0019BRPCK
Dixy Lee
Ray
Died 2 Jan 1994 (born 3 Sep 1914)
(Margaret Ray) American marine biologist whose interests extended to the
environment and the need for greater public understanding of science. A year
after appointment to the Atomic Energy Commission, she became its first female
chair (1973-75) and championed nuclear power plant construction. On 2 Nov 1976,
Ray won election as the first woman to be
governor of Washington state. In her single term as governor, Ray generated
more controversy than accomplishments, advocating reductions in environmental
protections, and supporting nuclear power. She feuded with aides and refused to
close the Hanford nuclear dump. She was featured on the
cover of Time issue of 12 Dec 1977.
http://www.todayinsci.com/1/1_02.htm
Dixy’s photo was
found here
Top
Back to home page
