{{define "main-page"}} Interactive HTML Tutorial
{{template "intro" .}}
{{end}} {{define "intro"}}

Welcome to Your HTML Journey! 👋

This interactive tutorial will teach you HTML from the ground up. You'll learn by doing, with:

The tutorial adapts to your pace - if you're doing great, we'll move faster. If you need more practice, we'll provide it!

{{end}} {{define "what-is-html"}}

What is HTML? 🤔

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

{{end}} {{define "correct-answer"}}

✅ Correct! Great job!

{{.Explanation}}

{{end}} {{define "wrong-answer"}}

❌ Not quite right

{{if .ShowHint}}
{{end}}
{{end}} {{define "html-structure"}}

HTML Structure 🏗️

Every HTML document follows a basic structure. Think of it like a house - it needs a foundation, walls, and a roof!

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

Let's break this down:

Most HTML elements have an opening tag and a closing tag (with a /). The content goes between them!

{{end}} {{define "html-tags"}}

HTML Tags 🏷️

HTML uses tags to mark up content. Tags tell the browser how to display the content.

Common HTML Tags:

<h1> to <h6> - Headings (h1 is largest)

<p> - Paragraph

<a> - Link

<img> - Image

<div> - Division/container

<span> - Inline container

Tag Anatomy:

<p>This is a paragraph</p>
 ↑         ↑              ↑
Opening   Content      Closing
 Tag                     Tag

Most tags come in pairs, but some are self-closing like <img> and <br>.

{{end}} {{define "quiz-html-tags"}}

Quiz: HTML Tags 📝

Let's test your knowledge of HTML tags:

Which tag is used to create a paragraph?

{{range .QuizOptions}} {{end}}
{{end}} {{/* Alias for older/alternate node name used by buttons/routes */}} {{define "quiz-what-is-html"}}{{template "quiz-html-tags" .}}{{end}} {{define "exercise-first-tag"}}

{{.Title}} 💻

{{.Instructions}}

Remember: HTML tags have an opening tag <h1> and a closing tag </h1> with the content in between!

{{end}} {{define "html-attributes"}}

HTML Attributes 🎯

Attributes provide additional information about HTML elements. They're always specified in the opening tag.

<a href="https://example.com">Click me</a>
      ↑
   Attribute
   (name="value")

Common Attributes:

href - Link destination (for <a> tags)

src - Image source (for <img> tags)

alt - Alternative text for images

id - Unique identifier for an element

class - Class name for styling

Example with Multiple Attributes:

<img src="logo.png" alt="Company Logo" width="200">
{{end}} {{define "exercise-paragraph"}}

{{.Title}} 💻

{{.Instructions}}

Tip: A paragraph tag looks like this: <p>Your text here</p>

{{end}} {{define "advanced-tags"}}

Advanced HTML Tags 🚀

Great job so far! You're ready for more advanced tags. Let's look at lists and semantic HTML.

Lists:

<!-- Unordered List -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- Ordered List -->
<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Semantic HTML5 Tags:

<header> - Page or section header

<nav> - Navigation links

<main> - Main content

<article> - Self-contained content

<section> - Thematic grouping

<footer> - Page or section footer

These semantic tags make your HTML more meaningful and accessible!

{{end}} {{define "congratulations"}}

🎉 Congratulations!

You've completed the HTML Basics tutorial! You now know:

{{.NodesCompleted}}
Lessons Completed
{{.MasteryScore}}%
Mastery Score
{{len .CompletedExercises}}
Exercises Done

What's Next? 🚀

Continue your web development journey with:

{{end}}