 |
Verschiedene Strukturelemente
ÜberschriftenEs existieren sechs verschiedene Stufen von Überschriften, die entsprechenden Tags lauten<H1> <H2> <H3> <H4> <H5> <H6> <H1> ist die oberste Stufe, mit ihr sollte der Beginn einesDokumentes überschrieben werden.
Kommentare
Kommentare werden vom Browser ignoriert und nicht angezeigt. Sie sind
eingeschlossen von <!-- und -->
und dürfen nicht verschachtelt werden.
Zeilenumbruch
Leerzeichen und -zeilen in HTML-Dokumenten werden vom Browser in der Regel
ignoriert, da Informationen über Zeilenwechsel und Beginn eines
neuen Abschnittes in den einzelnen Strukturanweisungen enthalten sind. Sollte
es einmal nötig sein, einen Zeilenumbruch zu erzwingen, so geschieht dies
mit Hilfe der <BR>-Anweisung.
Absatz
Der Beginn eines neuen Absatzes wird durch <P> markiert, er
führt beim Browser dazu, einen vertikalen Abstand einzufügen und
den Text zu Beginn einer neuen Zeile fortzuführen. Der Absatzende-Tag
</P> hat bei nachfolgenden P-Tag keine Wirkung.
Waagrechte Trennlinie
der Tag<HR> zeichnet eine waagrechte Trennlinie. Mit den Optionen
WIDTH und SIZE können Länge und Dicke eingestellt werden. Die Linie
wird zentriert, falls sie kürzer als die Seite ist. Die Breite kann sowohl in
Pixeln, als auch in % der Seitenbreite angegeben werden. EIn paar Beispiele:
<HR width=50%>
<HR width=100 size=5>
Mit den bisher behandelten Tags lassen sich bereits einfache Dokumente gestalten.
Der folgende Text zeigt ein Musterdokument mit HTML-Auszeichnungen:
<HTML>
<HEAD><TITLE>Die erste Seite</TITLE></HEAD>
<BODY>
<H1>Überschrift Ebene 1</H1>
<H2 align=right>Überschrift Ebene 2, align=right</H2>
<H3 align=left>Überschrift Ebene 3, align=left</H3>
<H4 align=center>Überschrift Ebene 4, align=center</H4>
<H5>Überschrift Ebene 5</H5>
<H6>Überschrift Ebene 6</H6>
<P>
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
<P>
Will man einen Zeilenumbruch, muß man das angeben:<BR>
Hier kommt dann ein ganz normaler Fliesstext.....<BR>
Hier kommt dann ein ganz normaler Fliesstext.....<BR>
Hier kommt dann ein ganz normaler Fliesstext.....<BR>
Hier kommt dann ein ganz normaler Fliesstext.....<BR>
Hier kommt dann ein ganz normaler Fliesstext.....<BR>
</BODY>
</HTML>
Vom Browser dargestellt sieht er dann so aus (wobei der Titel nicht sichtbar ist):
Überschrift Ebene 1
Überschrift Ebene 2, align=right
Überschrift Ebene 3, align=left
Überschrift Ebene 4, align=center
Überschrift Ebene 5
Überschrift Ebene 6
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Will man einen Zeilenumbruch, muß man das angeben:
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Vorformatierter Text
Vorformatierter Text kann in <PRE> und </PRE>
eingeschlossen werden. Text innerhalb dieser Tags wird in der Regel in einem
nichtproportionalen Zeichensatz dargestellt, wobei alle Leerzeichen und -zeilen
sowie Zeilenumbrüche direkt übernommen werden. Sämtliche HTML-Tags
behalten jedoch ihre Gültigkeit und werden auch innerhalb des
<PRE>-Blocks dargestellt.
Einrückungen, längere Zitate
Einrückungen und längere Zitate werden am besten in einem eigenen
Abschnitt dargestellt. Dies erreicht man durch <BLOCKQUOTE>
und </BLOCKQUOTE>. Text innerhalb dieser Tags wird normalerweise
vom Browser eingerückt oder in Schrägschrift und als separater Absatz
mit etwas Abstand zum normalen Text angezeigt.
Verschiedene Schriftarten
Unter HTML gibt es zwei verschiedene Typen von Schriftarten, physikalische und
logische. Erstere geben direkt die Art der Schrift an (fett, schräg, usw.)
während letztere sagen, um welche Art Text es sich handelt und dem Browser
die Entscheidung über die tatsächliche Darstellung überlassen.
Alle Schriftartenbefehle benötigen ein Start- und ein Ende-Tag.
Folgende physikalische Schriftarten existieren:
- <TT>
- Nichtproportionaler Typewriter-Zeichensatz
- <B>
- Fettschrift
- <I>
- Italic oder Schrägschrift
- <U>
- unterstrichen (Achtung! Manche Browser stellen Links unterstrichen dar!)
- <S>
-
durchgestrichen
Folgende logische Schriftarten stehen zur Verfügung:
- <EM>
- Hervorgehoben, wird dargestellt durch Schrägschrift.
- <STRONG>
- Stärkere Hervorhebung, wird dargestellt durch Fettschrift.
- <CODE>
- Wird verwendet für
Befehle und Quellcode, dargestellt durch
nichtproportionalen Zeichensatz.
- <SAMP>
- Eine Folge von Buchstaben.
- <KBD>
- Wird bei Anleitungen zur Darstellung des
vom Benutzer einzugebenden Textes verwendet.
- <VAR>
- Für die Darstellung von Variablennamen.
- <DFN>
- Für die Definition von Ausdrücken, wird dargestellt durch
Fett- oder Schrägschrift.
- <CITE>
- Wird verwendet für Zitate, dargestellt durch Schrägschrift.
Neuere Browser beherrschen auch die folgenden Tags:
- <SUB>
- Teile der Schrifttiefergestellt.
- <SUP>
- Höhergestellte Teile der Schrift.
- <BIG>
- Ein Wort größer.
- <SMALL>
- Ein Wort kleiner.
Listen
Zur Zeit stehen folgende Listen-Typen zur Verfügung:
- Einfache Listen (Unnumbered Lists):
-
Diese werden eingeleitet durch
<UL>. Sie zählen die einzelnen Elemente ohne laufende Numerierung
auf, stattdessen wird ein neutrales Aufzählungszeichen vorangestellt. Welches
Zeichen dazu verwendet wird ist Browser-abhängig, möglich sind z.B. Punkte, Striche
oder Sternchen. Jedes Listenelement wird eingeleitet durch <LI>. Zum Beispiel:
- Erstes Element
- Zweites Element
- Drittes Element
Als Parameter bei <UL> und bei <LI> können Sie mit TYPE=xxx den Typ des Aufzählungssymbol
angeben. Weiter unten sehen Sie die drei Möglichkeiten: TYPE=DISK für den schwarzen
Punkt, TYPE=CIRCLE für den Kreis und TYPE=SQUARE für das Quadrat.
- Aufzählende Listen (Ordered Lists):
-
Sie sind den einfachen Listen
sehr ähnlich, nur werden bei ihnen die Listenelemente fortlaufend durchnumeriert.
Das zugehörige Listen-Tag lautet <OL>. Zum Beispiel:
- Erstes Element
- Zweites Element
- Drittes Element
Auch bei der "Ordered List" haben Sie die Möglichkeit, mit TYPE=xxx das
Aufzählungssymbol festzulegen (bei <OL> und bei <LI>). und zwar:
TYPE=1 für Ziffern
TYPE=A für Großbuchstaben
TYPE=a für Kleinbuchstaben
TYPE=i für kleine römische Ziffern
TYPE=I für große römische Ziffern
Außerdem kann man mit dem Parameter START=nnn den Startwert der Aufzählung
und mit VALUE=nnn bei jedem einzelnen <LI> den Wert des Aufzählungspunktes
festlegen. nnn ist dabei immer numerisch anzugeben, die Umwandlung in Buchstaben oder
römische Ziffern erfolgt automatisch.
- Beschreibende Listen (Descriptive Lists):
-
Elemente einer beschreibenden Liste bestehen aus dem Titel
der zu beschreibenden Sache, welche
in irgendeiner Form besonders hervorgehoben wird, sowie dem Beschreibungstext. Eine
beschreibende Liste wird eingeleitet durch <DL>, der Titel durch
<DT> und der Beschreibungstext selbst durch <DD>.
EinBeispiel bildet diese Aufzählung.
Es existieren noch weitere Listentypen, die jedoch von den Browsern recht
stiefmütterlich behandelt werden. <MENU> ist eine in der
Darstellung etwas kompaktere Form von <UL>, <DIR>
ist für eine Liste von kürzeren Elementen gedacht, die auch in
mehreren Spalten auf dem Bildschirm dargestellt werden können.
Listen können beliebig verschachtelt werden, man sollte sich jedoch nicht darauf
verlassen, daß der Browser die einzelnen Verschachtelungsebenen hinreichend
eindeutig darstellen kann (z. B. durch Wechsel des Aufzählungszeichens):
- Erstes Element
- Erstes Unterelement
- Zweites Unterelement
- Drittes Unterelement
- Viertes Unterelement
- Zweites Element
- Erstes Unterelement
- Erstes Unter-Unterelement
- Zweites Unter-Unterelement
- Drittes Unter-Unterelement
- Zweites Unterelement
- Erstes Unter-Unterelement
- Zweites Unter-Unterelement
- Drittes Unter-Unterelement
- Drittes Element
Links zu anderen Dokumenten
Ein Link wird eingeleitet durch <A (A steht für "Anchor"), gefolgt
von einem oder mehreren der folgenden Parameter:
- HREF Gibt einen URL auf ein Zieldokument an, auf das beim Anwählen des
Links gesprungen werden soll. Nur durch Angabe des HREF-Parameters wird
ein Link aktiv und selektierbar.
- NAME Wird verwendet, um innerhalb eines Dokumentes eine Markierung
anzugeben, welche im HREF-Parameter angegeben werden kann. Somit können
einzelne Stellen in einem Dokument (z. B. Unterkapitel) direkt angesprungen werden.
- REL Ermöglicht es, eine "Beziehung" zu dem Zieldokument zu
definieren.
- REV Gibt ebenfalls eine Beziehung zwischen Dokumenten an, jedoch in der
entgegengesetzten Richtung, d. h. ein Link von A nach B mit REL="X"
ist das gleiche wie ein Link von B nach A mit REV="X".
- URN Gibt eine eindeutige Kennummer für das Dokument an, um dem Browser
die Möglichkeit zu geben, das doppelte Laden von Dokumenten zu erkennen und zu
verhindern. Dies ist noch in der Entwicklung.
- TITLE Gibt den Titel des Zieldokumentes an, damit der Browser diesen
darstellen kann. Dieser Titel sollte identisch sein mit dem durch
<TITLE> definierten im Kopf des Zieldokumentes.
Parameter, die Leer- oder Sonderzeichen enthalten, müssen in doppelte
Anführungszeichen (") eingeschlossen werden. Es macht nichts
aus, wenn man grundsätzlich die Optionswerte in " einschließt.
Alle diese Parameter sind optional, jedoch macht ein Link ohne HREF- oder
NAME-Parameter nicht viel Sinn.
Danach wird das Tag mit > beendet, gefolgt vom Text oder
der Grafik, welche den Link repräsentieren sollen. Abgeschlossen wird der
Link durch </A>.
Hier einige Beispiele:
- Ein typisches Link zu einer anderen WWW-Seite:
Willkommen bei der <A HREF="https://info.cern.ch/hypertext/WWW/MarkUp/MarkUp.html">
Mutter aller WWW-Seiten</A>.
Durch den Browser formatiert könnte das etwa so aussehen:
Bei Links innerhalb des Angebots eines Servers sollte man die vollständige
URL mit Angabe des Rechnernamens (z. B. https://www.online-de.de) vermeiden,
denn bei solchen Angaben erfolgt jedesman eine Anfrage zum Nameserver. Ein
lokales Link sollte also z. B. "tips/index.html" lauten. Zu beachten
ist auch, daß der Schrägstrich Verzeichnistrenner ist, nicht der Backslash(\),
der bei DOS und Windows verwendet wird.
Bei den lokalen Links gibt es auch noch einen Unterschied: Ein Link kann vom
Stammverzeichnis des Serverangebots ausgehen. In diesem Fall beginnt die Angabe
des Dateipfades mit einem Schrägstrich (/). Man nennt dies einen absoluten
Pfad. Man kann aber auch vom aktuellen Verzeichnis ausgehen, z. B.
"news/index.html". Es wird dann in das Verzeichnis "news" gewechselt und die
Datei "index.html" an den Browser geschickt. Will man dann wieder ins übergeordnete
Verzeichnis aufsteigen, kann die Verzeichnisangabe ".." verwendet werden (wie bei DOS
und Windows), z. B. "index.html". Da sich solche Links auf das aktuelle
Arbeitsverzeichnis beziehen, nennt man sie relative Links. Die relativen Links
haben den Vorteil, daß man komplette Verzeichnisstrukturen innerhalb der Dateistruktur
des Servers "umziehen" kann, ohne daß eine einzige WWW-Seite geändert werden muß.
Natürlich können Sie nicht nur HTM-Dokumente verlinken, sondern jede
beliebige Datei. Bei Links auf Bilder (z. B. A HREF="image.gif">Ein Bild )
wird einfach die Bilddatei angezeigt. Man kann damm mit dem "Back"-Button des
Browsers zur ursprünglichen Siete zurückkehren. Handelt es sich um
Links auf andere Dateien, beispielsweise PDF-Dateien, gepackte Archive (.zip),
Programme (.exe), Word-Dokumente (.doc) oder Excel-Tabellen (.xls), dann
hängt es von den Einstellungen des Browsers und von den zur Verfügung
stehenden Plug-Ins ab, was geschieht. Bei sicherer Browsereinstellung fragt der
Browser nach, ob das Dokument geöffnet oder auf Platte gespeichert werden soll,
im anderen Fall wird nur nachgefragt, wenn der Dateityp dem Browser nicht bekannt ist,
und ansonsten die Datei mit dem passenden Programm (MS Word, Acrobat Reader, usw.)
automatisch geöffnet. Damit haben Sie auch die Möglichkeit, Dateiarchive
per WWW-Interface anzubieten.
|
| |
DIENSTE
