Home

Webdesign

Die Bausteine einer Webseite

Webseiten sind im Laufe der Zeit immer komplexer geworden, doch die Grundstruktur ist immer noch relativ einfach. Jede Webseite basiert letztendlich auf HTML (Hypertext Markup Language). HTML beherbergt die Inhalte und die Struktur einer Webseite, die wiederum vom Browser für den Anwender sichtbar gemacht wird und primär aus drei Komponenten besteht:

Eine Seite, die auf reinem HTML basiert, sieht nicht besonders ansprechend aus. Um dem Inhalt auch eine attraktive äußere Form zu geben, kommt CSS (Cascading Stylesheets) zum Einsatz. Ein Stylesheet ist eine einfache Textdatei, die Formatierungsegeln enthält. Mit Eigenschaften und Werten legen diese Regeln fest, wie bestimmte Elemente auf der Webseite dargestellt werden sollen. Auch das Layout einer Seite wird heute praktisch nur noch über CSS-Regeln gesteuert, da diese eine einfache Anpassung der Darstellung in der Vielzahl der möglichen Ausgabegeräte ermöglichen.

Webseiten erfordern im Zeitalter der Userorientierung auch zunehmend Interaktivität. Das wichtigste Werkzeug zur Erzeugung dieser Interaktivität ist die Skriptsprache JavaScript. Mit ihr lassen sich beispielsweise Formulare auswerten, Anpassungen an veraltete Browser steuern oder interaktive Bildergalerien erstellen.

HTML, CSS und Javascript im Zusammenspiel

Folgendes kleines Beispiel zeigt die drei Bausteine im Zusammenspiel. Der HTML-Baustein enthält den Inhalt der Webseite (Überschrift und zwei Buttons). Der CSS-Baustein steuert das Aussehen der Inhalte und der JavaScript-Baustein gibt dem User die Möglichkeit, das Aussehen der Seite mittels der beiden Button zu verändern.

See the Pen c2e4d931ab84396dfca1489179f3eef5 by Bernd Schiller (@Bernie14153) on CodePen.

Hinweis: Die Codebeispiele sind editierbar, d.h. sie ermöglichen das Experimentieren mit dem Code.

Die Grundstruktur einer Webseite

Die Grundstruktur einer HTML-Seite sieht folgendermaßen aus:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8"/>
        <title>Ein erstes Beispiel</title>
        
        <link rel="stylesheet" href="css/style.css"/>
        
    </head>
        
    <body>

    </body>
</html>

Prinzipiell lässt sich der Code unterteilen in den Kopf (head), der primär Instruktionen für Browser und Suchmaschinen enthält, und den eigentlichen Inhalt (body). Die Zeile 

<!DOCTYPE html>
informiert den Browser darüber, dass es sich um eine HTML5-Seite handelt.

Das html-Element zeigt Beginn und Ende der dargestellten Seite an. Das Attribut lang (=language) mit dem Wert de (=deutsch) verweist darauf, dass Deutsch die Standardsprache für den Inhalt der Seite ist. Es können natürlich auch andere Sprachen angegeben werden (z.B. en für englisch).

<html lang="de">
...
</html>

Die nächste Zeile legt die Zeichenkodierung fest und stellt sicher, dass die Zeichen des Unicode, der praktisch jedes genutzte Zeichen enthält, auch richtig dargestellt werden.

<meta charset="utf-8"/>

Das title-Element ist der einzige Inhalt des Kopfbereichs, der auch für den User sichtbar ist. Es erscheint auf dem Browser-Tab und in manchen Browsern als Titel ganz oben im Browser-Fenster.

<title>Ein erstes Beispiel</title>

Das letzte Element aus unserer Grundstruktur ist ein Verweis auf eine externe Datei, die auf diese Weise in die Webseite eingebunden wird. In diesem Fall ist es der Verweis auf ein externes Stylesheet. Es empfiehlt sich, Stylesheets oder JavaScript immer in externe Dateien auszulagern, da dadurch die Bearbeitung der Website, insbesondere bei größeren Änderungen, deutlich erleichtert wird und weniger fehleranfällig ist.

<link rel="stylesheet" href="css/style.css"/>

Das Erstellen einer Webseite mit Visual Studio Code

Wir werden im Laufe des W-Seminars den Editor Visual Studio Code verwenden. Der Editor kann hier heruntergeladen werden. Nach der Installation müssen wir für das Erstellen einer Website einige Vorbereitungen treffen: