Dr. Design – From File Extensions to Masked eMail

Another month, another waiting room full of patients for Dr. Design. As usual, he takes email address ails, multiple window woes, and the diagnosis of numerous file extensions in his stride…

File Extensions – Which is Which?

Hey Doctor Design. There are so many different file extensions for HTML. .html, .htm, .xhtml, .shtml, etc… How do you know which one to use and for what? — Tom

Tom, most of the extensions that are used for HTML are fairly simple to understand once someone has explained them to you. Let me run you through some of the basics, so you can sound as smart as I do at your next HTML party!

.htm: An HTML file that conforms to the 8/3 naming standard common in DOS. In plain English this is the “old” way of naming your files. 8/3 is where you get such amazing application names as winipcfg.exe, mywebpag.htm, etc. No reason to use this unless you like 3 character file extensions.

.html: An HTML file that has a .html extension. There isn’t any difference between these files and the .htm files, besides the extra letter.

.xhtml: This extension is reserved for XML-compliant HTML, commonly referred to as, you guessed it, XHTML. It really stands for “eXtensible HTML”. This extension is most common among Web developers who really want to stay with the times, as XHTML is really the future of HTML. XHTML files can equally be called .htm, .html, .xht and .xhtm. Because XHTML is really just properly formatted HTML, you can’t tell the difference simply by looking at it.

.shtml: SHTML is simply HTML with some server-side directives thrown in for fun. The most common of these is SSI, which allows you to do things like put your header in one file, your menu in another file, and then dynamically include these into .shtml files on the fly. PHP, ASP, JSP etc. all allow you to do the same thing, however, they require you to actually use those languages. SHTML allows you to use the power of includes without learning one of those complex languages.

While there are many others around, including, but not limited to: .php, .php3, .asp, .aspx, .xml, .cfm, .cfml, .jsp, .cgi, and .pl, this list should get you by for now. Besides, most of the extensions in the latter group are specific to a particular programming language (.asp for ASP files, .php for PHP files, etc).

Strip My Pages!

Doctor, I thought I had just read how to do this recently in one of your articles, but for the life of me I’m not able to find it! I assume that I could just put a link to another HTML page that displayed a stripped down version of that page in a table. By looking at the code from the “Print Article” versions of pages on SitePoint, it looks like a template is used with a table width of 468, although I am wondering if it is necessary to use the server side scripting language (php) to achieve this? — Xanthé

While I could take half an hour to tell you how to go about this quickly and easily without using any server side code at all, I’ll let an expert on the subject do it instead. Eric Meyer, a Standards Consultant at Netscape, recently wrote an article on this very subject for A List Apart. It covers everything you’re looking for — and more!

How do I Mask an eMail Address?

Dr. Design: is there a way to mask the email address that appears in the ‘to’ field after clicking on the mailto link? For instance, instead of abc@xxx.com appearing, I want a name to appear thus: “ABC” — Jamie

Hmm. Sneaky are we? Well Jamie, you’ll be glad to know there is in fact a way of doing just such a thing! As I am sure you’re aware, a normal mailto: link looks a lot like this:

<a href=mailto:me@me.com>mail me</a>

The following code will allow you to hide the email address and present a name instead:

<a href="mailto:Jeremy Wright<jwright@tacf.org>">Mail!</a>

Targeting the Main Window? Close the Popup

Hey Doc, is it possible to automatically close a pop-up window when the user clicks on a link that targets the main window? For example, I have a framed site. The main opens a pop-up window. The pop-up window has a link to a game that has to load in the main frame window. I got that part working, but the pop-up window remains on top. I know I could change the focus to the main window, but I’d like the pop-up window to automatically close itself if the user clicks on the game link. How’s it done? – Anna

Anna, I assume your current link code looks something like this:

<a href="javascript:myFunc;">Go to the game!<a>

Simply change it to this, and you’ll save your visitors valuable clicks before you know it!

<a href="javascript:myFunc; window.close();">Go to the game!<a>

Make my Button Create a Popup

Hi. When visitors subscribe to my mailing list, instead of the “Subscription Successful” window appearing, how can I get the submit button to create a small pop-up window that says “Subscription Successful”? Is this possible? Right now, my input code is:

<input type="submit" name="Submit" value="go">

— Josh

Josh, this is a great question! By allowing your visitors to subscribe to your newsletter without ever leaving the page they’re on, you enable them to continue browsing your site without the need to waste any clicks at all. Well done! While you might think you’ll need some JavaScript on the Submit button of your form for this kind of thing, you’d probably be surprised to know that it has nothing to do with the button! All you need is some simple HTML!

I expect your current <form> code looks a lot like this:

<form method="POST" action="MyForm.asp">

Simply change it to look like this, and you’re done!

<form method="POST" action="MyForm.asp" target="_blank">

One other thing you may want to do is allow your users to close that little window with the click of a button. Just in case you’re unsure, here’s the code:

<a href="javascript:window.close();">close this window</a>

That’s all for this month! To make your appointment for next time, email Dr. Design at drdesign@sitepoint.com today.

Spread the love!
Dr. Design