BETAThis is a new service – your feedback will help us to improve it.

Your first webpage

As we saw in the last module, the web is a way of trading webpages between computers.

Any computer can become a web server, sending webpages in response to requests by clients.

Now we know a little about how they are sent around the web, let's consider what exactly webpages are.

Hypertext

Hypertext documents are connected to each other with hyperlinks.

Before hypertext, documents were isolated. If you wanted to delve into detail on a particular topic, you would need to stop and spend time seeking out a more detailed source.

Nowadays, we can use a hyperlink to send you to the Wikipedia page on hypertext. Wasn't that easy?

Webpages are closely related to the idea of hypertext.

Hypertext markup language

Hypertext was a great idea, but it needed an implementation - a language to write the documents in.

That was hypertext markup language, or HTML.

Documents written in HTML are interpreted by web browsers in a predictable way. Using HTML, human authors can be confident that whatever device their readers are using, they will get an experience close to what the author intended.

HTML isn't a programming language in the normal sense. It is a markup language - a way of structuring content to be interpreted by a web browser.

A basic webpage

Let's consider a very basic webpage, or HTML document.

<html>Hello world</html>

Although it may not look like it, that is a complete, valid webpage.

To do

The next few modules contain code samples. You should follow along with these by writing them out into Codepen. Remember to avoid copying and pasting.

  1. Go to codepen.io and create a free account
  2. In a new, blank pen, write out the code samples into the panel titled "HTML"
  3. Start by writing out the simple "Hello world" code above.

A web server...

Lessons last updated 12th July 2019. You can improve this lesson on Github.
Part of Building webpages
  1. Your first webpage
  2. Introducing HTML
  3. HTML attributes
  4. Classes and IDs
  5. Introducing CSS
  6. CSS selectors
  7. CSS specificity
  8. Creating layouts
  9. Responsive design
  10. Get confident with HTML and CSS
  11. Turn your prototypes into webpagesP