University IT » Web Services » Help » Intermediate HTML

Intermediate HTML

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.

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:  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)

University of Rochester

Need Help