1.	Geschichte und Internet
1.1.	Die Geschichte des Internet
1.2.	Die Technik des Internet
1.3.	Browser
1.3.1.	Netscape Navigator
1.3.2.	Microsoft Internet Explorer
1.4.	Sicherheit im Netz

2.	Dienste im Internet
2.1.	WWW
2.2.	eMail
2.3.	News
2.4.	FTP
2.5.	Telnet
2.6.	IRC
2.7.	Gopher

3.	Findmittel
3.1.	Periodikanachweise
3.2.	Bibliographien

4.	Informationsmedium Internet
4.1.	eMail
4.2.	News
4.3.	FTP
4.4.	Kataloge und Portale
4.5.	Suchmaschinen
4.5.1.	Altavista
4.5.2.	Google

5.	Geschichte im Internet
5.1.	Kataloge und Verzeichnisse
5.2.	Suchmaschinen
5.3.	Nachschlagewerke
5.4.	Datenbestände & Archive
5.5.	Primärquellensammlungen
5.6.	Geschichte multimedial

6.	Das Internet als Quelle
6.1.	Quellenbewertung
6.2.	Zitieren aus dem Internet
6.3.	Rechtliche Aspekte

7.	Publizieren im Internet
7.1.	Allg. Voraussetzungen
7.2.	Grundlagen HTML
7.3.	Editoren
7.4.	Speicherplatz, Domains und Upload

8.	Literatur- und Link- verzeichnis

© Copyright by Seminar für Neuere Geschichte 2001 / Impressum

Inhalt und Design by Timo Leimbach
Anregungen und Kritik werden gerne entgegengenommen.

Letzte Aktualisierung am:

Grundlagen von HTML

Hier sollen nur kurz anhand einiger leichter Beispiele die Grundstruktur und Funktionsweise von HTML erklärt werden. Insbesondere soll deutlich gemacht werden, dass HTML an sich nicht schwer zu verstehen ist und damit das Erstellen von Webseiten kein abgeschlossenes Informatikstudium erfordert. Natürlich ist um die Sprache wirklich zu lernen ist deutlicher Mehraufwand notwendig, da dies eine intensive Beschäftigung mit der Thematik erfordert. Aber auch Anfängern bietet sich durch die sog. WYSIWYG-Editoren eine einfache Möglichkeit erste Seiten zu erstellen. Neben den teuren Produkten wie Dreamweaver oder FrontPage verfügt sowohl der Netscape Communicator als auch der Internet Explorer über kleine Zusatzprogramme, die das graphische Erstellen von Webseiten ermöglichen. Zusätzlich sind auch im Web, im Bereich der Free- und Shareware kostenlose oder kostengünstige vernünftige Editoren zu finden, worauf wir im einzelnen noch zu sprechen kommen.

In enger Anlehnung an die freie und hervorragende HTML-Referenz SelfHTML von Stefan Münz soll nun im folgenden ein kleiner Einblick in die Semantik von HTML gegeben werden.

Schema des Grundgerüsts einer HTML-Datei

Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden zwei Teilen:

Header (Kopf)
(enthält Angaben zu Titel und Metatags)

Body (Körper)
(enthält den eigentlichen Text mit Überschriften, Links, Grafikreferenzen usw.)

Beispiel:

<html>
<head>
<title>Text des Titels</title>
</head>
<body>
Text, Links, Grafikreferenzen usw.
</body>
</html>

Der gesamte Inhalt einer HTML-Datei wird in die Tags <html> bzw. </html> eingeschlossen. Nach dem einleitenden HTML-Tag folgt das einleitende Tag für den Kopf <head>. Zwischen diesem Tag und seinem Gegenstück </head> werden allgemeine Angaben zur HTML-Datei notiert. Die wichtigste dieser Angaben ist der Titel der HTML-Datei, markiert durch die Tags <title> bzw. </title>. Unterhalb davon folgt der Textkörper, markiert durch die Tags <body> bzw. </body>. In den Textkörper wird dann der eigentliche Inhalt der Seite geschrieben um später durch den Browser angezeigt zu werden.

Wichtig!

Ganz wichtig ist die Angabe eines Titels. Jede HTML-Datei sollte einen aussagekräftigen Titel erhalten, der aber auch nicht zu lang sein darf. Denn der Titel erscheint beim Browser in der Fensterleiste, oft auch noch in einer separaten Statuszeile, und es ist derjenige Eintrag, den der Browser bei Lesezeichen und beim Anzeigen der bereits besuchten Dateien verwendet.

Tags im HTML

HTML-Dateien bestehen aus ASCII-Text. Deshalb können HTML-Dateien mit jedem einfachen Text-Editor bearbeitet werden. Besser sind allerdings ausgereifte HTML-Editoren.

Neben dem eigentlichen Text enthalten HTML-Dateien HTML-spezifische Befehle. Alle HTML-Befehle stehen in sog. Tags. Die Tags werden durch spitze Klammern markiert. Fast alle Befehle von HTML bestehen aus einem einleitenden und einem abschließenden Tag. Der Text dazwischen ist der "Gültigkeitsbereich" für die betreffenden Tags.

Beispiel:

<h4>HTML - die Sprache des WWW</h4>

Im WWW-Browser erscheint dieser Beispieltext so:

HTML - die Sprache des WWW

Das Beispiel zeigt eine Überschrift 4. Ordnung. Das einleitende Tag <h4> signalisiert, daß eine Überschrift 4. Ordnung folgt (h = heading = Überschrift). Das abschließende Tag </h4> signalisiert das Ende des Überschriftentextes. Ein abschließendes Tag ist immer an dem Schrägstrich "/" zu erkennen.

Bisher hat es keine Bedeutung ob die Tags groß- oder kleingeschrieben sind. Das wird sich erst mit der Implementierung von XHTML ändern. Für die Übersichtlichkeit ist natürlich die Großschreibung von Vorteil.

Es gibt einige wenige "Standalone-Tags", d.h. Tags, die keine Einleitung für den folgenden Text darstellen und deshalb kein abschließendes Tag haben.

Beispiel:

Eine Zeile, ein manueller Zeilenumbruch <br>
und die nächste Zeile

Am Ende der ersten Zeile signalisiert das Tag <br>, daß ein manueller Zeilenumbruch eingefügt werden soll.

Im einleitenden <body>-Tag können zusätzliche Attribute stehen, etwa für Farben und Hintergrundbilder.

Farben definieren in HTML

Obwohl die HTML-Tags der entsprechenden Farbdefinitionen sehr unterschiedlich sind, gilt bei allen Farbdefinitionen ein einheitliches Schema. Grundsätzlich gibt es zwei Möglichkeiten, Farben in HTML zu definieren:

1. durch Angabe der RGB-Werte der gewünschten Farbe in Hexadezimalform (RGB = Rot/Grün/Blau-Wert der Farbe)

2. durch Angabe eines Farbnamens

Die hexadezimale Werte arbeiten Browser-unabhängig, so dass 16,7 Millionen Farben genutzt werden können.

Wenn Farbnamen angeben werden, wird die etwas schwierige Definition einer Farbe im Hexadezimal-Modus umgangen. Derzeit sind jedoch nur 16 Farbnamen offiziell standardisiert. Weitere Farbnamen gibt es, sie sind jedoch Browser-abhängig

Hexadezimale Angabe von Farben

Wenn Farben direkt im Hexadezimal-Modus definiert werden, muss die gewünschte Farbe aus Angaben zu den drei Grundfarben Rot, Grün und Blau (RGB-Werte) zusammengestellt werden.

Beispiele:

<body bgcolor=#808080> <!-- dunkelgrauer Dateihintergrund -->
<font color=#990000>roter Text</font>
<table bgcolor=#00C0C0> <!-- blaugrüner Tabellenhintergrund -->
<hr color=#CC00CC>  <!-- violette Trennlinie -->

Jede hexadezimale Farbdefinition ist 6stellig und hat das Schema: #XXXXXX.
Am Anfang steht ein Gatter #. Dahinter folgen 6 Stellen für die Farbdefinition. Die ersten beiden Stellen stellen den Rot-Wert der Farbe dar, die zweiten beiden Stellen den Grün-Wert, und die letzten beiden Stellen den Blau-Wert.

Hexadezimale Ziffern sind:

0 (entspricht dezimal 0)
1 (entspricht dezimal 1)
2 (entspricht dezimal 2)
3 (entspricht dezimal 3)
4 (entspricht dezimal 4)
5 (entspricht dezimal 5)
6 (entspricht dezimal 6)
7 (entspricht dezimal 7)
8 (entspricht dezimal 8)
9 (entspricht dezimal 9)
A (entspricht dezimal 10)
B (entspricht dezimal 11)
C (entspricht dezimal 12)
D (entspricht dezimal 13)
E (entspricht dezimal 14)
F (entspricht dezimal 15)

Eine hexadezimale Ziffer kann also 16 Zustände haben. Für jeden Farbwert (Rot, Grün, Blau) stehen 2 Ziffern zur Verfügung. Das macht 16 x 16 (= 256) mögliche Zustände pro Farbwert.

Es gibt 16 Grundfarben, die von jedem VGA-kompatiblen Bildschirm angezeigt werden können. Es gibt ferner 216 Standardfarben, die Netscape intern und plattformübergreifend zur Verfügung stellt. Diese Farbpalette hat sich im WWW zu einer Art Quasi-Standard entwickelt.

Grafiken einbinden

Um Grafiken in HTML-Dateien einzubinden, binde die Grafikdateien an gewünschten Stellen im HTML-Quelltext ein. Grundlegende Formate, die von allen Browsern unterstützt werden, sind JPG und GIF.

Beispiel:

<img src="datei.gif">
<img src="datei.jpg">

Die Grafikreferenz beginnt mit <img src= (img = image = Bild, src = source = Quelle). Hinter dem Istgleichzeichen geben Sie den Namen der Grafikdatei an, auf die verwiesen wird (in den Beispielen: "datei.gif" bzw. "datei.jpg"). Der Dateiname muss in Anführungszeichen stehen. Der Befehl für die Grafikreferenz endet mit >.

Wichtig:

Die obigen Beispiele setzen voraus, dass sich die Grafikdatei im gleichen Verzeichnis befindet wie die HTML-Datei, in der die Grafik eingebunden wird.

Hyperlinks in HTML

Alle Hyperlinks/Verweise in HTML haben einen einheitlichen Aufbau, egal ob sie zu einem Verweisziel in der gleichen Datei, zu einer anderen Datei im eigenen Projekt, zu einer beliebigen WWW-Adresse oder zu einer beliebigen Datei eines anderen Dateityps im Internet oder lokal auf dem eigenen Rechner führen.

Schema:

<a href="[Verweisziel]">Verweistext</a>

Das Setzen eines Hyperlinks beginnt mit <a href= (a = anchor = Anker, href = hyper reference = Hyper(text)-Referenz). Hinter dem Istgleichzeichen wird das Verweisziel angegeben. Das Verweisziel muss in Anführungszeichen stehen. Dahinter endet das einleitende Tag mit >. Es folgt der Text, der dem Anwender als Verweis angeboten wird (bei den meisten WWW-Browsern andersfarbig, häufig unterstrichen). Im Beispiel ist das der Text "Verweistext". Dahinter wird das abschließende Tag </a> notiert.

Hyperlinks zu Dateien im gleichen Verzeichnis

Bei kleineren Projekten, zum Beispiel bei persönlichen Homepages, befinden sich alle Projektdateien zumeist im gleichen Verzeichnis, auch nach dem Upload auf einen WWW-Server. In diesem Fall genügt bei Hyperlinks zwischen den Dateien einfach die Angabe der anderen Datei.

Beispiel:

<a href="datei.htm">Verweistext</a>

Bei größeren Projekten ist es sinnvoll mit mehreren Ordnern zu arbeiten. Dabei muss dann die Verzeichnisstruktur mit in das Verweisziel aufgenommen werden.

Wichtig:

Bei der Angabe des Dateinamens muss unbedingt zwischen Groß- und Kleinschreibung unterschieden werden.

Hyperlink zu einer WWW-Adresse

Man kann auch einen Verweis zu einer beliebigen HTTP-Adresse im WWW setzen.

Beispiel:

<a href="http://www.uni-mannheim.de">Universität Mannheim</a>

Aufgabe

Mit dem zum Umfang von Windows gehörenden Editor Notepad eine HTML-Datei erstellen.

Weiterführende Links:

SelfHTML - die freie Referenz zu HTML - http://www.teamone.de/selfaktuell/