// HOW TO USE THESE NOTES

• Read the amber In plain words box first. It gives the idea in one or two sentences.
• Then read the details. Every new word is explained the first time it appears, and again in the word list at the back.
• Do each green Practice box yourself. Answers to the practice questions are on the last pages.
• Write in the margins. These notes are yours to keep.

// THE DAY

// BY THE END YOU CAN

• Explain what a network, an IP address and a subnet are, in your own words.
• Split a network into smaller ones and read your own network settings.
• Name the five layers, the main ports, and the parts of a network.
• Make a program ask a server for data over the network.
• Build a small web page with HTML, CSS and JavaScript, and put it online.
• Explain passwords, hashing, SQL injection, XSS and HTTPS.

// PART 1 · NETWORKS

1. What is a network?

Before networks, each computer was alone. To move a file you copied it to a flash drive and walked to another office. A network lets the file travel by itself, in seconds, to anyone allowed to get it.

// THE PARTS OF A NETWORK

// SIZES OF NETWORKS

// PROTOCOL: THE MOST IMPORTANT WORD

A protocol is a set of rules that both sides follow so they understand each other. If you greet someone in Hausa, they must answer in Hausa. Devices do the same: HTTP is the protocol of the web, SMTP is the protocol of email, and IP is the protocol that gives addresses.

// PART 1 · THE CORE

2. Bits and bytes: how computers count

One 0 or 1 is called a bit. Eight bits together are a byte. A byte can hold any number from 0 to 255. To read a byte, give each position a value: 128, 64, 32, 16, 8, 4, 2, 1. Add up the values where there is a 1.

This is why every part of an IPv4 address stops at 255: it is one byte. An IPv4 address is four bytes, which is 32 bits.

// HOW TO CONVERT A NUMBER TO BINARY

1. Start at 128. If the number is 128 or more, write 1 and subtract 128. Otherwise write 0.
2. Move to 64 and repeat, then 32, 16, 8, 4, 2, 1.
3. Example: 25. 128 no (0), 64 no (0), 32 no (0), 16 yes (1) leaves 9, 8 yes (1) leaves 1, 4 no (0), 2 no (0), 1 yes (1). Answer: 00011001.

// PART 1 · LAYERS

3. The five layers: sending a letter

When you send, data goes down the layers. When the other computer receives it, the data goes up. This is a model: real systems mix layers a little, but it helps us think and find faults.

// PART 1 · LAYERS

4. Packets and headers: wrapping the message

Why cut the message? Small pieces share the road fairly, and if one piece is lost only that piece is sent again. Every piece carries the address of the sender and the receiver.

// WORDS

On the way, the IP addresses stay the same from start to end, but the MAC addresses change at every hop, because each hop has a different pair of devices.

// PART 1 · ADDRESSES

5. MAC address and IP address

An IPv4 address has four numbers called octets because each is 8 bits. In 192.168.10.25, the first three numbers can be the street (the network) and the last number is the house (the device). Where the street ends is decided by the subnet mask.

// PART 1 · ADDRESSES

6. Subnet mask, gateway, DNS and DHCP

// DNS: THE PHONE BOOK

People remember names such as nmu.edu.ng. Computers need numbers. DNS (Domain Name System) answers the question: what is the IP address of this name? Your laptop asks the DNS server first, then talks to the real address. Command to try: nslookup nmu.edu.ng.

// DHCP: THE HELPER AT THE DOOR

DHCP (Dynamic Host Configuration Protocol) is a service on the router or a server. When you join, your device shouts: who am I? DHCP answers with an address, mask, gateway and DNS. The address is lent for a time, called a lease, then returned.

// OTHER WORDS

// PART 1 · ADDRESSES

7. Public, private and NAT

Private addresses cannot be reached from the internet, which is also a small protection. When your laptop (192.168.10.25) asks a website for a page, the router swaps your private address for its public one and remembers who asked. When the answer returns, the router swaps back.

// NAT (NETWORK ADDRESS TRANSLATION)

1. Laptop sends a request from 192.168.10.25, port 50321.
2. Router rewrites it to the public address, port 40001, and writes this in its table.
3. Website answers to the public address, port 40001.
4. Router looks in the table and forwards the answer to 192.168.10.25.

IPv4 has only about 4.3 billion addresses, which is not enough for every device. NAT is one reason the internet kept working. IPv6 has far more addresses and is slowly replacing it.

// PART 1 · SUBNETTING

8. Subnetting: cutting a network into floors

Why subnet? (1) Less noise: broadcasts stay on their floor. (2) Better security: Finance and Students can be separated. (3) Easy management: one floor, one department. (4) Good use of addresses.

// THE RULE OF HOST BITS

An IPv4 address has 32 bits. The mask decides how many are network bits and how many are host bits. /24 means 24 network bits and 8 host bits.

Usable devices = addresses minus 2, because the first address is the network name and the last is the broadcast.

// BORROWING BITS

To make more networks we borrow bits from the host part. Borrow 1 bit and you get 2 networks. Borrow 2 bits and you get 4. Borrow 3 and you get 8. Each borrowed bit doubles the number of networks and halves the size of each.

// PART 1 · SUBNETTING

9. Worked example: four floors

1. We need 4 networks. 2 x 2 = 4, so we borrow 2 bits.
2. /24 plus 2 borrowed bits is /26. The mask is 255.255.255.192.
3. 6 host bits remain: 2 to the power 6 = 64 addresses per network, so 62 usable.
4. The networks start every 64: .0, .64, .128, .192.

The first usable address is often given to the router (the gateway), for example 192.168.10.1 for Admin and 192.168.10.129 for Students.

// PRACTICE QUESTIONS

1. Split 192.168.20.0/24 into two equal networks. Give the mask, both network addresses and the usable range of each.
2. A department has 25 computers. Which prefix is the smallest network that still fits them?
3. Which network does 192.168.10.140 belong to in the table above?
4. Why can't we give a device the address 192.168.10.63?

// PART 1 · LAB A

10. Lab A: see your own network

// OPEN THE COMMAND WINDOW

Windows: press the Windows key, type cmd, press Enter. Mac: press Command+Space, type Terminal, press Enter. Linux: open Terminal.

// READING THE RESULTS

• ping: time=45ms is the round trip in milliseconds. Under 50 is good, over 300 is slow. Request timed out means no answer (or a firewall blocks ping).
• tracert: each line is a router. Stars (* * *) mean that router does not reply. More hops usually means a longer trip.
• ipconfig: look for IPv4 Address, Subnet Mask, Default Gateway and DNS Servers. Physical Address is your MAC.

// MY RESULTS

// PART 1 · PORTS AND PROTOCOLS

11. Ports, TCP and UDP

A computer can run many programs that use the network at the same time: a browser, email, a chat app. The port (a number from 0 to 65535) tells the computer which program should receive each packet. An IP address plus a port is called a socket, for example 93.184.216.34:443.

// TCP AND UDP

A closed port is a door that is locked. An open port with a program behind it is a door that answers. Attackers search for open doors, so a firewall keeps open only the ports that are needed.

// PART 1 · PUTTING IT TOGETHER

12. You type nmu.edu.ng. What happens?

1. DNS: your browser asks the DNS server: what is the IP address of nmu.edu.ng? The answer is a number.
2. Connect: your laptop builds a packet for that IP address, port 443 (HTTPS), and starts a TCP handshake.
3. Gateway: the packet goes to your default gateway, the router. Your private address is swapped for the public one (NAT).
4. Route: the packet is passed from router to router across the internet (you can see them with tracert).
5. Server: the web server receives the request on port 443, runs its program and builds the page.
6. Return: the page comes back in many packets along a similar road. Your browser puts them in order and draws the page.

// WHAT EACH PIECE DID

// PART 1 · EQUIPMENT

13. Cables and equipment

A network cable (UTP) has 8 thin wires twisted in 4 pairs. Twisting cancels electrical noise. The plug is called RJ45. The maximum length is 100 metres. The standard order is T568B.

Hold the plug with the clip down and the contacts toward you when reading pins from the left, or follow your trainer. Straight cable: same order at both ends (computer to switch). Crossover: T568B at one end and T568A at the other (computer to computer, old equipment). Modern devices detect the type themselves.

// EQUIPMENT

// PART 1 · EQUIPMENT

14. VLANs and Wi-Fi

// VLAN: VIRTUAL LAN

Without VLANs, every device on a switch can see every other. A VLAN splits the ports into groups. Staff computers go in VLAN 10 and students in VLAN 20. They cannot reach each other unless a router lets them, and the router can apply rules. It is cheaper and safer than buying two switches.

• A port belongs to one VLAN (an access port).
• A cable between two switches can carry several VLANs (a trunk).
• VLAN numbers go from 1 to 4094.

// WI-FI

• Security: use WPA2 or WPA3 with a long password. Change the factory password of the router. Do not use WEP.
• SSID is the Wi-Fi name. Hiding it is not real security.
• Place access points high and central, away from metal and thick walls.

// PART 1 · SECURITY AND SKILLS

15. Firewalls and troubleshooting

Rules are read from top to bottom and the first match wins. Good firewalls keep logs, a diary of what was allowed and blocked, so you can find attacks and mistakes.

// TROUBLESHOOTING LADDER

1. Layer 1: cable in, Wi-Fi on, lights green.
2. Layer 2: right Wi-Fi name or switch port.
3. Layer 3: does the device have an IP, mask and gateway? (ipconfig)
4. Ping the gateway. If it fails, the problem is inside your network.
5. Ping 8.8.8.8. If it fails, the problem is the internet connection or provider.
6. Ping google.com. If the number worked but the name fails, the problem is DNS (try nslookup).
7. Restart the device, then the router, then call the provider.

// PART 2 · NETWORK PROGRAMMING

16. What is programming?

// A TEA PROGRAM

water = 1 cup
sugar = 2 spoons
boil(water)
if (sugar is available) { add(sugar) }
repeat 10 times { stir() }
serve()

The same ideas appear in every language. Only the spelling changes. Today you will meet JavaScript (in the browser), Python (online), SQL (for data) and a little PHP (on the server).

// PART 2 · NETWORK PROGRAMMING

17. Sockets: two programs talking

1. Server: bind to an address and port, then listen. It waits.
2. Client: connect to the server's address and port. It dials.
3. Server: accept. The call is open.
4. Both sides send and receive data, then close.

// THE SAME IDEA IN PYTHON (FOR READING)

# server.py
import socket
s = socket.socket()
s.bind(("0.0.0.0", 5000))
s.listen()
conn, addr = s.accept()
data = conn.recv(1024)
conn.sendall(data)       # echo it back

# client.py
import socket
c = socket.socket()
c.connect(("127.0.0.1", 5000))
c.sendall(b"hello")
print(c.recv(1024))

Every web page uses sockets underneath: your browser is the client, the website is the server, and port 443 is the number dialled. You do not need to install anything today. The browser version of this idea comes next.

// PART 2 · LAB B

18. fetch: a program asking the web for data

// LAB B1: ASK DNS FOR AN ADDRESS

Open any web page. Press F12 (or right-click, Inspect), click Console, paste and press Enter:

fetch("https://dns.google/resolve?name=nmu.edu.ng&type=A")
  .then(r => r.json())
  .then(console.log)

Click the small arrow to open the answer. Find Answer, then data: that is the IP address of the website.

// LAB B2: SEND DATA WITH POST

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {"Content-Type": "application/json"},
  body: JSON.stringify({title: "Hello", userId: 1})
}).then(r => r.json()).then(console.log)

The practice server answers with your data and a new id: 101. It does not save anything for real; it only pretends so that you can learn.

// PART 2 · LAB C

19. Python in the browser: subnet maths

Open an online Python editor such as Programiz (programiz.com/python-programming/online-compiler) or Google Colab. Type the code and press Run.

import ipaddress
net = ipaddress.ip_network("192.168.10.0/24")
for sub in net.subnets(new_prefix=26):
    print(sub, sub.netmask, sub.num_addresses - 2)

Expected result, four lines: 192.168.10.0/26 255.255.255.192 62, then .64/26, .128/26 and .192/26. It matches the table you made by hand.

// MORE THINGS TO TRY

a = ipaddress.ip_address("192.168.10.25")
print(a.is_private)                         # True
print(a in ipaddress.ip_network("192.168.10.0/24"))   # True

// PART 3 · WEB PROGRAMMING

20. How a website works

// THE URL

https://www.nmu.edu.ng/news?id=5
^^^^^   ^^^^^^^^^^^^^  ^^^^  ^^^^
protocol  domain      path  query

// REQUEST AND RESPONSE

// PART 3 · FRONT END

21. HTML: the structure

// A SMALL PAGE

<!DOCTYPE html>
<html>
<head><title>NMU ICT</title></head>
<body>
  <h1>NMU ICT Unit</h1>
  <p>Welcome to ICT.</p>
  <a href="https://nmu.edu.ng">University website</a>
  <form>
    <input name="email" placeholder="Your email">
    <button>Send</button>
  </form>
</body>
</html>

Almost every tag opens and closes: <p> ... </p>. The most common mistake is forgetting the closing tag. The <head> holds information about the page; the <body> holds what visitors see.

// PART 3 · FRONT END

22. CSS: the look

h1 { color: teal; font-size: 32px; }
.card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
}
#menu { background: #0b1b33; color: white; }

// MAKING A PAGE WORK ON A PHONE

<meta name="viewport" content="width=device-width, initial-scale=1">

#list { display: block; }
@media (min-width: 700px) {
  #list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

Read it as: by default stack the items. If the screen is at least 700 pixels wide, show two columns. Most visitors in Nigeria use phones, so always design for a small screen first.

// PART 3 · FRONT END

23. JavaScript: the behaviour

// REACTING TO A CLICK

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  document.querySelector("h1").textContent = "You clicked!";
});

Read it: find the button; when it is clicked, find the heading and change its text. The browser turns your HTML into a tree called the DOM, and JavaScript can read and edit any part of the tree.

// THE THREE LANGUAGES TOGETHER

// PART 3 · LAB D

24. Lab D: staff directory with live search

Open codepen.io, click Start Coding. Type these into the HTML, CSS and JS boxes. If CodePen is blocked, use jsfiddle.net.

// HTML

<h1>NMU ICT Staff</h1>
<input id="q" placeholder="Search a name">
<div id="list"></div>

// CSS

body { font-family: sans-serif; margin: 16px; }
input { padding: 10px; width: 100%; max-width: 420px; }
.card { border: 1px solid #ccc; border-radius: 8px; padding: 12px; margin: 8px 0; }
@media (min-width: 700px) { #list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } }

// JAVASCRIPT

const staff = [
  {name: "Amina Bello", unit: "ICT", phone: "0800 000 0001"},
  {name: "Tunde Okoro", unit: "Library", phone: "0800 000 0002"},
  {name: "Ibrahim Musa", unit: "Registry", phone: "0800 000 0003"},
  {name: "Grace Ebi", unit: "Bursary", phone: "0800 000 0004"}
];
const list = document.querySelector("#list");
function show() {
  const text = document.querySelector("#q").value.toLowerCase();
  list.textContent = "";
  staff.filter(s => s.name.toLowerCase().includes(text)).forEach(s => {
    const d = document.createElement("div");
    d.className = "card";
    d.textContent = s.name + " · " + s.unit + " · " + s.phone;
    list.appendChild(d);
  });
}
document.querySelector("#q").addEventListener("input", show);
show();

// PART 3 · DATA

25. Databases and SQL from zero

// THE FIVE COMMANDS

CREATE TABLE users (id INTEGER PRIMARY KEY, email TEXT, role TEXT);
INSERT INTO users (email, role) VALUES ('amina@nmu.edu.ng', 'staff');
SELECT * FROM users;
SELECT email FROM users WHERE role = 'admin';
UPDATE users SET role = 'admin' WHERE id = 1;
DELETE FROM users WHERE id = 1;

// PART 3 · BACK END

26. Server code, sessions and REST

// REGISTER AND LOGIN

1. Register: the visitor sends email and password. The server makes a hash of the password and saves the email and the hash. Never the real password.
2. Login: the server finds the user, hashes the typed password and compares with the saved hash.
3. If they match, the server starts a session: a record on the server saying this visitor is logged in. It sends the browser a cookie, a small note with the session number.
4. On every next request the browser sends the cookie, so the server knows who you are.
5. Logout: the server destroys the session.

// PHP, shown for reading
$hash = password_hash($pw, PASSWORD_DEFAULT);
$st = $pdo->prepare("INSERT INTO users (email, password_hash) VALUES (?, ?)");
$st->execute([$email, $hash]);
// at login:
password_verify($pw, $savedHash);

// REST API

An API lets programs ask each other for data. REST is a tidy style: one address per thing, one method per action, answers in JSON.

You used GET and POST in Lab B. A web page with fetch can call such an API and draw the answer without reloading.

// PART 3 · SECURITY

27. Passwords: hash, salt and encryption

// WHY HASH?

If a hacker steals a database of real passwords, every account is lost, and because people reuse passwords, their other accounts too. If only hashes are stolen, the hacker must guess passwords one by one. Good hashes (bcrypt, Argon2, PHP password_hash) are slow on purpose to make guessing expensive. Plain MD5 or SHA-256 alone are too fast for passwords.

// SEE IT YOURSELF

• Practice Lab, tab 5 (Hashing): type Welcome123. Then change to Welcome124. The whole hash changes.
• Switch on salt. The same password gives different hashes.

// STRONG PASSWORDS

• Long beats clever: four random words are better than P@ssw0rd.
• Never reuse a password. Use a password manager.
• Turn on two-factor authentication where possible.

// PART 3 · SECURITY

28. The three common attacks

// 1. SQL INJECTION

The attacker types part of a command into a box. Example in the email box: amina@nmu.edu.ng' --. The two dashes start a comment, so the password check is cut off:

SELECT * FROM users WHERE email = 'amina@nmu.edu.ng' --' AND password = '...'

Fix: prepared statements. The command is written first with empty slots (?). The values go in separately and are always treated as plain data.

// 2. XSS (CROSS-SITE SCRIPTING)

A visitor saves a comment that contains a script. Every other visitor's browser runs it, and it can steal their session. Fix: show text as text. Use textContent in JavaScript and htmlspecialchars() in PHP so that < becomes a harmless symbol.

// 3. CSRF (CROSS-SITE REQUEST FORGERY)

While you are logged in, another website tricks your browser into sending a request, such as change my email. Fix: put a secret token in every form and check it, and set cookies as SameSite.

// PART 3 · GOING ONLINE

29. HTTPS, Git, GitHub and GitHub Pages

// HTTPS

Without HTTPS, a password typed on public Wi-Fi can be read by anyone nearby. Click the padlock in the browser and look at the certificate.

// GIT AND GITHUB

// PUBLISH YOUR PAGE (GITHUB PAGES)

1. Create a free account at github.com.
2. Click New repository, name it my-first-site, choose Public, tick Add a README, Create.
3. Click Add file, then Create new file, name it index.html, paste your page, click Commit changes.
4. Open Settings, then Pages. Under Branch choose main and / (root), then Save.
5. Wait about a minute. Your site is at https://yourname.github.io/my-first-site/ with a padlock.
6. Edit index.html on GitHub and the live page updates.

// MINI-PROJECT

30. Build in pairs: your department page

// STEP BY STEP

1. Choose a unit: Library, Registry, ICT, Bursary, Student Affairs.
2. Open CodePen. Build the HTML, then the CSS, then the JavaScript.
3. Add a fetch to jsonplaceholder.typicode.com/users and list five names under Our partners.
4. Test on your phone or by narrowing the preview.
5. Copy the code to index.html on GitHub and publish with Pages.
6. Open app.diagrams.net (choose Device, no sign-in needed) and draw: internet, router, switch, four floors with the IP plan from Section 9.
7. Show your page and diagram to the class (2 minutes).

// CHECKLIST BEFORE YOU SHOW

• The page opens at its GitHub link.
• The padlock is shown.
• It looks good at phone width.
• Search/button works.
• The diagram is saved or exported as an image.

// REVISION

31. Practice questions

1. What is a protocol?
2. How many bits are in a byte?
3. Write 10 in binary.
4. What is the largest number a byte can hold?
5. Name the five layers from top to bottom.
6. Which address is fixed in the network card?
7. What does DNS do?
8. What does DHCP do?
9. What does NAT do?
10. How many usable devices in a /26?
11. What is the mask for /25?
12. Which address ends 0 and which ends 255 in a /24?
13. Which port is HTTPS?
14. Which is faster, TCP or UDP, and why?
15. What is the T568B order?
16. Which 2.4 GHz channels do not overlap?
17. What does deny by default mean?
18. What does a VLAN do?
19. What does ping do?
20. What does the server do in a socket pair?
21. What is JSON?
22. Which language shows structure, which shows look, which shows behaviour?
23. What is a primary key?
24. Which SQL command reads rows?
25. Why do we hash passwords?
26. What is a salt?
27. What stops SQL injection?
28. What stops XSS?
29. What does the HTTPS padlock mean?
30. What is a commit?

// REVISION

32. Answers

// REFERENCE

33. Word list

// YOUR NOTES

My notes and questions

Write down what you want to remember, and questions to ask the trainer.