Uploading the Site

Before the site goes online, give each page a description. It's a meta element in the head of the page, like <meta charset="utf-8">, which you know from the HTML course:

<meta name="description" content="A small cinema with big films, on Elm Street since 1932. This week's films, showtimes and ticket prices.">

Visitors don't see it on the page, but search engines such as Google often show it under the title of the page in their results, and chat apps may show it when you send someone a link. Together with the title, which appears in the browser tab and as the headline of a search result, it tells people what they'll find on the page. That's why each page should have its own title and description. Our pages already have good titles: Starlight Cinema and Showtimes – Starlight Cinema. (The little picture in the tab, called a favicon, is optional: without one, the browser shows an icon of its own.)

Putting the site online. When both pages have their descriptions, follow these steps. They happen outside Start Coder:

  1. On your computer, create a folder, for example starlight-cinema. Save the three files from the editor into it, as at the end of the CSS course: paste the code of each file into a plain text editor and save it under the same name as in the editor. Check that the text editor hasn't added .txt to the name.
  2. Double-click index.html in the folder. The page opens in your browser with its colors, and the links between the pages work.
  3. Create a free account at netlify.com (from the age of 13; if you're younger, a parent creates it).
  4. Logged in, open app.netlify.com/drop and drag the whole folder onto the page: the folder itself, not the files in it.
  5. A few seconds later, the site is online, at an address that ends in .netlify.app. Open it and try the links. In the project's settings, you can change its name, and with it the first part of the address, for example to starlight-cinema-anna, if nobody has taken it yet.

Instructions

  1. In the head of index.html, right below the line with charset, add a meta element with a description of the cinema. You can use the one above or write your own.

  2. Give showtimes.html a description of its own too, one about the showtimes. Then put the site online, following the steps above.