HTML und CSS lernen mit dem beliebten Erklärprofi Peter Müller!
Sie suchen eine gute Einführung in die Gestaltung von Webseiten mit HTML und CSS ? Dann liegen Sie mit diesem Buch genau richtig! Peter Müller erklärt Ihnen einprägsam und mit der richtigen Prise Humor, was Sie bei der modernen Webgestaltung mit HTML und CSS beachten müssen: von den grundlegenden Prinzipien bis hin zu den neuesten Entwicklungen. Immer kompetent, klar und verständlich . Die anschaulichen Beispiele aus der Praxis können Sie leicht auf eigene Projekte anwenden. Mit vielen Abbildungen, die Ihnen das Verständnis der wichtigsten Webkonzepte erleichtern. Und der komplette Beispielcode steht Ihnen zum Lernen und Üben bereit. Perfekt für Webseiten-Selbermacher!
Grundlagen, Konzepte und Gestaltung
Spezifität, Kaskade und Positionierung verständlich erklärt
Responsive Webseiten und responsive Bilder
Moderne Layouts mit Flexbox und Grid-System
Mit vielen Infos zu barrierefreiem Design
Aus dem Inhalt:
Schnellstart HTML und CSS
Schriften, Farben, Hyperlinks
Barrierefreie Gestaltung
Selektoren und Einheiten
Stylesheets ordnen
Kontaktformulare und Tabellen
Box-Modelle im Detail
Spezifität, Kaskade und Vererbung
Positionierung
Media Queries und Mehrspaltigkeit
Mobile Version
Layouts mit Flexbox und CSS Grid
Moderne Layouts mit Flexbox und Grid-System
Autorentext 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. Ebenso vermittelt er Einsteigern, wie sie mit WordPress eigene Websites bauen können.
Inhalt ... 72
3.5 ... Den Kopfbereich im CSS selektieren und gestalten ... 74
3.6 ... Wichtige Vokabeln: der Aufbau einer CSS-Regel ... 76
3.7 ... Entwicklerwerkzeuge: CSS im Browser untersuchen ... 77
3.8 ... Auf einen Blick ... 79
TEIL II. HTML (mit einer Prise CSS) ... 81
4. HTML-Elemente für Text: Überschriften, Absätze, Hervorhebungen und Listen ... 83
4.1 ... Überschriften strukturieren den Inhalt:
bis
... 84
4.2 ... Absätze und Hervorhebungen:
, , ... 86
4.3 ... Webseiten in unterschiedlichen Umgebungen testen ... 88
4.4 ... Listen erstellen mit
, und
... 89
4.5 ... Listen verschachteln: eine Liste in einer Liste ... 93
4.6 ... Über Blockelemente, Inline-Elemente und »display« ... 95
4.7 ... Auf einen Blick ... 96
5. HTML und Hyperlinks -- das Besondere am Web ... 97
5.1 ... Das Standardverhalten von Hyperlinks ... 97
5.2 ... Anatomie eines Hyperlinks: Linktext ... 98
5.3 ... Hyperlinks in neuem Tab oder Fenster öffnen ... 100
5.4 ... Eine Navigation ist eine Liste mit Links ... 101
5.5 ... Eine grundlegende Gestaltung für die Navigation ... 103
5.6 ... Im Fußbereich einen Link »Nach oben« einfügen ... 109
5.7 ... Links zu Dateien und E-Mail-Adressen ... 112
5.8 ... Auf einen Blick ... 114
6. HTML-Elemente für Bilder, Audio und Video ... 115
6.1 ... Über Grafikformate im Web: JPEG, GIF, PNG, SVG & Co ... 115
6.2 ... Ein Bild als Logo einbinden mit ... 117
6.3 ... Pixelbilder in Zeiten hochauflösender Bildschirme ... 121
6.4 ... Bilder mit flexibler Breite: »max-width: 100%« ... 125
6.5 ... Abbildungen beschriften: und ... 128
6.6 ... »Lazy Loading«: Seiten mit vielen Bildern optimieren ... 130
6.7 ... Audiodateien einbinden mit
6.8 ... Videodateien einbinden mit
6.9 ... Auf einen Blick ... 136
7. Semantische HTML-Elemente zur Strukturierung von Webseiten und Inhalten ... 139
7.1 ... Warum semantische Strukturelemente eine sinnvolle Sache sind ... 140
7.2 ... Kopfbereiche auszeichnen mit ... 140
7.3 ... Navigationsbereiche erstellen mit
7.4 ... Der Hauptinhalt einer Webseite steht in ... 145
7.5 ... Fußbereiche auszeichnen mit
7.6 ... Inhaltliche Abschnitte erstellen mit ... 147
7.7 ... In sich geschlossene, eigenständige Blöcke mit ... 149
7.8 ... Bereiche mit zusätzlichen Informationen:
7.9 ... Elemente mit
semantisch neutral gruppieren ... 155
7.10 ... Orientierungspunkte für Screenreader: »ARIA Landmark Roles« ... 156
7.11 ... Auf einen Blick ... 160
8. Weitere HTML-Elemente zur Auszeichnung von Text ... 161
8.1 ... Zitate auszeichnen mit
und ... 161
8.2 ... Einen Zeilenumbruch erzwingen mit ... 165
8.3 ... Kontaktinformationen auszeichnen mit
... 165
8.4 ... Zeitangaben für Menschen und Maschinen:
8.5 ... Ausklappbare Inhalte: und ... 169
8.6 ... Änderungen am Text dokumentieren: und ... 172
8.7 ... Kurz vorgestellt: , und ... 174
8.8 ... Weitere Inline-Elemente in der Übersicht ... 175
8.9 ... Know-how: Zeichensätze und Sonderzeichen ... 176
8.10 ... Auf einen Blick ... 179
9. HTML-Elemente zum Erstellen von Formularen ... 181
9.1 ... Im Web basieren alle Interaktionen mit Besuchern auf HTML-Formularen ... 181