📘 Class 2 — Diving into HTML

Topic 1 · HTML Fundamentals — 3 hours · Recap, page structure, lists, and images

Part 1 · Recap & New Tags

We started by reviewing the tags from Class 1 — <h1>, <h2>, <h3>, and <a>. Then we added a handful of text-formatting tags that handle small but essential jobs.

New HTML Tags

💡 Check in: Does this make sense? Try each tag yourself in VS Code before moving on. Pause if you need to.

Part 2 · HTML Page Setup

Every HTML page follows the same skeleton. Once you know the structure, every site you build starts the same way.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

What each piece does

<!DOCTYPE html> — tells the browser this is an HTML5 document so it renders correctly.
<html lang="en"> — the root element. lang="en" tells browsers and search engines the document is in English (helps with accessibility and SEO).
<head> — invisible meta-information about the page: character encoding, viewport, title, stylesheets, scripts.
<meta charset="UTF-8"> — supports a wide range of characters and symbols from any language.
<meta name="viewport"> — makes the page responsive on mobile devices.
<title> — the text in the browser tab and search results.
<body> — everything visible to the user lives in here.

Semantic structural tags

<header> — top-of-page content, usually where the nav bar goes. Not the same as <head>.
<footer> — bottom-of-page content. Can include text, links, images.

🛠 Activity: Build a webpage using everything you've learned — heading tags, paragraph tag, anchor tag, <strong>, and other text-adjusting tags. Use your reference sheet. Screen-share and show the class when you're done.

Lists

Two ways to list things:

<ol> — ordered list (numbered)
<ul> — unordered list (bulleted)
<li> — list item (used inside both)

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Part 3 · Images

To put an image on a page, use the <img> tag. It's self-closing — no </img>.

<img src="path/to/your/image.jpg" alt="Description of the image">

src — the path to the image file (usually inside an images folder).
alt — describes the image for screen readers and shows if the image fails to load. Important for accessibility.

📁 Folder discipline: Create an images folder inside your project. Keep all your images in there. Never reference an image that lives on someone else's computer or random web URL — copy it into your project first.

Sizing an image

If an image doesn't fit, use the style attribute for quick adjustments:

<img src="images/hero.jpg" alt="Hero photo" style="width: 400px;">

Background images

To set a background image on the whole page, use a style attribute on the <body> tag (we'll move this into CSS files later):

<body style="background-image: url('images/background.jpg'); background-size: cover;">

Quick Recap Checklist

✅ Use <br>, <strong>, <em>, <hr>, <u> for small text adjustments
✅ Every page starts with <!DOCTYPE html> and the <html>/<head>/<body> structure
✅ Know the difference between <head> and <header>
✅ Use <ul>/<ol> with <li> for lists
✅ Add images with <img src alt> and always include alt text
✅ Keep an images/ folder in your project

🔗 References

W3Schools HTML

MDN HTML Element Index

Tag Reference Sheet (PDF)

FrontEndClass2 sample code (ZIP)

Class 2 — Equinim College · Front End Web Development · 26B