blog.bartlweb - a technologist's external brain

Thema: HTML

Favicon für Internet Explorer 10 und Windows 8 aufbereiten

Internet Explorer 10 bietet unter Windows 7 und Windows 8 die Möglichkeit Websites zur Startleiste hinzuzufügen und unter Windows 8 ist es des Weiteren möglich eine Website direkt als Kachel zur Startansicht hinzuzufügen. Das klassische Favicon mit einer Auflösung von 16x16 px ist dafür ungeeignet, da die Icons größer dargestellt werden. Die folgenden HTML-Snippets erlauben die Einbindung von größeren Favicons und die Optimierung der Darstellung für die Windows 8 Startansicht.

Favicon

Favicons können durch aus auch in einer höheren Auflösung als 16x16 px vorliegen und werden von allen modernen Browsern passend skaliert. Der Internet Explorer unterstützt weiterhin nur ICO-Dateien und daher sieht eine optimale Einbindung des Favicons im Moment wie folgt aus.

Website als iPhone bzw. iPad-App

Damit unter iOS eine Website am Dashboard als Icon angelegt werden kann bedarf es nur ergänzenden Meta-Informationen im HTML-Header.

Website als App definieren

Des folgenden Meta-Attribut gibt iOS die Anweisung die Website als App behandeln zu können. Dadurch wird dem Nutzer innerhalb von Safari die Option eine Verknüpfung der Website auf das Dashboard zu erstellen angezeigt.

<meta name="apple-mobile-web-app-capable" content="yes" />

Icon für das Dashboard

Damit wir alle Auflösungsdichten der unterschiedlichen iPhone und iPad-Modelle abdecken muss das Logo in 3 verschiedenen Auflösungen eingebunden werden.

<link rel="apple-touch-icon" href="/ios/icon/ios57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/ios/icon/ios72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/ios/icon/ios114.png" />

Opensearch-Plugin für Firefox und InternetExplorer erstellen

Haben Sie schon einmal daran gedacht die Suche Ihres Blogs oder Ihrere Webseite in das Suchfeld von Firefox oder InternetExplorer zu integrieren? Der OpenSearch-Standard macht es möglich.

OpenSearch-XML-Datei

Die Datei gibt einen Link, inkl. Parameter der immer den vordefinierten Term "{searchTerms}" enthalten muss, auf die Zielseite der Suche und einen Link auf eine Schnittstelle die Suchvorschläge per JSON-Objekt zurückliefert an.

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <Url type="text/html" template="http://example.com?q={searchTerms}"/>
  <Url type="application/x-suggestions+json" template="http://example.com/suggest?q={searchTerms}"/>
</OpenSearchDescription>

Plugin manuell Verlinken

Wenn Sie das OpenSearch-Plugin auf der Webseite manuell verlinken wollen, benötigen Sie folgenden JS-Aufruf.

<a href="#" onclick='window.external.AddSearchProvider("http://example.com/opensearchplugin.xml");'>mein OpenSearch-Plugin für example.com</a> 

Favicon einbinden

Ein Favicon ist eine 16x16px große Grafik im ICO-Format die im Browser in der Adressleiste, bei Tabs und in den Favouriten angezeigt wird. (IE6 zeigt das Favicon nur in den Favouriten an). Es gibt 2 Möglichkeiten ein Favicon in die Webseite zu integrieren.

1.ins Root-Verzeichnis des Webservers legen

Standardmäßig suchen alle Browser unter der Adresse http://www.domain.com/favicon.ico nach dem Icon.

2. Hinzufügen eines Header-Eintrags

<link rel="shortcut icon" href="favicon.ico" />

RSS-Feed einbinden

Damit ein Browser das RSS-Icon für die Webseite anzeigt muss der existierende RSS-Feed mittel Header-Eintrag bekannt gegeben werden:

<link rel="alternate" type="application/rss+xml" title="my RSS-Feed" class="bw_link_external" target="_blank" href="http://www.domain.com/folder/feed.xml" />

XHTML Grundgerüst einer Webseite

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>xHTML-Site</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body>
    ...
  </body>
</html>

Definition Lists: dl, dt, dd

Definition Lists werden in HTML zum gruppieren von zusammengehörigen Elementen verwendet. Des weiteren kann man mit Ihnen das aussehen von Tabellen imitieren. Doch der eigentliche Sinn ist wie der Name bereits andeuten lässt die Auflistung von Definitionen, z.b. in einem Glossar oder Wörterbuch.

Beispiel


<dl>
  <dt>Christian</dt>
  <dd>ein Name</dd>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
</dl>

Beispiel – Mehrfachverwendung von dt


<dl>
  <dt>Christian</dt>
  <dt>Martin</dt>
  <dd>ein Name</dd>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
</dl>

Beispiel – Mehrfachverwendung von dd

<dl>
  <dt>Christian</dt>
  <dd>ein Name</dd>
  <dt>HTML</dt>
  <dd>eine Auszeichnungssprache</dd>
  <dd>Hyper Text Markup Language</dd>
</dl>

Flash xHTML-konform einbinden

Flash xHTML-konform einbinden

<object width="326" height="171" type="application/x-shockwave-flash" data="movie.swf">
  <param value="movie.swf" name="movie"/>
</object>

Flash laut Adobe einbinden

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="305" height="32" id="countdown" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="false" />
  <param name="movie" value="movie.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="movie.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="305" height="32" name="movie" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Anzahl der HTML-Elemente auf einer Website ermitteln

Gerade bei Performance-Kritischen Webapplikation kann oft ein schlanker Code wunder bewirken. Um alle auf der Website vorhanden HTML-Elemente zu zählen genügt ein einfacher JS-Befehl:

document.getElementsByTagName('*').length;

Conditional Comments

Microsoft hat für alle InternetExplorer Versionen bis Version 7 (ab IE8 nicht mehr) die Funktion der so genannten Conditional Comments integriert. Dabei handelt es sich um Anweisungen innerhalb von Kommentaren die nur vom InternetExplorer interpretiert werden und dazu genutzt werden können HTML-Code oder aber vor allem CSS und JS-Dateien nur in bestimmten IE Versionen einzubinden.

Das folgende Konstrukt ist das geläufigste wobei der erste HTML-Code in allen IE Versionen die <= 7 sind angezeigt wird und der zweite nur in <= IE6:

<!--[if lte IE 7]>
  ...
<![endif]-->
<!--[if lte IE 6]>
  ...
<![endif]-->