Walter Herglotz - HTML Lernen

323

description

HTML

Transcript of Walter Herglotz - HTML Lernen

  • Die Lernen-ReiheIn der Lernen-Reihe des Addison-Wesley Verlages sind die folgenden Titel bereitserschienen bzw. in Vorbereitung:

    Andr WillmsC-Programmierung lernen432 Seiten, ISBN 3-8273-1405-4

    Andr WillmsC++-Programmierung lernen408 Seiten, ISBN 3-8273-1342-2

    Guido Lang, Andreas BohneDelphi 5 lernen432 Seiten, ISBN 3-8273-1571-9

    Judy BishopJava lernen636 Seiten, ISBN 3-8273-1605-9

    Michael SchilliPerl 5 lernenca. 400 Seiten, ISBN 3-8273-1650-9

    Michael EbnerSQL lernen336 Seiten, ISBN 3-8273-1515-8

    Ren MartinVBA mit Word 2000 lernen412 Seiten, ISBN 3-8273-1550-6

    Ren MartinVBA mit Office 2000 lernen576 Seiten, ISBN 3-8273-1549-2

    Patrizia Sabrina PrudenziVBA mit Excel 2000 lernen512 Seiten, ISBN 3-8273-1572-7

    Patrizia Sabrina Prudenzi, Dirk Walter VBA mit Access 2000 lernen680 Seiten, ISBN 3-8273-1573-5

    Dirk AbelsVisual Basic 6 lernen425 Seiten, ISBN 3-8273-1371-6

  • ADDISON-WESLEY

    An imprint of Pearson Education

    Mnchen Boston San Francisco Harlow, England Don Mills, Ontario Sydney Mexico City

    Madrid Amsterdam

    Walter Herglotz

    HTML lernen

    anfangen, anwenden, verstehen

  • Die Deutsche Bibliothek CIP-Einheitsaufnahme

    Ein Titeldatensatz fr diese Publikation ist bei Der Deutschen Bibliothek erhltlich

    Die Informationen in diesem Produkt werden ohne Rcksicht auf einen eventuellen Patentschutz verffentlicht.Warennamen werden ohne Gewhrleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit grter Sorgfalt vorgegangen. Trotzdem knnen Fehler nicht vollstndig ausgeschlossen werden. Verlag, Herausgeber und Autoren knnen fr fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung bernehmen. Fr Verbesserungsvorschlge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar.

    Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elek-tronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulssig.

    Fast alle Hardware- und Softwarebezeichnungen, die in diesem Buch erwhnt werden, sind gleich-zeitig auch eingetragene Warenzeichen oder sollten als solche betrachtet werden.

    Umwelthinweis: Dieses Produkt wurde auf chlorfrei gebleichtem Papier gedruckt.Die Einschrumpffolie zum Schutz vor Verschmutzung ist aus umweltvertrglichem und recyclingfhigem PE-Material.

    10 9 8 7 6 5 4 3 2 1

    04 03 02 01

    ISBN 3-8273-1717-7

    2001 by Addison Wesley Verlag, ein Imprint der Pearson Education Deutschland GmbHMartin-Kollar-Strae 1012, D-81829 Mnchen/GermanyAlle Rechte vorbehalten

    Einbandgestaltung: Barbara Thoben, KlnLektorat: Christina Gibbs, [email protected]: Ulrike Oswald, ForsternHerstellung: Ulrike Hempel, [email protected]: Harald Taglinger. In: Jetzt lerne ich HTML.

    Markt+Technik, ISBN: 3-8272-5717-4.Satz: mediaService, SiegenDruck und Verarbeitung: Bercker, Kevelaer

    Printed in Germany

  • 5I Inhaltsverzeichnis

    I Inhaltsverzeichnis ........................................................................... 5

    V Vorwort .......................................................................................... 11V.1 Die Icons in diesem Buch...................................................................14

    1 Einleitung ...................................................................................... 151.1 Das Buch und die Browser-Kriege ......................................................201.2 Lsungen ............................................................................................21

    2 Historie........................................................................................... 232.1 Geschichte des WWW........................................................................23

    3 Auszeichnungsanweisungen ......................................................... 273.1 Grundprinzipien ................................................................................27

    Auszeichnungen.................................................................................27Trennung zwischen Autor und Darstellung ......................................29Korrekte Kodierung der Anweisungen ...............................................29

    3.2 Kommentare in HTML .......................................................................30Versionsangaben ................................................................................30

    4 Schreiben fr die Welt................................................................... 334.1 Zeichenstze .......................................................................................33

    Frhere Zeichenstze..........................................................................344.2 Textformatierung ...............................................................................374.3 Lsungen ............................................................................................40

    5 Logische Textformatierungen....................................................... 435.1 berschriften......................................................................................435.2 Auszeichnung von Texten .................................................................465.3 Schriftgren und Farben steuern .....................................................485.4 Schreibweisen von Anweisungen und Parametern............................495.5 HTML und Formatierungsanweisungen ............................................50

  • 6 ,QKDOWVYHU]HLFKQLV

    5.6 HTML und Farben ............................................................................. 50Farbvorgaben fr die ganze Seite....................................................... 51

    5.7 Schriftarten ........................................................................................ 525.8 HTML-Strukturen............................................................................... 535.9 Lsungen ........................................................................................... 55

    6 Explizite Formatierungen.............................................................. 596.1 Lsungen ........................................................................................... 62

    7 Gestaltung von Abstzen, Kapiteln und Seiten............................ 657.1 Graphische Gliederung eines Textes ................................................. 687.2 Lsungen ........................................................................................... 70

    8 Textlisten ....................................................................................... 758.1 Lsungen ........................................................................................... 83

    9 Sonderzeichen und spezielle Zeichenstze in HTML................... 919.1 Zeichenstze fr HTML...................................................................... 91

    Nicht-westliche Schriften .................................................................. 91Einstellen des Zeichensatzes .............................................................. 92Auf dem Weg zum UniCode ............................................................. 93

    9.2 Spezielle Zeichen in HTML................................................................ 93Ersatzdarstellungen............................................................................ 94Ersatzdarstellungen mit numerischen Werten.................................. 96

    9.3 UniCode und Meta-Anweisung......................................................... 97UniCode in UTF-8 Darstellung........................................................ 100

    9.4 Lsungen ......................................................................................... 102

    10 Bilder ............................................................................................ 10710.1 HTML-Seiten mit Graphiken ........................................................... 10710.2 Dateiformate fr Graphiken ............................................................ 107

    Das GIF-Format................................................................................ 107JPEG - joint photographer expert group ......................................... 108PNG - portable network graphic...................................................... 109

    10.3 HTML und Bilder ............................................................................. 10910.4 Bilder einfgen ................................................................................ 10910.5 Bildquellen....................................................................................... 11110.6 Spezielle Funktionen von GIF-Bildern ............................................ 113

    Transparenz ..................................................................................... 113Animationen.................................................................................... 114

    10.7 Arbeiten mit Editoren...................................................................... 11510.8 Lsungen ......................................................................................... 118

  • 711 Verweise in HTML ....................................................................... 12111.1 Das Internet...................................................................................... 12111.2 Das WWW World Wide Web........................................................12511.3 Sprunganweisungen in HTML ......................................................... 12611.4 Verweise und Farben ........................................................................ 12611.5 Lsungen .......................................................................................... 128

    12 Adressierung im WWW ............................................................... 13112.1 Relative Adressierung im WWW......................................................13112.2 Absolute Adressierung im WWW ....................................................13312.3 Domnen.......................................................................................... 13412.4 Standard-Annahmen in der Adressierung ....................................... 13512.5 Namen und IP-Nummern verwalten ............................................... 13612.6 Verweise innerhalb einer Datei ........................................................13712.7 Mailadressierung .............................................................................. 13912.8 Lsungen .......................................................................................... 141

    13 Sensitive Bilder ............................................................................ 14513.1 Bilder zum Anklicken.......................................................................14513.2 Sensitive Bilder mit Auswertung durch den Browser.......................14613.3 Trick zur Ermittlung der Koordinaten ............................................. 14913.4 Lsungen .......................................................................................... 150

    14 Tabellen........................................................................................ 15314.1 Tabellen zur Informationsdarstellung ............................................. 15314.2 Spalten- und Zeilennamen und die Beschreibung........................... 15614.3 Tabellen als Layout-Hilfe .................................................................15914.4 Design einer Startseite ...................................................................... 16214.5 Erweiterte Gestaltung von Tabellen oder Zellen..............................16414.6 Przise Positionierung von Zellen....................................................16614.7 Lsungen .......................................................................................... 167

    15 Seitengestaltung mit Rahmen..................................................... 18115.1 Rahmen (Frames) .............................................................................18115.2 Die Frames Steuerdatei .....................................................................18215.3 Verweise und Rahmen .....................................................................18515.4 Rahmensteuerung ............................................................................ 18915.5 Browser ohne Rahmen .....................................................................19115.6 Standardvorgabe des Zielfensters ..................................................... 19215.7 Lsungen .......................................................................................... 193

    16 Programme auf dem Webserver ................................................. 19916.1 Programme und Interaktivitt ......................................................... 20016.2 Serverseitige sensitive Bilder ............................................................ 20016.3 Lsungen .......................................................................................... 204

  • 8 ,QKDOWVYHU]HLFKQLV

    17 Interaktivitt und Formulare ...................................................... 20517.1 Formulare......................................................................................... 20617.2 Aufbau von Formularen .................................................................. 20717.3 Eingabe-Mglichkeiten.................................................................... 208

    1 aus n - Auswahl............................................................................. 208n aus m - Auswahl ........................................................................... 209Texteingaben ................................................................................... 211Auswahlboxen ................................................................................. 213

    17.4 Formular abschicken ....................................................................... 21517.5 Formulare mit nur einer Eingabe .................................................... 21617.6 Vier abschlieende Varianten ......................................................... 21717.7 Bilder als Sendeknopf ...................................................................... 21717.8 Dateien zum Server schicken........................................................... 21917.9 Mens .............................................................................................. 22017.10 ISINDEX die erste Suchabfrage ..................................................... 22017.11 Lsungen ......................................................................................... 223

    18 IT-Archtitekturen mit Browsern und Servern ............................ 23518.1 Client - Server - Architektur............................................................. 23518.2 Mehrschichtarchitektur ................................................................... 23618.3 ASP eine mgliche Anwendung der Mehrschichtarchitektur ...... 237

    19 Meta-Anweisungen ...................................................................... 23919.1 HTTP-EQUIV-Werte ......................................................................... 24019.2 Standardisierungsprobleme ............................................................. 242

    Angaben zu Autor und Editierprogramm (meist automatisch eingefgt)243Informative META-Angaben............................................................ 243Steuerung der Suchmaschinen (der Roboter).................................. 243

    19.3 Lsungen ......................................................................................... 244

    20 Stil-Vorlagen ................................................................................ 24720.1 Einfhrung in Stilvorlagen .............................................................. 24820.2 Verschiedene Stil-Varianten ............................................................ 24820.3 Stil-Angaben und alte Browser ........................................................ 24920.4 Vorsicht bei einfachen Editoren...................................................... 25020.5 Wertegruppen fr Blcke................................................................. 25120.6 Variationen fr Anweisungen (Klassen) .......................................... 25420.7 Spezielle Auszeichnung eines bestimmtes Containers.................... 25520.8 Verschachtelung von Stilvorgaben.................................................. 25620.9 Spezielle Container .......................................................................... 25720.10 Verschachtelte Stil-Anweisungen .................................................... 25820.11 Stile in HTML-Anweisungen............................................................ 25920.12 Arbeiten mit Stil-Dateien................................................................. 26020.13 Pseudo-Elemente ............................................................................. 26220.14 Lsungen ......................................................................................... 263

  • 921 Publizieren im Netz ..................................................................... 271Fallstricke beim Publizieren .............................................................273

    21.1 Pfadnamen .......................................................................................27321.2 Registrieren in Suchmaschinen........................................................274

    22 Javascript ..................................................................................... 27522.1 Programmieren fr den Browser ......................................................27522.2 Programmiersprachen fr HTML-Programmierung ........................ 27522.3 Definition von Ereignissen .............................................................. 27622.4 Programmieren mit Javascript ......................................................... 27722.5 Funktionen .......................................................................................277

    Funktionen in Javascript .................................................................. 278Funktionen in HTML .......................................................................279

    22.6 DOM Document Object Model (Modell fr Objekte des Dokumentes).............................................................................. 282

    22.7 Dynamisches HTML.........................................................................28322.8 Formulare und Javascript .................................................................285

    Benutzerschnittstellen mit Formularen und Javascript ...................28522.9 Nutzung spezieller Eingabeelemente ............................................... 28722.10 Bilder austauschen ...........................................................................28822.11 Gleichzeitiges Laden von zwei Rahmen ..........................................29122.12 Hinweise zu Javascript...................................................................... 29422.13 Lsungen .......................................................................................... 295

    23 Java............................................................................................... 30323.1 Programmiersprachen fr das Internet ............................................30323.2 Java-Besonderheit: Virtuelle Maschinen..........................................30323.3 Laden von Java-Programmen...........................................................30423.4 Einbinden in HTML-Seiten .............................................................. 30423.5 Anwendungsbeispiel ........................................................................ 30623.6 Kombination von Java und Javascript ............................................. 30723.7 Lsungen .......................................................................................... 309

    A Anhang......................................................................................... 311A.1 Darstellung von Farben mit einer

    hexadezimalen Dreier-Gruppe ......................................................... 311A.2 Tabelle der Farbnamen .................................................................... 312

    G Glossar.......................................................................................... 317

    S Stichwortverzeichnis ................................................................... 321

  • 9RUZRUW 11

    V Vorwort

    Haben Sie heute schon im Internet gesurft?

    Wenn ja, dann sind die Chancen gro, dass Sie auf Seiten aus ver-schiedenen Lndern gestoen sind. Vielleicht waren Sie bei einerdeutschen Zeitung im Sportteil, bei einem Hersteller fr Scanner inTaiwan, um den neuesten Treiber zu suchen oder beim groen Chip-Hersteller Intel in den USA.

    So schn und interessant das Surfen ist es gibt noch etwas Spannen-deres: selbst Seiten gestalten und auch im Netz anderen zur Verf-gung stellen.

    Die Grundausrstung haben Sie wahrscheinlich schon, um zumin-dest einfache Seiten selbst erstellen zu knnen. Es fehlt vielleichtnoch die Kenntnis der Sprache, die man braucht, um weltweit lesbareSeiten zu produzieren HTML. Aber das knnen wir mit diesem Buchndern. Nach wenigen Seiten werden wir die erste einfache HTML-Datei geschrieben haben und arbeiten uns dann durch die Mglich-keiten der Sprache.

    Warum HTML? Nun, HTML (= Hypertext Markup Language) ist derStandard fr Webseiten, den ein Browser, das Leseprogramm fr Web-seiten versteht. Mit HTML kann man die Seiten produzieren, die Ver-weise zum Klicken enthalten.

    Neben der eigentlichen Sprache HTML brauchen wir noch ein wenigWissen zum gesamten Internet. Auch diesem Bereich wollen wir unsin diesem Buch widmen.

  • 12 9RUZRUW

    Wenn sich alle an den Standard halten, dann knnen alle Menschen,die mit vllig unterschiedlichen Gerten und Programmen auf dieDaten im weltumspannenden WWW (World Wide Web / weltweitesNetz) zugreifen, diese auch richtig lesen. Alle Daten, seien es nunTexte, Bilder oder anderes, werden dazu mit Hilfe des HTML-Stan-dards verpackt.

    HTML bringt uns die Mglichkeit, Texte und andere Informationenin einer weltweit einheitlichen Weise zu produzieren und sie allenanderen Benutzern eines vernetzten Computers unabhngig vomHersteller des Computers oder des verwendeten Betriebssystems zu-gnglich zu machen. Voraussetzung ist dabei nur, dass wir uns an dieallgemeinen Spielregeln der Standards halten.

    Das Surfen, das Wandern in den Seiten des WWW, kennen viele undsicher haben Sie auch schon viele interessante Informationen, Bilder,Tne oder Filme gefunden. Aber das alles gab es schon vorher. GehenSie doch einmal in eine gute Bibliothek. Dort stehen mehr Bcher,Zeichnungen oder Videos, als ein Einzelner von uns jemals aufneh-men kann.

    Das Besondere an HTML ist der andere Weg: Sie knnen selber produ-zieren, publizieren und andere informieren. Und Ihre Seiten stehenvon heute auf morgen sofort den Millionen von Benutzern desWWW in der ganzen Welt zur Verfgung.

    Ein paar Probleme gibt es schon noch. Ich wei nicht, wie viele Men-schen in Frankreich, Italien, Spanien oder Australien Deutsch verste-hen. Aber sie knnen trotzdem Ihre Seiten sehen. Und wenn die frden einen oder anderen wichtig und interessant sind, dann wird derLeser schon Wege finden, die Sprachbarrieren zu berwinden.Schlielich lesen viele von uns auch englische Webseiten, wenn sieinteressante und fr uns wichtige Inhalte anbieten. Oder Sie helfenIhren Lesern durch mehrsprachige Seiten.

    Die Grundlage aller Seiten ist HTML und das lernen wir zusammenSchritt fr Schritt in diesem Buch. Danach brauchen Sie eigentlichnur noch eine Idee, was Sie anderen mitteilen mchten.

    Dieses Buch wird Sie also untersttzen beim eigenen Publizieren.Und falls Sie nicht der ganzen Welt Informationen anbieten wollen,dann kann Ihnen das Buch helfen, Verstndnis fr die Welt desWWW zu entwickeln, mit Webseiten Ordnungshilfen fr eine volleFestplatte zu schreiben oder einfach ein wenig Spa am Experimen-tieren zu haben.

  • 9RUZRUW 13

    Dieses Buch lebt von Experimenten, die Sie alle nachvollziehen undtatschlich ausprobieren knnen. Alle Beispiele finden Sie auf derWebseite des Autors unter www.walter-herglotz.de.

    Viel Erfolg, spannende Ideen und weltweite Kontakte darauswnscht Ihnen

    Walter Herglotz

    Es gibt nichts Gutes, auer man tut es.Erich Kstner

  • 14 9RUZRUW

    V.1 Die Icons in diesem BuchUm Ihnen die Orientierung in diesem Buch zu erleichtern, haben wirden Text in bestimmte Funktionsabschnitte gegliedert und diesedurch entsprechende Symbole oder Icons gekennzeichnet. FolgendeIcons finden Verwendung:

    Beispiele helfen Ihnen, sich schneller und sicher im Feld der HTML-Programmierung zu orientieren. Sie werden darum mit diesem Icongekennzeichnet.

    Manches ist von besonderer Bedeutung und verdient darum auch,besonders hervorgehoben zu werden. Solche Hinweise sind sehrntzlich, sie bringen einen geschwinder ans Ziel.

    Manches geht ganz leicht. Wenn man nur wei, wie. Tipps undTricks finden Sie in den Abschnitten, wo dieses Icon steht.

    bungen helfen Ihnen, das Gelernte gleich in die Praxis umzusetzenund Ihre Kenntnisse zu vertiefen.

  • 15

    1 Einleitung

    Liebe Leserin, lieber Leser,

    nun stehen Sie und ich vor einer wichtigen Frage: fangen wir mit derHistorie an, den technischen Hintergrnden, surfen wir zuerst im In-ternet oder machen wir zusammen ein Beispiel?

    Im Zweifel fr die Praxis lautet das Motto dieses Buches.

    Unsere Experimente sollen Ihnen ermglichen, Aufbau, Idee undDarstellung der Webseiten zu erkennen und nachzuvollziehen.Wenn immer mglich werden wir uns dabei den allgemeinverbindli-chen Standards orientieren.

    Also fangen wir mit unserem ersten Experiment an. Nur eine Bittemchte ich an dieser Stelle uern. Sie sollten wissen, wie man Text-dateien erstellt, Dateien kopiert und wie man in einem Programmeine Datei ldt. Auch die Begriffe Verzeichnis, bergeordnetes Ver-zeichnis und Pfad werden wir brauchen. Natrlich werden alle Be-griffe erklrt. Aber vielleicht wrde es helfen, wenn Sie sich im Zwei-fel noch ein Buch ber Betriebssysteme besorgen, in dem dieseBegriffe ausfhrlich dargestellt sind. Danke! Und nun gehts los!

    Starten Sie Ihren Rechner. Fr das erste Experiment brauchen wir nureinen ganz einfachen Editor und einen Browser.

    Auch wenn Sie die Beispiele aus dem Internet benutzen knnen, wrees doch schner, wenn Sie die wenigen Zeilen eintippen wrden. Mirhat es immer mehr geholfen, den Text abzutippen, Tippfehler zu kor-rigieren, Fehler zu suchen und erst dann das Ergebnis zu haben. Viel-leicht lernen Sie auch so hnlich wie ich.

  • 16 .DSLWHO (LQOHLWXQJ

    Alle Beispiele, die Bilder in den Beispielen und weitere Informationenfinden Sie auch im Internet auf den Web-Seiten des Autors. BesuchenSie dazu den Server mit der Adresse www.walter-herglotz.de. Sie findendort bei den Bchern die Mglichkeit, alle Beispiele auf Ihren eigenenRechner zu kopieren.

    Die Beispiele sind getestet und sollten mit allen gngigen Browsernfunktionieren. Sollten Sie derzeit einen lteren Browser benutzen,wre es schn, wenn Sie zumindest fr die Experimente der spterenKapitel einen heute blichen Browser benutzen. Bei Browsern der Fir-men Netscape und Microsoft haben die Browser dann eine Versions-nummer "4.0" oder besser.

    Die Version erhalten Sie im Netscape-Browser angezeigt, wenn Sie imHILFE-Men den Eintrag BER COMMUNICATOR whlen.

    Abbildung 1.1: Browser-Information bei Netscape

    Im Internet Explorer verbirgt sich die Browser Information hinterdem Men ?, der ebenfalls zur Hilfe fhrt. Hier ist es der MeneintragINFO, der die notwendigen Informationen zum verwendeten Browserangibt.

  • 17

    Abbildung 1.2: Browser-Information bei Microsoft

    Sollten Sie einen der zahlreichen anderen Browser verwenden, wrees schn, wenn er weitestgehend den HTML Sprachstandard 4.0 un-tersttzt.

    Welchen Editor Sie verwenden, ist nicht so wichtig. Unter Windowskann es der NOTEPAD.EXE sein, den man ber START/PROGRAMME/ZUBE-HR und dort unter EDITOR findet, oder der WORDPAD, der im gleichenVerzeichnis steht. Sollten Sie die Editoren nicht finden, dann wurdensie nicht mitinstalliert. Das kann man aber auch nachholen. Dazunutzt man in der Systemsteuerung die Anwendung SOFTWARE. UnterLinux arbeitet der vi oder der joe genauso gut.

    Diese Editoren sollen reinen Text abspeichern knnen. Das Gegen-stck zu einem reinen Text ist z.B. eine Windows DOC-Datei. Die ent-hlt neben den Buchstaben, die Sie tippen, noch eine ganze Reihevon Formatierungsinformationen. Ihr Editor sollte also auf keinenFall einige Kilobyte auf die Festplatte speichern, wenn Sie nur zehnBuchstaben getippt haben. Wir bentigen nur den eingegebenenHTML-Code in der Datei.

    Fr den Moment wollen wir uns mit einem simplen Texteditor be-gngen. Das reicht solange man einfache Webseiten fr Lernzweckeerstellt. Spter werden wir uns auch mit Editoren beschftigen, dieauf die Erstellung von Webseiten spezialisiert sind.

    Manche Leser werden vielleicht erwarten, dass wir ausschlielich miteinem Editor arbeiten, der eine graphische Benutzerfhrung hat.Mglicherweise denken Sie dabei an Programme wie Winword. DasProblem dieser Programme ist es, dass sie alles verdecken, was zumVerstndnis der zugrunde liegenden Sprache bentigt wird. So schneine graphische Benutzerschnittstelle ist, so schwierig macht sie es zu

  • 18 .DSLWHO (LQOHLWXQJ

    verstehen, was eigentlich passiert. Denn es ist ja die groe Aufgabeder graphischen Benutzerfhrung, alles leicht bedienbar zu machen.Diese Leser bitte ich um etwas Geduld und die Bereitschaft, sich aufDinge einzulassen, die ihnen mglicherweise sogar ein wenig veraltetvorkommen. Der Lohn wird aber ein weit besseres Verstndnis sein.

    Aber nun zu unserem ersten HTML-Experiment.

    Die Lsungen (oder jeweils eine mgliche Lsung) finden Sie jeweilsam Ende eines Kapitels unter dem Kurznamen des Experimentes, derimmer am Anfang der Aufgabe steht. Natrlich hat die Lsungsdateinoch die Kennung *.HTML.

    Schreiben Sie eine korrekte HTML-Datei, die den Text Willkommenauf meiner Webseite! anzeigt.

    Am besten legen Sie ein eigenes Verzeichnis fr Ihre Experimente an,tippen die Lsung mit Hilfe des gewnschten Editors ein und spei-chern den Text in einer Datei ab. Als Namen knnen Sie z.B.E-EXP01.HTML verwenden. Jeder andere Name funktioniert auch. Nurauf die Kennung der Datei sollten Sie achten. Wenn es Ihr Betriebs-system erlaubt, dann ist meist die beste Kennung *.HTML. Sollte IhrBetriebssystem nur 3 Buchstaben nach dem Punkt im Dateinamenzulassen (z.B. frher bei DOS oder Windows 3.1), dann knnen Sieauch *.HTM verwenden.

    Noch ein Tipp fr Windows-Benutzer. Sie knnen beim Speichern derDatei den Namen in doppelte Anfhrungszeichen setzen, wenn Siesicher sein wollen, dass das Betriebssystem nicht von sich aus Datei-kennungen (z.B.: .TXT) anfgt.

    Nun steht also eine Textdatei auf der Festplatte. Sie enthlt unserengewnschten Text und einige zustzliche Angaben, deren Sinn wirgleich erkunden werden. Aber wieder zuerst zur Praxis. Schauen wiruns das Ergebnis als Webseite an. Zum Betrachten von Webseiten,egal woher diese Seiten kommen, brauchen wir ein Programm, dasBrowser genannt wird. Das englische Wort to browse bedeutet sovielwie schmkern, durchsehen, blttern. Das entsprechende Programmdient also dazu, im Internet zu schmkern oder eben zu surfen.

    Davon gibt es ganze Reihe. Ein Browser, der auf verschiedenen Rech-nern und Betriebssystemen zur Verfgung steht, kommt von derFirma Netscape. Je nach dem welche Version bei Ihnen installiert ist,heit das Programm dann Navigator oder Communicator. Andere

    E-EXP01:

  • 19

    Browser sind der Internet Explorer von Microsoft, Opera oder der inte-grierte Betrachter im Dateimanager KFM unter Linux. Ein ganz spezi-ellen Browser soll auch noch erwhnt werden: der Lynx unter Linux/Unix. Das ist ein Browser, der ausschlielich Texte darstellt.

    Starten Sie den Browser, den Sie auf Ihren Rechner als ersten finden.ffnen Sie nun genau die Datei, die Sie oben mit Hilfe des Editors er-stellt und abgespeichert haben. Wie war doch gleich der Name undder Name des Verzeichnisses?

    Meist ffnet man eine Datei mit dem Menpunkt DATEI/FFNEN oderin der englischen Variante mit FILE/OPEN.

    Und was steht am Bildschirm? Hoffentlich Ihr freundlicher Willkom-mensgru. Wenn Sie den nicht sehen - dann kann ich Sie nur bitten,noch einmal jeden Schritt einzeln nachzuvollziehen. Sind die spitzenKlammern alle vorhanden? Sind die Anweisungen in den spitzenKlammern in der richtigen Reihenfolge? Sind auch die Schrgstrichevor den Anweisungen vorhanden? Zu jeder Anweisung gibt es hiereine zweite Anweisung, mit einem Schrgstrich davor.

    Diese Seite kann natrlich auch Umlaute enthalten. ndern Sie dochnoch einmal den Text, so dass er Umlaute bekommt, speichern dasErgebnis und laden die Datei neu im Browser. Meist gengt auch derKnopf (engl. button) NEU LADEN, REFRESH, AKTUALISIEREN oder einersinngem hnlichen Beschriftung. Evtl. sollten Sie auch die Taste() (Umschaltung Gro-/Kleinschrift) gleichzeitig gedrckt halten.

    Und nun sehen Sie sicherlich den Text mit Umlauten.

    So spannend ist das gar nicht, meinen Sie? Klar, wir sind ja erst ein-mal nur auf dem eigenen Rechner geblieben. Und der ist ja fr die ei-gene Sprache eingerichtet. Aber der gleiche Text knnte auch ge-nauso gut auf einem iMac-Rechner in Texas gelesen werden unddort sind die Umlaute doch etwas Besonderes. Mit Hilfe der SpracheHTML knnen wir weltweit lesbare Dateien erstellen.

    Im Browser betrachten wir Webseiten. Diese Seiten knnen aus vielenEinzelinformationen (z.B. Bildern und Texten) zusammengesetztwerden. Eine Datei ist dagegen der Speicherplatz fr einen einzelnenText oder ein einzelnes Bild. Fr uns entspricht jetzt am Anfang eineSeite genau einer HTML-Datei. Wir werden aber im Laufe des Buchessehen, wie eine angezeigte Seite aus mehreren Dateien zusammen-gesetzt werden kann.

  • 20 .DSLWHO (LQOHLWXQJ

    Aber damit haben wir unsere erste Praxis hoffentlich erfolgreich ge-schafft und knnen ein wenig in der Historie und den Ideen hinterunserem Beispiel blttern.

    1.1 Das Buch und die Browser-KriegeBrowser-Hersteller haben zumindest in der Vergangenheit aus sachli-chen oder strategischen Grnden Spezialitten in ihre Browser einge-baut, die nicht in den Standards enthalten waren.

    Eine ganze Reihe von Erweiterungen waren so sinnvoll, dass sie sp-ter in den Standards aufgenommen wurden.

    Umgekehrt gilt auch, dass viele Vorgaben der Standards noch garnicht in den Browsern bercksichtigt wurden. Es gibt bei der wich-tigsten Standardisierungsorganisation WWW-Consortium (www.w3c.org) Testbeispiele fr korrekte Seiten, die kaum ein Browser richtig an-zeigt.

    So gert jeder Autor, der ber das Thema HTML schreibt, in eine un-angenehme Zwickmhle. Hlt man sich exakt an den Standard, gibtes mit unterschiedlichen Browsern unterschiedlichen rger. Hltman sich an einen Browser, kann ein anderer diese Spezialitten garnicht darstellen.

    Und dann gibt es auch noch die schlimmste Diskussionsvariante, dieentsteht, wenn man gar nicht mehr die Fakten sondern nur nochHerstellernamen betrachtet.

    Lassen Sie uns bitte die Diskussionen weglassen, die nicht der Sacheund dem Spa am Publizieren dienen.

    Untersttzen wir mit den Beschreibungen und Experimenten lieberdie Grundideen des Webs:

    Offenheit

    Unabhngigkeit von einzelnen Herstellern (Rechner, Betriebssy-steme, Browser)

    Unabhngigkeit von lokalen Spezialitten

    Zukunftssicherheit durch Verwenden der Standards

    Wir bleiben nach Mglichkeit also auf der Hauptstrae der Entwick-lungen im Web, blicken ein wenig voraus, um kommende Entwick-lungen schon zu bercksichtigen und bercksichtigen die Spezialit-ten der Firmen nur in Einzelfllen.

  • /|VXQJHQ 21

    Fr uns soll eine gute Lsung sein, wenn sie fr alle WWW-Benutzeranwendbar und sinnvoll ist.

    Im nchsten Kapitel

    Das WWW hat in wenigen Jahren eine erstaunliche Entwicklungdurchgemacht. Und mit seiner Entwicklung auch sehr dazu beigetra-gen, dass die zugrunde liegenden Netzwerke enorm gewachsen sind.

    Werfen wir daher einen kurzen Blick auf die kurze, aber spannendeHistorie des Webs.

    1.2 LsungenE-EXP01:

    E-EXP01: HTML-Lernen

    Willkommen auf meiner Web-Seite!

  • *HVFKLFKWH GHV ::: 23

    2 Historie

    2.1 Geschichte des WWWFr viele ist der bunte Bildschirm des modernen Browsers mit ver-schiedenen Bildern, Werbebannern und Texten zur Selbstverstnd-lichkeit geworden. Begonnen hat dies alles etwas einfacher. VieleIdeen und verschiedene Menschen haben ber die mglichen Ver-fahren zur Gliederung und Strukturierung von Informationen nach-gedacht.

    Angefangen hat alles mit den Katalogen in den Bibliotheken und denQuerverweisen und Literaturlisten in den Bchern. Jeder, der sich einpaar Jahre mit einem Thema beschftigt hatte, kannte die Standard-werke dazu und noch einige weitere.

    Das Netz, die Verknpfung der Texte geschah aber immer im Kopf desLesenden. Mit den digital gespeicherten Nachrichten kam auch dieIdee auf, die Verweise in den eigentlichen Text zu integrieren. Aufden Webseiten von http://www.w3c.org finden sich Hinweise zu denMenschen, die Ideen und Entwrfe lange vor dem Zeitalter des PCsentwickelt haben.

    Von Ted Nelson stammt die Idee des Hypertextes. Ein Hypertext ver-mischt den normalen Text mit Steuerelementen, die ihrerseits wiederauf weitere Informationen verweisen und so ein Netz bilden. Ein fr-herer Name fr das WWW war Mesh, was eben auch Netz bedeutet.Aber WWW, das World Wide Web, oder auf Deutsch das weltweiteNetz, klingt eben doch viel bedeutsamer, besonders wenn man es involler Lnge ausspricht.

    Der Name des Buches von Ted Nelson, war Literary Machines and DreamMachines (Literarische Maschinen und Traum-Maschinen). Er sah auchFilme voraus, deren Ablauf durch den Benutzer gesteuert werdenkonnten. Ein paar Video-Spiele sind auf dem besten Weg dahin.

  • 24 .DSLWHO +LVWRULH

    Ein anderer, manchen bekannter Vorlufer war das HyperCard Systemfr Macs. Bill Atkinson, der Entwickler des ersten Pixel-Zeichenpro-gramms MacPaint, schuf 1987 dieses Hypertext-Programm.

    Und die beiden Forscher Tim Berners-Lee und Robert Caillau arbeite-ten 1989/90 am Forschungszentrum CERN in der Nhe von Genf anIdeen, die schlielich zu den Grundbausteinen des WWW wurden.Ziel war es, eine vereinfachte Version der existierenden Layout-Spra-che SGML zu entwickeln und diese Sprache mit einem einfachenTransport-Protokoll zu verbinden. Schlielich sollten die Informatio-nen auf verschiedenen Rechnern bei CERN und auerhalb liegenknnen.

    Abbildung 2.1: Skizze der Informationsstruktur am CERN;aus: "Information Management: A Proposal", Tim Berners-Lee, CERN March 1989, May 1990

    Wichtig war den Entwicklern, den andauernden Informationsverlustzu begrenzen, der gerade an einer Forschungseinrichtung so leichtentsteht. Die Forscher waren ja meist nur fr eine gewisse Zeit zumForschungszentrum abgeordnet. Nach einigen Jahren oder manch-mal schon nach Monaten kehrten Sie an ihre Universitt zurck. Undam CERN mussten dadurch immer wieder neue Mitarbeiter eingewie-

  • *HVFKLFKWH GHV ::: 25

    sen werden und sich mit den bereits erarbeiteten Ergebnissen be-schftigen. Dieser Prozess sollte durch eine allgemein zugngliche,einheitliche Verffentlichung zusammen mit den notwendigen Ver-weisen auf Vorarbeiten, beschleunigt werden.

    Die Grundbausteine der Webidee waren:

    einheitliche Verffentlichung mit Hilfe einer einfachen Publikati-onssprache.

    einfacher, einheitlicher Zugang ber Systemgrenzen hinweg

    Verffentlichungen sollte jeder Forscher lesen, schreiben unddurch Verweise verbinden knnen

    Die Sprache (deutsch, englisch etc.) sollte keine technische Bar-riere darstellen.

    Die textbasierte Version des WWW-Systems startete am CERN imJahre 1991. Die Zahl der Nutzer war natrlich noch sehr klein.

    In den Jahren entwickelten verschiedene Autoren Browser, die text-basiert fr Konsolen/Monitore (heute in der Windows-Welt als DOS-Box bekannt) geschrieben wurden oder als graphische Anwendungfr die UNIX-Oberflche X-Window. Beispiele sind Erwise und Violaaus dem Jahr 1992.

    Ganz spannend sind auch die Zahlen, die den Datentransport fr dasWWW auf dem groen Hauptstrang des Internets in den USA ange-ben (NSF backbone). Im Mrz 1993 waren es 0,1% des Gesamtver-kehrs; im September des gleichen Jahres bereits 1%. Die Anzahl derangeschlossenen Server (Rechner mit freigegebenen Dateien) lag imNovember 1993 bei 200. In diesem Jahr hat auch die Kommission derEuropischen Union mit ihrem Sekretariat DG XIII zusammen mitCERN und der Fraunhofer Gesellschaft begonnen, das WWW zur Ver-teilung von technischer Information zu nutzen.

    Die Entwicklung des WWW ist also seit ihrem Anfang eine internati-onale Entwicklung.

    Ein besonders wichtiger Treiber in der Entwicklung sei noch genannt:Tim OReilly, der mit seinem gleichnamige Verlag OReilly und alsAusrichter von Konferenzen viel zur die Verbreitung der Webidee bei-getragen hat.

    In Genf fand dann 1994 die erste WWW-Konferenz statt. Die Veran-staltung war mit 800 Angemeldeten hoffnungslos berbucht nurdie Hlfte konnte teilnehmen.

  • 26 .DSLWHO +LVWRULH

    1994 waren es dann schon 1500 Server, die den WWW-Dienst anbo-ten. Und Hr. Bangemann stellt den Plan der Europischen Kommis-sion fr den Informations-Superhighway vor. Vielleicht fllt Ihnenauf, dass das lange vor den Reden des amerikanischen Vizeprsiden-ten Al Gore war. Die Last auf den WWW-Server hat sich nun schon inden 3 Jahren von 1991 bis 1994 vertausendfacht. Auch die Organisa-tion W3C wird in Zusammenarbeit zwischen CERN in Europa undMIT in den USA ins Leben gerufen.

    Und 1994 ist das Jahr, in dem der Urvater aller heute verwendetengraphischen Browser, Mosaic, von seinen Entwicklern in eine eigen-stndige Firma eingebracht wurde. Sein heutiger Name ist Netscape.Der bekannteste Entwickler des Teams ist Marc Andreessen.

    Die Geschichte seit dieser Zeit kennen Sie sicher aus eigener Erinne-rung. Der Kampf der Browser-Hersteller hat viele Schlagzeilen gelie-fert. Aber was auch immer ein einzelner Hersteller produziert oderdurchzusetzen versucht, der Mastab bleibt die Arbeit des internatio-nalen Gremiums W3C (World Wide Web Consortium), dem heuteOrganisationen aus Europa, USA und Japan angehren. (die europi-sche INRIA, die die Rolle von CERN bernommen hat, MIT fr dieUSA und die Keio-Universitt fr Japan).

    Die Geschichte des Netzes ist hier nur sehr, sehr kurz erwhnt. Viel-leicht surfen Sie selbst ein wenig. Eine gute Ausgangsbasis zur Erfor-schung der Geschichte des Netzes ist die Homepage des internationa-len Konsortiums http://www.w3c.org, von deren Webseiten auch dieDaten dieser kurzen Historie stammen.

    Im nchsten Kapitel

    Haben Sie noch einen Moment Geduld, um zuerst noch einen Blickauf einige allgemeine Spielregeln und die Erklrung der BuchstabenHTML zu werfen.

  • *UXQGSULQ]LSLHQ 27

    3 Auszeichnungsanweisungen

    Im ersten Beispiel haben wir bereits eine vollwertige HTML-Dateikennen gelernt. Nehmen wir uns die Zeit, ein paar charakteristischeMerkmale der Sprache anzusehen, bevor wir uns dann im nchstenKapitel wieder mit einer Reihe von Experimenten beschftigen.

    3.1 GrundprinzipienHTML folgt mehreren Grundprinzipien. Ein Grundprinzip verbirgtsich im Namen der Sprache. HTML steht fr: Hypertext Markup Lan-guage (Hypertext Auszeichnungssprache). Der Begriff Hypertext be-zeichnet dabei die Mischung aus Darstellung und Steuerung. EineHTML-Seite kann also neben dem normalen Text weitere Elementewie Bilder, Tne etc. Steuerungen enthalten, die auf andere Seitenverweisen. Die Steuerung kennen Sie vom Surfern im Internet odervon einem Hilfesystem. Es sind die anklickbaren Verweise (engl.links), die einen Sprung an eine andere Textstelle bewirken knnen.Die Verweise werden wir in einem spteren Kapitel besprechen.

    3.1.1 Auszeichnungen

    Die Wirkung der Auszeichnungsanweisungen kann man sich leichtmit Hilfe eines bekannten Stiftes aus dem Schreibwarenladen vorstel-len. Kauft man einen Marker, einen Stift, mit dem man Textstellenfarbig markieren kann, und wrde z.B. alle wichtigen berschriftenauf einer Zeitungsseite in rot, alle nchstwichtigen in grn und dienicht ganz so wichtigen in blau markieren, dann htte man auf derSeite einige logische Auszeichnungen angebracht.

    hnlich funktioniert auch eine Auszeichnung in HTML. An derStelle, an der eine logische Auszeichnung beginnen soll, fgt man inden Text die Start-Marke einer Anweisung ein. Meist folgt auf eine

  • 28 .DSLWHO $XV]HLFKQXQJVDQZHLVXQJHQ

    Start-Marke Text, der mit der Auszeichnung nher bestimmt werdensoll und eine passende Ende-Marke schliet die ganze Auszeichnungab.

    Eine HTML-Anweisung besteht also meist aus drei Teilen: einer Start-Marke, dem Inhalt und der Ende-Marke. In seltenen Fllen gibt es nureine Start-Marke. Die Marken werden in spitzen Klammern geschrie-ben. Die Ende-Marke erhlt innerhalb der spitzen Klammern einen/ (normaler Schrgstrich) vor dem Namen der Anweisung.

    Beispiel:

    ..

    Anweisungen funktionieren in HTML also hnlich wie die Klammernin einer mathematischen Aufgabe. Auch dort kann man verschach-teln. Aber man muss die Klammern sozusagen von innen her aufl-sen. Die zuletzt geffnete Klammer muss zuerst wieder geschlossenwerden.

    Beispiel:

    Der Titel

    In unserem kleinen Beispiel wurde ein Titel in einem Kopfbereichverschachtelt.

    Betrachten Sie mglichst jeden der ausgezeichneten (oder anders:markierten) Bereiche wie einen Container, der wertvolle Informatio-nen enthlt. Diese Container knnen ineinander verschachtelt wer-den.

    Damit haben wir schon drei der vier Buchstaben von HTML erklrt.HT steht fr den HyperText und das M steht fr markup (das logischeMarkieren). Der letzte Buchstabe, das L, steht fr language / Sprache.Eine Sprache fr Computeranwendungen ist ein Satz von Spielregeln,den man zur Lsung der gestellten Aufgabe benutzen kann. In unse-rem Fall sind die Spielregeln eben die Auszeichnungs-Anweisungenzusammen mit einigen weiteren Vorgaben zur Schreibweise, zur Ver-schachtelung etc.

  • *UXQGSULQ]LSLHQ 29

    3.1.2 Trennung zwischen Autor und Darstellung

    Ein weiteres Grundprinzip neben der Verwendung der SpracheHTML ist die Trennung zwischen Autor und Darstellung. Eigentlichsollte in einer HTML-Datei nichts ber die Formatierung stehen. Aberhier geriet HTML zwischen die Fronten derjenigen, die eine immerbessere und genauere Darstellung meist fr Werbezwecke wollten,und denjenigen, die das ganze System im Auge haben.

    In den Anfngen des WWW, des World Wide Web, hat der Autor nursehr einfache HTML-Befehle (oder Anweisungen) zur Verfgung ge-habt. Damit war die Trennung automatisch gegeben. Nur der Browserhat sich um die Darstellung gekmmert.

    Je umfangreicher in den verschiedenen Versionen der Sprache dieMglichkeiten wurden, desto unschrfer wurde diese Trennung. DerHhepunkt wurde mit HTML 3.2 erreicht. Danach besann man sichwieder strker auf das Grundprinzip der Trennung zwischen Autorund Darstellung.

    Man nennt brigens die Art der Schreibweise fr HTML auch das Frei-text-Format. Sie knnen gerne Leerzeichen und Zeilenschaltungeneinfgen. Im Browser werden sie zumeist entfernt, denn es ist ja derBrowser, der formatiert, nicht der Autor.

    Gestalten Sie also Ihre ersten Beispiele nach Wunsch. Zeilenschaltun-gen, Leerzeichen und Tabulatoren verlngern zwar die Datei, machenSie aber gleichzeitig doch viel leichter lesbar.

    3.1.3 Korrekte Kodierung der Anweisungen

    In der Vergangenheit gingen Autoren und HTML-Editoren sehr frei-zgig mit den Regeln um. Das geschah sicher nicht aus bsem Willenoder gar Unkenntnis. Sogar der frhere Standard hatte nichts dage-gen, wenn so klare und einfache Anweisungen wie die - oder- Anweisung fehlten oder ohne schlieende Ende-Marke ge-schrieben wurden.

    Noch schlimmer wird die Situation bei anderen Anweisungen wie- oder , die wir noch detailliert kennen lernen werden. DieEnde-Marken wurden kaum geschrieben und auch heute noch ent-fernen manche HTML-Editoren heimlich etwa vorhandene.

    Wir wollen diese Schlamperei nicht untersttzen. Zum einen ist es ir-gendwie unsauber und damit auch unschn, zum anderen stehensolche Unsauberkeiten der zuknftigen Handhabung entgegen. Jekomplexer und umfangreicher die verschiedenen, ineinander grei-

  • 30 .DSLWHO $XV]HLFKQXQJVDQZHLVXQJHQ

    fenden Standards werden, desto wichtiger werden Editoren, Hilfsmit-tel, Generatoren, Datenbanken und Autorensysteme und damit eineformal korrekte Sprache. Lassen Sie sich daher nicht irritieren, wennhier im Buch manchmal mehr Korrektheit gefordert wird, als heutigeUmgebungen erzwingen oder voraussetzen.

    Mit einem lachenden und einem weinenden Auge betrachte ich dieEntwicklung, denn es war ein tolles Gefhl, mit ein paar Befehlenund einem Editor Webseiten zu erstellen, die in der ganzen Weltsichtbar sind. Viel von dieser Stimmung knnen Sie auch heute nach-vollziehen. Und deshalb finden Sie in jedem Kapitel eine Reihe vonExperimenten, die Ihnen Stck fr Stck die Welt von HTML er-schlieen.

    3.2 Kommentare in HTMLWollen Sie in die HTML-Dateien eigene Bemerkungen und Zusatzin-formationen einfgen, dann bietet HTML auch eine Kommentaran-weisung an.

    Der Beginn eines Kommentars wird mit . Der Kommentar wird mit einer offenen spitzenKlammer begonnen und mit einer schlieenden spitzen Klammer be-endet. Es gibt damit bei Kommentaren keine schlieende Marke miteinem vorangesetzten Schrgstrich.

    Es hat sich als praktisch erwiesen, Kommentaren eine eigene Zeile zuspendieren.

    3.2.1 Versionsangaben

    In der ersten Zeile der meisten HTML-Seiten werden Sie einen spezi-ellen Eintrag finden, der die verwendete Sprachversion angibt. DieseAngabe ist eine Vorgabe der "Muttersprache" von HTML: SGML (stan-dardized general markup language), einer sehr mchtigen Seitenbe-schreibungssprache. HTML ist sozusagen der kleine Ableger davon.

    Grundlage fr die Beispiele dieses Buches ist die HTML Version 4.0,die aber noch Anweisungen enthlt, die aus frheren Versionenstammen und deren Verwendung heute nicht mehr empfohlen wird.Da aber Millionen von Webseiten existieren, werden sicher auch zu-knftige Browser ltere Webseiten anzeigen knnen.

  • .RPPHQWDUH LQ +70/ 31

    Beispiele:

    Der Eintrag beschreibt eine sogenannte document type definition (Do-kumenten Aufbau Definition). Die Anweisung beginnt mit . Das erste Beispiel gibt an, dass es sich um ein HTML-Doku-ment der Sprachversion 4.0 handelt. Die Sprachversion wird um dasWort transitional ergnzt. Die Sprache der Definition ist "EN" fr Eng-lisch.

    Es gibt drei Varianten der Definition des Dokumentes: strict, transitio-nal und frameset. Die strikte Definition (strict) enthlt nur die Anwei-sungen der Sprachversion 4.0, die dort als zuknftig gltig angesehenwerden.

    Die bergangsregelung (transitional) enthlt neben den eigentlichenAnweisungen der Version 4.0 noch weitere Anweisungen, die aus fr-heren Versionen der Sprache stammen und deren Verwendung heutenicht mehr empfohlen wird. Diese Angabe wird heute die meist ge-bruchliche sein.

    Die letzte der drei Varianten ergnzt die bergangsregelung zustz-lich um Angaben zu den sogenannten frames (Rahmen). Diesem Rah-men ist ein eigenes Kapitel gewidmet. Man kann damit den Anzeige-bereich des Browsers noch einmal unterteilen und mehrere HTML-Seiten dem Benutzer gleichzeitig prsentieren. Meist werden Rahmenverwendet, um bessere Navigationsmglichkeiten fr den Benutzerzu schaffen.

    In den letzten drei Beispielen wird jeweils noch eine Zusatzinforma-tion gegeben. Unter der angegebenen Adresse kann der Browser beiBedarf die genaue Spezifikation der Definition finden.

    Diese Angaben sind fr die meisten Browser optional. HTML-Edito-ren werden aber zumeist diese Zeile einfgen.

    Wir werden in unseren einfachen HTML-Beispielen am Anfang desBuches diese Definitionsangaben weglassen. Fr dauerhafte und pro-fessionelle Auftritte sind sie aber empfohlen.

  • 32 .DSLWHO $XV]HLFKQXQJVDQZHLVXQJHQ

    Im nchsten Kapitel

    Nach den wichtigen Vorbemerkungen wollen wir nun einige Dateienschreiben, die bereits Gestaltungselemente von HTML nutzen.

  • =HLFKHQVlW]H 33

    4 Schreiben fr die Welt

    In unserem Eingangsbeispiel haben wir mit einem einfachen Editoreine Textdatei geschrieben und diese Textdatei in einem Browser be-trachtet.

    Hoffentlich ist das auch bei Ihnen an Ihrem eigenen Computer gutgelungen.

    Aber so selbstverstndlich ist das in Wirklichkeit leider nicht. EineDatei, die Sie auf Ihrem Rechner erstellen, muss ja nicht unbedingtauf einem anderen Rechner in einem anderen Land lesbar sein. Ne-ben den Rechnern, die Sie zu Hause benutzen, gibt es noch Grorech-ner, Steuerungsrechner oder Kleincomputer, die durchaus auch Sei-ten aus dem WWW darstellen knnen. Eine Datei, die im WWW zusehen sein soll, muss unabhngig von einem bestimmten Betriebs-system, einem bestimmten Editor oder einer speziellen Landesspra-che sein.

    4.1 ZeichenstzeDazu mssen offene Spielregeln erdacht und eingehalten werden.Eine dieser Spielregeln ist ein gemeinsamer Zeichensatz. Ein Zeichenist ein allgemeiner Begriff fr einen Buchstaben, eine Ziffer, ein Son-derzeichen aber auch fr ein Zeichen, das eine Steuerungsaufgabe freinen angeschlossenen Drucker hat. Ein Zeichensatz enthlt einefestgelegte Anzahl von Zeichen in einer ebenfalls festgelegten Rei-henfolge. Bekannte Zeichenstze sind ASCII (american standard codeof information interchange / amerikanischer Standard Code fr denInformationsaustausch), ANSI (american national standards institute/ amerikanisches, nationales Standardisierungs-Institut), ISO-8859-X(internationale Standard Organisation) oder der immer strker ver-breitete UniCode (universeller Zeichensatz).

  • 34 .DSLWHO 6FKUHLEHQ IU GLH :HOW

    Der Zeichensatz ISO-8859-1 ist auch unter dem Namen Latin 1 be-kannt.

    Die Bedeutung eines gemeinsamen Zeichensatzes knnen wir uns aneinem Beispiel ansehen.

    Kennen Sie eigentlich noch diese hsslichen Adressen, in denen alleUmlaute fehlten und statt dessen mit Ersetzungen gearbeitet wurde?Aus einem Herrn Mller wurde eben dann der Herr Mueller. Und ausdem wurden dann einmal zwei s oder ein sz. So lange ist dasnoch gar nicht her.

    Heute kann man auch als Amerikaner in Texas sitzen und dort mit ei-nem iMac-Rechner Seiten aus dem World Wide Web (WWW) an-schauen, die von einem deutschen Texter auf einem IBM-PC ge-schrieben wurden mit richtigen Umlauten.

    4.1.1 Frhere Zeichenstze

    Wieso kam es denn berhaupt zu den Ersatzdarstellungen fr Um-laute?

    Des Rtsels Lsung liegt in der Dominanz der amerikanischen Com-puterhersteller, dem Wunsch der europischen Hersteller, kompati-bel zu sein, und den Problemen mit den verschiedenen Zeichenst-zen.

    Der bekannte Zeichensatz ASCII umfasst 127 verschiedene Zeichenfr Buchstaben, Ziffern und Steuerzeichen und hat keinen Raum frUmlaute. Jedes Zeichen bentigt nur 7-Bits statt der blichen 8-Bitseines ganzen Bytes, was einen erheblichen Gewinn bei der bertra-gung von Nachrichten ber langsame Telefonleitungen mit sichbringt. Je krzer ein Zeichen ist, desto schneller funktioniert diebertragung. Die bertragung war deshalb notwendig, da die sehrteuren Computer zentral aufgestellt wurden und die Benutzer oft dieDaten ber weite Strecken schicken mussten.

    Es gibt noch weitere Grnde, nur wenige Zeichen zu verwenden.Frhe Schnelldrucker brauchten Druckketten, auf denen jedes Zei-chen angebracht war. Je weniger Zeichen vorhanden waren, destokrzer konnten diese Ketten sein und damit auch schneller drucken.

    Heute schmunzeln wir inmitten unserer Tintenstrahl- und Laser-drucker ber diese Probleme.

  • =HLFKHQVlW]H 35

    Aber was hat das mit unserem WWW und HTML zu tun? Auch jederText, den Sie eintippen, muss mit Hilfe eines Zeichensatzes (ASCII,Latin 1, UniCode...) dargestellt werden. Innen im Computer gibt es janur Zahlen. Also muss so ein Zeichensatz festlegen, welche Zahl zuwelchem Buchstaben gehrt. Und da gibt es deutliche Unterschiede.

    IBM-PC Benutzer knnen hier unser Experiment F-EXP01 mitma-chen.

    Erstellen Sie mit einem Editor unter Windows HTML-Datei nach demersten Muster. Sie soll auch Umlaute enthalten. Speichern Sie dieseDatei mit der Kennung unter dem Namen F-EXP01.HTML ab.

    Betrachten Sie die Datei in Ihrem Browser (Explorer, Navigator, Lynx,Opera, ...).

    ffnen Sie nun eine DOS-Box (Eingabeaufforderung). Bei meinemRechner mit Windows NT kann dies ber START/PROGRAMME/ EINGA-BEAUFFORDERUNG geschehen.

    Laden Sie nun die gerade geschriebene Datei mit dem DOS-EditorEdit (edit f-exp01.html). Sollten Sie die spartanische Oberflcheder Eingabeaufforderung (auch DOS-Box oder Kommandozeile ge-nannt) nicht gut kennen, dann helfen vielleicht die folgenden Tipps.

    Mit der Eingabe des Laufwerksbuchstabens, eines Doppelpunktesund der ()-Taste knnen Sie auf das gewnschte Laufwerk wech-seln (z.B. auf das Laufwerk A:, das meist ein Diskettenlaufwerk ist,oder C:, das die erste Festplatte ist). Mit CD Ihr_Verzeichnis knnenSie in ein neues Arbeitsverzeichnis wechseln. Der Befehl lsst sich na-trlich wiederholen, wenn Sie Ihre Verzeichnisse tiefer verschachtelthaben. Mit CD .. (zwei einzelne Punkte) verlassen Sie es wieder.Auch dies kann mehrfach hintereinander geschehen. Damit bewe-gen wir uns immer weiter nach oben. Wenn Sie in dem Verzeichnisangekommen sind, in dem die gerade geschriebene Datei liegt, danngeben Sie einfach edit Ihr_Dateiname ein.

    Suchen Sie doch nun einmal die Umlaute. Sie sind verschwundenund durch eigentmliche Sonderzeichen ersetzt worden, die Sie viel-leicht noch nie gesehen haben.

    Auf ein und demselben Rechner gibt es also unterschiedliche Darstel-lungen fr Umlaute, da verschiedene Zeichenstze benutzt werden.

    F-EXP01: Zeichenstze

  • 36 .DSLWHO 6FKUHLEHQ IU GLH :HOW

    Abbildung 4.1: Im Browser dargestellt

    Abbildung 4.2: Unter DOS betrachtet

    Fr die Dateien (gelegentlich auch Dokumente genannt), die manmit HTML erstellt, wird ein einheitlicher Zeichensatz benutzt, derunabhngig vom Rechner ist. Dieser Zeichensatz ist ein ISO Standard(ISO: Internationale Standard Organisation, Genf). Es ist der Zeichen-satz ISO-8859-1. Vielleicht kennen Sie ihn unter dem Namen Latin 1.Unter Microsoft-Betriebsystemen wird er auch Western genannt. Die-ser Zeichensatz besteht aus den Zeichen des ASCII-Zeichensatzes und128 weiteren Zeichen, die auch alle europischen Umlaute und Son-derzeichen enthalten.

    Die Wahl dieses Zeichensatzes lag aus zwei Grnden nahe. DasWWW wurde am CERN in Genf entwickelt. Dort waren europischeUmlaute und Akzente natrlich blich. Daher lag es nahe den pas-senden, standardisierten Zeichensatz zu verwenden. Erst spter ka-

  • 7H[WIRUPDWLHUXQJ 37

    men andere hinzu. Aber davon spter. Wir werden noch gelegentlichauf das Thema des verwendeten Zeichensatzes zurckkommen.

    HTML verwendet die folgende Spielregel: in den spitzen Klammern,die die Anweisungen umgeben, sollten nur Zeichen aus der erstenHlfte des ISO-8859-1 Zeichensatzes verwendet werden. Diese Zei-chen verwenden eine numerische Darstellung von 0 bis 127 (dezi-mal). Und es sind die gleichen Zeichen, die auch ASCII verwendet.

    Zwischen den Anweisungen, also im eigentlichen Inhalt, ist zuersteinmal Latin-1 die Standardeinstellung.

    Vielleicht merken wir uns einfach als Merkregel: Keine Umlaute inden Anweisungen, mit Umlauten im normalen Text.

    Wenden wir uns jetzt erst einmal einem weiteren wichtigen Aspektder Sprache zu der Formatierung von Texten.

    4.2 TextformatierungMachen wir zuerst ein Experiment und diskutieren das Ergebnis imAnschluss. Vertrauen Sie bitte momentan den Vorgaben. Die Detailszu den spitzen Klammern und den verwendeten Anweisungen (z.B.head) folgen natrlich noch.

    Erstellen Sie mit Hilfe eines Editors eine HTML-Datei. Sie besteht wie-der aus einem Kopf und einem Hauptteil . Als Text imHauptteil sollten Sie nun ein Gedicht (ab-) tippen. Mein Lieblingsge-dicht ist die Glocke von Schiller. Das ist auch lang genug, um nochein paar weitere Experimente damit zu machen. Aber die Lnge istmomentan gar nicht so wichtig. Wir bentigen nur ein Gedicht, daskonventionell in Zeilen gegliedert ist.

    Speichern Sie die HTML-Datei mit dem Gedicht und laden Sie die Da-tei in Ihren Browser.

    Und nun sollte das schne Gedicht auf einmal ohne eine der mh-sam eingetippten Zeilen als einfacher Flietext angezeigt werden. DieZeilen sind verloren gegangen.

    F-EXP02: Formatierungen

  • 38 .DSLWHO 6FKUHLEHQ IU GLH :HOW

    Abbildung 4.3: Gedicht ohne Zeilen

    HTML ist eine Sprache, die den Aufbau von Seiten beschreibt. Sie istaber nicht fr die Darstellung verantwortlich. Die Darstellung ber-nimmt der Browser. Und der muss sich an seine eigene Umgebunganpassen knnen. Vielleicht haben Sie eine Einstellung mit geringerAuflsung gewhlt (z.B. 640 x 480 Bildpunkte). Hier haben nur einpaar Zeilen auf dem Bildschirm Platz. Oder Sie haben eine sehr guteAuflsung gewhlt, die viel mehr gleichzeitig anzeigen kann. In je-dem Fall wird sich der Browser anpassen und Ihre Datei darstellen.

    Noch ein Problem ist mit den blichen Fenstern verbunden. Mal sindsie klein und schmal, mal fllen Sie den ganzen Bildschirm aus.

    Verndern Sie doch einmal die Gre des Browserfensters und sehensich an, wie verschieden der Text des Gedichtes durch den Browserformatiert wird, wenn das Anzeigefenster immer schmaler wird.

    Damit sind wir mitten in einer sehr umfangreichen Diskussion gelan-det. Ein wissenschaftlicher Autor, der eine Arbeit verbreiten mchte,wird kaum etwas dagegen haben, wenn der Browser seinen Flietextso darstellt, wie er eben in das Fenster passt. Eine Firma, die viele Geldfr einen schnen Auftritt im Internet bezahlt hat, wrde umgekehrtdie Seite genau so schn darstellen wollen, wie dies auf gedrucktenSeiten der Fall ist.

    Auf die Frage der Darstellung von Webseiten haben im Laufe der Zeitverschiedene HTML-Versionen unterschiedliche Antworten gegeben.Wir werden sie alle kennen lernen.

  • 7H[WIRUPDWLHUXQJ 39

    Fr den Moment wrde ich aber gerne einmal das Gedicht wieder ineine Form bringen, die der blichen Darstellung entspricht.

    Dazu bearbeiten wir unser Gedicht-Beispiel ein weiteres Mal und er-gnzen die Zeilenschaltung von HTML.

    ffnen Sie die Datei mit dem Gedicht mit dem Editor. An den Stellen,an denen Sie vom Browser verlangen, dass er eine neue Zeile beginnt,fgen Sie jeweils den Befehl ein. Br steht fr break / Umbruch.

    Betrachten Sie nun das Gedicht wieder im Browser.

    Falls das Fenster breit genug ist, sehen Sie nun das Gedicht wieder inder gewohnten Form.

    Abbildung 4.4: Gedicht in gewohnter Form

    Mit expliziten Befehlen zum Zeilenumbruch haben wir nun unserGedicht wieder in die bekannte Form gebracht. Aber natrlich wirdder Browser eigenstndig zustzliche Zeilenumbrche hinzufgen,wenn das Fenster zu schmal wird.

    F-EXP03: Zeilenschaltungen fr das Gedicht

  • 40 .DSLWHO 6FKUHLEHQ IU GLH :HOW

    Im nchsten Kapitel

    Bisher haben wir nur eine sehr einfache Formatierung von Textenmit Hilfe des erzwungenen Zeilenumbruchs geschafft. Und wir ha-ben das Grundprinzip der Trennung zwischen logischer Auszeich-nung und tatschlicher Darstellung gesehen.

    Die eingefgte Zeilenschaltung war eine Steuerung des Browsers. Esgibt noch eine Flle von logischen Steuerungen fr die Daten.

    4.3 LsungenF-EXP01: Zeichenstze

    F-EXP01: HTML-Lernen

    Mit Umlauten und einem scharfen "s" -->> !

    F-EXP02: Formatierungen

    HTML-Lernen: Experiment 003

    Friedrich SchillerDie GlockeFest gemauert in der ErdenSteht die Form, aus Lehm gebrannt.Heute mu die Glocke werden,Frisch, Gesellen, seid zur Hand.Von der Stirne heiRinnen mu der Schwei,Soll das Werk den Meister loben,Doch der Segen kommt von oben.

  • /|VXQJHQ 41

    F-EXP03: Zeilenschaltungen fr das Gedicht

    HTML-Lernen: Experiment 004

    Friedrich Schiller

    Die Glocke

    Fest gemauert in der ErdenSteht die Form, aus Lehm gebrannt.Heute mu die Glocke werden,Frisch, Gesellen, seid zur Hand.Von der Stirne heiRinnen mu der Schwei,Soll das Werk den Meister loben,Doch der Segen kommt von oben.

  • hEHUVFKULIWHQ 43

    5 Logische Textformatierungen

    Bisher haben wir ja schon diskutiert, dass HTML eine Sprache ist, beider streng zwischen den Aufgaben des Autors und den Aufgaben desDarstellungsprogramms unterschieden wird.

    Sehen wir uns einige Beispiele an, in denen der Autor die logischeAuszeichnung liefert und erst der Browser die aktuelle Darstellungfestlegt.

    5.1 berschriftenEine berschrift wird durch ein berschriftenanweisung dargestellt.Wir haben ja schon gesehen, dass die Anweisung dabei aus einerStart-Marke (engl. opening tag), dem Inhalt, der hier eine berschriftist, und der Ende-Marke (engl. closing tag) besteht. Die Marken derAnweisungen werden in HTML in spitze Klammern gesetzt. Die ber-schrift besteht also nun aus drei Teilen: Start- und Ende-Marke unddem eigentlichen Text.

    In unserem Gedicht-Beispiel wollen wir die berschrift markieren.

    Laden Sie das Beispiel mit dem Gedicht in den Editor. Benutzen Siedabei die -Anweisung. Setzen Sie also vor die berschrift dieStart-Marke und hinter die berschrift die Ende-Marke .

    Speichern Sie das Beispiel und zeigen es im Browser an. Wie sieht nundie berschriftzeile aus? Welche Eigenschaften hat sie?

    L-EXP01: Auszeichnung von berschriften

  • 44 .DSLWHO /RJLVFKH 7H[WIRUPDWLHUXQJHQ

    Abbildung 5.1: Groe berschrift

    berschriften werden nach ihrer Wichtigkeit unterschieden. Dabeigibt es eine Abstufung von 1 (sehr wichtig) bis 6 (weniger wichtig).Im Experiment 5 haben wir die wichtigste berschrift gewhlt.

    berschriften haben einige besondere Eigenschaften. Eine ber-schrift besteht aus einer eigenen Zeile. Zustzliche Zeilenschaltungenkann man rund um die berschrift entfernen. HTML-Elemente, dieimmer auf einer eigenen Zeile beginnen, heien auch Blcke.

    Der Browser wird die Schriftart (Arial, Courier, ...), die Gre(12,14,16, ... Punkt) und die anderen Schriftattribute (halbfett,kursiv, ...) selbstndig festlegen und dabei die verschiedenen Gewich-tungen der berschriften bercksichtigen.

    In unserem Beispiel kann es passieren, dass unterhalb und oberhalbder berschrift viel Platz bleibt. Vielleicht stehen hier noch Leerzei-len, die wir mit der erzeugt haben. Die unntigen Zeilenschal-tungen knnen wir entfernen.

    Die berschriften sollen brigens nur logisch sinnvoll geschachteltwerden. Nach einer berschrift der Wichtigkeit 4 darf keine ber-schrift der Wichtigkeit 6 folgen. Man darf keine Wichtigkeitsebeneauslassen.

    Erstellen Sie eine korrekte HTML-Datei, in der alle 6 berschriftenar-ten vorkommen. Zeigen Sie die HTML-Datei in verschiedenen Brow-sern an.

    L-EXP02: Darstellung von berschriften

  • hEHUVFKULIWHQ 45

    Welche berschrift wird mit welchen Mitteln (Schriftart, Gre, At-tribut) dargestellt?

    Abbildung 5.2: berschriften in HTML

    Je nach dem Betriebssystem, das Sie verwenden, werden Sie unter-schiedliche Browser zur Verfgung haben. Solange Sie Browser frgraphische Oberflchen verwenden, wird der Unterschied nicht allzugro werden. Aber es gibt noch einen ganz speziellen Browser, denich gerne noch einmal erwhnen wrde.

    Die ltesten Browser wurden fr Textterminals geschrieben. Sie konn-ten nur Text darstellen. Und natrlich waren die Darstellungsmg-lichkeiten dadurch sehr begrenzt. Unter Linux finden Sie sicher dasProgramm lynx, das ein Beispiel fr so einen Browser ist. Allerdings istlynx sehr schnell, da er Bilder, die in heutigen Webseiten enthaltensind, nicht ldt. Sollten Sie ausschlielich am textlichen Inhalt inte-ressiert sein, wre es sicher interessant, ihn einmal auszuprobieren.

    Mglicherweise ergibt eine Suche im WWW, dass dieser Browser auchauf anderen Plattformen zur Verfgung steht.

    Fr manche mag das ein Ausflug in die Historie sein. Trotzdem hatder Browser fr Dokumentationen und zum Testen durchaus nochseine Berechtigung.

  • 46 .DSLWHO /RJLVFKH 7H[WIRUPDWLHUXQJHQ

    5.2 Auszeichnung von TextenMan kann Textstellen hnlich den berschriften mit logischen Aus-zeichnungen versehen. Die Auszeichnungen spiegeln die logischeVerwendung wieder. Allerdings bleibt die Darstellung wieder demverwendeten Browser berlassen.

    Tabelle 5.1: Logische Formatierungen

    Die logischen Auszeichnungen knnen Sie der Tabelle entnehmen.Die meisten drften einfach in der Anwendung sein. Bei allen Aus-zeichnungen handelt es ausschlielich um die Steuerung der Darstel-lung. Andere Dienste, die wir noch kennen lernen werden, wie Steu-erungen zum Anklicken, sind damit nicht verbunden.

    In der -Auszeichnung taucht nun zum ersten Mal der Begriffdes Parameters auf. Ein Parameter folgt dem eigentlichen Befehl in-nerhalb des spitzen Klammerpaares. Diese Parameter stehen nur inder Start-Marke. In den allermeisten Fllen besteht ein Parameter ausder Angabe des Parameternamens, der von einem Zuweisungszei-chen (=) und dem gewnschten Wert in Anfhrungszeichen ge-folgt wird.

    Auszeichnung Befehl

    Zitat (Block) blockquote> ...

    Zitat (eingestreut) (HTML 4.0) ...

    Verweis auf (aber nicht aktiv) ...

    Programmlisting ...

    E-Mail-Adresse ...

    Text hervorheben ...

    Text deutlich hervorheben ...

    die Schrift klein machen ...

    die Schrift gro machen ...

    Schriftgre steuern ... Parame-ter: size =[+|-]1-7, color=#...

    Abkrzung markieren (HTML 4.0) ... Parameter: title

    Krzel markieren (HTML 4.0) z.B. WWW, DNS

    ... Parameter: title

  • $XV]HLFKQXQJ YRQ 7H[WHQ 47

    In wenigen Fllen gengt die Anwesenheit des Parameters, um eineSteuerung zu bewirken. Hier fungiert der Parameter wie ein Schalter.

    Aber machen wir zuerst wieder ein Experiment.

    Erstellen Sie eine korrekte HTML-Datei, die die Auszeichnungen von bis aus der Tabelle benutzt.

    Notieren Sie, welche Mglichkeiten Ihr Browser zur Darstellung derjeweiligen Auszeichnung benutzt. Ein Tipp: wird mit 2d geschrieben. Manchmal vertippt man sich hier.

    Abbildung 5.3: Logische Auszeichnungen

    Die Auszeichnung blockquote wird fr Zitate verwendet. Meist wirdder Absatz mit dem Zitat eingerckt und ein wenig Platz darber unddarunter gelassen. Dieses Zitat wird also von normalen Text abgeho-ben. Meist stellt man ein derartiges Zitat einem lngeren Text voraus.

    Die zweite Auszeichnung fr Zitate ist die -Anweisung. Eigentlichsollten eingestreute Zitate vom Browser automatisch mit Anfh-rungszeichen versehen werden. Viele Browser ignorieren jedoch die-sen Teil der Anweisung.

    L-EXP03: Arbeiten mit logischen Formatierungen

  • 48 .DSLWHO /RJLVFKH 7H[WIRUPDWLHUXQJHQ

    Will man den Quelltext eines Programms, einen Hinweis auf einSchlsselwort einer Computersprache oder eine Bildschirmausgabedarstellen, eignet sich der -Befehl. Er wird meist mit einerSchrift mit gleich groen Buchstaben dargestellt, um den bekanntenEindruck von einem Terminal oder einem lteren Computerdruckerwiederzugeben.

    Mchten Sie auf einer Webseite eine E-Mail-Adresse angeben, dannknnen Sie sie mit der -Anweisung formatieren. Meist ver-wenden die Browser dann zur Darstellung eine kursive Schrift.

    Einzelne Worte oder kurze Abschnitte lassen sich mit (fr em-phasize / betonen) oder (fr stark betonen) hervorheben.

    Und schlielich lsst sich mit und die Schriftgreeinstellen. Wie gro oder wie klein allerdings die Schrift wird, daswei nur der Browser.

    5.3 Schriftgren und Farben steuernMit der -Anweisung kann man die Schriftgre etwas przisersteuern. Die mgliche Schriftgre im Browser wird auf einer willkr-lichen Skala mit 1 bis 7 bewertet. Mit dem Parameter size kann mannun entweder einen der Werte vorgeben oder die momentan be-nutzte Schriftgre nach oben oder unten verndern. Dazu setzt maneinfach ein Vorzeichen vor den Wert. Insgesamt kann man aber dieSkala von 1 bis 7 nicht verlassen. Die normale Schriftgre wird hierdurch einen Wert von 3 angegeben.

    Eine -Anweisung mit Parameter sieht also nun so aus:

    Text...

    Schreiben Sie eine HTML-Datei (oder ndern eine vorhandene Dateiab) mit den mglichen Schriftgren. Alle Gren sollen relativ an-gegeben werden.

    L-EXP04: Setzen der Schriftgre

  • 6FKUHLEZHLVHQ YRQ $QZHLVXQJHQ XQG 3DUDPHWHUQ 49

    Abbildung 5.4: Relative Schriftgren

    5.4 Schreibweisen von Anweisungen und Parametern

    Alle Anweisungen (font, head, ...) und alle Parameternamen solltenklein geschrieben werden. Noch werden gro geschriebene Anwei-sungen und Parameter akzeptiert und in vielen Anleitung auch alsrichtig angegeben. In der Empfehlung zu XHTML, der Version desStandards vom Januar 2000, wird aber die einheitliche Kleinschriftvorgeschlagen.

    Und noch etwas: alle Werte fr Parameter sollten immer in Anfh-rungszeichen gesetzt werden. Auch das ist heute normalerweise nurdann notwendig, wenn es die Mglichkeit zu Verwechslungen gibt.Das kann meist dann passieren, wenn der Wert ein Text aus mehrerenWorten ist und damit Leerzeichen enthlt.

  • 50 .DSLWHO /RJLVFKH 7H[WIRUPDWLHUXQJHQ

    5.5 HTML und FormatierungsanweisungenVielleicht fangen Sie sich schon an, ein wenig zu wundern. Wir ha-ben doch diskutiert, dass der Autor den Inhalt und die logische Aus-zeichnung vorgibt und sich der Browser um die Darstellung km-mert. Was noch hinzukommen kann, ist, dass es nicht immer einBrowser sein muss. Eigentlich sollten die HTML-Seiten auch auf an-deren Gerten mit und ohne Display auszugeben sein. Ganz drftedieser Wunsch des Standards nicht realisierbar sein. Aber anstelle derTextanzeige auf einem Bildschirm kann sicher ein Lesegert fr Blin-denschrift angeschlossen werden.

    Auf jeden Fall stehen wir hier am Beginn einer Entwicklung vonHTML hin zu einer immer feineren und festeren Vorgabe der Seite.Insbesondere die Werbeindustrie mchte gerne schn und gleichm-ig gestaltete Seiten erzielen.

    In den verschiedenen Version von HTML wurden immer mehr Mg-lichkeiten eingebaut, um genauere Formatierungen fr Browser zu er-reichen. Mit der Version 4.0 wurden dann aber auch Mglichkeitengeschaffen, diese Formatierungen wieder aus der HTML-Datei zu ent-fernen und extern zu verwalten. Aber das kommt noch. Fr den Mo-ment wollen wir mit unseren Beispielen der Entwicklung von HTMLfolgen.

    Im Standard zu HTML 4.0 werden alle Parameter und Anweisungenvon HTML als deprecated / nicht mehr erwnscht bezeichnet, dieFormatierungen exakt festlegen. Alle Formatierungen sollen in Zu-kunft getrennt von der eigentlichen HTML-Datei verwaltet werden.Sie werden dies im Kapitel ber die Stilvorlagen (CSS-cascading stylesheets) kennen lernen.

    Folgen wir trotzdem hier der historischen Entwicklung. Schlielichexistieren viele Millionen von Webseiten, die man nicht einfach berBord werfen kann. Auch zuknftige Browser werden die lterenWebseiten anzeigen mssen.

    5.6 HTML und FarbenDie -Anweisung kann noch einen weiteren Parameter verwen-den. Mit color kann man fr einen Text eine Farbe vorgeben. Die An-gabe der Farbe geschieht entweder mit einer Gruppe aus drei hexade-zimalen Werten oder einem Klartextnamen angeben.

    Die Klartextnamen sind englische Farbbezeichnung. Die Liste dergltigen Namen finden Sie im Anhang. Dort steht auch ein Beispielzur Berechnung der hexadezimalen Farbangaben.

  • +70/ XQG )DUEHQ 51

    5.6.1 Farbvorgaben fr die ganze Seite

    Im Browser knnen wir in den Optionen einstellen, welche Farbe frden Hintergrund normalerweise verwendet wird. Und auch, welcheFarbe fr die Schrift genommen, wird, damit mglichst ein kontrast-reiches Bild entsteht. Diese Angaben knnen wir auch in der HTML-Datei in der -Anweisung der Datei mitgeben.

    Die gleichen Farbvorgaben, wie in der -Anweisung, knnenbenutzt werden, um die gewnschten Farben anzugeben.

    Sehen wir uns die einzelnen Parameter an. Die Hintergrundfarbe istmit bgcolor einstellbar und die Farbe des normalen Textes mit text.

    Einige weitere Farbvorgaben fr werden wir uns im Kapitelber Verweise betrachten.

    Schreiben Sie eine HTML-Datei, die eine Reihe von farbigen Textenwie bei einem Regenbogen ausgibt.

    Der Hintergrund der Seite soll grnlich (greenyellow) sein. Die Stan-dardschriftfarbe setzen wir auf schwarz (black).

    Einige einfache Farbnamen sind: red, green, greenyellow, blue, brown,black, white, cyan, gray, pink. usw.

    Abbildung 5.5: Beispiel fr Farbdarstellungen

    L-EXP05: Regenbogentext

  • 52 .DSLWHO /RJLVFKH 7H[WIRUPDWLHUXQJHQ

    5.7 SchriftartenDie Farben sollten auf jedem modernen Rechner darstellbar sein.Und damit sind sie in den allermeisten Fllen kein Problem. Bedeu-tend schwieriger wird es, wenn wir den Parameter der -Anwei-sung nutzen, der uns ermglicht, eine bestimmte Schrift zu verwen-den.

    Schriften sind traditionell geistiges Eigentum und damit geschtzt.Auer wenigen allgemein bekannten Namen gibt es praktisch keinestandardisierte Bezeichnung fr Schriften. Und so finden Sie auf vie-len Rechnern Schriftnamen, die den Erfindungsreichtum ihrer Na-mensgeber gut dokumentieren.

    Man kann also kaum eine Schrift fr die Darstellung eines Textes vor-geben, die allgemein gltig ist.

    Der notgedrungen magere Ausweg aus dem Dilemma ist die Mglich-keit, eine Liste der gewnschten Schriften (jeweils durch ein Kommagetrennt) vorzugeben. Und wenn doch kein Name exakt gefundenwird, dann schaltet der Browser eben auf seine eigene Darstellungum.

    Zu den wenigen allgemeingltigen Schriftbegriffen gehren die Na-men serif, sans-serif und monospace.

    Im HTML-Standard wurden zustzlich cursive und fantasy genormt.

    Die Bezeichnungen beziehen sich auf die kleinen Hkchen (Verzei-hung: es muss Serifen heien), die insbesondere in den Schriften derZeitungen gern benutzt werden. Es hat sich gezeigt, dass Schriftenmit Serifen leichter zu lesen sind. Das menschliche Auge erkennt vielleichter Schriften, die deutliche graphische Unterschiede anbieten.Unsere Mischung aus Gro- und Kleinschreibung im Deutschen er-leichtert beispielsweise sehr das Lesen. Inzwischen nutzen insbeson-dere amerikanische Programmierer gerne die bessere Lesbarkeit dergemischten Schreibweise und fgen in viele Bezeichnungen am Wor-tanfang Grobuchstaben ein, auch wenn dies nach der blichen eng-lischen Grammatik nicht richtig ist.

    Der Begriff monospace ist das Gegenteil einer proportionalen Schrift.Eine Schrift, in der jeder Buchstabe die gleiche Breite besitzt, ist frGerte wie mobile Telefone oder einfache Bildschirme ideal. Ein wei-terer Ausdruck dafr, der an einer anderen Stelle verwendet wird, istteletype fr den Fernschreiber. Diese Gerte benutzten ebenfalls Zei-chen, die immer den gleichen Raum (oder Breite) verwendeten.

  • +70/6WUXNWXUHQ 53

    Die Begriffe cursive (dt. kursiv) und fantasy (dt. Erfindung) lassen sichnicht direkt mit einem Schriftbild in Verbindung bringen. Die Aus-wahl bleibt einmal mehr dem Browser berlassen.

    Der Parameter zur Angabe der Schriftarten ist face.

    Schreiben Sie eine HTML-Datei, die einigen Teiltexten verschiedeneSchriftarten zuweist. Nutzen Sie die Mglichkeit, lokale SchriftartenIhres Rechners vorzugeben. Schlieen Sie aber immer die Liste der je-weils gewnschten Schriftarten mit einer der fnf genannten Stan-dardschriftarten ab.

    Die Liste der vorhandenen Schriftarten zeigt Ihnen entweder einDienstprogramm des Betriebssystems oder die entsprechende Aus-wahlliste eines komfortablen Editors.

    Abbildung 5.6: Verschiedene Schriftarten

    5.8 HTML-StrukturenEinen Begriff werden wir noch gelegentlich bentigen, den wir anHand der berschriften gut vorstellen knnen. Es ist der Block. EinBlock hat die Eigenschaft, dass er immer am Anfang der Zeile mit derDarstellung beginnt. Eine berschrift bentigt keine explizite Zeilen-schaltung mit , um immer eine eigene, neue Zeile zu verwenden.

    L-EXP06: Schriftarten auswhlen

  • 54 .DSLWHO /RJLVFKH 7H[WIRUPDWLHUXQJHQ

    Schreiben Sie eine HTML-Datei, die eine einfache, wenn auch nichtbesonders logische Anordnung nutzt. Es sollen mehrere berschrif-ten nacheinander geschrieben werden ohne, dass Text dazwischensteht.

    Jede berschrift wird trotzdem eine eigene Zeile benutzen.

    Meist stellen Browser Blcke auch mit einem gewissen Abstand ober-halb und unterhalb dar. Im letzten Experiment kann es daher durch-aus passieren, dass die berschriften weit auseinander stehen.

    Abbildung 5.7: berschriften sind Blcke

    Im nchsten Kapitel

    Die logischen Auszeichnungen bieten eine Flle von Mglichkeiten.Aber einige wenige explizite Anweisungen brauchen wir doch noch.

    L-EXP07: Blcke in HTML

  • /|VXQJHQ 55

    5.9 LsungenL-EXP01: Auszeichnung von berschriften

    L-EXP01: HTML-Lernen

    Friedrich Schiller

    Die GlockeFest gemauert in der ErdenSteht die Form, aus Lehm gebrannt.Heute mu die Glocke werden,Frisch, Gesellen, seid zur Hand.Von der Stirne heiRinnen mu der Schwei,Soll das Werk den Meister loben,Doch der Segen kommt von oben.

    L-EXP02: Darstellung von berschriften

    L-EXP02: HTML-Lernen

    Die GlockeFest gemauert in der ErdenSteht die Form, aus Lehm gebrannt.Heute mu die Glocke werden,Frisch, Gesellen, seid zur Hand.Von der Stirne hei

  • 56 .DSLWHO /RJLVFKH 7H[WIRUPDWLHUXQJHQ

    L-EXP03: Arbeiten mit logischen Formatierungen

    L-EXP03: HTML-Lernen

    "Streng dich an. Versuche soviel Ausbildung wie mglich zu bekommen, und dann, um Himmels Willen, tu etwas." (blockquote) - Lee Iacocca Die GlockeFest gemauert in der ErdenSteht die Form, aus Lehm gebrannt. (code)Heute mu die Glocke werden, (address)Frisch, Gesellen, seid zur Hand.(em)Von der Stirne hei (strong)Rinnen mu der Schwei (small)Soll das Werk den Meister loben (big)Doch der Segen kommt von oben.

    L-EXP04: Setzen der Schriftgre

    L-EXP04: HTML-Lernen

    Die GlockeFest gemauert in der Erden (+4)Steht die Form, aus Lehm gebrannt. (+3)Heute mu die Glocke werden, (+2)Frisch, Gesellen, seid zur Hand.(+1)

  • /|VXQJHQ 57

    Zum Werke, das wir ernst bereiten...

    L-EXP05: Regenbogentext

    L-EXP05: HTML-Lernen

    Texte in verschiedenen Farben (nicht ganz der Regenbogen)

    Die Glocke

  • 58 .DSLWHO /RJLVFKH 7H[WIRUPDWLHUXQJHQ

    werden,(fantasy) Frisch, Gesellen, seidzur Hand.(monospace) Von der Stirne hei(arial) Rinnen mu der Schwei(helvetica,ver-dana,serif)Soll das Werk den Meister loben(courier,monospace) Dochder Segen kommt von oben.Zum Werke, das wir ernst bereiten...

    L-EXP07: Blcke in HTML

    L-EXP07: HTML-Lernen

    Die Glockevon SchillerErste Strophe Fest gemauert in der ErdenSteht die Form, aus Lehm gebrannt.Heute mu die Glocke werden, Frisch, Gesellen, seid zur Hand.Von der Stirne hei Rinnen mu der Schwei Soll das Werk den Meister loben Doch der Segen kommt von oben.Zum Werke, das wir ernst bereiten...

  • 59

    6 Explizite Formatierungen

    Einige Formatierungen, die direkt die Darstellung steuern, warenschon von Beginn an dabei. Manchmal muss der Autor Eigenschaf-ten genau vorgeben knnen. Ein Beispiel dafr sind Buchstaben, dieman hher oder tiefer stellen mchte.

    Gerade bei der Darstellung von Computerthemen will man bisweilenunterscheiden knnen, ob dies nun der erklrende Text oder eineEin- oder Ausgabe ist. Diese Daten, die der Computer generiert, wer-den oft in einem Zeichensatz dargestellt, dessen Zeichen gleiche Brei-ten haben. Im Gegensatz dazu wird dieser Text proportional gesetzt.

    Fr solche und hnliche Anwendungsfllen enthlt das klassischeHTML einige Anweisungen, um das Erscheinungsbild gezielt zu steu-ern.

    Zur bersicht hilft die folgende Tabelle:

    Tabelle 6.1: Explizite Formatierungen

    Anweisung Bedeutung

    ... (bold) Halb fette Anzeige

    ... (italics) Kursive Anzeige

    ... (teletype) Schrift mit fester Gre

    ... (underline) Unterstreichen

    ... (strikethrough) Durchstreichen

    .. (strikethrough) Durchstreichen (identisch zu )

    ... (superscript) Hoch stellen

    ... (subscript) Tief stellen

    ... (blink) Blinken

    ... (preformatted) Vorformatiert; respektiert einfa-che Formatierungen

  • 60 .DSLWHO ([SOL]LWH )RUPDWLHUXQJHQ

    Die Liste ist nicht allzu lang geworden. Bis auf die -Anwei-sung sind sie in vielen Fllen ntzliche Steuerungen, die die Darstel-lung von einfachen chemischen Formeln (z.B. H2O) oder auch vonmathematischen Ausdrcken (z.B. 42 = 16) erleichtern.

    Fr diese einfachen Formatierungen wollte man mglichst kurze An-weisungen benutzen. Daher hat man zustzlich zu auch eingefhrt.

    Aber sehen wir uns einmal ein praktische Anwendung im nchstenExperiment an.

    Im Experiment sollen mehrere Anweisungen auf die gleiche Text-stelle wirken. Dazu kann man nacheinander alle Attribute vorgeben,die der Text haben soll. Nach dem Text mssen die Anweisungen im-mer mit der Ende-Marke geschlossen werden. Dabei ist die Reihen-folge wichtig. Wie in der Mathematik mssen die zuletzt angegebe-nen Anweisungen zuerst wieder geschlossen werden.

    Auerdem darf natrlich keine Ende-Marke fehlen.

    Schreiben Sie eine HTML-Datei, in der die expliziten Formatierungeneinzeln und gemischt benutzt werden. Stellen Sie die beiden Beispiele zuchemischen Formeln und mathematischen Ausdrcken in HTML dar.

    Abbildung 6.1: Explizite Formatierungen

    P-EXP01: Gemischte explizite Formatierungen

  • 61

    Eine unglckliche Auszeichnung ist die -Anweisung. Ich weinicht, wie es Ihnen mit einer blinkenden Schrift ergeht. Eine Seite mitblinkenden Anzeigen macht mich ziemlich schnell nervs und ichverlasse diese Seite dann. Das gilt bei mir nicht nur fr blinkende Textesondern auch fr die oft hektischen Werbeeinblendungen. Vielleichtsollten Sie besser diese Art der Auszeichnung vermeiden.

    Eine besondere Rolle spielt die -Anweisung. Innerhalb dieserAnweisung wird die Formatierung durch den Browser abgeschaltet.Sowohl die normalen Zeilenschaltungen wie auch Leerzeichen blei-ben erhalten. Allerdings benutzt der Browser meist eine feste Schrift-art mit gleichen Breiten fr alle Zeichen, um den Eindruck zu erwe-cken, es wrde ein Computerausdruck angezeigt.

    Schreiben Sie eine HTML-Datei, in der eine Strophe eines Gedichtesvorkommt. Die Strophe soll innerhalb einer -Anweisung ste-hen. Experimentieren Sie mit Zeilenschaltung, Leerzeichen und Ta-bulatoren.

    Sehen Sie die Unterschiede in der Darstellung? Wie werden Zeilen-schaltungen, Leerzeichen und Tabulatoren nun behandelt?

    Abbildung 6.2: Vorformatierter Text

    P-EXP02: Anzeigen vorformatierter Texte

  • 62 .DSLWHO ([SOL]LWH )RUPDWLHUXQJHQ

    Mit der Liste der bisher bekannten Formatierungen knnen wir be-reits eine ganze Reihe von Informationsseiten schreiben und sie pu-blizieren. Im wissenschaftlichen Bereich wrden wir dabei vermut-lich auch Leser finden. Noch aber sind die Mglichkeiten zurGestaltung nicht ausreichend, um Texte fr alle zu erstellen. Dazubrauchen wir noch weitere Gestaltungselemente.

    Im nchsten Kapitel

    Viele Menschen sind durch die Qualitt der Schrifterzeugnisse ver-whnt. Ein gelernter Graphiker oder Buchdrucker ist wahrscheinlichoft entsetzt, wenn er die simplen Seiten von Gelegenheitspublizistenbetrachtet. Um wirklich schne Seiten zu erstellen, braucht es vielStilgefhl und einige technische Kenntnisse.

    Zu den technischen Kenntnissen kann Ihnen das Buch verhelfen mit der Gestaltung muss ich Sie als Leser auf die vielen guten Bei-spiele im WWW verweisen. Hoffentlich knnen Sie dort herausfin-den, welchen Stil Sie bevorzugen und dann mit den hier beschriebe-nen Mitteln auch in die Realitt umsetzen.

    Bis jetzt haben wir uns mit einzelnen Textstellen befasst. Nun wollenwir uns den greren Abschnitten zuwenden und Texte in Abstzeund Kapitel gliedern.

    6.1 LsungenP-EXP01: Gemischte explizite Formatierungen

    P-EXP01: Explizite Formatierungen

    Explizite Formatierungen in HTMLMit HTML beschreibt der Autor Wnsche zur Darstellung von Textpassa-gen.DieListe der expliziten Mglichkeiten ist nicht sehr weit gefat.Man

  • /|VXQJHQ 63

    merkt hier noch ein wenig, dass HTML ursprnglichals reines Text-Systementwickelt worden war.FormatierungenDie ist (Halb-) Fettdruck halb fettes WortSchrgschrift mit schrgem WortFestpunkt Sc