Cover: HTML & CSS für Dummies by Florence Maurice

HTML & CSS für Dummies

Schummelseite

Title page image

HTML & CSS für Dummies

Bibliografische Information der Deutschen Nationalbibliothek

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

1. Auflage 2019

© 2019 WILEY-VCH Verlag GmbH & Co. KGaA, Weinheim

All rights reserved including the right of reproduction in whole or in part in any form. This book published by arrangement with John Wiley and Sons, Inc.

Copyright der englischsprachigen Originalausgabe © 2019 by Wiley Publishing, Inc. Alle Rechte vorbehalten inklusive des Rechtes auf Reproduktion im Ganzen oder in Teilen und in jeglicher Form. Diese Buch wird mit Genehmigung von John Wiley and Sons, Inc. publiziert.

Wiley, the Wiley logo, Für Dummies, the Dummies Man logo, and related trademarks and trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries. Used by permission.

Wiley, die Bezeichnung »Für Dummies«, das Dummies-Mann-Logo und darauf bezogene Gestaltungen sind Marken oder eingetragene Marken von John Wiley & Sons, Inc., USA, Deutschland und in anderen Ländern.

Das vorliegende Werk wurde sorgfältig erarbeitet. Dennoch übernehmen Autoren und Verlag für die Richtigkeit von Angaben, Hinweisen und Ratschlägen sowie eventuelle Druckfehler keine Haftung.

Coverfoto: kaiwaterfield – stock.adobe.com
Korrektur: Isolde Kommer

Print ISBN: 978-3-527-71585-5
ePub ISBN: 978-3-527-82125-9

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 bzw. 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 Sie da hängen, wo Ihnen etwas unbekannt vorkommt. Beispielsweise kennen Sie vielleicht noch nicht das picture-Element für responsive Bilder? Details dazu in Kapitel 17. 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.

Wenn Ihnen die letzten beiden 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 im Buch.

Konventionen in diesem Buch

Das Buch führt Sie in die spannende Welt von HTML und CSS ein, d. h. Sie lernen die Techniken kennen, mit denen Webseiten entwickelt werden.

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

<code>Ich bin cooler Code</code>

Diesen Code geben Sie in Ihren 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 421 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:

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

Törichte Annahmen über den 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 möchten 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 soweit 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 gilt, und wenn es Ihnen auch nichts ausmacht, bei manchen Kleinigkeiten und Formalia ebenfalls pingelig zu sein.

Wie dieses Buch aufgebaut ist (Achtung Spoiler!)

Wie jedes »…für Dummies« Buch ist auch dieses in mehrere Teile aufgeteilt, genau genommen sind es derer fünf. Die will ich Ihnen jetzt kurz vorstellen:

Teil I Die absoluten Basics

Dieser Teil führt Sie in die Welt von HTML und CSS ein – Sie erfahren, warum Sie dieses Dream-Team brauchen und was es damit auf sich hat. Die genaue Funktionsweise von HTML und CSS sehen Sie anhand eines echten kleinen Beispiels, außerdem erhalten Sie Tipps, wie Sie Seiten untersuchen können und Ihre Webseiten ins Internet befördern.

Teil II HTML – alles Wichtige

Teil Nummer 2 liefert Ihnen alle wichtigen Informationen zu HTML: Sie lernen Strukturierungselemente wie Absätzen, Listen und Navigationsbereiche kennen, erfahren, wie Sie richtig verlinken, mit Pfaden umgehen und Bilder und Videos einsetzen. Ein weiteres Thema ist die Präsentation von Daten über Tabellen und benutzerfreundlichere (sowie Smartphone-freundliche) Formulare.

Teil III Losstarten mit CSS

Dieser Abschnitt bietet Ihnen einen detaillierten Einstieg in die Formatierungen mit CSS: Sie lernen, HTML-Dateien mit CSS zu verknüpfen, Elemente gezielt auszuwählen, Farben festzulegen und die Schrift zu gestalten (inklusive Webfonts). Außerdem geht es darum, wie Sie die Ausmaße von Elementen bestimmen und geschickt mit Hintergrundbildern hantieren – mit dabei die per CSS erzeugten Farbverläufe.

Teil IV CSS für Layouts

Teil IV schließlich verrät Ihnen alle wichtigen CSS-Techniken für Layouts: von klassischen Eigenschaften wie float und position bis hin zu den neuen CSS-Layoutmodulen Flexbox und Gridlayout. Am Schluss sehen Sie, wie Sie responsive Webseiten gestalten, die sich an alle Bildschirmgrößen – Smartphone, Tablet oder Notebook – anpassen, und wie Sie für die verschiedenen Geräte optimierte Bilder bereitstellen.

Teil V Der Top-Ten-Teil

Die Top-Ten-Listen am Ende des Buchs präsentieren wichtige Hacks, unter anderem dazu, wie man störrische Browser zur Mitarbeit überredet und was die wichtigsten Schritte für die Suchmaschinenoptimierung sind.

Symbole, die in diesem Buch verwendet werden

Wie in anderen »… für Dummies«-Büchern finden Sie auch in diesem Buch Symbole, die Textstellen besonders hervorheben.

image So markiert lesen Sie Tipps, die Ihnen helfen, HTML & CSS erfolgreich zu nutzen.

image Wenn Sie an einer Stelle besonders aufpassen müssen, weist Sie dieses Zeichen darauf hin.

image Hintergrundinformationen sind so gekennzeichnet. Sie können sie lesen, können es aber auch sein lassen.

Wie es weitergeht

Noch ein Tipp zum Schluss: Wo immer möglich, sollten Sie die Beispiele austesten – Sie finden sie unter www.wiley-vch.de/publish/dt/books/ISBN978-3-527-71585-5 zum Download – und/oder auch selbst schreiben. Dann profitieren Sie am meisten davon.

Damit wissen Sie alles, was Sie wissen müssen – und können loslegen mit Ihrer ersten Webseite. Vorhang auf für HTML & CSS. Ich wünsche Ihnen viel Erfolg und hoffe, Sie haben auch Spaß dabei!

Teil I

Die absoluten Basics

image