10.1.1 Webseiten


Das Internet ist die technische Infrastruktur auf deren Basis Milliarden von Endgeräten weltweit miteinander vernetzt sind.

Das World Wide Web benennt den Teil des Internets, in welchem von Web-Servern der Inhalt von Web-Seiten an einen Web-Browser der auf einem Web-Client läuft gesendet wird.

Der Aufruf einer Web-Seite läuft wie folgt ab:

  • Auf dem Web-Client wird in der Adresszeile des Web-Browsers der Webseiten-Link der gewünschten Web-Seite eingegeben.
  • Der Web-Client sendet den Webseiten-Link an einen DNS-Server.
  • Der DNS-Server sucht in seiner Datenbank die IP-Adresse des Web-Servers, auf welchem die Web-Seite gespeichert ist und sendet die IP-Adresse zurück an den Web-Client.
  • Der Web-Client kontaktiert den Web-Server über dessen IP-Adresse, woraufhin der Web-Server alle Dateien, die notwendig sind um die Webseite darzustellen, an den Web-Client sendet.
  • Der Web-Browser des Web-Clients baut aus den empfangenen Dateien die Web-Seite auf und zeigt diese auf dem Bildschirm an.

Web-Server


Übung: Mini-Modell des World-Wide-Web
  • Starte das Programm "Filius" auf deinem Rechner. Falls du die Übung zuhause machen möchtest, kannst du Filius unter folgender Adresse herunterladen: Filius herunterladen.

  • Lade folgende Datei auf deinen Rechner herunter: mini_internet.fls.zip

  • Entpacke die Datei "mini_internet.fls.zip" in die Datei "mini_internet.fls".

  • Öffne die Datei "mini_internet.fls" in Filius.

  • Klicke in Filius auf der oberen Leiste auf das grüne Play-Symbol.

  • Klicke dann auf den Web-Client-1 und dort auf "Webbrowser".

  • Tippe in die Adress-Zeile des Web-Browsers den Web-Link "www.gym-wst.de" ein und beobachte das Verhalten der Verbindungskabel.


Browser-Engines

Der Kern eines Web-Browsers ist die Browser-Engine. Die momentan meist verwendetsten Browser-Engines sind:

  • Blink von Google
  • WebKit von Apple
  • Gecko von Mozilla
  • Goanna ein Gecko-Derivat vom Entwickler M.C. Straver

Auf der Basis dieser Browser-Engines werden folgende Web-Browser angeboten:

Web-Browser

Die Aufgabe der Browser-Engine eines Web-Browsers ist es, die Dateien, welche der Web-Client vom Web-Server empfängt so zu verarbeiten, dass diese auf dem Bildschirm dargestellt werden können. Falls eine Web-Seite Eingaben durch die Webseiten-Nutzer ermöglicht, nimmt die Browser-Engine diese Eingaben entgegen und verarbeitet sie.


Hinter den Kulissen einer Web-Seite

  • Drücke bei geöffnetem Web-Browser die Taste F12.

  • Klicke auf "Elemente" und sieh dir den Aufbau der HTML-Datei an.

HTML-Seite

  • Klicke auf "Sources" und sie dir die Dateien an, die notwendig sind, damit die Seite angezeigt werden kann.

HTML-Seite

Eine Webseite besteht aus einer Unmenge von vielen verschiedenen Dateien.


Content-Management-System

Eine Webseite wird heute nicht mehr von Hand getippt. Das wäre ein viel zu großer Aufwand. Vielmehr läuft auf dem Web-Server ein Content-Management-System (CMS) welches mit Hilfe von Algorithmen aus Texten, Daten, Medien und Apps alle Dateien erzeugt, die zum Web-Client gesendet und dort vom Web-Browser verarbeitet werden.

CMS


Codierung einer Web-Seite

HTML steht für HyperText Markup Language und ist eine Sprache für die Erstellung von Webseiten. Mit HTML beschreibt man die Struktur einer Webseite und kennzeichnet Elemente durch HTML-Tags (HTML-Elemente).

Eine einfache HTML-Datei:

<!DOCTYPE html>
<html>
    <head>
        <title>Meine erste Webseite</title>
    </head>
    <body>
        <h1>Willkommen auf meiner Webseite!</h1>
        <p>Dies ist ein Absatz.</p>
    </body>
</html>
  • <!DOCTYPE html>: Dokumenttyp als HTML-Dokument
  • <html>-Tag: Haupt-Element einer Webseite welche das gesamte Dokument einrahmt.
  • <head>-Tag: Metadaten für das Dokument, wie z.B. den Titel der Webseite, der in der Titelleiste des Browsers angezeigt wird. Diese Inhalte werden nicht auf der Seite angezeigt.
  • <body>-Tag: enthält alle Elemente, welche auf der Webseite angezeigt werden.
  • Element-Tags: Die Elemente der Webseite können ein bestimmtes Aussehen bekommen oder bestimmte Funktionen erfüllen: Überschriften <h1> bis <h6>, Absätze <p>, <a href> Internet-Links,...

HTML-Elemente können Attribute haben, welche zusätzliche Informationen über das Element bereitstellen. Zum Beispiel:

<a href="https://www.example.com">Dies ist ein Link</a>
  • <a> ist ein HTML-Tag für Hyperlinks
  • href ist ein Attribut, das die Web-Seite angibt, zu welcher der Link führen soll.

Übung:
  • Öffne folgenden Web-Editor in einem neuen Tab: Webseiten-Block-Editor.

  • Lösche den Inhalt und baue folgende Seite nach:

Web-Seite

Wenn man auf "HTML-Qellcode" klickt, sieht man folgendes:

Web-Seite

CSS steht für Cascading Style Sheets und ist eine Stil-Beschreibungs-Sprache, die verwendet wird, um das Aussehen und die Formatierung einer Webseite zu beschreiben.

Ein Beispiel für CSS, in welchem der Hintergrund aller Seiten auf einer Webseite auf hellblau gesetzt wird:

body {
    background-color: lightblue;
}

Ein weiteres Beispiel, mit welchem alle Überschriften erster Ordnung (h1) auf einer Webseite zentriert und in roter Farbe dargestellt werden:

h1 {
    color: red;
    text-align: center;
}

Mit CSS kann man eigene Elemente auf einer Seite gestelten, indem man den Elementen einen Klassennamen oder eine ID zuweist.

Im folgenden Beispiel wird jedes Element mit der Klasse "myClass" grün und mit einer Schriftgröße von 20 Pixeln dargestellt.

.myClass {
    font-size: 20px;
    color: green;
}

CSS in eine Webseite einbinden

Es gibt drei Hauptmethoden, um CSS in eine HTML-Datei einzubinden:

  • Inline-Styling: Hier wird das CSS direkt in ein HTML-Element eingefügt.
<p style="color: red;">Dies ist ein roter Text.</p>
  • Interne Stylesheets: Hier wird das CSS im <head>-Bereich der HTML-Datei zwischen den <style>-Tags platziert.
<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>Dies ist ein roter Text.</p>
</body>
  • Externe Stylesheets: Hier wird das CSS in einer eigenen Datei gespeichert, die dann in die HTML-Datei eingebunden wird. Dies ist die im Web-Design bevorzugte Methode.

Einbettung von styles.css in der HTML-Datei:

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>Dies ist ein roter Text.</p>
</body>

Inhalt von styles.css:

p {
    color: red;
}

Übung:
  • Öffne folgenden Web-Editor in einem neuen Tab: Webseiten-Block-Editor.

  • Lösche den Inhalt und baue folgende Seite nach:

Web-Seite

Du kannst die Datei auch mit folgendem Link öffnen: Formatierte Web-Seite

JavaScript ist eine Programmier-Sprache mit welcher Webseiten interaktiv und dynamisch gestaltet werden können.

JavaScript-Dateien können in eine HTML-Datei eingebunden werden, um das Verhalten der Webseite zu steuern. Dies geschieht in der Regel mit dem <script>-Tag im Header oder am Ende der HTML-Datei:

<!DOCTYPE html>
<html>
    <head>
        <title>Meine Webseite</title>
    </head>
    <body>
        <h1>Willkommen auf meiner Webseite!</h1>
        <script src="script.js"></script>
    </body>
</html>

Beispiel für eine Animation, die mit JavaScript programmiert ist: Ein UFO über Norddeutschland

Webseiten werden mit Hilfe von Medien-Dateien abwechslungsreicher gestaltet:

  • Bild-Dateien können mit dem <img>-Tag eingefügt werden:
<img src="bild.jpg" alt="Beschreibung des Bildes">
  • Audio-Dateien können mit dem <audio>-Tag eingebettet werden:
<audio controls src="audio.mp3"></audio>
  • Video-Dateien können mit dem <video>-Tag eingebettet werden:
<video controls src="video.mp4"></video>
  • Andere Arten von Medien-Dateien, wie PDFs können mit dem <object>-Tag eingebettet werden:
<object data="dokument.pdf" type="application/pdf"></object>