XHTML Online Lernen

 
  Kursmaterial  
 

Elementreferenz
Attributreferenz
Unicode-Zeichentabelle
Farbtabelle
CSS-Eigenschaften
Glossar

 
  Zum Nachschlagen  
 

SelfHTML 8.0
W3C-Spezifikationen
Editor-Programme
Ressourcen im WWW
Buch-Tipps

 
 
 

Logische Auszeichnung

 
 
Vorherige Lektion Inline-Elemente   Übung zu "Logische Auszeichnung" Nächste Lektion
 
 

abbr (abbreviation = Abkürzung)
Browser stellen abbr wie den normalen Text des Eltern-Elementes dar. Mit dem Attribut title können Sie den vollen Wortlaut des abgekürzten Begriffs angeben.
... als Abkürzung für "und so weiter" empfiehlt der Duden <abbr title="und so weiter">u.s.w.</abbr> ...
abbr wird derzeit nur von NN 6 unterstützt.

acronym (Akronym)
Browser stellen acronym in keiner speziellen Formatierung dar. Der Text aus dem title-Attribut wird als "Tool Tip" sichtbar, wenn sich der Mauszeiger darüber bewegt. Probieren Sie es aus!
... das Akronym <acronym title="Personal Computer">PC</acronym> für Personal Computer ist aus der Alltagssprache nicht mehr wegzudenken ...
acronym wird von IE ab 4 und NN 6 unterstützt.

bdo (bidirectional override = Text-Laufrichtung)
bdo richtet Text in einer bestimmten Laufrichtung aus, die Standard-Laufrichtung des Eltern-Elementes wird dabei überschrieben (override). Mit dem Attribut dir stehen die Werte rtl (right to left) und ltr (left to right) zur Verfügung.
bdo wird von IE ab 4 und NN 6 unterstützt.

cite (Zitieren)
cite kennzeichnet ein Zitat oder eine Referenz zu einer anderen Quelle. Wird von Browsern üblicherweise in Kursivschrift angezeigt.
cite wird von älteren Browsern (IE 3, NN 2) nicht erkannt.

code (Computer-Code)
code eignet sich für die Darstellung eines kurzen Abschnittes von Computer-Code, der typischerweise in Schreibmaschinen-Schrift erscheint. Für längere Code-Beispiele verwenden Sie besser das Block-Element pre.
... in MS-DOS bewirkt der Befehl <code>format</code>, dass alle Daten ...

dfn (definition)
dfn markiert Text als einen neuen Begriff, der anschließend definiert wird. Erscheint im Browser meist in kursiv.
dfn wird von NN 4 nicht unterstützt.

em (emphasis = Hervorhebung)
Mit em kennzeichnen Sie hervorgehobenen Text, der vom Browser meist kursiv angezeigt wird.

kbd (keyboard = Tastatur)
kbd markiert Text als Tastatur-Eingabe und eignet sich z.B für Software-Anleitungen, in denen erklärt wird, was der Anwender eingeben muss. kbd erscheint wie code in einer Schreibmaschinen-Schrift mit festem Buchstabenabstand.

q (quotation = Zitat)
q kennzeichnet einen Textabschnitt als Zitat. Sofern vom Browser unterstützt, wird der Text in den für die verwendete Sprache passenden Anführungszeichen angezeigt. Das Attribut cite erlaubt die Angabe einer URL, an der die Quelle des Zitats zu finden ist.
<q cite="http://w3c.org/">Leading the Web to its Full Potential...</q> ist das erklärte Ziel des W3C ...
q wird umgesetzt von NN 6, IE 5, LY 2.8.

samp (sample = Beispiel)
samp enthält Text, der als Musterbeispiel beispielsweise für die Eingabe von Symbolen und Zeichen durch einen Anwender markiert ist.
...Geben Sie Ihren <samp> Namen </samp> in das Feld...

strong (stark)
strong markiert einen Text als starke Hervorhebung und wird üblicherweise vom Browser in Fettschrift oder fett und kursiv angezeigt.

sub (subscripted = tiefgestellt)
sub stellt den markierten Text um eine halbe Zeilenhöhe tiefer und in kleinerer Schrift dar als den umgebenden Text.
sub wird von älteren Browsern (IE 3, NN 2) nicht erkannt.

sup (superscripted = hochgestellt)
sup stellt den markierten Text um eine halbe Zeilenhöhe höher und in kleinerer Schrift dar als den umgebenden Text.
sup wird von älteren Browsern (IE 3, NN 2) nicht erkannt.

var (Variable)
var kennzeichnet eine Variable in einem Text und eignet sich beispielsweise für die Erläuterung von Programmierschritten oder mathematischen Formeln. Browser zeigen var gwöhnlich in kursiv an.

Beispiel in Standard-Darstellung:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD/ XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1">

<head>
<title>Inline-Elemente: Logische Auszeichnung</title>
</head>
<body>
<h3>Logische Auszeichnung</h3>
<dl>
<dt><b>abbr</b></dt>
<dd><abbr title="abbreviation">abbr</abbr> markiert eine Abkürzung (engl.: abbreviation).</dd>
<dt><b>acronym</b></dt>
<dd><acronym title="World Wide Web" lang="en" xml:lang="en">WWW</acronym> ist die Bezeichnung für das Weltweite Internet.</dd>
<dt><b>bdo</b></dt>
<dd>bdo kann mit dem Attribut dir Text <bdo dir="rtl">rückwärts </bdo> ausgegeben werden.</dd>
<dt><b>cite</b></dt>
<dd>cite wird für kurze <cite>Zitate</cite> verwendet.</dd>
<dt><b>code</b></dt>
<dd>code eignet sich für die Darstellung von <code>Code-Beispielen</code></dd>
<dt><b>dfn</b></dt>
<dd>dfn kennzeichnet eine <dfn>Definition</dfn></dd>
<dt><b>em</b></dt>
<dd>em wird für <em>hervorgehobenen</em> Text verwendet.</dd>
<dt><b>kbd</b></dt>
<dd>kbd kennzeichnet einen Text als <kbd>Tastatureingabe</kbd>.</dd>
<dt><b>q</b></dt>
<dd>q kann mit dem Attribut cite auf die <q cite="http://doku.info">URL eines Zitates</q> verweisen</dd>
<dt><b>samp</b></dt>
<dd>samp wird für Beispiele verwendet, z.B. von <samp>Antworten</samp>.</dd>
<dt><b>strong</b></dt>
<dd>strong kennzeichnet <strong>stark hervorgehobenen</strong> Text.</dd>
<dt><b>sub</b></dt>
<dd>sub stellt den gekenn<sub>zeichneten</sub> Text tiefer.</dd>
<dt><b>sup</b></dt>
<dd>sup stellt den gekenn<sup>zeichneten</sup> Text höher.</dd>
<dt><b>tt</b></dt>
<dt><b>var</b></dt>
<dd>var markiert einen Text als <var>Variable</var></dd>
</dl>
</body>
</html>

Beispiel im Browser anzeigen

Das selbe Beispiel mit CSS-Regeln für die Inline-Elemente:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD/ XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1">
<head>
<title>Inline-Elemente: Logische Auszeichnung mit CSS-Formatierung</title>
<style type="text/css">
<!--
body {font-family:Arial, Helvetica, sans-serif }
abbr { font-weight:bold;
       letter-spacing:0.2em;
       font-size:1,2em;
       color:blue;
       }
acronym { font-weight:bold;
          letter-spacing:0.2em;
          font-size:1.2em;
          color:purple;
          }
bdo { color:blue; } 
cite { font-family:"Times New Roman", Garamond, serif; }
code { color:blue;
       font-weight:bolder;
       }
dfn { font-style:normal;
      font-weight:bolder;
      letter-spacing:0.2em;
      font-size:0.7em;
      } 
em { font-weight:bold; }  
kbd { letter-spacing:0.3em;
      color:green;
      }    
q { font-family:"Times New Roman", Garamond, serif;
    font-style:italic; 
    }
samp { color:green;
       font-size:1.4em;
       } 
strong { font-size:1.4em } 
sub, sup { font-style:oblique }     
var { font-weight:bold;
      color:purple;
      }           
-->
</style>
</head>
<body>
... restlicher Inhalt wie beim Beispiel Standard-Darstellung ...
</body>
</html>

Beispiel im Browser anzeigen

 
 
Vorherige Lektion Inline-Elemente   Übung zu "Logische Auszeichnung" Nächste Lektion
 
   
©2002 Comet Communication GmbH Impressum