HTML Foundations

HTML Boilerplate

CSCI 3403 - Web Programming

Class 4 | Fall 2025

bobby reed | bobby.reed@okcu.edu

Today's Agenda 📋

Quick Recap: What We've Learned So Far
Understanding HTML Document Structure
The HTML Boilerplate Components
Live Coding Demo
Hands-on Practice
Browser Developer Tools Introduction
HTML Validation
Homework Preview

Goal: By the end of today, you'll be able to write HTML boilerplate from memory!

Quick Recap 🔄

What We've Covered So Far:

Class 1: Course introduction, one-page website project
Class 2: How the web works, Git/GitHub setup
Class 3: HTML elements and tags basics

Today's Build: We're creating the foundation that EVERY web page needs!

Why HTML Boilerplate? 🤔

Think of HTML boilerplate as the skeleton of your webpage.

Every HTML document needs the same basic structure
Tells browsers how to interpret your content
Ensures proper rendering across different browsers
Sets up important metadata for search engines and accessibility

Without proper boilerplate: Your page might render incorrectly, have encoding issues, or be inaccessible to screen readers!

Creating Your First HTML File 📁

Let's Get Started!

Follow Along:

Create a new folder: html-boilerplate
Inside, create a file: index.html

Pro Tip: Always name your homepage index.html - web servers look for this file by default!

File Extensions Matter! The .html extension tells the computer this is an HTML file.

The DOCTYPE Declaration 📜

The very first line of EVERY HTML document!

<!DOCTYPE html>

What does it do?

Tells the browser which version of HTML to use
For HTML5 (current standard): <!DOCTYPE html>
Must be the FIRST line (before the html tag)

Historical Note: Older HTML versions had complex doctypes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

Aren't we lucky to have HTML5? 😅

The HTML Element 🏠

The root element - everything else goes inside!

<!DOCTYPE html>
<html lang="en">
    <!-- All other elements go here -->
</html>

The lang Attribute

Specifies the language of the content
lang="en" for English
Helps screen readers pronounce content correctly
Improves SEO and accessibility

The HEAD Element 🧠

The brain of your webpage - contains metadata!

<head>
    <meta charset="UTF-8">
    <title>My First Webpage</title>
</head>

What goes in the HEAD?

Meta information: Character encoding, viewport settings
Title: What appears in the browser tab
Links: CSS stylesheets, favicons
Scripts: JavaScript files (sometimes)

Remember: Nothing in the HEAD is visible on the page itself!

Character Encoding 🌍

<meta charset="UTF-8">

Why UTF-8?

Supports characters from all languages
Handles special symbols: é, ñ, 中文, 😊
Standard encoding for the web

Without UTF-8: CafÃ© instead of Café

With UTF-8: Café displays correctly! ✨

The TITLE Element 🏷️

<title>My Amazing Website</title>

Where does it appear?

Browser tab
Bookmarks
Search engine results
Social media shares

Best Practice: Keep titles descriptive but concise (50-60 characters)

No title? Browser shows the filename (index.html) - not very user-friendly!

The BODY Element 👁️

Everything visible goes here!

<body>
    <h1>Hello World!</h1>
    <p>This is my first webpage!</p>
    <!-- All visible content goes here -->
</body>

Body Content Includes:

Text (headings, paragraphs)
Images
Links
Forms
Videos
Everything users see!

Complete HTML Boilerplate 🎯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Memorize This Structure!

You'll write this hundreds of times in your web development journey!

Live Coding Demo 💻

Let's Build Together!

Follow along as we create an HTML file from scratch!

Steps:

Create the file
Add DOCTYPE
Add HTML element with lang
Add HEAD with meta and title
Add BODY with content
Open in browser

Opening HTML in Browser 🌐

Three Methods:

Drag & Drop: Drag file into browser address bar
Double Click: Find file in folder and double-click
Terminal/Command Line:
- Mac: open index.html
- Windows (WSL): explorer.exe index.html
- Linux: google-chrome index.html

Refresh Tip: Use Ctrl+R (Windows) or Cmd+R (Mac) to reload after changes!

VS Code Magic Trick ✨

The Emmet Abbreviation

Try This:

Create a new .html file in VS Code
Type ! and press Enter
Boom! Full boilerplate appears!

But wait! Don't rely on this shortcut yet!

Build muscle memory by typing it out manually first. You won't always have VS Code!

Note: VS Code adds viewport meta tag - we'll learn about this when we cover responsive design!

Practice Activity 🏋️

Build Your Muscle Memory!

5-Minute Challenge:

Delete everything in your index.html
Write the complete boilerplate from memory
Add a unique title and h1 message
Open in browser to verify it works
Repeat 3 times!

Partner Check: Trade with your neighbor and check each other's boilerplate!

HTML Validation ✅

W3C Markup Validator

Check if your HTML is valid and follows standards!

Website: validator.w3.org

Why Validate?

Catches syntax errors
Ensures cross-browser compatibility
Improves accessibility
Learning tool for best practices

Try It Now:

Copy your HTML and paste it into the validator!

Common Boilerplate Mistakes ⚠️

Avoid These Pitfalls!

❌ Forgetting the DOCTYPE
❌ Missing closing tags
❌ Wrong order (body before head)
❌ Missing lang attribute
❌ Forgetting charset meta tag
❌ Content in the head section
❌ Missing title element

Pro Tip: Always validate your HTML to catch these errors!

Homework Assignment 📝

Due Before Next Class (Tuesday):

Part 1: Video & Practice

Watch: "HTML and CSS for Beginners Part 2: Building your first web page!"
Follow along and create your own HTML page with proper boilerplate

Part 2: Validation

Run your website through the W3 HTML Validator
Take a screenshot of your validation results
Submit screenshot to D2L discussion as a new topic

Part 3: Peer Review

Respond to 2 other student posts
Compare and contrast their results with your own
Offer helpful feedback if they have errors!

Grading: Green checkmark in validator + thoughtful peer responses = Full credit!

Today's Takeaways 🎓

You Can Now:

✅ Write HTML boilerplate from memory
✅ Understand each component's purpose
✅ Create and view HTML files in browser
✅ Validate your HTML code

Next Class: Working with Text - Headings, Paragraphs, and More!

Practice Challenge: Write the boilerplate 5 times before next class - aim for under 30 seconds!

Questions? 🤔

Let's Review Together!

Office Hours: Mon/Wed 9-11 AM | Tue/Thu 1-2:30 PM

SSM 204A | bobby.reed@okcu.edu

Remember: There are no stupid questions in web development!