0
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 I...
Divitis•   Exzessive Anwendung von Div‘s schadet    der Dokumentation wie Zucker und    Kalorien der Nahrung.•   Daher: mi...
Beispiel:Header  Status                       M                       eContent                       n                    ...
Der Code                   zum Beispiel<body<div id="wrap">             <!--horizontale Zentrierung-->       <div id="head...
Beispiel CSS<style type="text/css">                                                  #content { body {                    ...
Überschriften•   Nur mit: <h1> bis <h6>•   <h1> ist Hauptüberschrift, daher nur 1 x•   Inhaltlich abstimmen mit: <title>• ...
Texte: Der Absatz <p>•   „Gedankenabschnitt“•   Lesefluss, Lesepausen•   Text ohne <p> darf es nicht geben•   Gestaltung: T...
Auf keinen Fall dürfen sich im        <p> befinden:•   Listen•   Weitere <p>‘s•   Erzwungene Zeilenumbrüche <br />,•   oder...
Absätze gestalten•   margin-top: ??px•   margin-bottom: ??px•   border: ??px;•   padding: ??px•   text-indet: ??px (Erstze...
Textpassagen hervorheben•   keine „visuellen Tags“: <b>, <i>, sondern•   <em> (emphasized) oder <strong>•   <strong> und <...
Kurze Zitate•   <q> ist ein Inline-Element•   setzt den zitierten Text „in    Anführungszeichen“•   <cite> ist ebenfalls e...
Lange Zitate            <blockquote>•   <blockquote> ist ein Block-Element,    welches weitere Blockelemente benötigt:    ...
<cite> ergänzt das Zitat<blockquote>      <p> Sinnvoller nutz man das Element allerdings dann, wenn     man darin z.B. ein...
Listen•   <ul> (unordered Lists)•   <ol> (ordered Lists)•   <dl> (Definition Lists)•   Block-Element•   darf alle Elemente ...
Listen ...•   sind Block-Elemente (mit Style auch inline),•   dürfen fast alle Elemente enthalten,•   bestens für Menü‘s g...
Menü‘s als Listen     am Beispiel Collabor<ul>   <li><% site.link to="main" text="Chronologie" %></li>   <% topiclist item...
Listen zur Bildbeschriftung•   sind wesentlich besser (semantischer) als    Tabellen.•   Beispiel:    <dl>      <dt><img s...
geschachtelte Listen                               DIE Lösung für Baumstrukturen<ul><li>software<ul><li>betriebssystem<ul>...
Tabellen•   sind zweidimensionale Gebilde, die ähnlich    dem kartesischen System, in jeder Achse    (Array) Ausprägungen ...
Ü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...
<thead>, <tfoot>,          <tbody>•   <thead> kann mehrere Zeilen, wie z.B.    Überschriften und Abbildungen enthalten•   ...
Tabellen- Formatierung•   Die Attriubte ‚colspan‘ und ‚rowspan‘ sind    leider unverzichtbar.•   Weitere Eigenschaften im ...
Tabellen „scrollen“ lassen •   Wurde eine Tabelle in die (semantischen)     Einheiten <thead> und <tbody> unterteilt, so  ...
Listen formatieren•   list-stye-type: square;    oder: disc, circle, none (keine Zeichen)    oder: decimal, armenian, geor...
Upcoming SlideShare
Loading in...5
×

Semantischer xhtml code 12w

288

Published on

Semantische Codierung in XHTML

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
288
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Semantischer xhtml code 12w"

    1. 1. Semantischer Quellcode Nach B. Seibert & M. Hoffmann und anderen Quellen H. Mittendorfer
    2. 2. Taxonomien & mehr• Metainformationen (z.B. Attribute)• Taxonomien• Ontologien• RDF, XML• Semantic Web
    3. 3. 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
    4. 4. 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.
    5. 5. Beispiel:Header Status M eContent n u
    6. 6. Der Code zum Beispiel<body<div id="wrap"> <!--horizontale Zentrierung--> <div id="header"> <!--Ein Logo für den Weblog--> </div> <div id="status"> <!--Bereich für die Statusanzeige / login--> </div> <div id="content"> <!--Die Beiträge und Kommentare--> </div> <div id="menu"> <!-- Das Menü --> </div> </div></body
    7. 7. Beispiel CSS<style type="text/css"> #content { body { float: 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; float: 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/
    8. 8. Ü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
    9. 9. Texte: Der Absatz <p>• „Gedankenabschnitt“• Lesefluss, Lesepausen• Text ohne <p> darf es nicht geben• Gestaltung: Typographie, Kontrast und Schriftgröße• <p> ist ein Blockelement, es kann keine weiteren Blockelemente enthalten.
    10. 10. Auf keinen Fall dürfen sich im <p> befinden:• Listen• Weitere <p>‘s• Erzwungene Zeilenumbrüche <br />,• oder gar <div>‘s.
    11. 11. Absätze gestalten• margin-top: ??px• margin-bottom: ??px• border: ??px;• padding: ??px• text-indet: ??px (Erstzeileneinzug)• float: left;
    12. 12. Textpassagen hervorheben• keine „visuellen Tags“: <b>, <i>, sondern• <em> (emphasized) oder <strong>• <strong> und <em> sind Inline-Elemente• Semantische Einordnung &• Barrierefreiheit (Sprachausgabe)
    13. 13. 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
    14. 14. 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/ }
    15. 15. <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>
    16. 16. Listen• <ul> (unordered Lists)• <ol> (ordered Lists)• <dl> (Definition Lists)• Block-Element• darf alle Elemente - außer <div> - enthalten
    17. 17. Listen ...• sind Block-Elemente (mit Style auch inline),• dürfen fast alle Elemente enthalten,• bestens für Menü‘s geeignet.
    18. 18. Menü‘s als Listen am Beispiel Collabor<ul> <li><% site.link to="main" text="Chronologie" %></li> <% topiclist itemprefix="<li>" itemsuffix="</li>" %></ul>
    19. 19. 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.
    20. 20. geschachtelte Listen DIE Lösung für Baumstrukturen<ul><li>software<ul><li>betriebssystem<ul><li>windows</li></ul></li><li>anwendungssoftware<ul><li>grafik<ul><li>photoshop</li><li>illustrater </li></ul></li><li>office<ul><li>textverarbeitung</li><li>tabellenkalkulation</li></ul></li></ul></li></ul></li></ul>
    21. 21. 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.
    22. 22. Überschriften• <th> Spaltenüberschrift </th> • <th scope=“row“> Zeilenüberschrift </th>• <tr> Zeile• <td> Zelle
    23. 23. <caption>• Beschriftung einer Tabelle• Beispiel: <table> <caption>Quartalsumsätze</caption>
    24. 24. Summary• <table summary=“Die Quartalsumsätze stellen den zeitlichen Verlauf ...“> ... </table>• Ergänzung für nicht-grafische Darstellung einer Tabelle.• Das Summary wird im Browser nicht dargestellt.
    25. 25. <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.
    26. 26. Tabellen- Formatierung• Die Attriubte ‚colspan‘ und ‚rowspan‘ sind leider unverzichtbar.• Weitere Eigenschaften im CSS: table-layout, border-collapse, border-spacing, padding, empty-cells.
    27. 27. 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; overflow: }
    28. 28. Listen formatieren• list-stye-type: square; oder: disc, circle, none (keine Zeichen) oder: decimal, armenian, georgian, lower- roman, ...• display: inline; (erzeugt ein Inline-Element)• float: left; (erzeugt eine horizontale Ausrichtung)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×