1.22 | on-ground | html intro

• Example 1
• Jen’s Kitchen – Looking “under the hood”
• HTML Basics | w3schools.com
• Tags, Elements, and Attributes | HTML Dog
• Amp What | HTML entity guide
• Character Guide
• List Items Tutorial | w3schools.com
• HTML5 CheatSheet | pdf 
• Duckett’s Code Samples: Structure

Warmup 1 (5pts)

We will complete our first warmup together in week 2.

01. Open a text editor.
02. Create a new document.
03. Go to format > Make Plain Text
04. Type the code shown on the following page.
05. Save + name your file “index.html” to a folder on your desktop or flash drive.
06. In your browser, open this file.
07. Turn in via D2L "Warmup 1" folder.

Exercise 1 – HTML Menu (10pts)

10/20pts | Part 1 of 3 | Foundations Exercise
Please review this week—you do not have to begin.

This exercise is about structure, not style. In Part 1, you will build a single-page HTML menu for a fictional restaurant using only HTML. Your goal is to organize content clearly and meaningfully using semantic tags so that the document makes sense even without visual styling. Think of this as building the skeleton of a webpage before any design decisions are applied.

How This Exercise Works

This assignment unfolds across three connected parts over multiple weeks:

• Part 1: HTML Menu — Structure & Semantics
• Part 2: CSS Menu — Hierarchy, Typography & Behavior

  • Parts 1 and 2 are graded together as a single exercise after Part 2 is complete.

• Part 3: Webflow Translation — Visual Build & Responsiveness
• Part 3 is graded separately once we move into Webflow.

Requirements

1. Restaurant Content

Use the provided menu content file:
Restaurant_Menu_Content.txt

• Choose a restaurant name.
• You may customize menu item names only if the overall structure and length remain intact.
• The focus is organization, not creativity yet.

2. HTML Structure & Semantics

Using the provided content, structure your menu using:

• Headings:
  Use h1 for the restaurant name
  Use h2 / h3 for menu sections like starters, mains, desserts, drinks, etc.
• Paragraphs:
  Use p tags for descriptions
• Lists:
  Use ul or ol for menu items, sides, or grouped content
• Sections:
  Organize your menu into logical sections using section tags
• Link:
  Include one external link related to your restaurant (real or fictional)
  Example: a supplier page, farm, food blog, or culinary resource

Ask yourself:
Does this hierarchy make sense if all styling is removed?
Could someone understand the menu just by reading the HTML?

What Not To Worry About Yet

❌ CSS
❌ Fonts
❌ Visual design
❌ Layout aesthetics

Those come later. This part is about meaning and order.

File Naming + Storage

• Descriptive filename: lastname_exercise1.html orlastname_exercisep1.html
• Storage: Store it in a folder labeled Exercise 1 in your course folder

evaluation (10 points)

Parts 1 and 2 will be evaluated together after the CSS portion (Part 2) is complete.

• 1 point – descriptive filename (lastname_exercise1.html)
• 2 points – content completeness: all menu sections are included and well-structured
• 6 points – HTML structure & semantics: correct syntax, varied tags, meaningful organization
• 1 point – correct inclusion of one external hyperlink