Mein kleiner HTML-Kurs, Version 1.0
-----------------------------------
(c) by http://McSquirrel.istcool.de

Dieser Kurs ist all denjenigen gewidmet, die schon immer einmal ihre
eigenen HTML-Seiten "von Hand" erstellen wollten, es aber bisher nicht
geschafft haben, entweder weil die im Web vorhandenen Anleitungen zu
kompliziert oder undurchsichtig waren, oder aber weil Programme wie
FrontPage, DreamWeaver oder ähnliche ihnen die Arbeit so bequem
gestalteten, dass sich nicht die Notwendigkeit ergab, den doch etwas
komplizierteren HTML-Code durchschauen zu müssen. Besonders möchte ich
diesen Kurs allerdings Deepblue widmen, einer guten Freundin, der ich einst
in einem längeren Telefongespräch aus nicht mehr ganz nachvollziehbaren
Gründen die HTML-Sprache zu erklären begann, was mich auf die Idee zu
diesem Kurs brachte.

Mein Dank gilt darüberhinaus Stefan Münz, der mit seinem Werk "SELFHTML"
eine übersichtliche Dokumentation zum Thema HTML erstellt hat, welche er
unter http://www.teamone.de/selfhtml kostenlos zur Verfügung stellt. Für
Bildschirmmuffel sind dort auch Informationen zu seinem gleichnamigen Buch
aus dem Franzis-Verlag zu finden. SELFHTML hat mir beim Erlernen von HTML
sehr geholfen, und dank seinem Befehls- und Stichwortverzeichnis ist es für
mich zu einem unverzichtbaren Nachschlagewerk geworden, das ich jedem
HTML-Interessierten wärmstens empfehlen kann.

Weiterhin möchte ich Ulli Meybohm für seinen "HTML EDITOR Phase 5²" danken,
den er auf seiner Homepage http://www.meybohm.de zum kostenlosen Download
anbietet. Sein Windows-Programm ist eine hilfreiche Unterstützung bei der
HTML-Programmierung mit reichhaltigem Funktionsumfang.

-Manuel Haim, im Februar 2003



TEIL 1: EINFÜHRUNG

Was ist überhaupt HTML?
-----------------------
HTML steht für "HyperText Markup Language" (sprich: Hai-Per-Text Mark-ab
Längwitsch). Das ist die Befehlssprache, in der Webseiten "programmiert"
werden. Neben der Anzeige von Text bietet HTML viele Befehle, die sich auf
Formatierung und Design einer Internetseite auswirken. Das Interessanteste
an HTML ist und bleibt aber wohl die Möglichkeit, mehrere Seiten
miteinander zu verknüpfen: Im Text treten dann sogenannte "Hyperlinks"
(sprich: Hai-Per-Links) auf, also Textbereiche, die speziell markiert sind
(z.B. in einer anderen Farbe), und bei deren Auswahl sich eine andere
HTML-Seite öffnet. Auf diese Weise lassen sich Informationen sinnvoll
sortieren und rasch auffinden. Außerdem können HTML-Seiten auf jedem
halbwegs modernen Rechner dargestellt werden.


HTML ist nicht schwer!
----------------------
Eine HTML-Seite ist im Prinzip trotzdem nichts anderes als eine ganz
einfache Textdatei. Beim Surfen mit dem InternetExplorer kann man sich nach
einem Klick mit der rechten Maustaste auf den Seiteninhalt den "Quelltext"
anzeigen lassen, andere Browser bieten eine ähnliche Funktion
("Seitenquelle anzeigen", "Show Source" etc.). Was jetzt noch massig
kompliziert aussieht, wollen wir schon bald verstehen lernen.
Alles, was wir zum Erstellen einer HTML-Datei benötigen, ist also ein ganz
einfacher Texteditor. Unter Windows tut dies zum Beispiel der "Editor", der
im Startmenü unter "Zubehör" zu finden ist. Wer will, kann natürlich auch
Word oder jede andere Textverarbeitung verwenden: Zu achten ist nur darauf,
dass Ihr dann Eure Dateien als "Nur-Text"-Dateien (*.txt) abspeichert.
Damit eine HTML-Datei von der Software (z.B. InternetExplorer) auch als
solche erkannt wird, muss ihr Dateiname auf ".htm" oder ".html" enden. Aus
"MeineDatei" wird also "MeineDatei.htm".
*Fußnote: Hinweis für Windows-Benutzer*



TEIL 2: ERSTE SCHRITTE

Die Grundregeln von HTML-Befehlen
---------------------------------
Damit Euer Internet-Browser (sprich: Brauser) in den Textdateien die
HTML-Befehle vom normalen Text unterscheiden kann, werden alle Befehle als
Elemente, so genannte "HTML-Tags" (sprich: Täggs), geschrieben. Dazu wird
der entsprechende Befehl zwischen den Zeichen < und > geschrieben, zum     
Beispiel:

<befehl>

Viele Befehle umklammern einen bestimmten Textbereich: sie haben ein Start-
und ein End-Element. Auf diese Weise wird z.B. eine Überschrift oder ein
Absatz definiert. Das Startelement wird wie oben beschrieben mit den
Zeichen < und > gebildet, das Endelement steht zwischen den Zeichen </ und
>. Ein Beispiel:

<befehl>Text</befehl>

Ein Befehl kann je nach Belieben in Groß- oder in Kleinbuchstaben
geschrieben werden. Und das sind auch schon die wichtigsten Regeln!


Unsere erste HTML-Datei
-----------------------
Ein paar Befehle müssen in jeder HTML-Datei auftauchen. Sie bilden das
Grundgerüst der Datei, welches wie folgt aussieht:

<html>

<head>
<title></title>
</head>

<body>
</body>

</html>


Die einzelnen Befehle haben dabei folgende Bedeutung:
<html> und </html> beschreiben den HTML-Bereich. Weil im Prinzip eine
HTML-Datei von Anfang bis Ende eine HTML-Datei ist, umklammern die beiden
Elemente auch die gesamte Datei.
<head> und </head> beschreiben den Kopf-Bereich der HTML-Datei. In diesem
Bereich können verschiedene Befehle untergebracht werden, die wir später
noch kennenlernen. Ein Befehl muss aber immer vorhanden sein, damit wir
eine gültige HTML-Datei vorliegen haben: der title-Befehl.
Zwischen <title> und </title> können wir einen Text eingeben, der den Titel
der HTML-Datei angibt und außerdem in der Titelzeile des Browsers angezeigt
wird, wenn wir die HTML-Datei betrachten.
Nun bleibt noch der Bereich übrig, der mit <body> und </body> umklammert
wird. In diesen Bereich können wir all das hineinschreiben, was auf der
HTML-Seite angezeigt wird. Allerdings neben den Zeichen a-z, A-Z,
().,;-!§$%/=? und 0-9 nur wenige Sonderzeichen erlaubt. Probleme gibt es
vor allem mit < > & ". Mehr dazu jedoch gleich. Zunächst noch eine einfache
Beispieldatei:

<html>

  <head>
    <title>Meine erste HTML-Seite</title>
  </head>

  <body>
    Juchhu, ich kann HTML!
  </body>

</html>

Zur Übersichtlichkeit habe ich in obigem Beispiel die Elemente mit zwei,
vier usw. Leerzeichen einmal passend eingerückt, und so ein öffnendes
Element auf jeweils gleiche Höhe mit dem dazugehörigen schließenden Element
gebracht. Das muss man nicht tun (man könnte sogar alles hintereinander in
eine einzige Zeile schreiben), aber es kann bei längeren Dokumenten helfen,
den Überblick zu bewahren.


Zeilenumbruch
-------------
In HTML ist es völlig egal, wie viele Leerzeichen und leere Zeilen man
zwischen den einzelnen Elementen lässt: Der Browser lässt zwischen allen
Worten stets ein Leerzeichen und beginnt in der Anzeige erst dann eine neue
Zeile, wenn der Fensterrand erreicht ist. Oft wird es aber nötig, einen
solchen Zeilenumbruch von Hand einzufügen. Dazu bedient man sich des
HTML-Befehls br (von "break" = umbrechen), der kein schließendes Element   
hat:

<html>

  <head>
    <title>Zeilenumbruch-Beispiel</title>
  </head>

  <body>
    Juchhu, ich kann HTML!<br>Zweite Zeile.
  </body>

</html>


Sonderzeichen
-------------
Einige Zeichen sind schon Bestandteil der HTML-Sprache und können deswegen
nicht im anzuzeigenden Fließtext verwendet werden. Ansonsten würde der
Browser beim Zeichen < ja einen HTML-Befehl erwarten. Warum aber solche
Zeichen wie das deutsche Ä nicht verwendet werden können, hat einen anderen
Hintergrund, aber eine lange Geschichte. Jedes Zeichen in einer Textdatei
kann einen von 256 verschiedenen Werten annehmen. Allerdings sind nur die
ersten 128 möglichen Zeichen eindeutig festgelegt und werden von allen
Rechnersystemen gleich dargestellt. Unser Ä ist nicht in diesen ersten 128
Zeichen enthalten. Die weiteren 128 Zeichen wurden in MS-DOS unter anderem
für einfache und doppelte Linien genutzt. In DOS liegt das Ä auch an einer
anderen Stelle des Zeichensatzes als in Windows. Wer noch ein paar uralte
deutsche Textdateien aus DOS-Zeiten hat und diese unter Windows öffnet,
sieht den Effekt: Überall, wo ein Ä auftaucht, wird ein völlig anderes
Zeichen dargestellt. Weil HTML aber auf vielen verschiedenen
Rechnersystemen lesbar sein soll, wurde für die erweiterten 128 Zeichen
bzw. für alle Sonderzeichen unter HTML eine spezielle Maskierung
eingeführt, die die Sonderzeichen eindeutig definiert. Viele Sonderzeichen
haben in der HTML-Sprache einen einprägsamen Namen erhalten. Dieser Name
wird zwischen den Zeichen & und ; eingeschlossen:

&lt; entspricht < (von "less than" = weniger als)
&gt; entspricht > (von "greater than" = größer als)
&amp; entspricht & (von "ampersand")
&quot; entspricht " (von "quotation marks")

&nbsp; entspricht einem Leerzeichen, welches nicht am Zeilenende getrennt
wird (von "non-breakable space"). Durch das Zusammenfügen mehrerer &nbsp;
kann man größere Lücken zwischen zwei Worten oder am Zeilenanfang          
erstellen.

&auml; entspricht ä (von "a Umlaut")
&Auml; entspricht Ä
&ouml; entspricht ö
&Ouml; entspricht Ö
&uuml; entspricht ü
&Uuml; entspricht Ü
&szlig; entspricht ß

&euro; entspricht dem Euro-Zeichen

Darüberhinaus können seit einiger Zeit alle Zeichen und Sonderzeichen
alternativ über ihre einheitlich festgelegte Unicode-Nummer (sprich:
Juni-Kot) angesprochen werden. Der Name setzt sich dann zusammen aus dem
Zeichen # (Nummern-Symbol) und der Nummer:

&#32; (Leerzeichen)
&#33; entspricht !
usw.

Die Nummern 0 bis 31 machen übrigens nur selten Sinn, da sich hinter ihnen
Steuerzeichen verbergen. Für Profis gilt: Eine Nummer kann auch hexadezimal
angegeben werden, indem nach dem # noch ein x steht (z.B. &#x20; &#x21;    
usw.).


Hyperlinks und Attribute
------------------------
Die Stärke von HTML liegt, wie schon oben beschrieben, darin, mehrere
Seiten miteinander zu verbinden. Dies geschieht mittels Hyperlinks. Das
sind Textbereiche, die man auswählen oder anklicken kann.
Der HTML-Befehl für einen Hyperlink heißt a (von "anchor" = Anker). Dies
ist außerdem unser erster Befehl, den wir nicht allein für sich ausführen
können. Verständlicherweise muss unser Browser wissen, wie die Datei heißt,
die beim Anklicken des Hyperlinks geöffnet werden soll. Man kann sagen: Dem
Befehl a muss ein Argument übergeben werden, oder auch: Ein Attribut muss
gesetzt werden.

Verschiedene HTML-Befehle benötigen verschiedene Attribute. Ein notwendiges
Attribut des a-Befehls ist href (von "hyper reference" =
Hypertext-Referenz). Diesem Attribut muss ein Wert zugewiesen werden, was
mit dem Ist-gleich-Zeichen = geschieht. Der Wert selbst sollte in
Anführungszeichen " gesetzt werden. Das ganze sieht dann so aus:

<html>

  <head>
    <title>Hyperlink-Beispiel</title>
  </head>

  <body>
    Juchhu, ich kann HTML!<br>
    <a href="Datei2.htm">Klick mich!</a>
  </body>

</html>

Das schließende Element enthält bei einem HTML-Befehl niemals Attribute -
es signalisiert ja nur das Ende des Bereichs. Der Hyperlink wird vom
Browser in der Regel besonders markiert, beispielsweise erscheint der Text
in dunkelblauer Farbe und ist unterstrichen.

Manchmal soll sich die Datei oder Internet-Seite, auf die der Hyperlink
verweist, in einem neuen Fenster öffnen. Für diesen Fall hat der a-Befehl
das target-Attribut (sprich: Taar-Dschätt). Diesem muss der Wert "_blank"
übergeben werden:

<html>

  <head>
    <title>Hyperlink-Beispiel</title>
  </head>

  <body>
    Juchhu, ich kann HTML!<br>
    <a href="Datei2.htm" target="_blank">Klick mich!</a>
  </body>

</html>

Mit dem target-Attribut kann man noch mehr machen, dazu aber später mehr
(Stichwort: Frames, sprich: Fräihms).


Kommentare
----------
Besonders in größeren Seiten kann es hilfreich sein, sich ein paar Notizen
in der HTML-Datei zu machen, die allerdings im Browser nicht angezeigt
werden. Oder aber man möchte etwas an der Seite verändern und klammert
bestehenden Text aus der Anzeige aus. Solche Notizen werden in HTML als
Kommentare geschrieben. Ein Kommentar kann auch HTML-Elemente enthalten,
ohne dass diese angezeigt werden. Er beginnt mit <!-- und endet mit -->


<html>

  <head>
    <title>Kommentare</title>
  </head>

  <body>
    Zeile 1.<br>
    <!--Diesen Text sieht man nicht.-->
    Zeile 2.<br>
    Zeile 3.<br>
    <!--
      Und hier koennen sogar mehrere Zeilen Kommentar stehen.
      <br><br><br>Dieser Zeilenumbruch wird auch nicht dargestellt.
      Eine tolle Sache.
    -->
    Zeile 4.<br>
  </body>

</html>


Nun haben wir auch schon alle nötigen Grundkenntnisse erworben, um unsere
eigenen HTML-Seiten zu erstellen. Die Resultate wären aber noch ein wenig
trist und farblos. Daher wenden sich die nächsten Abschnitte voll und ganz
dem Design von HTML-Seiten zu.



TEIL 3: SEITENLAYOUT

Fett, kursiv und unterstrichen
------------------------------
Drei einfache Befehle ermöglichen die Darstellung von Text mit den
Eigenschaften fett, kursiv und unterstrichen.
Der Befehl b (von "bold") macht einen Text fett.
Der Befehl i (von "italic") macht einen Text kursiv (schräggestellt).
Der Befehl u (von "underline") unterstreicht einen Text.

<html>

  <head>
    <title>Fett, kursiv und unterstrichen</title>
  </head>

  <body>
    <b>Dieser Text ist fett.</b><br>
    <i>Dieser Text ist kursiv.</i><br>
    <u>Dieser Text ist unterstrichen.</u><br>
    <b><i><u>Dieser Text ist fett, kursiv und unterstrichen</u></i></b>
  </body>

</html>

Die vierte Zeile im obigen Beispiel stellt einen Text zugleich fett, kursiv
und unterstrichen dar. Zu beachten ist, dass immer zuerst das Element
geschlossen wird, welches zuletzt geöffnet wurde. <b><i><u>Text</u></b></i>
wäre also falsch.


Kennzeichnen von Überschriften
------------------------------
Um Überschriften darzustellen, bieten sich die Befehle h1, h2, h3, h4, h5
und h6 (von "heading" = Überschrift) an. h1 erzeugt eine besonders große
Überschrift, während h6 eine besonders kleine Überschrift erzeugt. Eine
Überschrift erzwingt übrigens automatisch einen Zeilenumbruch, weswegen wir
nicht unbedingt einen weiteren br-Befehl benötigen.

<html>

  <head>
    <title>&Uuml;berschriften</title>
  </head>

  <body>
    <h1>Gro&szlig;e &Uuml;berschrift</h1>
    Toller Spa&szlig;, das.

  </body>

</html>

Im Beispiel habe ich von ein paar Sonderzeichen Gebrauch gemacht. Erkennt
Ihr sie wieder?


Trennlinien
-----------
Ähnlich wie der Befehl br einen Zeilenumbruch erzeugt, trennt auch der
Befehl hr (von "horizontal rule" = Querlinie) zwei Zeilen voneinander,
jedoch mit einer sichtbaren horizontalen Linie.

<html>

  <head>
    <title>Trennlinien</title>
  </head>

  <body>
    Hier sieht man zwei optisch voneinander getrennte Texte:<br><br><br>
    Text eins.<hr>Text zwei.
  </body>

</html>


Absätze und Ausrichtung
-----------------------
HTML ermöglicht uns, einen Textabschnitt zu einem Absatz zusammenzufassen.
Dies geschieht mit dem Befehl p (von "paragraph" = Absatz). Solche Absätze
werden voneinander als mit einer leeren Zeile getrennt angezeigt.

<html>

  <head>
    <title>Abs&auml;tze</title>
  </head>

  <body>
    <p>If two witches were watching two watches,
      which witch would watch which watch?
      If two witches were watching two watches,
      which witch would watch which watch?
      If two witches were watching two watches,
      which witch would watch which watch?
      If two witches were watching two watches,
      which witch would watch which watch?
    </p>
    <p>Absatz 2 Absatz 2 Absatz 2 Absatz 2 Absatz 2
    Absatz 2 Absatz 2 Absatz 2 Absatz 2 Absatz 2
    Absatz 2 Absatz 2 Absatz 2 Absatz 2 Absatz 2
    Absatz 2 Absatz 2 Absatz 2 Absatz 2 Absatz 2
    </p>
  </body>

</html>

Früher war es einmal modern, das schließende Element des p-Befehls einfach
wegzulassen. Das ist aber nicht empfehlenswert - auch wenn es der Browser
richtig anzeigen mag - da der p-Befehl einen Bereich bezeichnet.

Dem p-Befehl kann außerdem ein Attribut namens align ("align" =
Ausrichtung, sprich: Allein) übergeben werden. Damit kann die
Textausrichtung bestimmt werden. Gültige Werte sind "left" (linksbündig),
"right" (rechtsbündig), "center" (mittig) sowie "justify" (Blocksatz,
bündig an beiden Seitenrändern).

<html>

  <head>
    <title>Abs&auml;tze</title>
  </head>

  <body>
    <p align="left">Dieser Text ist linksb&uuml;ndig.</p>
    <p align="justify">Dieser Absatz schlie&szlig;t an beiden
    Seitenr&auml;ndern b&uuml;ndig ab.
    Absatz 2 Absatz 2 Absatz 2 Absatz 2 Absatz 2
    Absatz 2 Absatz 2 Absatz 2 Absatz 2 Absatz 2
    Absatz 2 Absatz 2 Absatz 2 Absatz 2 Absatz 2
    Absatz 2 Absatz 2 Absatz 2 Absatz 2 Absatz 2
    </p>
    <p align="center">
    Und dieser Text steht in der Mitte.
    </p>
  </body>

</html>

Ein Nachteil des p-Befehls ist, dass sein Bereich keine weiteren
sogenannten "Blockelemente" enthalten darf. Von den von uns kennengelernten
Elementen sind das Absätze selbst (p), die Überschriften (h1 bis h6), die
Trennlinie (hr), sowie die noch später behandelten Tabellen (table) und
Aufzählungslisten (ul).

Der Befehl div (von "division" = Bereich) ist eine Alternative zum
p-Befehl, der ja eigentlich nur für Text gedacht ist. Der mit div
umschlossene Bereich darf so ziemlich alles enthalten, was in HTML
existiert. Außerdem unterstützt der div-Befehl auch das Attribut align,
welches wir beim p-Befehl kennengelernt haben.

<html>

  <head>
    <title>Abs&auml;tze</title>
  </head>

  <body>
    <div align="center">
      <p>If two witches were watching two watches,
        which witch would watch which watch?
        If two witches were watching two watches,
        which witch would watch which watch?
        If two witches were watching two watches,
        which witch would watch which watch?
        If two witches were watching two watches,
        which witch would watch which watch?
      </p>
      <p>Absatz 2 Absatz 2 Absatz 2 Absatz 2 Absatz 2
      Absatz 2 Absatz 2 Absatz 2 Absatz 2 Absatz 2
      Absatz 2 Absatz 2 Absatz 2 Absatz 2 Absatz 2
      Absatz 2 Absatz 2 Absatz 2 Absatz 2 Absatz 2
      </p>
    </div>
  </body>

</html>

Das obige Beispiel zeigt die beiden Absätze aus dem ersten Absatz-Beispiel
auf der Seitenmitte an.



Textfarbe und Hintergrundfarbe
------------------------------
Text- und Hintergrundfarbe sind Attribute des body-Befehls, denn sie gelten
für das gesamte Dokument.
Zunächst aber etwas über Farbangaben in HTML. Farben werden in HTML über
ihren englischen Namen oder hexadezimal angegeben.

Gültige Farbnamen neben black, white, red, orange, yellow, green, blue,
violet, purple etc. findet man am besten in SELFHTML im
Stichwortverzeichnis unter "Farbnamen". Dort gibt es eine Liste mit 16
Standardfarben und 120 weitere Farben.

Farben lassen sich mit dem Hexadezimal-Wert aber auch frei wählen. Dabei
wird die Intensität der drei Farben Rot, Grün und Blau des Bildschirms
angegeben. Das uns wohl geläufigste Zahlensystem ist das Dezimal- oder auch
Zehner-System. Eine Stelle von einer Zahl kann Werte von 0 bis 9 annehmen,
darauf wird sie wieder zu 0 und die nächsthöhere Stelle erhöht sich um 1.
Im Hexadezimal-System kann eine Stelle 16 verschiedene Werte annehmen. Das
entspricht dann den Zeichen 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a(=10), b(=11),
c(=12), d(=13), e(=14), f(=15). Die Farbe wird in der Form "#RRGGBB"
angegeben, wobei RR den Rotanteil, GG den Grünanteil und BB den Blauanteil
der Farbe angibt. Jeder Farbanteil kann, da er zweistellig ist, 16x16=256
verschiedene Werte annehmen. Zum Auffinden einer Farbe kann ein
Grafikprogramm nützlich sein. Unter Windows kann selbst Paint benutzt
werden, wo unter "Farben" -> "Palette bearbeiten" der Punkt "Farben
definieren" angewählt werden kann. Die Werte unter Rot, Grün und Blau muss
man dann nur noch umrechnen:
In SELFHTML findet man im Stichwortverzeichnis unter "Farbauswahl" einen
Farbwähler, der aus dezimalen Zahlenwerten die Hexadezimalwerte errechnet
und die Farben anzeigt.

Der body-Befehl hat verschiedene Attribute zur Farbwahl:
bgcolor bestimmt die Hintergrundfarbe (von "background color")
text bestimmt die Textfarbe
link bestimmt die Farbe eines noch nicht besuchten Hyperlinks (von "link" =
Verweis)
vlink bestimmt die Farbe eines bereits besuchten Hyperlinks (von "visited
link" = besuchter Verweis)
alink bestimmt die Farbe eines Verweises, der gerade ausgewählt oder
angeklickt wird (von "activated link" = aktivierter Verweis).

Hier ein einfaches Beispiel:

<html>

  <head>
    <title>Farben</title>
  </head>

  <body bgcolor="white" text="green">
    Das ist meine Seite.
  </body>

</html>

Und nun mit Hexadezimal-Werten:

<html>

  <head>
    <title>Farben</title>
  </head>

  <body bgcolor="#ffffff" text="#008000" link="#0000ff" vlink="#000080"    
alink="#800080">
    Das ist meine Seite.<br>
    <a href="Datei2.htm">Zweite Seite</a>
  </body>

</html>

Die Farben für den Hintergrund und den Text wurden hier übernommen.
Hyperlinks sind blau, besuchte Hyperlinks dunkelblau und aktivierte
Hyperlinks violett.


Schriftgröße, -farbe und -art ändern
------------------------------------
Für die drei genannten Zwecke gibt es den font-Befehl. Dieser kennt die
Attribute size (Schriftgröße), color (Farbe) und face (Schriftart). size
kann einen Wert zwischen 1 (klein) und 7 (groß) haben, wobei 3 die
Standardgröße ist. Die Werte für color werden, wie im vorigen Abschnitt
beschrieben, gebildet. face erhält als Wert den Namen einer Schriftart,
also z.B. "Verdana", "MS Sans Serif", "Times New Roman", "Tahoma", "Arial"
oder "Century Gothic". Es können auch mehrere Schriftarten (durch Komma
getrennt) angegeben werden, was dann hilfreich ist, wenn die erste
Schriftart nicht gefunden werden kann.

<html>

  <head>
    <title>Farben</title>
  </head>

  <body bgcolor="white" text="black">
    <font face="Verdana" size="2" color="green">
      Das ist meine Seite.<br>
      <a href="Datei2.htm">Zweite Seite</a>
    </font>
    <a href="Datei3.htm"><font face="Verdana" size="2" color="green">Seite 
Drei</font></a>
  </body>

</html>

Der font-Befehl überschreibt für den gewählten Bereich die Farbeinstellung
des body-Befehls, setzt die Farbeinstellungen mit dem schließenden Element
aber wieder zurück. Ein a-Befehl setzt die Farbeinstellungen für den
gewählten Bereich auf seinen Standard, weshalb der Text "Zweite Seite" hier
zwar in der gewählten Schriftart, jedoch in einer anderen Farbe (meist
blau) dargestellt wird. Der Text "Seite Drei" erscheint hingegen in grün.

Für den Befehl font gelten ähnliche Beschränkungen wie für den Absatzbefehl
p . Er darf keine Elemente wie p, hr, h1 bis h6 oder Tabellen (table)
enthalten. Um aber die Schriftart für ein gesamtes Dokument zu setzen,
eignet sich der Befehl basefont, der die selben Attribute hat wie font,
aber kein schließendes Element.

<html>

  <head>
    <title>Farben</title>
  </head>

  <body bgcolor="white" text="black">
    <basefont face="Verdana" size="2" color="green">
    <p>
      Das ist meine Seite.<br>
      Tolle Sache, oder?
    </p> 
    <a href="Datei2.htm">Zweite Seite</a>
    <a href="Datei3.htm"><font face="Verdana" size="2" color="green">Seite 
Drei</font></a>
  </body>

</html>



TEIL 4: EINBINDEN VON GRAFIKEN

Allgemeines
-----------
Kommen wir endlich zu einem Punkt, auf den Ihr sicher schon lange gewartet
habt. Bilder können das Aussehen einer Webseite positiv beeinflussen, wenn
man sie gekonnt anwendet. Auf wenn man hier sehr kreativ werden mag: Ein
paar Punkte gilt es zu beachten. Die Grafiken müssen im Format .GIF, .JPG
oder .PNG (selten) vorliegen. Für klare wenigfarbige Zeichnungen ist GIF
gut geeignet, während JPG für Fotos empfehlenswert ist. Aber auch auf die
Dateigröße sollte man Acht geben: Ab 100kB wird ein Modem-Benutzer
ungeduldig. Dann heißt es: Auflösung verringern, Farbtiefe verringern (bei
GIF) oder Kompressionsrate erhöhen (bei JPG). Mit ein wenig Übung erzielt
man recht gute Effekte.


Hintergrundbild
---------------
Maßgebend für ein Hintergrundbild ist, dass es wenige starke Kontraste
bietet - sonst kann man den Text nur noch schlecht lesen. Auch die
Textfarbe sollte auf die Grafik abgestimmt sein (dunkle Schrift bei hellem
Bild, helle Schrift bei dunklem Bild). Als Hintergrundfarbe der HTML-Seite
sollte man bei heller Textfarbe eine dunkle Farbe angeben, damit der Text
auch gelesen werden kann, wenn die Bilddatei nicht geladen werden kann.

Hintergrundbilder werden dem body-Befehl im Attribut background
(=Hintergrund) übergeben und standardmäßig wie Kacheln aneinandergelegt
(das sollte man bei kleinen Bildern bedenken). Eine HTML-Datei mit
Hintergrundbild kann beispielsweise so aussehen:

<html>

  <head>
    <title>Hintergrundbild</title>
  </head>

  <body bgcolor="white" text="black" background="Bild.gif">
    Text
  </body>

</html>


Bilder im Text
--------------
Möchte man ein Bild in den Text setzen, so geschieht dies mit dem
img-Befehl. Der Name der Grafikdatei wird im src-Attribut angegeben.

<html>

  <head>
    <title>Hintergrundbild</title>
  </head>

  <body bgcolor="white" text="black" background="Bild.gif">
    Und hier bin ich mit meinen Freundinnen im Vergn&uuml;gungspark.<br>
    <img src="parkbesuch.jpg">
  </body>

</html>

Das Bild wird wie ein Wort des Textes behandelt und entsprechend           
positioniert.

Der img-Befehl hat aber noch weitere Attribute:
alt gibt einen Text an, der angezeigt wird, wenn die Grafik nicht geladen
werden kann.
title gibt einen Text an, der angezeigt wird, wenn der Mauszeiger auf dem
Bild verweilt. Ist title nicht angegeben, so wird der bei alt angegebene
Text angezeigt.
width und height geben Breite und Höhe der Grafik an.
border gibt an, wie viele Pixel breit der Rahmen um die Grafik sein soll.

<html>

  <head>
    <title>Hintergrundbild</title>
  </head>

  <body bgcolor="white" text="black" background="Bild.gif">
    Und hier bin ich mit meinen Freundinnen im Vergn&uuml;gungspark.<br>
    <img src="parkbesuch.jpg" width="400" height="300" alt="Parkbesuch"
title="Tina, Jule und ich im Wasserbob" border="2"><br>
    Mensch, das war ein Erlebnis!
  </body>

</html>

Ein weiteres Attribut namens align (=Ausrichtung) gibt die Ausrichtung der
Grafik an ("left" für den linken, oder "right" für den rechten Seitenrand)
bzw. die Ausrichtung des Textes um die Grafik ("top" für oben, "center" für
mittig oder "bottom" für unten). Es kann sinnvoll sein, zusammengehörige
Grafik und Text in einen Absatz mit dem p-Befehl zu stecken, damit bei
mehreren Grafiken nicht alle Grafiken ineinander geraten.
Mit hspace ("horizontal space" = Platz links und rechts) und vspace
("vertical space" = Platz oben und unten) kann die Anzahl von Pixeln
angegeben werden, die der Text Abstand von der Grafik hält.

Da ein img-Element wie normaler Text behandelt werden kann, folgt es auch
der Ausrichtung des Absatzes, in dem es steht.



Folgende Themen folgen in Kürze:
TEIL 5: Tabellen
TEIL 6: Frames

Außerdem in Planung:
CSS - HTML-Dokumente leichter formatieren mit Cascading Style Sheets