Pages, Files and Links

Most websites have more than one page. Ours now has a second one, about.html, so the site is made of four files: two pages, a stylesheet and a script. You'll find all four above the editor.

Where do such files live? On a server: a computer that is always on and connected to the internet, and whose job is to send files to anyone who asks for them. Every page you've ever opened came from a server somewhere in the world.

Each page has its address, called a URL, for example https://www.example.com/about.html. It has two parts: https://www.example.com is the address of the server, and /about.html is the path to the file on it. When you open such an address:

  1. The browser asks the server www.example.com for the file about.html.
  2. The server finds the file and sends it to the browser.
  3. The browser reads the HTML and finds out that the page also needs style.css (and maybe a script), so it asks the server for those too.
  4. When it has everything, it draws the page.

Pages lead to each other through links. A link is written with the a tag:

<a href="about.html">About me</a>

href says where the link leads, and the text between the tags is what you click on. This link has no server address in it, just the name of a file, so the browser looks for about.html on the same server and in the same folder as the page you're on. A click starts the whole journey again: the browser asks for the file, gets it and draws the new page.

Instructions

  1. In index.html, add the link to the second page on a new line right below <p id="message"></p>: <a href="about.html">About me</a>. Run the page, click the link in the preview, and then the link back to the home page.