|
Cache-Beschreibungen in HTML
Kleiner HTML-Kurs für Einsteiger - Schritt für Schritt und mit möglichst wenig Fachchinesisch.
Wer keinen HTML-Editor hat, dem empfehle ich das Programm HTML-Editor Phase5. Wer erstmal nur ein bisschen testen will kann auch z.B. den Text-Editor von Windows benutzen (Startmenü -> Programme - > Zubehör -> Editor), den HTML-Code dort eingeben und dann mit "Speichern unter..." als Testdatei.html abspeichern. Die gespeicherte HTML-Datei kann dann mit einem Doppelklick geöffnet werden und kann offen bleiben. Nach jeder Änderung des HTML-Codes im Editor dann nur noch mit der Tastenkombination STRG + S speichern und die im Webbrowser geöffnete Seite aktualisieren.
 Zuerst etwas zum schmunzeln: Die Goldenen Regeln für schlechtes HTML
Um was halbwegs Vernünftiges in HTML zu basteln solltet ihr nicht nur wissen was man machen kann, sondern auch was man weglassen sollte: Die Goldenen Regeln für schlechtes HTML
Die Regeln zu lesen macht auch Spass wenn man gar nicht vor hat HTML zu lernen. Aber sicher fällt euch der eine oder andere Website-Betreiber ein, der die Regeln mal lesen sollte 
Ein paar Grundbegriffe
Zeilenumbruch: <br>
Fettschrift: <b>Fett</b>
Unterstreichen: <u>Unterstrichen</u>
Kursiv: <i>Schrägschrift</i>
Ein Link: <a href="http://www.faex.de">Linktext</a>
Ein Link in neuem Fenster öffnen: <a href="http://www.faex.de" target="_blank">Linktext</a>
Bild einbinden: <img src="http://geo.faex.de/pix/geocoin/icon16x16.jpg" alt="Das ist das kleine GeoFaex-Icon" border="0">
Schriftgröße: <font size="-1">Schrift kleiner</font>
Schriftfarbe Rot: <font color="#FF0000">Schrift Rot</font>
Schriftfarbe Grün: <font color="#00FF00">Schrift Grün</font>
Schriftfarbe Gelb: <font color="#FFFF00">Schrift Gelb</font>
Schriftfarbe Blau: <font color="0000FF">Schrift Blau</font>
Schriftfarbe Weiß: <font color="FFFFFF">Schrift Weiß</font>
Schriftfarbe Schwarz: <font color="000000">Schrift Schwarz</font>
Einfache Tabelle mit einer einzelnen Zeile und einer einzelnen Spalte
<table border="1">
<tr>
<td> Inhalt_Zeile_1,_Spalte_1 </td>
</tr>
</table>
Eigentlich ganz einfach:
- <table> "eröffnet" die Tabelle
- border="1" schaltet den Rahmen an, das ist zu Beginn einfacher und übersichtlicher
- <tr> markiert den Anfang der ersten Zeile
- <td> markiert den Anfang der Spalte, und </td> das Ende der Spalte
- </tr> markiert das Ende der ersten Zeile
- </table> "schließt die Tabelle wieder
Hat man erstmal dieses Prinzip verstanden ist es ein leichtes die Tabelle weiter auszubauen. Zum Beispiel mit einer zweiten Spalte. Im ersten Beispiel habe ich mit <tr> die Zeile begonnen, mit <td> eine Spalte geöffnet und diese dann mit </td> wieder geschlossen. Zwischen dem </td> und dem </tr> kann man jetzt eine nahezu beliebige Anzahl weiterer Spalten mit <td> Inhalt </td> einfügen - oder ganz bequem: kopieren und einfügen.
Einfache Tabelle mit einer einzelnen Zeile und 3 Spalten
| Zeile 1, Spalte 1 |
Zeile 1, Spalte 2 |
Zeile 1, Spalte 3 |
<table border="1">
<tr>
<td> Inhalt_Zeile_1,_Spalte_1 </td>
<td> Inhalt_Zeile_1,_Spalte_2 </td>
<td> Inhalt_Zeile_1,_Spalte_3 </td>
</tr>
</table>
Nach dem gleichen Prizip werden auch weitere Zeilen eingefügt. Nur dass diesmal der HTML-Code von <tr> bis </tr> kopiert und eingefügt wird.
Einfache Tabelle mit 2 Zeilen und 3 Spalten
| Zeile 1, Spalte 1 |
Zeile 1, Spalte 2 |
Zeile 1, Spalte 3 |
| Zeile 2, Spalte 1 |
Zeile 2, Spalte 2 |
Zeile 2, Spalte 3 |
<table border="1">
<tr>
<td> Inhalt_Zeile_1,_Spalte_1 </td>
<td> Inhalt_Zeile_1,_Spalte_2 </td>
<td> Inhalt_Zeile_1,_Spalte_3 </td>
</tr>
<tr>
<td> Inhalt_Zeile_2,_Spalte_1 </td>
<td> Inhalt_Zeile_2,_Spalte_2 </td>
<td> Inhalt_Zeile_2,_Spalte_3 </td>
</tr>
</table>
Nun besteht die Tabelle schon aus insgesammt 6 Zellen. Versuche jetzt mal eine einzelne Zeile zu löschen und schau was dann mit deiner Tabelle passiert. Dabei wirst Du vermutlich feststellen, dass in allen Zeilen immer die selbe Anzahl von Spalten sein müssen. Oder ändere mal die Zahl nach "border" von border="1" in border="5" oder border="0" . Richtig! Damit ändert man die Linienstärke des Rahmens. Den Rahmen kann man auch völlig weglassen, dann beginnt man die Tabelle nur mit <table> , aber dann sieht man nicht mehr so gut was man sich zusammengebastelt hat. Vor allem bei komplizierteren oder verschachtelten Tabellen behält man durch den Rahmen leichter den Überblick.
Das wars fürs erste! Aber in Kürze gehts hier weiter....
In der Fortsetzung zeige ich wie man
- zwischen Text und Rahmen einen Abstand einbaut
- den Rahmen, die Zellen und/oder den Text einfärbt
- zwei oder mehr Zellen in einer Zeile und/oder Spalte zusammenfügt
- verschachtelte Tabellen (Tabellen innehalb von Tabellen) baut
- die Höhe und Breite der Zeilen und Spalten festlegt
- Bilder, Hintergrundbilder, Links und so weiter einbaut
Kleines Beispiel zur allgemeinen Verwirrung 
<table border="5" cellpadding="5" cellspacing="3">
<tr>
<td colspan="2" bgcolor="#f3b112" height="80" valign="top"> INHALT </td>
<td> INHALT </td>
</tr>
<tr>
<td rowspan="2" valign="bottom"> INHALT </td>
<td width="150"> INHALT </td>
<td background="http://geo.faex.de/pix/geocoin/icon16x16.jpg"> INHALT </td>
</tr>
<tr>
<td colspan="2" height="140">
<div align="center"> Verschachtelte Tabelle in zwei verbundenen Zellen
<table border="2" bordercolordark="#0020FF" bordercolorlight="#00FFFF">
<tr>
<td bgcolor="#FFFF00"> A </td>
<td bgcolor="#00DF00"> B </td>
<td bgcolor="#FF00FF"> C </td>
<td bgcolor="#CFCFCF"> D </td>
<td bgcolor="#FF7F7F"> E </td>
</tr>
<tr>
<td bgcolor="#00005F"><font color="#FFFFFF"> F </font></td>
<td bgcolor="#7F0000"><font color="#FFFFFF"> G </font></td>
<td bgcolor="#0050A0"><font color="#FFFFFF"> H </font></td>
<td bgcolor="#005050"><font color="#FFFFFF"> I </font></td>
<td bgcolor="#7000C0"><font color="#FFFFFF"> J </font></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Zeile 1, Spalte 1+2 verbunden,
Text oben, Hintergrund Orange |
Zeile 1, Spalte 3 |
Zeile 2+3 verbunden,
Spalte 1, Text unten |
Zeile 2, Spalte 2 |
Zeile 2, Spalte 3, Bild |
Zeile 3, Spalte 2+3 verbunden, Verschachtelte Tabelle innerhalb der zwei verbundenen Zellen, Inhalt zentriert
|
Bis demnächst....
GeoFaex
|
