Want more features on Pastebin? Sign Up, it's FREE!
Guest

HTML CSS Tutorial 10 Case 1 Skymap.htm

By: a guest on May 20th, 2012  |  syntax: HTML  |  size: 2.61 KB  |  views: 1,429  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5.  
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head>
  8. <!--
  9.   New Perspectives on HTML and XHTML 5th Edition
  10.   Tutorial 10
  11.   Case Problem 1
  12.  
  13.   SkyWeb Planisphere
  14.   Author:
  15.   Date:   May 20, 2012
  16.  
  17.   Filename:         skymap.htm
  18.   Supporting files: datetime.js, mask.gif, sky0.jpg - sky23.jpg, skyweb.css,
  19. -->
  20. <title>SkyWeb: The Planisphere</title>
  21. <link href="skyweb.css" rel="stylesheet" type="text/css" />
  22.         <script type="text/javascript" src="datetime.js"></script>
  23.         <script type="text/javascript">
  24.         /* timeStr is a text string containing the current date and time
  25.         mapNum is the number of the map to display in the planisphere*/
  26.         {var timeStr = showDateTime();
  27.         var mapNum = getMap();}
  28.         </script>
  29. </head>
  30. <body>
  31. <p id="logo">
  32. <img src="skyweb.jpg" alt="SkyWeb" />
  33. </p>
  34.  
  35. <div id="maps">
  36.         <script type="text/javascript">
  37.         document.write("<img id='sky' src='sky"+mapNum+".jpg' alt='' />");
  38.         </script>
  39.        
  40. <img id="mask" src="mask.gif" alt="" />
  41. <div id="datetime">
  42.    <script type="text/javascript">
  43.    document.write(timeStr);
  44.    </script>
  45. </div>
  46. </div>
  47. <div id="content">
  48. <h1>The Planisphere</h1>
  49. <p>A <b>planisphere</b> is a visual aid to astronomers and stargazers.
  50. It consists of two disks: one displays all of the visible constellations
  51. in the night sky, and the other covers the first and contains a window that indicates
  52. the portion of the sky currently visible. The second disk is then rotated to match the
  53. current date and time. Planispheres come in a variety of sizes and types. The important thing
  54. to remember is that you must have a planisphere that matches the longitude of your stargazing
  55. location.</p>
  56. <p>At the left is an online planisphere. It consists of two images. The bottom image contains
  57. the sky map; the top image contains the viewing window. Rather than turning the viewing
  58. window, this planisphere is automatically rotated for you, displaying the current date and time
  59. and visible constellations for observers at a longitude of 40<sup>&deg;</sup> North.
  60. To update the planisphere you can click the <span class="button">Refresh</span>
  61. or <span class="button">Reload</span> button on your browser. The planisphere will change,
  62. representing the nighttime sky to the nearest hour.</p>
  63. </div>
  64.  
  65. <div id="links">
  66. | <a href="#">Home Page</a>
  67. | <a href="#">The Night Sky</a>
  68. | <a href="#">The Moon</a>
  69. | <a href="#">The Planets</a>
  70. | <a href="#">The Messier Objects</a>
  71. | <a href="#">Stars</a> |
  72. </div>
  73. </body>
  74. </html>
clone this paste RAW Paste Data