Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Posts Tagged ‘Anker’

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

Posted in XHTML-Elemente | Verschlagwortet mit: , , , , , , , , , , , , , , , , , | Leave a Comment »

XHTML-Übung: Anker und Sprungmarken definieren

Posted by sura1 - 21. Juli 2008

Bookmark and Share

Anker (Sprungmarken) definieren:

Ein Anker bezeichnet eine Sprungmarke innerhalb eines HTML-Dokuments.

Sie können innerhalb einer HTML-Datei Anker definieren. Dann können Sie Verweise zu solchen Ankern setzen, um einen Sprung genau an die Ankerstelle innerhalb der Datei zu veranlassen. Der Verweis kann in der gleichen Datei stehen. Dann wird einfach ein Sprung innerhalb der angezeigten Seite ausgeführt. Der Verweis kann aber auch in einer anderen Datei stehen. Dann wird die Zieldatei geladen, und der Browser springt, sobald er die Stelle mit dem Anker geladen hat, an die entsprechende Stelle innerhalb der Datei.

Ein Anker wird genau wie ein Verweis mit Hilfe des a-Elements erzeugt. Der Unterschied besteht darin, dass kein Attribut href notiert wird, sondern stattdessen ein Attribut name. Ein kompletter Anker sieht also so aus:

<a name=“ankername“>…</a>

Inhalt des Ankers

Was Sie zwischen <a name=“ankername“> und </a> als Inhalt notieren, ist das Sprungziel für Verweise, die zu diesem Anker führen. Es ist durchaus erlaubt, einen leeren Anker zu notieren, also <a name=“ankername“></a>. Einige ältere Browser führen Verweise zu leeren Ankern jedoch nicht aus, weshalb es besser ist, den Anker immer um einen konkreten Inhalt zu setzen.

Wenn Sie also beispielsweise eine Überschrift als Anker definieren wollen, was ja durchaus typisch ist, dann notieren Sie wie im obigen Beispiel in der Überschrift den Anker und darin den Text der Überschrift.

Hierzu zwei vollständige Beispiele:

1) Anker_1.html

Zu Beginn des Dokumentes steht ein Anker mit der id=“oben“. Dann folgen vier Punkte innerhalb einer ungeordneten Liste mit Links zu #kapitel1, #kapitel2, #kapitel3, #kapitel4. Darunter befinden sich 4 Absätze mit eben diesen Ankern.

So kann man mit einem Klick auf die einzelnen Kapitel zu den entsprechenden Stellen im Dokument springen, d.h. das Fenster wird nach unten gescrollt. Das funktioniert jedoch nur, wenn das Browserfenster kleiner ist als der dargestellte Inhalt. Am Ende eines jeden Kapitels befindet sich der Verweis wieder nach oben.

Zur Formatierung habe ich in den Beispielen im Head-Bereich ein CSS eingebaut:

Die Hintergrundfarbe des body ist #000 (schwarz), die Schriftfarbe ist ein helles Grau (color: #bfbfbf), der Innenabstand beträgt 20px (padding: 20px).

Über die in der Klammer angeführten CSS-Befehle (ul, ul li a, ul li a:hover, .top a, .top a:hover) werden die Anker und Sprungmarken optisch aufgewertet.

Fertiges Beispiel: Bitte Link oder Grafik anklicken!

Link: anker_1.html

Quellcode: hier anklicken!!

1) Anker_2.html

Beispiel Nr. 2 ist im Prinzip genauso aufgebaut wie Beispiel Nummer 1. Die einzige Ausnahme findet sich im eingebetteten CSS. Innerhalb des body-tags (Hintergrundfarbe: background-color: 3f3f3f) gibt es eine div-Box mit der id=“wrapper“.

Diese hat eine Breite von 800 px (width: 800px) und wird über die Außenabstände margin (20px auto) mittig auf der Webseite angeordnet; außerdem erhält diese einen Rand in der Breite von 4px (border: 4px solid #fff;), eine Hintergrundfarbe (background-color: #000;), eine eigene Schriftfarbe (color: #bfbfbf) und einen Innenabstand von 20px (padding: 20px).

Durch diese zusätzliche Formatierung im Stylesheet ist es für Sie nicht mehr notwendig, das Browserfenster zu verkleinern, wenn Sie die Funktionsweise von Ankern innerhalb einer Datei sehen möchten. Sie klicken auf eines der vier Kapitel in der ungeordneten Liste am Seitenanfang und gelangen durch diese Sprungmarken sofort zur gesuchten Textstelle.

Fertiges Beispiel: Bitte Link oder Grafik anklicken!

Link: anker_2.html

Quellcode: hier anklicken!!

Download Beispieldateien: (9,50 KB zip-Datei) – Bitte Download-Button anklicken!!

Posted in HTML | Verschlagwortet mit: , , , , , , , | Leave a Comment »