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 class="huck">C</span><span class="tom">o</span><span class="jim">l</span><span class="watson">o</span><span class="duke">r</span><span class="dauphin">i</span><span class="sally">z</span><span class="others">e</span><span class="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. And so, it is set in the time of Twain's boyhood (he was born 1835 as Samuel L. Clemens) and in the place where he grew up (Hannibal, Missouri) which is dubbed "St. Petersburg" in this novel.</aside>
<p class="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...

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;
}
.judge {
    color: silver;
}
.buck {
    color: aqua;
}
.silas {
    color: greenyellow;
}
.maryjane {
    color: deeppink;
}
.sherburn {
    color: khaki;
}
.ben {
    color: lightgreen;
}
.boggs {
    color: aquamarine;
}
.harelip {
    color: coral;
}
.polly {
    color: hotpink;
}
.judith {
    color: palevioletred;
}
.others {
    color: olive;
}
.unassigned1 {
    color: moccasin;
}
span:hover {
    position:relative;
    cursor:pointer;
}
span[title]:hover:after {
    content: attr(title);
    background:yellow;
    padding: 4px 8px;
    color: #000;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 20;
    white-space: nowrap;
}