1 of 18

HTTP, HTML, and "Web"

Andrew S. Fitz Gibbon

asfg@cs.washington.edu

(aka "Fitz")

2 of 18

"Internet" vs. "The Web"

Most of the time these days, we see these as the same things:

  • An "internet company" == "on the web"
  • "How's our internet access?" == "Yep, I can access the web"
  • "I posted that photo on the internet" == "it's on the web"

​

But are they? Are they the same?*

​

* Hint: No. 😉

3 of 18

Ok, but really… Web? Internet? The same, right?

Nope! Consider an analogy…

There's a house, somewhere out there, that has something inside of it that you want. Maybe it's:

  • A book to borrow
  • A friend to have dinner with
  • Your own house, with a bed to sleep in.

🏠

4 of 18

Where does the house come from?

© City of Toronto public archives

Buildings (even houses) don't just come from nowhere. They have to be built.

​

And usually the builders have a plan to work from.

​

Once they've implemented that plan, they can start putting the actually useful stuff inside: the books, furniture, other people.

5 of 18

But how do we get there?

Usually:

  • Get the address
  • Ask someone for directions from your address to the House's address
  • Series of instructions:
    • Turn here, follow until there
    • Continue until you reach this
    • Look for House
  • Follow directions

6 of 18

In this analogy...

We covered the Internet and the Web:

  • How do you get to and from the thing you want?
  • How do you build and interact with the thing you want?

7 of 18

In this analogy...

The Internet is kind of like:

  • The roads you take to get from one place to another
  • Plus the related tools to make using those roads possible (cars, signs, traffic control, GPS, etc.)

The Web is kind of like:

  • References to houses or businesses, and the things you see inside of them.
  • "If you want to talk to Alex, you can find them at 123 Street Way."

8 of 18

"Internet" vs. "The Web"

9 of 18

Internet VS. 'The Web'

INTERNET

Computers (servers) connected to each other via a series of networks

​

Powered by layers upon layers:

  • Physical: The cables between them
  • Data & Network: The [small] packets of information
  • Transport (TCP/IP): Providing connections and reliability
  • Application: Tying everything together to be useful

​

THE WEB

  • Collection of pages of information
  • Text... but with some "Hyper" around it
  • Pages can link to each other
  • Pages have style and interactivity

​

10 of 18

So, a "web" site? What's there?

Lots of content: words, images, and often: just a whole heck of a lot of text with not a lot else going on.

CSE 142: Intro. to Computer Programming I

A note.

​

The staff:

Instructor: ...

TAs: ...

​

Course overview

Words words words

​

Learning objectives

More words

11 of 18

Wouldn't it be great if there were more to our words?

hyper:

prefix: hyper-

  1. over; beyond; above.
    1. exceeding.
    2. excessively; above normal.
  2. relating to hypertext.

12 of 18

Wouldn't it be great if there were more to our words?

hyper:

prefix: hyper-

  • over; beyond; above.
    • exceeding.
    • excessively; above normal.
  • relating to hypertext.

WHAT IS THIS?!?!

13 of 18

Two fundamental technologies on the Web

HTTP:

The HyperText Transfer Protocol

  • Aka: how do we take that stuff that's "over; above; beyond" normal text, and move it from one place to another.

HTML:

The HyperText Markup Language

14 of 18

Two fundamental technologies on the Web

HTTP:

The HyperText Transfer Protocol

  • Aka: how do we take that stuff that's "over; above; beyond" normal text, and move it from one place to another.

HTML:

The HyperText Markup Language

WHAT IS THIS?!?!

15 of 18

Giving meaning to our text

CSE 142: Intro. to Computer Programming I

A note.

​

The staff:

Instructor: ...

TAs: ...

​

Course overview

Words words words

​

Learning objectives

More words

How do we go from this...

… to this

CSE 142: Intro. to Computer Programming I

A note.

​

The staff:

  • Instructor: ...
  • TAs: ...

​

Course overview

Words words words

​

Learning objectives

More words

16 of 18

<body>

<html>

<html>

<li> ...

<ol>

<header>

<p>

<section>

<section>

Hello World

<p>

<main>

<span>

Lorem ipsum

dolor sit amet ...

17 of 18

Let's demo...

https://replit.com/@afitzg/142ExploresWeb

18 of 18

Want to learn more….?

Take CSE 154. 😎