Astro Lesson #23 :sodding.odds.and.sods

Well, looks like it's that time again - time again for another peek behind the scary scenes of HTML-land and for Retrogrrl to earn her keep here at r.e.t.r.o.c.i.t.y.

*Prod* *Prod* 'Wake up Retrogrrl! Your little cosmonauts are waiting ... '

What? She hasn't prepared a lesson? Bad, bad Retrogrrl - but what shall we do? Throw them some crumbs? They won't like it, but very well ....

Today we shall give you some odds and sods to play with - bits and pieces to delight and enthral one and all - well, mildly interesting things anyway. And next time, we promise to delve into the dark world of javascript rollovers ... woooooooooooo (background noise of evil cackling!)

horizontal.html.howto

Retrogrrl uses Corel Photopaint (and yes, Photoshop users, it is an excellent package and handles all the filters you can throw at it!), and many a young web-ite has lots of fine and dandy fun with the simpler PaintShop Pro package , but we recognise that some people are graphically challenged. They have neither the time nor the inclination to fiddle with these fancy fripperies. In such cases, these individuals scour the web for free icons, buttons and bars - but even this takes time.

It is possible to make HTML do a little of the work for you, instead of the usual vice-versa.

The old < hr > or horizontal rule can be used to good effect. Normally this is used as a horizontal line (fancy that!) between paragraphs or sections on a page, but did you know that it's width and size can be manipulated? Explorer - but not Navigator - can even handle color tags for further effect. Look here :

---

This is achieved with :

<hr width="300" noshade size="+6" color="blue">

by removing the 'noshade' navigator displays a sold grey line - IE users will have to use their imagination :

---

So what, you say - this is no fun at all, but wait - there's more ...

---

---

---

as can be seen - changing the width results in box shapes - handy as an alternate page divider or bullets.



dandy.dividers.and.bountiful.bullets

Don't care for the fact that navigator can't see the colors? Why not use underscores? As a long line, or split by using the &nbsp; tag (non-breaking space, to you) __________ _   _   _   _   _   _
or fullstops with bold ( < b > ) turned on ............... how about ... ********* ~~~~~~~~~~~ @@@@@
or anything else you fancy - don't forget some symbols - like the above @ are best used with the HTML equivalent of the usual Iso-latin characters (cha cha cha!). For instance &#64 is the equivalent of @ - you can find a list of these at HTML Goodies



spooky.invisible.links

A long time ago in a galaxy far, far away, ReTroGrrl talked about links, alinks and vlinks - remember that these are used in the body tag to determine the color of linked text, the color displayed when that link is clicked and the color displayed when the link has been visited - a neat trick is to set the color of the alink to the color of the background - this creates a simple illusion - as though the linked text momentarily 'disappears' as it is clicked - of course, it is merely changing to the color of the background. Neat huh?

leading.characters

It has been customary to use a one-pixel gif as an alignment assistant due to the restrictions of HTML, which was not made for graphic design, but merely as a means of putting text 'out there'. Creating a transparent one-pixel gif, placing it strategically and specifying varying heights and widths means that it can push text or graphics around, without the visitor seeing anything but what you intend them to see - HOWEVER, many people choose to surf with graphics turned off - the consequences being that your wonderfully aligned text will now be accompanied by empty boxes - ugl-ly!

A work around method, or plain ol' alternative is to use text, colored to the same shade as the background color which will remain invisible and still give the illusion of aligned text
tttttttttttttttttttttttttSee what we mean? We just inserted a row of 't's' and specified the font color to match the background - and guess what - this does not interfere with the viewing pleasure of the graphically-resistant.

This use can be extended by oversizing the invisible text. By doing this at the end of a paragraph or sentence, greater control can be given to leading - spacing between lines. Similarly, inserting invisible text between letters or words can add control to letter stttptttatttctttitttntttg.



lets.talk.about.gifs.baby

If the need should arise to RESIZE a gif, convert it to RGB color before resampling it, and then convert it back to 256 colors (or less) before resaving - this will result in a less jaggy image - remember that this kind of bitmap graphic is pixel based - resizing causes the graphic's relationship with the originally mapped pixels to become distorted.

DITHERING - the fewer the colors in an image, the more likely it will look better without dithering - besides which dithering increases file size.

Using a gif as a BACKGROUND? Don't interlace it when saving - the page will not load until the background is completely interlaced - this means that the background will display in a fuzzy manner before it finishes loading - which is fine for individual icons, pictures etc - but we don't want to discourage our audience from disseminating the page information any longer than possible. Ditto for progressive Jpegs - which involve the same concept.

A little while ago we talked about HYBRID colors, and a number of ways to achieve this with the limited 'browser safe' color palette - Boxtop software makes this task even easier with its Colorsafe shareware. This is actually a better product than the previously mentioned 'ditherbox', offering more options as well as being a fully working model. Use it to match colors to a browser-safe variation, or create custom color backgrounds. This company also offers compression and animation programs at very reasonable prices.



hundreds.and.thousands.and.millions

Here's something that ReTroGrrl just discovered

We all know by now that in order for web graphics to look purty to as many different users as possible - all playing with a variety of monitors, browsers, operating systems and resolutions, we need to stick to the browser safe palette of 216 colors.

When saving as a GIF, we can reduce the palette further for those images with few colors - otherwise we use the JPEG compression standard, having worked in the safe palette. This is all in order to avoid dithering - systems 'guessing' what colors they can use to replace those we specify in our graphics, but that a particular system does not have. If the guess is not so good - spottiness occurs, sometimes to such a degree it looks like a bad case of the measles all over your lovely web art.

BEWARE! Always set your system to 256 screen colors or millions of colors - not thousands. An anomaly occurs when saving work created in thousands of colors to the web safe palette - whereby a color shift will cause the graphics to become 'unsafe'. Believe us, we know cos we did it.

Can't seem to set your system to millions of colors at the resolution you prefer (ie 24 or 32 bit at 800 x 600)? This factor is governed by the video card and its drivers - you need more video memory to handle this type of resolution - or maybe you need updated drivers for the video card - check your manufacturers web site as they are usually available for free download - for instance Diamond Stealth offers a variety for its products. Believe us, we know this too cos we had this problem. Ah, nothing like problems to give you more knowledge! Necessity and all that ....



low.down.low.sourcing

Heard of the Low src tag? Its incorporated into the <image src=""> tag, and is used to display a small scale copy of the graphic currently loading - the idea being that something simple loads while the viewer hangs around waiting for the larger, glorious technicolor graphic to arrive - perhaps a black and white duplicate. it can also be used to load 2 consecutive images - rather like a poor man's imitation of an animated gif. We saw it used at one site, first loading a closed envelope, then an open one. Of course, this would be no good far down a web page - the second image will probably have loaded before the visitor gets that far down and the effect would be ruined.

liquid.ice

some new terms for you to digest - courtesy of project cool. An Ice web site is one that has a fixed width design - particularly those that are clamped up against a left hand border - no matter what size you make the browser window, the placement of the text and graphics do not change.

A liquid site on the other hand is one which moves with the browser window resizing - ie use of centre tags and other alignment techniques causes the web page content to shift to the centre of the new browser window. Liquid is preferable but not always possible

Ah. so much to learn, and so few light years to learn it all in. Begone now, to chew upon these chortlings and come back next time for a smattering of something new, something exciting, well - something else.