Müller Einstieg in HTML und CSS

Webseiten programmieren und gestalten
3. Auflage 2024
ISBN: 978-3-367-10235-8
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection

E-Book, Deutsch, 551 Seiten

Reihe: Rheinwerk Computing

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 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

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.

Autoren/Hrsg.

Müller, Peter

Inhaltsverzeichnis

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 ... 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: 11.  Von der Webseite zur Website ... 215TEIL III.  CSS -- Grundlagen ... 23712.  Gestalten per CSS: Box-Modell, Farben und Einheiten ... 23913.  Das Box-Modell in Aktion: »padding«, »border« und »margin« ... 25914.  Die wichtigsten Selektoren und ihre Spezifität ... 28315.  Text gestalten: Schriften, Listen, Links und mehr ... 30516.  Der Browser und das CSS: Vererbung, Standardwert und Kaskade ... 33917.  Boxen gestalten: Hintergrund, Schatten und am Bildschirm ausblenden ... 35118.  Ordnung halten: Stylesheets aufräumen und organisieren ... 379TEIL IV.  CSS -- Layout ... 40719.  Der normale Flow, »position« und »float« ... 40920.  Media Queries und responsives Webdesign ... 43321.  Flexbox: Mehrspaltige Layouts mit »display: flex« ... 44922.  CSS-Grid: Mehrspaltige Layouts erstellen mit »display: grid« ... 47523.  Flexible Icons und responsive Bilder ... 50524.  Eine responsive Navigation erstellen ... 521, und ... 203  10.2 ... Tabellenüberschriften stehen in ... 205  10.3 ... Tabellen strukturieren: , 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.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  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.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.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.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.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.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.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  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.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.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.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.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.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 und JavaScript ... 528  24.5 ... Schritt 4: Menübutton per CSS gestalten ... 532  24.6 ... Schritt 5: Navigation per CSS ein- und ausblenden ... 536  24.7 ... Auf einen Blick ... 540  Index ... 541

Über Autor(innen)

Müller, Peter
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.