HTML & CSS für Dummies

Florence Maurice ist Trainerin, Autorin und Programmiererin für Webthemen und das seit 2001. Sie hat viele erfolgreiche Webbücher geschrieben, publiziert regelmäßig Fachartikel in Fachzeitungen und nimmt auch Videotrainings auf; insbesondere für LinkedIn Learning. Außerdem schult sie live sowohl an einer Volkshochschule als auch in Firmen; ab und an ist sie auch Speaker auf Konferenzen. Ansonsten arbeitet sie noch als Fernlehrerin. Kurz: Sie vermittelt Wissen in allen erdenklichen Formen. In der übrigen Zeit programmiert sie Webseiten, um ihre Kenntnisse in der Praxis zu verfeinern.

• Über die Autorin 9Einleitung 23Über dieses Buch 23Konventionen in diesem Buch 23Was Sie nicht lesen müssen 23Törichte Annahmen über die Leser 24Wie dieses Buch aufgebaut ist (Achtung Spoiler!) 24Teil I: Die absoluten Basics 24Teil II: HTML – alles Wichtige 25Teil III: Losstarten mit CSS 25Teil IV: CSS für Layouts 25Teil V: Der Top-Ten- Teil 26Symbole, die in diesem Buch verwendet werden 26Wie es weitergeht 26Teil I Die Absoluten Basics 27Kapitel 1 Ziemlich beste Freunde: HTML und CSS 29Webseiten: vor dem Tunen ein Blick unter die Haube 29Aufbrezeln mit CSS 31Ausgezeichnet mit HTML 33Browser: the two and only 34Fundamental: HTML-Grundstruktur 35HTML-Dokument erstellen mit einem Editor 36Atom 38HTML-Dokument mit VS Code erstellen 391 Dokument im Browser ansehen und 2 sich freuen 42Alles klar mit Attributen 42Leere Elemente: leer, aber nicht hohl 43Kontrolle ist besser 44CSS – auswählen, formatieren und los 46Geschweifte Klammern, Doppelpunkte & Strichpunkte 47Das erste Stylesheet 48Kurzgefasst 50Kapitel 2 Beispiel für das HTML/CSS-Team 51Gestatten: die Beispielsite 51Der HTML-Codefür die Beispielseite 54HTML-Code der Startseite im Überblick 54head-Bereich 56Grobe Struktur 57header im Detail 59Hauptinhalt 61Das Grundprinzip von CSS ist folgendes: 63Stylesheet gesamt 64Formatierung von body 65Überschriften formatieren 67Formatierung der Navigation 69Zweispaltige Darstellung des Inhalts und Gestaltung des Footers 71Flexible Bilder 72Anpassungen für kleine Screens 73HTML-Code der zweiten Seite 74Nun zum CSS-Codeder zweiten Seite 77Kurzgefasst 77Kapitel 3 Fremden Code untersuchen, eigenen besser verstehen 79Entwicklertools aufrufen 79HTML-Codeansehen 82CSS-Code untersuchen 84Verhalten bei unterschiedlichen Bildschirmgrößen 85Kurzgefasst 87Kapitel 4 Ab ins Internet 89Domain und Webspace 89Hosting – Begriffe und Fakten 90Dateien mit einem FTP-Programmübertragen 94Zugangsdaten für FTP 94FTP-Programmwählen und installieren 94Daten übertragen mit FileZilla 95Fehler beheben und Probleme lösen 98Baustellenseite 98403-Fehlermeldung – »Zugriff verweigert« 98Dateien werden nicht angezeigt 98Probleme mit Bildern 98Nicht funktionierende Links 99Kurzgefasst 99Teil Ii Html – Alles Wichtige 101Kapitel 5 Gut strukturiert ist halb gewonnen 103Kopf und Rumpf 103Sprachangabe 105Zeichensatzangabe UTF-8 105Seitentitel – aber richtig 106Mehr meta 108Grundlegende Techniken 109Leerzeichen und Zeilenumbrüche 109Kommentare 112Entities für Sonderzeichen 113Der Blick auf body 114Texte unterteilen 115Am Anfang war der Absatz 115Überschriften 116Listen 118hr für eine inhaltliche Unterteilung 124Zitate mit blockquote und cite 124pre – Leerzeichen und Zeilenumbrüche beibehalten 125Ausklappbar: details und summary 126Inline-Elemente 126In der Zeile 126Die wichtigsten Inline-Elemente 127Struktur im Groben 130Kurzgefasst 133Kapitel 6 Bilder und Videos 135Mehr als Worte: Bilder 135Raster versus Vektor 135Eine Frage des (Bild-) Formats 136Das richtige Format für die richtige Situation 138Bilder einbinden 139Immer scharf: SVG-Bilder 144Echte kleine Lieblinge: Favicons 146Gut für die Performance 147Bewegt: Videos 147Codierung und Container 147Video einbinden 148Videos von YouTube und anderen Diensten einbinden 150iframes: die guten Frames 151Was auf die Ohren: Audio 152Object, embed und canvas! 153Kurzgefasst 153Kapitel 7 Links und Pfade 155Verlinkungen 155Bilder verlinken 156Links auf externe Webseiten 157An bestimmte Stellen auf Seiten verlinken 159Links auf andere Dateitypen 162Auf Dateien zum Download verlinken 163E-Mail- Links definieren 163Ruf! mich! an! Telefonlinks 165Pfade – von hier nach dort und wieder zurück 165Innerhalb eines Ordners auf derselben Ebene 167In einen Unterordner verweisen 168Übergeordnete Ordner 169In Parallelordner wechseln 169Noch höher hinaus und tiefer hinunter 170Absolute und relative Pfade 170Kurzgefasst 172Kapitel 8 Tabellen und Formulare 173Von der Wiege bis zur Bahre – Formulare, Formulare, Formulare 173Formulare – wichtige Basics 174Funktionsweise von Formularen 174Viele, viele Input-Typen 185Formularüberprüfung 192Informationen in Reih und Glied – Tabellen 194Grundlegender Aufbau von Tabellen 195Tabellen fehlerfrei erstellen 199Weitere Strukturierungselemente bei Tabellen 199Kurzgefasst 200Teil Iii Losstarten Mit Css 203Kapitel 9 HTML mit CSS zusammenbringen 205HTML und CSS verknüpfen 205Externe Datei 205Eingebettete Stylesheets 206Inline-Stile 209Externe Stylesheets mit @import einbinden 210Kommentare – in CSS (im Unterschied zu HTML) 212Die Qual der Wahl – Elemente auswählen 212Typselektor element 212Klassenselektor klasse 213id-Selektor #id 215Selektoren gruppieren: el1, el2, el3 215Universeller Selektor * 216Attributselektoren 217Kombinatoren 218Voll pseudo: Pseudoklassen und Pseudoelemente 224Die allerallerwichtigsten Selektoren in Kurzform 233Das Recht des Stärkeren – Spezifität verstehen 234Kurzgefasst 237Kapitel 10 CSS: Farben, Längeneinheiten und Vererbung 239Farben in CSS 239Farben am Bildschirm 240rgb(), rgba() und hexadezimale Angaben 240hsl() und hsla() 241Mehr Farbpower 243Farben wählen 244Farbkombinationen finden 245Längenangaben 246Überblick über die Längenangaben 247Pixelversteher 248Prozent 250em und rem 250vw, vh, vwmin, vwmax 251cm, pt, inch für Druck-Stylesheets zum Beispiel 252Tipps für die Verwendung der Einheiten 252Spezielle Angaben 253Rechnen mit CSS über calc() 253Custom Properties 254Vererbung und Standardwert – oder was gilt? 254Erb das! 254Nicht vererbare und vererbare Eigenschaften 256Vererbung in den Browser-Entwicklertools 257Fehlersuche 258Kurzgefasst 260Kapitel 11 Schriften wählen und Texte gestalten 261Schrift formatieren 261Standardschriften verwenden 261Webfonts 264Schriftgröße bestimmen 273fett, kursiv, Kapitälchen 277Zeilenhöhe 279Kürze mit Würze: die font-Eigenschaft 280Textschatten 282Abstände zwischen Wörtern oder Buchstaben 283text-decoration zur Linkformatierung, aber nicht nur 284Linkformatierungen 284Mehr Optionen für text-decoration 285Mit unterschiedlichen Browsern umgehen 285Texte formatieren und ausrichten 286Text ausrichten 286Ausrichtung und Schreibrichtung 287Erste Zeile einrücken 288Listen formatieren 289Kurzgefasst 290Kapitel 12 Richtig vermessen: die Ausmaße von Elementen 291Ausmaße von Elementen 291Breite 292Höhe 294Innenabstand 295Verkürzte Angaben mit mehreren Werten bei padding, margin etc 297Rahmen 298Logische Werte 299Überfließen steuern mit overflow 300Außenabstand 301Grundprinzip von margin 301Zusammenfallende Außenabstände 302box-sizing und die Gesamtgröße 303Formvollendet – abgerundete Ecken und Schatten 306Abgerundet: border-radius 306Schatten um Boxen zeichnen: box-shadow 307Boxmodell bei Inline-Elementen … und die Eigenschaft display 308width, padding, border, margin bei einem Inline-Element 308Verwandlungskünstler: display 309display bei der Erstellung von Buttons 310Elemente drehen, verschieben und skalieren 312Kurzgefasst 313Kapitel 13 Bilder mit CSS einbinden und formatieren 315Hintergrundfarben und -bilder 315Hintergrundbild ergänzen 315Wiederholung steuern 316Position des Hintergrundbilds bestimmen 317Größe des Hintergrundbilds verändern: background-size 318Fixiert beim Scrollen: background-attachment 319Kürzer mit background 320Mehr Optionen bei Hintergrundbildern 321Bildschirmfüllendes Hintergrundbild 322Farbverläufe erstellen 323Grundprinzip von Farbverläufen 323Variationen für Farbverläufe 324HTML-Bilder mit CSS bearbeiten 325object-fit – Größenanpassung von HTML-Bildern 325Filter for the world 326Schöner Hover-Effekt bei Bildern 327Kurzgefasst 329Teil Iv Css Für Layouts 331Kapitel 14 Bilder floaten, Elemente positionieren und Mehrspaltensatz nutzen 333Bilder und Bereiche umfließen lassen 333clear – Floaten aufheben 336Gefloatete Elemente umschließen 337Inhalte nicht rechteckig umfließen 338In Position 341position: absolute 343position: relative 345Vorhang auf für die Kombi: relative + absolute Positionierung 346Halbtransparente Bildbeschriftung auf einem Bild 347position: fixed – Footer unten festkleben 349position: sticky – scrollen und dann feststehen 350Präfixe – was sind sie und wenn ja, wie viele? 351Multicolumn – Spaltensatz 352Kurzgefasst 354Kapitel 15 Flexbox – Navigationsleisten und einfache Layouts erstellen 355Flexbox für Layouts und Navigationsleisten 355Einstieg in Flexbox 356Flexbox-Konzepte 357Zwischenräume definieren 358display: inline-flex 359Elemente mit Flexbox ausrichten 360Leerraumverteilung auf der querenden Achse: align-items 360Leerraumverteilung auf der Hauptachse: justify-content 362Element horizontal und vertikal zentrieren 363Anordnen mit verschachtelten Flexboxen 364Navigation mit Flexbox realisieren 366Horizontale Navigation definieren 366Zweigeteilte Navigation – Elemente mit margin anordnen 369Weitere Flexbox-Techniken 369Geänderte Reihenfolge dank order 370Flexible Ausmaße 370Mehrzeilig/-spaltig mit flex-wrap 371Kurzgefasst 373Kapitel 16 Gridlayout – Rasterlayouts zum Verlieben 375Rasterlayouts leicht gemacht mit Gridlayout 375Grundfunktion von Gridlayout 376Richtiges Rasterlayout 379Fortgeschrittene Techniken 383Überlappungen und Lücken 383Gridlayout mit benannten Bereichen 384Voll flexibles Raster 386Ausrichten mit Gridlayout und Abstände zwischen Rasterzellen 389Kurzgefasst 391Kapitel 17 Responsives Webdesign 393Responsiv – das Wesentliche 393So fing alles an 393Alternativen zum responsiven Webdesign 394Bestandteile des responsiven Webdesigns 396Viewport-Meta- Angabe 396Klassische Medienangaben 398Media Queries für responsive Webseiten 400Breakpoints – woher nehmen oder stehlen? 403Mehr Abfragen 404Responsive Layouts 405Einfaches responsives Layoutbeispiel 405Dreispaltiges responsives Layout mit Flexbox 406Responsives Layout mit Gridlayout 408Komponenten auf responsiv trimmen 410Bilder im responsiven Webdesign 410Responsives Formular 411Navigation responsiv machen 416Responsiv ohne Media Queries 421Die dunkle Seite: Dark Mode 421prefers-color- scheme 422Dark Mode mit Custom Properties 422Container Queries 424Kurzgefasst 426Kapitel 18 Responsive Bilder 427Ansprüche an responsive Bilder 427Hochauflösende Displays 428Unterschiedliche Bilder je nach Layout und Viewport 431Art Direction: Nicht nur für Künstler 434Verschiedene Bildformate 436Alle zusammen 436Und die Browser? 437Kurzgefasst 437Teil V Top-Ten- Teil 439Kapitel 19 Wenn der Browser nicht das macht, was er soll 4411 Willkommen im Club 4412 HTML-Fehler aufspüren 4413 CSS-Fehler aufspüren 4414 Verknüpfungen überprüfen 4425 Bilder zur Anzeige bewegen 4426 Probleme mit einem Hintergrundbild beheben 4437 Dokumentstruktur prüfen 4438 Browserunterstützung prüfen 4439 Fallbacklösungen für ältere Browser 44410 Sonderangaben für die modernen Browser 444Kapitel 20 Die wichtigsten Tipps zur Suchmaschinenoptimierung 4451 Seite für Leser erstellen und nicht für Suchmaschinen 4452 Passende und eindeutige Seitentitel 4453 Beschreibung bei meta 4464 Seite mit Überschriften strukturieren 4465 Klare Navigation mit einfachen URLs 4466 Aussagekräftige Linktexte 4467 Bilder mit aussagekräftigen Dateinamen und alt-Texten 4478 Auch für Smartphones und Co 4479 Google-/ Bing-Tools etc nutzen 44710 Noch mehr Tipps 447Kapitel 21 Zehn Dinge, die Sie nicht gedacht hätten, dass sie mit CSS gehen 4491 Mauszeiger ändern 4492 Animationen definieren 4493 Animationen anwenden 4504 Wenn Sie Animationen definieren … 4505 Smooth Scrolling 4506 Text mit Farbverlauf 4517 Überblendeffekte 4518 Transformationen in 3D 4519 Lustige Formen schnipseln mit clip-path 45210 Karomuster definieren mit Farbverläufen 452Kapitel 22 Die 10 besten Generatoren für faule Coder 4551 Farbverläufe 4552 Kleckse für alle 4563 Ungewöhnliche Formen schnipseln 4564 Coole mehrfache Schatten 4575 Filtereffekte 4596 Ungewöhnliche Ecken 4597 Trennlinien aufgehübscht 4608 Voll schräg 4619 Farbschattierungen 46110 Passende Schriftgrößen 462Stichwortverzeichnis 463