Ein HTML-Dokument besteht aus zwei Bereichen: dem Kopf (head) und dem Textkörper (body). Der Textkörper enthält den eigentlichen Inhalt der Datei: das, was der Browser anzeigen soll. Kopf und Textkörper stehen zwischen "<html>" und "</html>". Vor <html> wird der Dokumenttyp angegeben (obligatorisch in XHTML). Das schließende Tag </html> steht immer am Ende der gesamten Datei. – Erzeuge Dir einfach noch mal ein neues HTML-Dokument mit Phase 5 und schau Dir seinen Aufbau an!
Tags dienen dazu, die logische Struktur eines HTML-Dokuments zu beschreiben. Was für Tags, d.h. was für Seitenelemente können nun im Body vorkommen? Einen Überblick über das Aussehen der einzelnen Seitenelemente gibt Dir die Beispieldatei. Wie werden diese Seitenelemente nun erzeugt? Überschriften hast du schon in der vorhergehenden Aufgabe erzeugt. Ganz analog lassen sich auch Absätze erzeugen (wir wollen im Augenblick nur einfache Absätze ohne Attribute benutzen: solche, wie sie durch den Button "Absatz einfügen" erzeugt werden). - Schreibe einen Absatz über Deinen Arbeitspartner und schau ihn Dir in der Vorschau an! Wenn der Browser nicht das anzeigt, was Du erwartet hast, hilft Dir vielleicht ein Blick in den Quelltext der Beispieldatei. Wähle im Kontextmenü der im Browser geöffneten Datei "Quelltext anzeigen".
Die Reiter "Tabelle" und "Listen" helfen Dir, weitere Arten von Seitenelementen zu erzeugen: Der linke Befehlsbutton für Listen erzeugt eine (ungeordnete) Aufzählungsliste und die nächsten 5 Befehlsknöpfe erzeugen numerierte Listen mit unterschiedlichen Aufzählungszeichen. Einen Listeneintrag erzeugt der Knopf "{<li>}" ("li steht für "list item"). Listen dürfen auch ineinander geschachtelt werden, d.h. ein Listeneintrag kann selbst wieder aus einer Liste 2. oder tieferer Ordnung bestehen. - Schreibe eine Liste, z.B. mit den Interessen Deines Arbeitspartners!
Im Reiter "Tabellen" kannst Du einstellen, wieviel Spalten (1. Wert) und Zeilen (2. Wert) die Tabelle haben soll (keine Sorge: das läßt sich auch später noch ganz einfach wieder ändern). Mit "Einfügen" kannst Du eine Tabelle in dieser Größe erzeugen. Du brauchst dann nur noch die einzelnen Zellen mit Daten auszufüllen ("tr" steht für "table row" und "td" für "table data"). Wieviel Spalten eine Zeile hat, die mit "neue Zeile" in eine Tabelle eingefügt wird, kann man in dem ersten Auswahlfeld einstellen. Spaltenüberschriften, die vom Browser automatisch hervorgehoben werden, müssen von Hand erstellt werden ("Überschrift" erzeugt eine Tabellenüberschrift, d.h. eine Zeile, in der der Text sich über mehrere Spalten erstreckt): Die Zellen in einer Zeile mit Spaltenüberschriften werden nicht mit dem <td>-Tag, sondern mit dem <th>-Tag erzeugt ("th" steht für "table header"). - Erzeuge eine kleine Tabelle mit 2 Spalten und schau sie Dir in der Vorschau an. Was fällt Dir auf?
Tabellen, die in Phase 5 mit "Einfügen" erzeugt werden, heißen blinde Tabellen. Solche Tabellen waren vor CSS das wichtigste Werkzeug, um die Elemente auf einer Seite zu positionieren. Um eine Tabelle mit Rand zu erzeugen, muß dem <table>-Tag ein Formatierungsattribut hinzugefügt werden. Dies sollte am Ende eine CSS-Anweisung sein, doch im Augenblick können wir auch das HTML-Attribut "border" im öffnenden table-Tag verwenden: "<table border> ... </table>" erzeugt eine Tabelle mit Rahmen.
Alle bisher besprochenen Tags sind Tags für sog. Blockelemente: Blockelemente beginnen immer in einer neuen Zeile und nachfolgende Elemente auch. Dabei entsprechen Tabellenzellen Textzeilen und gelten daher ebenfalls als Blockelemente. - Zur Übung kannst Du die Tabelle zu den Blockelementen in der Beispieldatei ausfüllen! - Wie kann man dann aber innerhalb eines Absatzes z.B. ein Wort hervorheben oder einen Link einfügen? Nun, dazu gibt es Tags für eingebundene Elemente.
Zur Hervorhebung dienen "<em>" (einfache Hervorhebung, engl. emphasis) und "<strong>" (starke Hervorhebung). Diese Tags dienen der logischen Auszeichnung eines Textteils. - Ü: Finde heraus, wie so markierte Texte von einem Browser standardmäßig dargestellt werden!
Weitere Tags dienen zur Einbindung von Hyperlinks und Graphiken: Mit Phase 5 kannst Du Hyperlinks über den Eintrag "Hyperlink" im Menü "Einfügen" erzeugen. Gib an der Cursorposition das Ziel des Verweises ein: einen (lokalen) Dateinamen oder eine URL oder einen Anker (ein Anker ist eine mittels des Attributs id eindeutig bestimmte Stelle in einem HTML-Dokument). Beispiel für die Definition eines Ankers:
Beispiele für Hyperlinks:
Bei lokalen Dateien sollte möglichst ein relativer Pfad angegeben werden, d.h. der Pfad, der von der Datei mit dem Verweis hin zu dem Ziel des Verweises führt. Dazu sollten alle Dateien, die später hochgeladen werden sollen, in einem Ast des Dateibaumes zusammengefaßt werden. Wird dann der Inhalt dieses Astes einfach in das Publikationsverzeichnis auf dem Webserver kopiert, so funktionieren alle Links wie zuvor. – Wichtig: In HTML-Pfadangaben werden Verzeichnisse durch "/" getrennt (auch auf Windows-Systemen!).
Mit Phase 5 lassen sich auch Graphiken gleich mit den zwei wichtigsten zugehörigen Attributen einfügen: Wähle "Graphik einfügen" im Menü "Einfügen" und gib an der Cursorposition den Namen der Graphikdatei ein. Dem Attribut "src" (source wird als Wert die Adresse der Graphik-Datei übergeben, und dem Attribut "alt" ein alternativer Text, der beim Überstreichen des Bildes mit der Maus angezeigt und von Vorleseprogrammen für z.B. Sehbehinderte vorgelesen wird. Beispiele:
Bilddateien sollten mit einer Bildverarbeitung so klein wie möglich gemacht werden (webtaugliche Formate: gif und jpg). Das Verkleinern von Bildern mittels HTML-Befehlen ist Unfug – und verärgert Besucher, die bei einer langsamen Internetverbindung eine halbe Ewigkeit auf eine (scheinbar) kleine Graphik warten müssen. Dahingegen ist das Vergrößern von Bildern mittels HTML-Befehlen durchaus empfehlenswert, z.B. bei einem Hintergrund-Bild, bei dem es auf die Auflösung nicht weiter ankommt. – Hinweis: CSS unterstützt das Vergrößern von Bildern nicht, weil dies unter bestimmten Umständen zu Problemen führt. Hintergrundbilder, die über CSS eingebunden werden, müssen daher immer in der erforderlichen Größe vorhanden sein.
Die beiden zuletzt erläuterten Tags enthalten neben dem Tag-Namen Attribute, denen bestimmte Werte zugewiesen werden. Das sehen wir uns jetzt etwas genauer an:Mit einem Tag können Attribute (Eigenschaften) eines Seitenelementes verbunden werden, z.B. um ein Seitenelement zu formatieren oder zu positionieren. Mit einem Tag können auch Angaben anderer Art verknüpft werden, z.B. ein Name, der das Seitenelement eindeutig identifiziert. Attribute stehen innerhalb eines Tags immer nach dem Tag-Namen. Bei Tag-Paaren stehen Attribute immer im öffnenden Tag. Beispiele:
Hinweis: IDs, die als Anker für Querverweise dienen, sind immer unproblematisch. IDs, an die eine Style-Definition angeknüpft werden soll, sollten jedoch nur in einem <div>-Tag stehen, da IDs in anderen Tags, z.B. einem <p>-Tag oder einem <ul>-Tag zu nicht vorhersehbaren Effekten führen. Das heißt: Ein Absatz, eine Liste usw. ist gegebenenfalls in ein <div> mit ID zu verpacken. Analoges gilt für das Attribut class. Beispiel:
HTML-Steuerzeichen müssen umschrieben werden: "<" für "<", ">" für ">", "&" für "&", """ für die Anführungszeichen ("). Die Umschreibung von "<" ist besonders wichtig, da der Browser sonst immer aus dem Tritt kommt.