Anfängerkurs HTML

Die Einleitung

Wichtige Begriffe

WWW: World Wide Web
Web: World Wide Web
SGML: 'Standard Generalized Markup Language' - allgemein anerkannte Standardsprache um Gestaltungen zu umschreiben.
DTD: 'Document Type Definition' - Hiermit wird definiert, in welcher Sprache das Dokument geschrieben ist (In diesem Falle HTML).
HTML: HyperText Markup Language--HTML ist ein SGML DTD
In normalen Deutsch bedeutet das, daß HTML eine Versammlung bestimmter Codes ist, die vom gebrauchten Computersystem unabhängig sind. Hiermit werden die verschiedenen Komponenten des WWW- Dokumentes bestimmt. HTML wurde von Tim Berners - Lee entwickelt, der bei CERN arbeitete - das europäische Labor für Atomphysik in Geneve.

Was wird in diesem Kurs nicht behandelt?

Diese Einleitung geht davon aus, daß:

Sie wissen wie sie mit NCSA Mosaic, Netscape, Internet Explorer oder einem anderen Webbrowser umgehen müssen,
Sie im allgemeinen wissen, wie ein Server oder ein daran angeschlossener Computer funktioniert,
Sie Zugang zu einem Webserver haben, oder daß sie sich Zuhause die HTML-Websites von Ihrem eigenen Computer aus anschauen können.

HTML-Version

Dieser Kurs behandelt die neuste Version von HTML 2.0 und noch ein paar weitere allgemein akzeptierte Basisausbreitungen, die Sie im Prinzip in jeder folgenden Version ohne Probleme benutzen können. Die Entwicklungen von HTML gehen noch immer weiter.

HTML-Dokumente

Was ist ein HTML-Dokument

HTML-Dokumente werden als Textbestände (ASCII files) mit Hilfe eines Textbearbeitungsprogrammes - z.B. Emacs oder UNIX, BBEdit (Macintosh) oder Notepad (Windows) - gemacht.

HTML-Editors (Bearbeiter)

Auf dem Internet sind verschiedene HTML-Editors als Shareware zu bekommen. Die Möglichkeiten sind breit gefächert, aber es ist ratsam sich erst in die Basiskenntnis von HTML zu vertiefen, bevor Sie wirklich einen Editor benutzen.

Wenn Sie sich noch nicht entschieden haben welchen Editor sie benutzen wollen, können sie hier eine Online-Liste mit HTML-Editors finden.

Was sind Labels(Tags)

Ein Element ist ein fundamentales Unterteil der Struktur eines Textdokumentes. Beispiele sind: heads, tables, paragraphs und lists. Das müssen Sie sich so vorstellen: Sie benutzen Labels um die Elemente eines Textes für einen Browser zu markieren. Elemente können Texte, wieder andere Elemente oder eine Kombination von diesen befassen.

Um ein Element innerhalb eines HTML-Dokumentes anzudeuten, werden Labels (tags) benutzt. HTML-Labels bestehen aus einem 'kleiner-als' Zeichen (<), einer Labelbezeichnung und einem 'größer-als' Zeichen (>). Labels kommen meistens als Paar vor (z.B. <center> und </center>) um den Anfang und das Ende einer Instruktion anzugeben. Das Anfangslabel <center> öffnet die Funktion und das Endlabel </center> schließt die Funktion wieder. Achten sie auf den Slash (/) im Endlabel. Dieser gibt an, daß die Funktion geschlossen ist. Wenn Sie z.B. einen Text in die Mitte des Dokumentes setzen wollen, können Sie das mithilfe des <center> Labels tun. Der Code würde in Ihrem HTML-Dokument dann so aussehen:

<div align="center"> Dieser Text steht in der Mitte</div>

Und auf dem Bildschirm so:

Dieser Text steht in der Mitte

Mehr HTML-Labels finden Sie in der unteren Liste.

Manche Elemente können ein Attribut enthalten, womit Extrainformationen gegeben werden können. So können Sie z.B. auch bestimmen, ob sich die Bilder in ihrem Text links oder rechts befinden sollen. Labels mit Attributen finden Sie ebenfalls in der unteren Liste.

Achtung! HTML ist nicht an Groß- und Kleinschreibung gebunden; <center> ist dasselbe wie <CENTER> oder <cEnTer>. Es gibt ein paar Ausnahmen, die Sie in den Escape Series finden können.

Nicht alle Labels werden durch alle Browsers erkannt. Meistens werden die nicht erkannten Labels einfach nicht beachtet.

Das minimale HTML-Dokument

Jedes HTML-Dokument muß ein paar bestimmte Standardlabels enthalten. Jedes Dokument besteht aus einem Kopf (head) und einem Inhalt (Body). Der Kopf enthält den Titel und der Inhalt enthält den eigentlichen Text mit allen Gestaltungen. Browser müssen bestimmte Informationen haben, da sie auf HTML und SGML Spezifikationen programmiert sind.

Unbedingt verlangte Elemente stehen in diesem Vorbilddokument:

    <html>
    <head>
    <TITLE>Ein einfaches Vorbild</TITLE>
    </head>
    <body>
    <H1>HTML ist einfach zu lernen</H1>
    <P>Willkommen in der Welt des HTML.
       Dies ist der erste Abschnitt. 
       Auch ist er nur kurz, es ist 
       und bleibt ein Abschnitt.
    </P>
    <P>Und dies ist der zweite Abschnitt.</P>
    </body>
    </html>

Die verlangten Elemente sind <html>, <head>, <title> und <body>, sowie die Labeltags (und alle dazugehörigen Endlabels). Da jedes HTML-Dokument diese Labels beinhalten muß (ohne diese funktioniert nämlich gar nichts), können sie aus oberem Vorbild am Besten ein Standardvorbild machen.

Ein praktisches Hilfsmittel

Um zu sehen wie Ihr Browser die Bestände liest, klicken sie auf 'View Source" oder "Quelle" in Ihrem Browser-Menu. Der Inhalt des geöffneten Bestandes, mit allen HTML-Labels, ist jetzt in einem neuen Fenster zu sehen.

Dies ist die perfekte Art um zu sehen, wie andere Leute HTML benutzen. Nicht jeder arbeitet perfekt, aber wenn Sie ein wenig versuchen zu verstehen was Sie da sehen, bekommen Sie schnell einen Durchblick (Zur Not hilft immer noch ein entsprechendes Taschenbuch).

Sie können auch einen Quellenbestand auf Ihrer Festplatte oder auf Floppy speichern, um ihn später nochmal anzuschauen oder zu benutzen.

Gestaltungslabels

HTML

Dieses Element gibt Ihrem Browser zu verstehen, daß das Dokument HTML-Codes beinhaltet. Der Bestandsname bestandsname.html gibt ebenfalls an daß es sich um ein HTML-Dokument handelt, und muß darum auch immer benutzt werden. (Wenn sie nur 8.3 Bestandsnamen gebrauchen dürfen, geben sie Ihrem Dokument dann den Namen .htm, also ohne l)

HEAD

Der Kopf gibt den Abschnitt des Dokumentes an, in dem der Titel steht. Der Titel erscheint auch links oben im blauen Rand des geöffneten Fensters.

TITEL

Das Titelelement beinhaltet den Titel des Dokumentes, also eine kurze Beschreibung des Inhaltes. Der Titel erscheint nicht nur im Rand des geöffneten Fensters, sondern wird auch in den 'Bookmarks' gemeldet. Auch WAIS - Suchmaschinen suchen nach dem Titel. Achten Sie also darauf, daß Ihr Titel kurz und bündig ist.

So können Sie z.B. den verkürzten Titel eines Buches mit dem entsprechenden Kapitel benutzen: NCSA Mosaic Guide (Windows): Installation. Auf diese Weise wird der Name der Software, der Firma und des Kapitels angegeben, was deutlicher ist als nur Installation. Im Allgemeinen gilt die Regel: Titel niemals länger als 64 Zeichen.

BODY

Der zweite und größte Teil Ihres HTML-Dokumentes ist der Body (Inhalt). In diesem befindet sich alles, was letztendlich auf dem Bildschirm zu sehen ist. Innerhalb des Bodys werden die Labels benutzt.

Headings(Kopfzeilen)

HTML kennt sechs Kopfzeilen, durchnummeriert von 1 bis 6, von denen 1 die größte ist. Kopfzeilen werden immer größer und dicker angegeben, als der Rest des Textes. Die erste Kopfzeile eines jeden Dokumentes muß mit dem Label <H1> angegeben werden.

Der Syntax des Kopfzeilenelementes ist:

<Hy>Text der Kopfzeile</Hy>

Hier ist y eine Zahl von 1 bis 6, die die Größe wiedergibt.

Wechsele innerhalb eines Dokumentes niemals die Größe der Kopfzeile!

Abschnitte (Paragraphen)

Im Gegensatz zu anderen Textverarbeiterprogrammen macht der Gebrauch von harten Returns bei HTML nichts aus. Es ist also im Prinzip egal wie lang Ihre Zeilen sind, es ist jedoch besser sie kürzer als 72 Zeichen zu halten. Sie können die Zeilen trennen und mehrere Leertasten gebrauchen wo Sie wollen - es ist in der Website nicht zu sehen. Um Abschnitte doch sichtbar zu machen (manchmal ist das nämlich sehr wohl notwendig), benutzt man das Label des Paragraphen.

In unserem Vorbild sieht der erste Abschnitt so aus:

    <P>Willkommen in der Welt des HTML.
    Dies ist der erste Abschnitt. Auch ist er nur kurz,
    Es ist und bleibt ein Abschnitt.
    </P>

Sie sehen, daß hier Zeilen getrennt sind (Nach 'HTML' und 'kurz'). Ein Webbrowser ignoriert diese Brüche und fängt erst bei dem folgenden <P> Label den nächsten Abschnitt an.

Wichtig! Sie müssen Abschnitte mit dem <P> Element angeben! Ein Browser ignoriert Einspringungen oder freigelassene Zeilen im Quellentext. Ohne <P> Elemente wird das Dokument ein langer Abschnitt. Mit Ausnahme eines Textes der als vorgestaltet gelabelt ist ("preformatted"); darauf wird später genauer eingegangen). Um das Lesen eines Dokumentes einfacher zu machen, können sie darum am Besten mit Kopfzeilen arbeiten. Machen Sie für sich selber das Dokument übersichtlicher, indem sie vor dem Beginn eines neuen Abschnitt eine Zeile freilassen. Das ist vorallem für eventuelle Veränderungen sehr praktisch.

Das </P> Endlabel können Sie im Prinzip weglassen. Browsers verstehen daß ein Abschnitt endet, sobald sie dem Anfang eines neuen Abschnittes begegnen. Es ist jedoch nicht sehr zu empfehlen, da es doch noch eventuell Probleme auslösen kann.

Beim Gebrauch von </P> und </P> können Sie mit Hilfe des Align-Attributes dem Abschnitt einen Platz anweisen.

    <P ALIGN=right>
    Dieser Abschnitt ist rechts. [Siehe Text hierdrunter]
    </P>

Dieser Abschnitt ist rechts.

Listen

HTML unterstützt nicht-nummerierte, nummerierte und Definitionslisten. Listen können auch 'gelagert' werden; gebrauchen Sie diese Funktion aber nicht zu oft, da zu viele gelagerte Listen schnell unübersichtlich werden.

Nicht-nummerierte Listen

Um eine Liste zu machen, die nicht nummeriert ist

Beginne mit einer Listenöffnungstabelle <UL>
Füge das<LI> (Listenteil) Label, gefolgt von dem Teil ein; ein Endlabel</LI> ist nicht nötig
Beende die Liste mit dem Endlabel</UL>

Hier eine Vorbildliste mit drei Teilen:

    <UL>
    <LI> Äpfel
    <LI> Bananen
    <LI> Aprikosen
    </UL>

Das Resultat:

Äpfel
Bananen
Aprikosen

Die <LI> Teile können mehrere Abschnitte beinhalten. Geben Sie den Abschnitt mit dem <P> Label an.

Nummerierte Listen

Eine nummerierte Liste (Auch ordered list) ist genauso aufgebaut wie eine nicht - nummerierte Liste, außer daß bei dieser <OL> benutzt wird, anstatt <UL>. Die Teile werden wieder mit <LI> gelabelt. Dieser HTML-Code:

    <OL>
    <LI> Orange
    <LI> Lila
    <LI> Grün
    </OL>

Ergibt dieses Resultat:

Orange
Lila
Grün

Definitionslisten

Eine Definitionsliste (codiert als <DL>) besteht normalerweise aus einem Begriff (codiert als <DT>)und einer Beschreibung (codiert als <DD>). Webrowsers geben der Beschreibung meistens eine neue Zeile.

Vorbild einer Definitionsliste:

    <DL>
    <DT> Orangutans
    <DD> Orangutans sind Menschenaffen und leben in Asien.
    <DT> Paviane    <DD> Paviane sind Affen aus der 'alten Welt' und leben in Afrika.
    </DL>

Dies ist das Resultat:

Orangutans: Orangutans sind Menschenaffen und leben in Asien.
Paviane: Paviane sind Affen aus der 'alten Welt' und leben in Afrika.

Die <DT> und <DD> Labelöffnungen können mehrere Abschnitte (angegeben mit dem <P> Label) beinhalten, aber auch Listen und andere Definitionen.

Wenn die Beschreibung sehr kurz ist, kann hier auch das COMPACT Attribut benutzt werden. Wenn Sie z.B. bestimmte Optionen zeigen wollen, können diese auf derselben Zeile stehen.

<DL COMPACT>
<DT> -i
<DD>invokes NCSA Mosaic for Microsoft Windows using the 
initialization file defined in the path
<DT> -k
<DD>invokes NCSA Mosaic for Microsoft Windows in kiosk mode
</DL>

Das Resultat:

-i: invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path.
-k: invokes NCSA Mosaic for Microsoft Windows in kiosk mode.

Gelagerte Listen

Listen können 'gelagert' werden. Auch kann man Abschnitte mit einer Liste innerhalb einer Liste benutzen.

Hier ist ein Vorbild einer gelagerten Liste:

    <UL>
    <LI> Ein paar Städte im Ruhrgebiet:
        <UL>
        <LI> Gelsenkirchen
        <LI> Dortmund
        <LI> Wanne-Eickel
        </UL>
    <LI> Zwei Städte im Münsterland:
        <UL>
        <LI> Lüdinghausen
        <LI> Münster
        </UL>
    </UL>

Die gelagerte Liste sieht dann so aus:

Ein paar Städte im Ruhrgebiet:
- Gelsenkirchen
- Dortmund
- Wanne-Eickel
Zwei Städte im Münsterland:
- Lüdinghausen
- Münster

Vorgestalteter Text

Benutzen Sie das <PRE> Label (das steht für "preformatted") um Texte genauso zu zeigen, wie Sie in Ihrem Bestand stehen. Mit diesem Label können Sie Extraleertasten, leere Zeilen und Tabulatorstops benutzen.

Dieses Vorbild:

    <PRE>
      #!/bin/csh                           
      cd $SCR                             
      cfs get mysrc.f:mycfsdir/mysrc.f   
      cfs get myinfile:mycfsdir/myinfile   
      fc -02 -o mya.out mysrc.f           
      mya.out                              
      cfs save myoutfile:mycfsdir/myoutfile 
      rm *                                
    </PRE>

Sieht so aus:

      #!/bin/csh                           
      cd $SCR                             
      cfs get mysrc.f:mycfsdir/mysrc.f   
      cfs get myinfile:mycfsdir/myinfile   
      fc -02 -o mya.out mysrc.f           
      mya.out                              
      cfs save myoutfile:mycfsdir/myoutfile 
      rm *

Das <PRE> Label kann mit dem WIDTH Attribut (Breite) erweitert werden. Dieses Attribut gibt die Menge der Zeichen innerhalb einer Zeile an. WIDTH sagt Ihrem Browser auch, daß bestimmte Schriftarten und Einspringungen im Text benutzt werden.

Innerhalb des <PRE> Labels können auch Hyperlinks (Verknüpfungen) gemacht werden. Andere Labels können Sie hier jedoch nicht benutzen.

Denken Sie daran, daß <, >, und & eine ganz bestimmte Bedeutung in HTML haben, sodaß Sie diese Zeichen nur in Escape Series benutzen können (<, >, und &). Siehe Abschnitt Escape Series für mehr Information.

Erweiterte Zitate

Um lange Zitate als einen abgesonderten Block auf den Bildschirm zu bekommen, benutzen sie das <BLOCKQUOTE> Label. Die meisten Browser haben angepaßte Seitenlinien, sodaß ein deutlicher Unterschied zu sehen ist.

Vorbild:

    <BLOCKQUOTE>
    <P>Benutze keine überflüssigen Wörter</P>
    <P>Energische Sprache ist kurz und bündig. In einem Satz dürfen keine
 überflüssigen Wörter vorkommen, in einem Abschnitt keine überflüssigen Sätze,
 sowie in einer Maschine keine überflüssigen Unterteile
 vorkommen.</P>

    --William Strunk, Jr., 1918
    </BLOCKQUOTE>

Das Resultat:

Benutze keine überflüssigen Wörter

Starke Sprache ist kurz und bündig. In einem Satz dürfen keine überflüssigen Wörter vorkommen, in einem Abschnitt keine überflüssigen Sätze, sowie in einer Maschine keine überflüssigen Unterteile vorkommen.

--William Strunk, Jr., 1918

Adressen

Das <ADDRESS> Label wird meistens benutzt, um den Autor eines Dokumentes, eine Art um Kontakt mit dem Autor aufzunehmen, sowie ein Datum anzugeben. Meistens ist dies der letzte Teil eines Dokumentes.

Als Vorbild die letzte Zeile dieses Kurses:

    <ADDRESS>
Anfängerkurs HTML / PSI / meike@flevoland.to / Mai 2002
    </ADDRESS>

Das Resultat ist:

Anfängerkurs HTML / PSI / meike@flevoland.to / Mai 2002

Achtung! <ADDRESS> wird nicht für Hausadressen benutzt! Siehe 'Zeile trennen' unten.

Zeile trennen/Hausadressen

Im Gegensatz zum <p> Element trennt das <br> Label Zeilen, ohne Extraplatz hinzuzufügen. Das ist besonders praktisch bei kurzen Zeilen, wie z.B. bei Adressen.

    PSI Projects<BR>
    Postfach 405<BR>
    8250 AE Dronten<BR>

Das Resultat:

PSI Projects
Postfach 405
8250 AE Dronten

Waagerechte Linien

Das <HR> Label gestaltet eine waagerechte Linie in der Breite des Browserfensters. Die waagerechte Linie kann benutzt werden, um Teile Ihres Dokumentes zu trennen. Viele Leute setzen z.B. gerne zwischen das Dokument und die <address> Information eine waagerechte Linie.

Sie können die Breite (size) und die Länge (width) einer Linie nach eigenem Belieben anpassen. Experimentieren Sie mit den Einstellungen solange, bis sie zufrieden sind.

<HR SIZE=4 WIDTH=50%>

Sieht z.B. so aus:

Schriftarten

HTML kennt zwei Schriftarten für Wörter und Sätze: Logische und Physische. Der Logische Stil labelt den Text anhand seiner Bedeutung, während der physische Stil die Erscheinungsform eines Textteiles bestimmt. Im obersten Satz sind die Wörter 'Logische Stil' und Physische Stil' durch das Label <i> cursiv gesetzt (<i>Logische Stil</i>).

Logischer/Physischer stijl

Warum zwei Stile, wenn mit Beiden dasselbe erreicht werden kann?

In dem idealen SGL-Universum ist der Inhalt von der Form geschieden. Ein SGL Kopfzeilenlabel gibt an, daß es sich um eine Kopfzeile handelt, aber nicht daß sie in z.B. Times New Roman, 24 Punkte groß und fett geschrieben sein soll. Der Vorteil am logischen Stil ist, daß Sie, wenn Sie eine andere Schriftart angeben wollen, nur die Kopfzeilendefinition in Ihrem Browser zu verändern brauchen (Ein Paar Textverarbeitungsprogramme arbeiten auch auf diese Weise).

Ein weiterer Vorteil vom logischen Stil ist, daß es damit einfacher ist eine konsequente Form wiederzugeben. Es ist einfacher etwas mit <H1> zu labeln, als zu behalten, daß die Kopfzeile ja in Times New Roman, 24 Pixels groß und fett wiedergegeben werden sollte. Nehmen Sie zum Beispiel das <STRONG> Label. Die meisten Browser geben dieses als fettgedruckten Text wieder. Es kann allerdings gut möglich sein, daß ein Leser diese Teile rotgefärbt haben will. Ein logischer Stil bietet diese Möglichkeit.

Wenn Sie den physischen Stil wählen, wird Ihr Brouwser immer die Gestaltung wählen die Sie selber gemacht haben, unabhängig von den Einstellungen des Lesers.

Versuchen Sie konsequent zu bleiben. Gebrauchen Sie innerhalb eines Dokumentes immer nur einen Stil. Halten Sie sich auch immer vor Augen, daß HTML in der Zukunft vielleicht keinen physischen Stil mehr unterstützt, mit den Folgen daß Browsers physischen Stil nicht mehr erkennen.

Logischer Stil

<DFN>: Für ein bestimmtes Wort. Es wird cursiv auf Ihrem Bildschirm wieder gegeben. (z.B.: NCSA Mosaic ist ein World Wide Web Browser.)
<EM>: Für den Nachdruck. Es wird cursiv auf Ihrem Bildschirm wiedergegeben.(z.B.: Password geheimhalten)
<CITE>: Für Büchertitel, Filmtitel etc. Es wird cursiv auf Ihrem Bildschirm wiedergegeben(z.B.: Anfängerkurs HTML)
<CODE>: Für Computercodes. Es wird wiedergegeben mit einem festen Buchstabenabstand.(z.B.: Der <stdio.h> Anfangbestand)
<KBD>: Für Einführungen mit der Tastatur. Es wird wiedergegeben mit festem Buchstabenabstand. (z.B.: Gebe passwd ein, um das Password zu verändern)
<SAMP>: Für eine Charakterserie. Es wird mit festem Buchstabenabstand wiedergegeben. (z.B.: Segmentation fault: Core dumped.)
<STRONG>: Für starken Nachdruck. Es wird mit fetten Buchstaben wiedergegeben. (z.B.: Achtung: kontrollieren Sie immer Ihre Verknüpfungen (Links))
<VAR>: Für eine Variable, wo Sie die Variable durch spezifieke Information ersetzen werden. Dies wird cursiv wiedergegeben.(z.B.: rm filename löscht den Bestand.)

Physischer Stil

<B>: Fettgedruckter (bold) Text
<I>: Cursiver (italic) Text
<TT>: Schreibmaschinenstil, fester Buchstabenabstand

Escape Series (auch 'besondere Zeichen')

Es gibt zwei Arten von besonderen Zeichen:

Das Umgehen besonderer Zeichen
Die Wiedergabe von speziellen Charakteren (Nicht anwesend im ASCII-Zeichenset)

Drei ASCII-Zeichen, Das 'kleiner-als' Zeichen(<), das 'größer- als' Zeichen(>) und das 'Und' Zeichen(&), haben eine besondere Bedeutung innerhalb von HTML, und können aus diesem Grunde nicht einfach so im Text benutzt werden. Die Klammern werden benutzt, um Anfang - und Endlabels anzugeben, während das Und-Zeichen am Beginn einer Escape Serie steht.

Um eins dieser drei Zeichen in einem HTML-Text benutzen zu können, müssen Sie mit der Escape Serie arbeiten.

<: Die Escape Serie für <
>: Die Escape Serie für >
&: Die Escape Serie für &

Es gibt noch ein paar andere Escape Series für besondere Zeichen:

ö: Die Escape Serie für das kleine ö
ñ: Die Escape Serie für das kleine n mit Tilder: ñ
È: Die Escape Serie den Großbuchstaben E mit accent grave: È

Sie können obere Buchstaben o, n, und E auch durch andere ersetzen. Schauen Sie auf dieser Website für mehr besondere Zeichen nach.

Achtung: Im Gegensatz zum Rest von HTML, sind die Escape Series sehr wohl von Groß - und Kleinschreibung abhängig. Sie können z.B. < nicht durch &LT; ersetzen.

Verknüpfungen (Links)

Die Stärke von HTML liegt in der Möglichkeit, Texte und/oder Bilder mit anderen Dokumenten oder demselben Dokument zu verknüpfen. Ein Browser hebt den betreffenden Text oder das Bild heraus, durch diesen eine andere Farbe zu geben oder sie zu unterstreichen. Damit wird angegeben, daß es sich um eine Hypertext-Verknüpfung (link) handelt, meistens mit Link abgekürzt.

Das einzige Hypertextlabel, das in Html vorkommt ist <A>. Dies steht für Anker (anchor). Um einen Anker in Ihrem Text anzubringen:

beginnen Sie den Anker mit dem <A Label (Setzen Sie eine Leertaste nach dem A)
Geben Sie das Dokument, mit dem Sie Ihre Verankerung machen wollen, mit dem Parameter HREF="Bestandsname" an, und schließen Sie mit der Klammer (>)
Geben Sie den Text, der als Link dienen soll, in das vorliegende Dokument ein.
Geben Sie das Endlabel an: </A> (Hier brauchen Sie keine Leertaste zu benutzen)

Hier ist ein Vorbild einer Verknüpfung in einem Bestand, US.html genannt:

    <A HREF="MaineStats.html">Maine</A>

Maine wird hier der Hyperlink zum Dokument MaineStats.html, das in derselben Mappe steht wie das erste Dokument.

Relative Pfadnamen/absolute Pfadnamen

Sie können mit anderen Dokumenten Verknüpfungen machen, durch den relativen Pfad vom betreffenden Dokument zu dem zu verbindenen Dokument anzugeben. Die Verknüpfung zu dem Dokument NYStats.html, das sich in der Bestandsmappe AtlanticStates befindet, würde z.B. so aussehen:

    <A HREF="AtlanticStates/NYStats.html">New York</A>

Dies wird ein relativer Linkgenannt, weil Sie hierbei innerhalb des betreffenden Bestandes einen Pfad angeben. Sie könnten hier im Prinzip auch den absoluten Pfad angeben (Die vollständige URL), doch relative Verknüpfungen sind innerhalb des Servers einfach praktischer.

Pfadnamen machen Gebrauch von dem Standard UNIX Syntax. Der UNIX Syntax der oberen Mappe (Die Mappe, von der dieses vorliegende Dokument Teil ausmacht) ist "..". Für mehr Information ziehen Sie ein Taschenbuch von UNIX zu Rate.

Wenn Sie sich in dem NYStats.html Bestand befinden und Sie von da aus zum Originaldokument US.html zurück wollen, sieht der betreffende Link so aus:

    <A HREF="../US.html">United States</A>

Im Allgemeinen ist es ratsamer relative Links zu gebrauchen, weil:

es einfacher ist um einer Gruppe Dokumente auf diese Weise einen neuen Platz zu geben (Die relativen Pfadnamen bleiben immer gültig)
Die Kommunikation mit dem Server einfacher ist
Sie weniger Schreibarbeit haben

Gebrauchen Sie auf jeden Fall absolute Pfadnamen, wenn die Dokumente keine direkte Beziehung miteinander haben! Eine Gruppe Dokumente die miteinander eine Gebrauchsanweisung bildet, können ohne Probleme durch relative Links miteinander verknüpft sein, doch für Verknüpfungen mit anderen Dokumenten, hat der vollständige Pfadname das Vorrecht. Auf diese Weise brauchen Bestände nicht verändert zu werden, wenn sie in eine andere Mappe gesetzt werden.

URLs

Das World Wide Web benutzt Uniform Resource Locators (URLs) um anzugeben, an welcher Stelle sich Bestände auf anderen Servern befinden. Eine URL umfaßt den Quellentyp (z.B. Web, gopher, WAIS), die Adresse des Servers und wo sich die Mappe auf Diesem befindet. Der Syntax ist:

scheme://host.domain [:poort]/path/ filename

wobei scheme eines der Folgenden ist:

file: Ein Bestand auf der lokalen Station
ftp: Ein Bestand auf einem anonymen FTP Server
http: Ein Bestand auf einem World Wide Web Server
gopher: Ein Bestand auf einem Gopher Server
WAIS: Ein Bestand auf einem WAIS Server
news: Eine Usenet Newsgroup
telnet: Eine Verbindung mit einem Service, basiert auf Telnet

Eine poort Nummer kann man meistens auslassen. (Wenn Sie nicht anders beraten werden, lassen Sie Sie weg.)

Mehr Information über URL's bekommen Sie hier:

Verknüpfungen mit bestimmten Teilen

Anker können auch benutzt werden, um zu einem ganz bestimmten Teil eines Dokumentes zu verweisen und dorthin zu gehen. Diese Sorte Anker wird meistens Namen-Anker genannt, da für die seine Bewerkstellung Wörter die in dem Dokument vorkommen, benutzt werden.

Die Gestaltung dieses Kurses ist ein gutes Vorbild für den Gebrauch von Namen-Ankern. Das Dokument beginnt mit einem Index, der aus internen Links besteht. (Gehen Sie zum Anfang dieser Site um sich davon zu überzeugen, und klicken Sie dort auf 'Verknüpfungen mit bestimmten Teilen' um wieder hier zu landen)

Sie können auch mit bestimmten Teilen eines anderen Dokumentes Verknüpfungen machen. Sie werden jetzt erstmal erfahren wie man das macht, denn es hilft Ihnen, interne Verknüpfungen besser zu verstehen.

Verknüpfungen zwischen Teilen verschiedener Bestände

Wir gehen davon aus, daß Sie Dokument A (dokumentA.html) mit einem bestimmten Teil eines anderen Dokumentes (MaineStats.html) verknüpfen wollen.

Geben Sie den HTML-Code für einen Namen-Anker ein:

     dokumentA.html:
     
     In addition to the many state parks, Maine is also home to 
     <a href="MaineStats.html#ANP">Acadia National Park</a>.

Sehen Sie das Zeichen nach dem Häckchen (hash, #) als Kennzeichen innerhalb des MaineStats.html Bestandes. Dieses Kennzeichen sagt Ihrem Browser, welche Zeile im oberen Rande des Fensters, sobald der Link aktiviert ist, gezeigt werden muß. Mit anderen Worten, die erste Zeile des neuen Browserfensters muß die Kopfzeile 'Acadia National Park' sein.

Anschließend machen Sie einen Namen-Anker (In diesem Vorbild "ANP")in MaineStats.html:

    <H2><A NAME="ANP">Acadia National Park</a></H2>

Mit diesen beiden Elementen auf dem entsprechendem Platz, können Sie einen Leser direkt zum Acadia Abschnitt in MaineStats.html schicken.

Achtung: Sie können ansich keine Verknüpfungen mit bestimmten Teilen eines Bestandes machen, es sei denn Sie haben die Befugnis in diesem Bestand zu schreiben, oder der Bestand beinhaltet schon Namenanker. In diesem Dokument könnten Sie z.B. solche Verknüpfungen machen. Sollte es jedoch keine Namenanker beinhalten, könnten sie nichts im Quellenbestand verändern, da Sie keine Schreibbefugnis haben.

Verknüpfungen mit bestimmten Teilen innerhalb des vorliegenden Dokumentes

Die Technik ist dieselbe, nur daß der Bestandsname ausgelassen wird.

Für die Verknüpfung mit dem ANP Anker innerhalb des Bestandes MaineStats, geben Sie ein:

    ...Mehr Information über den <A HREF="#ANP">Acadia National Park</a> 
    finden Sie in einem anderen Abschnitt.

Versichern Sie sich davon, daß das <A NAME=> Label auf der Stelle im Dokument steht, wo Sie hinspringen wollen. (<H2><A NAME="ANP">Acadia National Park</a></H2>).

Namenanker sind vorallem dann zu empfehlen, wenn Sie erwarten daß der Leser den Bestand als Ganzes ausdrucken will, oder wenn Sie eine Reihe kurzer Berichte in einem Dokument zusammenfassen wollen.

Mailto (E-Mail)

Sie können dem Leser das verschicken von E-mails einfacher machen, indem Sie das mailto Attribut in einem Hyperlink benutzen. Das Ganze sieht so aus:

<A HREF="mailto:emailinfo@host">Name</a>

zum Beispiel:

<A HREF="mailto:meike@flevoland.to">Flevoland.to</a>

Um ein Postfenster zu öffen, das bereits die Einstellung hat, ein E-mail an Meike zu verschicken.

Bilder im Text

Die meisten Browser können Bilder innerhalb eines Textes wiedergeben, voorausgesetzt es sind X Bitmap, GIF oder JPG Bestände. Jedes Bild hat eine bestimmte Ladezeit und verlangsamt die Wiedergabe des Dokumentes - es sollten darum nicht zu große (Groß im Sinne von Bits und Bites) Bilder im Dokument enthalten sein. Wählen Sie darum sorgfältig die Bilder aus, die Sie in Ihrem Dokument haben wollen.

Um ein Bild im Text einzuschließen, geben Sie folgendes ein:

    <IMG SRC=ImageName>

Hierbei ist der ImageName die URL des Bildes (Image).

Der Syntax für die <IMG SRC> URL's ist der des Ankers HREF identisch. Wenn der Bestand des Bildes ein GIF-Bestand ist, geben Sie .gif im Bestandsnamen ein. Bestände von X Bitmap Bildern müssen mit .xbm enden; JPG Bilder schließen mit .jpg oder .jpeg; und Portable Network Graphic Bestände enden mit .png.

Die Größe eines Bildes

Sie können zwei andere Attribute an das <IMG> Label hinzufügen, um dem Browser das Format des Bildes, das mit dem Text geladen wird, anzugeben. Die Attribute HEIGHT und WIDTH geben Ihrem Browser den Auftrag, die benötigte Menge Pixels (Bildpunkte) freizulassen.

Um z.B. ein Selbstportrait im Dokument zu zeigen, geben Sie folgendes ein:

    <IMG SRC=selbstportrait.gif HEIGHT=100 WIDTH=65>

Achtung: Manche Browser benutzen die HEIGHT und WIDTH Attribute um Bilder auszurecken oder zu verkleinern, wenn die angegebenen Werte nicht genau übereinstimmen mit den Werten des Bildes. Das kann sehr komisch und verzerrt aussehen, und manchmal sind die Bilder dann nicht mehr erkennbar.
Achten Sie also darauf, daß Sie die genauen Werte des Bildes in diesen Attributen angeben (die Werte können Sie mithilfe von diversen graphischen Programmen feststellen).

Setzen eins Bildes

Sie haben verschieden Möglichkeiten um ein Bild wiederzugeben. Die Bilder können abgesondert vom Text, Links, Rechts, in der Mitte oder auch mitten im Text stehen. Probieren Sie verschiedene Möglichkeiten aus um zu sehen wie dei Information am Besten rüberkommt und es am Besten aussieht.

Setzen eines Textes mit Bild
Die Standardeinstellung setzt die unterste Seite des Bildes auf eine Linie mit dem folgenden Text, wie Sie hier sehen können. Sie können, durch die ALIGN= Attribute, TOP und CENTER zu gebrauchen, das Bild an die obere Seite oder in die Mitte eines Abschnittes versetzen. (

Dieser Text steht mit der oberen Seite eines Bildes auf einer Zeile. (<IMG SRC = "dronweb2.gif" ALIGN=TOP>). Achten Sie darauf, daß der Browser eine Zeile auf die Höhe des Bildes setzt und an der Unterseite des Bildes mit dem Text weitergeht.

Dieser Text ist zum Bild zentriert.(<IMG SRC = "dronweb2.gif" ALIGN=CENTER>). Und auch jetzt ist nur eine Zeile zentriert, der Rest steht unter dem Bild.

Bilder ohne Text
Um ein Bild ohne einen Text zu zeigen (z.B. ein Logo), können Sie am Besten einen abgesonderten Abschnitt von dem Bild machen. Indem Sie das Attribut ALIGN= im Abschnitt benutzen, bekommen Sie das Bild auf den gewünschten Platz.

<p ALIGN=CENTER>
<IMG SRC = "dronweb2.gif height=168 width=168">
</p>

Wird zu:

Das Bild ist zentriert und dieser Abschnitt fängt dadrunter links an.

Text anstelle der Bilder

Manche World Wide Web Browser können keine Bilder lesen, aber es gibt auch Leute die, wegen der Ladezeit, das Laden der Bilder in Ihrem Webbrowser aussetzen. HTML ist mit einem Mechanismus vorsehen, der es den Menschen doch möglich macht zu lesen, was sie nicht als Bild sehen können.

Das ALT Attribut macht es möglich, Text anstelle der Bilder wiederzugeben. Zum Beispiel:

    <IMG SRC="UpArrow.gif" ALT="Up">

UpArrow.gif ist hier das Bild eines Pfeiles, der nach oben zeigt. Mit einem Programm, das Bilder zeigt, sehen Sie den Pfeil der hoch zeigt, in anderen Programmen ist nur das Wort Up sichtbar. Wenn Sie mit der Maus auf dem sichtbaren Pfeil stehenbleiben, können Sie ebenfalls das Wort Up lesen. Das ist sehr nützlich, wenn Sie bei einem Bild noch etwas extra erläutern wollen.

Hintergrundfiguren

Bilder können auch als Hintergrund der Website benutzt werden. Manche Leute finden das schön, andere wieder nicht. Sorgen Sie auf jeden Fall immer dafür, daß der Hintergrund nicht zu aufdringlich ist und der Text lesbar bleibt.

Hintergrundbilder können aus einer einfachen Struktur bestehen, oder aus einem Objekt (wie z.B. ein Logo). Eine Hintergrundfigur besteht aus einem einzelnen Bild, das immer wieder wiederholt wird.

Darum benötigen Sie im Prinzip für den Hintergrund auch nur ein kleines Bild. Ein Browser kann durch Stapeln (tiling) das Bild über den gesamten Bildschirm wiederholen. Wenn Sie folgendes Hintergrundlabel benutzen, füllt Ihr Browser automatisch die ganze Seite.

Das Label um einen Hintergrund einzufügen ist: <BODY> mit dem Attribut:

<BODY BACKGROUND="Bestandsname.gif">

Hintergrundfarbe

Die Standardeinstellung zeigen den Browsern schwarzen Text auf weißem Hintergrund. Sie können beide Elemente verändern. Schauen Sie sich immer die Website nochmal an, um zu überprüfen ob der Text noch zu Lesen ist!

Sie können mit den Attributen des <BODY> Labels die Farbe des Textes (text), der Verknüpfungen (link), besuchter Verknüpfungen (visited links) und aktiver Verknüpfungen (active links) verändern. Zum Beispiel:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

aus dieser Einstellung ergibt sich ein Fenster mit schwarzem Hintergrund (BGCOLOR), weißem Text (TEXT) und silberen Hyperlinks (LINK).

Die Zahl mit den sechs Ziffern gibt den RGB - Wert (Rot, Grün, Blau) der Farbe wieder. Eigentlich sind die sechs Ziffern eine Kombination aus drei Zahlen mit zwei Ziffern, die die Menge der Rot's, Blau's und Grün's in hexadezimalen Werten von 00 bis FF wiedergeben. 000000 z.B. ist schwarz (die Nullen geben an, das hier keine Farbe vorhanden ist), während FF0000 knallrot ist und FFFFFF weiß (vollständige Farbenverteilung). Diese Ziffer - und Buchstabenkombinationen sind ziemlich kompliziert, aber zum Glück gibt es ein paar Websites, die Auskunft geben können: i

ColorPro Web server
Yahoo's links to documents on backgrounds
Sie können als Hintergrundfarbe auch einfach 'white', 'black', 'navy' oder eine andere Farbe (in Englisch) angeben. Allerdings sind Sie auf diese Weise abhängig von den vorgegebenen Farben Ihres Programmes und nicht jeder ist damit zufrieden.

Externe Bilder, Geräusche oder Bewegungen

Es besteht die Möglichkeit, Bilder als abgesondertes Dokument zu öffnen, wenn der Benutzer einen Link aktiviert (Textlink oder Bilderlink). Dies wird ein 'externes Bild' genannt, und gibt Ihnen die Möglichkeit Seiten mit einer niedrigen Ladezeit zu gestalten, ohne langsame, große Bilder.

Um ein externes Bild in den Text einzufügen benutzen Sie:

    <A HREF="selbstportrait.gif">verknüpfungsanker</A>

Auch können Sie ein kleineres Bild als Link zu einem größeren Bild benutzen:

     <A HREF="grbild.gif"><IMG SRC="klbild.gif"></A>

Der Leser sieht das klbild.gif Bild und klickt darauf um den grbild.gif Bestand zu öffnen.

Gebrauchen Sie denselben Syntax um Verknüpfungen mit externen Animationen, Filmen oder Geräuschen zu machen. Der einzige Unterschied zu den Bildern hierbei sind die Bestandsnamen.

<A HREF="AdamsRib.mov">Link-Anker</A>

Verweist zu einem QuickTime Movie. Ein paar Bestandsnamen und Ihre Verweisungen sind:

File Type	Extensie
text	`.txt`
HTML Dokument	`.html`
GIF Bild	`.gif`
TIFF Bild	`.tiff`
X Bitmap Bild	`.xbm`
JPG Bild	`.jpg` or `.jpeg`
PostScript Bestand	`.ps`
AIFF Geräuschebestand	`.aiff`
AU Geräuschebestand	`.au`
WAV Geräuschebestand	`.wav`
QuickTime movie	`.mov`
MPEG movie	`.mpeg` of `.mpg`

Halten Sie sich immer Ihr Publikum und dessen Möglichkeiten vor Augen. Die meisten UNIX-Computer können z.B. keine QuickTime Movies abspielen.

Tabellen

Bevor die <PRE> Labels für Tabellen entwickelt waren, mußten Autoren sehr sorgfältig mit Ihren Möglichkeiten Tabellen zu machen umgehen. Innerhalb der Labels mußten die Leertasten gezählt werden und das halb fertige Werk immer wieder angeschaut werden. Tabellen können eine sehr gute Presentation liefern, aber auch die Kreatieven unter uns haben damit besondere Gestaltungsmöglichkeiten.

Eine Tabelle hat Überschriften, in denen erklärt werden, was in den Zeilen und Kolommen steht, Reihen mit Informationen und Zellen für jedes Unterteil. In der folgenden Tabelle umfaßt die erste Kolomme den Kopf mit der Überschrift, jede Reihe erklärt ein HTML-Label und jede Zelle umfaßt ein Label oder erklärt eine Funktion.

Tabellen
Element	Beschreibung
`<TABLE>` ... `</TABLE>`	Definiert eine Tabelle in HTML. Ist das `BORDER` Attribut anwesend, wird die Tabelle mit einem Rand gezeigt.
`<CAPTION>` ... `</CAPTION>`	Definiert die Überschrift der Tabelle. Die Standardposition ist zentriert über der Tabelle. Das Attribut `ALIGN=BOTTOM` kann benutzt werden, um den Title unter die Tabelle zu setzen. Achtung: Jedes Gestaltungslabel kann in der Überschrift benutzt werden.
`<TR>` ... `</TR>`	Spezifiziert eine Zeile innerhalb der Tabelle. Sie können für die ganze Zeile Standardattribute definieren: `ALIGN` (`LEFT`, `CENTER`, `RIGHT`) en/of `VALIGN` (`TOP`, `MIDDLE`, `BOTTOM`). Für mehr Information siehe Tabellen - Attribute am Ende der Tabelle.
`<TH>` ... `</TH>`	Definiert eine Kopfzeilen - Zelle. Standard wird dieser Text fettgedruckt und in die Mitte gesetzt. Diese Zellen können andere Attributen umfassen, um den Charackter der Zelle und/oder des Inhaltes zu bestimmen. Für mehr Information siehe Tabellen - Attribute am Ende der Tabelle.
`<TD>` ... `</TD>`	Definiert eine Datenzelle. Standard ist der Text dieser Zelle links gesetzt und senkrecht zentriert. Diese Zellen können andere Attributen umfassen, um den Charackter der Zelle und/oder des Inhaltes zu bestimmen. Für mehr Information siehe Tabellen - Attribute am Ende der Tabelle.

Tabellen Attribute
NOTE: Attribute innerhalb von `<TH>` Zellen, ... `</TH>` oder `<TD>` ... `</TD>` Zellen definiert , umfassen Standardsetzungen innerhalb von `<TR>` ... `</TR>`.
Attribut	Beschreibung
`ALIGN (LEFT, CENTER, RIGHT)` `VALIGN (TOP, MIDDLE, BOTTOM)` `COLSPAN=`n `ROWSPAN=`n `NOWRAP`	Waagerechte Setzung einer Zelle. Senkrechte Setzung einer Zelle. Die Menge (n) der Kolommen in einer Zelle. die Menge (n) der Reihen in einer Zelle. Ausschalten der Wortüberlappung in einer Zelle.

Allgemeine Tabellengröße

Die allgemeine Tabellengröße sieht folgendermaßen aus:

<TABLE>                                     <== Beginn der Tabellendefinition

<CAPTION> Überschrift/Inhalt </CAPTION>       <== Definition der Überschrift

<TR>                                        <== Beginn der ersten Reihen - Definition
<TH> Zelleninhalt </TH>                    <==Erste Zelle einer Reihe (Kopf)

<TH> Zelleninhalt </TH> <== Letzte Zelle in einer Reihe (Eines Kopfes)l</TR> <== Ende der ersten Reihendefinition <TR> <== Anfang der zweiten Reihendefinition <TD> Zelleninhalt </TD> <== erste Zelle der zweiten Reihe

<TD> Zelleninhalt </TD> <== Letzte Zelle in der zweiten Reihe </TR> <== Ende der zweiten-Reihendefinition

<TR> <== Beginn der letzten-Reihendefinition <TD> Zelleninhalt </TD> <== Erste Zelle in der letzten Reihe ... <TD> Zelleninhalt </TD> <== Letzte Zelle in der letzten Reihe </TR> <== Ende der letzte Reihendefinition </TABLE> <== Ende der Tabellendefinition

Die <TABLE> und </TABLE> Labels müssen Die gesamte Tabellenbeschreibung umgeben. Das erste Element ist CAPTION, das auch weggelassen werden darf. Dann folgen ein paar Reihen, definiert durch die <TR> und </TR> Labels. Innerhalb einer Reihe Können Sie ein paar Zellen durch die <TD>...</TD> oder <TH>...</TH> Labels definiert haben. Jede Reihe iener Tabelle wird einzeln beschrieben. Dadurch wird es einfach solche Tabellen zu machen, wie die vorhergehende, in der jede Zelle mehrere Kollommen beinhalten kann.

Tabellen für untabularische Information

Sie können Tabellen auch für untabularische Information gebrauchen. Das macht man z.B. durch in eine Tabelle ohne Rand Bilder aneinander zu heften, die miteinander ein Ganzes bilden, jedoch unabhängig voneinander eine Verknüpfung mit einem Anderen Dokument (oder einem Teil davon) haben können. (image map) Auch Tabellen mit Rand können in Kombination mit Bildern schöne Resultate abliefern. Probieren Sie es einfach mal aus!

Formulare

Web-Formulare geben Lesern die Möglichkeit, Information zu geben auf die der Server aktiv reagieren kann. So können Sie z.B. E-Mailadressen von Leuten sammeln um Information an Leute zu verschicken, die darum gefragt haben. An jeden, der seine oder ihre Adresse eingibt, müssen Sie Information verschicken und die betreffende Adresse in einer Database speichern.

Der Prozess hereinkommender Information wird meistens durch ein "script" geregelt.

Die Formulare selbst sind nicht schwierig herzustellen, sie folgen derselben Logik wie andere HTML-Labels. Das Schwierigste ist das Schreiben der Scripts, die die hereinkommende Information verarbeiten.

Fehler suchen

Vermeidung überlappender Labels

Schauen Sie sich dieses HTML-Vorbild mal an:

    <B>Dies ist ein Vorbild von  <DFN>überlappenden </B> HTML-Labels.</DFN>

Das Wort überlappende umfaßt sowohl die <B>, als auch die <DFN> Labels. Ein Browser kann hierdurch sehr in Verwirrung geraten und Dinge nicht mehr so wiedergeben, wie Sie es ursprünglich entworfen haben.

Im allgemeinen gilt die Regel, überlappende Labels so gut wie möglich zu vermeiden. Gebrauchen Sie die Labels immer als Paar. Wenn Sie in der Gestaltung der HTML-Dokumente damit rechnen (durch z.B. Zeilen zwischen den einzelnen Reihen in denen sie ein neues Label gebrauchen freizulassen ) können Sie die Paare leicht wieder zurückfinden.

Lagerung von Verknüpfungen und Charakterlabes

Das HTMLprotokoll gibt Ihnen die Möglichkeit, Verknüpfungen innerhalb anderer Labels zu machen:

    <H1><A HREF="Zielpunkt.html">Mein Text</A></H1>

Sie dürfen KEINE HTML-Labels innerhalb eines Ankers benutzten:

    <A HREF="Zielpunkt.html">
    <H1>Mein Text</H1>
    </A>

Obwohl die meisten Browser das zweite Vorbild unterstützen, ist es kein offizieller HTML-Ausdruck. Es ist also möglich, daß Ihr Bestand dadurch jetzt oder in der Zukunft nicht lesbar ist. Wenn Sie zweifeln, können Sie sich am Besten die HTML-Spezifikationen durchlesen (Siehe 'für mehr Information' hierdrunter).

Charakterlabels verändern den Text innerhalb anderer Elemente:

    <UL>
    <LI><B>Ein fettgedruckter Begriff</B>
    <LI><I>Ein cursiver Begriff</I>
    </UL>

Vermeiden Sie den Gebrauch von anderen Elementen. So können Sie z.B. schnell in Versuchung geraten Kopfzeilen innerhalb einer Liste zu benutzen um die Schrift größer zu machen:

    <UL>
    <LI><H1>Große Kopfzeile</H1>
    <LI><H2>Kleinere Kopfzeile</H2>
    </UL>

Obwohl manche Browser dieses Vorbild unterstützen ist es ebenfalls kein HTML-Ausdruck. Das Netscape <FONT> Label, welches es ermöglicht Buchstabengröße zu verändern, ist zwar auch kein echter HTML-Ausdruck, wird aber allgemein akzeptiert und auch unterstützt.

Charakterformgebende Labels können im Allgemeinen auch nicht doppelt benutzt werden. So würde man z.B. erwarten daß

    <B><I>Stück Text</I></B>

Fett und cursiv wiedergegeben wird. Manche Browser tun das auch, andere wiederum geben nur das innere Label wieder.

Die letzten Schritte

Überzeugen Sie sich von den Coden

Bevor Sie ein Dokument auf das Internet setzen, müssen Sie sicher sein, daß alle Unterteile auch funktionieren. Vorallem die Verknüpfungen (Auch die Namenanker) müssen funktionieren. Im Idealfall lassen Sie erst jemanden anders das Dokument lesen und ausprobieren, bevor Sie es als "fertig" bezeichnen.

Sie können Ihren Bestand durch HTML-controle service nochmal überprüfen lassen. Dieser wird Ihnen sagen, ob Ihr Bestand den gängigen HTML-Spezifikationen entspricht. Wenn Sie sich Ihrer Sache nicht so sicher sind, kann dies ein sehr lehrsames Hilfsmittel sein. Dieser Service bietet Ihnen die Möglichkeit zu wählen bis zu welcher Höhe Ihr Text dem HTML-Standard entsprechen soll (streng, niveau 2, niveau 3).

Bilder als "Dummie's"

Wenn ein <IMG SRC> Label zu einem Bild verweist, das nicht besteht, erscheint ein 'Dummie' oder ein kleines rotes Kreuz an dessen Stelle. Wenn dies während der letzten Kontrolle passiert, schauen Sie schnell nach ob das Bild überhaupt besteht, daß die Verknüpfung die richtige URL hat und daß der Bestandscode richtig steht (world-readable). Dann nochmal ausprobieren!

Schauen Sie Ihre Bestände nach

Wenn der Inhalt eines Bestandes lange auf seinem Platz bleibt, ist das kein Problem. Bestände die veränderliche Information befassen oder über Thema's gehen, die oft verändert werden, müssen immer wieder überprüft werden!

Dieses "updaten" ist vorallem sehr wichtig bei Beständen die z.B. ein Wochenprogramm befassen. Bestände die "altmodisch" geworden sind, wegwerfen!

Unterschiedliche Browser

Webbrowser geben HTML-Elemente unterschiedlich wieder. Denken Sie immer daran, daß nicht alle gebrauchten Codes von allen Browsern unterstützt werden. Codes die nicht erkannt werden, werden im Allgemeinen einfach nicht beachtet.

Sie können eine Menge Zeit und Arbeit in das perfektionieren Ihrer Seite auf Ihrem eigenen Browser stecken. Doch Ihr Werk mit einem anderen Browser betrachtet, kann manchmal (vollkommen) anders aussehen. Benutzten Sie darum HTML so korrekt wie möglich und schauen Sie sich Ihre Seite auch mal auf einem anderen Computer an (Auch die Bildschirmgröße kann sich manchmal erschreckend auswirken).

Kommentar in den Beständen

HTML bietet Ihnen auch die Möglichkeit ein paar Kommentarzeilen in die HTML-Quelle einzufügen. Diese Zeilen sind dann, genau wie in Programmen, nur im Quellencode sichtbar und haben weiterhin auch keinerlei Auswirkungen auf die Funktion der Seite.

So fügen Sie einen Kommentar ein:

    <!-- Ihr Kommentar -->

Sie müssen die Ausrufzeichen und Striche benutzen!

Für mehr Information

Dieser Kurs ist nur eine einfache Einführung in HTML, kein komplettes Nachschlagewerk. Hierdrunter finden Sie ein paar "online" Adressen in denen Sie mehr Information finden können. Lassen Sie auch nicht Ihren Buchhandel in der Stadt oder die Stadtsbibliothek in Vergessenheit geraten. Dort lassen sich nämlich auch mittlerweile ziemlich gute Bücher und Zeitschriften über HTML und das Internet finden.

Folgende Adressen bieten Auskunft über den Gebrauch von HTML:

Andere Einführungen

Dasselbe wie dieser Kurs:

How to Write HTML Files
Introduction to HTML
the Yale Center for Advanced Instructional Media pages
a compilation of WWW Authoring Resources from Yale
The HTML Quick Reference Guide, beinhaltet eine Zusammenfassung aller HTML-Codes

Andere "online" Nachschlagewerke:

Officiele HTML specificatie
A description of SGML, the Standard Generalized Markup Language
NCSA HTTPd server software information
Tables (=tabellen) on the Web
Background images
Forms and the essential scripts explained
Java, eine Sprache mit vielen Möglichkeiten

Anfängerkurs HTML 0.01 /meike@flevoland.to / Mai 2002

Die Einleitung

Wichtige Begriffe

Was wird in diesem Kurs nicht behandelt?

HTML-Version

HTML-Dokumente

Was ist ein HTML-Dokument

HTML-Editors (Bearbeiter)

Was sind Labels(Tags)

Das minimale HTML-Dokument

Ein praktisches Hilfsmittel

Gestaltungslabels

HTML

HEAD

TITEL

BODY

Headings(Kopfzeilen)

Abschnitte (Paragraphen)

Listen

Vorgestalteter Text

Erweiterte Zitate

Adressen

Zeile trennen/Hausadressen

Waagerechte Linien

Schriftarten

Logischer/Physischer stijl

Logischer Stil

Physischer Stil

Escape Series (auch 'besondere Zeichen')

Verknüpfungen (Links)

Relative Pfadnamen/absolute Pfadnamen

URLs

Verknüpfungen mit bestimmten Teilen

Verknüpfungen zwischen Teilen verschiedener Bestände

Verknüpfungen mit bestimmten Teilen innerhalb des vorliegenden Dokumentes

Mailto (E-Mail)

Bilder im Text

Die Größe eines Bildes

Setzen eins Bildes

Text anstelle der Bilder

Hintergrundfiguren

Hintergrundfarbe

Externe Bilder, Geräusche oder Bewegungen

Tabellen

Tabellen

Tabellen Attribute

Allgemeine Tabellengröße

Tabellen für untabularische Information

Formulare

Fehler suchen

Vermeidung überlappender Labels

Lagerung von Verknüpfungen und Charakterlabes

Die letzten Schritte

Überzeugen Sie sich von den Coden

Bilder als "Dummie's"

Schauen Sie Ihre Bestände nach

Unterschiedliche Browser

Kommentar in den Beständen

Für mehr Information

Andere Einführungen

Andere "online" Nachschlagewerke: