Details

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

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.

DE