Praktische Tipps für HTML und CSS

1 4

So nutzen Sie positionierbare Float-DIVs für eine mehrspaltige Anzeige.

Tipp 1: CSS - Floating DIVs

So erzeugen Sie frei positionierbare Bereiche mit floating DIV-Elementen.

Wann immer Sie zusammenhängende Informationen in einem gemeinsamen Anzeigeblock auf Ihrer Webseite darstellen wollen, bietet sich der Einsatz des HTML-Elements DIV an. Diese Bereiche kann man separat behandeln, formatieren und auch sehr exakt positionieren. Ein idealer Einsatz für DIV-Elemente sind mehrspaltige Auflistungen und strukturierte Textblöcke.

Gegenüber einem klassischen Tabellen-Objekt haben die DIVs den großen Vorteil, dass Sie diese völlig frei auf der Webseite platzieren und durch eine Vielzahl an Formatierungsobjekten gestalten können.

Die freie Positionierung erreichen Sie über das Style-Element float. Hierbei legen die verfügbaren Parameterwerte right, left, none die Positionsseite des Elementes und die Richtung des Textumflusses um dieses herum fest. Kombinieren Sie dieses Element nun mit anderen Elementen auf der Webseite, dann ist die korrekte Umflussrichtung um diese DIV-Elemente durchaus wichtig und strikt zu beachten.

Setzen Sie nun zusätzlich noch den Parameter width ein, so können Sie den prozentualen Größenanteil des Floatbereiches festlegen und damit zum Beispiel Spaltentrenner erzeugen. Legen Sie beispielsweise zwei gegenüberliegende DIV-Bereiche an, die floaten und eine Breite von 45 Prozent besitzen, so wird automatisch ein Spaltenzwischenraum von 10 Prozent der Seitenbreite erzeugt.

Verwenden Sie den Parameter clear:, um den Textfluss zu unterbrechen und zur normalen Formatierung zurückzukehren.

2 4

HTML 5.0 kann auch ganz einfach Audiodateien online abspielen.

Tipp 2: HTML 5.0 - Komfortable Audio- und Videowiedergabe

So gelingt das Abspielen von Audio-/Videodateien mit den neuen HTML-5.0-Objekten

Sobald Sie etwas Abwechslung mit Video- oder Audiodateien in Ihre Webseiten bringen möchten, mussten Sie bislang auf JavaScript oder Flash-Objekte zurückgreifen. Selbst eine Audiodatei einfach nur abzuspielen, wurde schon zu einer nicht ganz leichten Aufgabe für den Webdesigner. Der neuen Webstandard HTML 5.0 hat nun auch die Audio- und Videoformate mit beachtlichem Ergebnis überarbeitet. Denn damit binden Sie Ton- und Videomaterial nun als so genannte Inline-Objekte direkt in den Seitenquelltext ein. Um z.B. eine einfache Audio- oder Video-Datei abzuspielen, genügt nun jeweils eine einfache Zeile im HTML-5 Standard:

<audio src="Demosong.wav">Fehler: Browser kann Format/
Datei nicht wiedergeben</audio>
<video src="Demoviodeo.ogg">Fehler: Browser kann Format/
Datei nicht wiedergeben</video>

Das neue Audio-/Video-Element benötigt in seiner einfachsten Form nur den Parameter <.. src="xxx">, der die Pfadangabe zur jeweiligen Mediadatei enthält. Als Audioformate sind derzeit die beiden bekannten Formate OGG-Vorbis (*.ogg) und natürlich auch Microsoft-Windows Audio-Video (*.wav) verfügbar. Für die Videoformate dürfen Sie derzeit das Format OGG-Vorbis (*.ogg) und den neu etablierten Standard WebM nutzen. Weiteres dazu finden Sie unter http://www.webmproject.org

Die offenen Schnittstellen der Browser werden aber bald für Nachschub sorgen und weitere lizenzfreie Formate für beide Medientypen anbieten. Das Audio- und Video-Element enthält noch weitere gemeinsame Parameter, wovon hier besonders der Parameter controls hervorzuheben ist. Setzen Sie diesen Wert auf <.. controls="controls">, so wird Ihnen auf der Webseite ein Player-Slider mit einigen Bedienelementen wie Play/Stop-Taste, Lautstärke-Slider/Mute und die Zeit, also der Wiedergabefortschritt, angezeigt.

Bei der Video-Wiedergabe erscheint zusätzlich das Playerfenster mit weiteren Optionen. Setzen Sie jetzt noch einen Text zwischen die Elementetags, um im Fehlerfall eine kurze Meldung für den Benutzer anzeigen zu lassen. Wann immer der Ziel-Browser das Audio-/Videoformat oder die Audio-/Videodatei nicht abspielen kann, liest der Benutzer immerhin den Text zwischen den Tags als Hinweis.

Das Audio-Element enthält jedoch noch weitere Attribute wie <.. autoplay="autoplay">, um das Abspielen sofort zu beginnen sowie das Attribut <.. loop="loop"> für die kontinuierliche Wiedergabe der Mediendatei. Spezielle Attribute wie <.. width="xx"> und <.. height="xx"> bereichern das Video-Element. Mit diesen beiden Parametern setzen Sie die Dimensionen des Videos und damit auch des Player-Fensters.

3 4

Canvas: So erzeugen Sie komplexe Zeicheneffekte wie Radialfüllungen ganz einfach.

Tipp 3: HTML 5.0 - Zeichenfläche mit Canvas

So erzeugen und gestalten Sie eigene variable Zeichenflächen und definieren komplexe Füllungen.

Ein weiteres neues und extrem leistungsfähiges Gestaltungselement wird mit dem HTML-5.0-Objekt canvas eingeführt. Einfach ausgedrückt wird damit in Ihrer Webseite eine eigene Zeichenfläche bereitgestellt bzw. von einem bereits vorhandenen Objekt wie einem DIV-Bereich oder einer Tabelle über dessen ID-Bezeichner übernommen.

Auf dieser Zeichenfläche lässt sich nun fast nach Belieben zeichnen und sogar weitere interessante Effekte wie Verformungen und umfangreiche Farbverläufe abbilden. Die Fülle an Ausdruck und Gestaltung ist damit fast unbegrenzt und liefert eine komplett neue Web-Gestaltung. Das Element wird als Basiselement mit einer einfachen Zeile generiert: <canvas id="canvas" width="300" height="300"></canvas>.

Das einfache Beispiel verschafft Ihnen eine Zeichenfläche in der Größe von 300 x 300 Pixel, die Sie mit dem Objektbezeichner canvas benennen und in Folge dann auch mit Farbe oder Farbverläufen füllen. Dazu brauchen Sie jedoch die Programmiersprache JavaScript, da hier einige wenige Variablen und Programmanweisungen auszuführen sind. Das Objekt selbst besitzt vor allem die Parameter id, height und width. Zudem können Sie zwischen den Tags auch einen Hinweistext einfügen, der im Falle eines nicht kompatiblen Browsers eine entsprechende Hinweis-Fehlermeldung für den Anwender ausgibt.

Das Canvas-Objekt kann sowohl in einem 2D- als auch in einem 3D-Kontext verwendet und ausgeführt werden. Dank dieser Technik werden wir in Kürze sicherlich extrem ausgefeilte und anspruchsvolle Webseiten bewundern. Derzeit gehen nur die Browser Firefox, Opera und Safari mit dem neuen HTML-Element korrekt um. Der Internet-Explorer wird vermutlich in der Final-Version 9 einige der neuen HTML-5-Elemente darstellen.

4 4

Viele neue und praktische Attribute für das INPUT-Element in HTML 5.0.

Tipp 4: HTML 5.0 - Erweitere INPUT-Attribute

So nutzen Sie die vielen interessanten Neuerungen für das INPUT-Element.

Das INPUT-Element dürfte Webprogrammierern geläufig sein, stellt es doch ein essenzielles Objekt dar. Bislang verfügte das Element nur über wenige Attribute, um mit Textinformationen zu arbeiten. Es fehlten Eigenschaften wie Bereichsprüfungen, Formatierungsangaben und zur Gestaltung des Eingabefeldes. Mit dem neuen HTML-Standard 5.0 wurde das INPUT-Element überarbeitet und erweitert. Mit den wichtigsten Attributen sollten Sie sich vertraut machen. Beachten Sie bitte, dass einige der Elemente nur Browser wie Opera, Safari oder Firefox darstellen können.

Wie aus Anwenderprogrammen bekannt, gibt ein Eingabefeld oft einen Hinweis oder Text vor, der bei Übereinstimmung sofort übernommen wird. Dieser Vorgabewert lässt sich im INPUT-Element über das Attribut<placeholder="Bitte hier Ihren Namen eintragen"> eintragen. Damit erscheint dieser Anzeigetext solange im Eingabefeld, bis der Anwender selbst etwas eintippt. Um dem Nutzer aus Eingabewerten für das Textfeld wählen zu lassen, wurde das ebenfalls neue Attribut list für das INPUT-Element bereitgestellt.

Extra hierfür lässt sich nun auf das neue Element <datalist> zugreifen und damit eine Werteliste für das Textfeld vorgeben. Wenn also ein Formular einige zwingende Angaben vom Anwender einfordet, so statten Sie nun die entsprechenden INPUT-Elemente mit dem Attribut <required="required"> aus. Solange der Nutzer solch ein Eingabefeld nicht ausgefüllt hat, kann er das Formular nicht absenden.

Ein weiteres neues Attribut bietet Ihnen an, einem Eingabefeld den Fokus zu übertragen. Damit wird dieses INPUT-Element nach dem Anzeigen der Webseite automatisch selektiert, also fokussiert. Hierzu weisen Sie dem Eingabefeld einfach das Attribut <autofocus="autofocus"> zu. Eine weitere Neuerung finden Sie in dem INPUT-Type <type="url">. Hier wird eine gültige Internet-URL erwartet und dahingehend eine korrekte Eingabe. Zudem wird das Prefix http:// bereits eingetragen, womit sich die eigentliche URL sehr einfach komplettieren lässt.