Wer jetzt in HTML einsteigen will, ist hier genau richtig. Dieser
Kursteil zeigt, wie man eine einfache Homepage anfertigt. In den
nächsten Folgen des Kurses erfahren Sie dann, wie Sie das
Web-Dokument typografisch und grafisch verbessern können.
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, daß der nachfolgende Text "fett" (bold) gesetzt wird.Die meisten Kommandos erfordern es, daß 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, daß 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.
Der Aufbau eines HTML-Dokuments
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 muß also wie folgt aufgebaut sein:
<html>
...
</head>
<body>
...
</body>
</html>
Zum Definieren des Titels verwenden Sie den Tag
<head>
<title>Die Straßenbahn Site</title>
</head>
<body>
Willkommen auf meiner Homepage!
Ich suche Leute, die sich genauso für Straßenbahnen begeistern können wie ich.
Schreibt mir doch einfach eine Mail. Meine
E-Mail-Adresse:...
</body>
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:
</html>
Die Seite mag in dieser Form zwar zunächst funktionieren.
Doch spätestens, wenn sie mit einem Computer betrachtet wird,
der unter einem anderen Betriebssystem läuft, sind Probleme
unabwendbar. Die Zeichentabellen der einzelnen Betriebssysteme
unterscheiden sich nämlich; nur die gewöhnlichen Buchstaben,
Ziffern und Satzzeichen befinden sich an derselben Position. Allerdings
werden Umlaute, der Buchstabe "ß" und die Sonderzeichen
nicht korrekt dargestellt.
Ungewohnt: Umlaute und "ß" muß man umschreiben
<head>
<title>Die Straßenbahn Site</title>
</head>
<body>
Willkommen auf meiner Homepage!
Ich suche Leute, die sich genauso für Straßenbahnen begeistern können wie ich.
Schreibt mir doch einfach eine Mail. Meine E-Mail-Adresse:...
</body>
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
hallo
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 muß 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, daß im Beispiel zwei Schriftarten
(Arial und Helvetica) angegeben sind. Der Grund ist, daß
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, daß 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
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.
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. Sie können
es sich auch über die URL http://www.mindwork.shop.com/alchemy/gifcon.html laden.
Übrigens: Nicht alle Browser können animierte GIFs darstellen,
ausgenommen davon sind jedoch die wichtigen Browser Netscape Navigator
und Explorer 3.0.
Auf der Beispielseite fehlen jetzt noch die Links (Querverweise)
auf Folgeseiten Ihrer Page oder auf andere interessante Pages.
Ein Link wird prinzipiell mit dem Tag
Hinter »a href=« schreiben Sie das Verzeichnis und den
Namen der Datei, auf die verwiesen werden soll:
Befindet sich das Dokument dagegen auf einem anderen Server, geben
Sie die komplette URL an:
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:
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 daß anstelle des Dateinamens die E-Mail-Adresse angegeben
wird, wobei der Text »mailto:« vorangestellt wird.
Dazu ein Beispiel:
Die Homepage kann sich schon sehen lassen. Nur die einfache Anordnung
der Texte und Bilder im Kettenprinzip stört. Wie Sie Elemente
auf einer Seite über Tabellen frei positionieren, zeigt der
nächste Kursteil.
</html>
Die Zeichenumschreibung direkt einzugeben verlangt Konzentration.
Am besten arbeiten Sie, wenn Sie die Sonderzeichen am Schluß
einfach mit der Suchen-und-Ersetzen-Funktion austauschen.
hallo
Einheitstext ade: "font" bringt Leben auf Pages
HTML-Editoren und Konvertierungstools
Grafiken ins HTML-Dokument
einbinden
Links machen die HTML-Seite komplett
Thomas Irlbeck
