Wie schreibe ich ein HTML-Dokument ?

Eine Einführung in die Sprache HTML mit den wichtigsten Befehlen und Funktionen
Version 2.0@ - Dieses Dokument wird gerade aktualisiert

Inhalt:

  1. HTML - was ist das ?

    2. HTML bedeutet Hypertext Markup Language. Es handelt sich um die im WWW (World Wide Web) verwendete Hypertextsprache.

    Ein Hypertext ist im Gegensatz zum sogenannten "Plain Text", der nur den Text selbst in Computerisierter Form enthält, ein Text, der außer Formatierungen auch Querverweise innerhalb des Textes und zu anderen Textdokumenten enthält. Solche Querverweise sind Üblicherweise farblich markiert und können mit einem Mausklick ausgeführt werden. Beispiele für Hypertexte sind etwa Windows - Hilfetexte oder die im CIP-Raum verfügbaren Multimedia-Viewer-Texte.

    Das besondere an HTML-Texten ist, daß sie bei Verweisen auf andere Dokumente die Möglichkeiten des Internet nutzen. Das bedeutet: Ein Dokument, auf das verwiesen wird, kann auch auf einem anderen Rechner liegen. Dieser Rechner kann sich auf dem Campus Saarbrücken befinden und an das HORUS-Netz der Uni angeschlossen sein (hier z.B ein Rechner in der Informatik) oder an einer anderen deutschen Uni stehen, die Verbindung erfolgt über das Wissenschaftsnetz (hier etwa der WWW-Server der juristischen Fakultät der Humbuldt-Uni Berlin). Es sind jedoch auch Verbindungen ins Ausland möglich, hier zum berühmten Law-Server der Cornell Law School, USA.

    Außerdem ist es möglich, auf bestimmte Stellen in anderen Dokumenten zu verweisen, z.B. auf den Artikel 16 aus der Hypertext-Version des Grundgesetzes. Das funktioniert selbstverständlich auch bei Dokumenten auf anderen Rechnern.

    Zum Anschauen eines HTML-Dokumentes benötigt man einen sogenannten "Client", auch Browser genannt, wie die in unserem CIP-Raum verwendeten NCSA Mosaic und NetScape. Hilfen zur Arbeit mit NCSA Mosaic for Windows bekommt man hier.

    Die Sprache HTML wird ständig verbessert. Die Version HTML 2.0 wurde bereits offiziell eingeführt, an HTML 3.0 wird noch "gearbeitet". Dieses Dokument wird Sie auch in die wichtigsten HTML 2.0 - Funktionen einführen. Allerdings muß beachtet werden, daß noch nicht alle HTML 2.0 - Funktionen von allen WWW-Browsern unterstützt werden. Beachten Sie daher die Hinweise zur Kompatibilität von HTML 2.0 - Features mit den üblichen Browsern.

  2. Textformatierungen in HTML

    3. Ein HTML-Dokument wird grundsätzlich mit dem Befehl <HTML> begonnen und mit dem Befehl </HTML> abgeschlossen. Wie alle HTML-Befehle stehen auch diese in Spitzklammern. Es handelt sich um "paarige Befehle", d. h. der Befehl entfaltet Wirkung auf den Text, der zwischen Befehl (hier<HTML>) und Befehlsendemarkierung (hier </HTML>) steht. Solche "paarigen Befehle" finden sich in HTML sehr häufig. Groß- und Kleinschreibung spielt bei den Befehlen keine Rolle. Trotzdem werden in der Folge alle Befehle groß geschrieben.

    Prinzipiell besteht ein HTML-Dokument aus zwei Teilen:
    Dem "Header" und dem "Body".
    Der Header kann mit <HEADER> und </HEADER> abgegrenzt werden. Er enthält den Titel des HTML-Dokuments, wie er in der "Document Title:"-Zeile des Browsers, oft auf dem oberen Fensterbalken, erscheint.
    Die Formatierung für den Dokumenttitel lautet:
    <TITLE> Text, der in der "Document Title"-Zeile erscheinen soll</TITLE>. Der Header kann noch wesentlich mehr enthalten, wie man in     diesem Beispieldokument sehen kann.

    Auf den Header folgt der Body, der den eigentlichen HTML-Text enthält. Auch er kann mit <BODY>,</BODY> abgegrenzt werden.

    Der eigentliche HTML-Text

    Der Text kann zunächst ganz normal geschrieben werden. Zum Schreiben kann man jeden Editor oder jedes Textverarbeitungsprogramm verwenden, das in der Lage ist, Text ohne eigene Formatierung im ANSI-Format abzuspeichern (bei Word for Windows etwa: Speichern als "Text mit Umbrüchen"). Deutsche Sonderzeichen werden zwar im 8bit-ANSI unterstützt, das bedeutet jedoch nicht, daß sie auch auf 7-bit-Systemen korrekt angezeigt würden. 7bit-Darstellung ist außerhalb von graphischen Benutzeroberflächen noch sehr verbreitet. Die meisten Benutzer des Text-Basierten WWW-Browsers "Lynx" werden keine 8bit-Sonderzeichen anzeigen können. Deshalb ist es sinnvoll, eine spezielle Schreibweise zu verwenden, die hier erklärt wird. Außerdem können auch spezielle Sonderzeichen wie das Paragraphenzeichen (§) dargestellt werden. Wie, steht hier.

    Absätze werden laut HTML 2.0 - Spezifikation mit <P> begonnen und mit </P> abgeschlossen. Weit verbreitet ist jedoch noch die alte HTML 1.0 - Schreibweise, nach der einfach mit <P> ein Absatzumbruch erzeugt wird. Diese Schreibweise ist auch zu empfehlen, da sie von allen Browsern unterstützt wird und bei der Konvertierung in HTML weniger Probleme aufwirft. Man sollte dann jedoch den ersten Absatz mit einem <P> beginnen. Das wird nach jetzigem Diskussionsstand auch bei der Absatzformatierung in HTML 3.0 erlaubt sein. Dieser neue Standart erlaubt es auch, Absätze mit <P ALIGN=CENTER>...</P>

    zentriert

    oder mit <P ALIGN=RIGHT>...</P>

    rechtsbündig

    darzustellen. Auch hier kann statt des </P> auch ein <P> verwendet werden. Diese Funktion wird bereits in vollem Umfang von Mosaic (für Windows ab Version 2.0ß4) und Arena, die Zentrierung auch von NetScape unterstützt.

    Zeilenumbruchsmarken werden durch den Befehl <BR> eingefügt.
    Im Unterschied zu den Absatzmarken fügen sie nur einen Zeilenumbruch, keinen Absatz ein.

    Es gibt die Möglichkeit, bestimmte Textstellen gesondert hervorzuheben. So wird mit dem Befehl
    <B>fett zu druckender Text</B>
    Text fett gedruckt und mit dem Befehl
    <I>kursiv zu druckender Text</I>
    Text kursiv gedruckt.
    Der Befehl <CODE>...</CODE> stellt CODE-Text dar, die Darstellung erfolgt in einer Nicht-Proportionalen Schrift. Das gleiche bewirkt der Befehl <TT>...</TT>.
    Es gibt noch eine Reihe weiterer Formatierungen, die aber von den Browsern auch nur als fett, kursiv oder in Nichtproportionalschrift dargestellt werden.

    Neue Hervorhebungen nach HTML 2.0:
    Mit <U>...</U> wird Text unterstrichen (Vorsicht: Bei Schwarz-Weiß-Monitoren ist solcher Text meist nicht mehr von den Hypertextreferenzen zu unterscheiden! NetScape unterstützt diese Formatierung außerdem nicht.) und mit <STRIKE>...</STRIKE> durchgestrichen.

    Neue Hervorhebungen des Browsers NetScape:
    Der sehr beliebte Browser "Netscape" unterstützt die eigenen Funktionen <CENTER>...</CENTER>, die Text

    zentriert
    darstellt, und <BLINK>...</BLINK> , die Text aufblinken läßt. Die Zentrierung wird nur von Netscape und Mosaic (für Windows ab Version 2.0ß4), die Blink-Funktion ausschließlich von NetScape unterstützt. Ihre Verwendung ist nicht unbedingt zu empfehlen, da sie nicht der HTML-Spezifikation entsprechen. Keiner kann sagen, ob Netscape mit seinem Konzept einer eigenen HTML-Version Erfolg haben wird. Wenn ja, hätte der kommerzielle Anbieter Netscape ein Monopol im WWW. Diese Gefahr sollte man im Auge haben. Außerdem ist zumindest die Verwendung von <CENTER> schlicht überflüssig, da es entsprechende HTML 3.0 - Funktionen gibt, die auch von Netscape unterstützt werden.

    Überschriften werden mit dem Befehl
    <Hx>Überschrift</Hx>
    formatiert, wobei x die Überschriftgröße ist. Es gibt sechs Überschriftgrößen, <H1> bis <H6>.
    Normalerweise werden Überschriften linksbündig dargestellt. Mit dem ALIGN-Argument von HTML 3.0 können sie auch rechtsbündig (<Hx ALIGN=right>...</Hx>) oder zentriert (<Hx ALIGN=center>...</Hx>) dargestellt werden. Diese Art der Darstellung wird schon von einigen Browsern, z.B. NetScape und Arena, unterstützt. Zur Überschriftszentrierung ist diese Methode sicher besser geeignet als <CENTER>, da sie von mehr Browsern unterstützt wird. Beispiel: Die Musterklausuren von Prof. Bürge.

    Eine einfache HTML

    Hier ein sehr einfaches Beispiel für eine HTML:

    ____________________________________________________________________ 

      <HTML>
  <HEAD>
  <TITLE>Ein einfaches HTML-Beispiel</TITLE>
  </HEAD>

  <BODY>

  <H1>Das ist eine Überschrift, Größe 1</H1>

  <P>Willkommen im World Wide Web.  
  Das ist eine Absatzmarke (Paragraph).<P>

  Und dies ist eine zweite.<P>

  

  <I>Dieser Text ist kursiv</I><P>
  
  <B>und dieser fett gedruckt</B><P> 

  </BODY>
  </HTML>
    ____________________________________________________________________

    Und so sieht das ganze dann in Ihrem Browser aus.

    Es geht aber auch einfacher: Einen bereits vorformatierten Ascii-Text können Sie in eine HTML einbauen, indem Sie ihm den Befehl <PRE> voranstellen und ihn mit </PRE> abschließen.

    ...wie ham`die denn das gemacht?

    Eine Frage, die sich immer wieder stellt, wenn man im Netz auf eine gut gestaltete HTML-Seite stößt. Die meisten Browser bieten dafür eine "View Source"-Funktion an, die es erlaubt, das Quelldokument unformatiert anzuschauen und so die verwendeten Formatierungsbefehle zu ergründen. Bei Mosaic ist diese Funktion im "File"- bei NetScape im "View"-Menü zu finden.

  3. Hypertext-Referenzen

    4. Hypertext-Referenzen sind Verweise auf andere HTML-Dokumente, bestimmte Textstellen in diesen Dokumenten oder bestimmte Textstellen im gleichen Dokument. Wie anfänglich geschildert, erscheinen sie auf dem Mosaic-Bildschirm     farbig markiert und können durch Mausklick ausgeführt werden.

    Der Befehl für eine Hypertextreferenz lautet:

    <A HREF="[unarchived-link]">Text, der blau markiert werden soll</A>

    "referenz" ist dabei durch den entsprechenden Verweis zu ersetzen.

    Verweis auf Textstellen im gleichen Dokument

    Verweis auf andere HTML-Dokumente

    Verweis auf Textstellen in anderen Dokumenten

    Verweis auf andere Infosysteme

  4. Grafiken

    5. Genau wie auf eine andere HTML können Sie auf Grafiken verweisen, auch von anderen Rechnern. Es genügen dazu Namen und Pfad der Grafikdatei. Mosaic fährt dann einen externen Viewer hoch, der die Grafik anzeigt. Auf die gleiche Weise können Sie auch auf Multimedia-Animationen verweisen. Die unterstützten Grafik/Animationsformate hängen von den intallierten und in der Mosaic-Initialisierungsdatei eingetragenen Viewern ab. Es ist sinnvoll, für folgende Formate Viewer zu haben: .gif, .jpg, .xbm (Grafiken); .mpg, .avi (Animationen); .au, .mod, .wav (Sounds).

    Ein Verweis auf die Uni-Eule sieht so aus:

    <A HREF="http://web.archive.org/web/199510/http://sparlast.phil15.uni-sb.de/campusinfo/allg_info/Uni-Eule.gif">Uni-Eule</A>

    Und so funktioniert das: Uni-Eule

    Sie können aber auch Grafiken in das Dokument einbauen. Mosaic unterstützt das nur bei .gif und .xbm - Grafiken, da unter Windows die .xbm - Viewer jedoch rar sind, empfiehlt es sich, ausschließlich .gif - Grafiken zu verwenden. Der Befehl dazu lautet <IMG SRC="[unarchived-media]">. Befindet sich die Grafik in einem anderen Verzeichnis oder gar auf einem anderen Rechner, so ist natürlich der entsprechende Pfad mit anzugeben.

    Mit diesem Befehl etwa kann man das Weltkugelsymbol in das Dokument einbauen:

    <IMG SRC="[unarchived-media]">

  5. Gliedern eines HTML-Dokumentes

    6. HTML bietet mehrere Möglichkeiten, ein Dokument zu gliedern. Eine einfache Abschnittsgliederung bietet der Befehl <HR>. Er setzt einen Strich, der quer durch das Dokument geht:

    Als weitere Gliederungsmöglichkeiten bieten sich die sogenannten "lists" (Listen) an. Dabei unterscheidet man zwischen numbered, unnumbered und descriptive lists. Der numbered und der unnumbered list ist gemeinsam, daß die einzelnen Listeneinträge mit dem Befehl <LI> markiert werden.

    Numbered Lists (Nummernlisten)

    Unnumbered Lists

    Descriptive Lists

    Komplexe Listen

    Ein Beispiel für eine derartige komplexe Liste ist die     Übersicht der Saarbrücker Infoserver auf der Sparlast.

  6. Für mehr Informationen...

    7. Ich hoffe, Sie haben jetzt einen Einblick in die Welt der HTML-Sprache bekommen. Diese Anleitung erhebt jedoch keinen Anspruch auf Vollständigkeit. Weitere Informationen sind in diesen deutschsprachigen HTML-Dokumentationen zu finden:     Außerdem gibt es die folgenden englischsprachigen Dokumentationen: HTML-Spezifikation: Tools:

    Außerdem gibt es hier noch weitere Informationen über HTML und WWW.

    Für Verbesserungsvorschläge und Rückmeldungen wäre ich sehr dankbar.

    Mischa Dippelhofer, midi@rz.uni-sb.de