CGS 3063 HTML tutorial QuickRead 9

QuickRead 9: Readability and such

Readability

You would have noticed that it takes some amount of double thinking to write HTML pages that look good on a browser, and are also neatly formatted when you open them up in an editor like to Pico to edit. It's natural to tend to compromise on the latter in the beginning but as your pages get more comprehensive, it pays to invest in a good formatting style. For instance the two pieces of HTML code listed below appear identical to an HTML browser (Netscape/Explorer/AOL):

<table><tr><td width=20> </td></tr><tr><td>There were 4 knights of the shining order <ol><li>DcArthur, Duncan<li>Fancier, Katz<li>Stockopp, Schekel<li>Studfarm, Joe</ol></td></tr></table>

<p>
<table>
    <tr><td width=20> </td></tr>
    <tr><td>
            <font color=magenta size=+2>There were 4 knights of the shining order</font><br>
            <ol>
                <li>DcArthur, Duncan
                <li>Fancier, Katz
                <li>Stockopp, Schekel
                <li>Studfarm, Joe
            </ol>
    </td></tr>
</table>

As humans, we prefer to edit HTML code that looks well formatted. It is easy to understand, thus saving us time to punch in more code. Different people have different styles that they feel comfortable with. The second option listed above is a pointer to what a well formatted HTML document might look like. Some other suggestions follow:

Have tags like , <tt> that influence text appearance, embedded within the text.
Avoid breaking URL's onto two lines. JavaScript and some StyleSheet code will simply not work if a broken onto two lines.
Use new lines: tags and tags between blocks of text or tables. Space is free on your HTML page. Use it liberally.

Comments

HTML has probably the weirdest comment characters among all the languages I've come across. In time you'll begin to accept and may be even enjoy it's quirky look.



Comments come in handy when you head out to more complex structures and have a few outside file references that need to kept track of. They can also be used to temporarily remove a link such as this one here:
flowers can become flowers
by commenting out the link tag. flowers</a>
This is what we do on the class homepage to delink all the assignment and solution links.

Escape tags

It's the burning quesion of the day. Did you realize that when I discuss a particular tag, I'm able to actually display it on the page with the less than and greater than symbols. For instance: . Why did the browser not count it as a regular bold tag. The answer is escape tags. They are of the form &_ _ _ ; The ampersand acts as the escape character which tells the browser to do something a little different with what comes next. The semicolon signifies the end of the escape sequence. The browser will interpret anything of this form differently than it would regular text. Here are some of the commonly used escape tags. The "non breaking space" just means an actual space. As you have problaby noticed by now, extra spaces in your html file are ignored.

Character	Code	Code
"	"	"
&	&	&
<	<	<
>	>	>
non breaking space
©	©	©
®	®	®

We also have a more comprehensive list if you want some less commonly used characters (like foreign characters: ñ, æ, Ç, etc.).

How not to offend viewers with your superior intelligence!

In the process of learning new things, we are instructed/tempted to use/implement/experience them. In the HTML context, experimenting with new tags is great as long as you don't try and use them just to show that you know how to use them. This "Look at me, I know!" fallacy leads to overburdened pages that are bereft of any aesthetic. Use your knowledge and judgement to sift through all the tags out there to pick the ones that are best suited to the design of your page. And that's when you really know.

For instance, a lot of HTML newbies like to use (read misuse) the "blink" tag (we don't mention the tag in this class and if it has crept into one of the tutorials or elsewhere, please let us know). It's flashy and so is immediately rewarding. But it's also highly distracting and as some web authors like to describe it, pure evil. Internet Explorer's "marqee" tag ranks right up there with "blink." Any element on your page that is constantly moving (like most animated gifs), bad navigation, humongous graphic or picture files, auto loading audio files, non-functioning javascript or applets, can be irritating enough for your friends to vow never to come back to your site. Yeah, yeah, we hear you. Through the course of this tutorial, we only say how to use the tags and not how to use them aesthetically. That's becuase we aren't graphic designers. And frankly, some of our pages suck. Here is a site you might want to check out to see if your page sucks. Feel free to make the neccessary changes.

Get behind the wheel!

Try typing out the following. Also use your own stuff. Be imaginative!

<html>
<head><title>And then God created tables</title></head>
<body bgcolor=#4455aa text=white link=orange alink=yellow vlink=purple>

The most wonderful day of my life, this is not! 

The most wonderful day of my life, this is not! 

This page © CGS3063 1999. 

Ever wondered if this will show up 
Ever wondered if this will show up 

</body>
</html>

Index