Daily Twaddle

Have you ever wanted to show code in your web page or blog without interpretation by the browser?

This is what I want you to see:

<img src="<?php gravatar("R", 40); ?>" alt="" />

Who has time to translate each character-code into proper mark-up? You don’t have to! Chris Brewer makes it easy with his “Display HTML Sample Code.”

Just paste your HTML code into the text box and click “clean.”

Righteous!

I decided to go with a transparent gif at the top of each page. I do this on all my sites anyway so I can make the logo a link to the home page. So, I just gave some style to the alt text that appears when the images are turned off.

The HTML looks like this:

<div id="headbox" >
  <a href="index.html"><img src="images/transparent.gif"
  alt="Company Name" /></a>
<h1>Company Name</h1>
</div>

And here is the CSS:

#headbox img
{border: none;
/*make the transparent gif the same size as the company logo */
width: 800px;
height: 100px;
/*make sure the alt text font can be seen on the background */
color: #f7f7f0;
/*make it look like a header*/
font: bold 24pt "Times New Roman", Times, serif;}
#headbox h1
/*hides the real header for CSS completely off*/
{display: none;}


The Pros:

1. It’s easy to make a transparent gif.
2. No hacks or extra markup for certain browsers.
3. Minimal coding.
4. Great flexibility when changing the overall look of the site.

The Cons:

1. The H1 is invisible to search engines.
2. I’m surprised that I can’t think of any more cons. I must be tired.

The result is pretty cool. Here is images off:

Here is images on:

Images make a dramatic difference in the overall feel of the website. And I suppose it could go either way (good or bad). I’m going to start using more images (and preparing for images off with my solution). I don’t know if anyone else has tried this, but I’m going to give it a snappy name. Like “the covert gif.” I never tried the Campaign Monitor’s solution. I’m sorry Matt.