Guess My Number Spiel - HTML Strukturdokumentation¶

Dokumenttyp und Grundkonfiguration¶

<!DOCTYPE html>
<html lang="en">

<!DOCTYPE html>: Deklariert das Dokument als HTML5
<html lang="en">: Setzt die Sprache des Dokuments auf Englisch

Head-Bereich¶

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Guess My Number!</title>
</head>

Meta-Tags¶

charset="UTF-8": Stellt die richtige Zeichenkodierung sicher
viewport Meta-Tag: Gewährleistet responsives Design für mobile Geräte
X-UA-Compatible: Sichert Kompatibilität mit Internet Explorer

Stylesheet und Titel¶

<link rel="stylesheet" href="style.css" />: Verbindet externe CSS-Datei
<title>: Setzt den Browser-Tab-Titel auf "Guess My Number!"

Body-Struktur¶

Header-Bereich¶

<header>
    <h1>Guess My Number!</h1>
    <p class="between">(Between 1 and 20)</p>
    <button class="btn again">Again!</button>
    <div class="number">?</div>
</header>

<h1>: Hauptspiel-Titel
<p class="between">: Anweisung zum Zahlenbereich
<button class="btn again">: Zurücksetzen/Wieder spielen-Knopf
<div class="number">: Platzhalter für die Geheimzahl

Hauptinhalt¶

<main>
    <section class="left">
        <input type="number" class="guess" />
        <button class="btn check">Check!</button>
    </section>
    <section class="right">
        <p class="message">Start guessing...</p>
        <p class="label-score">💯 Score: <span class="score">20</span></p>
        <p class="label-highscore">
            🥇 Highscore: <span class="highscore">0</span>
        </p>
    </section>
</main>

Linker Abschnitt¶

<input type="number" class="guess" />: Eingabefeld für Spielereingabe
<button class="btn check">: Überprüfen-Knopf zum Raten

Rechter Abschnitt¶

<p class="message">: Nachrichten-Anzeige für Spielstatus
<p class="label-score">: Punkteanzeige (startet bei 20)
<p class="label-highscore">: Höchstpunktestand (startet bei 0)

Skript-Einbindung¶

<script src="script.js"></script>

Bindet die JavaScript-Datei ein, die die Spiellogik steuert