The Showtimes Page

A website usually has more than one page. Ours gets a second one, with the showtimes: when each film is on, and in which hall.

We've added the file showtimes.html to the editor. It's first among the files now, so the preview shows it. It already has its head, and in main, there's the heading, a paragraph and the showtimes as plain text, with the columns separated by |.

The same header and footer. Visitors expect every page of a site to have the same header and footer, so that they can always get anywhere and always know where they are. On a small site like ours, each page simply has its own copy of them. Copy them from index.html: select the whole header element, from <header> to </header>, copy it (Ctrl+C, on a Mac Cmd+C), switch to showtimes.html and paste it (Ctrl+V, on a Mac Cmd+V). Then do the same with the footer.

The table. Then turn the showtimes into a table with four columns: Day, Time, Film and Hall. Each line of the text becomes a row, and each part between the | characters becomes a cell. Delete the | characters.

When you're done, try the links in the preview: Home or the logo takes you to the home page, and Showtimes or the See what's on button brings you back. The links work because both files are in the same folder, and relative links look for files there.