WE CERTIFIED WEB DESIGNER I. Webdesign. mit HTML5. Offizielles Curriculum des Europäischen Webmasterverbandes

Transkript

1 WE CERTIFIED WEB DESIGNER I Webdesign mit HTML5 Offizielles Curriculum des Europäischen Webmasterverbandes

2

3 WE CERTIFIED WEB DESIGNER I Webdesign mit HTML5 Art.-Nr Version vom Autor: Frank Schad webmasters akademie Nürnberg GmbH, Nürnberg, Germany Das vorliegende Schulungsskript ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftliche Genehmigung der webmasters akademie Nürnberg GmbH urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung in elektronischen Systemen sowie für die Verwendung in Schulungsveranstaltungen. Die Informationen in diesem Schulungsskript wurden mit größter Sorgfalt erarbeitet. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Autoren und Herausgeber übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene fehlerhafte Angaben und deren Folgen.

4

5 Inhalt 5 Inhalt Einführung Was ist HTML? Das World Wide Web Was ist Hypertext? Das Prinzip von Auszeichnungssprachen Die Philosophie von HTML HTML: Entwicklung und Standards Die Ursprünge des World Wide Web Das World Wide Web Consortium (W3C) XHTML HTML Die Webbrowser Grundlagen Womit werden HTML-Seiten erstellt? Woraus bestehen HTML-Dateien? Tags Das HTML-Grundgerüst Verschachtelte Tags Block- und Inline-Elemente »Missbilligte«Tags Attribute Zeichenkodierung Die Problematik unterschiedlicher Zeichenkodierungen Sonderzeichen Unicode Maskierung reservierter Zeichen...39

6 6 Inhalt 2.4 Kommentare Weitere wichtige Prinzipien Struktur Ihrer Website auf dem Webserver Webseiten testen Einfache Textformatierung Besonderheiten bei der Textformatierung mit HTML Blockelemente Absätze Überschriften Trennlinien Inline-Elemente Fettschrift Kursivschnitt Weitere Tags zur Textauszeichnung Zeilenumbrüche Optionale Wortumbrüche Listen und Aufzählungen Punktlisten Nummerierte Listen Definitionslisten Verschachtelte Listen Einbinden von Bildern Funktionsweise und Dateiformate Referenzierung Relative Pfadangaben Absolute Pfadangaben Größenangaben Alternativtext Tooltips Abbildungen mit Bildunterschrift...65

7 Inhalt 7 6 Hyperlinks Einen Hyperlink definieren Grundlagen Relative Pfadangaben Absolute Pfadangaben Zielfenster definieren Downloads Der mailto-link Links zu bestimmten Stellen einer Webseite Links zu einer Textstelle auf einer anderen Seite Links zu einer Textstelle auf derselben Seite Imagemaps Tabellen Was ist das Besondere an Tabellen in HTML? Das Grundprinzip Tabellenbeschriftung Verbinden von Zellen Horizontale Verbindung von Zellen Vertikale Verbindung von Zellen Formulare Grundlagen Festlegen des Empfängers Erzeugen einzelner Formularelemente Einzeilige Texteingabefelder Eindeutige Identifikation von Formularfeldern Beschriftung von Formularfeldern Mehrzeilige Eingabefelder Auswahllisten Kontrollfelder Checkboxen Radiobuttons

8 8 Inhalt 8.10 Datei-Upload Buttons Standard-Buttons Reset-Button Submit-Button Moderne Buttons Versteckte Felder in Formularen Tastatursteuerung von Formularen Deaktivieren von Formularelementen Neue Formularelemente in HTML iframes Klassische Frames Inline Frames Einbinden von Video und Audio Videos einbinden Videos im Web Browserunterstützung Einbinden von Videos mit dem <video>-tag Für Interessierte: Videos mit Flash-Fallback einbinden mit dem JW Player Der <object>-tag JW Player Audiodateien einbinden Meta-Tags Allgemeine Syntax Angaben für Suchmaschinen Angaben für Browser...132

9 Inhalt 9 Anhang Lösungen Index...148

10

11 Videos einbinden 119 Einbinden von Video und Audio In dieser Lektion lernen Sie: hh wie Sie Video- und Audiodateien in Ihr Dokument einbinden können Videos einbinden Videos im Web Eine der interessantesten und wohl meistgenutzten Neuerungen in HTML5 ist sicherlich die Möglichkeit, Video-Dateien in HTML-Dokumente einzubinden. Zwar gibt es Videos im Web nicht erst seit gestern, doch war dafür bisher ein Plug-in notwendig, d. h. die Benutzer mussten sich Zusatzsoftware installieren, um die Videos ansehen zu können. Und damit nicht genug: Videos können in unterschiedlichsten Formaten vorliegen (z. B. MP4, Flash, QuickTime, Windows Media usw.), und da es keinen einheitlichen Standard gab, wurde auch lange Zeit auf jeder Website ein anderes Format eingesetzt. Weil für nahezu jedes Format ein eigenes Plug-in benötigt wird, haben sich im Lauf der Zeit unzählige Plug-ins auf den Festplatten der User angesammelt, um alle Videos im Web ansehen zu können. Dies kostete natürlich Speicherplatz und Rechenleistung und war eine häufige Ursache für Konflikte und Abstürze. Zwar hat sich in den letzten Jahren das Adobe-Flash-Format zu einem Quasi-Standard für Web-Videos entwickelt, sodass zumindest nur noch ein Plug-in installiert werden musste, doch viele Nachteile blieben: hh hh hh hh hh Wenn ein User das Plug-in nicht installiert hatte (weil er z. B. nicht wusste, wie das geht, oder weil er nicht die nötigen Administrator-Rechte besaß), konnte er das Video nicht sehen. Flash ist eine proprietäre, kommerzielle Technologie der Fa. Adobe und dadurch von deren Unternehmenspolitik abhängig. Dadurch widerspricht Flash dem Grundsatz des W3C, nur offene Standards zu verwenden. Flash ist äußerst ressourcenhungrig und eine häufige Ursache für Systemabstürze. Flash läuft nicht auf Apple-Mobilgeräten (iphone, ipad) und demnächst auch nicht mehr auf anderen Mobilgeräten, da Adobe den Flash-Support dafür eingestellt hat.

12 120 Einbinden von Video und Audio Mit HTML5 nun ist es möglich, Videos ähnlich wie Bilder in eine Webseite einzubinden, ohne dass dafür ein Plug-in benötigt wird. Die Browser sind nun selbst in der Lage, die Videos abzuspielen. Doch sind damit noch nicht alle Probleme gelöst: Es gibt nämlich noch immer keinen einheitlichen Standard, in welchem Dateiformat die Videos vorliegen müssen Browserunterstützung Momentan haben sich aus der Vielzahl an Möglichkeiten zumindest zwei konkurrierende Formate herauskristallisiert: MP4 und Googles neues Format WebM. Ein drittes Format, OGV, ist zwar mittlerweile aus dem Rennen, kann aber aus Kompatibilitätsgründen mit etwas älteren Browsern noch dazugezählt werden. Jedes Video, das Sie in eine Webseite einbinden wollen, muss momentan mindestens in den Formaten MP4 und WebM vorliegen, d. h. Sie müssen jedes Video mindestens zweimal ins Web stellen! Jeder Browser wählt dann automatisch das Format, das er abspielen kann. Es gibt z. Z. kein Format, das alle Browser abspielen können. Nachfolgend ein Überblick: Browser MP4 WebM OGV Anmerkungen IE 6, 7, 8 IE 9 * * nur, wenn der VP8-Codec installiert ist. IE9 unterstützt ansonsten keine anderen Codecs von Drittherstellern (im Gegensatz zu Safari, der alle Formate abspielt, die QuickTime unterstützt). Chrome < 3 Chrome 3, 4, 5 Chrome 6+ Opera < 10.5 Opera 10.5 Opera 10.6, 11, 12+ Firefox < 3.5 Firefox 3.5, 3.6 Firefox 4+ Safari < 3.1 Safari 3.1, 4, 5+ * * * * spielt alle Formate ab, die QuickTime unterstützt (kann durch zusätzliche QuickTime-Components erweitert werden) Tabelle 12: Browserunterstützung der HTML5-Videoformate (Quelle: docs.sublimevideo.net/supported-browsers-and-platforms)

13 Videos einbinden 121 Andere Formate, wie z. B. Flash-Videos, können nicht mit dem <video>-tag in HTML5-Dokumente eingebunden werden! f Formate und Codecs Bevor wir uns jedoch mit der Einbindung dieser drei Video-Formate in HTML-Seiten beschäftigen können, benötigen wir ein wenig Hintergrundwissen darüber, wie Videodateien aufgebaut sind. Eine Videodatei besteht i. d. R. aus Bild und Ton, also einer Video- und einer Audiospur. Um die Dateigröße beider Spuren zu reduzieren (und das ist auch heute noch zwingend notwendig), müssen bestimmte Kompressions- oder Kodierungsverfahren eingesetzt werden. Dies geschieht für Audio- und Videospur i. d. R. getrennt! Beim Abspielen des Videos muss der Browser dieselben Verfahren zur Dekompression nutzen. Deshalb werden diese Verfahren Codecs (Einzahl Codec, Kurzform für Coder/Decoder) genannt. Damit nun aber Bild und Ton immer gemeinsam und synchron abgespielt werden, werden beide zusammen in eine sogenannte Container-Datei (engl. Behälter) gepackt. Diese Container-Datei ist das, was man gemeinhin als Video-Datei bezeichnet, und trägt Endungen wie.mp4,.mov,.flv,.wmv usw. In anderen Worten: Eine Video-Datei ist lediglich das Containerformat, das zwei unterschiedlich kodierte Elemente enthält: Video-Codec Audio-Codec Container Abb. 18: Schematische Darstellung des Aufbaus einer Videodatei: Im Containerformat liegen die Video- und die Audio-Spur, die mit unterschiedlichen Codecs komprimiert sein können. Bei vielen (aber nicht allen) Containerformaten ist vorgegeben, in welchen Codecs die enthaltenen Video- und Audiospuren vorliegen müssen, bei anderen bestehen gewisse Auswahlmöglichkeiten. Folgende Tabelle verschafft einen kleinen Überblick über die in HTML5 möglichen Dateiformate und Codecs:

14 122 Einbinden von Video und Audio Containerformat/Dateiendung enthaltener Video-Codec enthaltener Audio-Codec MPEG-4 /.mp4 H.264 (= MPEG-4 AVC) AAC (= MPEG-4 Audio) WebM /.webm VP8 Vorbis OGV, OGG /.ogv Theora Vorbis Tabelle 13: Überblick über in HTML5 mögliche Videoformate und Codecs (Stand Dezember 2011) Das bedeutet z. B., dass Sie keine MP4-Dateien in Webseiten einbinden können, deren Videospur mit einem anderen als dem H.264-Codec kodiert ist (in der Praxis ist dies aber zum Glück meist der Fall). bunny.mp4 Ob Ihr Video, sofern es in einem geeigneten Format vorliegt, auch die passenden Codecs enthält, können Sie in den meisten Video-Abspielprogrammen überprüfen. Öffnen Sie Ihr Video z. B. im QuickTime- Player und wählen Sie dann im Menü Fenster Filminformationen einblenden oder drücken Sie auf der Tastatur Strg-I (Windows) bzw. -I (Mac). Daraufhin öffnet sich ein kleines Fenster mit allerlei nützlichen Infos. Dort finden Sie u. a. die Bildgröße sowie die verwendeten Codecs. (Das in den folgenden Beispielen verwendete Video bunny.mp4 finden Sie im Begleitmaterial zu diesem Lernheft im Ordner videos_einbinden.) Abb. 19: Im Info-Fenster des QuickTime-Players finden Sie unter»format«die verwendeten Codecs (hier AAC-Audio und H.264-Video). Unter»Normale Größe«finden Sie die Abmessungen des Videos. Videos konvertieren Um Ihr Video in die benötigten Formate mit den passenden Codecs zu konvertieren, benötigen Sie entsprechende Konverter-Software. Davon gibt es eine ganze Menge im Web in unterschiedlicher Qualität und zu (sehr) unterschiedlichen Preisen (von kostenlos bis zu mehreren tausend Euro ist alles vertreten). Eine erste Anlaufstelle wäre der Adobe Media Encoder, der in vielen Creative-Suite-Paketen enthalten ist und automatisch mitinstalliert wird, doch kann dieser wie die meisten anderen Konverter auch

15 Videos einbinden 123 z. Z. noch nicht in das WebM-Format konvertieren (obwohl Adobe seine Unterstützung für dieses Format offiziell angekündigt hat). Eine günstige und sehr flexible Möglichkeit ist die Pro-Variante des QuickTime-Players 7 (30, im Apple-Store, auch für Windows erhältlich), die mit Hilfe sogenannter meist kostenloser Components beliebig um zusätzliche Formate und Codecs erweitert werden kann. Für den Anfang empfehle ich den kostenlosen Miro Video Converter (Mac und Windows, Nachteil: Dieser Konverter erlaubt bis auf die Bildgröße keinerlei Einstellungen bzgl. Datenrate, Framerate, Qualität usw., d. h. Ihr Ausgangsmaterial sollte bereits über die richtigen Eigenschaften verfügen. Abb. 20: Links: Auswahl des WebM-Formats im Miro Video Converter über den Button»Format«(SD steht für»standard Definition«für Videos in Standardgröße, HD für»high Definition«für hochauflösende Videos). Direkt darunter das Format MP4, danach das OGV- Format (»Ogg Theora«). Rechts: Durch Klick auf die Schaltfläche mit dem Zahnrad können Sie die Bildgröße anpassen (»Custom Size«). Im Gegensatz zu Bildern spielt die Dateigröße bei Videos keine Rolle, da die Videos nicht komplett heruntergeladen werden müssen, bevor man sie ansehen kann (diesen Vorgang nennt man Streaming). Wichtig ist stattdessen die Datenrate, die Sie ebenfalls im Infofenster des QuickTime-Players ablesen können (s. o.) und beim Exportieren/Konvertieren des Videos einstellen sollten. Dieser Wert bestimmt letztlich, wie schnell die Internetverbindung des Anwenders mindestens sein muss, um das Video ruckelfrei abspielen zu können. Je niedriger die Datenrate, desto schlechter ist aber auch die Qualität des Videos. Sinnvolle Werte für Videos in Standard-Webgrößen (ca. 720 x 400 px) sind etwa kbit/s, abhängig vom Inhalt: Videos, die viel Bewegung und viele Details enthalten (wie etwa ein Fußballspiel), benötigen höhere Datenraten, während z. B. ein Nachrichtensprecher, der sich kaum bewegt, mit einer wesentlich niedrigeren Datenrate auskommt. Im Zweifelsfall heißt es hier: ausprobieren! f

16 124 Einbinden von Video und Audio Einbinden von Videos mit dem <video>-tag Liegen Ihre Videos in den drei benötigten Formaten vor, ist die Einbindung in HTML ein leichtes: Sie benötigen dazu den Tag <video>, der mit </video> auch separat wieder geschlossen werden muss. Im Video-Tag müssen Sie die Abmessungen des Videos mit den Attributen width und height (in Pixeln) angeben: <video width="720" height="300"></video> Theoretisch wäre hier wie bei Bildern auch das Attribut src möglich, doch könnten Sie damit nur eine Videodatei referenzieren, z. B. <video width="720" height="300" src="bunny.mp4"></video> Um Alternativen anzugeben, müssen Sie anders vorgehen: Innerhalb des Tag-Paares <video> </video> ist die Angabe des Tags <source /> möglich. Dieser Tag ist ein Standalone-Tag und kann beliebig häufig wiederholt werden. In jedem dieser Tags können Sie wieder mit dem Attribut src eine andere Variante Ihres Videos referenzieren: <video width="720" height="300"> <source src="bunny.mp4" /> <source src="bunny.webm" /> <source src="bunny.ogv" /> </video> Zusätzlich sollten Sie mit dem Attribut type den MIME-Typ (vgl. Seite 105) des jeweiligen Videos angeben. Das kann den Browser bei der Auswahl des korrekten Formats unterstützen: <video width="720" height="300"> <source src="bunny.mp4" type="video/mp4" /> <source src="bunny.webm" type="video/webm" /> <source src="bunny.ogv" type="video/ogg" /> </video> Steuerleiste einblenden Damit wäre die grundlegende Einbindung bereits fertig. Das Problem: Es gibt keine Möglichkeit, das Video abzuspielen. Dazu benötigt der einleitende <video>-tag noch mindestens ein weiteres Attribut. Mit dem Attribut controls können Sie die Standard-Steuerleiste des Videos einblenden, die u. a. auch über einen Play-Button verfügt: <video width="720" height="300" controls> Das Attribut controls ist ein boole sches Attribut, d. h. wenn das Attriubut vorhanden ist, wird die Steuerleiste angezeigt, ansonsten nicht. Alternativ kann das Attribut auch wieder ausgeschrieben werden (vgl. Seite 32):

17 Videos einbinden 125 <video width="720" height="300" controls="controls"> Diese Steuerleiste wird vom Browser zur Verfügung gestellt und sieht in jedem Browser anders aus. Video automatisch abspielen und wiederholen Zusätzlich (oder alternativ dazu) können Sie mit dem Attribut autoplay bestimmen, dass das Video von alleine abgespielt wird. <video width="720" height="300" controls autoplay> Dieses Attribut sollten Sie aber nur in begründeten Fällen verwenden, da Sie damit den Besuchern Ihrer Website durchaus auf die Nerven fallen oder diese sogar erschrecken können. Zudem können dadurch zusätzliche Kosten für den Benutzer anfallen (z. B. bei Volumentarifen für Mobilverbindungen), obwohl er das Video vielleicht gar nicht sehen möchte. Aus diesem Grund wird das Attribut autoplay auf dem iphone und dem ipad ignoriert. Ähnliches gilt für das Attribut loop, das Ihr Video in einer Endlosschleife abspielt: <video width="720" height="300" controls loop> Startbild festlegen Interessant dagegen ist die Eigenschaft poster, mit der Sie ein sogenanntes Posterframe also ein Start- oder Titelbild festlegen können. Das Posterframe wird dann angezeigt, wenn das Video (noch) nicht spielt, und kann ein beliebiges Pixelbild in einem der drei Web-Bildformate sein (JPEG, PNG oder GIF). Geeignet dafür sind z. B. eine besonders prägnante Szene aus dem Video selbst oder aber Ihr Firmenlogo o. ä. Sie müssen lediglich darauf achten, dass das Posterframe dieselben Abmessungen wie das Video hat. Als Wert weisen Sie dem Attribut wie gewohnt den Pfad zu dem Bild zu: <video width="720" height="300" controls poster="bilder/bunny.jpg"> Alternativinhalt angeben Für Browser, die den HTML5-Video-Tag noch nicht kennen, können (und sollten) Sie Alternativinhalte zur Verfügung stellen. Dies kann z. B. ein Hinweistext und/oder ein Screenshot des Videos sein, aber auch nochmals das Video selbst z. B. im Flash-Format (vgl. Seite 126). Der Alternativinhalt wird mit beliebigen HTML-Tags innerhalb des Video-Elements nach dem letzten <source>-tag angegeben und nur angezeigt, wenn der Browser den <video>-tag nicht kennt: <video width="720" height="300" controls poster="bilder/bunny.jpg"> <source src="bunny.mp4" type="video/mp4" /> <source src="bunny.webm" type="video/webm" /> <source src="bunny.ogv" type="video/ogg" /> <img src="bilder/bunny.jpg" alt="bunny" /> </video>

18 148 Index Index Add-ons (Firefox) 42 Andreessen, Mark 16 Attribute 32 Audio 129 Formate 129 Barrierefreiheit 65 bedingter Trennstrich 51 Berners-Lee, Tim 16 Bildunterschriften 65 Blockelemente 31, 45 Browser 20 Chrome Siehe Browser Codec 121 Containerformat 121 Firefox Siehe Browser Formulare Auswahllisten 97 Beschriftung 95 Checkboxen 102 Datei-Upload 104 mehrzeilige Textfelder 96 moderne Buttons 107 neu in HTML5 109 Passwortfelder 93 Radiobuttons 103 Reset-Buttons 106, 107 Standard-Buttons 106, 107 Submit-Buttons 107 Suchfelder 94 Tastatursteuerung 109 Textfelder 92 Gecko Siehe Rendering Engines GIF Siehe Grafikformate Grafikformate 58 JPEG Siehe Grafikformate Kommentare 40 Konqueror Siehe Browser LaTeX 14 Listen 54 Definitionslisten 56 nummerierte 55 Punktlisten 54 verschachtelte 57 Lynx Siehe Browser Meta-Tags 131 MIME-Typ 105 Mozilla Siehe Browser Datenrate (Video) 123 deprecated Tags 32 Dokumenttypdefinition DTD 28 HTML5 17 HTML-Editoren 22 Hyperlinks 67 externe 73 interne 68 NCSA 16 Netscape Communications 16 Editoren 22 iframes 115 Imagemaps 77 Inline-Elemente 31, 47 Internet Explorer Siehe Browser ISO 8859 (Zeichenkodierung) 34 Opera Siehe Browser Pfadangaben absolute 63, 72

19 Index 149 relative 60, 61, 68 PNG Siehe Grafikformate PostScript 15 Protokolle FTP 74 mailto 75 Unicode 36 UTF-8 Siehe Unicode Quirks-Modus 28 Validierung 42 Video 119 Flash-Fallback 126 Formate 120 Referenzierung Grafiken 60 Hyperlinks 68 Rendering Engines 19, 20 W3C 17 WebKit Siehe Rendering Engines WHATWG 17 WYSIWYG-Editoren 23 Safari Siehe Browser Safari-Debug-Menü 42 SelfHTML 43 SGML 17 Sonderzeichen 36 benannte Zeichen 36 Maskierung 39 Standard-Modus 28 Streaming (Video) 123 XHTML 17 XML 17 Zeichenkodierung 34 Zielfenster 73, 117 Tabellen 82 Tags 14, 25 logische 32 physische 32 Tasman Siehe Rendering Engines Trennlinien 46 Trident Siehe Rendering Engines