So, how exactly does the internet work
From light beams to watching your lectures online.
Lots of acronyms coming your way
And there are some simplifications
Internet != web
The internet is a technology that allows to computer across the globe to send 0s and 1s to each other.
The web is a technology that uses the internet to have websites.
The web is most of the internet.
Let's start from the top. How does a website work?
The client/server model
Hey, can I get the careers page?
unsw.edu.au
sure, there you go!
yep, there is is!
Hello, could I get the about page please?
But what is a website?
It's a bunch of code (ie. some text) plus some other resources (like images or videos) that your web browser (Firefox, Chrome, Edge) turns into something you can interact with.
- HTML
- CSS
- JavaScript
images
videos
etc...
+
unsw.edu.au
Sure, here's
the code and some
resources
Home page pls
HTML
Hyper-Text Markup Language
Its role is to describe the content of a website, and to tell which other resources it needs.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<p>
This is a paragraph! Can you see the p
tags?
</p>
<p>
This is another paragraph
which contains a
<a href="https://wikipedia.org">link
to wikipedia</a>
</p>
<script src="index.js"></script>
</body>
</html>
CSS
Cascading Style Sheet
It's role is to describe what the website looks like.
a {
color: green;
}
.sidebar {
width: 256px;
}
button {
border: 2px solid black;
background-color: white;
}JavaScript
JavaScript is to Java what car is to carpet.
Its role is to add interaction. It can change the HTML and the CSS.
const btn = document.querySelector('#button')
btn.addEventListener('click', e => {
alert('you clicked on the button')
})
Client
Server
and there's the js file
yep, there's the css file
and also the file index.js
oh, I need the file style.css as well
Yes sure, here's the HTML
Can I get the home page please?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<p>
This is a paragraph! Can you see the p
tags?
</p>
<p>
This is another paragraph
which contains a
<a href="https://wikipedia.org">link
to wikipedia</a>
</p>
<script src="index.js"></script>
</body>
</html>A website without CSS
But how does the client communicate with the server?
Via the ...
unsw.edu.au
you
INTERNET