|
A Look Under the Hood of Your Web Site When you buy a new car, you look under the hood, right? Every one does, but can you identify the emission components? How about the air conditioning condenser? We really don’t think about the arcane parts under the hood until, for example, our vehicle fails its emission test. Then we care! Do we really need a new PCV valve, and what the heck is it, anyway? Your web site is much the same. While web sites don’t “wear out,” you generally don’t care about what’s under the hood of your web site until something goes wrong or some changes are needed. What’s under the hood of your web site is becoming more and more important because it can affect your web site maintenance costs, how your site appears on different browsers, and even how search engines rank your site. First, a little background. HTML (Hyper Text Markup Language), the language web sites are written in, was developed back in the 1980’s basically to allow one page to link to another over the fledgling internet. Over time it became more robust (some would say bloated), but is still the basic building block of all web sites. HTML “tags” are inserted in the content of a web site to control such things as font size, color, paragraph breaks titles, and even where things appear on the page. These tags are identified with open and close brackets (<,>). For example, in an HTML document <b>bolds text and </b> turns off the bold. Now, try this. While viewing most any web site page, click View, then click Source on your browser tool bar. Scroll up and down. You see lots of HTML tags, and if you’re lucky, you can actually spot some page content! Pretty messy, isn’t it? Now, pull up your
web site and see what it looks like. It
is probably pretty messy too! I’m not picking on your site, as almost all web sites look like this, even some of ours. Now, go back to our site, and view the source on any page. You’ll note that the HTML code is very clean, concise, and you can easily find and read the content. (If you view the source on this page it is very messy because it was created directly from a Word document.) What happened to all that mess? Simple. We have separated the content of the site from the presentation. You’ll notice an almost complete absence of Table and Font tags. The remaining HTML tags define what something is, not how it should look. This was done by creating one, separate CSS (Cascading Style Sheets) file that controls all the fonts, font sizes, colors, even the page layout and more. In a traditional (messy) web site, suppose I want to change the font, size, and color of all the headings. Further, suppose I want the headers to be yet a different color when they appear in the left column. This would require going through the entire site, changing or adding a Font tag to every header. That’s time consuming, error prone, and BORING! Contrast that with a site that has its presentation residing
in a separate CSS file. It is only
necessary to add or change probably two lines of CSS code to change the
headings. Two lines! While CSS does have a learning curve, that
effort is more than repaid in labor savings. Now you can see why, by using CSS, we can separate the content from the presentation of our site, resulting in a site that is easier and faster to develop, less expensive to maintain, and more search engine friendly. Looking under the hood of your web site wasn’t really so scary after all, was it? Related sites you may be interested in visiting:www.wildbirdgoodies.comwww.welcomebabygifts.com www.apampereddog.com www.philwinterphotography.com |