Florence Maurice

Webthemen

HTML & CSS - dummies

HTML & CSS für dummies
Der Einstieg in die Erstellung von Webseiten
wiley.verlag 2019,
428 S., 24,99 €

Florence Maurice: HTML & CSS für dummies

Mein erstes CSS-Buch habe ich im Jahre 2005 geschrieben; das waren wirklich andere Zeiten damals! Nun habe ich ein neues Einstiegsbuch verfasst – dieses Mal ein “HTML und CSS für Dummies”. Es war eine Herausforderung auf gut 400 Seiten das Wichtigste unterzubringen, was man wissen muss, wenn man aktuell Webseiten erstellt. Alle wichtigen Themen werden behandelt – von den HTML5-Grundlagen, über Links, Bilder (inklusive SVG-Bilder), Videos, Pfadangaben bis hin zu grundlegenden und fortgeschrittenen Formatierungen (inklusive responsives Webdesign, Flexbox und Gridlayout). Wichtig war mir dabei, die aktuellen Entwicklungen zu berücksichtigen. Und es gibt jede Menge praktische Beispiele, an denen man alles direkt ausprobieren kann. Probelesen:

Was alles drinnen ist – die Langform: (Achtung Spoiler!)

Kapitel 1 „Ziemlich beste Freunde: HTML und CSS“ führt Sie in die Welt von HTML und CSS ein. Sie erfahren, warum Sie genau dieses Dreamteam brauchen und was es mit HTML und CSS auf sich hat.

Kapitel 2 „Beispiel für das HTML/CSS-Team“ zeigt Ihnen anhand einer echten kleinen Beispielsite das Grundprinzip von HTML und CSS. Bei diesem Beispiel können Sie „Blut lecken“ – ohne dass Sie in alle Details einsteigen müssen. Die Details finden Sie dann in den folgenden Kapiteln.

Kapitel 3 „Fremden Code untersuchen, eigenen besser verstehen“ zeigt Ihnen das universelle Tool, das Sie nutzen können, wenn Sie eine bestehende Seite modifizieren möchten oder verstehen wollen, warum etwas funktioniert oder eben nicht funktioniert.

In Kapitel 4 geht es „Ab ins Internet“ mit Tipps, wie Sie Ihre Website ins Internet bringen und gängige Fehler vermeiden.

Kapitel 5 „Gut strukturiert ist halb gewonnen“ zeigt Ihnen nun detailliert zentrale Grundprinzipien von HTML sowie alle wichtigen Elemente zur Strukturierung: von Absätzen über Überschriften bis hin zu Listen und Grobstrukturierungselementen wie nav und main.

In Kapitel 6 „Bilder und Videos“ wird’s bunter: Sie sehen, wie Sie Bilder (inklusive SVG-Bildern) einsetzen und Videos (eigene oder auch von Youtube) auf Ihre Webseite bringen.

Kapitel 7 „Links und Pfade“ führt Sie auf geradem Weg durch den Dschungel von Pfadangaben und der Erstellung von Links: Neben klassischen Links geht es auch um Links auf E-Mail-Adressen oder Telefonnummern.

Haben Sie Kapitel 8 „Tabellen und Formulare“ hinter sich gebracht, wissen Sie, wie man Formulare erstellen kann, dass sie auch auf Smartphones gut nutzbar sind. Außerdem sehen Sie, wie Sie tabellarische Daten über Tabellen strukturiert ausgeben lassen.

Kapitel 9 „HTML und CSS zusammenbringen“ führt Sie ein in die Welt der Formatierungen über CSS. Sie lesen, wie Sie CSS-Dateien mit HTML verknüpfen und Elemente für die Formatierung auswählen. Mit dabei sind Selektoren wie :nth-child() oder :target.

Kapitel 10 „CSS: Farben, Maßeinheiten und Vererbung“ erklärt Ihnen vertiefend die Möglichkeiten Farben in CSS anzugeben (inklusive halbtransparenter Angaben). Hier wird es auch um Maßeinheiten wie rem, vw gehen, die sich gut für flexible Webseiten nutzen lassen. Vererbung wiederum ist ein besonderes Konzept in CSS, das Ihnen eine Menge CSS-Code-Tipperei erspart.

Kapitel 11 „Schriften, Absätze und Listen formatieren“ verrät Ihnen, wie Sie coole Schriften dank Webfonts einsetzen, mit Textschatten zaubern, die Unterstreichung von Links entfernen, Absätze ausrichten und Listen formatieren.

Kapitel 12 „Kästchen messen“ zeigt, wie Sie die Ausmaße von Elementen steuern und Abstände definieren, Buttons mit animierten Hovereffekten aufpeppen und sogar Elemente drehen.

Kapitel 13 „Hintergrundbilder und Farbverläufe“ befasst sich mit Hintergrundbildern in CSS; Sie sehen, wie Sie bei Bedarf die Position oder auch die Größe eines Bilds verändern – wichtig beispielsweise für ein bildschirmfüllendes Hintergrundbild. Ein weiteres Thema sind rein über CSS erzeugte Farbverläufe.

Kapitel 14 „Bilder floaten, Elemente positionieren“ vermittelt Ihnen Techniken, um Elemente nebeneinander zu platzieren: Sie erfahren, wie Sie beispielsweise Text um Bilder fließen lassen (und was für Besonderheiten es dabei gibt) oder wie Sie die Eigenschaft position nutzen – etwa um einen halbtransparenten Balken mit einer Beschriftung auf einem Bild zu platzieren. Außerdem lernen Sie, wie Sie ein Fußzeile realisieren, die immer unten bleibt, warum position: sticky cool ist und wie Sie CSS für Mehrspaltensatz nutzen.

Kapitel 15 „Flexbox und Gridlayout“ führt Sie in die beiden mächtigen Techniken zur Layouterstellung ein: Sie erstellen eine Navigation in vielen Variationen und verstehen dadurch – hoffentlich –, warum alle von Flexbox so begeistert sind. Daneben geht es um die Frage, wie msn Elemente zentriert und vollständige komplexe Layouts mit Gridlayout hinzaubert – inklusive flexibler Raster, bei denen der Browser die jeweils benötigte Anzahl an Spalten und Zeilen selbst ermittelt.

Kapitel 16 „Responsives Webdesign“ behandelt die heute gängigen Techniken für Layouts, die sich an alle Bildschirmgrößen anpassen – sodass die Darstellung beispielsweise einspaltig auf einem Smartphone ist und mehrspaltig bei mehr verfügbarem Platz, etwa auf einem Notebook. Außerdem können Sie die Erstellung eines responsiven Formulars und einer Klappnavigation (Hamburger lässt grüßen) verfolgen.

Kapitel 17 „Responsive Bilder“: Hier geht es darum, Bilder so einsetzen, dass sie auf responsiven Seiten optimal funktionieren. Sie wissen dann, wie Sie besondere Bilder für hochauflösende Displays zur Verfügung stellen oder auf kleinen Geräten nur einen Bildausschnitt mit der wesentlichen Information anzeigen lassen.

Top Ten liefert Ihnen … genau eine Auswahl wichtiger Hacks: