SHOW:
|
|
- or go back to the newest paste.
| 1 | - | Case 3 is only half done, dont forget to change the author and date |
| 1 | + | |
| 2 | Tutorial 3 Review | |
| 3 | <html> | |
| 4 | ||
| 5 | <head> | |
| 6 | <!-- | |
| 7 | New Perspectives on HTML and XHTML 5th Edition | |
| 8 | Tutorial 3 | |
| 9 | Review Assignment | |
| 10 | ||
| 11 | Sunny Acres Holidays Page | |
| 12 | Author: Jason Summers | |
| 13 | Date: 22 April 2010 | |
| 14 | ||
| 15 | - | Author: Max Haddad |
| 15 | + | |
| 16 | Supporting files: greenbar.jpg, holiday.jpg, salogo.jpg, sunny.css | |
| 17 | --> | |
| 18 | <link href="sunny.css" rel="stylesheet" type="text/css" /> | |
| 19 | <title>Holidays at Sunny Acres</title> | |
| 20 | </head> | |
| 21 | ||
| 22 | <body> | |
| 23 | <div id="outer"> | |
| 24 | ||
| 25 | <h1><img src="salogo.jpg" alt="Sunny Acres" /></h1> | |
| 26 | <div id="links"> | |
| 27 | <a href="#">Home</a><br/> | |
| 28 | <a href="#">The Corn Maze</a><br/> | |
| 29 | <a href="#">The Haunted Maze</a><br/> | |
| 30 | <a href="#">Petting Barn</a><br/> | |
| 31 | <a href="#">Produce</a><br/> | |
| 32 | <a href="holiday.htm">Holidays on the Farm</a> | |
| 33 | </div> | |
| 34 | ||
| 35 | <div id="inner"> | |
| 36 | <h2>Holidays on the Farm</h2> | |
| 37 | <p id="photobox"> | |
| 38 | <img src="holiday.jpg" alt="holiday photo" id="photo" width="250" height="250" /><br/> | |
| 39 | Saint Nick visits Sunny Acres in December | |
| 40 | </p> | |
| 41 | <p> | |
| 42 | This year Sunny Acres becomes Wintery Acres as we institute our first | |
| 43 | Holidays on the Farm. Join us on weekends from November 23 | |
| 44 | through January 5 for holiday cheer and festivities. | |
| 45 | </p> | |
| 46 | <p>The Sunny Acres Farm Shop will be decked out in bright and colorful holiday | |
| 47 | decorations with special prices on garland, tinsel, ornaments, and wreaths. | |
| 48 | Be sure to sample our homemade egg nog and bring some home for your | |
| 49 | family. | |
| 50 | </p> | |
| 51 | <p>The trails and hills around Sunny Acres will be alive with fun and | |
| 52 | games. Come join us for sleigh rides or zoom down our awesome | |
| 53 | sledding hill (weather permitting). Sunny Acres is adjacent to | |
| 54 | Dawson Park which has a vast network of cross country ski trails | |
| 55 | for every level of skier.</p> | |
| 56 | <p>We've even decorated our barn for the holidays. Come visit Santa's | |
| 57 | stables where you might even see a few reindeer. Perhaps even one | |
| 58 | with a red nose!</p> | |
| 59 | ||
| 60 | <h3>Hours</h3> | |
| 61 | <ul> | |
| 62 | <li>Saturdays: 10 am - 5 pm</li> | |
| 63 | <li>Sundays: 11 am - 3 pm</li> | |
| 64 | <li>Closed: December 25, 31, January 1</li> | |
| 65 | </ul> | |
| 66 | ||
| 67 | <h3>Directions</h3> | |
| 68 | <ul> | |
| 69 | <li>From Council Bluffs, proceed east on I-80</li> | |
| 70 | <li>Take Exit 38 North to the Drake Frontage Road</li> | |
| 71 | <li>Turn right on Highway G</li> | |
| 72 | <li>Proceed east for 2.5 miles</li> | |
| 73 | <li>Sunny Acres is on your left; watch for the green sign</li> | |
| 74 | </ul> | |
| 75 | ||
| 76 | ||
| 77 | <address> | |
| 78 | Sunny Acres ☀ | |
| 79 | Tammy & Brent Nielsen ☀ | |
| 80 | 1977 Highway G ☀ | |
| 81 | Council Bluffs, IA 51503 | |
| 82 | </address> | |
| 83 | </div> | |
| 84 | </div> | |
| 85 | ||
| 86 | </body> | |
| 87 | ||
| 88 | </html> | |
| 89 | ||
| 90 | Tutorial 3 Review CSS | |
| 91 | ||
| 92 | /* | |
| 93 | New Perspectives on HTML and XHTML 5th Edition | |
| 94 | Tutorial 3 | |
| 95 | Review Assignment | |
| 96 | ||
| 97 | Sunny Acres Holiday Festival Style Sheet | |
| 98 | Author: Max Haddad | |
| 99 | Date: 22 April 2010 | |
| 100 | ||
| 101 | Filename: sunny.css | |
| 102 | Supporting Files: greenbar.jpg | |
| 103 | ||
| 104 | */ | |
| 105 | #outer {margin: 0em 0em 0em 0em;
| |
| 106 | font-family: arial, helvetica; | |
| 107 | background-color: white; | |
| 108 | background-image: url(greenbar.jpg); | |
| 109 | background-repeat: repeat-y; | |
| 110 | width: 770px | |
| 111 | } | |
| 112 | ||
| 113 | h1 {border-bottom: 3px solid green;
| |
| 114 | margin: 0em 0em 0em 0em} | |
| 115 | ||
| 116 | h2 {background-color: green;
| |
| 117 | font-color: white; | |
| 118 | padding: 5px; | |
| 119 | kerning: 7px | |
| 120 | } | |
| 121 | ||
| 122 | h3 {background-color: green;
| |
| 123 | color: white; | |
| 124 | padding: 5px; | |
| 125 | kerning: 7px; | |
| 126 | width: 200px | |
| 127 | } | |
| 128 | ||
| 129 | address {font-size: 11px;
| |
| 130 | color: green; | |
| 131 | text-align: center; | |
| 132 | padding-top: 5px; | |
| 133 | border-top: 3px solid green | |
| 134 | } | |
| 135 | ||
| 136 | ||
| 137 | #inner {margin-left: 225px;
| |
| 138 | padding-left: 10px | |
| 139 | } | |
| 140 | ||
| 141 | #photobox {float: right;
| |
| 142 | text-align: center; | |
| 143 | font-size: 12px; | |
| 144 | font-style: italic; | |
| 145 | background-color: RGB(255, 215, 71); | |
| 146 | margin-top: 10px; | |
| 147 | margin-left: 10px; | |
| 148 | margin-bottom: 10px; | |
| 149 | margin-right: 0px; | |
| 150 | border-top: 1px solid black; | |
| 151 | border-left: 1px solid black; | |
| 152 | border-right: 4px solid black; | |
| 153 | border-bottom: 4px solid black; | |
| 154 | padding: .5em .5em .5em .5em; | |
| 155 | display: block} | |
| 156 | ||
| 157 | #links {float: left}
| |
| 158 | ||
| 159 | a {text-decoration:none;
| |
| 160 | display: block; | |
| 161 | width: 180px; | |
| 162 | margin: 5px 5px 5px 5px; | |
| 163 | padding: 5px; | |
| 164 | background-color: rgb(255, 215, 71); | |
| 165 | border-top: 1px solid black; | |
| 166 | border-left: 1px solid black; | |
| 167 | border-bottom: 3px solid black; | |
| 168 | border-right: 3px solid black} | |
| 169 | ||
| 170 | ||
| 171 | Tutorial 3 Case 1 | |
| 172 | ||
| 173 | <html> | |
| 174 | <head> | |
| 175 | <!-- | |
| 176 | New Perspectives on HTML and XHTML | |
| 177 | Tutorial 3 | |
| 178 | Case Problem 3 | |
| 179 | ||
| 180 | ICI Home Page | |
| 181 | Author: Max Haddad | |
| 182 | Date: 29 April 2010 | |
| 183 | ||
| 184 | Filename: crypt.htm | |
| 185 | Supporting files: back1.gif, back2.gif, locks.jpg, logo.gif, scytale.gif | |
| 186 | --> | |
| 187 | ||
| 188 | <title>International Cryptographic Institute</title> | |
| 189 | </head> | |
| 190 | ||
| 191 | <body style="background: black url(back1.gif) repeat-y scroll; margin: 0 10 0 100; color: white"> | |
| 192 | ||
| 193 | <p> | |
| 194 | <img src="logo.gif" alt="ICI" width="95" height="78" style="float: left; margin-left: -100px" /> | |
| 195 | </p> | |
| 196 | ||
| 197 | <h1 style="font-family: Courier New, monospace; font-size: 1.8em; letter-spacing: 0.3em; | |
| 198 | line-height: 0.7em; font-weight: bold; color: yellow; background-image: url(back2.gif); | |
| 199 | text-align: center"> | |
| 200 | THE <br /> | |
| 201 | SCIENCE<br /> | |
| 202 | OF<br /> | |
| 203 | CRYPTOGRAPHY | |
| 204 | </h1> | |
| 205 | ||
| 206 | <h2 style="font-family: Arial, Helvetica, sans-serif">What is Cryptography?</h2> | |
| 207 | ||
| 208 | <p style="text-indent: 2em"><b>Cryptography</b> is the science of secure communications, | |
| 209 | formed from the Greek words <i>kryptós</i> meaning "hidden" and <i>lógos</i>, meaning | |
| 210 | "word". The first recorded use of cryptography was by the Spartans who (as early as 400 BC) | |
| 211 | employed a cipher device called a "scytale" to send secret communications between military | |
| 212 | commanders. The scytale consisted of a tapered baton around which was wrapped a piece of parchment | |
| 213 | inscribed with the message. Once unwrapped the parchment appeared to contain an incomprehensible | |
| 214 | set of letters, however when wrapped around another baton of identical size the original text | |
| 215 | appears. | |
| 216 | <img src="scytale.gif" alt="" width="250" height="69" style="float: right" /> | |
| 217 | </p> | |
| 218 | ||
| 219 | <p style="text-indent: 2em">Cryptographers developed more and more ingenious systems, | |
| 220 | but it was in the 20<sup>th</sup>century, that the science of cryptography took off. | |
| 221 | The first major achievement was the the development of rotor cipher machines. An American, | |
| 222 | Edward Hebern recognised that by hardwiring alphabetic substitution in the connections from | |
| 223 | one side of an electrical rotor to those on the other side and cascading a collection of such | |
| 224 | rotors, alphabetic substitutions of almost any complexity could be produced. Germany engineers | |
| 225 | independently discovered the rotor concept and designed the precursors to the most famous | |
| 226 | cipher machine in history - the German Enigma machine which was used during World War 2. The | |
| 227 | cracking of the Enigma ciphers byBritish and Polish cryptanalysts during the Second World War | |
| 228 | is one of the greatest triumphs inthe history of cryptography and played an important role in | |
| 229 | the Allie victory.</p> | |
| 230 | ||
| 231 | <hr style="color: yellow; background-color: yellow" /> | |
| 232 | ||
| 233 | <p style="text-align: center">To learn more cryptography, please tour the site. <br /> | |
| 234 | <img src="locks.jpg" alt="" width="510" height="110" usemap="#locks" style="border-width: 0px" /> | |
| 235 | <map name="locks" id="locks"> | |
| 236 | <area shape="circle" coords="52,52,43" href="history.htm" alt="history" /> | |
| 237 | <area shape="circle" coords="155,52,43" href="enigma.htm" alt="enigma"/> | |
| 238 | <area shape="circle" coords="255,52,43" href="algo.htm" alt="algorithms" /> | |
| 239 | <area shape="circle" coords="355,52,43" href="single.htm" alt="Single Key"/> | |
| 240 | <area shape="circle" coords="455,52,43" href="public.htm" alt="Public Key" /> | |
| 241 | </map> | |
| 242 | </p> | |
| 243 | ||
| 244 | ||
| 245 | </body> | |
| 246 | </html> | |
| 247 | ||
| 248 | Tutorial 3 Case 3 | |
| 249 | ||
| 250 | <html> | |
| 251 | <head> | |
| 252 | <!-- | |
| 253 | New Perspectives on HTML and XHTML 5th Edition | |
| 254 | Tutorial 3 | |
| 255 | Case Problem 2 | |
| 256 | ||
| 257 | Bike the Mountains Tour | |
| 258 | Author: Max Haddad | |
| 259 | Date: 29 April 2010 | |
| 260 | ||
| 261 | Filename: bmtour.htm | |
| 262 | Supporting files: body.jpg, block.jpg, h1back.jpg, h1title.gif, wheels.css | |
| 263 | --> | |
| 264 | ||
| 265 | <title>Bike the Mountains Tour</title> | |
| 266 | ||
| 267 | <link href="wheels.css" rel="stylesheet" type="text/css" /> | |
| 268 | ||
| 269 | ||
| 270 | </head> | |
| 271 | ||
| 272 | <body> | |
| 273 | <h1><img src="h1title.gif" /></h1> | |
| 274 | <div id="column1"> | |
| 275 | <a href="#">Home</a> | |
| 276 | <a href="#">Learn More</a> | |
| 277 | <a href="#">Testimonials</a> | |
| 278 | <a href="#">Route Maps</a> | |
| 279 | <a href="#">Register</a> | |
| 280 | <a href="#">Lodging</a> | |
| 281 | <a href="#">Meals</a> | |
| 282 | <a href="#">Training</a> | |
| 283 | <a href="#">Equipment</a> | |
| 284 | <a href="#">Forums</a> | |
| 285 | <a href="#">FAQs</a> | |
| 286 | <a href="#">Contact Us</a> | |
| 287 | </div> | |
| 288 | ||
| 289 | <div id="column2"> | |
| 290 | <h2>Introduction</h2> | |
| 291 | <p>The Bike the Mountains Tour rises from the town of Littleton, Colorado and | |
| 292 | explores the Colorado Front Range. Our tour crosses the Continental Divide | |
| 293 | twice, giving you the opportunity to bike the highest paved roads in the | |
| 294 | United States. This tour is a classic showcase of Colorado's Rocky Mountain | |
| 295 | scenery.</p> | |
| 296 | <blockquote> | |
| 297 | "The Bike the Mountains Tour is <i>amazing</i>. I highly recommend it | |
| 298 | and would gladly return." | |
| 299 | </blockquote> | |
| 300 | <p>Not designed for the weekend cyclist, this tour is offered only for those | |
| 301 | fit enough to ride high mountain passes. We provide sag wagons and | |
| 302 | support. Your lodging and meals are also part of the registration fee. | |
| 303 | We guarantee tough climbs, amazing sights, sweaty jerseys, and lots | |
| 304 | of fun.</p> | |
| 305 | <p>This is the seventh year we've offered the Bike the Mountains Tour. It is | |
| 306 | our most popular tour and riders are returning again and again. Our experienced | |
| 307 | tour leaders will be there to guide, help, encourage, draft, and lead you | |
| 308 | every stroke of the way. Come join us!</p> | |
| 309 | <h2>Itinerary</h2> | |
| 310 | <h3>Day 1</h3> | |
| 311 | <p>We start from the foothills above Littleton, Colorado, promptly at 9am. Be sure | |
| 312 | to fuel up at Kate's House of Pancakes before starting your ride. The first | |
| 313 | day is a chance to get your legs in shape, test your gearing, and prepare for | |
| 314 | what's to come. Be aware that there are several steep grades as we climb out of | |
| 315 | the valley into the Front Range. Optional side tours and shortcuts will be | |
| 316 | provided.</p> | |
| 317 | <h3>Day 2</h3> | |
| 318 | <p>Day 2 starts with a climb up Bear Creek Canyon to Lookout Mountain, followed | |
| 319 | by a swift and winding descent into the town of Golden. Refresh yourself at the | |
| 320 | famous Coors Brewery. You'll need the break to get yourself ready for a great | |
| 321 | climb through Golden Gate Canyon to the Peak to Peak Highway, ending in the | |
| 322 | gambling town of Blackhawk. Try your hand at poker and blackjack, but watch | |
| 323 | your wallet.</p> | |
| 324 | </div> | |
| 325 | <div id="column3"> | |
| 326 | <h3>Day 3</h3> | |
| 327 | <p>Day 3 takes you along the Peak to Peak Highway. Established in 1918 this is | |
| 328 | Colorado's oldest scenic byway. This 55-mile route showcases the mountains | |
| 329 | of the Front Range, providing amazing vistas from Golden Gate Canyon State Park | |
| 330 | to Rocky Mountain National Park. We'll stop at Estes Park for fun and | |
| 331 | refreshment. Get a good night's sleep; you'll need it the next day.</p> | |
| 332 | <h3>Day 4</h3> | |
| 333 | <p>Now for the supreme challenge: Day 4 brings some real high-altitude cycling | |
| 334 | through Rocky Mountain National Park and up Trail Ridge Road. It's an | |
| 335 | amazing ride, high above timberline, topping out at over 11,000 feet. Stop and | |
| 336 | rest at the Alpine Visitor's Center before all of that hard work is rewarded | |
| 337 | with a fast and joyous descent into the town of Grand Lake.</p> | |
| 338 | <h3>Day 5</h3> | |
| 339 | <p>We start Day 5 on the west side of the Continental Divide. From Grand Lake, | |
| 340 | you'll bike to Winter Park, a great ski town summer resort. From Winter Park it's | |
| 341 | a steady and scenic climb over Berthoud Pass, and back to the eastern side of | |
| 342 | the Continental Divide. We'll stay at Idaho Springs, where you can enjoy the | |
| 343 | natural hot springs at the hotel.</p> | |
| 344 | <h3>Day 6</h3> | |
| 345 | <p>On Day 6 choose your pleasure or your poison. You can ride back to Littleton | |
| 346 | over Squaw Pass and Bear Creek. The ride is beautiful and enjoyable in its | |
| 347 | own right. However, if you're "up" to it, this is your opportunity to tackle | |
| 348 | Mount Evans. The 7-mile side trip to the top of Mt Evans, at over 14,000 feet, | |
| 349 | is something that can't be found anywhere else in the country. We'll provide | |
| 350 | the sag wagon, you provide the legs and lungs.</p> | |
| 351 | <p>Once you're back to Littleton, please join us for a celebratory dinner | |
| 352 | as we share memories of an amazing 6 days of riding the Colorado mountains.</p> | |
| 353 | </div> | |
| 354 | ||
| 355 | <address> | |
| 356 | Bike the Mountains Tour • | |
| 357 | Littleton, CO 80123 • | |
| 358 | (303) 555 - 5499 | |
| 359 | </address> | |
| 360 | ||
| 361 | ||
| 362 | </body> | |
| 363 | </html> | |
| 364 | ||
| 365 | Tutorial 3 Case 2 CSS | |
| 366 | ||
| 367 | /* | |
| 368 | New Perspectives on HTML and XHTML 5th Edition | |
| 369 | Tutorial 3 | |
| 370 | Case Problem 2 | |
| 371 | ||
| 372 | Mountain Wheels Style Sheet | |
| 373 | Author: Max Haddad | |
| 374 | Date: 29 April 2010 | |
| 375 | ||
| 376 | Filename: wheel.css | |
| 377 | Supporting Files: body.jpg, block.jpg, h1back.jpg | |
| 378 | ||
| 379 | */ | |
| 380 | ||
| 381 | ||
| 382 | body {font-family: verdana, helvetica;
| |
| 383 | margin: 0px 0px 0px 0px; | |
| 384 | background-color: white; | |
| 385 | background-image: url(body.jpg); | |
| 386 | background-repeat: repeat-y; | |
| 387 | } | |
| 388 | ||
| 389 | #column1 {float: left;
| |
| 390 | width: 140px; | |
| 391 | padding-left: 10px; | |
| 392 | padding-right: 20px | |
| 393 | } | |
| 394 | ||
| 395 | #column2 {width: 40%;
| |
| 396 | float: left; | |
| 397 | border-left: 1px solid black; | |
| 398 | border-right: 1px solid black | |
| 399 | } | |
| 400 | ||
| 401 | h1 { | |
| 402 |
