Stand: 27.03.2019

4.1 Webseiten ins Netz stellen

Wie stelle ich es an, dass jeder Mensch mit Internetanschluss meine selbst geschriebenen HTML-Seiten in einem Browser betrachten kann?

Wie wir in der Einführung gesehen haben, werden Webseiten über Request und Response abgerufen. Der Client (z.B. Ihr Laptop) schickt eine Anfrage an einen Server (z.B. Server der Hochschule), um z.B. die Homepage der Hochschule zu beziehen:

Anfrage und Antwort mit Infos

Der Server geht auf ein bestimmtes Verzeichnis und sucht nun nach dem in der Anfrage angegebenen Pfad. Ist die Datei gefunden, schickt der Server diese HTML-Datei zurück an den Browser des Benutzers.

Prinzipiell müssen Sie also Ihre HTML-Datei/en auf einen Server hochladen. Dieser Server hat einen großen Speicher, der ähnlich organisiert ist wie Ihre Festplatte. Wenn Sie sich auf dem Server "eingemietet" haben, bekomment Sie ein bestimmtes Unterverzeichnis zugeordnet.

4.1.1 Server der Hochschule Augsburg

Lesen Sie sich zu diesem Thema auch die Seite Eigene Homepage des Rechenzentrums durch.

Als Student*in der Hochschule Augsburg haben Sie ganz automatisch zwei Unterverzeichnisse im System des Rechenzentrums (RZ), die so heißen wie Ihr Login-Name, z.B. "schmidt". Uns interessiert das Verzeichnis, das im RZ so heißt: /www/schmidt. Dies ist das Verzeichnis, das der Hochschulserver durchsucht, wenn jemand die URL

www.hs-augsburg.de/~schmidt

in den Browser eingibt. Bei obiger URL ergänzt der Browser automatisch ein "index.html". Der Benutzer kann aber beliebige Pfade eingeben, z.B.

www.hs-augsburg.de/~schmidt/multimedia/testseiten/foo.html

Bei dieser URL würde der Server in Ihrem Benutzerverzeichnis nach der Datei

multimedia/testseiten/foo.html

suchen.

4.1.2 Dateien hochladen mit FTP

Wie bekommen Sie Ihre Datei(en) jetzt in Ihr Benutzerverzeichnis auf dem Hochschulserver? Dazu nutzen Sie einen Dienst namens FTP (File Transfer Protocol) oder - besser - SFTP (Secure FTP). Dazu benötigen Sie eine Software wie FileZilla (Windows, Mac, Linux) oder WinSCP (nur Windows).

Wir zeigen hier, wie man mit FileZilla verfährt.

Schritt 1: FileZilla starten

Nach dem Start der Software sehen Sie die Oberfläche:

FileZilla

Grob gesagt, zeigt die linke Hälfte das, was auf Ihrem eigenen Rechner ist und die rechte Hälfte das, was auf dem Server ist, mit dem Sie sich verbunden haben.

Schritt 2: Servermanager öffnen

Um eine neue Verbindung anzulegen, benötigen wir den Servermanager. Klicken Sie auf das Icon für den Servermanager:

FileZilla

Schritt 3: Server anlegen

Jetzt öffnet sich dieses Fenster:

FileZilla-Servermanager

Klicken Sie auf "Neuer Server" und geben Sie im linken Teil dem Server einen Namen (z.B. "Hochschule Augsburg"). Wenn Sie weitere Server in Anspruch nehmen (z.B. einen kommerziellen Provider), können Sie hier weitere Server anlegen.

Dann füllen Sie rechts die Felder "Server", "Protokoll", "Verbindungsart", "Benutzer" und "Passwort" wie im Screenshot aus. Verwenden Sie Ihre RZ-Kennung und -Passwort. Setzen Sie das Feld Protokoll auf SFTP (= sicheres FTP). Klicken Sie dann auf "Verbinden".

In Zukunft müssen Sie nur noch den Servermanager öffnen, den von Ihnen angelegten Server auswählen und auf "Verbinden" klicken.

Schritt 4: Dateien hochladen

Sobald die Verbindung steht, sehen Sie:

FileZilla, verbunden

Die linke Seite zeigt die Inhalte Ihrer Festplatte, die rechte Seite die Inhalte Ihres Bereichs auf dem Hochschulserver.

Suchen Sie auf dem Server (rechte Seite) das Verzeichnis

/www/benutzer

Am besten geben Sie diesen Pfad (natürlich mit Ihrem Benutzernamen z.B. /www/kipp) in dieses Feld ein:

FileZilla, Pfad eingeben

Alle Datein, die Sie dort hinein kopieren, sind jetzt weltweit lesbar! Achten Sie also auf Copyright-Fragen. Gehen Sie also auf der linken Seite auf Ihr Projekt und kopieren Sie die gewünschten Dateien auf die rechten Seite (inklusive Unterverzeichnisse z.B. für Bilder). Sie können Ihre Dateien von Ihrer Festplatte (linker Bereich) direkt per Drag-and-drop in den Speicher des Servers (rechter Bereich) ziehen.

4.1.3 Eigene Domain

Wenn Sie eine eigene Domain wie "www.harald-schmidt.de" oder "www.designclubaugsburg.net" haben möchten, auf der Ihre Webseite stehen soll, dann müssen Sie an einen Provider wenden, um diese zu mieten. Korrekt heißt dieser Internet Service Provider oder ISP oder - auf Deutsch - Internetdienstanbieter. Man sagt auch, der Provider hostet Ihre Webseite (die Dienstleistung wird Webhosting genannt).

Um einen Provider zu finden, suchen Sie einfach nach Vergleichsberichten (Stichworte Provider, Webhosting, Vergleich) und schauen Sie sich die Kosten und evtl. Erfahrungsberichte an.

Wichtig ist der Unterschied zwischen dem Provider (eine Firma mit Servern und Festplatten im Keller) und der Domäne (z.B. harald-schmidt.de). Die Domäne mieten Sie nämlich eigentlich bei der zuständigen Registratur. Die Zuständigkeit ergibt sich aus der Top-Level-Domäne (zum Beispiel ist "de" eine Top-Level-Domäne oder auch "org"). Hier einige für Sie wichtige Zuständigkeiten:

Obwohl für alle .de Domänen die DENIC zuständig ist, regelt der Provider alles für Sie. Sie suchen sich eine (freie) Domäne aus und schließen beim Provider einen Vertrag ab. Der Provider meldet Sie bei der DENIC an und sorgt dafür, dass Aufrufe der Domäne auf ein für Sie eingerichtetes Verzeichnis gelenkt werden.

Sie sollten wissen, dass Sie bei der DENIC Ihren Namen und Ihre Anschrift hinterlegen müssen. Diese Daten sind dann öffentlich. Jeder kann auf den Seiten der DENIC für jede .de Domäne die jeweils registrierte Person, inklusive Adresse, nachschlagen. Dieser Service heißt auch whois. Natürlich können Sie bei der DENIC auch nachschauen, ob eine bestimmte Domäne bereits vergeben ist.

Der Provider gibt Ihnen Zugang zu diesem Verzeichnis per FTP, dies entspricht dem WWW-Verzeichnis am RZ, d.h. auch dort können Sie per FileZilla einfach Dateien hochladen, dann unter z.B. unter www.harald-schmidt.de prüfen.

4.2 Browser als Entwicklungstool

Jeder Browser ist mittlerweile auch ein sehr mächtiges Entwicklungstool für Webseiten. Wir empfehlen die Browser Chrome und Firefox, die auf allen Plattformen verfügbar sind.

4.2.1 Quelltext anzeigen

Zunächst mal ein interesantes Faktum: Eine Webseite kann seinen HTML-Code nicht vor Ihnen verstecken! Warum nicht? Weil der Browser sonst nichts anzeigen könnte. Also sind alle Daten, die der Browser verwendet - HTML, CSS, JavaScript - komplett für Sie einsehbar. Ein riesiger Schatz an Beispielen und Code-Schnipseln, von denen Sie lernen können.

Der HTML-Text einer Webseite wird auch Quelltext genannt und ist in Chrome über das Hauptmenü Anzeigen > Entwickler > Quelltext anzeigen erreichbar.

Tipp: Schauen Sie im Menü nach, welches der Tastaturkürzel für diese Ansicht ist.

Hier sehen Sie den Quelltext meiner Homepage michaelkipp.de:

Quelltext der Seite michaelkipp.de

Darüber hinaus können Sie im Quelltext auf die verlinkten CSS-Stylesheets klicken, um diese anzuschauen. Das gleiche gilt für andere verlinkte Dateien wie JavaScript-Code.

Wir klicken auf das Stylesheet und sehen (Ausschnitt):

Stylesheet der Seite michaelkipp.de

Machen Sie reichlich Gebrauch von dieser Möglichkeit, um von den vielen Webseiten im Internet zu lernen. Seien Sie nicht überrascht, wenn der Code auf einigen Seiten unübersichtlich ist. Oft werden Code-Teile automatisch generiert und sind nicht auf Lesbarkeit hin optimiert. Manchmal ist Code auch minifiziert, d.h. alle Leerzeichen und Umbrüche sind entfernt, um noch ein paar Byte Speicher zu sparen. Es gibt aber auch genügend Webseiten, die ganz "normal" ansehbar sind.

4.2.2 Entwickleransicht

Wenn Sie auf einer Webseite sind, kommen Sie in den Entwicklungsmodus, indem Sie z.B. ein beliebiges Element auf der Seite untersuchen. Hier haben wir einen Rechtsclick auf dem Logo ausgeführt:

Rechtsklicks aufs Logo, dann untersuchen

Der Browser wechselt anschließend in die Entwickleransicht, wo in der rechten Hälfte viele technische Infos sichtbar werden:

Entwicklungsansicht

Sie können jetzt im rechten oberen Teilfenster die HTML-Elemente betrachten. Diese sind als Baum - ähnlich einer Verzeichnisstruktur - dargestellt. Sie können Teile auf- und zuklappen. Wenn Sie ein Element anklicken, wird in der normalen Ansicht das entsprechende Element gehighlightet, so dass Sie auch Margin und Padding prüfen können.

Im rechten unteren Teilfenster sehen Sie die CSS-Regeln, die für das aktuell ausgewählte HTML-Element aktiv sind. Die Regelen sind gestaffelt aufgelistet. Ganz oben stehen die spezifischsten Regeln mit höchster Priorität, weiter unten die weniger spezifischen und vererbten Regeln. Regeln, die nicht angewendet werden, weil sie von spezifischeren Regeln überschrieben wurden, sind durchgestrichen dargestellt.

Sie können die CSS-Regeln auch "live" verändern. Ganz oben steht eine leere Regel "element.style", die nur das aktuell markierte HTML-Element betrifft. Dort (aber auch bei allen anderen Regeln) können Sie CSS-Eigenschaften hinzufügen, z.B. background-color:yellow. Probieren Sie es aus. In der Hauptansicht passt sich direkt die Ansicht an. Ihre CSS-Datei ändert sich dabei natürlich nicht (Sie können das ja bei jeder Webseite im Internet tun - dort ändern Sie auch keine CSS-Dateien). Der Mechanismus dient also dem Experimentieren und Korrigieren. Sie müssen anschließend alle Änderungen in Ihr CSS übertragen.

Diese Live-Bearbeitung ist sehr nützlich, um Farben, Schriftgrößen und vor allem Abstände anzupassen. Auch zur Fehlersuche eignet sich das Feature. Ihr CSS funktioniert nicht so, wie Sie wollen? Schauen Sie im Entwicklungsmodus nach, ob Ihre Regel überhaupt auftaucht (vielleicht haben Sie ein Semikolon oder eine Klammer vergessen) und ob die Regel nicht von einer anderen Regel überschrieben wird.

4.3 Zeichenkodierung

Computer können nur mit Zahlen umgehen, nicht mit Buchstaben. Alle Buchstaben, die Sie in Ihrem Browser, Editor oder PDF-Viewer sehen, (bzw. generell alle "Zeichen") werden beim Speichern in eine Datei in Zahlen umgewandelt. Umgekehrt werden beim Lesen diese Zahlen wieder in Buchstaben umgewandelt. Das bedeutet, es muss eine Tabelle geben, wo jedem Zeichen eine Zahl zugeordnet ist. Diese Zahl wird Code genannt. Eine solche Tabelle nennt man Zeichenkodierung.

Ein Ausschnitt aus einer solchen Tabelle könnte so aussehen (ASCII-Kodierung):

Zeichen Code
a 97
b 98
c 99
... ...

Denken Sie auch daran, dass auch Ziffern Zeichen sind und i.d.R. nicht gleichzeitig ihr eigener Code sind. Hier ein Beispiel (ebenfalls ASCII):

Zeichen Code
0 48
1 49
2 50
... ...

Sie können Sie diese Zahlen z.B. mit Processing anschauen. Entweder für ein bestimmtes Zeichen mit folgendem Programm:

println((int) 'a');

Oder Sie möchten bei Tastendruck den Code der gedrückten Taste ausgeben lassen - dann müssen Sie in den aktiven Modus gehen und die Systemvariable keyCode verwenden:

void draw() {
}

void keyPressed() {
  println(keyCode);
}

Die Zahlen, die Sie sehen, entsprechen sowohl der ASCII-Tabelle als auch der Latin-1-Tabelle (dazu kommen wir gleich).

Wie groß ist eine solche Tabelle?

Sie müssen alle 26 Buchstaben von A bis Z als Groß- und Kleinbuchstaben (2 x 26) kodieren, alle Ziffern 0 bis 9, Interpunktions- und Sonderzeichen (Prozent, Dollar, Hash ...). Eine andere Überlegung ist, dass Sie ungefähr doppelt so viele Zeichen brauchen, wie Sie Tasten auf Ihrer Tastatur haben (doppelt wegen der Umschalt/Shift-Taste). Da kommt einiges zusammen, aber mit so 100 Zeichen müsste man eigentlich auskommen, oder?

Bei Computern werden Zahlen oft im Binärsystem ausgedrückt, weil das die Repräsentation ist, die letztendlich auf der Hardware ankommt. Zur Erinnerung: Ein Bit ist eine 1-stellige Binärzahl, ist also entweder 0 oder 1. Ein Computer teilt seinen Speicher in 8-Bit-Einheiten auf, in sogenannte Bytes. Ein Byte besteht aus 8 Bit, ist also eine 8-stellige Binärzahl und kann somit 256 verschiedene Werte von 0 bis 255 darstellen.

Mit 7 Bit (0000000, 0000001, 0000010, 0000011, ...) kann man 128 verschiedene Werte ausdrücken, also könnte man eine Zeichenkodierung nach dieser Überlegung mit 7 Bits auskommen.

Gibt es es nur eine solche Tabelle weltweit?

Überlegen Sie, was passiert, wenn Sie zwei verschiedene Tabellen haben. Programm A schreibt den Text mit der folgenden Tabelle auf die Festplatte:

Zeichen Code
a 97
b 98
c 99
... ...

Programm B nimmt aber diese andere Tabelle, um den Text zu lesen:

Zeichen Code
a 1
b 2
c 3
... ...

Das Ergebnis ist natürlich Buchstabensalat.

Sollte man demnach eine einzige Tabelle für alle Schriftzeichen der Welt haben? Dann müssen Sie nicht nur Umlaute und französische und skandinavische Akzente hinzufügen, sondern auch sämtliche Schriftzeichen für Arabisch, Koreanisch, Chinesisch, Sanskrit etc. Dazu kommen wir beim Thema Unicode.

4.3.1 ASCII

Eine der ersten weltweit verwendeten Kodierungen wurde 1963 in den USA unter dem Namen ASCII (American Standard Code for Information Interchange) entwickelt. Es handelt sich um eie 7-Bit-Kodierung und hat somit theoretisch Platz für 128 Zeichen. Da dieser Code in den USA entwickelt wurde, enthält er z.B. keine Umlaute, kein ß und keine unteren Anführungszeichen.

Zeichen Code Code (binär, 7 Bit)
a 97 1100001
b 98 1100010
c 99 1100011
... ... ...

4.3.2 Latin-1

Für europäische Sprachen wurde ein ganzer Satz von Zeichenkodierungen entwickelt mit dem Oberbegriff ISO 8859. Die Unterfamilie ISO 8859-1 (auch bekannt als Latin-1) deckt alle westeuropäischen Sprachen ab, also auch Deutsch. Latin-1 war 2014 die zweithäufigste Kodierung von Websites. Wichtig beim Konzept dieser Kodierungen ist, dass sie kompatibel mit ASCII sind. Man hat ganz einfach die ASCII-Tabelle um z.B. Umlaute erweitert.

Schauen Sie sich den folgenden Ausschnitt der Latin-1-Tabelle an. Sie sehen, dass Sie an der Binärzahl ganz leicht sehen können, ob es sich um den "ASCII"-Teil der Tabelle handelt oder nicht: das erste Bit ist 0 bei ASCII und 1 bei den zusätzlichen Zeichen.

Zeichen Code Code (binär, 8 Bit)
a 97 01100001
b 98 01100010
c 99 01100011
... ... ...
ä 228 11100100
ö 246 11110110
ü 252 11111100

Wenn Sie also einen deutschen Text in einen Editor laden und die Umlaute nicht richtig dargestellt sind, dann kann das daran liegen, dass der Text in Latin-1 kodiert ist und der Editor denkt, er habe ASCII vor sich.

4.3.3 Unicode

Um das leidige Problem mit den Tabellen zu lösen, wurde Unicode entwickelt:

ein internationaler Standard, in dem langfristig für jedes Sinn tragende Schriftzeichen oder Textelement aller bekannten Schriftkulturen und Zeichensysteme ein digitaler Code festgelegt wird.

(Wikipedia, 10/2017)

Unicode ist ein allgemeiner Mechanismus zur Repräsentation von Schriftzeichen. Er wurde in Version 1 im Jahr 1991 verabschiedet, 1996 folgte Version 2 mit über 1 Million Codepunkten.

Um Unicode tatsächlich zu realisieren, gibt es drei wesentliche Zeichenkodierungen, die man in diesem Zusammenhang Unicode Transformation Format oder UTF nennt.

Im Internet hat sich UTF-8 durchgesetzt (UTF-8 wurde 1992 spezifiziert). Laut Wikipedia verwendeten 10/2017 89,9% aller Wesites UTF-8.

Die "8" deutet auf 8 Bit hin, heißt aber nur dass ein Zeichen im günstigsten Fall mit 8 Bit kodiert wird. UTF-8 ist nämlich ein Format mit variabler Länge, d.h. ein einziges Zeichen kann mit 1, 2, 3 oder 4 Byte kodiert werden müssen.

Auch interessant sind die ersten 128 Zeichen mit ASCII identisch. Ansonsten arbeitet UTF-8 mit Tricks, um den Speicherplatz pro Zeichen klein zu halten. Das heißt aber auch, dass Zeichensätze bestimmter Sprachen bevorzugt werden. Im Fall von UTF-8 sind dies westliche Sprachen. Zeichen anderer Sprachen verbrauchen wesentlich mehr Platz pro Zeichen.

Im Kopf Ihrer HTML-Seite geben Sie heutzutage immer UTF-8 als Zeichenkodierung an:

<meta charset="UTF-8"/>

4.4 Lizenzen

Wenn Sie sich mit Webseiten beschäftigen, stoßen Sie immer wieder auf Fragen wie "darf ich dieses (fremde) Bild auf meiner Seite veröffentlichen" oder "ich möchte es anderen Leuten erlauben, diese bestimmten Fotos von mir zu verwenden".

Als Nutzer fragen Sie sich, was Sie mit fremden Werken alles anstellen dürfen. Als Urheber fragen Sie sich, wie Sie genau festlegen können, was mit Ihren Werken passiert.

Zu den häufigsten Fragen gehört:

Zu diesem Zweck gibt es Lizenzen, die solche Dinge festlegen. Nun haben Urheber (Fotografen, Autoren, Programmierer etc.) oft weder Lust noch Zeit, sich mit rechtlichen Fragen auseinander zu setzen. Die Folge ist, dass gerade im Internet viel Material herumschwirrt, das man nicht verwenden darf, weil keine Lizenz "dran hängt", obwohl die Urheber vielleicht gar nichts dagegen hätten.

4.4.1 Creative Commons

Die Organisation Creative Commons (kurz CC) hat es sich zum Ziel gesetzt, eine Reihe möglichst leicht verständlicher Lizenzen zu entwickeln, um es Urhebern möglichst leicht zu machen, ihre Werk "frei" zu geben und dabei dennoch relativ genau kontrollieren können, unter welchen Bedingungen das Werk verwendet werden kann. Die Organisation wurde 2001 von Lawrence Lessing (Professor für Recht, zunächst in Stanford, jetzt in Harvard) und anderen gegründet. Mittlerweile gibt es auch eine deutsche Abteilung: Creative Commons Deutschland.

Creative Commons hat eine Reihe von modularen Lizenzen erstellt, die unter vier einfachen Leitfragen stehen, die jeweils eine griffige Abkürzung (BY, NC, ND, SA) haben:

BY Muss der/die Urheberin genannt werden? ("BY" wie in created by*)

NC Ist die kommerzielle Nutzung untersagt? ("NC" wie non-commercial)

ND Sind Änderungen untersagt? ("ND" steht für no derivatives, also keine "abgeleiteten" Werke)

SA Muss ein Werk, das ein anderes Werk verwendet/beinhaltet, unter die gleiche Lizenz gestellt werden? ("SA" steht für share alike)

Aus diesen vier Komponenten ergeben sich die folgenden sechs sinnvollen Kombinationen. Jede Kombination ist eine eigene CC-Lizenz:

Am besten lesen Sie sich weiterführende Informationen bei Creative Commons oder Creative Commons Deutschland durch.

Diese Ausführungen hier sollen Ihnen nur einen ersten Einblick geben und vielleicht Hemmschwellen abbauen, sich mit Lizenzen zu beschäftigen.

4.4.2 Public Domain und CC0

Als Nutzer gibt es Situationen, wo Sie gern Bilder, Musik etc. nutzen möchten, ohne einen Urheber nennen zu müssen. Es gibt auch solche sehr liberalen Lizenzen, die das nicht einfordern.

Der Begriff Public Domain bedeutet im angelsächsischen Raum "frei von Urheberrechten". Diese Begrifflichkeit scheint aber laut Wikipedia nicht ohne weiteres auf deutsches Recht übertragbar zu sein.

Daher hat Creative Commons die Lizenz CC0 erstellt, die keine Namensnennung einfordert.

4.4.3 Bildersuche bei Google

Bei Suchmaschinen wie Google können Sie gezielt nach Bildern mit bestimmten Lizenzen suchen. Gehen Sie dazu in die Bildersuche und wählen Sie Tools und schauen Sie dann unter "Nutzungsrechte".

Google-Bildersuche mit Tools

Dort finden Sie die Optionen:

Wichtig ist, dass Sie bei den dann gefundenen Bildern nochmal checken, ob die Lizenz stimmt.

Es gibt darüber hinaus auch Bilderdienste, die sich darauf spezialisiert haben, Bilder mit z.B. CC0-Lizenz zu sammeln und bereit zu stellen.

4.5 Tools

4.5.1 Atom

Atom ist ein Texteditor, der leicht zu bedienen ist, aber auch für komplexe Arbeiten geeignet ist.

Interessant sind die Erweiterungsmöglichkeiten mit Hilfe von Packages.

Packages installieren

Sie können in dem Editor Erweiterung in Form von Packages installieren. Dazu

  1. gehen Sie in die Preferences
  2. wählen Sie Install in der linken Leiste
  3. suchen Sie das gewünschte Package

Package w3c-validation

Ein besonders interessantes Package ist w3c-validation. Dieses Package führt bei jedem Speichern Ihres HTML-Files eine Validierung durch, ähnlich wie auf der Webseite des W3C.

Die Fehlermeldungen werden unterhalb des Code-Bereichs angezeigt.

Atom mit Validator: Fehler

Meistens sollte es natürlich so aussehen:

Atom mit Validator: alles korrekt