|
Formatting documents correctly is very important for creating a good
Web site. Users won't stay to look around if the page looks busy, confusing,
or plain. Web authors have to try to use just enough images to make the
page pleasing and interesting but not enough that the page takes too
long to load or looks too busy. Also, Web pages must be designed with
all users in mind, and different users are using different kinds of computers
and browsers.
Contents:
Differences between Graphical and Text-based Browsers
The majority of internet users at the University of Rochester view the
world wide web with graphical browsers: some examples include Netscape,
MS Internet Explore and Opera. There are still users who use text based
browsers, such as Lynx. The university Web Group encourages you to make
your pages accessible to as many people as you can. By making your page
accessible to users with text based browsers, you also make you page
accessible to blind users who surf the web.
Formatting Specific to Graphical Broswers
- Backgrounds: Don't put important information in the background
image.
- Tables: The text in most tables looks very jumbled and confusing
in Lynx.
- Image Alignment: Other graphical browsers have more limited
capabilities than Netscape. Even if they do align images on the left
or right correclty, the <BR CLEAR=ALL> tag probably won't work.
Things that Work Differently in Lynx
- Images: Lynx does not display images at all. Use the ALT option
in the IMG tag to supply alternate text. For example:
- <IMG SRC="logo.gif" ALT="University Computing Center">
- Center: Lynx ignores the <CENTER> tag. However, it does
center H1 text. For example:
- <CENTER><H1>This is always centered.</H1></CENTER>
- Line Breaks: Every time you use a <P> in Lynx, it leaves
a blank line. In Grphical Browsers, multiple <P>s result in one
blank line. In Graphical Broswers, there is a blank line automatically
added before and after every list. In Lynx, there is a blank line inserted
afterwards but not before.
- Comments and Nesting Tags: In Grphical Broswers, you can comment
out other HTML code like this:
<!-- <H1>This is my page</H1> --> In
lynx, this WILL NOT WORK. You cannot put one tag inside of another,
even a comment.
- Special Characters Charaters such as © (©) are
only viewable in some Graphical broswers. Other special characters,
with accents, etc., usually show up OK in Netscape and other graphical
browsers but not very well in Lynx. It is acceptable to leave off the
accent in "resumè", for example, because in Lynx it would look
like "resumË".
HTML Tricks
Aligning Images
Graphical Broswers allows images to be aligned in many ways. To do this, include
the phrase ALIGN=______ in the IMG tag. Fill in the blank with RIGHT, LEFT, MIDDLE,
TOP, ABSBOTTOM, ABSMIDDLE, ABSTOP, etc. Aligning the image to the right means
that the image is put on the right edge of the page and the text fills in the
area next to it. Aligning to the left means that the image is on the left and
the text fills the area to the right. By default, the image goes on the left
and one line of text goes next to the image near the bottom. The next row of
text begins under the image. Choices like middle, top, etc., allows you to move
this single line of text. When aligning images, remember that different people
see your pages at different widths, so some people may have a lot of room next
to the image and some may not have any.
If you choose to align an image to the right or left and write text next
to it, what happens if you only want a few lines of text next to it, and you
want the next paragraph to begin below it? Use the <BR CLEAR=ALL> tag
to end the left/right alignment and put the next line of text below the image.
Links Within a Document
Another trick that may not be included with basic HTML instruction is the technique
of linking to specific places within documents. You need two tags to do this;
first, create an anchor at the place you want to link to. For example, type <A
NAME="here"></A>. Then, at another place in the document, link to it
like this: <A HREF="#here">. To link to this place from another document,
use: <A HREF="documentname.html#here">, where documentname.html is the
name of the file that the anchor is in.
Definition Lists and Indentation
A problem that many Web authors come across is the problem of indenting or creating
a table without using a <table>. For example, let's say you have a list
of staff members and e-mail addresses that, in print, is organized in two columns.
The best way to organize this in HTML is to use definition lists. This has three
parts: <DL> and </DL> to begin and end the list, <DT> for every defined
term (in this case, the staff member's name), and <DD> for every defined
definition (in this case, the e-mail address). The defined terms are not
indented, but the definitions are. For example:
- Joe Smith
- jsmith@somewhere.com
- Jane Doe
- jdoe@somewhere.com
A way to indent entire paragraphs is to use <BLOCKQUOTE>. Just remember
not to over-use any of these formatting tricks, or it will make your page look
busy and confusing.
Special List Numbering
If you are very picky about organizing lists, some Graphical Broswers have a
trick you may like. You can create ordered lists with numbers, capital letters,
roman numerals, or lower case numbers. Use <OL TYPE=1> (default), <OL
TYPE=A>, <OL TYPE=I>, or <OL TYPE=a>.
A List of DOs and DON'Ts for Web Style
Don't:
- Don't use blink
- Don't use construction signs or say "Under Construction"
- Don't put more than 8 links on your home page
- Don't make the home page too long (about one screenful, although the screen
size varies)
- Don't say "click here"
- Don't make everything big and/or bold.
- Don't use busy or dark or big backgrounds
- Don't use too many colors or icons
- Don't use overly large images or too many small ones
- Don't use images wider than 460 pixels
Do:
- Use ALT text for images
- Include a standard disclaimer (see below)
- Be descriptive when making links
- Use consistent images and color schemes
- Keep Lynx users in mind (i.e. don't use tables if you don't need to)
Include a Standard Disclaimer:
- Who is responsible (name and/or department)
- How to contact them (link or e-mail address)
- Last updated date
- Copyright by University of Rochester
- URL (optional)
|
