CLS: Tipps & Tricks: HTML



Tipps & Tricks: HTML

Auf dieser Seite finden Sie 5 Tipps & Tricks für HTML.

Wenn in den folgenden Erläuterungen Texte wie MsgBox formatiert sind, handelt es sich um konkret einzugebende Inhalte wie VBA-Code oder die Eingabe von Werten. Menüs wie Datei Speichern sind wie hier zu sehen formatiert. Schaltflächen oder Registerkarten auf Dialogen werden wie Menüs behandelt.

Alle Tipps sind nach bestem Wissen geprüft, aber selbstverständlich ohne Gewähr. Sollten Sie doch einen Fehler darin entdecken, würden wir uns freuen, wenn Sie uns per eMail Bescheid sagen.

Viele Homepages basteln ihre Layouts mittels Tabellen zusammen, auch und gerade diejenigen, die mit Programmhilfe erstellt werden. Diese scheinbare Arbeitsvereinfachung wird mit massiven Nachteilen erkauft:

  • Der Quellcode der Datei wird enorm aufgebläht und (mit teilweise auch noch verschachtelten Tabellen) ziemlich unleserlich.
  • Design und Inhalt liegen gemischt in einer einzigen Datei, eine Layoutänderung oder gar die Anpassung an verschiedene Fenstergrößen werden zu einer mittleren Katastrophe.
Es gibt noch mehr Gegenargumente wie die Probleme von Screenreadern für lesebehinderte Menschen, aber das sollte schon reichen. Dabei ist die Alternative längst vorhanden und einfachst zu benutzen: das div-Element, vor allem im Zusammenhang mit CSS (Cascading Style Sheets). Um ein Logo oben links zu positionieren, schreiben Sie irgendwo in der Datei einfach:

...
<div style="position:absolute; top:25px; left:15px;">
<img src="CLS_Logo.jpg" />
</div>
...

Wohlgemerkt: irgendwo! Durch die absolute Positionierung können Sie genau bestimmen, wo die linke obere Ecke des Logos liegen soll, das Herumprobieren mit den Tabellenrändern entfällt. Das Logo soll rechts oben liegen? Macht nix:

...
<div style="position:absolute; top:5px; right:40px">
<img src="150Tipps.gif" height="85" width="193" />
</div>
...

Damit ist seine rechte Kante 40 Pixel vom rechten Browserrand entfernt. Wenn Sie die style-Angaben auch noch in CSS-Dateien auslagern, sind Inhalt und Design sauber voneinander getrennt, sie können also durch einfachen Wechsel der StyleSheets das gesamte Layout neu organisieren. Lesen Sie dazu den Tipp "Stylesheets benutzen!".

Eine gute Homepage zeigt im Browser neben dem URL ein kleines Bild an, das sogenannte FavIcon (Favorites Icon). Dessen Einbindung ist relativ einfach:

Index.htm oder ähnliche
<html>
<head>
<title>Die schönste Seite im Internet!</title>
<link rel="SHORTCUT ICON" href="Favicon.ico" type="image/ico" />
</head>
...
</html>

Allerdings muss diese Grafik im Icon-Format gespeichert sein, was nicht jedes Grafikprogramm beherrscht, gegebenenfalls suchen Sie in Google nach "Icon-Editor".

Bevor Sie anschließend unnötig frustriert sind: zwar hat der MSIE das FavIcon erfunden, aber gerade dort funktioniert es nur dann, wenn Sie die betreffende Seite auch in Ihre Favoriten aufgenommen haben (und selbst dann nicht immer). Opera zeigt es korrekt jederzeit in der URL-Zeile an.

Mit spezialisierten Editoren (z.B. NetObjects, welcher die Seiten aus seiner Datenbank erzeugt) oder Servern (z.B. IIS, der ASP.NET-Anweisungen ausführen kann) lässt sich die Navigation für eine Homepage ziemlich automatisch und arbeitssparend erzeugen. Was machen Sie aber, wenn Sie nur eine "kleine" Homepage erstellen wollen, die auch Kolleg/inn/en ohne solche Programme pflegen sollen?

Dann muss es reines HTML sein, so dass zur Not jeder einfache Text-Editor als Bearbeitungsprogramm geeignet ist. Auf vielen Homepages wird dann die Navigation mühsam von einer Seite auf die nächste kopiert und muss bei Änderungen natürlich überall einzeln angepaßt werden. Mit einem kleinen Trick können Sie die Navigation aber auch für nur-HTML auslagern: mit dem IFrame-Element.

Erstellen Sie dazu eine eigene Datei "Menue.htm" nach folgendem Muster:

Menue.htm
<html>
<head>
...
</head>
<body bgcolor="#F0F0F0">
 
Überblick<br />
<a href="Index.htm" target="_parent">Home</a><br />
<a href="UeberMich.htm" target="_parent">Über mich</a><br />
<a href="UeberMeineArbeit.htm" target="_parent">Über meine Arbeit</a><br />
Beispiele<br />
...
</body>
</html>

Wichtig ist dabei, dass die a-Tags mit target="_parent" ausgeführt werden, weil das Menü ein Kind-Element der eigentlichen Seite ist. Es wird also die Referenz des Eltern-Objekts geändert. In jeder "normalen" Seite fügen Sie dann mit diesen Zeilen das Menü ein:

Index.htm oder ähnliche
...
<iframe src="Menue.htm" width="180" frameborder="0">
Schade, denn dieser Browser kann die Navigation nicht anzeigen...!
</iframe>
...

Für uralte Browser (MSIE < 3.0, Opera < 5.12, Netscape < 6.0, FireFox < 1.0), die das IFrame-Element nicht kennen, gibt es einen Fehlertext.

Grundsätzlich mag es eine gute Idee sein, dieses Konzept umzukehren: also nicht das Menü als eingebetten IFrame auf jeder Seite, sondern eine einzige Hauptseite mit einem IFrame darin, welcher die wechselnden Inhalte anzeigt. Das fühlt sich gut an, hat aber zwei gravierende Nachteile:

  • wie bei Frame-Elementen ändert sich die sichtbare http-Adresse nicht, ein Verweis oder ein Lesezeichen funktioniert also nicht, und
  • während die Breite einfach auf 100% gesetzt werden kann, ist die Höhe immer unbrauchbar, weil Sie sich auf einen Wert festlegen müssen, aber nicht die Höhe der darin angezeigten Seite abfragen können.
Sie können dieses IFrame-Element übrigens ebenso einsetzen, um Inhalte fremder Seiten in Ihrer Seite darzustellen (soweit Sie dabei keine Urheberrechte verletzen, natürlich). Im Tipp "Diese Tipps in Ihre Homepage übernehmen" finden Sie ein entsprechendes Beispiel.

Viel weiter verbreitet als das oben genannte Konzept der IFrame-Elemente sind die "echten" Frame-Tags. Dabei besteht die geöffnete Datei nur aus Frame-Elementen ganz ohne Inhalt:

Index.htm oder ähnliche Startdatei
<html>
<head>
<title>Meine Beispielseite</title>
</head>
<frameset rows="*,135" frameborder="no" border="0" bordercolor="white">
<frameset cols="129,*" frameborder="no" border="0" bordercolor="white">
<frame name="Inhalt" src="Inhalt.htm" frameborder="no"
scrolling="auto" bordercolor="white">
<frame name="Haupt" src="Home.htm" frameborder="no"
scrolling="auto" bordercolor="white">
</frameset>
 
<frame name="Fuss" src="Panorama.jpg" frameborder="no"
height="135px" scrolling="no" width="1200px" marginwidth="0px" marginheight="0px" noresize="noresize" style="text-align:left"
bordercolor="white">
<noframes>
<body>
<h1>Alternativ-Inhalt</h1>
Leider kann Ihr Browser keine Frames anzeigen.<br />
Bitte öffnen Sie direkt<a href="Inhalt.htm">Inhalt.htm</a><p />
</body>
</noframes>
</frameset>
</html>

Diese Startdatei lädt drei andere Dateien mit dem eigentlichen Inhalt in eine tabellarische Struktur, die in diesem Fall so aussieht:

Inhalt = Inhalt.htm Haupt = Home.htm
Fuss = Panorama.jpg

Der äußerste Frameset ist zeilenweise unterteilt und erfordert für die erste Zeile beliebig viel Höhe, so dass für die zweite Zeile (das Panorama) am unteren Bildrand 135 Pixel Höhe verbleiben. Die erste Zeile wiederum wird mit dem inneren Frameset in zwei Spalten aufgeteilt, deren linke (das Inhaltsverzeichnis) genau 129 Pixel breit ist und deren rechte (der wechselnde Inhalt, beginnt hier mit "Home") den übrigen Platz nutzt.

Wie Sie vielleicht bemerkt haben, muss die eingebettete Datei gar keine vom Typ "*.htm" sein, Sie können dort auch direkt ein Bild wie "Panorama.jpg" angeben. Das Inhaltsverzeichnis muss den Frame rechts oben über seinen Namen Haupt ansprechen, so dass es wie folgt aussieht:

Inhalt.htm
...
<a href="Home.htm" target="Haupt">Home</a>
<a href="A.htm" target="Haupt">A</a>
<a href="Impressum.htm" target="Haupt">Impressum/Kontakt</a>
<a href="Anfahrt.htm" target="Haupt">Anfahrt</a>
<a href="Downloads.htm" target="Haupt">Downloads</a>
...

Wenn der wechselnde Inhalt im Haupt-Frame zu groß wird, erzeugt der Browser automatisch Rollbalken (falls Sie das nicht mit scrolling="no" verhindern). Opera macht korrekt nur den senkrechten Rollbalken, weil ja der Seitenumbruch des Inhalts automatisch angepaßt wird, aber MSIE erzeugt ärgerlicherweise einen überflüssigen waagerechten Rollbalken.

StyleSheets benutzen! ID 388 Top-Tipp!

Jeden Buchstaben einzeln formatieren und mehr Formatanweisungen als Text in der Datei haben? So ein Quatsch! Dafür gibt es StyleSheets! Diese sind sozusagen das Gegenstück zu Formatvorlagen in Word: Sie geben zentral das Aussehen vor, so dass in der Datei selber tatsächlich nur noch der Text und der Name des gewünschten Formats genannt werden muss.

Anstatt also solcher Anweisungen (Formatierung zur Verdeutlichung kursiv):

Default.aspx, Default.html oder ähnliche
...
<font style="font-family:Courier New; font-size:large; font-weight:bold; color:BlueViolet; background-color:Burlywood">Dies</font> ist ein <font style="font-family:Courier New; font-size:large; font-weight:bold; color:BlueViolet; background-color:Burlywood">Beispieltext</font>.
...

(mit diesem Ergebnis "Dies ist ein Beispieltext") schreiben sie in der Datei nur noch:

Default.aspx, Default.html oder ähnliche
...
<head>
<title>Die beste Seite im Internet!</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
...
<span class="bunt">Dies</span> ist ein <span class="bunt">Beispieltext</span>.

Dazu brauchen Sie dann eine zentrale Datei "StyleSheet.css" mit allen Beschreibungen der Formate. Dazu gehören "eingebaute" Formate wie <h1> und selbstdefinierte wie <bunt>. Letztere müssen bei der Definition allerdings mit einem Punkt beginnen:

StyleSheet.css
body
{
color: black;
font-family: Tahoma;
background-color: white;
font-size: 10pt;
}
 
h1
{
font-weight: bold;
font-size: 20pt;
color: black;
font-family: Tahoma, Sans-Serif;
page-break-before: avoid;
vertical-align: top;
text-align: left;
}
 
.bunt
{
font-family:Courier New;
font-size:large;
font-weight:bold;
color:BlueViolet;
background-color:Burlywood;
}

Nur so sind Sie sicher, dass die Formatierung in allen Dateien identisch ist, und sparen nebenbei locker 30-50 % der Dateigröße ein, die sonst zur lokalen Formatierung nötig ist.

Mit dem span-Tag werden Formatierungen im laufenden Text beschrieben. Mit div beginnt immer ein eigener Absatz, aber dafür werden auch die Absatzformatierungen des Styles benutzt. Sie können den gleichen Style mit beiden Tags benutzen (wie das übrigens auch hier für die gelb hinterlegten Code-Beispiele geschieht).