Week 1 Lab Sheet — Work Through the Files

Web Games Development · HTML5 Foundations · ~150 minutes

Student name

Student ID

Date

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).

Instructions

Create a folder named Week1 on your PC. For each file below, create it in your editor and copy the code provided into it, then work through the files in order. Save each file (Ctrl+S), then refresh the browser. Tick each checkpoint as you go. Copy the image files from the class website into your Week1 folder.

Files

0. Create your Week1 folder

On your own PC — do this once before starting.

Create a folder named Week1 on your PC.
Open your Week1 folder in VS Code or Sublime Text.
For each file below, create it in your editor and copy the code provided into it.
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

Checkpoint: your Week1 folder exists and contains the example files.

1. starter.html Objectives 2, 4, 5

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

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>

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>

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>

Add the <script> with the counter.

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

Find and name the four blocks: <title>, <h1>, <style> and <script>.
Save, refresh, and click the button to test it.

Checkpoint: file edited, counter works, four blocks identified.

2. simple.html Objective 1

Week1\simple.html — the smallest valid page.

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>

Add <!DOCTYPE html> as the first line and lang="en" to <html>.
```
<!DOCTYPE html>
<html lang="en">
```

Add an <h1> and a <p> inside <body>.

<h1>Hello</h1>
<p>This will appear as is.</p>

Add a comment .
```

```
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.

Checkpoint: valid skeleton with heading and paragraph.

3. second.html Objectives 2 & 3

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

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>

Add an image with src and alt.

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

Add a second image with a width attribute.

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

Add a text link with href.

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

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>

Break an image src, refresh to see the alt text, then fix it.
Save and refresh, then click the links to test them.

Checkpoint: image displays, image link works, alt text shows when src breaks.

4. third.html Objective 4

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

Create third.html and add this scaffold code.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS example</title>
</head>
<body>
</body>
</html>

Add a <style> block and style the body.

<style>
  body {
    background-color: tan;
    color: #660000;
    text-align: center;
    font-size: 22px;
  }
</style>

Add the section rule.

section {
  width: 85%;
  border: 4px #00FF63 solid;
  text-align: left;
  padding: 5px;
  margin: 10px;
  background-color: white;
}

Add the p and aside rules.

p {
  width: 75%;
}
aside {
  font-style: italic;
}

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>

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>

Save and refresh.

Checkpoint: embedded CSS and semantic elements used.

5. favoriteSites.html Objectives 2, 4 & 5

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

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>

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>

Add a <script> that writes the date.

<script>
  document.write(Date());
</script>

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>

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>

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>

Save and refresh, then check the date and the links.

Checkpoint: new article added, restyled, greeting script works.

6. secondSpacedOut.html Objectives 1 & 6

Week1\secondSpacedOut.html — structure vs presentation.

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>

Compare it with second.html.
Add the missing <!DOCTYPE html> and lang="en".
```
<!DOCTYPE html>
<html lang="en">
```

Reformat so every tag is on its own line, indented, with alt on 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>

Keep the visible output the same and explain (as a comment) why indentation does not change what the user sees.
```

```
Save and refresh.

Checkpoint: reformatted, output unchanged, explanation written.

7. myGamePage.html → myGamePage_yourname.html All objectives

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

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>

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>

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>

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>

Add embedded CSS with an element, 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>

Add the score display, a button and a <script> that increases #score.

<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>

Screenshot with and without CSS, answer the content-vs-presentation questions, check F12 console.

Checkpoint: your page is complete, runs with no console errors, and is submitted.

Marking rubric

Criterion	Points	Score
Valid skeleton (DOCTYPE, html, head, title, body)	2
Headings, paragraphs, ul / ol used correctly	2
Image and link with src / href / width / alt	2
Embedded CSS with element, class and id selectors	3
Working click handler / counter	3
Content-vs-presentation answers	2
Runs with no console errors, named correctly	1
Total	15

Common errors

Forgot to save before refreshing.
Image not in the same folder as the HTML file.
Unclosed tags.
Using the id score as the function name.
Editing one copy of a file but testing a different copy.

Progress and quiz scores are also tracked on the Week 1 lab page in the class website.