>

Gliederung

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

• Impressum

siehe auch:

• Unterlagen zum Kursus "Desktop Publishing"
  
• andere Teile der Vorlesung Telekommunikaton, insbesondere
• Anhang C0: HTML zum Nachschlagen
• Befehle (Darstellung ohne Tabellen)
• Darstellung von Sonderzeichen
• Anhang C1: Konvertierprogramm RTFtoHTML 3.0 (vgl. auch offizielle Doku)
  (auch offizielle Dokumentation)
• Anhang C2:
  Editorfunktionen von Netscape Navigator 3.0 Gold ( Macintosh bzw. Windows; vgl. auch offizielle Dokumentation)
• Anhang C3 (In Vorbereitung):
  Editorfunktionen der Microsoft Internet-Assistenten für Word, Excel und PowerPoint

1 Was ist HTML?

1.1 spezielle Literatur:

• Rieger, (1994): SGML für die Praxis, Kap. 12.2, S. 254-295
• iX-Artikelserieseit 1994 (siehe entsprechende Abschnitte)

1.2 elektronische Anleitungen:

• NCSA Primer (Beginner's Guide to HTML)
• HTML: Specification of the Document Type Definition (lokale Kopie)

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:

Dazu gilt:

• In der Regel bestehen die Markierungen aus einem Anfang- (<h1>) und Ende-Tag (</h1>), wobei Groß-/Kleinschreibung hier (ausnahmsweise) keine Rolle spielt
• Sonderzeichen (hier das Ü) werden durch sog. Escape-Sequenzen (&+Grundzeichen+Art+;) umschrieben, weitere Zeichen vgl. die Liste der sog. Entitäten, etwa für westeuropäische Sprachen ( ISO 8859-1)
• Grundsätzlich muß jeder Absatz mit einem Tag für Paragraph (<p>) oder Zeilenumbruch ( <br>) begonnen werden..
• Zu dem Hypertext-Verweis (sog. Anker) siehe Hypertextfunktionen

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.

• Darstellungskonventionen
• GROß = in Kapitälchen genauer Wortlaut eines Befehls bzw. dessen Attribute. Die Groß-/Kleinschreibung ist jedoch für die Interpretation der Anweisungen egal, ganz im Gegensatz zu
• {Text} = in Groß-/Kleinschreibung einsetzbarer Text, in vielen Fällen ist hier die Schreibweise bedeutungstragend! Umlaute bitte vermeiden
• #= einsetzbarer Zahlenwert
• [] = optionale Bestandteile
• | = trennt Alternativen, die sich in der Regel gegenseitig ausschließen
• Ende-Tags der Form </TAG> sind immer dann zwingend notwendig, wenn sie bei dem entsprechenden Element mit aufgeführt werden.

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:

• <TITLE>{Titel des Dokumentes}</TITLE> erscheint als Fenstername unter der Menüzeile
  Im Unterschied zur obersten Überschriftenebene (h1) sollte der Titel etwas allgemeiner gehalten sein und bei einem längeren Text sowohl Haupt- als auch Kapitelüberschrift enthalten. Andererseits wird er beim Abspeichern einer Seite etwa in Netscape als Dateiname vorgeschlagen und sollte deshalb für DOS-/Windows-Benutzer nicht länger als 8 Zeichen sein.
• <META> ist besonders wichtig geworden, seitdem zahlreiche automatische Suchsysteme (sog. Roboter) die hier enthaltenen Parameter für ihre Indexierung auswerten. Denn mit META HTTP EQUIV="Keywords" CONTENT="{text text text} können z.B. Stichwörter für diese Indexierung vorgegeben werden.
• <BASE HREF="{url}"> erzeugt einen feste Referenzadresse für das aktuelle Dokument
  Hier bitte nicht verwenden, da Dokumente in Mainz gespiegelt (d.h. dorthin kopiert und von dort nach außen angeboten ) werden.

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

• <ISINDEX [PROMPT="{erlaeuterung}"]> erzeugt ein Eingabefeld für eine Stichwortsuche in dem aktuellen Dokument. Das Attribut PROMPT ist ein Erweiterung von Netscape und wird von anderen Browsern ignoriert.
• <LINK REV="made" HREF=MAILTO:{name@adresse}> ist die beste Art, ein Dokument zu signieren, da die Urheberschaft mit der E-mail-Adresse gekennzeichnet wird und so Rückmeldungen direkt per e-mail geschickt werden können.
• <!--z.B. Datum und Version--> Kennzeichnung von Kommentaren, kann auch verwendet werden, um Markup zeit- bzw. probeweise auszublenden.

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:

• <P> und <BR> wie oben im Beispiel erwähnt. Der Unterschied liegt bei der Darstellung von geringerem Textabstand mit <BR>. Beide können auch verschiedene Parameter enthalten,
  z.B. <P ALIGN={CENTER}> für zentrierten Text und bei Netscape <BR CLEAR={LEFT|RIGHT} um den Text unterhalb einer Grafik fortzusetzen.
• <H1>, <H2> bis <H6>Text</H#> markieren die sechs Überschriftenebenen, wobei die Hierarchie streng eingehalten werden sollte, also keine Ebene übersprungen werden darf.
• <HR> fügt einen horizontalen Strich (horizontal ruler) ein, wobei Netscape einige zusätzliche Parameter erlaubt (vgl. Referenzteil).

2.3 Hypertextfunktionen (Verweise)

Grundlegendes Element ist

• <A HREF="{url}">{verweistext}</A> als ein Verweisanker. Der Verweistext erscheint farbig und unterstrichen (wie im obigen Beispiel). URL (Uniform Resource Locator) ist die absolute oder relative Adresse von dem Dokument auf das verwiesen wird (vgl. Kapitel I.4. Adressen und MIME-Dateitypen).

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

• <A NAME="{fragment}"> definiert den Namen eines Dokumentteiles, wie er in der URL als #Fragment angesprochen werden kann. Dies ist v.a. zur Gliederung von längeren Dokumenten sinnvoll, und um von einer Übersicht am Dokumentanfang direkt zu den einzelnen Abschnitten zu gelangen.

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):

• <CITE>{Zitat}</CITE> und <BLOCKQUOTE>{eingerückter Absatz, z.B. Zitat} </BLOCKQUOTE> für zitierte Teilsätze bzw. ganze Absätze
• <DFN>{Definition}</DFN> für Definitionen, die dann automatisch in ein Glossar übernommen werden können und dort als <DD>, Definitionstext erscheinen
• <EM>{Emphasis}</EM> und <STRONG>{starke Hervorhebung} </STRONG>
• <SAMP>{Beispielstext}</SAMP>, um ein Beispiel herauszuheben
• <ADDRESS>{vollständige postalische und elektronische Kontaktadresse}</ADDRESS>, wie sie auch bei Aufsätzen angegeben wird

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

• <CODE>{Programmcode}</CODE>
• <KBD>{Tastatureingabe des Benutzers}</KBD>
• <VAR>{Variablen oder Parameter z.B. in Formeln oder Algorithmen}</VAR>

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.

• <TT>{Schreibmaschinenschrift (Teletype) mit festen Abständen}</TT> für einzelne Zeichen und <PRE>{Fest formatierte Absätze (Preformatted text)}</PRE> z.B. für Tabellen.
  In der nächsten Version von HTML (3.2) sollen dazu entsprechende logische Tabellen-Tags eingeführt werden.
• <B>{Fett (Bold)}</B>, <I>{Kursiv (Italic)}</I>
• <SUP>Hochgestellt (superior)}</SUP>, etwa Fußnotenzeichen

Netscape bietet hierzu außerdem folgende Erweiterungen

• <BASEFONT SIZE = #>, wobei # auf 3 voreingestellt ist und die Werte 1-7 annehmen kann. Davon ausgehend kann die Schriftgröße verändert werden:
• <FONT SIZE=#></font> und zwar relativ (+3,-2) oder absolut (bei einem BASEFONT=3 ergeben die Beispiele die Schriftgröße 6 bzw. 1)

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):

• <OL><LI>{Text1}<LI>{Text2}></OL> erzeugt eine numerierte Liste (Ordered List), wobei <LI> (vor jedem neuen Eintrag!) einen Zeilenumbruch schon beinhaltet!.
• <UL><LI>{Text1}<LI>{Text2}></UL> erzeugt analog zu oben eine Liste mit Aufzählungszeichen.

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:

• <DL> leitet die Definitionsliste ein bzw. schließt sie ab ></DL>
• <DD>{Definitonstext} entspricht dem <LI> der anderen Listenformate. Beide Teile könnenaus mehreren Absätzen bestehen.

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

2.7 Inline-Grafiken und interaktive Karten

Literatur:

• Klute, R.: Sensitive Bilder, iX 10/1994, S. 190-192

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:

• <IMG SRC="{name}.{gif|jpg} alt = "{Text}"> bezeichnet eine Grafik NAME, die im aktuellen Text dargestellt wird. Kann keine Grafik dargestellt werden, wird alternativ der TEXT angezeigt.
  Zugelassene Grafikformate sind GIF (v.a. für Zeichnungen geeignet) und JPG (für Fotos).

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:

• ALIGN läßt eine genaue Bestimmung zu, wie sich die Grafik zu dem Text und anderen Objekten verhalten soll:
• WIDTH=# HEIGHT=# beschleunigen das Laden der Bilder, da der Browser die Größe nicht selbst berechnen muß
• VSPACE=# HSPACE=# kontrollieren den Abstand des Bildes nach oben und unten bzw. links und rechts (v.a. für schwimmende Bilder)

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:

• links,oben,rechts,unten bei Rechtecken
• x (horizontal), y (vertika)l (=Mittelpunkt),Radius bei Kreisen
• x,y x,y [x,y]... bei Vielecken (Polygonen)
• ohne Angabe von Koordinaten bei Default, dem Standardverweis für alle Bereiche eines Bildes, für das keine anderen Zieladressen definiert sind.

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:

• <TABLE></TABLE> definiert eine Tabelle, wobei verschiedene Parameter gesetzt werden können:
• <TABLE BORDER=#> erzeugt einen Rand um die Tabellen und alle sog. Zellen (Kreuzpunkte von Spalten und Zeilen)
• <TABLE WIDTH=#|%> legt die Breite der Tabelle in absoluten Pixeln oder als Prozentsatz der Fensterbreite fest.
• weitere Optionen sind CELLSPACING=# und CELLPADDING=#
• Hauptestandteile der Tabelle sind die Zeilen (<TR></TR>), die jeweils wiederum aus mehreren "Daten-"Zellen <TD></TD> ) bzw. Beschriftunen (<TH></TH>, fett und zentriert dargestellt) bestehen.
• Die jeweiligen Optionen für diese Elemente sind:
• <TR|TH|TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> für die horizontale und vertikale Ausrichtung des Text bzw. Objekte innerhalb der Zeilen und Zellen.
• Für Tabellenbeschriftungen und -daten lassen sich zusätzlich als Formatierungseigenschaften angeben:
• <TH|TD WIDTH=?|% COLSPAN=? ROWSPAN=? NOWRAP>, d.h. die absolute bzw. relative Breite und ob sich eine Zelle über mehrere Spalten bzw. Zeilen erstrecken soll.
• Außerdem kann eine Gesamtüberschrift für die Tabelle definiert werden:
• <CAPTION ALIGN=TOP|BOTTOM></CAPTION>

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:

• Rückmeldung für weitere Informationen oder Kommentare an den Anbieter einer Seite
• Auswahl und Eingabe von Kriterien für die Suche in einer Datenbank

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.

• <FORM [METHOD=GET|PUT]>{Formularinhalt inkl. weiterer Elemente}</FORM> definiert ein Formular, wobei GET und PUT zwei unterschiedliche Zugriffsmethoden sind. Als Inhalt sind alle anderen Tags erlaubt plus
• <INPUT NAME="{text}"> mit folgenden Attributen und Parameterwerten (Achtung: Kleinschreibung beachten!):
• TYPE ="text|password}" MAXLENGTH=# SIZE=# definieren Textfeld mit einer maximalen Länge MAXLENGTH und der angezeigten Größe SIZE (ist SIZE kleiner, kann das Feld gescrollt werden)
• TYPE="checkbox|radio" CHECKED unterscheiden dadurch, daß bei CHECKBOX mehrere Werte ausgewählt werden können und bei RADIO immer nur einer.
• TYPE="image" SRC="{name}" ALIGN="top|bottom|middle" stellt ein sensitives Bild (s.o. unter f) dar, wobei es aber nicht so einfach zu handhaben ist wie der ISMAP-Parameter
• TYPE="hidden" zeigt kein Feld an und dient zur Speicherung von Werten vorheriger Übertragungen zum Server
• TYPE="reset|submit" sind zwei Standardtasten, wobei RESET alle Werte auf die Voreinstellungen zurücksetzt und SUBMIT zur Übertragung des Formularinhaltes an den Server angeklickt wird
• VALUE="{text}" gibt bei Textfeldern den Initialwert des Feldes an und bei Checkboxen bzw. Radio button den zurückgemeldeten Attributwert (wird nicht angezeigt, oft identisch mit Namen).
• <TEXTAREA NAME="{text}" ROWS=# Cols=#>{{Inhalt}} </TEXTAREA> erzeugt mehrzeilige Eingabefelder mit INHALT als Ausgangstext
• <SELECT NAME="{name}" SIZE=# [MULTIPLE] ...</SELECT> läßt eine kompaktere Darstellung von Checkboxen oder Buttons zu, als es bei INPUT der Fall wäre. SIZE gibt an, wieviel Elemente in dem aufklappbaren Menü sichtbar sein sollen und MULTIPLE, ob mehrere Werte ausgewählt werden können. Diese Werte werden innerhalb der SELECT-Markierung spezifiziert mit
• <OPTION [SELECTED] VALUE="{wert}">{Beschreibung}, wobei SELECTED den Eintrag als ausgewählt angibt, VALUE den zu übergebenden Wert bei einer Auswahl und Beschreibung unabhängig davon ein erläuternder Text.

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.

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