HTML - Ein Tutorial

Inhalt

• 1. HTML und sein Instrumentarium
• 2. HTML und seine eingebaute Zukunft
• 3. HTML am Beispiel
  • 3.1. Erster Teil: Hello, world!
  • 3.2. Zweiter Teil: Titel, Schrift und Zentrierung
  • 3.3. Dritter Teil: Bilder und Schrifttyp
  • 3.4. Vierter Teil: Hintergrund, animierte GIFs und Links
  • 3.5. Fünfter Teil: Tabellen
  • 3.6. Sechster Teil: Frames
    • 3.6.1. Frame-HTML
    • 3.6.2. Content-HTML
    • 3.6.3. Ergebnis
• 4. HTML in der Kritik

1. HTML und sein Instrumentarium

Das Schöne am World Wide Web ist, dass man mit einem ordinären ASCII-Editor schon fast alles hat, was man braucht, um eigene Seiten der Öffentlichkeit zugänglich zu machen. Zwar gibt es viele Tools, die einem die Seitengestaltung erleichtern, doch für eine puristische Programmiererseele wie mich ist das nur ... nun ja, Spielerei. Ich brauche HTML pur, bin ein Tag-Junkie, zieh mir täglich meine Dosis JavaScript rein. Jo, that's life!

2. HTML und seine eingebaute Zukunft

Ganz klar, HTML ist schlicht genial. Ein Datenaustauschformat mit eingebauter Zukunft, mit jedem Editor lesbar, ohne grossen Aufwand interpretierbar. Vor langer, langer Zeit erstellte Web-Dokumente kann man sich heute immer noch betrachten, ohne dass einem der Browser "Falsche Version" oder ähnlich schikanösen Mist entgegenhält. Von so etwas kann man bei Microsoft Word und Co. nur träumen. Wenn es schon beim gleichen Softwareprodukt Probleme mit Programm-Updates gibt, wird die Sache noch lustiger, wenn man Word-Dokumente in WordPerfect einlesen will usw. Und wehe dem, der einen Datenaustausch zwischen verschiedenen Betriebssystemen durchführen muss. Als mein Amiga sich verabschiedet hat, hat er auch gleich alle meine vorpubertären Schreibversuche mitgenommen, weil mein PC kein Amiga versteht. Nicht, dass das ein grosser Verlust wäre, aber hey, this sucks! Da waren zumindest ein paar halbwegs gute Sexstorys dabei ...

3. HTML am Beispiel

Nun ja, genug geplappert. Werfen wir doch einmal einen Blick hinter die Kulissen dessen, was uns Netscape, Internet Explorer usw. aus HTML-Code so alles hervorzaubern können.

3.1. Erster Teil: Hello, world!

Man nehme einen x-beliebigen ASCII-Editor, z.B. Notepad in Windows, und tippe Folgendes ein:

Man speichere dies als "htmlkurs1.html" und betrachte sich das Ergebnis z.B. mit Netscape:

(=> htmlkurs1.html)

3.2. Zweiter Teil: Titel, Schrift und Zentrierung

Das war's. So einfach baut man sich eine Webseite zusammen. 'ne eigene Webpage, die einen aussagekräftigen Titel im Netscape-Kopf anzeigt, ist aber natürlich schöner. Und die Schrift könnte ruhig auch noch etwas grösser und in der Mitte zentriert sein.

(=> htmlkurs2.html)

3.3. Dritter Teil: Bilder und Schrifttyp

Nun ja, macht noch nicht viel her, was? Da muss 'n Bild rein. Ein Hintergrund im tiefsten Schwarz macht's unheimlicher. Schwarze Schrift ist dann aber natürlich wenig sinnvoll - blutrot soll sie daher sein. Und weil wir schon bei der Schrift sind: Der Standardtyp "Times New Roman" ist zu gewöhnlich, wir wollen lieber "Arial".

(=> htmlkurs3.html)

3.4. Vierter Teil: Hintergrund, animierte GIFs und Links

Den Hintergrund wollen wir noch etwas mit roten Tupfen aufpeppen. Auch etwas Bewegung durch animierte Feuer-GIFs kann nichts schaden. Und eine Seite ganz ohne Links? Undenkbar. Deren Schriftfarben werden übrigens im BODY-Tag angegeben (über die Attribute "link" und "v(istited)link").

(=> htmlkurs4.html)

3.5. Fünfter Teil: Tabellen

Jetzt kommen Tabellen ins Spiel, die wirklich eine nette Erweiterung von HTML darstellen, insbesondere seitdem den einzelnen Zellen eine eigene Hintergrundfarbe zugewiesen werden kann. Die Feuer-GIFs platzieren wir in verkleinerter Form in die Tabelle mit den Links um. Den Referenzen wird jeweils ein Punkt vorangestellt. Das Bild von Sheryl Fenn wird klickbar gemacht. Und beim Anklicken des "HotBot"-Links wird ein neues Browserfenster geöffnet.

(=> htmlkurs5.html)

3.6. Sechster Teil: Frames

So, zu guter Letzt bleibt nur noch eine praktische Technik übrig: Frames.

3.6.1. Frame-HTML

Dazu baut man sich zuerst ein Frame-HTML-File zusammen, welches die eigentlichen, inhaltlichen HTML-Files referenziert.

3.6.2. Content-HTML

Die obige Datei heisst htmlkurs6.html. Sie beinhaltet zwei Rahmen (wl und wr). Der rechte Rahmen zeigt auf die Datei htmlkurs5.html, welche wir schon kennen. Der linke Rahmen zeigt auf die Datei leftside.html, welche folgendermassen aufgebaut ist:

3.6.3. Ergebnis

Wichtig sind v.a. die Referenz-Targets, welches im Falle des "Buchhorn & Melzer"-Links auf den rechten Rahmen verweist, wodurch bei einem Klick auf diesen Link die Rahmen nicht verlassen werden, sondern sich nur der rechte Rahmen mit dem Inhalt des "Buchhorn & Melzer"-HTML-Files erneuert. Ansehen kann man sich das Ganze mit:

(=> htmlkurs6.html)

4. HTML in der Kritik

HTML bringt Fun. Da es die meisten Browser gestatten, sich den HTML-Code beliebiger Webseiten anzusehen, kann man mit etwas Copy & Paste rasch seine eigenen Kreationen entwickeln. Ungemein praktisch ist auch, dass es für mich als Programmierer relativ leicht ist, mit proprietärer Software per Mausklick HTML-Seiten zu erzeugen, die dann z.B. in Word derart eingelesen werden können, dass alle Grafiken und Textformatierungen erhalten bleiben. Einziger Wermutstropfen: HTML kennt kein "Seitenkonzept", d.h., es kann - so weit ich weiss - kein Seitenumbruch erzwungen werden; ebenso sind Kopf- und Fusszeilen nicht realisierbar. Aber HTML befindet sich ja in einem stetigen Zustand der Entwicklung, auf Besserung in naher Zukunft ist zu hoffen ...