User:Camomiletea/HTML

Footnotes

Info on footnotes below outdated; really need to check out Accessibility_Recipes/Footnotes.

CSS:

.footnotes        {border: dashed 1px;}
.footnote         {margin-left: 10%; margin-right: 10%; font-size: 0.9em;}

HTML:

Anchor:

<a name="FNanchor_1" id="FNanchor_1"></a><sup><a href="#Footnote_1">1</a></sup>

Footnote:

<div class="footnotes"><h3>FOOTNOTES:</h3>
 <div class="footnote">
  <p>
   <a name="Footnote_1" id="Footnote_1"></a><sup><a href="#FNanchor_1">1</a></sup>
   A Tatár word, signifying "tower"...
  </p>
 </div>
</div>

Images

CSS:

.center   {text-align: center; text-indent: 0em;}
.caption {font-size: smaller; margin-top: 0em; text-align: center;}

HTML:

<div class="center">
 <a href="images/image1.png">
   <img src="images/image1-th.png"
     width="285" height="375"
     alt="Frontispiece, linked to a larger version"
     title="CHURCH OF THE CATACOMBS MONASTERY AT KIEV." />
 </a>
 <p class="caption">CHURCH OF THE CATACOMBS MONASTERY AT KIEV.</p>
</div>

Caption is optional; necessary only if it exists in original.

Poetry

CSS:

.poem             {margin-left:10%; margin-right:10%; text-align: left;}
.poem br          {display: none;}
.poem .stanza     {margin: 1em 0em 1em 0em;}
.poem span        {display: block; margin-left: 0em; padding-left: 3em; text-indent: -3em;}
.poem span.i1     {margin-left: 1em;}

HTML:

<div class="poem"><div class="stanza">
<span>He is our Liberator and our father!<br /></span>
<span>And we will erect a monument of hearts<br /></span>
<span>Whose cross, by its gleaming 'mid the clouds,<br /></span>
<span>Shall transmit the memory to young children and the babes in arms,<br /></span>
<span>And this shall be unto ages of ages<br /></span>
<span>So long as the world and man shall exist!<br /></span>
</div></div>

Transcriber's Notes

CSS:

div.notes   {background-color: #ccccff; color: #000000; margin-left: 10%; margin-right: 10%; padding: 0.5em;}

or more recently a plainer look:

.transnote { margin: 0 10%; border: 1px dashed black; padding: 1em; }
ins { text-decoration:none; border-bottom: thin dotted gray; }

HTML:

<div class="transnote">
<p class="center">Transcriber's Note</p>
<ol>
<li>Hover the cursor over underlined <ins title="like this">text to
see the corrections made. A full list of corrections made is
available <a href="#corrections">at the end</a>.</li>
</ol>
</div>