Class 3 - HTML Foundations

HTML Foundations

Elements and Tags 🏗️

CSCI 3403 - Web Programming

Week 2, Class 3

Today we start building! 🚀

Quick Recap

Where we've been:

Where we're going:

Today's Learning Objectives

The Web Development Trinity

HTML 📝

Structure & Content

The skeleton and raw data of your webpage

Text, links, images, buttons

CSS 🎨

Style & Presentation

Makes everything look beautiful

Colors, fonts, layouts, animations

JavaScript ⚡

Behavior & Logic

Makes your webpage interactive

Click events, calculations, dynamic content

Quick Note: "Programming" Languages?

Many resources call HTML and CSS "programming languages"...

But technically, they're not!

Don't worry - you still need all three to build amazing websites!

HTML Tags: The Building Blocks

Tags are keywords wrapped in angle brackets:

<p> ← Opening tag
</p> ← Closing tag

Key Points:

HTML Elements: Content + Tags

An element = opening tag + content + closing tag

<p>This is a paragraph!</p>

Anatomy of an Element:

Think of elements as containers for your content!

Common HTML Elements

<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>A paragraph of text</p>
<a>A link</a>
<div>A container</div>
<span>Inline text</span>
<ul>Unordered list</ul>
<li>List item</li>

Let's Try It! 💻

5-Minute Activity

Open your one-page website in VS Code

Try adding these elements:

  • A heading with <h2>
  • A paragraph with <p>
  • A link with <a>

Remember: Save your file and refresh your browser to see changes!

Void Elements: The Exceptions

Some elements don't have closing tags!

<br> ← Line break
<img> ← Image
<hr> ← Horizontal rule
<input> ← Form input

Why no closing tag?

They don't contain content - they ARE the content!

Note on Self-Closing Tags

You might see this in older code:

<br />
<img />
<hr />

Modern HTML discourages this!

Just use: <br>, <img>, <hr>

Browsers will understand both, but keep it modern!

Why Does the Right Tag Matter?

Semantic HTML

Use <h1> for main headings, not <p style="font-size:2em">

Live Coding Demo 🎬

Let's build together!

Follow Along!

Open your one-page website and code with me

Common Beginner Mistakes

❌ Forgetting closing tags

<p>This won't work properly

❌ Incorrect nesting

<p><strong>Wrong!</p></strong>

✅ Correct nesting

<p><strong>Right!</strong></p>

Practice Time! 🏋️

10-Minute Challenge

Add to your one-page website:

  • At least 3 different heading levels (h1, h2, h3)
  • Multiple paragraphs
  • A horizontal rule (<hr>)
  • Some bold (<strong>) and italic (<em>) text

I'll walk around to help - raise your hand if you get stuck!

Homework Assignment 📚

Due: Before Next Class (Thursday)

Add to your one-page website:

  • ✅ One void tag (br, hr, img, etc.)
  • ✅ Three additional tags you haven't used before

Submission:

  1. Make your changes
  2. Commit with a meaningful message
  3. Push to GitHub
  4. Submit the link to your commit on D2L

Resources for Practice

Required:

Recommended:

All links are in The Odin Project!

Questions? 🤔

Let's Review:

Your Questions?

Now's the time - no question is too simple!

Next Class Preview

Thursday: HTML Boilerplate

Remember: Complete your homework before Thursday!

Great Work Today! 🎉

You've Started Building the Web!

Keep experimenting with HTML tags

Don't be afraid to try new things

Google is your friend!

See you Thursday at 9:30 AM! 👋

1 / 20