Thema: HTML

insgesamt 11 Artikel (Seite 1 von 2)

Favicon für Internet Explorer 10 und Windows 8 aufbereiten

10.04.2013 | 0 Kommentare | Kategorie: HTML

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.

ganzen Artikel lesen

Website als iPhone bzw. iPad-App

26.08.2012 | 0 Kommentare | Kategorie: HTML

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.

ganzen Artikel lesen

Opensearch-Plugin für Firefox und InternetExplorer erstellen

11.09.2010 | 0 Kommentare | Kategorie: HTML

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.

ganzen Artikel lesen

Favicon einbinden

04.03.2010 | 0 Kommentare | Kategorie: HTML

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

04.03.2010 | 0 Kommentare | Kategorie: HTML

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

04.03.2010 | 0 Kommentare | Kategorie: HTML

<?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>

Definition Lists: dl, dt, dd

04.03.2010 | 0 Kommentare | Kategorie: HTML

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

04.03.2010 | 0 Kommentare | Kategorie: HTML

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

04.03.2010 | 0 Kommentare | Kategorie: HTML, JavaScript

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

04.03.2010 | 0 Kommentare | Kategorie: HTML

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]-->

top