Essential HTML: A Guided Tutorial Using Hangman Stage 1

This page explains the essential HTML features used in our Hangman Stage 1 project. You'll see how tags, elements, and attributes work together to build a modern, responsive web app—especially when combined with Bootstrap 5 for styling.

1. The Basic Structure

Every HTML document starts with a <!DOCTYPE html> declaration, followed by the <html> element. The <head> contains metadata, links to stylesheets, and the page title. The <body> contains all visible content.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hangman Stage 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="..." rel="stylesheet">
  </head>
  <body>
    ...content...
  </body>
</html>

2. Head Section: Metadata & Styles

• <meta charset="UTF-8"> — Sets character encoding for the document.
• <meta name="viewport" ...> — Makes the page responsive on all devices.
• <title>...</title> — Sets the browser tab title.
• <link rel="stylesheet" ...> — Links to Bootstrap and custom CSS files for styling.
• <style>...</style> — (Optional) Adds custom CSS directly in the HTML.

3. Body Section: Layout & Content

The <body> contains all the visible elements. Bootstrap's .container class centers and adds padding to your content.

<body class="bg-light">
  <div class="container py-5">
    <h1 class="text-center mb-4">Hangman Game - Stage 1</h1>
    ...
  </div>
</body>

4. Common HTML Elements Used

• <h1>, <h2>, <div>, <span> — Structure and organize content.
• <button> — Interactive elements for user actions (e.g., "Restart Game").
• <a> — Hyperlinks for navigation (styled as buttons with Bootstrap).
• <script src="..."></script> — Loads JavaScript files for interactivity.

<div id="wordDisplay" class="display-4 text-center mb-3"></div>
<div id="letterButtons" class="d-flex flex-wrap justify-content-center mb-3"></div>
<button id="resetBtn" class="btn btn-primary">Restart Game</button>
<a href="hangmanChatlogStg1.html" class="btn btn-outline-secondary">View AI Chatlog</a>

5. Attributes: IDs, Classes, and More

• id: Uniquely identifies an element (e.g., id="wordDisplay"), useful for JavaScript.
• class: Assigns one or more CSS classes for styling (e.g., class="btn btn-primary").
• href: Sets the destination for links (<a> tags).
• src: Specifies the source file for scripts or images.

6. Bootstrap 5: Responsive & Stylish

Bootstrap classes like container, btn, text-center, mb-4, and display-4 make your page look modern and work well on all devices. Outline button classes like btn-outline-secondary give interactive feedback on hover.

<button class="btn btn-primary">Restart Game</button>
<a class="btn btn-outline-secondary" href="hangmanChatlogStg1.html">View AI Chatlog</a>

7. Navigation & Linking Between Pages

Use <a> tags to link between your game, chatlog, and tutorial pages. You can style these links as buttons for a better user experience.

<a href="hangmanStg1a.html" class="btn btn-outline-light btn-sm">Game</a>
<a href="hangmanChatlogStg1.html" class="btn btn-outline-light btn-sm">AI Chatlog</a>

8. Putting It All Together

By combining these HTML elements, attributes, and Bootstrap classes, you create a clean, interactive, and responsive web app. Explore the game and chatlog to see these features in action!