Florence Maurice

Webthemen

HTML & CSS - dummies

HTML & CSS für dummies
Der Einstieg in die Erstellung von Webseiten
wiley.verlag 2022,
480 S., 27,00 €

bestellen

Florence Maurice: HTML & CSS für dummies

Mein Einstiegsbuch zu HTML und CSS – aktualisiert und rundumerneuert. 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, Längeneinheiten 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 „Bilder mit CSS einbinden und formatieren“ 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, die linear, radial oder sogar konisch sein können. Außerdem sehen Sie, wie Sie mit HTML eingebundene Bilder per CSS bearbeiten: ein Beispiel zeigt, wie Sie ein Bild beim Hovern zoomen und mit einem Filtereffekt versehen.

Kapitel 14 „Bilder floaten, Elemente positionieren und Mehrspaltensatz nutzen“ 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 eine Fußzeile realisieren, die immer unten bleibt, warum position: sticky cool ist und wie Sie CSS für Mehrspaltensatz nutzen.

Kapitel 15 „Flexbox – Navigationsleisten und einfache Layouts erstellen“ führt Sie in die mächtige Technik zur flexiblen Anordnung von Elementen ein. Flexbox. Sie sehen, wie Sie Navigationen geschickt erstellen und Elemente horizontal und vertikal zentrieren.

Kapitel 16 „Gridlayout – Rasterlayouts zum Verlieben“ zeigt Ihnen, wie Sie Raster mit CSS definieren und das für Layouts nutzen. Ich persönlich bin ein bisschen in Gridlayout verliebt – vielleicht gefällt es Ihnen ja auch.

Kapitel 17 „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. Zudem sehen Sie, wie Sie eine Website an den Dark Mode anpassen und werfen sogar einen Blick auf die Container Queries. Jede Menge Praxisbeispiele also.

Kapitel 18 „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: