|
HTML dient der grafischen Gestaltung einer Webseite und kann in den textorientierten Medien der persönlichen Bibliothek mit Einschränkungen genutzt werden. Es stehen allerdings nur eine Reihe der gängigen HTML-Anweisungen zur Verfügung. Es können Informationen über die eigenen Medien und Bilder, die in der eigenen Bibliothek öffentlich sind, eingefügt werden. Links (Verweise auf andere Webseiten) können nur auf Ziele innerhalb der eigenen Bibliothek zeigen. Nützlich ist iHTML, wenn man seine Medien gestalten will, z.B., wenn man mit der Standardschriftfarbe nicht einverstanden ist. Insbesondere nützlich ist iHTML, wenn man die Übersicht der eigenen Bibliotheksordner oder die Übersicht der Beiträge in einem Ordner selbst gestalten will. Auch wenn es ein spezielles Medienformat für iHTML-Medien hier auf IRCLOVE gibt: Es ist möglich iHTML in allen textorientierten Medien und auch in Nachrichten an Mitglieder, sowie in Profiltexten zu verwenden. Der Dialekt (iHTML) wird im folgenden beschrieben und alle hier nicht aufgeführten HTML-Elemente können nicht verwendet werden. Allerdings sind aus Platzgründen nicht alle Eigenschaften dieser Elemente aufgeführt. Dies soll hier eine einfache Anweisung für diejenigen sein, die auf die Schnelle ihre Medien etwas schöner gestalten wollen. Denjenigen, die tiefer in die Materie einsteigen möchten kann die deutschsprachige Seite http://de.selfhtml.org/index.htm empfohlen werden. Ein Browser arbeitet HTML-Anweisungen wie einen geschriebenen Text von oben nach unten ab und er "denkt" dabei in Blöcken. Er liest und arbeitet blockweise. Ein Element befindet sich immer in einem ihn umgebenden Block und alle Angaben zum Element richten sich an diesem Block aus. Klingt komplizierter als es ist. Der oberste Block ist z.B. die Seite selber. Ein weiterer untergeordneter Block kann dann die einzelne Zelle einer Tabelle sein. Elemente (Text, Bild, Linie usw.) in diesem Block werden darin ausgerichtet. Die Grenzen eines Blockes gelten für alle Elemente in diesem Block. Grundsätzlich muss dem Browser dabei immer gesagt werden, was er gerade gestalten soll, welcher Art das zu verändernde Objekt ist (z.B. Text, Bild, eine Linie oder ein Link). Dazu wird dann das Objekt eingerahmt in zwei HTML-Anweisungen, eine Einleitende und eine Abschließende. HTML-Anweisungen selber sind immer in die Zeichen "<" und ">" eingeschlossen, damit sie der Browser vom Inhalt einer Webseite unterscheiden kann. In der einleitenden Anweisung können Angaben zur Gestaltung gemacht werden und die Abschließende Anweisung ist immer noch mit einem zusätzlichen "/" versehen. Ein kleines Beispiel: Die HTML-Anweisung <u> und ihr abschließendes Pendant </u> unterstreichen den Text dazwischen. Dieser Text wird <u>teilweise unterstrichen</u>. Dieser Text wird teilweise unterstrichen. Jeder Text der formatiert werden soll, wird in die HTML-Anweisungen <font> und </font> eingeschlossen. Um einem Text eine Farbe zu geben wird die Eigenschaft "color" verwendet. Die Größe wird von der Eigenschaft "size" bestimmt. Die Schriftart von der Eigenschaft "face". Hier zwei Beispiele:
<font color="blue" size="1" face="arial">Dies ist ein kleiner Wie zu sehen ist, müssen in HTML nicht immer alle Eigenschaften extra erwähnt werden. Wenn nicht, dann greift der Browser auf die zuletzt gültigen Einstellungen zurück. In diesem Text wäre das z.B. die Farbe grün.
<font size="2"> Ein Text in Standardschrift und -farbe,
Die Eigenschaft "color" kann auf unterschiedliche Arten angegeben werden.
Entweder man benutzt die Standardfarben der Browser, wie oben geschehen.
Diese sind: maroon,
red, green, lime,
olive, yellow, navy,
blue, purple,
fuchsia, teal,
aqua, silver, white
und natürlich 'black', also schwarz.
Oder man gibt die Farbe als RGB-Wert (Rot, Grün, Blau) an. Dazu schreibt man folgendes:
<font color="rgb(Zahl,Zahl,Zahl)">. Erlaubt sind Zahlen von 0 bis 255. Beispiele:
color="rgb(120,95,157)",
color="rgb(210,144,80)",
color="rgb(250,28,60)",
color="rgb(50,228,160)". Die Eigenschaft "size" kann ebenfalls auf unterschiedliche Arten angegeben werden. Entweder eine einfache Zahl (size="3") im Bereich 1 bis 7, oder eine relative Zahl (size="+2", size="-2") bezogen auf die im Browser des jeweiligen Betrachters eingestellte Standardschriftgröße. Schrift kann also beim Einen größer und beim Anderen kleiner dargestellt werden als im eigenen Browser. Beim Bearbeiten der Eigenschaft "face" empfiehlt es sich nur Standardschriften zu verwenden, da nicht jeder Betrachter alle Schriftarten installiert hat. Der Browser greift in diesem Fall dann auf die eingestellte Standardschrift zurück.
<b> und </b> bewirken, dass ein Text fett dargestellt wird.
<font color="red"><i>kursiver Text</i>
<h3><i><font color="#3fc5fe"> Eine kleine
| |||||||||
| Tabellen als Mittel der Gestaltung |
Tabellen sind eine sehr nützliche Sache, um Inhalte auf einer Webseite schön und gut strukturiert anzuordnen. Man muss sich nur ein wenig von der Assoziation 'Statistik' lösen und Tabellen als Mittel der Gestaltung sehen. Voneinander unabhängige Inhalte jeder Art können mit Tabellen fürs Auge geordnet werden. Tabellen sind sehr flexibel handhabbar. Sie können unsichtbar bleiben und nur ihr Inhalt sichtbar. Sie können leer sein, ohne Inhalt und nur als Platzmacher dienen. Tabellen können in ihren Zellen unterschiedlichste Inhalte (andere HTML-Elemente, Bilder, Text...) enthalten und davon beliebig viele in einer Zelle. Und sie sind verschachtelbar. Tabellen können Tabellen enthalten.
Aufbau einer Tabelle:
Grundsätzlich wird eine Tabelle von den HTML-Elementen <table> und </table> umschlossen. Innerhalb dieser befindet sich mindestens eine Zeile (<tr> und </tr>) und innerhalb dieser Zeile mindestens eine Zelle (<td> und </td>).
Ein Beispiel: Die Überschrift in diesem Text ist mit Hilfe einer einfachen Tabelle gestaltet.
<table border="2" bordercolor="lime" cellpadding="5">
<tr><td>
<font color="yellow"><b>Tabellen als
Mittel der Gestaltung:</b></font>
</td></tr>
</table>
Eine Zeile, eine Zelle und darin der Text.
Die Tabelle sorgt für den Rahmen und wer genau schaut,
sieht zwei Rahmen. Der Äußere ist der Tabellenrahmen
selber und der Innere der Rahmen der Zelle.
Die Eigenschaften einer Tabelle (<table>):
width - Breite der Tabelle in Pixel oder Prozent.
height - Höhe der Tabelle in Pixel oder Prozent.
cellspacing - Zellenabstand untereinander und zum Tabellenrand.
cellpadding - Abstand des Zelleninhalts zum Rand in Pixel.
bgcolor - Hintergrundfarbe der Tabelle.
border - Dicke des Rahmens in Pixel (0 bedeutet keinen Rahmen).
bordercolor - Farbe des Rahmens.
Die Eigenschaften einer Tabellenzeile (<tr>):
align - Ausrichtung (left, center oder right).
Die Eigenschaften einer Tabellenzelle (<td>):
width - Breite der Zelle in Pixel oder Prozent.
height - Höhe der Zelle in Pixel oder Prozent.
align - Ausrichtung des Inhalts (left, center oder right).
bgcolor - Farbe des Zellenhintergrundes.
colspan - Vertikales Verbinden von Zellen.
rowspan - Horizontales Verbinden von Zellen.
Die Eigenschaften "colspan" und "rowspan" bedürfen einer genaueren Erklärung. <td colspan="2">..</td> breitet eine Zelle über den Platz zweier aus. Sie wird vom Browser als eine Zelle dargestellt, aber intern wie zwei behandelt. Im unteren Beispiel wird in der zweiten Zeile die erste Zelle über zwei gespannt. Obwohl in allen Zeilen nur je zwei Zellen definiert werden hat die Tabelle drei Spalten. Analog verhält es sich mit "rowspan". Weiterhin zwingt die erste Zelle der ersten Zeile alle unter ihr gelegenen auf gleiche Breite. Viele der Größenangaben im Beispiel werden vom Browser überlesen. Keine der Zellen ist nur 10 Pixel breit oder hoch.
Farbangaben werden in den gängigen HTML-Formaten gemacht. Dazu lesen sie bitte im Abschnitt "Text gestalten".
Grundsätzlich ist es so, dass ein Browser erst die komplette Tabelle einliest und die Größe aller Elemente berechnet. Größenangaben (width/height) sind Minimalangaben. Sich widersprechende Angaben (davon gibt es einige im unteren Beispiel) überliest ein Browser. Tabellen richten sich normalerweise am Inhalt aus. Es ist also nicht notwendig überhaupt Größenangaben zu machen. Größenangaben überschreiben sich z.B. auch gegenseitig. Weiterhin schauen Browser welche Zeile die meisten Zellen hat und wie breit und hoch die größte Zelle einer jeden Zeile ist. Die gesamte Tabelle wird an diesen Daten ausgerichtet. Das bedeutet unter anderem: Jede Zeile hat soviele, unter Umständen imaginäre, Zellen wie die Zeile mit den meisten Zellen.
Beispiel:
Hier ist ein Text in Aqua nach einem Bild welches stark verkleinert wurde.
<table cellpadding="5" cellspacing="15"
bordercolor="aqua" border="5">
<tr>
<td width="50" height="50" bordercolor="red"
border="15" align="right">
<font color="yellow" size="2">Text</font></td>
<td width="10" bgcolor="blue"></td>
</tr>
<tr>
<td colspan="2" width="10" height="10" bgcolor="green">1</td>
<td width="10" height="10" bgcolor="red">2</td>
</tr>
<tr>
<td width="10" height="10" bgcolor="red">3</td>
<td width="10" height="10" bgcolor="green">4</td>
</tr>
</table>
| Text | ||
| 1 | 2 | |
| 3 | 4 | |