• News
  • Ratgeber
  • Vergleiche
  • Tests
  • Home
  • Bildergalerie
  • Praktische Tipps für HTML und CSS
Galerie

Galerie

Praktische Tipps für HTML und CSS

14.11.2011 von Daniela Schrank

image.jpg
© PC Magazin
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 für DIV-Elemente sind mehrspaltige Auflistungen und strukturierte Textblöcke.

Gegenü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 über das Style-Element float. Hierbei legen die verfü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 gegenü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 zurückzukehren.

Anzeige
image.jpg
© PC Magazin
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 zurückgreifen. Selbst eine Audiodatei einfach nur abzuspielen, wurde schon zu einer nicht ganz leichten Aufgabe für den Webdesigner. Der neuen Webstandard HTML 5.0 hat nun auch die Audio- und Videoformate mit beachtlichem Ergebnis ü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, genü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 natürlich auch Microsoft-Windows Audio-Video (*.wav) verfügbar. Für die Videoformate dürfen Sie derzeit das Format OGG-Vorbis (*.ogg) und den neu etablierten Standard WebM nutzen. Weiteres dazu finden Sie unter https://www.webmproject.org

Die offenen Schnittstellen der Browser werden aber bald für Nachschub sorgen und weitere lizenzfreie Formate fü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 fü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"> fü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.

Anzeige
image.jpg
© PC Magazin
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 Füllungen.


Ein weiteres neues und extrem leistungsfähiges Gestaltungselement wird mit dem HTML-5.0-Objekt canvas eingeführt. Einfach ausgedrückt wird damit in Ihrer Webseite eine eigene Zeichenfläche bereitgestellt bzw. von einem bereits vorhandenen Objekt wie einem DIV-Bereich oder einer Tabelle über dessen ID-Bezeichner ü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 Fü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 füllen. Dazu brauchen Sie jedoch die Programmiersprache JavaScript, da hier einige wenige Variablen und Programmanweisungen auszuführen sind. Das Objekt selbst besitzt vor allem die Parameter id, height und width. Zudem können Sie zwischen den Tags auch einen Hinweistext einfügen, der im Falle eines nicht kompatiblen Browsers eine entsprechende Hinweis-Fehlermeldung für den Anwender ausgibt.

Das Canvas-Objekt kann sowohl in einem 2D- als auch in einem 3D-Kontext verwendet und ausgeführt werden. Dank dieser Technik werden wir in Kü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.

Anzeige
image.jpg
© PC Magazin
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 für das INPUT-Element.


Das INPUT-Element dürfte Webprogrammierern geläufig sein, stellt es doch ein essenzielles Objekt dar. Bislang verfügte das Element nur über wenige Attribute, um mit Textinformationen zu arbeiten. Es fehlten Eigenschaften wie Bereichsprüfungen, Formatierungsangaben und zur Gestaltung des Eingabefeldes. Mit dem neuen HTML-Standard 5.0 wurde das INPUT-Element ü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 übernommen wird. Dieser Vorgabewert lässt sich im INPUT-Element ü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 für das Textfeld wählen zu lassen, wurde das ebenfalls neue Attribut list für das INPUT-Element bereitgestellt.

Extra hierfür lässt sich nun auf das neue Element <datalist> zugreifen und damit eine Werteliste fü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 ausgefüllt hat, kann er das Formular nicht absenden.

Ein weiteres neues Attribut bietet Ihnen an, einem Eingabefeld den Fokus zu ü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 gültige Internet-URL erwartet und dahingehend eine korrekte Eingabe. Zudem wird das Prefix https:// bereits eingetragen, womit sich die eigentliche URL sehr einfach komplettieren lässt.

image.jpg
image.jpg
image.jpg
image.jpg
  • image.jpg
    So nutzen Sie positionierbare Float-DIVs für eine mehrspaltige Anzeige.
  • image.jpg
    HTML 5.0 kann auch ganz einfach Audiodateien online abspielen.
  • image.jpg
    Canvas: So erzeugen Sie komplexe Zeicheneffekte wie Radialfüllungen ganz einfach.
  • image.jpg
    Viele neue und praktische Attribute für das INPUT-Element in HTML 5.0.
Bild Vollbildansicht
[X] 4
[Titel]
kaufen
Anzeige
[Copyright / Quelle]
Galerie scrollen
Weiter zur Startseite  

Meistgelesen

1

Stecker-Solaranlage

Balkonkraftwerk bei Aldi: Wie gut ist das Angebot?
2

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten im Juni 2023
3

Streaming-Neuheiten

Disney+: Neue Filme und Serien im Juni 2023
4

Patchday Mai

KB5026361-Update: Auch Windows 10 mit Problemen
5

AMD-Grafikkarten

Specs geleakt: Alle Details zur Radeon RX 7800 XT(X) und RX…

Lohnt es sich?

Amazon BlitzangeboteAktion Overlay

Hardware, Software und mehr

Amazon-Angebote: Adobe CC, Mini-PC mit i5 & 16 GB,…

!Die aktuellen Highlights der Amazon-Angebote sind heute: Adobe CC, Mini-PC mit i5 & 16 GB, Realme-Smartphones, Gaming-Deals und mehr.

Tests & Kaufberatung

Portabler Premium-Kühlschrank

EcoFlow Glacier im Test

Smarter Nass- und Trockensauger

Tineco Floor One S7 Pro im Test: Alles sauber!

Foto-Manager

Zoner Photo Studio X im Test – Großes Frühjahrsupdate
87,0%

Nintendo Switch

The Legend of Zelda: Tears of the Kingdom im Test

Unterstützt neuen Smarthome-Standard

Govee LED Strip Light M1 Matter im Test

Die neuen Ausgaben

PC Magazin Super Premium 06-2023

Die neue Ausgabe ist da

Ausgabe 06/2023 jetzt online bestellen

!Neuanfang mit Windows 12, 233 Portable Apps, Android: Handy vor Angriffen schützen, der beste Gaming-PC für jedes Budget u.v.m.

connect 06-2023

Die neue Ausgabe

connect 06/2023 jetzt online bestellen

!Honor baut die beste Kamera, Galaxy A34 & A54, neue Ära bei Sonos, die neuen In-Ears von Nothing und Huawei u.v.m.

Aktuelle Ratgeber

Aktuelle Charts

Netflix Top 10: Beliebteste Serien und Filme in Deutschland

Kostenlose Boni für Prime-Nutzer

Prime Gaming im Juni 2023: Gratis-Spiele, Belohnungen &…

Alle Neuerscheinungen in der Langzeit-Übersicht

Disney Plus: Welche Filme und Serien starten 2023?

Vollversionen geschenkt & zum Antesten

Gratis-Spiele bei Steam, Epic, Humble Bundle & mehr im…

Hardware, Software und mehr

Amazon-Angebote: Adobe CC, Mini-PC mit i5 & 16 GB,…

Aktuelle Gutscheine

Gutscheine

Eneba – Rabattcode für Spiele, PSN etc.

Gutscheine

Galaxus – Smartphones, Haushalt, u.v.m.

Gutscheine

Lieferando - Lieferservice mit Rabatt

Gutscheine

Aktuelle Rabattcodes, Coupons, Angebote

Immer aktuell informiert

geöffneter Briefumschlag mit Mail-Symbol

Jetzt bestellen!

Kostenlose Newsletter

!Newsletter

Anzeige

Zum Seitenanfang
  • News
    • Alle News
  • Ratgeber
    • Windows
    • Sicherheit
    • Hardware
    • Software
    • Heimkino
    • Heimvernetzung
    • Gaming
    • Haus & Garten
    • Alle Ratgeber
  • Vergleiche
    • PC
    • Heimkino
    • Software
    • Gaming
    • Haus & Garten
    • Heimvernetzung
    • Alle Vergleiche
  • Tests
    • Hardware
    • Software
    • Heimkino
    • Heimvernetzung
    • Gaming
    • Haus & Garten
    • Bestenlisten
    • Alle Tests
  • Downloads
    • Top-Downloads
    • Neuzugänge & Updates
    • Alle Downloads
  • Specials
    • IFA
    • Themenseiten
    • Games
    • Kachel Chaos Spiel
    • Kartenchaos
    • Kartenchaos Classic
    • Gewinnspiele
    • Archiv
  • Service
    • Abo-Shop
    • Kontakt
    • Newsletter
    • Bildergalerien
    • Gutscheine
  • connect
  • Computer&Automation
  • connect professional
  • connect channel
  • elektroniknet.de
  • LANline
  • Medical Design
  • Abos
  • Newsletter
  • RSS
  • Archiv
  • Datenschutz
  • Mediadaten
  • Kontakt
  • Impressum
© 2023 WEKA Media Publishing GmbH. Alle Rechte vorbehalten.