Wie schreibe ich ein HTML-Dokument ?

Eine Einführung in die Sprache HTML mit den wichtigsten Befehlen und Funktionen
Version 2.1 - erweitert um die Möglichkeiten von HTML 2 und 3

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.

    Um ein HTML-Dokument im Internet zur Verfügung zu stellen, braucht man einen WWW-Server. Solche WWW-Server gibt es mittlerweile für fast alle Betriebssysteme, hier findet sich eine Auflistung aller Server mit ihren Funktionen. Wenn man seinen Server nicht alleine pflegen will, empfiehlt es sich jedoch, ein Mehrbenutzer-Betriebssystem zu verwenden, das auch bei lokalem Zugriff die Vergabe von Zugriffsrechten erlaubt. Dafür bieten sich vor allem die verschiedenen Unix-Varianten und Windows NT an. Für diese Plattformen gibt es auch die meisten WWW-Server.

    Die Sprache HTML wird ständig verbessert. Aktuell ist die Version HTML 2.0 , die Version HTML 3.0 liegt als "internet draft" vor, sie ist also entgegen einer Falschmeldung in der ct 9/95 noch nicht veröffentlicht, steht aber wohl kurz davor.
    Dieses Dokument wird Sie auch in die wichtigsten HTML 2.0 und 3.0- Funktionen einführen. Allerdings muß beachtet werden, daß noch nicht einmal alle HTML 2.0 - Funktionen von allen WWW-Browsern unterstützt werden. Beachten Sie daher die Hinweise zur Kompatibilität von HTML 2.0/3.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. HTML 3.0 zufolge braucht man jedoch einfach nur mit <P> einen Absatzumbruch zu erzeugen. 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. Man könnte sagen, der Versuch in HTML 2.0, auch diesen Befehl paarig zu gestalten, hat sich nicht durchgesetzt, weil </P> schlicht überflüssig ist.
    HTML 3.0 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 (Windows-Version 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. Dabei wird unterschieden zwischen den physikalischen Hervorhebungen, die festlegen, daß der Text vom Browser auf eine ganz bestimmte Art, etwa kursiv, angezeigt werden soll, und den logischen Hervorhebungen, bei denen der Autor lediglich vorgibt, wie er sich eine Formatierung vorstellt, also etwa hervorgehoben, weniger hervorgehoben, stärker hervorgehoben ...

    physikalische Hervorhebungen:
    Mit dem Befehl
    <B>fett zu druckender Text</B>
    wird Text fett gedruckt und mit dem Befehl
    <I>kursiv zu druckender Text</I>
    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>.

    Eine gute Darstellung der logischen Hervorhebungen findet sich bei Rainer Klute.

    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 nach HTML 3.0:
    Mit dem Befehl <BIG> läßt sich Text vergrößert darstellen, mit <SMALL> verkleinert. <SUB> stellt Text tiefgestellt dar, <SUP> hochgestellt. So lassen sich auch H2O und 24 in HTML darstellen. Nicht zu unterschätzen ist auch die Möglichkeit der "originalgetreuen" Fußnotenreferenz1. Diese Funktionen werden jedoch nicht von allen Browsern unterstützt: Mosaic 2.0 Final Beta (Windows) unterstützt <SUB> und <SUP>, NetScape unterstützt alle Befehle, jedoch erst ab Version 1.2.

    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, Moasic 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="referenz">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. Der Browser fährt dann einen externen Viewer hoch, der die Grafik anzeigt (Mosaic) oder zeigt die Grafik direkt an (Netscape). 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 Browser-Initialisierungsdatei eingetragenen Viewern ab. Diese Datei läßt sich bei Mosaic/NetScape mit Options/Preferences modifizieren. 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://www.jura.uni-sb.de/FB/LS/Buerge/eule.gif">Uni-Eule</A>

    Und so funktioniert das: Uni-Eule

    Inline-Grafiken (IMG-Befehl)

    Sie können aber auch Grafiken in das Dokument einbauen. Manche Browser unterstützen dabei nur .gif - Grafiken, daher empfiehlt es sich, ausschließlich .gif - Grafiken zu verwenden, auch wenn manche Browser, etwa Netscape, bereits das modernere .jpg - Format beherrschen. Der Befehl dazu lautet <IMG SRC="name.gif">. 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="welt.gif">

    Aus integrierten Bildern werden die im WWW sehr beliebten Icons, wenn man dem IMG - Befehl mit einer Hypertextreferenz umschließt. Icons sind Bilder, die man anklicken kann. Man gelangt dabei an den Ort, auf den die Hypertextreferenz verweist. So kann man etwa unsere Weltkugel mit dem Befehl <A HREF="/internet/"><IMG SRC="welt.gif"></A> zu einem Icon, das auf die "Juristischen Informationen im Internet" verweist, umfunktionieren:

    Zu dem Befehl IMG gibt es noch einige nützliche Attribute:
    So kann man mit ALT="blablabla" einen Text angeben, der erscheinen soll, wenn bei dem Browser das Anzeigen von Grafiken deaktiviert wurde oder wenn der Browser, wie Lynx, keine Grafiken anzeigen kann. Dies ist ein sehr wichtiges Attribut. Vor allem bei Icons und wichtigen Symbolen sollte man auf keinen Fall auf eine textliche Beschreibung der Grafik verzichten, sonst erzeugt man Orientierungslosigkeit bei Lynx-Benutzern.
    Sinnvollerweise wird man also bei unserem Beispiel mit der Weltkugel <A HREF="/internet/"><IMG SRC="welt.gif" ALT="Juristische Informationen im Internet">&l t;/A> schreiben.

    Wenn rechts von dem Bild eine Beschreibung stehen soll, bestimmen die Attribute ALIGN=TOP , ALIGN=MIDDLE , ALIGN=BOTTOM, ob der Text an der oberen Bildkante (ALIGN=TOP), in der Mitte (ALIGN=MIDDLE) oder am unteren Bildrand (ALIGN=BOTTOM) stehen soll. Beispiel:
    Dies ist eine Weltkugel.

    Soll jedoch der Text an der rechten Seite des Bildes vorbeifließen, verwenden Sie das Attribut ALIGN=LEFT. Beispiel:
    In diesem Fall läft der Text an der rechten Seite des Bildchens vorbei, während bei ALIGN=MIDDLE usw. nur eine Zeile Text möglich ist.

    Das Attribut ALIGN=RIGHT wird verwendet, um die Grafik auf der rechten Seite zu platzieren. Beispiel:
    Wie Sie sehen, läft in diesem Fall der Text an der linken Seite des Bildchens vorbei.

    Von dem Attribut WIDTH, bei dem die Größe des Bildes in Prozent (NetScape-Standart) oder Pixel (HTML 3.0) angegeben wird, ist dringend abzuraten, weil es nicht von allen Browsern unterstützt wird. Paßt man die Grafiken etwa mit dem NetScape-Standart an, sind "verunstaltete" Seiten bei allen anderen Browsern die Folge.

  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

  6. Tabellen

    7. Tabellen sind Teil des neuen Standarts     HTML 3.0, werden aber bereits von allen brauchbaren Browsern unterstützt. Sie werden immer mit dem <TABLE> - Befehl begonnen und mit </TABLE> abgeschlossen. Das Element BORDER bestimmt dabei, daß die Tabelle mit Begrenzungslinien dargestellt werden soll. Eine
    TabellemitBegrenzungslinien
    wird also mit <TABLE BORDER> begonnen und mit </TABLE> abgeschlossen. Einer
    Tabelleohne Begrenzungslinien
    fehlt das BORDER-Element. Das Element WIDTH gibt die Breite der Tabelle in Prozent der Bildschirmbreite an. So läßt sich etwa unsere
    TabellemitBegrenzungslinien
    mit <TABLE BORDER WIDTH=50%> auf die Hälfte der Bildschirmbreite strecken:
    TabellemitBegrenzungslinien

    Eine Tabellenzeile wird mit <TR> begonnen und mit </TR> abgeschlossen. Eine Tabelle hat mindestens eine Zeile.
    Innerhalb der Zeilen werden die Tabellenspalten mit <TD> abgeteilt. <TD> steht außerdem immer am Anfang einer Tabellenzeile.

    Beispiel für eine zweispaltige Tabelle:

    <TABLE BORDER WIDTH=40%>
<TR>
<TD>Erste<TD>Zeile
</TR>
<TR>
<TD>Zweite<TD>Zeile
</TR>
</TABLE>
    sieht dann so aus:
    ErsteZeile
    ZweiteZeile

    Während <TD> für "normale" Tabellenzellen gedacht ist, teilt <TH> Titelzellen ein. So kann man unsere Tabelle um eine Titelzelle erweitern: 

    <TABLE BORDER WIDTH=40%>
<TR>
<TH>Titelzelle
</TR>
<TR>
<TD>Erste<TD>Zeile
</TR>
<TR>
<TD>Zweite<TD>Zeile
</TR>
</TABLE>
    sieht dann so aus:
    Titelzelle
    ErsteZeile
    ZweiteZeile

    Mit Hilfe des Befehls CAPTION kann man der gesamten Tabelle einen Titel geben. <CAPTION>zeigt dabei den Beginn des Titeltextes und </CAPTION> sein Ende an. CAPTION steht immer hinter dem TABLE- und vor dem ersten TR- Befehl. Verpassen wir unserer Tabelle einen Titel: 

    <TABLE BORDER WIDTH=40%>
<CAPTION>Tabellentitel</CAPTION>
<TR>
<TH>Titelzelle 1 <TH>Titelzelle 2
</TR>
<TR>
<TD>Erste<TD>Zeile
</TR>
<TR>
<TD>Zweite<TD>Zeile
</TR>
</TABLE>
    sieht dann so aus:
    Tabellentitel
    Titelzelle 1Titelzelle 2
    ErsteZeile
    ZweiteZeile
    wobei der Tabellentitel natuerlich auch mit Hx formatiert werden kann.

    Zu TD und TH gibt es außerdem noch die folgenden Elemente:
    ROWSPAN gibt die Anzahl der Zeilen an, die eine Zelle /Titelzelle beansprucht. Normalerweise ist das natürlich nur eine, aber mit <TD ROWSPAN=3 kann man eine Zelle auch "nach unten" auf 3 Zeilen vergrößern. Auf die gleiche Art kann man mit COLSPAN Zellen verbreitern, in dem man die Anzahl der Spalten, die die Zelle umfassen soll, angibt. Beispiel:
    A test table with merged cells
    Average other
    category    		Misc
    heightweight
    males1.90.003
    females1.70.002

    Diese Elemente können bei TABLE , TR und TD / TH eingesetzt werden:

    Soweit die wichtigsten Tabellenfunktionen. Weitere Funktionen finden Sie im HTML 3.0 Draft. Es wird auch noch heftig diskutiert, zumal NetScape auch hier wieder einige eigene Erweiterungen entwickelt hat, die jedoch nur von NetScape unterstützt werden. Bisher wurde nur WIDTH in HTML 3.0 übernommen.

  7. Formulare

    8. Formulare sind Bestandteil von     HTML 2.0. Sie werden von fast allen Browsern unterstützt. Sie bieten die Möglichkeit, den Benutzer am Bildschirm Daten eingeben zu lassen, die dann in eine Variable geschrieben werden. Die Variable wird nach dem "CGI-BIN"-Standart an den WWW-Server geschickt und von diesem an ein Programm weitergegeben, das sie bearbeitet. Solche Programme sind betriebssystemabhängig und normalerweise nicht oder nicht ohne Anpassung portabel. Daher möchte ich darauf hier nicht näher eingehen, ein WWW-Server-Betreiber sollte sich nach geeigneten Programmen für das Betriebssystem seines Servers umsehen bzw. welche schreiben.

    Ein HTML-Formular beginnt man mit <FORM> und beendet es mit </FORM>. Dabei gibt das Element ACTION an, mit welchem Programm das Formular Daten austauschen soll. Das Programm wird mit Hilfe einer URL bestimmt, es kann also auf einem beliebigen WWW-Server im Internet liegen. So läßt sich etwa mit <form action="http://www.leo.org/cgi-bin/aliwebform.pl"> der deutsche Spiegel der Aiweb-Datenbank ansprechen, wie es dieses Formular tut. Das Element METHOD bestimmt, ob Variablen zu dem Programm geschickt werden (METHOD=POST, wird auch verwenndet, wenn das Element METHOD fehlt) oder ob das Programm einen Transfer auf den Bildschirm des Benutzers durchführen soll (METHOD=GET, so kann man etwa mit einer Kommandozeile eine Datenbankabfrage durchführen).

    Eingabe von Daten

    Eingabefelder werden mit dem Befehl <INPUT> erstellt. Das Element NAME gibt dabei den Namen der Variabelen an, in die geschrieben wendern soll. Es gibt es verschiedene Typen von Eingabefeldern:
    • <INPUT TYPE=TEXT> erstellt ein einzeiliges Texteingabefeld. SIZE gibt die Größe in Buchstaben an, MAXLENGHT die Anzahl der maximal eingebbaren Buchstaben und VALUE den vorgegebenen Wert.
      Beispiel:
      <INPUT TYPE=TEXT NAME="x" SIZE=70 VALUE="Vorgabe">
      ergibt

    • <INPUT TYPE=PASSWORD> macht das gleiche wie TYPE=TEXT, stellt die Eingabe am Bildschirm jedoch als Sternchen dar. Aber Vorsicht: Die Eingabe wird im Klartext an den WWW-Server geschickt! Für die Eingabe von Paßwörtern ist dieser Typ also wenig geeignet.

    • <INPUT VALUE=CHECKBOX> erlaubt dem Benutzer die Auswahl eines bestimmten Wertes mit Hilfe eines anklickbaren Kästchens. Läßt man dem Benutzer mehrere Kästchen zur Auswahl, so kann er auch mehrere gleichzeitig anklicken. VALUE bestimmt hier den Wert, der übermittelt wird, wenn das jeweilige Kästchen angeklickt wird. CHECKED gibt an, daß dieses Kästchen als Vorgabe bereits angeklickt ist.
      Beispiel:
      <input type=checkbox name=flavor value=vanilla>Vanilla<br>
<input type=checkbox name=flavor value=strawberry>Strawberry<br>
<input type=checkbox name=flavor value=chocolate checked>Chocolate<br>
      ergibt:
      Vanilla
      Strawberry
      Chocolate

    • <INPUT TYPE=RADIO> erzeugt einen anklickbaren Kreis mit den gleichen Eigenschaften wie CHECKBOX, nur daß bei mehreren Buttons nur einer gleichzeitig angeklickt werden kann.

    • <INPUT TYPE=HIDDEN> erlaubt die Eingabe eines Wertes, ohne daß der Benutzer ihn beeinflussen könnte. Dies ist beispielsweise bei Mail-Formularen nützlich, die auf ein gemeinsames MailTo-Programm zugreifen, aber jeweils nur an eine bestimmte Person Mail verschicken sollen. Hier kann man die Empfängeradresse per HIDDEN fest vorgeben.

    • <INPUT TYPE=SUBMIT> generiert einen Knopf, der, wenn er gedrückt wird, die Datenübertragung auslöst. VALUE bestimmt dabei die Aufschrift des Knopfes.
      Beispiel:
      <INPUT TYPE=SUBMIT VALUE=" OK ">
      ergibt:

    • <INPUT TYPE=RESET> stellt dagegen einen Knopf dar, der, wird er gedrückt, das Formular zurücksetzt. VALUE bestimmt auch hier die Aufschrift.
      Beispiel:
      <INPUT TYPE=RESET VALUE=" Abbrechen ">
      ergibt:

    Weitere Eingabefelder ohne INPUT (auch hier bestimmt NAME die Variable):

    • <TEXTAREA> erstellt ein größeres Eingabefeld, in das auch mehrere Zeilen Text eingegeben werden können. Dabei gibt ROWS die Anzahl der Zeilen und COLS die Breite in Buchstaben an. <TEXTAREA> wird mit </TEXTAREA> abgeschlossen. Dazwischen kann Text stehen, der als Vorgabe in dem Eingabefeld stehen soll.
      Beispiel: 
      <TEXTAREA NAME="address" ROWS=6 COLS=64>
HaL Computer Systems
1315 Dell Avenue
Campbell, California 95008
</TEXTAREA>
      ergibt:

    • <SELECT> erstellt eine "Pull-Down-Box" zum direkten Anklicken eines bestimmten Wertes. <SELECT> wird durch </SELECT> abgeschlossen, dazwischen stehen die Auswahloptionen. Diese werden mit <OPTION VALUE= > erstellt, wobei VALUE den Wert festlegt. Hinter <OPTION steht der Text, den der Benutzer zu Gesicht bekommt. Fehlt VALUE, wird der Begriff hinter <OPTIONi> benutzt. Dort darf dann aber nur ein Wort stehen!SELECTED bestimmt die Vorgabe.
      Beispiel: 
      <SELECT NAME="flavor">
<OPTION>Vanilla
<OPTION>Strawberry
<OPTION value="RumRasin">Rum and Raisin
<OPTION selected>Peach and Orange
</SELECT>
      sieht dann so aus:

    Soviel zu den HTML-Formularen. Weitere Möglichkeiten finden Sie in der HTML-Spezifilkation sowie in diesem Artikel in der iX von Rainer Klute. Außerdem finden Sie hier den Diskussionsstand zu HTML 3.0.

  8. Für mehr Informationen...

    9. 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