** Regular / 2 pages / ? words ** ** On Reader disk logo ** After last issue's leisurely introduction Neil Jones-Rodway looks at some tags to give your pages an edge over the competition... Backgrounds No doubt you'll have seen the snazzy backgrounds displayed by some pages. The tag takes care of these - you may recognise it from last months skeleton document. Various attributes can be used to alter aspects of the basic page, a typical set is: ** BC on ** ** BC off ** The tag which sets background colour is the BGCOLOR attribute. This can be specified by name (for example BLACK, WHITE, YELLOW, RED, etc) or as three hexadecimal numbers representing Red, Green and Blue (RGB) values in the range 00 to FF (or 0 to 255 in decimal). In this format #000000 is black and #FFFFFF is white. The predefined colour names are listed in the README.TXT in the HTML_TUT folder on the Reader disk. More comprehensive details, including the RGB values for each colour, are included in the RGB_CODE.TXT file included in the HTML3KRZ archive on the AC#3 Reader disk. If you select a dark background colour you'll need to select a light text colour, this is set using the TEXT attribute. Similarly the highlighted colour for links is set using the LINK attribute. 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="..." adding the path and filename of the background image between the quotes. Do check your background image looks good in mono, 16 and 256 colour resolutions as some images look terrible when dithered making some pages hard to read without turning the background off. In the examples accompanying this article I've selected a light texture (BACK.GIF) over which the story text is displayed: ** BC on ** ** BC off ** Anti Cubism Now we have a smart background let's add some images. All the image formats available for use in HTML are, by definition, rectangular which is fine if you're into cubism but not ideal for irregular shaped logos etc. Happily GIF images include a neat feature, called 'transparency', which overcomes this limitation. Any single colour in the GIF palette can be set 'transparent'. When the browser displays a transparent GIF on-screen all pixels in the specified colour are not displayed allowing the background to show through. Because this is handled directly by the image and the browser no HTML attributes or tags are required. ** TRANS.GIF here ** To create a transparent GIF you need some suitable software. ImageCopy (v4 or later) or the TRANSGIF.TTP included (included in the CAB distribution) both work fine. Taking the example lightbulb GIF image which is black against a white background we could either load it into Imagecopy and set the transparent colour via the 'Change Format' dialog or use TRANSGIF.TTP to determine which colour in the palette is white then the number this colour index number manually and output the result - both work fine but Imagecopy is easier. Moving About If you've laid out pages using a DTP package, you'll be aware of options to position images within text. Using HTML the tag supports a bewildering number of attributes to help display the image exactly as desired. ** ALIGN.GIF here ** One of the most basic attributes is ALIGN=... which can be used to vertically align text so it appears after the image aligned to the top, middle, or bottom of the image (ALIGN=TEXTTOP, ALIGN=ABSMIDDLE and ALIGN=BOTTOM respectively). More usefully images can be forded to 'float' on the left or right hand side of a page, with any text flowing neatly around it (ALIGN=LEFT and ALIGN=RIGHT). Related to floating images is an extension to the
tag we used last issue. The CLEAR=... attribute forces a line break to flow text beneath a floating image. Text can be flowed under images on the left hand side (CLEAR=LEFT), the right hand side (CLEAR=RIGHT) or both sides (CLEAR=ALL). ** END.GIF here ** In this example the lightbulb image has been aligned to the left at the top of the page before the text of the story commences: Images can be used as links by placing them inside a ... tag and by default these display a border - to indicate it's a link. If you would prefer to remove the boarder (which often looks better) it can be turned off by setting a BORDER=... attribute inside the image tag. A border value (width) of 0 turns off the border with higher values displaying increasingly thicker borders. Two other attributes used inside the tag are HEIGHT=... and WIDTH=... which, as you can probably guess, specify the size of the image in pixels. Setting these values to anything other than the actual size of the images squashes, stretches and distorts the displayed image - which could be useful, I just can't think of an example! Browsers use these atrributes to format and display text first, leaving gaps for the images, before displaying the images. This is especially useful for anyone reading your pages online because they can start reading while the images are downloading. Tables HTML tables have two uses. The first, and obvious use, is the presentation of data in table format. The second is more interesting and includes its use as a layout tool, in much the same way text frames are used in DTP packages. The syntax for tables is straightforward, but with large numbers of 'cells' it's easy to make mistakes and get confused - try drawing a sketch on paper first. Tables are enclosed inside 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 looks like this: ** NP font here **
...cell1... ...cell2...
...cell3... ...cell4...
** NP font off ** ** 2X2TABLE.GIF here ** I'm sure by now you won't be surprised to learn various attributes can be inserted inside a tag to specify the width and height of the table using the WIDTH=... and HEIGHT=... attributes - specifying the size either as a fixed amount (in pixels) or as a percentage of the window width. By default, tables are invisible. To make tables appear on screen you have to 'turn on' a border using the BORDER=... attribute, specifying the border thickness in pixels. Often plain tables are not enough so the ROWSPAN=... and COLSPAN=... attributes can be used to 'join' table cells into columns or rows consisting of single cells. For example, in the 2 by 2 table example, to merge cells 2 and 4 into a single 2 units high cell the cell 2 line would be changed to: ...cell2... This cell now spans 2 rows so there's no need to specify cell 4. Clever eh? If you draw tables on paper first, and code with a border turned on, it's easier to keep track of what's happening. Once the table is performing properly the border can be turned off, if it's not required. Here's a more complex example: ** TABLE.GIF here ** The sizes of individual cells can be fixed by using the HEIGHT=... and WIDTH=... attributes in the tag. To create a page of text to the right, leaving a wide space on the left create a 2 cell table where the first cell forms the gap with a fixed width (for example ...) and the second cell contains the text taking up the remaining space (for example ...). Headings can be added to tables using the ... tag instead of the usual tag which means Table Data. The tag is almost identical to the tag but formats text slightly differently. That's it for another issue. HTML coding is increasingly presentation-oriented and there is a lot of ground to cover - even for some of the simpler tags! Until next time, happy coding! ** IMAGE BOXOUT ** Quick reference to images ** NP font ** 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 ** end images boxout ** ** TABLE BOXOUT ** Quick reference to tables ** NP font ** ... 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 ** end tables boxout **