HTML CSS Tutorial 10 Case 1 Skymap.htm

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
   New Perspectives on HTML and XHTML 5th Edition
   Tutorial 10
   Case Problem 1

   SkyWeb Planisphere
   Author:
   Date:   May 20, 2012

   Filename:         skymap.htm
   Supporting files: datetime.js, mask.gif, sky0.jpg - sky23.jpg, skyweb.css,
-->
<title>SkyWeb: The Planisphere</title>
<link href="skyweb.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="datetime.js"></script>
    <script type="text/javascript">
    /* timeStr is a text string containing the current date and time
    mapNum is the number of the map to display in the planisphere*/
    {var timeStr = showDateTime();
    var mapNum = getMap();}
    </script>
</head>
<body>
<p id="logo">
<img src="skyweb.jpg" alt="SkyWeb" />
</p>

<div id="maps">
    <script type="text/javascript">
    document.write("<img id='sky' src='sky"+mapNum+".jpg' alt='' />");
    </script>

<img id="mask" src="mask.gif" alt="" />
<div id="datetime">
   <script type="text/javascript">
   document.write(timeStr);
   </script>
</div>
</div>
<div id="content">
<h1>The Planisphere</h1>
<p>A <b>planisphere</b> is a visual aid to astronomers and stargazers.
It consists of two disks: one displays all of the visible constellations
in the night sky, and the other covers the first and contains a window that indicates
the portion of the sky currently visible. The second disk is then rotated to match the
current date and time. Planispheres come in a variety of sizes and types. The important thing
to remember is that you must have a planisphere that matches the longitude of your stargazing
location.</p>
<p>At the left is an online planisphere. It consists of two images. The bottom image contains
the sky map; the top image contains the viewing window. Rather than turning the viewing
window, this planisphere is automatically rotated for you, displaying the current date and time
and visible constellations for observers at a longitude of 40<sup>&deg;</sup> North.
To update the planisphere you can click the <span class="button">Refresh</span>
or <span class="button">Reload</span> button on your browser. The planisphere will change,
representing the nighttime sky to the nearest hour.</p>
</div>

<div id="links">
| <a href="#">Home Page</a>
| <a href="#">The Night Sky</a>
| <a href="#">The Moon</a>
| <a href="#">The Planets</a>
| <a href="#">The Messier Objects</a>
| <a href="#">Stars</a> |
</div>
</body>
</html>