CHAPTER 1: EPISODE 2

Introduction to HTML

Understanding the building blocks of the web

Anatomy of a Web Page

TRASHY

(waving arms dramatically) And THAT'S why HTML is EXACTLY like human anatomy! The DOCTYPE is the DNA, the head is the BRAIN, and the body is, well, THE BODY!

CODY

(scratching head) I'm... not sure that's the most helpful analogy for beginners...

TRASHY

(offended) Excuse me? It's BRILLIANT! Look! (points to drawing) Even the TAGS work the same way! Opening tags are like inhaling, closing tags are like exhaling. If you forget to close a tag, your HTML SUFFOCATES!

ALLY

(entering the room, coffee in hand) HTML doesn't breathe, Trashy. And what is that disturbing drawing? Are you teaching anatomy or coding today?

TRASHY

BOTH! It's called "educational synergy"!

GRUMPY

(stomping in) WHO LEFT UNCLOSED TAGS IN THE REPOSITORY?! (holding printed code with angry red circles) Do you have ANY IDEA what happens when you don't close your tags?! CHAOS! ANARCHY! BROWSER WARS II!

CODY

(meekly) Um, most modern browsers actually handle unclosed tags pretty—

GRUMPY

(interrupting) DON'T encourage sloppiness! Today it's an unclosed paragraph tag, tomorrow it's an unclosed conditional statement, next week SKYNET TAKES OVER BECAUSE SOMEONE COULDN'T BE BOTHERED TO TYPE A STUPID SLASH AND ANGLE BRACKET!

FATTY

(entering with an enormous sandwich) That escalated quickly. From HTML to robot apocalypse in under 10 seconds—must be a new record.

GARBAGE

(sighs heavily) HTML is a markup language that uses paired tags to structure content for the web. (walks to whiteboard, erases TrashyMcTweak's drawing)

Every HTML page has the same basic structure. DOCTYPE declaration first, telling the browser what version of HTML you're using. Then the HTML tag that contains everything. Inside that, a head section for metadata that users don't see, and a body section for visible content.

TRASHY

(whispers loudly) See? HEAD and BODY! My anatomy analogy was spot on!

CODY

So HTML is just content wrapped in tags that tell browsers how to display it?

GARBAGE

(nodding) That's it.

SNOWZIE

(trots in, tilting her head) Woof!

CODY

(to the audience) And that's HTML in a nutshell. A structured document with tags that tell browsers what everything is. Now let's learn how to write our first HTML page!

What is HTML?

HTML stands for HyperText Markup Language. It's the standard language used to create web pages.

ALLY

Think of HTML as the skeleton of a webpage. It provides structure but not style. That's why most websites look plain without CSS.

Key Points About HTML

HTML uses tags to mark up content
Tags are enclosed in angle brackets: <tag>
Most tags come in pairs: opening tag and closing tag
Closing tags have a forward slash: </tag>
Content goes between opening and closing tags

HTML is NOT

A programming language (it's a markup language)
Used for styling (that's what CSS is for)
Interactive by itself (JavaScript adds interactivity)
Difficult to learn (it uses plain English tags)

CODY

So HTML is kind of like putting labels on things so the browser knows what they are?

GARBAGE

Exactly. HTML tells the browser "this is a paragraph," "this is a heading," "this is an image," and so on.

Basic HTML Document Structure

Every HTML document follows the same basic structure:

<!-- This is the basic structure of an HTML document -->
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- Your visible content goes here -->
    <h1>My First Webpage</h1>
    <p>Hello, world!</p>
  </body>
</html>

DOCTYPE Declaration

<!DOCTYPE html>

This tells the browser that the document is HTML5 (the latest version). It must be the very first line of your HTML file.

GRUMPY

ALWAYS include the DOCTYPE! Without it, browsers go into "quirks mode" and render your page inconsistently. DO YOU WANT CHAOS? I DIDN'T THINK SO!

HTML Element

<html>...</html>

The root element that contains all other HTML elements on the page.

TRASHY

It's like the GRAND CONTAINER of EVERYTHING! The alpha and omega! The—

Head Element

<head>...</head>

Contains metadata (information about the document) that isn't displayed on the page. This includes:

The page title (shown in the browser tab)
Links to CSS files
Links to JavaScript files
Character encoding
Other metadata

ALLY

The head is like the "backstage area" of your webpage. Users don't see what's in there directly, but it's essential for how the page works and appears.

Body Element

<body>...</body>

Contains all the content that is visible to users, including:

Text
Images
Links
Forms
And more!

FATTY

The body is where all the good stuff happens! Everything users see goes in here. It's like the premium content section!

💡 Pro Tip:

Proper indentation makes your HTML code much easier to read and debug. Each nested element should be indented with 2 or 4 spaces (or a tab) to show its relationship to parent elements.

Understanding HTML Tags

HTML tags are the building blocks of web pages. They define the structure and tell browsers how to display content.

Tag Structure

Most HTML elements have three parts:

Opening tag: <tagname>
Content: Text or other elements
Closing tag: </tagname>

<p>This is a paragraph</p>

Self-Closing Tags

Some tags don't have content and don't need a closing tag. These are called "self-closing" or "void" elements.

<!-- Self-closing tag examples -->
<img src="image.jpg" alt="Description">
<br>
<hr>
<input type="text">

Tag Attributes

Attributes provide additional information about HTML elements.

<tag attribute="value">Content</tag>

<!-- Examples -->
<a href="https://example.com">Visit Example</a>

<img src="cat.jpg" alt="Cute cat" width="300">

ASHLEY

Attributes are like legal specifications for your tags. They provide important details that can completely change how an element functions.

Nesting Elements

HTML elements can be nested inside each other. The inner element is the child, and the outer element is the parent.

<div>
  <h1>My Heading</h1>
  <p>This is a <strong>paragraph</strong> with text.</p>
</div>

TRASHY

It's like those Russian nesting dolls! Elements inside elements inside EVEN MORE elements! HTML INCEPTION!

⚠️ Important Rules:

HTML tags must be properly nested - close inner tags before closing outer tags
All opening tags must have closing tags (except for self-closing tags)
HTML tags are not case-sensitive, but lowercase is recommended
Attribute values should be in quotation marks

Creating Your First HTML Page

Let's put it all together and create a simple "Hello World" webpage.

CODY

Let's break this down into simple steps:

Step 1: Create a New File

Open a text editor (like Notepad, VS Code, or any code editor) and create a new file.

GRUMPY

DO NOT use Microsoft Word or other rich text editors! They add hidden formatting that will DESTROY your HTML! Use a PLAIN TEXT editor!

Step 2: Add the Basic Structure

Type or copy the following HTML structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Step 3: Save the File

Save the file with a .html extension, like "index.html" or "hello.html".

ALLY

Make sure you're saving with the .html extension, not .txt. If you're using Notepad, you might need to change the "Save as type" to "All Files" and then type the name with .html at the end.

Step 4: Open in a Browser

Find the file you saved and double-click it to open in your default web browser.

You should see your "Hello, World!" heading and paragraph displayed!

FATTY

Not exactly visually stunning yet, but hey, it's working! That's the first step to creating any amazing website!

What Your Page Will Look Like

Hello, World!

This is my first web page.

💡 Pro Tip:

To see how your HTML creates this page, you can right-click on the page in your browser and select "View Source" or press Ctrl+U (Cmd+Option+U on Mac) to see the HTML code behind it.

Activity: Write Your First HTML Skeleton

ALLY

Now it's your turn to create an HTML page from scratch! Try to include a few more elements to make it more interesting.

Your Challenge

Create an HTML page that includes:

The basic HTML structure (DOCTYPE, html, head, body)
A title for your page
A main heading (h1)
At least two paragraphs
Some bold or emphasized text
A horizontal rule (hr) between your paragraphs

Example to Get You Started

<!DOCTYPE html>
<html>
  <head>
    <title>About Me</title>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This is my first HTML page. I am learning to code!</p>
    <hr>
    <p>I love coding because it's <strong>creative</strong> and <em>fun</em>!</p>
  </body>
</html>

💡 Tips for Success:

Don't worry about making it look pretty yet - we'll learn CSS later
Properly indent your code to keep it readable
Don't forget to close all your tags
Save frequently and refresh your browser to see changes

GARBAGE

Remember: HTML is about structure, not appearance. Focus on organizing your content logically using the appropriate tags.

Review and Wrap-Up

Great job! You've learned the basics of HTML and created your first web page. Let's review what we covered:

What We Learned

HTML is a markup language used to structure web content
Every HTML document has a basic structure (DOCTYPE, html, head, body)
Tags come in pairs with opening and closing tags
Some tags are self-closing
Attributes provide additional information about elements
How to create a simple "Hello World" page

Coming Up Next

In the next lesson, we'll learn about headings and paragraphs, including:

Different heading levels (h1-h6)
Creating structured paragraphs
Adding line breaks
Creating a page with a title and short bio

SNOWZIE

(inspecting the HTML code with a tilted head, then gives an approving bark) Woof!

CODY

(excited) Snowzie approves of our HTML! That means...

CODE IS COMMITTED!

TRASHY

See? I told you HTML was like anatomy! The head, the body... and Snowzie approved, so I was right!

ALLY

(rolling her eyes) Whatever helps you remember the structure, Trashy.

← Previous Episode Home Next Episode →