A Writer's Website - Graphical Elements

Navigation:  Home   Tag, You're it. Basic Markup  Navigation, Anchors & Links   Graphical Elements   What Next?

With images and graphical elements, size matters! Try to keep content images to less than 50K and accent elements to under 5K in order to make your site accessible to people with slower dial-up Internet connections. It's also a good idea to keep the total page size down to less than 100K. If you have lots of images, put them on separate pages using small thumbnail images to link to pages containing the larger images.

Most browsers handle JPEG, GIF, and PNG images. Other types such as Flash images often require special plug-ins, which are beyond the scope of our article. JPEG images are best used for photos. GIF and PNG work well for line art and simple cartoon images.

Small GIF or PNG images work well for buttons or accents, and the <hr> tag can be very useful as a graphical element to break up long text passages and make them more visually interesting. Web pages generally need more graphical and navigatlon elements than equivalent printed text to make them appealing to viewers. Don't fall in love with graphics though. Your writing is what you're trying to showcase, so make sure you don't overwhelm it with cosmetic elements.

The code to produce these lines is:

<hr align="right" size="7" width="90%">>

<hr align="left" size="5" width="70%">

<hr size="3" width="50%">

The size attribute of the line refers to thickness in pixels. The line may be aligned either to left or right. If you don't specify an alignment, the line will be centered. The width across the page can be specified in either pixels or as a percent. I usually prefer to use percent since the actual size will depend on the size of the browser window used, which usually looks better. I would also usually align a group to the same position as seen below.

This provides an interesting graphical accent while needing less time to transmit than any image.

<image>

Here are two cute anchors, the first shows at actual size as created and the second is doubled in size. Notice how the image is degraded somewhat and how irritating an animated GIF can get while you are trying to look at something else on the page. They are good for attracting attention but need to be used sparingly. They can be created to cycle only a specific number of times. The picture of Gary on his website winks exactly once, and then stops. That's much less distracting, and you'd think him some kind of pervert if he just kept winking at you all the time you were on his site.

Here's the code for the images above.

<img src="images/anchor.gif" width="100" height="82" border="2" align="left" hspace="20" vspace="5" alt="Actual size anchor">

<img src="images/anchor.gif" width="200" height="164" border="2" align="left" hspace="20" vspace="5" alt="Double size anchor">

The src attribute links to image source file. This can be a fully qualified URL, but it's considered bad form to link to items that are not on your site, so put the image in the same directory with the HTML. The other attributes explain themselves, and make adjustments to the appearance. Only the src attribute is required, but you do need to align the image left or right to get text to flow around it.

<font>

<font face="Serif" size="+2" color="#FF0000">&lt;font>&lt;/font>

This code produces the line above. Notice that to show special characters used in tags themselves I needed to use the special sequences &amp; for the ampersand symbol, &gt; for a greater than symbol, and &lt; for a lesser than symbol. This code makes the fancy first letters seen here at the beginning of paragraphs and can be used to make other decorative elements from simple text. Putting an image of a character at the beginning of a paragraph would require several kilobytes to be downloaded to the browser, where this technique only uses several bytes. On slow connections this will make the page seem much more responsive. You do lose some control. Depending on the browser the character may not display the way you expect, particularly if you use an unusual font.

So how do I get these images?

You can use images from your own digital camera or scanner, and you can also find lots of images online. Do an image search on any of the popular sites for the topic and style of clip art, illustration or image that you are interested in. Be aware that some images are copyrighted, so you will need to get permission to use them just as you would quoted text from another author.

You will also likely need to make some adjustments to the size and quality of the image to make the file size fit your requirements. If you have an image editor, which can do this, use it; otherwise there is a free program called IrfanView available here. I will show you how to use this program to make the adjustments necessary for putting them on the web.

Using IrfanView to Resize Your Images

	Here we've started IrfanView and opened our duck picture, selected Image|Information to see the image size. The original and current sizes are about half way down the Image Properties window. The disk size is shown toward the bottom.
	Select Resize on the Image menu to start the resize dialog. 640 x 480 is probably as large as you would want to go for general use on the web and smaller is better. You can use the zoom in and zoom out buttons to get an idea of what your image will look like at various sizes before you commit to any one size. It is quite often useful to use the Image|Sharpen command after resizing to restore crispness to the image. You can also select an area of the image by holding down the left mouse button, the crop the image by selecting Edit|Crop selection. All of these adjustments are very subjective, so don't be afraid to experiment. Just make sure to work on a copy of the original.
When you have what you want, chose File|Save as..., which will present you with some further choices. For web use I recommend setting the quality at 85 or so, but again this is subjective, so you'll need to experiment to see what works best for you. Some of the more expensive image editors will make the process much simpler and save you time as well allowing more control over the look of your images. You should certainly consider getting one if you plan to work with a lot of images. There are other free options that you might consider as well, but check out IrfanView. It is a small quick loading program, which is useful for viewing images and making minor corrections even if you have a much more powerful program.

Tables are pretty much what you would expect, rectangular arrays of text but they may also contain graphical elements, so aside from their normal use to display tabular information, they are also commonly used to control the layout of elements on the page. Here's a sample, which contains a lot of different ideas that you might want to use for your site. Look closely at the various attributes used in the tags and the effects that they have.

A table consists of the <table> </table> tag pair containing one or more rows defined by the <tr> </tr> tag pairs which in turn contain one or more data cells defined by <td> </td> tag pairs.

Ordinarily each row must contain the same number of data cells, but you can alter this with the rowspan and colspan attributes to make a cell take up more space in the table. The rowspan reduces the number of data cells you need in the following row or rows not the current row. This can be quite confusing. It's a good idea to use lots of comments and indentation to make the structure as clear as possible.

An important limitation of tables is that you can only create rectangular areas, no complicated T or L shapes allowed. Each cell in a given column will be displayed with the same width. You can change the colors of individual cells to create some nice effects. You can even specify a different background image for each cell, but the different browsers may display it differently and not the way you expect.

Except for really simple tables, it's best to lay things out on paper or in a spreadsheet, so you can figure out exactly what goes in each row. It's also a good idea to add one row at a time and then check to see that it looks the way you want rather than adding everything at once and then trying to go back and fix it.

Navigation:  Home   Tag, You're it. Basic Markup  Navigation, Anchors & Links   Graphical Elements   What Next?

Created on ... January 19, 2005