Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

XHTML-Elemente: Listen

Posted by sura1 - 21. August 2008

LISTEN:

Erklärung zu den Beispielen:

Klicken Sie bitte auf den Link BESCHREIBUNG und Sie erhalten eine ausführliche Erläuterung des betreffenden XHTML-Elementes (entnommen aus http://de.selfhtml.org/ ).

Für jedes Element stelle ich Ihnen ein von mir gestaltetes Beispiel vor (mit Quell-Text und Browser-Ansicht). Zusätzlich finden Sie unter WEITERE BEISPIELE je einen Link auf die englischsprachigen XHTML-Tutorials der Webseiten http://htmlplayground.com/ und
http://www.w3schools.com/

<dd> </dd>

Beschreibung in einer Definitionsliste ( Beschreibung )

Das <dd>-Element definiert die Definition eines Begriffes in einer Definitionsliste.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>dd-Element: Definition in der Definitionsliste</title>
</head>

<body>
<h1>Definition in der Definitionsliste</h1>
<dl>
  <dt>AA</dt>
  <dd>Auto Answer (Modem)</dd>
  <dt>AAE</dt>
  <dd>Allgemeine Anschalte-Erlaubnis</dd>
  <dt>AARP</dt>
  <dd>Appletalk Address Resolution Protocol</dd>
  <!-- usw. -->
</dl>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_dd.asp
http://htmlplayground.com/#tag_dd


<dl> </dl>

Definitionsliste ( Beschreibung )

Das <dl>-Element definiert eine Definitionsliste.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>dl-Element: Definitionsliste</title>
</head>

<body>
<h1>Definitionsliste</h1>
<dl>
  <dt>AA</dt>
  <dd>Auto Answer (Modem)</dd>
  <dt>AAE</dt>
  <dd>Allgemeine Anschalte-Erlaubnis</dd>
  <dt>AARP</dt>
  <dd>Appletalk Address Resolution Protocol</dd>
  <!-- usw. -->
</dl>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_dl.asp
http://htmlplayground.com/#tag_dl


<dt> </dt>

Begriff in einer Definitionsliste ( Beschreibung )

Das <dt>-Element ist der Begriff, der in einer Definitionsliste definiert werden soll.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>dt-Element: Definition Begriff in einer Definitionsliste</title>
</head>
<body>
<h1>Definitionsliste</h1>
<dl>
  <dt>AA</dt>
  <dd>Auto Answer (Modem)</dd>
  <dt>AAE</dt>
  <dd>Allgemeine Anschalte-Erlaubnis</dd>
  <dt>AARP</dt>
  <dd>Appletalk Address Resolution Protocol</dd>
  <!-- usw. -->
</dl>
</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_dt.asp
http://htmlplayground.com/#tag_dt


<li> </li>

Listeneintrag ( Beschreibung )

Das <li>-Element definiert einen Listenpunkt. (Listeneintrag)

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>li-Element: Definition Listeneintrag</title>
</head>

<body>
<h1>Definition Listeneintrag; ungeordnete Liste</h1>
<ul>
  <li>Probieren geht &uuml;ber Studieren</li>
  <li>Liebe geht &uuml;ber Triebe</li>
  <li>Tante f&auml;llt &uuml;ber Kante</li>
</ul>
<h1>Definition Listeneintrag; geordnete Liste</h1>
<ol>
  <li>Probieren geht &uuml;ber Studieren</li>
  <li>Liebe geht &uuml;ber Triebe</li>
  <li>Tante f&auml;llt &uuml;ber Kante</li>
</ol>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_li.asp
http://htmlplayground.com/#tag_li


<ol> </ol>

Geordnete Liste ( Beschreibung )

Das <ol>-Element definiert eine geordnete Liste. Das Element enthält eine oder mehrere <li>-Elemente, die die eigentlichen Punkte der Liste definieren.

Die Punkte einer geordneten Liste haben eine definierte Reihenfolge und werden vom Browser nummeriert.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>ol-Element: Definition numerische Liste (geordnete Liste)</title>
</head>

<body>
<h1>Definition geordnete Liste (numerische Liste)</h1>
<ol>
  <li>bei Anette vorbeischauen</li>
  <li>bei Bianca vorbeischauen</li>
  <li>bei Christine vorbeischauen</li>
  <!-- usw. -->
</ol>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_ol.asp
http://htmlplayground.com/#tag_ol


<ul> </ul>

Ungeordnete Liste ( Beschreibung )

Das <ul>-Element definiert eine ungeordnete Liste. Das Element enthält eine oder mehrere <ul>-Elemente, die die eigentlichen Punkte der Liste definieren.

Die Punkte einer ungeordneten Liste haben keine definierte Reihenfolge. Sie werden durch eine gefüllte Kugel – bullet – dargestellt.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>ul-Element: Definition ungeordnete Liste</title>
</head>

<body>
<h1>Definition ungeordnete Liste</h1>
<ul>
  <li>Probieren geht &uuml;ber Studieren</li>
  <li>Liebe geht &uuml;ber Triebe</li>
  <li>Tante f&auml;llt &uuml;ber Kante</li>
</ul>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_ul.asp
http://htmlplayground.com/#tag_ul

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: