Web Basics — Module 2

Part 1 · The Basics

The words you need to know

Six simple ideas. Once you know them, the web stops being magic.

🌐

The Internet

A giant network of computers

The internet is millions of computers connected together all over the world. They are connected with cables (even under the ocean!), Wi‑Fi and mobile networks.

Because they are connected, computers can send messages to each other. A message can be a photo, a video, a chat or a web page.

Think of it like: the road system of the world. Roads connect all cities. Cars carry things from one city to another. On the internet, cables are the roads and data is the cars.

Example: You send a photo to a friend in another country. Your photo is cut into small pieces (called packets). The pieces travel through cables and routers, then join together again on your friend's phone. This takes less than one second!

Internet ≠ Web. The internet is the roads. The Web (websites) is one thing that uses the roads. Email, online games and WhatsApp also use the internet.

Data traveling on the internet

🟠 request goes · 🟢 answer comes back

🏷️

Domain & URL

The name of a website

A domain is the easy name of a website, like google.com or wikipedia.org. Humans remember names better than numbers.

A URL is the full address of one page. The domain is one part of the URL.

Think of it like: the domain is the name of a building ("City Mall"). The full URL is the exact shop inside it ("City Mall, floor 2, shop 15").

The parts of a domain

shopSubdomain
(a section, optional)

exampleDomain name
(the name you buy)

comTLD — Top Level Domain
(the ending)

Computers read a domain from right to left: com → example → shop

Common endings (TLDs):

.com company.org organization.edu school.gov government.net network.io tech.uk .de .ir .fr countries

Fun fact: you can't own a domain forever. You rent it, usually for 1 year, for around $10.

Click each part of this URL 👇

🔒

🔢

IP Address

The number of every device

Every device on the internet has a number called an IP address. It looks like this: 142.250.185.78

Computers don't understand names like google.com. They only use numbers. So the IP is the real address.

Think of it like: a phone number. Your friend's name is "Ali", but to call him you need his number. The domain is the name, the IP is the number.

So who changes the name into the number?

DNS (Domain Name System) does. It is the phone book of the internet. You give it a name, it gives you the IP number.

Two kinds of IP:
IPv4 – 4 numbers from 0 to 255: 192.168.1.10
IPv6 – newer and longer, because we ran out of IPv4: 2001:db8::8a2e:370:7334

Try it: search "what is my IP" on Google to see your own public IP.

Try the DNS phone book

Pick a website. DNS will find its IP address.

These are example IPs. Big websites use many IPs, and they can change.

🖥️

Server

The computer that gives

A server is a computer that keeps websites, files and data, and sends them to people who ask.

It is on 24 hours a day, 7 days a week.
It usually has no screen and no keyboard.
It lives in a big building called a data center, with thousands of other servers.
It can answer thousands of people at the same time.

Think of it like: a library. The library keeps the books. When you ask for a book, the librarian finds it and gives it to you.

Example: When you watch a video on YouTube, the video file is not on your phone. It is on one of Google's servers. Your phone asks for it, and the server sends it.

Fun fact: any computer can be a server — even your own laptop! A server is about the job (giving), not the type of machine.

A server rack in a data center

Kinds of servers

🌐 Web server — websites🗄️ Database server — data📧 Mail server — email🎮 Game server📁 File server

🙋

Client

The device that asks

A client is the device (or app) that asks for something from a server. Your phone, your laptop, your smart TV — they are all clients.

The client sends a request (a question). The server sends back a response (an answer). This is called the client–server model, and almost all of the internet works this way.

Example: You open Instagram. Your phone (client) asks: "Give me new posts." Instagram's server answers: "Here are 20 new posts."

All these can be clients.

Client & server = a restaurant

🙋

YouClient

order →
← food

🧑‍🍳

WaiterInternet

order →
← food

🍳

KitchenServer

Think of it like: you don't go into the kitchen. You give your order (request) to the waiter. The kitchen cooks it and the waiter brings your food (response).

Client	Server
Asks	Answers
Your phone / laptop	A computer in a data center
On when you use it	Always on
Sends a request	Sends a response

🧭

Browser

The app that shows websites

A browser is an app you use to open websites. It is the most common client.

The browser has 3 main jobs:

Ask — it sends a request to the server.
Read — it gets back code (HTML, CSS, JavaScript).
Draw — it turns that code into the colorful page you see.

Think of it like: a translator. The server speaks "code". You speak "human". The browser translates code into pictures, text and buttons.

Common mistake: Google is not a browser! Google is a search engine (a website that finds other websites). Chrome is the browser.

Popular browsers

Google ChromeSafariMozilla FirefoxMicrosoft EdgeOperaBrave

What the browser receives vs. what you see

<h1>Hello!</h1>
<p>Welcome to my <b>site</b>.</p>
<button>Click me</button>

⬇️ browser translates

Hello!

Welcome to my site.

Try it: on any website, right-click → View Page Source to see the code the browser got.

Part 2 · Journey of a Web Page

What happens when you press Enter?

10 steps, from your keyboard to the server and back. Click a step on the list to read about it, or press Play to watch the whole journey.

⏱️ All 10 steps usually happen in less than 1–2 seconds!

Part 3 · HTML Tags

Speak the language of web pages

HTML (HyperText Markup Language) tells the browser what is on the page: a title, a paragraph, a picture, a button… We do this with tags.

The anatomy of a tag

Click each colored part to learn its name.

<a href="https://example.com">Click me</a>

Opening tag + content + closing tag together = an element.

1. Most tags come in pairs<p> opens, </p> closes.

2. Some tags are emptyThey have no content and no closing tag: <br> <img> <hr> <input>

3. Close in the right order✅ <b><i>Hi</i></b>
❌ <b><i>Hi</b></i>

4. Attributes: name="value"<img src="cat.jpg" alt="A cat"> — add many, with spaces between.

5. Comments are hidden The browser ignores it.

6. Use lowercaseWrite <p>, not <P>. It is cleaner and the common style.

Part 4 · CSS

Make your pages beautiful

CSS (Cascading Style Sheets) tells the browser how the page looks: colors, fonts, sizes, spaces and layout. HTML is the house — CSS is the paint and the furniture. 🎨

The anatomy of a CSS rule

Click each colored part to learn its name.

h1 { color: tomato; font-size: 40px; }

Property + value = a declaration. Selector + declarations = a rule.

This rule makes every <h1> look like this:Hello!

1. Three places for CSSstyle="…" on one tag, a <style> tag, or a .css file with <link>.

2. End each one with ;If you forget it, the next line can stop working.

3. The last rule winsp { color: red; } and then p { color: blue; } → the text is blue.

4. More exact wins#id beats .class, and .class beats p.

5. Comments are hidden/* note to myself */ The browser ignores it.

6. Children inheritPut color or font-family on body, and all the text inside gets it.

Part 5 · Project

Build your own page, step by step

Now use what you learned! In 13 small steps you build a page about yourself: first the HTML, then the CSS. Each step has tasks, the new code, and an answer for when you get stuck. Your code is saved in this browser.

📚 1. LearnRead the lessons in the "Learn first" list (5–10 minutes).

✏️ 2. BuildDo the tasks in the editor — or in VS Code on your own computer.

💡 3. Stuck?Press the yellow "💡 Answer" button, in the dark bar above the code editor, to see one solution. Press it again to go back to your code.

🎤 4. ShowShow your page to a friend or to the class, and explain one thing that you did.

How the Web Works

The Basics

Journey of a Page

HTML Tags

CSS Design

Build Your Page