Vorbereitungen

Host Provider

Um eine Homepage ins Internet zu bringen, braucht man einen Speicherplatz, der ständig ans Internet angeschlossen ist. Theoretisch geht das mit dem eigenen Computer und einer Flatrate, besser ist es aber, wenn man sich eine Domain bei einem entsprechenden Anbieter - dem Host - besorgt. Für unseren Kurs genügt eine kostenlose Domain.

Beginnen Sie mit den Vorbereitungen früh, da man manch­mal auf die Reaktionen der Provider warten muss. Sinnvoll ist es, die Vorbereitungen mit den folgenden HTML-Übungen zu mischen.

  • Prüfen Sie, ob Sie von Ihrem Arbeits­platz aus E-Mails abrufen können.
  • Wenn Sie noch keine E-Mail-Adresse haben, beantragen Sie eine kostenlose E-Mail-Adresse z.B. bei yahoo.de, gmx.de, web.de,..
  • Beantragen Sie Speicherplatz für Ihre erste eigene Homepage bei einem Webhost, kostenlos zB. bei..

Die erste HTML-Seite

Damit man mit einer HTML-Seite nicht bei Adam und Eva anfangen muss, starten wir mit einer Musterseite und ver­ändern diese. Dieses Verfahren ist auch später geeignet, weil man nicht jede Seite mit einem leeren Blatt beginnt.

  • Laden Sie die HTML-Beispielseite herunter, speichern Sie sie in einem Ordner, zB. H:\Homepage., und entpacken Sie sie.
  • Untersuchen Sie die HTML-Datei nach den Anweisungen auf dem Aufgabenblatt (PDF).

Achtung: Verwenden Sie hierzu möglichst nicht den MS Internet Explorer, weil dieser die Datei beim Abspeichern ver­ändert und seine eigene Duftmarken hinterlässt.

Hilfsmittel

Eine Liste der von mir bevorzugten Programme finden Sie hier.

FTP-Programm

Um eine Homepage ins Internet zu bringen, benötigt man ein sogenanntes FTP-Programm. In unserem Fall ist dies nicht erforderlich, weil die Gratis-Hosts ihre eigenen Möglich­keiten anbieten, Homepage-Dateien hochzuladen.

Add-Ons zum Mozilla Firefox

Der Mozilla Firefox bietet einige schöne Hilfsmittel zum Untersuchen von Homepages an. Probieren Sie es aus:

HTML-Editor

Eine Homepage kann man in HTML (Hyper Text Markup Language) mit jedem einfachen Editor, zB. Wordpad, erstellen. Einfacher geht es, wenn man einen speziellen HTML-Editor verwendet, die es in sehr unterschiedlicher Leistungsfähigkeit gibt. Diesen Kurs führe ich mit dem HTML-Editor Phase 5 durch, weil dieses für private Anwendungen kostenlose Programm einerseits sehr leistungsfähig ist, andererseits aber auch das Verstehen von HTML fördert.

  • Laden Sie HTML-Editor Phase 5 bei qhaut herunter. Phase 5 wurde ursprünglich von Ulli Meybohm entwickelt, jetzt wird es von Hans-Dieter Berretz gepflegt.
  • Richten Sie im HTML-Editor Phase 5 ein Projekt ein: Projekt - Einstellungen - Verzeichnisse - Stammordner. (zB: H:\Homepage) - Startseite: (zB. H:\Homepage\index.html)

Eine Übersicht über HTML-Editoren finden Sie bei SELFHTML. (04/2007)

Einstieg in HTML mit dem HTML-Editor Phase 5: Bilder einfügen

Warnhinweis

Bilder, die aus dem Internet geladen oder aus Druckwerken eingescannt wurden, unterliegen in der Regel dem Urheberrecht. Das heißt, Sie dürfen diese Bilder nicht ohne Erlaubnis des Rechteinhabers auf Ihre Homepage stellen.

Auch selbst fotografierte Bilder dürfen nicht ohne weiteres verwendet werden:

  • Fotos von Menschen dürfen ohne Erlaubnis dieser Person nicht ins Internet gestellt werden. Ausnahmen gibt es nur für Personen des öffentlichen Lebens, wie dem Bundeskanzler oder einem bekannten Sportler.
  • Fotos von urheberrechtlich eingeschränkten Werken, z.B. dem Picasso, der im Museum hängt, dürfen nur mit der Erlaubnis der Rechteinhaber veröffentlicht werden..

Keine Probleme hat man mit selbst gezeichneten Bildern oder Fotos von Motiven, die nicht dem Urheberrecht unterliegen.

Da ich aber kein Rechtsanwalt bin, dürfen Sie sich auf diese Angaben nicht verlassen !

Bilder vorbereiten

Bevor man Bilder in ein HTML-Dokument einfügt, muss man sich die Eigenarten von Internet und Bildern vor Augen führen.

  • Jede Internet-Seite muss durch Leitungen mit begrenzter Kapazität übertragen werden. Deshalb sollten Dokumente so klein wie möglich gehalten werden, weil Surfer von langen Wartezeiten ab­geschreckt werden.
  • Gerade Bilder sind oft sehr groß und benötigen lange Ladezeiten.
  • Jedes Layout wird letztendlich beim Leser erzeugt und hängt davon ab, welche Bildschirmauflösung und welchen Browser (Konquerer, Mozilla, MS Internet Explorer, Netscape Navigator, Opera..) der Leser verwendet. Die verschiedenen Browser sind leider noch weit davon entfernt, die gleichen Inter­pretationen einer Webseite zu liefern. Und ausgerechnet der Browser mit der weitesten Verbreitung hält sich am wenigsten an die "Norm".
  • Browser können nicht alle Bildformate verarbeiten. Die gebräuchlichsten Bildformate sind *.jpg (für Fotos), *.gif (für Zeichnungen und für animierte Dar­stellungen) und *.png.
  • Schon das Verkleinern eines Bildes erfordert komplexe mathematische Operationen, die von guten Grafik-Programmen (The Gimp (kostenlos !). CorelDraw, PaintShopPro, PhotoImpact, PhotoShop..) sichtbar besser gelöst werden als von Browsern oder Scannern.

Für Bilder bedeutet dies, dass man sie nicht größer lässt als unbedingt nötig. Verkleinern der Bilder sollte man einem guten Grafik­programm und nicht dem Scanner oder einem Browser überlassen. Die beste Bildqualität bei niedrigsten Datenraten erhält man, wenn man ein Bild mit höchstmöglicher Auflösung einscannt und dann von einem guten Grafik­programm auf die Größe herunter rechnen lässt, die beim Leser angezeigt werden soll.

schlechtes Beispiel für einen Scan mit niedriger Auflösunggutes Beispiel für einen Scan mit hoher Auflösung und Umrechnung durch ein Grafikprogramm Das Bild links wurde mit geringer Auflösung (25 dpi) gescannt. (Genau genommen wurde es vom Scanner mit maximaler Auflösung gescannt und dann von seiner Software auf 25dpi (146x205 Pixel) verkleinert.)
Das Bild rechts wurde mit maximaler Auflösung (300 dpi) gescannt und dann von einem uralten Grafik-Programm (PaintShopPro4) auf die Größe 142x200 Pixel gerechnet.

Deutlich erkennbar ist die bessere Qualität des rechten Bildes.
Ein weiterer Nachteil des Scanners ist es, dass man die Größe 142x200 nicht gezielt erzeugen kann, weil er nicht über die nötigen Abstufungen verfügt.


Die schlechteste aller möglichen Lösungen ist es, dem Leser ein großes Bild zu schicken, und es dann von dessen Browser klein rechnen zu lassen. Das große Bild verstopft die Telefonleitungen, und der Browser verschlechtert die Qualität.

Technik

Die Auflösung kann man mit jedem besseren Grafik­programm ver­ändern. Beispiele:

  • Adobe Photoshop elements 2.0: Bild - skalieren
  • Corel Photo Paint: Bild - Bild neu erstellen
  • The Gimp: Bild - Bild skalieren
  • Ulead Photoimpact 8: Format - Image Size

Bilder einfügen

Screenshot von Phase 5 beim Einfügen eines Bildes

Zum Einfügen eines Bildes mit dem HTML-Editor Phase 5 gehen Sie wie folgt vor:

  • Speichern Sie die Bilddatei im Projektverzeichnis des HTML-Editors ein, zB. H:\Homepage
  • Setzen Sie den Cursor im HTML-Dokument dort hin, wo das Bild eingesetzt werden soll
  • Fügen Sie aus dem Dateimanager das Bild01.jpg mit einem linken Mausklick ein
  • oder wählen Sie auf Bild01.jpg das Kon­textmenu (siehe Bild). Kon­textmenus werden mit einem rechten Mausklick auf ein element aufgerufen, in diesem Fall auf den Dateinamen.

Es erscheint das Bild-Tag, das im Folgenden erklärt wird:

<img src="Bild/Bild01.jpg" width="421" height="185" alt="">

  • img scr="Bild/Bild01.jpg": zeigt an, dass eine Bild folgt, und gibt den relativen Pfad an.
    Der Dateiname "Bild01.jpg" ist ungeschickt gewählt, weil die Bilder-Such­maschine von Google unter anderem auch den Dateinamen auswertet. Es ist also sinnvoll, hier eine aussagekräftigere Bezeichnung zu wählen.
  • width="421" height="185": Phase 5 hat die Originalgröße des Bildes eingesetzt.
    Ändern Sie die Größe nicht, weil sonst der Browser die Grafik umrechnet und die Qualität verschlechtert. Wenn Sie das Bild in einer anderen Größe als der Originalgröße haben wollen, sollten Sie es vorher mit einem Grafik­programm umrechnen.
    Löschen Sie die Größenangabe auch nicht, denn wenn der Browser Höhe und Breite des Bildes kennt, setzt er den Text auf der Seite gleich richtig und der Besucher der Seite hat während der Ladezeit des Bildes schon mal was zu lesen.
  • Screenshot von Phase 5 beim Einfügen eines Bildes mit Rand Im Bild rechts wurde style="outline:2px solid;" hinzugefügt, sodass es mit Rahmen dargestellt wird.
  • alt="Screenshot von Phase 5 beim Einfügen eines Bildes": Innerhalb der Anführungszeichen kann man einen alternativen Text eingeben, der angezeigt wird, bis das Bild geladen ist. Der alternative Text ist besonders wichtig für Sehbehinderte Besucher der Seite, den diese können vielleicht das Bild nicht erkennen, aber sich den alternativen Text von einem Programm vorlesen lassen.
    Beachten Sie, dass HTML-Editor Phase 5 eine kleine Macke hat: Sie dürfen keinen Zeilen­umbruch innerhalb des <alt="">-Tags setzen, auch nicht im Quell­text.
    MS IE6 zeigt den alternative Text auch an, während man mit dem Mauszeiger kurz über dem Bild verweilt. Das ist prak­tisch, aber entspricht nicht den W3C-Konventionen. Wenn Sie diese Funk­tion für alle Browser erreichen wollen, verwenden Sie das <title="">-Tag

Bilder ausrichten mit Textumlauf

Um Bilder links oder rechts auszurichten bei gleichzeitigem Textumlauf, kann man im <img scr>-Tag den Befehl class="boxlage_links bildbox" bzw. class="boxlage_rechts" einfügen.

Symbol Text links ausrichtenclass="boxlage_links bildbox" richtet das Bild am linken Seitenrand aus und lässt den Text rechts um das Bild fließen. Das Tag für das Bild links lautet komplett <img src="Bild/Bild02.jpg"... class="boxlage_links bildbox" >.

Symbol Text rechts ausrichtenPhase 5 bietet keinen speziellen Knopf, um Bilder auszurichten. Man muss den Befehl also entweder eintippen oder, wenn man ihn vergessen hat, sich mit den Buttons zum Ausrichten von Absätzen behelfen (siehe Bilder links und rechts). Dieser Knopf fügt den Befehl <div class="boxlage_links bildbox" ></div> ein, von dem alle außer den fett gesetzten Zeichen gelöscht werden müssen.

class="boxlage_rechts" setzt das Bild nach rechts. Das Tag für das Bild links lautet komplett <img src="Bild/Bild02.jpg"... class="boxlage_links bildbox" >.

Wenn man den Text neben einem Bild beenden möchte, setzt man das Tag <br clear="all">. Dann beginnt der folgende Text erst nach dem Bild. Dieses Tag wird von Phase 5 nicht unterstützt und muss eingetippt werden.


Zusätzliche Funk­tionen

Screenshot von Phase 5 beim Einfügen eines Bildes mit Rand (border=2)Auch Phase 5 kann nicht alles, einige Funk­tionen müssen von Hand eingetragen werden

  • title="Bild mit den Tags hspace und vspace": Wenn man mit dem Mauszeiger kurz über dem Bild verweilt, erscheint der Text "Bild mit den Tags hspace und vspace" Das <title="">-Tag innerhalb des <img src=".."> entspricht zwar nicht den HTML-Konventionen, sondern gilt erst ab XHTML, wird aber von allen großen Browsern korrekt angezeigt. Leider wird es von Phase 5 nicht unterstützt und muss von Hand eingetippt werden. Das ist aber verziehen, schließlich bringen wir die Versionen ein bisschen durcheinander.
  • style="margin:50px; ": lässt links und rechts neben dem Bild 50 Pixel Abstand. Dadurch sind Bild und Text nicht so eng beinander.
  • vspace="20": lässt über und unter dem Bild 20 Pixel Abstand.

Große Bilddateien anbieten

Große Bilddateien haben Vorteile, wenn es auf Detailschärfe und Auflösung ankommt. Aber die Entscheidung, ob Detailschärfe oder kurze Ladezeit wichtiger ist, kann und sollte man im Internet dem Leser überlassen.
Dazu stellt man ein kleines Bild mit kurzer Ladezeit ins Internet (im Beispiel 100x78 Pixel mit 3kB). Von diesem kleinen Bild legt man einen Link zu einer hoch aufgelösten Version des gleichen Bildes (im Beispiel 1929x1502 Pixel mit 402kB). Mit dem kleinen Bild wird die Geduld des Lesers beim Aufbau der Seite nicht überfordert, und wenn der Leser es genauer sehen will, kann er das detailreiche Bild abrufen.

Beispiel:

Bild eines glühenden Pleuels das scheinbar direkt aus der Gesenkschmiede kommt

Quell­text:

<a href="Bild/Pleuel-groß.jpg">

<img src="Bild/Pleuel-klein.jpg" width="100" height="78" alt="geschmiedetes Pleuel" class="boxlage_rechts" >

</a>

Hinweise:

Ein Bild mit Link erzeugt man, indem man zunächst das Bild in zwei verschiedenen Auflösungen bereit stellt. Dann setzt man das kleine Bild mit dem <img scr> -Tag in das Dokument ein und positioniert es (gelb). Anschließend markiert man den kompletten <img scr> -Tag und fügt dann den Link (orange) auf das große Bild ein.
Klicken Sie auf das kleine Bild !

Bildformate

Die klassischen Bildformate für Webseiten sind JPG, GIF und PNG.

  • JPG komprimiert die Bilder mit Verlusten.
    Vorteil: Fotos und andere Bilder mit vielen Farben werden ziemlich klein. Die Kompressionsverluste schaden hier nicht, weil es nicht auf jeden einzelnen Bildpunkt ankommt.
    Nachteil: Bei Bildern mit großen Flächen in einheitlichen Farben fallen die Kompressionsverluste auf, weil einzelne Farbpunkte verfäscht werden. Deshalb werden Grafiken, technischen Zeichnungen, Screenshots, Textscans usw. mit JPG unscharf.
    Außerdem kann JPG in seltenen Fällen auch Viren transportieren.
  • GIF komprimiert Bilder ohne Verluste. Außerdem können GIFs auch animiert sein.
    Vorteil: Grafiken, technischen Zeichnungen, Screenshots, Textscans bleiben mit GIF scharf. Wenn die Zeichnungen nur wenige Farben und größere Flächen mit einheitlichen Farben ent­halten, z.B. eine technische Zeichnung (s/w) werden GIF-Dateien noch kleiner als JPG.
    Nachteil: Fotos und andere Bilder mit vielen Farben bleiben sehr groß.
    Das GIF-Format ist nicht frei. Wenn man keine GIF-Lizenz hat bzw. kein Grafik­programm mit einer solchen Lizenz hat, kann Probleme bekommen.
  • PNG ist ein neues freies Format, das be­lie­big eingesetzt werden kann.

Tipp

The Gimp ist ein gutes Grafik­programm und kostet nichts. Warum Geld zahlen oder klauen, wenn es kostenlos und legal geht? Stattdessen einfach 'Gimp' und 'Download' googeln ! es wurde ursprünglich für Linux entwickelt, gibt es aber jetzt auch für Windows. Wer beide Betriebs­systeme einsetzt, muss also sein Grafik­programm nicht wech­seln.

Tabellen

Mit Tabellen kann man Daten optisch strukturieren, deshalb werden sie gerne genutzt, um Layouts zu gestalten. Gerne ist aber nicht gut, denn für Sehbehinderte kann Layout mit Tabellen sehr unübersicht­lich werden, deshalb sollten Tabellen nur für Tabellen verwendet werden.
Im Gegensatz zu Listen können TabellenElemente auch neben­einander platzieren. Deshalb brauchen sie auch mehr Tags.

Symbolleiste Tabellen

Zum Einfügen und Bearbeiten von Tabellen stellt Phase 5 eine Symbolleiste zur Verfügung (siehe Bild rechts).

Die Symbolleiste ist so dargestellt, dass mit Klick auf das Einfügen -Symbol eine Tabelle mit 3 Spalten und 2 Zeilen eingefügt wird.
Probieren Sie es aus, und betrachten Sie das Ergebnis.


Tabellenstruktur

Beispiel:

Überschrift Spalte 1 Überschrift Spalte 2 Überschrift Spalte 3
Zeile 1; Spalte 1 Zeile 1; Spalte 2 Zeile 1; Spalte 3
Zeile 2; Spalte 1 Zeile 2; Spalte 2 Zeile 2; Spalte 3

Hinweise:

Im Quell­text erkennt man die Struktur der Tags. Von außen nach innen sind angeordnet:

<table>..</table>
markieren Anfang und Ende einer Tabelle.
Der Befehl border im <table>-Tag bewirkt, dass die Tabellengrenzen mit Linien angezeigt werden. Man kann den Befehl auch weglassen.
Zwischen den beiden Tabellen-Tags stehen die Zeilen­-Tags für die Zeilen von oben nach unten
<tr>..</tr>
markieren Anfang und Ende einer Zeile
Zwischen den beiden Zeilen­-Tags stehen die Zellen-Tags für die Zellen von links nach rechts
<td>..</td>
markieren Anfang und Ende einer Zelle
Zwischen den beiden Zellen-Tags stehen alle Zelleninformationen.
In die Zellen können Text, Listen, Bilder, weitere Tabellen usw. eingefügt werden.
<th>..</th>
ist ein Sonderfall der Zellen-Tags <td>..</td> und wird oft in der ersten Zeile für Überschriften verwendet. Die <th> werden von neueren W3C-Standards empfohlen, weil sie die Lesbarkeit von Tabellen spezielle für Sehbehinderte erleichtern. Man sollte sie deshalb konsequent verwenden, muss sie aber bei Phase 5 gesondert einsetzen.

Quell­text:

<table border>
<tr>
<th>Überschrift Spalte 1</th>
<th>Überschrift Spalte 2</th>
<th>Überschrift Spalte 3</th>
</tr>
<tr>
<td>Zeile 1; Spalte 1</td>
<td>Zeile 1; Spalte 2</td>
<td>Zeile 1; Spalte 3</td>
</tr>
<tr>
<td>Zeile 2; Spalte 1</td>
<td>Zeile 2; Spalte 2</td>
<td>Zeile 2; Spalte 3</td>
</tr>
</table>

Farben in Tabellen

Symbol Farbe in Tabellen

Eine nackte Tabelle kann man mit Farben, Rahmen und Abständen aufpeppen.

Das Färben von Tabellen wird von Phase 5 unterstützt. Setzen Sie den Cursor hinter das Wort table im <table> -Tag, fügen Sie ein Leerzeichen ein, und drücken Sie das Symbol Gitterfarbe.
Im <table> -Tag erscheinen jetzt einige leere Argumente, die noch mit Farbangaben ausgefüllt werden müssen:

<table style="background:" bordercolor="" bordercolorlight="" bordercolordark="">

Symbolleiste Farben


HTML-Edit Phase 5 unterstützt auch die Auswahl von Farben mit der Registerkarte Colors (siehe oben).
Setzen Sie den Cursor zwi­schen die Anführungszeichen, und klicken Sie auf die gewünschte Farbe.
Die vorgegebenen Farben sind allerdings sehr intensiv. Wenn Sie weichere Farbtöne bevorzugen, können Sie sie mit dem Symbol Farbe einfügen (siehe Markierung) selbst mischen. Es bleibt auch die Möglich­keit, den Farbcode manuell einzutippen, und zwar hexadezimal (z.B. style="background:#ff0000") mit dem vorangestellten Doppelkreuz # oder dezimal ohne Vorzeichen (z.B. style="background:32568"). Man kann auch einige Farben im Klar­text eingeben, z.B. style="background:azure", style="background:khaki", style="background:maroon" usw.

Beispiel:

Zeile 1, Spalte 1 Zeile 1, Spalte 2 Zeile 1, Spalte 3
Zeile 2, Spalte 1 Zeile 2, Spalte 2 Zeile 2, Spalte 3

Hinweise:

style="background:yellow" im <table>-Tag gibt die Hintergrundfarbe gelb für die ganze Tabelle an.
style="background:#ffcccc" im <tr>-Tag gibt die Hintergrundfarbe rosa für eine Zeile an.
style="background:#maroon" im <td>-Tag gibt die Hintergrundfarbe Maroni für eine Zelle an.

Die jeweils letzte Farbangabe gilt, deshalb kann die Farbe einer Zelle von der der Tabelle abweichen.

Rahmenfarben bordercolor="" bordercolorlight="" bordercolordark="": Hier arbeitet Phase 5 unlogisch, denn die Rahmenfarben werden erst dargestellt, wenn man den Befehl für Rahmen eingetippt hat ! Ergänzen Sie den Befehl border im <table> -Tag.
Die verschiedenen Rahmenfarben wirken an verschiedenen Stellen des Rahmens und werden auch noch unterschiedlich von den Browsern inter­pretiert. Probieren Sie es aus, oder lassen Sie die Rahmenfarben ganz weg. Mit dem Befehl border wird auf jeden Fall ein Rahmen um die Zellen gezeichnet.

Quell­text:

<table style="background:yellow" border="3">
<tr>
<td>Zeile 1, Spalte 1</td>
<td>Zeile 1, Spalte 2</td>
<td>Zeile 1, Spalte 3</td>
</tr>
<tr style="background:ffcccc">
<td>Zeile 2, Spalte 1</td>
<td style="background:maroon">Zeile 2, Spalte 2</td>
<td>Zeile 2, Spalte 3</td>
</tr>
</table>

Rahmen und Abstände in Tabellen

Andere Formate in Tabellen werden von Phase 5 nicht unterstützt und müssen manuell im <table>-Tag eingetippt werden. Die meisten Formate funktionieren auch im <tr>- bzw. <td>-Tag selektiv für Zeilen bzw. Zellen. Die folgende Liste ist nicht vollständig.

Beispiel:

Zeile 1, Spalte 1 Zeile 1, Spalte 2 Zeile 1, Spalte 3
Zeile 2, Spalte 1    

Hinweise:

Rahmenbreite border="10" zeichnet um die Zellen einen Rahmen mit der Breite 10 Pixel. Der Rahmen wird nicht von jedem Browser dargestellt, wenn die Zelle leer ist (Mitte unten). Wenn Sie eine leere Zelle mit Rahmen wünschen, müssen Sie mindestens ein geschütztes Leerzeichen einsetzen. Dies kann man in HTML Edit Phase 5 mit Strg-Leertaste erzeugen. Es sieht dann aus wie in der letzten Zelle des Quell­textes, allerdings ohne Leerzeichen.

Randabstand cellpadding="5" bewirkt einen Abstand zwi­schen dem Zellenrand und dem Zelleninhalt.

Zellenabstand cellspacing="15" lässt einen Abstand zwi­schen den Zellen und wirkt etwa wie eine Verbreiterung des Rahmens.

Quell­text:

<table style="background:#ffffcc" border="10" cellpadding="5" cellspacing="15">
<tr>
<td>Zeile 1, Spalte 1</td>
<td>Zeile 1, Spalte 2</td>
<td>Zeile 1, Spalte 3</td>
</tr>
<tr>
<td>Zeile 2, Spalte 1</td>
<td></td>
<td> </td>
</tr>
</table>

Tabellen- und Spaltenbreite

Die Breite ganzer Tabellen und der einzelnen Spalten kann man in Prozent oder in Pixel angeben.

  • Die Angabe in Pixel hat den Vorteil, dass die Breite fest vorgegeben ist und die Tabelle beim Leser die gleiche Größe wie beim Autor hat.
    Wenn aber der Leser eine andere Bildschirmauflösung verwendet, wird entweder sein Bildschirm nicht ausgenutzt oder überfordert, d.h. der Leser muss scrollen, und das ist unangenehm.
  • Die Angabe in Prozent hat den Vorteil, dass sich die Tabellenbreite an die Bildschirmauflösung beim Leser anpasst und ihn voll aus­nutzen kann.
    Nachteilig ist, dass sich Zellenbreiten, Zeilen­umbrüche und Anordnungen von Grafiken stark verschieben können.
  • Wenn es um reine Textinformationen geht, empfehle ich die Angaben in Prozent.
    Wenn das Layout wichtig ist, sollte man die Maße in Pixel angeben, damit das Layout (einigermaßen) erhalten bleibt.

Beispiel 1:

Zeile 1, Spalte 1 Zeile 1, Spalte 2
Zeile 2, Spalte 1 Zeile 2, Spalte 2

Hinweise:

Im Tabellen-Tag <table> ist die Tabellenbreite mit width="50%" angegeben. Deshalb belegt das Beispiel insgesamt die Hälfte der verfügbaren Breite neben dem Quell­text. Mit würde die Tabelle die ganze Breite ausfüllen, wie es in den Beispielen weiter unten der Fall ist.

In den ersten Zellen-Tags <td> ist die Spaltenbreite mit width="25%" bzw. width="75%" festgelegt. Damit nimmt die 1. Spalte 25% der Tabellenbreite ein, während die 2. Spalte die restlichen 75% Tabellenbreite nutzt. Die Spaltenbreite muss in der ersten Zeile angegeben werden, die darunter liegenden Zellen passen sich automatisch an.

Wenn keine Spaltenbreite angegeben ist, legt sie der Browser nach dem Inhalt fest. Wenn dann in der nächsten Zeile eine Spaltenbreite angegeben ist, wird sie vom Browser ignoriert. Problematisch wird es, wenn die obersten Zellen zusammengefasst sind. Dann sollte man die Spaltenbreite sowohl in den zusammengefassten Zellen als auch in den darunter Liegenden angeben.

Alle Breitenangaben können ohne Prozentzeichen auch in Pixel angegeben werden, z.B. <table width="700">

Quell­text:

<table style="background:orange" width="50%" border>

<tr>

<td width="25%">Zeile 1, Spalte 1</td>
<td width="75%">Zeile 1, Spalte 2</td>

</tr>
<tr>
<td>Zeile 2, Spalte 1</td>
<td>Zeile 2, Spalte 2</td>
</tr>
</table>

Zellen zusammenfassen

Innerhalb einer Tabelle können mehrere Zellen zusammengefasst werden. Der zusammengefasste Bereich muss recht­eckig sein. Die Zusammenfassung steht in der ersten Zelle oben links. Die anderen Zellen, die in der ersten zusammengefasst sind, werden nicht mehr codiert.

Beispiel 1:

Zellen zusammengefasst Zeile 1, Spalte 3
Zeile 2, Spalte 1 Zeile 2, Spalte 2 Zeile 2, Spalte 3

Hinweise:

Hier sind die ersten beiden Zellen der ersten Zeile zusammengefasst. Im ersten Zellen-Tag <td> steht der Befehl colspan="2", der bedeutet, dass diese und die nächste Zelle rechts daneben zusammengefasst sind. Es werden also 2 Spalten (col) in einer Zelle zusammengefasst. Das <td> -Tag der nächsten Spalte entfällt.

Quell­text:

<table style="background:orange" border>
<tr>

<td colspan="2" style="background:yellow">Zellen..</td>

es fehlt: <td>Zeile 1, Spalte 2</td>

<td>Zeile 1, Spalte 3</td>
</tr>
<tr>
<td>Zeile 2, Spalte 1</td>
<td>Zeile 2, Spalte 2</td>
<td>Zeile 2, Spalte 3</td>
</tr>
</table>

Beispiel 2:

Spalte 1, Zellen zusammengefasst Zeile 1, Spalte 2 Zeile 1, Spalte 3
Zeile 2, Spalte 2 Zeile 2, Spalte 3

Hinweise:

Hier sind die Zellen der ersten Spalte zusammengefasst. Im ersten Zellen-Tag <td> steht der Befehl rowspan="2", der bedeutet, dass diese und die nächste Zelle darunter zusammengefasst werden. Es werden also 2 Zeilen (row) in einer Zelle zusammengefasst. In der nächsten Zeile entfällt das erste <td> -Tag.

Quell­text:

<table style="background:orange" border>
>
<tr>

<td rowspan="2" style="background:yellow">Spalte 1...</td>

<td>Zeile 1, Spalte 2</td>
<td>Zeile 1, Spalte 3</td>
</tr>
<tr>

es fehlt: <td>Zeile 1, Spalte 2</td>
<td>Zeile 2, Spalte 2</td>
<td>Zeile 2, Spalte 3</td>
</tr>
</table>

Beispiel 3:

Zeile 1, Spalte 1 Zeile 1, Spalte 2 Zeile 1, Spalte 3
Zeile 2, Spalte 1 Zeile 2, Spalte 2
Zeile 3, Spalte 1

Hinweise:

Die Tabelle besteht aus 3 Zeilen und 3 Spalten, von denen die 4 Zellen rechts unten zusammengefasst sind.

In der ersten Zelle des zusammengefassten Bereiches ( = oben links) wird mit rowspan und colspan angegeben, wie viele Zellen zusammengefasst sind. In den folgenden Spalten und Zeilen müssen natürlich die Zellen fehlen, die in der Zusammenfassung ent­halten sind.

Quell­text:

<table style="background:orange" border=1">
<tr>
<td>Zeile 1, Spalte 1</td>
<td>Zeile 1, Spalte 2</td>
<td>Zeile 1, Spalte 3</td>
</tr>
<tr>
<td>Zeile 2, Spalte 1</td>

<td colspan="2" rowspan="2" style="background:yellow">Zeile 2, Spalte 2</td>

es fehlt: <td></td> (Zelle 2. Zeile rechts)

</tr>
<tr>
<td>Zeile 3, Spalte 1</td>

es fehlt: <td></td><td></td> (Zellen 3. Zeile Mitte und rechts)
</tr>
</table>

Tabellen in Tabellen

Innerhalb einer Tabellenzelle kann eine weitere Tabelle eingefügt werden.
Solche verschachtelten Tabellen ermöglichen es beispielsweise, links eine Linkliste und rechts die Hauptseite darzustellen ohne Frames zu verwenden. Frames mögen auf den den ersten Blick eleganter wirken, aber sie haben einige prak­tische Nachteile, wegen der ich auf Frames verzichte.

Auch das hier vor­lie­gende Layout mit Beispiel und Quell­text neben­einander habe ich früher mit verschachtelten Tabellen erzeugt. Inzwi­schen verwende ich für mehrspaltigen Satz CSS (Cascading Style Sheets), weil es kürzer, übersicht­licher und leichter zu pflegen ist.

Beispiel:

Pleuel

Die Pleuelseite

Linkliste
Link1
Link2
heute Neuigkeit 2
gestern Neuigkeit 1

Hinweise:

Hier sehen Sie eine orange unterlegte Tabelle. In die Zelle unten rechts wurde eine weitere Tabelle eingefügt, die gelb (yellow) unterlegt ist.

Verschachtelungen sind in be­lie­biger Tiefe möglich und ermöglichen komplizierte Layouts. Aber dies ist nicht empfehlenswert, denn Sehbehinderte können sich nur den Quell­text vorlesen lassen und verlieren bei mehrfach verschachtelten Tabellen leicht die Zuordnung, wo die Texte stehen. Es ist deshalb besser, komplexe Layouts mit CSS zu platzieren.

Quell­text:

<table style="background:orange" ">
<tr>
<td> <img src="Pleuel.jpg" width="100" height="78"> </td>
<td><h2>Die Pleuelseite</h2></td>
</tr>
<tr>
<td>Linkliste<br>Link1<br>Link2<br>Link3</td>
<td>

<table style="background:yellow" >
<tr>
<td>heute</td>
<td>Neuigkeit 2</td>
</tr>
<tr>
<td>gestern</td>
<td>Neuigkeit 1</td>
</tr>
</table>

</td>
</tr>
</table>

Aufzählungen und Listen

Aufzählungen und Listen benötigen mehrere Tags, die ineinander verschachtelt werden:

  • Die gesamte Liste ist von Tags eingerahmt, die den Listentyp angeben,
    • <ul>..</ul> für unsortierte Listen
    • <ol>..</ol> für sortierte Listen
    • <dl>..</dl> für Definitionslisten
  • Jede Strich­aufzählung ist nochmals eingerahmt, z.B. <li>..</li>.
  • Eine unsortierte Liste hat den folgenden Aufbau
    <ul> mit oder ohne Text
    <li>Strich­aufzählung 1</li>
    <li>Strich­aufzählung 2</li>
    ...
    </ul>

Beispiel im Browser:

Bei Aufzählungen bzw. Listen unter­scheidet HTML:

  • unsortierte Listen ( ul )
  • sortierte Listen ( ol statt ul )
  • Definitionslisten ( dl statt ul )
  • Menulisten ( menu statt ul )

HTML-Quell­text:

<p>Bei Aufzählungen bzw. Listen unter­scheidet HTML:</p>
<ul>
<li>unsortierte Listen ( ul )</li>
<li>sortierte Listen ( ol statt ul )</li>
<li>Definitionslisten ( dl statt ul )</li>
<li>Menulisten ( menu statt ul )</li>
</ul>

Symbolleiste Listen Phase 5 unterstützt den Aufbau von Listen mit einer Symbolleiste (siehe Bild rechts). Der Aufbau von Listen wird im folgenden Kapitel am Beispiel von unsortierten Listen erklärt.


Unsortierte Listen

Symbol ungeordnete Listen (das Listenzeichen bleibt gleich)

Dieser Text steht noch vor der Liste innerhalb von <p>Text</p>.
Die Liste beginnt man mit dem dargestellten Button, der Tags für unsortierte Listen <ul>..</ul> einfügt. Nach diesem Tags muss ein Listentag folgen:

  • Dieser Text steht innerhalb der Tags für die erste Strich­aufzählung <li>Text</li> und ist deshalb hinter einem Listenzeichen eingerückt.
  • Symbol Listenzeichen (= neuer Punkt der Strichaufzählung) Phase 5 unterstützt das Einsetzen der <li> -Tags mit einer Symbolleiste (siehe Bild rechts).
  • Die geschweifte Klammer um das <li> -Tag im Symbol deutet an, dass die <li> -Tags innerhalb der <ul>..</ul> -Tags stehen müssen.
  • Für jede Strich­aufzählung benötigt man ein neues <li>..</li> -Tag.
  • Man kann Aufzählungen auch schachteln, indem man zwi­schen die <li> -Tags eine neue Aufzählung setzt. Die folgende Namensliste ist eine Liste in der Liste:
    • Meier
    • Müller
    • Schulze
  • Die Bullets (Zeichen vor der Strich­aufzählung) werden von jedem Browser in anderer Weise dargestellt (Punkte, Kreise, Karos..).
  • Man kann das gewünschte Aufzählungszeichen im Listen-Tag <ul> festlegen. Da dies von Phase 5 nicht ergänzt wird, muss man die Befehle hinter ul eintippen:
    • <ul type=circle> oder
    • <ul type=square> oder
    • <ul type=disc>
  • Die vorige Unter­aufzählung besteht aus 3 Unter­aufzählungen, damit drei verschiedene Bullets dargestellt werden. Beachten Sie den Quell­text.

Sortierte Listen

Symbole geordnete Listen (das Listenzeichen zählt mit)

Sortierte Listen verwenden zählende Listenzeichen, z.B. 1-2-3 oder a-b-c.
Im Quell­text unter­scheiden sie sich durch durch das Listen-Tag <ol> statt <ul>. Im <ol> -Tag wird zusätzlich angegeben, welcher Art die Bullets sind. Diese Funk­tion wird von Phase 5 unterstützt (siehe Bild rechts), man muss sich die Befehle im Einzelnen also nicht merken.
Das Listen-Tag <li> bleibt wie bei unsortierten Listen, auch Verschachtelung ist möglich.

Beispiel:

  1. Meier
  2. Müller
  3. Schulze

Definitionslisten

Symbole Definitionsliste (= zweigeteilte Liste mit Begriff und Definition; siehe Beispiel)

Definitionslisten verwenden pro Strich­aufzählung zwei Einträge, z.B. einen Begriff und seine Definiton.
Als Listen-Tag wird <dl>..</dl> verwendet und als Strichlisten-Tags <dt>Begriff</dt> und <dd>Definition</dd>.
Die Funk­tion wird von Phase 5 unterstützt. Mit dem linken markierten Symbol setzt Phase 5 eine Definitionsliste mit einer Strich­aufzählung ein, mit dem rechten markierten Symbol setzt Phase 5 eine zusätzliche Strich­aufzählung ein. Damit unter­scheidet sich diese Funk­tion von unsortierten und sortierten Listen, die ohne die erste Strich­aufzählung eingesetzt werden. Eine weiteres Detail erscheint seltsam: Phase 5 setzt die beiden Strich­aufzählungs-Tags <dt> und <dd> ohne End-Tag </dt> und </dd> ein. Man muss die End-Tags aber nicht nachtragen, es scheint auch so mit den Browsern zu funktionieren.

Beispiel:

Re
Streckgrenze in N/mm² bzw. MPa
Rp0,2
Dehngrenze in N/mm² bzw. MPa
Rm
Zug­festig­keit in N/mm² bzw. MPa

Menülisten

Menulisten werden hier nicht besprochen, weil sie von den meisten Browsern nicht dargestellt werden.

Das Letzte:: Formatieren von Text mit <font>-Tags und Attributen

Warnhinweis

Herzlich willkommen, Dr. Frankenstein,
hier wird beschrieben, wie die Monster des Internets erschaffen werden. Hier lernen Sie kein solides HTML und das Beste wäre, sie zögen sogleich von dannen. Aber ich glaube nicht, dass Sie der Versuchung widerstehen können, auch wenn das Ziel wahrlich kein Baum der Weisheit ist.

Das Formatieren von Texten mit <font>-Tags ist das Gegenteil einer guten HTML-Programmierung und in neueren Standards wird ausdrücklich empfohlen, dass man darauf verzichtet. Deshalb hatte ich eigentlich geplant, diese Methode im Giftschrank zu lassen und gar nicht erst zu bekannt zu machen, aber..

Meine aktuelle Klientel ist ungeduldig und tut sich schwer, längere Vorbereitungen zu treffen ohne schnelle Ergebnisse. Darüber hinaus haben sie eine überdurchschnittliche Fehlerquote, und ich müsste viel Unterrichtszeit mit Fehlersuche verbringen. Dagegen ist das <font>-Tag relativ einfach zu handhaben und die Ergebnisse unmittelbar zu sehen. Deshalb beiße ich in den sauren Apfel.

Für gute Programmierer und solche, die es werden wollen, gibt es mindestens zwei Gründe, von <font> die Finger zu lassen:

  • Sehbehinderte und Such­maschine interessiert nicht, ob ein Text hervor­gehoben ist (groß, fett, bunt, blinkend..), sondern, warum ein Text hervor­gehoben ist (Überschrift, Zitat, Quellenangabe..).
  • Bei umfangreicheren Webauftritten ist es sehr umständlich, <font>-Tags zu pflegen, d.h. ein einheitliches Design zu erreichen oder gar das Design zu wech­seln.

Deshalb sollten Sie diese Seite gar nicht erst lesen !

Vor­gehens­weise

Screenshot des Schrift-Menüs beim HTML-Editor Phase 5

Das <font>-Tag ist eine Methode, um kurze Textabschnitte zu formatieren. Formatieren bedeutet, dass Schriftart, - größe, -farbe usw. festgelegt werden. Der Text­bereich, der ein bestimmtes Format erhalten soll, wird zwi­schen <font> und </font> gesetzt. Im vorderen <font>-Tag wird angegeben, welches Format der Text­bereich erhalten soll.
Längere Textabschnitte formatiert man in den <p>-, <h1>-, usw.-Tags am besten mit CSS.

Beispiel: Sie möchten, dass das Wort rot in roter Farbe angezeigt wird.

Wenn Sie dies im HTML-Editor Phase 5 mit Hilfe eines <font>-Tags tun wollen, gehen Sie wie folgt vor:

  • Markieren Sie das Wort rot im Quell­text, indem Sie mit gedrückter linker Maus­taste darüber fahren.
  • Wählen Sie in der Menüleiste Schrift - Schriftfarbe - rotes Feld anklicken - OK.
  • Im Quell­text steht nun <font color="#FF0000">rot</font>.
  • Im Browser erscheint das Wortrot in roter Farbe.

Schriftgröße

Die Schriftgröße wird mit dem Wert size=".." und einer Zahl angegeben.
Man kann die Schriftgröße absolut angeben mit size="1".. size="7".
Man kann die Schriftgröße auch relativ zur aktuellen Schriftgröße angeben. In diesem Fall schreibt man ein Vorzeichen zur Zahl: size="+2" macht die Schrift größer, size="-2" macht die Schrift kleiner. Die Werte können von size="-2".. size="+4" reichen.

Beispiel im Browser Beispiel im Quell­text
"Am Größten" <font size="+4">
"Sehr groß" <font size="+3">
"Größer" <font size="+2">
"Groß" <font size="+1">
"Kleiner" <font size="-1">
"Am Kleinsten" <font size="-2">
size="7" <font size="7">
size="6" <font size="6">
size="5" <font size="5">
size="4" <font size="4">
size="3" <font size="3">
size="2" <font size="2">
size="1" <font size="1">

Tipp

Achten Sie darauf, dass die Schriftgrößen nicht zu klein sind, damit auch Sehbehinderte den Text lesen können. Bei modernen Browsern kann zwar der Surfer die angezeigte Größe der Schrift leicht ändern, aber der Browser mit der weitesten Verbreitungsgrad ist nicht modern.

Das funktioniert so:
Mozilla Firefox 1 und Opera 7: Mausrädchen bei gedrückter [Strg]-Taste drehen.
Netscape Navigator 7: [Strg] [+] bzw. [Strg]-[-] ist schon weniger komfort­abel
MS Internet Explorer 6: Mausrädchen bei gedrückter [Strg]-Taste drehen funktioniert nur bei veralteten <font>-Tags, aber nicht bei modernen CSS.

Schriftart

Die Schriftart wird mit dem Wert face=".." und ihrem Namen angeben.

Beispiel im Quell­text: <font face="COURIER NEW">Schriftart Courier New</font>>
Beispiel im Browser:Schriftart Courier New

Tipp

Denken Sie daran, dass der Surfer Ihre tolle Schriftart nur dann lesen kann, wenn sie auch auf seinem Rechner installiert ist. Verwenden Sie deshalb keine exotischen Schriftarten.

Schriftfarbe

Screenshot des Menüs Colors des HTML-Editors Phase 5 Die Schriftfarbe wird mit dem Wert color=".." und der Farbe angegeben. Die Farbe kann beim HTML-Editor Phase 5 aus einer Farbtafel ausgewählt werden und wird dann wahlweise mit dem hexadezimalen RGB-Farbcode oder dem amerikanischen Begriff für die Farbe eingetragen.
Die Angabe des Namens scheint einfacher zu sein, aber der hexadezimale Farbcode kann alle Farben dar­stellen, auch in alten Browsern.
Im Screenshot rechtS ist gezeigt, wo zwi­schen den Varianten umgeschaltet werden kann. Es können auch eigene Farbtabellen erstellt werden.

Schriftfarbe Beispiel im Browser Beispiel im Quell­text
hexadezimaler Farbcode Schriftfarbe blau <font color="#0000FF">Schriftart Courier New</font>>
amerikanische Farbbezeichnung Cornflowerblue <font color="cornflowerblue">Cornflowerblue"</font>

Tipp

Der hexadezimale RGB-Farbcode besteht aus 6 Ziffern von 0.. 16, wobei man für die Zahlen 10.. 16 die Buchstaben A.. F verwendet.
Der rote Farbanteil steht in den ersten beiden Ziffern, hier #FF0000.
Der grüne Farbanteil steht in den mittleren beiden Ziffern, hier #00FF00.
Der blaue Farbanteil steht in den letzten beiden Ziffern, hier #0000FF.
Gelbe Farbe wird aus rot und grün gemischt, hier #FFFF00.
?? Farbe (am. fuchsia) wird aus blau und rot gemischt, hier #FF00FF.
Die hellblaue Farbe wird aus grün und blau gemischt, hier #00FFFF.
Weiße Farbe (weiß) ist auf weißem Hintergrund nicht lesbar und besteht aus einer Mischung aller Farben, hier #FFFFFF.
Wenn man statt FF kleinere Zahlen (0,1,2,3,4,5,6,7,8,9,a,b,c,d,e) einsetzt, ergeben sich alle möglichen Farbmischungen.

Sonstige Attribute

Sonstige Formate werden nicht mit <font>-Tags, sondern mit speziellen Attributen vergeben. Beispiele:

Fett im Browser und im Quell­text: <b>Fett</b>

Kursiv im Browser und im Quell­text: <i>Kursiv</i>

Unterstrichen im Browser und im Quell­text: <u>Unterstrichen</u>

Hochgestellt im Browser und im Quell­text: <sup>Hochgestellt</sup>

Tiefgestellt im Browser und im Quell­text: <sub>Tiefgestellt</sub>

Blinkend im Browser und im Quell­text: <blink>Blinkend</blink>

Laufschrift im Browser und im Quell­text: <marquee>Laufschrift</marquee>

Tipp

Hochgestellt undTiefgestellt können sinnvoll eingesetzt werden

Fett, Kursiv, Unterstrichen sind zweifelhaft und
Blinkend und Laufschrift können nur schwer ausgedruckt werden.
Hier tut der MS Internet Explorer 6 einmal etwas Sinnvolles: Er versteht den Befehl nicht und stellt Blinkend ruhig:-)

Links

  • SELFHTML aktuell von Stefan Münz ist wohl der Klassiker unter den Seiten zu HTML. Hier finden Sie heraus, wie Sie Ihre Seite nach Ihren Ideen gestalten können. (04/2002)
  • https://www.zum.de/Faecher/kurse/boeing/ Norbert Boeing bietet einen weiteren Kurs zum HTML-Editor Phase 5. (04/2007)
  • Der CSS Zen Garden demonstriert Beispiele für CSS-Design. Die HTML- und CSS-Quellcodes können herunter geladen werden. (02/2004)
  • Link: Download des HTM-Editor Phase 5 von Ulli Meybohm. (07/2016)
  • Die goldenen Regeln für schlechtes HTML von Stefan Karzauninkat listet die Sünden in der Webseitengestaltung auf. (04/2002)

Literaturhinweise

Es sind nicht immer die neuesten Ausgaben aufgeführt.

Data-Becker: HTML XML

F. Harms, D. Koch, O. Kürten: Das große Buch HTML & XML

2000, 871 Seiten, DATA BECKER Düsseldorf
49,95 DM (2000)

Hanke: Homepages

Johann-Christian Hanke: Homepages für Fort­geschrittene

2000, 78 Seiten, KnowWare Hamburg
8,- DM (2000)