Web Games Lab · HTML5
Home / Week 1

Week 1 — HTML5 Foundations

Before we can build games we need to speak the language of the web. This week you meet the HTML5 document skeleton, the elements that hold content, and your first line of CSS and JavaScript.

🎯 Objectives

  • 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 the difference between content (HTML) and presentation (CSS).

🛠 Weekly tasks

  1. Objective 1 — write a valid HTML5 skeleton (DOCTYPE, html, head, title, body): Activity 1 + build simple.html.
  2. Objective 2 — headings, paragraphs, lists, images and links: Activity 2 + build starter.html and second.html.
  3. Objective 3 — attributes (src, href, width, alt): Activity 3 + build second.html.
  4. Objective 4 — embedded CSS (selectors, colours, fonts, spacing): Activity 4 + style third.html.
  5. Objective 5 — a <script> element and a click handler: Activity 5 + build starter.html and favoriteSites.html.
  6. Objective 6 — content vs presentation: Activity 6 + reformat secondSpacedOut.html.
  7. Build your own myGamePage_yourname.html — using everything you have learned. (All objectives)

🎓 Lecture activity Open lecture slides →

A 90-minute session of 35 slides. Each concept is taught four ways: the big idea, a short example with its live output, a line-by-line explanation, and a 5-minute “try it” task. The lab work at 1:00 uses the Lab activity below.

Session plan

  1. 0:0010 minWarm-upReview questions on last week
  2. 0:1010 minGame & objectivesThis week’s game, objectives and key words
  3. 0:2035 minConceptsBig idea → code with live output → line by line → try it
  4. 0:555 minCheck understandingCommon mistakes and a 4-question quiz
  5. 1:0025 minLabBuild the files in the Lab activity below
  6. 1:255 minWrap-upBuild-your-own task, marking guide and recap

Concepts this week

  • 1. Page structure — The anatomy of a web page
  • 2. Images & links — Attributes add the details
  • 3. Styling with CSS — Selectors pick, properties style
  • 4. Events & functions — A click runs a function

The slides open as a page on this site. Press F for full screen, the arrow keys to move, N for speaker notes, and P to save as PDF (turn on “Background graphics”).

🧪 Lab activity: work through the files Printable lab sheet

Create a folder named Week1 on your PC. For each file below, open your editor, create the file (for example starter.html) and copy the code provided below into it. Work through the files in order; save each one and refresh the browser. Each file builds on the objectives from the one before. Tick a checkpoint once you have proved it works.

  1. Create your Week1 folder

    On your own PC — do this once before starting.

    1. Create a folder named Week1 on your PC (for example on the Desktop).
    2. Open your Week1 folder in VS Code or Sublime Text.
    3. For each file below, create it in your editor (for example starter.html) and copy the code provided into it.
    4. Scroll down to the Materials for this week panel and press Download (or Download all) to save the image files (frog.gif, frogface.gif, flappingBird.png, purchaseMathCS.png, avivasmugmug.png, apressshot.png) into your Week1 folder.
    Week1\
  starter.html
  simple.html
  second.html
  third.html
  favoriteSites.html
  secondSpacedOut.html
  myGamePage.html
  frog.gif   frogface.gif   flappingBird.png
  purchaseMathCS.png   avivasmugmug.png   apressshot.png

  2. starter.html Objectives 2, 4, 5

    Week1\starter.html — a complete interactive page to explore first.

    1. Create starter.html file and open it in your editor. 
      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My First Web Game Page</title>
</head>
<body>
</body>
</html>
    2. Add the heading, paragraph, score display, button, image and list inside <body>. 
      <h1>Click the Frog!</h1>
<p>Press the button to score a point.</p>

<div id="score">0</div>
<button onclick="score()">Click me</button>

<br />
<img src="frog.gif" alt="a friendly frog" />

<p>Things I will learn this week:</p>
<ul style="display:inline-block;text-align:left;">
  <li>HTML document structure</li>
  <li>Elements and attributes</li>
  <li>Images and links</li>
  <li>A little CSS and JavaScript</li>
</ul>
    3. Add a <style> block in <head>. 
      <style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f1e8;
    color: #2b2b2b;
    text-align: center;
    padding: 30px;
  }
  h1 { color: #1b6b4a; }
  #score {
    font-size: 64px;
    font-weight: bold;
    color: #c0392b;
    margin: 10px 0;
  }
  button {
    font-size: 18px;
    padding: 12px 26px;
    border: none;
    border-radius: 8px;
    background: #1b6b4a;
    color: white;
    cursor: pointer;
  }
  button:hover { background: #145238; }
  img { margin-top: 18px; }
</style>
    4. Add the <script> with the counter. 
      <script>
  var points = 0;
  function score() {
    points = points + 1;
    document.getElementById("score").textContent = points;
  }
</script>
    5. Find and name the four blocks: <title>, <h1>, the <style> block and the <script> block.
    6. Save, refresh, and click the button to test it.

  3. simple.html Objective 1

    Week1\simple.html — the smallest valid page.

    1. Create simple.html file and notice how little it contains. 
      <html>
  <head>
    <title>Very simple example</title>
  </head>
  <body>
    This will appear as is.
  </body>
</html>
    2. Add <!DOCTYPE html> as the very first line and lang="en" to the <html> tag. 
      <!DOCTYPE html>
<html lang="en">
    3. Add an <h1> heading and a <p> paragraph inside <body>. 
      <h1>Hello</h1>
<p>This will appear as is.</p>
    4. Add an HTML comment <!-- my first page --> and confirm it does not show on screen. 
      <!-- my first page -->
    5. Save and refresh. Press Ctrl+U (View Page Source) to see the raw HTML, then compare it with the rendered page — the comment stays hidden, while the <h1> and <p> appear as a heading and a paragraph.

  4. second.html Objectives 2 & 3

    Week1\second.html — images, links and attributes.

    1. Create second.html and add this scaffold code. 
      <!DOCTYPE html>
<html lang="en">
<head>
  <title>Second example</title>
</head>
<body>
  This will appear as is.
</body>
</html>
    2. Add an image with src and alt. 
      <img src="frog.gif" alt="a friendly frog" />
    3. Add a second image with a width attribute. 
      <img src="frog.gif" alt="a big frog" width="200" />
    4. Add a text link with href. 
      <a href="http://www.purchase.edu">Purchase College/SUNY</a>
    5. Add an image link (wrap an image in <a>). 
      <a href="https://www.purchase.edu/academics/mathematics-computer-science/">
  <img src="purchaseMathCS.png" alt="math and computer science" width="300" />
</a>
    6. Break an image src on purpose, refresh, and watch the alt text appear; then fix it.
    7. Save and refresh, then click the links to test them.

  5. third.html Objective 4

    Week1\third.html — embedded CSS and semantic tags.

    1. Create third.html and add this scaffold code. 
      <!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS example</title>
</head>
<body>
</body>
</html>
    2. Add a <style> block in <head> and style the body (colour, font, alignment). 
      <style>
  body {
    background-color: tan;
    color: #660000;
    text-align: center;
    font-size: 22px;
  }
</style>
    3. Add the section rule (width, border, padding, margin, background). 
      section {
  width: 85%;
  border: 4px #00FF63 solid;
  text-align: left;
  padding: 5px;
  margin: 10px;
  background-color: white;
}
    4. Add the p and aside rules. 
      p {
  width: 75%;
}
aside {
  font-style: italic;
}
    5. Add the body text and the first <section> with an image. 
      The background here is tan and the text is the totally arbitrary
RED GREEN BLUE value #660000. <br/>
<section>
  This section has text--this sentence--and then a paragraph with an image, and text.
  <p>
    <img src="frogface.gif" alt="frogface model" /> The frogface model can be made to move its jaw.
  </p>
</section>
    6. Add the second <section> with an image and an <aside> with links. 
      <section>
  As you may have noticed, I like origami.
  <p> The next image is a photo of the Flapping Bird, in action.
    <br/>
    <img src="flappingbird.png" alt="flapping bird" width="200" /> </p>
  <aside>
    There are many books and websites to learn how to fold the Flapping Bird.
    Here is a plug for one of my origami books
    <a href="https://origamiusa.org/catalog/products/origami-explanations">Origami with Explanations</a>
    ... Visit my
    <a href="https://www.amazon.com/Jeanine-Meyer/e/B001JPA5SC">Jeanine Meyer Author page</a>.
  </aside>
</section>
    7. Save and refresh.

  6. favoriteSites.html Objectives 2, 4 & 5

    Week1\favoriteSites.html — articles, styling and a script.

    1. Create favoriteSites.html and add this scaffold code. 
      <!DOCTYPE html>
<html lang="en">
<head>
  <title>Annotated links</title>
</head>
<body>
  <h3>Favorite Sites</h3>
</body>
</html>
    2. Add a <style> block with the article and img rules. 
      <style>
  article {
    width: 60%;
    text-align: left;
    margin: 10px;
    border: 2px green double;
    padding: 2px;
    display: block;
  }
  img { display: block; }
</style>
    3. Add a <script> that writes the date. 
      <script>
  document.write(Date());
</script>
    4. Add the first <article> with a link. 
      <article>
  The <a href="http://www.purchase.edu/">website for Purchase College/State University of New York</a>.
</article>
    5. Add the second <article> with a link and a screenshot image. 
      <article>
  The <a href="https://avivameyer.smugmug.com/">Aviva Meyer's photographs</a> site is a collection of photographs.
  <img src="avivasmugmug.png" alt="Aviva Meyer's photographs" width="400" />
</article>
    6. Add the third <article> with a link and a screenshot image. 
      <article>
  <a href="http://apress.com">Apress publishers</a> is the site for the publishers of this book. <br/>
  <img src="apressshot.png" alt="Apress screenshot" width="400" />
</article>
    7. Save and refresh, then check the date and the links.

  7. secondSpacedOut.html Objectives 1 & 6

    Week1\secondSpacedOut.html — structure vs presentation.

    1. Create secondSpacedOut.html file and add the messy markup below. 
      <html> 
<head>
<title>Second example Spaced Out</title>
</head>
<body>
This will appear as is. <br/>

<img src="frog.gif"/> 
<img src="frog.gif" width="200"/> <br/>
<a href=http://www.purchase.edu>Purchase College/SUNY</a><br/> <br/>
<a href=https://www.purchase.edu/academics/mathematics-computer-science/><img src="purchaseMathCS.png" width="500"/></a>
</body>
</html>
    2. Compare it with second.html.
    3. Add the missing <!DOCTYPE html> and lang="en". 
      <!DOCTYPE html>
<html lang="en">
    4. Reformat the markup so every tag starts on its own line, is indented, and add alt to the images. 
      <!DOCTYPE html>
<html lang="en">
<head>
  <title>Second example Spaced Out</title>
</head>
<body>
  This will appear as is. <br/>

  <img src="frog.gif" alt="frog" />
  <img src="frog.gif" alt="big frog" width="200" /> <br/>

  <a href="http://www.purchase.edu">Purchase College/SUNY</a><br/><br/>

  <a href="https://www.purchase.edu/academics/mathematics-computer-science/">
    <img src="purchaseMathCS.png" alt="math and computer science" width="500" />
  </a>
</body>
</html>
    5. Keep the visible output exactly the same as before.
    6. Write one sentence (as a comment) explaining why indentation does not change what the user sees. 
      <!-- Indentation does not change the page: the browser collapses whitespace. -->
    7. Save and refresh.

  8. myGamePage.html → myGamePage_yourname.html All objectives

    Week1\myGamePage.html — copy it, rename it, then build your own page.

    1. Create myGamePage_yourname.html file (or copy myGamePage.html and rename it) and add the page skeleton. 
      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Game</title>
</head>
<body>
</body>
</html>
    2. Set your own <title>, and add an <h1>, an intro <p>, an <img> and a link. 
      <h1>My Game</h1>
<p>This is my first web game page.</p>
<img src="frog.gif" alt="a friendly frog" width="150" />
<p><a href="https://www.w3schools.com/html/" target="_blank">Learn more about HTML</a></p>
    3. Add a .card div with a <ul> of features. 
      <div class="card">
  <h2>Features</h2>
  <ul>
    <li>Fast</li>
    <li>Fun</li>
    <li>Free</li>
  </ul>
</div>
    4. Add another .card div with an <ol> of steps. 
      <div class="card">
  <h2>How to play</h2>
  <ol>
    <li>Press start</li>
    <li>Score points</li>
    <li>Beat the high score</li>
  </ol>
</div>
    5. Add embedded CSS using an element (body, h1), a class (.card) and an id (#score) selector. 
      <style>
  body   { background: #0f1420; color: #e8edf7; font-family: Arial, sans-serif; text-align: center; padding: 30px; }
  h1     { color: #4f8cff; font-size: 40px; }
  #score { font-size: 64px; font-weight: bold; color: #22d3a6; }
  .card  { background: #1b2436; border: 1px solid #2b3852; border-radius: 12px; padding: 16px; margin: 14px auto; width: 60%; }
</style>
    6. Add the score display, a button and a <script> that increases #score when clicked. 
      <div id="score">0</div>
<button id="btn">Click me</button>

<script>
  var points = 0;
  function score() {
    points = points + 1;
    document.getElementById("score").textContent = points;
    if (points === 10) { alert("Well done, 10 points!"); }
  }
  document.getElementById("btn").addEventListener("click", score);
</script>
    7. Screenshot the page with and without CSS, answer the content-vs-presentation questions, and check F12 → Console for errors.
Finished example output

This page previews each game in the box above. Edit the game files in VS Code or Sublime Text, then double-click the file (or refresh its browser tab) to see your changes.