Kim Fenolio » Technical Advice

The Purpose and Importance of a DOCTYPE

Kim Fenolio — Mon, 08 Nov 2010 15:40:25 +0000

Recently someone asked me what a DOCTYPE was. I paused for a moment and thought, “well, I know the DOCTYPE is the first thing at the top of every webpage, even before the HTML tag.” Quite honestly though, I had no idea what the purpose of it was. When I start coding a new page, I let Dreamweaver create a new blank document and generate whatever the default tags are. DOCTYPE was one of the ones it tosses in there for me. I figure, if this is a standard thing on webpages, I should know what it is, why it’s there and why it’s so important. Yes, DOCTYPE is important. Why do I know this? It’s on every page of every website, or at least it should be.

For example, the DOCTYPE on this website looks like this:

But What Does it All Mean?

Let’s break down what DOCTYPE means to try and make it easy. DOC means document. TYPE means type. Plainly put, the DOCTYPE declares what type of documentation (or rules) our HTML page is being displayed with. If you don’t declare a DOCTYPE, the browser will assume you have no idea what you’re doing and will go into “fix-it” mode generally using the transitional ruleset as outlined below. The action is not the same from browser to browser. The unpredictability of that in and of itself should encourage you to not only use a DOCTYPE but also the proper DOCTYPE. If you’re paying attention that means there are different types of documentation, or sets of rules, that each website can be displayed using.

Strict DOCTYPE

The first of three types is the strict DOCTYPE. Any website with strict DOCTYPEs will tell the browser to follow the HTML rules as set by the W3C. For those of you not in the know, the World Wide Web Consortium is the lovely group that outlines and sets all the HTML standards that us developers should be following. That means that any website using using this DOCTYPE will not display deprecated items like the tag (if you’re still using I’ll ask that you please back away from the keyboard slowly, then call me for some consulting help).

Let’s say that you didn’t know what a DOCTYPE was and you never included it on your webpage, but then you also used tags. I bet you had all kinds of trouble trying to figure out why the darn code you were using didn’t work. Well, if you don’t specify within the DOCTYPE tag which type you want it to use, then your browser is trained like a good little puppy to display your page using strict rules by default. You see, the strict DOCTYPE makes you stand up straight! Stomach in, chest out! It accepts no substitutes or less than what the rules call for.

Strict HTML

Strict XHTML

Transitional DOCTYPE

The transitional DOCTYPE is for those of us who are want a little bit of everything. For instance, you don’t want to stop using tags (shame on you!) but you have moved onto trying out some of the newer rules. Basically, this DOCTYPE gives you greater flexibility and tells your browser it’s okay to use both current and deprecated tags.

Transitional HTML

Transitional XHTML

Frameset DOCTYPE

If you were to use frames (which you shouldn’t), then the frameset DOCTYPE can be used. It will tell your browser to use the rules of the transitional DOCTYPE but also allow for frames. For the record: frames are bad for SEO, search engines, usability, bookmarking and it just plain looks bad.

HTML Frameset

XHTML Frameset

As you can see in my examples above, you can tell your browser through the DOCTYPE tag if your page was built in HTML or XHTML. It will also include a URL to the official W3C website. It points to the exact page where the rules for that DOCTYPE actually exist. You’re telling the browser, “this is the DOCTYPE that I want you to use and here’s the rules to support it.” That leaves zero questions, your browser has less to think about and will display your page quicker. As standards change, using these URLs will allow browsers to seemlessly support your HTML code even after the W3C posts new standards.

It’s important to keep up with what’s changing with the W3C. As they release new versions of HTML or XHTML, our DOCTYPE tags will need to change in order to maintain top standards. For example, with HTML 5 now making it’s way towards the mainstream, the tag you would use is . Pretty simple and quite a bit different than current methods, however it’ll be the new standard!

Now remember, if you don’t follow the rules, your webpage just won’t work right. So with a little bit of practice, you’ll be able to keep that stomach in and your chest out. C’mon, show me what you can do!

An HTML Footer Include Made Easy

Kim Fenolio — Tue, 03 Aug 2010 19:54:03 +0000

Someone asked me a question about HTML includes recently.

I want to make changes to the footer on one page and make it change across all of my pages. How do I do this?

Well, it’s pretty simple. Here’s a quick tutorial.

Create a new HTML page with empty code. If your editor inserts code automatically, delete it.
Go to your original HTML page where you have your existing footer. Cut the code (Edit->Cut). Paste (Edit->Paste) it into the new HTML file you created. Save it as footer.html into the root directory (wherever your index.html is located.
Now we want to insert the code that includes the newly created footer on the page. This is called an HTML Include. Go back to your original HTML page. In place of where you originally had the footer code, you’re going to insert this code:
Save your file.
Upload both files to your server and everything should work perfectly.

For all other existing pages of your website, you’ll need to go and delete its current footer and add in the HTML Include footer code. If you’re using a program like Dreamweaver or Microsoft Visual Web Developer you can do a Find and Replace of the entire solution to make it quick and easy.

You can also do the same thing for your header, a sidebar or anything else that repeats throughout your site.

Any questions?

Adjusting Your Microphone’s Recording Volume

admin — Tue, 29 Jan 2008 23:05:47 +0000

This article is going to cover how to adjust your microphone’s recording volume if you’re on a Windows XP machine. I voice chat a lot and run across many people whose microphone volume’s are coming across either too soft or too loud.

Why is this a problem? Well, for example, if I have three other people on a Skype conference call, one person might be soft while the other two are a good volume. I don’t want to turn up my system volume because the other two will be exceptionally loud in my ear while that one person will be at an acceptable level. The one person who is too soft should be able to adjust their level so that the rest of the people in the call won’t have to adjust.

These instructions are for those who are using the Win XP generic drivers for their sound card. The majority of people are. If you’re using something else, then you may be able to adapt these instructions. Give it a read and see.

There are two different ways to get into the panel and adjust the recording volume. I’m going to list both ways. You decide which is easier. Screen shots are provided within the instructions. Click on the thumbnails to view the full size image.

Access From the System Tray (with explanations)

In your system tray (the little area on your taskbar with the clock) there will be an icon that looks like a little gray speaker. Double click on it.
The window that comes up is called your Playback Control. This is what controls the volume of anything that you hear either over your speakers or through your headphones. There, you will see a Microphone slider. This controls how loud you hear yourself through your headphones. If the mute button is checked, then you won’t hear yourself at all. This has no baring on whether or not others will hear you if you’re in a VOIP call. It only controls what *you* hear of yourself. Only adjust this volume slider if you need to hear more or less of yourself.
To get to the area where we adjust the recording volume (what others will hear when you’re in a call) click on Options at the top of the window. Then Properties.
The Properties box now has an area in the top that says “Adjust volume for”. Click the Recording button.
You should now notice that the options in the bottom of that box have changed. Make sure that there is a check mark next to where it says Microphone. Then click OK.
The window will now change and become the Record Control. This is the mixer that controls what gets recorded or sent out as audio through a call. Each of these sliders does not have a “Mute” under it, instead it has “Select” under it. Unless you have an advanced setup (you’ll know if you have this) you will want the check in the box underneath the Microphone slider. None of the other sliders on this window will effect your outgoing voice or audio. Generally, the best place to have your slider is right at or just above the halfway mark. If people tell you that you need to be louder, obviously you’ll want to drag the slider up. If you’re too loud, drag the slider down.
When your voice is being sent out at an acceptable level, simply close the window.

Access From Control Panel

Go to Start, Control Panel. Double click on Sound and Audio Devices. If you don’t see that, click on “Classic View” in the left hand side of the window.
Click the Audio tab. Then click Volume under the “Sound recording” area.
The window will now change and become the Record Control. This is the mixer that controls what gets recorded or sent out as audio through a call. Each of these sliders does not have a “Mute” under it, instead it has “Select” under it. Unless you have an advanced setup (you’ll know if you have this) you will want the check in the box underneath the Microphone slider. None of the other sliders on this window will effect your outgoing voice or audio. Generally, the best place to have your slider is right at or just above the halfway mark. If people tell you that you need to be louder, obviously you’ll want to drag the slider up. If you’re too loud, drag the slider down.
When your voice is being sent out at an acceptable level, simply close the window.