XHTML Markup:
Begin and end all of your pages with the <html> . . .
</html> tags and the appropriate XML version declaration and
document-type definition. Also include <head> . . . </head>
tags, which will become important when you add CSS style definitions,
JavaScript code, and the like. Within the head tags, include
<title> . . . </title> tags, with a suitable title for each
page. Keep in mind that your title will appear in your own and your
viewers' status bar and bookmarks and in search results, so use a title
such as "Smith, Jane, Professional Interests" rather than "Jane Smith's
Professional Interests" even though the latter may at first seem more
readable.
Design your pages in conformity with the current W3C XHTML 2.0 standard and the
Web Design Specifications for
this course. Use the W3C MarkUp Validation Service
to validate your code.
Use standard HTML/XHTML tags to format your pages, to display images,
and to link to subsidiary pages, for example:
Center:
<center> . . .
</center>
Indent:
<blockquote> . . .
</blockquote>
Paragraph:
<p> . . .
</p>
Type Size:
<big> . . .
</big>
or
<small> . . .
</small>
Bold Type:
<b> . . .
</b>
Italic Type:
<i> . . .
</i>
Underlined Type:
<u> . . .
</u>
Horizontal Line:
<hr></hr> or <hr />
Breaking Space:
<br></br> or <br />
Non-Breaking Space:
Image:
<image src="imagename" />
Image with Alt, Width, and Height Tags: <img
alt="Image Title" width="number of pixels"
height="number of pixels" src="imagename"
></img> or <img alt="Image Title" width="number
of pixels" height="number of pixels" src="imagename"
/>
Link:
<a href="http://www.rpi.edu/">Rensselaer Home
Page</a>
Email Link:
<a href="mailto:userid.rpi.edu">Send me
email.</a>
Text:
Leave space between your text and the edge of your screen and between
your text and your images. For large blocks of text or complex page
layouts, use <blockquote> . . . </blockquote> or
<table> . . . </table>.
Create style classes to manipulate type size, style, and color.
Use sans-serif type for titles and headings,
sans-serif or serif type for large blocks of text. (In print,
serif type is usually easier to read; on screen, sans-serif type may be
easier to read.)
Do not use dark text against a dark background or light text against a
light background.
Check grammar and spelling carefully and correct as necessary.
Images:
Leave space between your images and your text. For large blocks of text
or complex page layouts, use <blockquote> . . .
</blockquote> or <table> . . . </table>.
Include <alt="Image Title"> within <image> . . .
</image> tags for each of your images for text-only browsers or
slow downloads and for general accessibility and ease of use.
Include <width="number of pixels"> and
<height="number of pixels"> within <image> . . .
</image> tags for each of your images to speed downloading and to
preserve the integrity of your images. Never use width and height tags
to resize images. (When you use width and height tags to resize your
images, you may be asking your viewer to load larger-than-necessary
images, and you also incur the risk of distorting your images.)
Adjust color levels of photographs in Fireworks or Photoshop to brighten images.
Save images at a maximum of 96 ppi.
Use .gif for solid-colored images, .jpg for multi-colored images.
Colors:
Use only the 216 browser-safe colors. Use only the hexadecimal code for
these colors. Use a standard color chart such as Victor Engel's Browser Safe
Palette (select clickable map), or use the
following simple chart to create your own hexadecimal codes
(black=#000000; white=#ffffff):
|
RGB
|
255
|
204
|
153
|
102
|
51
|
0
|
|
Hex
|
ff
|
cc
|
99
|
66
|
33
|
00
|
Thus, to create a bright red, for example, use #cc0000; to create a
dark blue/green, use #003366; and so on.
More Information:
For more assistance with HTML/XHTML, please consult a good HTML/XHTML
book or an online resource such as
John December's HTML Station
or
W3Schools XHTML Tutorial.
For some sample HTML/XHTML web pages, consistent with the W3C standard,
please see:
Sample Writing to the World Wide
Web Web Page,
and
Zappen Home Page (with
JavaScript),
and
Activity Theory as a Methodology
for Assessing Users' Intentions (with Cascading Style Sheet).
Folder, File, and Image Names:
Use only alphanumerics (letters and numbers) for folder, file, and
image names. Do not use spaces or special characters. Also note that
most Web platforms, unlike Windows, are case sensitive. Thus, for
example, an image named "image.JPG," if referenced as "image.jpg," will
display on a local Windows computer but not when posted to the web.
Also note that files within folders must be references as such, that
is, as "Foldername/imagename.jpg," not simply "imagename.jpg." Lack of
attention to these conventions is one of the most common sources of
difficulty for beginning web designers.
