rvalerob/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>M1 - Your first Web page</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  <style id="jsbin-css">
/* Styles for M1 - my first web page */


body {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    border-bottom: solid #000;
    border-top: solid #000;
}

code {
    font-family: monospace;
    color: darkred;
}

pre {
    display: block;
    background-color: lightgrey;
    white-space: pre;
    margin: 1em 2em;
}

.poem {
    font-style: oblique;
}

dl {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
}

dt {
    font-weight: 600;
    font-family: sans-serif;
}

dt, dl {
    margin-left: 1em;
}

dd {
    font-family: monospace;
}
</style>
</head>

<body>
    <h1>Activities for "Your first Web page"</h1>

    <ol>
        <li>Quote some poetry, preserving the "line oriented" format</li>
        <li>Find a word that has at least 3 different definitions</li>
        <li>Try out some different tags to see the effect they have on your Web page</li>
    </ol>

<h2>A poem</h2>
    <h3>Song Of Autumn In The Springtime by <cite>Rubén Darío</cite> (excerpt)</h3>

    <p class="poem">Youth, treasure only gods may keep,<br>
    Fleeting from me forever now!<br>
    I cannot, when I wish to, weep,<br>
    And often cry I know not how…</p>

    <a href="https://www.poemhunter.com/poem/cancion-de-oto-o-en-primavera-song-of-autumn-in-the-springtime/" target=_blank>Read the whole poem!</a>

<h2>Polysemy</h2>
    <p>This is the code used to create the list of definitions for the word bat. I inserted an ordered list inside a list of term and definition(s) using the &lt;dl&gt;&nbsp;(description list), &lt;dt&gt;&nbsp;(definition term) and &lt;dd&gt;&nbsp;(definition definition) tags.</p>

    <!-- Code used to create the description list below -->
    <code>
    <pre>
    &lt;dl&gt;
      &lt;dt&gt;Bat&lt;/dt&gt;
      &lt;dd&gt;&lt;ol&gt;
          &lt;li&gt;A specially shaped...&lt;/li&gt;
          &lt;li&gt;A small animal like ...&lt;/li&gt;
          &lt;li&gt;Vb To open and close...&lt;/li&gt;
         &lt;/ol&gt;
      &lt;/dd&gt;
    &lt;/dl&gt;
    </pre>
    </code>
    <!-- End of code -->

    <dl>
    <dt>Bat</dt>
        <dd>
            <ol>
                <li>A specially shaped piece of wood used for hitting the ball in some games.</li>
                <li>A small animal like a mouse with wings that flies at night.</li>
                <li>Vb To open and close your eyes quickly several times, especially to attract attention or admiration.</li>
            </ol>
        </dd>
    </dl>


<script id="jsbin-source-css" type="text/css">/* Styles for M1 - my first web page */


body {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    border-bottom: solid #000;
    border-top: solid #000;
}

code {
    font-family: monospace;
    color: darkred;
}

pre {
    display: block;
    background-color: lightgrey;
    white-space: pre;
    margin: 1em 2em;
}

.poem {
    font-style: oblique;
}

dl {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
}

dt {
    font-weight: 600;
    font-family: sans-serif;
}

dt, dl {
    margin-left: 1em;
}

dd {
    font-family: monospace;
}</script>
</body>
</html>

## jsbin.yosoqeq.css
/* Styles for M1 - my first web page */


body {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    border-bottom: solid #000;
    border-top: solid #000;
}

code {
    font-family: monospace;
    color: darkred;
}

pre {
    display: block;
    background-color: lightgrey;
    white-space: pre;
    margin: 1em 2em;
}

.poem {
    font-style: oblique;
}

dl {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
}

dt {
    font-weight: 600;
    font-family: sans-serif;
}

dt, dl {
    margin-left: 1em;
}

dd {
    font-family: monospace;
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>M1 - Your first Web page</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<style id="jsbin-css">
	/* Styles for M1 - my first web page */


	body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	}

	h1 {
	border-bottom: solid #000;
	border-top: solid #000;
	}

	code {
	font-family: monospace;
	color: darkred;
	}

	pre {
	display: block;
	background-color: lightgrey;
	white-space: pre;
	margin: 1em 2em;
	}

	.poem {
	font-style: oblique;
	}

	dl {
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	}

	dt {
	font-weight: 600;
	font-family: sans-serif;
	}

	dt, dl {
	margin-left: 1em;
	}

	dd {
	font-family: monospace;
	}
	</style>
	</head>

	<body>
	<h1>Activities for "Your first Web page"</h1>

	<ol>
	<li>Quote some poetry, preserving the "line oriented" format</li>
	<li>Find a word that has at least 3 different definitions</li>
	<li>Try out some different tags to see the effect they have on your Web page</li>
	</ol>

	<h2>A poem</h2>
	<h3>Song Of Autumn In The Springtime by <cite>Rubén Darío</cite> (excerpt)</h3>

	<p class="poem">Youth, treasure only gods may keep,<br>
	Fleeting from me forever now!<br>
	I cannot, when I wish to, weep,<br>
	And often cry I know not how…</p>

	<a href="https://www.poemhunter.com/poem/cancion-de-oto-o-en-primavera-song-of-autumn-in-the-springtime/" target=_blank>Read the whole poem!</a>

	<h2>Polysemy</h2>
	<p>This is the code used to create the list of definitions for the word bat. I inserted an ordered list inside a list of term and definition(s) using the <dl> (description list), <dt> (definition term) and <dd> (definition definition) tags.</p>

	<!-- Code used to create the description list below -->
	<code>
	<pre>
	<dl>
	<dt>Bat</dt>
	<dd><ol>
	<li>A specially shaped...</li>
	<li>A small animal like ...</li>
	<li>Vb To open and close...</li>
	</ol>
	</dd>
	</dl>
	</pre>
	</code>
	<!-- End of code -->

	<dl>
	<dt>Bat</dt>
	<dd>
	<ol>
	<li>A specially shaped piece of wood used for hitting the ball in some games.</li>
	<li>A small animal like a mouse with wings that flies at night.</li>
	<li>Vb To open and close your eyes quickly several times, especially to attract attention or admiration.</li>
	</ol>
	</dd>
	</dl>



	<script id="jsbin-source-css" type="text/css">/* Styles for M1 - my first web page */


	body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	}

	h1 {
	border-bottom: solid #000;
	border-top: solid #000;
	}

	code {
	font-family: monospace;
	color: darkred;
	}

	pre {
	display: block;
	background-color: lightgrey;
	white-space: pre;
	margin: 1em 2em;
	}

	.poem {
	font-style: oblique;
	}

	dl {
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	}

	dt {
	font-weight: 600;
	font-family: sans-serif;
	}

	dt, dl {
	margin-left: 1em;
	}

	dd {
	font-family: monospace;
	}</script>
	</body>
	</html>