[Previous] [Next] [Up] [Contents] [Index] [Feedback]

Copyright © 1995, 1996 by Axel T. Schreiner.  All Rights Reserved.

7
HTML

HTML   Mit der Hypertext-Markup-Language wird ein Text zur Darstellung in einem Browser (HTTP-Klienten) strukturiert.
HTTP   Mit dem Hypertext-Transfer-Protokoll werden Multimedia-Dokumente übertragen, die Verweise auf eine Vielzahl anderer Internet-Ressourcen enthalten können.
URL   Ein Universal-Resource-Locator beschreibt, wie eine Internet-Ressource zu erreichen ist. URLs dienen als Verweise in den Multimedia-Dokumenten.

HTML dient zur typographischen Auszeichnung von Text. HTML hat ein sehr primitives Layout-Modell, das erst durch Tabellen akzeptabel wird. Grafiken werden separat importiert; als Formate werden GIF für Linienzeichnungen und JPEG für Halbtöne bevorzugen.

Es gibt lokale Verweise (Fragmente) und Verweise auf andere Dokumente.

Es gibt Formulare für Text- und Maus-Interaktion.

HTML kennt keine Paginierung, insbesondere auch nicht im Druck. Benötigt man gedruckte und für das Web aufbereitete Information, muß man einigen Aufwand treiben.

HTML Beispiel

HTML ist eine Sprache definiert mit der Standard Generalized Markup Language (SGML). Die Auszeichnung erfolgt mit Tags, die einen Namen und Attribute enthalten können. Groß- und Kleinschreibung ist dabei äquivalent, Zwischenraum in Tags wird ignoriert, Attributwerte müssen in " ... " oder ' ... ' eingeschlossen sein oder nur aus Buchstaben, Ziffern, Punkten und Minuszeichen bestehen; hier ist Groß- und Kleinschreibung relevant.

<IMG src = "netz adresse" ALT=Text>
<!-- das ist ein Kommentar -->

HTML dient zur Definition von strukturierten Dokumenten, das heißt, zu sehr vielen Tags <name> gibt es End-Tags </name>; die dadurch entstehenden Elemente können nur ganz begrenzt verschachtelt werden, insbesondere gibt es keine Rekursion. Das folgende Beispiel demonstriert die typische Struktur einer HTML-Quelle und die Effekte vieler Tags:
   {Html/edit.html}
   <HTML>   Instanz
   <HEAD>   Information über das Dokument
   <TITLE>Fenster-Titel</TITLE>
   </HEAD>
   <BODY>   Inhalt des Dokuments
   <H1>Haupt&uuml;berschrift</H1>   Überschriften
   <H2>&Uuml;berschrift</H2>
   <P>neuer Absatz   Absätze
   <BR>neue Zeile
   <HR>   horizontale Linie
   <EM>betont</EM>   logische Auszeichnungen
   <STRONG>richtig wichtig</STRONG>
   <B>fett</B>   physikalische Auszeichnungen
   <I>kursiv</I>
   <U>unterstrichen</U>
   <ADDRESS>Adresse</ADDRESS>   stilistische Varianten
   <PRE>vorformatierter Text</PRE>
   <DL>   Listen: Definitionen
   <DT>Begriff
   <DD>Erkl&auml;rung
   </DL>
   <UL>   ungeordnete Liste
   <LI>Eintrag
   </UL>
   <OL>   geordnete Liste
   <LI>Eintrag
   </OL>
   </BODY>
   </HTML>
   {}
Leerzeichen sind signifikant, Tabs sind nicht definiert. Zeilentrenner unmittelbar am Anfang und Ende eines Element-Inhalts sowie Kommentarzeilen werden ignoriert. Andere Zeilentrenner (außerhalb von pre) sind Leerzeichen.

HTML Definition

Die folgende Beschreibung beruht auf einem RFC-Entwurf vom Juni 1995. Inzwischen gibt es Erweiterungen für Tabellen. HTML is eine kuriose Mixtur aus starrem Formalismus und teilweise reichlich improvisiert anmutenden Details. Primäres Ziel ist natürlich, Form und Inhalt zu trennen und die Form nur annähernd im Dokument zu spezifizieren.

   <html ...> ... </html>   begrenzt Dokument-Instanz,
      enthält nacheinander je ein head und body
       charset="typ"   Zeichensatz
       version="version"   Angabe zur Grammatik
   <head> ... </head>   begrenzt Information über Dokument, enthält nur Folgende
   <base ...>   Klient speichert damit die Adresse des Dokuments,
       href="url"   Adressen im Dokument sind dazu relativ
   <isindex>   Server markiert Dokument als durchsuchbar,
      Klient erlaubt Eingabe von Suchbegriff
   <link ...>   erklärt Zusammenhang zu anderen Dokumenten,
      soll (theoretisch) Dokumente verketten
      hat gleiche Attribute wie a
   <meta ...>   Angaben für HTTP, Server-spezifisch
   <title> ... </title>   begrenzt den Titel des Dokuments,
      Klient markiert damit Fenster, Bookmark, etc.
   <body> ... </body>   begrenzt Inhalt des Dokuments, enthält alle Folgenden
   <a ...> ... </a>   Hypertext-Information
       href="url#name"   Verweis auf anderes Objekt
       href="#name"   Verweis im gleichen Objekt
       methods="get, ..."   Methoden, um den Verweis zu holen
       name="id"   Ziel eines Verweises (Anker)
       rel="x,..."   Zusammenhang des Verweises zum Dokument
       rev="x,..."   Zusammenhang des Dokuments zum Verweis
       title="text"   Titel des Verweis-Dokuments

   <address> ... </address>   begrenzt eine Adreßangabe, kann a, p enthalten

<blockquote> ... </blockquote>
begrenzt ein Zitat, kann a, p enthalten

   <br>   Zeilenende, nicht in pre
       clear=left   ..bis links kein Bild mehr ist (ebenso right, all)
   <dir> ... </dir>   Liste mit kurzen Einträgen, in Spalten
   <dl ...> ... </dl>   Liste mit Definitionen, enthält paarweise dt und dd
       compact   entweder kleine Einträge oder sehr viele
   <menu> ... </menu>   kompakte Liste mit kurzen Einträgen
   <ol> ... </ol>   numerierte Liste, enthält li
   <ul> ... </ul>   unnumerierte Liste, enthält li
      Listen können geschachtelt werden
   <dt>   Begriff, der definiert werden soll
   <dd>   Definition für den Begriff
   <li>   Eintrag in den anderen Listen
   <h1> ... </h1>   begrenzen Überschriften mit zunehmendem Detail,
   ...   können Schriftwechsel enthalten (unlogisch)
   <h6> ... </h6>
   <hr>   horizontale Linie
   <img ...>   Grafik
       src="url#name"   Verweis
       align="top"   Ausrichtung zu Text (top, middle, bottom)
       align=left   ...Text fließt vorbei (left, right)
       alt="text"   Ersatztext
       height=pixel   Skalierung (height, width, hspace, vspace)
       ismap   wird per Maus angesprochen
   <p>   Absatz, nicht nötig vor oder nach Überschriften etc.
      (es soll später einen End-Tag geben)
   <pre ...> ... </pre>   vorformatierter Text in dicktengleicher Schrift
      kann unter anderem a, p, Schriftwechsel enthalten
       width=number   maximale Breite, kann Schrift und Rand festlegen

HTML Schriftwechsel

Hier sollte wenn irgend möglich nur die logische Variante benutzt werden. Klienten sind nicht verpflichtet, dies alles wirklich zu unterscheiden. www, der ursprüngliche Linemode-Browser kennt keinerlei Auszeichnung.

Schriftwechsel können geschachtelt werden (unlogisch) und img und br aber zum Beispiel nicht p oder Listen enthalten. Die Namen stammen angeblich von texinfo.

   <cite> ... </cite>   Zitat
   <code> ... </code>   Programmquelle
   <em> ... </em>   Betonung
   <kbd> ... </kbd>   Benutzereingabe
   <samp> ... </samp>   wörtliches Beispiel
   <strong> ... </strong>   starke Betonung
   <var> ... </var>   Variablenname
   <b> ... </b>   fett
   <i> ... </i>   kursiv
   <tt> ... </tt>   Schreibmaschine

HTML Schriftzeichen

HTML soll in ASCII aufgeschrieben werden. Deshalb gibt es eine Reihe von sehr wichtigen Ersatzdarstellungen, die alle mit & beginnen und mit ; aufhören.

   &amp;   &
   &gt;   >
   &lt;   <
   &quot;   " (Doppelanführungszeichen)
  
   &aelig;   æ (aber oe gibt es nicht)
   &Aelig;   Æ (aber OE gibt es nicht)
   &szlig;   ß
  
   &auml;   ä und analog alle anderen großen und kleinen Umlaute.
   &#nnn;   Position im Zeichensatz.

Analog zu uml gibt es die Auszeichnungen acute, circ, grave, ring, tilde und cedil, die jedoch nur auf die üblichen Zeichen angewendet werden dürfen. sowie die isländischen großen und kleinen Zeichen eth und thorn. Unlogisch ist natürlich, daß zwar einfache oder doppelte Anführungszeichen für Werte in Tags verwendet werden, daß es aber nur eine Ersatzdarstellung für Doppelanführungszeichen gibt.

Es wird sehr viele mathematische Zeichen geben.

HTML Forms

Mit diesen Elementen können Dialoge aufgebaut werden, die dann im Server mit dem Common Gateway Interface (CGI) bearbeitet werden. Die Dokumentation ist bisher recht unklar ­ wahrscheinlich kann form nicht beliebig geschachtelt werden. Die Angaben hier stützen sich auf einen Artikel von Klute (iX 10/94, p.187ff) und den RFC-Entwurf vom Juni 1995, die aber nicht ganz zusammenpassen.

   <form ...> ... </form>   Formular für Dialog, enthält die Folgenden
       action="url"   Adresse für Bearbeitung
       method="GET"   Übergabe, besser ist POST
   <input type="checkbox" ...>   ein Schalter
       name="id"   zur Übergabe, auch mehrmals gleich
       checked   a priori eingeschaltet
       value="text"   zur Übergabe
   <input type="hidden" ...>   verborgene Status-Information
       name="id"   zur Übergabe
       value="text"   zur Übergabe
   <input type="image" ...>   Bild für Maus-Clicks
       name="id"   zur Übergabe
       align="top"   Position: top, middle, bottom
       src="url"   Image
   <input type="password" ...>   eine Textzeile ohne Echo
       name="id"   zur Übergabe
       size="laenge"   sichtbar
       maxlength="laenge"   maximal, auch unsichtbar
       value="text"   Vorbelegung, zur Übergabe
   <input type="radio" ...>   eine Schaltergruppe mit exklusiver Wahl
       name="id"   zur Übergabe, mehrmals gleich
       checked   a priori eingeschaltet
       value="text"   zur Übergabe

   <input type="reset" ...>   Knopf, reinitialisiert Dialog
       value="text"   Beschriftung
   <input type="submit" ...>   Knopf, beendet Dialog und transferiert
       value="text"   Beschriftung
   <input type="text" ...>   eine Textzeile
       name="id"   zur Übergabe
       size="laenge"   sichtbar
       maxlength="laenge"   maximal, auch unsichtbar
       value="text"   Vorbelegung, zur Übergabe
   <option ...> ...   ein Eintrag für select
       selected   vorgewählt
       value="text"   zur Übergabe; gezeigt wird der freie Text
   <select ...> ... </select>   Auswahl durch Popup-Menü, enthält option
       name="id"   zur Übergabe
       size="laenge"   sichtbare Zeilen
       multiple   mehrere wählbar
   <textarea ...> ... </textarea>   mehrzeiliger Text, enthält Anfangswert
       name="id"   zur Übergabe
       rows="anzahl"   Anzahl sichtbare Zeilen
       cols="anzahl"   Anzahl sichtbare Spalten

HTML Tabellen

Tabellen haben den entscheidenden Nachteil, daß sie erst ganz übertragen werden müssen, bevor sie dargestellt werden können. Auch dieser Bereich ist in der Literatur nur ungefähr definiert.

   <table ...> ... </table>   Tabelle, enthält Rest
       align=left   ...Text fließt (left, right)
       cols=n   gleich breit (vereinfacht Darstellung)
       frame=box   ? Rahmen
       rules=all   ? Linien um Zellen
       width="x%"   Breite, auch mit Maßeinheiten
       
   <caption ...>   ? Überschrift
       align=center   Position (left, right, top, bottom)
   <tr ...>   Zeile, enthält Zellen für Spalten, kann vererben
   <th ...>   Titelzelle
       align=center   Ausrichtung in Zelle (left, right, justify, char)
       char="x"   Ausrichtung innerhalb Zelle
       colspan=c   spaltenübergreifend
       rowspan=r   zeilenübergreifend
       valign=middle   vertikale Ausrichtung (top, bottom, baseline)
   <td ...>   Datenzelle
       align=left   Ausrichtung in Zelle (center, right, justify, char)
       char="x"   Ausrichtung innerhalb Zelle
       colspan=c   spaltenübergreifend
       rowspan=r   zeilenübergreifend
       valign=middle   vertikale Ausrichtung (top, bottom, baseline)

URL

Es gibt absolute * und relative * Universal Resource Locators (URL). Man will auch Universal Resource Numbers (URN) einführen, die Dokumente eindeutig bezeichnen, hat aber noch keine Definitionen dafür *. Die nachfolgende Beschreibung beruht auf einem HTML-Dokument [Berners-Lee, Februar 1995]. Leider ist dieses Dokument äußerst rudimentär.

Ein URL kann keinen Zwischenraum enthalten. Sonderzeichen werden als %xx in hexadezimaler Notation dargestellt, dabei spielt sogar %00 eine wesentliche Rolle!

Der URL beginnt mit einem Protokoll, von dem der restliche Inhalt abhängt. Die Darstellung im Folgenden enthält Zwischenraum nur zur Trennung von Begriffen.

http: // host [ : port ] [ / path ] [ ? search ] [ # fragment ]

   host   ein DNS-Name oder eine IP-Adresse, groß oder klein
   port   eine dezimale Port-Nummer
   / path   der Selektor für den Server, eigentlich opak für den Klienten
   ? search   eine Query für das CGI-Interface
   # fragment   eine Position, die aber nur der Klient auswertet

ftp: // [ user [ : password ] @ ] host [ : port ] / path [ ;type= typ ]

   user   Benutzername, falls nicht anonymous
   password   Paßwort
   path   resultiert in eine Folge von CWD-Anweisungen und eine RETR-Anweisung
   path /   resultiert in eine Folge von CWD-Anweisungen und eine LIST-Anweisung
   typ   zum Beispiel an für ASCII-Transfer

mailto: receiver @ hostname

   receiver   ein Empfänger-Name
   hostname   ein DNS-Name

gopher: // host [ : port ] [ / typ selector [ %09 query [ %09 gopher+ ] ] ]

   typ   GOPHER-Typ
   selector   GOPHER-Selektor, transparent für den Klienten
   query   GOPHER-Suchargument
   gopher+   GOPHER+ Anfrage

telnet: // [ user [ : password ] @ ] host [ : port ]

Weitere Protokolle sind wais, news, nntp und prospero.

Relative URLs

Ein Dokument sollte nicht allzu groß sein, damit es in vernünftiger Zeit übertragen und dargestellt werden kann. Größere Texte sollten deshalb in mehrere Dokumente zerlegt werden, die aufeinander verweisen.

Wenn ein Dokument jedoch einen voll spezifizierten URL enthält, muß es wahrscheinlich inhaltlich verändert werden, wenn es verlagert wird.

Dies kann umgangen werden, indem ein Dokument auf ein benachbartes Dokument mit einem partiellen URL verweist.

Der Klient muß allerdings aus einem Kontext-URL und einem relativen URL einen vollständigen URL konstruieren, um den Server kontaktieren zu können. Die Regeln dazu sind sehr merkwürdig, Literaturbeispiele sind außerdem falsch.

Nach der Grammatik kann ein URL // nur unmittelbar nach dem Protokoll enthalten, obwohl es theoretisch keine Einschränkungen für einen GOPHER-Selektor geben darf.

Nur ein vollständiger URL enthält einen Doppelpunkt vor anderen reservierten Zeichen.

Ein relativer URL übernimmt das Protokoll vom absoluten URL ­ es kann nicht angegeben werden!

Beginnt der relative URL mit //, wird nur das Protokoll übernommen.

Beginnt der relative URL mit /, wird alles bis zum ersten einfachen / übernommen.

Sonst wird vom Kontext-URL alles nach dem letzten / entfernt und der relative URL angehängt. Außerdem werden dann /xxx/../ und /./ entsprechend vereinfacht.

Theoretisch ist denkbar, daß von einem gopher- oder wais-URL als Kontext ein per MIME-Typ als HTML-Dokument markiertes Objekt stammt, das einen relativen URL enthält. Wenigstens im Falle des GOPHER-Protokolls verstößt die Konstruktion dann wirklich gegen die Architektur.

Der CERN-Server sowie gn bilden Pfade zu Katalogen auf verborgene Dokumente beziehungsweise Menüs ab. Derartige Pfade können ­ müssen aber bei gn nicht ­ mit / enden. Ein relativer URL wird jeweils anders interpretiert ­ deshalb schickt der CERN-Server für eine Katalog-Anfrage ohne abschließenden / eine Umadressierung mit /.

Editoren

Es gibt eine Reihe von Ansätzen zum Erzeugen, Editieren und Prüfen von HTML:

Übersetzer, zum Beispiel LaTeX zu HTML.
Textsystem-Erweiterungen, zum Beispiel für FrameMaker, Word oder OpenWrite.
Primitive Editierhilfen, zum Beispiel WebWriter.
Spezielle Editoren, zum Beispiel asWedit und hotmetal.
Prüfer und Übersetzer wie gf und htmlcheck.

Einige Klienten (tkWWW, SpiderWoman, Netscape Gold und MicroSoft Internet Explorer mit ControlPad) können zugleich editieren ­ in jedem Fall ist die grafische Bearbeitung von Links, die Formatierung von Grafik und die Aufteilung in kleine Dokumente problematisch. OmniWeb exportiert Links per Icon-Dragging.

hotmetal ­ Windows und SPARC

hotmetal (v2.0) beruht auf SGML und prüft sehr intensiv:



Hier sieht man sehr gut, daß HTML/SGML eigentlich wohl-strukturierte Information beschreibt ­ nur hält sich de facto bisher niemand daran.

HTML mit OpenWrite

OpenWrite kann ein Dokument als HTML exportieren und unterstützt manche Tags mehr oder weniger gut. Grafiken muß man nachbearbeiten.

Format/HTML/Apply Styles lädt Styles, die für Abschnitte und auch Zeichen brauchbar sind; allerdings wird die Auszeichnung von Zeichen nur exportiert, wenn Sie über die HTML-Tools erfolgt ist.

Format/HTML/Tools/HTML Tools... zeigt ein Panel, mit dem die meisten Tags auf die Selektion angewendet oder eingefügt werden können.



Format/HTML/Insert Links liefert ein Submenü, das sich besser für Links und insbesondere für lokale Verweise eignet.

Format/HTML/Insert Generic... dient zum Einfügen völlig beliebig definierter Tags.

Tags werden grafisch dargestellt und können immer inspiziert und geändert werden. OpenWrite kann zwar die Struktur verifizieren, erzeugt aber nicht unbedingt korrekte Dokumente. Insbesondere Verweise auf Grafiken sind absolut und damit problematisch.
[Previous] [Next] [Up] [Contents] [Index] [Feedback]