Websiteentwicklung: XHTML: Textbereiche

Aus Wikibooks

Das div-Tag dient zur Gruppierung von Elementen. Das span-Tag dient der Markierung eines inline-Abschnittes z.B. in einem p-Tag. Beide Tags definieren also Textbereiche. Sie erleichtern die Erstellung des Designs in z.B. CSS für die XHTML-Seite. CSS ist die Sprache, mit der Websiten gestaltet werden. Der Band 2 dieser Buchreihe beschäftigt sich mit der Gestaltung von Websiten mittels CSS. Dieses Buch brauchen Sie aber erst später zu lesen. Es ist jetzt noch nicht nötig, dass Sie CSS verstehen. Sie sollten aber wissen, was div und span für Tags sind.

[Bearbeiten] div

Das div-Tag ist ein sog. "Blockelement" (display: block;). Es dient zur Gruppierung mehrerer Elemente. Beispielsweise werden meist Menü, Inhalt und Fußzeile einer Website gruppiert und mit einem id-Attribut adressiert. Auch für eine Informationsbox oder ein Bild mit Beschreibung wird gruppiert und mit einem class-Attribut klassifiziert.

[Bearbeiten] span

Span ist ein Inlineelement (display: inline;). Sie verwenden es, wenn Sie einen Teil eines Absatzes formatieren möchten.

Wenn in unserem Dokument folgender Code steht:

<p>Sie können <span class="taste">Strg</span>+<span class="taste">Alt</span>
 +<span class="taste">Entf</span> drücken, um sich abzumelden.</p>

und in unserem CSS-Stylesheet folgendes steht,

.taste {
  color: #000000;
  -moz-border-radius: 6px; /* wird nur im Firefox dargestellt */
  border: 0.2em solid #E1E1E1;
  border-right-color:#A0A0A0;
  border-bottom-color: #A0A0A0;
  padding: 0 0.333em;
  background:#eeeeee;
}

dann sieht das so aus:

Sie können Strg+Alt+Entf drücken, um sich abzumelden.

[Bearbeiten] Andere Elemente gestalten

Wenn möglich, sollten Sie auf div und span verzichten und passendere Elemente nehmen. Mit dem Attribut class können Sie jedem Element eine Gestaltungsklasse geben. Das Attribut id dient für Elemente, die nur einmal mit dieser ID vorkommen. Gehen Sie aber mit den Attributen sparsam um. Wenn alle Überschriften eine bestimmte Farbe erhalten sollen, brauchen Sie nicht für alle eine eigene Klasse. Für Überschriften können Sie zum Beispiel die bereits vorhandenen Tags h1 bis h6 verwenden, die in der Regel ausreichen sollten.