In parts 1 and 2 we discussed:
This part will discuss:
You can flow text around an image if the image is narrower than the webpage. To align text:
To put the image left of the text, use a
<IMG SRC="graphic location" ALIGN=LEFT> command.
To put the image right of the text, use a
<IMG SRC="graphic location" ALIGN=RIGHT> command.
We showed how to make a simple table in part 2 of this article. Our first enhancement will be to add a caption. The caption goes above the table if we put it in a <CAPTION>text</CAPTION> or <CAPTION ALIGN=TOP>text</CAPTION> command. The caption goes below the table if we put it in a <CAPTION ALIGN=BOTTOM>text</CAPTION> command.
We can put headers down the left-hand column of a table if we make the first entry for each row <TH>text</TH> instead of <TD>text</TD>.
We can make a header or data cell several columns wide by putting a COLSPAN=n modifier in the <TH> or <TD> command. Similarly we can make a header or data cell several rows high by putting a ROWSPAN=n modifier in the <TH> or <TD> command.
In generating a table, the browser usually determines the width of each column based on the widest cell in that column. Similarly the height of each row is set by the highest cell in that row. If the contents do not completely fill a cell, you can position them horizontally by putting an ALIGN=LEFT, ALIGN=CENTER, or ALIGN=RIGHT modifier in the <TH> or <TD> command. Similarly, you can position the contents vertically by putting a VALIGN=TOP, VALIGN=MIDDLE, or VALIGN=BOTTOM modifier in the <TH> or <TD> command.
Three factors that slow down the loading of a webpage, as seen by the readers, are:
To solve the first problem, if possible include graphics on the same server as the webpage, preferably in the same directory.
To solve the second problem, consider incorporating "thumbnails" in your webpage instead of the complete graphics. These can be created by almost any graphics program by resizing images and saving them under other names (for example, tfilename.extention). Put the thumbnails in your webpage with links to the full-size images, thusly: <A HREF="full-size image"><IMG SRC="thumbnail"></A>
The reader can click on the thumbnail if they want to see the full-size image. If I take a normal-resolution (two stars) picture with my Polaroid PDC640 digital camera, the image takes about 50KB. If I convert it to a 72-pixel high thumbnail with Paint Shop Pro, the thumbnail takes about 2KB. Depending on how many pictures I have on a webpage, this could speed things up by a factor of 10-15!
If you still want to use large graphics on your webpage you can ease the browser's task by telling it how big the picture will be up front. Use an <IMG SRC="whatever" HEIGHT=y WIDTH=x> command, where y and x tell how many pixels to reserve for the picture. Or use an <IMG SRC="whatever" HEIGHT=w% WIDTH=z%> command where w and z are the percentage of the browser's window to reserve for the picture.
If the reader loads the entire webpage, it will take almost exactly the same time with or without the HEIGHT and WIDTH modifiers. But instead of having to wait while each image is slowly painted on the screen, with these modifiers included the reader sees text quickly thrown onto the screen around empty boxes. Then the reader will see several boxes at a time being filled in. The reader thus has the option of waiting for all the images to appear, or can scan the webpage and jump elsewhere immediately if they so desire. In either case, the reader's perception is that the webpage loads faster than the untouched webpage.
NOTE: You can get some really weird effects if you specify HEIGHT and WIDTH with a different aspect ratio than the actual image, because the browser will stretch/squeeze the picture to fit the box.
One of the best ways to enhance your design and writing skills is by studying and emulating works that you admire. Unlike most programs, where few people besides the original programmers get to see and study the source code, the HTML for webpages is available to everyone. All the browsers that I have used let you look at the source HTML. Just go up to the browser's taskbar and click on File. Look for a Source or HTML entry in the pulldown menu. If you don't find anything there, click on View and look for Source Document or something of that sort. When you click this secondary command, you will get another window showing all the HTML for the webpage. You can also save the webpage to your computer, then use your editor's cut and paste functions to incorporate some of its ideas into your webpage.
Turn on your computer and try your own hand at creating a webpage! If I have piqued your curiosity, and you would like to read the next part, click on this link.