Webseiten-Code-Erklärungsseite

1. index.html

                <header>

                  <h1>Tetris</h1>

                  <nav>

                    <ul>

                      <li><a href="Tetris-Studio.html">Über Tetris</a></li>

                      <li><a href="aufbau.html">Aufbau der Webseite</a></li>

                    </ul>

                  </nav>

                </header>

<header>: Der Kopfbereich der Seite mit Titel und Navigation.
<nav> und <ul>: Ermöglicht die Navigation durch verschiedene Abschnitte, die die Geschichte und Varianten von Tetris beleuchten.
<a>: Links zu anderen HTML-Seiten, die die Navigation ermöglichen.

2. Tetris-Studio.html

                <section id="features">

                  <div class="features-grid">

                    <div class="feature-item">

                      <h3>3D-Design</h3>

                      <p>Benutzer können 3D-Modelle erstellen und importieren.</p>

                    </div>

                  </div>

                </section>

<section>: Definiert einen eigenständigen Inhaltsbereich.
class="features-grid": Wendet CSS-Grid an, um Inhalte in Spalten anzuordnen.
<h3> und <p>: Überschrift und Beschreibung der Funktion.

3. styles.css

                body {
                    font-family: 'Roboto', sans-serif;
                    background-color: #f4f4f4;
                    color: #333;
                }
            

font-family: Legt die Standardschriftart der Webseite fest.
background-color: Definiert die Hintergrundfarbe der Webseite.
color: Bestimmt die Standardfarbe des Textes.

                .features-grid {
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr;
                    gap: 20px;
                }
            

display: grid: Aktiviert CSS-Grid für die Anordnung von Elementen.
grid-template-columns: Teilt den verfügbaren Platz in drei gleich breite Spalten auf.
gap: Fügt Abstände zwischen den Spalten hinzu.

4. Interaktion zwischen HTML und CSS

Die Webseite verwendet CSS, um das Layout und Design der HTML-Struktur zu steuern:

CSS-Klassen: Definieren spezifische Stile für HTML-Elemente.
IDs: Werden verwendet, um einzelne Elemente gezielt zu stylen.
Medienabfragen: Sorgen für ein responsives Design, das sich an verschiedene Bildschirmgrößen anpasst.