Wie alles zusammenhängt: HTML + CSS + JS + PHP

Erste Schritte: Wie alles zusammenhängt: HTML + CSS + JS + PHP

In modernen Webanwendungen arbeiten mehrere Technologien Hand in Hand. Dieses Tutorial zeigt dir, wie HTML, CSS, JavaScript und PHP zusammenwirken, um dynamische, interaktive und optisch ansprechende Websites zu erstellen.

1. HTML – Die Struktur der Seite

HTML (HyperText Markup Language) bildet das Grundgerüst deiner Webseite. Es definiert, welche Elemente auf der Seite vorhanden sind, wie Überschriften, Absätze, Listen, Bilder und Formulare.

Beispiel einer einfachen HTML-Struktur

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine Webseite</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Willkommen auf meiner Webseite</h1>
    </header>
    
    <main>
        <p>Dies ist ein Beispiel, wie HTML den strukturellen Rahmen für deine Inhalte bildet.</p>
        <!-- Hier können weitere Inhalte stehen -->
    </main>
    
    <footer>
        <p>© 2025 - Meine Webseite</p>
    </footer>
    
    <script src="script.js"></script>
</body>
</html>

2. CSS – Das Design und Layout

CSS (Cascading Style Sheets) ist dafür zuständig, dass deine HTML-Inhalte ansprechend aussehen. Mit CSS bestimmst du Farben, Schriftarten, Abstände, Rahmen und das Layout der Seite.

Beispiel einer einfachen CSS-Datei (style.css)

/* style.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

main {
    padding: 20px;
    background-color: #fff;
    margin: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

Dieses Stylesheet sorgt dafür, dass der Body einen neutralen Hintergrund hat, der Header und Footer einen dunklen Hintergrund mit weißem Text besitzen und der Hauptinhalt (main) in einem weißen, gepolsterten Bereich erscheint.

3. JavaScript – Interaktivität im Browser

JavaScript (JS) ermöglicht es dir, Interaktionen auf deiner Webseite zu steuern. Damit kannst du z. B. auf Klicks reagieren, Inhalte dynamisch ändern oder Animationen einbinden.

Beispiel einer einfachen JavaScript-Datei (script.js)

// script.js
document.addEventListener("DOMContentLoaded", function() {
    // Füge einen Klick-Listener zu einem Button hinzu, wenn dieser existiert
    var button = document.getElementById("clickMe");
    if (button) {
        button.addEventListener("click", function() {
            alert("Button wurde geklickt!");
        });
    }
});

In diesem Beispiel wartet das Skript, bis der DOM vollständig geladen ist, sucht dann nach einem Element mit der ID „clickMe“ und fügt einen Klick-Listener hinzu, der bei einem Klick eine Alert-Box anzeigt.

4. PHP – Serverseitige Logik und Dynamik

PHP wird auf dem Server ausgeführt und erzeugt dynamische Inhalte, die dann als HTML an den Browser gesendet werden. Du kannst PHP nutzen, um Daten aus einer Datenbank abzurufen, Formulare zu verarbeiten oder benutzerspezifische Inhalte anzuzeigen.

Beispiel: Einfache PHP-Integration in HTML (index.php)

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>PHP & Frontend Integration</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Willkommen auf meiner dynamischen Webseite</h1>
    </header>
    
    <main>
        <?php
            // PHP generiert dynamische Inhalte
            $greeting = "Hallo, Welt!";
            echo "<p>" . $greeting . "</p>";
        ?>
        
        <button id="clickMe">Klick mich!</button>
    </main>
    
    <footer>
        <p>© 2025 - Meine dynamische Webseite</p>
    </footer>
    
    <script src="script.js"></script>
</body>
</html>

In diesem Beispiel wird PHP verwendet, um einen Begrüßungstext in einen <p>-Tag einzufügen. Anschließend wird die gesamte HTML-Seite an den Browser gesendet, wo CSS das Layout gestaltet und JavaScript Interaktivität bietet.

Wie alles zusammenarbeitet

– HTML strukturiert die Seite: Du definierst, wo Header, Main und Footer stehen und welche Elemente (Text, Bilder, Formulare) vorhanden sind.
– CSS sorgt für das Design: Es formatiert die HTML-Elemente, legt Abstände fest und bestimmt Farben sowie Schriftarten.
– JavaScript macht die Seite interaktiv: Es reagiert auf Nutzeraktionen (wie Klicks) und verändert Inhalte dynamisch im Browser.
– PHP liefert dynamische Inhalte: Es verarbeitet Daten, kommuniziert mit Datenbanken und generiert den HTML-Code, der an den Browser geschickt wird.

Fazit

Die Kombination aus HTML, CSS, JavaScript und PHP ermöglicht es dir, moderne, dynamische und interaktive Webseiten zu erstellen. Jeder dieser Bausteine hat seine eigene Rolle:

  • HTML schafft die Struktur,
  • CSS verleiht das Design,
  • JavaScript fügt Interaktivität hinzu,
  • und PHP sorgt für dynamische, serverseitige Prozesse.

Wenn du diese Technologien zusammen einsetzt, kannst du leistungsstarke Webanwendungen realisieren, die sowohl optisch ansprechend als auch funktional sind. Experimentiere mit den Beispielen, passe sie an deine Bedürfnisse an und entdecke, wie du deine Projekte Schritt für Schritt erweitern kannst!