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:
- 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.txtto the name. - Double-click
index.htmlin the folder. The page opens in your browser with its colors, and the links between the pages work. - Create a free account at
netlify.com(from the age of 13; if you're younger, a parent creates it). - Logged in, open
app.netlify.com/dropand drag the whole folder onto the page: the folder itself, not the files in it. - 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 tostarlight-cinema-anna, if nobody has taken it yet.
Instructions
- 1
In the head of
index.html, right below the line withcharset, add ametaelement with a description of the cinema. You can use the one above or write your own. - 2
Give
showtimes.htmla description of its own too, one about the showtimes. Then put the site online, following the steps above.