*** Tutorial/2 pages/1600 words/6 grabs/Neil Jones-Rodway *** *** HTML Tutorial *** *** Standfirst: Neil Jones-Rodway takes a look at some of the more *** useful bits of HTML After last issue's nice and lazy introduction to HTML you can piece together some respectable pages. Afraid they still don't have that sharp look of those you see on the web? Read on... *** Background Stuff The first step towards a more snazzy page is to get rid of that dull grey background and replace it with something more to your liking. The tag is the man for the job - you may recognise it from the skeleton document. It can take a bunch of attributes that alter various aspects of the basic page, a full set being . The bit to change the colour of the background is the BGCOLOR attribute. The colour can be specified either as a name (there's a whole bunch of defined colour names - BLACK, WHITE, YELLOW, RED, etc) or as an explicit hexadecimal RGB value in the form #RRGGBB (so #000000 is black and #FFFFFF is white). Of course, if you change the background to a dark colour, you'll need to change the text colour to something lighter. This is what the TEXT attribute does. The LINK attribute specifies a colour to be used to highlight the links. You may eventually get bored of flat colours, and want to add a smooth texture to the background, so the tag has provisions to specify an image to be used as a background instead. To do this, replace the BGCOLOR attribute with BACKGROUND="..." giving the filename of the background image. Do be careful though when creating these images, as the can dither quite badly in 16 colour resolutions making it hard to distinguish the text from the background. In the case of my example this time round, I'll want a light texture to set the text of a story against. Having a suitable texture, I enter into the HTML file . *** Anti Cubism So now you have a smart background you may want to have your images look as if they belong to it, and not look disjoint as they do with their hard, rectangular edges. All the image formats you can use in HTML are, by their definition, rectangular which is fine if you're into cubism - not so fine if you're not. GIF images have a neat trick up their sleeve to overcome this limitation - transparency. It works quite simply - specify one of the 256 colours to be the "transparent" and when the browser places that image on the screen, for all pixels of that colour the page's background will show through. That's it - no special attributes or extra tags! Creating a transparent GIF is easy. I'll start with my GIF image, a picture of a lightbulb. The image is a black drawing against a white backdrop, so I want the white to become transparent. Now I could either load this image into ImageCopy (version 4 or above) and specify white as the transparent colour in the "Change Format" dialog, or I could use the TRANSGIF.TTP utility (included in the CAB distribution) which is less friendly but workable nonetheless. *** Moving About If you've ever messed about with DTP packages, you'll know that the positioning of images in text is all-important. To allow for this the tag can take a huge number of attributes that make the image sit in the text in just the way you want it to. One of the most basic is the ALIGN=... attribute. It can be used to vertically align the text that appears after it to the top, middle, or bottom of the image (ALIGN=TEXTTOP, ALIGN=ABSMIDDLE and ALIGN=BOTTOM respectively). More usefully it can force an image to "float" on the left or righthand side of the page, with all the text flowing neatly around it (ALIGN=LEFT and ALIGN=RIGHT). Related to these floating images is an extension to the
tag we met last issue. The CLEAR=... attribute forces a line break that moves below a floating image. You can move below an image on the left (CLEAR=LEFT), the right (CLEAR=RIGHT), and of course you can move below images on both sides (CLEAR=ALL). For our example, we'll add the lightbulb image to the top left of the page and have the text flow around it. Before the text of the story commences we'll put in . Then we can add our title image next to it with Story with no name.. *** Other Tricks If you have tried using an image as a link yet (by placing an image in the ... link tag), you will have noticed that the image inherits a border to indicate it's a link. If this looks shoddy (as it often does) then it can easily be removed by specifying a BORDER=... attribute in the image tag. A border value (width) of 0 makes the border disappear, but of course you can make the border thicker too. There are two other attributes that can be used in the tag that deserve a special mention. These are HEIGHT=... and WIDTH=... which, as you can probably guess, specify the size of the image. This helps browsers as they can format the text first, leaving gaps for the images, before loading the images themselves. Twiddling with these values, though, has the effect of stretching and squashing the image to any size you want. *** Tables HTML Tables have two uses. The first is the obvious one - presentation of data. More interestingly, they can be used as a layout tool, much like text frames in a DTP package. The syntax for tables is quite straightforward, but when you have a lot of "cells" you may find it helpful to draw a sketch of your table first. A table is enclosed in the ...
container, which envelops a number of rows (...), each of which envelop a number of data cells (...). So a table 2 cells wide and 2 cells high would be:
...Cell1... ...Cell2...
...Cell3... ...Cell4...
As you might have guessed, you can pump quite a few attributes into most of these tags. In the tag you can specify how wide and how high the table will be by using the WIDTH=... and HEIGHT=... attributes, specifying the size either as a fixed amount (in pixels) or as a percentage or the window width. If you wanted the table to actually be visible on the screen (they are invisible by default), then you need to "turn on" the table's border with the BORDER=... attribute, giving a thickness in pixels. Having a straight table such as that can be quite clumsy. You will often find that you need to "join" cells together to form columns or rows which are a single cell. You can do this by using the ROWSPAN=... and COLSPAN=... attributes. Say, in the above example, you wanted Cells 2 and 4 to become a single cell two units high. The Cell 2 line would become ...Cell2... because this cell now spans 2 rows (hence also no need to declare Cell 4). Quite complicated? Yes it is - you'll find it really does help to draw the table out first on a piece of paper, and then write the table first with a border so you can see the layout. The sizes of individual cells can be fixed by using the HEIGHT=... and WIDTH=... attributes in the tag. Want to have a ream of text on the right, leaving a wide space on the left? Simple, have a two-cell table, the first cell (the gap) having a fixed width (say ...) and the second (the text) taking up the remaining space (...). The final thing to mention about tables is an alternative to the tag. TD means Table Data, and if you have data you may also want Table Headings too. This is the ... tag - identical in all respects to out friend but just formats the text inside slightly differently. Well, that is more than enough to keep you going until next issue. It's been a bit of a rougher ride that the nice and easy introduction, but since HTML is becoming more and more presentation-oriented, there is a lot of ground to cover even on some of the simpler tags! Until next time, happy coding! *** BOXOUT *** QUICK REFERENCE TO IMAGES *** BGCOLOR=... - Background Colour BACKGOUND="..." - Background Image TEXT=... - Text Colour LINK=... - Link Colour SRC="..." - Image Filename ALT="..." - Substitute Text BORDER=... - Border Thickness ALIGN=... - BOTTOM, ABSMIDDLE, or TEXTTOP for Text Alignment - LEFT or RIGHT for a Floating Image - CENTER to centre the Image HEIGHT=... - Height of Image WIDTH=... - Width of Image CLEAR=... - LEFT, RIGHT or ALL *** BOXOUT *** QUICK REFERENCE TO TABLES *** ... WIDTH=... - Width of Table BORDER=... - Border Thickness ... ALIGN=... - LEFT, RIGHT, or CENTER ... or WIDTH=... - Width of Cell ... HEIGHT=... - Height of Cell COLSPAN=... - Number of Columns this cell spans ROWSPAN=... - Number of Rows this cell spans *** ALIGN.GIF Here's how some of the different ALIGN attributes affect the text *** TABLE.GIF With the borders switched on, you can see how this bizarre table is made up *** 2X2TABLE.GIF ******** NO CAPTION ****** Just put it near the bit where I give the code for a 2x2 Table *** TRANS.GIF The difference a bit of transparency can add *** END.GIF The finished story page with floating images and transparent titles *** TABLE_ST.GIF Using a table we can use a two column design, with the story running in the righthand column.