Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu01:verweise [2025/02/07 07:48] – kdemirci
+++ modul:m287:learningunits:lu01:verweise [2025/02/07 08:05] (aktuell) – kdemirci
@@ Zeile 1: / Zeile 1: @@
 ====== LU01b - Verweise und Anker ======
+===== Lernziele =====
+  - Ich kann Verweise (Hyperlinks) in einer Webseite hinzufügen und anhand der Attribute (z.B. href, id) anpassen kann. HTML-Elemente/Tags sind <a>.
+  - Ich kenne bei den Verweisen den Unterschied zwischen absoluter und relativer Verweis.
+  - Ich kann Verweise syntaktisch korrekt erstellen und kann Merkmale und Eigenschaften für den korrekten Aufbau aufzählen.
+  - Ich kenn den Zweck von lokalen Verweisen (Anker).
+  - Ich kann lokale Verweise (Anker) korrekt erstellen.
 ===== Einleitung =====
@@ Zeile 96: / Zeile 103: @@
 E-Mail-Verweise beginnen bei <color #ed1c24>href="mailto:EMAIL-ADRESSE"</color>. Damit wird die E‐Mail-Anwendung mit einer bestimmten E-Mail-Adresse geöffnet.
-==== Beispiel ====
 <code html>
@@ Zeile 106: / Zeile 111: @@
 Telefon-Verweise beginnen bei <color #ed1c24>href="tel:NUMMER"</color>. Damit wird die Nummer gewählt und angerufen. (Desktop z.B. Facetime oder Online-Telefonie)
-==== Beispiel ====
 <code html>
@@ Zeile 121: / Zeile 124: @@
 </code>
+===== Anker - Links zu bestimmten Teilen einer Webseite setzen =====
+Nichts kann für den Besucher lästiger sein, als eine sehr lange wissenschaftliche Abhandlung eines speziellen Themas auf einer Webseite zu lesen und dabei sehr lange hoch- und herunterscrollen zu müssen, um zu einem speziellen Abschnitt zu gelangen. Für solche Fälle können Sie sogenannte Anker mit dem globalen Attribut id setzen, den Sie dann mit einem gewöhnlichen Link mit dem a-Element anspringen können. Vorbildlich werden solche Zielanker z. B. bei Wikipedia für das Inhaltsver- zeichnis eines Themas verwendet.
+Für eine Verlinkung zu einem bestimmten Bereich einer Webseite benötigen Sie nur:
+  * einen Anker (Sprungmarke), den Sie mit dem Attribut <color #ed1c24>id="ankername"</color> erstellen. Zum Beispiel: <color #ed1c24><h1 id="ankername">Überschrift xyz</h1></color>
+  * einen Link, der auf den Anker mit <color #ed1c24>href="#ankername"</color> verweist. Hierzu wird das Doppelkreuz-Zeichen <color #ed1c24>#</color> vor den Ankernamen geschrieben. Zum Beispiel: <color #ed1c24><a href="#ankername">Zur Überschrift xyz springen</a></color>
+===== Beispiel =====
+<code html>
+<!doctype html>
+<html lang="de">
+  <head>
+    <title>Startseite - Blog</title>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+  <h1 id="top">Inhaltsverzeichnis</h1>
+<ul>
+  <li><a href="#intro">Einführung in HTML</a></li>
+  <li><a href="#syntax">Die Syntax von HTML</a></li>
+  <li><a href="#versionen">Versionen von HTML</a></li>
+  <li><a href="#techniken">Techniken rund um HTML</a></li>
+  <li><a href="#praxis">Einstieg in die Praxis</a></li>
+</ul>
+<section>
+	<h1 id="intro">Einführung in HTML</h1>
+	<p>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla nisl id dui convallis ullamcorper. Mauris ligula nisi, volutpat placerat lobortis non, pellentesque in mi. Nam id posuere turpis. Nunc tincidunt orci vestibulum libero auctor, at vulputate augue dictum. Nulla facilisis, ligula at viverra consequat, ipsum neque semper libero, et porttitor neque leo ut dui. Sed eu magna facilisis, mollis eros sit amet, molestie tortor. Curabitur aliquet malesuada tortor, sed condimentum libero accumsan quis. Curabitur id pulvinar ex. Vivamus in commodo neque. Sed fermentum ante non metus volutpat, sit amet tincidunt mauris tempor. Phasellus fringilla nibh dolor, vel ullamcorper sapien vehicula a. Donec justo felis, mollis sed metus in, aliquam vehicula felis. Nulla auctor maximus dui in faucibus. Curabitur dolor felis, vestibulum et hendrerit ac, tempor sit amet lorem. Nam eget lorem volutpat, condimentum dolor maximus, tristique tellus. Sed placerat mi arcu, faucibus placerat nulla placerat non.
+Aliquam sed ullamcorper nibh, in finibus felis. Aenean dolor leo, interdum a volutpat quis, porttitor ac sapien. Nulla posuere arcu quis felis ultricies, eget elementum turpis pellentesque. Aenean commodo id lorem sed sodales. In pretium viverra vestibulum. Phasellus felis ipsum, dictum nec nulla ac, maximus vulputate lacus. Donec sed leo egestas, efficitur eros eget, lobortis est. Curabitur volutpat pretium lorem, in maximus lectus congue nec. Ut dapibus augue eget dui maximus malesuada. Praesent vel urna dapibus, tristique elit et, vehicula velit. Aenean nec eros ullamcorper enim bibendum posuere vel nec velit. Cras hendrerit justo non dapibus rutrum. Nunc sed lorem in sem malesuada semper eu ac ligula. Praesent sagittis bibendum nisl at euismod.
+Sed vehicula aliquam tortor, ac scelerisque eros dignissim eu. Nulla rutrum turpis a nulla eleifend, nec rhoncus diam lacinia. Sed interdum, odio id semper maximus, erat mauris suscipit leo, nec egestas nibh ante quis dolor. Vivamus in ex ut sem hendrerit ullamcorper. Duis tristique nisi sit amet interdum pulvinar. Mauris sed urna sollicitudin, pharetra massa sit amet, posuere felis. Nunc eros velit, dictum in quam sed, vehicula rutrum nunc. Suspendisse facilisis et quam eu mattis.
+Aliquam vitae porttitor massa, quis imperdiet lorem. Mauris accumsan rutrum finibus. Aliquam placerat, quam non dictum cursus, lacus elit tincidunt tortor, in scelerisque turpis lorem congue augue. Nullam sed ex placerat, vestibulum arcu ut, ultrices purus. Aliquam in sagittis purus, sed mollis lorem. Morbi commodo cursus tortor eget viverra. Etiam lobortis leo sit amet lorem efficitur pellentesque. Praesent non tristique turpis. Nam auctor mi non tincidunt mattis. Aliquam sit amet dui sed nibh volutpat rutrum nec ac quam. Nulla aliquet nisl id ligula malesuada ultricies ac non ante.
+Nulla non est vitae nisl sodales pellentesque ac ac sapien. Aliquam iaculis luctus tempor. Etiam bibendum pharetra risus sed iaculis. Nunc varius justo non justo rutrum tincidunt. Aliquam volutpat, eros quis finibus convallis, nisl dolor faucibus orci, vel mattis urna eros nec urna. Cras accumsan, sem quis ultrices iaculis, nisl dolor ornare nulla, vitae interdum nulla massa a diam. Donec feugiat turpis quis mi interdum viverra. Vivamus pulvinar vitae metus sit amet egestas. Phasellus ac ultrices sem. Cras ut pretium erat. Etiam fermentum sodales bibendum. Nullam mattis velit ipsum, eu pharetra tellus faucibus ac. Cras orci nisi, molestie quis viverra a, tempor ac ex. Aliquam et mi nibh.
+	</p>
+	<p><a href="#top">Zum Inhaltsverzeichnis</a></p>
+</section>
+<section>
+<h2 id="syntax">Die Syntax von HTML</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla nisl id dui convallis ullamcorper. Mauris ligula nisi, volutpat placerat lobortis non, pellentesque in mi. Nam id posuere turpis. Nunc tincidunt orci vestibulum libero auctor, at vulputate augue dictum. Nulla facilisis, ligula at viverra consequat, ipsum neque semper libero, et porttitor neque leo ut dui. Sed eu magna facilisis, mollis eros sit amet, molestie tortor. Curabitur aliquet malesuada tortor, sed condimentum libero accumsan quis. Curabitur id pulvinar ex. Vivamus in commodo neque. Sed fermentum ante non metus volutpat, sit amet tincidunt mauris tempor. Phasellus fringilla nibh dolor, vel ullamcorper sapien vehicula a. Donec justo felis, mollis sed metus in, aliquam vehicula felis. Nulla auctor maximus dui in faucibus. Curabitur dolor felis, vestibulum et hendrerit ac, tempor sit amet lorem. Nam eget lorem volutpat, condimentum dolor maximus, tristique tellus. Sed placerat mi arcu, faucibus placerat nulla placerat non.
+Aliquam sed ullamcorper nibh, in finibus felis. Aenean dolor leo, interdum a volutpat quis, porttitor ac sapien. Nulla posuere arcu quis felis ultricies, eget elementum turpis pellentesque. Aenean commodo id lorem sed sodales. In pretium viverra vestibulum. Phasellus felis ipsum, dictum nec nulla ac, maximus vulputate lacus. Donec sed leo egestas, efficitur eros eget, lobortis est. Curabitur volutpat pretium lorem, in maximus lectus congue nec. Ut dapibus augue eget dui maximus malesuada. Praesent vel urna dapibus, tristique elit et, vehicula velit. Aenean nec eros ullamcorper enim bibendum posuere vel nec velit. Cras hendrerit justo non dapibus rutrum. Nunc sed lorem in sem malesuada semper eu ac ligula. Praesent sagittis bibendum nisl at euismod.
+Sed vehicula aliquam tortor, ac scelerisque eros dignissim eu. Nulla rutrum turpis a nulla eleifend, nec rhoncus diam lacinia. Sed interdum, odio id semper maximus, erat mauris suscipit leo, nec egestas nibh ante quis dolor. Vivamus in ex ut sem hendrerit ullamcorper. Duis tristique nisi sit amet interdum pulvinar. Mauris sed urna sollicitudin, pharetra massa sit amet, posuere felis. Nunc eros velit, dictum in quam sed, vehicula rutrum nunc. Suspendisse facilisis et quam eu mattis.
+Aliquam vitae porttitor massa, quis imperdiet lorem. Mauris accumsan rutrum finibus. Aliquam placerat, quam non dictum cursus, lacus elit tincidunt tortor, in scelerisque turpis lorem congue augue. Nullam sed ex placerat, vestibulum arcu ut, ultrices purus. Aliquam in sagittis purus, sed mollis lorem. Morbi commodo cursus tortor eget viverra. Etiam lobortis leo sit amet lorem efficitur pellentesque. Praesent non tristique turpis. Nam auctor mi non tincidunt mattis. Aliquam sit amet dui sed nibh volutpat rutrum nec ac quam. Nulla aliquet nisl id ligula malesuada ultricies ac non ante.
+Nulla non est vitae nisl sodales pellentesque ac ac sapien. Aliquam iaculis luctus tempor. Etiam bibendum pharetra risus sed iaculis. Nunc varius justo non justo rutrum tincidunt. Aliquam volutpat, eros quis finibus convallis, nisl dolor faucibus orci, vel mattis urna eros nec urna. Cras accumsan, sem quis ultrices iaculis, nisl dolor ornare nulla, vitae interdum nulla massa a diam. Donec feugiat turpis quis mi interdum viverra. Vivamus pulvinar vitae metus sit amet egestas. Phasellus ac ultrices sem. Cras ut pretium erat. Etiam fermentum sodales bibendum. Nullam mattis velit ipsum, eu pharetra tellus faucibus ac. Cras orci nisi, molestie quis viverra a, tempor ac ex. Aliquam et mi nibh.</p>
+<p><a href="#top">Zum Inhaltsverzeichnis</a></p>
+</section>
+<section>
+<h2 id="versionen">Versionen von HTML</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla nisl id dui convallis ullamcorper. Mauris ligula nisi, volutpat placerat lobortis non, pellentesque in mi. Nam id posuere turpis. Nunc tincidunt orci vestibulum libero auctor, at vulputate augue dictum. Nulla facilisis, ligula at viverra consequat, ipsum neque semper libero, et porttitor neque leo ut dui. Sed eu magna facilisis, mollis eros sit amet, molestie tortor. Curabitur aliquet malesuada tortor, sed condimentum libero accumsan quis. Curabitur id pulvinar ex. Vivamus in commodo neque. Sed fermentum ante non metus volutpat, sit amet tincidunt mauris tempor. Phasellus fringilla nibh dolor, vel ullamcorper sapien vehicula a. Donec justo felis, mollis sed metus in, aliquam vehicula felis. Nulla auctor maximus dui in faucibus. Curabitur dolor felis, vestibulum et hendrerit ac, tempor sit amet lorem. Nam eget lorem volutpat, condimentum dolor maximus, tristique tellus. Sed placerat mi arcu, faucibus placerat nulla placerat non.
+Aliquam sed ullamcorper nibh, in finibus felis. Aenean dolor leo, interdum a volutpat quis, porttitor ac sapien. Nulla posuere arcu quis felis ultricies, eget elementum turpis pellentesque. Aenean commodo id lorem sed sodales. In pretium viverra vestibulum. Phasellus felis ipsum, dictum nec nulla ac, maximus vulputate lacus. Donec sed leo egestas, efficitur eros eget, lobortis est. Curabitur volutpat pretium lorem, in maximus lectus congue nec. Ut dapibus augue eget dui maximus malesuada. Praesent vel urna dapibus, tristique elit et, vehicula velit. Aenean nec eros ullamcorper enim bibendum posuere vel nec velit. Cras hendrerit justo non dapibus rutrum. Nunc sed lorem in sem malesuada semper eu ac ligula. Praesent sagittis bibendum nisl at euismod.
+Sed vehicula aliquam tortor, ac scelerisque eros dignissim eu. Nulla rutrum turpis a nulla eleifend, nec rhoncus diam lacinia. Sed interdum, odio id semper maximus, erat mauris suscipit leo, nec egestas nibh ante quis dolor. Vivamus in ex ut sem hendrerit ullamcorper. Duis tristique nisi sit amet interdum pulvinar. Mauris sed urna sollicitudin, pharetra massa sit amet, posuere felis. Nunc eros velit, dictum in quam sed, vehicula rutrum nunc. Suspendisse facilisis et quam eu mattis.
+Aliquam vitae porttitor massa, quis imperdiet lorem. Mauris accumsan rutrum finibus. Aliquam placerat, quam non dictum cursus, lacus elit tincidunt tortor, in scelerisque turpis lorem congue augue. Nullam sed ex placerat, vestibulum arcu ut, ultrices purus. Aliquam in sagittis purus, sed mollis lorem. Morbi commodo cursus tortor eget viverra. Etiam lobortis leo sit amet lorem efficitur pellentesque. Praesent non tristique turpis. Nam auctor mi non tincidunt mattis. Aliquam sit amet dui sed nibh volutpat rutrum nec ac quam. Nulla aliquet nisl id ligula malesuada ultricies ac non ante.
+Nulla non est vitae nisl sodales pellentesque ac ac sapien. Aliquam iaculis luctus tempor. Etiam bibendum pharetra risus sed iaculis. Nunc varius justo non justo rutrum tincidunt. Aliquam volutpat, eros quis finibus convallis, nisl dolor faucibus orci, vel mattis urna eros nec urna. Cras accumsan, sem quis ultrices iaculis, nisl dolor ornare nulla, vitae interdum nulla massa a diam. Donec feugiat turpis quis mi interdum viverra. Vivamus pulvinar vitae metus sit amet egestas. Phasellus ac ultrices sem. Cras ut pretium erat. Etiam fermentum sodales bibendum. Nullam mattis velit ipsum, eu pharetra tellus faucibus ac. Cras orci nisi, molestie quis viverra a, tempor ac ex. Aliquam et mi nibh.</p>
+<p><a href="#top">Zum Inhaltsverzeichnis</a></p>
+</section>
+<section>
+<h2 id="techniken">Technik rund um HTML</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla nisl id dui convallis ullamcorper. Mauris ligula nisi, volutpat placerat lobortis non, pellentesque in mi. Nam id posuere turpis. Nunc tincidunt orci vestibulum libero auctor, at vulputate augue dictum. Nulla facilisis, ligula at viverra consequat, ipsum neque semper libero, et porttitor neque leo ut dui. Sed eu magna facilisis, mollis eros sit amet, molestie tortor. Curabitur aliquet malesuada tortor, sed condimentum libero accumsan quis. Curabitur id pulvinar ex. Vivamus in commodo neque. Sed fermentum ante non metus volutpat, sit amet tincidunt mauris tempor. Phasellus fringilla nibh dolor, vel ullamcorper sapien vehicula a. Donec justo felis, mollis sed metus in, aliquam vehicula felis. Nulla auctor maximus dui in faucibus. Curabitur dolor felis, vestibulum et hendrerit ac, tempor sit amet lorem. Nam eget lorem volutpat, condimentum dolor maximus, tristique tellus. Sed placerat mi arcu, faucibus placerat nulla placerat non.
+Aliquam sed ullamcorper nibh, in finibus felis. Aenean dolor leo, interdum a volutpat quis, porttitor ac sapien. Nulla posuere arcu quis felis ultricies, eget elementum turpis pellentesque. Aenean commodo id lorem sed sodales. In pretium viverra vestibulum. Phasellus felis ipsum, dictum nec nulla ac, maximus vulputate lacus. Donec sed leo egestas, efficitur eros eget, lobortis est. Curabitur volutpat pretium lorem, in maximus lectus congue nec. Ut dapibus augue eget dui maximus malesuada. Praesent vel urna dapibus, tristique elit et, vehicula velit. Aenean nec eros ullamcorper enim bibendum posuere vel nec velit. Cras hendrerit justo non dapibus rutrum. Nunc sed lorem in sem malesuada semper eu ac ligula. Praesent sagittis bibendum nisl at euismod.
+Sed vehicula aliquam tortor, ac scelerisque eros dignissim eu. Nulla rutrum turpis a nulla eleifend, nec rhoncus diam lacinia. Sed interdum, odio id semper maximus, erat mauris suscipit leo, nec egestas nibh ante quis dolor. Vivamus in ex ut sem hendrerit ullamcorper. Duis tristique nisi sit amet interdum pulvinar. Mauris sed urna sollicitudin, pharetra massa sit amet, posuere felis. Nunc eros velit, dictum in quam sed, vehicula rutrum nunc. Suspendisse facilisis et quam eu mattis.
+Aliquam vitae porttitor massa, quis imperdiet lorem. Mauris accumsan rutrum finibus. Aliquam placerat, quam non dictum cursus, lacus elit tincidunt tortor, in scelerisque turpis lorem congue augue. Nullam sed ex placerat, vestibulum arcu ut, ultrices purus. Aliquam in sagittis purus, sed mollis lorem. Morbi commodo cursus tortor eget viverra. Etiam lobortis leo sit amet lorem efficitur pellentesque. Praesent non tristique turpis. Nam auctor mi non tincidunt mattis. Aliquam sit amet dui sed nibh volutpat rutrum nec ac quam. Nulla aliquet nisl id ligula malesuada ultricies ac non ante.
+Nulla non est vitae nisl sodales pellentesque ac ac sapien. Aliquam iaculis luctus tempor. Etiam bibendum pharetra risus sed iaculis. Nunc varius justo non justo rutrum tincidunt. Aliquam volutpat, eros quis finibus convallis, nisl dolor faucibus orci, vel mattis urna eros nec urna. Cras accumsan, sem quis ultrices iaculis, nisl dolor ornare nulla, vitae interdum nulla massa a diam. Donec feugiat turpis quis mi interdum viverra. Vivamus pulvinar vitae metus sit amet egestas. Phasellus ac ultrices sem. Cras ut pretium erat. Etiam fermentum sodales bibendum. Nullam mattis velit ipsum, eu pharetra tellus faucibus ac. Cras orci nisi, molestie quis viverra a, tempor ac ex. Aliquam et mi nibh.</p>
+<p><a href="#top">Zum Inhaltsverzeichnis</a></p>
+</section>
+<section>
+<h2 id="praxis">Einstieg in die Praxis</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla nisl id dui convallis ullamcorper. Mauris ligula nisi, volutpat placerat lobortis non, pellentesque in mi. Nam id posuere turpis. Nunc tincidunt orci vestibulum libero auctor, at vulputate augue dictum. Nulla facilisis, ligula at viverra consequat, ipsum neque semper libero, et porttitor neque leo ut dui. Sed eu magna facilisis, mollis eros sit amet, molestie tortor. Curabitur aliquet malesuada tortor, sed condimentum libero accumsan quis. Curabitur id pulvinar ex. Vivamus in commodo neque. Sed fermentum ante non metus volutpat, sit amet tincidunt mauris tempor. Phasellus fringilla nibh dolor, vel ullamcorper sapien vehicula a. Donec justo felis, mollis sed metus in, aliquam vehicula felis. Nulla auctor maximus dui in faucibus. Curabitur dolor felis, vestibulum et hendrerit ac, tempor sit amet lorem. Nam eget lorem volutpat, condimentum dolor maximus, tristique tellus. Sed placerat mi arcu, faucibus placerat nulla placerat non.
+Aliquam sed ullamcorper nibh, in finibus felis. Aenean dolor leo, interdum a volutpat quis, porttitor ac sapien. Nulla posuere arcu quis felis ultricies, eget elementum turpis pellentesque. Aenean commodo id lorem sed sodales. In pretium viverra vestibulum. Phasellus felis ipsum, dictum nec nulla ac, maximus vulputate lacus. Donec sed leo egestas, efficitur eros eget, lobortis est. Curabitur volutpat pretium lorem, in maximus lectus congue nec. Ut dapibus augue eget dui maximus malesuada. Praesent vel urna dapibus, tristique elit et, vehicula velit. Aenean nec eros ullamcorper enim bibendum posuere vel nec velit. Cras hendrerit justo non dapibus rutrum. Nunc sed lorem in sem malesuada semper eu ac ligula. Praesent sagittis bibendum nisl at euismod.
+Sed vehicula aliquam tortor, ac scelerisque eros dignissim eu. Nulla rutrum turpis a nulla eleifend, nec rhoncus diam lacinia. Sed interdum, odio id semper maximus, erat mauris suscipit leo, nec egestas nibh ante quis dolor. Vivamus in ex ut sem hendrerit ullamcorper. Duis tristique nisi sit amet interdum pulvinar. Mauris sed urna sollicitudin, pharetra massa sit amet, posuere felis. Nunc eros velit, dictum in quam sed, vehicula rutrum nunc. Suspendisse facilisis et quam eu mattis.
+Aliquam vitae porttitor massa, quis imperdiet lorem. Mauris accumsan rutrum finibus. Aliquam placerat, quam non dictum cursus, lacus elit tincidunt tortor, in scelerisque turpis lorem congue augue. Nullam sed ex placerat, vestibulum arcu ut, ultrices purus. Aliquam in sagittis purus, sed mollis lorem. Morbi commodo cursus tortor eget viverra. Etiam lobortis leo sit amet lorem efficitur pellentesque. Praesent non tristique turpis. Nam auctor mi non tincidunt mattis. Aliquam sit amet dui sed nibh volutpat rutrum nec ac quam. Nulla aliquet nisl id ligula malesuada ultricies ac non ante.
+Nulla non est vitae nisl sodales pellentesque ac ac sapien. Aliquam iaculis luctus tempor. Etiam bibendum pharetra risus sed iaculis. Nunc varius justo non justo rutrum tincidunt. Aliquam volutpat, eros quis finibus convallis, nisl dolor faucibus orci, vel mattis urna eros nec urna. Cras accumsan, sem quis ultrices iaculis, nisl dolor ornare nulla, vitae interdum nulla massa a diam. Donec feugiat turpis quis mi interdum viverra. Vivamus pulvinar vitae metus sit amet egestas. Phasellus ac ultrices sem. Cras ut pretium erat. Etiam fermentum sodales bibendum. Nullam mattis velit ipsum, eu pharetra tellus faucibus ac. Cras orci nisi, molestie quis viverra a, tempor ac ex. Aliquam et mi nibh.</p>
+<p><a href="#top">Zum Inhaltsverzeichnis</a></p>
+</section>
+</body>
+</html>
+</code>