Webseiten - Vertiefung

Das Internet verbindet weltweit verschiedene Computer-Netzwerke. Systeme wie das WWW als Internetdienst ermöglichen dabei den Austausch der Daten. Das WWW selbst ist wiederum ein System aus Hypertexten und Hypermedia im Internet, das via HTTP als Protokoll kommuniziert. Eine Webseite ist in der Regel eine HTML-Datei mit Verweisen, die als Hyperlinks entweder auf andere Stellen im selben Dokument oder auf beliebig viele weitere Ressourcen im WWW verweist. Webseiten bilden die einzelnen Bestandteile einer Website und können sowohl als Homepage (resp. Startseite) als auch in Form jeder beliebigen anderen Seite innerhalb einer Website enthalten sein. Webseiten als HTML-Dokumente können nicht ausschließlich nur im WWW auftreten, sondern etwa auch lokal vorliegen.

Grundsätzliche Funktionsweise

web_funktion.png

In dem Webbrowser (1) erfolgt die Eingabe der URI oder der Klick auf einen Hyperlink (2). Der Webbrowser bezieht die IP-Adresse vom DNS-Server (3). Mit der IP-Adresse wird beim entsprechenden Web-Server das gew√ľnschte Dokument angefragt und zur Verf√ľgung gestellt (4,5). Das angeforderte Dokument wird vom Browser empfangen (6) und dargestellt (7).
In dem Webbrowser (1) erfolgt die Eingabe der URI oder der Klick auf einen Hyperlink (2). Der Webbrowser bezieht die IP-Adresse vom DNS-Server (3). Mit der IP-Adresse wird beim entsprechenden Web-Server das gew√ľnschte Dokument angefragt und zur Verf√ľgung gestellt (4,5). Das angeforderte Dokument wird vom Browser empfangen (6) und dargestellt (7).
Das generelle Vorgehen zum Abrufen einer Webseite in Form einer HTML-Datei kann schematisiert wie folgt beschrieben werden: Nach dem √Ėffnen des Webbrowsers (1) erfolgt die Eingabe der URI (z.B. http://www.ianus-fdz.de/) bzw. der Klick auf einen Hyperlink (2). Dies bewirkt, dass der Webbrowser anhand der in der URI enthaltenen Domain (z.B. www.ianus-fdz.de) die Internet Protocol (IP) Adresse von einem Domain Name System (DNS) Server bezieht (3); den Datenaustausch regelt das Transmission Control Protocol (TCP). Jedes Ger√§t, mit dem eine Internetverbindung hergestellt werden kann, verf√ľgt √ľber eine IP-Adresse, die eine eindeutige Identifikation des Ger√§tes erm√∂glicht. Anhand der IP-Adresse fragt nun der Webbrowser als Web-Client um das gew√ľnschte HTML-Dokument beim entsprechenden Web-Server, auf dem das Dokument gespeichert ist, an (4). Der Web-Server stellt nun das angeforderte HTML-Dokument zur Verf√ľgung (5), welches vom Webbrowser empfangen (6) und dargestellt wird (7). Siehe dazu die nebenstehende Abbildung.

Dies ist nur ein grunds√§tzlicher √úberblick hinsichtlich der wichtigsten Elemente. Ausf√ľhrlichere Informationen finden sich auf https://wiki.selfhtml.org/wiki/Grundlagen. Zur Geschichte des Internets und WWW existieren zahlreiche Abhandlungen, siehe hierf√ľr etwa detailliert https://wiki.selfhtml.org/wiki/Grundlagen/Entstehung_des_Internet.

Webbrowser

Ein Webbrowser ist ein Computerprogramm zum Abrufen sowie Darstellen von Ressourcen (HTML-Dokumente, multimediale Inhalte, ganze Webanwendungen etc.) und ist die Schnittstelle zwischen dem Nutzer und dem WWW. Er erm√∂glicht das sequenzielle Abrufen und Betrachten von Webseiten unter Verwendung von Hyperlinks im WWW (surfen), wobei es keine Rolle spielt, ob eine anzuzeigende Ressource √ľber das WWW oder lokal zur Verf√ľgung gestellt wird. F√ľr die Darstellung der Ressourcen k√∂nnen Plug-ins herangezogen werden. Ein Webbrowser erm√∂glicht zudem die Speicherung von Dateien und Programmen aus dem Internet auf dem Computer. Heutige Webbrowser unterst√ľtzen die Anzeige mehrerer Fenster gleichzeitig in Form von Tabs (Registerkarten, Reiter). Beliebte aktuelle Webbrowser sind Google Chrome, Mozilla Firefox, Microsoft Internet Explorer, Apple Safari und Opera: http://www.w3schools.com/browsers/

URIs

Uniform Resource Identifiers (URI, einheitlicher Bezeichner f√ľr Ressourcen) erm√∂glichen die Identifikation einer Ressource (z. B. einer Webseite oder eines PDF-Dokumentes) im Internet. Im Bereich des WWW treten URIs vor allem als Uniform Resource Locators (URL, einheitlicher Quellenanzeiger, also die eigentlichen "Internetadressen", z. B. http://www.ianus-fdz.de/) undUniform Resource Names (URN, einheitlicher Name f√ľr Ressourcen) auf: URLs definieren dabei im WWW den Ort einer Ressource, URNs benennen die Ressource selbst. Eine URN kann mit einer oder mehreren URLs verkn√ľpft sein, etwa wenn dieselbe Ressource an verschiedenen Speicherorten verf√ľgbar ist. Unter anderem verwenden Nationalbibliotheken URNs als Persistente Identifikatoren zur Kennzeichnung von Onlinepublikationen: Die Deutsche Nationalbibliothek hat beispielsweise das Dokument "Policy f√ľr die Vergabe von URNs im Namensraum urn:nbn:de" mit der URN <urn:nbn:de:101-2012121200> ausgestattet. Man ben√∂tigt f√ľr gew√∂hnlich einen URN-Resolver, der die zum URN geh√∂rige(n) URL(s) anzeigt, um an die gew√ľnschte Ressource zu gelangen. Die Deutsche Nationalbibliothek bietet einen solchen unter der URI http://nbn-resolving.org/ an, wo f√ľr die URN <urn:nbn:de:101-2012121200> (= "Name")¬† die URL http://d-nb.info/1029114455/34 (= "Adresse") angegeben wird. Detaillierte Informationen zu URIs, URLs, URNs und persistenten Identifikatoren sind in dem "Abschlussbericht Testbed 'Persistent Identifiers'" zu finden.

Webseiten

Unter der Verwendung von HTML, CSS, JavaScript sowie weiteren Ressourcen, z. B. Rastergrafiken, Vektorgrafiken, Video- oder Audiodateien werden Webseiten erstellt. Die einzelnen Ressourcen können in verschiedenen Ordnern oder sogar an verschiedenen Orten liegen. Eine Webseite besteht hierbei aus drei grundsätzlichen Schichten: der Struktur, dem Layout und dem Verhalten. Die Struktur bzw. der Aufbau wird durch HTML organisiert, CSS definiert das Layout der Webseite und JavaScript bestimmt, wie sich die Webseite bei Interaktionen des Nutzers verhält. Weitere Informationen dazu finden sich auf https://wiki.selfhtml.org/wiki/HTML/Tutorials/Trennung_von_Inhalt,_Pr%C3...

HTML

Bei Hypertext Markup Language (HTML) handelt es sich um eine Auszeichnungssprache, durch die Dokumente strukturiert beschrieben werden k√∂nnen. HTML kann zur Erstellung von Webseiten aber auch zur Erstellung von lokalen Dokumenten verwendet, ausgedruckt oder mit Hilfe synthetischer Stimmen barrierefrei f√ľr Menschen mit Sehbeeintr√§chtigungen auf Audio-Systemen ausgegeben werden. Webbrowser visualisieren die Auszeichnungsbefehle unter eventueller Ber√ľcksichtigung von CSS-Dateien und machen so das Dokument menschenlesbar. Ein Kernelement von HTML ist die Verf√ľgbarkeit von Verweisen in Form von Hyperlinks, durch die andere Stellen im selben Dokument, aber auch andere Ressourcen im WWW und im Internet aufgerufen werden k√∂nnen.

Der aktuelle Standard f√ľr HTML-Dateien ist HTML5 und wird mit einer Dokumenttypdeklaration am Beginn der HTML-Datei angegeben. Da HTML im ASCII-Zeichensatz verfasst wird, eignen sich Text-Editoren bzw. spezialisierte HTML-Editoren zur Bearbeitung. HTML5 verwendet als Standardzeichensatz UTF-8, was auch beibehalten werden sollte.

Das Grundger√ľst einer HTML Datei besteht aus:

  • Der Dokumenttypdeklaration in der Form <!DOCTYPE html> f√ľr HTML5.
  • Dem HTML-Wurzelelement <html>, welches den Inhalt der HTML-Datei umklammert.
  • Dem Kopfelement <head>, welches die Kopfdaten (z.B. das verpflichtende Titelelement) beinhaltet. Auch ist hier der geeignete Ort f√ľr allgemeine Kommentare zum HTML Dokument (z.B. Metadaten). Die Kopfdaten werden im Browser nicht angezeigt.
  • Dem Titelelement <title> als Teil des <head>, welches verpflichtend anzugeben ist.
  • Dem K√∂rperelement <body>, das den anzuzeigenden Inhalt enth√§lt.

Dieser Aufbau gestaltet sich in HTML folgendermaßen:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    <!-- Kommentare -->
    </head>
    <body>
        anzuzeigender Inhalt
    </body>
</html>

Bei HTML-Dokumenten können zusätzliche Informationen wie z.B. Metadaten als Kommentare an beliebiger Stelle eingegeben werden, wie etwa der <head>-Bereich. Kommentare werden durch die Zeichenfolge <!-- eingeleitet und durch die Zeichenfolge --> abgeschlossen. Sie werden von einem Webbrowser generell nicht angezeigt, können jedoch mittels eines Texteditors dargestellt werden.

Ein kurzes Beispieldokument mit rudiment√§ren Metadaten in HTML, das in einem Webbrowser den Text "Test√ľberschrift: Dies ist ein einfaches Beispiel" anzeigt, k√∂nnte wie folgt aussehen:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Ein Beispieldokument">
        <meta name="keywords" content="example, html, dai, ianus">
        <meta name="author" content ="Dominik Hagmann">
        <title>Beispieldokument</title>
        <!-- Weitere Metadaten: Erstellt: 11.2016, Lizenz: CC-BY -->
    </head>
    <body>
¬†¬† ¬†¬†¬† ¬†<h1>Test√ľberschrift: </h1>
        <p>Dies ist ein einfaches Beispiel.</p>
    </body>
</html>

CSS

Cascading Style Sheets (CSS) dienen zur Formatierung von HTML- und XML-Dokumenten. HTML-Dokumente besitzen einige vom jeweiligen Browser vorgegebene Formatierungen, etwa hinsichtlich der Gestaltung der √úberschriften oder der Hyperlinks. Mittels CSS k√∂nnen deutlich umfangreichere Designs erzeugt werden; CSS-Dateien, die die Formatierung regeln, sind f√ľr professionelles Web-Design von h√∂chster Bedeutung. CSS erm√∂glicht die Formatierung aller HTML-Elemente sowie zahlreicher weiterer Bestandteile, die nicht in HTML enthalten sind. Wahlweise kann mittels CSS global das gesamte Design auf einmal bestimmt oder aber auch die Formatierung einzelner HTML-Objekte individuell definiert werden. F√ľr CSS eignen sich dieselben Editoren wie f√ľr HTML.

Durch einen Selektor wird in der CSS-Datei ein Element angewählt und der Wert der Eigenschaft definiert. Dies geschieht in der Form "`Selektor \{Eigenschaft : Wert; \}"'. Folgendes Beispiel färbt alle Buchstaben eines Absatzes blau ein:

p {color: blue; }

JavaScript

Bei JavaScript (nicht zu verwechseln mit den Programmiersprachen Java und JScript) handelt es sich um eine Implementation der Skriptsprache ECMAScript und ist die am weitesten verbreitete Programmiersprache f√ľr Webseiten. Mittels JavaScript k√∂nnen Webseiten um Zusatzfunktionen erg√§nzt werden. Dabei kann der JavaScript Code abh√§ngig von dessen Einsatzzweck direkt in der HTML-Datei im Head oder Body eingebettet oder in einer separaten Datei mit der Endung .js vorhanden sein. Allgemein empfiehlt es sich, JavaScript extern als js-Datei zu speichern und in dem HTML-Dokument mittels einer Skriptreferenz darauf zu referenzieren.

JavaScript stattet Webseiten mit Elementen aus, durch die der User mit der Webseite interagieren kann. Ein Beispiel f√ľr eine solche Interaktion auf einer Webseite ist, per Mausklick auf einen Button den Inhalt von Textabschnitten zu √§ndern: http://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_head. In diesem Beispiel ist das Skript in HTML eingebettet:

<!DOCTYPE html>
<html>
    <head>
        <script>
            function myFunction() {
                document.getElementById("Beispiel").innerHTML=
                    "... der nun verändert wurde ;-)";
            }
        </script>
    </head>
    <body>
        <h1>Beispiel zu JavaScript</h1>
¬†¬† ¬†¬†¬† ¬†<p id="Beispiel">Dies ist der urspr√ľngliche Text...</p>
        <button type="button" onclick="myFunction()">
¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†Bitte dr√ľcken
        </button>
    </body>
</html>

Ist der Code in einer separaten Datei gespeichert, benötigt man eine Skriptreferenz:

<script src="Beispielskript.js"></script>

Aufgrund des Umfangs wird nicht weiter auf JavaScript im Speziellen eingegangen. Weiterf√ľhrende Informationen finden sich beispielsweise auf https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einf%C3%BChrung

Dynamische Websites

Wenn die angezeigten Inhalte einer Webseite aus einer zugrunde liegenden Datenbank stammen, handelt es sich um eine dynamische Webseite. Bei dem Besuch einer dynamischen  Webseite wird also nicht ein fertiges statisches HTML-Dokument abgerufen, sondern ein anzuzeigendes HTML-Dokument wird ad-hoc und individuell aus den Einträgen in der Datenbank generiert. Mit Hilfe von Content-Management-Systemen (CMS), wie beispielsweise Joomla, Drupal, Typo3 oder WordPress, können die Inhalte solcher Websites auch ohne HTML-Kenntnisse verwaltet und gepflegt werden.

F√ľr die Archivierung von vollst√§ndigen CM-Systemen gelten umfangreichere Anforderungen, als bei der Archivierung einzelner, zum Zeitpunkt des Aufrufes, statischer Webseiten daraus. Es muss beispielsweise entschieden werden, ob der gesamte Funktionsumfang der Website oder lediglich die darin enthaltenen Informationen gesichert werden sollen.

Letzte Änderung: 6. Februar 2017