The Old Web: When Websites Wore Diapers

The Day Mia's Computer Cried

Mia was nine years old, and she had a problem. Not the kind of problem you can solve with a glass of milk and a hug. Not even the kind that goes away after a good night's sleep. This was the kind of problem that made her computer fan spin like a tiny helicopter, made her screen flicker, and finally made her whole computer go completely, utterly, totally silent — the way a goldfish goes silent when you forget to feed it.

Mia's website was broken.

She had started it three months ago, on a Saturday afternoon when rain was hammering the windows and her cat, Professor Whiskers, was sleeping on the keyboard. The website was supposed to be a guide to the best sandwich recipes in the entire world, organized by country. Mia loved sandwiches. She loved them so much that her family had a running joke about it. Her father once said, "Mia, if sandwiches had fan clubs, you'd be the president of all of them." Her mother added, "And the treasurer, and the secretary, and the only member."

So Mia built a website. At first, it was small. There was a homepage with a big smiley face and the words "Welcome to Mia's Sandwich Kingdom!" Underneath, she listed three sandwiches: a peanut butter and jelly, a grilled cheese, and a ham and cheese. She added pictures of each one (drawn with crayons, then photographed). She wrote a tiny bit about why each sandwich was the best. The whole thing was maybe one page long. The whole thing was maybe half a page long. It was so small you could have printed it on a napkin and still had room for a drawing of a horse.

Her website worked beautifully. She showed it to her grandfather, who said, "Very nice, Mia. You should add more sandwiches." And Mia thought, "Grandpa is right. I should add more sandwiches."

So she added more sandwiches.

Then she added pictures of those sandwiches.

Then she added a "History of Sandwiches" page, which got very long because the history of sandwiches is actually a long and strange story involving an English earl and a lot of cards.

Then she added a "Sandwich Jokes" page, with jokes like "Why did the sandwich go to the doctor? Because it felt crumby."

Then she added a "Sandwich Ratings" page, with five-star ratings for every sandwich in her collection.

Then she added a "Sandwich of the Day" page, which used a small piece of code to pick a different sandwich each day.

Then she added a "Visitor Comments" page, which let people leave notes.

Then she added a "Sandwich Songs" page, because she had written three songs about sandwiches and wanted the world to hear them.

Then she added a "Sandwich Quiz" page, with fifteen questions like "Which sandwich has the most calories?"

By the time the rain stopped, the sun came out, and Professor Whiskers woke up and demanded dinner, Mia's website had grown from a tiny napking drawing into a giant, enormous, gigantic monster of a website. It had forty-seven pages. It had hundreds of pictures. It had songs that played when you clicked on them. It had a quiz that kept score. It had a little dancing sandwich character named Sir Crust, who waved his bread arms at you every time you opened the homepage.

Mia was proud. Her mother was impressed. Her father said, "Mia, this is no longer a website. This is a sandwich encyclopedia." Her grandfather looked at it for a long time, nodded slowly, and said, "You should add more sandwiches."

Mia clicked "Save." The computer made a strange noise. The fan started spinning very fast. The screen flickered once, twice, three times. Then a little box appeared in the middle of the screen with a sad face and some words in a serious voice:

*"Mia's_Super_Awesome_Sandwich_Website.html is too large to save."*

Mia stared at the box. "What does that mean?" she asked Professor Whiskers. The cat blinked, which is the cat version of "I have no idea, but I'm hungry."

Mia tried to save it again. The box came back. She tried a third time. The box came back, but this time the fan got even louder, the screen flickered even more, and Professor Whiskers jumped off the desk in alarm. Then — and this is the part Mia would remember for the rest of her life — the screen went black. The computer made a soft, sad little sound, like a balloon losing its air. And the website was gone. All forty-seven pages of it. Gone.

Mia burst into tears.

That night, after her mother had restored the computer (using a magical spell called "restarting it"), after Mia had eaten two grilled cheese sandwiches to cheer up, and after Professor Whiskers had forgiven her for the loud noise, Mia asked the question that would change her life:

"How do grown-up websites do it? They have millions of pages! They have videos! They have shopping carts and games and chat boxes! How do they not explode?"

The answer, as you will see, took about twenty years for the whole world to figure out. And the first step of that answer is what this chapter is about.

What Was an Old Website, Really?

A long time ago — and by "a long time ago" I mean the early 1990s, when your parents were probably younger than you are now — the World Wide Web was a strange new toy. A man named Tim Berners-Lee, who worked in a science laboratory in Switzerland, had invented a way for computers to share documents with each other. The documents were very simple. They had text. They had links you could click. That was about it. No pictures, no colors, no songs, no dancing sandwich characters.

Those early documents were written in a language called HTML, which stands for HyperText Markup Language. That's a long name, so people just call it HTML, the way people call a refrigerator a "fridge." HTML is a way of telling a computer, "Hey, this part is a heading. That part is a paragraph. This other part is a clickable link." The computer reads the HTML and turns it into something you can see on a screen.

Here's the important part: in those early days, every website was just one HTML file. One file meant one document. If you wanted a new page, you made a new file. If you wanted five pages, you made five files. If you wanted fifty pages, you made fifty files. If you wanted Mia's forty-seven-page sandwich empire, you made forty-seven files.

But that's not even the strangest part. The strangest part is what was inside each file. Early websites didn't have separate files for the words, the colors, the fonts, and the actions. They had *everything stuffed into one giant file*. Imagine if you had a recipe book where the recipes, the drawings of the food, the fonts, the page numbers, the table of contents, and the bookmark were all jammed into a single piece of paper. That's what an old HTML file was like. It was a suitcase that someone had packed with everything they owned, then sat on to make it close, then taped shut with a great deal of tape and a small prayer.

Let's peek inside a typical old HTML file to see what we mean.

```html <html> <head> <title>Mia's Sandwich Kingdom</title> <style> body { background-color: #fdf6e3; font-family: "Comic Sans MS", cursive; color: #586e75; } h1 { font-size: 48px; text-align: center; color: #cb4b16; } .sandwich { border: 3px dashed #cb4b16; padding: 10px; margin: 20px; } </style> <script> function sayHello() { alert("Welcome to the Sandwich Kingdom!"); } function pickSandwich() { var list = ["PB&J", "Grilled Cheese", "BLT", "Ham and Cheese"]; var choice = list[Math.floor(Math.random() * list.length)]; document.getElementById("today").innerText = "Today: " + choice; } </script> </head> <body onload="sayHello()"> <h1>Welcome to Mia's Sandwich Kingdom!</h1> <p>This is the best place on the internet to learn about sandwiches.</p> <div class="sandwich"> <h2>Peanut Butter and Jelly</h2> <p>The classic. The legend. The sandwich of your childhood.</p> </div> <div class="sandwich"> <h2>Grilled Cheese</h2>