Das HTML5 Lernbuch Frank L. Schad - Ein Webmasters Press Lernbuch - Webmasters Fernakademie
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Frank L. Schad
Das HTML5 Lernbuch
Ein Webmasters Press Lernbuch
Version 3.11.0 vom 26.05.2021
Autorisiertes Curriculum für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm
— www.webmasters-europe.org —
Inhaltsverzeichnis
Vorwort 11
1 Was ist HTML? 12
1.1 Das World Wide Web 12
1.2 Was ist Hypertext? 12
1.3 Das Prinzip von Auszeichnungssprachen 14
1.4 Die Philosophie von HTML 15
1.5 HTML: Entwicklung und Standards 16
1.5.1 Die Ursprünge des World Wide Web 16
1.5.2 Das World Wide Web Consortium (W3C) 16
1.5.3 Die Webbrowser 17
1.6 Fragen zur Selbstkontrolle 19
2 Grundlagen 20
2.1 Womit werden HTML-Seiten erstellt? 20
2.2 Woraus bestehen HTML-Dateien? 24
2.2.1 Tags 24
2.2.2 Das HTML-Grundgerüst 26
2.2.3 Verschachtelte Tags 29
2.2.4 Block- und Inline-Elemente 30
2.2.5 Attribute 30
2.3 Kommentare 34
2.4 Weitere wichtige Prinzipien 35
2.5 Validierung Ihres HTML-Codes 36
2.6 Online-Ressourcen 38
2.7 Fragen zur Selbstkontrolle 39
3 Zeichenkodierung 41
3.1 Die Problematik unterschiedlicher Zeichenkodierungen 41
3.2 Sonderzeichen 43
3.3 Unicode! 44
3.4 Maskierung reservierter Zeichen 47
3.5 Fragen zur Selbstkontrolle 47
4 Einfache Textformatierung 49
4.1 Besonderheiten bei der Textformatierung mit HTML 49
4.2 Blockelemente 49
4.2.1 Absätze 49
4.2.2 Überschriften 50
4.2.3 Trennlinien 50
4.2.4 Weitere Blockelemente zur Strukturierung von Dokumenten 51
4.3 Inline-Elemente 51
4.3.1 Fettschrift 51
4.3.2 Kursivschnitt 52
4.3.3 Weitere Tags zur Textauszeichnung 53
4.4 Umbrüche und andere typographische Steuerzeichen 54
4.4.1 Zeilenumbrüche 54
4.4.2 Optionale Wortumbrüche 55
4.4.3 Bedingter Trennstrich 56
4.4.4 Geschütztes Leerzeichen 56
4.5 Fragen zur Selbstkontrolle 58
5 Listen und Aufzählungen 59
5.1 Punktlisten 59
5.2 Nummerierte Listen 59
5.3 Definitionslisten 62
5.4 Verschachtelte Listen 62
5.5 Ausklapp-Texte 63
5.6 Fragen zur Selbstkontrolle 64
6 Einbinden von Bildern 66
6.1 Funktionsweise und Dateiformate 66
6.2 Referenzierung 73
6.2.1 Relative Pfadangaben 73
6.2.2 Absolute Pfadangaben 75
6.3 Alternativtext 76
6.4 Tooltips 77
6.5 Abbildungen mit Bildunterschrift 77
6.6 Lazy Loading 78
6.7 Größenangaben 78
6.7.1 Einfache Größenangaben mit width und height 78
6.7.2 Responsive Images 79
6.8 Fragen zur Selbstkontrolle 87
7 Hyperlinks 89
7.1 Einen Hyperlink definieren 89
7.1.1 Grundlagen 89
7.1.2 Relative Pfadangaben 90
7.1.3 Absolute Pfadangaben 93
7.1.4 Zielfenster definieren 93
7.1.5 Downloads 94
7.1.6 Der mailto-Link 94
7.2 Links zu bestimmten Stellen einer Webseite 95
7.2.1 Links zu einer Textstelle auf einer anderen Seite 96
7.2.2 Links zu einer Textstelle auf derselben Seite 97
7.3 Fragen zur Selbstkontrolle 97
8 Tabellen 99
8.1 Was ist das Besondere an Tabellen in HTML? 99
8.2 Das Grundprinzip 99
8.3 Optionale Gliederung der Tabelle 101
8.4 Tabellenbeschriftung 102
8.5 Verbinden von Zellen 103
8.5.1 Horizontale Verbindung von Zellen 104
8.5.2 Vertikale Verbindung von Zellen 104
8.6 Fragen zur Selbstkontrolle 106
9 Formulare 108
9.1 Grundlagen 108
9.2 Festlegen des Ziels 109
9.3 Erzeugen einzelner Formularelemente 109
9.4 Einzeilige Texteingabefelder 109
9.5 Eindeutige Identifikation von Formularfeldern 111
9.6 Beschriftung von Formularfeldern 112
9.7 Standardwerte vorgeben 112
9.8 Mehrzeilige Eingabefelder 113
9.9 Auswahllisten 114
9.10 Kontrollfelder 118
9.10.1 Checkboxen 118
9.10.2 Radiobuttons 119
9.11 Datei-Upload 119
9.12 Buttons 121
9.12.1 Submit-Button 121
9.12.2 Reset-Button 122
9.12.3 Standard-Buttons 122
9.12.4 Alternative Buttons 123
9.13 Versteckte Felder in Formularen 123
9.14 Tastatursteuerung von Formularen 124
9.15 Autofocus 124
9.16 Deaktivieren von Formularelementen 125
9.17 Gruppieren von Formularfeldern 125
9.18 Weitere Formularelemente in HTML5 127
9.18.1 Zusätzliche Eingabefelder 127
9.18.2 Formularvalidierung 128
9.18.3 Textvorschläge 129
9.18.4 In HTML5 eingeführte Interface-Elemente 130
9.19 Bearbeitbarer Inhalt 131
9.20 Fragen zur Selbstkontrolle 132
10 iFrames 135
10.1 Rückblick: Klassische Frames 135
10.2 Inline Frames 136
10.3 Fragen zur Selbstkontrolle 140
11 Einbinden von Video und Audio 142
11.1 Videos einbinden 142
11.1.1 Videos im Web 142
11.1.2 Einbinden von Videos mit dem -Tag 147
11.2 Audiodateien einbinden 150
11.3 Fragen zur Selbstkontrolle 151
12 Meta-Tags 152
12.1 Allgemeine Syntax 152
12.2 Angaben für Suchmaschinen 152
12.2.1 Beschreibung des Seiteninhalts 152
12.2.2 Autor und Copyright 153
12.2.3 Generator: Womit wurde die HTML-Seite erstellt? 153
12.2.4 Anweisungen für Webcrawler (Robots) 153
12.2.5 Angaben für Soziale Netzwerke mit Open-Graph-Meta-Tags 154
12.3 Angaben für Browser 156
12.3.1 Zeichenkodierung 156
12.3.2 Größe des Viewports 156
12.3.3 Spezifische Angaben für den Internet Explorer 157
12.4 Fragen zur Selbstkontrolle 157
13 Exkurs: Texte für Websites schreiben mit Markdown 159
13.1 Goodbye, Word! 159
13.2 Vorteile von Markdown 161
13.3 Nachteile von Markdown 162
13.4 Markdown Cheat Sheet 163
13.4.1 Überschriften 163
13.4.2 Absätze 164
13.4.3 Zeilenumbrüche 164
13.4.4 Hervorhebungen 164
13.4.5 Zitate 165
13.4.6 Listen 165
13.4.7 Links 166
13.4.8 Bilder 167
13.5 Fragen zur Selbstkontrolle 170
14 Anhang: Liste der wichtigsten HTML-Tags 171
14.1 Block-Elemente 171
14.2 Inline-Elemente 172
14.3 Tabellenelemente 174
Lösungen der Übungsaufgaben 175
Lösungen der Wissensfragen 176
Index 188
20 2 Grundlagen
2 Grundlagen
In dieser Lektion lernen Sie
➤ womit HTML-Seiten erstellt werden.
➤ aus welchen Elementen eine HTML-Datei besteht und wie sie aufgebaut ist.
➤ worauf zu achten ist, wenn Sie Ihre Dateien auf einem Webserver ablegen.
➤ eine »Rechtschreibkorrektur« für Ihre HTML-Dokumente kennen.
2.1 Womit werden HTML-Seiten erstellt?
Prinzipiell können HTML-Dateien mit jedem beliebigen Texteditor erstellt werden, der reine Textdateien
mit der Endung .txt speichern kann (.rtf oder .doc funktionieren nicht). Solche einfachen Texteditoren
sind heute auf nahezu jedem Betriebssystem vorinstalliert. Unter Windows sind das etwa Notepad oder
WordPad und auf dem Mac TextEdit.
Für die tägliche Arbeit sind solche Standard-Editoren allerdings denkbar ungeeignet. Es gibt Textedi-
toren mit weit größerem Funktionsumfang, die auf die Erstellung von HTML-Code und dem anderer
Programmiersprachen spezialisiert sind und Ihnen die Arbeit erheblich erleichtern können. Solche Pro-
gramme verwenden z. B. das sogenannte Syntax-Highlighting, das verschiedene Codebereiche automa-
tisch in unterschiedlichen Farben darstellt und damit den Code erheblich lesbarer macht, oder sie ver-
sehen Ihre Codezeilen mit einer Zeilennummerierung, die Ihnen bei der Fehlersuche von Nutzen sein
kann. Durch Autovervollständigung (Code Completion) können Ihnen diese Editoren Tipparbeit sparen.
Abb. 2 Texteditor Coda mit Syntax-Highlighting und Zeilennummerierung am linken Rand. Während des Tippens werden neben dem
Cursor passende Vorschläge gemacht (Code Completion). Links der Dateimanager, rechts die integrierte Browser-Vorschau, ganz
oben die Tableiste für mehrere geöffnete Dokumente.
2.1 Womit werden HTML-Seiten erstellt? 21
Name Beschreibung Plattformen
Kostenloser Texteditor mit grundlegenden Funktionen. Der Klassiker für Einsteiger/
innen unter Windows. Diesen Editor empfehle ich Windows-Einsteiger/innen
für diesen Kurs.
http://notepad-plus-plus.org
Notepad++
Kostenloser Texteditor mit grundlegenden Funktionen. Diesen Editor empfehle
ich Mac-Einsteiger/innen für diesen Kurs.
https://apps.apple.com/de/app/coteditor/id1024640650 (Mac App Store)
CotEditor
Moderner Editor mit innovativen Funktionen für eine große Zahl an Programmier-
sprachen. Kostenlos und Open Source (obwohl von Microsoft). Visual Studio Code ist
nicht zu verwechseln mit Microsofts Entwicklungsumgebung Visual Studio.
https://code.visualstudio.com
Visual Studio
Code
»A hackable text editor for the 21st century.« Ein Klassiker in Programmiererkreisen,
für Einsteiger etwas ungewohnt. Kostenlos und Open Source.
https://atom.io
Atom
Moderner Editor mit zahlreichen innovativen Funktionen für eine große Zahl an
Programmiersprachen. Gilt ebenfalls als Klassiker in Programmiererkreisen, für Ein-
steiger etwas ungewohnt (80,– $).
https://www.sublimetext.com
Sublime Text
Mein persönlicher Favorit für den Mac. Projektbezogene, erweiterbare Entwick-
lungsumgebung für HTML, CSS und viele andere Programmiersprachen mit inte-
grierter Browservorschau und zahlreichen weiteren Features speziell für Webdesi-
gner/innen (99,– $).
Nova https://nova.app
Vorläufer von Nova. Projektbezogene »One-Window«-Entwicklungsumgebung für
HTML, CSS und andere Programmiersprachen mit integrierter Browservorschau,
FTP-Client, Gruppenfunktion, integrierter W3C-Validierung u.v.m. (99,– $).
http://www.panic.com/coda
Coda
Gilt als einer der flexibelsten – und gleichzeitig minimalistischsten – Texteditoren
für den Mac mit umfangreichen Funktionen für eine große Zahl an Programmier-
sprachen (Lizenzmodell zurzeit unklar).
http://www.macromates.com
TextMate
Kostenloser Editor mit umfangreichen Funktionen.
https://www.activestate.com/products/komodo-ide/downloads/edit/
Komodo Edit
Beliebter Texteditor für Windows mit gutem Funktionsumfang. Kostenlos für Privat-
anwender und Schulen (sonst 48,– €).
http://www.phase5.info
Phase 5
Tabelle 2.1 Eine kleine Auswahl an Texteditoren (Stand Februar 2021)
22 2 Grundlagen WYSIWYG-Editoren Neben den klassischen Editoren gibt es jedoch auch eine Reihe von (meist teuren) grafisch orientierten WYSIWYG-Editoren (= What You See Is What You Get), die es erlauben, HTML-Seiten ähnlich wie in einem Layout- oder Satzprogramm über eine grafische Benutzeroberfläche auf visueller Basis zu erstel- len. Dazu gehören z. B. die Klassiker Adobe Dreamweaver15, Softpress Xway16 oder das — zum Glück seit langem ausgestorbene — FrontPage von Microsoft (berüchtigt für seinen proprietären, fehlerhaf- ten Quellcode, der meist nur im Internet Explorer funktionierte). Der HTML- und CSS-Quelltext wird hier automatisch im Hintergrund erzeugt. Es versteht sich jedoch von selbst, dass automatisch erzeugter Code niemals die Qualität von manuell geschriebenem Code erreichen kann. Zudem widerspricht der starre Aufbau solcher Programme und die Anlehnung an Drucklayouts dem Prinzip moderner, responsiver Websites, die ihr Layout automatisch an die Bildschirmgröße des jeweiligen Geräts anpassen. Um solche Websites zu erstellen, ist es uner- lässlich, den HTML- und CSS-Code an die Eigenschaften verschiedener Ausgabegeräte anzupassen. Bei der Entwicklung dynamischer Webseiten bzw. Web-Anwendungen müssen Sie zudem JavaScript- oder PHP-Code in die HTML-Datei einfügen und mit den HTML-Elementen in eine Beziehung setzen können. Kenntnisse in HTML und CSS sind also unabdingbar und unterscheiden Sie vom Amateur, der die Web- seiten ohne HTML-Kenntnisse mit einem grafischen Editor erstellt. Doch selbst wenn Sie solche WYSIWYG-Editoren nutzen, helfen Ihnen gute HTML-Kenntnisse enorm bei der Bedienung, da diese Editoren letztlich auch nur HTML-Code generieren. Ohne fundierte HTML- Kenntnisse ist es auch mit diesen Editoren schwierig, wirklich professionelle Websites zu erstellen. Website-Baukästen Beliebt sind auch Website-Baukästen (Website Builders) wie Wix17, Jimdo18, Tilda19 oder Webflow20, die meist online benutzt werden. Damit lassen sich direkt im Browser Websites per Drag & Drop aus vor- gefertigten, grafischen Bausteinen (z. B. Menüs, Bildergalerien, Textboxen …) ›zusammenklicken‹. Die Texte werden ähnlich wie in einem Textverarbeitungsprogramm eingefügt, Farben, Schriftarten u. dgl. können angepasst werden. Laut Eigenwerbung werden keine HTML- oder sonstigen Programmier- kenntnisse vorausgesetzt. Vorteil: Die einzelnen Bausteine werden vom jeweiligen Anbieter nach aktu- ellen Webstandards erstellt. Die Ergebnisse können sich durchaus sehen lassen und wirken professio- nell und zeitgemäß. Nachteil: Sie müssen sich an die Vorgaben und Limitationen der jeweiligen Platt- form halten. Eigene Ideen oder spezielle Anforderungen umzusetzen ist kaum möglich. Auch Desktop-Anwendungen wie RapidWeaver21, die vorgefertigte Designvorlagen (sog. Themes) zur Verfügung stellen, in die man einfach seine Inhalte einfügt, haben eine eingeschworene Fangemeinde. Solche Apps sind sozusagen eine Mischung aus Website-Baukasten und Content-Management-System (siehe unten) und eignen sich gut, um in kurzer Zeit kleine, statische Websites mit professionellem Look zu erstellen. 15. https://www.adobe.com/de/products/dreamweaver.html 16. https://www.softpress.com/xway/index.html 17. https://de.wix.com 18. https://jimdo.com 19. https://tilda.cc 20. https://webflow.com 21. https://www.realmacsoftware.com/rapidweaver/
2.1 Womit werden HTML-Seiten erstellt? 23 Content-Management-Systeme Bei Content-Management-Systemen (CMS) wie WordPress22, Joomla23, Drupal24, Bludit25, Grav26 oder Kirby27 kann das gewünschte Layout aus zahlreichen vorgefertigten Themes bzw. Templates ausgewählt werden, Sie können aber auch eigene Themes mit HTML und CSS erstellen. Die Inhalte werden direkt online in die Website eingefügt. Content-Management-Systeme können auf dem eigenen Webserver (z. B. auf einem gemieteten Web- space eines Internet Service Providers) installiert werden. Der/die Benutzer/in ist selbst für die Admi- nistration (einschließlich des Einspielens von Sicherheitsupdates) verantwortlich, und es können unter- schiedliche Nutzerrechte, sogenannte ›Rollen‹, für das gemeinschaftliche Arbeiten an der Website ver- geben werden: So haben z. B. einige Mitarbeiter/innen Administrator-Rechte und damit vollen Zugriff auf alle Funktionen des CMS, andere jedoch nur Autoren-Rechte, d. h. sie können Inhalte erstellen und bearbeiten, jedoch nicht das Design oder die Navigation ändern oder zusätzliche Plug-ins installieren. Die Stärke von Content-Management-Systemen liegt in der Trennung des Inhalts vom Layout, d. h. der einfachen Möglichkeit, die Inhalte von jedem Gerät aus direkt online einfügen und bearbeiten zu kön- nen, ohne dabei (versehentlich oder absichtlich) das Layout verändern zu können. Ein CMS ist deshalb von kaum einer modernen Website mehr wegzudenken — unabhängig davon, ob Sie ein vorgefertig- tes oder ein selbstgestaltetes Theme benutzen. Einige Content-Management-Systeme sind sogar spezi- ell darauf ausgelegt, in selbstgestaltete Websites eingefügt zu werden. Abb. 3 Online-Editor des CMS Bludit zum Erstellen/Ändern der Inhalte 22. https://wordpress.com 23. https://www.joomla.de 24. https://www.drupal.de 25. https://www.bludit.com 26. https://getgrav.org 27. https://getkirby.com
24 2 Grundlagen
Abb. 4 Die Änderungen werden sofort auf der Website angezeigt (einfache Demo-Website von Bludit)
In diesem Kurs benutzen wir keinerlei grafische Editoren oder Baukästen, sondern wir schreiben
unseren Quellcode ausschließlich von Hand in Texteditoren wie die in Tabelle 2.1 genannten.
2.2 Woraus bestehen HTML-Dateien?
2.2.1 Tags
Die primäre Aufgabe eines Webbrowsers ist die Darstellung von HTML-Dokumenten. Dabei ist es uner-
heblich, ob diese auf der lokalen Festplatte oder auf einem Computer am anderen Ende der Welt lie-
gen.28 HTML-Seiten sind einfache Textdateien, die mit einem beliebigen Texteditor erstellt und bear-
beitet werden können. Der Text enthält jedoch zusätzlich zur eigentlichen Information Steuerbefehle
(»Auszeichnungen«), sogenannte Tags, die dem Browser mitteilen, wie die Seite auszusehen hat. Die
Interpretation dieser Befehle durch den Browser nennt man auch parsen (engl. »analysieren«) oder ren-
dern (»übersetzen«, »wiedergeben«).
Der Quelltext einer HTML-Datei kann also in zwei Kategorien unterteilt werden:
1. den Inhalt: Dies ist ganz normaler Text, der die eigentliche Information der HTML-Seite enthält.
28. Hier unterscheidet sich lediglich das verwendete Protokoll. Für die Darstellung von HTML-Seiten im WWW verwenden die
Browser i. d. R. das HTTP- oder das HTTPS-Protokoll, während für Dateien auf dem lokalen System das Protokoll file:// einge-
setzt wird.2.2 Woraus bestehen HTML-Dateien? 25 2. die Auszeichnungen (Markup). Dies ist der Code, der beschreibt, wie der Inhalt strukturiert und angezeigt werden soll. Diese HTML-Steuerzeichen werden als Tags (dt. »Etiketten«) bezeichnet und sind für den Betrachter der Webseite unsichtbar. Sie werden in spitze Klammern < > einge- schlossen, für die die Zeichen »kleiner als« bzw. »größer als« verwendet werden. Einfach ausgedrückt ersetzen HTML-Tags die Formatierungsbefehle, die Sie in Textverarbeitungs- programmen wie Word u. dgl. über das Menü vornehmen, und werden direkt in den Text geschrie- ben. Der Gültigkeitsbereich für eine HTML-Auszeichnung wird in den meisten Fällen durch ein Start-Tag < > und ein End-Tag (mit Schrägstrich) festgelegt. Die Auszeichnung gilt für den Text bzw. das Objekt zwischen Start- und End-Tag. Beispiele: Dies ist ein Absatz. Dies ist ein weiterer Absatz. Das -Tag definiert einen Textbereich als Absatz (p = engl. paragraph). Im Browser wird automatisch eine Leerzeile erzeugt. Das sieht dann etwa so aus: Browserdarstellung Das Tag hebt einen Textbereich fett hervor: Dieser Text soll hervorgehoben werden. Browserdarstellung Dieser Text soll hervorgehoben werden. Alles zusammen, d. h. Inhalt , bezeichnet man als ein HTML-Element oder einen HTML-Container. Inhaltsleere Tags Es gibt aber auch alleinstehende, »inhaltsleere« HTML-Elemente. Das sind Tags, die kein separates End- Tag besitzen, da eine Ausweitung auf einen weiteren Gültigkeitsbereich keinen Sinn ergeben würde. Dazu gehört z. B. der Zeilenumbruch . Beispiel: Nach einem Zeilenumbruchgeht der Text in der nächsten Zeile weiter.
26 2 Grundlagen
Browserdarstellung
Diese alleinstehenden Elemente können Sie als inhaltsleer kennzeichnen, um sie nicht mit »nor-
malen« Tags zu verwechseln. Dies geschieht durch ein Leerzeichen gefolgt von einem Schräg-
strich:
Damit wird das Tag »in sich selbst geschlossen« — es werden also Anfangs- und End-Tag in einem
Tag vereint. Das Leerzeichen vor dem Schrägstrich ist optional und soll die Kompatibilität mit älte-
ren Browsern gewährleisten.
Beachten Sie, dass hier — im Gegensatz zu normalen Tags mit Inhalt — der Schrägstrich nach
dem Tag-Namen steht!
2.2.2 Das HTML-Grundgerüst
Leider genügt es jedoch nicht, lediglich den Text mit Tags zu versehen, um eine gültige HTML-Datei zu
erhalten. Damit eine Textdatei zu einer vollständigen HTML-Datei wird, benötigt sie zuallererst grundle-
gende Informationen zu ihrem Aufbau, die ebenfalls mit Hilfe von speziellen Tags angegeben werden.
Dieses Grundgerüst einer einfachen, leeren HTML-Seite ist immer gleich und sieht folgendermaßen aus:
Einfache HTML-Seite
Inhalte (Texte, Bilder etc.)
Codebeispiel 1 Das HTML-Grundgerüst
Jede HTML-Seite muss auf diese Weise aufgebaut sein:
➤ Der äußere Container teilt dem Browser mit, dass es sich überhaupt um eine
HTML-Datei handelt.
➤ Weiterhin gibt es den Kopfteil zwischen den Tags und . Dieser Teil enthält Infor-
mationen über das Dokument, die im Browser nicht angezeigt werden.
➤ Eine Ausnahme hiervon ist lediglich das -Tag innerhalb des Kopfteils. Hier geben Sie den
Titel des Dokuments an, der in der Titel- bzw. Tableiste des Browserfensters angezeigt wird. Er sollte
daher nicht zu lang sein, sondern den Inhalt der Datei kurz und prägnant beschreiben. Der Seitenti-
tel wird außerdem für die Lesezeichen (Bookmarks) des Browsers verwendet und spielt auch bei
der Indizierung durch Suchmaschinen eine wichtige Rolle.
➤ Weiterhin kann der Kopfteil sogenannte Meta-Tags enthalten. Das sind spezielle Informationen für
Browser, Webserver und automatische Suchprogramme (»Robots«). Auf einzelne Meta-Tags wird
weiter unten noch genauer eingegangen. Im head können zudem JavaScript-Code sowie CSS-Defi-
nitionen stehen.
➤ Innerhalb des Containers schließlich stehen die Informationen, die die Besucher/
innen Ihrer Website zu Gesicht bekommen, die also im Anzeigefenster (Viewport) des Browsers
sichtbar sind. Mit der Strukturierung und Formatierung dieser Informationen mit Hilfe von HTML-
Tags werden wir uns in den nächsten Lektionen beschäftigen.2.2 Woraus bestehen HTML-Dateien? 27
Abb. 5 Schematische Darstellung des Aufbaus einer HTML-Seite: Links das erforderliche Grundgerüst, rechts mit beliebigen Inhalten.
Dokumenttypdefinition
Die Dokumenttypdefinition (engl. Document Type Definition, DTD) ist fester Bestandteil von XML- und
HTML-Dokumenten und beschreibt, um welche Art von Dokument es sich handelt. In der DTD wird defi-
niert, welche Tags und Attribute in einem Dokument verwendet werden können, und welche Bedeu-
tung ihnen zukommt. Nach den Regeln von XML-basierten Auszeichnungssprachen ist eine Datei erst
dann eine gültige Datei, wenn eine solche DTD definiert ist und der Quelltext genau nach den in ihr vor-
gegebenen Regeln erstellt wurde.
Die DTD wird zu Beginn eines XML- oder HTML-Dokuments — beginnend mit !DOCTYPE — angege-
ben. Für HTML5 sieht die DTD folgendermaßen aus29:
Einfache HTML-Seite
Inhalte (Texte, Bilder etc.)
Codebeispiel 2 HTML-Grundgerüst mit DTD
Diese DTD muss von nun an am Beginn jedes Ihrer HTML-Dokumente stehen!
29. In früheren HTML-Versionen war die DTD wesentlich komplizierter aufgebaut.28 2 Grundlagen
Standard-Modus und Quirks-Modus
Ein gültiger Doctype ist auch deshalb so wichtig, weil dadurch viele Browser erst in die Lage versetzt
werden, Ihre Seiten im Standard-Modus darzustellen, also den HTML- und CSS-Code so umzusetzen,
wie es dem W3C-Standard entspricht.
Fehlt hingegen der Doctype, so schalten einige Browser in den sogenannten Quirks-Modus. Der Quirks-
Modus ist ein spezieller Darstellungsmodus, der die Abwärtskompatibilität zu Websites sicherstellen
soll, die veralteten, fehlerhaften oder ungültigen HTML-Code verwenden (oft auch als Tag Soup oder
Street HTML bezeichnet). Dabei werden u. a. sogar bewusst Darstellungsfehler alter Browserversionen
simuliert, um das Layout dieser Webseiten so darzustellen, wie es (vielleicht) der Intention des Webde-
signers / der Webdesignerin entsprach.
Es versteht sich von selbst, dass Sie unbedingt dafür sorgen müssen, dass Ihre Seiten im Standard-
Modus dargestellt werden.
HTML-Dokumente bearbeiten und speichern
Wenn Ihr Textdokument das oben beschriebene Grundgerüst aufweist, handelt es sich um ein gültiges
HTML-Dokument. Sie brauchen es nur noch mit der Endung .html (oder veraltet .htm) zu speichern, um
es in jedem beliebigen Webbrowser öffnen zu können. Falls Ihr Editor Ihnen die Endung .txt vorschlägt,
können Sie diese bedenkenlos ändern.
Übung 1: Die erste HTML-Seite
1 Erstellen Sie im Texteditor Ihrer Wahl das Grundgerüst einer HTML-Seite. Vergessen Sie auch
nicht die DTD am Beginn des Dokuments.
2 Speichern Sie das Dokument als vorlage.html ab. Dadurch müssen Sie das Grundgerüst in den
folgenden Übungen nicht jedes Mal neu erstellen.
3 Duplizieren Sie die Vorlagendatei und benennen Sie sie in uebung1.html um.
4 Öffnen Sie diese Datei im Editor und notieren Sie folgenden Code zwischen die Tags
und :
Dies ist eine Überschrift
Dies ist ein kurzer Absatz.
Dies ist ein längerer Absatz, der sowohl fetten Text
als auch kursiven Text enthält.
5 Vergessen Sie auch nicht, einen Seitentitel im der Datei zu vergeben.
6 Speichern Sie die Datei und öffnen Sie sie im Browser Ihrer Wahl (am besten Firefox, Chrome
oder Safari). Die Überschrift sollte dort größer und fett dargestellt werden und zwischen den
Absätzen sollte eine Leerzeile stehen. Auch die fett und kursiv markierten Textbereiche sollten
angezeigt werden.
7 Wechseln Sie zurück in den Editor und fügen Sie am Ende einen weiteren Absatz hinzu:
Hier steht ein dritter Absatz.
Speichern Sie Ihre Änderungen.
8 Wechseln Sie nun wieder in den Browser und klicken Sie auf die Schaltfläche Aktualisieren
bzw. Neu laden (Reload). Der neue Absatz sollte nun ebenfalls angezeigt werden.2.2 Woraus bestehen HTML-Dateien? 29 Dies ist die Standard-Vorgehensweise beim Erstellen und Gestalten von HTML-Seiten: Die Datei ist sowohl im Editor als auch im Browser geöffnet. Änderungen an der HTML-Datei werden gespeichert und anschließend im Browser über den Reload-Button überprüft. (Wenn Ihr Editor über eine Live-Vor- schau verfügt, können Sie sich den Reload natürlich sparen.) Beim Testen Ihrer Seiten sollten Sie darauf achten, dass der Browser Ihre Datei tatsächlich immer wieder neu lädt und sie nicht etwa aus dem Zwischenspeicher (frz. Cache) holt — nur so sehen Sie sofort jede Änderung, die sie am Code vorgenommen haben. Halten Sie im Zweifelsfall während des Klicks auf den Reload-Button die Shift-Taste gedrückt. Dies umgeht explizit den Cache (Force Reload). Wenn Sie eine HTML-Datei per Doppelklick auf ihr Icon öffnen, wird sie i. d. R. im Browser geöffnet. Um die Datei im Editor zu öffnen, klicken Sie mit der rechten Maustaste darauf und wählen Sie Öffnen mit… bzw. wählen Sie im Editor selbst den Menübefehl Datei → Öffnen. Ihre gesamte HTML-Datei sollte nun folgendermaßen aussehen: 1 2 3 4 Meine erste HTML-Seite 5 6 7 Dies ist eine Überschrift 8 Dies ist ein kurzer Absatz. 9 Dies ist ein längerer Absatz, der sowohl fetten Text als auch kursiven Text enthält. 10 Hier steht ein dritter Absatz. 11 12 Codebeispiel 3 Der vollständige Quelltext von Übung 1. Versuchen Sie, die einzelnen Codebereiche mit Hilfe von Tabulatoren wie oben gezeigt einzurü- cken. Tags, die innerhalb anderer Tags stehen, werden dabei um jeweils einen Tabulator weiter eingerückt. Diese Codestrukturierung erleichtert die Lesbarkeit enorm und ist eine der Grundvor- aussetzungen für sauberes und professionelles Arbeiten. Die Darstellung im Browser wird dadurch nicht beeinflusst. 2.2.3 Verschachtelte Tags Wie wir gesehen haben, können HTML-Tags (und müssen teilweise) ineinander verschachtelt werden. Sie können also einen Textbereich u. U. auch in mehr als ein Tag einbetten. Das Verschachteln von HTML-Tags geschieht nach dem »Tupperware-Prinzip«: Sie können eine Tupperdose verschließen und in eine größere Dose hineinpacken, diese ebenfalls verschließen und in eine noch größere Dose legen. Sie müssen jedoch jede Dose erst verschließen, sonst bleiben hinterher Deckel übrig. Genauso verhält es sich mit HTML-Tags: Ein Tag-Paar wird ins andere eingebettet, die Tags dürfen jedoch nicht »über Kreuz« stehen. Beispiel: Um einen Text fett und gleichzeitig kursiv darzustellen, können Sie z. B. folgenden Code verwenden: Kennen Sie Tupperware? Die Reihenfolge der Tags spielt dabei keine Rolle. Es wäre also auch folgender Code möglich:
30 2 Grundlagen Kennen Sie Tupperware? Im Browser sieht das etwa so aus: Browserdarstellung Kennen Sie Tupperware? Nicht gültig wäre dagegen folgender Code: Kennen Sie Tupperware? 2.2.4 Block- und Inline-Elemente HTML-Tags lassen sich prinzipiell in zwei Gruppen unterteilen: Die Block-Elemente und die Inline-Ele- mente. ➤ Block-Elemente oder Block-Level-Elemente sind solche Tags, die im Browser automatisch einen Absatz erzeugen. Das bedeutet, sie nehmen die gesamte verfügbare Breite ein und stehen unter- einander. Auf diese Weise erzeugen sie einen rechteckigen Block. Dazu gehört natürlich das p-Tag, aber z. B. auch die Tags zum Erzeugen von Überschriften ( bis ) und Listen ( und ). ➤ Inline-Elemente sind Tags, die im laufenden Fließtext angewendet werden können und keinen Absatz erzeugen. Sie werden normalerweise auf Text oder andere Objekte innerhalb eines Block- Elements angewendet. Inline-Elemente sind z. B. das strong-Tag zur Hervorhebung von Text, das a- Tag zur Erzeugung von Hyperlinks oder das img-Tag zur Darstellung von Bildern. Beispiel: Dies ist Text in einem Absatz. Der Absatz ist ein Block-Element. Innerhalb des Absatzes können Textbereiche mit Hilfe von Inline-Elementen weiter formatiert werden: Man kann sie z. B. fett oder kursiv setzen. Eine Übersicht der gängigsten Block- und Inline-Elemente finden Sie im Anhang in Lektion 14. 2.2.5 Attribute Viele HTML-Tags können, manche müssen sogar durch Attribute näher definiert werden. Beispiel: Das Tag erzeugt Formularelemente wie z. B. Text-, Ankreuz- oder Passwortfelder, mit deren Hilfe Benutzer/innen Daten auf einer Website eingeben können (vgl. Lektion 9). Um jedoch zu definie- ren, um welche Art von Formularfeld es sich handelt, müssen Sie das Attribut type verwenden und diesem einen Wert (hier text ) zuweisen. Attribute stehen immer nur innerhalb des Start-Tags. Wertzuweisungen zu Attributen müssen immer in Anführungszeichen gesetzt werden. Vor und nach dem Gleichheitszeichen dürfen keine Leerzeichen stehen.
2.2 Woraus bestehen HTML-Dateien? 31
Es können beliebig viele Attribute gleichzeitig verwendet werden, die Reihenfolge spielt dabei keine
Rolle. So wären z. B. beide der folgenden Schreibweisen richtig:
oder
Mit oben stehendem Tag platzieren Sie ein Bild auf Ihrer Seite (vgl. Lektion 6). Das Attribut src
(= source, Quelle) definiert, welches Bild angezeigt werden soll. Mit alt definieren Sie einen Alternativ-
text (Bildbeschreibung) für den Fall, dass das Bild nicht angezeigt werden kann.
Jedem Tag ist eine Anzahl bestimmter Attribute zugeordnet. Sie müssen also wissen, welche Attribute
Sie mit welchem Tag zusammen verwenden können bzw. welches Tag welche Attribute erwartet. Das
-Tag etwa versteht u. a. die Attribute src (Quellpfad), width (Breite), height (Höhe) und alt
(Alternativtext), das Attribut href (hyper reference, Zieladresse für Links) ist hier jedoch nicht erlaubt.
Es gibt verschiedene Arten von Attributen:
➤ Attribute mit vordefinierten Begriffen als Wertzuweisungen: z. B.
erzeugt ein einzeiliges Texteingabefeld.
➤ Attribute mit numerischer Wertzuweisung: z. B.
erzeugt ein mehrzeiliges Texteingabefeld mit einer Höhe von 15 Zeilen.
➤ Attribute mit URLs oder Dateipfaden als Wert: z. B.
zeigt die Grafik beispiel.gif aus dem Ordner bilder an.
...
ruft Wikipedia im Browser auf.
➤ Attribute mit frei wählbaren Werten: z. B.
...
gibt einem Element (hier einer Navigation) eine eindeutige, selbstdefinierte ID, um sie z. B. später mit
Hilfe von CSS individuell zu gestalten und auf der Seite zu positionieren.
...
Mit dem Attribut class können Sie beliebig vielen Elementen (hier einem Link
und einem Button zum Absenden von Formularen ) einen selbstdefi-32 2 Grundlagen
nierten Namen geben. Alle Elemente, die diesen Klassennamen tragen, können später mit CSS auf
die gleiche Weise gestaltet werden, sodass sie identisch aussehen (hier z. B. als Button).
➤ Alleinstehende (»boolesche«) Attribute ohne Wertzuweisung:
...
bewirkt, dass ein Video von allein abzuspielen beginnt.
Nach den Regeln von HTML5 können Sie die letztgenannten, »booleschen« Attribute ohne Wert-
zuweisung auf zwei unterschiedliche Weisen notieren:
1. Sie notieren sie, wie im Beispiel oben, alleine:
2. Sie weisen dem Attribut sich selbst als Wert zu:
Die zweite Variante wirkt zunächst vielleicht etwas widersinnig, ist aber wesentlich sauberer und
konsistenter. Weitere alleinstehende Attribute sind z. B.:
➤ controls="controls"
(zeigt die Steuerleiste unter einem Video an)
➤ loop="loop"
(bewirkt, dass ein Video in Endlosschleife abgespielt wird)
➤ checked="checked"
(standardmäßig angekreuzte Checkboxen in Formularen)
➤ selected="selected"
(standardmäßig ausgewählte Option in Formular-Auswahllisten)
➤ multiple="multiple"
(Mehrfachauswahl bei Formular-Auswahllisten).
Universalattribute
Es gibt einige sogenannte Universalattribute (engl. global attributes). Das sind Attribute, die Sie jedem
beliebigen HTML-Element zuweisen können. Dazu gehören u. a.
Attribut mögliche Beschreibung
Werte
class selbstdefinierte weist Elementen einen oder mehrere Klassennamen zu, um sie mit CSS ein-
Namen heitlich gestalten zu können, z. B.
p class="lead-text">...
contenteditable true oder definiert, ob der Inhalt eines Elements bearbeitbar sein soll oder nicht (vgl.
false Abschnitt 9.19), z. B.
Dieser Text kann bearbeitet
werden.
data-* beliebige Werte leitet ein selbstdefiniertes Attribut ein (siehe nächster Abschnitt), z. B.
in Textform ...2.2 Woraus bestehen HTML-Dateien? 33
Attribut mögliche Beschreibung
Werte
id selbstdefinierter definiert eine eindeutige ID für ein Element, um es z. B. mit CSS gestalten oder
Name mit JavaScript ansprechen zu können, z. B.
...
lang Sprachcode, gibt die Sprache des Textes innerhalb eines Elements an (sinnvoll bei mehr-
z. B. de oder en sprachigen Seiten), z. B.
Questo testo è in italiano.
Die Hauptsprache der Seite kann im -Tag genannt werden:
style CSS-Eigenschaf- definiert Inline-CSS-Formatierungen für ein Element, z. B.
ten und -Werte Dieser Absatz ist
zentriert.
tabindex Zahlen legt die Reihenfolge fest, in der Elemente mit Hilfe der Tabulator-Taste ausge-
wählt werden können (vgl. Abschnitt 9.14)
title beliebiger Text gibt Zusatzinformationen für ein Element inform eines ›Tooltips‹ an (vgl.
Abschnitt 6.4), z. B.
translate yes oder no legt fest, ob der Inhalt eines Elements von automatischen Übersetzungstools
(z. B. Google Translate) übersetzt werden soll oder nicht, z. B.
Mien Jung, dat kann een nich
översetten!
Selbstdefinierte Attribute
Seit HTML5 können Sie für jedes beliebige Tag auch eigene Attribute definieren. Dazu notieren Sie
zunächst das Präfix data- (mit Bindestrich), gefolgt von einem selbstdefinierten Namen. Der Name
darf nur aus Kleinbuchstaben bestehen und keine Leer- oder Sonderzeichen enthalten. Anschließend
können Sie dem Attribut jeden beliebigen Wert zuweisen, zum Beispiel:
Cello
Saxophon
Orgel
Codebeispiel 4 Liste mit dem selbstdefinierten Attribut data-instrument-type . (Mehr zum Thema Listen erfahren Sie in
Lektion 5.)
Durch das Präfix data- sind die selbstdefinierten Attribute valides HTML, werden aber natürlich vom
Browser vollständig ignoriert und erzeugen keinerlei Veränderung. Doch wofür sind sie dann gut?
In CSS und JavaScript werden häufig zusätzliche Informationen benötigt, um HTML-Elemente unter-
scheiden oder auf eine bestimmte Weise gestalten zu können. Die Informationen aus selbstdefinierten
Attributen können Sie nutzen, um die entsprechenden Elemente abhängig vom Wert unterschiedlich
zu behandeln. Im folgenden Beispiel werden den Produkt-Abbildungen in einem Online-Shop anhand
des selbstdefinierten Attributs data-ribbon-text mit CSS dynamisch ›Banderolen‹ hinzugefügt, die
den Wert des Attributs als Text enthalten.34 2 Grundlagen
Abb. 6 Der erste und der dritte Artikel sind oben rechts mit Banderolen als ›reduziert‹ bzw. ›neu‹ gekennzeichnet.
Das HTML könnte z. B. so aussehen:
Bangle 189,95 €
Cap 79,95 €
Earring 399,95 €
Codebeispiel 5 In HTML haben die erste und die dritte Abbildung das Attribut data-ribbon-text mit unterschiedlichen Werten.
Mit CSS können die Banderolen folgendermaßen gestaltet werden:
[data-ribbon-text]::before
::before {
content
content: attr(
attr(data-ribbon-text
data-ribbon-text)); /* den jeweiligen Wert des Attributs als
sichtbaren Text vor das Element setzen */
color
color: #fff; /* Textfarbe */
background-color
background-color: #e53; /* Farbe der Banderole */
border
border: 2px solid #fff; /* weiße Kontur */
transform
transform: rotate(45deg); /* Text um 45 Grad drehen */
...
}
Codebeispiel 6 Vereinfachter CSS-Code zur Darstellung der Banderolen
2.3 Kommentare
Sie können an jeder beliebigen Stelle einer HTML-Datei (außer innerhalb eines Tags) Kommentare ein-
fügen. Diese werden vom Browser nicht angezeigt und dienen z. B. dazu, Merkhilfen, Beschreibungen,
Hinweise oder Anmerkungen etwa für Teamkolleg/innen in Ihren Code einzufügen, oder auch, um ver-
wendete Tags temporär zu »deaktivieren« (»auszukommentieren«, also auszublenden). Solche Kom-
mentare werden vom Browser ignoriert und nicht dargestellt. Sie werden mit der Zeichenfolge .2.4 Weitere wichtige Prinzipien 35
Beispiele:
Im Folgenden wurde ein Absatz auskommentiert:
2.4 Weitere wichtige Prinzipien
➤ Verwenden Sie nur Kleinbuchstaben für Tags, Attribute und Werte.
➤ HTML-Dokumente müssen mit der Endung .html abgespeichert werden, damit der Webbrow-
ser weiß, dass es sich um ein HTML-Dokument handelt und die Tags richtig interpretiert.
Für plattformunabhängige Kompatibilität dürfen Sie in Dateinamen keine Leer- und Sonderzei-
chen und keine Umlaute verwenden und müssen auf Groß- und Kleinschreibung achten. Am
besten Sie verwenden ausschließlich Kleinbuchstaben.
Struktur Ihrer Website auf dem Webserver
Wenn Sie Ihre Website auf einem Webserver veröffentlichen, steht Ihnen dort zu diesem Zweck i. d. R.
ein eigenes Verzeichnis (Ordner) zur Verfügung. Dieses Verzeichnis wird Webserver-Root (Wurzel- oder
Stammverzeichnis) genannt, und in diesem Verzeichnis landet der Browser, wenn jemand die Adresse
Ihrer Website eingibt.
Dorthin laden Sie — z. B. mit Hilfe eines FTP-Programms — sämtliche Dateien (HTML-Seiten und Bilder)
hoch, die Bestandteil Ihrer Website sind (nicht jedoch die Rohdaten wie Word- oder Photoshop-
Dateien). Die Startseite — also die Seite, die angezeigt wird, wenn ein Besucher die Adresse in seinen
Browser eingibt — muss auf der obersten Ebene dieses Verzeichnisses liegen und trägt normalerweise
den Namen index.html. Webserver sind i. d. R. so konfiguriert, dass sie automatisch die Datei index.html
an den Browser schicken, wenn dieser eine Verbindungsanfrage an die URL des Servers richtet.30
Alle anderen Dateien können Sie zur besseren Übersicht in beliebigen Unterverzeichnissen innerhalb
des Stammverzeichnisses ablegen (z. B. ist meist ein Ordner bilder, images oder media zum Speichern
aller Bild- und anderen Mediendateien sinnvoll).
Hier das Beispiel einer Site-Struktur anhand des (fiktiven) Internetauftritts von getraenke-muster-
mann.de:
30. Bei dynamischen Websites auf PHP-Basis heißt die Datei entsprechend index.php. Wenn es auf dem Webserver sowohl eine
index.html als auch eine index.php gibt, hat die index.html in der Regel Vorrang (dies lässt sich aber natürlich ändern).36 2 Grundlagen Abb. 7 Stammverzeichnis auf dem Webserver von www.getraenke-mustermann.de: Auf der obersten Ebene befindet sich die Homepage index.html sowie die HTML-Seiten für das Bestellformular und das Impressum. Sämtliche Grafiken befinden sich im Unterordner bilder. Die HTML-Seiten für die Produktbeschreibungen wurden in entprechenden Unterordnern nach Kategorie sortiert. Es ist für das fehlerfreie Funktionieren Ihres Internetauftritts unabdingbar, dass Sie bereits beim Erstellen der Website auf Ihrem lokalen System die Struktur vorgeben, die sie später auf dem Ser- ver haben soll. Ein nachträgliches Ändern der Seitenstruktur ist nur mit großem Aufwand möglich, da Sie in diesem Fall in allen HTML-Seiten sämtliche Verweise und Links auf andere Dateien anpas- sen müssten. 2.5 Validierung Ihres HTML-Codes Während der Arbeit an HTML-Dokumenten sollten Sie diese regelmäßig validieren lassen, d. h. über- prüfen, ob Ihr HTML-Code dem W3C-Standard entspricht und keine Fehler enthält. Nur so können Sie sicher sein, dass Ihre Tags korrekt verschachtelt sind und Sie sich nicht vertippt haben. Damit stellen Sie sicher, dass Ihre Seiten in allen Browsern korrekt dargestellt werden.
2.5 Validierung Ihres HTML-Codes 37
Abb. 8 Automatische Validierung in Nova. Was ist hier falsch?
Bei einigen Editoren ist eine solche »HTML-Rechtschreibprüfung« eingebaut bzw. als Plug-in verfügbar
(z. B. für Nova31 oder Visual Studio Code32), für alle anderen stellt das W3C unter https://validator.w3.org
einen Online-Validator bereit. Dort können Sie entweder die URL zu einer Seite eingeben, die bereits
online ist, oder aber ein lokales Dokument von Ihrer Festplatte zur Überprüfung hochladen.
Schritt für Schritt 1: HTML-Dokumente mit dem W3C-Validator überprüfen
1 Gehen Sie auf die Seite https://validator.w3.org.
2 Klicken Sie auf den Tab Validate by File Upload und wählen Sie dort Ihre lokale Datei zum
Upload aus. (Alternativ können Sie auch Ihren gesamten Quelltext unter Validate by Direct
Input per Copy & Paste einfügen.) Klicken Sie anschließend auf Check.
31. https://extensions.panic.com/extensions/panic/panic.HTMLValidator/
32. https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint38 2 Grundlagen
3 Im folgenden Fenster wird das Ergebnis angezeigt.
Abb. 9 Ist Ihr Dokument fehlerfrei, zeigt die Ergebnisseite ›grün‹.
Abb. 10 Enthält Ihr Dokument Fehler, werden diese aufgelistet. Problematisch sind hier primär ›Errors‹, während
›Warnings‹ oftmals eher den Charakter von Tipps haben. Im oben stehenden Beispiel fehlt im einleitenden -Tag
das schließende > (»Saw < when expecting an attribute name. Probable cause: Missing > immediately before.«).
Die nachfolgenden Errors sind ›Folgefehler‹, die durch den ersten Fehler entstanden sind. Sie verschwinden automatisch,
wenn Sie den ersten Fehler behoben haben.
2.6 Online-Ressourcen
Ein gutes und umfangreiches Online-Nachschlagewerk zu HTML5, CSS3 und JavaScript, das Ihnen
bei der täglichen Arbeit behilflich sein kann, finden Sie unter http://www.w3schools.com (trotz der
Namensgleichheit nicht verwandt oder verschwägert mit dem W3C). Als erste Anlaufstelle empfehle ich
dort die HTML Element Reference33, eine Liste aller in HTML verfügbaren Tags.
Ein weiteres sehr nützliches Tool ist http://caniuse.com. Dort können Sie nachschlagen, welche Browser
bzw. Versionen ein bestimmtes HTML-Element (oder eine bestimmte CSS-Eigenschaft) unterstützen.
Wenn Sie z. B. wissen möchten, welche Browser das Tag (einen Fortschrittsbalken, vgl.
Abschnitt 9.18.4) unterstützen, geben Sie einfach in Google can i use progress ein. In der Regel erscheint
caniuse.com an erster Stelle in den Suchergebnissen.
33. http://www.w3schools.com/tags/default.asp2.7 Fragen zur Selbstkontrolle 39
Browserdarstellung
Abb. 11 Das Tag erzeugt einen Fortschrittsbalken.
Abb. 12 Support-Tabelle für auf caniuse.com34. Rot bedeutet ›wird nicht unterstützt‹, grün bedeutet ›wird unterstützt‹,
gelbgrün bedeutet ›wird teilweise unterstützt‹. Die zugehörigen Fußnoten und Erläuterungen finden Sie im unteren Bereich der Seite.
wird folglich voll unterstützt von IE ab Version 10, Edge ab Version 12, Firefox ab Version 6, Chrome ab Version 8 usw.
2.7 Fragen zur Selbstkontrolle
1. Mit welcher Software können Sie HTML-Quellcode erstellen und bearbeiten?
Bitte ankreuzen:
Mit jedem beliebigen Layout-Programm, das EPS-Dateien speichern kann.
Mit jedem beliebigen Texteditor, der reine Textdateien speichern kann.
Mit jedem beliebigen Textverarbeitungsprogramm, das Word-Dateien speichern kann.
Nur mit speziellen WYSIWYG-Editoren.
2. Wie sieht das universelle Grundgerüst einer HTML-Seite aus?
34. https://caniuse.com/progress40 2 Grundlagen
Bitte ankreuzen:
Titel
Inhalte
Titel
Inhalte
Titel
Inhalte
Titel
Inhalte
3. Was ist in HTML der Unterschied zwischen Block-Level- und Inline-Elementen?
Bitte ankreuzen:
Block-Level-Elemente sind Tags, die im Browser die gesamte verfügbare Breite einnehmen und
automatisch einen Absatz erzeugen.
Block-Level-Elemente sind Tags, die im laufenden Fließtext angewendet werden können und
keinen Absatz erzeugen.
Inline-Elemente sind Tags, die im Browser die gesamte verfügbare Breite einnehmen und auto-
matisch einen Absatz erzeugen.
Inline-Elemente sind Tags, die im laufenden Fließtext angewendet werden können und keinen
Absatz erzeugen.
4. Welche Zeichen sollten Sie bei Dateinamen für Webprojekte vermeiden?
Bitte ankreuzen:
Zahlen
Leerzeichen
Das scharfe ß
UmlauteSie können auch lesen
