<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<!--
    by: Sharon Tuttle
    last modified: 2024-01-30

    you can run this using the URL:
    
    https://nrs-projects.humboldt.edu/~st10/s24cs328/328lect03-1/328lect03-1-play.html
-->

<head>
    <title> 328lect03-1-play </title>
    <meta charset="utf-8" />
</head>

<body>
    <h1>Playing with Some HTML Elements</h1>

    <p> A paragraph is a block element, containing paragraphs of content.
        It might span multiple lines, it might not. </p>

    <p> Now for an example including an <code>img</code> element: </p>

    <!-- note that img is an inline element,
         so it should be within an appropriate block element... -->

    <p> <img src="Tux.svg" alt="a Linux penguin" /><br />
      Tux, originally drawn as a raster image by Larry Ewing in 1996 (source:
      Wikipedia, <a href="https://en.wikipedia.org/wiki/Tux_(mascot)">
      https://en.wikipedia.org/wiki/Tux_(mascot)</a>)</p>

    <p> Here are some examples of special characters: </p>
    <ul>
        <li> A less-than character: &lt; </li>
	<li> A greater-than character: &gt; </li>
	<li> An ampersand character: &amp; </li>
	<li> An interrobang: &#8253; </li>
    </ul>

    <p> Example using pre and code elements for content representing
        a fragment of C++ code: </p>

    <pre><code>
        int count = 0;

        while (count &lt; 10)
        {
            cout &lt;&lt; "Look: " &lt;&lt; count &lt;&lt; endl;
	    count++;
        }
    </code></pre>

    <p> Consider: <em>This is emphasized</em>.
        As compared to: <strong>This is strongly emphasized</strong>. </p>

    <!-- example of a horizontal rule, a horizontal line separating sections -->

    <hr />

    <h2> Additional resources mentioned during class </h2>

    <p> A well-stated rationale for writing semantic HTML can be found in
        <a href="https://html.spec.whatwg.org/#semantics-2">Section 3.2.1 of the
	HTML standard</a>. </p>

    <p> You can read more about block and inline elements at
        <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements">
	https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements</a> and
	<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements">
	https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements</a>. </p>

    <footer>
    <hr />
    <p>
        Validate by pasting .xhtml copy's URL into<br />
        <a href="https://html5.validator.nu/">
            https://html5.validator.nu/
        </a>
    </p>
    </footer>
</body>
</html>