November 2009
M	D	M	D	F	S	S
« Apr
	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Archiv für die Kategorie ‘XHTML-Elemente’

XHTML-Elemente: Referenzierung

Verfasst von sura1 am 21. August 2008

REFERENZIERUNG:

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/

<a> </a>

Anker oder Hyperlink ( Beschreibung )

Das <a>-Element – auch als Anker-Tag (eng. anchor) bezeichnet – wird für gewöhnlich zusammen mit dem href-Attribut benutzt, um einen Hyperlink, kurz auch als „Link“ bezeichnet, zu erzeugen.

<a> markiert Text innerhalb eines Elementes als Hypertext-Link;
<a> definiert ein ganzes Element, z.B. eine Grafik, als Link;
<a> als benannter Anker kennzeichnet eine Stelle in einem Dokument, auf die ein anderer Link verweisen kann;

Für projektinterne Verweise informieren Sie sich bitte unter: http://de.selfhtml.org/html/verweise/projektintern.htm

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>a-Element: Definition Anker oder Hyperlink</title>
</head>

<body>

<h1>Definition Anker oder Hyperlink</h1>

<h2>Beispiele für Hyperlinks</h2>
<ul>
<li><a href="http://www.gugging.org/"
title="www.gugging.org">Art/Brut Center Gugging</a></li>
<li><a href="http://www.leopoldmuseum.org/"
title="www.leopoldmuseum.org">Museum Leopold, Wien</a></li>
<li><a href="http://www.albertina.at/"
title="www.albertina.at">Albertina, Wien</a></li>
<li><a href="http://www.mak.at/"
title="www.mak.at">MAK Wien</a></li>
<li><a href="http://www.belvedere.at/"
title="www.belverdere.at">Belvedere, Wien</a></li>
<li><a href="http://www.sammlung-essl.at/"
title="www.sammlung-essl.at">Essl Museum, Klosterneuburg</a></li>
<li><a href="http://www.berggalerie.at/"
title="www.berggalerie.at">Werner Berg Museum</a></li>
</ul>

<ul>
<li><a href="http://www.hundertwasser.at"
title="www.hunderwasser.at">Friedensreich Hundertwasser</a></li>
<li><a href="http://www.designplusweb.de/picasso.htm"
title="www.designplusweg.de">Pablo Picasso</a></li>
<li><a href="http://www.zeno.org/Kunstwerke/A/Klimt,+Gustav"
title="www.zeno.org/GustavKlimt">Gustav Klimt</a></li>
<li><a href="http://www.zeno.org/Kunstwerke/A/Schiele,+Egon"
title="www.zeno.org/Egon Schiele">Egon Schiele</a></li>
<li><a href="http://www.famousartistsgallery.com/gallery/kandinsky.html"
title="www.famousartistsgallery.com/gallery/kandinsky.html">Wassily Kandinsky</a></li>
<li><a href="http://www.famousartistsgallery.com/gallery/klee.html"
title="www.famousartistsgallery.com/gallery/klee.html">Paul Klee</a></li>
<li><a href="http://www.famousartistsgallery.com/gallery/matisse.html"
title="www.famousartistsgallery.com/gallery/matisse.html">Henri Matisse</a></li>
<li><a href="http://www.famousartistsgallery.com/gallery/vangogh.html"
title="www.famousartistsgallery.com/gallery/vangogh.html">Vincent van Gogh</a></li>
<li><a href="http://www.famousartistsgallery.com/gallery/monet.html"
title="www.famousartistsgallery.com/gallery/monet.html">Claude Monet</a></li>
<li><a href="http://www.famousartistsgallery.com/gallery/miro.html"
title="www.famousartistsgallery.com/gallery/miro.html">Joan Miro`</a></li>
<li><a href="http://www.jacksonpollock.com/"
title="http://www.jacksonpollock.com/">Jackson Pollock</a></li>
</ul>

<h2><a name="oben" id="oben">Verlinkungen innerhalb einer Datei :
Anker definieren</a></h2>

<ul>
<li><a href="#kapitel1">Kapitel 1</a></li>
<li><a href="#kapitel2">Kapitel 2</a></li>
<li><a href="#kapitel3">Kapitel 3</a></li>
<li><a href="#kapitel4">Kapitel 4</a></li>
</ul>

<h3><a name="kapitel1" id="kapitel1"><strong>Kapitel 1</strong></a></h3>

<p>Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt.
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Zw&ouml;lf Boxk&auml;mpfer jagen Viktor quer &uuml;ber den gro&szlig;en
Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim.
Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd a&szlig;en
M&auml;xchens V&ouml;gel R&uuml;ben, Joghurt und Quark.
"Fix, Schwyz! " qu&auml;kt J&uuml;rgen bl&ouml;d vom Pa&szlig;.</p>

<p class="top"><a href="#oben">nach oben</a></p>

<h3><a name="kapitel2" id="kapitel2"><strong>Kapitel 2</strong></a></h3>

<p>Auch gibt es niemanden, der den Schmerz an sich liebt,
sucht oder w&uuml;nscht, nur, weil er Schmerz ist, es sei denn, es kommt
zu zuf&auml;lligen Umst&auml;nden, in denen M&uuml;hen und Schmerz
ihm gro&szlig;e Freude bereiten k&ouml;nnen. Um ein triviales Beispiel
zu nehmen, wer von uns unterzieht sich je anstrengender
k&ouml;rperlicher Bet&auml;tigung, </p>

<p class="top"><a href="#oben">nach oben</a></p>

<h3><a name="kapitel3" id="kapitel3"><strong>Kapitel 3</strong></a></h3>

<p>Weit hinten, hinter den Wortbergen, fern der L&auml;nder
Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie
in Buchstabhausen an der K&uuml;ste des Semantik, eines gro&szlig;en
Sprachozeans. Ein kleines B&auml;chlein namens Duden flie&szlig;t durch
ihren Ort und versorgt sie mit den n&ouml;tigen Regelialien. Es ist ein
paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund
fliegen. Nicht einmal von der allm&auml;chtigen Interpunktion werden
die Blindtexte beherrscht</p>

<p class="top"><a href="#oben">nach oben</a></p>

<h3><a name="kapitel4" id="kapitel4"><strong>Kapitel 4</strong></a></h3>

<p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder
w&uuml;nscht, nur, weil er Schmerz ist, es sei denn,es kommt zu
zuf&auml;lligen Umst&auml;nden, in denen M&uuml;hen und Schmerz ihm
gro&szlig;e Freude bereiten k&ouml;nnen. Um ein triviales Beispiel
zu nehmen, wer von uns unterzieht sich je anstrengender k&ouml;rperlicher
Bet&auml;tigung, au&szlig;er um Vorteile daraus zu ziehen?
Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die
Entscheidung trifft,</p>

<p class="top"><a href="#oben">nach oben</a></p>

</div> <!-- end wrapper -->

</body>

</html>

Beispiel: ( hier ansehen!)

Um die Wirkung des Anker-Beispieles zu sehen, müssen Sie den Bildschirm verkleinern!!

Weitere Beispiele:

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

<area />

Ausschnitt für eine verweissensitive Grafik ( Beschreibung )

Das <area>-Tag wird zusammen mit dem <map>-Tag benutzt, um eine Image-Map zu erzeugen.

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>area-Element: Ausschnitt für eine verweissensitive Grafik</title>
</head>

<body>
<h1>area-Element: Ausschnitt für eine verweissensitive Grafik</h1>
<p>Klicken Sie auf die Planeten oder auf die Sonne:</p>

<img src ="planets.gif"
width="145" height="126"
alt="Planets"
usemap ="#planetmap" />

<map id ="planetmap"
name="planetmap">
  <area shape ="rect" coords ="0,0,82,126"
  href ="sun.htm" target ="_blank"
  alt="Sun" />
  <area shape ="circle" coords ="90,58,3"
  href ="mercur.htm" target ="_blank"
  alt="Mercury" />
  <area shape ="circle" coords ="124,58,8"
  href ="venus.htm" target ="_blank"
  alt="Venus" />
</map>
</body>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

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

<base />

Definition von Angaben für Zielfenster und Basis-URLs von Verweisen ( Beschreibung )

Das <base>-Element legt die Basis-URI eines Dokuments fest, um relative URIs innerhalb des Dokuments erreichen zu können.

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>base-Element: Angaben für Zielfenster und Basis-URLs von Verweisen</title>
<base href="http://aktuell.de.selfhtml.org">
  <!-- ... andere Angaben im Dateikopf ... -->
</head>

<body>
<h1>Angaben für Zielfenster und Basis-URLs von Verweisen</h1>
<img src="/src/logo.gif">
</body>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

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

<img />

Grafik ( Beschreibung )

Um Grafiken in Ihre HTML-Dateien einzubinden, referenzieren Sie die Grafikdateien an gewünschten Stellen im HTML-Quelltext. Das <img>-Tag fügt eine Grafik oder ein Foto direkt in den Textfluss oder zwischen andere Bilder ein.

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>img-Element: Referenzierung Grafik</title>
</head>

<body>
<h1>Referenzierung Grafik</h1>
<img src="header10.jpg" width="755" height="238"
title="header Nr. 10" alt="header10.jpg" />
<img src="rotating.gif" width="300" height="400"
title="rotating woman" alt="rotating.gif" />
</body>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

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

<link />

Logische Beziehung zu anderen Dateien ( Beschreibung )

Das <link>-Tag erzeugt eine Verbindung zwischen dem augenblicklich geöffneten Dokument und einem anderen, in irgendeiner Weise verwandten Dokument. (Beispiel: Einbindung von Stylesheets (CSS).

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>link-Element: Definition logischer Beziehungen zu anderen Dateien</title>
<!-- ... andere Angaben im Dateikopf ... -->
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="HTML-Kopfdaten" href="index.htm">
<link rel="next" title="Durchsuchbarkeit mit Server-Kommunikation"
href="durchsuchbarkeit.htm">
<link rel="prev" title="Adressbasis und Zielfensterbasis" href="basis.htm">
<link rel="first" title="Titel einer HTML-Datei" href="titel.htm">
<link rel="last" title="Durchsuchbarkeit mit Server-Kommunikation"
href="durchsuchbarkeit.htm">

</head>
<body>
<h1>Definition logischer Beziehungen zu anderen Dateien</h1>

</body>
</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

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

<map> </map>

Einbindung eines Mulitmedia-Objektes ( Beschreibung )

Das <map>-Element definiert verweis-sensitive Grafiken. Dies sind Grafiken, in denen der Anwender mit der Maus auf ein Detail klicken kann. Daraufhin wird ein Verweis ausgeführt. Auf diese Weise kann der Anwender in einigen Fällen wesentlich intuitiver und schneller zu Information gelangen als durch lange verbale Verweislisten.

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>map-Element: Markierung eines Definitionsbereiches für
          verweissensitive Grafiken</title>
</head>

<body>
<h1>Markierung eines Definitionsbereiches für verweissensitive Grafiken</h1>
<p>Klicken Sie auf die Planeten oder auf die Sonne:</p>

<img src ="planets.gif"
width="145" height="126"
alt="Planets"
usemap ="#planetmap" />

<map id ="planetmap"
name="planetmap">
  <area shape ="rect" coords ="0,0,82,126"
  href ="sun.htm" target ="_blank"
  alt="Sun" />
  <area shape ="circle" coords ="90,58,3"
  href ="mercur.htm" target ="_blank"
  alt="Mercury" />
  <area shape ="circle" coords ="124,58,8"
  href ="venus.htm" target ="_blank"
  alt="Venus" />
</map>
</body>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

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

<object> </object>

Einbindung eines Mulitmedia-Objektes ( Beschreibung )

Das <object>-Element wird verwendet um Objekte wie ActiveX-Komponenten, Applets, Image Maps, Media Player und Plug-ins in ein HTML-Dokument einzubinden.

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>object-Element: Referenzierung Multimedia-Objekt</title>
</head>

<body>
<h1>Referenzierung Multimedia-Objekt</h1>
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628"
id="Slider1" width="100" height="50">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>
</body>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

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

<param />

Parameter eines Multimedia-Objektes / Java-Applets (Beschreibung (Objekte), Beschreibung (Java-Applets) )

Das <param>-Tag definiert Parameter eines Multimedia-Objektes/Java-Applets.

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>param-Element: Definition der Parameter eines
          Multimedia-Objektes/Java-Applets</title>
</head>

<body>
<h1>Definition der Parameter eines Multimedia-Objektes/Java-Applets</h1>
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628"
id="Slider1" width="100" height="50">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>
</body>

</html>

Beispiel: ( hier ansehen!)

Weitere Beispiele:

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

Veröffentlicht in XHTML-Elemente | Verschlagwortet mit : a, Anker, area, base, Einbindung Multimedia-Objekt, Grafiken einbinden, Hyperlink, Image, img, Link, logische Beziehung zu anderen Dateien, map, object, param, Parameter, Referenzierung, verweissensitive Grafik, Zielfenster von Verweisen | Kommentar schreiben »

XHTML-Elemente: Formulare

Verfasst von sura1 am 21. August 2008

FORMULARE:

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/

<button> </button>

Anklickbare Schaltfläche ( Beschreibung )

Das <button>-Element definiert einen Submit-Button, Reset-Button oder einen Push-Button in einem Formular.

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>button-Element: Definition anklickbare Schaltfläche</title>
</head>

<body>
<h1>Definiton anklickbare Schaltfläche</h1>
<form action="button.htm">
  <div>
    <button name="Klickmich" type="button"
      value="Überraschung" onclick="alert('Überraschung!');">
      <p>
        <img src="logo.jpg" width="332" height="93" title="logo"
        alt="logo Sura 1 Artworks" /><br>
        <b>Was passiert wohl, wenn Sie mich anklicken?</b>
      </p>
    </button>
  </div>
</form>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<fieldset> </fieldset>

Formular-Elemente ( Beschreibung )

Das <fieldset>-Tag gruppiert zusammengehörige Formular-Elemente.

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>fieldset-Element: Definition Gruppierung Formular-Elemente</title>
</head>

<body>
<h1>Definition Gruppierung Formular-Elemente</h1>
<fieldset>
<legend>Körper-Informationen:</legend>
<form action="">
Größe <input type="text" size="3" />
Gewicht <input type="text" size="3" />
</form>
</fieldset>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<form> </form>

Formularbereich ( Beschreibung )

Mit <form>…</form> definieren Sie ein Formular. Alles, was zwischen dem einleitenden <form>-Element und dem abschließenden Element </form> steht, gehört zum Formular.

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>form-Element: Definition Formularbereich</title>
</head>

<body>
<h1>Definition Formularbereich</h1>
<form action="form_action.asp"
method="get">

Vorname:
<input type="text" name="fname" value="Sura 1" />
<br />
Familienname:
<input type="text" name="lname" value="Sura 2" />
<br />
<input type="submit" value="Abschicken" />
</form>

<p>
Wenn sie den "Abschicken"-Button anklicken, schicken Sie ihre Nachricht<br />
an eine Seite mit dem Namen &quot;form_action.asp&quot;.
</p>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<input />

Formularelement zur Eingabe (Beschreibung (Eingabefelder), Beschreibung (Radio-Buttons), Beschreibung (Checkboxen), Beschreibung (Klick-Buttons), Beschreibung (Datei-Upload-Felder), Beschreibung (versteckte Elemente), Beschreibung (Submit-/Resetbuttons). )

Das <input>-Element erzeugt Eingabefelder, Radio-Buttons, Checkboxen, Klick-Buttons, Datei-Upload-Felder, versteckte Elemente, Submit-Buttons, Reset-Buttons.

Beispiel (9 verschiedene Eingabefelder):

Quellcode:

1. Formular für Namenseingabe

<form action="input_text.htm">
  <p>Vorname:<br><input name="vorname" type="text" size="30" maxlength="30"></p>
  <p>Zuname:<br><input name="zuname" type="text" size="30" maxlength="40"></p>
</form>

2. Eingabefeld für Passwörter

<form action="input_password.htm">
  <p>Kennwort:<br><input name="kennwort" type="password" size="12" maxlength="12"></p>
</form>

3. Mehrzeilige Eingabebereiche definieren

<form action="textarea.htm">
  <p>Welche HTML-Elemente fallen Ihnen ein, und was bewirken sie:<br>
    <textarea name="user_eingabe" cols="50" rows="10"></textarea>
  </p>
</form>

4. Beschreibung Radio-Buttons

<form action="input_radio.htm">
  <p>Geben Sie Ihre Zahlungsweise an:</p>
  <p>
    <input type="radio" name="Zahlmethode" value="Mastercard"> Mastercard<br>
    <input type="radio" name="Zahlmethode" value="Visa"> Visa<br>
    <input type="radio" name="Zahlmethode" value="AmericanExpress"> American Express
  </p>
</form>

5. Checkboxen definieren

<form action="input_checkbox.htm">
  <p>Kreuzen Sie die gewünschten Zutaten an:</p>
  <p>
    <input type="checkbox" name="zutat" value="salami"> Salami<br>
    <input type="checkbox" name="zutat" value="pilze"> Pilze<br>
    <input type="checkbox" name="zutat" value="sardellen"> Sardellen
  </p>
</form>

6. Click-Buttons definieren

<form action="input_button.htm">
  <p>
    <textarea cols="20" rows="4" name="textfeld"></textarea>
    <input type="button" name="Text 1" value="Text 1 anzeigen"
 onclick="this.form.textfeld.value='Text 1 und rückwärts seltsam geschrieben ich bin.'">
    <input type="button" name="Text 2" value="Text 2 anzeigen"
      onclick="this.form.textfeld.value='Ich bin Text 2 - ganz normal'">
  </p>
</form>

7. Felder für Datei-Upload

<form action="input_file.htm" method="post" enctype="multipart/form-data">
  <p>Wählen Sie eine Textdatei (txt, html usw.) von Ihrem Rechner aus:<br>
    <input name="Datei" type="file" size="50" maxlength="100000" accept="text/*">
  </p>
</form>

8. Versteckte Elemente in Formularen definieren

<form name="Feedback" action="input_hidden.htm">
  <p>
    <input type="hidden" name="UserBrowser" value="">
    Ihr Kommentar:<br>
    <textarea name="UserKommentar" rows="2" cols="20"></textarea><br>
    <input type="submit" value="senden"><br>
  </p>
  <script type="text/javascript">
    document.Feedback.UserBrowser.value = navigator.appName;
  </script>
</form>

9. Buttons zum Absenden von Formularen

<p>Voraussetzung ist eine Verbindung ins Internet.
Es werden keine Daten gespeichert, das verarbeitende
CGI-Script gibt lediglich die eingelesenen Daten aus.</p>

<form action="http://de.selfhtml.org/cgi-bin/comments.pl">
  <table border="0" cellpadding="5" cellspacing="0" bgcolor="#E0E0E0">
    <tr>
      <td align="right">Vorname:</td>
      <td><input name="Vorname" type="text" size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td align="right">Zuname:</td>
      <td><input name="Zuname" type="text" size="30" maxlength="40"></td>
    </tr>
    <tr>
      <td align="right" valign="top">Kommentar:</td>
      <td><textarea name="Text" rows="10" cols="50"></textarea></td>
    </tr>
    <tr>
      <td align="right">Formular:</td>
      <td>
        <input type="submit" value=" Absenden ">

        <input type="reset" value=" Abbrechen">
      </td>
    </tr>
  </table>
</form

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<label> </label>

Text eines Formularfeldes ( Beschreibung )

Das <label>-Element ordnet Text einem Formularfeld zu.

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>label-Element: Zuordnung Text zu Formularfeld</title>
</head>

<body>
<h1>Zuordnung Text zu Formularfeld</h1>
<hr />
<h2>Label für Elemente (1)</h2>
<p>Auswahl:</p>
<form name="input" action="">
<input type="radio" name="sex" id="male" />
<label for="male">Mann</label>
<br />
<input type="radio" name="sex" id="female" />
<label for="female">Frau</label>
</form>
<hr />
<h2>Label für Elemente (2)</h2>
<form action="label.htm">
  <fieldset>
    <legend>Formular</legend>
    <table>
      <tr>
        <td><label for="vorname">Vorname:</label></td>
        <td><input type="text" id="vorname" name="Vorname" value="Ihr Vorname"></td>
      </tr>
      <tr>
        <td><label for="nachname">Zuname:</label></td>
        <td><input type="text" id="nachname" name="Zuname" value="Ihr Nachname"></td>
      </tr>
      <tr>
        <td><label for="auswahl">Auswahl:</label></td>
        <td><input type="checkbox" id="auswahl" name="Auswahl"></td>
      </tr>
    </table>
  </fieldset>
</form>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<legend> </legend>

Überschrift von Formularelementen ( Beschreibung )

Das <legend>-Element definiert eine Überschrift für Formular-Elemente, die durch das <fieldset>-Element zusammengefasst wurden.

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>legend-Element: Überschrift für Gruppe von Formularelementen</title>
</head>

<body>
<h1>Definition Gruppenüberschriften</h1>

<form action="fieldset_legend.htm">
  <fieldset>
    <legend>Absender</legend>
    <table>
      <tr>
        <td>Ihr Vorname:</td>
        <td><input type="text" size="40" maxlength="40" name="Vorname"></td>
      </tr><tr>
        <td>Ihr Zuname:</td>
        <td><input type="text" size="40" maxlength="40" name="Zuname"></td>
      </tr>
    </table>
  </fieldset>
  <fieldset>
    <legend>Wunsch</legend>
    <table>
      <tr>
        <td>Ihr Hauptwunsch:</td>
        <td><input type="text" size="40" maxlength="40" name="Hauptwunsch"></td>
      </tr><tr>
        <td>Ihr Zusatzwunsch:</td>
        <td><input type="text" size="40" maxlength="40" name="Zusatzwunsch"></td>
      </tr>
    </table>
  </fieldset>
</form>

</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<optgroup> </optgroup>

Verschachtelung einer Gruppe von Einträgen in eine Auswahlliste ( Beschreibung )

Das <optgroup>-Element gruppiert verwandte Einträge innerhalb eines Pulldown-Menüs.

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>optgroup-Element: Verschachtelte Auswahllisten
          (Menüstruktur) definieren</title>
</head>

<body>
<h1>Verschachtelte Auswahllisten (Menüstruktur) definieren</h1>
<h2>W&auml;hlen Sie Ihren Lieblingsnamen!</h2>

<form action="select_optgroup.htm">
  <p>Zur Auswahl stehen:</p>
  <p>
    <select name="Namen" size="6">
      <optgroup label="Namen mit A">
        <option label="Anna">Anna</option>
        <option label="Achim">Achim</option>
        <option label="August">August</option>
      </optgroup>
      <optgroup label="Namen mit B">
        <option label="Berta">Berta</option>
        <option label="Barbara">Barbara</option>
        <option label="Bernhard">Bernhard</option>
      </optgroup>
      <optgroup label="Namen mit C">
        <option label="Caesar">Caesar</option>
        <option label="Christiane">Christiane</option>
        <option label="Christian">Christian</option>
      </optgroup>
    </select>
  </p>
</form>

</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<option> </option>

Eintrag in einer Auswahlliste ( Beschreibung )

Das <option>-Element fügt Einträge in ein Klappmenü ein.

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>option-Element: Definition Eintrag in einer Auswahlliste</title>
</head>

<body>
<h1>Definition Eintrag in einer Auswahlliste</h1>

<h2>Beispiel 1</h2>

<form action="select.htm">
  <p>
    <select name="top5" size="3">
      <option>Heino</option>
      <option>Michael Jackson</option>
      <option>Tom Waits</option>
      <option>Nina Hagen</option>
      <option>Marianne Rosenberg</option>
    </select>
  </p>
</form>

<h2>Beispiel 2</h2>
<form action="select.htm">
  <p>
    <select>
     <option value ="volvo">Volvo</option>
     <option value ="saab">Saab</option>
     <option value ="opel">Opel</option>
     <option value ="audi">Audi</option>
    </select>
  </p>
</form>

</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<select> </select>

Auswahlliste ( Beschreibung )

Das <select>-Element definiert ein Eingabefeld für die Auswahl von Optionen und erzeugt eine Pulldown-Liste in einem Formular.

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>select-Element: Definition Auswahlliste</title>
</head>

<body>

<h1>Definition Auswahlliste</h1>

<h2>W&auml;hlen Sie Ihren Favoriten!</h2>

<form action="select.htm">
  <p>
    <select>
      <option>Heino</option>
      <option>Michael Jackson</option>
      <option>Tom Waits</option>
      <option>Nina Hagen</option>
      <option>Marianne Rosenberg</option>
    </select>
  </p>
</form>

<hr noshade size="1" />

<h2>W&auml;hlen Sie so viele Favoriten, wie Sie wollen!</h2>

<form action="select.htm">
  <p>
    <select name="top5" size="5" multiple>
      <option>Heino</option>
      <option>Michael Jackson</option>
      <option>Tom Waits</option>
      <option>Nina Hagen</option>
      <option>Marianne Rosenberg</option>
    </select>
  </p>
</form>

</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<textarea> </textarea>

Mehrzeiliges Eingabefeld ( Beschreibung )

Das <textarea>-Element definiert ein mehrzeiliges Eingabefeld.

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>textarea-Element: Definition mehrzeiliges Eingabefeld</title>
</head>

<body>
<h1>Definition mehrzeiliges Eingabefeld</h1>

<form action="textarea.htm">
  <p>Welche HTML-Elemente fallen Ihnen ein, und was bewirken sie:<br>
    <textarea name="user_eingabe" cols="50" rows="10"></textarea>
  </p>
</form>

</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_select.asp
http://htmlplayground.com/#tag_textarea

Veröffentlicht in XHTML-Elemente | Verschlagwortet mit : anklickbare Schaltfläche, Auswahlliste, Überschrift von Formularelementen, button, Eintrag Auswahlliste, fieldset, form, Formular-Element, Formularbereich, Formulare, Formularelement, input, label, legend, mehrzeiliges Eingabefeld, optgroup, option, select, Text eines Formularfeldes, textarea | Kommentar schreiben »

XHTML-Elemente: Listen

Verfasst von sura1 am 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>
  
</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>
  
</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>
  
</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>
  
</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

Veröffentlicht in XHTML-Elemente | Verschlagwortet mit : Begriff in Definitionsliste, Beschreibung in Definitionsliste, dd, Definitionsliste, dl, dt, geordnete Liste, li, Listen, Listenelement, ol, ul, ungeordnete Liste | Kommentar schreiben »

XHTML-Elemente: Tabellen

Verfasst von sura1 am 21. August 2008

TABELLEN:

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/

<caption> </caption>

Tabellenüberschrift ( Beschreibung )

Das <caption>-Element definiert in einer Tabelle die zugehörige Überschrift.

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>caption-Element: Definition Tabellenüberschrift</title>
</head>
<body>
<h1>Definition Tabellenüberschrift</h1>

<table border="1" rules="groups">
  <caption>Hier steht die Tabellenüberschrift</caption>
  <thead>
    <tr>
      <th>Zeile im Tabellenkopf</th>
      <th>Zeile im Tabellenkopf</th>
      <th>Zeile im Tabellenkopf</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>Tabellenzelle<br />im Tabellenfuß</i></td>
      <td><i>Tabellenzelle<br />im Tabellenfuß</i></td>
      <td><i>Tabellenzelle<br >im Tabellenfuß</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Hannover</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<col />

Daten für eine Tabellenspalte ( Beschreibung )

Mit dem <col>-Element werden den einzelnen Spalten innerhalb einer Tabelle Attribute zugewiesen..

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>col-Element: Definition Tabellenspalte</title>
</head>
<body>
<h3>Beispielschema 1</h3>

<table border="1">
  <colgroup>
    <col width="80">
    <col width="100">
    <col width="320">
  </colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>

  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<colgroup> </colgroup>

Gruppe von Tabellenspalten ( Beschreibung )

Das <colgroup>-Element gehört zu den eher selten gesehenen HTML-Elementen. Damit lassen sich innerhalb einer Tabelle ganze Spalten auf einmal formatieren – ohne lästige Wiederholungen.

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>colgroup-Element: Definition Gruppe von Tabellenspalten</title>
</head>
<body>
<h1>Definition Tabellenspalten</h1>
<h3>Beispielschema 1</h3>

<table border="1">
  <colgroup>
    <col width="80">
    <col width="100">
    <col width="320">
  </colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

<h3>Beispielschema 2</h3>

<table border="1">
  <colgroup width="200" span="3"></colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

<h3>Beispielschema 3</h3>

<table border="1" width="100%">
  <colgroup>
    <col width="4*">
    <col width="2*">
    <col width="1*">
  </colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<table> </table>

Tabelle ( Beschreibung )

Das <table>-Element definiert ein HTML-Element als Tabelle.

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>table-Element: Definition Tabelle</title>
</head>
<body>
<h1>Tabelle mit Gitternetzlinien</h1>

<table border="1">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

<h1>Tabelle ohne Gitternetzlinien (blinde Tabelle)</h1>

<table border="0">
  <tr>
    <td><h2>ARQ</h2></td>
    <td><p>Automatic Repeat Request. Eine allgemeine Bezeichnung
    f&uuml;r Fehlerprotokolle, die &Uuml;bertragungsfehler erkennt und
    defekte Bl&ouml;cke selbst&auml;ndig wiederholt</p></td>
  </tr>
  <tr>
    <td><h2>HDLC</h2></td>
    <td><p>High Level Data Link Control. Ein Standard-Protokoll, das
    von der Kommission f&uuml;r internationale Standards f&uuml;r
    Softwareanwendungen in synchronen Anlagen verwendet wird.</p></td>
  </tr>
</table>

</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<tbody> </tbody>

Tabellenkörper ( Beschreibung )

Das <tbody>-Element definiert den Körper einer Tabelle.

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>tbody-Element: Definition Tabellenkörper</title>
</head>

<body>
<h1>Definition Tabellenkörper</h1>
<table border="1" rules="groups">
  <thead>
    <tr>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>

      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<td> </td>

Tabellenzelle im Tabellenkörper ( Beschreibung )

Mit dem <td>-Element wird eine Tabellenzelle im Tabellenkörper 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>td-Element: Definition Tabellenzelle im Tabellenkörper</title>
</head>

<body>
<h1>Definition Tabellenzelle im Tabellenkörper</h1>
<table border="1">
<tr>
<td>Cell A1</td>
<td>Cell B1</td>
</tr>
<tr>
<td>Cell A2</td>
<td>Cell B2</td>
</tr>
</table>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<tfoot> </tfood>

Tabellenfuß ( Beschreibung )

Das <tfood>-Element stellt den Tabellenfuß einer Tabelle dar.

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>tfood-Element: Definition Tabellenfuss</title>
</head>

<body>
<h1>Kopf, K&ouml;rper und Fu&szlig; einer Tabelle definieren</h1>
<table border="1" rules="groups">
  <thead>
    <tr>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>
      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<th> </th>

Zeile im Tabellenkopf ( Beschreibung )

Das <th>-Element definiert eine Kopfzelle in einer Tabelle.

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>th-Element: Definition Zeile im Tabellenkopf</title>
</head>

<body>
<h1>Definition Zeile im Tabellenkopf</h1>
<table border = "1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell A1</td>
<td>Cell B1</td>
</tr>
<tr>
<td>Cell A2</td>
<td>Cell B2</td>
</tr>
</table>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<thead> </thead>

Tabellenkopf in einer Tabelle ( Beschreibung )

Das <thead>-Element ist der Tabellenkopf und definiert eine Gruppe von Kopfzeilen in einer Tabelle.

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>thead-Element: Definition Tabellenkopf</title>
</head>

<body>
<h1>Definition Tabellenkopf</h1>
<table border="1" rules="groups">
  <thead>
    <tr>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>
      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

<tr> </tr>

Tabellenzeile ( Beschreibung )

Das <tr>-Element definiert eine Tabellenzeile.

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>tr-Element: Definition Tabellenzeile</title>
</head>

<body>
<h1>Definition Tabellenzeile</h1>
<table border = "1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Zeile A1</td>
<td>Zeile B1</td>
</tr>
<tr>
<td>Zeile A2</td>
<td>Zeile B2</td>
</tr>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

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

Veröffentlicht in XHTML-Elemente | Verschlagwortet mit : Tabellen, Tabellenüberschrift, Gruppe von Tabellenspalten, Tabellenspalte, Tabellenkörper, Tabellenzelle, Tabellenfuß, Tabellenzeile, caption, col, colgroup, table, Tabelle, tbody, td, tfoot, th, Zeile im Tabellenkopf, thead, Tabellenkopf, tr | Kommentar schreiben »

XHTML-Elemente: Physische Auszeichnung

Verfasst von sura1 am 21. August 2008

PHYSISCHE AUSZEICHNUNG:

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/

<b> </b>

Fettgedruckter Text ( Beschreibung )

Mit dem <b>-Element wird der eingegebene Textabschnitt als fettgedruckt 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>b-Element: Definition fettgedruckter Text</title>
</head>

<body>
<h1>Definition fettgedruckter Text</h1>
<p>Das ist ein normaler Text und <b>das ist ein fettgedruckter Text</b>.</p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_font_style.asp
http://htmlplayground.com/#tag_b

<big> </big>

Text größer als normal dargestellt ( Beschreibung )

Mit dem <big>-Element wird der eingegebene Textabschnitt in einer größeren Schriftart als normal 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>big-Element: Definition größerer Text</title>
</head>

<body>
<h1>Definition größerer Text</h1>
<p>Das ist ein normaler Textabschnitt;</p>
<p><big>Hier sehen Sie einen Text mit dem big-Element ausgezeichnet.</big></p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_font_style.asp
http://htmlplayground.com/#tag_big

<i> </i>

Kursiver Text ( Beschreibung )

Mit dem <i>-Element wird der eingegebene Textabschnitt kursiv 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>i-Element: Defintion kursiver Text</title>
</head>

<body>
<h1>Definition kursiver Text (italic)</h1>
<p>Dies ist ein normaler Textabschnitt;</p>
<p><i>Dieser Textabschnitt wird kursiv dargestellt!</i></p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_font_style.asp
http://htmlplayground.com/#tag_i

<small> </small>

Text kleiner als normal dargestellt ( Beschreibung )

Mit dem <small>-Element wird der eingegebene Textabschnitt in einer kleineren Schriftart 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>small-Element: Definition kleinere Schriftart</title>
</head>

<body>
<h1>Definition kleinere Schriftart</h1>
<p>Dies ist ein normaler Textabschnitt;</p>
<p><small>Dieser Textabschnitt wird in einer kleineren Schrift dargestellt!</small></p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_font_style.asp
http://htmlplayground.com/#tag_small

<sub> </sub>

Tiefergestellter Text ( Beschreibung )

Mit dem <sub>-Element wird der eingegebene Textabschnitt tiefergestellt ( z.B. für Formeln, Fußnoten etc.) 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>sub-Element: Definition tiefergestellter Text</title>
</head>

<body>
<h1>Definition: tiefergestellter Text</h1>
<p>Das ist ein normaler Textabschnitt;</p>
<p>Hier wird <sub>ein Teil des Textes</sub> tiefergestellt dargestellt.</p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

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

<sup> </sup>

Höhergestellter Text ( Beschreibung )

Mit dem <sup>-Element wird der eingegebene Textabschnitt höhergestellt (z.B. für Formeln, Fußnoten etc.) 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>sup-Element: Definition höhergestellter Text</title>
</head>

<body>
<h1>Definition höhergestellter Text</h1>
<p>Das ist ein normaler Textabschnitt</p>
<p>Hier wird <sup>ein Teil des Textes</sup> höhergestellt dargestellt.</p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

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

<tt> </tt>

Text in Schreibmaschinenschrift ( Beschreibung )

Mit dem <tt>-Element wird der eingegebene Textabschnitt in Schreibmaschinenschrift 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>tt-Element: Definition Text in Schreibmaschinenschrift</title>
</head>

<body>
<h1>Definition Text in Schreibmaschinenschrift (teletype)</h1>
<p>Das ist ein normaler Textabschnitt;</p>
<p><tt>Dieser Text wurde mit dem tt-Element ausgezeichnet und wird<br />
in Schreibmaschinenschrift dargestellt.</tt></p>
</body>

</html>
Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_font_style.asp
http://htmlplayground.com/#tag_tt

Veröffentlicht in XHTML-Elemente | Verschlagwortet mit : b, big, fettgedruckter Text, großer Text, höhergestellter Text, i, kleinerer Text, kursiver Text, physische Auszeichnung, Schreibmaschinenschrift, small, sub, sup, tiefergestellter Text, tt | Kommentar schreiben »

Ältere Artikel

	sura1 zu Online-Tool: Name in tibetisch…
	Susanne zu Online-Tool: Name in tibetisch…
	Jason Palmer zu www.antipodr.com – Punkt…
	sura1 zu Machen Sie Musik mit Ihrer Tas…
	Jay zu Machen Sie Musik mit Ihrer Tas…

Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Blog-Statistik

Top-Beiträge

Kategorien

Besucher

Creative Commons

Favorites

Kommentare

Kalender

Flickr Photos

Neueste Artikel

Blogarchiv

IP-Adresse

Traffic Feeds

Allgemeine Links

Blogroll

Galerien

Künstlerbedarf

Künstlerwebseiten

Maler/Künstler

Museen

Onlinekunst

Wordpress

Meta

Abonnieren

Archiv für die Kategorie ‘XHTML-Elemente’

XHTML-Elemente: Referenzierung

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/

Beispiel:

Beispiel: ( hier ansehen!)

Weitere Beispiele:

Beispiel:

Beispiel: ( hier ansehen!)

Weitere Beispiele:

Beispiel:

Beispiel: ( hier ansehen!)

Weitere Beispiele:

Beispiel:

Beispiel: ( hier ansehen!)

Weitere Beispiele:

Beispiel:

Beispiel: ( hier ansehen!)

Weitere Beispiele:

Beispiel:

Beispiel: ( hier ansehen!)

Weitere Beispiele:

Beispiel:

Beispiel: ( hier ansehen!)

Weitere Beispiele:

Beispiel:

Beispiel: ( hier ansehen!)

Weitere Beispiele:

XHTML-Elemente: Formulare

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/

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel (9 verschiedene Eingabefelder):

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

Beispiel:

Beispiel: ( hier ansehen!)

weitere Beispiele

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/

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/

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/

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/

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/