Sie spielen mit dem Gedanken, das stündlich wachsende virtuelle Weltdorf mit Ihrer eigenen Homepage zu bereichern? Nur zu, tun Sie sich keinen Zwang an. Die ständig fortschreitende Vernetzung der Computerwelt und die Dominanz des Computers in den meisten gesellschaftlichen Bereichen und Institutionen erfordert deren Vorhandensein, um Hans Maier und Frieda Kunze als gleichwertige Teilnehmer am 21. Jahrhundert neben bundesregierung.de, siemens.com und whitehouse.org wahrzunehmen. Aber wie soll ich vorgehen, wenn ich so etwas ins Auge fasse, fragen Sie sich jetzt.
Vor die Wahl gestellt, welcher Weg denn am besten zu einem eigenen Auftritt im Internet führt, stehen Ihnen zwei Alternativen zur Auswahl: Der Einsatz von herstellerspezifischen Anwenderprogrammen zur (vermeintlich) professionellen Erstellung von Webseiten, die in Hülle und Fülle von kostenlos bis sauteuer im virtuellen ebenso wie auf dem realen Markt kursieren und deren Angebot mittlerweile gänzlich unübersichtlich geworden ist, oder die Entscheidung für eine Programmiertechnik.
Eine Programmierkunst, die sich Ihnen garantiert als leicht erlernbar wie vielseitig einsetzbar erweisen wird, möchte ich Ihnen in diesem Buch vorstellen: HTML.
Als langjähriger, begeisterter Nutzer dieser Scriptsprache werde ich Ihnen in den folgenden Kapiteln meine Erfahrungen auf diesem Gebiet in einer möglichst kompakten und lehrreichen Form weitergeben, so dass auch Sie bald dem erlauchten Kreis der HTML-Programmierer zugehörig sein werden.
Auf ins Wunderland der Webgestaltung!

nach oben

Grundvoraussetzungen für HTML

Was ist denn das, HTML?

Hinter dem Akronym HTML verbirgt sich „HyperText Markup Language", das andeutet, dass HTML eine sog. Auszeichnungssprache (Markup Language) ist. Sie enthält logisch nachvollziehbar den Aufbau einer Webseite. In einer einzigen HTML-Datei sind alle in der jeweiligen Seite enthaltenen Farben, Hintergrundbilder, Überschriften usw. definiert. Ein Browser übernimmt schließlich die Aufgabe, diesen Inhalt optisch wiederzugeben, d. h. den Code in Text, Bilder und Musik umzuwandeln.
Kennzeichnend für HTML ist die enorme Anpassungsfähigkeit bei der Anfertigung von Dateien. Eine propietäre Software ist zur Erstellung von Dateien diesen Formats nicht notwendig. HTML-Dateien können mit jedem beliebigen Texteditor erstellt und bearbeitet werden, der die Endung .htm erlaubt.

<html>

<head>

<title>Text des Titels</title>

</head>

<body>

Eigentlicher, im Browser letztlich sichtbarer Teil der Seite. Enthält Bilder, Sounddateien, Text, Verweise, Grafiken etc.

</body>

</html>

nach oben

Eine HTML-Datei gliedert sich grundsätzlich in zwei große Bestandteile:

Die Struktur des Grundgerüstes

Header (Kopf):

er enthält Informationen zum Titel und umfasst den kompletten Bereich vom Tag <html> bis zum Tag </head>

Body (Körper):

er reicht von <body> bis </html>. Die in diesem Bestandteil notierten Informationen werden im Browser schließlich sichtbar

Das im oberen grauen Kasten abgebildete Grundgerüst gibt den prinzipiellen Aufbau einer jeden HTML-Datei mit dem Mindestmaß an all jenen Komponenten wieder, die vorhanden sein müssen, damit ein Programminhalt vom Browser interpretiert werden kann. Ganz gleich, ob unsere Datei einen Text, eine Graphik oder eine Klangwiedergabe enthält. Schnurzpiepe also, ob man sich die neuesten Weltsensationen der Bild-Zeitung hereinzieht, den letzten Kindergeburtstag anhand der schönen Bilder Revue passieren lässt oder sich mit Beethovens Mondscheinsonate einem Musikgenuss hingibt.
Die rothervorgehobenen Bestandteile werden Tags genannt und durch spitze Klammern markiert. Wenn Sie Ihr Werk nach vollendeter Programmierung im Browser betrachten wollen, und Sie nur der HTML-Code angrinst, ist dies ein sicheres Indiz dafür, dass an irgendeiner Stelle eine solche nicht notiert wurde, oder aber die Platzierung eines anderen wichtigen Bestandteils schlicht vergessen wurde.
Es ist keine programmiertechnische Notwendigkeit, die einzelnen Tags, wie in unserer Darstellung gezeigt, untereinander zu notieren. Sie können diese theoretisch auch einzeln aneinanderfügen und wie einen unendlichen Bandwurm fortlaufen lassen. Der Übersichtlichkeit halber ist es jedoch üblich, die Befehlsfolge untereinander zu notieren. Dies hat auch den Vorteil, dass bei einem eventuellen Aufkommen eines Programmierfehlers dieser sehr viel schneller entdeckt und behoben werden kann.

ACHTUNG:

Jeder von nun an neu behandelte Tag wird rot dargestellt, um ihn von den anderen, schon bekannten Tags hervorzuheben.

Der gesamte Inhalt einer HTML-Datei wird in die Tags <html> und </html> eingebettet, die ganz am Anfang bzw. zum Schluss einer solchen HTML-Datei platziert sind. Dieses Vorgehen findet bei jedem HTML-Projekt seine Anwendung.
Gleich hinter dem einleitenden <html>-Tag folgt der <head>-Tag. Zwischen ihm und seinem schließenden </head>-Gegenstück werden die notwendigen Informationen zur Datei notiert.
Dies sind insbesondere die Tags <title> und </title>. Innerhalb dieser beiden Tags wird der Titel des HTML-Dokuments vergeben, der dann im Browser links oben für den Betrachter der Seite sichtbar wird. Um eine korrekte Ausführung des Programms zu garantieren, ist es zwar nicht unbedingt erforderlich, einen Titel zu vergeben. Eine Vergabe hat allerdings noch andere Vorteile, als den, dass sich der Betrachter anhand der Titelvergabe eine erste Vorstellung vom Inhalt machen kann, denn der Browser greift auf den Titel der Datei zu, wenn er ein Lesezeichen auf die Datei verwendet. Darüber hinaus wird der Dateititel vom Browser in der Liste der bereits besuchten Seiten angezeigt, was für den Besucher eines Internet-Auftritts ein komfortables Hin- und Hernavigieren ermöglicht
Stichwort Suchmaschine: Der Titel einer Datei kann von den inzwischen massenhaft im Internet kursierenden Suchmaschinen als wichtiger Input dienen. Zwischen den Tags <body> und dessen Gegenstück </body> sind jene Informationen enthalten, die sich nach Abschluss der Seitenerstellung im Anzeigefenster des Browsers finden, z. B. die definierte Hintergrundfarbe, Verlinkungen auf andere Webseiten oder Überschriften.
Haben Sie die Konstruktion einer Datei vollständig abgeschlossen, speichern Sie diese immer mit der Endung .htm, z. B. index.htm, wenn es sich um die erste Datei des noch zu komplettierenden Internetauftritts handelt. Es liegt in der Natur der Sache, diejenige HTML-Datei, die sich dem späteren Besucher des Web-Auftritts zuerst öffnet, mit index.htm zu firmieren. Damit wird dem Server signalisiert, dass diese Datei den Ausgangspunkt des weiteren Internet-Angebots eines Unternehmens, einer Behörde oder von wem auch immer darstellt.
Überdenken Sie bei der Namensvergabe auch die Akzeptanz der Namensgebung des Servers, auf dem Sie Ihre fertigen Daten aufspielen werden. Die meisten Server basieren auf Unix-Systemen, die Dateinamen von bis zu 256 Zeichen Länge erlauben. Tunlichst vermeiden sollten Sie deutsche Sonderzeichen, wie Umlaute oder scharfes „ß“ im Dateinamen. Als Sonderzeichen ist der Unterstrich „_“ hingegen in jedem Falle erlaubt. Fragezeichen “?“ und Stern „*“ sind tabu, da diesen Zeichen von nahezu jedem Server-System eine gänzlich andere Bedeutung als die beabsichtigte beigemessen wird. Das Leerzeichen hat bei der Benennung ebenfalls nichts zu suchen.
Wenn Sie nun voller Stolz ob des gelungenen Ergebnisses diesen Schritt vollzogen haben, tun Sie sich und dem künftigen Betrachter Ihrer Homepage doch bitte den Gefallen und testen mehr als nur einen WWW-Browser, um zu sehen, ob die Datei von allen Browsern auch wirklich richtig interpretiert wird. Sollten Sie die Möglichkeit haben, verwenden Sie vom Microsoft Internet Explorer wie vom Netscape Navigator durchaus mehrere Versionen, aber auch andere Produkte wie den Mozilla Firefox oder Opera.

Was ist sonst noch wichtig bei der Erstellung einer HTML-Datei im Text-Editor?

Wer sich wie ich entschließt, in einem MSWindows-basierten System den HTML-Code in den Programmen „Editor“ oder „WordPad“ zu kreieren, sollte folgendes beachten:

Im „WordPad“ muss nach dem Abschluss der Programmerstellung bei Vergabe des Dateinamens der Menüpunkt „Datei“, gefolgt von „Speichern unter“ gewählt werden und bei der Benennung des Dateityps „Textdokumente“ angeklickt werden.

Der daraufhin folgende Warnhinweis darf bedenkenlos ignoriert werden. Er will uns lediglich sagen, dass Formatierungen (Schriftgröße, Schriftart..) nicht mit abgespeichert werden. Da diese in HTML ohnehin durch entsprechende Tags realisiert werden, ist dies ohne Bedeutung für uns. Deshalb: Klicken Sie auf „Ja“.

Warnhinweis

Im „Editor“ gilt die selbe Vorgehensweise. Für diese beiden Editoren und alle anderen gilt darüber hinaus: Bei Erstellung einer neuen Datei immer zuerst das Grundgerüst (siehe S.3) einfügen

Richten Sie Zeilenumbrüche und Leerzeilen so ein, dass Sie im Quelltext der Datei eine optimale und somit den Erfolg fördernde Übersicht behalten. Bitte beachten Sie, dass WWW-Browser Zeilenumbrüche und Absätze im Editor ignorieren. Für Zeilenumbrüche und Absätze werden spezielle HTML-Tags benötigt.

Auch werden keine Tabulatoren vom Browser interpretiert Mehrere Leerzeichen hintereinander werden von den Browsern ebenfalls nicht wahrgenommen. Um Leerzeichen zu erreichen, wird die Zeichenfolge  

eingesetzt. Diese Zeichenfolge wird pro gewünschtem Leerzeichen jeweils einmal eingegeben.

Sollten Sie sich aber entgegen meiner Vorgehensweise dazu entscheiden, Ihren Auftritt nur für einen ganz bestimmten Browser zu schreiben, so verwenden Sie einen entsprechenden Hinweis darauf, dass Ihre Seiten in anderen als den von Ihnen präferierten Browsern nicht oder nur eingeschränkt dargestellt werden können.

Die erste Seite

Brechen wir auf zum ersten HTML-Dokument! Für die Abfassung ist es dabei, wie gesagt, völlig ausreichend, irgendeinen Texteditor oder ein x-beliebiges Textverarbeitungsprogramm zu bemühen. Das auf Seite 3 gezeigte Schema wird haargenau so eingegeben. Sie können anstelle von „Text des Titels” auch irgendeine andere Überschrift einsetzen. Der in unserem Beispiel ausgefüllte Raum zwischen <body> und </body> lassen wir jedoch für unser Beispielprogramm völlig leer.

Abbildung: Noch ziemlich öde präsentiert sich unsere erste Seite. Dass "Unsere erste Seite" – oder wie auch immer die Titelvergabe heißen mag - der Name des ersten Werkes ist, wird links oben in der Titelzeile des Anzeigenfensters aber schon erkannt...

nach oben

Was noch interessant sein könnte...

...beim Aufbau Ihrer virtuellen Visitenkarte, will ich Ihnen als angehenden HTML- Programmierer in den folgenden Zeilen veranschaulichen. Um nicht gleich Angst und Schrecken zu verbreiten: Was ich in diesem Kapitel an Sie herantrage, sind nicht essentielle Bausteine einer Homepage, ohne die die Existenz Ihres Werkes nicht denkbar wäre. Vielmehr kommen diverse Einzelheiten zur Sprache, die für den Verfasser einer Homepage eine je nach Standpunkt mehr oder weniger unabdingbare Rolle spielen.

Kommentare - wozu das?

Geht es Ihnen manchmal auch so? Da hat man noch vor Kurzem eine Notiz zu irgendeiner Begebenheit niedergeschrieben, und weiß nun nicht mehr um deren Bedeutung. HTML hat für derartige Eventualitäten vorgesorgt. Einen Kommentar in einem HTML-Dokument einzufügen erweist sich nämlich dann als besonders sinnvoll, wenn interne Anmerkungen zu einer bestimmten Stelle im Text das Verständnis für diesen erweitern oder wieder ins Gedächtnis rufen sollen. Vorhandene HTML-Tags können auf diese Weise ebenso kommentiert werden. Ein solcher Kommentar dient dem Verfasser zur Orientierung, wird im Browserfenster jedoch nicht sichtbar.

Beispiel:

<h6>Da schau her!</h6>

Der Kommentar kann an einer frei wählbaren Stelle der Datei eingefügt werden. Die Zeichenfolge <!-- leitet ihn ein. Dabei sollte beachtet werden, dass bereits die Zeichen -- zum Kommentar gehören. Sollten Sie zwecks besserer Hervorhebung des Kommentars Sonderzeichen verwenden wollen, dürfen keine Minuszeichen in Betracht gezogen werden. Sie als Autor können gleich dahinter einen Kommentar von x-beliebiger Länge einfügen. Innerhalb des Kommentartextes dürfen auch HTML-Elemente notiert werden. Alles, was zwischen der einleitenden Zeichenfolge <!-- und der beendenden Zeichenfolge - -> steht, wird bei der Anzeige im Browser nicht sichtbar.

Einen SGML-gerechter Datentyp verifizieren

Weltweit werden nach Schätzungen von Linguisten etwa 6500 Sprachen gesprochen, etwa drei Mal so viele Dialekte virulieren. Das macht die Existenz eines vermittelnden Mediums notwendig, um mit diesem babylonischen Sprachwirrwarr und den daraus resultierenden Besonderheiten umzugehen.

SGML (StandardGeneralized Markup Language) ist dieses Medium. Bei SGML handelt es sich um eine Metasprache, die der HTML-Sprache übergeordnet ist, und durch deren Hilfe es möglich wird, die unterschiedlichen HTML-Versionen zu definieren.Diese Spezifikationen werden Document Type Definitions (DTD) genannt.

Die Anweisung zur Angabe der gegenwärtig verwendeten HTML-Version wird immer am Anfang eines HTML-Dokuments platziert, noch vor dem der Datei vorangestellten <html>-Tag. Unmittelbar hinter der ersten spitzen Klammer folgt ein Ausrufezeichen!. Ohne ein Leerzeichen wird direkt dahinter die Angabe DOCTYPE HTML PUBLIC platziert. Damit machen Sie deutlich, dass Sie sich auf eine öffentlich zugängliche HTML-DTD beziehen. Die nun folgende Angabe, die durch ein Leerzeichen von der DOCTYPE-Angabe getrennt ist und in Anführungszeichen gestaltet wird, hat folgende Bedeutung: W3C ist das Konsortium, dem die Aufgabe zufällt, die das World Wide Web betreffenden Techniken zu standardisieren. Die Angabe DTD HTML besagt, dass in der Datei der SGML-Dokumenttyp HTML verwendet wird, durch ein Leerzeichen gefolgt von der Angabe der Versionsnummer, im unten gewählten Beispiel 4.0. Das Kürzel EN ist die entsprechende Länderkennung und steht für die jeweils verwendete Sprache, in diesem Falle also Englisch. Allerdings bezieht sich diese Angabe ausschließlich darauf, in welcher Sprache die Tags verfasst sind, und nicht auf den übrigen Inhalt. Daher gilt: Immer EN einsetzen, da die Tags auf der englischen Sprache basieren. Nach Abschluss dieser Prozedur wird die Internet-Adresse der jeweils betreffenden DTD in Anführungszeichen angegeben.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN” “http://www.w3.org/TR/REC-html40/strict.dtd”>

<html>

<head>

<title>Text des Titels</title>

</head>

<body>

Eigentlicher, im Browser letztlich sichtbarer Teil der Seite. Enthält Bilder, Sounddateien, Text, Verweise, Grafiken etc.

</body>

</html>

nach oben

Meta...Meta...ach ja, Meta-Angaben

Meta. Dieses Wort ist uns doch schon irgendwo begegnet. Ja, richtig, gerade eben, als wir feststellten, dass es sich bei SGML um eine Meta-Sprache handelt.

Metadaten sind diejenigen Daten, die Informationen über Dokumente wie Bücher, Datenbanken oder auch Dateien preisgeben. Auch die angegebenen Eigenschaften eines Objektes werden als Metadaten bezeichnet. Typische Metadaten, die beispielsweise einem Buch zu entnehmen sind, sind der Name des Verfassers, die Auflage, das Datum der Erstauflage, der Verlag und natürlich die ISBN-Nummer.

Meta-Tags haben die Aufgabe, die Durchsuchbarkeit des WWW zu verbessern. Meta-Tags lassen darüber hinaus gezielte Anweisungen zur Steuerung von Suchmaschinen, z. B. Google, zu. Eine höhere Bekanntheit der mit diesen Tags ausgestatteten Homepages ist das Ziel eines jeden ambitionierten HTML-Programmierers.

Die Welt von HTML kennt eine Vielzahl von unterschiedlichen Metadaten-Schemata, die entweder von einem Personenkreis innerhalb eines Gremiums erarbeitet worden sind (um mit dem „Dublin Core“ eines der bekanntesten zu nennen), teils aber auch – die anarchische Struktur des Internet macht’s möglich – wild gewachsen sind. Doch nur die wenigsten dieser Meta-Angaben kommen in den Genuss, von den gängigen Browsern und Suchmaschinen auch interpretiert zu werden.

<html>

<head>

<title>Text des Titels</title>

< !-- … weitere Angaben … à

</head>

<body>

Eigentlicher, im Browser letztlich sichtbarer Teil der Seite. Enthält Bilder, Sounddateien, Text, Verweise, Grafiken etc.

</body>

</html>

Die Meta-Angabe folgt ohne Leerzeichen auf eine spitze Klammer <. Jeder Meta- Tag wird dann in der Regel mit zwei Attributen versehen. Das erste Attribut lautet entweder name oder http-equiv, das andere wird stets content bezeichnet. Diese beiden Attribute ermöglichen die Erzeugung der Konfigurationsdaten des Typs „Eigenschaft=Wert“. In unserem oben gezeigten Beispiel wird mit name eine Eigenschaft „writer“ angegeben, der ihrerseits mit content ein Wert „Matthias Kaiser“ zugewiesen wird. In der darunter stehenden Zeile folgt auf die Eigenschaft „expires“ durch ein Leerzeichen getrennt content=. Dem wird ein Wert, im gewählten Beispiel „Sat, 09 Dec 2008 00:00:00 GMT“, zugewiesen.

Mit solchen Meta-Angaben wird leider jede Menge Unfug betrieben. Dadurch, dass diese Angaben nicht unmittelbar am Bildschirm des Betrachters ersichtlich sind, andererseits aber in den Sog der Suchmaschinen geraten, erstrahlt die Phantasie einiger Homepage-Bastler nicht selten in seltsamen Blüten. Diese meinen, ihrem Internet-Auftritt mittels eines riesigen Wulsts an hereingepackten Meta-Angaben auf einem Schlag zu unbegrenztem Ruhm verhelfen zu können, da dieser nun ganz oben in der Trefferanzahl erscheint. Den Verantwortlichen der illustren Suchmaschinen-Gesellschaft ist dieses Problem aber mittlerweile zu Bewusstsein gekommen und sie haben entsprechend reagiert, indem nicht mehr den Meta-Angaben, sondern dem jeweiligen Inhalt einer Homepage die gebührende Relevanz erwiesen wird.

Um Missverständnissen vorzubeugen: Eine gut gemachte Homepage zeichnet sich selbstverständlich durch einen vernünftigen Einsatz von Meta-Elementen aus, eine Übertreibung führt jedoch sehr schnell – und zu Recht – in die Schmuddelecke.

Als Verfasser Ihrer Seite ist Ihnen in erster Linie wohl daran gelegen, neben der Autorenschaft die für das fertige Werk charakteristischen Stichworte auf allen relevanten HTML-Dokumenten zu hinterlassen.

Die im unteren Beispiel verwendeten Tags erklären haben folgende Bedeutung:

Mit <meta name=“description“ content=“Text“> wird ein Beschreibungstext definiert.

Die Tag-Folge <meta name=“author“ content=“Verfassername“> teilt den Namen des Programierers mit.

Mit Hilfe der Tags <meta name=”keywords” content=”Stichwörter”> wird ein Suchprogramm veranlasst, gezielt nach Seiten mit den aufgelisteten Stichwörtern zu suchen. Der Programmierer will erreichen, dass seine Seite bei den aufgelisteten Treffern an möglichst vorderer Stelle angezeigt wird.

<html>

<head>

<title>Text des Titels</title>

Homepage behilflich sein.“>

< !-- … Platz für weitere Angaben im Kopf ... -- >

</head>

<body>

Eigentlicher, im Browser letztlich sichtbarer Teil der Seite. Enthält Bilder, Sounddateien, Text, Verweise, Grafiken etc.

</body>

</html>

Mehrsprachige Meta-Angaben

Es besteht die Möglichkeit, bei der Angabe von Meta-Tags zwischen unterschiedlichen Sprachen zu differenzieren. Es sind vor allem Stichwörter und Beschreibungen des Inhalts, die mehrsprachig angegeben werden können.

In unserem Beispiel werden dieselben Stichwörter in den Sprachen Deutsch, Englisch und Französisch definiert. Dies geschieht unter Verwendung des Attributs lang (=language), um die Sprache anzugeben. Als Angabe wird ein Sprachenkürzel benutzt, z.B. de für deutsch, en für englisch, fr für französisch.

<html>

<head>

<title>Text des Titels</title>

</head>

<body>

Eigentlicher, im Browser letztlich sichtbarer Teil der Seite. Enthält Bilder, Sounddateien, Text, Verweise, Grafiken etc.

</body>

</html>

Metadaten-Profil in separater Datei

Neben dem bereits gezeigten Weg kann auch ein externes Metadaten-Profil angelegt werden. In solchen Fällen kann es sich um bekannte Profile handeln, die auf bestimmten Internet-Adressen basieren. Das bereits angesprochene Dublin Core stellt einen solchen Fall dar. Natürlich besteht auch die Möglichkeit, ein eigenes Profil mit eigenen Meta-Definitionen anzugeben.

Beispiel:

<html>

</head>

<body>

Eigentlicher, im Browser letztlich sichtbarer Teil der Seite. Enthält Bilder, Sounddateien, Text, Verweise, Grafiken etc.

</body>

</html>

Im obigen Beispiel wird nach dem einleitenden head-Tag das Attribut profile gesetzt, dem nach dem Gleichheitszeichen eine URL folgt, unter deren Adresse die gewünschte Profildatei abgelegt ist. Welches Aussehen eine solche Datei haben muss, ist nicht vorgeschrieben, es ist jedoch üblich, eine HTML-Datei anzugeben, in der die Meta-Eigenschaften in tabellarischer Form aufgelistet und definiert sind.

nach oben

Die Angabe von Meta-Daten nach dem Dublin Core Media Data

Dublin. Fällt dieser Städtename, denken Sie wohl zuallererst an James Joyce oder lassen sich gedankenversonnen in die urigen Pubs der irischen Kapitale entführen. Doch zollen wir unserem Lerneifer wieder Tribut und lassen die Grüne Insel hinter uns, um weiterhin zu garantieren, dass HTML sehr bald unser treuer Begleiter sein wird.
Und doch werden wir uns in Dublin aufhalten, gilt es doch, eine Begrifflichkeit zu klären. Dabei muss ich Sie zunächst einmal darüber unterrichten, dass mit Dublin im folgenden nicht etwa Joyce´ Wirkungsstätte, sondern eine im US-Bundesstaat Ohio gelegene Kleinstadt gemeint ist.
Als es Mitte der neunziger Jahre darum ging, sich eingehender mit Fragen der Informationsbeschreibung zu befassen, beschlossen 1994 einige Teilnehmer einer WWW-Konferenz in Chicago, eine Tagung zu diesem Thema anzuberaumen. Als Austragungsort wurde die Stadt Dublin in Ohio bestimmt. Dort angekommen vereinigten sich die etwa 50 Teilnehmer zur Dublin Core Metadata Initiative (DCMI).
Ergebnis dieses Treffens war die Entwicklung eines allgemein gültigen Systems für Meta-Angaben mit dem sich nicht nur Informationen über HTML-Dokumente ausdrücken lassen, sondern darüber hinaus auch die Beschreibung von Bildern, Filmen oder physischen Gegenständen zugelassen wird.
Gegenstand der Dublin Core Metadata Initiative sind 15 wesentliche Elemente, denen bestimmte Werte zugeordnet werden. Aufgabe dieser Unterelemente ist es, speziellere Meta-Angaben zuzulassen.
Bei der Definition wird der Elementname im name -Attribut des Meta-Tags untergebracht, der zugehörige Wert findet sich wie gewohnt im content-Attribut. Alternativ dazu können Sie im scheme-Attribut das Datenformat angeben, dem der Wert entspricht.

Erläuterung:

Bei allen Meta-Angaben, die einem bestimmten öffentlichen System angehören, z. B. dem Dublin Core, wird dem Namen einer Meta-Angabe eine Kurzbezeichnung für das System vorangestellt. Bei den 15 Dublin Core-Elementen lautet dieses Präfix DC, bei den Unterelementen und den Schemata muss DCTERMS notiert werden. Dahinter folgt, durch einen Punkt getrennt, der Elementname beziehungsweise die Bezeichnung des Datenformates. Damit eindeutig erkennbar wird, dass alle Meta- Angaben mit diesem Präfix zum Dublin-Core-System gehören, wird mittels link- Verweisen auf die sogenannten Namensräume für Dublin Core verwiesen.

<meta name="DC.title" content="Titel"> gibt den Titel für die Datei an. Diese Deklaration ist mit dem title-Element von HTML (title = Titel) vergleichbar.

Mit <meta name="DC.creator" content="Name"> (Creator = Ersteller) wird der geistige Urheber des Inhalts der Datei benannt.

Die Tag-Folge <meta name="DC.subject" content="Text"> (Subject = Thema) bezeichnet das Thema, das in der Datei behandelt wird.

Eine kurze Beschreibung des Inhalts der Datei wird mit <meta name="DC.description" content="Text"> (Description = Beschreibung) angegeben.

Die Verantwortlichen für die Publikation der Datei können mit <meta name="DC.publisher" content="Name"> (Publisher = Veröffentlicher) benannt werden.

Mit <meta name="DC.contributor" content="Name"> (Contributor = Beitragender) können eventuelle Co-Autoren angegeben werden, die neben dem Hauptautor am Inhalt mitgewirkt haben, wie z.B. Grafiker. Waren mehrere Co-Autoren beteiligt, notieren Sie eben mehrere Meta-Tags mit name="DC.contributor".

<meta name="DC.date" content="Datum"> (Date = Datum) offenbart das Publikationsdatum der Datei.

Mit <meta name="DC.type" content="Typ"> kann der Typ des Inhalts angeben werden, über den Meta-Angaben gemacht wurden. Folgende Typen sind erlaubt:

Collection = wenn der Inhalt ein Verzeichnis mit Verweisen zu Unterseiten ist und die Meta-Angaben das Verzeichnis als solches beschreiben.
Dataset = wenn die enthaltene Information in Datensatz-Form vorliegt, z.B. eine Tabelle.
Event = wenn der Inhalt für ein bestimmtes Ereignis steht, z.B. eine Konferenz oder eine Hochzeitsfeier.
Image = falls der Inhalt in visueller Gestalt vorliegt, z.B. ein Foto. InteractiveResource = sofern eine Interaktion mit dem Anwender hergestellt werden soll, z.B. wenn es sich um ein Formular handelt, dass online ausgefüllt werden kann.
PhysicalObject = beschreibt den Inhalt der Seite um einen physischen Gegenstand. Diesen Typ zu notieren ist sinnlos, da ein solches Vorgehen bei einer HTML-Datei unmöglich ist.

Service = falls diese Seite eine Dienstleistung anbietet, z.B. Online-Banking.
Software = wenn Software angeboten, z.B. als Download.

Sound = sofern der Inhalt akustisch herüberkommt, z.B. ein Musikstück im MP3-Format.
Text = wenn der Inhalt textorientiert ist – ganz gleich, welches Text-Genre bedient werden soll.

Um unmissverständlic hklarzustellen, dass Sie einen dieser vordefinierten Typen verwenden, notieren Sie das Attribut scheme="DCTERMS.DCMIType".

Mit <meta name="DC.format" content="Typ"> wird das Datenformat bzw. der Medientyp der Datei verifiziert. Als Wert können Sie einen MIME-Typ angeben. Der MIME-Typ für HTML lautet text/html. Mit dem Attribut scheme="DCTERMS.IMT" verdeutlichen Sie, dass es sich bei der Angabe um einen Medientyp nach dem offiziellen Schema handelt.

Mit <meta name="DC.identifier" content="Wert"> (identifier = eindeutiger Bezeichner) wird die Bezugsadresse für die entsprechende Datei angeben. Mit dem Zusatz scheme="DCTERMS.URI" verdeutlichen Sie, dass der Wert ein gültiger URI ist.

Die Quelle, von der die aktuelle Seite bezogen wird, wird mit <meta name="DC.source" content="Quelle"> (source = Quelle) angegeben. Das untere Beispiel bediente sich hierbei einer Webseite. Es ist aber auch möglich, den Titel einer anderen Publikation nennen. Ist eine URI die Quelle, heben Sie dies mit dem Attribut scheme="DCTERMS.URI" hervor.

Mit <meta name="DC.language" content="Sprache"> (language = Sprache) können Sie die Sprache des Dateiinhalts angeben.

Der Tag <meta name="DC.relation" content="Quelle"> (Relation = Bezug) gibt an, welche Beziehung zwischen der Datei und einem zugehörigen Editionsprojekt besteht. Der Wert bei content kann z.B. eine verbale Beschreibung über die Art des Bezugs sein.

<meta name="DC.coverage" content="Text"> (coverage = Erfassung, Berichterstattung) benennt einen zeitlichen oder geografischen Kontext unserer Datei. In geografischer Hinsicht kann es sich um einen Ort, eine Angabe des Längengrads handeln, bei zeitlichen Angaben ein Datum.

Angaben zum Copyright unserer Datei werden mit <meta name="DC.rights" content="Text"> (rights = Rechte) gemacht.

Es müssen nicht samt und sonders alle Meta-Angaben des Dublin-Core-Satzes verwendet werden. Es sollen nur Angaben notiert werden, die Ihnen als Verfasser sinnvoll erscheinen. Das scheme-Attribut ist nicht unabdingbar, aber sehr zu empfehlen, wenn ein entsprechendes Schema existiert.

Wie ich Ihnen bereits verdeutlicht habe, werden Meta-Angaben von den Suchmaschinen mittlerweile ignoriert. Dass dies auf den Missbrauch zurückzuführen ist, der mit diesem Instrument in der Vergangenheit getrieben wurde, ist Ihnen inzwischen ja bekannt. Der Sinn der Dublin-Core-Metadaten ist daher in den Bereichen zu sehen, wo verarbeitende Programme Metadaten noch als vertrauenswürdig einstufen. Dublin-Core-Metadaten sind daher vor allem für die interne Verwaltung eines Unternehmens oder einer Behörde oder etwa für seiteninterne Suchfunktionen geeignet.

<html>

<head>

</head>

<body>

Eigentlicher, im Browser letztlich sichtbarer Teil der Seite. Enthält Bilder, Sounddateien, Text, Verweise, Grafiken etc.

</body>

</html>

nach oben

Adressbasis

Als HTML-Programmierer haben Sie die Möglichkeit, innerhalb einer HTML-Datei erneut deren eindeutige, im Web genau verifizierbare URL zu notieren. Der Vorteil besteht darin, dass der die Datei lesende Browser in Problemsituationen besser auf verknüpfte Dateien zugreifen kann.

Beispiel:

<html>

<head>

<!-- … weitere Angaben im Kopf der Datei … -- >

</head>

<body>

Eigentlicher, im Browser letztlich sichtbarer Teil der Seite. Enthält Bilder, Sounddateien, Text, Verweise, Grafiken etc.

</body>

</html>

Dem <head>-Tag folgt in der nächsten Zeile mit der einleitenden spitzen Klammer <base href=“gefolgt von der korrekten URL der Datei. Der Tag wird wie üblich mit einer spitzen Klammer > abgeschlossen.

nach oben

Zielfensterbasis

Eine solche Angabe ist vor allem in Verbindung mit Frames sinnvoll, mit denen es möglich wird, den Anzeigebereich des Browsers in verschiedene, frei definierbare Segmente aufzuteilen und auf die in einem späteren Kapitel noch die Rede sein wird.

Sie können für eine HTML-Datei, die innerhalb eines Framesets in einem Frame- Fenster angezeigt wird, bestimmen, dass alle Verweise dieser Datei in einem bestimmten Frame-Fenster angezeigt werden, solange bei einem Verweis kein anderes Frame-Fenster angegeben wird. Da er sehr oft vorkommt, dass alle Verweisziele einer Datei in einem ganz bestimmten vorbestimmten Fenster angezeigt werden sollen, spart diese einmalige Angabe im Dateikopf enorm viel Tipparbeit und leistet auch einen Beitrag zur Herabsetzung des Dateiumfangs.

<html>

<head>

<!-- … weitere Angaben im Kopf der Datei … -- >

</head>

<body>

Eigentlicher, im Browser letztlich sichtbarer Teil der Seite. Enthält Bilder, Sounddateien, Text, Verweise, Grafiken etc.

</body>

</html>

Nach dem <head>-Tag wird mit <base target=...> das Default-Fenster festgelegt, in dem die Verweisziele schlussendlich angezeigt werden sollen; im oben genannten Beispiel legen wir fest, dass es sich um das Fenster auf der rechten Seite des Bildschirms handelt. Voraussetzung ist allerdings, dass ein Framset mit Frame- Fenstern definiert wurde. Beim gewünschten Frame-Fenster muss mit dem Attribut name der Fensternamen vergeben werden, der in unserem Beispiel bei <base target=...> angegeben wurde.

nach oben

Umlaute und Sonderzeichen

Der Buchstabe ä wird durch diese Zeichenfolge ersetzt: ä

Der Buchstabe Ä wird durch diese Zeichenfolge ersetzt: Ä

Der Buchstabe ö wird durch diese Zeichenfolge ersetzt: ö

Der Buchstabe Ö wird durch diese Zeichenfolge ersetzt: Ö

Der Buchstabe ü wird durch diese Zeichenfolge ersetzt: ü

Der Buchstabe Ü wird durch diese Zeichenfolge ersetzt: Ü

Der Buchstabe ß wird durch diese Zeichenfolge ersetzt: ß

Der vorangegangene Abschnitt hat uns schon gelehrt: Die sprachliche Vielfalt der Menschheit hat im Verlauf der Geschichte auch in der Schrift ihre Spuren hinterlassen. Die deutsche Sprache macht da mit ihren Umlauten keine Ausnahme. Ä, Ö, Ü und nicht zuletzt ß sind den übrigen Sprachen nicht bekannt. Aus diesem Grund hat das W3C-Konsortium für diesen sprachlichen Sonderfall eigens dafür vorgesehene HTML-Zeichenfolgen eingeführt.

Die meisten Browser sind mittlerweile jedoch in der Lage, diese Umlaute und Sonderzeichen korrekt darzustellen, auch wenn eine Maskierung derselben nicht vorausgegangen ist. Das ist dem Umstand geschuldet, dass der Browser, wenn er auf die Sonderzeichen trifft, auf den Zeichensatz zugreift, der von Ihrem Rechner verwendet wird. Soll eine solche Datei hingegen auf einem Rechner angezeigt werden, der einen völlig anderen Datensatz zugrunde legt, werden die betreffenden Wörter verunstaltet.

Beispiel:

Ein Männchen sieht ein Röschen im Gräschen blühn.

Er muss es sofort ausrei&szligen.

Abbildung: Ein Männchen mit dem Röschen...

Warum müssen HTML-spezifische Zeichen maskiert werden?

Sollten Sie in Ihrem Text Zeichen verwenden, die für den HTML-Code eine bestimmte Bedeutung haben, also innerhalb eines Tags Verwendung finden, müssen diese Zeichen entsprechend maskiert werden, um einer Fehlinterpretation durch den Browser vorzubeugen. Dabei wird wie folgt vorgegangen:

Das Zeichen < wird durch diese Zeichenfolge ersetzt: <

Das Zeichen > wird durch diese Zeichenfolge ersetzt: >

Das Zeichen & wird durch diese Zeichenfolge ersetzt: &

Das Zeichen “ wird durch diese Zeichenfolge ersetzt: "

nach oben

Die Farbgestaltung eines HTML-Dokuments

Haben Ihnen unsere ersten Schritte auf dem Pfad der HTML-Sprache gut getan. Ach, Sie sind noch etwas müde und schlapp von der anstrengenden Tour? Dann lehnen Sie sich zurück und genießen den (hoffentlich) schönen Tag. Oder haben Sie schon Lust auf einen Happen, der das Programmiererdasein gleich um ein wahres Farbwunder bereichert?

HTML bietet Ihnen nämlich eine Vielzahl von Möglichkeiten, Farbe zu bekennen. Beginnend mit der Hintergrundgestaltung des Dokuments über die Schrift bis hin zur Untermalung von Tabellen. Prinzipiell können Farben im hexedezimalen Code ebenso verifiziert werden wie unter der direkten Angabe des Farbnamens.

Die Hexadezimale Angabe von Hintergrundfarben

Die Farbgestaltung eines HTML-Dokuments in einer sechsstelligen hexedezimalen Farbdefinition hat zwei nicht zu unterschätzende Vorteile: Der HTML-Designer arbeitet jederzeit browserunabhängig und hat die freie Wahl zwischen 16,7 Millionen Farben. Da gegenwärtig ohnehin von einem VGA-kompatiblen Bildschirm nur 16 Grundfarben angezeigt werden können, ist es ratsam, sich für ein solches Vorgehen zu entscheiden. Die gewünschte Farbe setzt sich im hexedezimalen Code aus den drei Grundfarben Rot, Grün und Blau, den so genannten RGB-Werten, zusammen.

Das zugrunde liegende Schema lautet: #RRGGBB. Die ersten beiden der insgesamt sechs Stellen stehen den Rot-Wert der Farbe dar (R), die beiden nachfolgenden den Grünwert (G), und die letzten den Blau-Wert (B).

#RRGGBB

Rot-Anteil Grün-Anteil Blau-Anteil

Hexadezimale Ziffern sind:

`0` (entspricht dezimal 0)	`A` (entspricht dezimal 10)
`1` (entspricht dezimal 1)	`B` (entspricht dezimal 11)
`2` (entspricht dezimal 2)	`C` (entspricht dezimal 12)
`3` (entspricht dezimal 3)	`D` (entspricht dezimal 13)
`4` (entspricht dezimal 4)	`E` (entspricht dezimal 14)
`5` (entspricht dezimal 5)	`F` (entspricht dezimal 15)
`6` (entspricht dezimal 6)
`7` (entspricht dezimal 7)
`8` (entspricht dezimal 8)
`9` (entspricht dezimal 9)

Die obige Tabelle lehrt uns also, dass eine hexadezimale Ziffer 16 Zustände haben kann. Für jeden der drei definierten Farbwerte stehen 2 Ziffern zur Verfügung. Das ergibt 256 (16x16) mögliche Zustände pro Farbwert.

Die folgende Tabelle stellt Ihnen die 16 Grundfarben im Hexedezimalcode dar.

Längst schon sind die gängigen Browser aber auch in der Lage, eine Farbe ganz schlicht mit deren Name zu definieren. Die folgenden Farbnamen sind Bestandteil von HTML seit Version 3.2 und werden von den meisten WWW-Browsern korrekt interpretiert:

#000000	#808080
#800000	#FF0000
#008000	#00FF00
#808000	#FFFF00
#000080	#0000FF
#800080	#FF00FF
#008080	#00FFFF
#C0C0C0	#FFFFFF

Die namentliche Angabe des farblichen Hintergrunds

Wir wissen also nun, dass eine zu vergebende Farbe auch direkt mit deren Name benannt werden kann. Hierzu setzen wir nach dem Tag <body bgcolor=[Farbe]>. Wo ich nun das Wort „Farbe“ in Klammern notiert haben, setzen Sie selbstverständlich einer der gewünschten Farbnamen ein, den Sie sich aus der unten stehenden Tabelle aussuchen können.

black	gray
maroon	red
green	lime
olive	yellow
navy	blue
purple	fuchsia
teal	aqua
silver	white

Beispiel:

<html>

<head>

<title>Text des Titels</title>

</head>

</body>

</html>

<html>

<head>

<title>Text des Titels</title>

</head>

</body>

</html>

Abbildung: Unser Wunsch wird akzeptiert: Ein graues Hintergrundbild.

Damit auch Ihr Text mal Farbe bekennt

Wie eine Hintergrundfarbe definiert ist, wissen Sie nun. Nur, mit der Schriftfarbe hapert´s ein bisschen, oder etwa nicht?! Schwarze Schrift auf grauem Hintergrund macht sich eben nicht so gut. Auch der umgekehrte Fall ist eine wenig prickelnde Vorstellung. „Nicht ärgern, ändern!“, belehrt uns in solchen Fällen ein bekannter Werbespot. Dann mal nichts wie ran! Ich weiß nicht, welcher Farbe Sie den Vorzug gaben, als es darum ging, den Hintergrund farblich zu definieren. Ich habe mich für grau entschieden, was sicherlich wenig einfallsreich ist, für Demonstrationszwecke wie diesen aber gute Dienste leistet. Also grau.

Im vorangegangenen Kapitel haben wir für die Definition des Hintergrunds den Tag <body bgcolor=[Farbe]> eingesetzt. Wollen wir der Schrift nun zu einer farblichen Note verhelfen, würden wir <body text=[Farbe]> setzen. Analog zur farblichen Hintergrundgestaltung können die Angaben im Hexedezimalcode erfolgen oder durch die textliche Angabe des Farbwunschs. Da der Farbhintergrund allerdings schon definiert ist und es nun gilt, die Textfarbe zu kolorieren, haben wir es mit einem verschachtelten Tag zu tun, was bedeutet, dass der Tag-Teil <body entfällt und stattdessen durch ein Leerzeichen getrennt text=[Farbe]> notiert wird. Wie Sie dem Bespiel entnehmen können, habe ich mich für die Schriftfarbe Blau entschieden.

Dass die Farbenvielfalt von HTML auch eventuelle Verlinkungen nicht außen vor lässt, will ich Ihnen mit den folgenden Zeilen demonstrieren. Wenn Sie Ihre Homepage um diese Verweise bereichern wollen, machen Sie Gebrauch davon! In einem späteren Kapitel dieses Buches werde ich Ihnen die genaue Vorgehensweise der Link-Strukturierung erklären.

Eine Färbung solcher Verweise wird mit link=[Farbe] (link = Verweis) definiert. Mit diesem Tag wird ein Verweis markiert, der vom aktuellen Besucher der Seite noch nicht angeklickt wurde. Soll im Gegensatz dazu ein besuchter Link als solcher sichtbar werden, tritt der Tag vlink=[Farbe] (vlink = visited link = besuchter Verweis) auf den Plan. Ja, selbst für den Anklick-Vorgang kann die Farbgebung aktiviert werden mit alink=[Farbe] (alink = activated link = aktivierter Verweis).

Das unten stehende Beispiel soll Ihnen die Vorgehensweise bei der Farbdefinition des Hintergrunds und der Schrift noch einmal verdeutlichen. Der obere Part zeigt Ihnen die namentliche Farbvergabe, der unten aufgeführte Teil, den alternativen Hexedezimalcode.

Beispiel:

<html>

<head>

<title>Text desTitels</title>

</head>

</body>

</html>

<html>

<head>

<title>Text desTitels</title>

</head>

</body>

</html>

Abbildung: Mit blauer Schriftfarbe und unverändertem Hintergrund wird der Betrachter empfangen.

nach oben

Seitenränder definieren

Die Abstände des Fensterinhalts können mit den Tags topmargin= und leftmargin= bestimmt werden. Die Angabe hierfür erfolgt im einleitenden <body>-Tag. Mit leftmargin= wird der Abstand zwischen linkem und rechtem Fensterrand bestimmt, mit topmargin= der Abstand zwischen oberem und unterem Fensterrand. Die hinter dem Gleichheitszeichen befindlichen Zahlen stellen Pixel-Angaben dar. Die linken Ränder haben die selbe Größe wie die rechten, gleiches gilt für die oberen und unteren Ränder.

Beispiel:

<html>

<head>

<title>Text des Titels</title>

</head>

</body>

</html>

Abbildung: Im Internet Explorer definierte Seitenränder

Ein Einsatz von Cascading Style Sheets (CSS) ist im Zusammenhang mit der Definition von Seitenrändern dringend angeraten. CSS sind eine Ergänzung zur HTML-Programmierkunst mit der die Formateigenschaften diverser HTML-Befehle definiert werden. Sollten Sie oder andere Mitglieder der Internet-Community noch mit einem älteren Browser arbeiten, setzen Sie diese CSS bitte ein. CSS werden von mir in einem anderen Kapitel noch eingehender behandelt.

<head>

body { margin- left:30px; margin- right=30px; margin- top:50px; margin-bottom:50px }

</style>

</head>

nach oben

Textgestaltung

Ordnung ist das halbe Leben. Mindestens. Denn wie es Ihnen zuwider ist, die Autoschlüssel in einem unaufgeräumten Tohuwabohu stundenlang zu suchen, setzt ein völlig unformatierter und somit orientierungsloser Text Ihrer Laune mächtig zu. Ein solches Machwerk ohne kenntlich gemachte Überschrift, jeden Absatz oder Zeilenumbruch braucht eine ordnende Hand. Die folgenden Werkzeuge verhelfen Ihnen zu einer solchen.

nach oben

Überschriften definieren

In der HTML-Programmierung werden sechs Überschriftenebenen unterschieden, wobei <h1> (h = header = Überschrift) die höchste Ebene, somit die größte Überschrift, eine Überschrift erster Ordnung darstellt; <h6> wiederum definiert die niedrigste Ebene, die kleinstmögliche Überschrift, eine Überschrift sechster Ordnung. Nach dem einleitenden Tag erfolgt der Textinhalt der Überschrift, der durch ein dem einleitenden Tag vorangestellten Slash-Zeichen abgeschlossen wird, z. B. </h1>.

Da jede Überschrift einen Absatz für sich darstellt, ist eine Definition eines solchen nicht notwendig.

Wie rufen uns aus diesem gegebenen Anlass in Erinnerung, dass alles, was im Browserfenster schlussendlich interpretiert, also sichtbar wird, innerhalb der Tags <body> und </body> einfügt wird. Eine Überschrift wird daher niemals vor dem Tag <body> oder nach dessen Gegenstück </body> gesetzt.

Beispiel:

<h1>Textinhalt der Überschrift erster Ordnung</h1>

<h2>Textinhalt der Überschrift zweiter Ordnung</h2>

<h3>Textinhalt der Überschrift dritter Ordnung</h3>

<h4>Textinhalt der Überschrift vierter Ordnung</h4>

<h5>Textinhalt der Überschrift fünfter Ordnung</h5>

<h6>Textinhalt der Überschrift sechster Ordnung</h6>

Abbildung: Habe ich Ihnen einen Eindruck über die Gestaltung der Überschriften vermitteln können?

nach oben

Überschriften ausrichten

Überschriften werden grundsätzlich linksbündig ausgerichtet, wenn nichts anderes gewünscht wird. Es ist jedoch möglich, eine Überschrift auch rechtsbündig, zentriert oder als Blocksatz auszurichten. Dies geschieht durch den der Angabe der Überschriftenebene nachgestellten Tag align= (=ausrichten) und die darauf folgende Angabe right (rechts), center (zentriert) oder justify (justieren, also Blocksatz). Abgeschlossen wird die Ausrichtung durch den abschließenden Tag der Überschriftenebene.

Abbildung: Ergebnis unserer Arbeit – ein Sammelsurium an Überschriften unterschiedlicher Ausrichtung.

Beispiel:

<html>

<head>

<title>Die Überschriften</title>

</head>

<body>

<h1 align=center>Zentrierte Ausrichtung der Überschrift erster Ordnung</h1>

<h2 align=center>Zentrierte Ausrichtung der Überschrift zweiter Ordnung</h2>

<br>

<h3 align=center>Zentrierte Ausrichtung der Überschrift dritter Ordnung</h3>

<br>

<h1 align=right>Rechtsbündige Ausrichtung der Überschrift erster Ordnung</h1>

<h2 align=right>Rechtsbündige Ausrichtung der Überschrift zweiter Ordnung</h2>

<br>

<h2 align=justify>Überschrift zweiter Ordnung als Blocksatz</h2>

<h1 align=justify>Überschrift erster Ordnung als Blocksatz</h1>

</body>

</html>

Da bei HTML-Dateien kein Umbruch wie in einer normalen Textverarbeitung durchgeführt werden kann, muss dies durch einen speziellen Befehl geschehen:

<p> (p = paragraph = Absatz).

Beispiel:

<html>

<head>

<title>Text des Titels</title>

</head>

<body>

"Sag mal, wo bist du gestern Abend gewesen?"

<p>

(Beredtes Schweigen)

<p>

"Ja...ja..ja, ich hätts dir schon viel früher sagen müssen, ich weiß."

</body>

</html>

Abbildung: Sie sehen, dass ein Absatz unbedingt entsprechend programmiert werden muss.

nach oben

Wenn der Textabsatz mal anders aussehen soll...

Ähnlich wie eine Überschrift wird auch ein Textabsatz grundsätzlich linksbündig ausgerichtet, wenn nicht anders gewollt. Aber auch in solchen Fällen sind andere Formatierungsansätze realisierbar.

Wollen Sie etwa eine zentrierte Ausrichtung eines Textabsatzes erreichen, verwenden Sie die Angabe <p align=center>. Durch den Tag <p align=right> erreichen Sie hingegen eine rechtsbündige Ausrichtung, wohingegen ein Blocksatz mit <p align=justify> herbeigeführt wird.

<html>

<head>

<title>Text des Titels</title>

</head>

<body>

<h2>Heine, Heinrich (1797-1856)</h2>

<h4>

Zentriert:

Der Herbstwind rüttelt die Bäume, Die Nacht ist feucht und kalt;

Gehüllt im grauen Mantel, Reite ich einsam im Wald.

Rechtsbündig:

Und wie ich reite, so reiten Mir die Gedanken voraus;

Sie tragen mich leicht und luftig Nach meiner Liebsten Haus.

Blocksatz:

Die Hunde bellen, die Diener Erscheinen mit Kerzengeflirr;

Die Wendeltreppe stürm ich Hinauf mit Sporengeklirr.

Rechtsbündig:

Im leuchtenden Teppichgemache, Da ist es so duftig und warm,

Da harret meiner die Holde - Ich fliege in ihren Arm.

Zentriert:

Es säuselt der Wind in den Blättern, Es spricht der Eichenbaum:

Was willst du, törichter Reiter, Mit deinem törichten Traum?

</h4>

</body>

</html>

Abbildung: Heines Gedicht in unterschiedlichen Gestaltungsvarianten. Ob´s ihm gefallen würde?...

nach oben

Lauftext definieren

Mit einem Lauftext soll ein wichtiger Hinweis oder ähnliches hervorgehoben werden. Dies wird durch den Befehl <marquee> erreicht, nach dessen Eingabe der zu scrollende Text erfolgt und durch den Tag </marquee> abgeschlossen wird.

Beispiel:

<html>

<head>

<title>Unsre erste Seite</title>

</head>

<body>

<h3><marquee>!!!Dies ist eine wichtige Mitteilung!!!</marquee></h3>

</body>

</html>

Abbildung: Die "wichtige Mitteilung" ist nun jedem Betrachter offenbar...

nach oben

Laufrichtung bestimmen

Marquee-Texte werden vom Internet-Browser grundsätzlich von rechts nach links bewegt. Man kann dies jedoch auch umzukehren, indem nach dem einleitenden marquee-Tag durch ein Leerzeichen getrennt das Attribut direction=right gestellt wird.

Beispiel:

<html>

<head>

<title>Unsre erste Seite</title>

</head>

<body>

<h3><marquee direction=right>!!!Dies ist eine wichtige Mitteilung!!!</marquee></h3>

</body>

</html>

Abbildung: Der Lauftext mal von ganz rechts...Um die Wichtigkeit hervorzuheben, habe ich mich für eine Schriftgröße erster Ordnung entschieden.

nach oben

Laufgeschwindigkeit einstellen

Die Vielseitigkeit von HTML lässt nicht nur an der veränderbaren Laufrichtung ablesen, sondern auch an der verschieden temperierbaren Geschwindigkeit des vorbeirauschenden Texts.

Zur Erzeugung dieses Effekts wird der Tag scrollamount= (amount=Zustand), durch ein Leerzeichen vom einleitenden marquee-Tag getrennt, gesetzt. Die nach dem Gleichheitszeichen folgende Angabe gibt die Pixelzahl zwischen den Scroll- Zuständen an. Darauf folgt der Tag scrolldelay= (delay=Verzögerung), mit dem die Verzögerung zwischen den beiden Scroll-Zuständen festgelegt wird.

Beispiel:

<html>

<head>

<title>Unsre erste Seite</title>

</head>

<body>

<h3><marquee scrollamount=65 scrolldelay=5>Ganz schön schnell, diese Mitteilung</marquee></h3>

</body>

</html>

Abbildung: Schnell sind wir heute, was..!?

nach oben

Hin- und herwechselnder Lauftext

Einer monotonen Festlegung der Laufrichtung unseres Textes kann man mit einer kleinen Veränderung zuvorkommen.

Um dies zu erzwingen, wird nach dem vorangestellten marquee-Tag, wieder durch ein Leerzeichen separiert, der Tag behaviour= gesetzt. Wenn Sie mit der englischen Sprache einigermaßen vertraut sind, wissen Sie, dass behaviour die Begriffsdefinition für „Verhalten“ darstellt. Nach dem Gleichheitszeichen wird das Wort alternate gesetzt, was so viel wie „wechselnd“ bedeutet.

Beispiel:

<html>

<head>

<title>Unsre erste Seite</title>

</head>

<body>

</body>

</html>

Verweise gehören zu den ganz wesentlichen Bestandteilen eines jeden HTML- Projekts. Mit deren Hilfe wird die Kommunikation unter den einzelnen Dateien eines Projekts hergestellt. Verweise, die in der englischen Sprache „Links“ genannt werden, haben zumeist eine nicht zum zu bearbeitenden Projekt gehörende URL zum Ziel. Es können mit deren Hilfe aber auch andere Ziele benannt werden, wie etwa Verweise zwischen den über- und untergeordneten Ebenen eines Homepage. Nach einem Klick auf einen solchen Verweis, wird der Benutzer auf das in der Programmierung bestimmte Dokument weitergeleitet.

Alle Verweise in HTML haben denselben einheitlichen Aufbau:

<html>

<head>

<title>Text des Titels</title>

</head>

<body>

<h2><a href=“http://www.matthiaskaiser.org“>Link zu meiner Homepage</a></h2>

</body>

</html>

Verweise werden innerhalb der Tags <body> und </body> platziert. Der Verweis beginnt nach der Klammer < mit dem Tag a href=. Mit a wird ein Anker definiert, während mit href= die Hyper(text)-Referenz bezeichnet wird. Unmittelbar hinter dem Gleichheitszeichen wird innerhalb der Anführungszeichen das Verweisziel angegeben und mit > abgeschlossen. Ein solches Ziel kann beispielsweise die Adresse einer Homepage sein. Im aktuellen Beispiel verweise ich auf meine eigene... Daraufhin folgt der Verweistext, der dem Besucher der Homepage das Verweisziel möglichst konkret beschreiben soll. Die Verweisdefinition wird mit </a> abgeschlossen. Für unser Beispiel habe ich eine Schriftgröße zweiter Ordnung gewählt. Im fertigen, im Browser sichtbaren Link kommt ein unterstrichener Verweistext zum Vorschein.

Abbildung: Unser erstes Verweisziel ist offenbart

nach oben

Verweise

Verweise innerhalb einer HTML-Datei

Verweise sind auch innerhalb einer Datei möglich. Dies kann z. B. dann erforderlich werden, wenn in einer Datei die Satzung eines Vereins aufgestellt wird, die sich meist in etliche Unterpunkte gliedert. Verweise sind da schon sehr hilfreich, um schnell vom Unterpunkt „Mitgliedschaft“ zum Punkt „Beitragszahlung“ hin- und herzuspringen.

Um einen Anker <a zu definieren, geht man beim Editieren an die Stelle, zu der ein Verweis hinführen soll. Die Definition eines Verweisziels <a beginnt mit <a name=. Hinter dem Gleichheitszeichen vergibt man einen mit dem Verweisziel eindeutig zu identifizierenden Namen, der in Anführungszeichen zu setzen ist. Dieser Name darf kein Leerzeichen und keine deutschen Umlaute (ä, ö, ü) enthalten. Als einziges Sonderzeichen ist lediglich der Unterstrich_ zugelassen. Hinter dem Verweiszielnamen endet der einleitende Tag mit >. Zum Beispiel:

<a name=“Name“>Name und Sitz des Vereins</a>

Nach der Definition des Ankers muss ein Verweis auf die verankerte Stelle gesetzt werden. Das Verweisziel ist hierbei der Name des zuvor definierten Ankers. Dem Namen muss dieses Mal ein # vorangestellt werden. Groß- und Kleinschreibung der Zieldefinition müssen unbedingt übereinstimmen.

Der folgende Tag dient zur Erläuterung:

<a href="#Name">Name und Sitz des Vereins</a>

<html>

<head>

<title>Text des Titels</title>

</head>

<body>

<h3>

Beispiel:

<a href="#Name">Name und Sitz des Vereins</a><p>

<a href="#Zweck">Zweck des Vereins</a><p>

<a href="#Mitgliedschaft">Mitgliedschaft</a><p>

<a href="#EndeMitglied">Beendigung der Mitgliedschaft</a><p>

<a href="#Beitrag">Beitragszahlungen</a><p>

<a href="#Organe">Organe des Vereins</a><p>

</h3>

<br>

<h3><a name=“Name“>Name und Sitz des Vereins</a></h3>

<p>

Der Verein führt den Namen "Gesangverein Liederkranz".

Er soll in das Vereinsregister beim Amtsgericht in Stuttgart eingetragen werden.

Nach der Eintragung führt der Verein den Namenszusatz "e.V.".

Der Verein hat seinen Sitz in Stuttgart.

Der Verein ist Mitglied des Württembergischen Sängerbundes im Deutschen Sängerbund.

<p>

<h3><a name=“Zweck“>Zweck des Vereins</a></h3>

<p>

Zweck des Vereins ist

a) die Förderung und Pflege des Chorgesangs

b) Theateraufführungen in schwäbischer Mundart.

<p>

<h3><a name=“Mitgliedschaft“>Mitgliedschaft</a></h3>

<p>

Der Verein besteht aus

a.) aktiven,

b.) fördernden und

c.) Ehrenmitgliedern.

<p>

<h3><a name=“EndeMitglied“>Beendigung der Mitgliedschaft</a></h3>

<p>

Die Mitgliedschaft endet durch

a.) freiwilligen Austritt,

b.) mit dem Tod oder

c.) durch Ausschluss aus dem Verein.

<p>

<h3><a name=“Beitrag“>Beitragszahlungen</a></h3>

<p>

Von den Mitgliedern wird ein Jahresbeitrag erhoben, dessen Höhe die Mitgliederversammlung festsetzt.

<p>

<h3><a name=“Organe“>Organe des Vereins</a></h3>

<p>

Organe des Vereins sind der Vorstand und die Mitgliederversammlung.

<p>

</body>

</html>

nach oben

Verweise auf andere HTML-Dateien

...im gleichen Verzeichnis

Projektdateien befinden sich zumeist im gleichen Verzeichnis. In einem solchen Fall ist die Angabe der anderen Datei bei Verweisen ausreichend.

Beispiel:

<a href=“datei.htm“>Verweistext</a>

nach oben

... in anderem Verzeichnis

Zwecks besserer Übersicht empfiehlt es sich bei größeren Projekten, die Dateien auf mehrere Verzeichnisse zu verteilen.

Für das Setzen des Verweises ist das selbe Vorgehen wie in HTML erforderlich. Das Verweisziel ist die relative Pfadangabe (<a href=“verzeichnis/) und der Dateiname der in diesem Pfad befindlichen HTML-Datei.

Beispiel:

<a href=“Projekt/datei.htm“>Verweis zu Datei in Verzeichnis Projekt</a>

<a href=“Projekt/Umsatz/datei.htm“>Verweis zu Datei in Verzeichnis „Umsatz“ unterhalb von „Projekt“</a>

Befindet sich eine Datei hingegen im nächsthöheren Verzeichnis, so notiert man zwei Punkte, einen Schrägstrich und dahinter den Namen der Zieldatei.

Beispiel:

<a href=“../datei.htm“>Verweis zu Datei ein Verzeichnis höher</a>

nach oben

Verweis auf andere WWW-Adressen

Verweist man auf eine beliebige WWW-Adresse im Internet, so gilt das gleiche Schema wie gehabt. Nach dem einleitenden Tag <a href= wird in Anführungszeichen die komplette Adresse inklusive dem vorangestellten http:// eingegeben und mit > abgeschlossen.

Beispiel:

<a href=“http://www.mathias-kaiser.net“>Meine Homepage</a>

nach oben

E-Mail-Verweise

Das gleiche Vorgehen findet auch beim Verweis auf eine E-Mail-Adresse seine Verwendung.

Ein Verweis beginnt wie üblich mit dem Tag <a href=. Nun muss jedoch beachtet werden, dass E-Mail-Adressen immer mit mailto (ohne // dahinter) beginnen.

Beispiel:

<a href=“mailto:matthiasckaiser@googlemail.com“>Email an den Autor</a>

nach oben

E-Mail-Verweise mit Subject

Bei einem E-Mail-Verweis ist es ferner möglich, ein Subject (=Titel) vorzudefinieren. Dies ist insbesondere dann sinnvoll, wenn der Verweis eine bestimmte Funktion haben soll, beispielsweise ein Feedback zu einem bestimmten auf der Homepage abgehandelten Vorhaben abzugeben.

Notwendig ist hierbei, direkt hinter der Empfängeradresse ein Fragezeichen und gleich danach subject= zu setzen.

Beispiel:

<a href="mailto:matthiasckaiser@googlemail.com?subject=Feedback zu Ihrer Homepage">Ihre Homepage</a>

nach oben

Grafiken

Eine Homepage wird letztlich erst durch ansprechende Bilder und Grafiken attraktiv. WWW-gerechte Grafiken sind das GIF- und JPEG-Format. Um eine Grafik in eine HTML-Datei einzubinden, benötigt man den folgenden Code:

Die Referenz beginnt wie gesehen mit <img src= (img= image; src=source). Hinter dem Gleichheitszeichen wird der Name der Grafikdatei in Anführungszeichen angegeben, auf die verwiesen wird. Der Befehl endet mit >.

Breite, Höhe und Beschriftung

Es empfiehlt sich, bei der Einbindung von Grafiken in eine Datei immer gleich deren Breite und Höhe mit anzugeben. Denn dadurch entnimmt der Browser der HTML-Datei diese Informationen und vermeidet eventuelle Komplikationen.

Bei der Eingabe des Programmiercodes ist zunächst vorzugehen wie oben beschrieben. Nach der Nennung des gewünschten Dateinamens wird jedoch ein Leerzeichen gelassen um dann die Breite width= gefolgt von der Pixelzahl anzugeben. Gleichermaßen wird bei der Eingabe der Höhe hight= vorgegangen.

Beispiel:

Oftmals wird der notwendige Kontext zwischen einer HTML-Datei und einer Grafik nur dadurch verständlich, dass die Grafik beschriftet wird.

Das Vorgehen orientiert sich hierbei zunächst am Punkt "Grafiken". Nach Eingabe des Grafik-Dateinamens wird jedoch ein Leerzeichen gelassen und mit dem Attribut align= und der alternativen Angabe top (Beschriftung oben) , middle (Beschriftung in der Mitte) oder bottom (Beschriftungstext unten) fortgesetzt.

Beispiel:

<img src=“datei.gif“ align=top>Beschriftungstext

nach oben

Grafiken als Verweise

Da Bilder oftmals aussagekräftiger als Worte sind, ist die Anbringung einer Grafik anstelle eines schriftlichen Verweises kein schlechter Ratgeber. Die gesamte Grafik ist dann anklickbar und wird als Verweis ausgeführt.

Um einen Verweis zu setzen wird <a href= gesetzt, gefolgt von der zu linkenden Datei; der Verweis wird mit >beendet. Der zweite Teil der Aufgabe besteht darin, anstelle des schriftlichen Verweises die zu ladende Grafik anzubringen. Zur Einbindung in HTML wird der übliche Code angewendet:

Beispiel:

nach oben

Rahmen um Grafiken

Eine Homepage wird, wie gesehen, durch die Anbringung von Grafiken erst sehenswert. Ihren „letzten Schliff“ erhalten diese wiederum durch die Umgebung eines Rahmens. Innerhalb des Grafikcodes wird durch die Angabe border= die Dicke des Rahmens definiert.

Beispiel:

Die im Beispiel gegebene Angabe 10 drückt hierbei die Dicke des Rahmens in Pixeln aus

nach oben

Tabellen

Um Texte oder Daten in einen relationalen Kontext zu setzen, stellt die Tabelle ein unerlässliches Hilfsmittel dar. Die darzustellenden Inhalte werden in Zeilen und Spalten gegliedert. Ein einzelnes Tabellenfeld wird Zelle genannt. HTML eröffnet die Möglichkeit, mittels einer definierbaren Tabelle Inhalte geordnet darzustellen.

Mit <table>(Tabelle) wird eine Tabelle nach dem <body>-Tag eingeleitet. Soll eine solche sichtbare Gitternetzlinien enthalten ist der Zusatz border= erforderlich. Der hintangestellte Wert legt die Dicke des Außenrahmens fest und muss mindestens 1 betragen.

Erfolgt der Tag border ohne die Angabe einer vordefinierten Zahl wird automatisch eine Rahmendicke von 2 Pixeln festgelegt.

Mit <tr>(table row=Tabellenzeile)werden die Tabellenzeilen definiert. Unmittelbar danach werden mit <th>(table header=Tabellenkopf) die Kopfzellen der jeweiligen Spalte bestimmt. Die Definition einer Kopfzelle endet mit </th>.

Der Inhalt einer darunter folgenden gewöhnlichen Datenzelle wird nach dem Tag <td> (table data=Tabellendaten) definiert und mit </td> abgeschlossen.
Der Abschluss einer Tabellenzeile wird mit </tr> veranlasst.

Eine fertige Tabelle wird mit </table> abgeschlossen.

Übersicht soll nicht nur eine fertige, im Browser angezeigte Tabelle vermitteln. Auch beim „Stricken“ einer solchen sollte das unten präsentierte Muster mit den eingerückten Zeilen übernommen werden.

Beispiel:

<html>

<head>

<title>Tabelle</title>

</head>

<body>

<tr>

<th>Kopfzeile: Filiale München</th>

<th>Kopfzeile: Filiale Dresden</th>

<th>Kopfzeile: Filiale Hamburg</th>

</tr>

<tr> gt;

<td>Datenzelle: 180.000 Euro Umsatz</td>

<td>Datenzelle: 240.390 Euro Umsatz</td>

<td>Datenzelle: 333.259 Euro Umsatz</td>

</tr>

</table>

</body>

</html>

Abbildung: Eine Tabelle in "primitivster" Ausführung haben wird schon hingezaubert.

nach oben

Frames

Horizontale Frames

Der Sinn eines Frames ist es, mindestens zwei verschiedene HTML-Dateien gleichzeitig im Browser anzuzeigen um dadurch ein komfortables Hin- und hernavigieren zu ermöglichen. Die Verweise, die innerhalb eines Frames enthalten sind, können immer eingeblendet sein, während sich der Inhalt im Hauptfenster je nach ausgewähltem Verweis ändert.

Grundgerüst eines Frame-Sets:

<html>

<head>

<title>Frame</title>

</head>

…Frame-Inhalte…

</frameset>

<body>

</body>

</html>

Die Programmierung eines Frames schließt sich an den Tag </head> mit <frameset> an und endet mit </frameset>. Mit rows=werden die Anzeigefenster in Reihen (rows) aufgeteilt. Anstelle von X sind jedoch prozentuale Werte einzugeben, die das Fenster anteilig aufteilen. Die Angaben müssen in Anführungszeichen gesetzt und durch ein Komma getrennt werden.

nach oben

Drei oder mehr horizontale Frames

Werden drei oder mehr horizontale Frames benötigt, ist folgendermaßen vorzugehen:

Beispiel:

…Frame-Inhalte…

</frameset>

Nach <frameset rows= stehen in Anführungszeichen der prozentuale Anteil des jeweiligen Frames im Verhältnis zur Größe des Gesamtfensters.

Die gesamten Prozentangaben müssen sich zum Schluss natürlich zu 100% aufaddieren.

nach oben

Vertikale Frames

Mancher Betrachter empfindet vertikal angebrachte Frames ansprechender. Die Vorgehensweise ist hierbei mit der Ausgestaltung horizontaler Frames fast identisch. Der Tag rows wird jedoch durch cols= ersetzt und teilt das Anzeigefenster in Spalten (columns=Spalten) auf. Im unteren Beispiel nimmt die linke Spalte 40% des Anzeigefensters ein, die rechte den Rest.

Beispiel:

…Frame-Inhalte…

</frameset>

nach oben

Drei Frames

Zwecks besserer Kommunikation zwischen den verschiedenen Themenbereichen einer Homepage ist die Programmierung eines Drei-Frame-Framesets eine hilfreiche Lösung.

Beispiel:

....zwei Frames, wobei der Inhalt des ersten an dieser Stelle bestimmt wird...

....auch bei diesem Frame wird der Inhalt des ersten bestimmt... ...

</frameset>

Mit <frameset cols= wird die vertikale, prozentuale Aufteilung in linkes und rechtes Fenster vorgenommen und der Inhalt des linken wird innerhalb von <frameset cols=> und <frameset rows> bestimmt.

<frameset rows= bestimmt anschließend die horizontale Aufteilung der rechten Hälfte und gibt den prozentualen Anteil des 2. und 3. Frames wieder.

Die Definitionen werden mit </frameset> abgeschlossen.

nach oben

Formulare

Formulare sind ein unverzichtbarer Bestandteil vieler Homepages, vor allem jener mit kommerziellem Hintergrund. Sie ermöglichen es dem Benutzer Eingabefelder auszufüllen, mittels Anklicken einen Eintrag auszuwählen oder selbst Daten in eine Datenbank einzutragen. Die Bedeutung derartiger Anwendungen lässt sich wohl am bestem anhand der zahllosen Bestell-Seiten auf der Datenautobahn vergegenwärtigen, ob es sich nun um Bücher, Tonträger, Elektroartikel oder Konzerttickets handelt.

Formulare definieren

Ein Formular kann an irgendeiner x-beliebigen Stelle innerhalb eines HTML-Dokuments definiert werden.

Beispiel:

...Bestandteile des Formulars wie Eingabefelder, Auswahllisten...

</form>

Mit <form> (form = Formular) wird ein Formular definiert. Alles was nun zwischen diesem einleitenden Tag und dem Abschluss </form> steht, ist Bestandteil des Formulars.

Nach dem einleitenden Tag wird mit action= (action = Aktion) angegeben, wie mit dem ausgefüllten Formular nach dem Absenden weiter verfahren werden soll. In den meisten Fällen folgt nach action= eine E-Mail-Adresse an die das Formular gesendet wird. Method= gibt die Übertragungsmethode an. Lässt man sich die Formulardaten via E-Mail zusenden, so ist immer method=post zu wählen. Die Angabe enctype="text/plain" sollte benutzt werden, um zumindest von Anwendern eines aktuellen WWW-Browsers ordentlich formatierte E-Mails zu erhalten, die dann auch komfortabel zu lesen sind.

nach oben

Einzeilige Eingabefelder

Einzeilige Eingabefelder dienen vor allem der Aufnahme weniger Worte und Zahlen und erweisen sich daher insbesondere im bereits angesprochenen E-Commerce als ausgesprochen sinnvoll.

Beispiel:

Ihr Name: <input name="Name" size=50 maxlength=40>

<br>

Ihre Lieblingsmusik: <input type=Text name="Lieblingsmusik" size= 60 maxlength=40>

<br>

Ihr Lieblingsfilm: <input name="Lieblingsfilm" size= 70 maxlength=50>

<Input> (input=Eingabe) definiert ein einzeiliges Eingabefeld. Ferner muss jedem Eingabefeld durch name= ein interner Bezeichnername in Anführungszeichen zugeordnet werden, der nicht allzu lang sein sollte, keine Leerzeichen und keine deutschen Umlaute enthalten darf. Allenfalls ein Unterstrich_ ist zugelassen.

Ratsam ist auch, die Anzeigelänge in Zeichen mit size= (size=Größe)sowie die interne Feldlänge in Zeichen maxlength= (maxlength=maximale Länge) zu definieren.

nach oben

Mehzeilige Eingabefelder

Mehrzeilige Eingabefelder eröffnen die Möglichkeit, Kommentare und Nachrichten zu hinterlegen.

Beispiel:

<p>Was halten Sie von unserer Homepage?:

</p>

</textarea>

Mit <textarea> (textarea=Textbereich) wird ein mehrzeiliges Eingabefeld eingeleitet. Jedes Eingabefeld muss mit name= einen internen Bezeichnernamen enthalten. Bei der Namensvergabe gelten die gleichen Bestimmungen wie in Punkt "Einzeilige Eingabefelder".

Es folgen zwei Angaben zur Anzeigengröße des Feldes. Mit rows= wird die Anzahl der anzuzeigenden Zeilen bestimmt, cols= legt die Anzahl der anzuzeigenden Spalten fest.

Mit </textarea> wird die Definition des Eingabefeldes abgeschlossen.

nach oben

Radiobuttons

Radiobuttons sind beschriftete Buttons, von denen der Anwender immer nur einen markieren kann.

Beispiel:

Geben Sie Ihren Musikstil an

<input type=radio name="Musikstil" value="Klassik">Klassik

<br>

<input type=radio name="Musikstil" value="Pop">Pop

<br>

<input type=radio name="Musikstil" value="Jazz">Jazz

Die Definition eines Radiobuttons erfolgt durch <input>. Dahinter erfolgt die Angabe type=radio. Mit name= wird jedem Radiobutton ein interner Bezeichnername vergeben. Bei der Namensvergabe gelten wiederum die gleichen Bestimmungen wie in Punkt "Einzeilige Eingabefelder".

Mit value= (value=Wert) wird der interne Bezeichnerwert eines Radiobuttons bestimmt. Dieser Wert wird in Anführungszeichen gesetzt.

nach oben

Checkboxen

Im Gegensatz zu den Radiobuttons lassen Checkboxen die Auswahl mehrerer Punkte zu.

<p>Geben Sie bei der Bestellung des Computers die gewünschten Zusatzkomponenten mit an:</p>

<input type=checkbox name="Zusatz" value="DVD-Laufwerk"> DVD-Laufwerk<br>

<input type=checkbox name="Zusatz" value="Scanner"> Scanner<br>

<input type=checkbox name="Zusatz" value="Internes Modem"> Internes Modem<br>

Checkboxen beginnen mit <input und der gleich dahinter folgenden Angabe type=checkbox. Mit name= wird jeder Checkbox ein interner Bezeichnernamen gegeben. Bei der Namensvergabe gelten wiederum die gleichen Bestimmungen wie in Punkt "Einzeilige Eingabefelder".

Mit value= wird ein interner Bezeichnerwert für jede Checkbox bestimmt.

nach oben

Absende- /Abbruchbuttons

Zu guter Letzt gilt es, das ausgefüllte Formular dem Empfänger zukommen zu lassen oder den ausgefüllten Inhalt zu verwerfen.

Mit <input type=submit wird ein Absende-Button definiert. Mit <input type=reset wird ein Abbruch des Sendevorgangs erreicht.

nach oben

Schlusswort

Ziel der vorangegangenen Zeilen war es, ein Basiswissen in der Programmierung mit HTML zu vermitteln. Die Betonung liegt hierbei selbstverständlich auf "Basiswissen", da es unmöglich ist, in der dargebotenen Kürze auf sämtliche Aspekte der HTML- Programmierung einzugehen.

Demjenigen, der nun auf den Geschmack gekommen sein sollte und sich eingehender mit der HTML-Technik auseinandersetzen möchte, werde ich jetzt zwei Bücher vorstellen, die mir HTML ebenso verständlich wie fundiert nahe gebracht haben:

Die eigene Homepage. KANNICH. Data Becker 1997

Die Verfasser Ralph Weissbecker und Cora Taeumel schaffen es auf knapp 300 Seiten dem Einsteiger ein profundes Wissen im Umgang mit der HTML- Programmierung zu vermitteln. Ganz ohne "erhobenen Zeigefinger", dafür aber in einem lockeren Umgangston erlernt der zukünftige Webgestalter von der ersten HTML-Zeile an bis zum Einstellen der fertigen Homepage ins Internet alles Wichtige.

Besonders positiv will ich hierbei den im Anhang des Buches befindlichen Überblick der abgehandelten HTML-Befehle hervorheben. Die im Anschluss daran gegebene "Erste Hilfe" ist einer positiven Erwähnung nicht weniger wert.

HTML 4.0 Handbuch. Franzis 2001

Es ist sicherlich nicht übertrieben, dieses vom Autorenteam Münz/Nefzger verfasste Werk als DIE HTML-Bibel schlechthin zu bezeichnen.

Daher richtet sich dieses Buch vor allem an den fortgeschrittenen bzw. professionellen Web-Designer, vermittelt es doch dem Leser neben dem HTML-Grundgerüst die zu dieser Programmiersprache zugehörigen Erweiterungen DHTML und CSS. Einen großen Platz nimmt in diesem 900-Seiten-Wälzer eine insgesamt fast 300-seitige Abhandlung über die JavaScript-Programmierung ein.

Abgeschlossen wird das Buch ebenso wie das zuvor rezensierte mit einem Überblick der besprochenen HTML-Befehle.

Eine CD-Rom, die den gesamten Inhalt des Buches wiedergibt, rundet dieses Handbuch ideal ab.

Wenn Sie weitere Fragen, Anregungen oder auch Kritik an mich richten wollen, bin ich hierfür jederzeit offen.

Hausach, im Oktober 2009

nach oben

Header (Kopf):	er enthält Informationen zum Titel und umfasst den kompletten Bereich vom Tag <html> bis zum Tag </head>
Body (Körper):	er reicht von <body> bis </html>. Die in diesem Bestandteil notierten Informationen werden im Browser schließlich sichtbar