Zur Hauptseite der Uni Mainz Zur Hauptseite desFachbereiches Zur Hauptseite derComputeranlagen Zur Hauptseite der VorlesungTelekommunikation>

Kapitel II.4:
HTML - Das System hinter dem Web
[1]

Frank Krüger, M.A.
Fachbereich 23, Johannes Gutenberg-Universität Mainz
Sprechstunde: Donnerstags 11-12 Uhr
e-mail: krueger@nfask2.fask.uni-mainz.de


Gliederung

  1. Was ist HTML, die Hypertext Markup Language?
  2. HTML im Überblick (Tutorial)

siehe auch:


1 Was ist HTML?

1.1 spezielle Literatur:

1.2 elektronische Anleitungen:

HTML (Hypertext Markup Language) ist eine einheitliche, formale Beschreibungssprache für die sog. Web-Seiten als Grundelemente des World-Wide Web. Mit ihr ist es u.a. möglich, Verweise zwischen diesen Seiten interaktiv darzustellen (sog. Hypertext).

Grundlage: ISO-Standard SGML (Standard Generalized Markup Language) zur Darstellung und zum Austausch komplexer elektronischer Dokumente z.B. umfangreicher technischer Handbücher, HTML ist allerdings eine stark vereinfachte Form einer sog. DTD (Document Type Definition) und entspricht in vielen Teilen nicht dem Standard.

Prinzip: Grundelement sind die sog. Tags, also Markierungen (z.B. <h1>) als Metainformation zur Verarbeitung der Dokumente.

Damit werden die Textteile

  1. nach ihrer logischen Rolle (z.B. eine Überschrift als <h1>Text</h1>) gekennzeichnet und nicht - wie in PC-Textverarbeitungssystemen, etwa MS Word üblich - physikalisch (z.B. Times 14 Pkt, Fett) formatiert. Die tatsächliche Erscheinungsweise wird erst beim Benutzer durch den "Browser" (das Programm, das das Dokument liest) festgelegt.
    So wird z.B. eine Überschrift in einem graphischen Browser zwar in einer fetten und etwas größeren Schrift wiedergegeben, ein akustisches System könnte diese Hervorhebung aber durch eine stärkere Betonung und längere Pausen kenntlich machen;.
  2. universell austauschbar, da nur die Standard-ISO-Zeichensätze (oder andere genormte Zeichensätze, etwa für Japanisch) verwendet werden. Auch nationale und mathematische Sonderzeichen wie Umlaute oder das griechische Alphabet werden umschrieben (siehe Abschnitt 3.2, Entitäten).

Beispiel:

Der so ausgezeichnete Text
erscheint - etwa in Netscape - als:
<h1>&Uuml;berschrift</h1><p>Das ist ein Beispielsabsatz mit einem <a href="http://www.fask.uni-mainz.de/ wohin.html">Verweis</a>auf die Seite wohin.html
Überschrift

Das ist ein Beispielsabsatz mit einem Verweis auf die Seite wohin.html

Dazu gilt:

2 HTML im Überblick - Ein Tutorial

Im folgenden soll nun der (derzeitige) Befehlsumfang von HTML dargestellt werden. Dabei wird jeweils sowohl auf die (nach SGML) korrekte Form, als auch die von vielen Browsern (z.B. Netscape) zugelassenen Vereinfachung bzw. tolerierten Abweichungen hingewiesen. Außerdem sind einige Erweiterungen des bei uns benutzten Browsers Netscape aufgeführt, die aber teilweise bei anderen Programmen zu Darstellungsproblemen führen können!

Alle Textdokumente bestehen aus dem Head, der allgemeine Meta-Information zum Dokument enthält und dem Body mit dem eigentlichen Dokumentinhalt. Andere Dokumenttypen (z.B. Gopher, WAIS, News mit etwas anders strukturiertem Textinhalt oder die Grafikformate GIF und JPEG) werden beim Einlesen entsprechend interpretiert und umgesetzt. Eine Besonderheit sind die mit Netscape über die Funktion Bookmark gesammelten Lesezeichen, die in eine eigene Datei exportiert werden können und so einen eigenen HTML-Dateityp mit speziellen Markierungen bilden.

2.1 Head

Der Head enthät als Kopfteil des Dokumentes alle übergreifenden Angaben und steuert ggf. auch die gesamte Wiedergabe des Textes.

Die wichtigsten Elemente:

Weitere Elemente, die wegen ihrer sehr allgemeinen Bedeutung sowohl im HEAD als auch BODY erscheinen können:

Tip: Der gesamte Head kann weitgehend unverändert aus der Dokumentvorlage www-fask.dot (für Word und Konvertierung) bzw. dem Referenzdokument www-fask.html (für eine direkte Bearbeitung mit Editoren) übernommen werden (Großschreibung und 8.3-Namenskonvention wegen DOS-Kompatibilität!)

2.2 allgemeine Textdarstellung

Besonders wichtig sind die Absatzelemente:

2.3 Hypertextfunktionen (Verweise)

Grundlegendes Element ist

Bei den Adressen spielt aufgrund der Eigenschaften des UNIX-Betriebssystemes die Groß-/ Kleinschreibung eine unterscheidende Rolle: Welcome.html ist nicht gleich welcome.html.

2.4 logische Auszeichnungen von Zeichen und Absätzen

Am interessantesten für sprach- und kulturwissenschaftliche Texte dürften folgende Markierungen sein (zur tatsächlichen Formatierung z.B. in Netscape, vgl. die Kommentare im Referenzteil):

Weitere Auszeichnungen sind eher naturwissenschaftlich-technischer Art und hier daher oft mit abweichenden Bedeutungen belegt (vgl. für den Server des FASK):

2.5 physikalische Auszeichnungen

Nach einer strengen Auffassung des SGML-Standards dürften diese Auszeichnungsformate gar nicht vorkommen, sind aber aus praktischen Gründen implementiert worden. Sie sind trotzdem nach Möglichkeit zu vermeiden.

Netscape bietet hierzu außerdem folgende Erweiterungen

2.6 Listen und Aufzählungen

Zusätzlich zu den Überschriften gibt es noch drei verschiedene Arten von Listen und Aufzählungen (früher 5, aber MENU und DIR sind inzwischen entfallen):

Beide Listentypen sind sowohl innerhalb des gleichen Types als auch mit dem anderen auf jeweils drei Ebenen schachtelbar. Dabei darf keine Ebene übesprungen werden. Die beiden Unterebenen werden durchnumeriert:
Beispiel: <OL><LI>{Text}<UL1>{Text} .... </UL1></OL>

Eine ähnliche Struktur haben die glossarähnlichen Definitionslisten, die aber nicht schachtelbar sind:

Beispiel: <DL><DT>{Definitionseintrag, z.B. Term}</DT>
<DD>{Definitionstext, z.B. Erläuterung}</DD></DL>

2.7 Inline-Grafiken und interaktive Karten

Literatur:

Grafiken und Bilder können sowohl in einem eigenen Fenster (mit dem Hypertext-Verweis <A HREF="{name}.{gif|jpeg}">) als auch zusammen mit Text als sog. inline-Grafik dargestellt werden. Dazu gelten folgende Auszeichnungsvorschriften:

Tip: Aus Gründen der Netzwerkökonomie ist es empfehlenswert, größere Grafiken im Text nur als kleines Ikon darzustellen, und mit der vollen Größe als Verweis zu verbinden (siehe oben)

Netscape bietet hier als zusätzliche Funktionalität die Möglichkeit, sowohl die Größe als auch die Ausrichtung der Grafik anzugeben, wobei die einzelnen Erweiterungen bedeuten:

Grafiken können aber nicht nur zur Präsentation von Information verwendet werden, sondern als sensitive, d.h. "anklickbare" Karten auch zur Markierung von Bildteilen als Verweise eingesetzt werden.
Mit dem Attribut ISMAP im Befehle <img src> wird ein Bild als sensitive Karte kennzeichnet und beim Anklicken werden die jeweiligenMauskoordinaten an das Programm htimage auf dem WWW-Server weitergeleitet und ausgewertet. Abhängig von den für dieses Bild gespeicherten sensitiven Bereichen - geometrische Figuren wie Rechtecke oder Kreise - wird dann der Verweis zu dem Bereich aktiviert, in dem der Mausklick erfolgte.

Da diese Methode aber die relativ komplizierte Installation von Zusatzprogrammen auf dem Server erfordert, hat Netscape eine "lokale" Variante eingeführt, die ohne serverseitige Programminstallationen auskommt:
Das Attribut USEMAP erfüllt die gleiche Aufgabe wie ISMAP, erlaubt aber eine Definition der Karte im gleichen (oder einem anderen) HTML-Dokument. Diese Definition der sensitive Bereiche erfolgt mit dem neu eingeführten Tags:

<MAP NAME="{name}">
<AREA [SHAPE="rect|circle|poly|default"] COORDS=#,#,#[,#] [HREF=URL] [NOHREF]>
</MAP>

Falls keine Form (SHAPE) vorgegeben ist, wird ein Rechteck erzeugt. Der Parameter COORDS bestimmt die Ausmaße der Figur in Pixel[2] und in der Reihenfolge:

2.8 Tabellen

Mit Tabellen können Texte und Grafiken in einem HTML-Dokument übersichtlich angeordnet werden. Mit den folgenden Befehlen lassen sich als Tabellen erkennbare oder lediglich layouttechnisch besonders angeordnete Dokumentteile (z.B. als rechtsbündiger Text) erstellen.

Die wichtigsten Befehle hierzu sind:

2.9 Formularelemente

Formulare (neu mit HTML 2.0 eingeführt) ermöglichen die Rückmeldung von Information durch den Benutzer und erweitern dadurch wesentlich die Interaktionsmöglichkeiten.

Beispiele für Anwendungen sind:

Allerdings ist die Weiterverarbeitung dieser Rückmeldungen recht komplex, da dazu im allgemeinen in einer Programmiersprache geschriebene Routinen erforderlich sind, mit denen der Server über das sog. CGI (= Common Gateway Interface) kommuniziert.

Dennoch sollen hier der Vollständigkeit halber die Elemente aufgeführt werden.

HTML zum Nachschlagen

a) Befehle

b) Sonderzeichen


[1]: Dieses Dokument ist auch in anderen Dateiformaten verfügbar.

[2] : Die Pixel-Koordinaten werden z.B. in professionellen Grafikprogramen (z.B. Photshop) angezeigt, können aber auch durch eine Nachbearbeitung der Grafik z.B. in WebMap (Macintosh) durch direkte Manipulation ermittelt und abgespeichert werden. Für die Konvertierung der Daten in das USEMAP-Format steht ein Makro zur Verfügung.


Zur Hauptseite der UniMainzZur Hauptseite des Fachbereiches Zur Hauptseite derComputeranlagen Zur Hauptseite der VorlesungTelekommunikation Zur Inhalts¨bersicht

Die URL-Adresse dieser Seite ist: http://www.fask.uni-mainz.de/cafl/kurse/komm/komm-24.html

Letzte Bearbeitung: 8. Februar 1997

Erstellt von F. Krüger (e-mail: krueger@nfask2.fask.uni-mainz.de) im Rahmen der Vorlesung Telekommunikation.