The display layers

Where are we?

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

Where we are

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 a page.
  • Know that CSS and JavaScript are important.

The display layers

The display layers take data from HTTP and other protocols, and show it to the user.

There’s different display software for different data. There are programs to show maps, different programs to show movies, different programs to play sound, etc.

We’ll only talk about Web pages. The most important display technology is …

The hypertext markup language (HTML)

An HTML file is plain text. No pictures, sound, or anything like that. Just text.

CC
CC

But, but, ...

Kieran
Kieran

You want to say, “It can’t be just text, there are photos and things.” Right?

CC
CC

Yes.

Kieran
Kieran

The photos are stored in separate files. Each one is downloaded separately from the HTML file. We’ll see that later.

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 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

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 produce:

Rendered HTML

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>. It used italics to emphasize content.

Inspecting a page’s 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.

Look at the source of this page, the one you’re looking at right now. You’ll see lots and lots and lots of HTML. Don’t be discouraged. The pages you create in the book CoreDogs will be much shorter.

Exercise: Finding the headings

Look at the HTML for this page. Find the <h1> tags. Match them up to what you see in the browser. What text is inside the <h1> tags? Type it below.

(Log in to enter your solution to this exercise.)

Styling HTML

Most Web pages have other things besides HTML. Take the page you’re looking at now. There are images, like the dog logo at the top of the page. But the image is not stored in the HTML. It’s in its own file, that your browser downloads separately.

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

<link type="text/css" ... href=".../style.css">

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:

Rendered HTML

Figure 3 (again). Rendered HTML

Suppose we wanted the heading to be green. We could add a style 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 style rules is called CSS, for cascading style sheets.

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:

Try typing various things into the age field. Note that it handles errors, like negative ages.

HTML and style sheets can’t handle button clicks 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 harder to learn than HTML or CSS. But don’t worry. We’ll only look at a little piece of it.

Summary

In this lesson, you learned:

  • What HTML is.
  • How to look at the HTML behind a page.
  • That CSS and JavaScript are important.

What now?

This chapter explained the three layers of the Internet. You just saw how simple HTML and CSS work.

In the next chapter, you’ll see how an entire Web site works.

Onward!


How to...

Lessons

User login

Log in problems? Try here


Dogs