Kategorie: HTML

HTML5 Boilerplate – das Grundgerüst für HTML5

HTML5 Boilerplate bietet ein kompaktes Grundgerüst zum Gestalten von Webseiten oder wie auch ich es nicht besser ausdrücken kann:

HTML5 Boilerplate ist ein professionelles HTML/CSS/JS-Template als Basis für eine schnelle, robuste und zukunftssichere Website.
Nach mehr als zwei Jahren Entwicklung, bekommt ihr das beste der besten Techniken zusammengefasst: Cross-Browser-Normalisierung, Performance-Optimierungen und sogar optionale Features wie Cross-Domain AJAX und Flash. Eine starter .htaccess-Konfigurationsdatei kommt mit praktischen Caching-Regeln, bereitet deine Seite für HTML5-Video vor und erlaubt dir einfache @font-face-Nutzung und gzip-Auslieferung deiner Ressourcen.
Boilerplate ist weder ein Framework, noch schreibt es dir eine Entwicklungsphilosophie vor. Es ist eine Sammlung von Tipps und Tricks, die dir helfen sollen, dein Projekt schnellstmöglich und flexibel auf die Beine zu stellen.

… ohne dabei eine Menge Zeit in die Anpassung einer Webseite an die verschiedensten Browser zu vergeuten. Weitere Informationen gibt es auf http://de.html5boilerplate.com/.

HTML5-Enabling-Script für IE

Nutzt man HTML5 für die Gestaltung einer Webseite, dann werden Besucher, welche den Internet Explorer mit einer Version < 9 verwenden, schnell mit falschen Seitendarstellungen überhäuft. Grund hierfür sind neue HTML5-Tags, die von den älteren Browserversionen nicht unterstützt werden. Beispiele sind: <header>, <footer>, <nav>, usw. Diese sind in HTML4 noch nicht definiert und werden somit auch nicht (oder fehlerhaft) angezeigt.

Auf remysharp.com wird eine Möglichkeit beschrieben, die mittels JavaScript auch diese Tags bei älteren Browserversionen „definiert“ oder besser gesagt anlernt. Der IE scheint ja bekanntlich in allen Versionen immer noch etwas Hilfe zu brauchen 😉

Web-Development: eine Sammlung an hilfreichen Tutorials und Webseiten

Auch beim Gestalten von Webseiten gibt es immer wieder Dinge, welche schon einmal irgendwo in den tiefen des Internet beschrieben wurden. Damit das Rad also nicht neu erfunden werden muss, hier eine Liste mit hilfereichen Tutorials, wenn es um Web-Development geht. Neben allgemeinen Themen zum Webdesign soll es hierbei auch um die Verwendung der aktuellen Standards von HTML5 und CSS3 gehen.

„form“ Attribut in HTML5

In HTML4 oder XHTML war es bisher so, dass Formularelemente (input/textarea) sich innerhalb eines <form>-Tags befinden mussten, damit diese beim Absenden eines Formulars auch berücksichtigt wurden. Die Daten eines Formularelements außerhalb eines <form>-Tags ließen sich so nur mit umständlichen JavaScript beim Absenden eines Formular mit übergeben.

Nicht mehr unterstütze bzw. veraltete Tags in HTML5

Im folgenden sind HTML-Tags aufgelistet, welche laut Doctype-Definition in HTML5 nicht mehr unterstützt werden. Dazu gehören auch Tags wie beispielsweise <font> oder <center>. Wer allerdings schon ausgiebig mit CSS arbeitet, der sollte diese Tags sowieso bereits nicht mehr verwendet haben. Es gibt aber auch andere Tags, welche unter umständen noch verwendet wurden. Aber keine Angst, die meisten der nicht mehr unterstützten Tags lassen sich durch CSS in Verbindung mit den gültigen Tags „nachbilden“.

CSS: Blockelement in HTML5 zentrieren

Zum Zentrieren eines Blockelementes (<div>) konnte man in HTML4 noch das Attribut align verwenden:

<div align="center">
  <div>
    ...

Damit wird der zweite div-Block bei Angabe einer festen Breite innerhalb des ersten Blocks zentriert.

Mit HTML5 ist allerdings das align-Attribut für div-Elemente nicht mehr zulässig, d.h. das Zentrieren muss in HTML5 über CSS realisiert werden.

Hi-speed HTML/CSS mit zen-coding

„Hi-speed coding for HTML and CSS“ lautet das Motto bei zen-coding. Tja, was soll ich noch groß dazu sagen: es stimmt. Die Entwickler von zen-coding haben einige Plugins für Text-Editoren entwickelt, die die Eingabe von HTML und CSS extrem vereinfachen. Neben Editoren wie NetBeans und einigen anderen, ist darunter natürlich auch der Mac-Editor TextMate mit zwei Bundles vertreten: TextMate.zen.CSS und TextMate.zen.HTML.