HTML, CSS, PHP, SQL, CMS… Web design and engineering can involve a lot of cryptic initials. This article attempts a practical, accessible explanation of the meaning and significance of some of these tools, terms and technologies.  

HTML/XHTML

HTML and XHTML are the markup languages primarily used for writing web pages. A well-written page of XHTML is quite spartan. It consists of your content — the words, links and media you want readers to see, in English or the language of your choice — marked with tags that describe the text’s function. For example, a piece of text can be identified as a paragraph, a major heading, a minor heading, a link, a bullet list item, etc. Other than that, the page shows little style or pizazz.

Before you get dressed in the morning, you start out unclothed, fresh from the shower. That is your XHTML page: the bare essentials, uncovered and unaccessorized.

CSS (Cascading Style Sheet)

CSS is the language used to create a web page’s appearance or formatting. CSS can dictate colors, fonts, positioning, dimensions, background images, page flow, and many other properties of a page’s appearance. CSS is generally written in one or more pages, or stylesheets, that are then applied to pages of XHTML. This transforms mostly plain text into a stylized, visually appealing web page. Apply a different stylesheet with different rules, and you get a different appearance.

As you get dressed in the morning, you adorn your unclothed body with whatever you find in the closet that strikes your fancy. Your clothes are easy to put on, and they can radically change your appearance, your bearing, your mood, and the way other people view you. You select your day’s wardrobe to best suit your plans, your role, and your requirements for the day. Yet, underneath your clothes, your body and your identity have not changed. CSS works similarly, quickly altering the appearance of your page as needed, without changing the page’s essential content.

Separation Model

This is a methodology in modern web design that hails the benefits of assigning specific roles to the XHTML and CSS that make up a web page. As described previously, the job of XHTML is to present your bare-bones content; the job of CSS is to alter the appearance of your content.

In addition to presenting your content and describing its function, XHTML is also capable of altering the page’s appearance. In fact, for many years this was standard procedure. But just because something can be done, doesn’t mean it should be done.

One of the advantages of the separation model is that the appearance of an entire site can be changed in a flash by making an edit to a single CSS page. Thousands of pages can be changed in a matter of seconds. If these appearance properties were actually coded into the individual XHTML pages, changing them becomes much more problematic.

Returning to our analogy, consider tattooing. It’s another way to change your body’s appearance. But because the tattoo becomes a part of your skin, separating the tattoo from your body becomes close to impossible, and changing the tattoo’s appearance is a lot more complicated than simply changing your clothes or your makeup. Using XHTML to format a page’s appearance is akin to having makeup permanently applied to your face, or to drawing the clothes onto a paper doll with permanent marker. On the surface, the end result may appear to be the same, but you lose flexibility and many of the other benefits that come from being able to separate the content from the formatting.

Maintaining that separation gives your site the ability to make quick costume changes. Choose one appearance for web site visitors, another appearance for the printed page, and another appearance for mobile phone access — all without making a single change to your XHTML page or your content. You simply apply a different CSS page to suit the context, just as you choose your clothes to suit your day.

Sites built using this approach are easier and cheaper to maintain, and they are more likely to remain compatible with evolving web browsers. Just as importantly, they give readers the ability to get past the formatting and get straight to your site’s content, when needed. Search engines, for example, can get straight to the important meat of your site — the content in the XHTML file — without having to wade through formatting code. Think of how much more efficient a massage or a doctor’s exam is when you are not fully clothed. Your site is also more accessible to visitors with physical impairments, who use special software programs to read and navigate the web. Like search engines, screen reading software is interested in your site’s content, but would rather skip past the formatting. Separation makes this much more effective.

Static Web Site

In a static web site, each page you see in your web browser exists as a distinct page of XHTML, just as each page you read in a book or magazine exists as a printed page. If you want to change a sentence on page 7, you edit page 7. If you want to change a sentence on every page, you edit every page.

Dynamic Web Site

In a dynamic web site, the page you see in your web browser has been assembled on-demand, using a set of coded instructions. Think of a bulletin board and a box of flyers, business cards, and post-it notes. The bulletin board starts out blank. You assemble the “page” of content by pulling the items you need out of the box and arranging them on the board. You can change the board’s content in hundreds of ways by posting new items from your box, swapping one note for another, rearranging content, or removing items altogether. But there is only one bulletin board.

In a dynamic web site, your content is stored in a database. Web pages are assembled by pulling specific content from the database and assembling it according to coded instructions. The page is then formatted and styled by applying CSS rules.

PHP

One of the programming languages most commonly used to create dynamic web sites. The instructions that pull content from the database and assemble it into a page are written in PHP.

SQL

SQL (or MySQL) is a type of database commonly used to store the content used by a dynamic web site.

CMS (Content Management System)

Content Management Systems are software programs that can be used to create dynamic web sites. Often written in PHP, this software gives the web developer a great head start by handling communication with the database, providing a set of building blocks for assembling the pages, and giving users the means to easily edit their content.

Content management systems can be written from scratch, purchased off the shelf, or obtained for free from open-source communities. They can be used as-is, or greatly customized to suit the specific needs of a site or client. Commonly used open-source CMS programs inlcude Drupal, Joomla, and WordPress.

Open-Source Software

Computer software that is created by a community of developers and distributed for free to users who agree to report the problems they find and share the improvements they make. Over time, open-source software can become very well-tested, providing high-quality at low cost, and the software evolves to suit the users needs, rather than to suit a software company’s balance sheet.

Commonly used open-source CMS programs inlcude Drupal, Joomla, and WordPress. Each has evolved a community of developers who extend the software’s functionality, improve its quality, and freely share valuable information about the software and its uses.