The Web

Invented by by Tim Berners-Lee, a scientist at CERN, a European physics lab.

Two main parts

  • Hypertext Markup Language (HTML)

  • Hypertext Transfer Protocol (HTTP)

What is hypertext?

“hyper” meaning “above” or “beyond”

Beyond a single text, it is text with the ability to link to other texts.

HTML

  • What your web browser understands.

  • A human-readable, text-based, markup language.

  • Originally designed primarily for sharing technical documentation

  • Separates structure of documents from their presentation.

Markup is in terms of “tags”

Tags are written like <p>. Tags are made up of:

  • A less than sign, called an “open angle bracket” in this context.

  • The name of the tag, p in this case

  • And a greater than sign, called a “close angle bracket”.

Tags themselves are matched

For (almost) every <tag>, called an open tag, there needs to be a matching close tag that looks like </tag>, where tag stands for any tag name.

Tags enclose text and other tagged elements

<p>This is a paragraph consisting of just text.</p>

<p>This is a paragraph with some text <b>in bold</b>.</p>

Note how Each element starts with an “open tag” and ends with a “close tag” with the same name.

A trivial HTML document

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <title>Hello</title>
  </head>
  <body>
    <p>
      hello, world!
    </p>
  </body>
</html>

Jump

Looks like this in the browser

HTML is also multi media

  • Can include images, video, etc.

  • Virtually everything you see on the web is HTML.

  • In particular canvas element is a whole world to itself.

HTTP, just FYI

  • How your browser and web servers communicate.

  • Basically, your browser connects to a web server and requests a document and the server sends it to the browser.

An HTTP request

GET /hello/ HTTP/1.1
Host: localhost:3000
User-Agent: curl/7.79.1
Accept: */*

An HTTP response (headers)

HTTP/1.1 200 OK
X-Powered-By: Express
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Tue, 27 Dec 2022 01:58:17 GMT
ETag: W/"a8-185514d49e6"
Content-Type: text/html; charset=UTF-8
Content-Length: 168
Date: Tue, 27 Dec 2022 02:09:39 GMT
Connection: keep-alive
Keep-Alive: timeout=5

An HTTP response (body)

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <title>Hello</title>
  </head>
  <body>
    <p>
      hello, world!
    </p>
  </body>
</html>

Look familiar?

Don’t worry about HTTP

For the most part, unless you plan to write a web server or a web browser, you’ll never need to deal with HTTP directly.

But it’s useful to have some understanding of what’s going on under the covers.

You will need to learn some HTML, however.

Read about getting started with the web and in particular html basics.

After that we’ll set up

Your first web project