(X)HTML-Workshop 1
Überschriften und Absätze
Wir machen also wieder das alte Copy and Paste Spiel mit diesem Listing:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html>
<head>
<title>Textauszeichnung</title>
</head>
<body>
<h1>Hallo Welt</h1>
<p>Hier wurde ein Absatz definiert<br />
und hie vor ein Zeilenumbruch</p>
<p>Das hier wird <b>fett</b>, <i>kursiv</i> bzw. <b><i>fett und kursiv</i></b>dargestellt</p>
</body>
</html>
Toll, nicht war? Eine Super-Überschrift und Absätze mit Textauszeichnung erscheinen. Versuchen Sie den <h1> Tag auch mal mit den Ziffern 2-5 (also <h2>...</h2> etc...). Probieren Sie auch andere Auszeichnungen wie <sup>...</sup> (superscript, hochgestellt), <sub>...</sub> (subscript, tiefgestellt) und <tt>...</tt> (Teletype, Fernschreiberschrift). Damit haben Sie bereits die für die Praxis bedeutenden physischen Textauszeichnungen kennengelernt. Physisch bedeutet in diesem Zusammenhang, daß lediglich der Text anders dargestellt wird.
Im Gegensatz dazu stehen die logische Textauszeichnungen wie <em>....</em> (emphasis, betont) oder <code>....</code> für Quellcodebereiche. Der Nachteil dieser Inhaltsorientierten Formatierung liegt darin, daß die verschiedenen Browser den Text unterschiedlich darstellen und so die Kontrolle über die Lesbarkeit verloren gehen kann. In Zusammenhang mit der Aufbereitung des Inhalts für Blinde oder Sehbehinderte Menschen haben diese Tags jedoch eine enorme Bedeutung und sollten auch verwendet werden. Über CSS (Cascading Style Sheets) wird zudem die Möglichkeit geboten, noch auf die Darstellung in modernen Browsern Einfluß zu nehmen. Dazu aber an anderer Stelle. Probieren Sie erstmal die Wichtigsten logischen Textauszeichnungen aus: <strong>....</strong> (stark betont), <samp>....</samp> (Beispiel), <kbd>....</kbd> (KeyBoarD, Tastatureingabe), <cite>....</cite> (Zitat), <dfn>....</dfn> (DeFinitioN), <acronym>....</acronym> (Abkürzung). Probieren Sie auch Kombinationen der Verschiedenen Auszeichnungsmöglichkeiten aus.
An dieser Stelle ein Wort zu den mittlerweile weit verbreiteten sogenannten WYSIWYG (What You See Is What You Get, Was du siehst, bekommst du auch) Editoren, mit denen im Layoutmodus gearbeitet werden kann. Es handelt sich hier um einen Euphemismus, da viele zT. nicht gerade billige Programme die Tags nicht korrekt verschachteln. Z.B. <b><i>fett und schräggestellt</b></i> statt korrekt <b><i>fett und schräggestellt</i></b>. Einige Browser reagieren bereits unter HTML4 sehr empfindlich darauf und der Nachbearbeitungsaufwand kann enorm sein.
Ein Tag des obigen Beispiels fällt aus der Reihe: <br /> (LineBReak, Zeilenumbruch). Es gibt einige, jedoch teilweise wichtige Befehle, die kein schliessendes Tag besitzen. Im Gegensatz zu HTML4 müssen laut der XML-Vorgabe Befehle jedoch geschlossen sein. Die Syntax wäre also korrekt <br></br>. Aus Gründen der Kompatibilität mit älteren Browsern wird jedoch lediglich ein Leerzeichen und ein Schrägstrich angefügt. Wichtig: Dieses ist lediglich bei Tags erlaubt, die kein schliessendes Tag besitzen.
Hier ist natürlich noch nicht • Schluß...
• Einleitung
• Die XHTML Dokumentstruktur
• Überschriften und Absätze
• Sonderzeichen und Hyperlinks
|
Kontakt 
Xhtml-Schule
Seitenanfang