Category: WebStandards

Enforcing and encouraging online standards such as XHTML, CSS, JavaScript.

Gradient HTML

Provided that all of the ‘buttons’ in your application already use the HTML <button> tag, this is a simple matter to accomplish:
1. Modify your CSS to include the following:

button{background:#eee url(../images/button.png);}

2. Upload the gradient image that you intend to use. (in this example button.png)

3. Done.

For your convenience, the image I use is available here (Gradient Button Background Image)

NOTE: MSIE exhibits some poor caching behaviours when background images are used, look for a post on this elsewhere in my blog.

ROBOTS.TXT

I’ve been asked about this file in many projects i’ve worked on. It resides in the root of the website, and has no external references to it, however, there is usually a lot of requests for it in the server logs. (Or… “404 Not Found” Errors if it doesn’t exist).

Additionally, automated security audit software will often indicate that this file itself is a possible security problem as it can expose hidden areas of your website (more on this later).

Here’s what it’s all about….

ROBOTS.TXT is used by spiders and robots, primarily so that they can index your website for search engines (which is usually a good thing). However…. there are times when you don’t want this to occur. Some spiders/robots can be too agressive on your servers, consuming precious bandwidth and CPU utilization, or they can dig too deep into your content. As such you might want to control their access.

The Robots Exclusion Protocol sets out several ways to accomplish this goal. Of course the spider must comply with this convention.
1. ROBOTS.TXT can be used to limit the access:

Example that limits only the images, javascript and css folders:

#robots.txt - for info see http://www.robotstxt.org/wc/robots.html
User-agent: *
Disallow: /images/
Disallow: /js/
Disallow: /css/

2. A <meta> tag on each webpage indicating spider actions to take.

<html>
<head>
<title>example</title>
<meta name="robots" content="INDEX, FOLLOW, ALL" />
</head>
<body>
...
</body>
</html>

Values, there are a few other attributes, but these are the most common….
INDEX -index this page
NOINDEX – do not index this page
FOLLOW -follow links from this page
NOFOLLOW -do not follow links from this page
ALL – same as INDEX, FOLLOW
NONE – same as NOINDEX, NOFOLLOW

In most cases, a spider/robot will first request the ROBOTS.TXT file, and then start indexing the site. You can exclude all or specific spiders from individual files or directories.

As for the earlier bit on security, since this file is available to anyone, you should never indicate sensitive areas of your website in this file as it would be an easy way to find those areas.

Disabling the HTML <font> tag

Oreilly has a great way of making the <font></font> tag non-functional in cases where the content may contain it (for uncontrollable reasons):

Mind you, this won’t validate properly, but it will disable the usefulness of the tag itself.

Add the following to your CSS definitions

font { color: inherit !important;
background: inherit !important;
font-family: inherit !important;
font-size: inherit !important; }

Recommended ‘simple’ replacement for the tag (when you don’t have time to restructure the entire site) is to use the <span></span> tag with appropriate styles to replace all instances of the <font></font> tag in the markup.

Whoami

I’m skotfred, aka ‘Giant Geek’, developer of (predominantly web-based) applications. Primary development done with JSP/Java, PHP, XHTML/CSS/JavaScript. Previous applications in VisualBASIC, C/C++, Perl, COBOL/CICS, BASIC (various), Assember (PC & MVS), and Pascal.

Standards ARE everything, particularly when building for multiple platforms… look for more ramblings soon!