September 23rd, 2008
Using .htaccess to hide file extensions on your server
For security purposes, as well as upgrades, W3C recommends that you hide your file extensions. Should you ever change your programming language, (e.g. from PHP to Cold Fusion, or whatever), your urls will stay the same, regardless - meaning bookmarks won’t break, search engine page rank won’t be affected, etc.
Intrigued? It’s super easy: new media arts has the exact text you need to add to your .htaccess file to achieve this. To implement it on your site:
1. Go through and remove all extensions from file urls. E.g. in your links, take out .html, .php, .cfm or whatever you’re using. Your links will now just go to http://www.yoursite.com/page instead of http://www.yoursite.com/page.html
2. That’s IT! easy, right?
Remember, the link with the text is specifically written for .php. Just updated it with the specific file extension(s) you’re using.
It’s ALWAYS a good idea to make a backup of files like your .htaccess when you’re making changes. I’ve dabbled and generated more than my fair share of server errors. Save yourself the panic. Make a backup.
Make Grunge Text using CSS
This great tutorial from Janko at Warp Speed tells you how to create great looking grungy text with one image and simple css. There are some mild issues with this (make sure you aren’t floating images or text on the same line as your h1,2 or 3 tags, or they’ll get the grunge effect, too), and to ensure it validates, simply stick a space code between span tags.
WTF is validation and why do I need to do it?
No one’s going to tell you that validating your code isn’t a pain in the ass, or that best practice is easy, cross-browser compliant or fun.
It IS important though. Why? Because although some people are always going to think the W3C is dumb, (for whatever reason), they are the standard in web development, and you are probably not a good enough designer/developer to effectively counter their arguments - which are pretty reasonable, truth be told.
LIKEWISE, the clients and employers you may or may not run into down the road WILL give a shit about W3C. Better to get the painful process out of the way now. And, the good news is that you’re probably already 75% there if your pages are rendering properly. Here are some tips:
Take your site on a test run through the w3 validator
Why? So you can get a feel for some of the most common errors.
DOCTYPE
What is doctype? This little line of gibberish text identifies just what kind of code you’re presenting. This basically tells browsers what’s going on and how to read it so that it displays properly - kind of important, actually, right?
If you’re using CSS and XHTML tags (you probably are), you need to put the following header into the top of your header/files:
| Code: |
| <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> |
You can find more information about doctype here.
But is that all? If you’re using XHTML not quite - for W3 to give you the green light, you need one more thing:
XHTML Language Declaration
What is this f*ckery, you ask? I’ll tell you. The language declaration is necessary for international purposes. Why do you care? Because your site isn’t just available to native speakers of your language. If it’s in English, you need to say so - with your language declaration. Why is this important?
It’s a good idea, generally, but it helps search engines, classification and the like. Don’t frustrate your visitors by giving them a webpage they can’t read. Y’know?
What does a standard text declaration look like?
| Code: |
| <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”> |
Okay, smart guy, where does this shit go on my page?
These two lines should go at the very top of your page/header before any other code.
Other common issues:
Improper tags/tag structure
Remember, in XHTML transitional, all your tags need to close. In basic HTML, you could have unclosed tags. Here’s the break down:
| Code: |
<br> becomes <br />
<img hrc=”http://www.whatever.com/image.png”> becomes <img hrc=”http://www.whatever.com/image.png” />
<p>Paragraph
<p>Paragraph 2
now should be:
<p>Paragraph</p>
<p>Paragraph 2</p>
REMEMBER - space dash close tag. Make sense? |
Structuring errors:
| Code: |
<p><ol>
<li>This is a list!</li>
</ol></p> |
Lists, headers, and elements like these shouldn’t be wrapped in p tags. If their margins aren’t large enough, adjust those settings in your CSS file - don’t use p tag hacks to fix the problem. Save yourself time in the long run by just having the correct margins set. This makes your page much more consistent, too.
Permalink |
Filed under: Geek Week, web development |
alex |
Comments (0)
Tags: common validation errors, css, doctype, grunge text, hide extensions, htaccess, validation, w3, xhtml declaration