Embedding image in raw html

An example for adding images to html for books

by Luke Harby

HTML

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

<aside style="margin:4px;padding:4px;border:1px solid forestgreen;">Annotated, with <span class="huck" title="Huck Finn is speaking">C</span><span class="tom" title="Tom Sawyer is speaking">o</span><span class="Jim" title="Jim is speaking">l</span><span class="watson" title="Miss Watson is speaking">o</span><span class="duke" title="The Duke of Bilgewater is speaking">r</span><span class="dauphin" title="The Dauphin (the King) is speaking">i</span><span class="sally" title="Aunt Sally (Phelps) is speaking">z</span><span class="others" title="Someone other than the primary characters is speaking">e</span><span class="pap" title="Pap Finn is speaking">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 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,...

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;
}

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;
}