Beispiel:HTML-Links-4-extern.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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>
  <h1>externe und interne Links mit Hintergrundgrafiken kennzeichnen</h1>
<p>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 &hellip;</p>
<ul>
	<li><a href="#footer">einem Verweis innerhalb dieser Seite, </a></li>
  <li><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>,</li>
	<li>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"><sup>[1]</sup> ↵ </a>	</li>
</ul>
	<p>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. </p>
    <h2>Eine zweite Überschrift</h2>
    <p>Mailen Sie uns an: <a href="mailto:jemand@example.com">jemand@example.com</a><br>etwas Raum</p>
	<footer id="footer">
	<h2>Quellen:</h2> [^1] <a id="fnref:refs" href="https://adactio.com/articles/10887">Artikel von Jeremy Keith zur Geschichte des Internets: &lt;A> is for Anchor</a>  
		<p> <a class="backlink" href="#">zurück</a>
			<br> <a class="toplink" href="#">zum Seitenanfang</a> </p>
	</footer>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:HTML-Links-4-extern.html&oldid=100201“