Clients and servers

Everything that happens on the Web involves at least two computers: a client and a server.

Web client and server

Figure 1. Web client and server

The client is the Web browser on your computer. The server is the place where Web pages come from.

This chapter tells you what you need to know about clients and servers.

Thinking in layers

This lesson’s goals

Web tech is messy. Learn a way of thinking that makes it easier to understand.

The problem

Web tech is complex. Lots of pieces, all connected together.

Don’t try to understand it all at once. You’ll just get confused. Everyone does.

You need a way to break the Web up into chunks. Then you can understand each chunk by itself.

Just as there are different ways to slice cheese (drool!), there are different ways to slice up the Web. This lesson shows one way to slice up the Web to make it easier to understand.

Alison and the light layers

Here’s Alison.

Alison

Here’s Alison dancing to the light of her favorite lamp.

Alison dancing

Alison doesn’t pay much attention to the lamp. If she needs light, she turns it on. If not, she leaves it off.

Alison knows how the lamp works. She knows about bulbs, electricity, switches, and stuff. But normally she doesn’t think about all that detail. Too dark? Turn the lamp on. That’s all she needs to do.

Only when the lamp doesn’t work does Alison need to think more. Suppose she paws the switch and nothing happens. She remembers what she knows about lamps, and first checks to make sure the lamp is plugged in. It is. OK, how about the bulb? Aha! It’s burned out. Get a new one, put it in, turn on, and dance, baby, dance!

Alison thinks about the lamp in layers. She normally thinks at the on/off layer:

Lamp layers

The on-off layer is simple. The lamp is on, or it’s off. That’s it. Thinking at this layer doesn’t take much time, or much learning. And it’s useful. When Alison has the goal “get light,” the on-off layer is all she needs to think about.

But if the lamp doesn’t work, then Alison thinks about the lower layer. Bulbs, plugs, and stuff. Things she can usually ignore.

We think in layers all the time. Cars, stereos, even our bodies. Life is easier when you can ignore details. Our brains would get clogged if we had to keep all of the details in mind all of the time. So we normally think at the higher layers, ignoring the details that make those layers work.

Web layers

The Web is like that, too. It’s best to ignore the details most of the time. But if you want to create and maintain Web sites, you need to understand what’s going on under the hood. Just a little bit.

We’ll talk about the Web in three layers:

Layers

The top layer actually shows the pages. That’s the layer most people work in most of the time.

The middle layer is about how computers send information to each other. The bottom layer is all the geeky electronics and stuff.

CC
CC

Is there really a layer called “bucket o’ numbers?”

Kieran
Kieran

The layers are just ways of thinking about what is going on. I made up this three-layer stack for CoreDogs.

Other writers use different stacks, depending on how detailed they want to get. Talk to a geek, and you might hear about seven layers. But CoreDogs covers only the most important stuff. Three layers is enough for that.

Summary

The Web is complex. Lots of pieces.

It’s easier to think about it in layers. When you think about one layer, you can ignore the others.

The Web has three layers: display, service, and bucket o’ numbers.

What now?

Let’s talk about the lowest layer.

The bucket o' numbers layer

Where are we?

On the previous page, you learned that thinking in layers is important. Otherwise, your brain might get overloaded.

This page explains what you need to know about the bottom layer: the bucket o’ numbers layer.

This lesson’s goals

By the end of this lesson, you should:

  • Know what TCP/IP is.
  • Know what an IP address is.
  • Be able to find the IP address of your computer.
  • Be able to find the find the IP address of a Web site.
  • Know what DNS is and why it is used.
  • Be able to find the owner of a domain name.
CC
CC

Ouch! That’s a lot of acronyms. My brain is already switching off.

Kieran
Kieran

I hear you. Some books throw lots of complicated stuff at you all at once. Your brain gets into the habit of giving up.

Tell your brain to try again. CoreDogs is slow and gentle. Your brain has a chance here.

It’s all in the numbers

The bucket o’ numbers layer sends numbers from one computer to another. It doesn’t care what the numbers are. Email? Photo? Bank balance? Web page? It doesn’t care. It’s all just numbers. The higher layers (the services and display layers) figure out what the numbers mean.

Renata
Renata

It can’t be just numbers. Web pages have letters, A, B, C, and the rest. Where do all the letters come from? And photos. They aren’t numbers.

Kieran
Kieran

Good question! Actually, it is all numbers. That’s all computers ever deal in.

Computers use numbers to represent letters and symbols. Each one is given a code. For example, “A” is 65, “B” is 66, “*” (an asterisk – geeks call it a “splat”) is 42, etc.

To send the word “Renata,” a computer could send the numbers: 82 101 110 97 116 97.

Photos are made of numbers as well. The numbers represent colors for dots on the screen.

At the bucket o’ numbers layer, everything is just numbers.

The Internet links millions of computers together. Millions and millions and millions!

Here’s what the Internet looks like:

Lots of simple links

Figure 1. Lots of simple links

The computers are connected by simple links. Each link connects only two computers. Computers in the network are often called nodes.

When you connect your home computer to the Internet (over cable, telephone, or whatever), you connect to an Internet gateway. This is a computer that passes data back and forth between the Internet and individual computers. In Figure 1, node A is a gateway computer.

All computers on the Internet talk to each other using a protocol called TCP/IP. The details don’t matter. We don’t even care what TCP/IP stands for.

CC
CC

I hear the word “protocol” a lot. What does it mean?

Kieran
Kieran

A protocol is a set of rules for communicating. For example, suppose the telephone rings. What do you do?

CC
CC

I pick it and say “Hello.”

Kieran
Kieran

Right. You could say “My brain is made of meat” instead of “Hello.” Why don’t you?

CC
CC

When I say “Hello,” the caller knows what to do. “Hello” means “I’m ready to listen.” If I talked about brains, the caller wouldn’t know what to do. Maybe hang up and call the cops.

Kieran
Kieran

The “hello” thing is a protocol for people. A rule for communicating.

It’s the same with computers. TCP/IP is a set of rules for one computer sending numbers to another. A TCP/IP message has data about which computer is sending the numbers, which computer the numbers are being sent to, the numbers themselves, and other stuff.

There’s software in your Windows PC, Mac, Linux machine, or whatever, that knows how to talk TCP/IP. They all have to talk TCP/IP, if they want to use the Internet.

IP addresses

Computers on the Internet need to know how to identify each other, so each machine can send numbers to the right destination computer. Each computer has an IP address. It’s four sets of digits with periods (.) in between. For example: 123.21.22.11, 211.22.92.91, and 88.120.233.9.

Every computer on the Internet has to have an IP address. There are tricks for using one IP address for several computers. But, in the end, each machine has an IP address.

Exercise: Find your computer's IP address

You can find out the IP address of your computer. On a Windows PC, bring up the Run dialog. The easiest way is to hold down the Windows key and press R. The Windows key looks like this:

Windows key

Type cmd and press Enter. You’ll see a command line window. Mine looks like this:

Command line window

Type ipconfig and press Enter. You’ll get a bunch o’ output. The IP address will be labeled something like IPv4. Type it in the solution section below.

If you have a different type of computer, use Google to find out how to get your computer’s IP address. Explain how in the exercise discussion.

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

Can't find the 'comment' module! Was it selected?

Domain names

IP addresses are used for all Internet traffic, including the Web. But numbers are hard for people to remember. Imagine an ad that says: “Free download! Go to 219.32.228.181 today!” Ack!

Instead, we have the domain name system (DNS). When you register a domain name, maybe renata.org, you associate the domain name with an IP address. So your ad can read: “Free download! Go to renata.org today!” Much better.

Exercise: Find a Web site's IP address

You can find the IP addresses of Web sites. There are several ways to do it. One way is to use the ping command.

Go to your computer’s command line. (On a Windows machine, hold down the Windows key and press R, type cmd and press Enter.) Type ping and then a domain, like:

ping coredogs.com

Your computer will ping the computer associated with the domain name. A “ping” is an “are you there?” message, used to tell if a server is running. As a side effect, ping will tell you the IP address of the server.

Some servers won’t respond to pings. The server that answers to microsoft.com, for example, ignores pings.

Find the IP addresses of some of your favorite Web sites. (I like masalatime.com and failblog.org.)

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

Can't find the 'comment' module! Was it selected?

How does your computer know what IP address matches what domain? By asking a domain name system (DNS) server. A DNS server is a computer with a table in its memory (or on disk), like this:

Domain name IP address
sitepoint.com 69.20.16.232
whitehouse.gov 96.16.226.135
... ...

When you type a domain name like sitepoint.com into a browser, your computer sends the DNS server the domain name, and gets back the IP address. Your computer uses the IP address to send the actual message.

When you register a domain name and associate it with an IP address, the new name and IP address spread across the Internet. That is, the DNS servers tell each other that there is a new table entry.

You can find out who registered a domain name using a whois service. Try this exercise.

Exercise: Play the Weird Domain Game

Think up a strange domain name, like deathpoodles.com. Go to http://www.networksolutions.com/whois/index.jsp and type it in. The one who comes up with the strangest name wins.

You can find some strange stuff. (There is a strangestuff.com.)

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

Can't find the 'comment' module! Was it selected?

Summary

  • Computers on the Internet use TCP/IP.
  • Computers have IP addresses to identify them on the Internet.
  • You know how to find the IP address of your computer.
  • You know how to find the IP address of a Web server.
  • DNS servers associate domain names with IP addresses.
  • You know how to find the owner of a domain name.

What now?

You know all you need to know about the BoNL. Let’s talk about the services layer.

The services layer

Where are we?

We talked about the bucket o’ numbers layer. Now let’s move on the services layer.

This lesson's topic

Figure 1. This lesson’s topic

This lesson’s goals

By the end of this lesson, you should:

  • Know that a service is something one computer does for another.
  • Know how the email protocol SMTP works.
  • Know how the Web protocol HTTP works.

A “service” is something that one computer does for another. Like sending email, fetching Web pages, saving data to a database, whatever. Email is one of the easiest services to understand, so let’s start with that.

Sending email

Jake wants to send an email to Jules. Jake’s email address is jake@evildoom.com. Jules’ is jules@dogbowl.com.

Jake starts up his email client. Jake uses Windows Mail. Windows Mail runs on his own PC in his kennel. Jake types in a message. When he’s ready, he clicks the Send button.

Email client

Figure 2. An email client

The term “client” has more than one meaning. Sometimes, “client” means the physical computer Jake is using. Sometimes, “client” means the email software running on the computer (Windows Mail). You have to figure out from the context what is meant.

Jake’s PC can’t send email by itself. It doesn’t have a domain name (the “evildoom.com” part of “jake@evildoom.com”). Instead, Jake’s email client asks another computer to send the email. This computer is the email server for evildoom.com. It offers email service to everyone with an EvilDoom account.

Client and server

Figure 3. Client and server

Just like the word “client,” the word “server” has more than one meaning. Sometimes, it means a physical computer. Sometimes, it means some software running on that computer, that offers services.

There’s lots of different email server software. qmail, Microsoft Exchange, and others.

When Jake sets up Windows Mail (his email client software), he has to tell it which server to talk to:

Identifying a server

Figure 4. Identifying a server

Now the client will know where to send messages.

OK, so Jake has finished typing his message, and clicks the Send button. Windows Mail on Jake’s PC starts a conversation with the email server. It’s like a conversation between dogs. One computer says something, the other replies, the other replies to that, and so on.

The conversation between email client and server goes something like this:

Client: HELO mail.evildoom.com
Server: 250 Hello evildoom.com
Client: rcpt to: jules (at) dogbowl.com
Server: 250 Ok
Client: DATA
Server: 354 End data with .
Client: Subject: Study group meeting
Client: D00d,
Client:
Client: I'm buying the coffee tonight.
Client:
Client: Jake
Client: .
Server: 250 Ok Mail queued for delivery
Client: QUIT
Server: 221 Bye

The conversation follows some rules, such as using HELO to start, and ending the message with a period (.) on a line by itself. The set of rules are called the simple mail transfer protocol (SMTP).

Jonathan Postel created the SMTP protocol. He wrote down the rules in a document called RFC 821. It’s great reading if you have trouble sleeping. You can see it at http://www.freesoft.org/CIE/RFC/821/index.htm.

When Microsoft’s programmers created Microsoft Mail (the client program Jake is using), they read RFC 821, so they’d know how their program should talk to servers. They put in an instruction something like this:

print "HELO " & computer_name;

Now suppose that EvilDoom is running the qmail server. The dude who wrote qmail, Dan Bernstein, read RFC 821. So he knew what clients would send to his server software, and what responses they would expect. He wrote code something like this:

get Command;
if ( Command == 'HELO' ) call StartMessage;

The two functions of a client

You can see that the client software has two main functions.

Client functions

Figure 5. Client functions

First, it has to support the user’s tasks. For email, that means (1) letting the user type in messages to send, and (2) showing messages from other people.

Second, the client has to be able to talk to a server. They have to share the same protocol (set of communication rules), otherwise they won’t be able to interact.

Standards rock!

The only reason that the Microsoft Mail client can talk to the qmail server is that they both use SMTP. That is, they both follow the rules in RFC 821 that Jonathan Postel wrote.

RFC 821 is a public document. Anyone can see it. Some software companies use private protocols. They won’t tell anyone how they work.

Who creates standards? All sorts of people, but some groups are more important than others. SMTP is supported by the Internet Engineering Task Force, an open community that reviews and adopts standards.

That’s enough email for now. Let’s move on to the Web.

HTTP

HTTP stands for the hypertext transfer protocol. It’s a standard, just like SMTP. However, it’s designed to support sending data on the Web, not sending email.

Service-layer protocols are like that. They support specific types of communication. There are hundreds of protocols, for instant messaging, mapping, gaming, and lots of other things. But to a Weber, only a few are important.

HTTP is maintained by the World Wide Web Consortium, another nonprofit standards group. The W3C is the most important standards group for the Web.

The setup is the same as before, with a client and a server. But this time, the client is a Web browser, and the server is a Web server.

Web client and server

Figure 6. Web client and server

There are many Web browsers, including Firefox, Google Chrome, Safari, Opera, and Internet Explorer. We’ll use Firefox in our lessons, because it has nice features for Webers.

There are many Web servers as well. The most widely used is the Apache Web server. It runs on just about every computer there is.

HTTP is the set of rules that browsers and servers use to communicate. Browsers follow the rules when they talk to Web servers. Web servers follow the rules when they respond to Web clients.

Suppose Jake clicks on this link on a page:

Superdogs

Figure 7. Superdogs

Here’s the conversation between the browser and the server.

Client:
GET superdogs.html HTTP/1.1
Host: www.evildoom.com

Server:
HTTP/1.1 200 OK
Last-Modified: Mon, 25 Dec 2006 22:22:22 GMT
Content-Type: text/html
(Web page content)

The HTTP standard document says that clients should use GET to fetch content. Servers should use the code 200 to say that everything is OK. There’s lots more to HTTP, but you get the idea. HTTP is a set of rules that browsers and servers use to talk to each other.

Going deeper

  • HTTP headers. A short CoreDogs article on HTTP response headers.

Summary

In this lesson, you learned:

  • That a service is something one computer does for another.
  • How the email protocol SMTP works.
  • How the Web protocol HTTP works.

What now?

A Web browser gets data from a Web server, and sends it to the display layers. That’s coming up next.

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

Can't find the 'comment' module! Was it selected?

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!