HIS 338: Religion in American History
 
Introduction | Adapting Content | Making a Page | Finishing Up
Design Considerations | Common Elements | HTML Reference | Color Table


HTML Reference

How Do I . . .  
  
Add graphics to the web page?  
<IMG SRC="N"> Image Source
Inserts a picture in your page. For N, substitute the name of a graphics file (the filename will end in either .gif or .jpg). There is no end tag.
  
Within the brackets < > of the <IMG SRC> tag you can add several attributes to improve the use of the graphics.
  
<IMG SRC="FILENAME" WIDTH=N HEIGHT=N> Use the WIDTH= and HEIGHT= attributes to specify the width and height in pixels of your graphic image. For N, substitute the number of pixels. Including these attributes will lead to faster downloads of your page because your browser will not have to calculate the image size before it draws your graphics on the computer screen. You can find the width and height by opening your graphics file in an image editor such as Microsoft Photo Editor, Adobe PhotoDeluxe, Adobe PhotoHouse, Adobe Illustrator, or Corel PrintHouse (available for free download over the campus network).
  
<IMG SRC="FILENAME" ALT="N"> Use the ALT= attribute to create a descriptive caption of your picture which will be displayed until the graphic image is downloaded. For N, substitute the text (within quotation marks) that you want displayed. After the picture is downloaded, the descriptive caption will be displayed on the screen when the viewer holds the mouse pointer over the image.
  
<IMG SRC="FILENAME" BORDER=N> Use the BORDER= attribute to specify the size of border in pixels, which is to be displayed around the graphic image. For N, substitute the size of the border in pixels. If you use your image in a hyperlink (for instance, to create a button which will take viewers to another page), a blue border will appear around your graphic image unless you set the border size to 0: BORDER=0
  
In using the <IMG SRC> tag, you place the attributes together within the tag. For instance, you could have the following tag:

<IMG SRC="FILENAME.GIF" WIDTH=100 HEIGHT=75 BORDER=0 ALT="An Example of Web Page Graphics">

  
Add hyper links to the page?  
<A HREF="URL"> </A> Anchor Hyperlink Reference
Creates a clickable link to another web page. For URL, substitute the Internet address of the page you are linking to.
  • If you are linking to a page at another web site, begin the URL with "http://".
  • If you are linking to a page at your own web site (such as one of the pages you are creating), simply place the name of the HTML within the quotation marks.
  • Note that if the page at your web site is in a different subdirectory (folder) than your page, you will also need to include the subdirectory name. All pages and images that you create for HIS 338 will be in loaded into the same subdirectory.
  • Everything (text or graphics) between the <A HREF> tag and the </A> tag will become the clickable link. Text in this area will be underlined and colored blue (unless you choose a different color in the <BODY> tag). Graphics in this area will have a blue border unless you specify BORDER=0 in the <IMG SRC> tag (see above).
  • To create a clickable image (such as a button), simply place an <IMG SRC> tag in the clickable area between the <A HREF> tag and the </A> tag.
  
Create a colored background for the page?  
<BODY BGCOLOR="N"> </BODY> Body Background Color
Changes the background color of the page. For N, substitute the "RGB value" of the color. (See the color chart at the end of this document.) The <BODY> tag always goes near the top of the page, right after the </HEAD> tag.
  
Place an image or picture behind the text and other pictures on the page?
<BODY BACKGROUND="N"> </BODY> Body Background
Places a graphics image in the background of the page. This tag is often used to create a colored bar on the left or right side of the page or to create a textured background. If the image does not fill the page, the image will be "tiled" or repeated over and over again until it fills up the page. For N, substitute the name of the graphics file. The <BODY> tag always goes near the top of the page, right after the </HEAD> tag.
  
Change the color of the hyperlinks?  
<BODY LINK="N" VLINK="N" ALINK="N"> </BODY> Links
Changes the color of the hyperlinks.
  • LINK= controls the color of Links Setting the LINK= value will change the color of hyperlinks which have not yet been clicked on.
  • VLINK= controls the color of Visited Links. Setting the VLINK= value will cause those hyperlinks which have been accessed recently by the viewer to change color.
  • ALINK= controls the color of Active Links. Setting the ALINK= value will cause hyperlinks to change color as they are clicked.
  • For N, substitute the "RGB value" of the color. (See the color chart at the end of this document.)
  • Web design experts recommend that if you set any of the link color values, that you set them all.
  • The <BODY> tag always goes near the top of the page, right after the </HEAD> tag.
  
In using the <BODY> tag, you place the attributes together within the opening <BODY> tag. For instance, you could have the following tag: <BODY BGCOLOR="FFFFFF" BACKGROUND="FILENAME.GIF" LINK="#FF0000" VLINK= "#008000" ALINK= "#FF0000"> </BODY>
  
Draw a horizontal dividing line across the page?
<HR>Horizontal Rule
Draws a straight line across the page. There is no end tag.
  
Within the brackets < > of the <HR> tag you can add several attributes to improve the use of the graphics.
  
<HR NOSHADE>Removes the shading of the Horizontal line which gives it a 3D effect. Use of the NOSHADE attribute will produce a solid colored line.
  
<HR COLOR="N"> Adds color to the Horizontal line. For N, substitute the "RGB value" of the color. (See the color chart at the end of this document.)
  
<HR WIDTH="N" SIZE="N"> Controls the size of the Horizontal line. WIDTH= attribute controls the width of the line. The SIZE= attribute controls the height of the line. For N, substitute the size of the line in either pixels or in a percentage. For example, WIDTH=75%, produces a line which stretches across three-quarters of the page.
  
<HR ALIGN="N"> Controls the placement of the Horizontal line on the page. For N, substitute either "LEFT", "RIGHT", or "CENTER".
  
In using the <HR> tag, you place the attributes together within the tag. For instance, you could have the following tag:

<HR NOSHADE COLOR="#FF0000" WIDTH=400 SIZE=20 ALIGN="CENTER">

  
Create a bulleted list?
<UL> </UL> Unordered List
Creates a list of indented items.
<LI>List Item
Creates a bullet to be used with the <UL> tags. Omitting the <LI> tag will create an indented, unbulleted list. No end tag required.
  
Create a numbered list?
<OL> </OL> Ordered List
Creates a numbered list
<LI>List Item
Creates a number to be used with the <OL> tags. Omitting the <LI> tag will create an indented, unnumbered list. No end tag required.
  
Put space between my paragraphs or images?
<P> </P> Paragraph
Place between each paragraph. Creates a blank line between the paragraphs. The closing </P> tag is optional.
  
Put text or images directly below the previous line of text or picture?
<BR>Break
Place at the end of a line to force text down to the very next line. Otherwise, browsers will put white space between the lines. No end tag required.
  
Add white space between words or any other design elements?
&nbsp;No Break Space
This one is not a tag but a special character. Internet browsers ignore extra spaces between words. If you need to add extra white space between words, using the no break space character is one easy way to do this.
  
Center something on a page?  
<CENTER> </CENTER> Center
This centers everything between the two tags. When a table is placed between the <CENTER> tags, the tag will center the table on the page, but it does not center individual items within the cells of the table.
  
Display text in Bold?
<B> </B> Bold
This displays everything between the tags in a bold font.
  
Display italicized text?  
<I> </I> Italics
This displays everything between the tags in an italic font.
  
Display underlined text?  
<U> </U> Underline
This underlines everything between the tags.
  
Create a block quotation?  
<BLOCKQUOTE> </BLOCKQUOTE> Blockquote
This displays all text between the tags as a block quotation. The text will be indented from the margin on both sides of the page and single spaced.
  
Add a hidden comment?
<!--Place Comment Here> Comment
This tag allows the author of web pages to insert comments in their web page files which will not be seen by the viewers. This tag is especially useful in hand coding, since it allows you to divide the HTML code into smaller sections which are easier to read than undivided code.
  
Create a Header?
<HN> </HN> Header
This tag creates a header. For N, substitute a number from 1-6. The smaller the number, the larger the header will be. <H1> </H1> produces the largest header. <H6> </H6> produces the smallest header. (Notice this is different than the system for sizing fonts below.)
Change the appearance of the fonts?
<FONT> </FONT> Font
This allows you to modify the appearance of the font.
  
Within the brackets < > of the <FONT> tag you can add several attributes to improve the appearance of your fonts.
<FONT FACE=N> </FONT> Use the FACE= attribute of the <FONT> tag to name the True Type font face which is to be used. For N, substitute the name of a True Type font. Example:

<FONT FACE=Arial> would display the text in the Arial font.

  
<FONT SIZE=N> </FONT> Use the SIZE= attribute of the <FONT> tag to name the size of type to be used. Note here that the size of font is not the normal font size that you would set in a word processor. Instead it is one of the seven font sizes which browsers can display. For N, substitute the size of the font, expressed usually as a number from 1-7. The smaller the number, the smaller the font will appear on the computer screen. (A font size of 2 in a browser is roughly equal to a font size of 12 in a word processor.) Example:

<FONT SIZE=2> Displays a font in the second smallest size the browser will display.

Font sizes can also be expressed as relative numbers. Example:

<FONT SIZE=+2> Displays the font two sizes larger than the previously selected font size.

  
<FONT COLOR="#N"> </FONT> Use the COLOR= attribute to specify the color of the font. For N, substitute the "RGB value" of the color. (See the color chart at the end of this document.)
In using the <FONT> tag, you place the attributes together within the tag. For instance, you could have the following tag:

<FONT FACE="Arial" SIZE=2 COLOR=#000000> </TD>

  
Make Tables?
Tables allow you to divide your page (or sections of it) into a grid. Pictures or text can be placed into the individual cells of the grid and the grid will cause the pictures or text to appear exactly where you want it. Additionally, you could use a 2x1 table to divide the page into two columns or a 3x1 table to divide it into three columns.

Coding tables by hand is difficult until you get the hang of it, and there are many complicated tricks you can do to with tables. Many of these complicated tricks are omitted below, but the included tags will allow you to build a simple, yet functional table.

  
<TABLE> </TABLE> Table
Use these tags to mark the beginning and end of your table.
  
<TR> </TR> Table Row
Use these tags to mark the beginning and end of each horizontal row of your table.
  
<TD> </TD> Table Data
Use these tags to mark the beginning and end of each table cell within the table's horizontal rows. The contents of the cell, such as text or a graphic, should be placed between these tags (hence the name "Table Data"). You should use the same number of cells in each horizontal row of your table.
  
Within the brackets < > of the <TD> tag you can add several attributes to improve the appearance of your table
  
<TD WIDTH=N> </TD> Use the WIDTH= attribute to specify the size of the table cell. For N, substitute either the width of the cell in pixels or the percentage of the page width the cell should be: Examples:

<TD WIDTH=150> Creates a cell 150 pixels wide. If you are putting a graphic in the cell, the cell should be at least as wide in pixels as the graphic.

<TD WIDTH=25%>Creates a cell which spans 25 percent of the width of the screen.

  
<TD VALIGN=N> </TD> Use the VALIGN= attribute to specify how things will line up vertically within the cell. For N, substitute either "TOP", "MIDDLE", or "BOTTOM."
  
<TD ALIGN=N> </TD> Use the ALIGN= attribute to specify how things will line up horizontally within the cell. For N, substitute either "LEFT", "CENTER", or "RIGHT"
  
<TD BGCOLOR="N"> </TD> Use the BGCOLOR= attribute to set the color of the individual table cells. For N, substitute the "RGB value" of the color. (See the color chart at the end of this document.)
  
<TD BACKGROUND="N"> </TD> Use the BACKGROUND= attribute to place background images in individual table cells. For N, substitute the name of a graphics file.
In using the <TD> tag, you place the attributes together within the tag. For instance, you could have the following tag:

<TD WIDTH=250 VALIGN="TOP" ALIGN="LEFT" BGCOLOR="#FFFFFF" BACKGROUND="picture.gif"> </TD>


The Changing Nature of HTML

HTML is a rapidly evolving computer language. The World Wide Web was created only in 1991 and already there have been several major changes in HTML code. The latest version is HTML 4.0, which came out in the second half of 1998. The rapid changes in HTML pose challenges for web page designers:


This page was last updated on 2/5/99.
| Return to History 338 Supplements | Return to Top of Page | Site Map |

Dr. Harold D. Tallant, Department of History, Georgetown College
400 East College Street, Georgetown, KY 40324, (502) 863-8075
E-mail: htallant@georgetowncollege.edu.

Dr. Tallant's Classes
The American Studies Major
Georgetown College Home Page
Department of History