|
Der richtige Einstieg ins HTML Jede Auszeichnung auf der Seite nimmt man mit Hilfe von Kürzeln vor - im Zusammenhang mit HTML spricht man von "Tags". Ein Tag (auch Etikett) wird mit dem Kleiner-Zeichen (<) eingeleitet. Danach folgen das Kommando und meist noch einige Parameter. Das Ende des Tags kennzeichnet ein Größer-Zeichen (>). Ein Tag ist zum Beispiel <b>. Dieses Etikett legt fest, dass der nachfolgende Text "fett" (bold) gesetzt wird. Die meisten Kommandos erfordern es, dass außer dem Anfang auch das Ende der jeweiligen Formatierung gekennzeichnet wird. Am Ende einer Formatierung wiederholen Sie das Kommando, setzen aber diesmal einen Schrägstrich davor. Der Tag </b> bestimmt, dass der nachfolgende Text wieder normal (ungefettet) dargestellt wird. Damit Sie sofort am Bildschirm die Formatierungen der HTML-Seite kontrollieren können, halten Sie neben dem Editor oder der Textverarbeitung den entsprechenden Browser offen. Sobald Sie eine Änderung vorgenommen und die Datei gespeichert haben, klicken Sie auf den Reload-Button des Browsers. Daraufhin werden die Änderungen sofort sichtbar. Für Anwender, die nicht so umständlich agieren wollen, haben Programmentwickler eine Reihe spezieller HTML-Editoren, aber auch diverse HTML-Filter für Textverarbeitungsprogramme auf den Markt gebracht. Im allgemeinen lohnt sich der Einsatz dieser Produkte aber nur bedingt. Legen Sie sich eine Datei an und speichern Sie diese unter dem gewünschten Namen mit der Dateierweiterung HTML oder HTM. Jedes HTML-Dokument beginnt prinzipiell mit dem Tag <html> , der in die erste Zeile des Dokuments gesetzt wird, und endet mit dem Tag </html> , den Sie analog dazu in die letzte Zeile schreiben. Ebenso gibt es ein paar grundlegende Layout-Vorgaben. So unterscheidet man zwei Bereiche:
Eine Homepage muss also wie folgt aufgebaut sein:
Das Problem umgehen Sie, indem Sie diese "kritischen" Zeichen nicht direkt eingeben, sondern umschreiben. Dazu stellt HTML einige Codes bereit, die jeweils mit "&" eingeleitet und mit einem Semikolon abgeschlossen werden. Die Umschreibung für ein "ö" lautet zum Beispiel "ö". Die einzelnen Codes finden Sie als Liste im Internet: www.netzwelt.com/selfhtml/zeichen. Sie sollten unbedingt alle dort aufgelisteten Zeichen umschreiben. Die korrigierte HTML-Beispielseite sieht dann wie folgt aus:
Neben Umlauten und Sonderzeichen gibt es weitere Besonderheiten: Auch Zeilenumbruch sowie Leerzeilen werden per Tag eingegeben. Das gewohnte Betätigen der Return-Taste führt nicht zum Ziel, Returns werden ignoriert. Statt dessen werden <br> (Break; zu deutsch: Zeilenumbruch) und <p> (Paragraph; auf deutsch: Absatz) benutzt. <br> gibt das Ende einer Zeile vor; der nachfolgende Text wird in die nächste Zeile umbrochen. Die Eingabe hallo <br> hallo setzt die "saloppe" Anrede zweizeilig. <p> setzt Text zweizeilig, erzeugt aber zusätzlich eine Leerzeile. Die Eingabe hallo <p> hallo formatiert Text auf der Homepage so:
Für größere Textabstände müssen Sie den Tag <br> verwenden, da mehrere <p> -Tags ignoriert werden. Zwei Leerzeilen erhalten Sie beispielsweise so:
Da die Beispielseite aus unformatiertem Text besteht, wirkt sie noch recht trist. Sie soll jetzt durch unterschiedliche Schriftgrade und Schriftfarben optisch ansehnlicher gestaltet werden. Da die Beispielseite aus unformatiertem Text besteht, wirkt sie noch recht trist. Sie soll jetzt durch unterschiedliche Schriftgrade und Schriftfarben optisch ansehnlicher gestaltet werden. Das Kommando für diesen Zweck lautet »font«. Es kennt eine Reihe von Parametern, welche die genaue Schriftformatierung festlegen: »size« definiert den Schriftgrad, »color« bestimmt die Farbe und »face« die Schriftart. Ein Kommando könnte zum Beispiel lauten:
In diesem Fall wird die Überschrift der Seite in einem hohen Schriftgrad, in roter Schriftfarbe und in der angegebenen Schriftart dargestellt. Zunächst zum Parameter »size«. Dieser kennt sieben Abstufungen: von 1 (sehr klein) bis 7 (sehr groß). Außerdem kann die Angabe relativ erfolgen: <font size=+2> stellt den Text zum Beispiel zwei Stufen größer dar und <font size=-1> eine Stufe kleiner. Der Parameter »color« weist zunächst keine besonderen Schwierigkeiten auf, er erfordert lediglich ein Schlüsselwort, das die Schriftfarbe repräsentiert. Da sich über Schlüsselwörter die Farbabstufungen nur sehr grob definieren lassen, kann alternativ die gewünschte Farbe als RGB-Wert (Rot/Grün/Blau) angegeben werden. Dies ist jedoch etwas diffizil: Die Angabe muss hexadezimal erfolgen, und es ist etwas Erfahrung hinsichtlich der additiven Farbmischung notwendig. Die Definition erfolgt in der Form »color =#rrggbb«, wobei jeweils Werte von 00 (dezimal 0) bis ff (dezimal 255) erlaubt sind. »color=#ff00ff« definiert folgende Anteile: maximaler Rotanteil, kein Grünanteil, maximaler Blauanteil. Das Ergebnis ist ein Violett. Beim Umrechnen von dezimal nach hexadezimal hilft im übrigen ein technisch-wissenschaftlicher Taschenrechner, wie er zum Beispiel in Windows 3.x und Win 95 integriert ist. Es mag etwas verwundern, dass im Beispiel zwei Schriftarten (Arial und Helvetica) angegeben sind. Der Grund ist, dass die einzelnen Computer häufig einen unterschiedlichen Schriftenbestand auf Lager haben. Es ist daher sinnvoll, mehrere Schriftarten zu definieren, es wird dann die Schrift verwendet, die zuerst gefunden wird. Im konkreten Beispiel kommt daher als Schriftart Arial zum Einsatz. Ist sie nicht verfügbar, wird der Text in Helvetica angezeigt. Sie sollten nur solche Schriftarten als Alternative angeben, die ähnlich aussehen, sonst fällt das Layout der Seite kaum einheitlich aus. Im Falle von Helvetica und Arial ist diese Voraussetzung erfüllt. Der Parameter »face« ist kein Bestandteil des derzeit gültigen HTML-Standards 2.0, sondern eine spezifische Erweiterung, die Netscape und Microsoft in ihre Browser aufgenommen haben. Das heißt, dass unterschiedliche Schriftarten nur im Netscape Navigator 3.0 und Explorer 3.0 sichtbar sind. In der verbreiteten Netscape-Version 2.x wird die Definition ignoriert und der Text in einer StandardSchriftart dargestellt. Durch die Schriftformatierungen wird das HTML-Dokument nun langsam optisch ansehnlich. Was noch sehr störend wirkt, ist der triste Standardhintergrund. Daher sollten Sie Farbe ins Spiel bringen. Geben Sie die gewünschte Farbe über den Parameter »bgcolor« (für BackGround) beim body-Tag an. HTML wird laufend durch das "WWW Consortium" weiterentwickelt, von dem HTML 3.0 jedoch nie freigegeben wurde. Der Hauptgrund dafür: Mittlerweile haben die Browser-Hersteller den HTML-Befehlssatz eigenmächtig erweitert. Zum Beispiel erzeugt der Befehl "marquee" nur im Microsoft Explorer eine Laufschrift, nicht im Netscape Navigator. Die jüngst vorgeschlagene HTML-Version 3.2 faßt diese proprietären Änderungen wieder zusammen und soll für mehr Kompatibilität zwischen den Browsern sorgen. Bleibt abzuwarten, ob sich die Browser-Hersteller daran halten. Es klingt verlockend: Inzwischen gibt es eine Vielzahl an HTML-Editoren sowie Konvertierungs-Tools für Textverarbeitungen, die es ohne HTML-Kenntnisse erlauben, Seiten für das World-Wide Web anzufertigen. Bei nicht allzu hohen Ansprüchen leisten diese Tools tatsächlich, was sie versprechen. Ist jedoch ein perfektes, komplexes Layout gefordert, stoßen die Tools schnell an ihre Grenzen. Der Grund: Kaum ein Tool beherrscht den kompletten HTML-Befehlssatz und berücksichtigt sämtliche HTML-Feinheiten. Bestimmte Layouts lassen sich dann gar nicht herstellen oder erfordern nach dem Konvertieren komplexe manuelle Nachbearbeitung, wozu wiederum HTML-Kenntnisse notwendig sind. Daher empfiehlt es sich in der Praxis, die Seiten von vornherein mit Hilfe von HTML-Kommandos zu layouten, und zwar mit Hilfe eines gewöhnlichen Texteditors. Ein HTML-Dokument ohne Grafik wird kaum dem optisch orientierten World-Wide Web gerecht. Daher sollten Sie das Beispieldokument mit Grafiken anreichern. Das Kommando zum Einbinden von Grafiken lautet »img« (für image; zu deutsch: Bild). Verzeichnis und Dateiname werden mit Hilfe des Parameters »src« (Source, zu deutsch: Quelle) angegeben. Als Dateiformate können GIF und JPEG verwendet werden. Dazu ein Beispiel: bindet die angegebene Grafik aus dem Verzeichnis /pics ein. Die Größe der Grafik läßt sich über die Parameter »width« (Breite) und »height« (Höhe) angeben. Die Einheit bezieht sich auf Pixel. <img src="/pics/hallo.gif" width=70> stellt die Grafik mit einer Breite von 70 Pixel dar. Die Höhe ergibt sich in diesem Fall aus dem Seitenverhältnis der Grafik. Ebenso können Sie die Höhe der Grafik angeben. Dann resultiert die Breite aus dem Seitenverhältnis. Beide Parameter sollten in der Praxis nicht zusammen verwendet werden, da sonst die Grafik mit ziemlicher Sicherheit gestaucht oder gestreckt wird. Beim Skalieren ergibt sich ein weiteres Problem: Bitmap-Grafiken lassen sich bekanntlich nur mit Qualitätsverlust vergrößern. Es ist daher in der Regel besser, die ursprüngliche Grafik mit Hilfe eines Bildbearbeitungs- oder Illustrationsprogramms auf die gewünschte Auflösung herunterzurechnen und die auf diese Art erzeugte Grafik in Originalgröße in das HTML-Dokument einzubinden. So können Sie auf die Parameter »width« und »height« vollständig verzichten. HTML erlaubt es, sogenannte animierte GIF-Dateien auf Ihre Homepage einzubinden. Ein animiertes GIF ist eine besondere GIF-Datei, in der die einzelnen Sequenzen hintereinander gespeichert sind. Öffnen Sie eine derartige GIF-Datei mit einem gewöhnlichen Grafikprogramm, sehen Sie nur die erste Sequenz, der Rest wird ignoriert. Zur Anfertigung und Bearbeitung von animierten GIFs ist daher Spezialsoftware notwendig. Unter Windows eignet sich dafür zum Beispiel die Shareware GIF Construction Set. Übrigens: Nicht alle Browser können animierte GIFs darstellen, ausgenommen davon sind jedoch die wichtigen Browser Netscape Navigator und Explorer ab 3.0. A uf der Beispielseite fehlen jetzt noch die Links (Querverweise) auf Folgeseiten Ihrer Page oder auf andere interessante Pages. Ein Link wird prinzipiell mit dem Tag <a href="..."> eingeleitet und mit </a> abgeschlossen. Der Text, der sich zwischen diesen beiden Tags befindet, wird unterstrichen dargestellt und farblich abgesetzt, so dass sofort zu erkennen ist: Dieser Text kann angeklickt werden. Hinter »a href=« schreiben Sie das Verzeichnis und den Namen der Datei, auf die verwiesen werden soll:<a href="/div/index.html">Index</a> Befindet sich das Dokument dagegen auf einem anderen Server, geben Sie die komplette URL an:<a href="http://www.traxx.de/adac/stau/welcome.html">aktuelle Staumeldungen</a> In beiden Fällen müssen Sie je nach Computer auf die Namenskonventionen für die Verzeichnisse (Slash "/" oder Backslash "\") achten. Sie können die Farbe, in der Links angezeigt werden, festlegen. Dazu müssen Sie einen Eintrag im body-Tag mit den Parametern »link« und »vlink« vornehmen. Dabei gibt »link« die Farbe der Links vor, die noch nicht angeklickt wurden, und »vlink« die Farbe der Links, die bereits angewählt wurden (»vlink« steht für »visited link«). Eine Definition sieht beispielsweise so aus:<body bgcolor=blue link=yellow vlink=red> Ohne einen E-Mail-Link wäre die schönste Homepage nicht komplett; denn der Benutzer müßte die E-Mail-Adresse mühsam von der Seite abschreiben und in seinen E-Mail-Client eingeben. Ein E-Mail-Link öffnet statt dessen ein Fenster im Browser, über das man direkt eine E-Mail absenden kann. Einen E-Mail-Link definieren Sie wie einen gewöhnlichen Link, nur dass anstelle des Dateinamens die E-Mail-Adresse angegeben wird, wobei der Text »mailto:« vorangestellt wird. Dazu ein Beispiel:Schreibt mir doch einfach eine Mail. <a href="mailto:office@körbel.at">Hier klicken</a>.
|