Where Web pages come from

This lesson’s goals

When someone looks at a Web page, s/he sees a display on a computer screen.

Figure 1. A Web page

There are photos and drawings, text, different colors, boxes to type in, buttons, and other things.

But what makes all that? What actually puts the text on the screen, in the right fonts and the right colors?

The user experience

To the user, a Web site is a bunch of pages. Here’s a site with two simple pages.

Figure 2. A Web site

You can try it.

The site has two pages. Each page has two things:

• Information it displays, like photos and text.
• Behavior, like clicking a link to go to another page.

The user’s experience of the site is made up of both information and behavior.

The Web browser creates this experience for the user. Browsers like Firefox, Chrome, Safari, Opera, and Internet Explorer. It’s the browser that draws the text, shows the photos, and executes the behaviors.

Firefox is CoreDogs’ official browser.

But how does the browser know what information to show, and what behavior to execute? Here’s how:

• The browser gets files from a Web server. (Recall that a Web server is a computer on the Internet that waits for browsers to ask for files, and then sends them.)
• The files contain instructions on what displays to make.

Here’s how it works.

Figure 3. Getting a Web page

Say the user is looking at cow.html (see Figure 1). S/he clicks on the link to pig.html (1 in Figure 3). The browser executes a behavior, that is, show the Web page pig.html.

The browser asks the server for some files (2 in Figure 3). The server reads the files from its disk drive, and sends them back to the browser (3 in Figure 3).

In step 4, the Web browser renders the files, creating the display the user sees.

Rendering

Here’s part of the file pig.html. It’s a file that the browser got from the server.

<p>
  I am a pig. I know a <a href="cow.html">cow</a>.
</p>

Figure 4. What the server sent

It’s some instructions on what to show on the user’s computer screen.

The browser follows those instructions. It creates a display like this.

Figure 5. From the pig screen

When a browser renders a page, it follows some instructions and creates a display for the user.

Different types of files contain different types of instructions. The data in Figure 4 are in the file pig.html. They’re instructions in the HTML language.

The data that make the photo of the pig are in a different file. The name of that file is eunice.jpg. eunice.jpg is a bunch o’ numbers, just like every file. The numbers follow the JPEG standard, created by the Joint Photographic Experts Group.

The Weber’s job

Where are we?

• The browser gets files from a Web server. The files contain instructions on how to make displays.
• When a browser renders these files, it follows the instructions in the files to make a display.

So, these files on the server. How do they get created?

A Weber (someone who makes Web pages) decides on a page’s:

• Content – the text and images.
• Formatting – what the content looks like (colors, fonts, etc.).
• Behavior – e.g., what happens when a user clicks on a link.

Often the Weber makes a rough drawing:

Figure 6. Page sketch

Then the Weber creates files that will make the browser render a page like that.

The Weber types in some of the files, like the HTML in pig.html (see Figure 4). Typity typity, type, type, type, type.

For photos, the Weber won’t type in color codes. S/he will get a photo from somewhere, and maybe change it a little. I got the pig photo from the US Department of Agriculture.

Finally, the Weber uploads all of the files to the Web server, where Web browsers can get to them.

What you will learn

The second book in CoreDogs – ClientCore – will help you learn how to create a Web experience for the user.

You’ll learn how to make the files that the browser will render the way you want. You’ll learn how to write code like this…

<p>
  I am a pig. I know a <a href="cow.html">cow</a>.
</p>

Figure 4 (again). Code that the browser rendered

... that a browser will render like this:

Figure 5 (again). From the pig screen

And you’ll learn how to put the files on a Web server.

You’ll need a Web server to put your files on. Soon, you’ll learn how to get your own server space.

Summary

• Web pages have content, format, and behavior.
• The Web browser creates the user’s experience of a Web page.
• The browser grabs files from a Web server.
• The browser renders the files it gets from the server, that is, it follows instructions in the files to create displays.
• The Weber creates the files that the server sends.

What now?

URLs are key to how Web browsers and servers work together. The next two lessons are about URLs. Let’s start by talking about what URLs are.