HTML & CSS Tips and Tricks

STREAMLINE YOUR CODE (AND YOUR LIFE) WITH GRAPHICS

The following sample layouts were created using only HTML and CSS:

One doesn't need a knowledge of either bridge or Boggle to appreciate that the construction of each of those modules entailed a lot of code — perhaps many dozens of lines of it.  Any one of those listings would be enough to clutter an HTML page.

Even more importantly, various browsers can and do display such code in unpredictable ways.  That is unacceptable to me, and it should be to you as well.  Perhaps the coding gurus know of a way to compel the various browsers to conform to their every whim, but I do not.  In any case, I don't have to deal with such matters, and neither do you.

Perhaps you already have figured out the elementary solution to this problem, yet the crummy output on many web pages shows that their creators have not done so.  I will state it here, just for them.

Irrespective of your actual coding methods, when you are satisfied with a complicated module, simply save it as a graphic file using a screen-capture program.

Having done that, the entire construct can be effortlessly added to any desired page, and it will to be displayed just as it looked when you captured the image; moreover, placement of the module can be more easily accommodated.  The six constructs above were referenced by just six total program lines on this page.  What a deal.

There is another useful application of this method as well.  The sample image of the Boggle layout was designed using a special font that is not commonly available.  In such a case, a simple way to ensure that the font you desire is the one that will be viewed is to — you guessed it — save it as a graphic!

JPG files are the obvious choice for photographs or other items requiring more than 256 colors, but otherwise the most useful format is GIF.  Not only do GIFs have a small file size and are 'lossless', but one also can suppress any choice of color in order to let the page-background show through — an incredibly valuable feature.  All nine of the images on this page are GIF files.

(Note: Be sure also to save the code used to create a module if there is any chance that you would wish to edit it later.)

YOU SHOULDN'T NEED THIS INFO, BUT...

Countless freeware screen-capture programs are available, including the ones built into Windows itself.  My personal favorite is the freeware Gadwin Printscreen, which optionally loads on startup, then saves your choice of screen-rectangle to your choice of image format.  No editing functions are available, yet none are needed for this purpose.