HTML-Kurs 1:

Einführung in HTML

eine Zusammenstellung von Helmut Krebs

Das Internet-Explorer-Logo verweist darauf, dass diese Möglichkeit nicht mit dem Netscape Navigator funktioniert.

Inhaltsübersicht

1. Grundlagen
2. Grundregeln der Befehlseingabe
3. Aufbau eines Dokuments
4. Absatzformatierung
5. Zeichenformatierung
6. Farbformatierung
7. Listen
8. Horizontale Linien
9. Tabellen
10. Grafikformatierung
11. Verknüpfung
Kontakt

Ich empfehle Ihnen, diesen kleinen Kurs mit Hilfe des "HTML-Editors" durchzuarbeiten. Es handelt sich dabei um ein Freeware-Programm, das Ihnen erlaubt, im Quellcode zu arbeiten und die Ergebnisse rasch in einem Browser zu betrachten. Der Editor enthält eine Fülle von Makrofunktionen, die Ihnen die Arbeit sehr erleichtern. Im Unterschied zu WYSIWIG-Editoren (Frontpage, Netscape Composer u. a.) werden die Makro-Befehle aber im Quelltext eingesetzt, sodass Sie stets die Kontrolle über Ihre Arbeit bewahren, und zwar entsprechend den Vorschriften des WWW-Konsortiums. Den HTML-Editor finden Sie im Internet unter folgender Adresse: www.meybohm.de/htmledit/index.html

Ein zweites sehr hilfreiches Werkzeug ist "SELFHTML". Hier handelt es sich um einen ausführlichen Kurs, der auch die HTML-Erweiterungen umfasst, also weit über meine Arbeit hinausgeht. Er ist sehr bequem als Nachschlagewerk zu benutzen. Download: www.teamone.de/selfhtml/

zur Inhaltsangabe

1. Grundlagen

Eine Seite nenne ich Dokument, eine Gruppe von Dokumenten, die miteinander durch Hyperlinks verknüpft sind, nenne ich Site (ausgesprochen sait). Eine kleine private Site nenne ich Homepage.

1.1 Eingabe mit einem Texteditor

HTML ist eine Programmsprache, die von sogenannten Browsern (z. B. Internet Explorer, Netscape Navigator, Opera) gelesen werden kann. Sie wird mit Hilfe einfacher Editoren als reine Textdatei erfasst und abgespeichert. Beim Abspeichern ist darauf zu achten, dass die Dateien keine Formatierungen im Hintergrund enthalten, wie sie z. B. bei Word vorgenommen werden. Als Editoren kommen alle in Betracht, die keine Formatierungen vornehmen, oder die eine Abspeicherung als reine Textdatei, "Nur-Text", erlauben.

Sie finden einen Editor als Beigabe von Windows-Betriebssystemen unter Programme\Zubehör\Editor.

1.2 Dateiendung

Die Dateiendungen lauten ".html" für solche Seiten, die im Internet durch Anwahl einer Adresse aufgerufen werden können oder ".htm" für solche, die innerhalb einer Site mittels Verknüpfungen aufgerufen werden. Wenn Sie nur "html" als Endung verwenden, machen Sie nichts falsch.

Wählen Sie für das Dokument, auf das eine Einwahl erfolgt, den Dateinamen "index.html"! Schreiben Sie alle Dateinamen mit Kleinbuchstaben und vermeiden Sie deutsche Sonderbuchstaben wie ä, ö, ü und ß!

1.3 Erlaubte Zeichen

Die Eingabe der Zeichen erfolgt fortlaufend untereinander. Es werden keine Zeilennummern vergeben.

Es können alle Zeichen des ASCII-Codes verwendet werden, d. h. im einzelnen:

• Buchstaben a-z, A-Z
• Ziffern 0-9
• Satzzeichen . , ; : ! ? ( ).

Alle anderen Zeichen sind Befehlen vorbehalten, auch das Kaufmanns-Und "&".

Statt der Sonderzeichen werden Codes eingegeben.

1.4 Übersicht der HTML-Codes für die deutschen Umlaute und einige andere Sonderzeichen:

zur Inhaltsangabe

2. Grundregeln für die Befehlseingabe

2.1 Die Form der Befehle

Ein Befehl heißt Tag (englisch ausgesprochen: täg). Er wird in spitze Klammern gesetzt:
    <tag>.

(Die Zeichenfolge "tag" selbst ist in Wirklichkeit kein Befehl.)

Nach der öffnenden spitzen Klammer liest der Browser die folgenden Zeichen als Befehl, den er nicht darstellt bis zur schließenden spitzen Klammer. Die Zeichen danach liest er als Text, den er unter Berücksichtigung des Befehlsinhalts darstellt und zwar so lange, bis ein Aufhebungsbefehl desselben Tags erfolgt. Er hat die Form:
    </tag>.

Zusammengenommen ergibt sich die Grundform des vollständigen Befehls:
    <tag>Text</tag>

Grundsätzlich werden alle Tags bis auf eine Ausnahme wieder aufgehoben, obwohl es Browser gibt, die fehlerverzeihend sind, also nicht stolpern, wenn die Aufhebung mal vergessen wurde.

2.2 Die Kombination von Befehlen

Für ein und denselben Textbereich können zugleich mehrere Befehle gelten. Sie werden nacheinander eingegeben und logischerweise in der umgekehrten Reihenfolge (=Klammer-Logik) wieder aufgelöst. Beispiel:
    <tag1><tag2>Text</tag2></tag1>

Nichtbeachtung der Klammer-Logik führt zu Fehlern. Es können theoretisch beliebig viele Tags ineinander geschachtelt werden. Falls es zu Widersprüchen untereinander kommen sollte, gelten letztlich die innersten oder es entsteht Mist.

2.3 Befehlsattribute

Nach den Zeichen für den Befehl können noch Angaben zu Attributen (Eigenschaften) des Befehls erfolgen. Sie werden in die selbe spitze Klammer gestellt. Attribute sind Variable, die verschiedene Werte annehmen können. Die Grundform eines solchen ausführlichen Befehls:
    <TAG attribut="attributwert"></TAG>

Erinnerung: Die Groß- und Kleinschreibung in unserem Beispiel dient nur der Kennzeichnung des Unterschieds von Befehl und Attribut; sie hat keine programmtechnische Bedeutung.

Da das Attribut ein Teil des Befehls ist, muss es bei der Auflösung des Befehls nicht wieder extra aufgeführt werden.

Es können auch mehrere Attribute innerhalb einer Klammer aufgelistet werden. Auch diese erfordern nur ein Auflösungs-Tag. Die Attribute werden durch Leerzeichen getrennt.

Die Anführungszeichen beim Attributwert kann auch fehlen.

2.4 Die Leerzeichen

Browser erkennen nur ein Leerzeichen auf einmal. Mehrere hintereinander lesen sie wie eines. Dies gilt sowohl für den Befehlsbereich als auch für den sichtbaren Text eines Dokuments.

2.5 Groß- und Kleinschreibung

Bei Tags sind Groß- und Kleinbuchstaben gleichbedeutend.

zur Inhaltsangabe

3. Der Aufbau eines Dokuments

3.1 Der Grundaufbau des HTML-Dokuments

Alle HTML-Dokumente werden wie folgt gegliedert:

<html>
    <head>
    </head>
    <body>
    </body>
</html>

Auch im Seitenaufbau gilt die Logik des Einklammerns. Ganz außen steht die Angabe, dass das Dokument in HTML zu lesen ist. Danach wird ein Head-Bereich definiert, ein Deklarationsteil, der Metainformationen enthalten wird, die nicht sichtbar sind, und zweitens ein Body-Bereich, der Dateikörper, in dem die sichtbaren Zeichen stehen werden.

Um die Ebenen der Befehlshierarchie zu kennzeichnen, werden Einrückungen vorgenommen. Sie dienen als Lesehilfe und haben keine Auswirkung auf das Dokument.

Im Head-Bereich sollte mindestens der Titel des Dokuments enthalten sein. Der Tag lautet
    <title></title>

Beispiel für eine komplette, wenn auch einfache Seite: aufbau.html:

<html>
    <head>
        <title>Meine erste Übungsseite</title>
    </head>
    <body>
Dies ist meine erste Übungsseite. Sie enthält noch keine eigenen Schrift-Formate. Der Zeilenumbruch wird automatisch vom Browser errechnet.
    </body>
</html>

3.2 Attribute des Body-Tags

Im Body-Tag lassen sich Attribute definieren, die für das ganze Dokument gelten.

Für den Browserhintergrund (bgcolor=backgroundcolor) und alle Schriften (text) können Farben bestimmt werden (siehe Abschnitt über die Farbformatierung). Der Hintergrund kann auch mit einer Grafik ausgekachelt werden (siehe Abschnitt über Grafiken).

Verknüpfungen in den Seiten unterschieden sich in drei Arten: link definiert die noch nicht besuchten Links, vlink (=visited links) die eben besuchten und alink (=activated links) die bereits besuchten (siehe Abschnitt über Verknüpfungen). Auch diese Attributwerte sind jeweils Farben (siehe Abschnitt über die Farbformatierung).

Die Standardfarbe für Schrift ist Schwarz (=#FFFFFF), für Browserhintergrund Weiß (=#000000). Diese werden ausgeführt, wenn keine Attribute gesetzt werden.

Beispiel:
    <BODY bgcolor="#FFFF00" text="#3300FF" link="#0000FF" vlink="#FF00FF" alink="#FF66FF"></BODY>

Neben den Farbdefinitionen kann innerhalb des -Tags auch eine Datei aktiviert werden, wenn die Seite aufgerufen wird. Diese Datei kann Töne enthalten, einen kleinen Film und so weiter.

Beispiel für Hintergrundformate im Bodytag: body.html

zur Inhaltsangabe

4. Absatzformatierung

4.1 Neue Zeile

    <br> (=line break) erzeugt eine neue Zeile. Dieses Tag muss nicht aufgelöst werden.

4.2 Neuer Absatz

    <p></p>(=paragraph) erzeugt einen neuen Absatz und schaltet eine Leerzeile zwischen den Absätzen.

Es verfügt über das Attribut align, mit dessen Hilfe wir die Ausrichtung bestimmen können. Die möglichen Werte sind "left" (links), "center" (mittig) und "right" (rechts). Ohne Attributsangabe wird linksbündig ausgeschlossen.

4.3 Das <div>-Tag

Mit <div> leiten Sie einen Bereich ein, in den Sie mehrere Elemente einschließen können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden </div> steht, wird als Teil des Bereichs interpretiert.

Einen solchen Bereich und alle seine enthaltenen Elemente können Sie mit dem Atrribut align im einleitenden <div>-Tag ausrichten. Mit align=center richten Sie den Bereich zentriert aus (align = Ausrichtung, center = zentriert), mit align=right rechtsbündig. Mit align=justify werden innere Elemente wie freistehender Text, Textabsätze oder Überschriften als Blocksatz ausgerichtet. Mit align=left erzwingen Sie die linksbündige Ausrichtung von Absätzen.

4.4 Das Pre-Tag

<pre></pre> erzeugt einen Absatz, der genau so dargestellt wird, wie der Quelltext aussieht. Hier werden ausnahmsweise mehrere Leerzeichen hintereinander auch dargestellt. Die Schriftart ist nichtproportional: Also, wie bei den Typen der Schreibmaschine ist alles gleich breit.

4.4 Das Blockquote-Tag

<blockquote></blockquote> erzeugt einen Absatz, der links eingezogen wird.

Beispiele für Absatzformatierungen: absatz.html:

zur Inhaltsangabe

5. Zeichenformatierung

5.1 Die Schriftauszeichnung

Textstellen können hervorgehoben werden:
    <b></b> (=bold) lässt die Schrift fett erscheinen,
    <i></i> (=italic) stellt die Schrift schräg,
    <u></u> (=underlined) unterstreicht Text. Verzichten Sie lieber auf diese Hervorhebungsart, da sie von Hyperlinks verwendet wird.
    <tt></tt> erzeugt eine dicktengleiche Schriftart, also Schreibmaschinentypen,
    <strike></strike> streicht durch,
     stellt hoch,
     stellt tief.

Alle Hervorhebungsbefehle lassen sich untereinander kombinieren.

5.2 Überschriften

Neben dem Grundtext können Sie sechs verschiedene Überschriften verwenden, die standardmäßig vorformatiert sind, sodass Sie also nichts weiter tun müssen, als sie aufzurufen. (Achtung: Manche Browser unterschieden nur bis zu vier Überschriften.) Die Tags lauten:
    <h1></h1>, <h2></h2> usw. bis <h6></h6>

Die Überschriften-Tags unterdrücken alle Formate zur Schrift, die bis hierher gegolten haben. Vorher geltende Grundschrift-Befehle müssen also geschlossen (siehe Font-Tag) und danach wieder aufgerufen werden.

Ein Überschrift-Tag erzeugt mindestens eine Leerzeile vorher und nachher.

5.3 Der <font>-Tag

Schrift lässt sich in all ihren Parametern (Schriftschnitt, -größe, -farbe, -auszeichnung) festlegen, wobei der Leser allerdings durch die Einstellung des Browsers auf die Schriftgröße Einfluss nehmen kann. Die Schriftgröße wird also nur relativ zu einem Normalwert definiert. Das nackte Font-Tag lautet:
    <font></font> Dies ist ein Basisbefehl, der noch nichts bedeutet, nur die Attribute ermöglicht.

Die Attribute sind: size (=Größe), face (=Schriftschnitt) und color (=Farbe):

    <FONT size="3"> </FONT> Diese Schriftgröße ist die normale. Größere Schriften erhalten Werte bis 7, kleinere bis 1. Relative Schriftgrößenangaben erhalten ein Plus- oder Minuszeichen und beziehen sich auf die Größe 3 (normal).

    <FONT size="+1"> </FONT> Die Größe +3 ist identisch mit 7, -2 identisch mit 1.

    <FONT face="Arial,Helvetica,SansSerif"></FONT> Hier können Sie Schriftarten anwählen. Um verschiedenen Fontlisten (PC, Mac) gerecht zu werden, können Sie gleichartige durch Kommata getrennt aufzählen.

    <FONT color="#..."> </FONT> Die Farbe wird nach dem RGB-Schema im Hexadeizimalcode definiert (siehe nächsten Absatz).

Alle Attribute können auf einmal in einer Klammer aufgerufen werden. Ansonsten muss jedesmal das Font-Tag aufgerufen und auch wieder geschlossen werden. Wenn Sie nacheinander mehrere Schriftattribute in eigenen Befehlen unterbringen, müssen alle mit dem schließenden Font-Tag aufgehoben werden. Beispiele:

    <FONT face="garamond" size="2" color="#FF0000">...</font>

    <FONT face="garamond"><FONT size=+1>...</FONT></FONT> Die beiden schließenden beziehen sich nach der Klammer-Logik in umgekehrter Reihenfolge auf die Schriftbefehle.

Die Formatierung der Schrift innerhalb des Body-Tags unterdrückt alle diesbezüglichen Hintergrundformate, z. B. auch die Farbdefinition "text" innerhalb des Body-Tags.

Beispiel für Schriftformatierung und Überschriften schrift.html:

<html>
<head>
    <title>Meine Übungsseite zur Schriftformatierung</title>
</head>
<body>
    <h1>Dies ist die größte Überschrift</h1>
    <h2>Dies ist die zweitgrößte Überschrift</h2>
    <h3>Dies ist die drittgrößte Überschrift</h3>
    <h4>Dies ist die viertgrößte Überschrift</h4>
    <h5>Dies ist die fünftgrößte Überschrift</h5>
    <h6>Dies ist die sechstgrößte Überschrift</h6>
    <FONT size="3" face="times" color="0000FF">Dies ist meine dritte Übungsseite. Sie enthält meine ersten Schrift-Formate. Der Zeilenumbruch wird automatisch vom Browser errechnet.
    </FONT>
</body>
</html>

zur Inhaltsangabe

6. Farbformatierung

6.1 Das RGB-Schema

RGB heißt Rot-Grün-Blau. Rot entspricht in etwa dem orangeroten Zinnober, Grün liegt etwa in der Mitte zwischen Gelb und Blau, und Blau ist in Wirklichkeit violettblau. Zum Vergleich: Bei den Druckfarben bilden die Werte Magenta (Kirschrot), Gelb (neutralgelb) und Cyan (türkisblau) die Grundfarben. Wenn die beiden Farbsysteme in einem Sechseck zueinander geordnet werden, bilden die RGB-Farben ziemlich genau die Komplementärfarben der Druckfarben.

Die Farben werden in unterschiedlicher Stärke auf einen Punkt des Bildschirms gestrahlt und dort zu einem Farbwert gemischt. Da sich die Farben im Bildschirm subtraktiv mischen, ergibt die Übereinanderlagerung aller drei Farben in voller Helligkeit die Farbe Weiß, ihr Fehlen die Farbe Schwarz.

Die drei Grundfarben können in HTML jeweils 256 (=2⁸) Farbwerte annehmen, das ergibt theoretisch 256³ (=16.777.216) verschiedene Farbtöne. Der Einfachheit halber arbeiten die meisten Programmierer aber standardmäßig mit jeweils 6 Lichtstärken, also mit 6³ (=216) verschiedenen Farben. Wenn Sie die 16 Millionen Zwischenwerte verwenden, muss Ihr Leser dann allerdings über eine leistungsfähige Grafikkarte verfügen, die den True-Color-Standard (16bit) unterstützt. Andernfalls werden die Farben auf die 256-Skala umgerechnet, was oft zu Verfremdungen führt.

6.2 Das Farb-Format

Ein Farbattribut hat folgende Form: color="#rrggbb". Dabei stehen die Buchstaben für die Helligkeitswerte von Rot, Grün und Blau in dieser Reihenfolge.

Die Codierung erfolgt im Hexadezimalsystem (Ziffern 0 bis 9 und A bis F). Für die drei Grundfarben sind jeweils zwei Stellen reserviert, die beide die Werte 0 bis F durchlaufen können. Der niedrigste Wert ist 00, dann folgt 01, 02 usw. bis FE und FF als den höchsten. Weiß liest sich dann so: Rot=FF, Grün=FF und Blau=FF, also FF FF FF und Schwarz = 00 00 00. Die Helligkeitswerte der 256 Standard-Farben sind 00, 33, 66, 99, CC und FF.

Sie können mit ein wenig Vorstellungsgabe nun anhand dieses Wissens intuitiv eigene Farbwerte definieren, indem Sie die Farbanteile aufrufen. Je höher der Zahlenwert, desto satter werden die Farben, es sei denn sie erhöhen gleich alle drei Teile. Gleiche Werte in allen drei Grundfarben erzeugen nämlich Grautöne.

Beispiele für häufig verwendete Farben:

Beispiele für die Verwendung des RGB-Farbcodes farben.html:

zur Inhaltsangabe

7. Listen

7.1 Aufzählungspunkte

Ein Bereich, innerhalb dessen eine Aufzählung von Wörtern oder Sätzen erfolgen soll, wird in den <ul>-Tag (=unordered list) gestellt. Er erzeugt bei den einzelnen Items grafische Punkte und Einrückungen, wobei die umbrochenen Zeilen automatisch auf Satzkante miteingerückt werden. Dies ist sehr bequem. Die einzelnen Aufzählungspunkte werden durch das <li>-Tag generiert.

Beispiel für eine Aufzählungsliste:

<ul>
    <li>Punkt 1</li>
    <li>Punkt 2. Um zu zeigen, dass wirklich eine automatische Einrückung zur Satzkante erfolgt, steht dieser Bandwurmsatz als Beispiel an dieser Stelle.</li>
</ul>

7.2 Nummerierung

Die Nummerierungsliste unterschiedet sich von der Aufzählungsliste nur durch das äußere Tag. Es lautet:

<ol>...</ol> (=ordered list).

Die Nummern werden automatisch mit jedem <li>-Tag vergeben.

Beispiel für eine Nummerierungsliste:

<ol>
    <li>Punkt A</li>
    <li>Punkt B. Um zu zeigen, dass wirklich eine automatische Einrückung zur Satzkante erfolgt, steht dieser Bandwurmsatz als Beispiel an dieser Stelle.</li>
</ol>

7.3 Definitionslisten

Definitionslisten rücken Definitionen auf eine gemeinsame Satzkante ein. Sie erhalten weder Nummern noch grafische Hervorhebungen. (Die Definitionslisten lassen sich daher auch zur Erzeugung von Einzügen bei ganzen Absätzen zweckentfremden.)

Die Liste wird durch das äußere <dl>-Tag eingeschlossen.

Sie kennt darin zwei Elemente:

1. den zu definierenden Begriff, der normal linksbündig dargestellt wird und mit dem <dt>-Tag definiert wird und
2. den folgenden Absatz mit der dazu gehörenden Erläuterung, aufgerufen durch das <dd>-Tag, der einrückt wird.

Beispiel für eine Definitionsliste:

<dl>
    <dt>Der zu definierende Begriff: Definitionsliste</dt>
        <dd>Die dazugehörende Erklärung: Sie wird eingerückt. Um zu zeigen, dass wirklich eine automatische Einrückung zur Satzkante erfolgt, steht dieser Bandwurmsatz als Beispiel an dieser Stelle.</dd>
    </dt>
</dl>

Link für die Beispiele listen.html:

zur Inhaltsangabe

8. Horizontale Linien

8.1 Horizontale Linie

Mit dem Tag

    <hr> wird eine horizontale Linie erzeugt. Das <hr>-Tag wird nicht aufgelöst und kann Attribute annehmen.

Mit width (=Breite) kann in Pixeln oder Prozentangaben definiert werden. Mit size (=Höhe) wird die Linienstärke in Pixeln bestimmt. nonshade legt fest, dass die Linien keine dreidimensionale Erscheinung bekommen, sondern mit einer massiven Farbe gefüllt sind. color (=Farbe) wie gehabt  . align (=Ausrichtung) kann die Werte "left", "center" und "right" annehmen.

Ohne Attribute wird eine Standardlinie erzeugt, die sich über 100% des Bildschirms erstreckt, die Stärke 2 Pixel und eine schwarzer Farbe hat.

Die Browser stellen die Linien zum Teil mit erheblichen Abweichungen dar. So erzeugt Netscape automatisch runde Ecken.

Beispiel für horizontale Linien horizontale.html:

    <hr width=400 size="2" color="#008000" nonshade align="center">

zur Inhaltsangabe

9. Formatierung von Tabellen

9.1 Das Prinzip

Tabellen werden in HTML nicht nur für die Darstellung von Statistiken verwendet, sondern wegen des eingeschränkten Funktionsumfangs auch zur Gestaltung des Layouts. Dabei kommen dann häufig Blindtabellen, d. h. solche ohne Rahmen zum Einsatz. Wir stellen uns gewöhnlich Tabellen als Einheiten vor, die in senkrechte Spalten und waagrechte Zeilen unterteilt sind. In HTML bauen sich Tabellen aber aus einzelnen Elementen additiv auf, und zwar aus waagrechten Zeilen, die ihrerseits in nebeneinander angeordnete Zellen unterteilt sind.

9.2 Die Hauptbefehle

Eine Tabelle wird durch die äußeren Tags
    <table></table>
eingeklammert.

Danach folgt auf der zweiten Ebene die Definition der Zeile:
    <tr></tr>. (=table row, auf deutsch: Tabellenzeile)

Die dritte Ebene ist die Definition der Zelle:
    <td></td> (=table data).

Die Zellen der Kopfzeile können statt auch mit folgendem Tag definiert werden:
    <th></th> (=table header).

Die schließenden Tags der Zellen dürfen zwar entfallen, es ist jedoch davon abzuraten.

Zusammengefasst sieht die einfachste Tabelle, die genau aus einer Zelle innerhalb einer Zeile besteht, folgendermaßen aus:

Beispiel für die einfachste Tabelle:

<table>
    <tr>
            <td>Ich bin eine Zelle.</td>
    </tr>
</table>.

Die Schriftformatierung erfolgt innerhalb der <td>-Tags.

Die Linien zwischen den Zellen sind nicht von einem Rand zum anderen durchgezogenen. Es sind Umrandungen der einzelnen Zellen sowie der gesamten Tabelle. Dadurch kann es zu Zwischenräumen zwischen den Zellen kommen, die wie Stege wirken.

Beispiel für eine Tabelle mit je drei Zellen in zwei Zeilen:

<table>
    <tr>
        <td><font face="Arial,Helvetica" size=2>Zelle 1a</font></td>
        <td><font face="Arial,Helvetica" size=2>Zelle 1b</font></td>
        <td><font face="Arial,Helvetica" size=2>Zelle 1c</font></td>
    </tr>
    <tr>
        <td><font face="Arial,Helvetica" size=2>Zelle 2a</font></td>
        <td><font face="Arial,Helvetica" size=2>Zelle 2b</font></td>
        <td><font face="Arial,Helvetica" size=2>Zelle 2c</font></td>
    </tr>
</table>

9.3 Die Tabellenattribute

9.3.1 Das <table>-Tag

In das <table>-Tag lassen sich folgende Attribute einbringen:

• border, Angabe in Pixeln, legt die Rahmendicke der äußeren Tabellenumrandung fest.
  Beispiel: <table border="2">
• width (Breite) in Pixeln oder Prozent definiert die Breite der gesamten Tabelle.
  Beispiel: <table width="50"> bedeutet, dass die Tabelle 50 Pixel breit ist.
  Beispiel: <table width="50%"> bedeutet, dass die Tabelle 50 % der Fensterbreite einnimmt.
• bgcolor (Hintergrundfarbe) definiert die Farbe aller.
  Beispiel: <table bgcolor="#0000FF"> bedeutet, dass Tabelle blau ist.
• bordercolor (Linienfarbe) definiert die Farbe der Linien.
• bordercolorlight (Farbe des Linienreliefs, heller Teil)
• bordercolordark (Farbe des Linienreliefs, dunkler Teil)
• align (Ausrichtung) mit den Werten left, center und right stellt die gesamte Tabelle im Fenster nach links, in die Mitte oder nach rechts. Der danach folgende Text fließt um die Tabelle herum, außer bei center, wo er unterhalb der Tabelle poistioniert wird.
  Beispiel: <table align="right"> bedeutet, dass die Tabelle rechts ausgerichtet ist. Text fließt links um die Tabelle herum.
• cellspacing mit Werten in Pixeln bestimmt den Abstand der Zellen zueinander.
  Beispiel: <table cellspacing="5"> zieht die Zellen 5 Pixel weit auseinander.
• cellpadding mit Werten in Pixeln bestimmt den Abstand des Zellinhalts von den Rahmenlinien.
  Beispiel: <table cellpadding="5"> legt um die Zellinhalte einen Rand von 5 Pixeln bis zur Umrandungslinie.

Statt Farbe kann auch eine Grafik als Tabellenhintergrund gesetzt werden. Siehe Kapitel über Grafikformatierung.

9.3.2 Das <tr>-Tag

In das <tr>-Tag lassen sich folgende Attribute einbringen, die alle Zellen einer Zeile betreffen:

• valign (=vertikale Ausrichtung) richtet den Zellinhalt (z. B. die Schrift) mit "top" (=oben), "center" (=mittig) oder "bottom" (=unten) sinngemäß aus, ohne Attributierung standardmäßig in die Mitte.
  Beispiel: stellt den Zellinhalt an den unteren Rand der Zelle.
• align (=Ausrichtung) mit den Werten "left" (=links), "center" (=mittig) und "right" (=rechts) richtet die Schrift sinngemäß aus, ohne Attributierung standardmäßig linksbündig.
  Beispiel: <tr align="right"> stellt den Zellinhalt an den rechten Rand der Zelle.
• bgcolor (Hintergrundfarbe) bezieht sich auf den Hintergrund der einzelnen Zelle. Die Farbe kann für jede Zelle einzeln bestimmt werden.
  Beispiel: <tr bgcolor="#0000FF"> bedeutet, dass der Zellhintergund blau ist.

9.3.3 Das <td>-Tag und das <th>-Tag

In das <td>-Tag (ebenso das <th>-Tag) lassen sich dieselben Attribute wie in das <td>-Tag einbringen. also valign, align und bgcolor. Sie gelten dann für die Zelle. Zusätzlich weden noch folgende Attribute verstanden.

• width (=Breite) mit Werten in Pixeln oder Prozent bestimmt die Breite der Zelle relativ zur Gesamttabelle oder absolut (bei Pixelangabe). Diese Eingabe muss in der ersten Zeile erfolgen und wird von allen nachfolgenden ohne weitere Eingaben übernommen.
  Beispiel: <td width="30"> legt die Breite der Zelle (Spalte) auf 30 Pixel fest. Beispiel: <td width="30%"> legt die Breite der Zelle (Spalte) auf 30 % der Tabelle fest.
• rowspan (=Zeilenverbindung) in absoluten Werten bestimmt die Zeilenhöhe der Zelle. Damit lässt sich erzwingen, dass eine Zelle sich über mehrere darunterliegende Zeilen erstreckt. Beispiel: <td rowspan="3"> legt die Höhe der Zelle auf 3 Zeilen fest.
• colspan (=Spaltenverbindung) in absoluten Werten bestimmt die Spaltenbreite der Zelle. Damit lässt sich erzwingen, dass eine Zelle sich über mehrer Spalten erstreckt. Die weiteren Spalten liegen rechts daneben.
  Beispiel: <td colspan="2"> legt die Breite der Zelle auf drei Spalten fest.

Die Attribute "rowspan" und "colspan" erzwingen, dass diejenigen Zellen wegfallen, über die sich die vergrößerten Zellen erstrecken.

Zahlreiche Beispiele zur Tabellenformatierung finden sich in der Dateien "tabelle1.html" und "tabellen2.html".

9.4 Verschachtelte Tabellen

Innerhalb einer Tabelle kann eine zweite Tabelle angelegt werden. Sie muss in eine Zelle gelegt werden, also: Zwischen die <td>-Tags müssen die zweiten <table>-Tags gesetzt werden.

Ein Beispiel für eine verschachtelte Tabellen finden sich in der Datei "tabellen3.html".

9.5 Zellinhalte

Statt Text kann auch Grafik (Bilder oder Schaltflächen) als Zellinhalt gesetzt werden. (Siehe Abschnitt über Grafikformatierung)

9.5 Regeln für die Gestaltung der Gitternetzlinien

Die Eingabe erfolgt innerhalb des einleitenden <table>-Tags. Voraussetzung für all diese Angaben ist das Attribut border oder border=[Pixel]. Dadurch werden Gitternetzlinien angezeigt.

Mit rules können Sie im einleitenden <table>-Tag Regeln für die Gitternetzlinien bestimmen (rules = Regeln).

Folgende Angaben sind dabei möglich:

• Mit rules=none (none = keine) werden überhaupt keine Linien gezogen, der Außenrahmen der Tabelle wird jedoch angezeigt.
• Mit rules=rows (rows = Reihen) werden Linien zwischen allen Tabellenzeilen gezogen, nicht jedoch zwischen den Spalten der Tabelle.
• Mit rules=cols (cols = cloumns = Spalten) werden Linien zwischen allen Tabellenspalten gezogen, nicht jedoch zwischen den Zeilen der Tabelle.

Beispiele für die verschiedenen Möglichkeiten der Linienhandhabung finden sich in der Datei "tabellen4.html".

zur Inhaltsangabe

10. Grafikformatierung

10.1 Die Grafikformate

Browser können derzeit nur drei Grafikformate darstellen. Die Endungen lauten: jpg, png, gif. Es handelt sich um hochkomprimierte Formate, wobei das erste, "jpg", insbesondere bei Fotografien und Grafiken mit Farbverläufen zum Einsatz kommt.

Um diese Grafikformate anzuzeigen bedarf es keines weiteren Programms. Der Browser ist der Viewer.

Grafiken benötigen auch in hochkomprimierter Form meist mehr Speicherplatz und damit Übertragungszeit als die reinen Textdateien im HTML-Code.

10.2 Die Einbindung der Grafiken

Grafiken werden nicht direkt in den HTML-Code eingebaut, sondern außerhalb des Dokuments abgelegt. Vom HTML-Dokument wird ein Verweis auf diese Grafikdatei gelegt, von wo der Browser sich dann die Grafikdaten herholt. Im einfachsten Fall befindet sich die Grafik im selben Verzeichnis wie das HTML-Dokument. Dann lautet die Einbettung folgendermaßen:
    <IMG src="bild.gif">

<img> (=image) ist das Grafik-Tag ist, src (=source) ein Attribut, dessen Wert den Ort im Dateiverzeichnis, hier nur der Dateiname der Grafik, enthält. Mit anderen Worten: An dieser Stelle im Dokument soll die Grafik "bild.gif" eingesetzt werden, die sich im selben Ordner befindet.

10.3 Pfade zu den Grafiken

Ab einer gewissen Zahl von Dokumenten empfiehlt es sich, für HTML- und Mediendateien gesonderte Ordner anzulegen. Dann muss der Browser auch den Pfad genannt bekommen, wo er die Grafik findet. Wir können dabei zwei Wege gehen.

• Entweder wird der Pfad als komplettes File ausgewiesen. Wir sprechen von absoluten Angaben.
  Beispiel: <IMG src=http://www.meine-homepage-de/bilder/bild.gif>
• Oder wir beschreiben den Ort von der aktuellen Position aus - den relativen Pfad.
  Beispiel: <IMG src="bilder/bild.gif">.

Der Vorteil des relativen Pfads ist nicht nur die kürzere Fassung, es ist auch korrekturfreundlicher, da sich die relativen Positionen seltener ändern, als die absoluten.

Befindet sich aber der Ordner "bilder" nicht im selben Ordner wie das HTML-Dokument, muss der Browser erst zu einer höheren, der gemeinsamen Instanz laufen und von dort wieder abwärts. Das Zeichen für eine Hierarchie-Stufe aufwärts lautet "../". Nehmen wir an, das HTML-Dokument befindet sich in einem eigenen Ordner, der sich gemeinsam mit dem "bilder"-Ordner innerhalb des Gesamtordners befindet, dann muss eine Stufe nach oben gegangen werden.
Beispiel:
    <IMG src="../bilder/bild.gif">

10.4 Grafikattribute

Grafiken werden standardmäßig genauso wie Textabschnitte nacheinander von oben nach unten an der linken Satzkante angeordnet. Durch die folgenden Attribute lässt sich eine Grafik im Stand beeinflussen:

• align mit den Werten left und right regelt den horizontalen Stand. Text, der nach dem <img>-Tag eingegeben wird, fließt um die Grafik herum. Siehe Beispiele. Einen mittigen Ausschluss bietet das Align-Attribut nicht an. Verwenden Sie stattdessen das <div>-Tag.
• valign mit den Werten top, middle und bottom bezieht die Grafik auf neben ihr stehenden Text.
  Die Auswirkungen des valign-Attribute sind nicht sehr brauchbar. Um wirklich den Stand zu beherrschen, empfiehlt es sich, die Elemente in die Zellen einer rahmenlosen Tabelle einzubauen.
• hspace und vspace regeln den Abstand des Textes von der Grafik in Pixeln.
• width und height mit Werten in Pixeln geben die Breite und Höhe der Grafik an. Damit können Sie Grafiken einpassen. Es empfiehlt sich allerdings, immer die Originalgrößen zu verwenden, und kleinere Formate im Bildbearbeitungsprogramm zu erzeugen, da immer die Originaldaten geladen werden, auch wenn die Darstellung kleiner ausfallen soll.
• alt mit dem Wert eines beliebigen Textes gibt im Bereich der Grafik einen kleinen Kommentar zu Bild aus, der identisch ist mit dem Text, der den Wert des Attributs darstellt. Dies ist eine Hilfe für ältere Browser, die keine Grafiken darstellen können, oder wo sie aus Schnelligkeitsgründen ausgeschaltet wurden.
  Beispiel: <IMG alt="Ein Kaninchen"> zeigt dann, wenn sich die Maus innerhalb des Grafikfeldes befindet einen kleinen Schriftrahmen mit dem Inhalt: Ein Kaninchen.
• border mit Wertangaben in Pixeln legt einen Rahmen um das Bild.

Beispiele für Grafikformatierungen grafik.html.

zur Inhaltsangabe

11. Verknüpfung (Link)

11.1 Prinzip der Verknüpfung

Verknüpfungen sind das eigentlich innovative Element des HTML-Codes. Durch Anklicken einer besonders codierten Stelle des Dokumentes springt der Browser zu einer anderen Stelle oder einem anderen Dokument. Dadurch wird die Linearität der Informationsanordnung durchbrochen und stattdessen eine Netzstruktur ermöglicht, die der tatsächlichen Wissenanordnung im Gedächtnis besser entspricht.

11.2 Der Anker <a>

Stellen, die einen solchen Sprung auslösen sollen, werden mit einem Anker versehen:
    <a>...</a>

Das <a>-Tag hebt die Textstelle typografisch hervor, durch Änderung der Farbe und einer Unterstreichung bei Text und einem farbigen Rahmen bei Grafiken, die auch in <a>-Tags gesetzt werden können. Die Farben werden im Body-Tag definiert.

Als Attribut wird href verstanden, dessen Wert das Ziel des Sprunges enthält.

11.3 Ziele

Als Ziel kann angewählt werden

1. eine Stelle innerhalb des Dokumentes (interner Link). Der Wert des href-Attributes besteht hier aus dem Namen des Zieles mit einem vorangestellten Gitterkreuz #.
2. ein anderes Dokument innerhalb der selben Site (interner Link). Der Wert des href-Attributes enthält den vollständigen Dateinamen, einschließlich Endung und die vorangestellte Pfadangabe.
3. eine externe Site (externer Link). Der Wert des href-Attributes enthält die vollständige Internetadresse einschließlich des Protokolls (z. B. http://).

Beispiele für Verknüpfungen:

1. Interner Link innerhalb desselben Dokuments. Das Ziel wurde mit einem Namen (hier: "ziel1") markiert, der als Wert des Attributs "href" aufgerufen wird: <a href="#ziel1">...</a>
2. Interner Link innerhalb derselben Site. Das Ziel ist eine Seite innerhalb desselben Ordners: <a href="seite2.html">...</a>
3. Externer Link im WWW: <a href="http://www.buch.de/">...</a>

Für die Adressierung der Verknüpfungen gelten die gleichen Regeln wie für die Einbindung der Grafiken. Auch hier unterscheiden wir relative und absolute Pfadangaben. Wieder empfiehlt es sich, wenn möglich, relative Pfadangaben zu verwenden.

11.4 Die Benennung von Zielen innerhalb eines Dokumentes

Beliebige Stellen können als Ziele markiert werden: Wörter, Absätze, Überschriften und Grafiken. Sie werden als Ziele durch das <a>-Tag mit dem Attribut name markiert, das einen beliebigen Wert annehmen kann. Die Namen der Ziele müssen innerhalb des Dokumentes eindeutig sein, also nicht wiederholt werden. Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Es empfiehlt sich, sie in "Anführungszeichen" zu setzen.

Beispiele für die Benennung von Zielen:

    <a name="ziel1">Stichwort</a>
    <a name="ziel2"><h1>Überschrift</h1></a>
    <a name="ziel3"><img src=bild.jpg></a> Hier ist eine Grafik das Ziel.

Zur Seite 2

11.5 E-Mail-Adresse als Ziel einer Verknüpfung

Wenn durch das Anklicken einer Stelle ein E-Mail-Programm aktiviert werden soll, indem die entsprechende E-Mail-Adresse bereits eingetragen steht, wird folgende Zielangabe getan:
<a href="mailto:helmut.krebs@onlinehome.de">E-Mail-Adresse von Helmut Krebs</a>.

11.6 Download-Archiv einbauen

Sie können eine gepackte Datei per Internet zum Download anbieten. Die Einbettung ist denkbar einfach, da das ganze Geschäft des Downloads vom Browser gemanagt wird, sobald er zu einer Datei eine Verknüpfung herstellen soll, die eine bestimmte Datei-Endung, (z. B. .zip oder .exe) aufweist. Alles was Sie machen müssen ist die Verknüpfung zu dieser Datei herzustellen.

Beispiel: <a href="programm.zip">Download von "Programm"</a>