Peter Müller

Einstieg in HTML und CSS

Barrierefreie und responsive Webseiten erstellen mit HTML und CSS - ganz ohne Vorwissen! Ausgabe 2024

• Broschiertes Buch

Produktbeschreibung

Sie suchen eine verlässliche Einführung in die Gestaltung von Webseiten mit HTML und CSS? Dann liegen Sie mit diesem Buch genau richtig! Unser Autor Peter Müller erklärt Ihnen hervorragend, was Sie bei der modernen Webgestaltung wissen müssen: von den grundlegenden Prinzipien bis hin zu den neuesten Entwicklungen. Immer kompetent, klar und verständlich. Anschauliche Beispiele aus der Praxis können Sie leicht auf eigene Projekte anwenden - inkl. einer guten Prise Humor.

Aus dem Inhalt:

Schnellstart HTML und CSSSchriften, Farben, HyperlinksBarrierefreie GestaltungSelektoren und EinheitenStylesheets ordnenKontaktformulare und TabellenBox-Modelle im DetailSpezifität, Kaskade und VererbungPositionierungMedia Queries und MehrspaltigkeitMobile VersionLayouts mit Flexbox und CSS Grid

Produktdetails

• Verlag: Rheinwerk Computing / Rheinwerk Verlag
• Artikelnr. des Verlages: 459/10233
• 3., erw. Aufl.
• Seitenzahl: 551
• Erscheinungstermin: August 2024
• Deutsch
• Abmessung: 226mm x 171mm x 37mm
• Gewicht: 1013g
• ISBN-13: 9783367102334
• ISBN-10: 3367102334
• Artikelnr.: 70696268

Autorenporträt

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.

Inhaltsangabe

Materialien zum Buch ... 26
Geleitwort ... 27
Vorwort ... 29
TEIL I. Webseiten, HTML und CSS ... 33
1. Wissenswertes über Webseiten ... 35

1.1 ... Webseiten sehen nicht überall gleich aus ... 35
1.2 ... Webseiten bestehen aus Quelltext ... 37
1.3 ... Quelltext besteht aus HTML, CSS und JavaScript ... 38
1.4 ... Webseiten werden von einem Browser dargestellt ... 41
1.5 ... Webseiten und Barrierefreiheit ... 43
1.6 ... Editoren zum Schreiben und Bearbeiten von Quelltext ... 44
1.7 ... Websites zum Nachschlagen von HTML und CSS ... 45
1.8 ... Auf einen Blick ... 48

2. HTML kennenlernen: die erste Webseite erstellen ... 49

2.1 ... Webseiten bestehen aus rechteckigen Kästchen ... 50
2.2 ... HT-M-L: die »HyperText Markup Language« ... 51
2.3 ... Die erste Webseite erstellen: »index.html« ... 52
2.4 ... Jede Webseite hat ein HTML-Grundgerüst ... 54
2.5 ... Der und das Stammelement ... 56
2.6 ... HTML-Elemente können im Anfangs-Tag Attribute enthalten ... 57
2.7 ... enthält wichtige Infos über die Webseite ... 58
2.8 ... enthält den im Browser sichtbaren Bereich der Webseite ... 61
2.9 ... Der Kopfbereich mit Überschrift und Slogan ... 63
2.10 ... Entwicklerwerkzeuge: HTML im Browser untersuchen ... 64
2.11 ... Auf einen Blick ... 66

3. CSS kennenlernen: die erste Webseite gestalten ... 67

3.1 ... Jeder Browser hat ein eingebautes Stylesheet ... 67
3.2 ... HTML-Elemente als rechteckige Kästchen visualisieren ... 69
3.3 ... Das erste eigene Stylesheet: »style.css« ... 70
3.4 ... Die erste eigene CSS-Regel: Hintergrund- und Schriftfarbe für ... 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
1. ... 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 ... 131
   6.8 ... Videodateien einbinden mit ... 133
   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 ... 143
   7.4 ... Der Hauptinhalt einer Webseite steht in ... 145
   7.5 ... Fußbereiche auszeichnen mit ... 146
   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: ... 153
   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: ... 167
   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
   9.2 ... Das Element definiert ein Formular ... 182
   9.3 ... Einzeilige Eingabefelder mit und ... 183
   9.4 ... Mehrzeilige Eingabefelder mit und ... 188
   9.5 ... Zum Anklicken: Kontrollkästchen, Optionsfelder und Auswahllisten ... 189
   9.6 ... Formularfelder gruppieren mit
   und

   ... 193
   9.7 ... Ein Button zum Abschicken der Formulardaten ... 194
   9.8 ... Ein Kontaktformular mit DSGVO-Checkbox erstellen ... 195
   9.9 ... Auf einen Blick ... 201
   
   10. HTML-Elemente zum Erstellen von Tabellen ... 203
   
   10.1 ... Eine einfache HTML-Tabelle: , und , und ... 206
   10.4 ... Zellen verbinden mit »colspan« und »rowspan« ... 207
   10.5 ... Übung: Tabelle für »Die 10 besten Alben aller Zeiten« ... 208
   10.6 ... Auf einen Blick ... 213
   
   11. Von der Webseite zur Website ... 215
   
   11.1 ... »Sie sind hier«: aktuellen Menüpunkt hervorheben ... 215
   11.2 ... Rechtliche Pflichtlinks im Footer einfügen ... 219
   11.3 ... Das HTML überprüfen mit dem HTML-Validator ... 221
   11.4 ... Die Seiten »News«, »Über uns« und »Kontakt« erstellen ... 223
   11.5 ... Inhalte für die Seite »News« hinzufügen ... 226
   11.6 ... Ein Bild auf der Seite »Über uns« einfügen ... 230
   11.7 ... Die Seite »Kontakt« mit Kontaktdaten und Formular ... 232
   11.8 ... Die Seiten »Datenschutz« und »Impressum« ... 234
   11.9 ... Auf einen Blick ... 235
   
   TEIL III. CSS -- Grundlagen ... 237
   12. Gestalten per CSS: Box-Modell, Farben und Einheiten ... 239
   
   12.1 ... CSS kann man an drei verschiedenen Stellen schreiben ... 239
   12.2 ... Das Box-Modell kennenlernen: »padding«, »border« und »margin« ... 242
   12.3 ... Farben in CSS: Farbnamen, hexadezimale Schreibweise und Transparenz ... 248
   12.4 ... Die wichtigsten Längeneinheiten: px, em, rem, % & Co ... 253
   12.5 ... Auf einen Blick ... 257
   
   13. Das Box-Modell in Aktion: »padding«, »border« und »margin« ... 259
   
   13.1 ... Das Box-Modell im Browser visualisieren ... 259
   13.2 ... Die Breite begrenzen: »min-width« und »max-width« ... 261
   13.3 ... Der Abstand zum Rand: »padding« ... 262
   13.4 ... Rahmenlinien gestalten mit »border« und »border-radius« ... 266
   13.5 ... Blockboxen horizontal zentrieren mit »margin« ... 270
   13.6 ... Abstände zwischen den Elementen mit »margin« ... 272
   13.7 ... Tipps zum Gestalten mit »padding« und »margin« ... 273
   13.8 ... Know-how: Collapsing Margins -- vertikale Außenabstände kollabieren ... 276
   13.9 ... Auf einen Blick ... 280
   
   14. Die wichtigsten Selektoren und ihre Spezifität ... 283
   
   14.1 ... Einfache Selektoren: Elemente, Gruppierung und * ... 284
   14.2 ... Klassen sind klasse: der Selektor mit dem Punkt ... 285
   14.3 ... IDs sind einmalig: der Selektor mit der Raute ... 287
   14.4 ... Attributselektoren haben eckige Klammern: [attribut] ... 288
   14.5 ... DOM: die Hierarchie der HTML-Elemente ... 293
   14.6 ... Nachfahren auswählen: der Selektor mit Leerzeichen ... 294
   14.7 ... Selektoren zum Auswählen von Kindelementen ... 294
   14.8 ... Nachbarn und Geschwister selektieren mit + und ~ ... 298
   14.9 ... Kurz vorgestellt: der praktische Elternselektor :has() ... 300
   14.10 ... Nützliche Quellen zum Nachschlagen von Selektoren ... 301
   14.11 ... Spezifität: Einige Selektoren sind wichtiger als andere ... 302
   14.12 ... Auf einen Blick ... 304
   
   15. Text gestalten: Schriften, Listen, Links und mehr ... 305
   
   15.1 ... Klassische Schriftarten mit und ohne Serifen im Web ... 306
   15.2 ... Die Schriftart definieren mit »font-family« ... 307
   15.3 ... Die Systemschrift des Geräts: gut lesbar und echt schnell ... 310
   15.4 ... Webfonts -- die Schriftart gleich mitliefern ... 311
   15.5 ... Schnell und einfach: Google Fonts selbst ausliefern ... 312
   15.6 ... Gut lesbarer Text mit »font-size« und »line-height« ... 317
   15.7 ... Listen: Aufzählungszeichen gestalten per CSS ... 322
   15.8 ... Hyperlinks: Unterstreichung gestalten mit »text-decoration« ... 325
   15.9 ... Hyperlinks: Linkzustände gestalten mit Pseudoklassen ... 327
   15.10 ... Links in neuem Tab kennzeichnen mit dem Pseudoelement »::after« ... 330
   15.11 ... Weitere Eigenschaften zur Gestaltung von Schrift und Text ... 333
   15.12 ... Auf einen Blick ... 336
   
   16. Der Browser und das CSS: Vererbung, Standardwert und Kaskade ... 339
   
   16.1 ... Überblick: Vererbung, Standardwert und Kaskade ... 339
   16.2 ... Nichts gefunden? Vererbung oder Standardwert ... 340
   16.3 ... Die Kaskade: Wichtigkeit, Spezifität und Reihenfolge ... 343
   16.4 ... Auf einen Blick ... 350
   
   17. Boxen gestalten: Hintergrund, Schatten und am Bildschirm ausblenden ... 351
   
   17.1 ... Hintergrundgrafiken per CSS einbinden und gestalten ... 352
   17.2 ... Lineare Farbverläufe: »background-image« und »linear-gradient()« ... 358
   17.3 ... Schattenboxen mit »box-shadow« ... 360
   17.4 ... Zitate als Kundenstimmen gestalten ... 362
   17.5 ... »Call to Action«: Links in Buttons verwandeln ... 365
   17.6 ... Boxen am Bildschirm ausblenden: »visually-hidden« ... 372
   17.7 ... »Skip-Link«: per Tastatur direkt zum Inhalt springen ... 375
   17.8 ... Auf einen Blick ... 378
   
   18. Ordnung halten: Stylesheets aufräumen und organisieren ... 379
   
   18.1 ... Benutzerdefinierte Eigenschaften: Variablen in CSS ... 380
   18.2 ... Stylesheets mit Kommentaren strukturieren ... 383
   18.3 ... Verschiedene Schreibweisen für CSS-Regeln ... 384
   18.4 ... CSS überprüfen mit dem CSS-Validator ... 387
   18.5 ... Modulbauweise: Ein zentrales Stylesheet erleichtert die Entwicklung ... 388
   18.6 ... Die Modul-Stylesheets erstellen und importieren ... 390
   18.7 ... Das CSS auf die Modul-Stylesheets verteilen ... 393
   18.8 ... Ein neues Modul für ein modernes Layout ... 398
   18.9 ... Auf einen Blick ... 405
   
   TEIL IV. CSS -- Layout ... 407
   19. Der normale Flow, »position« und »float« ... 409
   
   19.1 ... Flow: Die Seite ist ein langer ruhiger Fluss ... 410
   19.2 ... Versetzt weiterfließen mit »position: relative« ... 411
   19.3 ... Raus aus dem Flow mit »position: absolute« ... 412
   19.4 ... Wie ein Fels in der Brandung mit »position: fixed« ... 416
   19.5 ... Scrollen und stehen bleiben mit »position: sticky« ... 418
   19.6 ... Positionierte Boxen und der »z-index« ... 419
   19.7 ... Text um eine Abbildung fließen lassen mit »float« ... 421
   19.8 ... Floats beenden mit »clear: both« ... 424
   19.9 ... Praktisch: Klassen zum Floaten und Clearen ... 425
   19.10 ... Floats umschließen mit »display: flow-root« ... 426
   19.11 ... Floats nicht rechteckig umfließen mit »shape-outside« ... 429
   19.12 ... Auf einen Blick ... 430
   
   20. Media Queries und responsives Webdesign ... 433
   
   20.1 ... Responsives Webdesign: Das Web wird flexibel ... 433
   20.2 ... Medientypen definieren das Ausgabemedium ... 434
   20.3 ... Media Queries = Medientypen + Medieneigenschaften ... 437
   20.4 ... Media Queries brauchen den »Meta-Viewport« ... 441
   20.5 ... Media Queries und die Suche nach dem Breakpoint ... 443
   20.6 ... Responsive Schriftgröße mit und ohne Media Queries ... 444
   20.7 ... Auf einen Blick ... 448
   
   21. Flexbox: Mehrspaltige Layouts mit »display: flex« ... 449
   
   21.1 ... Flexbox und Grid -- jenseits vom »Block Formatting Context« ... 449
   21.2 ... Flex-Container erstellen: »display: flex« ... 450
   21.3 ... Fließrichtung von Flex-Items kontrollieren: »flex-flow« ... 454
   21.4 ... Flex-Items an der Hauptachse ausrichten: »justify-content« ... 458
   21.5 ... Flex-Items an der Querachse ausrichten: »align-items« und »align-self« ... 459
   21.6 ... Automatische Abstände für Flex-Items mit »margin« ... 462
   21.7 ... Flexibilität für Flex-Items: die Zauberformel »flex: 1« ... 464
   21.8 ... Flexbox in Aktion: »Sticky Footer« am unteren Rand des Browserfensters ... 466
   21.9 ... Die Reihenfolge von Flex-Items ändern ... 470
   21.10 ... Auf einen Blick ... 472
   
   22. CSS-Grid: Mehrspaltige Layouts erstellen mit »display: grid« ... 475
   
   22.1 ... Ein »Grid« ist ein Raster und schafft Ordnung ... 475
   22.2 ... Mehr Platz für moderne Browser: »@supports« ... 476
   22.3 ... Ein Grid-Layout: Boxen neben- und untereinander ... 477
   22.4 ... Grid-Items manuell platzieren: 1. nummerierte Linien ... 483
   22.5 ... Grid-Items manuell platzieren: 2. benannte Bereiche ... 488
   22.6 ... Die Grid-Zauberformel: responsiv ohne Media Query ... 492
   22.7 ... Verschachtelte Grids mit »subgrid« ... 498
   22.8 ... Flexbox und Grid sind ein gutes Team ... 499
   22.9 ... Auf einen Blick ... 502
   
   23. Flexible Icons und responsive Bilder ... 505
   
   23.1 ... Flexible Icons: skalierbare Symbole mit SVG ... 505
   23.2 ... SVG-Icons mit als Datei einfügen ... 507
   23.3 ... SVG-Icons inline direkt im HTML einfügen ... 510
   23.4 ... HTML und responsive Bilder ... 511
   23.5 ... Unterschiedliche Bilddateien je nach Viewportbreite ... 512
   23.6 ... Unterschiedliche Bildmotive und Dateiformate ... 517
   23.7 ... Auf einen Blick ... 519
   
   24. Eine responsive Navigation erstellen ... 521
   
   24.1 ... Die responsive Navigation im Überblick ... 521
   24.2 ... Schritt 1: Eine vertikale Navigation für schmale Viewports ... 524
   24.3 ... Schritt 2: Eine horizontale Navigation für breitere Viewports ... 526
   24.4 ... Schritt 3: Menübutton einfügen mit

   ... 203 10.2 ... Tabellenüberschriften stehen in	... 205 10.3 ... Tabellen strukturieren: