06_lesson/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="Dave Gray">
    <meta name="description" content="This page contains all the things I am learning how to create as I learn HTML.">
    <title>My First Web Page</title>
    <link rel="icon" href="html5.png" type="image/x-icon">
    <link rel="stylesheet" href="main.css" type="text/css">
</head>

<body>
    <h1>My Goals for the Year</h1>

    <hr>

    <nav>
        <ul>
            <li>
                <a href="#html">Learning HTML</a>
            </li>
            <li>
                <a href="#vacation">Planning a Vacation</a>
            </li>
        </ul>
    </nav>

    <hr>

    <section id="html">
        <h2>I'm Ready to Learn HTML</h2>
        <p>This is my first web page.</p>
        <img src="img/html_logo_300x300.png" alt="HTML5 Logo" title="I am learning HTML5" width="300" height="300">
        <figure>
            <figcaption>An Example of HTML5 code</figcaption>
            <p>
                <code>&lt;h1&gt;Hello World!&lt;/h1&gt;</code>
            </p>
        </figure>
        <h3>My Daily Schedule</h3>
        <p>Let me tell you how:</p>
        <ol>
            <li>...I learn more about web dev.</li>
            <li>...I plan out my schedule.</li>
            <li>...I use resources from <abbr title="Mozilla Developer Network">
                    <a href="https://developer.mozilla.org/">MDN</a>
                </abbr>.</li>
        </ol>
    </section>

    <hr>

    <section id="vacation">
        <h2>I Am Also Planning a Vacation</h2>
        <p>I've been working hard and <em>really need a getaway</em>.</p>
        <p>I live in <abbr title="Kansas">KS</abbr> so I want visit a beach.</p>

        <h3>Places I'd Like to Visit</h3>
        <ul>
            <li>
                <p>I've heard good things about the Caribbean.</p>
                <figure>
                    <img src="img/caribbean.jpg" alt="Caribbean Beach" title="I want to visit a Caribbean beach."
                        width="400" height="225" loading="lazy">
                    <figcaption>
                        Caribbean Beach Getaway
                    </figcaption>
                </figure>
            </li>
            <li>
                <p>I've heard good things about going here:</p>
                <address>
                    Margaritaville Island Reserve Riviera Cancún<br>
                    Bahia Petempich Puerto Morelos, Mexico<br>
                    Colonia Morelos, México 77580
                </address>
                <figure>
                    <img src="img/vacation.jpg" alt="Cancun Vacation" title="It's 5 o'Clock Somewhere!" width="400"
                        height="267" loading="lazy">
                    <figcaption>
                        A Caribbean Vacation Image
                    </figcaption>
                </figure>
            </li>
        </ul>
        <!-- TODO: Add more places -->
        <h3>Places I Want to Avoid</h3>
        <dl>
            <dt>North Pole</dt>
            <dd>I hear this is <strong>cold</strong>!</dd>

            <dt>South Pole</dt>
            <dd>This is also cold.</dd>

            <dt>Mountain Tops</dt>
            <dd>These are also cold.</dd>
        </dl>
    </section>

    <hr>
    &lt;&lt;&lt; &copy; <a href="about.html">Dave Gray</a> &gt;&gt;&gt;
    <p>
        <a href="#">Back to Top</a>
    </p>
</body>

</html>