http://jendryschik.de / archiv / einfuehrung / fortgeschrittene.html
Die HTML-Einführung für Anfänger von Dave Raggett
Sie werden bereits gelesen haben, dass Dave Raggett eine zweite HTML-Einführung geschrieben hat, die sich an Fortgeschrittene wendet. Diese Einführung ist wesentlich komplexer als die erste, aber ebenso einfach und schnell zu begreifen. In diesem zweiten Teil lernen Sie Sonderzeichen, vorformatierten Text, Bild- und Textausrichtung, Image Maps, Tabellen und einige kleine Javascripte kennen. Erarbeiten Sie sich bitte auch diese Elemente der Reihe nach, bis Sie sie anwenden können.
Einige der Hinweise bezüglich CSS (wie z. B. in der Erläuterung von <pre>) sind für Sie vielleicht noch schwer zu begreifen. Überlesen Sie sie einfach; ich werde im nächsten Kapitel noch auf Style Sheets eingehen.
Die Einführung für Fortgeschrittene finden Sie hier:
Wundern Sie sich nicht, dass weder Dave Raggett so richtig auf Farben und Layout eingeht noch ich das in diesem Kapitel tun werden. Jegliche Farb-, Größen- oder Positionsdefinitionen werden wir mit CSS realisieren.
Ich habe Ihnen in dieser Einführung bereits erläutert, wie wichtig Hyperlinks für ein funktionieres World Wide Web sind. Denn durch Hyperlinks ist es möglich, Dateien auf allen Rechnern der Welt miteinander zu vernetzen.
Ein Hyperlink beginnt mit dem Tag <a> und endet mit </a>. Das Attribut href legt das Ziel des Hyperlinks fest. Zwischen den Tags steht der Text, der vom Browser als Link dargestellt wird. Ein Link auf die 'index.html', also die Startseite dieser Einführung sieht wie folgt aus:
<a href="index.html">Zur Startseite</a>
Eine Pfadangabe dieser Art nennt man relative Pfadangabe, da sie vom aktuellen Dokument ausgeht. In diesem Fall liegt die 'index.html' im selben Verzeichnis wie diese Seite. Wollen Sie auf eine Seite im Unterverzeichnis "bilder" verlinken, sieht die relative Pfadangabe so aus:
<a href="bilder/datei.html">Datei im Unterverzeichnis</a>
Verweise auf Dateien in übergeordneten Verzeichnissen, in diesem Beispiel die Startseite von jendryschik.de, sehen wie folgt aus:
<a href="../">jendryschik.de</a>
Eine weitere Möglichkeit ist die absolute Pfadangabe. Hierbei wird die komplette URI als Wert für das Attribut href angegeben. Ein Link zu der Einführung für Fortgeschrittene von Dave Raggett hätte diesen Quelltext:
<a href="http://www.siteform.de/tutorials/Advanced.html"> Mehr Möglichkeiten mit HTML, vom 29. August 2000</a>
Sie sehen: wollen Sie auf externe Dateien verweisen, also Dateien, die nicht Bestandteil Ihrer Webseite sind, müssen sie absolute Pfadangaben benutzen. Wenn Sie innerhalb Ihrer Webseite verlinken, sollten Sie relative Pfadangaben benutzen. Sie werden vor allem dann feststellen, dass dies sinnvoll ist, wenn Sie ihre komplette Webseite auf eine andere Domain verschieben; haben Sie vorher mit absoluten Angaben operiert, müssen Sie dann alle Links nachkorrigieren. Auf einige Browsern werden relative Pfadangaben auch schneller ausgewertet als absolute.
Mit Hyperlinks lassen sich natürlich nicht nur HTML-Datein miteinander verlinken. Setzen Sie einen Link auf eine Datei, wird diese Datei je nach Browser entweder dargestellt oder runtergeladen. Bei dem Download einer ZIP-Datei zum Beispiel handelt es sich um nichts anderes als um einen derartigen Link:
<a href="http://www.jendryschik.de/files/datei.zip">Download</a>
Wenn Sie eine relativ lange Webseite geschrieben haben, mag es manchmal sinnvoll sein, Querverweise innerhalb dieser Webseite zu setzen. Zum Beispiel wenn Sie ein Inhaltverzeichnis am Anfang und darauf folgend den Text anführen. Oder wenn Sie von einer Seite aus in die Mitte einer anderen Webseite verweisen wollen, wie ich das in dieser Einführung gemacht habe.
Um dies zu bewerkstelligen, setzen Sie einen Anker, auf den Sie in Ihrem Link verweisen. Als Beispiel: Sie möchten auf die Seite 'buch.html' auf das zweite Kapitel verweisen. Dazu setzen Sie mit dem Element <a> einen Anker, den Sie durch das Attribut name benennen:
<h2><a name="kapitel2">Kapitel 2</a></h2>
Der Verweis dazu ist ein ganz normaler Link, jedoch hängen Sie den Namen des Ankers per # (Raute) an:
<a href="buch.html#kapitel">zweites Kapitel</a>
In modernen Browsern braucht man das <a>-Element nicht mehr dazu, um Anker zu setzen. Es reicht, dem Element, auf das man verlinken möchte (in diesem Beispiel eine Überschrift zweiter Ordnung), ein Attribut id zu verleihen:
<h2 id="kapitel2">Kapitel 2</h2>
Sie können auch für Links ein title-Attribut setzen. Wenn der Browser dies interpretiert, erscheint ein Tooltipp, wenn der Mauszeiger kurz auf dem Link ruht. Benutzen Sie Link-Titles als Ergänzung zum Kontext der Seite, aber beachten Sie, dass auch ohne einem Title klar sein muss, wohin der Link führt.
Mehr dazu in dem kurzen Text von Björn Höhrmann.
Die Attribute alt und title werden sehr oft miteinander verwechselt.
Das alt-Attribut dient dazu, bei Textbrowsern oder in Browsern, bei denen die Darstellung von Bildern abgeschaltet wurde, anstelle der Bilder einen alternativen Text anzuzeigen. Das Setzen eines alt-Attributes ist für valides HTML Pflicht. Möchte man keinen alternative Text angeben, definiert man alt="". Dave Raggett hat die Bedeutung des alt-Attributes in seiner Einführung bereits angesprochen und in seinen Beispielen demonstriert. Jedoch hat er es nur im Zusammenhang mit Image Maps erwähnt und dessen Bedeutung nicht richtig deutlich gemacht. Das gelingt Björn Höhrmann wesentlich besser.
Das title-Attribut sorgt für die schönen Tooltipps, die angezeigt werden, kurz nachdem der Mauscursor das Bild (oder den Bereich, für den das Attribut definiert wurde) berührt. Eine Angabe ist nicht Pflicht und oft auch überflüssig.
Der Microsoft Internet Explorer und Netscape Navigator haben den Fehler, das alt-Attribut als Tooltipp anzuzeigen, wenn kein title-Attribut angegeben ist. Dies ist falsch und hat zusammen mit der Tatsache, dass Netscape 4 title überhaupt nicht anzuzeigen vermag, zu der irrigen Annahme geführt, man könne das alt-Attribut als Tooltipp missbrauchen.
In neueren Browsern (nicht in Netscape 4) kann man die falsche Anzeige des alternativen Textes als Tooltipp unterbinden, wenn man title="" definiert.
HTML bietet die Möglichkeit, Kommentare einzubinden. Das kann manchmal sehr sinnvoll sein, um Elemente wie Navigation, Inhalt oder Fußzeile voneinander abzutrennen, vor allem wenn man Anfänger ist. Kommentare sind sinnvoll, um interne Angaben zu Autor oder Erstelldatum oder interne Anmerkungen (oder Notizen) einzufügen oder um verwendete HTML-Befehle auszukommentieren. Diese stehen sichtbar im Quelltext der Seite, werden im Browser hingegen nicht angezeigt.
Kommentare sehen wie folgt aus:
<!-- Dies ist ein einzeiliger Kommentar. --> <!-- Dies ist ein mehrzeiliger Kommentar, der durch die gleichen Zeichenfolge eingeschlossen wird. -->
Javascripte werden zumeist in Kommentare eingeschlossen, um zu verhindern, dass Browser, die nicht javascriptfähig sind, deren Quelltexte im Browserfenster anzeigen. Allerdings sieht die abschließende Zeichenfolge etwas anders aus:
<script language="javascript" type="text/javascript">
<!--
/* Javascript-Code. */
//-->
</script>
Die // dienen dazu, das abschliessende --> für das Script zu kommentieren (bei der Zeichenfolge // handelt es sich um die Einleitung eines Javscript-Kommentars), da dies sonst als Teil des Scripts erkannt wird (Stichwort: Dekrement-Operator).
Wenn Sie sich einmal den Quelltext dieser Seite anschauen, werden sie im Kopf zahlreiche Meta-Angaben entdecken. Sie werden im Browserfenster nicht angezeigt.
Meta-Angaben beinhalten Informationen über die Autor, das Erstelldatum und den Inhalt der Seite. Durch sie ist es sehr einfach möglich, HTTP-Befehle wie zum Beispiel das Weiterleiten auf eine andere Seite zu realisieren.
Die gängigsten Meta-Tags sind folgende:
<meta name="description" content="Dieser Text wird in einer Suchmaschine beim Auffinden einer Seite angezeigt."> <meta name="author" content="Der Name des Autors"> <meta name="keywords" content="Schlüsselwörter für Suchdienste">
Weitere Informationen zu Meta-Angaben finden Sie auf folgenden Seiten:
Sie sehen unten auf dieser Seite vor der blauen Fußzeile eine blaue Trennlinie. Diese wird durch das leere Element <hr> definiert.
Trennlinien dienen zur optischen und inhaltlichen Abgrenzung von nicht zusammengehörigen Seitenabschnitten. Eine Trennlinie erzeugt einen eigenen Absatz.
Wenn Sie eine HTML-Seite schreiben, passiert es Ihnen sehr leicht, dass sich Fehler einschleichen. Mit passiert oft der Fehler, dass bei </p> den Schrägstrich vergesse und statt dessen <p> schreibe. Dies ist einer der Fehler, die nicht sofort auffallen. Würde man den Schrägstrich in einem Tabellenelement vergessen, würde diese in Netscape nicht angezeigt werden. Dann beginnt die Fehlersuche.
Ein Validator nimmt die Arbeit ab. Er überprüft, ob ein HTML-Dokument den von SGML gegebenen syntaktischen Konventionen entspricht. Dabei prüft er die Dokumente streng nach der im DOCTYPE angegebenen Version und deren Spezifikation.
Wären Seiten fehlerhaft geschrieben, muss der Browser die falschen Stellen interpretieren und deren Bedeutung im Kontext erraten. Das bläht die Anwendungen auf und macht sie langsam. Darüberhinaus ist ein solches Verhalten nicht genormt; die Dokumente werden früher oder später falsch oder gar nicht mehr dargestellt. Wer syntaktisch falsches HTML verwendet, kann sich nicht darauf verlassen, dass aktuelle und zukünftige Browser die Dokumente richtig verarbeiten können. Einige Browser teilen das dem Benutzer auch mit, worauf hin eine Seite ein schlechtes Image für den Benutzer bekommt.
Eine vollständig validierte, das heißt fehlerbereinigte und korrekt geschriebene Seite, verdient das Attribut "valides HTML", was man in Form eines hübschen Buttons als Bestandteil der Fußzeile jeder Seite dieser Einführung auch sehen kann. Die Seiten dieser Einführung sind also in validem XHTML und CSS geschrieben.
| Letzte Änderung: 03. April 2001 |
