Weblogs, Podcasting & Online-Journalismus (O'Reillys Basics)

This is the Title of the Book, eMatter Edition

Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved.

|

195

First

Max.

Linie

Max.

Linie

Hier Mini IVZ eingeben!

Abstand untere Tabellenlinie zu Textanfang 1,8 cm

-> also: manuell auf den Arbeitsseiten ziehen!!!

Erstellen auf den

Arbeitsseiten

(siehe Muster)

KAPITEL 15

XHTML und CSS

Wenn Sie das Buch bis hierhin gelesen haben, sind Sie in der Lage, ein eigenes

Weblog samt Podcast zu betreiben. Durch den Texteditor werden Sie großartig von

WordPress unterstützt, um Ihre eigenen Beiträge zu schreiben und zu formatieren.

Deswegen brauchten Sie sich bisher nicht um das Erstellen von Webseiten bzw. die

dahinter liegende Technik zu kümmern. Warum also jetzt? Die Antwort ist ganz

einfach: Wie jedes Medium, ob Zeitung, Radio oder Fernsehen, hat auch das Inter-

net einige technische Eigenheiten. Je besser Sie über die technischen Möglichkeiten

Bescheid wissen, desto besser können Sie Ihre Inhalte in Szene setzen. Davon profi-

tieren in erster Linie Ihre Leser. Durch gut aufbereitete Inhalte können Sie aber

auch erreichen, dass Ihre Beiträge durch Suchmaschinen besser gefunden werden.

Das bedeutet, dass mehr Leser und Hörer auf Sie aufmerksam werden können.

Es gibt vielfältige Gestaltungsmöglichkeiten, mit denen Sie Ihrem Weblog einen

eigenen optischen Stil geben können – seien es nun eine Bildunterschrift oder

benutzerfreundlich gestaltete Links. Deshalb stelle ich Ihnen in diesem Kapitel

zunächst die Funktionsweise und das Zusammenspiel von (X)HTML und CSS vor.

Das klingt zuerst recht technisch, aber Sie werden sehen, wie viel Vergnügen es

bereitet, mit diesen Elementen zu spielen. Anschließend werden Sie einige grundle-

gende Fakten und Informationen über die Suchmaschinenoptimierung erfahren.

Wenn es um die Darstellung von Inhalten im Internet geht, besteht das Dreamteam

aus HTML (Hypertext Markup Language) und CSS

(Cascading Style Sheets). Jeder

Browser kann HTML-Webseiten darstellen, und die meisten Browser verstehen

auch CSS. Mittlerweile gilt HTML jedoch als veraltet und wurde leicht modernisiert

und überarbeitet. Sein Nachfolger nennt sich XHTML, (Extensible Hypertext

Markup Language). Der grundsätzliche Unterschied zwischen HTML und XHTML

besteht darin, dass der Aufbau eines XHTML-Dokuments strikter und logischer in

seiner Syntax ist.

In diesem Kapitel:

• Das erste XHTML-Dokument

• Aufbau einer XHTML-Datei

• Das Zusammenspiel von XHTML

und CSS

• Die wichtigsten XHTML-Tags

• Korrekte und verständliche Links

458-X.book Seite 195 Dienstag, 28. November 2006 4:23 16

This is the Title of the Book, eMatter Edition

Copyright © 2006 O’Reilly & Associates, Inc. All rights reserved.

196

|

Kapitel 15: XHTML und CSS

Links

Max.

Linie

Max.

Linie

Da grundlegende Kenntnisse von XHTML für das Publizieren im Internet extrem

wichtig sind, erfahren Sie in diesem Kapitel, wie XHTML in Kombination mit CSS

funktioniert. Diese beiden Werkzeuge helfen Ihnen, Ihre Inhalte möglichst gut auf-

zubereiten und zu gestalten. Als Beispiel dazu dient uns ein kleiner Artikel über ein

niedliches Flash-Spielchen namens Samorost, das man online spielen kann. Anhand

dieses Beispiels zeige ich Ihnen, wie eine XHTML-Seite aufgebaut ist und wie Sie

einen Text mit XHTML aufbereiten. Weiterhin erkläre ich Ihnen, wie Sie den Inhalt

gestalten. Dafür stelle ich Ihnen einzelne XHTML-Elemente – vereinfachend auch

Tags genannt – vor. Danach erläutere ich ihren Einsatz bei der Gestaltung. Hier

wird es dann auch um die Gestaltung von Seiten mit CSS gehen. Sollten Sie sich

bereits mit XHTML auskennen, dann überspringen Sie einfach die nächsten Seiten

und blättern Sie zum Abschnitt »Die wichtigsten XHTML-Tags« vor. Dort finden

Sie zahlreiche Beispiele und Tipps für die Gestaltung von Tags und lernen, wie Sie

sie auf einer Website am besten einsetzen. Auch XHTML- und CSS-Kenner finden

hier noch einige hilfreiche Tipps, die sich mit der Benutzerfreundlichkeit von Web-

seiten befassen. Sämtliche XHTML- und CSS-Dateien des Beispiels können Sie

unter www.suche-recherche/downloads herunterladen.

Das erste XHTML-Dokument

Moderne Webseiten trennen den Inhalt vom Layout. Zum Inhalt gehören Text und

Bilder. Alle grafischen und gestaltenden Elemente wie z.B. Hintergrundbilder oder

Schriftfarben und -größen werden dem Layout zugeordnet und separat abgespei-

chert. Während also XHTML-Dokumente den eigentlichen Inhalt wie Texte, Refe-

renzen auf Bilder und Links beherbergen, sind die Cascading Style Sheets für die

Darstellung und das Layout zuständig. Meist steuert man mit einer einzigen CSS-

Datei die Darstellung sämtlicher XHTML-Dateien einer Website. Dem Browser

können jedoch auch mehrere CSS-Dateien angeboten werden – z.B. für den separa-

ten Ausdruck eines XHTML-Dokuments oder die Ausgabe auf einem Handheld

bzw. PDA.

Der Vorteil der Trennung zwischen Inhalt und Layout ist die Tatsache, dass Sie das

Layout – auch von 100 verschiedenen Webseiten – schnell und unkompliziert über

nur eine CSS-Datei steuern und verändern können. Sollen Links eine neue Farbe

erhalten, öffnen Sie die separate CSS-Datei, ändern die Farbe, und sofort gelten die

Veränderungen für alle XHTML-Dokumente, die mit der CSS-Datei verknüpft sind.

Ein sehr anschauliches Beispiel für die Trennung von Inhalt und Layout ist das Pro-

jekt CSS Zen Garden (www.csszengarden.com) von Dave Shea. Es illustriert in hun-

derten von Beispielen, wie ein und dieselbe XHTML-Datei auf verschiedenste

Weise gestaltet werden kann. Abbildung 15-1 zeigt eine Auswahl verschiedener

Designs von dieser Site.

458-X.book Seite 196 Dienstag, 28. November 2006 4:23 16