HTML and CSS course · Module 2: The Web and HTML Elements
Project: Complete Guide to the Internet
In this lesson9
Congratulations! You've reached the end of the module about how the internet works. Knowledge from many lessons sticks best when you organize it yourself - so it's time to create a complete guide to the internet in the form of an HTML page. This project sums up what you learned in the module: networks, URLs, the HTTP and HTTPS protocols, DNS and HTML tags. Along the way you will meet a few new ideas: the TCP/IP layers, the UDP protocol and CDNs.
Imagine you are the pharaoh's scribe and you must create a great scroll of knowledge - an internet encyclopedia for future generations. Each section is a different chamber in the pyramid of knowledge!
My advice: build the page step by step and check the preview after each step. You'll find a bug in five new lines faster than in a hundred.
Step 1: Document Structure - The Pyramid's Foundation
Start with a solid foundation. Every pyramid needs a foundation, and every HTML page - a proper structure. You'll use elements from the lesson on semantics here: <header> is the page header with the title, and <main> is its main content, which appears only once on a page:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Complete Guide to the Internet</title>
7</head>
8<body>
9 <header>
10 <h1>How the Internet Works - A Guide</h1>
11 <p>Discover the secrets of the network, just as we discover the secrets of pyramids!</p>
12 </header>
13 <main>
14 <!-- You'll add the next sections here -->
15 </main>
16</body>
17</html>For now <main> is empty - the comment tells you that the next sections will go there. The lang="en" attribute tells screen readers the language of the text.
Step 2: Section About Internet Basics
Wrap each topic in its own <section> element with an <h2> heading - a pyramid chamber with a plaque above the entrance. The first chamber describes the internet, the WWW and how the global network was created:
1<section>
2 <h2>What Is the Internet?</h2>
3 <p>The internet is a global network of connected computers
4 communicating using TCP/IP protocols.</p>
5
6 <h3>Key Concepts</h3>
7 <ul>
8 <li><strong>Internet</strong> - a physical network connecting computers</li>
9 <li><strong>WWW</strong> - World Wide Web, a system of web pages</li>
10 <li><strong>Browser</strong> - a program that displays pages</li>
11 <li><strong>Server</strong> - a computer that provides resources</li>
12 </ul>
13</section>A <ul> list fits perfectly here, because the order of the concepts doesn't matter. Remember that the internet and the WWW are not the same thing - the WWW is just one of the services running on the network.
Step 3: HTTP, HTTPS, and Communication
Add a section about communication protocols - how the browser talks to the server. The differences between HTTP and HTTPS are best shown in a table, because you compare the same features of both:
1<section>
2 <h2>HTTP and HTTPS Protocols</h2>
3 <p>HTTP (Hypertext Transfer Protocol) is the language through which
4 the browser and server communicate with each other.</p>
5
6 <table>
7 <thead>
8 <tr>
9 <th>Feature</th>
10 <th>HTTP</th>
11 <th>HTTPS</th>
12 </tr>
13 </thead>
14 <tbody>
15 <tr>
16 <td>Encryption</td>
17 <td>None</td>
18 <td>Yes (SSL/TLS)</td>
19 </tr>
20 <tr>
21 <td>Security</td>
22 <td>Low</td>
23 <td>High</td>
24 </tr>
25 <tr>
26 <td>Browser Icon</td>
27 <td>No padlock</td>
28 <td>Padlock</td>
29 </tr>
30 </tbody>
31 </table>
32</section>This time the table has a <thead> part with column headers and a <tbody> part with data, which organizes its structure. You can also list the HTTP response codes you've learned, e.g. 200 and 404.
Step 4: DNS - Domain Name System
Explain how DNS translates domain names to IP addresses. Here the order of the steps matters, so use an ordered list <ol> instead of <ul>:
1<section>
2 <h2>DNS System</h2>
3 <p>DNS (Domain Name System) converts friendly names
4 like "google.com" into IP addresses like "142.250.74.206".</p>
5
6 <h3>DNS Resolution Steps</h3>
7 <ol>
8 <li>The browser checks the local cache</li>
9 <li>The query goes to the DNS resolver</li>
10 <li>The resolver asks the root DNS server</li>
11 <li>Root directs to the TLD server (.com, .pl)</li>
12 <li>The TLD server directs to the domain's server</li>
13 <li>We receive the page's IP address</li>
14 </ol>
15</section>An <ol> list numbers the stages by itself. The IP address in the example is illustrative - large services have many addresses. In the Egyptian analogy, DNS is the temple guard who shows the way to the right chamber.
Step 5: TCP/IP and Data Packets
Describe how data travels through the internet. This section combines both structures you know: an ordered list of layers and a table comparing TCP with UDP:
1<section>
2 <h2>TCP/IP Model</h2>
3 <p>TCP/IP is a set of protocols that organize
4 data transmission on the internet.</p>
5
6 <h3>TCP/IP Layers</h3>
7 <ol>
8 <li><strong>Network Access Layer</strong> - cables, WiFi</li>
9 <li><strong>Internet Layer (IP)</strong> - addressing</li>
10 <li><strong>Transport Layer (TCP/UDP)</strong> - reliability</li>
11 <li><strong>Application Layer</strong> - HTTP, DNS, FTP</li>
12 </ol>
13
14 <h3>TCP vs UDP</h3>
15 <table>
16 <thead>
17 <tr>
18 <th>Feature</th>
19 <th>TCP</th>
20 <th>UDP</th>
21 </tr>
22 </thead>
23 <tbody>
24 <tr>
25 <td>Reliability</td>
26 <td>Guarantees delivery</td>
27 <td>No guarantee</td>
28 </tr>
29 <tr>
30 <td>Speed</td>
31 <td>Slower</td>
32 <td>Faster</td>
33 </tr>
34 <tr>
35 <td>Use Case</td>
36 <td>Websites, email, files</td>
37 <td>Streaming, games</td>
38 </tr>
39 </tbody>
40 </table>
41</section>We list the layers from the lowest (cables, Wi-Fi) to the highest (HTTP, DNS). TCP makes sure every packet arrives, while UDP gives up that control for speed.
Step 6: Streaming and CDN
Add a section about multimedia on the web. Paragraphs and an <h3> heading are enough here, because you describe concepts rather than steps:
1<section>
2 <h2>Streaming and CDN</h2>
3 <p>Streaming allows playing multimedia without downloading
4 the entire file. CDN accelerates content delivery.</p>
5
6 <h3>How Does CDN Work?</h3>
7 <p>CDN (Content Delivery Network) is a network of servers
8 around the world storing copies of content.
9 The user connects to the nearest server.</p>
10</section>You can compare a CDN to granaries along the Nile: instead of carrying grain from a single capital, everyone takes it from the nearest storehouse.
Step 7: Security
Add a section about internet safety. It's a good place for an Egyptian analogy with tombs, guarded against robbers with seals and traps:
1<section>
2 <h2>Internet Security</h2>
3 <ul>
4 <li>Always check the HTTPS padlock in the address bar</li>
5 <li>SSL/TLS certificate encrypts communication</li>
6 <li>Never enter passwords on HTTP pages</li>
7 <li>Watch out for phishing - fake pages</li>
8 </ul>
9</section>Each list item is one rule. You can expand on phishing in a separate paragraph: a fake page can even have a padlock, so always check the address.
Step 8: Footer - The Pharaoh's Seal
Close the page with a footer, like a seal on a royal decree. Place the <footer> element after the closing </main>, right before the closing </body>:
1 <footer>
2 <p>Internet Guide - Module 2</p>
3 <p>Created during a journey through Ancient Egypt</p>
4 </footer>
5</body>
6</html>This is the end of the document. Check that every opened tag has its pair - it's the most common mistake in large projects.
Your Task
Create a complete HTML page combining all the above sections into one cohesive document. Add your own descriptions, examples, and Egyptian analogies. The page should be readable, well-organized, and contain at least:
- Headings
<h1>to<h3>- topic hierarchy - Lists
<ul>and<ol>- listing steps and concepts - Tables
<table>- protocol comparisons - Paragraphs
<p>- descriptions and explanations - Semantic elements
<header>,<main>,<section>,<footer>
The mentor will also assess your Egyptian analogies, so add sections that aren't in the skeleton: the structure of a URL (protocol, domain, path, parameters) using an imaginary Egyptian website as an example, page loading described as a temple ceremony, browsers presented as Egyptian gods, and security shown through the lens of protecting tombs.
Submit the finished project for review by the mentor in the next step. In the editor below, a skeleton with section headings and hint comments is waiting for your content:
Code for this lesson: index.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Complete guide to the Internet</title>
6</head>
7<body>
8 <h1>Great Scroll of Knowledge - Encyclopedia of the Internet</h1>
9
10 <!-- Section 1: What is the internet? -->
11 <h2>1. What is the internet?</h2>
12 <!-- Describe what the internet is as a global network of computers -->
13
14 <!-- Section 2: HTTP and HTTPS Protocols -->
15 <h2>2. Communication protocols</h2>
16 <!-- Describe the difference between HTTP and HTTPS -->
17 <!-- Use a <table> for comparison -->
18
19 <!-- Section 3: DNS System -->
20 <h2>3. DNS System</h2>
21 <!-- Explain how DNS translates domains into IP addresses -->
22 <!-- Use an ordered list <ol> to describe the steps -->
23
24 <!-- Section 4: Browsers -->
25 <h2>4. Web browsers</h2>
26 <!-- List popular browsers in a <ul> list -->
27
28 <!-- Section 5: Security -->
29 <h2>5. Online Security</h2>
30 <!-- Describe the rules of safe internet usage -->
31
32 <!-- Section 6: Multimedia and streaming -->
33 <h2>6. Multimedia on the internet</h2>
34 <!-- Describe what streaming and CDN are -->
35
36 <footer>
37 <p><em>Author: Pharaoh's Scribe | Internet Academy</em></p>
38 </footer>
39</body>
40</html>Remember: a good guide is like a pyramid - a solid foundation, section-chambers with clear plaques, and the seal of the footer at the end. In the next module you'll give it colors with CSS.
Spotted a mistake in this lesson?