A look under the hood of a website

This article is for those of you who are curious about what makes a website tick.

It is not intended to prepare you for a career as a web developer; that is our job. However, if you are as innately curious as I am, it will provide you with some clarity about the elements that make a website function, and how they work together to create the end product.

A very short overview

A website is a collection of web pages that work together. You can think of a web page as the contents of a single document. Sometimes, the document is obtained from a file on disk; other times, it is created dynamically using data stored in a database.

The web page usually resides remotely, often in a distant data center, and the computer that delivers it is referred to as a web server. The web page itself includes two things: content, and instructions for displaying that content.

Content

The most essential part of a web page is the content itself, and the most basic type of content is text. In fact, you can take a plain text file that you create in any word processor and use it as a web page without any modifications whatsoever.

Of course, most web pages are more interesting than that. In addition to text, most web pages includes images, links, and sometimes other content types, such as audio and video.

Instructions for presenting content

In addition to content, the web page includes instructions for displaying that content. There are three types of instructions that are used: HTML, CSS and JavaScript.

HTML: Hyper Text Markup Language (HTML) is the language of the web, and it is used to provide the web browser with instructions for displaying the content of the document. HTML consists of tags, surrounded by angle brackets, that perform a specific function. Some tags are used alone, such as the line break <br>. Others are used in pairs, such as the paragraph tag:

<p>This is a paragraph.</p>

The first tag <p> begins the paragraph, while the second tag (the ‘/’ indicates a closing tag) ends it. Other HTML tags are used to insert images on the page, create links to other pages, designate headlines and create blocks (DIVs) that act as containers for content that must stay together.

CSS: In older sites, formatting (such as the typeface and size of some text) was specified using HTML tags, such as the <font> tag. In today’s websites, Cascading Style Sheets (CSS) have largely replaced HTML for this purpose, offering far more flexibility and much cleaner, more maintainable code. CSS instructions can be specified in three places:

  • Inline, located on the same line as the content
  • In the top portion (header) of the document
  • In a separate file

Individual CSS instructions generally do not apply to the whole page (otherwise, the whole page would be formatted the same way). A name can be associated with a specific element, such as an individual paragraph, headline or DIV (container for a chunk of content), and a CSS instruction can affect just that one element.

CSS is not only used to format content such as text and graphics, it is usually used to determine the structure of the page as well.

Most often, CSS instructions are placed in a separate file, so that they can be shared over multiple web pages. This eliminates duplication, and makes it easier to maintain consistency over a website that may contain dozens or hundreds of pages.

JavaScript:  Almost all of the functional, moving parts on a webpage are implemented using JavaScript, a powerful programming language that virtually all web browsers understand. Whenever you see a ‘mouse over’ effect (a button changes color when your mouse passes over it), it is almost always JavaScript doing the work. JavaScript is also used to validate user input (such as ensuring that a zip code or e-mail address is correctly formatted), and it is used for AJAX (a technology that allows a single window within a page to change, without reloading the entire page).

Not all processing is done with JavaScript. Anything that requires additional data or information from the server will usually be performed by a program in another language residing on the server. Popular server languages include VB.NET and C# (on Microsoft web servers) and PHP.