Eine erste Webseite

Mit den folgenden Schritten kann eine eigene Ressource im Web verfügbar gemacht werden:

  1. Erstellung eines HTML-Dokuments bzw. einer Sammlung von Textdateien, die Elemente der Sprachen HTML, CSS und Programmiersprachen wie JavaScript oder Python enthalten
  2. Dieses wird auf einem vom Internet erreichbaren Rechner (dem Server) hinterlegt, auf dem ein Serverprogramm, der Webserver installiert ist.
  3. Der Webserver wird so konfiguriert, dass die Anfragen, die via HTTP oder HTTPS von den Browsern der Clients an den Server mit dem für die Webseite bereitgestellten URL getätigt werden, die Webseite zurückgeben

In diesem Kapitel soll es vor allem um Schritt 1 gehen und erste Code-Snippets in den Sprachen HTML, CSS und JavaScript werden aufgelistet. Für einen umfassenden Überblick über die Techniken der Webprogrammierung empfehlen wir die E-Learning-Webseite W3Schools.

HTML für die Struktur

Bei HTML (Hypertext Markup Language) handelt es sich um eine Auszeichnungssprache, d. h. mithilfe von HTML-Elementen wird einem Text eine Bedeutung gegeben und dessen Funktion definiert.


    <!DOCTYPE html>
    <html>
        <body>
            <h1>Eine Überschrift</h1>
            <div>
                <a class="verweis" href="https://www.w3schools.com/">https://www.w3schools.com</a>
                <button id="button1">Bitte klicken</button>
            </div>
        </body>
    </html>
Inhalt einer beispielhaften HTML-Datei index.html

CSS für die Gestaltung

CSS steht für Cascading Style Sheets und wird verwendet, um die Elemente auf deiner Seite anzuordnen und ihr Aussehen zu verändern. Du kannst Farben, Ränder, Schriftarten definieren und sicherstellen, dass das Layout sich der Größe des Displays deines Endgerätes (Laptop, Tablet, Smartphone) anpasst.

In CSS können wir Regeln angeben, mit denen wir das Aussehen von HTML-Elementen definieren. Das geschieht z.bsp; die eine bestimmte ID, hat oder für die bestimmte Klassen definiert sind, aussehen sollen.

Einige Beispiele:

h1 {
    font-family: sans-serif;
}

Mit diesem CSS-Selektor wird die Schriftart aller h1-Überschriften auf serifenlos gesetzt.


#button1 {
    background-color: orange;
}

Mit diesem CSS-Selektor wird der Hintergrund aller HTML-Elemente, deren Attribut id auf button1 gesetzt ist, auf orange gesetzt


.verweis:hover {
  color: blue;
}

Mit dem dritten CSS-Selektor wird die Schriftfarbe aller Elemente mit der Klasse verweis auf blue gesetzt.

Dynamisches Verhalten mit JavaScript

Mit einer Programmiersprache wie JavaScript kannst du den Inhalt deiner Webseite dynamisch ändern, Verhalten den Steuerelementen hinzufügen oder Berechnungen ausführen und das Ergebnis anzeigen.


document.getElementById("button1").onclick = function(){
    document.getElementById("ausgabe").innerHTML += " Klick";
}

Übung Web

Kopiere den HTML-Code in das dafür vorgesehene Fenster in einem jsfiddle. Wie ändert sich die Ausgabe, wenn du nacheinander den CSS-Code die JavaScript-Zeilen hinzufügst?