HTML chevron_right HTML Introduction & Document Structure

HTML Introduction & Document Structure

calendar_today schedule 2 min read

1. Welcome and Icebreaker:

  • Icebreaker: “If you could invent a new HTML tag, what would it do?”

2. Outline the Session:

  • Agenda:
    • What is HTML?
    • The role of DOCTYPE
    • Basic structure of an HTML document
  • Learning Outcomes:
    • Understand the purpose of HTML
    • Recognize the essential parts of an HTML file
    • Be able to write a simple HTML page
  • Structure:
    • Theory, live coding, and hands-on practice
    • Interactive Q&A

3. Concept Explanation:

HTML (HyperText Markup Language) is the standard language for creating web pages. It uses tags to structure content, making it readable by browsers. Every HTML document starts with a DOCTYPE declaration, followed by the root <html> element, which contains <head> (metadata) and <body> (content).

Basic HTML Document Structure:

4. Live Coding Demonstration:

Let’s create a basic HTML page:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to HTML!</h1>
    <p>This is your first web page.</p>
  </body>
</html>
  • Step-by-step:
    • Start with <!DOCTYPE html> to tell the browser to use HTML5.
    • Use <html> as the root.
    • Place metadata (like <title>) in <head>.
    • Put visible content in <body>.
  • Best Practice: Always use proper nesting and indentation.
  • Common Pitfall: Forgetting the DOCTYPE or closing tags.

5. Tasks:

  • Exercise:
    • Create a new HTML file.
    • Add the basic structure as shown above.
    • Change the <title> and <h1> to your name.
    • Add a short paragraph about why you want to learn HTML.