Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

XHTML/CSS Übungen: Bildunterschriften in XHTML

Posted by sura1 - 23. Juni 2008

Bookmark and Share

Definition für Bildunterschriften

Fast alle Layout-Elemente, die man sich vorstellen kann, haben eine Entsprechung in der Fülle der sematischen XHTML-Tags: Ein Zitat wird mit <blockquote> beschrieben, eine erste Tabellenzeile mit <thead> und so weiter.

Es fehlt jedoch eine Definition für Bildunterschriften. Es empfiehlt sich, damit es halbwegs semantisch bleibt, in Fällen akuter Bildunterschriftnotwendigkeit, eine Definitionsliste <dl></dl> zu setzen mit dem Bild als Definition term <dt></dt> und der Bildunterschrift als Definition <dd></dd>.

Daneben gibt es auch andere Möglichkeiten, wie Sie in Beispiel 1 sehen können:

Download Beispieldateien:

Ein angriffslustiger Vogel ( zip-file: 17KB)
Bilder im Fließtext ( zip-file: 27KB)

Beispiel 1: Ein angriffslustiger Vogel

(zur Vorschau auf die Grafik klicken!)

<!– Weg 1: Hilfscontainer –>

XHTML:

<div>
     <img src="bilder/schwan.jpg" alt="Schwan" />
       Ein angriffslustiger Raubvogel.
</div>

CSS:

div {
float: left;
margin: 0 1em 1em 0;
text-align: center;
width: 231px;
}

Hier wird im XHTML-Code ein <div>-Hilfscontainer eingesetzt. In diesem befinden sich dann das Bild und der Text, welcher unter dem Bild stehen soll. Der Bildtext wird danach mit dem CSS-Befehl { text-align: center;} mittig unter dem Bild angeordnet.

<!– Weg 2: Definitionsliste –>

Bildern mit Definitionslisten einen Untertitel -eine Bildunterschrift – oder eine Überschrift zu geben – ist nicht neu, doch scheint sie immer noch sehr unbekannt zu sein.

Diese Definitionslisten lassen sich wie jedes (X)HTML Attribut gestalten und da sie auch verschachtelt werden können, ergibt sich eine Fülle an Gestaltungsmöglichkeiten. So die jeweiligen Browser diese auch darstellen.

XHTML:

<dl>
  <dt><img src="bilder/schwan.jpg" alt="Schwan" /></dt>
     <dd>Ein angriffslustiger Raubvogel.</dd>
</dl>

CSS:

dl {
float: right;
margin: 0 0 1em 1em;
text-align: center;
}

<!– Weg 3: Ruby-Markup –>

XHTML:

<div>
  <ruby>
     <rb><img src="bilder/schwan.jpg" alt="Schwan" /></rb>
     <rt>Ein angriffslustiger Raubvogel.</rt>
</ruby>

</div>

CSS:

ruby {
float: left;
margin: 0 1em 1em 0;
text-align: center;
width: 231px;
}

Ruby ist ein Begriff aus der Typografie für ein Annotationssystem, bei dem der Text zusammen mit seiner Anmerkung in einer Zeile erscheint. Die Darstellung von parallelem Text in einer Zeile stellt ein typografisches Problem dar, das lange von Computern nicht befriedigend gelöst wurde. Für HTML-Seiten ist erst mit der Erweiterung auf XHTML eine Darstellung von Ruby-Text möglich.

Ruby in XHTML 1.1

Das Ruby-Markup besteht aus den Elementen ruby, rbc, rtc, rb, rt und rp. Es ist die einzige Erweiterung gegenüber HTML 4.0.

(Quelle und weitere Informationen: http://de.wikipedia.org/wiki/Ruby-Markup )

Beispiel 2: Bilder im Fliesstext

<!– Definitionsliste –>

(zur Vorschau auf die Grafik klicken!)

In diesem Beispiel habe ich dem <body> eine Hintergrundfarbe (#ccc) gegeben. Die div-Box mit der id wrapper hat eine Breite von 520px und ist mittig in den body eingepaßt. Die Grafik wurde danach durch die unten angeführte CSS formatiert.

XHTML:

<dl>
  <dt>
      <img src="k-bilder-im-fliesstext.jpg" width="235"
      height="288" title="fliesstext" alt="fliesstext" />
  </dt>
  <dd>Beschreibung des Bildes</dd>
</dl>

CSS:

dl { display: table;
     float: right;
     width: 235px;
     margin: 10px;
     background-color: #000;
   }
 
dt img { width: 235px;
         height: 288px;
         display: block;
       }
 
dd { padding: 4px;
     margin: 10px 0 0 0;
     font-size: 1em;
     font-weight: bold;
     background-color: #ccc;
     color: #f60;
   }

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: