Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- html:start [2015-03-16 06:47] – [Links] Link zu "SELFHTML" eingefügt a.kamola
+++ html:start [2015-06-13 18:35] (aktuell) – [Links] Link-Titel zum SELFHMLT-Wiki korrigiert a.kamola
@@ Zeile 1: / Zeile 1: @@
 ====== HTML ======
-===== RSS-Feed einbinden =====
+===== HTML 5 =====
-<code html>
+  * [[html5|HTML5]]
-<link rel="alternate" type="application/rss+xml" href="/feed" tile="Foobar">
-</code>
-===== iframe =====
+===== Telefon-Nummern verlinken =====
-Mit einem ''iframe'' (HTML inline frame element) können andere Seiten in eine HTML-Seite eingebunden werden. Dabei kann es sich um andere lokale Seiten, z.B. ''foobar.html'', oder um entfernte Seiten, z.B. ''http://www.example.com/'', handeln.
+Telefon-Nummern können mit einem regulären ''a''-Tag verlinkt werden, indem das [[lexikon:protokoll|Protokoll]] ''tel'' verwendet wird. Die Telefon-Nummer kann dann dort in maschinenlesbarer, internationaler Form hinterlegt werden:
 <code html>
-<iframe src="foobar.html" width="400" height="400"></iframe>
+<a href="tel:+49123456789">0123 456789</a>
 </code>
-''iframe''-Elemente werden mittlerweile häufig für das einbetten externer Inhalte wie YouTube-Videos oder Social-Media-Verknüpfungen wie Facebook-Like-Buttons verwendet.
+Das ''tel''-Protokoll wird von den gängigen Smartphones und auch Browsern erkannt, allerdings kann es u.U. sein, dass ein Desktop-Browser nicht weiß, wie er das Protokoll ''tel'' verwenden soll und eine Warn-Meldung zeigt. Um dies zu verhindern, kann man sich mit einem kleinen JavaScript-Trick behelfen, indem bei dem Attribut ''onclick'' ein ''return false'' aufgerufen wird:
-Referenz: [[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe|MDN: iframe]]
+<code html>
+<a href="tel:+49123456789" onclick="return false" style="cursor: default">0123 456789</a>
+</code>
-===== HTML 5-Elemente im Internet Explorer =====
+Quelle: [[http://chrisruppel.com/gbs/|Chris Ruppel: Linking telephone bumbers for mobile phones]]
-Der Internet Explorer kennt HTML 5-Elemente erst seit Version 9. Die neuen HTML-Elemente werden zwar (als Inline-Boxen) gerendert, allerdings lassen sich diese nicht über CSS ansprechen. Um dem Internet Explorer die HTML 5-Elemente bekannt zu machen kann z.B. JavaScript verwendet werden.
+===== RSS-Feed einbinden =====
-Mit Conditional Comments wird sichergestellt, dass nur Internet Explorer unter der Version 9 das JavaScript ''html5.js'' laden:
 <code html>
-<!--[if lt IE 9]>
+<link rel="alternate" type="application/rss+xml" href="/feed" tile="Foobar">
-<script type="text/javascript" src="html5.js"></script>
-<![endif]-->
 </code>
-Im JavaScript werden mittels ''createElement'' die neuen HTML 5-Elemente erzeugt und somit dem Internet Explorer bekannt gegeben:
+===== iframe =====
-<code javascript html5.js>
+Mit einem ''iframe'' (HTML inline frame element) können andere Seiten in eine HTML-Seite eingebunden werden. Dabei kann es sich um andere lokale Seiten, z.B. ''foobar.html'', oder um entfernte Seiten, z.B. ''http://www.example.com/'', handeln.
-(function(){
-	var elements = Array('article', 'aside', 'audio', 'canvas', 'footer', 'header', 'hgroup', 'nav', 'section', 'video');
-	for (var i = 0; i < elements.length; i++) {
+<code html>
-		document.createElement(elements[i]);
+<iframe src="foobar.html" width="400" height="400"></iframe>
-	}
-})();
 </code>
-Im CSS muss nur noch angegeben werden, dass die Block-Elemente als solche gerendert werden sollen, da der Internet Explorer sie bisher als Inline-Elemente rendert:
+''iframe''-Elemente werden mittlerweile häufig für das einbetten externer Inhalte wie YouTube-Videos oder Social-Media-Verknüpfungen wie Facebook-Like-Buttons verwendet.
-<code css>
+Referenz: [[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe|MDN: iframe]]
-article, aside, audio, canvas, footer, header, hgroup, nav, section, video {
-	display: block;
-}
-</code>
 ===== Links =====
@@ Zeile 55: / Zeile 43: @@
   * [[https://developer.mozilla.org/docs/Web/HTML|MDN: HTML]]
   * [[http://selfhtml.org/|SELFHTML]]
+  * [[http://wiki.selfhtml.org/wiki/HTML/Guter_HTML-Stil|SELFHTML-Wiki: Guter HTML-Stil]]
   * [[https://pinboard.in/u:aberaberarne/t:html|Arnes Link-Sammlung zu HTML]]