A Site Is a Folder of Files

Your cinema website is finished, and it's time to put it online, so that anyone can open it on any computer or phone just by typing its address. In this lesson, you'll get the site ready, upload it to a server and get an address that you can send to your friends.

First, a look at what you'll upload. A website is a folder of files. Ours has three: index.html, showtimes.html and style.css. The whole folder goes onto a server, and visitors' browsers download the files from there, as you saw in the path's first lesson. Two rules make sure that the site keeps working once it's there:

  • The home page is called index.html. When someone opens just the address of a site, such as https://www.example.com/, with no file name at the end, the server sends the file index.html. A home page called, say, home.html would only open with its name added to the address.
  • Paths to the site's own files are relative. href="style.css" (or href="./style.css") means "the file style.css in the same folder as this page", as you know from the exercise Relative Links in the HTML course. Wherever the folder goes, the files in it stay next to each other, so relative paths work on your computer and on the server alike.

On your computer, every file also has a full path, such as C:\Users\anna\Documents\cinema\style.css on Windows. And when you open a page from your computer, the browser's address bar shows something like file:///C:/Users/anna/Documents/cinema/showtimes.html. It's easy to copy such a path into a link, and on your computer, the link even works. But only there: the server has no C: drive with Anna's documents, and visitors' browsers can't look into your computer.

In the editor, the cinema's home page has exactly this mistake. The preview works like a server here, so the page has lost its styles, and the links to the showtimes lead nowhere.

Instructions

  1. In index.html, fix the path of the stylesheet, so that the page gets its styles back.

  2. Fix the two links to the showtimes page too. Then try them in the preview.