Betrachten wir wieder unser zuvor erstelltes HTML-Dokument. Im ersten mit <p> umschlossen Absatz wäre es hilfreich, das beim Lesen betonte Wort "weltweit" auch im Text hervor zu heben. In einem Textverarbeitungsprogramm stehen uns dafür üblicherweise die Buttons "Fett" (oder B wie "bold") und "Kursiv" (oder I wie "italic") zur Verfügung. Auch in HTML gibt es dafür entsprechende Tags. Die früher verwendeten (und recht intuitiven) Tags <b> und <i> sind inzwischen durch die nicht "optisch festgelegten" Tags <strong> und <em> (von engl. "emphasis") ersetzt worden (die alten Tags funktionieren aber weiterhin). Um nun "weltweit" im Text zu betonen, umschließen wir es mit dem Tag <strong> (vergessen Sie nicht das schließende Tag). Im weiteren Verlauf des Absatzes betonten wir zusätzlich "klar strukturieren" und "übersichtlich präsentieren", indem wir sie jeweils mit einem <em>-Tag umschließen. Damit ergibt sich folgender Quelltext:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine erste Website</title>
</head>
<body>
<h1>Willkommen im Web!</h1>
<p>HTML hilft uns dabei, unsere Ideen <strong>weltweit</strong>
zu verbreiten.<br>
Mit einer handvoll Tags lässt sich Text <em>klar strukturieren</em>
und <em>übersichtlich präsentieren</em>.</p>
<h2>Der Schlüssel</h2>
<p>Der <a href="http://de.wikipedia.org/wiki/Webbrowser" target="_blank"
title="Definition in Wikipedia aufrufen">Browser</a> ist das Fenster
in die Welt des WWW. Er ist heute in fast jeder Tasche und jederzeit
mit dem Internet verbunden.</p>
<h2>Alles in Ordnung?</h2>
<p>HTML hilft uns dabei, Texte zu ordnen:</p>
<ul>
<li>Durch Überschriften</li>
<li>Durch Absätze</li>
<li>Durch Listen</li>
<li>Durch optische Betonungen</li>
</ul>
</body>
</html>
Betrachten wir die Ausgabe dieses Quelltextes im Browser, so sieht man, dass der Browser in seiner Voreinstellung für die Anzeige von <strong> (analog zu <b>) einen fetten Schriftschnitt verwendet und für die Anzeige von <em> (analog zu <i>) einen kursiven Schriftstil. Diese Voreinstellung lässt sich mit CSS (im sogenannten Style Sheet) leicht abändern. Dies wird aber in einem eigenen Kapitel erklärt, da diese optische Darstellung vom HTML-Markup weitgehend getrennt ist. Heben Sie als Übung noch in der ungeordneten Liste im letzten Listenpunkt das Wort "optische" so hervor, dass es im Browser kursiv gezeigt wird.
Nun haben wir uns bisher ja intensiv mit der Strukturierung und Darstellung von Text im Web beschäftigt. Doch sagt ein Bild ja bekanntlich "mehr als tausend Worte" - weniger blumig ausgedrückt spielen Bilder vor allem für das Design und dessen emotionale Wirkung eine wichtige Rolle. Daher werden wir den Text im nächsten Abschnitt noch um ein Bild ergänzen.
> weiter