HyperText Markup Language

What's New in 3.2?

Elizabeth Miller, Network Development and MARC Standards Office

Library of Congress, September 1997

Overview of New Manual

Issued by the Network Development and MARC Standards Office
Prepared in consultation with the LC HTML Advisory Group
Contains more descriptive information
HTML table of tags expanded to include new 3.2 tags and attributes
Appendix 1 - HTML Special Characters
Appendix 2 - Forms Examples

Background Information

Adhere to current Internet Policies as usual
Standards = Cross-platform Operability and Upward Compatibility
LC World Wide Web Style Guide (http://www.loc.gov/loc/webstyle/)
HTML 3.2 Reference Specification (http://www.w3.org/TR/REC-html32.html)
HTML Activity at WWW Consortium (http://www.w3.org/MarkUp/Activity/)
More information about SGML added

HTML Editors and Validation Software

HTML Assistant ProFree (ftp://staff.loc.gov/pub/docs/html.training/pro3free.exe)
Commercial version licensed through Library Services (contact Belinda Urquiza via and Automation Liaison)
WEBLINT HTML Validator (http://www.loc.gov/cgi-bin/loc/weblint-gw/)
- New version for HTML 3.2 is now installed
- Validates local files as well

General HTML information

Logical vs. Physical Style Tags
- Use of <CITE>...</CITE>
Use of Quotes in Attributes
- Always use double quotes
- Starting quote requires and ending quote
- After the = (equal) sign in an attribute, quotes are used when data combines numbers and letters, letters and special characters/spaces, or numbers and special characters/spaces

HTML Required Tags

HTML Skeleton Document (http://www.loc.gov/iug/html/skeleton.html)
- NEW - <!DOCTYPE...> for HTML 3.2 (http://www.loc.gov/iug/html/prologue.html)
- NEW - <META> tags (http://www.loc.gov/iug/html/meta.html)
Library of Congress Templates (http://www.loc.gov/loc/webstyle/temphome.html)

Special Characters

Appendix 1
Always use &, followed by code name, ending with ;
Prefer alphabetic codes (i.e., ü for ü)
Do not use character numbers 0-31 or 127-159

Alignment

Text Alignment

Text alignment using the <P> tag

ALIGN= attribute (default is "LEFT")
ALIGN=CENTER centers text until the next <P> tag is encountered
ALIGN=RIGHT flushes text right until the next <P> tag is encountered
Examples:
This text is centered using the ALIGN=CENTER attribute with the <P> tag.
This text is flushed right using the ALIGN=RIGHT attribute with the <P> tag. Notice that use of the <P> tag always include white space

Text alignment using the <DIV> tag

<DIV> may contain several paragraphs, graphics, or any other sections of text and media.
ALIGN= attribute (default is still "LEFT")
ALIGN=CENTER centers all elements in the block until the </DIV> is encountered
ALIGN=RIGHT centers all elements in the block until the </DIV> is encountered
Examples:

The DIV tag is used to mark up divisions in a document. It can enclose paragraphs, headers and other block elements. Currently, you can only use it to set the default alignment for all enclosed block elements. Future standards will most likely include more options for DIV.

The DIV tag is used to mark up divisions in a document. It can enclose paragraphs, headers and other block elements. Currently, you can only use it to set the default alignment for all enclosed block elements. Future standards will most likely include more options for DIV. Notice that DIV does not create paragraph-like white space while centering or flushing right.

Image Alignment

ALIGN=LEFT causes text to wrap to right or image

ALIGN=RIGHT causes text to wrap to left of image

http://www.loc.gov/treasures/

Use of CLEAR= attribute with the <BR> tag

http://www.loc.gov/iug/html/32image.html

Use of the <CENTER> tag

The <CENTER> tag is an alias for <DIV ALIGN=CENTER>
Use <CENTER> ... </CENTER> to center text, images, or headings as you would use the <DIV ALIGN=CENTER> ... </DIV>

Use of Color

Background Colors

Use great care when changing the colors in an HTML document
In most cases prefer a white or light-colored background
<BODY BGCOLOR="#RRGGBB"> (RR=Red GG=Green BB=Blue)

Colors and codes: http://www.lynda.com/hexv.html

Colors are given in the RGB color space as hexadecimal numbers (e.g. COLOR="#C0FFC0"), or as one of 16 widely understood color names. These colors were originally picked as being the standard 16 colors supported with the Windows VGA palette (HTML Reference Specification - W3C, January 1997).

**Color names and RGB values**
	Black = "#000000"		Green = "#008000"
	Silver = "#C0C0C0"		Lime = "#00FF00"
	Gray = "#808080"		Olive = "#808000"
	White = "#FFFFFF"		Yellow = "#FFFF00"
	Maroon = "#800000"		Navy = "#000080"
	Red = "#FF0000"		Blue = "#0000FF"
	Purple = "#800080"		Teal = "#008080"
	Fuchsia = "#FF00FF"		Aqua = "#00FFFF"

Examples:

White background <BODY BGCOLOR="#FFFFFF"> or <BODY BGCOLOR=white>:
http://www.loc.gov/marc/
http://www.loc.gov/copyright/
Off-white background <BODY BGCOLOR="#FFF7E7">
http://www 2.loc.gov/ammem/
More dramatic background colors (often requires change of font color)
http://www.loc.gov/rr/hispanic/congress/

Text Color Changes

Text Color TEXT="#RRGGBB"
Link Color LINK="#RRGGBB"
Visited Link Color VLINK="#RRGGBB"
Active Link Color ALINK="#RRGGBB"
Examples:
- <BODY BGCOLOR="#FFFFFF" LINK="#003399" VLINK="#9999CC">
  Library of Congress Home Page http://www.loc.gov/
- <BODY BGCOLOR="#FFFFFF" LINK="#BD6400" VLINK="#6B0E02" ALINK="#200200">
  American Memory Baseball Cards http://www 2.loc.gov/ammem/bbhtml/bbhome.html

Background Images

<BODY BACKGROUND="URL">
Image is tiled (no choice, except to make the image large)
Image tiling should not obscure text
Examples:
- Small repeating CDS logo
  http://www.loc.gov/cds/cdsintro.html
  http://www.loc.gov/cds/backgif9.gif (actual image)
- Medium-sized repeating embossed Reference Fourm logo
  http://www.loc.gov/staff/reforum/
  http://www.loc.gov/staff/reforum/refback.gif (actual image)
- Small horizontal image, which when repeated creates vertical bar
  http://www.loc.gov/ (effect of tiling)
  http://www.loc.gov/homepage/images/bluebar.gif (actual image)

New Attributes for HTML Lists

Order Lists - <OL>

TYPE= attribute
Affects the numbering (lettering) scheme used in the ordered list:
1. 1 for Arabic numbers (default) (1, 2, 3, 4, ...)
2. a for Alphanumeric, lowercase (a, b, c, d, ...)
3. A for Alphanumeric, lowercase (A, B, C, D, ...)
4. i for Roman numbers, lowercase (i, ii, iii, iv, ...)
5. I for Roman numbers, uppercase (I, II, III, IV, ...)

START= attribute
Indicates on which number/letter the scheme should start. NOTE - Not all browsers support TYPE= and START. When not supported, they will be ignored and list items will be rendered in the standard way.

Unordered Lists - <UL>

TYPE= attribute
Affects the bullet style for the whole list, or for individual bullet list items:
- TYPE=DISC for a closed bullet
- TYPE=SQUARE for closed square (note, this is incorrect in the guidelines)
- TYPE=CIRCLE for an open round bullet

NOTE - Not all browsers support TYPE=. When not supported, it will be ignored and list items will be rendered in the standard way.

Font Control

<FONT> Tag

SIZE= attribute
<FONT SIZE="+1"> ... </FONT> steps up font size one notch
<FONT SIZE="-2"> ... </FONT> steps down font size two notches
Examples:
Normal,
Up One Notch, Up Two Notches, Down One Notch, Down Two Notches
OR just use numbers 1-7 ( SIZE=1 , etc.)
Normal, Size 1, Size 2, Size 3, Size 4, Size 5, Size 6, Size 7
COLOR="#RRGGBB" attribute or color name
Examples:
Maroon and +1, Purple, #FF0000, Aqua, #008000 and +3

<BIG> and <SMALL> Tags

<BIG> ... </BIG> produces larger text
<SMALL> ... </SMALL> produces smaller text
Examples:
This is big text
This is small text

New Attributes for the <IMG> tag

HEIGHT=n, WIDTH=n
Used to indicate the pixel height and width of an image. When used, the page generally loads faster with the text displaying immediately around the image areas.
VSPACE=n, HSPACE=n
Used to indicate the number of pixels that should be left free around the image. VSPACE covers vertical spacing and HSPACE the horizontal spacing.
BORDER=n
Used to set the border width when the image is a hypertext link (often used as BORDER=0 to turn it off). This has the disadvantage that the image must make it very clear that it's a hyperlink.

Tables

Tables are not supported by older browsers
Consider providing alternate versions
Use <BR> and/or <P> tags to make display readable when tables do not work
The basic structure of an HTML table includes:
- <TABLE> ... </TABLE> container
- Table rows <TR> ... </TR>
- Table data <TD> ... </TD>
  and sometimes
- Table headings <TH> ... </TH>
- Caption <CAPTION> ... </CAPTION>
More information on HTML Tables
http://www.loc.gov/iug/html/32table.html

Image Maps

Screen images (GIF or JPEG) displayed on HTML pages that are mapped, using coordinates, allowing certain sectors of the image to act as hypertext links to other documents or multimedia files over the Internet.

Cient-side image maps new in HTML 3.2
More information on Image Maps
http://www.loc.gov/iug/html/32imgmap.html

HTML Forms

No new tags, but information on forms in guide
Pages 17-20
Processing forms information requires a script
Appendix 2 - Example coding
Examples:
Library of Congress Home Page
http://www.loc.gov/
FLICC/FEDLINK Form for Course Registration
http://www.loc.gov/flicc/inetform.html
NLSBPH Request for Information Form
http://www.loc.gov/nls/infoapp.html

Java, Javascript, ActiveX, and JScript

Descriptions added to manual
Differences between Java and Javascript
Use as alternative version or when easily ignored
Examples:
American Memory Home Page (Javascript)
http://www 2.loc.gov/ammem/
LCPA Home Page (Javascript)
http://www.loc.gov/staff/lcpa/

Frames and Style Sheets

Netscape Frames

Frames highly misused on the Web
Not part of HTML 3.2, not supported on all browsers
Use as an alternative version only
Examples:
Library of Congress American Teasures Exhibition
http://www.loc.gov/treasures/

Style Sheets

A style sheet can set fonts, colors, white space and other presentational aspects of a document.
Only the newest browsers are supporting style sheets
W3C Recommendation in December 1996
http://www.w3.org/Style/CSS/

Go to the Library of Congress Home Page

Library of Congress

Library of Congress Help Desk (07/13/99)