HTML and CSS course Β· Module 2: The Web and HTML Elements

History and Evolution of the Internet

4 min read
In this lesson6

Imagine you're standing at the gates of the great Library of Alexandria - a place that gathered all the knowledge of the ancient world. The internet is the modern version of this library, but its history is as fascinating as the history of Egypt itself. Let's explore it together!

The Beginning - ARPANET (1969)

It all started in 1969, when the US Department of Defense created the ARPANET network. It was the first wide-area packet-switched network; it started by connecting four sites: three universities and the SRI research institute. Think of it as the first trade route between four cities of ancient Egypt - small, but revolutionary!

ARPANET enabled data transmission between distant computers. The first message sent through the network was "LO" - it was supposed to be "LOGIN," but the system crashed after two characters. Despite this, it was a huge step forward.

TCP/IP Protocol (1983) - A Common Language

In 1983, the TCP/IP (Transmission Control Protocol / Internet Protocol) protocol was introduced. It was like the invention of hieroglyphs - a universal language that allowed different networks to communicate with each other.

TCP/IP defines how data is divided into packets, addressed, and transmitted between computers. Thanks to it, the internet became a truly global network, connecting computers around the world.

1<!-- Internet milestones -->
2<h2>Internet Timeline</h2>
3<ol>
4    <li><strong>1969</strong> - ARPANET: the first wide-area packet network</li>
5    <li><strong>1971</strong> - First email sent by Ray Tomlinson</li>
6    <li><strong>1983</strong> - TCP/IP: universal communication protocol</li>
7    <li><strong>1991</strong> - WWW: World Wide Web by Tim Berners-Lee</li>
8    <li><strong>1993</strong> - Mosaic: the first popular browser with images in the text</li>
9</ol>

World Wide Web (1991) - Knowledge for Everyone

In 1989, Tim Berners-Lee proposed the World Wide Web - a system of pages connected by hyperlinks - and in 1991 he made it available to the world. It was a moment comparable to the invention of papyrus - suddenly knowledge became available to everyone!

Berners-Lee created three fundamental technologies:

  • HTML (HyperText Markup Language) - a language for creating pages
  • URL (Uniform Resource Locator) - a system for addressing resources
  • HTTP (HyperText Transfer Protocol) - a communication protocol
1<h2>Three Pillars of the WWW</h2>
2<table border="1">
3    <tr>
4        <th>Technology</th>
5        <th>Function</th>
6        <th>Egyptian Analogy</th>
7    </tr>
8    <tr>
9        <td>HTML</td>
10        <td>Page structure</td>
11        <td>Hieroglyphs - writing method</td>
12    </tr>
13    <tr>
14        <td>URL</td>
15        <td>Resource addresses</td>
16        <td>Map of temples</td>
17    </tr>
18    <tr>
19        <td>HTTP</td>
20        <td>Communication protocol</td>
21        <td>Pharaoh's messengers</td>
22    </tr>
23</table>

Mosaic (1993) - Images in the Text

The first browser, WorldWideWeb, was created at the end of 1990, but it opened images in separate windows, so pages looked like stone tablets with nothing but text. In 1993, the Mosaic browser was the first to show images directly in the text. It was like the transition from plain inscriptions to colorful frescoes in pharaohs' tombs!

Mosaic was a breakthrough because it made the internet visual and accessible to ordinary people. Soon after, more browsers appeared: Netscape Navigator (1994), Internet Explorer (1995), and many others.

Web 2.0 (2004+) - The Era of Interactivity

Around 2004, the internet underwent another revolution - Web 2.0. Users stopped being just passive readers and started creating content:

  • 2004 - Facebook: connecting people around the world
  • 2005 - YouTube: anyone can publish videos
  • 2006 - Twitter: short messages in real time
  • 2001 - Wikipedia: an encyclopedia created by the community

It was as if every Egyptian could add their own hieroglyphs to the temple walls - the democratization of knowledge!

The Internet Today and Tomorrow

The modern internet is an incredibly vast network connecting billions of devices:

  • IoT (Internet of Things) - refrigerators, watches, cars connected to the network
  • 5G - ultra-fast mobile connections
  • AI - artificial intelligence assisting search and content creation
  • Cloud Computing - computing in the cloud

The internet has come a long way from four connected computers in 1969 to a global network connecting over 5 billion users. It's as if from a small settlement on the Nile, the entire ancient Egypt grew - with pyramids, temples, and trade routes stretching across the entire known world!

Code for this lesson: index.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>History of the Internet</title>
6</head>
7<body>
8    <h1>History of the Internet - From ARPANET to IoT</h1>
9
10    <h2>Internet timeline</h2>
11    <ol>
12        <li><strong>1969</strong> - ARPANET: first wide-area packet network (4 computers)</li>
13        <li><strong>1971</strong> - First e-mail (Ray Tomlinson)</li>
14        <li><strong>1983</strong> - TCP/IP: universal protocol</li>
15        <li><strong>1991</strong> - WWW: Tim Berners-Lee creates pages</li>
16        <li><strong>1993</strong> - Mosaic: images in the text</li>
17        <li><strong>2004</strong> - Web 2.0: Facebook, YouTube, Wikipedia</li>
18    </ol>
19
20    <h2>Three pillars of WWW</h2>
21    <table border="1" cellpadding="8">
22        <tr>
23            <th>Technology</th>
24            <th>Function</th>
25            <th>Egyptian analogy</th>
26        </tr>
27        <tr>
28            <td>HTML</td>
29            <td>Page structure</td>
30            <td>Hieroglyphs</td>
31        </tr>
32        <tr>
33            <td>URL</td>
34            <td>Resource addresses</td>
35            <td>Map of temples</td>
36        </tr>
37        <tr>
38            <td>HTTP</td>
39            <td>Communication protocol</td>
40            <td>Pharaoh's messengers</td>
41        </tr>
42    </table>
43
44    <!-- Add a section about the modern internet -->
45    <!-- Describe IoT, 5G, cloud computing -->
46</body>
47</html>

Spotted a mistake in this lesson?

Check yourself

Answer the questions from this lesson. Pick an answer to see right away whether it is correct.

  1. 1. What does the <figcaption> tag do?

  2. 2. Which image format is vector-based (scalable without quality loss)?

Hands-on tasks in the game

  • Code editor

    Create an HTML page with a timeline of internet development in an Egyptian style. Add an <h1> heading and at least 4 events with years (e.g. 1969 - ARPANET), each in its own <p> paragraph or <li> list item.

  • Click in order

    Arrange the page rendering stages after receiving a response:

  • Code editor

    Create 3 museum exhibits: Tutankhamun's Mask, the Rosetta Stone, the Sphinx. Place each in <figure> with <img> and <figcaption>. Add <hr> and a footer.

  • Vertical ordering

    Arrange the figure elements in correct order from top to bottom:

  • Click in order

    Arrange the attribute that sets the image width:

  • Code editor

    Create a portfolio with 2 excavation projects. Each with a heading, a photo in <figure> with <figcaption>, a description using <strong> and <em>, a 'Read more' link, and an <hr> separator.

  • Vertical ordering

    Arrange the internet milestones in chronological order:

Useful articles