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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Semantischer xhtml code 12w

Ähnlich wie Semantischer xhtml code 12w (20)

Mehr von Hans Mittendorfer

Mehr von Hans Mittendorfer (20)

Semantischer xhtml code 12w

Hinweis der Redaktion