A good designer knows that tables should not be used for layout, but rather for displaying columns and rows of data. HTML enables the creation of well-structured, well-formatted tables, but they’re used infrequently enough to make remembering all of the different elements and attributes rather time-consuming and tedious. So to make things easier, here is a clean HTML5 template to speed-up development for your next project:

• Update, June 9th: Here is an absolute basic vanilla template for any markup language.
• Update, June 9th: Here is a better template for HTML5. For HTML 4.01 or anything XHTML-flavor, use the following template:

<table dir="ltr" width="500" border="1" 
			summary="purpose/structure for speech output">
	<caption>Here we assign header information to cells 
			by setting the scope attribute.
	</caption>
	<colgroup width="50%" />
	<colgroup id="colgroup" class="colgroup" align="center" 
			valign="middle" title="title" width="1*" 
			span="2" style="background:#ddd;" />
	<thead>
		<tr>
			<th scope="col">Name</th>
			<th scope="col">Side</th>
			<th scope="col">Role</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>Darth Vader</td>
			<td>Dark</td>
			<td>Sith</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Obi Wan Kenobi</td>
			<td>Light</td>
			<td>Jedi</td>
		</tr>
		<tr>
			<td>Greedo</td>
			<td>South</td>
			<td>Scumbag</td>
		</tr>
	</tbody>
</table>

Ahh, gives me goose bumps just looking at it. You can use this code with any markup language, whether HTML5, HTML 4.1, or any flavor of XHTML. Here is how this basic template looks in the current web page ¹ (using different data and with styles removed):

Continue Reading

Even before CSS3 introduced a cornucopia of new border properties, CSS2.1 provided plenty of great functionality, enabling designers to style and enhance borders in many different ways. But now with the many new border properties available with CSS3, much more is possible, including everything from background border images, asymmetrical border radii, border transformations, custom fitting, and much more. While not every browser fully supports all of these new stylistic possibilities, we can practice progressive enhancement to create beautiful, well-styled borders for modern browsers while supporting the dinosaurs with suitable fallback styles.

Many of us know how easy it is to use CSS border properties to do cool stuff like image-free, cross-browser rounded corners, but there is so much more that is possible with all of the new CSS3 properties. In this article, we’ll explore the CSS3 and CSS2.1 border properties while keeping a keen eye out for obvious patterns and taking note of key points along the way. When it’s all said and done, hopefully we’ll have a better understanding of the “big picture” concerning the functional and syntactical mechanism behind the magical world of CSS border properties.

Continue Reading

After several months of working diligently behind the scenes, I am officially announcing my latest project: a new book on WordPress. Without giving away too much at this time, here are some facts about it:

• It’s focused on WordPress
• It’s co-authored between Chris Coyier and myself
• It’s going to be awesome

Chris and I have been working on the book for several months now and are very pleased with the results. Both of us have some — albeit limited — knowledge of the publishing world. Truth be told, we don’t have a publisher yet and aren’t quite sure about how to go about finding one.

Does anyone happen to know more about finding a good publisher? Are there any publishers out there interested in talking about this book? Any other folks have any ideas or advice? Please share your ideas in the comments area below or contact me directly.

With the imminent release of the next series of (4G) blacklist articles here at Perishable Press, now is the perfect time to examine eight of the most commonly employed blacklisting methods achieved with Apache’s incredible rewrite module, mod_rewrite. In addition to facilitating site security, the techniques presented in this article will improve your understanding of the different rewrite methods available with mod_rewrite.

Blacklist via Request Method

This first blacklisting method evaluates the client’s request method. Every time a client attempts to connect to your server, it sends a message indicating the type of connection it wishes to make. There are many different types of request methods recognized by Apache. The two most common methods are GET and POST requests, which are required for “getting” and “posting” data to and from the server. In most cases, these are the only request methods required to operate a dynamic website. Allowing more request methods than are necessary increases your site’s vulnerability. Thus, to restrict the types of request methods available to clients, we use this block of Apache directives:

Continue Reading

I recently added OpenSearch functionality to Perishable Press. Now, OpenSearch-enabled browsers such as Firefox and IE 7 alert users with the option to customize their browser’s built-in search feature with an exclusive OpenSearch-powered search option for Perishable Press. The autodiscovery feature of supportive browsers detects the custom search protocol and enables users to easily add it to their collection of readily available site-specific search options. Now, users may search the entire Perishable Press domain with the click of a button.

And you can do it too! Adding customized OpenSearch-powered search functionality to your own site is a great way to foster site awareness and reinforce brand identity, while providing a tool that will benefit your visitors and improve the usability of your site. Even better, implementing OpenSearch functionality is extremely easy, completely free, and requires zero maintenance. In this article, I provide an easy, 3-step tutorial on how to add OpenSearch functionality to your site in less than five minutes. After the tutorial, we will look at the many different ways to customize your OpenSearch implementation, including examples, search options, and much more.

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” ¹ 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 ² HTTP header, X-Robots-Tag.

Continue Reading

In this article, I discuss the different MIME types available for XHTML and explain a method for serving your documents with the optimal MIME type, depending on the capacity of the user agent. Using either htaccess or PHP for content negotiation, we can serve complete, standards-compliant markup for our document’s header information. This is especially helpful when dealing with Internet Explorer while serving a DOCTYPE of XHTML 1.1 along with the recommended XML declaration.

According to the RFC standards ¹ produced by IETF ², web documents formatted as XHTML ³ may be served as any of the following three MIME types:

Continue Reading

Update! Check out CSSresetr for an easy way to test and download the best reset styles for your next design.

Just a note to let everyone know that I have updated my previous CSS reference article, A Killer Collection of Global CSS Reset Styles. The updated version features two more excellent CSS resets, as well as the updated Meyer reset and a link to Eric’s official CSS Reset page. The two new reset styles are the Tripoli Reset and Tantek’s Reset:

Tantek’s CSS Reset

Dubbed “undohtml.css”, Tantek’s CSS Reset is a solid choice for removing many of the most obtrusive default browser styles. This reset removes underlines from links and borders from linked images, eliminates padding and margins for the most common block-level elements, and sets the font size to 1em for headings, code, and paragraphs. As an added bonus, Tantek’s reset also “de-italicizes” the infamous address element! Nice :)

Continue Reading

This article will help beginners understand a few “feed” essentials: what they are, how they work, and how to use them..

So you are a little new to the Web. As you surf around, you keep noticing these little orange squares and multicolored boxes placed next to phrases such as these:

• Subscribe via RSS
• Subscribe via XML
• Subscribe via Atom
• Subscribe via Feedburner
• Subscribe to My Feed
• Subscribe to Main Content
• Subscribe to Comments

..and so on. Although these invitations to “subscribe” come in many flavors, they are all basically doing the same thing: enabling visitors to receive information from the site without having to manually visit the site itself. By subscribing to your favorite sites, you can stay current with updated content delivered to the “feed reader” of your choice. There are many feed readers freely available around the Web. In many cases, you can even have feed subscriptions delivered directly to your email account. We’ll talk more about different types of feed readers here in a bit. For now, let’s examine a few different types of feeds and how they might be used.

Continue Reading

For future reference, this article covers each of the many ways to access your WordPress-generated feeds. Several different URL formats are available for the various types of WordPress feeds — posts, comments, and categories — for both permalink and default URL structures. For each example, replace “http://domain.tld/” with the URL of your blog. Note: even though your blog’s main feed is accessible through many different URLs, there are clear benefits to using a single, consistent feed URL throughout your site.

Continue Reading

As some of you (e.g., Louis) may have noticed during the recent site redesign, I decided to switch the default doctype from XHTML 1.0 Strict to XHTML 1.1. Just in case you were wondering, XHTML 1.1 is different than XHTML 1.0 in three important ways ¹:

1. On every element, the lang attribute has been removed in favor of the xml:lang attribute
2. On the a and map elements, the name attribute has been removed in favor of the id attribute
3. The “ruby” collection of elements has been added

Beyond these three differences, XHTML 1.1 is identical to XHTML 1.0. Personally, I chose to markup my current design with XHTML 1.1 because of its advancement of the web-standards paradigm: complete separation of structure, behavior, and presentation.

References

• ¹ As listed at W3C Working Draft for XHTML 1.1

Update! Check out CSSresetr for an easy way to test and download the best reset styles for your next design.

Using CSS to style semantically meaningful (X)HTML markup is an important key to modern web design practices. In a perfect world, every browser would interpret and apply all CSS rules in exactly the same way. However, in the imperfect world in which we live, quite the opposite frequently happens to be the case: many CSS styles are displayed differently in virtually every browser.

Many, if not all, major modern browsers (e.g., Firefox, Opera, Internet Explorer, Netscape, et al) implement their own generalized CSS rules, which often conflict with designer-applied styles. Other browsers fail to implement properly various CSS rules, making a mess of pages that happen to display perfectly in other browsers. Even worse, some browsers completely ignore specific aspects of CSS altogether, entirely ignoring widely accepted CSS attributes and properties.

Continue Reading

Okay, I know what you’re thinking: “Oh great, not another article about WordPress nofollow!!” Well, if that sounds like you, I have good news! This is the last post (at least for awhile, anyway) concerning all things nofollow, dofollow, and even no-nofollow, for that matter. In fact, this post isn’t even about nofollow! It’s simply a summary of the articles I have written involving nofollow-related topics. The articles fit together so well, one might suppose they were planned deliberately as a bona fide series. Hmmm.. I’ll leave it up to you to decide:

The Perishable Press no-nofollow/dofollow Article Series

1. Death to Nofollow — when I first saw the light.
2. Repenting of My Nofollow Sins — after a long, cold trip to the dark side.
3. Comprehensive Reference for Dofollow Plugins — no more excuses for nofollowing links.
4. The One-Minute Dofollow WordPress Upgrade — see how easy it is to upgrade your site.
5. The Deluxe One-Minute Dofollow Upgrade — selectively remove nofollow attributes.
6. Inustrial Strength WordPress Dofollow Upgrade — “wipe them out.. — all of them.”
7. Nofollow Blacklist for Commentator Links — gain power over spam scum.
8. WordPress Nofollow-Blacklist Plugins — nofollow blacklisting the easy way.
9. Dofollow Whitelist for Commentator Links — reward your favorites with some dofollow love.
10. The Ultimate Nofollow Blacklist — “this blacklist is now the ultimate power in the universe!”
11. Much Ado About Nofollow: The Perishable Press Dofollow Series — one post to list them all!

..and with that, we now return to our regularly scheduled programming ;)

Is that spam or are you just trying to comment?

Removing nofollow attributes from your WordPress-powered site is a great way to encourage comments and attract visitors. Many commentators will leave useful, constructive feedback, but there will always be a few losers who would attempt to game your generous link love. Fortunately, identifying these mindless link whores is relatively easy. Here are a few priceless examples of actual spam (i.e., linked) comments left here at Perishable Press (links removed for obvious reasons):

• Work at Home Start earn $150/day right now. Part time work for everyone. Nationwide opportunity Our adress. Part Time Job
• Hi all! Yo u may find it interesting to visit some helpful info on in . lorazepam index index and very creative : ind-z inde in ciprofloxacin index and else ind diaz index tramad soma. neuro Lip or imitrex-i imitrex i-diflucan claritin-i i and look this map , zoloft zithromax soma index3l sildenafil index1.html inde Regards
• Many forms virus available disease burden especially when baycol inclusion. Legal and new corona beclometasone means to beconase for rate beldin insomnia. With adoption and transfer the experience belladonna counts at bellamine-s lawsuits. Pennsylvania over costs had bactrim after about fixed. Glutamate is to see bactroban loss of balziva material. The calf with lots banan for better defense verdict scale. Bank or greater dependence nurses quit banthine naloxone. Dynamics of dding between barbital is taken disruptive. Plasma protein made such sequential samples barbituric open. Children would cocaine vaccines baros yet those basiliximab skin.

Continue Reading

Recently, while deliberating an optimal method for eliminating nofollow link attributes from Perishable Press, I collected, installed, tested and reviewed every WordPress no-nofollow/dofollow plugin that I could find. As of the writing of this post, I have evaluated 12 15 dofollow plugins, all of which are freely available on the Internet.

In this article, I present a concise, current, and comprehensive reference for WordPress no-nofollow and dofollow plugins. Every attempt has been made to provide accurate, useful, and complete information for each of the plugins represented below. Further, as this subject is a newfound interest of mine, it is my intention to keep this post updated with fresh information, so please bookmark it for future reference. Finally, please help expand/enhance this list by dropping any relevant information via comment area below. Thanks & enjoy!

Continue Reading

In this post I have assembled a concise collection of conforming, bare-bones document templates for the following doctypes:

Document Templates

XHTML 1.0

• XHTML 1.0 Strict
• XHTML 1.0 Transitional
• XHTML 1.0 Frameset
• XHTML Basic 1.0

XHTML 1.1

• XHTML 1.1
• XHTML Basic 1.1

HTML 4.01

• HTML 4.01 Strict
• HTML 4.01 Transitional
• HTML 4.01 Frameset

Continue Reading

Virtually every article written here at Perishable Press requires at least one or two “special” characters. Some of these characters — such as quotation marks, hyphens, and dashes — are very common, while others — such as the copyright symbol, bullet, and arrow — happen less frequently. As a blogger, I find myself repeatedly using a select handful of very common special characters. Very rarely do I ever find myself blogging a latin “Ä” (i.e., capital letter “A” with a diaeresis). To save time and effort, I need a quick reference that targets only the characters I find useful as a blogger. With that in mind, I assembled the following table of essential Unicode (UTF-8 encoded) characters ¹ for bloggers:

Continue Reading

The target attribute for anchor elements (<a>) specifies the location in which the referenced document should load. For example, to open a link in a new window, we would use a target value of _blank. Although this is a commonly employed technique, the target attribute has been deprecated by the W3C and is not valid (X)HTML. Regardless, the target element remains a useful tool for practicing designers and developers. Here, we present the attribute values for the target element:

Continue Reading

URL’s frequently employ potentially conflicting characters such as question marks, ampersands, and pound signs. Fortunately, it is possible to encode such characters via their escaped hexadecimal ASCII representations. For example, we would write "?" as "%3F". Here are a few more URL character codes (case-insensitive):

Continue Reading

The Perishable Press Official Offline Resource Library
(requires username & password)

There are currently three formats for expressing date/time in Greenwich Mean Time (GMT). All examples represent the date, "July 04, 2050". The time for all three formats is expressed as "hour:minutes:seconds".

Here is the preferred, standard format¹ for the Internet. This format is defined by RFC 1123 (updated from RFC 822):

# RFC 1123 Standard GMT Format
Mon, 04 Jul 2050 07:07:07 GMT

The programming language C uses the ANSI standard format¹ in its asctime():

# ANSI Standard GMT Format
Mon Jul 4 07:07:07 2050

The RFC 850 format² is now obsolete (RFC 1036) and should not be used:

# RFC 850 Standard GMT Format [obsolete]
Monday, 04-Jul-50 07:07:07 GMT

¹ Weekday abbreviations: Mon, Tue, Wed, Thu, Fri, Sat, Sun
Month abbreviations: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec

² Weekday abbreviations: Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
Month abbreviations: January, February, March, April, May, June, July, August, September, October, November, December

References

• Greenwich Mean Time Website
• Official US Time
• Time Zones

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

• Important Information
• XML Declaration
• The !DOCTYPE
• The html tag
• The head tag
• The title tag
• base & item
• http-equiv
• link tags
• meta tags
• Geo meta tags
• Dublin Core tags
• References

Continue Reading

Our official location for dumping notable color swatches:

• | #1A1A1A
• | #383838
• | #666677
• | #E1E1E1
• | #F0F0F0
• | #F2F2F2
• | #F3F3F3
• | #FFFFEE
• | #CCDDAA

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 | 3459 downloads ]

What is Perishable Press?

Perishable Press began as a virtual journey into the digital chaos of the blogosphere. While initially designing the site, we began posting a variety of content, primarily information related to the project itself. During the development process, as the site exploded into a frenzy of ideas, possibilities, and experimentation, we continued to post code examples, useful links, and tons of reference material. Slowly, as the site began to attract visitors, we began to clarify our scope, define our niche, and produce content accordingly. Currently, the site enjoys a steady flow of visitors, a growing number of subscribers, and a great group of contributors.

In its present capacity, Perishable Press serves as an online resource through which diverse multimedia projects, interests, and ideas come together as an integrated expression of creativity. Perishable projects include writing, drawing, painting, digital graphics, desktop publishing, website design, audio mixing, video editing, and digital photography. Perishable Press also features ideas and philosophy concerning the process of cultivating creative enlightenment, integrating creative endeavors, and maximizing creative lifestyles. Other topics involve subjective relativism, critical analyses, and, of course, biblical principles.

The general purpose of Perishable Press is to provide an open forum through which information is collected, organized, and shared. The information covered and presented via this website focuses on topics from several different perspectives, including creativity, artistic expression, inspiration, and criticism. From these perspectives writers explore the intellectual understanding of their particular creative endeavors, which generally involve art, music, video, graphics, websites, technology, and lots of philosophical contemplation and debate.

Continue Reading