Understanding Websites - Part 2

In Understanding Websites - Part 1, we told you how domain registration, hosting, and web design all fit together to create websites. Now, in Part 2, we will show you how the various files that make up a website come together to create website pages.

Some people assume that a web-page must be like a Word document, that is, a single file which is downloaded from a server and displayed on the user's monitor. Actually, it is quite different than that. A single web-page is typically made up of dozens of files, downloaded to the users computer, and then built up into a web-page "on the fly" by the users web browser. Knowing a little bit about how all this works may be helpful, if you are going to be working with a web designer.

The diagram below shows you some of the files that might make up a typical web-page. An html file is downloaded first to initiate the process. In the diagram, labelled as item 1, is an html file called index.html. The index file is the default first page to be downloaded, so it is typically the file that starts the process of building the Home page.

The first html file (in our example, the index file) provides all kinds of information about the page that will be assembled. It contains most of the text that will appear on the page. It can contain the menu, the footer information, etc. But it makes numerous references to other resources (files) that will be used to assemble and display the page.

One of the other files referenced by the index file is the style sheet, labeled as item 2 in our diagram. The style sheet specifies the size, location, color, border, font, layout, etc. for each region of the page. By region of the page, we mean things like header, footer, left-hand column, right-hand column, menu area, etc. When a font is specified in a style sheet, it is specified as to size, preferred font, several substitute fonts to be used if the preferred one is not available on the users computer, and font style (such as bold, underline, italic). The style sheet will also specify how a font will behave if it is part of a link - does it change color when the mouse is over it? Does an underline appear or disappear? Is the link a different color if it has already been visited?

Typically the style sheet is used for every page on a website. This has some great benefits. It guarantees a consistent look across the entire site. It allows the designer to change that look by altering a single file. And it separates the look of the website from the content of the website.

The first html file may also call other html files as shown in item 3 in our diagram. For example, I may want to define a complex menu structure in a stand-alone html file, and then call it into the index file or other page files. That way, the menu structure is all contained in one place, even though it is repeated and appears on every page.

The first html file may also reference a Flash animation, as shown in item 4 in our diagram. Again, each Flash element on a page is a separate file which needs to be downloaded.

Finally, all the images on a web-page are separate files, as shown in item 5 in our diagram. And typically, there are a lot more images on a page than you might expect. While a picture is an obvious image, many other elements of a web-page are also images. For example, anytime you want to completely control the way text looks, perhaps a specific font with no substitutions, or text with a shadow around it, the text has to be placed in an image file. Otherwise, the user's web browser will have the ultimate control of what that text looks like. Similarly, numerous small features on a web-page, such as separators, bullets, rounded corners, etc. are created with images. It is not uncommon for a single web-page to use 40-50 images.

So how does all this come together to create a webpage. Web browsers are so common today that we take them for granted, but they are really very complex pieces of software, capable of reading the instructions from that primary html file, downloading all the auxillary files necessary to display the page, interpreting all the format instruction in the style sheet file, then assembling the whole thing and displaying it on the user's monitor.

With a dial up connection, you can sometimes see this process unfold the first time a web page is viewed, just because of the time involved to get all the files downloaded. With a high-speed connection, the page seems to appear all at once, but a whole lot is going on, right on the user's computer.

Another interesting thing about web browsers is that they anticipate having to use the same files again, either to display another page on the same site, or perhaps the same page a few minutes later. All the files are kept for potential reuse. This is is referred to as caching. Caching greatly reduces page loading times, as well as total Internet traffic. However, it also means you may not be seeing the most recent changes to a webspage.

Last Updated November 13, 2013