If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the <pre> element. When left unstyled, wild <pre> tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the <pre> tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. In this article, I’ll show you everything you need to create perfect <pre> tags.
First thangs first
Before getting into it, let’s take a moment to ensure we’re all on the same page. The (X)HTML <pre> element is used to display preformatted text, code, or just about anything else. pre tags are ideal for multiple lines of code or text that need to retain character spacing, display unformatted characters, keep inherent line breaks, and so on.
Continue Reading
One way to prevent Google from crawling certain pages is to use <meta> elements in the <head> section of your web documents. For example, if I want to prevent Google from indexing and archiving a certain page, I would add the following code to the head of my document:
<meta name="googlebot" content="noindex,noarchive" />
I’m no SEO guru, but it is my general understanding that it is possible to manipulate the flow of page rank throughout a site through strategic implementation of <meta> directives.
Continue Reading
In my previous article on WordPress title tags, How to Generate Perfect WordPress Title Tags without a Plugin, We explore everything needed to create perfect titles for your WordPress-powered site. After discussing the functionality and implementation of various code examples, the article concludes with a “perfect” title-tag script that covers all the bases. Or so I thought..
Some time after the article had been posted, Mat8iou chimed in with a couple of ways to improve thie script by cleaning up tag names and specifying page numbers for archive views. Apparently, by replacing the $tag variable with WordPress’ built-in single_tag_title();, titles for Tag-Archive page views will display the tag’s “pretty” name rather than the unformatted version. For example, the tag for Pink Floyd will be displayed correctly as “Pink Floyd” rather than the less friendly “pink-floyd”. And so on.
Continue Reading
![[ ~{*}~ ]](http://perishablepress.com/press/wp-content/images/2008/misc-chunks/conditional-tags.gif)
More and more these days, we are all finding WordPress being used as a content management system. It shouldn’t be too tough to see why — highly customizable, a community growing in size and knowledge, and a plethora of options in the way of plugins and simple yet highly effective PHP edits. Thanks to these, you have access to an open source script that allows you to show what you want, when you want, where you want, and how you want in virtually no time. But what happens when you only want a simple variation from one page to the next?
Continue Reading
![[ ~{*}~ ]](http://perishablepress.com/press/wp-content/images/2008/misc-chunks/wp-title-deco.gif)
Keeping an eye on all things WordPress, I have noticed an ongoing fascination with configuring the ultimate WordPress <title> tags. Many bloggers use various plugins to generate differently configured <title> tags depending on particular page views. A good example of this is seen in the All in One SEO Pack, which, among many other things, enables users to specify custom titles for several different types of pages. While there is nothing wrong with this approach, some of us prefer to run WordPress with as few plugins as possible. If you want to create perfect WordPress title tags without a plugin, this post will certainly help you do it. First we’ll explore some of the basics, continue with some common examples, and then conclude with a comprehensive, highly flexible script for generating distinct page titles. All of the techniques presented in this article should work well with virtually all versions of WordPress.
The Basics
The <title> tag is used within the <head> section of (X)HTML pages to communicate the title of the document to both humans (your visitors) and machines (search engines). For dynamically generated sites, such as those powered by WordPress, many different types of pages exist, including:
Continue Reading
Controlling the spidering, indexing and caching of your (X)HTML-based web pages is possible with meta robots directives such as these:
<meta name="googlebot" content="index,archive,follow,noodp">
<meta name="robots" content="all,index,follow">
<meta name="msnbot" content="all,index,follow">
I use these directives here at Perishable Press and they continue to serve me well for controlling how the “big bots” 1 crawl and represent my (X)HTML-based content in search results.
For other, non-(X)HTML types of content, however, using meta robots directives to control indexing and caching is not an option. An excellent example of this involves directing Google to index and cache PDF documents. The last time I checked, meta tags can’t be added to PDFs, Word documents, Excel documents, text files, and other non-(X)HTML-based content. The solution, of course, is to take advantage of the relatively new 2 HTTP header, X-Robots-Tag.
Continue Reading
This post contains random notes for embedding QuickTime within web pages.
QuickTime Embed Attributes via CSS
<style>
<!--
embed, .embed {
pluginspage: http://www.apple.com/quicktime/download/;
controller: false;
autoplay: true;
bgcolor: #000;
loop: true;
}
//-->
</style>
Continue Reading
Embed Windows Media Player via the object tag
Here is the general format for including .wmv files in web pages:
<object type="video/x-ms-wmv" data="http://www.domain.com/path/to/winmovie.wmv" width="340" height="280">
<param name="src" value="http://www.domain.com/path/to/winmovie.wmv" />
<param name="controller" value="true" />
<param name="autostart" value="true" />
</object>
Continue Reading
This XHTML header tags resource is a work in progress, perpetually expanding and evolving as new information is obtained, explored, and integrated. Hopefully, you will find it useful in some way. Even better, perhaps you will share any complimentary or critical information concerning the contents of this article.
Table of Contents
Continue Reading
To help maintain consistency when developing new CSS-styled websites, we have created a complete CSS template file. The file contains every HTML/XHTML tag known to man. This includes tags such as BASEFONT and CENTER, which have been deprecated; tags such as COMMENT and MARQUEE, which are exclusive to Internet Explorer; tags such as SPACER and SERVER, which are exclusive to Netscape Navigator; and even tags such as !DOCTYPE and BASE, which are included merely for the sake of completeness. As CSS selectors, the tags are (almost all) empty, just waiting to be filled with declarations, properties, and values.
Tags that have been deprecated, or that are exclusive to a specific browser, are indicated as such using the following syntax:
|x = deprecated
|e = explorer only
|n = navigator only
These symbols are written next to their associated tag/selector such as shown in the following examples:
basefont|x {}
marquee|e {}
spacer|n {}
Besides individual selectors, the template file also includes several common selector combinations such as various list selector combinations, image-link sets, and series sets like h1,...h6. Additionally, the skeleton.css file provides several common classes, such as .show, .hide, and .clear, and even includes the very popular and versatile .clearfix hack, which is actually like three or four hacks rolled into one. The file is a paltry 4KB in size and free for download via the link below. Leave the credit at the bottom of the file intact and you are free to use the contents in any way you see fit!
Note: This free CSS template file, skeleton.css, is a continually evolving resource. Please share any valuable insights or potential improvements with everyone with a comment or email.
Download the Complete CSS Template File [ .css file | ~4KB | 3467 downloads ]
Fashion stylish deleted text in XHTML via the über obscure del tag.
Code example:
<del datetime="1999-Dec-31T23:59:59+00:00"
title="Text deleted: 31-Dec-1999 @ 23:59">
Terminate me.
</del>
Live example:
Terminate me.
Before today, the extent of my concern with tags involved local post tags via UTW and meta keywords via Autometa. Wanting to dive deeper into tagging, I added metadata Technorati tag links as icons appearing after each local tag link, generally located within post meta information. Adding the icon links is easy. Go to the UTW Options panel and in the “Global Formatting Settings” section, select the Technorati Tag. Then simply add the following (or something similar 1) to your index.php WP loop:
<?php UTW_ShowTagsForCurrentPost("iconlist") ?>
More display options include:
<?php UTW_ShowTagsForCurrentPost("commalist") ?>
<?php UTW_ShowTagsForCurrentPost("technoraticommalist") ?>
<?php UTW_ShowRelatedTagsForCurrentTagSet("commalist") ?>
References
Well, maybe not that obscure..
<pre> — Preformatted character data<em> — Renders as emphasized text<strong> — Renders as strong emphasized text<tt> — Renders font as teletype or monospace<dfn> — Defines a definition term<code> — Defines computer code text<samp> — Defines sample computer code<kbd> — Defines keyboard text<var> — Defines a variable<cite> — Defines a citation<strike> — XHTML Transitional only<del> — Indicates deleted text<ins> — Indicates inserted text<dl> — Defines a definition list<dt> — Defines a definition term<dd> — Defines a definition definition<abbr> — Defines an abbreviation<acronym> — Defines an acronym<address> — Specifies an address<q> — Indicates inline quoted text<bdo dir="rtl"> — Override the bidirectional algorithm<wbr> — Word break, applied by IE and Fx if needed<optgroup> — Labels groups of options in select boxes