Einleitung

Schön, dass Sie HTML und CSS lernen möchten. Das ist eine gute Entscheidung, denn HTML und CSS sind die Basis aller Webseiten. Und das Web ist allgegenwärtig - man surft mit Notebooks gleichermaßen wie mit Tablets und Smartphones und überall - im Büro, in der U-Bahn oder auf der Couch.

Über dieses Buch

Sie können das Buch von vorne bis hinten durchlesen, Sie können sich aber auch die Rosinen beziehungsweise Themen herauspicken, die Sie interessieren. Sie haben HTML vor längerer Zeit gelernt, brauchen jetzt eine Auffrischung und wollen wissen, was es Neues gibt? Dann überfliegen Sie doch die einzelnen Kapitel und bleiben da hängen, wo Ihnen etwas unbekannt vorkommt. Beispielsweise kennen Sie vielleicht noch das picture-Element für responsive Bilder? Details dazu in Kapitel 18. Sie wissen nicht, welche neuen Möglichkeiten für Formulare einsatzbereit sind? Kapitel 8 liefert neben einer Einführung in Formulare auch einen Überblick über neue input-Typen. Sie wollen in die neuen Layouttechniken Flexbox und Gridlayout einsteigen? Dann werden Sie die Kapitel 16 und Kapitel 17 interessieren.

Wenn Ihnen die letzten Sätze spanisch vorkommen - überhaupt kein Problem! Sie erfahren Schritt für Schritt, was es mit all diesen Dingen auf sich hat. Es sind keinerlei HTML-Kenntnisse erforderlich - alles, was Sie über die Erstellung von Webseiten wissen müssen, erfahren Sie in diesem Buch.

Falls die Listings im eBook-Display nicht gut lesbar sind oder nicht korrekt dargestellt werden, empfehlen wir Ihnen, sich die Beispieldateien von der Webseite des Buches herunterzuladen: www.wiley-vch.de/9783527720149

Konventionen in diesem Buch

Das Buch führt Sie in die spannende Welt von HTML und CSS ein, das heißt, Sie lernen die Techniken kennen, aus denen Webseiten bestehen.

HTML- oder CSS-Code-Beispiele erkennen Sie an einer besonderen Schrift.

<code>Ich bin cooler Code</code>

Diesen Code geben Sie in Ihrem Editor ein. Übrigens: In Kapitel 1 erfahren Sie, warum Sie einen Editor brauchen und welchen Sie nehmen können. Codebeispiele können auch im Text stehen. Das sieht dann <strong>soooo</strong> aus.

Was Sie nicht lesen müssen

Sie können das Buch von Seite 1 bis Seite 462 durchlesen, genauso dürfen Sie sich aber auch die Kapitel raussuchen, die Sie am meisten interessieren, und damit beginnen.

In allen Kapiteln finden Sie Hinweise, die eher technische Hintergrundinformationen sind. Diese können Sie getrost überspringen, ohne dass Sie oder Ihre Webseiten größeren Schaden davontragen werden. Diese technischen Infos sind wie folgt gekennzeichnet:

Hier stehen Hintergrundinfos, die Sie überspringen dürfen. Schön, dass Sie das hier aber trotzdem gelesen haben

Törichte Annahmen über die Leser

Weil Sie gerade dieses Buch in Händen halten und nicht eines über Meditationstechniken, Haarpflege oder Meerschweinchenzucht, gehe ich davon aus, dass Sie Webseiten erstellen und die dazu notwendigen Techniken - HTML und CSS - lernen möchten. Oder dass Sie Ihre Kenntnisse vertiefen und auffrischen möchten. Damit das gut klappt, sollten Sie sich mit Ihrem PC oder Mac so weit angefreundet haben, dass Sie wissen, wie man Ordner und Dateien anlegt, Programme installiert und im Internet surft. Hilfreich ist es auch, wenn Sie keine Phobie vor <spitzen> und {geschweiften} Klammern haben. Das war übrigens die Probe aufs Exempel - wenn Ihnen der letzte Satz kein allzu großes Unbehagen bereitet hat, leiden Sie wahrscheinlich nicht an einer Klammerphobie.

Browser, die die Webseiten darstellen, sind mitunter echte Erbsenzähler. Das heißt, Sie müssen manche Angaben exakt auf eine bestimmte Art schreiben und schon eine kleine Abweichung kann bewirken, dass ein bockiger Browser mault: »Mach ich nicht.« Sie erfahren natürlich in diesem Buch viele Tricks, wie man mit solchen Fällen umgeht und Fehler aufspürt. Gut ist aber, wenn Sie sich darauf einlassen können, dass es eben bestimmte Regeln gibt, die es bei der Erstellung von Webseiten zu beachten gibt, und wenn es Ihnen auch nichts ausmacht, bei manchen Kleinigkeiten und Formalia ebenfalls pingelig zu sein.

Wie dieses Buch aufgebaut ist (Achtung Spoiler!)

Teil I: Die absoluten Basics

Kapitel 1 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 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 stellt Ihnen das universelle Tool vor, 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.

Teil II: HTML - alles Wichtige

Kapitel 5 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 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 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 hinter sich gebracht, wissen Sie, wie man Formulare so erstellen kann, dass sie auch auf Smartphones gut nutzbar sind. Außerdem sehen Sie, wie Sie tabellarische Daten über Tabellen strukturiert ausgeben lassen.

Teil III: Losstarten mit CSS

Kapitel 9 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 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 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 zeigt, wie Sie die Ausmaße von Elementen steuern und Abstände definieren, Buttons mit animierten Hover-Effekten aufpeppen und sogar Elemente drehen. Kapitel 13 befasst sich mit Hintergrundbildern in CSS; Sie sehen, wie Sie bei Bedarf die Position oder auch die Größe eines Bildes 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.

Teil IV: CSS für Layouts

Kapitel 14 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 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 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 behandelt die heute gängigen Techniken für Layouts, die sich an alle Bildschirmgrößen anpassen - sodass die...