Inhaltsverzeichnis

Transcription

Inhaltsverzeichnis

Webdesign_mittels_HTML5_und_CSS(3)
Hochschule:
Standort:
Studiengang:
Veranstaltung:
Betreuer:
Typ:
Themengebiet:
Autor(en):
Studienzeitmodell:
Semesterbezeichnung:
Studiensemester:
Bearbeitungsstatus:
Prüfungstermin:
Abgabetermin:
Fallstudienarbeit
Hochschule für Oekonomie & Management
Duisburg
Bachelor Wirtschaftsinformatik
Fallstudie / Wissenschaftliches Arbeiten
Dipl-Inf._(FH)_Christian_Schäfer
Fallstudienarbeit
HTML 5
Andrey Gutkovski, Daneel Derchlser, Andre Schubert
Abendstudium
WS10
4
begutachtet
Inhaltsverzeichnis
• 1 Abkürzungsverzeichnis
• 2 Abbildungsverzeichnis
• 3 Tabellenverzeichnis
• 4 Einleitung
♦ 4.1 Thema
♦ 4.2 Zielsetzung
♦ 4.3 Aufbau
♦ 4.4 Anmerkungen
• 5 Grundlagen
♦ 5.1 Webdesign
♦ 5.2 HTML-Entstehung
◊ 5.2.1 HTML 2.0
◊ 5.2.2 HTML 4.x
◊ 5.2.3 XHTML
◊ 5.2.4 HTML 5
♦ 5.3 HTML Aufbau
♦ 5.4 Document Object Model
(DOM)
♦ 5.5 Cascading Style Sheets
(CSS)
◊ 5.5.1 CSS 1
◊ 5.5.2 CSS 2
◊ 5.5.3 CSS 3
• 6 Vergleich
♦ 6.1 HTML5 gegenüber
Vorgängerversionen
◊ 6.1.1 Entfernte
Elemente
◊ 6.1.2 Neue
Elemente
Inhaltsverzeichnis
1
⋅ 6.1.2.1
Struktur
⋅ 6.1.2.2
Gruppieren
⋅ 6.1.2.3
Text-Ebene
⋅ 6.1.2.4
Ruby
⋅ 6.1.2.5
Formulare
⋅ 6.1.2.6
Multimedia
◊ 6.1.3 Geänderte
Elemente
♦ 6.2 CSS3 gegenüber
Vorgängerversionen
◊ 6.2.1 Selectors
◊ 6.2.2 Media Queries
◊ 6.2.3 Web Fonts
◊ 6.2.4
Transformationen
♦ 6.3 Browserunterstützung
• 7 HTML5 in der Praxis
♦ 7.1 Voraussetzungen
◊ 7.1.1
Standard-Konformität
◊ 7.1.2
Barrierefreiheit
♦ 7.2 Grundaufbau mit
HTML5
◊ 7.2.1 Frame
◊ 7.2.2 Tabelle
◊ 7.2.3 Div
◊ 7.2.4 Semantische
Gliederung
◊ 7.2.5 Formulare
♦ 7.3 Praxisbeispiel
• 8 Fazit
• 9 Fußnoten
• 10 Literatur- und
Quellenverzeichnis
• 11 Anhang
♦ 11.1 Blog.html vom
Praxisbeispiel
♦ 11.2 Blog.css vom
Praxisbeispiel
Inhaltsverzeichnis
2
1 Abkürzungsverzeichnis
Abkürzung
Bedeutung
API
Application Programming Interface
CMYK
Cyan, Magenta, Yellow, Key
CSS
Cascading Style Sheets
DOM
Document Object Model
HTML
Hypertext Markup Language
HTTP
Hypertext Transfer Protocol
IE
Internet Explorer
MP3
MPEG Layer 3
PHP
Hypertext Preprocessor
RGB
Red, Green, Blue
SGML
Standard Generalized Markup Language
W3C
World Wide Web Consortium
WAI-ARIA
Web Accessibility Initiative - Accessible Rich Internet Applications
WHATWG
Web Hypertext Application Technology Working Group
WWW
World Wide Web
XHTML
Extensible Hypertext Markup Language
XML
Extensible Markup Language
2 Abbildungsverzeichnis
Abbildungsnr.
Bezeichnung
1
Zeitlicher Überblick über die HTML- und Browserentwicklungen
2
DOM-Knotenbaum einer Beispiel-Webseite
3
W3C HTML5 Logo
4
Gestaltung Webseite
5
Neue Gestaltung Webseite
6
HTML5-CSS3-Logo
7
Test FindMeByIp
1 Abkürzungsverzeichnis
3
8
Fortschrittsbalken
9
Klassisches 3-Spalten-Design
10
Beispiel Input-Typ number
11
Beispiel Input-Typ range
12
Grundstruktur Praxisbeispiel
13
Blog ohne CSS
14
Blog mit CSS
3 Tabellenverzeichnis
Tabelle
Bezeichnung
1
HTML5Test.com - Browser
2
Implizite ARIA-Semantik
3
Start- und Endtags in HTML5-Syntax
4 Einleitung
4.1 Thema
Die folgende Fallstudie beschäftigt sich mit dem Thema ?Webdesign mittels HTML5 und CSS(3)?, welche im
Rahmen des Moduls ?Fallstudien/Wissenschaftliches Arbeiten? im Wintersemester 2010/11 an der Hochschule
für Ökonomie und Management durchgeführt wird. Die Betreuung dieser Fallstudie wird von Herrn Christian
Schäfer durchgeführt.
Seit Web 2.0 stellt das Internet nicht nur reine Informationen bereit, die Nutzer sind seit dem auch in der Lage,
selbst Inhalte über eine Webseite zu veröffentlichen. Viele Webseiten ähneln heute einer Desktop-Anwendung
und sind viel mehr als reine Content-Darsteller. Um diesen Anforderungen gerecht zu werden, reicht einfaches
HTML nicht aus. Aus diesem Grund werden verschiedene Technologien wie JavaScript, Flash, CSS usw.
eingesetzt. Der neue HTML5-Standard, der sich noch in der Entwurfsphase befindet, soll den älteren HTML 4.01
und XHTML 1.1 Standard revolutionieren. Mit HTML5 werden neue Elemente eingefügt, mit denen sich
Webseiten besser strukturieren lassen und die einige hilfreiche Funktionen, wie das Einbetten von
Multimedia-Dateien ohne Plugins, bieten. Außerdem werden Dinge zum Standard erklärt, die bis dato nicht
offiziell zum Standard gehörten, jedoch von Entwicklern eingesetzt und von Browserherstellern unterstützt
wurden. Zusätzlich gibt es einige neue JavaScript-APIs. Diese Fallstudie soll somit ein erster Einstieg in HTML5
sein. Die "3" in Klammern bei CSS soll bedeuten, dass, bei Anwendung von CSS auch auf die neue CSS3 Version
eingegangen wird, sich jedoch nicht nur mit CSS3 beschäftigt. Hauptaugenmerk liegt auf dem neuen HTML5
Standard.
2 Abbildungsverzeichnis
4
4.2 Zielsetzung
Das Ziel dieser Arbeit ist es, dem Leser einen Überblick über HTML5 zu liefern. Es spezialisiert sich nicht auf ein
einzelnes Gebiet, sondern erklärt, wie der Grundaufbau mittels HTML5 aussieht. Dabei wird auf die Neuerungen
und Änderungen eingegangen. Der Leser soll am Ende dieser Arbeit in der Lage sein, eine Webseite unter
Berücksichtigung des HTML5-Standards zu implementieren und den Unterschied zu bisher geltenden Standards,
wie HTML4 und CSS2, zu kennen.
4.3 Aufbau
Im fünften Kapitel werden die Grundlagen für gelegt. Dort wird erklärt, was Webdesign, HTML5 und CSS
bedeutet. Dabei wird die Geschichte der HTML-Entstehung auszugsweise dargestellt und der Grundaufbau einer
HTML-Seite erläutert.
Im sechsten Kapitel wird HTML5 mit den Vorgängerversionen dieses Standards verglichen. Es wird gezeigt,
welche Elemente in HTML5 neu hinzugekommen sind, welche Elemente sich geändert haben und welche
Elemente nicht mehr enthalten sind. Dieses Kapitel beschreibt außerdem, welche Browser bisher HTML5
unterstützen. Zusätzlich wird der Standard CSS3 mit seinen Vorgängerversionen verglichen.
Das siebte Kapitel stellt den Hauptteil der Arbeit dar. Dort wird der Praxisbezug zum Thema hergestellt. Das
Kapitel erläutert, wie man mittels HTML5 und CSS3 eine Webseite erstellt. Am Ende das Kapitels wird ein
Praxisbeispiel dieses Thema weiter vertiefen.
Im achten und somit letzten Kapitel wird das Thema ?Webdesign mittels HTML5 und CSS(3)? in Form einer
Schlussbetrachtung zusammengefasst.
4.4 Anmerkungen
Programmbeispiele werden in Form von Boxen für vorformatierten Text dargestellt. Um dem Leser die Beispiele
im Zusammenhang erklären zu können, werden die Beispiele in den Text integriert und nicht als Anhang
beigefügt. Ausschnitte von Quellcode innerhalb des Textes werden teilweise kursiv dargestellt. HTML-Elemente
werden als Tag, z.B. <html> in den Text integriert.
5 Grundlagen
5.1 Webdesign
Unter dem Begriff "Webdesign" wird die Konzepterstellung, Gestaltung und technische Umsetzung einer
Webseite bzw. eines Internetauftritts von Firmen, Organisationen oder auch Privatpersonen verstanden. Dabei ist
neben der reinen optischen Gestaltung und dem Layout der Webseite auch die Strukturierung der Inhalte (zumeist
Texte und Grafiken), sowie die Navigation durch diese Inhalte, einschließlich Barrierefreiheit von Bedeutung.
Webdesign wird häufig durch Webdesign-Agenturen im Auftrag durchgeführt, wobei die Wünsche des
Auftraggebers mit denen vorhandenen technischen Mitteln des Internets vereinbart werden müssen. Heutige,
moderne Webseiten setzen in der Regel eine breite Palette von Technologien, wie zum Beispiel HTML, CSS,
PHP, Javascript und MySQL (für Datenbankzwecke) ein [1] [2] [3].
4.2 Zielsetzung
5
5.2 HTML-Entstehung
Abbildung 1: Zeitlicher Überblick über die HTML- und Browserentwicklungen[4]
Die Entstehung der Hypertext Markup Language (HTML) begann im Jahre 1989. Zu dieser Zeit entwickelte der
Informatiker Tim Berners-Lee am Forschungszentrum CERN die Sprache HTML. Dabei orientierte sich
Berners-Lee an der Syntax der, bereits 1986 von Goldfarb, Mosher und Lorie, entwickelten und standardisierten
Standard Generalized Markup Language (SGML). Heute ist HTML als die Basis der Internetnutzung zu
betrachten Durch HTML werden Strukturen und Inhalte von Textdokumenten standardisiert. Aufgrund der großen
Anzahl von Software-Lösungen für Anwendungen innerhalb des Internets ist die Einhaltung von Standards für
dessen Nutzung notwendig. Entwickelt wurden und werden diese Standards durch das World Wide Web
Consortium (W3C). Das W3C ist ein durch Berners-Lee gegründetes Gremium, das es zur Aufgabe hat,
Techniken des WWW (World Wide Web) zu standardisieren. Dabei wird das Ziel einer weitreichenden
Unstrittigkeit und Akzeptanz (zum Beispiel von technischen Protokollen) angestrebt. Das W3C hat eine Vielzahl
von Recommendations veröffentlicht. Dazu zählen die in den folgenden Abschnitten dargestellten Standards wie
HTML 2 und 4, XHTML, die CSS (Cascading Style Sheets) Versionen, das DOM (Document Object Model),
sowie XML (Extensible Markup Language) und Weitere. Der Grundgedanke des W3C beinhaltet, dass sich
Gruppen von qualifizierten Personen zusammenfinden, um jeweils einen speziellen Standard zu entwickeln[5]. Die
folgende Grafik stellt den zeitlichen Verlauf der verschiedenen HTML-Versionen und Browserentwicklungen dar.
5.2.1 HTML 2.0
Bis zu Jahr 1997 war Version 2 der geltende HTML-Standard. Diese Version ergänzte die ürsprüngliche Version
1.0 um einige Elemente. Bereits zur Erscheinung war HTML 2.0 überholt, da der damals veröffentlichte Browser
"Netscape Navigator 2.0" deutlich weiter in der Entwicklung voran geschritten war als HTML 2.0. Es wurden
dort bereits z.B. Frames unterstützt, welche im HTML 2.0 Standard nicht enthalten sind. Somit hatte der
Netscape-Browser einen deutlichen Vorsprung, aufgrund der vielfältigeren Möglichkeiten[6].
5.2 HTML-Entstehung
6
5.2.2 HTML 4.x
Mit der Version 4.0, welche im Jahr 1997 veröffentlicht wurde, wurde beabsichtigt, sich bei HTML auf die
Kernelemente von HTML zu reduzieren. Die Einführung von Frames und Cascading Style Sheets in Version 4.0
stellen bedeutende Schritte dar. Auch die Möglichkeit, Scriptsprachen, wie Javascript, in HTML einzubinden, ist
ein wichtiger Aspekt für Webdesigner. Um einer zunehmenden Internationalisierung Rechnung zu tragen ist
HTML 4.0 im Unicode-System codiert, was es erlaubt, Texte in sämtlichen Sprachen der Welt darzustellen[6].
HTML 4.01 wurde im Dezember 1999 vom W3C verabschiedet. Bis heute (Stand 2011) ist HTML 4.01 die
bedeutendste und weitverbreiteste HTML-Version des Internets. In Version 4.01 wurden kleinere Korrekturen
durchgeführt.
5.2.3 XHTML
XHTML stellt den Neuanfang von HTML auf Basis von XML dar. XHTML ist also ein XML-gerechtes HTML,
bzw. wurde HTML in XML nachgebildet. Diese Nachbildung ist erfolgreich durchgeführt worden, sodass in
XHTML die gleichen Attribute und Elemente wie in HTML genutzt werden. Dennoch sind syntaktischen
Differenzen im Detail vorhanden, die es zu berücksichtigen gilt, wenn eine Webseiten in XHTML geschrieben
werden soll. XML ist strikter als HTML, besipielsweise wird immer ein abschließendes Tag benötigt. Wenn eine
XHTML-Seite nicht genau syntaktisch korrekt geschrieben ist, wird sie durch den Browser nicht angezeigt[7]. Die
Arbeiten an XHTML wurden im Jahr 2009 Zugunsten von HTML5 eingestellt
5.2.4 HTML 5
Durch die Browser-Hersteller Opera Software ASA, die Mozilla Foundation und die Apple Inc. wurde eine
Arbeitsgruppe mit dem Namen "Web Hypertext Application Technology Working Group" (WHATWG)
gegründet, die es zur Aufgabe hat, neue, moderne Webtechnologien zu entwickeln. Diese Technologien werden
unter dem Begriff "HTML5" entwickelt. Das W3C, unter Leitung von Berners-Lee, hatte parallel das Ziel, den
XHTML2-Standard weiter zu entwickeln, dies wurde jedoch im Jahr 2009, aufgrund negativer
Zukunftsaussichten des Standards, eingestellt. Aktuell entwickeln beide Arbeitsgruppen gemeinsam am
HTML5-Standard. Mit HTML 5 wurden die bestehenden Versionen und Standards HTML 4.01, XHTML sowie
das Document Object Model ersetzt. Aktuell ist HTML in der Version 5 noch nicht endgültig definiert und hat
somit lediglich ?Entwurfs?-Charakter. HTML 5 wird seit 2007 entwickelt und stellt den aktuellen Stand der
HTML-Entwicklung dar. Eine besondere Neuerung hierbei ist, dass mit dieser Version Abstand von der
SGML-Typisierung der HTML-Sprache genommen wurde und stattdessen die Sprache nun als Document Object
Model (DOM) beschrieben ist.
Besondere Neuerungen an HTML 5 sind die implementierten zusätzlichen Möglichkeiten, mit multimedialen
Elementen zu arbeiten. Es werden nun Audio und Video und dynamische Grafiken direkt unterstützt, bei denen in
älteren HTML Versionen das Zurückgreifen auf andere Techniken, abseits von HTML, notwendig wurde[8].
5.3 HTML Aufbau
Mit Hilfe von HTML ist es grundsätzlich möglich, Dokumente zu erstellen, die verschiedene Daten und
Elemente, wie Texte, Tabellen, Bilder und Grafiken enthalten. Mittels HTML können diese Dokumente nach
eigenen Wünschen strukturiert werden. Ein weiteres wichtiges Element ist der Hyperlink, der es ermöglicht,
Dokumente interaktiv zu gestalten. Ein Hyperlink stellt einen Verweis auf andere Dokumente, welche keine
HTML-Dokumente sein müssen, dar. Diese Dokumente können auf der gesamten Welt liegen, Voraussetzung ist
5.2.2 HTML 4.x
7
jedoch, dass der entsprechende Host/Server, auf dem das Dokument gespeichert ist, von der aktuellen Position
erreichbar ist. HTML-Dokumente haben die Endung ?.html? oder ?.htm? und werden auf einem Webserver zum
Beispiel für das gesamte Internet verfügbar gemacht. Über einen Browser und das entsprechende
Übertragungsprotokoll, in diesem Fall das Hypertext Transfer Protokoll HTTP, werden diese Dokumente
betrachtet.
<HTML>
<HEAD>
<META CHARSET="UTF-8">
<TITLE> HTML5 </TITLE>
<HEAD>
<BODY>
Inhalt der Webseite
Wird über den Browser angezeigt
</BODY>
</HTML>
• HTML:
Alle Elemente eines HTML-Dokumentes werden in das so genannte "Wurzel"- beziehungsweise "Rootelement"
eingebettet. Start des Bereichs ist das Tag "<HTML>", das Ende dieses Bereichs wird durch "</HTML>"
gekennzeichnet.
• HEAD:
Innerhalb des Elementes "HEAD" können Informationen über das jeweilige HTML-Dokument platziert werden.
Dieser Bereich wird durch die Tags "<HEAD>" und "</HEAD>" umschlossen, stellt den Kopf des Dokuments
dar und wird üblicherweise nicht über einen Browser dargestellt. Informationen sind an dieser Stelle
beispielsweise Meta-Daten, der Webseiten-Titel oder auch Stylesheet-Informationen.
Mögliche Head-Informationen können sein:
◊ Meta-Angaben: Diese Informationen beziehen sich in der Regel auf den Webseiteninhalt, dessen
Autor oder auf den verwendeten Sprachcodierungssatz (im Beispiel UTF-8).
◊ Titel der HTML-Seite: Dies ist der Titel der Webseite. Dieser wird in der Titelleiste des
Browsers, sowie bei Suchmaschinenergebnisse angezeigt.
◊ Stylesheet-Informationen: HTML Elemente im Body können im Head, zum Beispiel hinsichtlich
Farbe oder Schriftgröße, formatiert werden.
◊ Stylesheet-Definitionen: Definition von Formateigenschaften einzelner HTML-Elemente.
◊ Javascript: Mittels zusätzlicher Skripte, die in das HTML-Dokument eingebunden werden,
können zusätzliche Aufgaben und Funktionen in das Dokument implementiert werden, wie zum
Beispiel Berechnungen.
• BODY:
5.3 HTML Aufbau
8
Das "Body"-Element beinhaltet den Teil eines HTML-Dokuments, der im Browser sichtbar angezeigt wird.
Innerhalb des mit "<BODY>" und "</BODY>" umschlossenen Bereichs können Texte, Hyperlinks, Grafiken,
Tabellen enthalten sein.
5.4 Document Object Model (DOM)
Abbildung 2: DOM-Knotenbaum einer Beispiel-Webseite[9]
Das vom W3C verabschiedete ?Document Object Model? (DOM) stellt eine Norm dar, die beschreibt, wie ein
Zugriff auf Elemente eines Auszeichnungssprachen-Dokuments erfolgt. DOM selbst ist folglich keine
Programmiersprache an sich und ist nicht auf zum Beispiel HTML beschränkt. Vielmehr definiert das DOM zu
implementierende Methoden, Objekte und Eigenschaften, mittels derer sich eine Programmiersprache als
DOM-kompatibel und ?fähig auszeichnet. Es wird somit eine Schnittstelle definiert. Der Zugriff auf einzelne
Elemente eines Dokuments erlaubt es, das als ?dynamisches HTML? bezeichnete Anpassen und Verändern von
bereits geladenen Webseiten, durchzuführen. Das DOM hält aber auch Methoden bereit, neue oder ergänzende
Elemente mit Inhalt und Formatierung während der Anzeigezeit einer Webseite entstehen zu lassen. Für diesen
Zweck hält das DOM ebenfalls Methoden bereit[10].
Das DOM ist plattform- und sprachunabhängig und basiert darauf, dass Auszeichnungssprachen wie HTML und
5.4 Document Object Model (DOM)
9
andere XML-basierte Sprachen als hierarchische Baumstruktur abbildbar sind. Laut DOM werden die
Bestandteile dieser Baumstruktur als ?Knoten? bzw. ?node? bezeichnet und in Knotentypen definiert. Die drei
wichtigsten Knotentypen sind ?Elementknoten?, ?Attributknoten? und ?Textknoten?. Über Eigenschaften und
Methoden kann auf Attribute eines Knotens zugegriffen werden[11].
Das DOM wurde 1998 als Standard des W3C definiert und ist in den folgenden Jahren mehrfach aktualisiert und
erweitert worden. Stand heute existieren verschiedenen Levels (Versionen), die jeweils verschiedenen Module
beinhalten[12]:
• Level 1
In der DOM-Entwicklung wurde mit Version 1.0 lediglich der Zugriff auf Knoten geregelt.
• Level 2
Mit der Version 2.0 aus dem Jahr 2000 wurden der Zugriff auf Style-Eigenschaften und Event-Handling
eingeführt und damit sind diese anwendbar für dynamische Webseiten.
• Level 3
Umfassende Erweiterungen erhielten Einzug, unter anderem verbessertes Exception-Handling
(Ausnahmebehandlung) und das mögliche Versenden und Abrufen von XML-Dokumenten über HTTP.
5.5 Cascading Style Sheets (CSS)
Bei den so genannten Cascading Style Sheets (auch Stylesheets genannt) handelt es sich um eine direkte
Ergänzung zu HTML. Stylesheets beschreiben eine Sprache, mit der Formatattribute zu HTML-Elementen
zugewiesen werden können. Stylesheets erweitern das bestehende HTML, womit es beispielsweise möglich wird,
bestimmten Textteilen andere Schriftgrößen, Schriftarten und -farben zuzuweisen, was mit reinem HTML so nicht
durchführbar wäre. Die CSS-Angaben selbst können direkt im HTML-Dokument oder in separaten Dateien
abgelegt werden, auf die dann im HTML-Dokument Bezug genommen wird. Weiterhin bieten Stylesheets noch
weitere Möglichkeiten, wie das setzen von Hintergrundbildern in Formulare und Definieren von
Hintergrundfarben. Elemente können mittels CSS im Fenster des Browsers positioniert werden. Auch
Möglichkeiten für Textflusskontrolle sind vorhanden. Mit CSS-Eigenschaften ist es auch möglich weitere
optische Anpassungen vorzunehmen, zum Beispiel das Aussehen des Maus-Cursors zu verändern.
CSS stellen also eine Formatvorlage dar. Daten und Darstellung sind somit getrennt, wodurch z.B.
Arbeitsteilungen möglich werden. Das Stylesheet selbst formatiert die zugewiesenen Texte und Bilder etc. für die
Ausgabe im Browser nach den definierten Kriterien und Werten.
Wie auch HTML werden die CSS vom W3C standardisiert. CSS stellen einen offen, dokumentierten und frei
verwendbaren Standard dar. Eine regelmäßige Weiterentwicklung wird durch eine Workinggroup beim W3C
sichergestellt. Im Folgenden wird die CSS-Syntax, ein CSS-Beispielcode zur Formatierung des Elements
"beispiel" und das entsprechende HTML-Element "beispiel", auf das sich die Formatierungsangaben im CSS-Teil
beziehen, dargestellt.
CSS-Syntax:
5.5 Cascading Style Sheets (CSS)
10
Selektor [, Selektor2, ?]
{
Attribut-A: Wert-A;
Attribut-B: Wert-B
}
----------------------------------------CSS-Teil:
p.beispiel {
position: relative;
width: 80%;
padding: 30px;
border: 5px solid black;
line-height: 1.5em;
color: red
background-color: #ffffff;
}
-----------------------------------------HTML-Teil:
<p class="beispiel">
Dies ist ein Beispieltext, der durch die oben genannten Attribute im Browser formatiert dargestellt
</p>
5.5.1 CSS 1
1996 wurde die CSS Level 1 Recommendation veröffentlicht. Diesen Normierungsvorschlag haben aktuelle
Browser nach heutigem Stand nahezu vollständig implementiert.
5.5.2 CSS 2
CSS2 (auch "CSS Level 2" genannt) wurde im Mai 1998 veröffentlicht und basiert nahezu vollständig auf CSS1.
Dies bedeutet, dass quasi jedes Stylesheet nach CSS1 auch für Level 2 Gültigkeit besitzt. Gegenüber CSS1 bietet
CSS2 die Unterstützung geräteabhängiger Stylesheets, die es möglich machen, dass Webseitendesigner ihre
Webseiten je nach eingesetztem Gerät anpassen können. Diese Anpassungen können eine differenzierte
Webseitendarstellung ermöglichen, je nach dem ob die Webseite z.B. auf einem normalen Browser, oder auf
einem mobilen Handheld-Gerät angezeigt wird. CSS unterstützt weiterhin Tabellenlayouts, automatische
fortlaufende Nummerierungen und die Positionierung von Texten bzw. anderen Inhalten[13].
5.5.3 CSS 3
CSS3 wurde in einzelne Module zerlegt, welche unabhängig voneinander implementiert und veröffentlicht
werden. Neben der Möglichkeit zur Erstellung mehrspaltiger Layouts, der Ausgabe zusätzlicher Informationen
aus Meta- und HTML-Elementen, wie Titel der Seite, Autor oder URL auf Drucklayouts sind einige weitere
Funktionen implementiert worden:
5.5.1 CSS 1
11
Ränder [14]
• border-color: Eingesetzte Ränder lassen sich nun farbig und mit Farbverläufen gestalten.
• border-image: Anstatt eines normalen Rands lassen sich mit dieser Funktion Grafiken als
Randmarkierung nutzen. Dabei kann zwischen dem border-image (Grafik, die die Seitenlinien bildet) und
dem border-corner-image (Grafik, aus der die Ecken gebildet werden) unterschieden werden.
• border-radius: Als neues Design-Element sind nun runde und flache Kanten mittels dieser Funktion
darstellbar.
• box-shadow: Mittels dieser Funktion können Boxen in einem dreidimensionalen Effekt, mit
Schattenwurf, dargestellt werden.
Hintergründe [14]
• background-origin und background-clip: Die background-origin-Eigenschaft wird genutzt, um zu
bestimmen, wie die Position eines Box-Hintergrundes berechnet wird. --------------------• background-size: Mit CSS3 ist es möglich, die Größe von Hintergrundbildern zu spezifizieren. Dabei
lässt sich die Größe in Pixeln mit Breite und Höhe, oder in Prozent angeben. Bei der prozentualen
Größenangabe wird die angegebene Größe in Relation zum bezugnehmenden Bereich bestimmt, der mit
background-origin festgelegt wurde.
• multiple backgrounds: CSS3 erlaubt die Zuweisung und Nutzung mehrere Hintergrundbilder auf ein
Element.
Farben [14]
• HSL colors: Neben RGB (Rot, Grün, Blau) und hexadezimalen Farbwertangaben ist es nun möglich,
auch so genannte HSL-Farben zu nutzen. HSL steht dabei für "Hue, Saturation, Lightness" und bedeutet,
dass die Farbbestimmung nach Farbton ("Hue"), Sättigung ("Saturation") und Helligkeit ("Lightness")
erfolgt.
• HSLA colors: Neben den bereits genannten Farbbestimmungswerten "Hue", "Saturation" und
"Lightness" ist noch ein viertes Bestimmungselement hinzugekommen. Das "A" steht für "alpha" und
bezeichnet den Durchsichtigkeitsfaktor der angegebenen Farbe.
• RGBA colors: Neben den reinen RGB-Farben ist es mit CSS3 nun vorgesehen, einen
Durchsichtigkeitsfaktor, analog zu HSLA, bei RGB-Farben anzugeben.
Texteffekte [14]
• text-shadow: Das bislang nötige Erstellen von Bildern mit Hilfe von Grafiksoftware, um Texten Schatten
hinzuzufügen, entfällt mit CSS3. Mittels text-shadow lässt sich Schatten zu einem Text hinzufügen. Dabei
kann über Pixel-Angaben die Größe des Schattens bestimmt werden.
• text-overflow:
• word-wrap: Diese Funktion erlaubt das bisher nicht implementierte Umbrechen von Worten in Boxen.
Anstatt das lange Worte aus der Box aufgrund zu geringer Box-Breite herausragen, findet nun ein
Umbruch dieses Wortes in die nächste Zeile statt.
Benutzerschnittstelle [14]
5.5.3 CSS 3
12
• box-sizing:
• resize: Boxen können nun, bei gesetztem resize-Attribut und entsprechender Browserunterstützung, durch
den Betrachter einer Webseite in ihrer Größe verändert werden. Die Änderung erfolgt dabei analog z.B.
zu eine Größenänderung eines Fenster im Betriebssystem Windows von Microsoft. Es kann dabei
definiert werden, ob nur die Breite, die Höhe oder beide Größen veränderbar sein sollen.
• outline: Outlines, also Umrandungen von Boxen, können nun über die outline-offset-Eigenschaft von der
eigentlichen Box mit wahlfreiem Pixel-Abstand von der Box selbst erzeugt werden.
Selektoren [14]
• attribute selectors: Bei Attributsselektoren gibt es nun die Funktion, Formatierungen bei Elementen nur
dann einzusetzen, wenn die Bezeichnung des Elements mit bestimmten Zeichenketten beginnt, endet oder
diese enthält. So kann z.B. definiert werden, dass nur Elemente, die die Zeichen "test" in der Bezeichnung
haben, einen gelben Hintergrund erhalten sollen.
Box-Modell [14]
• overflow-x, overflow-y: Mittels der overflow-Eigenschaften lassen sich Inhalte an der x- bzw. y-Achse
entlang binden. overflow-x kontrolliert dabei die horizontale oder linksseitige Ausrichtung und overflow-y
entsprechend die vertikale Ausrichtung von Inhalten.
Generierter Inhalt [14]
• content: Inhalte von Elementen lassen sich aus verschiedenen Quellen generieren. Beispielsweise kann
Inhalt aus Angaben wie dem Datum und der Uhrzeit oder aus bereits bestehenden weiteren Elementen,
wie dem Webseitentitel, generiert werden.
Weitere Module [14]
• multi-column layout: Text lässt sich mit dieser Funktion nun in mehreren Spalten, ähnlich einer Seite in
einer Tageszeitung, anordnen.
• speech: Das CSS3 speech-Modul enthält einige der bereits in CSS2 vorhandenen Eigenschaften und fügt
neue hinzu. Bisher nur im Browser Opera implementiert, kann Text mit Sprachinformationen, wie z.B.
der Lautstärke, Sprachfamilie und Sprache versehen werden und über angeschlossene Lautsprecher
ausgegeben bzw. vorgelesen werden.
6 Vergleich
6.1 HTML5 gegenüber Vorgängerversionen
6 Vergleich
13
Abbildung 3 [15]: W3C HTML5 Logo
Die im Mai 2007 von der HTML-Arbeitsgruppe vorgestellte neue Version von HMTL5 sollte auf dem Entwurf
der Web Applications 1.0, die von der WHATWG entworfen wurde beruhen. Dieser Schritt und eine Abkehr von
den Entwicklungen von HTML mit Einflüssen von XML als XHTML, begründen sich auf den bisherigen
Misserfolg dieser Strategie. Tim Berners-Lee teilte diese Erkenntnis dem WWW in seinem Blog mit folgenden
Worten mit: "Some things are clearer with hindsight of several years. It is necessary to evolve HTML
incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and
slashes in empty tags and namespaces all at once didn't work. The large HTML-generating public did not move,
largely because the browsers didn't complain. Some large communities did shift and are enjoying the fruits of
well-formed systems, but not all. It is important to maintain HTML incrementally, as well as continuing a
transition to well-formed world, and developing more power in that world."[16] Der neue Standard sollte die
Möglichkeit geben folgenden Features direkt einzubinden: "Offline & Storage", "Connectivity / Realtime",
"Multimedia", "Graphics, 3D & Effects", "Device Access", "Performance & Integration", "Semantics" und "CSS3
/ Styling". Viele dieser Features konnten auch vorher in Webseiten eingebettet werden mussten jedoch auf andere
Techniken wie z.B. JQuery oder Flash zurückgreifen. Im HTML 5 soll alles aus einem Guss möglich sein, daher
wurden bestehende Elemente & Attribute entfernt, bearbeitet oder neue geschaffen. Alle Informationen beziehen
sich auf die Referenz des W3C Stand 21.01.2011
6.1.1 Entfernte Elemente
Hier kurz die Elemente die nicht mehr in HTML5 aufgenommen wurden. Als erstes sind die Elemente frame,
frameset und noframe zu nennen. Diese Elemente wurden dazu verwendet um eine Webseite in unterschiedliche
Segmente einzuteilen. Jedes dieser Segmente kann einen eignen Inhalt anzeigen. Dieser kann statisch oder
dynamisch erzeugt werden. Häufige Verwendung war/ist bei Navigationleisten vorzufinden. Suchmaschinen
können diese Seiten schlecht analysieren und dies begründet wohl auch den Verzicht auf diese Elemente[17].
• frame
• frameset
• noframes
Die folgenden Elemente dienen dem Styling und werden daher nicht mehr verwendet, da dies wesentlich besser
durch CSS3 Befehle erreicht werden kann.
• basefont
• big
• center
• font
•s
• strike
• tt
•u
• xmp
Bei den letzten drei handelt es sich um Elemente, die in ihrer Funktion schon durch andere abgedeckt werden.
Diese doppelten wurden daher entfernt.
• acronym
• applet
• dir
6.1 HTML5 gegenüber Vorgängerversionen
14
6.1.2 Neue Elemente
Viele Elemente wurden durch HTML5 hinzugefügt. Als erstes fällt dem Betrachter eines Quellcodes der
wesentlich vereinfachte Doctype ins Auge. Das Besondere an diesem neuen Doctype ist, dass in diesem keine
Version mehr aufgeführt wird. Da HTML5 nun als lebendiger Standard angesehen wird, kann davon ausgegangen
werden das dies auch in "höheren Versionen" beibehalten wird[18].
• <!DOCTYPE html>
Die restlichen Elemente können nach folgende Thematischen Gruppen unterteilt werden. Struktur, Gruppieren,
Text-Ebene, Ruby, Formulare und Multimedia.
6.1.2.1 Struktur
Bisher wurde ein Großteil der Webseiten wie in der linken Abbildung zu sehen nach folgendem Schema
aufgebaut. Die div Elemente wurden mit einer class Strukturiert. In HTML5 wurde dies wesentlich vereinfacht
und es wurden dafür eigene Elemente geschaffen. Die neue vereinfachte Struktur ist in der rechten Abbildung zu
sehen.
Abbildung 4: Gestaltung Webseite[19]
Abbildung 5: Neue Gestaltung Webseite[19]
• article: Das article Element steht für einen unabhängigen Bereich der Webseite. Beispiel ein Blogeintrag
6.1.2 Neue Elemente
15
• aside: Aside wird dazu benutzt Informationen zu vermittelt, die in direkten bezug zum dem Inhalt stehen,
jedoch nicht von Primären Interesse sind. Beispiel eine Infobox
• footer: Das footer Element bietet die Möglichkeit Web-Seiten ihren definierten semantische Bezug zur
Fußzeile herzustellen. Beispiel Impressum
• header: Header geben wieder den semantischen Bezug, um den Kopf eines Abschnitts zu beschreiben.
• hgroup: Hgroup gruppiert eine Folge von H1-H6 Elementen
• nav: Ein Block mit Links zur Navigation
• section: Bittet die Möglichkeit zur Strukturierung von Thematischen Gruppen, wenn article, aside und
nav unpassend sind.
6.1.2.2 Gruppieren
• figcaption:Beschriftung zu figure
• figure: Bittet die Möglichkeit Diagramme, Tabellen usw. in Beziehung zu einem Artikel zu stellen. Kann
jedoch ohne Inhaltsverlust entfernt werden.
6.1.2.3 Text-Ebene
• bdi: Das BDI-Element stellt eine Spannweite von Text, der von seiner Umgebung für die Zwecke der
bidirektionalen Text-Formatierung isoliert werden soll.
• details: Beschreibt Details zu einem Dokument
• mark: Markiert einen Textteil
• meter: Anagbe von Messweten
• progress: Stell einen Fortschritt für einen Prozess da
• summary: Header Element für das details Element
• time: Definiert Uhrzeit und/oder Datum
• wbr: ? line-break opportunity
6.1.2.4 Ruby
• rp: Zeigt die Informationen, falls ruby nicht bekannt ist
• rt: Zeigt die ruby Informationen
• ruby: Chinesische Anmerkungen oder Zeichen
6.1.2.5 Formulare
• command: Innerhalb eines menu-items kann der Nutzer damit eine der folgenden Aktionen(Typen)
aufrufen
♦ type=command: Das Element ist ein normaler Befehl mit einer zugehörigen Aktion
♦ type=radio: Das Element stellt eine Auswahl von einem Element aus einer Liste von Elementen.
♦ type=checkbox: Das Element ist ein Status, die ausgeschaltet oder eingeschaltet werden kann.
• datalist: Stellt eine Liste von input Elementen zu Verfügung die mittels option value festegelegt werden
• input type=:Neue Typen der input Elemente, die eine genaue Zuordnung erlauben. Namen sind
selbsterklärend
♦ input type=datetime-local: Datum/Zeit lokal
6.1.2.1 Struktur
16
♦ input type=date: Datum
♦ input type=month:Moant
♦ input type=time: Zeit
♦ input type=week: Woche
♦ input type=number:Nummer
♦ input type=range: Reichweite
♦ input type=email: E-Mail
♦ input type=url: URL
♦ input type=search: Suchfeld
♦ input type=tel: Telefonnummer
♦ input type=color: Farbe
• keygen: Das keygen Element erzeugt ein public-private key Paar, welches den public Key übermittelt.
• output: Resultat einer Berechnung
6.1.2.6 Multimedia
• audio: Um Audio Inhalte wie z.B MP3 einzubinden
• canvas:Eine freie Fläche in der mittels Java Script frei gezeichnet werden kann. Beispiel "3D" Spiele im
Browser
• embed: Fügt externe Inhalte ein. Beispiel Flash oder Quicktime
• source:Stellt dem Browser die Quellen für Audio und Video zu Verfügung. Es können mehere Quellen
angegeben werden. Browser verwendet das erste kompatible Format
• track: Das Track-Element erlaubt es, externe Mediaelementen zu spezifizieren. Es kann z.B das Attribut
Label hinzugefügt werden um Mediaelement zu beschriften.
• video: Um Video Inhalte wie z.B MP3 einzubinden
6.1.3 Geänderte Elemente
Bei den Änderungen wurden hauptsächlich den bestehenden Elementen zu den Präsentationseigenschaften eine
Inhaltliche Bedeutung hinzugefügt
• a: Bisher galt diese Element ohne einen href als nicht HTML konform. Fehlt dieser in HTML5 ist dieser
dennoch gültig wird jedoch als Platzhalter für einen Hyperlink gesehen.
• b: Vor HTML5 nur zum fettgedruckten Text. Jetzt ist es als Kennzeichen für eine von Stil abweichende
Form ohne weitere Inhaltliche Bedeutung
• cite: Zitierte Stellen eines Werkes
• hr: Nicht mehr eine horizontale Linie, sondern ein Umbruch auf Absatzebene
• i: Inhalt der vom Kontext abweicht
• input: Neue type Elemente wurden hinzugefügt siehe 6.1.2.5
• menu: Repräsentiert nun eine Liste von Kommandos
• s: Frühere Versionen von HTML definiert das s-Element nur in Bezug auf Präsentation. Nun werden
Inhalte gekennzeichnet, die nicht mehr richtig oder nicht mehr relevant sind.
• small: Vorher nur als kleiner Text angesehen. Nun mit der Bedeutung versehen "Kleingedrucktes" oder
"Rechtshinweise"
6.1.2.5 Formulare
17
6.2 CSS3 gegenüber Vorgängerversionen
Abbildung 6: HTML5-CSS3-Logo[20]
Im Abschnitt 5.5.3 wurden schon die wichtigsten Elemente der Version CSS3 angesprochen. Ist diesem Abschnitt
sollen noch einmal die Besonderheiten im Vergleich zu der vorherigen Version aufgedeckt und vertieft werden.
Als wichtigste Punkte können die Selectors, Media Queries, Funktionielle Notation, Web Fonts und
Transformation genannt werden.
6.2.1 Selectors
Wie schon angesprochen wird mit den Attributsselektoren, eine Formatierungen von Elementen möglich, wenn
die Bezeichnung des Elements mit bestimmten Zeichenketten beginnt, endet oder diese enthält. So können wie in
den unten stehenden Bespielen zu sehen, alle div Elemente mit title Attribute angesprochen und formatiert
werden. Bisher war dies nur über Umwege möglich.
Ein Ausschnitt aus einen Dokument könnte bisher so aussehen:
<div title="wasauchimmer">
Hello World
</div>
div {
color: red;
}
Ein Ausschnitt aus einen Dokument wie es mit CSS3 aussehen könnte:
<div title="wasauchimmer">
Hello World
</div>
div[title] {
color: red;
}
Darüber hinaus, ist es möglich nicht nur die Attribute anzusprechen, sondern auch deren Inhalt. Mit einer
speziellen Syntax können auch weitere Bedingungen geknüpft werden. Hier einige Beispiele zum bessern
Verständnis.
• div[title^="was"] trifft auf alle div-Elemente zu deren title mit der Zeichenkette was beginnt
• div[title$="immer"] trifft auf alle div-Elemente zu deren title mit der Zeichenkette immer endet
6.2 CSS3 gegenüber Vorgängerversionen
18
• div[title*="auch"] trifft auf alle div-Elemente zu deren title die Zeichenkette auch enthält
Als unter Punkt der Selectors sind auch die Strukturelle Pseudo-Klassen zu nennen. Mit diesen können "unechte"
Klassen angesprochen werden. Folgend einige Beispiele:
• :root selektiert das Hauptelement eines Dokuments
• :nth-child(2n) alle geraden Elementen. Z.B. Jede zweite Spalte einer Tabelle
• :nth-child(2n+1) alle ungeraden Elementen. Z.B alle ungeraden Spalten einer Tabelle
• :nth-last-child(-n+2) die letzten zwei Elemente
• :nth-last-child das letzte Element
• *:not(aside) alle Elemente, außer aside[19]
Eine Komplette Übersicht ist auf der Webseite des W3C zu finden[21].
6.2.2 Media Queries
Die Media Queries sind als Erweiterung der schon bekannten Media Types zu sehen. Damit können die
Stylesheets dem Medium bezogen angepasst werden. Hier wird z.B. ein eigenes Stylesheet für Handhelds benutzt
<link rel="stylesheet" href="handheld.css"
type="text/css" media="handheld" />
Mit den Media Queries können diese jetzt wesentlich genauer auf das eingesetzte Medium ausgerichtet werden.
Dazu können die aufgeführten Medium Eigenschaften genutzt werden. Die Eigenschaften können mit logischen
Ausdrücken weiter miteinander verknüpft werden. Ein logisches oder wird als Komma darstellt. Das AND
hingegen ganz wie üblich als and.
• width
• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resultion
• scan
• grid
Im folgenden Beispiel wird die Eingrenzung über die Medieneigenschaften und das logische verknüpfen
verdeutlicht.
@media screen and (min-width: 400px) and (max-width: 700px)
Als Ergebnis wird das Stylesheet auf alle Bildschirme mit einer Breite zwischen 400 Pixel und 700 Pixel
angewendet. [19]
6.2.1 Selectors
19
6.2.3 Web Fonts
Bisher war es nur möglich eigene Schriftarten nur über Bilder einzubinden. Dies brachte den Nachteil, dass diese
häufig wesentlich größer als die Schriftarten selber sind. In CSS3 wird diesen durch die Web Fonts Abhilfe
geschaffen. Nun ist es möglich Schriftarten in verschiedenen Formaten direkt einzubinden. Die unterstützen
Formate sind von Browser zu Browser unterschiedlich. Damit jeder Browser bedient werden kann, können
verschiedene Quellen mit angegeben werden. Diese Quellen kann lokal oder falls keine passende Schriftart auf
den Gerät vorhanden ist durch eine URL angeboten werden. Der Aufbau innerhalb eines Dokument geschieht
nach folgendem Schema.[19]
@font-face {
font-family: Bezeichnung;
src: Quelle [,Quelle];
[font-weight: weight];
[font-style: style];
}[22]
Die Geschwindigkeitsvorteile bieten gerade bei Mobilen Geräten einen enormen Vorteil. Jedoch können noch
weitere Vorteile genannt werden. Da die Schriftarten nicht mehr als Bild vorliegen können diese durch Routinen
eingelesen und ausgewertet werden. Zum einen bietet dies die Möglichkeit eine Webseite besser auf Menschen
mit Behinderung einzugehen; sprich Barrierefrei. Zum anderen können Suchmaschinen von diesem Vorteil
profitieren, da diese einen weiteren Teil der Seite untersuchen können. Ein weiterer nicht zu verachten Pluspunkt
ist, dass alle gängigen Browser Web Fonts anbieten. Diese sind zwar noch nicht in einem Einheitlichen Format,
jedoch zeichnet sich ab, dass sich Web Open Font Format (WOFF) auf allen gängigen Browser unterstützt wird.
Diese vom Mozilla Developer Center entwickelte Web Font, soll durch ihre komprimierte Form für schnellen
Download sorgen. Zusätzlich werden in dieser Lizenz Informationen mit angegeben, womit
Urheberrechtsprobleme vermindert werden[23].
6.2.4 Transformationen
Transformationen bieten nun die Option Bilder direkt, ohne Manipulation durch ein externes
Bildbearbeitungsprogramm oder einen Server, zu bearbeiten. Folgende Optionen stehen dank CSS3 zu
Verfügung.
• translate Mittels dieser Option können Elemente verschoben werden. Die Verschiebung wird Anhand
zweier Parameter definiert, die den Faktor auf der X sowie auf der Y-Achse angeben. In dem
nachfolgenden Beispiel
wird ein ein div Element um 200 Pixel auf der X-Achse, sowie 100 Pixel auf der Y-Achse verschoben.
div {
transform: translate(200px, 100px);
}
• scale Eine Vergrößerung bzw. Verkleinerung kann über das Attribut scale erreicht werden. Durch einen
Faktor wird die "Richtung" angeben. Für Werte kleiner 1 wird das Objekt verkleinert. Werte größer 1
6.2.3 Web Fonts
20
werden dementsprechend auch vergrößert dargestellt. Das Beispiel wird ein
-Element um den Faktor 0.5 verkleinern.
div {
transform: scale(0.5);
}
• rotate Eine Rotation der Elemente wird mit dem Befehl rotate ermöglicht. Der Grad der Rotation wird in
der Einheit degree (deg) gemessen. Dieses Beispiel würde
-Elemente um 270° drehen.
div {
transform: rotate(270deg);
}
• skew Um Objekte zu neigen bzw. zu krümmen, kann skew eingesetzt werden. Auch hier wird mit deg als
Maß gearbeitet. Eine Neigung von 30° wird durch das nächste Beispiel erreicht.
div {
transform: skew(30 deg);
}
• matrix Alle bisher vorgestellten Transformationen können auch in Kombination eingestetzt werden. Eine
anderer Option ist es die Veränderung in einer Matrix anzugeben. Dazu werden der Matrix 6 Werte
angehängt. Die Reihenfolge ist dabei wie folgt scaleY,skewX,skewY,scaleX,translateX,translateY.[19]
6.3 Browserunterstützung
Die Hersteller der unterschiedlichen Browser, sind sehr daran interessiert, dass die neue HTML & CSS Technik
in ihren Browser unterstützt wird. Dies zeigt vorallem der Aspekt, dass einige wichtige Hersteller sich zur
WHATWG zusammen geschlossen haben und um einen neuen Standart zu entwickeln. Dieser Umstand
begründete sich zwar darauf, dass die Hersteller nicht mit der Entwicklung des HTML zu xHTML einverstanden
waren. Durch den Schritt der W3C zu HTML5 ziehen beide Organisationen größtenteils wieder an einem Strang
und verfolgen beide die Weiterentwicklung von HTML5. Wie sieht jedoch die Umsetzung der zur Zeit in
Bearbeitung befindlichen HTML 5 Spezifikation aus?
Um darüber eine Aussage zu treffen, wurde ein Test auf der Internetseite http://html5test.com/ mit dem aktuell
verwendeten Browser durchgeführt. Dieser Test bewertet die Umsetzung der aktuellen HTML 5 Spezifikationen
und vergibt für alle erfolgreich umgesetzten Features Punkte. Die Maximal erreichbare Punktzahl liegt bei 300
Punkten. In den unten stehenden Tabelle sind die Ergebnisse Stand Januar 2011 zu sehen.
Tabelle 1
Browser
Version Veröffentlichung Status
6.2.4 Transformationen
Testversion Ergebnis HTML5
21
Chrome
8
12/ 2010
Aktuell 8.0.552.224
231
Firefox
3.6
12/ 2010
Aktuell 3.6.13
139
Internet Explorer 8
03/ 2009
Aktuell 8.0.76
27
Safari
5
06/ 2010
Aktuell 5.0.3
207
Opera
11
12/ 2010
Aktuell 11
177
Als klarer Sieger geht aus diesem Test der aktuelle Chrome Browser mit 231 von 300 Punkten hervor.
Abgeschlagen mit 27 von 300 Punkten liegt der Internet Explorer (IE)8 auf dem letzten Platz. Damit ist zu sehen,
dass der Chrome Browser bereits jetzt viele Funktionen von HTML5 anbieten. Um jedoch bessere Aussagen über
die HTML5 Fähigkeit der Browser zu treffen, wurde ein weiterer Test auf der Seite http://findmebyip.com/
durchgeführt. Bei diesem Test werden keine Punkte vergeben, jedoch kann genau erkannt werden, welches
Feature bereits integriert ist. Folgende Übersicht zeigt welche Features von welchem Browser unterstützt werden.
Abbildung 7 : Test FindMeByIp[24]
Auch bei diesen Test ist zu erkennen, dass der Chrome Browser bereits viele Features von HTML5 und CSS3
unterstützt. Anders als bei dem test auf HTML5-test.com wurde bei diesen Test bereits eine Beta des IE9
verwendet. Selbst in dieser Version kann der IE nicht so viele Unterstützungen bieten wie die restlichen Browser.
7 HTML5 in der Praxis
In den vorigen Kapiteln wurden die Grundlagen zum Thema HTML5 und CSS3 geschaffen. Dieses Kapitel geht
auf den praktischen Teil mittels HTML5 und CSS3 ein und zeigt anschaulich, wie eine Webseite mit HTML5
aufgebaut werden kann. Am Ende dieses Kapitels wird ein einfaches Praxisbeispiel gezeigt, dass den Einsatz von
HTML5 und CSS3 verdeutlichen soll.
7.1 Voraussetzungen
Im Vorfeld der Gestaltung einer Webseite sind einige Vorüberlegungen nötig. Das wichtigste bei einer Webseite
ist, dass die Webseite der breiten Masse zugänglich ist. Um dies erreichen zu können, ist es wichtig, dass die
Webseite von den gängigsten Browsern unterstützt wird und wenige Barrieren vorhanden sind. Die
Barrierefreiheit ist ein wichtiges Element bei der Webseitengestaltung, das gerne aus den Augen verloren wird.
Barrierefreiheit, auch Web Accessibility genannt, beschreibt dabei den Ansatz, Webseiten so zu gestalten, dass
jeder sie lesen und nutzen kann. Dazu gehören auch Menschen mit körperlichen Beeinträchtigungen.
6.3 Browserunterstützung
22
7.1.1 Standard-Konformität
Die Notwendigkeit von Standards wird immer wichtiger. Die Seiten im Internet werden von vielen verschiedenen
Personen aufgerufen, die verschiedene Browser, Betriebssysteme und Geräte verwenden. Damit all diese
Komponenten die Webseiten in adäquater Qualität verarbeiten können, wurden vom World Wide Web
Consortium (W3C) einheitliche Webstandards entwickelt, die sowohl für Browserhersteller als auch für
Webentwickler gelten sollen. Diese unabhängige Organisation besteht aus vielen verschiedenen Mitgliedern, die
einen großen Einfluss auf die Entwicklung dieser Standards haben.
Die ersten Versionen der Browser implementierten nur die Funktionalitäten, die im Standard beschrieben wurden.
Doch schnell entwickelte sich ein Krieg zwischen Netscape und Microsoft, sodass diese Funktionalitäten
implementieren, die nicht Teil des Standards waren, wie z.B. die Unterstützung von JavaScript und Frames [25].
Auch wenn zusätzliche Funktionalitäten die Arbeit des Entwicklers erleichtern und das Aussehen einer Webseite
verschönert, stellt dies immer das Risiko dar, dass diese Webseite von anderen Benutzern nicht richtig aufgerufen
werden kann.
Um seine Webseite auf Konformität überprüfen zu können, stehen im Internet Validatoren zur Verfügung, die
eine Webseite auf ihren im Doctype angegeben Standard überprüfen. Vor allem das W3C stellt solch einen
Validator zur Verfügung [26].
7.1.2 Barrierefreiheit
Das Internet hat sich rasant entwickelt. Früher dienten Webseiten ausschließlich der reinen
Informationsdarstellung. HTML war anfangs dafür gedacht, Informationen bereitstellen zu können. Als einzige
Dynamik waren damals die Hyperlinks vorgesehen, durch die der Nutzer durch die Webseite navigieren oder auf
eine externe Webseite verwiesen werden konnte. Heute sind Webseiten viel mehr Anwendungen, wo Benutzer
miteinander kommunizieren, selbst Inhalte darstellen, Geschäfte abwickeln usw. Doch all diese Dinge erfordern
weitere Technologien, die über HTML als Auszeichnungsprache, hinausgehen. Doch zusätzliche Technologien
erhöhen das Risiko, dass nicht jeder die Webseite korrekt aufrufen kann, seien es fehlende Browserunterstützung
oder nicht installierte Plugins, die für die Darstellung der Seite notwendig sind.
Zusätzlich wird bei der Erstellung der Webseiten auf das Datenvolumen nicht mehr so viel Rücksicht genommen,
da immer mehr Haushalte mit DSL ausgestattet sind. Jedoch existieren immer noch Nutzer, die solch eine
schnelle Bandbreite nicht zur Verfügung haben, sodass das Laden einer Webseite viel Zeit in Anspruch nehmen
kann. Hinzu kommt, dass Webseiten nicht mehr nur über den Browser auf dem PC aufgerufen werden, sondern
auch über Handys, die einen sehr kleinen Bildschirm besitzen und z.B. nicht mit einer Maus ausgestatten sind, die
das navigieren erleichtert.
Ein weiterer Aspekt sind Nutzer, die unter einer Behinderung leiden. Menschen mit Sehbehinderung nutzen
Screen-Reader um sich Webseiten darzustellen. Im Jahre 1999 wurde vom W3C die so genannten "Web Content
Accessibility Guidelines" entworfen, die folgende zwei Ziele verfolgen [27]:
• Den Seiteninhalt verständlich und navigierbar zu machen
• Die Sicherstellung von eleganter Transformation
Eine klare inhaltliche Darstellung bezüglich der Sprache reicht für diesen Zweck nicht raus. Dazu ist es wichtig,
dass eine einfache und verständliche Möglichkeit besteht, zwischen Seiten innerhalb einer Webseite zu
navigieren. Zu diesem Zweck sind Navigationswerkzeuge und Orientierungshelfen unabdingbar.
Orientierungshilfen helfen dem Nutzer zu erkennen, wo genau auf der Seite er sich gerade befindet, um den
Überblick nicht zu verlieren.
7.1.1 Standard-Konformität
23
Bezüglich der Transformation lässt sich sagen, dass eine Webseite ohne Probleme an die verschiedenen
Gegebenheiten anzupassen sein muss. Dafür gelten folgende Grundsätze[28].
• Strikte Trennung von Inhalt und Präsentation
Dies wird durch das auslagern eines Style-Sheet realisiert. Dadurch lässt sich für jede Gegebenheit das nötige
Style-Sheet laden (z.B. für Druckausgabe). Außerdem verkürzt sich die Downloadzeit, da Informationen nicht
doppelt vorkommen und die Sytle-Sheet vom Browser zwischen gespeichert werden können[28].
• Multimediale Elemente müssen ein textliches Äquivalent besitzen
Benutzer, die auf einer Seite keine eingebetteten Bilder sehen, z.B. Sehbehinderte, die sich die Seite von einem
Screenreader vorlesen lassen, können den Inhalt einer Webseite nur verstehen, wenn für diese Bilder ein
Textäquivalent vorhanden ist, welches das Bild erklärt[28].
• Dokumente müssen auch für blinde und taube Nutzer zugänglich sein
Ein Screenreader sollte genauso berücksichtigt werden wie die Darstellung in schwarz-weiß. Seite muss
Hardware/Software unabhängig sein Es ist wichtig, dass jede Seite auch über Tastatur steuerbar und auf sehr
kleinen Bildschirmen oder Bildschirmen mit geringer Auflösung erkennbar ist[28].
HTML5-Webseiten mittels Screenreader vorlesen zu lassen stellt bis dato ein Problem dar. Screenreader erfassen
zwingend die echte Struktur einer Seite, damit sie damit etwas sinnvolles anstellen können. Da jedoch HTML5
noch nicht W3C-Standard ist, kann man nicht kritisieren, dass die Screenreader HTML5 noch nicht implementiert
haben. Jedoch implementiert HTML5 WAI-ARIA.
Barrierefreiheit mittels WAI-ARI
HTML5 wird der erste HTML-Standard sein, der Konzepte und Mittel für barrierefreies Webdesign fest
integriert. Die WAI-ARIA-Spezifikationen beschreiben Möglichkeiten, mittels zusätzlichen HTML-Attributen,
den Screenreadern mitzuteilen, wenn sie auf einen Bereich treffen, der logisch zusammen gehört. Dies kann ein
Screenreader zuvor nicht wissen. Das Erstellen von Menüs, Buttons oder Schieberegler kann z.B. durch HTML,
CSS und JavaScript in Kombination realisiert werden. Das Problem hierbei ist, dass Screenreader solche
Konstruktionen selbst nicht erkennen.
Eine Fortschrittsanzeige lässt sich wie folgt darstellen:
<div id="fortschritt">
<div id="anzeige">50%</div>
<div style="width:50%;" id ="abgespielt">/<div>
</div>
Dieser Fortschrittsbalken kann mit Hilfe von wenig CSS, wie in Abbildung 5 dargestellt, so aussehen. Wer jedoch
einen Screenreader nutzt, kann damit nicht viel anfangen, da man nicht wissen kann, dass die drei <div>
zusammen ein wichtiges Konstrukt repräsentieren. Dies stellt in Zukunft jedoch kein Problem dank ARIA dar:
<div id="fortschritt"
role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="50">
<div id="anzeige">50%</div>
<div style="width:50%;" id="abgespielt"></div>
7.1.2 Barrierefreiheit
24
</div>
Abbildung 8: Fortschrittsbalken[29]
Durch das Attribut role wird die <DIV> als Fortschrittsanzeige erkennbar gemacht. Des Weiteren geben die
aira-*-Attribute sowohl den Minimal- und Maximalwert als auch den aktuellen Wert an. HTML5 unterstützt die
Attribute role und aria-*, so wie sie in der Spezifikation vorgesehen sind.
Die HTML5-Spezifikation sieht außerdem eine ?Implizite ARIA-Semantik? vor. Das bedeutet, dass bestimmten
Elementen die aria-*-Attribute nicht manuell hinzugefügt werden müssen, da die HTML5-Spezifikation diese
automatisch vorsieht. Die folgende Tabelle zeigt die Attribute, die solch eine implizite ARIA-Semantik besitzen:
Tabelle 2
Element
ARIA-Semantik
Mögliche Rollen
<article>
article-Rolle
article, document, application, main
<aside>
note-Rolle
note, complementary, search, banner
<header>
Keine
banner
<li>
listitem-Rolle
listitem, treeitem
<ol>
list-Rolle
list, tree, directoy
<output>
status-Rolle
Alle
<section> region-Rolle
regian, document, application, contentinfo, main, search, alert, dialog,
altertdialog, status, log
<table>
grid-Rolle
grid, treegrid
list-Rolle
list, tree, directory
document-Rolle
document, application
<body>
7.2 Grundaufbau mit HTML5
Der Grundaufbau einer HTML5-Datei unterscheidet sich nur geringfügig von dem Aufbau einer HTML 4.01
Datei. Eine Vereinfachung stellt der neue Doctype dar:
<!DOCTYPE html>
anstatt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt
Da HTML5 so gut wie vollständig abwärtskompatibel ist, besteht eine hohe Wahrscheinlichkeit, dass eine in
HTML 4.01 erstellte Webseite nach ersetzen des neuen Doctypes weiterhin funktioniert[30].
25
Es gibt drei Möglichkeiten den Zeichensatz für ein HTML5-Dokument festzulegen. Über das setzen einer
Unicode Byte Order, durch die Definition des content-types im HTTP-Header oder durch die alt bekannte Angabe
des Zeichensatzes im <meta>-Tag. Letzteres sollte innerhalb der ersten 512 Bytes des Dokuments erfolgen[30].
Für UTF-8 wäre die Angabe im Meta-Element folgende:
<meta charset="utf-8">
anstatt des umgangreicheren
<meta http-equiv="content-type" content="text/html; charset=utf-8">
Ein HTML5-Dokument könnte so aussehen:
<!DOCTYPE html>
<HEAD>
<META CHARSET="UTF-8">
<TITLE> HTML5 </TITLE>
<HEAD>
<H1> Ich bin ein HTML5-Dokument </H1>
<p class=beispiel>
Hallo!
<P>
Ich bin ein HTML5-Dokument!
Das o.g. Beispiel ist gültiges HTML5, obwohl End-Tags fehlen und sogar wie beim <body> das Start-Tag
ausgelassen wurde. Der HTML-Validator des W3C kann bereits gut mit HTML5 umgehen und würde das
Beispiel als konform validieren. Es fallen auch die fehlenden Anführungszeichen für Attribute und die
wechselnde Groß- und Kleinschreibung auf. Aber all das ist bei HTML5 erlaubt. Somit erleichtert es dem
Programmierer die Arbeit. Der Parser selbst überprüft beim Einlesen des Dokuments, ob Tags fehlen und fügt
diese automatisch ein[30].
Die nachfolgende Tabelle zeigt eine Auflistung der aus HTML 4.01 bekannten Elementen:
Tabelle 3
Element
Start-Tag End-Tag
<html>
Optional
Optional
<head>
Optional
Optional
<body>
Optional
Optional
<li>
Pflicht
Optional
<dt>
Pflicht
Optional
<p>
Pflicht
Optional
<colgroup> Optional
Optional
<thead>
Pflicht
Optional
<tbody>
Optional
Optional
26
<tfoot>
Pflicht
Optional
<tr>
Pflicht
Optional
<th>
Pflicht
Optional
<td>
Pflicht
Optional
<rt>
Pflicht
Optional
<rp>
Pflicht
Optional
<optgroup> Pflicht
Optional
<option>
Optional
Pflicht
Somit sieht der grundlegende Aufbau eines HTML5-Dokuments wie folgt aus:
1. Byte Order Mark (optional)
2. Leerzeichen und Kommentare (optional)
3. Doctype
4. Leerzeichen und Kommentare (optional)
5. <html> mit dem Inhalt des Dokuments
6. Leerzeichen und Kommentare (optional)[30]
Wenn die Übermittlung des Zeichensatzes per HTTP-Header oder BOM erfolgt, lautet das kleinstmögliche
gültige HTML-Dokument:
<!DOCTYPE html>
Der HTML-Parsers des Browsers erstellt daraus das folgende DOM:
<html>
<head />
<body />
</html>
7.2.1 Frame
Ganz zu Anfang wurde das Layout mithilfe von Frames realisiert. Mittels eines <frameset> ist es möglich,
mehrere einzelne Seiten als Ganzes darzustellen. Jedoch wurde im Laufe der Zeit immer mehr Kritik an Frames
geübt. Die komplette Webseite kann nicht gedruckt werden, da immer nur die aktuelle Seite gedruckt werden
kann. Auch das Hinzufügen der Webseite zu den Lesezeichen des Webbrowsers ist nicht möglich, da nur der
Verweis der aktuellen Seite gespeichert wird. Außerdem sind Webseiten die mit Hilfe des <frameset> erstellt
worden sind nur schwierig durch eine Suchmaschine indizierbar, da diese nur den Inhalt einzelner Seiten
durchsuchen kann und nicht das Gerüst drum herum. Aufgrund dieser vielen Nachteile hat sich im Laufe der Zeit
das Erstellen eines Layouts mit Frames als nicht brauchbar erwiesen.
In HTML5 wurden Frames ersatzlos gestrichen. Nur das IFrame ist weiterhin Bestandteil.
7.2.1 Frame
27
7.2.2 Tabelle
Die Tabelle ist zum Präsentieren von Daten in Tabellenform geeignet. Also für Daten, die in einer Beziehung
zueinander stehen. Zu Anfang, als noch wenig Möglichkeiten bestanden mittels CSS ein vernünftiges Layout zu
realisieren, ?zweckentfremdete? man <table> zu diesem Zweck. Das erste Layout ist mithilfe einer Tabelle
schnell realisiert. Jedoch hat dies viele Nachteile. Zum einen ist ein einmal erstelltes Layout schwierig zu ändern.
Der Quellcode wird unübersichtlich und der Screenreader versucht den Inhalt einer Tabelle in seiner Struktur
vorzulesen. Der Screenreader kann nicht wissen, dass durch die Tabelle zur Struktur der Webseite genutzt wurde.
Somit lässt sich festhalten, dass die Elemente einer Spezifikation für ihren Zweck verwendet werden sollten. Ein
vernünftiges Layout lässt sich mit Hilfe von Containern-Elementen und CSS weitaus flexibler und strukturierter
realisieren.
7.2.3 Div
Auch in HTML5 sind <div>-Elemente die einzig wahren Elemente, mit denen sich das Layout einer Webseite
realisieren lässt. Mittels <div>-Elementen und CSS ist man in der Lage, dass gewünschte Layout für eine
Webseite zu implementieren. Da sich jedoch in Bezug auf HTML5 nichts geändert hat, sei auf die Webseiten
verwiesen, die sich mit dem Layout von Webseiten mittels <div>- und weiteren Elementen mit Hilfe von CSS
auseinander setzen. Nachfolgend ein einfaches Beispiel, welches das Layout mittels <div> und CSS verdeutlichen
soll:
body {
padding: 0px;
margin: 0px;
background-color: #0080c0;
}
#inhalt {
width: auto;
margin: 20px 170px;
background-color: #ffffc6;
}
#links {
position: absolute;
top: 20px;
left: 20px;
width: 130px;
height: 300px;
background-color: #ffcc00;
}
#rechts {
position: absolute;
top: 20px;
right: 20px;
width: 130px;
height: 300px;
background-color: #ffcc00;
}
<div id="inhalt">Mitte</div>
<div id="links">Links</div>
<div id="rechts">Rechts</div>
7.2.2 Tabelle
28
Abbildung 9: klassisches 3-Spalten-Design[31]
7.2.4 Semantische Gliederung
Zu Anfang trug HTML5 den Namen "Webappplications 1.0", denn Webanwendungen statt Webseiten sind der
Fokus vieler Neuentwicklungen. Aus diesem Grund findet sich der Großteil der Änderungen im
JavaScript-API-Bereich wieder. Nichtsdestotrotz steht im Bereich HTML, mit dem man reine Webseiten erstellt,
eine Reihe von Änderungen und Neuerungen bereit. HTML5 stellt nicht nur neue Elemente bereit, sondern
erweckt alte Präsentationselemente, die durch die Strict-Varianten von HTML4 verboten waren, wieder zum
Leben. Somit besitzt HTML5 bessere Ausdrucksmöglichkeiten für semantisches HTML[32].
Struktur innerhalb Dokumente
Ein mehrspaltiges Layout war früher die Ausnahme, heute stellt es die Regel dar. Die Struktur von Webseiten
wird immer komplexer, in den Fußzeilen (engl. "Footer") finden sich viele Inhalte wieder und der Inhalt besteht
aus mehr als nur Überschriften und Absätzen. Um diese Struktur zu realisieren, wird eine Menge von
<div>-Elementen benötigt, die als semantisch leere Hülle zwar ein Design ermöglichen, die verschiedenen
Bereiche einer Webseite jedoch nicht sinnvoll voneinander abgrenzen. HTML5 schafft die Möglichkeit, wirklich
semantisches HTML zu realisieren, in dem es Elemente zur Verfügung stellt, die eine Webseite semantisch
strukturieren lassen. Wenn Webseiten zu komplex werden, reichen die Elemente für Überschriften <h1> bis <h6>
nicht mehr aus. Das Logo benötigt <h1>, die Ressort-Überschrift <h2>, <h3> und <h4> werden für den Artikel
und dessen Unterüberschrift selbst benötigt und <h5> und <h6> bleiben für den Kommentarabschnitt und die
Kommentare selbst übrig. Diese Probleme werden durch die neuen strukturierenden Elemente in HTML5 gelöst.
Nur mit <h1> und den neuen Elementen ist man in der Lage, unendlich tief verschachtelte Dokumente zu
schreiben[32].
Neue strukturierende Elemente
• <section>
Das einfachste neue Element um ein Dokument zu strukturieren ist <section>, welches ein Dokument in
Sinnabschnitte unterteilt. Dieses Dokument ist wirklich nur für die inhaltliche Gliederung gedacht, z.B.
für die Unterteilung in Kapitel. Benötigt man Elemente zum Design, ist das alt bewährte <div> die
richtige Wahl.
<section>
7.2.3 Div
29
<h1>Kapitel 1</h1>
<p> Hier steht Text von Kapitel 1 </p>
</section>
<section>
<h1>Kapitel 2</h1>
<p>Hier steht Text von Kapitel 2</p>
</section>
<section>
<h1>Kapitel 3></h1>
<p1>Hier steht Text von Kapitel 3</p>
</section>
Meistens enthält ein <section>-Element mindestens eine Überschrift oder ein <hgroup>-Element. Möglicherweise
auch <header>-und <footer>-Elemente[32].
• <header> und <footer>
Ein <header> repräsentiert den Kopf-Bereich, also einführende Inhalte, einer Webseite. Dies können z.B.
Überschriften und Navigationen sein. Dabei kann das <header>-Element nicht nur als Kopfbereich der gesamten
Seite, sondern auch als Kopfbereich anderer Elemente angesehen werden. Das <footer>-Element stellt das
Pendant für den Fußbereich von Webseiten, Dokumenten oder Abschnitten dar[32].
<section>
<header>
<h1>Die Überschrift</h1>
</header>
<p>
Inhalt und noch mehr Inhalt
</p>
<footer>
<p> Dies ist z.B. ein rechtlicher Hinweis </p>
</footer>
</section>
• <nav>
Das <nav>-Element wurde zur Auszeichnung von Navigationselementen eingeführt. Es beinhaltet also Verweise
auf andere Unterseiten innerhalb der Webseite.
<header>
<h1> Beispiel einer Navigation </h1>
<p>
<a href="sitemap.html">Sitemap</a>
<a href="impressum.html">Impressum</a>
</p>
<nav>
<ul>
<li><a href="home.html">Startseite</a></li>
<li><a href="ueber.html">Über uns</a></li>
<li><a href="home.html">Produkte</a></li>
<li><a href="home.html">Kontakt</a></li>
</ul>
<nav>
</header>
Bei diesem Beispiel fällt auf, dass die zwei Links innerhalb des ersten <p>-Elements nicht innerhalb <nav>
stehen. Dies liegt daran, dass das <nav>-Element nur für die Hauptnavigation gedacht ist. Es ist zwar erlaubt
7.2.4 Semantische Gliederung
30
mehrere <nav>-Elemente innerhalb einer Webseite zu besitzen, jedoch sollte damit maßvoll umgegangen
werden[32].
• <aside>
Inhalte, die eine Ergänzung zum umgebenden Element darstellen, stehen innerhalb des <aside>-Elements. Der
Inhalt vom <aside>-Element sollte eine Beziehung zum umliegenden Inhalt besitzen[33].
<p> Meine Familie und ich waren diesen Sommer im Movie Park. </p>
<aside>
<h4>Movie Park</h4>
Movie Park ist der größte Film- und Entertainmentpark in Deutschland
</aside>
• <article>
Abgeschlossene Inhalte werden mittels <article> ausgezeichnet. Es ist geeignet für Forenartikel, Blogeinträge,
Nutzerkommentare und Newsmeldungen[34].
<article>
<h1>Mein erster Blogeintrag </h1>
<p> Heute ist wieder was tolles passiert ... </p>
</article>
7.2.5 Formulare
Das heutige Web fordert immer komplexere Dateneingaben. Anstatt überschaubarerer Kontaktformulare, werden
heute Eingaben wie Farben, Datumseingaben oder Zahlenbereich benötigt. Zusätzlich wünscht der User, dass
seine Eingaben auf Richtigkeit vor Absenden überprüft werden. Um dies zu bewerkstelligen war ein Entwickler
gezwungen, uneinheitliche und komplizierte JavaScript-Konstruktionen einzusetzen. Aus diesem Grund stellt
HTML5 viele neue Input-Typen und viele neue Funktionen für alle Formular-Elemente bereit. Nachfolgend
werden die wichtigsten Neuerungen gezeigt.
Neue Input-Typen
• search
Stellt eine Ergänzung von <input type=?text?> dar. Es ist lediglich für Plattformen gedacht, wo Suchformulare
ein spezielles Aussehen besitzen. Dementsprechend werden alle Style-Angaben bei diesem Typ ignoriert[35].
<input type="search">
• telefone, url und email
Diese Typen sind für die Eingabe von Telefonnummern, URLs und E-Mail-Adressen gedacht. Wird die
Formular-Validierungs-API benutzt, werden bei URLS und E-Maildressen der Inhalt auf Richtigkeit überprüft.
Außerdem werden bei Smartphones die zur Verfügung gestellte Tastatur entsprechend dem Typ angepasst.
<input type="telephone">
<input type="url">
<input type="email">
7.2.5 Formulare
31
• number
Der Typ number stellt ein Feld für die Eingabe von Zahlen bereit. Die Zahl kann per Tastatur eingegeben oder
man nutzt die vorhandenen Kontrollelemente. Die Attribute min, max und step geben dabei den Minimalwert,
Maximalwert und die Schrittweite an[35].
<input type="number" min="0" max="3" step="1">
Abbildung 10: Beispiel Input-Typ number[36]
• Datums- und Zeitangaben
Zur Eingabe von Datums- und Zeitangeben stehen mehrere Typen zur Verfügung. Es existieren die Typen date
für die Auswahl des Datums, time für die Auswahl der Uhrzeit und Datetime als Kombination aus beiden. Des
Weiteren existieren die Typen month und week, die für die Auswahl des Monats und einer Kalenderwoche
vorhanden sind. Interessant dabei ist, dass Formularwidgets in Form von Datumspickern und Zeitauswahlfeldern,
zur Verfügung stehen[35].
• range
Der Typ range wird in den meisten Browsern als Schieberegler dargestellt, der für die Auswahl einer Zahl
innerhalb von Grenzwerten ermöglicht. Der Grenzwert werden durch die Attribute min und max festgelegt[35].
<input type="range" min="0" max="0" step"1">
Abbildung 11: Beispiel Input-Typ range[37]
Integrierte Formularvalidierung
Mittels HTML5 lassen sich Formulareingaben direkt im Browser validieren. Die Input-Typen email und url lassen
z.B. nur formale korrekte E-Mail-Adressen und URLs zu, Eingabefelder können als Pflichtfelder deklariert
werden und es ist sogar möglich, für jedes Feld einen regulären Ausdruck zu definieren. Dabei lassen sich
Elemente einzeln oder ganze Formulare und Fieldsets validieren. All dies geschieht über die eingebaute
Validierungs-API. Dazu ist nur eine einzige Zeile JavaScript nötig.
Die folgenden Elemente sind von einer Prüfung ausgeschlossen:
• hidden
• submit
• image
• reset
• object
Alle anderen Elemente können auf folgendes geprüft werden:
7.2.5 Formulare
32
• Pflichtfelder
• Eingebaute Syntaxregel wie bei email und url
• Einhaltung der Feldattribute, z.B. min und max
• Beliebige Syntaxregeln von regulären Ausdrücken
7.3 Praxisbeispiel
Die nun erworbenen Kenntnisse sollen nun in einem Praxisbeispiel eingesetzt werden. Als Praxisbeispiel dient ein
Blog, da sich dort die vielen neuen semantischen Elemente gut einsetzen lassen. Außerdem benötigt ein Blog ein
Formular, bei dem neue Funktionalitäten gut gezeigt werden können.
Grundstruktur
Abbildung 12 zeigt die Grundstruktur des zu erstellenden Blogs.
Abbildung 12: Grundstruktur Praxisbeispiel[38]
Grundstruktur als Quelltext:
7.3 Praxisbeispiel
33
<!doctype html>
<html>
<head>
<title>Praxisbeispiel Blog</title>
</head>
<body>
<header></header>
<nav></nav>
<section>
<article class="blogPost"></article>
</section>
<section id="comments">
<article></article>
<article></article>
</section>
<form></form>
<aside>
<section></section>
<section></section>
</aside>
<footer></footer>
</body>
</html>
Navigation
Die Navigation wird in Form einer Liste genau wie in HTML 4 oder XHTML erstellt. Der einzige unterschied ist,
dass die Liste innerhalb eines <nav>-Elements platziert wird.
<nav>
<ul>
<li class="selected"><a href="#">Startseite</a></li>
<li><a href="#">Über</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Kontakt</a></li>
<li class="subscribe"><a href="#">Abonnieren</a></li>
</ul>
</nav>
Hauptteil
Im Hauptinhalt werden Blogeintrag, Kommentare und das Formular zum Abschicken eines Kommentars
zusammengefasst. Dabei besteht jeder Bereich aus einer <section>.
• Blogeintrag
Die <section> Blogeintrag besteht aus <article>, <header>, und <p>. Das <article>-Element repräsentiert einen
unabhängigen Blogeintrag. Genau für solch einen Zweck wurde das <article>-Element geschaffen. Innerhalb des
<article>-Elements befindet sich ein <header>-Element, welches die Überschrift des Blogeintrags repräsentiert.
Außerhalb des <header>-Elements wird der wirkliche Eintrag innerhalb eines <p>-Elements dargestellt.
<section>
<article class="blogPost">
<header>
<h2>Ein Blogeintrag</h2>
</header>
<p>Inhalt des Eintrags</p>
</article>
7.3 Praxisbeispiel
34
</section>
• Kommentare
Die Kommentare werden ähnlich wie der Blogeintrag aufgebaut, ohne großen Änderungen oder Neuerungen. Ein
Unterschied ist, dass unter <section> mehrere <article>-Elemente vorhanden sind, die die verschiedenen
Kommentare repräsentieren.
<h3>Kommentare</h3>
<article>
<header>
<a href="#">Meier</a> am <time datetime="2011-02-02T13:00+02:00">02. Februar 2011</time>
</header>
<p>Inhalt von Kommentar 1</p>
</article>
<article>
<header>
<a href="#">Schulz</a> am <time datetime="2011-02-03T14:00+02:00">03. Februar 2011</time>
</header>
<p>Inhalt von Kommentar 2</p>
</article>
</section>
• Kommentarformular
Für das Kommentarformular werden die neuen Input-Typen email und url verwendet. Außerdem werden die
Pflichtfelder für die neue Validierung in HTML5 mittels required markiert.
<form action="#" method="post">
<h3>Kommentar schreiben</h3>
<p>
<label for="name">Name</label>
<input name="name" class="inputs" type="text" required />
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" class="inputs" type="email" required />
</p>
<p>
<label for="website">Website</label>
<input name="website" id="website" class="inputs" type="url" />
</p>
<p>
<label for="comment">Comment</label>
<textarea name="comment" id="comment" class="inputs" required></textarea>
</p>
<p>
<input type="submit" id="button" value="Kommentar eintragen" />
</p>
</form>
Fußzeile und Sidebar
Der <footer> und die Sidebar <aside> enthalten nichts neues und sind simpel Aufgebaut. Es entspricht den
vorhergegangen Teilen.
<aside>
7.3 Praxisbeispiel
35
<section>
<header>
<h3>Kategorien</h3>
</header>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Sit amet consectetur</a></li>
<li><a href="#">Adipisicing elit sed</a></li>
<li><a href="#">Do eiusmod tempor</a></li>
<li><a href="#">Incididunt ut labore</a></li>
</ul>
</section>
<section>
<header>
<h3>Archive</h3>
</header>
<ul>
<li><a href="#">Dezember 2010</a></li>
<li><a href="#">November 2010</a></li>
<li><a href="#">Oktober 2010</a></li>
</ul>
</section>
</aside>
<footer>
<section id="footer">
<p>Inhalt der Fußzeile</p>
</section>
</footer>
Ergebnis
Das Ergebnis ohne CSS ist nicht berauschend, wie man in Abbildung 13 sehen kann. Angereichert mit CSS
jedoch, ist es ein Blog, wie man ihn gewöhnlich kennt, siehe Abbildung 14. Der Quelltext der Webseite
(blog.html) und des CSS-Codes (blog.css) ist im Anhang zu finden.
7.3 Praxisbeispiel
36
Abbildung 13: Blog ohne CSS[39]
7.3 Praxisbeispiel
37
Abbildung 14: Blog mit CSS[40]
8 Fazit
Die durch die W3C und die WHATWG vorangetriebene Entwicklung von HTML5 und CSS3 bietet bereits jetzt
dem WWW unglaubliche Möglichkeiten. Den größten Schritt bieten wohl die Elemente rund um die Funktionen
des Multimedia. Damit können Inhalte dargestellt werden, die bisher nur durch Plugins integriert werden konnten.
Gerade das neue canvas Element, welches komplett neu in HTML5 auftaucht zeigt völlig neue und auf ungeahnte
Weise, einen neuen Weg Webseiten zu designen. Hier ist als herausragendes Beispiel, das Computerspiel Quake
zu nennen, welches ohne zusätzliche Software in einem HTML5 fähigen Browser gespielt werden kann. Weitere
Inhalte wie Audio und Video Formate direkt in ein HTML Dokument einzubetten, wurde wohl von vielen
Webseiten-Programmierer lange erwartet. Neue Wege können auch mit den Drag&Drop und Geolocation
Features beschritten werden. Die bisher genannten Entwicklungen sind sehr offensichtlich und fallen den
Benutzer direkt ins Auge, es sind aber auch Elemente entstanden, die eine semantische Strukturierung innerhalb
des Codes schaffen. Dies bietet nicht nur den Entwicklern enorme Vorteile Webseiten dynamisch anzupassen,
sondern auch für Suchmaschinen und Menschen mit einer Behinderung. Ein weiterer Fortschritt ist auch in der
Gestaltung und Prüfung von Formularen gelungen. Endlich ist es ein leichtes Eingaben der Benutzer direkt nach
vorgegebenen Pattern-Attribute auf Richtigkeit zu prüfen. Auch das Entwerfen und Gestalten dieser ist mit
HTML Kenntnissen vereinfacht worden.
8 Fazit
38
Dem allen steht gegenüber, dass die eingesetzten Features erstmal von den Browser unterstützt werden müssen.
Die durchgeführten Test zeigten je nach Browser unterschiedliche Ergebnisse. Auszeichnen konnte sich vor allem
der Chrome Browser, einen Großteil dieses guten Ergebnis kann auf die Häufigkeit von neuen Releases
zurückgeführt werden. Alleine 12 Versionen (incl. Beta und Developer) dieses Jahr[41]. Der IE bildete das
Schlusslicht in den durchgeführten Test, es ist doch zu beachten, dass ein Ausblick auf die neue IE Version 9 eine
enorme Verbesserung gegenüber der aktuellen Version zeigt. Der Willen Microsoft den Internet Explorer auf
HTML5 und CSS3 auszurichten, zeigt der eigene vorgestellte Test auf
http://samples.msdn.microsoft.com/ietestcenter/. Bei diesem schneidet der IE9 außergewöhnlich gut ab, aber wie
sagt man: "Trau keiner Statistik, die du nicht selber gefälscht hast." Der Test kann nicht als wirklich Objektiv
betrachtet werden, da eine Selektion der Features stattgefunden hat[42].
Wird der Fortschritt weiter getrieben und können sich die W3C und die Browser Hersteller mit der WHATWG
weiterhin auf einen Weg einigen, werden die neuen Techniken mit HTML5 und CSS3 das Internet
revolutionieren.
9 Fußnoten
1. ? Vgl. Bachan
2. ? Vgl. Optinet24.de
3. ? Vgl. Bloß
4. ? Quelle: Appleinsider
5. ? Vgl. W3C Standards
6. ? 6,0 6,1 Vgl. SELFHTML
7. ? Vgl. SELFHTML
8. ? Vgl. WHATWG
9. ? Quelle: Academic
10. ? Vgl. SELFHTML
11. ? Vgl. SELFHTML
12. ? Vgl. W3C DOM
13. ? Vgl. Szestakow
14. ? 14,0 14,1 14,2 14,3 14,4 14,5 14,6 14,7 14,8 Vgl. CSS3.info
15. ? W3C HTML5 Logo
16. ? Berners-Lee
17. ? Vgl. html-lernen
18. ? Vgl. HEISE
19. ? 19,0 19,1 19,2 19,3 19,4 19,5 Vgl. CSS3-HTML5
20. ? HTML5-CSS3-Logo
21. ? Vgl. W3C Selectors
22. ? Developer-Mozilla @font-face
23. ? Vgl. Developer-Mozilla WOFF
24. ? Quelle: findmebyip
25. ? Vgl.Beck (2006)
26. ? W3C Validator
27. ? Vgl. Chisholm / Vanderheiden / Jacobs (1999)
28. ? 28,0 28,1 28,2 28,3 Vgl. WCAG, Abschnitt: Transform gracefully
29. ? Quelle: Fortschrittsbalken
30. ? 30,0 30,1 30,2 30,3 Vgl. Kröner (2010), S. 42ff
31. ? Quelle: CSS Layout
32. ? 32,0 32,1 32,2 32,3 32,4 Vgl. Kröner (2010), S. 71ff
9 Fußnoten
39
33. ? Vgl. W3Schools Aside
34. ? Vgl. W3Schools Article
35. ? 35,0 35,1 35,2 35,3 Vgl. W3Schools W3C HTML5 Draft, 4.10.7.1 States of the type attribute
36. ? Quelle: Eigene Darstellung
41. ? Vgl. OLDAPPS
42. ? Vgl. derstandard.at
10 Literatur- und Quellenverzeichnis
Academic
Academic: Document Object Model, http://de.academic.ru/dic.nsf/dewiki/342491, 2010, abgerufen am
Appleinsider.com: Adobe-Apple war on Flash reminiscent of PostScript struggle,
Appleinsider
http://www.appleinsider.com/print/10/05/14/adobe_apple_war_on_flash_reminiscent_of_postscript_st
2008, abgerufen am 30.01.2011
Fortschrittsbalken mit CSS/JavaScript: http://www.antusblog.de/2009/07/27/fortschrittsbalken-mit-css
Fortschrittsbalken
abgerufen am 01.02.2011
Bachan, Eva: Webdesign Glossar. Die Begriffe aus dem Bereich Webdesign auf einen Blick.,
Bachan
http://www.evedesign.net/webdesign-wien-info/webdesign-glossar.php#W, abgerufen am 30.01.2011
Beck, Sascha A.(2006): Browserkrieg - Microsoft gegen Netscape,
Beck (2006)
http://server02.is.uni-sb.de/courses/ident/kontroverses/browserkrieg/, 09.10.2006, abgerufen am 31.12
Bernes-Lee, (2006): Reinventing HTML, http://dig.csail.mit.edu/breadcrumbs/blog/4/, 27.10.2006, ab
Bernes-Lee
03.02.2011
Bloß, Michael: Morphe Webdesign - Webdesigner für mittelständische Unternehmen.
Bloß
http://www.morphe-webdesign.de/it-glossar-a/glossar-w.html, abgerufen am 30.01.2011
Chisholm /
Chisholm, Wendy; Vanderheiden, Gregg; Jacobs, Ian (1999) : Web Content Accessibility Guidelines 1
Vanderheiden /
http://www.w3.org/TR/WCAG10, abgerufen am 31.01.2011
Jacobs (1999)
Satrun, Oliver : alle-videos-in-einer-playlist, http://css3-html5.de/alle-videos-in-einer-playlist, abgeruf
CSS3-HTML5
03.02.2011
Microsoft lässt Internet Explorer 9 bei HTML 5 triumphieren,
derstandard.at
hhttp://derstandard.at/1271378320275/Manipulation-Microsoft-laesst-Internet-Explorer-9-bei-HTML07.06.2011, abgerufen am 03.02.2011
Developer-Mozilla @font-face, https://developer.mozilla.org/index.php?title=en/css/%40font-face, 13.01.2011, abgerufen
@font-face
03.02.2011
Developer-Mozilla
About WOFF, https://developer.mozilla.org/en/About_WOFF, 18.02.2011, abgerufen am 03.02.2011
WOFF
findmebyip
HTML5 CSS3 Support, http://fmbip.com/#target-selector, abgerufen am 03.02.2011
Aus HTML 5 wird der lebende Standard "HTML",:
HEISE
http://www.heise.de/newsticker/meldung/Aus-HTML-5-wird-der-lebende-Standard-HTML-1172423.h
20.01.2010, abgerufen am 03.02.2011
HTML Elemente, die bei HTML5 nicht mehr weiterentwickelt werden Posted in Allgemeines,:
html-lernen
http://www.html-lernen.de/2010/07/html-elemente-die-bei-html5-nicht-mehr-weiterentwickelt-werden
abgerufen am 03.02.2011
10 Literatur- und Quellenverzeichnis
40
Kröner (2010)
Peter Kröner: HTML5 - Webseiten innovativ und zukunftssicher, 1. Auflage, 2010, open source Press
Old Version of Google Chrome, http://www.oldapps.com/google_chrome.php/
OLDAPPS
http://www.oldapps.com/google_chrome.php/], abgerufen am 30.01.2011
Optinet24.de: Webdesign- und Webhosting-Glossar, http://www.optinet24.de/webdesign/glossar/, abg
Optinet24.de
30.01.2011
SELFHTML: Dynamisches HTML / DHTML-Modelle / Das Document Object Model (DOM),
SELFHTML
http://de.selfhtml.org/dhtml/modelle/dom.htm, 2007, abgerufen am 30.01.2011
SELFHTML: HTML/XHTML / XHTML und HTML / Unterschiede zwischen XHTML und HTML,
SELFHTML
http://de.selfhtml.org/html/xhtml/unterschiede.htm, 2007, abgerufen am 01.02.2011
SELFHTML: HTML Versionen, http://de.selfhtml.org/intro/technologien/html.htm#versionen, 2007,
SELFHTML
03.02.2011
Szestakow
Szestakow, St.: Cascading Style Sheets, level 2 bei CSS1.de, http://www.css1.de/, 2009, abgerufen am
World Wide Web Consortium (W3C): W3C Document Object Model, http://www.w3.org/DOM/, 200
W3C DOM
am 30.01.2011
World Wide Web Consortium (W3C): HTML5 Working Draft 13 January 2011,
W3C HTML5
http://www.w3.org/TR/html5/Overview.html http://www.w3.org/TR/html5/Overview.html], abgerufe
Draft
03.02.2011
W3C HTML5
World Wide Web Consortium (W3C): W3C HTML5 Logo, http://www.w3.org/html/logo/, abgerufen
Logo
03.02.2011
W3C HTML5 CSS World Wide Web Consortium (W3C): W3C HTML5 Logo, http://www.w3.org/html/logo/, abgerufen
Logo
03.02.2011
World Wide Web Consortium (W3C): Selectors Level 3 W3C Proposed Recommendation,
W3C Selectors
http://www.w3.org/TR/css3-selectors/, 15.12.2010, abgerufen am 30.01.2011
W3C Standards
World Wide Web Consortium (W3C): Standards, http://www.w3.org/standards/, 2009, abgerufen am
W3Schools Article W3Schools.com: HTML5 article Tag, http://www.w3schools.com/html5/tag_article.asp, abgerufen am
W3Schools Aside W3Schools.com: HTML5 aside Tag, http://www.w3schools.com/html5/tag_aside.asp, abgerufen am 0
Web Content Accessibility Guidelines 1.0: http://www.w3.org/TR/WCAG10/#transform-gracefully, 2
WCAG
am 01.02.2011
WEBFLUX:
CSS3 Previews, http://www.css3.info/preview/, abgerufen am 01.02.2011
CSS3.info
HTML5 Living Standard, http://www.whatwg.org/specs/web-apps/current-work/multipage/, abgerufen
WHATWG
03.02.2011
11 Anhang
11.1 Blog.html vom Praxisbeispiel
<!doctype html>
<html>
<head>
<title>Praxisbeispiel Blog</title>
<link rel="stylesheet" href="blog.css" type="text/css" media="screen" />
</head>
<body>
<header>
<h1>Praxisbeispiel Blog</h1>
</header>
11 Anhang
41
<nav>
<ul>
<li class="selected"><a href="#">Startseite</a></li>
<li><a href="#">Über</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Kontakt</a></li>
<li class="subscribe"><a href="#">Abonnieren</a></li>
</ul>
</nav>
<div id="content">
<div id="mainContent">
<section>
<article class="blogPost">
<header>
<h2>Ein Blogeintrag</h2>
</header>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu
</p>
</div>
</article>
</section>
<h3>Kommentare</h3>
<article>
<header>
<a href="#">Meier</a> am <time datetime="2011-02-02T13:00+02:00">02. Februar 2011
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc
</p>
</article>
<article>
<header>
<a href="#">Schulz</a> am <time datetime="2011-02-03T14:00+02:00">03. Februar
20
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc
</p>
</article>
</section>
<form action="#" method="post">
<h3>Kommentar schreiben</h3>
<p>
<label for="name">Name</label>
<input name="name" id="name" class="inputs" type="text" required />
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" class="inputs" type="email" required />
</p>
<p>
<label for="website">Website</label>
<input name="website" id="website" class="inputs" type="url" />
</p>
<p>
<label for="comment">Comment</label>
<textarea name="comment" id="comment" class="inputs" required></textarea>
</p>
<p><input type="submit" id="button" value="Kommentar eintragen" /></p>
</form>
</div>
<aside>
<section>
11.1 Blog.html vom Praxisbeispiel
42
<header>
<h3>Kategorien</h3>
</header>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Sit amet consectetur</a></li>
<li><a href="#">Adipisicing elit sed</a></li>
<li><a href="#">Do eiusmod tempor</a></li>
<li><a href="#">Incididunt ut labore</a></li>
</ul>
</section>
<section>
<header>
<h3>Archive</h3>
</header>
<ul>
<li><a href="#">Dezember 2010</a></li>
<li><a href="#">November 2010</a></li>
<li><a href="#">Oktober 2010</a></li>
</ul>
</section>
</aside>
</div>
<footer>
<div>
<section id="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid
</p>
</section>
</div>
</footer>
</body>
</html>
11.2 Blog.css vom Praxisbeispiel
* {
margin: 0;
padding: 0;
}
header, footer, section, aside, nav, article {
display: block;
}
body {
margin: 0 auto;
padding: 22px 0;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #F0F0F0;
}
h1 {
font-size: 28px;
line-height: 10px;
padding: 11px 0;
}
h2 {
font-size: 28Px;
line-height: 44px;
padding: 22px 0;
}
43
h3 {
font-size: 18px;
line-height: 22px;
padding: 11px 0;
}
p {
padding-bottom: 22px;
}
nav {
position: absolute;
left: 0;
width: 100%;
background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5));
}
nav ul {
margin: 0 auto;
width: 940px;
list-style: none;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
margin-right: 20px;
width: 140px;
font-size: 14px;
line-height: 44px;
text-align: center;
text-decoration: none;
color: #111111;
}
nav ul li a:hover {
color: #fff;
}
nav ul li.selected a {
color: #fff;
}
nav ul li.subscribe a {
margin-left: 22px;
padding-left: 33px;
text-align: left;
}
#content {
display: table;
}
#mainContent {
display: table-cell;
width: 620px;
padding-right: 22px;
padding-top: 44px;
}
aside {
width: 300px;
}
.blogPost header p, .blogPost header p a {
font-size: 14px;
font-style: italic;
color: #777;
}
.blogPost header p a:hover {
44
color: #000;
}
#comments {
border-top: 1px solid #d7d7d7;
}
#comments article {
display: table;
padding: 11px;
}
#comments article:nth-child(odd) {
padding: 11px;
background: #E3E3E3;
border: 1px solid #d7d7d7;
}
#comments article header {
width: 220px;
}
#comments article header a {
display: block;
font-weight: bold;
color: #000;
}
#comments article header a:hover {
}
#comments article p {
padding: 0;
}
form {
margin-top: 18px;
border-top: 1px solid #d7d7d7;
}
form p {
display: table;
margin-bottom: 11px;
padding: 0 22px;
}
form label {
width: 140px;
text-align: right;
font-weight: bold;
vertical-align: top;
}
.inputs {
width: 300px;
height: 20px;
}
form textarea {
width: 300px;
height: 100px;
}
#button {
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
45
border-bottom: 1px solid rgba(0,0,0,0.25);
background-color: #999999;
margin-left: 162px;
}
aside section {
margin: 22pX 0 0 22px;
padding: 11px 22px;
background: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.5));
-moz-border-radius: 11px;
}
aside section ul {
margin: 0 0 0 22px;
list-style: none;
}
aside section ul li a {
display: block;
color: #000;
}
aside section ul li a:hover {
text-decoration: underline;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #222;
}
footer div { display: table; margin: 0 auto; padding-top: 11px; width: 940px; color: #777; }
footer div section {
width: 300px;
}
46

Inhaltsverzeichnis

Transcription

Similar documents

Mahara user manual - mahara@uni

Amberg, An den Franzosenäckern 2

Echtzeitfähige Simulation von schwarmfähigen autonomen

Ergebnisbericht - Institut für Sozialwissenschaften - Hu

Facebook Like-Button Whitepaper

pert Amadeus Travel Ex Community