Anatomy of a web page

The composition of a web page like this one can be considered from the point of view of its design or studying the parts and file types which it integrates. We’ll take this second approach here. We must understand well how a web page is built so we can successfully learn how to create and edit it.

A web page is superficially similar to any other document: it contains text, images, all of them laid out in a certain way. A web page is a file type with very little of special: it’s simply a text file, with an extension htm or html (which stands for hypertext markup language.) This html file contains the text, plus some code that instructs the browser to display the page in the navigator: for example, it may indicate to distribute the layout in columns, put certain sentences as headings with different font weight and size, assign colours, surround an image with text... The browser program (normally Internet Explorer, Opera or one of the flavours of Mozilla), interprets the code of the HTML markup to show the contained information on the screen.

To verify all this, the easiest thing you can do is open the Windows Notepad or, for that matter, any other text editor like our absolute favourite NoteTab, and with it open any web document you have saved on your computer, as we explained in the initial page of this section. What happens to the images and other add-ons that the web page, apparently, “contains”? These are additional files that are not within the html file; they are linked, by means of some code that tells the browser which image must be displayed, where is it, its dimensions, if it is or not a link...

So the web page, viewed with a text editor, contains a mixture of some normal text and a series of code instructions. These codes in the HTML language are always of the style <head> and </head>, for example. They always go between keys, and each code block has an initial tag and a closing tag which. In between you find the text interval or the images that receive the corresponding format. For example, a paragraph is sandwiched between the labels or tags <p> and </p>. All this may seem complicated in the beginning, but the idea can be understood in five minutes, and in the five next minutes, you could code a simple web page, only with some HTML cheatsheet and the notepad. Everybody who attempted to create a web page before 1995 has learnt to write in HTML, almost without realizing it...

But, it is necessary to dominate HTML nowadays, or to at least have an idea of how is this language structured? A difficult question: we could answer both Yes and no. Frankly, it is very advisable to have a basic idea of HTML coding. Just as when we drive a car, we’re not supposed to be a graduate in mechanics, but it helps knowing at least which are the main components of the car and how they work... Thus, although we use a visual publisher of web pages, we’ll know the terminology and the code they generate behind the scenes, and we can do some manual tweaking if necessary. There are plenty of reference materials available. You can prepare a handy cheatsheet with the most important tags if you wish. Check out a basic and well-organized resource like the HTML Dog reference/ and the complete specification for all the tags in the W3 Consortium website.

Components of a typical web page

Now let’s review the main components of the typical web page (to see illustration in the superior part of this page):

Text.Editable text is displayed on the screen with some of the fonts that user has installed in his system (although it is technically possible to specify embedded fonts, with which we see in the monitor a font which really we don’t have, but this isn’t usual.) The editable text can be selected with the mouse or the keyboard and to copied to another application, like the notepad (many of the textual elements of the pages, in special the titles, some navigation buttons, etc. are really graphical, and its text is not editable.)
Graphics. They’re files linked from the web page. It’s almost exclusively in three formats: GIF, PNG and JPG. We’ll deal with this subject in detail in the Graphics for the Web section.
Forms. They are a mixture of text and sometimes graphic elements, and they allow to send information by the visitor, for example, consulting a catalogue, requesting more information, communicating his opinion, filling in a survey. Different form models exist; some are simply sent by email; others work executing some program script in the server.
Javascript. It’s a kind of programming language that is interpreted and executed by the navigator; it’s very commonly used for different visual effects, for example mouseovers, including syndicated text and advertising... We also address the question in a specific article, with relevant links.
Java. The Java code also is written in a platform-independent programming language (valid for any type of computer) which also allows different effects, interactivity... We also give more details about Java in the same article in which we talk about Javascript.
Shockwave/Flash . Initially they were interesting fixed or interactive vectorial images, extremely compact animations, now a complete platform with scripting, movies, sound and almost whatever you might possibly imagine. It is necessary to install a plug-in to enable the browser to display Flash and Shockwave. The free plugins can be downloaded from Macromedia.

Other components may be linked to web pages but, rather than being linked or included in web pages, are companion files that we usually save to the disk to be used or read later.

Attached files: ZIP, RAR, SIT... They are frequently linked in many sites offering programs or files compressed in some format (normally ZIP), to accelerate the download time for users. Each zip file, rar or sit contains one or several files, that after the download process can be expanded and extracted to the folder which we indicate to the program that opens them. The most popular utility is Winzip, but Windows itself can handle zip-compressed files perfectly.
Documents in PDF(Portable Document Format). They are also very commonly used; we dedicate a separate article to them.