Embedding image in raw html

An example for adding images to html for books

by clayshannon

HTML

<h1>The Adventures of Huckleberry Finn</h1>

<aside style="margin:4px;padding:4px;border:1px solid forestgreen;">Annotated, with <span id="huck">C</span><span id="tom">o</span><span id="jim">l</span><span id="watson">o</span><span id="duke">r</span><span id="dauphin">i</span><span id="sally">z</span><span id="others">e</span><span id="pap">d</span> Dialogue</aside>

<h3>Scene:  The Mississippi Valley Time:  Forty to fifty years ago</h3>

<aside style="margin:4px;padding:4px;border:1px solid forestgreen;">That is to say, "forty to fifty years ago" at the time Twain wrote it, which was in the 1880s; in other words, the time period covered in "Huck Finn" is the 1830s and 1840s, between the War of 1812 and the Civil War.</aside>

<p id="chapter">Explanatory</p>
<p>IN this book a number of dialects are used, to wit: the Missouri negro dialect; the extremest form of the backwoods Southwestern dialect; the ordinary "Pike County" dialect; and four modified varieties of this last. The shadings have not been done in a haphazard fashion, or by guesswork; but painstakingly, and with the trustworthy guidance and support of personal familiarity with these several forms of speech.</p>
<p>I make this explanation for the reason that without it many readers would suppose that all these characters were trying to talk alike and not succeeding.</p>
<p>THE AUTHOR.</p>
<aside style="margin:4px;padding:4px;border:1px solid forestgreen;">Interestingly, although "Huckleberry" is a very odd name for a person, huckleberries (which are similar to blueberries) grew abundantly in two places Twain was very familiar with: Hannibal, Missouri (Twain's boyhood home and the scene of both "The Adventures of Tom Sawyer" and much of this book) and Hartford, Connecticut, where Twain lived much of his adult life. Although I am going with purple here to represent Huck's speech, huckleberries can also be red or blue.</aside>

<h2>Dialog Colorization Scheme</h2>

<p>This is Huckleberry Finn as the...

CSS

body {
    font-family:"Segoe UI", "Bookman Old Style", "Candara", "Calibri", "Consolas", sans-serif;
    font-size: 1.2em;
    background-color: black;
    color: white;
}
h1 {
    font-family:"Calibri", "Consolas", sans-serif;
    color: white;
}
h2 {
    font-family:"Courier", "Consolas", sans-serif;
    color: cornsilk;
}
h3 {
    font-family:"Segoe UI", "Consolas", sans-serif;
    color: azure;
}
table {
    background-color: cornsilk;
}
aside {
    color: cornsilk;
    font-family:'Bookman Old School', Candara, Calibri, sans-serif;
}
aside p:last-child {
    margin-bottom:0;
}
#chapter {
    font-size: 2em;
    color: gold;
    font-family:"Consolas";
}
#huck {
    color: violet;
}
#jim {
    color: skyblue;
}
#pap {
    color: brown;
}
#duke {
    color: lime;
}
#dauphin {
    color: orange;
}
#tom {
    color: chocolate;
}
#widow {
    color: crimson;
}
#watson {
    color: yellow;
}
#sally {
    color: pink;
}
#others {
    color: olive;
}
#annotation {
    margin:4px;
    padding:4px;
    border:1px color: green;
}