XHTML Workshop: Kapitel 4

Dieses Kapitel wird sich Übersichtsseiten (Hyperlinklisten) und der Verlinkung auf zusätzliche Webseiten bzw. weitere Inhalte in extra Dateien beschäftigen. Außerdem werden wir einige neue CSS-Definitionen und das Einbinden von Bildern lernen.

Eine Übersichtsseite

Oft wird eine Webseite nicht nur Text enthalten, sondern auch Hyperlinks, die auf weitere Inhalte der eigenen Webseite zeigen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
   <title>Kapitel 4 - Übersichtsseite</title>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   <style type="text/css">
      body
      {
         background: #d8da3d;
      }
      li
      {
         background: white;
         width: 20%;
         padding: 1em;
      }
   </style>
</head>

<body>

<h1>Hautpnavigation</h1>

<ul>
   <li>Home</li>
   <li><a href="biographie.htm">Meine Biographie</a></li>
   <li>Meine Hobbies</li>
</ul>

</body>
</html>

Einige der hier dargestellten CSS-Definitionen sind neu. Diese Tabelle gibt Überblick über die Bedeutung:

Selektor	Eigenschaft	Wert	Erklärung
body	background	#d8da3d	Der Hintergrund der Webseite (gesteuert über den Tag "`<body>`") wird mit einem Hexadezimalwert farbig dargestellt.
li	background	white	Der Hintergrund jedes Listenpunkts (`<li>`) wird weiß dargestellt.
li	width	20%	Damit der weiße Hintergrund sich nicht über den ganzen Bildschirm erstreckt, wird die Breite des Listenpunkts auf 20% begrenzt.
li	padding	1em	Um die Übersichtsseite optisch schöner zu gestalten wird für jeden Listenpunkt ein Abstand eingehalten.

Bitte lest Euch im selfHTML die aufgeführten CSS-Eigenschaften durch.

Oft reagieren verschiedene Browser unterschiedlich auf ein- und dieselbe (X)HTML-Datei:

Internet Explorer 6.0.29	Firefox 1.0	Opera 7.54

Wie man deutlich sehen kann, sind die Listenpunkte beim IE zu weit unten. Da der IE aber viel verwendet wird, sollten wir dieses Problem direkt beheben.
Für die Navigation brauchen wir keine Listpunkte, also erweitern wir unseren Code um "list-style-type: none;" für den Tag "<ul>". Wo diese Zeile im CSS eingefügt wird ist eigentlich egal, aber ich nehme als grobe Vorgabe der Reihenfolge den Aufbau der XHTML-Datei (siehe oben):

<style type="text/css">
      body
      {
         background: #d8da3d;
      }
      ul
      {
         list-style-type: none;
      }
      li
      {
         background: white;
         width: 20%;
         padding: 1em;
      }
</style>

Damit ist der Bereich Navigation vorerst abgeschlossen.

Eine neue Webseite erstellen

Webseiten zu erstellen und zu validieren haben wir schon gelernt. Noch nicht behandelt haben wir die Ablage bzw. die Verzeichnistrukturen, in denen die Dateien abgelegt werden. Ich habe mich dazu entschlossen, alle Dateien im gleichen Verzeichnis wie die Hauptseite bzw. Hauptnavigation abzuspeichern. Es wäre aber auch eine beliebige Unterverzeichnisstruktur denkbar.

Im Moment ist "Meine Biographie" noch ein toter oder auch broken Link genannt. Ein toter Link verweißt ins Nirvana. Eine Webseite sollte keine toten Links enthalten. Deswegen erstellen wir eine Webseite "biographie.htm". Die neue Seite enthält im Normalfall den Werdegang des Homepage-Eigners z.B. Boris Becker.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <title>02_augabe10_div_span</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>

<body>

 <h1>Die Biographie von Boris Becker</h1>
 <p>Hier finden Sie Informationen rund um den Werdegang und die Erfolge 
 von Boris Becker.</p>

 <h2>Das Licht des Lebens</h2>
 <!-- Geburt -->   
 <p>Das Licht des Lebens erblickte Boris Becker im Jahr 1911 in Wimbledon. 
 Als Sohn von amerikanischen Emigranten, hatte er kaum die Möglichkeit zur
 Schule zu gehen. Schon mit 6 Jahren trat er einem Fußballverein bei.</p>
 
 <h2>Erste Berührungen mit Fußball</h2>
 <!-- Einstieg -->
 <p>Die ersten Erfolge ließen länger auf sich warten. Das Potential von 
 Boris wurde nämlich nicht erkannt und er verbrachte das erste Jahr auf 
 der Ersatzbank.</p>

</body>
</html>

Der dargestellte Text enthält eine Neuheit: Es wird eine Kombination aus H1 und H2 Überschriften verwendet. Warum ist das so?

Zitat aus dem Leitfaden Barrierefreies E-Government

Der Inhalt ist durch Überschriften zu gliedern. Die Überschriften sollten nicht fett mit dem bold-Attribut oder über den veralteten FONT-Tag angelegt werden. Stattdessen sind die Tags <h1> bis <h6> zu verwenden. Diese Strukturierung hat den Vorteil, dass Nutzer von Screenreadern im Text von Überschrift zu Überschrift springen können, sodass das Navigieren auf der Seite vereinfacht wird. Bei einigen grafischen Browsern sind diese strukturierten Seiten ebenfalls besser navigierbar. Wichtig ist, dass die Reihenfolge der Überschriften-Ebenen eingehalten wird. So sollte z.B. <h3> nicht direkt nach <h1> erscheinen.

Ich schlage vor, den Leitfaden Barrierefreies E-Government erst nach dem Workshop zu lesen, da er mit 133 Seiten sehr umfangreich ist. Wer komplett über Barrierefreiheit informiert sein möchte, sollte das PDF aber unbedingt durcharbeiten.

Grafiken einbinden

"Ein Bild sagt mehr als tausend Worte", lautet ein Sprichwort. Früher waren Webseiten mit animierten GIFs und Bildern überladen. Oft besteht die Navigation einer Webseite aus Bildern. Dies ist besonders für blinde Surfer, die auf einen Screenreader angewiesen sind, ein gravierender Nachteil; insbesondere dann, wenn auf einen Alternativtext für das Bild verzichtet wird.
Sollten wir auf Bilder in unserem Webauftritt, demnach komplett verzichten? Auf keinen Fall! Ich denke, man sollte sich nach den Sehenden richten, denn diese sind in der Mehrzahl. Aber ein Bild sollte einen Inhalt bereichern, den Text der Webseite unterstreichen und nicht der Hauptzweck sein. Oft wird man Fotos (Urlaub, Kinder, etc.) auf seiner Webseite darstellen wollen oder ein Bild von seinem neuen Auto veröffentlichen wollen.

Der Tag "<img>" bindet ein Bild in eine Webseite ein. Das selfHTML spricht von selfHTML: Grafikreferenz definieren und setzt die Kenntnis von relativen und absoluten Pfadangaben voraus. Wem dieses Konzept unbekannt ist, sollte umbedingt selfHTML: Allgemeines zum Referenzieren in HTML lesen.

Wir werden in unsere bestehende Webseite ein Bild von Boris Becker einfügen.

<h1>Die Biographie von Boris Becker</h1>
<p><img src="http://www.max.msn.de/iimages/464800_600_337_e.jpg"
alt="Boris Becker" title="Boris Becker mit seinem Zwillingsbruder - &copy; MAX"
style="float: right" />
Hier finden Sie Informationen rund um den Werdegang und die Erfolge
von Boris Becker.</p>

Wie im selfHTML: Grafikreferenz definieren schon angegeben, ist es nicht ganz unproblematisch Bilder von fremden Seiten, in die eigene Webseiten einzubinden. Ich mache das häufiger. Im Attribut "title" habe ich deswegen einen Copyright-Vermerk eingebaut. Ob das jedoch ausreicht, weiß ich nicht. Ein Verbot könnten auch die AGB eines Providers "aussprechen", d.h. referenzieren von urheberrechtlich geschützten Bildern könnte unter Umständen verboten sein.

Zitat aus dem Leitfaden Barrierefreies E-Government

Die Nutzer von Screenreadern oder Textbrowsern können keine Bilder betrachten. Der Inhalt des Bildes kann aber über das alt-Attribut vermittelt werden. Zusätzlich ist das title-Attribut einzufügen, das von einigen Browsern, wie z.B. Netscape, anstelle des alt-Texts angezeigt wird. Title- oder alt-Text erscheinen Nutzern von grafischen Browsern, wenn sie mit der Maus über das Bild rollen. Die Beschreibung sollte möglichst kurz (maximal 80 Zeichen), aber dennoch präzise sein. So ist z.B. für einen blinden Besucher der alt-Text "Hier klicken" bedeutungslos, er wird keine Vorstellung von dem Ziel des Links haben.

Das Universalattribut "style" kennen wir ja bereits. Neu ist der Ausdruck "float: right". Dieser positioniert das Bild von Boris Becker am rechten Rand unserer Webseite und verändert den Textfluss. Der Text "umfließt" das Bild.

Für unser Bild benötigen wir im Moment keine Breiten- und Höhenangaben. Um Grafiken in ein Layout zu integrieren, ist es allerdings oft notwendig, diese zu verkleinern. Das kann man über ein Grafikprogramm machen oder über selfHTML: Breite und Höhe von Grafiken bzw. die Attribute "width" und "height".

Aufgabe 15

Hinterlegt zu jedem Navigationspunkt einen Hyperlink mit

<a href ...>
und einer neuen Webseite, die zu diesem Navigationpunkt passt.

Die neue Webseite kann auch Lorem Ipsum enthalten. Wichtig: Die neue Webseite soll ähnlich aufgebaut sein, wie unsere Biographie von Boris Becker. Die Seite kann mehrere Bilder (rechts- oder linksbündig) und/oder eine Tabelle enthalten. Alle bisher gelernten Tags und CSS-Eigenschaften sind erlaubt. Ihr könnt Euch auch für alle Seiten eine neue Hintergrundfarbe aussuchen.
Der Link "Home" soll auf die Startseite verweisen. In unserem Fall ist das die Seite mit der Navigation.

Aufgabe 16

Erstellt einen neuen Navigationspunkt und eine neue Webseite (Beispiel: "Glossar"). Ihr könnt das Themengebiet und den Inhalt der Webseite frei wählen. Verwendet mindestens 2 neue Tags und/oder CSS-Eigenschaften. Erklärt den anderen Workshop-Teilnehmern in eigenen Worten oder mit einem Zitat aus dem selfHTML, warum Ihr gerade diesen oder jenen Tag (oder diese CSS-Eigenschaft) genommen habt. Erklärt außerdem, was der Tag (oder die CSS-Eigenschaft) genau macht.

Beispiel: Verwendung und Wirkung des Tags: Ich habe die Tags "tt, dl, dt, dd" verwendet um eine Definitionsliste für mein Glossar zu verwirklichen, da diese sehr schön gegliedert ist. Siehe selfHTML: Definitionsliste definieren.

Komplette Zitate aus dem selfHTML sind auch erlaubt, um die Wirkung des Tags (der CSS-Eigenschaft) zu erklären. Vergesst aber bitte nicht den QUOTE-Button des Provisoriums zu verwenden!

Wenn Ihr wollt könnt Ihr auch etwas Schwierigeres versuchen: Den "<pre>" so darstellen, wie ich ihn auf meiner Homepage verwende - mit Kasten und Hintergrundfarbe. Die Aufgabe ist allerdings auch mit 2 (einfachen) neuen Tags gelöst wie "<tt>" und "<acronym>".

Vorgehen um die Aufgabe 16 zu lösen:

Die beiden (oder mehrere) Tags aussuchen, die man verwenden möchte
Inhalte überlegen, die zu den ausgewählten Tags passen könnten
Überschriften und einleitenden Text überlegen (falls gewünscht)
Bilder suchen, welche die Webseite grafisch "aufpeppen" sollen (falls gewünscht)

Überall, wo das Wort "Tags" steht, sind natürlich auch CSS-Eigenschaften gemeint. Es kann auch sein, dass Ihr die ersten beiden Schritte austauschen solltet … erst die Inhalte überlegen, dann die Tags/CSS-Eigenschaften auswählen.

Navigation oben / Hauptnavigation

Navigation