User:Camomiletea/HTML
Jump to navigation
Jump to search
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>