Link zur letzten SeiteLink zur nächsten Seite

In der vorliegenden Seite habe alles gesammelt, was ich früher in HTML unterrichtet habe. Es ist keine moderne Technik für Webseiten mehr, hatte aber den Vorteil, dass man HTML lernen musste und relativ schnell Ergebnisse gesehen hat.
Dieses HTML erfüllt natürlich auch nicht alle Vorschriften für XHTML, trotzdem lasse ich die Links am unteren Ende der Seite stehen, damit die Pflege der Seiten nicht durch Ausnahmen erschwert wird.

Stand: 17.05.2009 - - Sie sind hier: www.ulrich-rapp.deUnterrichtsstoffComputertechnikHTML

Kurs: Eigene Homepage erstellen

Studentenbude in Karlsruhe gesucht

Mein Sohn möchte ab Oktober 2014 am KIT in Karlsruhe studieren und sucht noch eine Unterkunft. Für geeignete Hinweise an Student@ulrich-rapp.de wäre ich sehr dankbar.

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 manchmal auf die Reaktionen der Provider warten muss. Sinnvoll ist es, die Vorbereitungen mit den folgenden HTML-Übungen zu mischen.

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.

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öglichkeiten 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.

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:

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.

Für Bilder bedeutet dies, dass man sie nicht größer lässt als unbedingt nötig. Verkleinern der Bilder sollte man einem guten Grafikprogramm 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 Grafikprogramm 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 Grafikprogramm verändern. Beispiele:

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:


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

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

Bilder ausrichten mit Textumlauf

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

Symbol Text links ausrichtenclass="boxlinks 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="boxlinks 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="boxlinks bildbox" ></div> ein, von dem alle außer den fett gesetzten Zeichen gelöscht werden müssen.

class="boxrechts" setzt das Bild nach rechts. Das Tag für das Bild links lautet komplett <img src="Bild/Bild02.jpg"... class="boxlinks 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 Funktionen

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


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

Quelltext:

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

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

</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.

Tipp

The Gimp ist ein gutes Grafikprogramm 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 Betriebssysteme einsetzt, muss also sein Grafikprogramm nicht wechseln.

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übersichtlich werden, deshalb sollten Tabellen nur für Tabellen verwendet werden.
Im Gegensatz zu Listen können Tabellen Elemente auch nebeneinander 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 Quelltext 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.

Quelltext:

<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 zwischen 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öglichkeit, 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 Klartext 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 interpretiert. 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.

Quelltext:

<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 Quelltextes, allerdings ohne Leerzeichen.

Randabstand cellpadding="5" bewirkt einen Abstand zwischen dem Zellenrand und dem Zelleninhalt.

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

Quelltext:

<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.

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 Quelltext. Mit width="100%" 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">

Quelltext:

<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 rechteckig 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.

Quelltext:

<table style="background:orange" width="100%" 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.

Quelltext:

<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 enthalten sind.

Quelltext:

<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 praktische Nachteile, wegen der ich auf Frames verzichte.

Auch das hier vorliegende Layout mit Beispiel und Quelltext nebeneinander habe ich früher mit verschachtelten Tabellen erzeugt. Inzwischen verwende ich für mehrspaltigen Satz CSS (Cascading Style Sheets), weil es kürzer, übersichtlicher 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 beliebiger Tiefe möglich und ermöglichen komplizierte Layouts. Aber dies ist nicht empfehlenswert, denn Sehbehinderte können sich nur den Quelltext 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.

Quelltext:

<table style="background:orange" border="1" ">
<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" width="100%">
<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:

Beispiel im Browser:

Bei Aufzählungen bzw. Listen unterscheidet HTML:

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

HTML-Quelltext:

<p>Bei Aufzählungen bzw. Listen unterscheidet 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:

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 Quelltext unterscheiden sie sich durch durch das Listen-Tag <ol> statt <ul>. Im <ol> -Tag wird zusätzlich angegeben, welcher Art die Bullets sind. Diese Funktion 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 Strichaufzä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 Funktion wird von Phase 5 unterstützt. Mit dem linken markierten Symbol setzt Phase 5 eine Definitionsliste mit einer Strichaufzählung ein, mit dem rechten markierten Symbol setzt Phase 5 eine zusätzliche Strichaufzählung ein. Damit unterscheidet sich diese Funktion von unsortierten und sortierten Listen, die ohne die erste Strichaufzählung eingesetzt werden. Eine weiteres Detail erscheint seltsam: Phase 5 setzt die beiden Strichaufzä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
Zugfestigkeit 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:

Deshalb sollten Sie diese Seite gar nicht erst lesen !

Vorgehensweise

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 Textbereich, der ein bestimmtes Format erhalten soll, wird zwischen <font> und </font> gesetzt. Im vorderen <font>-Tag wird angegeben, welches Format der Textbereich 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:


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 Quelltext
"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 komfortabel
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 Quelltext: <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 darstellen, auch in alten Browsern.
Im Screenshot rechtS ist gezeigt, wo zwischen den Varianten umgeschaltet werden kann. Es können auch eigene Farbtabellen erstellt werden.

Schriftfarbe Beispiel im Browser Beispiel im Quelltext
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 Quelltext: <b>Fett</b>

Kursiv im Browser und im Quelltext: <i>Kursiv</i>

Unterstrichen im Browser und im Quelltext: <u>Unterstrichen</u>

Hochgestellt im Browser und im Quelltext: <sup>Hochgestellt</sup>

Tiefgestellt im Browser und im Quelltext: <sub>Tiefgestellt</sub>

Blinkend im Browser und im Quelltext: <blink>Blinkend</blink>

Laufschrift im Browser und im Quelltext: <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

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 Fortgeschrittene

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

Access Key (mit Link zum Überspringen)

Firefox: [Alt+Umsch+#]
IE: [Alt + #] - Enter
Mac: [Ctrl + #]
Opera: [Umsch+Esc]-#

Startseite: © www.ulrich-rapp.de (seit 1999) | Gästebuch | Impressum | E-Mail zu mir: Die Emailadresse des Webseitenbetreibers lautet Service @ Ulrich Minus Rapp Punkt D E

Stand: 17.05.2009 --- Diese Seite prüfen:

Link zur letzten SeiteLink zu W3CLink zu W3C CSSLink zu LynxLink zur nächsten Seite