Elizabeth Castro Bruce Hyslop

Transkript

1

2 Elizabeth Castro erklärt ihren Lesern das Bauen von Webseiten, seit es das Web gibt. Und weil sie das so leicht verständlich wie kompetent tut, zählen ihre Bücher seit jeher zu den Standardwerken ob es um HTML, CSS oder das Erstellen von E-Books geht. Bruce Hyslop begann 1997, für das (damals noch kleine) Web zu entwickeln. Seitdem konzentriert er sich auf die Programmierung benutzerfreundlicher und zugänglicher Schnittstellen mit HTML, CSS und JavaScript. Zu diesem Buch sowie zu vielen weiteren dpunkt.büchern können Sie auch das entsprechende E-Book im PDF-Format herunterladen. Werden Sie dazu einfach Mitglied bei dpunkt.plus + :

3 Elizabeth Castro Bruce Hyslop Praxiskurs HTML5 & CSS3 Professionelle Webseiten von Anfang an 3., aktualisierte und erweiterte Auflage

4 Übersetzung: Jürgen Dubau, dubau.net Lektorat: Boris Karnikowski, karnikowski.com Fachlektorat: Angie Radtke, der-auftritt.de Copy-Editing: Petra Kienle, Fürstenfeldbruck Herstellung: Birgit Bäuerlein, Susanne Bröckelmann Umschlaggestaltung: Helmut Kraus, Satz: Carsten Kienle, Fürstenfeldbruck Druck und Bindung: Druckerei Stürtz GmbH, Würzburg Bibliografische Information der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar. ISBN , aktualisierte und erweiterte Auflage Translation Copyright (für die deutschsprachige Ausgabe) 2014 dpunkt.verlag GmbH Wieblinger Weg Heidelberg Copyright der amerikanischen Originalausgabe 2013 Elizabeth Castro and Bruce Hyslop Title of American original: HTML and CSS. 8th edition. Published by Peachpit Press. ISBN: Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen. Alle Angaben und Programme in diesem Buch wurden von den Autoren mit größter Sorgfalt kontrolliert. Weder Autor noch Herausgeber noch Verlag können jedoch für Schäden haftbar gemacht werden, die in Zusammenhang mit der Verwendung dieses Buchs stehen. In diesem Buch werden eingetragene Warenzeichen, Handelsnamen und Gebrauchs namen verwendet. Auch wenn diese nicht als solche gekennzeichnet sind, gelten die entsprechenden Schutzbestimmungen

5 Widmung Für die Familie. Für alle, die ich kenne, die schwierige Herausforderungen gemeistert und dabei Mut und Ausdauer bewiesen haben.

6 Danksagungen Die Menschen, mit denen ich bei diesem Buch zusammengearbeitet habe, sind mir besonders ans Herz gewachsen. Alles engagierte, professionelle und freundliche Leute, mit denen es wirklich Spaß gemacht hat. Das Buch wäre ohne ihre Beiträge nicht so gut! Mein aufrichtiger Dank gilt folgenden Personen: Nancy Aldrich-Ruenzel und Nancy Davis, die mir weiterhin ihr Vertrauen schenken. Cliff Colby für seine Unterstützung, die Zusammenstellung des Teams und dafür, dass er alles einfach gemacht hat. Robyn Thomas dafür, dass er den Motor zum Laufen brachte, den Text verbesserte, alle Details im Auge behielt, ein Vorbild an Flexibilität ist und es auch an aufmunternden Worten nicht fehlen ließ. Scout Festa für ihr Geschick, meinen Text verständlich zu machen, für ihr exaktes Auge und dafür, dass sie für Konsistenz und Klarheit sorgte. Aubrey Taylor für die tollen Vorschläge und das technische Feedback. Sie waren sehr hilfreich und von ihrer Arbeit profitieren alle Leser. David Van Ness für die große Sorgfalt beim Seitenlayout, sein Können und das Händchen für Details. Valerie Haynes Perry für die Zusammenstellung des Index für viele Leser auf ihrer Suche nach Informationen die erste Anlaufstelle. Den Kollegen und Kolleginnen aus den Peachpit- Abteilungen Marketing, Sales u.a., weil sie hinter den Kulissen für den Erfolg des Buchs sorgten. Natalia Ammon für das wundervolle Design der Beispiel-Webseiten, die die Kapitel 11 und 12 zieren. Mehr von ihrer Arbeit sehen Sie unter Zach Szukala dafür, dass er Natalia empfohlen hat. Scott Boms, Ian Devlin, Seth Lemoine, Erik Vorhes und Brian Warren für ihre Beiträge in der vorigen Auflage. Victor Gavenda, der die benötigte Software besorgte. Dan Cederholm, Ethan Dunham, Paul Irish, Mark James, Randy Jensen, Julie Lamba, Fontfabric, Google und Namecheap für die Erlaubnis, Screenshots bzw. gestalterische Elemente verwenden zu dürfen. C.R. Freer, die ihre magische Kamera einbrachte. Meiner Familie und meinen Freunden, die mich inspirieren und für die nötigen Pausen sorgen. Danke für Eure Geduld und dass ihr mir nicht untreu wurdet, als ich zum Schreiben monatelang abtauchte. Robert Reinhardt, der mich zum Bücherschreiben gebracht hat und für seinen klasse Bart. Die Boston Bruins, die während meiner seltenen Pausen für eine Menge Playoffs sorgten. Die vielen Leute der Web-Community, die ihre Expertise und Erfahrungen zum Wohle aller teilen. (Viele von euch habe ich im Buch zitiert.) Dank an euch Leser, die mich daran erinnern, wie es war, als ich HTML und CSS lernte, sodass ich meine Erklärungen für euch so hilfreich wie möglich formulieren kann. Danke, dass ihr Euch bei der Arbeit im Web für dieses Buch entschieden habt. Viel Spaß beim Lesen! Und schließlich möchte ich gerne Liz Castro mein ganz besonderes Dankeschön aussprechen, die diesen Titel in den 1990er-Jahren schuf. Sie unterrichtete im Laufe der verschiedenen Auflagen und Jahre zahllose Leser darin, wie man Webseiten erstellt. Weil das Web mir so viel gegeben hat, bin ich außerordentlich glücklich, mein Wissen an alle Leser weitergeben zu dürfen. Bruce vi Danksagung

7 Inhaltsübersicht Einführung 1 Kapitel 1 Die Bausteine einer Webseite 13 Kapitel 2 Die Arbeit mit Webseitendateien 39 Kapitel 3 Die grundlegende HTML-Struktur 55 Kapitel 4 Text 99 Kapitel 5 Bilder 145 Kapitel 6 Links 169 Kapitel 7 CSS-Bausteine 181 Kapitel 8 Arbeiten mit Stylesheets 201 Kapitel 9 Selektoren definieren 215 Kapitel 10 Textformatierungen 241 Kapitel 11 Layout mit Formatvorlagen 277 Kapitel 12 Responsive Websites erstellen 321 Kapitel 13 Arbeiten mit Webfonts 347 Kapitel 14 Verbesserungen durch CSS 373 Kapitel 15 Listen 401 Kapitel 16 Formulare 421 Kapitel 17 Multimedia mit Video und Audio 461 Kapitel 18 Tabellen 489 Kapitel 19 JavaScript 497 Kapitel 20 Webseiten testen und debuggen 507 Kapitel 21 Webseiten im Internet publizieren 523 Anhang A HTML-Referenz 531 Stichwortverzeichnis 543 Inhaltsübersicht vii

8

9 Inhaltsverzeichnis Einführung 1 HTML und CSS im Überblick 2 Browser 3 Webstandards und Webspezifikationen 4 Progressive Enhancement als vorbildliche Praxis 6 Ist dieses Buch für Sie geeignet? 8 Wie dieses Buch aufgebaut ist 10 Die Website zum Buch 12 Kapitel 1 Die Bausteine einer Webseite 13 In HTML denken 15 Eine einfache HTML-Seite 16 Markup: Elemente, Attribute, Werte und mehr 20 Der Textinhalt einer Webseite 24 Links, Bilder und andere Nicht-Text-Inhalte 25 Datei- und Ordnernamen 26 URLs 27 HTML: Markup mit Bedeutung 32 Die Standarddarstellung von Webseiten durch Browser 36 Zusammenfassung 38 Kapitel 2 Die Arbeit mit Webseitendateien 39 Die Konzeption Ihrer Site 40 Erstellen einer neuen Webseite 42 Die Webseite speichern 44 Die Angabe einer Standard- oder Homepage 47 Die Bearbeitung von Webseiten 48 Dateiorganisation 49 Die Darstellung Ihrer Seite im Browser 50 Inspiration durch andere 52 Kapitel 3 Die grundlegende HTML-Struktur 55 Eine neue Webseite beginnen 56 Den Seitentitel erstellen 60 Inhaltsverzeichnis ix

10 Überschriften erstellen 62 Übliche Seitenkonstrukte 65 Einen Header erstellen 66 Navigation auszeichnen 68 Den Hauptbereich einer Webseite markieren 71 Einen Artikel erstellen 72 Einen Bereich (section) definieren 75 Ein aside angeben 77 Einen Footer erstellen 82 Generische Container erstellen 85 Mit ARIA die Zugänglich keit verbessern 90 Elemente mit einer Klasse oder ID benennen 94 Wie man das title-attribut auf Elemente anwendet 96 Kommentare einfügen 97 Kapitel 4 Text 99 Einen Absatz einfügen 100 Kleingedrucktes angeben 101 Wichtigen und hervor zuhebenden Text auszeichnen 102 Eine Abbildung erstellen 104 Ein Zitat oder eine Referenz kennzeichnen 106 Text zitieren 107 Zeit und Datum angeben 110 Abkürzungen erklären 113 Einen Begriff definieren 115 Hoch- und tief gestell ter Text 116 Kontaktinformationen über den Autor einfügen 118 Bearbeitungshinweise und falscher Text 120 Code auszeichnen 124 Vorformatierter Text Text hervorheben 128 Einen Zeilenumbruch erstellen 130 Einen Span-Bereich erstellen 132 Andere Elemente 134 Kapitel 5 Bilder 145 Allgemeines über Bilder im Web 146 Bilder beschaffen 152 Die Wahl des Bildbearbeitungsprogramms 153 Bilder speichern 154 Bilder auf einer Seite einfügen 157 Alternativtexte 159 Bildgrößen angeben 161 Bilder per Browser skalieren 164 Bilder mit einem Bild bearbeitungsprogramm skalieren 166 Favicons auf der Website einfügen 167 x Inhaltsverzeichnis

11 Kapitel 6 Links 169 Links auf Webseiten erstellen (und weitere Link-Grundlagen) 170 Einen Link zu einem Anker erstellen 176 Andere Arten von Links erstellen 178 Kapitel 7 CSS-Bausteine 181 Eine Formatierungsregel konstruieren 183 Kommentare in die Formatierungsregeln einfügen 184 Der Umgang mit Vererbungen 186 Die Kaskade wenn Regeln kollidieren 189 Der Wert einer Eigenschaft 192 Kapitel 8 Arbeiten mit Stylesheets 201 Ein externes Style sheet erstellen 202 Externe Stylesheets verknüpfen 204 Ein eingebettetes Stylesheet erstellen 206 Inline-Styles anwenden 208 Die Kaskade und die Reihenfolge der Formatierungen 210 Medienspezifische Stylesheets 212 Inspiration durch andere CSS 214 Kapitel 9 Selektoren definieren 215 Selektoren konstruieren 216 Elemente nach Name auswählen 218 Elemente mit einer Klasse oder ID auswählen 220 Elemente nach Kontext auswählen 224 Elemente zur Formatie rung wählen, die das erste oder letzte Kind ihrer Eltern sind 228 Den ersten Buchstaben oder die erste Zeile eines Elements auswählen 230 Links basierend auf ihrem Zustand auswählen 232 Elemente nach Attribut auswählen 234 Elemente gruppenweise auswählen 238 Selektoren kombinieren 239 Kapitel 10 Textformatierungen 241 Vorher und nachher 242 Die Wahl der Schriftfamilie 244 Alternative Fonts festlegen 245 Kursivschrift 248 Text fett formatieren 250 Schriftgröße angeben 252 Die Zeilenhöhe setzen 257 Alle Schriftwerte auf einmal setzen 258 Die Farbe festlegen 260 Inhaltsverzeichnis xi

12 Einen Hintergrund definieren 262 Abstände steuern 269 Einrückungen vornehmen 270 Textausrichtung 271 Groß- oder Klein buch staben erzwingen 272 Kapitälchen 273 Text dekorieren 274 Whitespace festlegen 276 Kapitel 11 Layout mit Formatvorlagen 277 Bedenkenswerte Aspekte zu Beginn eines Layouts 278 Die Strukturierung Ihrer Webseiten 280 HTML5-Elemente in älteren Browsern formatieren 284 Standardformatierungen zurücksetzen oder normalisieren 286 Das Box-Modell 288 Den Darstellungstyp und die Sichtbarkeit von Elementen steuern 290 Höhe oder Breite für Elemente festlegen Padding für Elemente festlegen 298 Einen Rahmen setzen 300 Margins um ein Element festlegen 304 Elemente floaten lassen 307 Das Floaten von Elementen steuern 309 Elemente relativ positionieren 313 Elemente absolut positionieren 314 Elemente in einem Stack positionieren 316 Überlaufende Elemente 317 Elemente vertikal ausrichten 318 Ein anderer Mauszeiger 320 Kapitel 12 Responsive Websites erstellen 321 Responsive Webdesign ein Überblick 322 Bilder flexibel machen 324 Ein flexibles Layoutraster erstellen 327 Media Queries verstehen und implementieren 331 Nun alle zusammen 338 Ältere IE-Versionen versorgen 345 Kapitel 13 Arbeiten mit Webfonts 347 Was ist ein Webfont? 348 Wo Sie Webfonts finden 350 Einen Webfont herunterladen 354 Die Arbeit mit der 357 Text mit einem Webfont formatieren 358 Fett- und Kursivschrift auf Webfonts anwenden 361 Webfonts aus Google Fonts verwenden 369 xii Inhaltsverzeichnis

13 Kapitel 14 Verbesserungen durch CSS 373 Browser-Kompatibilität, Progressive Enhance ments und Polyfills 374 Herstellerabhängige Präfixe 376 Abgerundete Ecken 377 Text mit Schlagschatten versehen 380 Elemente mit Schlag schatten versehen 382 Mehrere Hintergründe einfügen 385 Hintergründe mit Farbverläufen 388 Transparenz für Elemente 394 Effekte mit generiertem Inhalt 396 Bilder mit Sprites kombinieren 399 Kapitel 15 Listen 401 Nummerierte und Aufzählungslisten erstellen 402 Aufzählungszeichen wählen 405 Eigene Aufzählungszeichen 406 Der Beginn der Listen nummerierung 409 Der Einzug der Aufzählungszeichen 410 Alle Eigenschaften für list-style auf einmal setzen 411 Verschachtelte Listen formatieren 412 Beschreibungslisten erstellen 416 Kapitel 16 Formulare 421 Verbesserte Formulare in HTML5 422 Formulare erstellen 425 Die Verarbeitung von Formularen 428 Formularelemente organisieren 430 Textfelder erstellen 434 Formularbereiche etikettieren 437 Passwortfelder erstellen 439 Textboxen für , Suche, Telefon und URL erstellen 440 Radio-Buttons erstellen Checkboxen erstellen 446 Größere Textfelder erstellen 448 Auswahlfelder erstellen 449 Datei-Uploads in Formu laren durch Besucher 451 Versteckte Felder 452 Senden-Buttons erstellen 453 Formularelemente deaktivieren 456 Formulare je nach Status formatieren 458 Kapitel 17 Multimedia mit Video und Audio 461 Plug-ins von Dritt anbietern und natives Multimedia 462 Formate von Videodateien 463 Ein Video auf die Webseite setzen 464 Steuerelemente und Autoplay für Video 466 Inhaltsverzeichnis xiii

14 Poster-Bild für Video angeben und Video als Schleife abspielen 468 Preload eines Videos unterbinden 469 Video aus mehreren Quellen nutzen und eine Textalternative 471 Für Accessibility sorgen 474 Formate von Audio dateien 475 Audiodatei mit Steuerung auf eine Webseite einfügen 476 Autoplay, Wiedergabe in einer Schleife und Preload von Audio 478 Mehrere Audiodateien mit Alternative angeben 480 Video und Audio mit einer Flash-Alternative 482 Weitere Multimedia-Funktionen 487 Weitere Infoquellen 488 Kapitel 18 Tabellen 489 Tabellen strukturieren 490 Mehrere Spalten und Zeilen überspannen 494 Kapitel 19 JavaScript 497 Externe Skripte laden 499 Eingebettete Skripte 504 JavaScript-Events 505 Kapitel 20 Webseiten testen und debuggen 507 Den Code validieren 508 Webseiten testen 510 Einige Debugging-Techniken 514 Die simplen Sachen prüfen: Allgemeines Die simplen Sachen prüfen: HTML 518 Die simplen Sachen prüfen: CSS 520 Wenn keine Bilder dargestellt werden 522 Kapitel 21 Webseiten im Internet publizieren 523 Eigene Domänennamen 524 Einen Host für die Site finden 525 Dateien auf Server hochladen 527 Anhang A HTML-Referenz 531 Stichwortverzeichnis 543 xiv Inhaltsverzeichnis

15 Einführung Egal ob Sie gerade damit beginnen, sich in die Welt der Website-Erstellung vorzuwagen oder schon mal Webseiten erstellt haben und nun Ihr Wissen auffrischen und aktualisieren wollen Sie kommen zu einem besonders spannenden Zeitpunkt. Die Art, wie wir Webseiten programmieren und gestalten, die Browser, in denen wir diese Seiten betrachten, und die Geräte, mit denen wir im Internet unterwegs sind, haben in den vergangenen Jahren wesentliche Fortschritte erlebt. Wir waren mal darauf beschränkt, von unseren Desktop-Computern oder Laptops aus zu surfen, aber nun können wir über eine Vielzahl von Geräten auf das Web zugreifen: Smartphones, Tablet-PCs und ja, auch Laptops und Desktops. Und genauso soll es auch sein, denn das Internet hat immer versprochen, die Grenzen aufzulösen: die Möglichkeit, Informationen weiterzugeben und darauf zuzugreifen egal ob man in einer Megastadt lebt oder einer ländlichen Gemeinde oder irgendwo dazwischen, und zwar von allen internetfähigen Geräten aus. Kurz gesagt liegt das Versprechen des Internets in seiner Universalität. Und das Internet erstreckt sich in seiner Reichweite immer weiter, während die Technologie immer neue Wege findet, um Communitys zu finden, die bisher ausgeschlossen waren. Außerdem gehört das Internet allen und jeder kann eine Website erstellen und veröffentlichen. Dieses Buch zeigt Ihnen, wie das geht. Es ist ideal für alle Anfänger, die nichts über HTML oder CSS wissen und gerne beim Erstellen von Webseiten einsteigen wollen. Sie finden hier klare, einfach zu befolgende Anweisungen, die Sie schrittweise durch den Prozess führen, wie man Webseiten erstellt. Außerdem ist dieses Buch auch als praktisches Nachschlagewerk gedacht, das man stets in Reichweite haben sollte. Sie gehen anhand des Inhalts- oder Schlagwortverzeichnisses genau zu jenen Themen, über die Sie mehr wissen wollen. Einführung 1

16 HTML und CSS im Überblick Der Erfolg des Internets beruht im Kern auf einer einfachen, textbasierten Auszeichnungssprache, die einfach zu lernen ist und von jedem Gerät mit einem simplen Browser gelesen werden kann: HTML. Jede Webseite erfordert zumindest ein wenig HTML und ohne HTML wäre sie keine Webseite. In diesem Buch erfahren Sie alle Einzelheiten, wie Sie mit HTML Ihre Inhalte definieren und anhand von CSS dann das Aussehen Ihrer Webseiten steuern. Sowohl HTML-Seiten als auch CSS- Dateien (die sogenannten Formatvorlagen oder Stylesheets) sind Textdateien und somit einfach zu bearbeiten. Auf die ersten Codebeispiele in HTML und CSS treffen Sie im Abschnitt Wie dieses Buch aufgebaut ist am Ende dieser Einführung. In Kapitel 1 geht es gleich los mit dem Aufbau einer einfachen HTML-Seite und in Kapitel 7 lernen Sie die Formatierung Ihrer Seiten mit CSS. Im Abschnitt Was Sie mit diesem Buch lernen finden Sie eine Übersicht aller Kapitel und die Zusammenfassungen der besprochenen Hauptthemen. Das Wort HTML ist allumfassend und repräsentiert die Sprache allgemein. HTML5 wird dann benutzt, wenn es um diese spezielle Version von HTML geht, z.b. wenn ein Feature erläutert wird, das in HTML5 neu erscheint und in den vorigen HTML-Versionen nicht vorkam. Ebenso werden die Begriffe CSS (allgemein) und CSS3 (speziell für CSS3) verwendet. HTML und HTML5 Um HTML5 besser zu verstehen, sollten Sie etwas über die Ursprünge von HTML erfahren. HTML begann Anfang der 1990er-Jahre als kurzes Dokument, in dem eine Handvoll Elemente vorgestellt wurden, mit denen man Webseiten erstellen kann. Viele dieser Elemente dienten der Beschreibung von Inhalten, z.b. Überschriften, Absätzen und Listen sowie Links (Verknüpfungen) mit ande- ren Seiten. Die Versionsnummer von HTML ist gestiegen, da sich die Sprache durch die Einführung weiterer Elemente und Regelanpassungen entwickelt hat. Die aktuelle Version ist HTML5. HTML5 ist die natürliche Weiterentwicklung von früheren HTML-Versionen und soll die Anforderungen an aktuelle und zukünftige Websites erfüllen. HTML5 erbt die große Mehrheit seiner Features von seinen Vorgängern. Wenn Sie also bereits HTML geschrieben haben, bevor HTML5 auf der Bildfläche erschien, kennen Sie bereits einiges. Das heißt weiterhin, dass vieles von HTML5 sowohl in alten als auch neuen Browsern funktioniert. Die sogenannte Abwärtskompatibilität ist ein zentrales Designprinzip von HTML5 (siehe HTML5 bringt außerdem eine Schar neuer Features mit. Eine Reihe davon sind recht selbst erklärend wie die zusätzlichen Elemente (article, main, figure und viele andere mehr), die Inhalte beschreiben. Andere sind komplexer und dienen dazu, leistungsfähige Webanwendungen zu erstellen. Sie müssen sich erst einmal gut in der Erstellung von Webseiten auskennen, bevor Sie sich an anspruchsvollere Features machen, die durch HTML5 möglich sind. Darum konzentrieren wir uns in diesem Buch auf Ersteres. Durch HTML5 ist auch eine native Audiound Videowiedergabe in Ihren Webseiten möglich ebenfalls Thema dieses Buchs. CSS und CSS3 Die erste CSS-Version erschien erst, nachdem HTML bereits ein paar Jahre im Einsatz war, und wurde 1996 offiziell verabschiedet. Wie HTML5 in seiner Beziehung zu früheren Versionen von HTML ist auch CSS3 eine natürliche Erweiterung der früheren CSS-Versionen. CSS3 ist leistungsfähiger als die alten Versionen von CSS und führt verschiedene visuelle Effekte ein, z.b. Schlagschatten, abgerundete Ecken und Farbverläufe und vieles mehr (in Was Sie mit diesem Buch lernen auf Seite 8 finden Sie weitere Inhalte). 2 Einführung

17 Browser Wir alle nutzen Browser, um Websites zu besuchen, egal ob auf Computer A, Handy oder anderen Geräten. Aber Sie haben sicher einen Lieblingsbrowser, während andere lieber mit anderen Browsern surfen. Bei Windows vorinstalliert ist der Internet Explorer, der Browser von Microsoft. Nutzen Sie OS X, dann haben Sie Safari, den Browser von Apple. Sie können weitere Browser kostenlos herunterladen und einsetzen, z.b. Chrome (von Google), Firefox (von Mozilla) A und Opera (von Opera Software) und das sind erst die Geräte für den Desktop. A Die Desktop-Version von Firefox Die Versionsnummern der Browser Wie HTML und CSS haben auch Browser Versionsnummern. Je höher die Nummer, desto neuer ist der Browser. Also ist Safari 7 neuer als Safari 6 und der ist somit neuer als Safari 5. Der Internet Explorer 10 ist aktueller als der Internet Explorer 9. Aber der Internet Explorer 10 ist nicht neuer als Safari 7. Denn Microsoft, Apple und die anderen Browser-Hersteller koordinieren weder ihre Versions nummern, noch stimmen sie den Zeitpunkt der Veröffentlichung neuer Versionen ab. Bei Chrome und Firefox kommen etwa alle sechs Wochen neue Versionen heraus, die somit deutlich höhere Versionsnummern haben als die anderen Browser, die bestenfalls ungefähr einmal pro Jahr aktualisiert werden. Auf mobilen Geräten finden Sie die mobile Version von Safari (fürs iphone, ipad und ipod Touch), verschiedene Standard-Browser für Android: Chrome und Firefox für Android, Opera Mini u.a. Im Buch spreche ich die verschiedenen Browser an geeigneter Stelle an. Jeder Browser in seiner aktuellsten Version unterstützt weitgehend ähnlich die HTML- und CSS-Features, die Sie in diesem Buch lernen. Aber manchmal funktioniert eine Funktion in einem oder mehreren Browsern nicht (oder anders). Das werde ich gesondert anmerken und meist auch eine Lösung vorschlagen. Das betrifft vor allem den Internet Explorer 8, den ältesten Browser, der noch relevant ist und berücksichtigt werden muss. (Dessen Verbreitung sinkt, also könnte sich das in 2014 ändern.) Webseiten testen in Kapitel 20 liefert Informationen darüber, wie man sich verschiedene Browser besorgt, welche die wichtigsten für das Testen Ihrer Webseiten sind und wie Sie Ihre Seiten testen sollten. Egal wer was wann veröffentlicht man kann sagen, dass die aktuellste Version eines Browsers die Features von HTML und CSS (und andere) besser unterstützt als die Versionen davor (sollte man ja auch erwarten). Einführung 3

18 Webstandards und Webspezifikationen Sie fragen sich vielleicht, wer HTML und CSS überhaupt erfunden hat und wer alles weiterentwickelt. Das World Wide Web Consortium (W3C) wird geleitet von Tim Berners-Lee, dem Erfinder des Web und HTML. Diese Organisation ist für die Anleitung und Entwicklung von Webstandards verantwortlich. Das W3C veröffentlicht Spezifikationen (auch Specs genannt), die diese Webstandards dokumentieren. Sie definieren die Parameter der Sprachen wie HTML und CSS. Anders ausgedrückt werden die Regeln durch die Spezifikationen standardisiert. Verfolgen Sie die Aktivitäten des W3C unter A. A Beim W3C informiert sich die Branche über Webstandards. Das W3C und die WHATWG Aus verschiedenen Gründen wurde die Organisation WHATWG (Web Hypertext Application Technology Working Group, mit der Entwicklung der meisten HTML5-Spezifikationen betraut. Das W3C integriert die Arbeit der WHATWG in die offizielle Version der weiterentwickelten Spezifikation. Sie finden die WHATWG unter Wenn Sie sich mit den verschiedenen Spezifikationen beschäftigen wollen (sehr zu empfehlen!), finden Sie hier die neuesten Versionen: HTML5 (W3C): HTML5.1 (W3C): HTML Living Standard (WHATWG): Zum HTML Living Standard gehören neuere Features, die sich noch in Entwicklung (und sehr im Fluss) befinden und auch in der HTML5.1-Spezifikation des W3C aufgegriffen werden. Es gibt zu viele CSS-Spezifikationen, um sie hier aufzulisten, aber Sie finden alle unter standards/techs/css#w3c_all. 4 Einführung

19 Unterschiede zwischen HTML4 und HTML5 Falls Sie HTML4 kennen und sich fragen, was in HTML5 anders ist, informieren Sie sich beim W3C darüber: diff/ (suchen Sie ggf. auch nach Übersetzungen dieses Artikels in Deutsch). Unterschiede hebe ich im Buch an geeigneter Stelle hervor. Das ist für alle, denen HTML neu ist, nicht so interessant, da HTML5 praktisch überall verbreitet ist. Aber das W3C-Dokument ist sicher eine interessante Lektüre. Mit den vorhandenen Standards erstellen wir unsere Seiten aufgrund der vereinbarten Regeln und Browser werden so konstruiert, dass sie unter Beachtung dieser Regeln unsere Seiten darstellen. (Im Großen und Ganzen implementieren Browser die Standards gut. Ältere Versionen des IE, vor allem IE8, haben aber einige Probleme.) Die Spezifikation durchläuft verschiedene Entwicklungsstufen, bevor sie als final erachtet wird und dann die Bezeichnung Empfehlung (Recommendation) erhält ( Process /tr). Bestimmte Bereiche der Spezifikation für HTML5 und CSS3 sind noch in der abschließenden Bearbeitung, aber Sie können trotzdem schon damit arbeiten. Es dauert (teilweise viele Jahre), bis der Standardisierungsprozess durchlaufen ist. Die Browser implementieren bestimmte Features der Spezifikation bereits, lange bevor sie zur Empfehlung geworden sind, da das den Entwicklungsprozess der Spezifikation selbst prägt. Also enthalten die Browser bereits eine Vielfalt von Features von HTML5 und CSS3, auch wenn es sich dabei noch nicht um Empfehlungen handelt. Insgesamt sind die in diesem Buch vorgestellten Features in der jeweiligen Spezifikation fest verwurzelt. Somit ist das Risiko relativ gering, dass sie vor Umwandlung in eine Empfehlung noch verändert werden. Von Entwicklern werden viele HTML5- und CSS3-Features bereits seit längerem eingesetzt und Sie können das auch. Einführung 5

20 Progressive Enhancement als vorbildliche Praxis Zu Beginn dieser Einführung sprach ich von der Universalität des Internets, also dem Konzept, dass das Internet für alle zugänglich sein soll. Progressive Enhancement (wörtlich: progressive Verbesserung) ist ein weiterer Schritt, um das Internet universell zugänglich zu machen. Dabei handelt es sich nicht um eine Sprache, sondern einen Ansatz beim Erstellen von Websites, den Steve Champeon 2003 vorgeschlagen hat ( de.wikipedia.org/wiki/progressive_verbesserung). Dem liegt eine einfache, aber sehr wirksame Idee zugrunde: Richten Sie Ihre Site anfänglich mit HTML-Inhalten und Verhalten ein, die für alle Besucher zugänglich sind A. Dann ergänzen Sie Ihr Design mit CSS B und bringen der Seite mit der Programmiersprache JavaScript zusätzliches Verhalten bei. Die Komponenten werden getrennt geführt, arbeiten aber zusammen. A Eine einfache HTML-Seite ohne spezielles CSS. Nur sehr alte Browser verstehen diese Seite möglicherweise nicht. Das sieht vielleicht nicht sonderlich toll aus, aber die Information ist zugänglich und genau das zählt. 6 Einführung

21 Als Resultat bekommen Geräte und Browser, die auf die einfachen Seiten zugreifen können, die vereinfachte Standardversion A. Sogar Browser aus den Anfangstagen des Internets vor über 20 Jahren können diese Seite darstellen und auch die ältesten Handys mit ihren Browsern. Außerdem kann man auf solchen Seiten gut mit Screenreadern (Bildschirmlesegeräten, die Webseiten laut vorlesen) navigieren. Leistungsfähigere und moderne Browser bekommen die verbesserte Version zu sehen B. Die Fähigkeiten von anderen (auch älteren) Browsern siedeln sich irgendwo dazwischen an, die dann je nach ihrem Vermögen Ihre Seite darstellen. Die Nutzererfahrung Ihrer Site muss nicht für jeden gleich sein, solange Ihre Inhalte zugänglich sind. Im Wesentlichen sorgt das Konzept der progressiven Verbesserung dafür, dass alle davon profitieren. Weitere Beispiele B Die gleiche Seite in einem Browser aufgerufen, der CSS unterstützt. Man sieht die gleiche Information, sie wird aber anders präsentiert. In Kapitel 12 erfahren Sie mehr über das Prinzip des Progressive Enhancement und wie Sie damit Sites erstellen, deren Layout sich an die Bildschirmgröße des Geräts oder an die Fähigkeiten des Browsers anpasst. Das kann auf einem Handy, einem Desktop und auch anderen Geräten sehr gut aussehen. Oder schlagen Sie in Kapitel 14 nach, wie älte re Browser vereinfachte Designs darstel len, während moderne Browser mit CSS3 aufgepeppte Designs zeigen. Später im Buch lernen Sie weitere Techniken, um Webseiten nach dem Prinzip Progressive Enhancement zu erstellen. Einführung 7

22 Ist dieses Buch für Sie geeignet? In diesem Buch werden keine Vorkenntnisse bei der Erstellung von Websites vorausgesetzt. Also ist es in diesem Sinne für absolute Anfänger. Sie lernen sowohl HTML als auch CSS von Grund auf. Im Verlauf des Lernens erfahren Sie auch von Features, die in HTML5 und CSS3 neu sind. Dabei rücken wir jene speziell in den Vordergrund, die Designer und Entwickler in ihrer Alltagsarbeit dauernd nutzen. Doch auch wenn Sie mit HTML und CSS vertraut sind, werden Sie von diesem Buch profitieren, vor allem wenn Sie sich über die aktuellen Entwicklungen bei HTML5, verschiedene CSS3-Effekte, responsives Webdesign und die empfohlenen Vorgehensweisen informieren wollen. Zu den behandelten Themen gehören die folgenden: Das Erstellen, Speichern und Bearbeiten von HTML- und CSS-Dateien Das Schreiben von semantischem HTML und dessen Bedeutung Wie man die HTML-Inhalte der Seite von der Darstellung durch das CSS und dem JavaScript-Verhalten trennt ein zentraler Aspekt des Progressive Enhancement Die Strukturierung der Inhalte in aussagekräftiger Weise durch lang bewährte HTML- Elemente und solche, die in HTML5 neu erscheinen Die Verknüpfung von Webseiten miteinander oder die Verlinkung eines Bereichs mit einem anderen Was Sie mit diesem Buch lernen Die Kapitel sind wie folgt strukturiert: Die Kapitel 1 bis 6 und 15 bis 18 erläutern die Prinzipien der Erstellung von HTML-Seiten sowie die Bandbreite der verfügbaren HTML- Elemente und zeigen in klar strukturierten Beispielen, wann und wie sie jeweils eingesetzt werden. In den Kapiteln 7 bis 14 steigen wir in CSS ein und zeigen, wie Sie Formatierungsanweisungen nutzen, um mit CSS3 visuelle Effekte auszubauen. Kapitel 19 zeigt, wie Sie vorhandenes Java- Script in Ihre Seiten einfügen. In Kapitel 20 erfahren Sie, wie Sie die Seiten vor einer Veröffentlichung im Internet testen und debuggen. Kapitel 21 erläutert, wie Sie sich einen Domainnamen sichern und Ihre Site im Internet veröffentlichen. Einbau von Bildern in Internetseiten und deren Optimierung fürs Web. Dazu gehört die Erstellung von Bildern für das Retina- Display von Apple und andere Bildschirme mit hoher Pixeldichte. Eine verbesserte Zugänglichkeit der Site mit ARIA (Accessible Rich Internet Applications) Landmark Roles und anderen guten Programmierpraktiken Die Formatierung von Text (Größe, Farbe, fett und kursiv usw.), Einfügen von Hintergrundfarben und -bildern Die Implementierung eines mehrspaltigen Layouts Die Erstellung einer responsiven Webseite, also einer Seite, die kleiner wird oder sich ausdehnt, um sich verschiedenen Bildschirmgrößen anzupassen, und einem Layout, das sich auch auf andere, von Ihnen vorgegebene Weisen anpassen kann. Eine solche Seite wird von Handys, Tablet-PCs, Laptops und Desktop-Computer sowie anderen internetfähigen Geräten angemessen dargestellt. 8 Einführung

23 Der Einsatz eigener Webfonts auf Ihren Seiten und Fonts aus Diensten wie Font Squirrel und Google Fonts Der Einsatz von CSS3-Effekten wie Opazität, die Alphatransparenz des Hintergrunds, Farbverläufe, abgerundete Ecken, Schlagschatten, Schatten innerhalb von Elementen, Textschatten und mehrere Hintergrundbilder Die Nutzung von durch CSS generierten Inhalten und Sprites, um die Zahl der Bilder zu minimieren, die Ihre Seite braucht, wodurch sie schneller geladen werden kann Die Erstellung von Formularen, um Eingaben der Besucher aufzunehmen, z.b. anhand neuer Formulareingabetypen in HTML5 Der Einbau von Medien auf Ihren Seiten mit den HTML5-Elementen audio und video und für ältere Browser eine Flash-Behelfslösung für Audio- oder Videoplayer... und vieles mehr Diese Themen werden ergänzt durch Dutzende Codebeispiele, die gemäß bewährter Vorgehens weisen die Implementierung dieser Features demonstrieren. Was Sie in diesem Buch nicht lernen Leider mussten wir vor dem Hintergrund so vieler Entwicklungen in der Welt von HTML und CSS in den vergangenen Jahren einige Themen unter den Tisch fallen lassen. Mit einigen wenigen Ausnahmen haben wir uns daran gehalten, Themen wegzulassen, die seltener im Einsatz sind, die sich immer noch in Überarbeitung befinden, denen es an allgemeiner Browser- Unterstützung mangelt, für die Kenntnisse in JavaScript erforderlich sind oder bei denen es sich um sehr anspruchsvolle Themen handelt. Zu den nicht behandelten Themen gehören: Die HTML5-Elemente details, summary, menu, command, output und keygen. Einige davon hat das W3C auf eine Liste von Features gesetzt, die es womöglich nicht mit HTML ins Finale schaffen. Die anderen sollte man bestenfalls selten verwenden. Das HTML5-Element canvas, mit dem Sie u.a. Grafiken zeichnen und sogar Spiele erstellen können. Außerdem Scalable Vector Graphics (SVG). Beide werden in Kapitel 17 kurz angesprochen, dort gibt es auch Links zu weiteren Infoquellen. Die HTML5-APIs und andere fortgeschrittene Features, für die man sich mit JavaScript auskennen muss oder die auf andere Weise nicht direkt mit den neuen HTML5-Elementen zusammenhängen Transformationen, Animationen und Übergänge mit CSS3. Wollen Sie dazu mehr wissen, schauen Sie unter (US-Buchseite) nach (in englischer Spracher). Die neuen CSS3-Layoutmethoden wie Flex- Box, Grid usw. Damit ändern wir die Art, wie Seiten aufgebaut sind, sobald die Spezifikationen ausgeformt sind und die Browser das besser unterstützen. In der Präsentation von Zoe Mickley Gillenwater auf zomigi/css3-layout finden Sie dazu mehr oder auch im Artikel von Peter Gasston unter www. netmagazine.com/features/pros-guide-csslayouts (beide in englischer Sprache). Einführung 9

24 Wie dieses Buch aufgebaut ist Beinahe jeder Abschnitt des Buchs enthält Codebeispiele, die den praktischen Einsatz demonstrieren (A und B). Üblicherweise sind sie mit Screenshots gekoppelt, aus denen ersichtlich wird, wie dieser Code aussieht (als Webseite in einem Browser aufgerufen) C. Die meisten Screenshots wurden mit der aktuellen Firefox-Version gemacht. Doch damit soll Firefox gegenüber anderen Browsern nicht implizit bevorzugt werden. Die Beispiele sehen auch in den aktuellen Versionen von Chrome, Internet Explorer, Opera oder Safari ähnlich aus. Der Code und die Screenshots werden durch Beschreibungen der jeweiligen HTML-Elemente bzw. CSS-Eigenschaften ergänzt, damit die Beispiele einen Zusammenhang erhalten und Sie diese auch besser verstehen. In vielen Fällen werden Sie merken, dass die Beschreibung und die Codebeispiele reichen, um die HTML- und CSS-Features gleich einzusetzen. Aber falls Sie explizite Anleitung benötigen, bekommen Sie auf jeden Fall schrittweise Instruktionen. Schließlich enthalten die meisten Abschnitte Tipps mit weiteren Nutzungsinformationen, bewährten Vorgehensweisen, Verweisen auf thematisch zusammenhängende andere Buchabschnitte, Links auf relevante Quellen usw. A Sie finden auf vielen Seiten HTML-Codeabschnitte, in denen die relevanten Teile fett hervorgehoben sind. Ein Auslassungszeichen (...) steht für weiteren Code oder Inhalt, der aus Platzgründen weggelassen wurde. Oft wird der ausgelassene Teil in einer anderen Codeabbildung gezeigt.... <body> <header class="masthead" role="banner">... <nav role="navigation"> <ul class="nav-main"> <li><a href="/" class="current-page">home</a></li> <li><a href="/about/">über uns</a></li> <li><a href="/contact/">kontakt</a></li> </ul> </nav>... </header>... </body> </html> 10 Einführung

25 B Wenn CSS-Code für das Beispiel relevant ist, kommt er in einen eigenen Kasten und die entsprechenden Abschnitte werden gekennzeichnet..nav-main { /* grün */ border-top: 5px solid #019443; /* grau */ border-bottom: 1px solid #c8c8c8; }.nav-main li { border-left: 1px solid #c8c8c8; display: inline-block; }.nav-main li:first-child { border-left: none; } Die Konventionen in diesem Buch Dieses Buch arbeitet mit den folgenden Konventionen: Text, der als Platzhalter für einen Wert steht, den Sie selbst erstellen, erscheint in kursiver Schrift. Die meisten Platzhalter erscheinen in den schrittweisen Instruktionen. Ein Beispiel: Tippen Sie padding: x; ein, wobei x der gewünschte Abstand ist, der ergänzt werden soll. Code, den Sie wirklich selbst eintippen sollen oder der HTML- bzw. CSS-Code repräsentiert, erscheint in dieser Schrift. in einer Codeabbildung steht für die Fortführung der vorigen Zeile: Sie wurde umbrochen, damit sie in die Buchspalte passt B. Der Pfeil gehört nicht zum Code selbst und braucht also nicht eingetippt werden. Sie tippen die Zeilen also fortlaufend ein, als gäbe es darin keinen Umbruch. C Screenshots mit einem oder mehreren Browsern demonstrieren, wie sich der Code auf die Seite auswirkt. Wenn ein Wort zum ersten Mal erscheint und definiert wird, erscheint es in kursiver Schrift. Der Internet Explorer wird oft mit IE abgekürzt. Somit steht IE10 also für Internet Explorer 10. Moderne Browser bezieht sich allgemein auf die Versionen von Browsern mit solider Unterstützung der aktuellsten HTML5- und CSS3- Features. Generell gehören dazu die neuesten Versionen der Browser, wie sie im Abschnitt Browser dieser Einführung aufgeführt werden (aber nicht der IE8). Sobald nach der Versionsnummer eines Browsers ein Pluszeichen (+) steht, heißt das: die aufgeführte Version plus die nachfolgenden Versionen. Also bezieht sich IE8+ auf den Internet Explorer 8 und alle Versionen danach. Einführung 11

26 Die Website zum Buch Die Website der deutschen Ausgabe ist www. dpunkt.de/htmlcss. Hier finden Sie auch die deutschsprachigen Codebeispiele. Wenn in diesem Buch auf die Codebeispiele verwiesen wird, dann meist mit einem goo.gl-link. Das soll Ihnen beim Abtippen Arbeit sparen (die eigentlichen Links sind recht lang). Schauen Sie sich die Beispiele dort an oder laden Sie alle HTML- und CSS-Dateien in einer Zip-Datei auf Ihren Computer. Auf der Website des US-Buchs, finden Sie das Inhaltsverzeichnis, die gesammelten Codebeispiele in Englisch, die in diesem Buch vorgestellt werden (außerdem noch einige extra, die hier nicht hineingepasst haben), Links auf im Buch zitierte Quellen und noch einige mehr, Informatio nen über Referenzen, die beim Schreiben ver wendet wurden, eine Liste der Errata usw. In einigen Fällen ergänze ich den Code mit zusätzlichen Kommentaren, um dessen Aufgaben oder Einsatzmöglichkeiten zu erläutern. Im Buch werden verschiedene Codebeispiele aus Platzgründen gekürzt, aber auf der Website zum Buch finden Sie die vollständigen Versionen. Den Code können Sie nach Bedarf verwenden und auch für eigene Projekte abändern. 12 Einführung

27 1 Die Bausteine einer Webseite Webseiten sind immer komplexer geworden, doch die zugrunde liegenden Strukturen sind immer noch bemerkenswert einfach. Als Erstes sollten Sie wissen, dass man eine Webseite nicht ohne HTML erstellen kann. Sie lernen in diesem Buch, dass HTML Ihre Inhalte beherbergt und deren Bedeutung beschreibt. Die Browser wiederum stellen die in HTML verpackten Inhalte für die Anwender dar. Eine Webseite besteht primär aus den drei Komponenten: Text inhalt: der reine Text, mit dem Sie auf der Seite Ihre Besucher z.b. über Ihre Firma, Familienurlaube, Produkte (oder andere Themen der Seite) informieren. Verweise auf andere Dateien: Damit werden Objekte geladen wie Bilder oder Audio- und Video dateien und auch Stylesheets (Formatvorlagen mit CSS, die das Layout der Seite steuern) und JavaScript-Dateien, die die Seite um bestimmte Verhaltensweisen ergänzen. Sie verlinken auch zu anderen HTML-Seiten und weiteren Ressourcen. Markup: Diese HTML-Elemente beschreiben Ihren Textinhalt und erlauben Querverweise (HTML steht für Hypertext Markup Language.) Übersicht In HTML denken 15 Eine einfache HTML-Seite 16 Markup: Elemente, Attribute, Werte und mehr 20 Der Textinhalt einer Webseite 24 Links, Bilder und andere Nicht-Text-Inhalte 25 Datei- und Ordnernamen 26 URLs 27 HTML: Markup mit Bedeutung 32 Die Standarddarstellung von Webseiten durch Browser 36 Zusammenfassung 38

28 Außerdem finden sich am Anfang jeder HTML- Seite einige primär für Browser und Suchmaschinen (also Bing, Duck Duck Go, Google, Yahoo usw.) gedachte Informationen. Diese zeigen die Browser ihren Besuchern nicht. Bemerkenswerterweise besteht der Code einer Webseite ausschließlich aus Text. Dies bedeutet, dass Webseiten in reinem Textformat gespeichert werden und praktisch mit jedem Browser auf jeder beliebigen Plattform (egal ob Desktop, Tablet, Smartphone etc.) betrachtet werden können. Außerdem erleichtert dies die Erstellung von HTML-Seiten. In diesem Kapitel gehen wir eine einfache HTML-Seite durch, erläutern HTML-Grundlagen (einschließlich der drei anfangs erwähnten Komponenten) und besprechen bewährte Vorgehensweisen. Anmerkung: Wie bereits in der Einführung erwähnt, spreche ich von HTML, wenn ich mich auf die Sprache im Allgemeinen beziehe. Wenn ich hingegen bestimmte Merkmale hervorheben will, die es nur bei einer Version der Sprache gibt, verwende ich den jeweiligen Namen. Beispiel: HTML5 führt mehrere neue Elemente ein und definiert andere neu bzw. eliminiert sie, die früher in HTML 4 und XHTML 1.0 vorkamen. 14 Kapitel 1

29 In HTML denken Stellen Sie sich die folgende Szene vor: Sie stehen in Ihrer Küche. In einer Hand halten Sie ein paar Klebezettel mit jeweils einem Wort darauf. Auf einem steht Suppe, auf den anderen z.b. Müsli, Teller usw. Wenn Sie den Schrank öffnen, etikettieren Sie jedes Objekt mit dem Klebezettel, der es am besten beschreibt. Auf den gelben Müslikarton kommt der Klebezettel mit Müsli. Den roten Müsli karton bekleben Sie ebenfalls mit Müsli. Dasselbe machen Sie auch mit den anderen Objekten. HTML schreiben ähnelt dieser Übung, doch statt Lebensmittel und Geschirr zu kennzeichnen, beschreiben Sie mit Etiketten (sogenannten Tags) den Inhalt Ihrer Webseite. Sie müssen sich keine Wörter für die Etiketten ausdenken, denn sie sind bereits im HTML in Form von vordefinierten Ele menten vorhanden. Das p-element steht für Absätze (Englisch paragraph). Das abbr-element ist für Abkürzungen (Englisch abbreviations). Das li-element gehört zu Listenelementen. Später in diesem Buch erfahren Sie mehr über HTML-Elemente. Beachten Sie, dass auf den Klebezetteln Wörter wie Müsli stehen und nicht gelber Karton mit Müsli oder roter Karton mit Müsli. Entsprechend beschreiben HTML-Elemente den Inhalt und nicht sein Aussehen. CSS (damit fangen wir in Kapitel 7 an) steuert das Aussehen Ihrer Inhalte (die Schriften, Farben, Textschatten usw.). Wenn Sie nun bestimmte Absätze grün und andere orange machen, sind und bleiben sie für HTML doch p-elemente. Bitte behalten Sie das im Hinterkopf, wenn Sie sich durch das Buch arbeiten und eigene Websites erstellen. Die einfache Webseite, die nun folgt, zeigt die Anwendung. Die Bausteine einer Webseite 15

30 Eine einfache HTML-Seite Schauen wir uns eine ganz einfache HTML-Seite als Ausgangspunkt für das an, was in diesem Kapitel und im Verlaufe des Buchs noch kommt. Sie lernen in diesem Abschnitt einiges über Code, aber machen Sie sich keine Sorgen, falls Sie nicht gleich alles verstehen. Wir liefern einen kleinen Vorgeschmack auf HTML, weitere Beispiele lernen Sie im Verlaufe dieses Buchs detailliert kennen. Da wir alle unterschiedlich lernen, ist es für einige vielleicht hilfreich, zuerst den Abschnitt über Mark up: Elemente, Attribute, Werte und mehr auf Seite 20 zu lesen und dann hierher zurückzukehren. A Jede Webseite enthält als Grundlage den DOCTYPE sowie die Elemente html, head und body. Die beiden Teile, die Sie anpassen, sind der Sprachcode, der mit lang zugewiesen wird, und der Text zwischen <title> und </title>. <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title>ihr Seitentitel</title> </head> <body> </body> </html> Jede Webseite beginnt mit der einfachen Struktur, wie sie in A gezeigt wird. Das ist die HTML-Entsprechung eines leeren Blatt Papiers B: Der für Ihre Besucher sichtbare Inhalt kommt in den Textkörper, also den Bereich zwischen <body> und </body>). Der ist momentan noch leer, aber wir werden ihn gleich füllen. Doch zuerst eine kurze Einführung (die wir im nächsten Abschnitt ausbauen). HTML verwendet < und >, um jedes HTML-Tag zu umschließen. Ein Start-Tag wie <head> kennzeichnet den Beginn eines Elements, ein End-Tag wie </head> dessen Ende. Einige wenige Elemente wie meta A bekommen kein End-Tag. B Keine besonders spannende Seite, falls Sie nicht gerade Minimalist sind! 16 Kapitel 1