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/
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ölf Boxkämpfer jagen Viktor quer über den großen
Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim.
Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen
Mäxchens Vögel Rüben, Joghurt und Quark.
"Fix, Schwyz! " quäkt Jürgen blöd vom Paß.</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ünscht, nur, weil er Schmerz ist, es sei denn, es kommt
zu zufälligen Umständen, in denen Mühen und Schmerz
ihm große Freude bereiten können. Um ein triviales Beispiel
zu nehmen, wer von uns unterzieht sich je anstrengender
körperlicher Betä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änder
Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie
in Buchstabhausen an der Küste des Semantik, eines großen
Sprachozeans. Ein kleines Bächlein namens Duden fließt durch
ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein
paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund
fliegen. Nicht einmal von der allmä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ünscht, nur, weil er Schmerz ist, es sei denn,es kommt zu
zufälligen Umständen, in denen Mühen und Schmerz ihm
große Freude bereiten können. Um ein triviales Beispiel
zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher
Betätigung, auß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>
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>
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>
Weitere Beispiele:
http://www.w3schools.com/tags/tag_base.asp
http://htmlplayground.com/#tag_base
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>
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>
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>
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>
Weitere Beispiele:
http://www.w3schools.com/tags/tag_object.asp
http://htmlplayground.com/#tag_object
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>
Weitere Beispiele:
http://www.w3schools.com/tags/tag_param.asp
http://htmlplayground.com/#tag_param
Sura 1 Artworks 