Saturday, 22 April 2017

html final







//Index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Solar system</title>
    <!--source:http://www.space.com/56-our-solar-system-facts-formation-and-discovery.html
        https://cl.castlelearning.com/Review/CLO/Reference/earth25.htm-->
    <style>
        #nav_list ul {
            list-style-type: none;
            margin-bottom: 30px;  
            padding:0;
        }

        #nav_list li {
            margin-bottom: 10px;
            margin-left: 10px;
        }

        #nav_list a {
            background-color: black;
            border: 2px dotted yellow;
        }

            #nav_list a:link {
                color: gold;
                text-decoration: none;
            }

            #nav_list a:visited {
                color: gold;
                text-decoration: none;
            }

            #nav_list a:hover {
                color: #ffff00;
                text-decoration: none;
            }

            #nav_list a:active {
                color: #ffff00;
                font-size: 110%;
            }
    </style>
</head>

<body style="width:screen.width; height:screen.height; background-image:url('image/Solar-System1.jpg'); background-repeat:repeat-y; background-size:100%;">
    <div id="wrapper" style="margin:0 auto">
        <header style="height:10%; color:gold;text-align:center;">
            <h1>Solar System</h1>
        </header>
        <hr />
        <nav id="nav_list" style="width:20%;float:left;">
            <h2 style="color:gold"><a href="Index.html">Solar System</a></h2>
            <ul>
                <li>
                    <h3 style="color:gold">Star</h3>
                    <ul>
                        <li>
                            <a href="Sun.html">Sun</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <h3 style="color:gold">Planets</h3>
                    <ul>
                        <li>
                            <a href="Mercury.html">Mercury</a>
                        </li>
                        <li>
                            <a href="Venus.html">Venus</a>
                        </li>
                        <li>
                            <a href="Earth.html">Earth</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <h2 style="color:gold"><a href="Quiz.html">Quiz</a></h2>
            <h2 style="color:gold"><a href="Answer.html">Answer</a></h2>
        </nav>
        <main style="color:gold;">
            <fieldset style="background-color:black;  font-family:Comic Sans MS, cursive, sans-serif">
                <h2>What Is The Solar System?</h2>
                <p>
                    The solar system is made up of the sun and everything that orbits around it,
                    including planets, moons, asteroids, comets and meteoroids. It extends from the sun,
                    called Sol by the ancient Romans, and goes past the four inner planets,
                    through the Asteroid Belt to the four gas giants and on to the disk-shaped Kuiper Belt and far beyond to the giant,
                    spherical Oort Cloud and the teardrop-shaped heliopause.
                    Scientists estimate that the edge of the solar system is about 9 billion miles (15 billion kilometers) from the sun.
                </p>
                <br />
                <h2>Inner solar system</h2>
                <p>
                    The four inner four planets — Mercury, Venus, Earth and Mars — are made up mostly of iron and rock.
                    They are known as terrestrial or earthlike planets because of their similar size and composition.
                    Earth has one natural satellite — the moon— and Mars has two moons — Deimos and Phobos.
                </p>
                <p>
                    Between Mars and Jupiter lies the Asteroid Belt.
                    Asteroids are minor planets,
                    and scientists estimate there are more than 750,000 of them with diameters larger than three-fifths of a mile (1 km) and millions of smaller asteroids.
                    The dwarf planet Ceres, about 590 miles (950 km) in diameter, resides here.
                    A number of asteroids have orbits that take them closer into the solar system that sometimes lead them to collide with Earth or the other inner planets.
                </p>
                <br />
                <h2>Outer solar system</h2>
                <p>
                    The outer planets — Jupiter, Saturn, Uranus and Neptune — are giant worlds with thick outer layers of gas.
                    Nearly all their mass is made up of hydrogen and helium,
                    giving them compositions like that of the sun. Beneath these outer layers,
                    they have no solid surfaces — the pressure from their thick atmospheres liquefy their insides,
                    although they might have rocky cores. Rings of dust, rock, and ice encircle all these giants,
                    with Saturn's being the most famous.
                </p>
                <p>
                    Comets are often known as dirty snowballs, and consist mainly of ice and rock.
                    When a comet's orbit takes it close to the sun,
                    some of the ice in its central nucleus turns into gas that shoots out of the comet's sunlit side,
                    which the solar wind carries outward to form into a long tail.
                    Short-period comets that complete their orbits in less than 200 years are thought to originate from the disk-shaped Kuiper Belt,
                    while long-period comets that take more than 200 years to return are thought to come from the spherical Oort Cloud.
                </p>
                <br/>
                <h2>Solar System Data</h2>
                <table border="1" style="color:gold">
                    <thead>
                        <tr>
                            <th>Celestial Object</th>
                            <th>Mean Distance from Sun (million km)</th>
                            <th>Period of Revolution (d=days) (y=years)</th>
                            <th>Period of Rotation at Equator</th>
                            <th>Equatorial Diameter (km)</th>
                            <th>Mass (Earth=1)</th>
                            <th>Density (g/cm<sup>3</sup>)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>SUN</td>
                            <td>--</td>
                            <td>--</td>
                            <td>27d</td>
                            <td>1,392,000</td>
                            <td>333,000</td>
                            <td>1.4</td>
                        </tr>
                        <tr>
                            <td>MERCURY</td>
                            <td>57.9</td>
                            <td>88d</td>
                            <td>59d</td>
                            <td>4,879</td>
                            <td>0.06</td>
                            <td>5.4</td>
                        </tr>
                        <tr>
                            <td>VENUS</td>
                            <td>108.2</td>
                            <td>224.7d</td>
                            <td>243d</td>
                            <td>12,104</td>
                            <td>0.82</td>
                            <td>5.2</td>
                        </tr>
                        <tr>
                            <td>Earth</td>
                            <td>149.6</td>
                            <td>365.26d</td>
                            <td>23h 56min 4s</td>
                            <td>12,756</td>
                            <td>1.00</td>
                            <td>5.5</td>
                        </tr>
                        <tr>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                        </tr>
                    </tbody>
                </table>
            </fieldset>
        </main>
        <footer style="color:gold;clear:both">
            <h4>Thanks for visiting, click image blow to learn more on wikipedia</h4>
            <a href="https://en.wikipedia.org/wiki/Solar_System">
                <img src="image/learn_moer1.jpg" alt="learn_more"/>
            </a>
        </footer>
    </div>
</body>
</html>

-------------------------------------------------------------------------------------

//Answer.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Answer</title>
    <!--source:http://www.space.com/56-our-solar-system-facts-formation-and-discovery.html
        https://cl.castlelearning.com/Review/CLO/Reference/earth25.htm
        http://study.com/academy/lesson/stages-of-the-suns-life-cycle.html
        http://www.space.com/63-inside-planet-mercury-infographic.html-->
    <style>
        #nav_list ul {
            list-style-type: none;
            margin-bottom: 30px;
            padding: 0;
        }

        #nav_list li {
            margin-bottom: 10px;
            margin-left: 10px;
        }

        #nav_list a {
            background-color: black;
            border: 2px dotted yellow;
        }

            #nav_list a:link {
                color: gold;
                text-decoration: none;
            }

            #nav_list a:visited {
                color: gold;
                text-decoration: none;
            }

            #nav_list a:hover {
                color: #ffff00;
                text-decoration: none;
            }

            #nav_list a:active {
                color: #ffff00;
                font-size: 110%;
            }
    </style>
</head>

<body style="width:screen.width; height:screen.height; background-image:url('image/Solar-System1.jpg'); background-repeat:repeat-y; background-size:100%;">
    <div id="wrapper">
        <header style="height:10%; color:gold;text-align:center;">
            <h1>Solar System</h1>
        </header>
        <hr />
        <nav id="nav_list" style="width:20%;float:left;">
            <h2 style="color:gold"><a href="Index.html">Solar System</a></h2>
            <ul>
                <li>
                    <h3 style="color:gold">Star</h3>
                    <ul>
                        <li>
                            <a href="Sun.html">Sun</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <h3 style="color:gold">Planets</h3>
                    <ul>
                        <li>
                            <a href="Mercury.html">Mercury</a>
                        </li>
                        <li>
                            <a href="Venus.html">Venus</a>
                        </li>
                        <li>
                            <a href="Earth.html">Earth</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <h2 style="color:gold"><a href="Quiz.html">Quiz</a></h2>
            <h2 style="color:gold"><a href="Answer.html">Answer</a></h2>
        </nav>
        <main style="color:gold;">
            <fieldset style="background-color:black; font-family:Comic Sans MS, cursive, sans-serif">
                <form action="Index.html" method="get">
                    <h2>Answers</h2>
                    <fieldset>
                        <legend>How many planets are there is solar system?</legend>
                        <input type="radio" name="a1" id="a1-1" value="1" />7<br />
                        <input type="radio" name="a1" id="a1-2" value="2" checked="checked"/>8<br />
                        <input type="radio" name="a1" id="a1-3" value="3" />9<br />
                        <input type="radio" name="a1" id="a1-4" value="4" />10<br />
                    </fieldset>
                    <fieldset>
                        <legend>Which planets belong to inner solar system?</legend>
                        <input type="checkbox" name="a2-1" id="a2-1" value="T" checked="checked"/> Mercury<br />
                        <input type="checkbox" name="a2-2" id="a2-2" value="T" checked="checked"/> Venus<br />
                        <input type="checkbox" name="a2-3" id="a2-3" value="T" /> Jupiter<br />
                        <input type="checkbox" name="a2-4" id="a2-4" value="T" /> Neptune<br />
                    </fieldset>
                    <fieldset>
                        <legend>What are the name of the 2 planets closest to earth?</legend>
                        <input type="text" name="a3-1" id="a3-1" placeholder="Venus"/>&nbsp;and&nbsp;<input type="text" name="a3-2" id="a3-2" placeholder="Mars"/>
                    </fieldset>
                    <fieldset>
                        <legend>Which planet is the biggest in solar system?</legend>
                        <select name="a4" id="a4" required="required">
                            <option value="">please choose one</option>
                            <option value="a4-1">Earth</option>
                            <option value="a4-2">Saturn</option>
                            <option value="a4-3" selected="selected">Jupiter</option>
                            <option value="a4-4">Neptune</option>
                        </select>
                    </fieldset>
                    <input type="submit" value="Back" />
                    <!--<input type="reset" value="Reset" />-->
                </form>
            </fieldset>
        </main>
        <footer style="color:gold;clear:both">
            <h4>Thanks for visiting, click image blow to learn more on wikipedia</h4>
            <a href="https://en.wikipedia.org/wiki/Solar_System">
                <img src="image/learn_moer1.jpg" alt="learn_more" />
            </a>
        </footer>
    </div>
</body>
</html>

------------------------------------------------------------------

//Sun.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Sun</title>
    <!--source:http://www.space.com/56-our-solar-system-facts-formation-and-discovery.html
        https://cl.castlelearning.com/Review/CLO/Reference/earth25.htm
        http://study.com/academy/lesson/stages-of-the-suns-life-cycle.html-->
    <style>
        #nav_list ul {
            list-style-type: none;
            margin-bottom: 30px;
            padding: 0;
        }

        #nav_list li {
            margin-bottom: 10px;
            margin-left: 10px;
        }

        #nav_list a {
            background-color: black;
            border: 2px dotted yellow;
        }

            #nav_list a:link {
                color: gold;
                text-decoration: none;
            }

            #nav_list a:visited {
                color: gold;
                text-decoration: none;
            }

            #nav_list a:hover {
                color: #ffff00;
                text-decoration: none;
            }

            #nav_list a:active {
                color: #ffff00;
                font-size: 110%;
            }
    </style>
</head>

<body style="width:screen.width; height:screen.height; background-image:url('image/Solar-System1.jpg'); background-repeat:repeat-y; background-size:100%;">
    <div id="wrapper">
        <header style="height:10%; color:gold;text-align:center;">
            <h1>Solar System</h1>
        </header>
        <hr />
        <nav id="nav_list" style="width:20%;float:left;">
            <h2 style="color:gold"><a href="Index.html">Solar System</a></h2>
            <ul>
                <li>
                    <h3 style="color:gold">Star</h3>
                    <ul>
                        <li>
                            <a href="Sun.html">Sun</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <h3 style="color:gold">Planets</h3>
                    <ul>
                        <li>
                            <a href="Mercury.html">Mercury</a>
                        </li>
                        <li>
                            <a href="Venus.html">Venus</a>
                        </li>
                        <li>
                            <a href="Earth.html">Earth</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <h2 style="color:gold"><a href="Quiz.html">Quiz</a></h2>
            <h2 style="color:gold"><a href="Answer.html">Answer</a></h2>
        </nav>
        <main style="color:gold;">
            <fieldset style="background-color:black; font-family:Comic Sans MS, cursive, sans-serif">
                <img src="image/Sun_poster.jpg" alt="Sun" style="width:100%" />
                <h2>Anatomy of the Sun</h2>
                <p>
                    The sun is essentially a huge burning ball of gas in the sky only 100 million or so miles from Earth.
                    The majority of gas in the sun is hydrogen and helium,
                    and it is so hot that all of these elements exist in the gaseous state.
                    The gas is held together by gravity, which creates intense heat and pressure in the core.
                    The sun has an interior consisting of the core, radiative zone, and convective zone.
                    It has a visible surface called the photosphere, then the chromosphere, which usually isn't visible,
                    and the very outer layer called the corona.
                </p>
            </fieldset>
        </main>
        <footer style="color:gold;clear:both">
            <h4>Thanks for visiting, click image blow to learn more on wikipedia</h4>
            <a href="https://en.wikipedia.org/wiki/Solar_System">
                <img src="image/learn_moer1.jpg" alt="learn_more" />
            </a>
        </footer>
    </div>
</body>
</html>

No comments:

Post a Comment