The
web page we prepared in the
previous part
did
look like a proper web page, although a rather plain no-frills one, like so many others you will find in the web. There are many more ways to make our page better looking and also more functional.
Of these ways, colors and images in my opinion play the most important role.
Colors
If we don't specify a color for the page background and for the text (also for the link text), our page will have the default look of the browser chosen by our visitors. This is: Black letters in a dull gray background with bright blue underlined links (red or purple if visited). Most people don't ever change this to something they like better.
I especially hate the gray background.
Today's browsers (also those of 4 years ago), support the use of different colors through HTML. The newer of them also support colors specified through
style sheets
.
Style sheets are the way to go, but older browsers (and computers) will stay with us for some more time. So it is best to use style sheets for our colors and also add a few words in our HTML, so that our pages will not look dull gray in older browsers.
Remember the
doctype
(DTD) definition we mentioned in the
first page of this tutorial? This lets us use the best of two worlds: both the newer HTML 4.0 and some elements of the older HTML 3.2.
Background Color
For the background color, all we need to do is add an attribute to the body element, the bgcolor. For our chosen color, we can use the name of a color, like red , black or blue , but there are some traps in this, as you will see in my strange colors page. It is far better to use the color's hexadecimal number, which you can find in my hex color page, at least for the basic 216 " safe" colors.The syntax is:
<body bgcolor="#ffccff">Your body text</body>
will make our background pink.
Text and Link Color
The attribute for the text color is (what else?)
text.
For the link color, there are three attributes:
- link shows the (unvisited) link color.
- vlink shows the visited links color and
- alink shows the color of the active links (optional); that is, the color of the link text, when we press the mouse button on it.
The syntax for all of the above is:
<body bgcolor="#99ffff" text="#663300" link="#0033ff" vlink="#993399">Your body text</body>
This will make the background light blue, the text brown, the unvisited link blue and the visited one purple.
This is how our test page will look with colors. Provided that you like the colors, our page looks much better.
Note :You don't have to define background and text color, if you don't mind default colors, but if you define one of the two, you must also define the other.
Just imagine the case where you have defined black as your background color and forgot to make the text white or other light color: black (default) text on a black background would certainly be invisible.
Images
Images add spice to a web space. They can also make it or break it.
Some possible disadvantages of the use of images are:
- They increase the loading time of our pages. There are today more ways than one to connect to the Internet and most new ways are faster, but they are used by only a small portion of your visitors; most of them still have to see the web through a slow modem.
- Some combinations of background images and text color, can make the text unreadable.
- Too many images, especially animated ones, distract the reader from the web page content. You can't very well read a page, when out of the corner of your eye, you can perceive a lot of small or large things that move.
- And of course, some of your visitors, might not like your images - but this depends on their personal taste - you cannot account for all tastes, anyway.
Images as Page Backgrounds
To use an image as your page's background, you only add one more attribute to the body (called: background ), like this:
<body bgcolor="#99ffff" text="#663300" link="0033ff" vlink="993399" background="image.jpg">Your body text</body>
where image.jpg is the path and file name of your image.
1. You must also specify colors and images through style sheets. These body attributes are outdated and may not be supported some time in the future.
2. Notice above the syntax of element attributes:
--a. The element tag (body) is opened and closed, but the attribute tag is only included when opening an element - it is not repeated when closing one.
--b. An element can have many attributes, which are contained in the element's start tag and separated by each other by single spaces.
--c. The attribute properties (in our case colors and image urls) are enclosed in double quotes. A common mistake is to use single quotes instead of double (not sufficiently pressing the shift key in a pc) or forget to close them. This can have unpredictable results in the rendering of the page by the web browser.
Inlined Images
Another use for images is what is called inlined images (as opposed to linked ones). This comes from the early days, when browsers did not support an image shown inside a web page. You had to type the image url or choose the link (the usual a href) to it to see or copy the image.
The image element is called img and has many attributes:
- The src (source) attribute has the image url and filename. Without it, no image will be shown.
- The alt (alternative text) attribute shows the text that will be seen instead of the image, in a text browser (or read in a voice browser). This text will also be seen in a graphical browser where the user has turned images off for faster browsing, and as a tool tip, when we put the mouse cursor over the image (although that is not correct behavior - you should use the title attribute for tooltips -it also works on links). Your HTML is not correct if you don't use alt text.
- The
width and
height attribute. This simply states the image's dimensions in pixels. Any graphics program can tell you this, even web browsers when you look for image properties.
If you omit this attribute, your images will still show, but the page (depending on the number of images) will be redrawn and change every time that a new image is downloaded. You have probably noticed this in some web pages. If you include these attributes, the browser will reserve this space when it loads your text, so people can start reading right away. If the space is not reserved, every time you try to read a line of text it will move away from your eyes (quite disconcerting), and the page will not be final, until all the images have downloaded.
You can also specify a different width and height from the one of your image. Your image will then not be shown actual size, but smaller or larger. Making it much smaller serves no purpose (although a small resizing might help with the design of your page); it will only increase downloading time - your page visitors might get fed up and leave. Making it bigger will show it heavily pixelated (could be used as an effect) - it is usefull for single color or plain images: you can make a 1 pixel image into a horizontal or vertical line for example. - The
border attribute is useful if you want to add a border to your image to look like an image frame. Its properties are a pixel value.
An 0 border is most often used in images that are also links (enclosed in an a tag). If no border is specified for an image link, the image will have a border the same color as the usual links. - The align attribute, which is not supposed to be used in HTML 4.0 for images, aligns an image to a specific relation with the page and the surrounding text. Its possible values are: left and right for a floating image either to the left or to the right of the page. (To center the image to the center of the page, you must enclose the img element in a <div align="center"></div> tag). The top , middle and bottom attributes are not used much - they align vertically the text on the right and the left of the image, or its relation to the baseline.
It is time to make a new test page with an inlined and a background image. The page looks more interesting, although busiest for purists.
Page Layout and Fonts
Now, what else can be done? It would look better if we could change the
fonts
used. Also, it would certainly benefit from certain changes in the
page elements' alignment
.
The fonts style can be changed with HTML (italic, bold etc.) and the size with both HTML and style sheets (preferable), but there is not much that can be done with the font faces. The only actual choice a web author has, is between serif and sans serif fonts, because with so many variances in fonts installed and operating systems, there are not many other things in common between our visitors fonts.
As for the alignment: Bear in mind that no alignment can be precise in HTML (unless you post the whole page as an image) - this is both the advantage and disadvantage of HTML. There are screens with small screen resolutions and with large ones and the text will always fill the screen or window. There are people with impaired vision who can choose to see web pages in larger letters. HTML adapts itself to all these situations and no web page looks the same to all its visitors. So if you try to force your visitors to see your page exactly as you see it (or want to see it) on your screen, you risk making your page unusable by many of them.
Style sheets are the prefered way to set your fonts and your page's layout, but there are some things you can do with HTML.
Fonts
You can change the font style for words that you want to show different, emphasize, etc. It is better to choose the HTML 4.0 tags for this rather than the HTML 3.2 ones, as the first are supposed to work with voice browsers as well (for example the emphasized text, which will usually be in italic, would be read in a voice browser with an emphasized voice, however that would sound).
These elements are not part of the font element, which is not used in HTML 4.0 anymore (though there are times when it comes in handy). They are the following:
- The <em> (emphasis) element. In HTML 3.2, you would write <i> (italics) instead.
- The <strong> element. In HTML 3.2 you would write <b> (bold) instead.
- The <u> (underline) element. It underlines text that is not a hyperlink. This is HTML 3.2 - there is no suitable alternative in HTML 4.0, and what there is, is poorly supported by browsers.
- In some cases, you may need the
sub (subscript) or
sup (superscript) element, in order to show one or more letters smaller and above or below the rest. Examples:
-The temperature is 25 0 Celsius.
-2 2 =4
-The chemical type of water is H 2 O
- The <strike> element. This is also HTML 3.2, but the <delete> one of HTML 4.0 is not the same. This makes strike through text. It is not used much.
- The pre (preformatted text) element. This is supposed to show the text exactly as you type it in plain monospace text. In other words you should be able to show the page source with all the tags, brackets etc and the browser would not try to interpret the tags as usual, in which case you would have to use special characters, for entities such as " for " , <> for <> etc. In practice, however, browsers are not perfect and you might have to use special characters even for preformatted text.
These elements are part of the
font element and are used in HTML 3.2. The use of this tag was an HTML nightmare; it involved a lot of typing, nested tags that you forgot to close properly, and it also increased considerably the size of web pages. Style sheets have saved our poor fingers from most font tags, but it is still used, in isolated words or phrases, where it is more convenient than style sheets.
It is necessary to remember that you cannot nest anything in a
font
tag, not a paragraph and certainly not a whole page. So, you must open and close them almost in every line. If you want to change more than a few words it is better to use style sheets, or you will get sore fingers :-)
- The
size attribute. It can take different values, both relative and absolute. It is best not to use absolute values as these are rendered quite differently between different browsers and operating systems, but a relative value of +1 or -1 is very useful: it makes the font enclosed in these tags
<font size="+1">larger</font>
larger by one increment than the rest of the paragraph font. - The color attribute. It is useful if you want to show a word red for example. An extensive use of this attribute (and not in proper HTML) was made in my strange colors page.
- The
face attribute specifies whether your font will be for example arial or Times New Roman (for Windows users). Many fonts must be listed, separated by commas, starting from the specific and ending in the generic (serif or sans serif) and including a PC and a MAC font. In this way, if the viewer does not have the first listed font installed, his browser will try the second, the third and so on. An example below:
<font face="verdana,helvetica,arial,sans serif">some words</font>
Unless you want to show a small phrase in a different font, it is not worth it to do this with HTML; use style sheets instead.
So, after we have added some of the above, we have
this page, which has some more variety in its text. There is much more that you can do with HTML, but this is enough to get you started, and, also, I have been writing this for days on end and am tired.
When this tutorial is continued, I plan to include tables, some basic forms, basic frames (though I don't like them) and a style sheet tutorial. Phew! quite a lot.
Stay tuned!