D3 Examples - M1 - Your first Web page // source http://jsbin.com/yosoqeq

xxxxxxxxxx
 
<!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>
    