html tricks

HTML tricks serves as a more advanced section for technophiles. Presented are a few tricks rarely talked about in the web design & HTML books. Use the links below to navigate to the listed topic.

Wrapping text around images
Using background images
Using the PRE tag (old school tag)
Wrapping forms around elements: best practices
Don't know your font?

Wrapping Text Around Images

Wrapping text around images is best supported using CSS. Before starting I would draw out what it is I want to see on paper first. That way, you know what your goal is before you start.

Let's say you want an image on the righthand side and the text to the left. Picture 1.

Using Background Images

Background images often tile either horizontally or vertically. In other words, let's say you have a strip of sea turtles and you want them to crawl across the page. You will tile your image horizontally. This is done through the following code:

this is a test.write <p> with pre tag

Using the PRE Tag (old school tag)

What is this <pre> tag anyway? Well, first of all <pre> stands for 'preformatted'. The <pre> tag is used for documentation by technical writers and documentation specialists. This tagging method allows you to document and demonstrate a piece of code you without that code actually being executed by the server.

Second, please note the font that the <pre> tag uses. It uses Courier which is standard documentation font. Courier is the easiest to read and is universal because each letter, character and number take up the same amount of physical space on the screen. This is what 'preformatted' means. So, when you go to print it out on a printer, you don't have to worry about spacing or special drivers for fonts because it is a preformatted font.

The text below is using the <pre> </pre> tags.

Begin <pre> tag text. Follow the pre tag text across the page

Wrapping Forms Around Elements: Best Practices

Forms can be very frustrating to work with. What I find the easiest is wrapping a form around an entire table like this.

Since you'll most likely have to format a form so that the columns line up correctly with the form elements, I would just as soon wrap the form tag around the table itself.

Of course, you can also wrap the form element around the table data elements. Here's an example. It's really a matter of style and coding.

Here's one more more wierd tid bit. Depending upon your page layout, the form tag can sometimes create an unwanted extra space. I had this happen with one project a few years ago. It was so frustrating trying to figure out what it was. The code looked correct but there was still this extra space. I fixed the problem by wrapping the form element just around the table data cells instead of having it wrapped around the entire table. So, if you have this problem, relook at your form and play with the postioning of your form element.

Here's the code for that one:

Of course test it and make sure it works for you!

Don't Know Your Font?

If you have ever dealt with a client who had a graphics designer design them a logo, neither of you may know what the original font used is. What do you do?

You can take a scan of the image. Scan and focus in on the letters only. Go to whatthefont.com and submit your image. They have software that will "read" the letters and give you a resultset. Their technology works pretty well in identifying your font. You can then purchase the font for Windows, Mac, or in PostScript if you are doing print.