Beispiel:HTML-Links-4-extern.html
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>externe und interne Links kennzeichnen</title> <style>
a {
padding-right: 2em;
color: blue;
background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpolygon%20fill%3D%22blue%22%20points%3D%222%2C5%203%2C5%203%2C3%209%2C3%209%2C9%207%2C9%207%2C10%2010%2C10%2010%2C2%202%2C2%22/%3E%3Cpolygon%20points%3D%220.5%2C10.5%203.5%2C7.5%202%2C6%205.5%2C6%205.5%2C10%204.5%2C8.5%201.5%2C11.5%22/%3E%3C/svg%3E") no-repeat right;
/* <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon fill="blue" points="2,5 3,5 3,3 9,3 9,9 7,9 7,10 10,10 10,2 2,2"/><polygon points="0.5,10.5 3.5,7.5 2,6 5.5,6 5.5,10 4.5,8.5 1.5,11.5"/></svg> */
}
a:hover, a:focus {
color: purple;
background: #fffbf0 url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpolygon%20fill%3D%22purple%22%20points%3D%222%2C5%203%2C5%203%2C3%209%2C3%209%2C9%207%2C9%207%2C10%2010%2C10%2010%2C2%202%2C2%22/%3E%3Cpolygon%20points%3D%220.5%2C10.5%203.5%2C7.5%202%2C6%205.5%2C6%205.5%2C10%204.5%2C8.5%201.5%2C11.5%22/%3E%3C/svg%3E") no-repeat right;
}
a[href^="http"] {
background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpolygon%20fill%3D%22blue%22%20points%3D%222%2C2%205%2C2%205%2C3%203%2C3%203%2C9%209%2C9%209%2C7%2010%2C7%2010%2C10%202%2C10%22/%3E%3Cpolygon%20points%3D%226.2%2C2%2010%2C2%2010%2C5.8%208.6%2C4.4%206.5%2C6.5%205.5%2C5.5%207.6%2C3.4%22/%3E%3C/svg%3E") no-repeat right;
/* <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><polygon fill="blue" points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/><polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/></svg> */
}
a[href^="http"]:hover, a[href^="http"]:focus {
background: #fffbf0 url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpolygon%20fill%3D%22purple%22%20points%3D%222%2C2%205%2C2%205%2C3%203%2C3%203%2C9%209%2C9%209%2C7%2010%2C7%2010%2C10%202%2C10%22/%3E%3Cpolygon%20points%3D%226.2%2C2%2010%2C2%2010%2C5.8%208.6%2C4.4%206.5%2C6.5%205.5%2C5.5%207.6%2C3.4%22/%3E%3C/svg%3E") no-repeat right;
}
a[href^="mailto"] {
background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22blue%22%20d%3D%22M1%2C4%20h10%20v6%20h-10z%20l10%2C6m0%2C-6%20l-10%2C6%22/%3E%3C/svg%3E") no-repeat right;
/* <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="blue" d="M1,4 h10 v6 h-10z l10,6m0,-6 l-10,6"/></svg> */
}
a[href^="mailto"]:hover, a[href^="mailto"]:focus {
background: #fffbf0 url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22purple%22%20d%3D%22M1%2C4%20h10%20v6%20h-10z%20l10%2C6m0%2C-6%20l-10%2C6%22/%3E%3C/svg%3E") no-repeat right;
}
- target h2 {color: #c82f04;}
h2 ~ p {
margin-bottom: 15em; /* um den internen Seitenanker weiter nach unten zu bringen */ }
body {max-width: 50em;margin: 0 auto;} i </style> </head>
<body>
externe und interne Links mit Hintergrundgrafiken kennzeichnen
Eine der wichtigsten Eigenschaften von HTML ist die Möglichkeit, <a href="https://wiki.selfhtml.org/wiki/HTML/Referenzieren in HTML">Verweise</a> zu definieren. Verweise ("Hyperlinks") können zu …
- <a href="#footer">einem Verweis innerhalb dieser Seite, </a>
- <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML_a-Element3.html#drittens"> einem Verweis zu einem Ziel in einer anderen Seite</a>,
- aber auch zu beliebigen anderen Adressen im World Wide Web und sogar zu Internet-Adressen, die nicht Teil des Webs sind. <a href="#fnref:refs" rev="footnote">[1] ↵ </a>
Durch diese einfache Grundeigenschaft eröffnet HTML völlig neue Welten. Das Bewegen zwischen räumlich weit entfernten Rechnern wird bei modernen grafischen Web-Browsern auf einen Mausklick reduziert. In Ihren eigenen HTML-Dateien können Sie Verweise notieren und dadurch inhaltliche Verknüpfungen zwischen Ihren eigenen Inhalten und denen anderer Anbieter herstellen. Auf dieser Grundidee beruht letztlich das gesamte World Wide Web, und dieser Grundidee verdankt es seinen Namen.
Eine zweite Überschrift
Mailen Sie uns an: <a href="mailto:jemand@example.com">jemand@example.com</a>
etwas Raum
<footer id="footer">
Quellen:
[^1] <a id="fnref:refs" href="https://adactio.com/articles/10887">Artikel von Jeremy Keith zur Geschichte des Internets: <A> is for Anchor</a> <a class="backlink" href="#">zurück</a>
<a class="toplink" href="#">zum Seitenanfang</a>
</footer>
</body> </html>
