Welcome to MetaPage, a web page for making web pages! I bet you already use web pages almost every day. In fact, you’re looking at one right now. But do you know how they work? I’ll show you!
MetaPage has an editor that allows you to see and edit the elements that web pages are made out of, including this tutorial page. If you have a large screen, the editor will be on the left side, otherwise you can reveal it with the “Edit Source” button. Take a look at the editor now!
You’ll notice that the editor contains all of the same text as this page, but it looks different and has a few extra symbols. It’s okay if you don’t understand what these symbols mean yet! Writing web pages is a little different from writing other kinds of documents, so if you’re new to this, keep reading!
(On the other hand, if you already know how this stuff works, or you’re just impatient, feel free to skip ahead until you find something you want to learn! You can follow this tutorial at your own pace, and you can practice as much as you like before continuing.)
The text in the editor is the source of the text on this page, and it is a special kind of text called HTML. All web sites and many apps, games, and tools are made with HTML. You can use it to make all kinds of fun stuff for computers 🖥💻 and phones 📱. However, it is easier to learn HTML if you understand how it began, way back in the 1990s.
HTML was based on paper documents, like books 📖, newspapers 📰, and magazines 📚. These documents usually have titles, sections, paragraphs, and images, and all of these things are also basic elements of HTML. This is why we refer to HTML documents as web pages, and why basic web pages like this one resemble pages out of a book, with simple text over a plain white background.
However, web pages have many advantages over pages made out of paper. For example, web pages can link to other web pages. Linking pages together to form a network is the foundation of the internet! You’re probably used to it now, but this feature was a revolutionary invention at the time. Of course, now web pages have emoji 🙃💖🌈🚀, email 📧, videos ⏯, games 🎮, music 🎧, robots 🤖, and all your friends 👩🏻👦🏾👨🏼👧🏽👵🏿!
But before we get to the good stuff, we should go over the basics. Use the arrow → button at the top of the screen to move on to the next page of the tutorial.