DESIGN REQUIREMENTS
GENERAL
TiH pages should be simple, balanced, and readable. The following guidelines will help you achieve this goal.
For a more thorough introduction to Web page design, consult these online texts:
LAYOUT
- Tables
Tables are the basic tool used to control Web page layout. Without them, text and graphics fall randomly across the page.
TiH uses one main table, 600 pixels wide, to provide the overall page structure. Smaller tables are nested within this main table to hold graphics in place. This format establishes a browser-friendly page width and allows the essay text to wrap around page graphics.
The TiH template gives detailed instructions for creating these tables between the standard TiH footer and header.
For more information on table use, see the Basic Tables section of the Yale C/AIM Web Style Guide.
TiH's framework consists of a 600 pixel wide table. This table is placed between 1) a header, and 2) a list of sources followed by a footer.
The header and footer are templates used each day. Only the date, topic and general sources change in the header from day to day. Sources is a place to cite the source of any direct quote used, but not attributed, in that day's TiH text. The footer remains the same each day.
Construct the table right after the page header. The code for this table is as follows:
<CENTER>
<TABLE WIDTH=600 BORDER=0 CELLPADDING=0 ALIGN=CENTER>
<TR><TD>
Insert the following code to close this table just before the sources and footer code.
</TD></TR></TABLE></CENTER>
- Creating Space
Provide space within the essay text and around graphics tables to enhance page balance and readability. You can do this by keeping paragraphs short and placing paragraph breaks <p> between paragraphs and search sentences. Also, use bulleted lists to distinguish search sentences from the main body of text.
Example
<ul><p><li>Search tip one.<p><li>
Search tip two.<p><li>Search tip three.</ul>
- Search tip one.
- Search tip two.
- Search tip three.
To create space inside graphics tables, use the <cellpadding> and <cellspacing> tags. To create space around these tables, use the <hspace> and <vspace> tags. The amount of space needed will vary with each page, but you can get a good idea of typical settings by looking at current TiH pages.
COLOR
The background for TiH is set to an off-white (#fff7e7) in the page header. Links and text are set to the Web standard (black=text blue=link, red=clicked link, purple=visited link). No additional coding is required to obtain these colors.
To find browser safe colors for TiH headers and graphics table backgrounds, refer to the Browser Safe Color Palette (http://www.lynda.com/hex.html). Be sure to choose colors that do not overwhelm images or text.
In general, soft muted colors work best for backgrounds. Dark or intense colors work best for headers. Multiple colors on one page can be distracting; and large areas of bright color can cause eye strain. For more information on color use, see the Library of Congress Guidelines for Creating Documents in Hypertext Markup Language (HTML).
- Background Colors
To set background colors for graphics tables, use the <bgcolor> tag:
<table width=220 border=0 align=left cellspacing=10 cellpadding=10 bgcolor="#ffcc00">
- Text Colors
To set colors for headers, introductory quotes, and the text within graphics tables, use the <font color> tag:
<font color="#cc3300">insert text here</font>
FONTS
Use the <font> tag to change font color, size, and style for headers, introductory quotes, and the text within graphics tables. With rare exception, captions and the main body of text should remain black. Remember, readability is key. Using several different fonts on one page can be distracting.
The most effective way to increase or decrease font size is to use a plus or minus sign with numbers from 1-4. See the sample font sizes below. For a list of font styles, check the tool bar of your HTML editor. Looking at the coding of current TiH pages and the samples in the Headers and Graphics sections below will give you a good idea of standard TiH fonts. For more information on font use, see the Library of Congress Guidelines for Creating Documents in Hypertext Markup Language (HTML).
<font size=+2>orange</font>
orange
<font size=+2 color="#cc3300">orange</font>
orange
<font size=+2 color="#cc3300" face=arial>orange</font>
orange
Font Size +4
Font Size +3
Font Size +2
Font Size +1
Standard Size
Font Size -1
IMAGES
- Selection
Select images that are readable in a small format and interesting. Photographs should be sharp and simple. Black-and-white photographs should also have high contrast. In some instances, the historic value of an image will override one or more of these considerations. Also, try to feature items that have not appeared in other TiH pages.
- Number
Strive for a good balance between text and graphics. TiH pages typically feature 2-3 graphics tables. Longer texts can support more graphics; but remember, richly-illustrated pages take longer to download. To improve download efficiency, place complex tables or large image files near the middle or bottom of the page.
- Editing
CAPTIONS
Use captions to identify all images and quotes. Captions retain the default style and color settings, but are set one size smaller than the standard text <font size=-1>. They are placed five pixels below images <vspace=5> and one paragraph break <p> below quotes.
The information required for a caption varies according to the type of material used, but all captions should include a title, date, and source. If known, include artist names and locations. You can limit caption length by editing object titles, but don't change titles beyond recognition as they link to the bib record and should closely match the information there. Also, when citing American Memory collections as a source, use the short titles provided by the Education Department.
This is the standard caption format for images.
<table width=220 border=0 align=left cellspacing=10 cellpadding=10><tr><td align=center><a href="http://rs6.loc.gov/pnp/gsc/5a28000/5a28200/5a28280r.jpg"><img src="images/1204berkeley.gif" width=150 height=119 alt="William Henry Harrison residence" vspace=5></a><br><font size=-1><a href="http://lcweb2.loc.gov/cgi-bin/query/r?ammem/gottscho:@field(NUMBER+@band(gsc+5a28280))">"Berkeley," William Henry Harrison Residence in Virginia</a>, <br>Samuel H. Gottscho, photographer,<br>November 14, 1961.<br><a href="http://lcweb2.loc.gov/ammem/gschtml/gotthome.html">Architecture and Interior Design for 20th Century America, 1935-1955</a></font></td></tr></table>
For the standard caption format for quotes, see the centered introductory quote in the following section. For other types of captions, look at current TiH pages.
HEADERS/INTRODUCTORY QUOTES
Use a brief header or an introductory quote at the top of each page to identify the page content and encourage users to continue reading. Graphics make nice headers but take longer to download. Remember, some users won't wait.
Banner Header
<center><font size=+3 color="#6666cc"><i><b>Treaty of Paris Ratified</b></i></font></center>
Treaty of Paris Ratified
Centered Introductory Quote
<center><font size=+2 color="#0000CC"><i><b>Service is the foundation of progress. The greatest lesson that
we have to learn is to seek ever the public welfare, to build up, to maintain our American heritage.</b></i></font><p><font size=-1>Calvin Coolidge,<a href="http://lcweb2.loc.gov/cgi-bin/query/r?ammem/nfor:@field(DOCID+@range(90000069+90000070))">"America and the War,"</a><br><a href="http://lcweb2.loc.gov/ammem/nfhome.html">American Leaders Speak, 1918-1920</a></font></center>
Service is the foundation of progress. The greatest lesson that
we have to learn is to seek ever the public welfare, to build up, to maintain our American heritage.
Calvin Coolidge, "America and the War,"
American Leaders Speak, 1918-1920
Blockquote
<blockquote><font size=+1 color="#0000cc"><i>Now be it known, that we, the delegates of the state of New Jersey, chosen by the people thereof, for the purpose aforesaid, having maturely deliberated on and considered the aforesaid proposed Constitution, do hereby, for and on the behalf of the people of the said state of New Jersey, agree to, ratify, and confirm, the same and every part thereof.</i></font><p><font size=-1><a href="http://lcweb2.loc.gov/cgi-bin/query/r?ammem/hlaw:@field(DOCID+@lit(ed001169)):">"In Convention of the State of New Jersey"</a> in <br><a href="http://lcweb2.loc.gov/ammem/amlaw/lwed.html">"The Debates in the Several State Conventions on the Adoption of the Federal Constitution"</a>(Elliot's Debates).<br>
<a href="http://lcweb2.loc.gov/ammem/amlaw/lawhome.html">A Century of Lawmaking for a New Nation, 1774-1873</a></font></blockquote>
Now be it known, that we, the delegates of the state of New Jersey, chosen by the people thereof, for the purpose aforesaid, having maturely deliberated on and considered the aforesaid proposed Constitution, do hereby, for and on the behalf of the people of the said state of New Jersey, agree to, ratify, and confirm, the same and every part thereof.
"In Convention of the State of New Jersey" in
The Debates in the Several State Conventions on the Adoption of the Federal Constitution (Elliot's Debates).
A Century of Lawmaking for a New Nation, 1774-1873
BORDERS
Borders can be used to enhance graphics tables, but are not mandatory. Here are several variations:
No Border
<p>
<table width=220 border=0 align=left cellspacing=10 cellpadding=10 bgcolor="#d2b48c">
<tr>
<td align=center>
<a href="http://rs6.loc.gov/pnp/dag/3g/3g03000/3g03597r.jpg"><img src="images/latch.gif" width=134 height=150 alt="Occupational portrait of a latch maker" vspace=5></a>
<br>
<font size=-1><a href="http://lcweb2.loc.gov/cgi-bin/query/r?ammem/dag:@field(NUMBER+@band(dag+3d02057))">Portrait of a Latch Maker,</a><br>
ca. 1850-1860.<br>
<a href="http://lcweb2.loc.gov/ammem/daghtml/daghome.html">America's First Look into the Camera: Daguerreotypes, 1839-1864</a></font>
</td>
</tr>
</table>
Border without Outline
<table width=220 border=2 align=left cellspacing=10 cellpadding=10 bgcolor="#d2b48c">
Border with Outline
Use the following code to create a thin black line around the standard white border.
<table width=220 border=1 align=left cellspacing=10 cellpadding=10 bgcolor="#cc3333" bordercolor="#00000">
For a colorful outline, add a browser-safe color value to the <bordercolor> tag. To make the color more noticeable, increase the border size.
<border=2 bordercolor="#336699">
Nested Table Border
You can also create borders by nesting tables.
Example
<table width=220 align=left bgcolor="#cc3333">
<tr>
<td align=center>
<table width=210 border=0 cellpadding=10 cellspacing=10 bgcolor="#cccccc">
<tr>
<td align=center>
<a href="http://lcweb2.loc.gov/pnp/wtc/4a00000/4a03000/4a03100/4a03189r.jpg"><img src="images/harbor125.gif" width=150 height=140 alt="Harbor" vspace=5></A><br>
<font size=-1><a href="http://lcweb2.loc.gov/cgi-bin/query/r?ammem/wtc:@field(NUMBER+@band(wtc+4a03189))">View from harbor approach,</a><br>
Hong Kong,<br>
William Henry Jackson, photographer, 1895.<br>
<a href="http://lcweb2.loc.gov/ammem/wtc/wtchome.html">Around the World in the 1890s, 1894-1896</a>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
GRAPHICS TABLES/SIDEBARS
Standard Graphics Table
Use this format to create the standard TiH graphics table. Align individual tables to either the right or left side of the page.
<table width=220 border=0 align=left cellspacing=10 cellpadding=10 bgcolor="#cc3300"><tr><td align=center><a href="http://rs6.loc.gov/pnp/gsc/5a28000/5a28200/5a28280r.jpg"><img src="images/1204berkeley.gif" width=150 height=119 alt="William Henry Harrison residence" vspace=5></a><br><font size=-1><a href="http://lcweb2.loc.gov/cgi-bin/query/r?ammem/gottscho:@field(NUMBER+@band(gsc+5a28280))">"Berkeley," William Henry Harrison Residence in Virginia</a>, <br>Samuel H. Gottscho, photographer,<br>November 14, 1961.<br><a href="http://lcweb2.loc.gov/ammem/gschtml/gotthome.html">Architecture and Interior Design for 20th Century America, 1935-1955</a></font></td></tr></table>
For variety, place two or three standard tables in a row. Note: Two tables can be aligned horizontally or vertically. Three tables work best in a horizontal row.
Horizontal Row
For two tables:
<table width=550 border=0 align=center cellspacing=10 cellpadding=10 bgcolor=#d2b48c>
<tr>
<td width=275 align=center>
<a href="http://lcweb2.loc.gov/pnp/dag/3g/3g03000/3g03595r.jpg"><img src="images/1118cap.gif" width=150 height=118 alt="United States Capitol" vspace=5></a><br>
<font size=-1><a href="http://lcweb2.loc.gov/cgi-bin/query/r?ammem/dag:@field(NUMBER+@band(dag+3a53369))">United States Capitol,</a><br>
Washington, D.C,<br>
ca. 1846.<br>
<a href="http://lcweb2.loc.gov/ammem/daghtml/daghome.html">America's First Look into the Camera: Daguerreotypes, 1839-1864</a>
</font>
</td>
<td width=275 align=center>
<a href="http://rs6.loc.gov/pnp/dag/3g/3g04000/3g04771r.jpg"><img src="images/niag.gif" width=150 height=120 alt="Man stranded on rocks in the Niagara River" vspace=5></a><br>
<font size=-1><a href="http://lcweb2.loc.gov/cgi-bin/query/r?ammem/dag:@field(NUMBER+@band(dag+3a51470))">Man Stranded on Rocks<br> in the Niagara River,</a><br>
1853.<br>
<a href="http://lcweb2.loc.gov/ammem/daghtml/daghome.html">America's First Look into the Camera: Daguerreotypes, 1839-1864</a></font></td></tr></table>
For three tables:
<table border=0 cellspacing=10 cellpadding=10 bgcolor="#99cccc">
<tr>
<td width=33% align=center valign=top>
<a href="http://lcweb2.loc.gov/pnp/thc/5a43000/5a43000/5a43073r.jpg"><img src="images/1205arrive.gif" width=150 height=119 alt="Arrival of students at Dunbarton College" vspace=5></a><br>
<font size=-1>
<a href="http://lcweb2.loc.gov/cgi-bin/query/r?ammem/horyd:@field(NUMBER+@band(thc+5a43073))"> Arrival of Students at Dunbarton College,</a><br>
Theodor Horydczak, photographer,<br>
ca. 1920-1950.<br>
<a href="http://rs6.loc.gov/ammem/thchtml/thhome.html">Washington as It
Was, 1923-1959</a>
</font>
</td>
<td width=33% align=center valign=top bgcolor="#6699cc">
<a href="http://lcweb2.loc.gov/pnp/thc/5a42000/5a42800/5a42863r.jpg"><img src="images/1205lib.gif" width=150 height=119 alt="Trinity College Library" vspace=5></a><br>
<font size=-1>
<a href="http://lcweb2.loc.gov/cgi-bin/query/r?ammem/horyd:@field(NUMBER+@band(thc+5a42863))"> Small Alcove in Library at<br>
Trinity College,</a><br>
Theodor Horydczak, photographer,<br>
ca. 1920-1950.<br>
<a href="http://rs6.loc.gov/ammem/thchtml/thhome.html">Washington as It
Was, 1923-1959</a>
</font>
</td>
<td width=33% align=center valign=top>
<a href="http://lcweb2.loc.gov/pnp/thc/5a43000/5a43000/5a43089r.jpg"><img src="images/1205commence.gif" width=150 height=120
alt="Graduation exercises at Dunbarton College" vspace=5></a><br>
<font size=-1>
<a href="http://lcweb2.loc.gov/cgi-bin/query/r?ammem/horyd:@field(NUMBER+@band(thc+5a43089))">Graduation Exercises at Dunbarton College,</a><br>
Theodor Horydczak, photographer,<br>
ca. 1920-1950.<br>
<a href="http://rs6.loc.gov/ammem/thchtml/thhome.html">Washington as It
Was, 1923-1959</a>
</td>
</font>
</td>
</tr>
</table>
Arrival of Students at Dunbarton College,
Theodor Horydczak, photographer,
ca. 1920-1950.
Washington as It
Was, 1923-1959
|
Small Alcove in Library at
Trinity College,
Theodor Horydczak, photographer,
ca. 1920-1950.
Washington as It
Was, 1923-1959
|
Graduation Exercises at Dunbarton College,
Theodor Horydczak, photographer,
ca. 1920-1950.
Washington as It
Was, 1923-1959
|
|
Stacked Tables
<table width=220 border=0 align=right cellpadding=5 hspace=8 bgcolor="#6699cc">
<tr><td align=center>
<a href="http://lcweb2.loc.gov/pnp/dag/3c/3c10000/3c10067r.jpg"><IMG SRC="images/zt0223.gif" width=120 height=150 alt="Image of Zachary Taylor" vspace=5></a><br><font size=-1><a href="http://lcweb2.loc.gov/cgi-bin/query/r?ammem/dag:@field(NUMBER+@band(dag+3a28543))">Zachary Taylor</A>,<br>ca. 1844 -1849.<br><a href="http://lcweb2.loc.gov/ammem/daghtml/daghome.html">America's First Look into the Camera: Daguerreotypes, 1839-1862</a></font></td></tr>
<tr><td>
</td></tr>
<tr>
<td align=center>
<a href="http://lcweb2.loc.gov/pnp/dag/3c/3c10000/3c10021r.jpg"><img src="images/0223scot.gif" width=117 height=150 alt="Image of Winfield Scott" vspace=5></a><br><font size=-1><a href="http://lcweb2.loc.gov/cgi-bin/query/r?ammem/dag:@field(NUMBER+@band(dag+3c10100))">Winfield Scott</a>,<br>ca. 1851-1860.<br><a href="http://lcweb2.loc.gov/ammem/daghtml/daghome.html">America's First Look into the Camera: Daguerreotypes, 1839-1862</a></font>
</td></tr></table>
Image, Caption, and Text Table
Use this format to create a graphics table without separate cells.
<p>
<center>
<table width=450 border=2 cellspacing=10 cellpadding=10 bgcolor="#cccc99" bordercolor="#00000">
<tr>
<td>
<table width=210 align=right>
<tr>
<td align=center>
<a href="http://rs6.loc.gov/pnp/cph/3b20000/3b26000/3b26800/3b26893r.jpg"><img src="images/shibe.gif" width=200 height=144 alt="Shibe Park" vspace=5 hspace=10></a><br>
<font size=-1>Shibe Park, Philadelphia,<br> ca. 1913.<br>
<a href="http://lcweb.loc.gov/rr/print/">Prints and Photographs Division</a></font>
</td>
</tr>
</table>
<p><font color="#b22222"><font size=+3>S</font>hibe Park, home of the Philadelphia Athletics from 1909 to 1954, was renamed Connie Mack Stadium in 1953 in honor of the team's longtime manager and owner. From 1938 to 1970, the park also served as home for the Philadelphia Phillies. It was torn down in 1976.</font> </td>
</tr>
</table>
</center>
|
|
Shibe Park, home of the Philadelphia Athletics from 1909 to 1954, was renamed Connie Mack Stadium in 1953 in honor of the team's longtime manager and owner. From 1938 to 1970, the park also served as home for the Philadelphia Phillies. It was torn down in 1976.
|
|
To create a table with separate cells, use this format:
<table width=530 border=2 align=center cellspacing=10 cellpadding=10 bordercolor="#003366"><tr><td bgcolor="#99999"><blockquote><font face=Kaufmann BT size=+2><p>He is one who, if you order him to hold a post, will never leave it alive to be occupied by an enemy.</font><p><font size=-1>--Samuel McDowell Moore,<br>
delegate to the Virginia Convention, describing the military qualifications of Thomas Jackson, April 1861.</font><font size=-1><br></blockquote></td>
<td width=200 align=center cellspacing=10 cellpadding=10><img src="images/0121jack.gif" width=100 height=126 alt="Stonewall Jackson" vspace=5></a><br><font size=-1>Stonewall Jackson, 1863
<br>Library of
Congress, Washington, D.C.<br><a href="http://lcweb.loc.gov/rr/print/">Prints and Photographs Division,</a><br>
Library of Congress.</font></font></td></tr></table>
|
He is one who, if you order him to hold a post, will never leave it alive to be occupied by an enemy. --Samuel McDowell Moore,
delegate to the Virginia Convention, describing the military qualifications of Thomas Jackson, April 1861.
|
Stonewall Jackson, 1863
Library of
Congress, Washington, D.C.
Prints and Photographs Division,
Library of Congress.
|
|
To create a vertical sidebar: start with a standard graphics table; place a paragraph break <p> after the caption; then add your additional text. Close table as usual.
<p>
<table width=575>
<tr>
<td>
<table width=220 border=1 align=left cellspacing=10 cellpadding=10 bgcolor=#99999>
<tr>
<td align=center><a
href="http://memory.loc.gov/cgi-bin/map_item.pl?data=/gmd426/g4262/g4262y/ye000016.sid&style=cnsvmap&itemLink=D?gmd:1
9:./temp/~ammem_mSKe::&title=Yellowstone+National+Park.+"><img src="images/1028yell2.gif" width=116 height=150 alt="Yellowstone National Park"vspace=5></a><br>
<font size=-1><a href="http://lcweb2.loc.gov/cgi-bin/query/r?ammem/gmd:@filreq(@field(NUMBER+@band(g4262y+ye000016))+@field(COLLID+cnsvmap))">Yellowstone National Park,</a><br>
1903.<br>
<a href="http://memory.loc.gov/ammem/gmdhtml/cnsvhome.html">Conservation and Environment</a><br>
<a href="http://memory.loc.gov/ammem/gmdhtml/gmdhome.html">Map Collections: 1597-1988</a>
<p>
To access a treasure trove of maps from the 16th to 20th century, visit the American Memory <a href="http://memory.loc.gov/ammem/gmdhtml/gmdhome.html">Map Collections: 1597-1988</a> homepage. <a href="http://memory.loc.gov/ammem/gmdquery.html">Search</a> across the entire online map collection, or within specific categories, such as <a href="http://memory.loc.gov/ammem/gmdhtml/cnsvhome.html">Conservation and Environment</a> or <a href="http://memory.loc.gov/ammem/gmdhtml/dsxphome.html">Discovery and Exploration.</a>
</font>
</td>
</tr>
</table>
Audio Clip Table
This is the standard format for audio clip tables.
<table width=250 border=0 align=center cellpadding=5 bgcolor="#cc9966" hspace=5><tr><td colspan=2 align=center><a href="/cgi-bin/query/r?ammem/toddbib:@field(DOCID+@lit(5136b2))">"The Eighth of January"</a><br>
<font size=-1>
Performed by Bill Robinson, fiddle, and Jesse Robinson, guitar,<br>
Recorded at Visalia FSA Camp,<br>
August 30, 1941.<br>
<a href="http://lcweb2.loc.gov/ammem/afctshtml/tshome.html">Voices from the Dust Bowl, 1940-1941</a></font>
</td>
</tr>
<tr>
<td width=125 align=center><a href="http://lcweb2.loc.gov/afc/afcts/audio/513/5136b2.ram"><img src="/ammem/realaudio.gif"></a><br><font size=-1><em>Real Audio Format</em></font></td>
<td width=125 align=center><a href="http://lcweb2.loc.gov/afc/afcts/audio/513/5136b2.wav"><img src="/ammem/redball.gif"></a><br><font size=-1><em>wav Format<br>
3621604 bytes<br>1 minutes 22 seconds</em></font>
</td></tr></table>
