 |
|
|||||
|
Hypertext und HTMLEin Hypertext ist ein Text mit aktiven Verweisstellen auf andere Texte. Im Web werden die Verweise Links genannt. So ist es möglich, Texte zu schreiben, die eine Materie auf hohem Niveau behandeln. Anfänger können durch die Verweise auf die erforderlichen Erläuterungen und Definitionen geführt werden, während der Experte seine Informationen komprimiert erhält. Hypertexte eignet sich auch ideal, um Informationen abzulegen, die stark miteinander verknüpft ist. Die Sprache HTML (Hypertext Markup Language) ist sehr einfach zu lernen. Um die Beispiele besser zu verstehen, werden hier einige ausgewählte Grundlagen vorgestellt. HTML-Dateien können mit einem gewöhnlichen Editor erstellt werden und haben neben dem eigentlichen Text Darstellungsbefehle, die Tag (engl. Etikett) genannt werden. Ein Tag ist in spitzen Klammern eingeschlossen. In den meisten Fällen gilt ein Tag für einen Bereich. Der Geltungsbereich wird durch das Ende-Tag begrenzt, dass Sie daran erkennen, dass ein Schrägstrich hinter der geöffneten, spitzen Klammer steht. Die Startseite einer Website heißt normalerweise index.html oder index.htm. Sie hat folgenden Inhalt:
<HTML> <HEAD> </HEAD> <BODY> <H1>Große Überschrift</H1>
Schauen Sie sich diesen <A HREF="hinweis.html">Hinweis</A> an.
</BODY> </HTML> Die Tags HTML und BODY rahmen den Körper einer Webseite ein. Der Abschnitt HEAD enthält Informationen, die beispielsweise Suchmaschinen auswerten, und auch den Titel der Webseite. H1 ist eine Überschrift (engl. header). Es gibt noch H2, H3, H4 und H5, die immer kleiner werdende Überschriften erzeugen. Das Tag A dient der Adressierung und besitzt Attribute. Mit HREF (Hyperreferenz) wird auf die angegebene Datei, hier hinweis.html verwiesen. Der Text der zwischen <A HREF=...> und </A> wird bei der Darstellung durch den Browser unterstrichen und blau dargestellt. Damit wird wird signaliiert, dass man durch einen Klick hierauf an eine andere Stelle springt. In diesem Fall führt es zum Laden der Datei hinweis.html auf dem gleichen Server. Sie müssen noch die Seite hinweis.html erzeugen. Sonst weist der Link von index.html ins Leere. Sie sieht nicht viel anders aus als die Datei index.html.
<HTML> <BODY> <H1>Großer Hinweis</H1>
<H4>Kleiner Hinweis</H4>
Und hier geht es <A HREF="index.html">zur Hauptseite</A>.
</BODY> </HTML>
GestaltungselementeAller Text, der von dem Tag BODY eingerahmt wird, wird vom Browser einfach ohne Zeilenumbruch hintereinander geschrieben. Um einen Absatz zu erzeugen, wird das Tag <P> eingefügt. Soll nur einen Zeilenumbruch ohne Abstand erreicht werden, verwenden Sie <BR>. Eine in HTML geschriebene Tabelle sieht auf den ersten Blick etwas kompliziert aus. Das liegt daran, dass sie gleich drei Tags verwendet. Das erste ist TABLE, das die gesamte Tabelle umschließt. TR umschließt jede Tabellenzeile und TD eine Spalte innerhalb einer Zeile. Der Browser übernimmt die korrekte Ausrichtung. Sie brauchen sich also keine Gedanken darüber zu machen, welchen Platz eine Spalte benötigt. Das folgende Beispiel erzeugt eine Tabelle, die noch einmal die Tags einer Tabelle beschreibt:
<TABLE BORDER> <TR><TD> table </TD><TD> Die ganze Tabelle </TD></TR> <TR><TD> tr </TD><TD> Eine Spalte </TD></TR> <TR><TD> td </TD><TD> Ein Feld </TD></TR> </TABLE> Das Attribut BORDER versieht die Tabelle mit einem Rahmen. Auch ohne Rahmen sind Tabellen wichtige HTML-Elemente. Man benötigt sie, um Texte nebeneinander zu positionieren. Durch geschicktes Verschachteln mehrerer Tabellen können auch kompliziertere Anordnungen realisiert werden.
FormulareZur Erstellung von Eingabemasken und Kontrollelementen wird in HTML ein Formular verwendet. Der Inhalt des Formulars wird entweder auf dem Server selbst verarbeitet oder kann per E-Mail versandt werden. Die Verarbeitung der Formularinhalte wird später noch einmal beim Thema CGI auftauchen (siehe S. cgi). Jedes Formular wird unsichtbar durch das Tag FORM eingerahmt. Im Starttag wird Aktion und Versendungsmethode festgelegt. <FORM ACTION="mailto:arnold@willemer.de" METHOD=post> ... </FORM> Dies ist ein typisches Beispiel für das Versenden des Formularinhaltes per E-Mail. Der Browser wird versuchen, den Formularinhalt an die genannte E-Mail Adresse zu senden. Andere Aktionen werden unter dem Thema CGI näher erläutert. Ein Formular wird erst durch die Bestückung mit Kontrollelementen lebendig. Ein Kontrollelement wird mit dem Tag INPUT gekennzeichnet. Mit dem Attribut TYPE wird der Typ gekennzeichnet werden. Das wichtigste Kontrollelement eines Formulars heißt SUBMIT. Es ist der Bestätigungsknopf, der dafür sorgt, dass die Eingaben abgeschickt werden. Mit dem Attribut VALUE kann die Vorbelegung des Eingabeelements erfolgen. Beim SUBMIT ist dies die Beschriftung. Ganz wichtig ist das Attribut NAME, an dem Sie bei der Auswertung die einzelnen Kontrollelemente erkennen können. Also müssen die Namen jedes Kontrollelements für das jeweilige Formular eindeutig sein. Jedes Formular enthält normalerweise einen Button zum Absenden des Formularinhalts an das CGI-Programm oder die E-Mail. Dieser Button ist vom Typ SUBMIT. Erst wenn der Betrachter diesen Knopf betätigt, wird die ACTION des Formulars aktiv.
<FORM> <INPUT TYPE=SUBMIT VALUE="OK"> </FORM> Mit dem Kontrollelementtyp TEXT wird ein Feld zur Eingabe einer Textzeile erzeugt. Beispiel:
<FORM> Welches Auto fahren Sie? <INPUT TYPE=TEXT NAME="auto" VALUE="Alt aber bezahlt" SIZE=20 MAXLENGTH=60> <TEXTAREA Name="Adresse" ROWS=5 COLS=60> Ihre Adresse </TEXTAREA> <INPUT TYPE=SUBMIT VALUE="OK"> </FORM> Eine Abart des Kontrollelements TEXT ist die TEXTAREA, die mehrere Zeilen Text aufnehmen kann. Man könnte auch von einem simplen Editor reden. Er wird mit dem Tag TEXTAREA eingeleitet. Der folgende Text bis zum Endetag ist die Vorbelegung des Kontrollelements, ähnlich wie bei VALUE=.
Ein zusammengesetztes Element ist der Radiobutton. Es werden mehrere »Knöpfe« unter gleichem Namen definiert. Nur einer von ihnen kann selektiert werden. Die folgende Definition bildet realistisch die möglichen Eigenarten von Menschen ab.
<INPUT TYPE="RADIO" NAME="eigenschaft" VALUE="intelligent"> <INPUT TYPE="RADIO" NAME="eigenschaft" VALUE="sportlich"> <INPUT TYPE="RADIO" NAME="eigenschaft" VALUE="schön"> Wer nähere und aktuelle Informationen zum Thema HTML braucht, sollte sich mit SelfHTML beschäftigen. Es wird bei vielen Linuxdistributionen mit ausgeliefert. Ansonsten finden Sie es im Internet unter der Adresse: http://selfhtml.teamone.de
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
bestellen
