Pictures and Pages

I am not much of a painter, but I do remember once doing a painting that I thought look quiet good ... mind you, it was one of those "picture by numbers" kits!

Have you ever seen a picture by number kit? Basically you get a large canvas made up of lots of very small shapes, each shape having a small number inside it. You also get a set of paints, each of which has a number. Fill each shape with the correct color ... and a picture emerges.

Picture by numbers kits remind me of how web browser programs (like Internet Explorer) and web pages work!

Download the Canvas

When you enter a url address in the browser and click go (or click on a link), it downloads an html file. This html file is similar to an empty picture by numbers canvas. You can look at it, see a few words and get an idea of what the page is about, but it doesn't look anything like what your web browser shows you.

Most browsers allow you to see the raw html file. If you are using Internet Explorer, click on the View menu at the top of the browser, then click on Source. What you are looking at is html.

A pictures by numbers canvas is filled in by matching numbers to colors. In comparison, html uses what are called "tags" in place of the numbers, and while those tags can be used to change colors, they are also used to:

• Make words larger or bold.
• Put sentences in lists like this one!
• Add pictures to the page.
• Make links to other pages.

Download Pictures

The pictures you see on a web page are downloaded separately. Once the browser has download the html (empty canvas), it sees that some of the tags (numbers) mean that it needs to download pictures and display them as part of the page (finished canvas).

When the browser downloads pictures, or the html file, it uses what is known as HTTP. For an introduction to HTTP see our article Birds eye view of HTTP.

Links and Thumbnails

Continuing the analogy, certain tags (numbers) tell the browser that if a user clicks on their "shape", that it should download a new html file (canvas) and start displaying it (filling in the canvas).

Most links surround words, for example Birds eye view of HTTP, however it is common to combine the two types of tags we have been talking about; a tag to add a picture to a page, and a tag that tells the browser to go to a new page if the "shape" is clicked on ... in this case the "shape" is the picture itself.

A typical web-page of thumbnail pictures is constructed this way. The main html page is downloaded, then the browser downloads pictures which are placed on the page, with tags telling the browser that if you click on them, it should go to another page.

Click on the thumbnail picture above to see this in action.

Links to more information

• W3 Schools is a great resource for learning about html and other web technologies with their free interactive tutorials.
• For the definitive source of information, see the W3C Specification.

By Chris Inga
nicisoft.com
Last updated: 31st October 2003