Semantischer xhtml code 12w

Semantischer Quellcode
Nach B. Seibert & M. Hoffmann
und anderen Quellen

H. Mittendorfer

Taxonomien & mehr

• Metainformationen (z.B. Attribute)
• Taxonomien
• Ontologien
• RDF, XML
• Semantic Web

DIVIDER <div>

• Divider (Div‘s) besitzen eine schwache
Semantik und dienen der Gruppierung und
Positionierung von Inhalten innerhalb eines
Dokumentes.
• Divider sind Blockelemente
• Design und Positionierung im CSS

Divitis
• Exzessive Anwendung von Div‘s schadet
der Dokumentation wie Zucker und
Kalorien der Nahrung.
• Daher: mit Div‘s lediglich die
Hauptbereiche einer Website (eines
Webog‘s) festlegen:
• header,
status,
navigation,
content.

Beispiel:
Header
Status

M
e
Content
n
u

Der Code
zum Beispiel
<body
<div id="wrap">

<div id="header">


</div>
<div id="status">


</div>
<div id="content">

</div>
<div id="menu">

</div>
</div>
</body

Beispiel CSS
<style type="text/css">
#content {
body {
ﬂoat: left;
font-size: 85%;
height: 800px; /*zur Demonstration*/
font-family: 'Verdana, Arial, Sans-Serif;
width: 600px;
text-align: center;
border-right: 1px solid #999;
}
}
#wrap {
#menu {
width: 800px;
ﬂoat: right;
margin: 0 auto;
height: 800px; /*nur zur Demonstration*/
text-align: left;
width: 200px;
}
}
#header {
</style>
width: 800px;
height: 60px;
text-align:right;
}
#status {
width: 800px;
height: 20 px;
border-bottom: 1px solid #999;
border-top: 1px solid #999;
} -> http://www.cssplay.co.uk/boxes/

Überschriften

• Nur mit: <h1> bis <h6>

• <h1> ist Hauptüberschrift, daher nur 1 x

• Inhaltlich abstimmen mit: <title>

• Baumstruktur einhalten:
<h2> bis <h6> kaskadieren.

• Entspricht der Suchmaschinenlogik

• Gewinner sind auch Sehbehinderte

Texte: Der Absatz <p>

• „Gedankenabschnitt“
• Leseﬂuss, Lesepausen
• Text ohne <p> darf es nicht geben
• Gestaltung: Typographie, Kontrast und
Schriftgröße
• <p> ist ein Blockelement, es kann keine
weiteren Blockelemente enthalten.

Auf keinen Fall dürfen sich im
<p> beﬁnden:
• Listen
• Weitere <p>‘s
• Erzwungene Zeilenumbrüche <br />,
• oder gar <div>‘s.

Absätze gestalten

• margin-top: ??px
• margin-bottom: ??px
• border: ??px;
• padding: ??px
• text-indet: ??px (Erstzeileneinzug)
• ﬂoat: left;

Textpassagen hervorheben

• keine „visuellen Tags“: <b>, <i>, sondern
• <em> (emphasized) oder <strong>
• <strong> und <em> sind Inline-Elemente
• Semantische Einordnung &
• Barrierefreiheit (Sprachausgabe)

Kurze Zitate

• <q> ist ein Inline-Element
• setzt den zitierten Text „in
Anführungszeichen“
• <cite> ist ebenfalls ein Inline-Element
• setzt den zitierten Text kursiv

Lange Zitate
<blockquote>
• <blockquote> ist ein Block-Element,
welches weitere Blockelemente benötigt:
<p>‘s, <ol>‘s, <ul>‘s,
• Geeignet für lange Zitate (Auszüge)
• Sollte eigens formatiert werden:
blockquote {
font-style: oblique; /*kursiv/
}

<cite> ergänzt das Zitat

<blockquote>
<p> Sinnvoller nutz man das Element allerdings dann, wenn
man darin z.B. eine Webadresseeinfügt, da man mit dem cite-
Element mehr noch auf eine Quelle verweist, als nur ein Zitat
anzubringen (siehe „Transpublishing“ von T. H. Nelson)
<cite><a href="http://collabor.idv.edu:8888/pim10s/"
title="Zur Quelle">Klim PIM</a>
</cite>
</p>
</blockquote>

Listen

• <ul> (unordered Lists)
• <ol> (ordered Lists)
• <dl> (Deﬁnition Lists)
• Block-Element
• darf alle Elemente - außer <div> - enthalten

Listen ...

• sind Block-Elemente (mit Style auch inline),

• dürfen fast alle Elemente enthalten,

• bestens für Menü‘s geeignet.

Menü‘s als Listen
am Beispiel Collabor
<ul>
<li><% site.link to="main" text="Chronologie" %></li>
<% topiclist itempreﬁx="<li>" itemsufﬁx="</li>" %>
</ul>

Listen zur Bildbeschriftung

• sind wesentlich besser (semantischer) als
Tabellen.

• Beispiel:
<dl>
<dt><img src=“bilder/foto.jpg“ /></dt>
<dd>Quelle: .......</dd>
</dl>

• Aufzählungszeichen weglassen.

geschachtelte Listen
DIE Lösung für Baumstrukturen
<ul>
<li>software
<ul>
<li>betriebssystem
<ul>
<li>windows</li>
</ul>
</li>
<li>anwendungssoftware
<ul>
<li>graﬁk
<ul>
<li>photoshop</li>
<li>illustrater </li>
</ul>
</li>
<li>ofﬁce
<ul>
<li>textverarbeitung</li>
<li>tabellenkalkulation</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Tabellen
• sind zweidimensionale Gebilde, die ähnlich
dem kartesischen System, in jeder Achse
(Array) Ausprägungen jeweils einer Kategorie
enthalten.

• Sie kommen dem alltäglichen Bedarf der
Zusammenstellung von Kategorien semantisch
wie optisch sehr entgegen.

• Aber Tabellen als Gestaltungsmethode zu
nutzen ist absolut unsemantisch.

Überschriften

• <th> Spaltenüberschrift </th>

• <th scope=“row“> Zeilenüberschrift </th>

• <tr> Zeile

• <td> Zelle

<caption>

• Beschriftung einer Tabelle

• Beispiel:
<table>
<caption>Quartalsumsätze</caption>

Summary

• <table summary=“Die Quartalsumsätze
stellen den zeitlichen Verlauf ...“> ... </table>

• Ergänzung für nicht-graﬁsche Darstellung
einer Tabelle.

• Das Summary wird im Browser nicht
dargestellt.

<thead>, <tfoot>,
<tbody>
• <thead> kann mehrere Zeilen, wie z.B.
Überschriften und Abbildungen enthalten

• <tfoot> beschreibt EINE Fußzeile der Tabelle.
Geeignet für Zitate oder weiterführende
Informationen.

• <tbody> Tabellenrumpf. Darin sind die
„eigentlichen Daten“ enthalten.

Tabellen- Formatierung

• Die Attriubte ‚colspan‘ und ‚rowspan‘ sind
leider unverzichtbar.

• Weitere Eigenschaften im CSS: table-layout,
border-collapse, border-spacing, padding,
empty-cells.

Tabellen „scrollen“ lassen

• Wurde eine Tabelle in die (semantischen)
Einheiten <thead> und <tbody> unterteilt, so
gelingt eine Darstellung großer Tabellen, dern
Überschriften beim vertikalen scrollen
sichtbar bleiben.

• table tbody {
height: 400px;
overﬂow:
}

Listen formatieren

• list-stye-type: square;
oder: disc, circle, none (keine Zeichen)
oder: decimal, armenian, georgian, lower-
roman, ...
• display: inline; (erzeugt ein Inline-Element)
• ﬂoat: left; (erzeugt eine horizontale
Ausrichtung)

Semantischer xhtml code 12w

Weitere ähnliche Inhalte

Ähnlich wie Semantischer xhtml code 12w

Mehr von Hans Mittendorfer

Semantischer xhtml code 12w

Hinweis der Redaktion