Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

XHTML-Elemente: Referenzierung

Posted by sura1 - 21. August 2008

Bookmark and Share

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

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: