WEEK 01

Web Games Development · HTML5 Lab

HTML5 Foundations

Structure, tags and attributes, a first stylesheet and a first line of JavaScript.

HTML structure

Images & links

CSS basics

First script

Book: Chapter 1 · The Basics · pp. 1–19

Today · 90 minutes

Plan for the session

Start	Segment	Time
0:00	Warm-up review	10 min
0:10	This week’s game and objectives	10 min
0:20	Concepts: idea, code, line by line, try it	35 min
0:55	Common mistakes and check your understanding	5 min
1:00	Lab: build the files	25 min
1:25	Build-your-own task, recap and exit quiz	5 min

Week 1 · HTML5 Foundations

2 / 35

Warm-up · 5 minutes

How does a web page reach you?

Which program shows a web page on your computer?

Name something on a web page that is not text.

What happens when you click a link?

Have you used “View page source”? What did you see?

Week 1 · HTML5 Foundations

3 / 35

This week’s game

A page of links, then a page of your own

The book starts with a web page of links to other sites. The first version is a plain annotated list. The second, “Favorite Sites”, puts a box around each entry, adds pictures and shows today’s date.

In the lab you first explore a click-the-frog page with a score counter, then write a valid skeleton, add images and links, style a page with CSS, and finish with a page for your own game.

Make it personal: your projects, your favourite sites, or sites on one topic.

FROM THE BOOK

Chapter 1 · The Basics
pp. 1–19

YOU WILL BUILD

starter.html
simple.html
second.html
third.html
favoriteSites.html
secondSpacedOut.html

Week 1 · HTML5 Foundations

4 / 35

Objectives

By the end of Week 1 you can…

Write a valid HTML5 page: <!DOCTYPE html>, html, head, title, body.

Use headings, paragraphs, lists, images <img> and links <a>.

Understand attributes such as src, href, width and alt.

Style a page with embedded CSS: selectors, colours, fonts, spacing.

Add interactivity with a <script> element and a click handler.

Tell content (HTML) apart from presentation (CSS).

Week 1 · HTML5 Foundations

5 / 35

Key words this week

Vocabulary

Term	Meaning
HTML	The markup language that holds a page’s content
Tag	Text inside < >, such as <p>, that marks up content
Element	A start tag, its content and an end tag
Attribute	An extra detail inside a start tag, such as src="frog.gif"
CSS	Rules that control how elements look
Selector	The part of a CSS rule that picks which elements to style
JavaScript	The programming language that makes a page interactive
Browser	Reads HTML, CSS and JavaScript and draws the page

Week 1 · HTML5 Foundations

6 / 35

What the program must do

What a page of links needs

Text and hyperlinks

Each entry is a short description with a link to another site.

Boxes and images

The second version draws a box around each entry and adds a picture of the site.

Today’s date

A single line of JavaScript asks the browser for the current day, date and time.

Week 1 · HTML5 Foundations

7 / 35

Big idea 1 · Page structure

A page is boxes inside boxes

html

The whole document.

head

Facts about the page. The player does not see them.

body

Everything the player sees.

Week 1 · HTML5 Foundations

8 / 35

Example 1 · Page structure

The anatomy of a web page

Every page has a head (facts about the page) and a body (what the player sees).

CODE · club.html

<!DOCTYPE html>
<html>
<head>
  <title>My Game Club</title>
</head>
<body>
  <h1>My Game Club</h1>
  <p>We meet every <b>Friday</b>.</p>
  <ul>
    <li>Chess</li>
    <li>Snake</li>
  </ul>
</body>

OUTPUT · rendered by the browser

Week 1 · HTML5 Foundations

9 / 35

Line by line · Example 1

The anatomy of a web page

<!DOCTYPE html>

Declares an HTML5 document.

Shown in the browser tab, not on the page.

The biggest heading; h2 to h6 get smaller.

<p>… <b>Friday</b> …</p>

A paragraph; b makes a word bold inside it.

A bulleted list with one li per item.

Week 1 · HTML5 Foundations

10 / 35

Try it · 5 minutes

Make simple.html your own

Change the title to your name.
Add an <h2> and a second paragraph.
Add a <ul> list of three favourite games.
Save (Ctrl+S) and refresh (F5).

YOU SHOULD SEE

The tab shows your name. The page shows a heading, two paragraphs and a bulleted list.

Week 1 · HTML5 Foundations

11 / 35

Big idea 2 · Images & links

Tags say what; attributes say which and where

img + src

Which picture to show.

a + href

Where the link goes.

alt, width

Describe the picture, and size it.

Week 1 · HTML5 Foundations

12 / 35

Example 2 · Images & links

Attributes add the details

Attributes add details. The picture file is missing here, so the alt text shows.

CODE · links.html

<p>
  <a href="https://example.com">Visit our site</a>
</p>
<img src="frog.gif" width="200"
     alt="A green frog">
<p>The same link, as a button-style box:</p>
<a href="https://example.com"
   style="border:2px solid teal; padding:6px">
  Play now
</a>

OUTPUT · frog.gif is not in this preview, so alt text shows

Week 1 · HTML5 Foundations

13 / 35

Line by line · Example 2

Attributes add the details

href="https://example.com"

Where the link goes when clicked.

src="frog.gif"

Which picture file to load.

width="200"

Draw the picture 200 pixels wide.

alt="A green frog"

Text shown if the picture cannot load.

style="border:…"

An inline style: CSS written on one element.

Week 1 · HTML5 Foundations

14 / 35

Try it · 5 minutes

Link a picture

Copy frog.gif into your Week1 folder.
Add an img with src, width="200" and alt.
Wrap it in an a whose href is a favourite site.
Now break the src (frogg.gif) and refresh.

YOU SHOULD SEE

The frog shows, and clicking it opens the site. With the broken src, the alt text appears instead.

Week 1 · HTML5 Foundations

15 / 35

Big idea 3 · Styling with CSS

One CSS rule = selector + declarations

Selector

Which elements: article, .card, #score.

Property

What to change: border, color, width.

Value

How: 2px green double, 60%.

Week 1 · HTML5 Foundations

16 / 35

Example 3 · Styling with CSS

Selectors pick, properties style

One stylesheet can style many elements. Pick them by tag name, by class (.) or by id (#).

CODE · style.html

OUTPUT · rendered by the browser

Week 1 · HTML5 Foundations

17 / 35

Line by line · Example 3

Selectors pick, properties style

h2 { … }

Tag selector: styles every h2.

.card { … }

Class selector: every element with class="card".

#score { … }

Id selector: the one element with id="score".

border: 3px solid teal;

Width, line style and colour of the box edge.

padding: 12px;

Space between the border and the text.

Week 1 · HTML5 Foundations

18 / 35

Try it · 5 minutes

Restyle favoriteSites.html

Change the border colour and style.
Add body { font-family: Arial; background: lightyellow; }
Make a class .highlight and use it on one article.

YOU SHOULD SEE

The page looks completely different, but the HTML content has not changed at all.

Week 1 · HTML5 Foundations

19 / 35

Big idea 4 · Events & functions

Event → function → change the page

Event

The player clicks the button.

Function

score() runs.

Change

The number on the page updates.

Week 1 · HTML5 Foundations

20 / 35

Example 4 · Events & functions

A click runs a function

An event handler connects something the player does to code that changes the page.

CODE · counter.html

<button onclick="score()">Click me</button>
<p id="out">Points: 0</p>

<script>
  var points = 0;
  function score() {
    points = points + 1;
    document.getElementById("out")
      .textContent = "Points: " + points;
  }
</script>

OUTPUT · demo clicks the button every second

Week 1 · HTML5 Foundations

21 / 35

Line by line · Example 4

A click runs a function

onclick="score()"

When clicked, run the function score.

var points = 0;

A variable that remembers the count.

function score() {

A named block of code to run on demand.

points = points + 1;

Add one to the count.

.textContent = "Points: " + points;

Join text and number, and show it.

Week 1 · HTML5 Foundations

22 / 35

Try it · 5 minutes

Extend the counter

Add a button that subtracts one.
Add a Reset button that sets points to 0.
Show “You win!” when points reaches 10 (use if).

YOU SHOULD SEE

All three buttons work, and the win message appears at 10.

Week 1 · HTML5 Foundations

23 / 35

Common mistakes

When it goes wrong, check these first

A closing tag is missing

Fix: Everything after it is affected. Close every tag you open; indent so the pairs are easy to see.

The image does not show

Fix: Keep images in the Week1 folder and match the name exactly: Frog.gif is not frog.gif.

A CSS rule has no effect

Fix: Check each declaration ends with ; and that the braces { } match. Check the spelling of the property.

The button does nothing

Fix: Write onclick="score()" with the brackets, and match the function name’s spelling and capitals.

Week 1 · HTML5 Foundations

24 / 35

Check your understanding · 1 of 4

Which element holds everything the player sees?

<head>

<title>

<body>

<meta>

Week 1 · HTML5 Foundations

25 / 35

Check your understanding · 2 of 4

In <img src="frog.gif" alt="Frog">, what is alt?

The file name

Text shown if the image fails

The image width

A link

Week 1 · HTML5 Foundations

26 / 35

Check your understanding · 3 of 4

Which selector styles the element with id="score"?

score

.score

#score

<score>

Week 1 · HTML5 Foundations

27 / 35

Check your understanding · 4 of 4

What does onclick="score()" do?

Runs score() when clicked

Styles the button

Creates a variable

Loads a new page

Week 1 · HTML5 Foundations

28 / 35

Check your understanding

Answers

Q	Answer	Why
Q1	C · <body>	head holds facts about the page; body holds the content.
Q2	B · Text shown if the image fails	alt describes the image when it cannot be seen.
Q3	C · #score	# selects by id; . selects by class.
Q4	A · Runs score() when clicked	onclick connects the click event to the function.

Week 1 · HTML5 Foundations

29 / 35

Lab time · 25 minutes

Your workflow for every file

Folder

Create a folder named Week1.

Copy

Copy the example files and their images, audio or video into it.

Open

Open the folder in VS Code or Sublime Text.

Save

Edit, then save with Ctrl+S.

Check

Refresh the browser (F5). Open the console (F12).

Never edit the original example for grading. Work on a copy named with your name, for example myGamePage_yourname.html.

Week 1 · HTML5 Foundations

30 / 35

Lab activity · Week1 folder

Work through the files in order

File	Objectives	Checkpoint
starter.html	2, 4, 5	Counter works; you can point to each block
simple.html	1	Valid skeleton with a heading and a paragraph
second.html	2, 3	Image shows and links; alt text appears when src is broken
third.html	4	Uses embedded CSS and semantic elements
favoriteSites.html	2, 4, 5	New article added, restyled, greeting script runs
secondSpacedOut.html	1, 6	Reformatted, output unchanged, explanation written

Week 1 · HTML5 Foundations

31 / 35

Stuck?

A five-step debugging checklist

Open the console (F12) and read the first red error.
Check the spelling and capitals of every name and id.
Check that brackets, braces and quotes come in pairs.
Check file names, and that every file is in the same folder.
Save, then hard-refresh with Ctrl+F5.

THIS WEEK’S TIP

Press Ctrl+U (View page source) to see exactly what the browser received, then compare it with your file.

Week 1 · HTML5 Foundations

32 / 35

BUILD YOUR OWN · ALL OBJECTIVES

Build a page for your own game

Week1\myGamePage_yourname.html

A <style> block with an element, a .class and an #id selector.
An image with alt text, and at least one link.
A button that updates a score on the page.
Opens with no errors in the console (F12).

Week 1 · HTML5 Foundations

33 / 35

How the build-your-own task is marked

Marking guide

Criterion	What we look for	Marks
Runs cleanly	Opens with no errors in the console (F12)	2
Required features	Style block with element, .class and #id selectors; an image with alt; a link; a working score button	4
Readable code	Indented, sensible names, a comment on each function	2
Your own touch	A personal change: colours, images, text or an extra feature	2
Total		10

Week 1 · HTML5 Foundations

34 / 35

RECAP · CHAPTER 1 · THE BASICS SUMMARY

What you can do now

The basic tags: html, head, title, style, script, body.
The img element for images and the a element for links.
Simple formatting with a style element and CSS rules.
One line of JavaScript for the date and time.

NEXT WEEK

Week 2 · Canvas & the Dice Game

Randomness, interactivity and the canvas element, the key feature of HTML5.

Week 1 · HTML5 Foundations

35 / 35