html-Lehrgang zweiter Tag Teil 2

Zügig schreiten wir weiter voran und widmen uns dem nächsten Thema:

Umlaute und Sonderzeichen

Wenn Sie im Browser ein "Ä" sehen, so könnten wir denken, dass wir auch im Browser einfach ein "Ä" eingeben, um es dann korrekt zu sehen. Das ist aber nicht unbedingt der Fall. Der Browser muss wissen, mit welchem Zeichensatz der Text erstellt wurde. Für unterschiedliche Sprachen wie Latein, kyrillisch und arabisch gibt es verschiedene Zeichensätze. Und so kann es vorkommen, dass Umlaute sowie andere diverse Zeichen nicht korrekt widergegeben werden.

Um dies zu umgehen, gibt es in html entprechend benannte Zeichen. Die wichtigsten möchte ich hier aufführen:

ZeichenBeschreibungBenennung in html
äUmlaut aä
ÄUmlaut AÄ
öUmlaut oö
ÖUmlaut OÖ
üUmlaut uü
ÜUmlaut UÜ
ßscharfes sß
erzwungenes Leerzeichen 
"Anführungszeichen oben"
&kaufmännisches Und&
<öffnende spitze Klammer&lt;
>schließende spitze Klammer&gt;
Euro-Zeichen&euro;
§Paragraphen-Zeichen&sect;
©copyright-Zeichen&copy;
Bullet-Zeichen&bull;

Wir wollen nun folgenden Satz mit html-Benennung schreiben:

Er sagte:"Nicht zögern oder ärgern, sondern zügig den Fall abschließen."

html Umlaute

So erscheint der Text im Browser:

html Umlaute Anzeige im Browser

Wie wir sehen, sehen wir (höchstwahrscheinlich) nichts, wenn wir den richtigen Zeichensatz verwendet haben. Da wir uns darauf aber nicht verlassen können und wir nicht wissen, welchen Browser und Zeichensatz der Besucher unserer Website verwendet, werden wir in Zukunft unseren Text mit html-Benennung schreiben.

Neben den o.g. Sonderzeichen gibt es noch hunderte weitere. Am besten einfach mal bei Google als Suchbegriff "html Zeichensatz" eingeben. Dort findet ihr dann weitere Informationen.

Tabellen

Nachdem wir uns gestern ausführlich mit Listen beschäftigt haben, wenden wir uns heute den Tabellen zu.

Tabellen bestehen aus Spalten und Reihen. Der einfachste Aufbau einer Tabelle sieht folgendermaßen aus:

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

  • "table" leitet eine neue Tabelle ein
  • "tr" öffnet eine Tabellenreihe
  • "td" öffnet eine Tabellenzelle.

Probieren wir dies gleich mal aus:

html Tabellen

Die Ausgabe ist dann wie gewüscht:

html Tabellen im Browser

Der Tabellenkopf enthält die Beschreibung der Inhalte der Tabellenspalten. Diese werden oft fett dargestellt. Dies könnten wir mit dem uns bereits bekannten <b></b>-Tag bewerkstelligen. Aber html kennt dafür einen eigenen Tag: "<th></th>". Setzen wir dies doch einmal in die oberste Reihe ein:

html Tabellen mit Tabellenkopf

Damit kommt zur Ausgabe:

html Tabellen mit Tabellenkopf im Browser

Wir sehen, dass nun nicht nur die Schrift im Tabellenkopf fett geworden ist, sondern auch zentriert in der Tabellenspalte steht. Deutlicher wird dies, wenn wir der Tabelle einen Rahmen geben:

html Tabellen mit Rahmen

Das sehen wir dann:

html Tabellen mit Rahmen im Browser

Die Tabelle hat nun einen Außenrahmen, aber auch Innenrahmen. Wer nur einen Außenrahmen möchte, der muss folgendes Attribut hinzufügen:

html Tabellen mit Rahmen ohne Innenrahmen

Und wir erhalten:

html Tabellen mit Rahmen ohne Innerahmen im Browser

Farben

Wie wäre es nun, wenn wir dem Tabellenkopf etwas Farbe geben?

html Tabellen mit Hintergrundfarben

Das Attribut "bgcolor = Farbe" bringt diese auch auf html-Seiten. Nicht nur Hintergründe in Tabellen lassen sich damit farblich gestalten, sondern auch zahlreiche andere Elemente. Doch erstmal zurück zu unserer Tabelle. So sieht sie nun aus:

html Tabellen mit Hintergrundfarben im Browser

Die Farbangaben können im html auf verschiedene Weise erfolgen:

  • durch den Farbnamen
  • durch Angabe in Hexadezimalschreibweise

Der Farbname ist in englisch und in seiner Anzahl gegenüber der Hexdezimalschreibweise begrenzt. Dies düfte verständlich werden, wenn man weiß, dass man in Hexdezimalschreibweise 16,7 Millionen Farben darstellen kann.

Einige Beispiele zu Farbnamen:

html Tabellen mit Hintergrundfarben 2 im Browser

Und so bekommen wir "Tabelle kunterbunt":

html Tabellen mit Hintergrundfarben  2 im Browser

Die Hexdezimalschreibweise setzt sich folgendermaßen zusammen:

  • Ein "#" leitet die Farbbenennung ein
  • 2 Stellen von je 0 bis F für den Rotanteil
  • 2 Stellen von je 0 bis F für den Grünanteil
  • 2 Stellen von je 0 bis F für den Blauanteil

Und das zusammen ergibt z.B. #FF00FF. Dabei ist es uns überlassen, ob wir die Buchstaben groß oder klein schreiben. Beide Schreibweisen sind geläufig: #ff00ff.

Probieren wir dies doch einmal aus:

html Tabellen mit Hintergrundfarben 3 im Browser

Und auch diesmal haben wir ein farbenfrohes Ergebnis:

html Tabellen mit Hintergrundfarben 3 im Browser

An dieser Darstellung sollte uns noch etwas auffallen: nämlich dass man bei der Farbwahl sehr umsichtig vorgehen sollte. Wie wir sehen lassen sich einige Zellinhalte nur sehr schwer oder gar nicht ablesen. Also am besten jede Farbe im Browser auf Lesbarkeit prüfen!

Höhe und Breite von Tabellenzellen

Mit "height" und "width" können wir Höhe und Breite von Tabellenzellen bestimmen:

html Tabellen Höhe und Breite

Jetzt haben wir reichlich Platz in unseren Zellen:

html Tabellen Höhe und Breite im Browser

Ausrichtung in Tabellenzellen

zwei weitere wichtige Attribute sind "align" und "valign". Damit können wir die Ausrichtung des Zellinhalts bestimmen, wobei "align" die horiziontale und "valign" die vertikale Ausrichtung festlegt:

html Tabellen Ausrichtung

So können wir jeden Zellinhalt ausrichten:

html Tabellen Ausrichtung im Browser

Tabellenzellen verbinden

Oft kommt es vor, dass wir einen Zellinhalt über mehrere Zellen darstellen wollen. Auch dafür hat html entsprechende Attribute:

html Tabellen Zellen verbinden

Das Ergebnis:

html Tabellen Zellen verbinden im Browser

"colspan" verbindet die Zellen horizontal, "rowspan" vertikal. Die Zahl gibt an, wie viele Zellen nebeneinander oder untereinander verbunden werden sollen.

Bei großen Tabellen kann das nachträgliche Verbinden von Zellen etwas tricky sein. Wir müssen nämlich die entsprechenden jetzt überflüssigen Zellen löschen. Sonst haben wir auf einmal folgendes Erscheinungsbild:

html fehlerhafte Tabellen

So sieht es dann aus:

html fehlerhafte Tabellen im Browser

Also aufgepasst und jede Änderung am besten gleich im Browser kontrollieren!

So, genug für den zweiten Tag. Zum Abschluss noch eine kleine Übung. Versuchen Sie, folgende Seite nachzubauen:

html Lehrgang Übungsaufgabe

Und hier geht es zur Lösung der Übungsaufgabe

Viel Spaß beim "Basteln"



« zurück