Einstieg in HTML und CSS

Peter Müller arbeitet seit vielen Jahren als IT-Dozent und versteht es, komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen. Er ist als Autor des CSS-Bestsellers "Little Boxes" bekannt, dessen neueste Auflage unter dem Titel "Einstieg in CSS" erschienen ist.

Materialien zum Buch ... 26


Geleitwort ... 27


Vorwort ... 29


1. Wissenswertes über Webseiten ... 33


1.1 ... Webseiten sehen bei jedem Benutzer anders aus ... 33

1.2 ... Webseiten bestehen aus Quelltext ... 34

1.3 ... Quelltext besteht aus HTML, CSS und JavaScript ... 36

1.4 ... Webseiten werden von einem Browser dargestellt ... 39

1.5 ... Editoren zum Schreiben und Bearbeiten von Quelltext ... 41

1.6 ... Referenzen und Nachschlagewerke zu HTML und CSS ... 42

1.7 ... Auf einen Blick ... 44



2. HTML kennenlernen: Die erste Webseite erstellen ... 45


2.1 ... Webseiten bestehen aus rechteckigen Kästchen ... 45

2.2 ... HT-M-L: die »HyperText Markup Language« ... 46

2.3 ... Jede Webseite hat ein HTML-Grundgerüst ... 48

2.4 ... Der "!doctype" und das Stammelement "html" ... 51

2.5 ... HTML-Elemente können im Anfangs-Tag Attribute enthalten ... 52

2.6 ... "head" enthält wichtige Infos über die Webseite ... 53

2.7 ... "body" enthält den sichtbaren Bereich der Webseite ... 57

2.8 ... Der Kopfbereich "header" mit Überschrift und Slogan ... 59

2.9 ... Entwicklerwerkzeuge im Browser: HTML untersuchen ... 60

2.10 ... Auf einen Blick ... 63



3. CSS kennenlernen: Die erste Webseite gestalten ... 65


3.1 ... Jeder Browser hat ein fest eingebautes Stylesheet ... 65

3.2 ... Das HTML für als schematische Darstellung ... 67

3.3 ... Das erste eigene Stylesheet: »style.css« ... 68

3.4 ... Die erste eigene CSS-Regel: Hintergrund- und Schriftfarbe für "body" ... 70

3.5 ... Den Kopfbereich "header" selektieren und gestalten ... 72

3.6 ... Entwicklerwerkzeuge: CSS im Browser untersuchen ... 74

3.7 ... Auf einen Blick ... 76



4. HTML-Elemente für Text: Überschriften, Absätze, Hervorhebungen und Listen ... 77


4.1 ... Überschriften strukturieren den Inhalt: "h1" bis "h6" ... 78

4.2 ... Absätze und Hervorhebungen: "p", "strong", "em" ... 80

4.3 ... Webseiten von Anfang an in unterschiedlichen Viewports testen ... 82

4.4 ... Listen erstellen mit "ul", "ol" und "li" ... 84

4.5 ... Listen verschachteln: Eine Liste in einer Liste ... 87

4.6 ... Über Blockelemente, Inline-Elemente und die Eigenschaft »display« ... 89

4.7 ... Auf einen Blick ... 90



5. Hyperlinks -- das Besondere am Web ... 91


5.1 ... Das Standardverhalten von Hyperlinks ... 91

5.2 ... Anatomie eines Hyperlinks: Linktext ... 92

5.3 ... Hyperlinks und sinnvolle Linktexte: das »Klicken-Sie-hier«-Syndrom ... 94

5.4 ... Hyperlinks in neuem Tab oder Fenster öffnen ... 95

5.5 ... Eine Navigation ist eine Liste mit Links ... 96

5.6 ... Eine grundlegende Gestaltung für die Navigation ... 97

5.7 ... Im Fußbereich einen Link »Nach oben« einfügen ... 102

5.8 ... Besondere Links: Dateien, E-Mail und Telefon ... 106

5.9 ... Auf einen Blick ... 108



6. HTML-Elemente für Bilder, Audio und Video ... 109


6.1 ... Über Grafikformate im Web: JPEG, GIF, PNG, SVG & Co ... 109

6.2 ... Ein Bild als Logo einbinden mit "img" ... 111

6.3 ... Pixelbilder und hochauflösende Bildschirme ... 114

6.4 ... Bilder mit flexibler Breite: »max-width: 100%« ... 119

6.5 ... Abbildungen beschriften: "figure" und "figcaption" ... 122

6.6 ... »Lazy Loading«: Seiten mit vielen Bildern optimieren ... 124

6.7 ... Let there be sound: Audiodateien einbinden mit "audio" ... 125

6.8 ... Bewegte Bilder einbinden mit "video" ... 127

6.9 ... Auf einen Blick ... 131



7. HTML-Elemente zur Strukturierung von Webseiten und Inhalten ... 133


7.1 ... Die semantischen Strukturelemente auf einen Blick ... 134

7.2 ... Kopfbereiche auszeichnen mit "header" ... 134

7.3 ... Navigationsbereiche erstellen mit "nav" ... 137

7.4 ... Der Hauptinhalt einer Webseite steht in "main" ... 140

7.5 ... Fußbereiche auszeichnen mit "footer" ... 141

7.6 ... Inhaltliche Abschnitte erstellen mit "section" ... 142

7.7 ... In sich geschlossene, eigenständige Blöcke mit "article" ... 144

7.8 ... Bereiche mit zusätzlichen Informationen: "aside" ... 148

7.9 ... Elemente mit "div" semantisch neutral gruppieren ... 150

7.10 ... Auf einen Blick ... 152



8. Weitere HTML-Elemente zur Auszeichnung von Text ... 153


8.1 ... Zitate auszeichnen mit "blockquote" und "cite" ... 153

8.2 ... Einen Zeilenumbruch erzwingen mit "br" ... 157

8.3 ... Kontaktinformationen auszeichnen mit "address" ... 157

8.4 ... Zeitangaben für Menschen und Maschinen: "time" ... 159

8.5 ... Ausklappbare Inhalte: "details" und "summary" ... 161

8.6 ... Änderungen am Text dokumentieren: "del" und "ins" ... 164

8.7 ... Kurz vorgestellt: "span", "hr" und "small" ... 166

8.8 ... Weitere Inline-Elemente in der Übersicht ... 167

8.9 ... Know-how: Zeichensätze und Sonderzeichen ... 169

8.10 ... Auf einen Blick ... 172



9. HTML-Elemente zum Erstellen von Formularen ... 173


9.1 ... Interaktion mit Besuchern basiert auf HTML-Formularen ... 174

9.2 ... Das Element "form" definiert ein Formular ... 174

9.3 ... Einzeilige Eingabefelder erstellen und beschriften: "input" und "label" ... 176

9.4 ... Mehrzeilige Eingabefelder erstellen und beschriften: "textarea" und "label" ... 180

9.5 ... Zum Anklicken: eckige Kontrollkästchen, runde Optionsfelder und ausklappbare Auswahllisten ... 181

9.6 ... Formularfelder gruppieren mit "fieldset" und die Gruppe beschriften mit "legend" ... 185

9.7 ... Ein Button zum Abschicken der Formulardaten ... 186

9.8 ... Ein DSGVO-kompatibles Kontaktformular erstellen ... 187

9.9 ... Auf einen Blick ... 193



10. HTML-Elemente zum Erstellen von Tabellen ... 195


10.1 ... Eine einfache HTML-Tabelle: "table", "tr" und "td" ... 195

10.2 ... Tabellenüberschriften stehen in "th" ... 197

10.3 ... Tabellen strukturieren: "thead", "tbody" und "tfoot" ... 198

10.4 ... Zellen verbinden mit »colspan« und »rowspan« ... 199

10.5 ... HTML-Tabellen erstellen und gestalten -- ein Beispiel ... 200

10.6 ... Auf einen Blick ... 204



11. Von der Webseite zur Website ... 205


11.1 ... Fine-Tuning für die Startseite ... 205

11.2 ... Das HTML überprüfen mit dem HTML-Validator ... 210

11.3 ... Die Seiten »News«, »Über uns« und »Kontakt« erstellen ... 212

11.4 ... Inhalte für die Seite »News« hinzufügen ... 216

11.5 ... Ein Bild auf der Seite »Über uns« einfügen ... 220

11.6 ... Kontaktdaten und Formular für die Seite »Kontakt« ... 222

11.7 ... Die Seiten »Impressum« und »Datenschutz« ... 225

11.8 ... Auf einen Blick ... 226



12. CSS kennenlernen: Syntax, Box-Modell, Farbwerte und Einheiten ... 227


12.1 ... Überblick: Webseiten gestalten per CSS ... 227

12.2 ... Wichtige Vokabeln: Der Aufbau einer CSS-Regel ... 228

12.3 ... Es gibt drei verschiedene Möglichkeiten, CSS zu speichern ... 229

12.4 ... Das Box-Modell kennenlernen: »padding«, »border« und »margin« ... 231

12.5 ... Farbnamen in CSS: Einfach, aber nicht sehr flexibel ... 236

12.6 ... Weit verbreitet: Hexadezimale Farbangaben mit #rrggbb ... 238

12.7 ... Die Alternative: Farben mit rgb() -- auch mit Transparenz ... 240

12.8 ... Nützliche Werkzeuge und Websites zur Arbeit mit Farben ... 242

12.9 ... Wichtige Einheiten: px, em, rem, % & Co ... 245

12.10 ... Auf einen Blick ... 248



13. Die wichtigsten Selektoren und Spezifität ... 249


13.1 ... Einfache Selektoren: Elemente, Gruppierung und »*« ... 250

13.2 ... Klassen sind klasse: Der Selektor mit dem Punkt ... 251

13.3 ... IDs sind einmalig: Der Selektor mit der Raute ... 253

13.4 ... Überblick: Die HTML-Elemente im DOM-Baum ... 254

13.5 ... Nachfahren auswählen: Der Selektor mit dem Leerzeichen ... 256

13.6 ... Selektoren zum Auswählen von Kindelementen ... 256

13.7 ... Nachbar- und Geschwisterselektoren mit + und ~ ... 260

13.8 ... Attributselektoren haben eckige Klammern: [attribut] ... 261

13.9 ... Quellen zum Nachschlagen von weiteren Selektoren ... 265

13.10 ... Spezifität: Einige Selektoren sind wichtiger als andere ... 266

13.11 ... Auf einen Blick ... 268



14. Der Browser und das CSS: Kaskade, Vererbung oder Standardwert ... 269


14.1 ... Die Kaskade: Wichtigkeit, Spezifität und Reihenfolge ... 269

14.2 ... Intuitiv: Die Reihenfolge im CSS entscheidet ... 271

14.3 ... Ungewohnt: Spezifität ist wichtiger als Reihenfolge ... 272

14.4 ... Ausnahme: »!important« gewinnt immer ... 274

14.5 ... Nichts gefunden? Vererbung oder Standardwert ... 275

14.6 ... Die Kaskade im Browser analysieren ... 277

14.7 ... Übersicht: Kaskade, Vererbung oder Standardwert ... 278

14.8 ... Auf einen Blick ... 280



15. Schrift und Text gestalten per CSS ... 281


15.1 ... Klassische Schriftarten mit und ohne Serifen im Web ... 281

15.2 ... Die Schriftart definieren mit »font-family« ... 283

15.3 ... Die Systemschrift des Geräts: Gut lesbar und echt schnell ... 285

15.4 ... Webfonts -- die Schriftart gleich mitliefern ... 287

15.5 ... Schnell und einfach: Google Fonts direkt von Google ... 288

15.6 ... Auf der sicheren Seite: Google Fonts selbst ausliefern ... 291

15.7 ... Gut lesbarer Text: »font-size« und »line-height« ... 295

15.8 ... Listen: Aufzählungszeichen gestalten per CSS ... 299

15.9 ... Hyperlinks: Unterstreichung gestalten mit »text-decoration« ... 303

15.10 ... Hyperlinks: Linkzustände gestalten mit Pseudoklassen ... 305

15.11 ... Externe Hyperlinks kennzeichnen mit »::after« ... 309

15.12 ... Weitere Eigenschaften zur Gestaltung von Schrift und Text ... 312

15.13 ... Auf einen Blick ... 315



16. Abstände gestalten mit dem Box-Modell ... 317


16.1 ... Das klassische Box-Modell für Blockboxen ... 317

16.2 ... Die Breite begrenzen: »min-width« und »max-width« ... 318

16.3 ... Der Abstand zum Rand: »padding« ... 320

16.4 ... Rahmenlinien gestalten mit »border« und »border-radius« ... 323

16.5 ... Blockboxen horizontal zentrieren mit »margin: auto« ... 327

16.6 ... Abstände zwischen den Elementen mit »margin« ... 328

16.7 ... »Collapsing Margins«: Vertikale Außenabstände kollabieren ... 329

16.8 ... Das intuitivere Box-Modell: »box-sizing: border-box« ... 335

16.9 ... Das Box-Modell für Inline-Boxen ... 337

16.10 ... Inline-Block: Blockboxen, aber nebeneinander ... 338

16.11 ... Auf einen Blick ... 339



17. Boxen gestalten per CSS ... 341


17.1 ... Hintergrundgrafiken per CSS einbinden und gestalten ... 341

17.2 ... Lineare Farbverläufe: »background-image« und »linear-gradient()« ... 348

17.3 ... Schattenboxen mit »box-shadow« ... 350

17.4 ... Gestalten mit dem Box-Modell: Zitate als Kundenstimmen ... 352

17.5 ... »Call to Action«: Hyperlinks in Buttons verwandeln ... 355

17.6 ... Boxen am Bildschirm ausblenden: »visually-hidden« ... 360

17.7 ... Auf einen Blick ... 363



18. Ordnung halten: Stylesheets organisieren ... 365


18.1 ... Stylesheets strukturieren mit Kommentaren ... 366

18.2 ... Verschiedene Schreibweisen für CSS-Regeln ... 367

18.3 ... CSS überprüfen mit dem CSS-Validator ... 371

18.4 ... Modulbauweise: Ein zentrales Stylesheet erleichtert die Entwicklung ... 372

18.5 ... Die Stylesheets für die einzelnen Module erstellen ... 374

18.6 ... Das Modul »basis.css« ist das Fundament ... 376

18.7 ... Das Modul »layout.css« für Seitenlayout und Layoutbereiche ... 379

18.8 ... Das Modul »navi-inline.css« für die Navigation ... 381

18.9 ... Das Modul »content.css« zur Gestaltung der Inhalte ... 382

18.10 ... Das Modul »forms.css« für Kontaktdaten und Formulare ... 383

18.11 ... Ein neues Modul für ein modernes Layout ... 384

18.12 ... Auf einen Blick ... 391



19. Media Queries und responsives Webdesign ... 393


19.1 ... »Responsives Webdesign«: Das Web wird flexibel ... 393

19.2 ... Medientypen definieren das Ausgabemedium ... 394

19.3 ... Media Queries = Medientypen + Medieneigenschaften ... 397

19.4 ... Media Queries brauchen den »Meta-Viewport« ... 401

19.5 ... Media Queries und die Suche nach dem Breakpoint ... 403

19.6 ... Auf einen Blick ... 404



20. Der Flow und die Eigenschaft »position« ... 405


20.1 ... Blockboxen, der Flow und »position: static« ... 405

20.2 ... Versetzt weiterfließen mit »position: relative« ... 407

20.3 ... Raus aus dem Flow mit »position: absolute« ... 408

20.4 ... Der Trick: »absolute« und »relative« kombinieren ... 409

20.5 ... Wie ein Fels in der Brandung -- »position: fixed« ... 412

20.6 ... Scrollen und dann stehen bleiben: »position: sticky« ... 413

20.7 ... Positionierte Boxen und der »z-index« ... 414

20.8 ... Auf einen Blick ... 417



21. Schweben und schweben lassen: »float« ... 419


21.1 ... Text um eine Abbildung fließen lassen mit »float« ... 419

21.2 ... Floats beenden mit »clear: both« ... 423

21.3 ... Floats umschließen mit »display: flow-root« ... 424

21.4 ... Praktisch: Klassen zum Floaten und Clearen ... 425

21.5 ... Das Umschließen von Floats mit »@supports« ... 427

21.6 ... Auf einen Blick ... 428



22. Flexbox: Mehrspaltige Layouts mit »display: flex« ... 429


22.1 ... Flexbox und Grid -- das moderne CSS-Layout ... 429

22.2 ... Flex-Container erstellen mit »display: flex« ... 431

22.3 ... Die Fließrichtung von Flex-Items kontrollieren mit »flex-flow« ... 434

22.4 ... Flex-Items an der Hauptachse ausrichten mit »justify-content« ... 438

22.5 ... Flex-Items an der Querachse ausrichten mit »align-items« und »align-self« ... 439

22.6 ... Automatische Abstände für Flex-Items mit »margin« ... 442

22.7 ... Flexibilität für Flex-Items: Die Zauberformel »flex: 1« ... 444

22.8 ... Flexbox in Aktion: Den Footer am unteren Rand des Browserfensters platzieren ... 447

22.9 ... Die Reihenfolge von Flex-Items ändern ... 450

22.10 ... Auf einen Blick ... 451



23. Eine responsive Navigation erstellen ... 453


23.1 ... Die responsive Navigation im Überblick ... 453

23.2 ... Schritt 1: Prüfen, ob JavaScript im Browser aktiv ist ... 457

23.3 ... Schritt 2: Die mobile Navigation gestalten ... 459

23.4 ... Schritt 3: Den Menübutton im HTML einfügen ... 461

23.5 ... Schritt 4: Den Menübutton per CSS gestalten ... 464

23.6 ... Schritt 5: Die Navigation per CSS ausblenden ... 468

23.7 ... Schritt 6: Die Navigation mit dem Menübutton einblenden ... 470

23.8 ... Schritt 7: Eine horizontale Navigation für breitere Viewports ... 471

23.9 ... Die Navigation im Fußbereich gestalten ... 473

23.10 ... Auf einen Blick ... 474



24. CSS-Grid: Mehrspaltige Layouts erstellen mit »display: grid« ... 477


24.1 ... Ein »Grid« ist ein Raster und schafft Ordnung ... 477

24.2 ... Mehrspaltiges Layout nur für moderne Browser: »@supports« ... 478

24.3 ... Das erste Grid-Layout: Drei Boxen nebeneinander ... 479

24.4 ... Flexbox und Grid sind ein gutes Team ... 485

24.5 ... Grid-Items manuell platzieren mit nummerierten Grid-Linien ... 488

24.6 ... Grid-Items manuell platzieren mit benannten Grid-Bereichen ... 493

24.7 ... Die Grid-Zauberformel: Responsiv ohne Media Query ... 497

24.8 ... Die wichtigsten Grid-Eigenschaften in der Übersicht ... 502

24.9 ... Auf einen Blick ... 504



25. Flexible Icons und responsive Bilder ... 505


25.1 ... Flexible Icons: Skalierbare Symbole mit SVG ... 505

25.2 ... SVG-Icons mit als Datei einbinden ... 507

25.3 ... SVG-Icons kann man im Editor bearbeiten ... 509

25.4 ... SVG-Icons inline direkt im HTML einfügen ... 510

25.5 ... Unterschiedliche Bilder je nach Pixeldichte des Bildschirms ... 512

25.6 ... Unterschiedliche Bilder je nach Viewportbreite ... 513

25.7 ... Auf einen Blick ... 518



Index ... 519

»Wer seine Webseiten selber erstellen und aufmotzen möchte, findet hier ein ideales Begleitbuch.« Mac Life 202212

Die Fachpresse zur Vorauflage:

Mac Life: »Wer eigene Webseiten responsiv gestalten möchte, sollte sich dieses pfiffige Lehrbuch für Theorie und Praxis unbedingt ansehen.«

Publisher: »Auf 507 Seiten bietet Peter Müller [...] einen tollen Einstieg in HTML und CSS. «

gweep.at: »Der Einstieg in die Welt von HTML und CSS ist mit diesem Buch unübertroffen. Eine sehr gute Ausgangsbasis mit garantierten Erfolg zur eigenen Webseite.«