Untitled


Tutorial 3 Review
<html>

<head>
<!--
   New Perspectives on HTML and XHTML 5th Edition
   Tutorial 3
   Review Assignment

   Sunny Acres Holidays Page
   Author: Jason Summers
   Date: 22 April 2010

   Filename:         holiday.htm
   Supporting files: greenbar.jpg, holiday.jpg, salogo.jpg, sunny.css
-->
<link href="sunny.css" rel="stylesheet" type="text/css" />
   <title>Holidays at Sunny Acres</title>
</head>

<body>
	<div id="outer">

   <h1><img src="salogo.jpg" alt="Sunny Acres"  /></h1>
   <div id="links">
      <a href="#">Home</a><br/>
      <a href="#">The Corn Maze</a><br/>
      <a href="#">The Haunted Maze</a><br/>
      <a href="#">Petting Barn</a><br/>
      <a href="#">Produce</a><br/>
      <a href="holiday.htm">Holidays on the Farm</a>
   </div>

	<div id="inner">
   <h2>Holidays on the Farm</h2>
   <p id="photobox">
      <img src="holiday.jpg" alt="holiday photo" id="photo" width="250" height="250" /><br/>
      Saint Nick visits Sunny Acres in December
   </p>
   <p>
      This year Sunny Acres becomes Wintery Acres as we institute our first
      Holidays on the Farm. Join us on weekends from November 23
      through January 5 for holiday cheer and festivities.
   </p>
   <p>The Sunny Acres Farm Shop will be decked out in bright and colorful holiday
      decorations with special prices on garland, tinsel, ornaments, and wreaths.
      Be sure to sample our homemade egg nog and bring some home for your
      family.
   </p>
   <p>The trails and hills around Sunny Acres will be alive with fun and
      games. Come join us for sleigh rides or zoom down our awesome
      sledding hill (weather permitting). Sunny Acres is adjacent to
      Dawson Park which has a vast network of cross country ski trails
      for every level of skier.</p>
   <p>We've even decorated our barn for the holidays. Come visit Santa's
      stables where you might even see a few reindeer. Perhaps even one
      with a red nose!</p>

   <h3>Hours</h3>
   <ul>
      <li>Saturdays: 10 am - 5 pm</li>
      <li>Sundays: 11 am - 3 pm</li>
      <li>Closed: December 25, 31, January 1</li>
   </ul>

   <h3>Directions</h3>
   <ul>
      <li>From Council Bluffs, proceed east on I-80</li>
      <li>Take Exit 38 North to the Drake Frontage Road</li>
      <li>Turn right on Highway G</li>
      <li>Proceed east for 2.5 miles</li>
      <li>Sunny Acres is on your left; watch for the green sign</li>
   </ul>


   <address>
      Sunny Acres &nbsp;&#9728;&nbsp;
      Tammy &amp; Brent Nielsen &nbsp;&#9728;&nbsp;
      1977 Highway G &nbsp;&#9728;&nbsp;
      Council Bluffs, IA &nbsp;&nbsp; 51503
   </address>
	</div>
	</div>

</body>

</html>

Tutorial 3 Review CSS

/*
   New Perspectives on HTML and XHTML 5th Edition
   Tutorial 3
   Review Assignment

   Sunny Acres Holiday Festival Style Sheet
   Author: Max Haddad
   Date: 22 April 2010

   Filename:         sunny.css
   Supporting Files: greenbar.jpg

*/
#outer {margin: 0em 0em 0em 0em;
	font-family: arial, helvetica;
	background-color: white;
	background-image: url(greenbar.jpg);
	background-repeat: repeat-y;
	width: 770px
	}

h1    {border-bottom: 3px solid green;
	margin: 0em 0em 0em 0em}

h2    {background-color: green;
	font-color: white;
	padding: 5px;
	kerning: 7px
	}

h3    {background-color: green;
	color: white;
	padding: 5px;
	kerning: 7px;
	width: 200px
	}

address {font-size: 11px;
	  color: green;
	  text-align: center;
	  padding-top: 5px;
	  border-top: 3px solid green
	  }


#inner  {margin-left: 225px;
	padding-left: 10px
	}

#photobox   {float: right;
	     text-align: center;
	     font-size: 12px;
	     font-style: italic;
	     background-color: RGB(255, 215, 71);
	     margin-top: 10px;
	     margin-left: 10px;
	     margin-bottom: 10px;
	     margin-right: 0px;
	     border-top: 1px solid black;
	     border-left: 1px solid black;
	     border-right: 4px solid black;
	     border-bottom: 4px solid black;
	     padding: .5em .5em .5em .5em;
	     display: block}

#links	{float: left}

a       {text-decoration:none;
	display: block;
	 width: 180px;
	 margin: 5px 5px 5px 5px;
	 padding: 5px;
	 background-color: rgb(255, 215, 71);
	 border-top: 1px solid black;
	 border-left: 1px solid black;
	 border-bottom: 3px solid black;
	 border-right: 3px solid black}


Tutorial 3 Case 1

<html>
<head>
<!--
   New Perspectives on HTML and XHTML
   Tutorial 3
   Case Problem 3

   ICI Home Page
   Author: Max Haddad
   Date:   29 April 2010

   Filename:         crypt.htm
   Supporting files: back1.gif, back2.gif, locks.jpg, logo.gif, scytale.gif
-->

<title>International Cryptographic Institute</title>
</head>

<body style="background: black url(back1.gif) repeat-y scroll; margin: 0 10 0 100; color: white">

<p>
<img src="logo.gif" alt="ICI" width="95" height="78" style="float: left; margin-left: -100px" />
</p>

<h1 style="font-family: Courier New, monospace; font-size: 1.8em; letter-spacing: 0.3em;
          line-height: 0.7em; font-weight: bold; color: yellow; background-image: url(back2.gif);
          text-align: center">
THE&nbsp;<br />
SCIENCE<br />
&nbsp;&nbsp;OF<br />
CRYPTOGRAPHY
</h1>

<h2 style="font-family: Arial, Helvetica, sans-serif">What is Cryptography?</h2>

<p style="text-indent: 2em"><b>Cryptography</b> is the science of secure communications,
formed from the Greek words <i>krypt&#243;s</i> meaning "hidden" and <i>l&#243;gos</i>, meaning
"word". The first recorded use of cryptography was by the Spartans who (as early as 400 BC)
employed a cipher device called a "scytale" to send secret communications between military
commanders. The scytale consisted of a tapered baton around which was wrapped a piece of parchment
inscribed with the message. Once unwrapped the parchment appeared to contain an incomprehensible
set of letters, however when wrapped around another baton of identical size the original text
appears.
<img src="scytale.gif" alt="" width="250" height="69" style="float: right" />
</p>

<p style="text-indent: 2em">Cryptographers developed more and more ingenious systems,
but it was in the 20<sup>th</sup>century, that the science of cryptography took off.
The first major achievement was the the development of rotor cipher machines. An American,
Edward Hebern recognised that by hardwiring alphabetic substitution in the connections from
one side of an electrical rotor to those on the other side and cascading a collection of such
rotors, alphabetic substitutions of almost any complexity could be produced. Germany engineers
independently discovered the rotor concept and designed the precursors to the most famous
cipher machine in history - the German Enigma machine which was used during World War 2. The
cracking of the Enigma ciphers byBritish and Polish cryptanalysts during the Second World War
is one of the greatest triumphs inthe history of cryptography and played an important role in
the Allie victory.</p>

<hr style="color: yellow; background-color: yellow" />

<p style="text-align: center">To learn more cryptography, please tour the site. <br />
   <img src="locks.jpg" alt="" width="510" height="110" usemap="#locks" style="border-width: 0px" />
<map name="locks" id="locks">
   <area shape="circle" coords="52,52,43" href="history.htm" alt="history" />
   <area shape="circle" coords="155,52,43" href="enigma.htm" alt="enigma"/>
   <area shape="circle" coords="255,52,43" href="algo.htm" alt="algorithms" />
   <area shape="circle" coords="355,52,43" href="single.htm" alt="Single Key"/>
   <area shape="circle" coords="455,52,43" href="public.htm" alt="Public Key" />
</map>
</p>


</body>
</html>

Tutorial 3 Case 3

<html>
<head>
<!--
   New Perspectives on HTML and XHTML 5th Edition
   Tutorial 3
   Case Problem 2

   Bike the Mountains Tour
   Author: Max Haddad
   Date: 29 April 2010

   Filename:         bmtour.htm
   Supporting files: body.jpg, block.jpg, h1back.jpg, h1title.gif, wheels.css
-->

   <title>Bike the Mountains Tour</title>

<link href="wheels.css" rel="stylesheet" type="text/css" />


</head>

<body>
   <h1><img src="h1title.gif" /></h1>
   <div id="column1">
      <a href="#">Home</a>
      <a href="#">Learn More</a>
      <a href="#">Testimonials</a>
      <a href="#">Route Maps</a>
      <a href="#">Register</a>
      <a href="#">Lodging</a>
      <a href="#">Meals</a>
      <a href="#">Training</a>
      <a href="#">Equipment</a>
      <a href="#">Forums</a>
      <a href="#">FAQs</a>
      <a href="#">Contact Us</a>
   </div>

<div id="column2">
   <h2>Introduction</h2>
   <p>The Bike the Mountains Tour rises from the town of Littleton, Colorado and
      explores the Colorado Front Range. Our tour crosses the Continental Divide
      twice, giving you the opportunity to bike the highest paved roads in the
      United States. This tour is a classic showcase of Colorado's Rocky Mountain
      scenery.</p>
   <blockquote>
      "The Bike the Mountains Tour is <i>amazing</i>. I highly recommend it
      and would gladly return."
   </blockquote>
   <p>Not designed for the weekend cyclist, this tour is offered only for those
      fit enough to ride high mountain passes. We provide sag wagons and
      support. Your lodging and meals are also part of the registration fee.
      We guarantee tough climbs, amazing sights, sweaty jerseys, and lots
      of fun.</p>
   <p>This is the seventh year we've offered the Bike the Mountains Tour. It is
      our most popular tour and riders are returning again and again. Our experienced
      tour leaders will be there to guide, help, encourage, draft, and lead you
      every stroke of the way. Come join us!</p>
   <h2>Itinerary</h2>
   <h3>Day 1</h3>
   <p>We start from the foothills above Littleton, Colorado, promptly at 9am. Be sure
      to fuel up at Kate's House of Pancakes before starting your ride. The first
      day is a chance to get your legs in shape, test your gearing, and prepare for
      what's to come. Be aware that there are several steep grades as we climb out of
      the valley into the Front Range. Optional side tours and shortcuts will be
      provided.</p>
   <h3>Day 2</h3>
   <p>Day 2 starts with a climb up Bear Creek Canyon to Lookout Mountain, followed
      by a swift and winding descent into the town of Golden. Refresh yourself at the
      famous Coors Brewery. You'll need the break to get yourself ready for a great
      climb through Golden Gate Canyon to the Peak to Peak Highway, ending in the
      gambling town of Blackhawk. Try your hand at poker and blackjack, but watch
      your wallet.</p>
</div>
<div id="column3">
   <h3>Day 3</h3>
   <p>Day 3 takes you along the Peak to Peak Highway. Established in 1918 this is
      Colorado's oldest scenic byway. This 55-mile route showcases the mountains
      of the Front Range, providing amazing vistas from Golden Gate Canyon State Park
      to Rocky Mountain National Park. We'll stop at Estes Park for fun and
      refreshment. Get a good night's sleep; you'll need it the next day.</p>
   <h3>Day 4</h3>
   <p>Now for the supreme challenge: Day 4 brings some real high-altitude cycling
      through Rocky Mountain National Park and up Trail Ridge Road. It's an
      amazing ride, high above timberline, topping out at over 11,000 feet. Stop and
      rest at the Alpine Visitor's Center before all of that hard work is rewarded
      with a fast and joyous descent into the town of Grand Lake.</p>
   <h3>Day 5</h3>
   <p>We start Day 5 on the west side of the Continental Divide. From Grand Lake,
      you'll bike to Winter Park, a great ski town summer resort. From Winter Park it's
      a steady and scenic climb over Berthoud Pass, and back to the eastern side of
      the Continental Divide. We'll stay at Idaho Springs, where you can enjoy the
      natural hot springs at the hotel.</p>
   <h3>Day 6</h3>
   <p>On Day 6 choose your pleasure or your poison. You can ride back to Littleton
      over Squaw Pass and Bear Creek. The ride is beautiful and enjoyable in its
      own right. However, if you're "up" to it, this is your opportunity to tackle
      Mount Evans. The 7-mile side trip to the top of Mt Evans, at over 14,000 feet,
      is something that can't be found anywhere else in the country. We'll provide
      the sag wagon, you provide the legs and lungs.</p>
   <p>Once you're back to Littleton, please join us for a celebratory dinner
      as we share memories of an amazing 6 days of riding the Colorado mountains.</p>
</div>

   <address>
      Bike the Mountains Tour &nbsp;&bull;&nbsp;
      Littleton, CO 80123 &nbsp;&bull;&nbsp;
      (303) 555 - 5499
   </address>


</body>
</html>

Tutorial 3 Case 2 CSS

/*
   New Perspectives on HTML and XHTML 5th Edition
   Tutorial 3
   Case Problem 2

   Mountain Wheels Style Sheet
   Author: Max Haddad
   Date: 29 April 2010

   Filename:         wheel.css
   Supporting Files: body.jpg, block.jpg, h1back.jpg

*/


body		{font-family: verdana, helvetica;
		 margin: 0px 0px 0px 0px;
		 background-color: white;
		 background-image: url(body.jpg);
		 background-repeat: repeat-y;
		}

#column1	{float: left;
		 width: 140px;
		 padding-left: 10px;
		 padding-right: 20px
		}

#column2	{width: 40%;
		 float: left;
	  	 border-left: 1px solid black;
		 border-right: 1px solid black
		}

h1		{