Where are we?

We’re working through the layers of the Internet. We just talked about the services layer. On to the display layers.

Figure 1. Where we are

This lesson’s goals

By the end of this lesson, you should:

• Know what HTML is.

• Be able to look at the HTML behind page.

• Know that CSS and JavaScript are important.

The display layers

The display layers take data from HTTP and other protocols. The show it to the user, with colors, fonts, photos, and other things. The most important technology here is …

The hypertext markup language (HTML)

A browser can GET different types of files from a server. Text, images, sound, and so on. Any file can be sent over the Web.

The most important type of file is the HTML file. It’s a plain text file. No pictures, sound, or anything like that. Just text.

HTML is a language for describing what a Web page looks like. It contains the content of a page (the actual text), and some of the formatting.

HTML files usually have an extension .html, or sometimes .htm (you should always use .html). So a file named duck.html probably contains HTML.

An HTML file doesn’t contain the actual image of the Web page, that is, a picture with the right fonts and things. Instead, an HTML file has instructions that tell the browser how to display a page.

Suppose an HTML file has this in it:

<h1>Ducks</h1>
<p>Ducks are <em>great</em>!</p>

Figure 2. Some HTML

This is what the browser gets from the server. The <?> things are called tags. The browser interprets the tags, choosing fonts, colors, spacing and such, before rendering a screen for the user. “Rendering” means “showing” in geekese.

Here’s what the tags above might render as:

Figure 3. Rendered HTML

You can try it in your own browser.

This doesn’t look much like the HTML in Figure 2. The fonts are different, for example. But remember, HTML is a set of instructions for how to show things. <h1> means to show a header. <p> means to show a paragraph. <em> means to emphasize.

It’s up to the browser to decide exactly how to show a header, a paragraph, and so on. In Figure 3, the browser showed big, bold text for <h1>, and smaller text for <p>.

Inspecting the HTML

You can tell your browser to show you the HTML behind the page. In Firefox, press Ctrl-U, or right-click on the page and select View Page Source. Other browsers do it differently, but right-clicking will usually get you there.

If you look at the source of this page, you’ll see lots and lots and lots of HTML. Don’t be discouraged. The pages you create in the book ClientCore will be much shorter.

Styling HTML

Most Web pages involve other things besides HTML. Take the page your looking at now. There are images, like figure 1. But the image is not stored in the HTML. It’s in its own file, that your browser downloaded separately.

There are also style sheets. If you look at this page’s HTML, you’ll see lines like:

The file style.css has rules that tell your browser how to display HTML on this page.

Let’s go back to the duck code. Remember that we had this:

<h1>Ducks</h1>
<p>Ducks are <em>great</em>!</p>

Figure 2 (again). Some HTML

It looked like this in a browser:

Figure 3. Rendered HTML

Suppose we wanted the heading to be green. We could add a rule like this:

h1 {
    color: green;
}

You can try it.

The HTML doesn’t change, but the way it looks does change.

The language for specifying formatting rules is called CSS, for cascading style sheets. Every Weber should know the basics of CSS.

Behavior

A Web page has content, formatting, and one other thing: behavior.

People interact with Web pages. The most familiar user behavior is clicking on a link. But people can do other things on Web pages. Fill in forms, expand menus, watch movies, ...

Here’s an example. Suppose you wanted to show the user a joke, but the joke would depend on the user’s age. Users under 10 years old would get a booger joke. Others would get a more “mature” joke. In the field below, type in your age and click the button.

Age: Show Joke

Try typing various things into the age field. Note that it handles errors.

HTML and style sheets can’t act like this by themselves. You need to add a program to the page, a set of instructions to tell the browser what to do when the user clicks the Show Joke button.

The programming language you write these programs in is called JavaScript. It’s easy to learn, and quite forgiving.

Summary

In this lesson, you learned:

• What HTML is.

• How to look at the HTML behind page.

• That CSS and JavaScript are important.

What now?

Now that we’ve seen the three layers, we’ll see how they work together to show an entire Web page, from clicking a link to a server request to rendering the page in a browser.

We’ll also see how you can install a Web server on your own computer. It’s a great way to learn what’s what.

Onward!