HTML category archive

Email address obfuscator

September 4th, 2005 | Filed under Code snippets, HTML, Javascript, Essential Tools

Every time I have to publish a clickable email address on a web page I wind up Googling Javascript tools that obscure the mailto: link and telltale user@example.com format so that spam bots can’t easily pick up the address and tsunami the user with junk.

There are plenty of tools out there, but none that do all that I wanted: namely, encode the ‘mailto’ bit and display a live preview of the link. So I’ve gone ahead and thrown one together of my own.

Go ahead and give it a whirl, it’s got exciting iframe cross-scripting going on for the preview. *

* For now it’s Firefox-only while I work out the IE and Safari compatibility issues. Tested and works now on Internet Explorer 6 with SP 2 on Windows, Safari on Panther and Firefox Windows and Mac.

Javascript Email Address Obfuscator by Gina Trapani

Create a favicon.ico from any photo

September 3rd, 2005 | Filed under Code snippets, HTML, Design, Essential Tools, Browsers

FaviconThe makers of one of my favorite markup/text/code editors on Windows, HTML Kit, have made a web service available which creates favicons out of images.

Favicons are the small images just before the URL in the address bar of many web browsers.* The images are in the .ico file format, so this web service takes any graphic (like a jpg or gif), resizes it and converts it to the .ico format which includes both a 16×16 and a 32×32 pixel version embedded within it.

It’s a tough challenge finding an image that is recognizable at that size, but totally worth it for the visual branding it brings to your site on readers’ and users’ tab bars and bookmark lists.

Once you’ve created an unzipped your favicon.ico to the web server, include the following inside your pages <head> tag to activate the icon:

<link rel="shortcut icon" href="/path/to/your/favicon.ico" type="image/x-icon" />

* Firefox’s support is probably the best, displaying favicon’s on bookmarks, tabs and in the address bar. Internet Explorer’s support for favicons is pretty much nonexistent.

FavIcon from Pics — how to create a favicon.ico for your website [Chami]

How to use the robots META tag

September 1st, 2005 | Filed under PHP, Code snippets, HTML, Search Engine Optimization

The robots <meta> tag in the <head> of your web page tells well-behaved robots (like the Googlebot) whether or not to index a page and whether or not to follow links on a page. For bloggers and zine publishers, robots should only index the permanent locations of posts, not the ever-changing front page or archive pages.

To use meta tags to direct the Googlebot to your permalinked post locations, insert the following in the <head> on your front page and archive pages:

<meta name="robots" content="noindex,follow" />

That says, “Hey bot, don’t index this page, but follow the links.” You don’t want these pages indexed because they will change every time you post to your site. The posts’ permanent locations, which should be linked on your front page, will never change however, and so the robot should follow the links and index them. Those permanent locations of your posts should have the following in the document:

<meta name="robots" content="index,follow" />

Alternately, if you don’t want the links in your posts followed but you do want your posts added to the search engines’ indices, use:

<meta name="robots" content="index,nofollow" />

To achieve this in a WordPress template or any PHP page where $single is set if you’re viewing a single post’s permalinked location, insert the following into the templates that include <head> tags:

<meta name="robots" content="<?php echo (!$single?'no':''); ?>index,follow" />

HTML Author’s Guide to the Robots META tag [robotstxt.org]

XHTML and CSS quick start templates

August 30th, 2005 | Filed under HTML, CSS

Designer Kevin Hale publishes the set of templates he uses to start coding up XHTML and CSS documents. Being a non-WYSIWYG editor user myself (go plain text!) these will help. (Not to mention there are CSS properties listed there I don’t recognize, so using these will be a good learning experience, too.)

Quick Start Your Design with XHTML Templates [Particle Tree]

Highlight PHP source in HTML

August 30th, 2005 | Filed under PHP, Code snippets, HTML

PHP’s highlight_string function formats and colorcodes PHP source in HTML, which will come in very handy for publishing code snippets on this site.

For example, a simple class called Greeter echoes “Hello, $x” to the screen. It’s source code is formatted with colors and indentation for HTML like this using highlight_string:

Here’s Greeter’s output, and here’s the source view.

highlight_string [PHP manual via Beginner’s PHP]