Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Tutorial 3 Review
- <html>
- <head>
- <!--
- New Perspectives on HTML and XHTML 5th Edition
- Tutorial 3
- Review Assignment
- Sunny Acres Holidays Page
- Author: Some Schmuck
- Date: xx/xx/2011
- 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 ☀
- Tammy & Brent Nielsen ☀
- 1977 Highway G ☀
- Council Bluffs, IA 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 <br />
- SCIENCE<br />
- 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ós</i> meaning "hidden" and <i>ló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 •
- Littleton, CO 80123 •
- (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 {
Add Comment
Please, Sign In to add comment