„HTML und CSS: Das umfassende Handbuch“ von Jürgen Wolf ist 2023 in der 5., aktualisierten und überarbeiteten Auflage im Rheinwerk Verlag erschienen und umfasst 1124 Seiten.
Das Buch „HTML und CSS: Das umfassende Handbuch“ vermittelt in insgesamt 26 Kapiteln sowohl Grundlagen als auch vertiefendes Wissen, kann aber aufgrund der Komplexität des Themas nicht jeden Bereich in Gänze beleuchten und auf manches auch gar nicht eingehen. Dennoch deckt es eine große Bandbreite an Themen ab und ist als Nachschlagewerk bestens geeignet.
Kapitel 1 – Einführung in das HTML-Universum geht zunächst darauf ein, was den Leser erwartet. Angesprochen werden sämtliche Zielgruppen: vom Einsteiger über den Entwickler bis hin zum Programmierer oder Blogger.
Kapitel 2 – Grundlegender Aufbau von HTML(-Dokumenten) befasst sich mit der grundlegenden Syntax und dem Aufbau von HTML als Auszeichnungssprache. Außerdem geht es um die einzelnen Bestandteile, aus denen ein klassisches HTML-Dokument besteht.
Kapitel 3 – Die Kopfdaten eines HTML-Dokuments konzentriert sich auf den Bereich zwischen <head> und </head>, in dem alle wichtigen Informationen und Daten über ein HTML-Dokument enthalten sind, die von Webbrowsern oder Suchmaschinen verwendet werden.
Kapitel 4 – Der sichtbare Bereich eines HTML-Dokuments thematisiert die darstellbaren HTML-Elemente, die zwischen <body> und </body> verwendet werden können. Der Leser lernt, dass das Gestalten von Webseiten nicht über HTML, sondern über CSS geschieht.
Kapitel 5 – Tabellen und Hyperlinks stellt weitere HTML-Elemente vor. Der Leser erfährt, wie er Tabellen und Hyperlinks erstellen und verwenden kann.
Kapitel 6 – Grafiken und Multimedia beschäftigt sich mit der Frage, wie dem HTML-Dokument Grafiken, Videos und andere multimediale Inhalte hinzugefügt werden können.
Kapitel 7 – HTML-Formulare und interaktive Elemente widmet sich dem Thema Web-Formulare. Als Beispiele nennt der Autor u. a. Umfrage-Formulare, in denen aus einer Liste von bestimmten Einträgen etwas ausgewählt werden kann.
Kapitel 8 – Einführung in Cascading Stylesheets (CSS) erläutert, was CSS genau ist, und stellt anhand von einfachen Beispielen dessen Anwendungsprinzip vor.
Kapitel 9 – Die Selektoren von CSS gibt Tipps für den praktischen Einsatz einer Vielzahl von Selektoren.
Kapitel 10 – Die Vererbung und die Kaskade beschäftigt sich mit einer Technik, die es ermöglicht, verschiedene CSS-Eigenschaften wie Farben, Schriftart und Schriftgröße einmalig an einer zentralen Stelle zu definieren, anstatt jedem einzelnen Element immer wieder dieselben Eigenschaften zuweisen zu müssen.
Kapitel 11 – Das Box-Modell von CSS widmet sich dem Positionieren von Elementen sowie dem Erstellen von Layouts, was beides mittels Box-Modell, auch Kastenmodell genannt, umsetzbar ist. Neben dem klassischen Box-Modell lernt der Leser auch das neue und intuitivere Box-Modell von CSS kennen.
Kapitel 12 – CSS-Positionierung vermittelt, wie man HTML-Elemente bzw. die Boxen mit CSS positionieren kann.
Kapitel 13 – Flexboxen richtet sich an Entwickler, die flexiblere und dynamischere Website-Layouts erstellen wollen, die auf verschiedenen Bildschirmgrößen und Geräten funktionieren. Elemente können innerhalb eines Container-Elements in einer einzigen Dimension angeordnet werden – entweder horizontal oder vertikal.
Kapitel 14 – Responsives Webdesign und Media Queries beschäftigt sich mit einer Gestaltungstechnik für Websites, bei der sich das Layout und die Inhalte automatisch an verschiedene Bildschirmgrößen und Geräte anpassen.
Kapitel 15 – CSS Grid befasst sich mit einer Technologie zur Erstellung komplexer und flexibler Designs, die auf verschiedene Bildschirmgrößen reagieren. Inhalte können in Raster- oder Gitterstrukturen platziert und Elemente präzise positioniert werden.
Kapitel 16 – Stylen mit CSS klärt die Frage, wie Texte, Listen, Tabellen und Bilder schöner oder lesbarer gemacht werden können, und knüpft an die Grundlagen wie die Selektoren, das Box-Modell, die Positionierung, die Flexboxen, die Media Queries und CSS Grid an.
Kapitel 17 – Der CSS-Präprozessor Sass und SCSS erklärt, wie immer wiederkehrende CSS-Schreibarbeiten vermieden werden können, und stellt Sass als CSS-Präprozessor näher vor.
Kapitel 18 – Eine kurze Einführung in JavaScript stellt die Programmiersprache JavaScript näher vor und thematisiert, dass sie im Zusammenhang mit der Webentwicklung häufig in einem Atemzug mit Ajax, Angular und React genannt wird.
Kapitel 19 – Arrays, Funktionen und Objekte in JavaScript beschäftigt sich mit Objekten, welche die Hauptdatentypen in JavaScript sind, sowie der objektorientierten Programmierung.
Kapitel 20 – Webseiten dynamisch ändern thematisiert DOM und die DOM-Manipulation (DOM = Document Object Model). Zusammen mit JavaScript lässt sich HTML damit dynamisch erzeugen.
Kapitel 21 – Einführung in die Web-APIs (Browser-APIs) erklärt, dass es eine Vielzahl von Browser-APIs gibt: für die Manipulation des DOM, für Netzwerkanfragen, für die Verwaltung des clientseitigen Speichers, für das Steuern von Audio oder Video und vieles mehr.
Kapitel 22 – Eine Einführung in Ajax und die Fetch-API beleuchtet das Konzept der asynchronen Datenübertragung mittels Ajax.
Kapitel 23 – Das Bootstrap-Framework einsetzen gibt einen kleinen und zugleich praktischen Einblick in die Verwendung des beliebten Frameworks.
Kapitel 24 – Einführung in die grundlegenden Konzepte von React setzt Kenntnisse in HTML, CSS und JavaScript voraus und stellt die JavaScript-Bibliothek React vor.
Kapitel 25 – Einführung in die grundlegenden Konzepte von Angular widmet sich dem Framework Angular, das für die Entwicklung von Web-Applikationen für den Desktop sowie den mobilen Bereich entwickelt wurde.
Kapitel 26 – Beispielprojekt erstellen, testen und optimieren demonstriert anhand eines einfachen Beispielprojekts, wie der Arbeitsablauf von der Idee bis hin zur eigenen Web-Präsenz aussehen könnte und wie sich die Website testen und optimieren lässt.
Beispiel-Code 1 (HTML): Textrichtung ändern
Manchmal ist es erforderlich, die Textrichtung zu ändern – etwa wenn Text von rechts nach links geschrieben werden soll (z. B. bei Hebräisch oder Arabisch). Das lässt sich mit dem bdo-Element umsetzen (bdo = bidirectional override).
Der folgende Code-Ausschnitt zeigt ein Palindrom, eingebettet zwischen <bdo> und </bdo>. Zunächst wird das globale HTML-Attribut dir verwendet. Anschließend wird die Textausrichtung mit dem Attributwert rtl (right to left) so geändert, dass der Text von rechts nach links verlaufen soll (ltr = left to right würde Text von links nach rechts schreiben).
|
1 |
<p><bdo dir=„rtl“>Ein Esel lese nie</bdo></p> |
In der visuellen Ansicht sieht das dann wie folgt aus:
ein esel lesE niE
Beispiel-Code 2 (HTML mit CSS): Typselektoren
Das folgende Beispiel demonstriert, wie man HTML-Elemente mit dem Typselektor auswählt und mit CSS formatiert.
Folgende Zeilen zeigen den Typselektor im Einsatz in einer separaten CSS-Datei:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
section { width: 100%; display: flex; flex-direction: row; } article { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); width: 30%; margin: 10px; padding: 5px; font-size: 2.5vw; text-align: center; } img { width: 100%; } |
Zunächst wird definiert, dass sich ein section-Element um 100 Prozent ausbreiten darf. Die darin enthaltenen HTML-Elemente werden in eine Flexbox gepackt, in der die Elemente horizontal in der Reihe ausgerichtet sind.
Um das article-Element soll ein Rahmen in Form eines Schattens gezogen werden. Die einzelnen Artikel-Elemente dürfen sich innerhalb ihres übergeordneten Elements um 30 Prozent ausbreiten. Der Abstand zu den nächsten Elementen beträgt 10px, der innere Abstand 5px. Die Schriftgröße soll stets 2,5vw betragen und ist von der Breite des Viewports abhängig. Der Inhalt soll zentriert formatiert werden.
Mit dem img-Element wird angegeben, dass sich der Inhalt um 100 Prozent ausbreiten darf.
Anschließend wird diese CSS-Datei style.css per link-Element im Kopf des HTML-Dokuments hinzugefügt:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
... <head> ... <link rel=„stylesheet“ href=„css/style.css“> </head> <body> <section> <article> <img src=“./bilder/avatar.svg“ alt=„Avatar“> <h4><b>Max Mustermann</b></h4> <p>Autor & Fotograf</p> </article> <article> <img src=“./bilder/avatar‑2.svg“ alt=„Avatar“> <h4><b>Elisa Mustermann</b></h4> <p>Fullstack-Entwicklerin</p> </article> </section> </body> ... |
Gemäß den CSS-Regeln werden die einzelnen HTML-Elemente mithilfe des entsprechenden Typselektors ausgewählt und nach den Deklarationen der Regel formatiert. Das Ergebnis sind im beschriebenen Beispielfall einfache Cards, also Karten, die in der visuellen Ansicht dann wie folgt aussehen:
Weiterführende Informationen
Fazit
„HTML und CSS: Das umfassende Handbuch“ von Jürgen Wolf ist das ideale Nachschlagewerk für alle, die (wieder) in das Thema HTML und CSS einsteigen, mehr über den Aufbau von Websites lernen sowie Quellcode lesen und verstehen wollen. Die Tatsache, dass HTML einerseits die Basissprache für die Website-Entwicklung ist und der Autor andererseits bei null anfängt, macht das Buch gerade für Anfänger interessant. Aber auch Wiedereinsteiger der „alten HTML-Schule“ werden angesprochen und können Neues zum aktuellen HTML5 lernen. Es wird auf die Abgrenzung zwischen HTML und CSS eingegangen und auch JavaScript als Web-Programmiersprache kommt nicht zu kurz. Als besonderes Highlight darf man sich auf viele praktische Code-Beispiele im Buch sowie auf der Verlagswebsite freuen.
Wichtig zu erwähnen ist, dass sich das Buch gezielt auf den Frontend-Bereich von Websites konzentriert. Wer sich also umfangreiches Wissen zum Backend und zur dafür benötigten Web-Programmiersprache PHP (oder Python, Rust, Java o. Ä.) erhofft, für den ist dieses Buch nicht geeignet, da PHP lediglich am Rande Thema ist.
