SlideShare ist ein Scribd-Unternehmen logo
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">
             <!--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
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/
Ü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“
•   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.
Auf keinen Fall dürfen sich im
        <p> befinden:
•   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)
•   float: 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> (Definition 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 itemprefix="<li>" itemsuffix="</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>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>
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-grafische 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;
     overflow:
     }
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)

Weitere ähnliche Inhalte

Ähnlich wie Semantischer xhtml code 12w

Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
Michael Kollmannsberger
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz
 
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenAndreas Kalt
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Nicolai Schwarz
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
Stefan Fröhlich
 
Sass & Compass - CSS für Fortgeschrittene
Sass & Compass - CSS für FortgeschritteneSass & Compass - CSS für Fortgeschrittene
Sass & Compass - CSS für Fortgeschrittene
Wolfgang Wagner
 
HTML5 Übersicht
HTML5 ÜbersichtHTML5 Übersicht
HTML5 Übersicht
wdbmh
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Nicolai Schwarz
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
Torsten Landsiedel
 
Layout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen WebdesignLayout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen Webdesigndjesse
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
IT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML IIIT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML II
Institute for Digital Humanities, University of Cologne
 
Htmlcss
HtmlcssHtmlcss
HtmlcssHu Da
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
Jens Grochtdreis
 
Kurzreferenz html
Kurzreferenz htmlKurzreferenz html
Kurzreferenz html
Maxim Harder
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzEric Eggert
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
Alexander Schmidt
 

Ähnlich wie Semantischer xhtml code 12w (20)

Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
 
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
 
Sass & Compass - CSS für Fortgeschrittene
Sass & Compass - CSS für FortgeschritteneSass & Compass - CSS für Fortgeschrittene
Sass & Compass - CSS für Fortgeschrittene
 
CSS: Einführung
CSS: EinführungCSS: Einführung
CSS: Einführung
 
HTML5 Übersicht
HTML5 ÜbersichtHTML5 Übersicht
HTML5 Übersicht
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
 
Layout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen WebdesignLayout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen Webdesign
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
IT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML IIIT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML II
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
Htmlcss
HtmlcssHtmlcss
Htmlcss
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
Kurzreferenz html
Kurzreferenz htmlKurzreferenz html
Kurzreferenz html
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 

Mehr von Hans Mittendorfer

Ki 2
Ki 2Ki 2
WhatsAppverschlüsselung
WhatsAppverschlüsselungWhatsAppverschlüsselung
WhatsAppverschlüsselung
Hans Mittendorfer
 
Kryptographie
KryptographieKryptographie
Kryptographie
Hans Mittendorfer
 
Ki
KiKi
Ki
KiKi
Meatdaten
MeatdatenMeatdaten
Semiotik iii
Semiotik iiiSemiotik iii
Semiotik iii
Hans Mittendorfer
 
Grenzen der Kryptographie
Grenzen der KryptographieGrenzen der Kryptographie
Grenzen der Kryptographie
Hans Mittendorfer
 
Unternehmeskommunikation
UnternehmeskommunikationUnternehmeskommunikation
Unternehmeskommunikation
Hans Mittendorfer
 
Sicherheit webkommunikation
Sicherheit webkommunikationSicherheit webkommunikation
Sicherheit webkommunikation
Hans Mittendorfer
 
Lernblogs ii
Lernblogs iiLernblogs ii
Lernblogs ii
Hans Mittendorfer
 
Webwissenschaften
WebwissenschaftenWebwissenschaften
Webwissenschaften
Hans Mittendorfer
 
Semiotik ii
Semiotik iiSemiotik ii
Semiotik ii
Hans Mittendorfer
 
Weblogs als partizipative lernbegleitung
Weblogs als partizipative lernbegleitungWeblogs als partizipative lernbegleitung
Weblogs als partizipative lernbegleitungHans Mittendorfer
 
Grosse zukunft des_buches_2
Grosse zukunft des_buches_2Grosse zukunft des_buches_2
Grosse zukunft des_buches_2
Hans Mittendorfer
 
Menschliche kommunikation
Menschliche kommunikationMenschliche kommunikation
Menschliche kommunikation
Hans Mittendorfer
 
Watzlawick 1
Watzlawick 1Watzlawick 1
Watzlawick 1
Hans Mittendorfer
 

Mehr von Hans Mittendorfer (20)

Ki 2
Ki 2Ki 2
Ki 2
 
WhatsAppverschlüsselung
WhatsAppverschlüsselungWhatsAppverschlüsselung
WhatsAppverschlüsselung
 
Kryptographie
KryptographieKryptographie
Kryptographie
 
Ki
KiKi
Ki
 
Ki
KiKi
Ki
 
Meatdaten
MeatdatenMeatdaten
Meatdaten
 
Semiotik iii
Semiotik iiiSemiotik iii
Semiotik iii
 
Grenzen der Kryptographie
Grenzen der KryptographieGrenzen der Kryptographie
Grenzen der Kryptographie
 
Unternehmeskommunikation
UnternehmeskommunikationUnternehmeskommunikation
Unternehmeskommunikation
 
Sicherheit webkommunikation
Sicherheit webkommunikationSicherheit webkommunikation
Sicherheit webkommunikation
 
Lernblogs ii
Lernblogs iiLernblogs ii
Lernblogs ii
 
Webwissenschaften
WebwissenschaftenWebwissenschaften
Webwissenschaften
 
Semiotik ii
Semiotik iiSemiotik ii
Semiotik ii
 
Weblogs als partizipative lernbegleitung
Weblogs als partizipative lernbegleitungWeblogs als partizipative lernbegleitung
Weblogs als partizipative lernbegleitung
 
Grosse zukunft des_buches_2
Grosse zukunft des_buches_2Grosse zukunft des_buches_2
Grosse zukunft des_buches_2
 
Semiotik
SemiotikSemiotik
Semiotik
 
Qr code
Qr codeQr code
Qr code
 
Menschliche kommunikation
Menschliche kommunikationMenschliche kommunikation
Menschliche kommunikation
 
Watzlawick 1
Watzlawick 1Watzlawick 1
Watzlawick 1
 
Webkommunikation
WebkommunikationWebkommunikation
Webkommunikation
 

Semantischer xhtml code 12w

  • 1. Semantischer Quellcode Nach B. Seibert & M. Hoffmann und anderen Quellen H. Mittendorfer
  • 2. Taxonomien & mehr • Metainformationen (z.B. Attribute) • Taxonomien • Ontologien • RDF, XML • Semantic Web
  • 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. 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. Beispiel: Header Status M e Content n u
  • 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. 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. Ü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. 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. Auf keinen Fall dürfen sich im <p> befinden: • Listen • Weitere <p>‘s • Erzwungene Zeilenumbrüche <br />, • oder gar <div>‘s.
  • 11. Absätze gestalten • margin-top: ??px • margin-bottom: ??px • border: ??px; • padding: ??px • text-indet: ??px (Erstzeileneinzug) • float: left;
  • 12. Textpassagen hervorheben • keine „visuellen Tags“: <b>, <i>, sondern • <em> (emphasized) oder <strong> • <strong> und <em> sind Inline-Elemente • Semantische Einordnung & • Barrierefreiheit (Sprachausgabe)
  • 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. 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. <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. Listen • <ul> (unordered Lists) • <ol> (ordered Lists) • <dl> (Definition Lists) • Block-Element • darf alle Elemente - außer <div> - enthalten
  • 17. Listen ... • sind Block-Elemente (mit Style auch inline), • dürfen fast alle Elemente enthalten, • bestens für Menü‘s geeignet.
  • 18. Menü‘s als Listen am Beispiel Collabor <ul> <li><% site.link to="main" text="Chronologie" %></li> <% topiclist itemprefix="<li>" itemsuffix="</li>" %> </ul>
  • 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. 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. 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. Überschriften • <th> Spaltenüberschrift </th> • <th scope=“row“> Zeilenüberschrift </th> • <tr> Zeile • <td> Zelle
  • 23. <caption> • Beschriftung einer Tabelle • Beispiel: <table> <caption>Quartalsumsätze</caption>
  • 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. <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. Tabellen- Formatierung • Die Attriubte ‚colspan‘ und ‚rowspan‘ sind leider unverzichtbar. • Weitere Eigenschaften im CSS: table-layout, border-collapse, border-spacing, padding, empty-cells.
  • 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. 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)

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n