WOOFCODE logo

Notes Week 0

The Internet and The Web

The internet has been around since the 1960s and involves computers connected together by physical wires. We can send information from one computer to another if we know its IP address.

The web was invented by Tim Berners-Lee at CERN in 1989. Rather than having to connect to a particular computer to request a document, some computers act as servers, which host pages for clients to access.

The pages are HyperText documents - text/image files containing HyperLinks to other text/image files.

Image of HyperText

Clients make HTTP requests to servers, and servers respond with HTTP responses:

Image of HTTP request

HTTP stands for HyperText Transfer Protocol. It’s the accepted convention (protocol) that we use for transfering HyperText documents between clients and servers.

Client-side and Server-side

As developers, we generally write code that the user sees (running on the client), or we write code that responds to requests that the website is making (running on the server).

Code running on the server is called backend code, and code running on the client is called frontend code. Backend/Server-side code can be written in any programming language. Frontend/Client-side code is typically written in HTML, CSS, and JavaScript.

Image of Frontend vs Backend

HTML

HTML stands for HyperText Markup Language. It’s how we describe one of the HyperText documents that Tim Berners-Lee came up with. Originally, these documents would have been simple text, images, and links to other pages, but these days, we can show pretty much anything!

Every website has the same general structure, with a head (for metadata like the site’s title and description) and a body (for the stuff that shows up on screen).

<!DOCTYPE html>
<html>
<head>
  <title>My Groovy Website!</title>
</head>
<body>
  
</body>
</html>

A single unit of HTML is called an element, which includes some content surrounded by tags (<></>).

Image of HTML anatomy

Attributes allow us to give extra information to our HTML elements, which our browser can use to render our tags.

Image of HTML attributes

There are lots of different types of HTML elements that we can use. Here are some of the most common ones:

Image of HTTP elements

You’ll see these more and more as the course progresses. Don’t worry about knowing what each of these do for now!