E-Book
ohne Abo 23,99 €

HTML & CSS für Dummies E-Book

Florence Maurice

0,0

23,99 €

Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.
Mehr erfahren.

Herausgeber: Wiley-VCH GmbH
Kategorie: Wissenschaft und neue Technologien
Serie: ...für Dummies
Sprache: Deutsch
Veröffentlichungsjahr: 2022

Beschreibung

Auch heute noch sind HTML und CSS die Basis aller Webseiten. Wer mehr möchte, als nur einen unflexiblen Website-Baukasten zu nutzen, kommt an beidem schwer vorbei. Egal, ob Sie eine Website komplett neu aufbauen oder ob Sie beim Einsatz eines Content-Management-Systems individuelle Anpassungen vornehmen möchten: Dieses Buch hilft Ihnen weiter. Florence Maurice erklärt Ihnen mit vielen Beispielen und Schritt für Schritt alle wichtigen Grundlagen, wie HTML funktioniert, wofür Sie CSS benötigen und wie Sie am Ende all dieses Wissen anwenden.

Details

Sie lesen das E-Book in den Legimi-Apps auf:

Android

iOS

von Legimi
zertifizierten E-Readern

Seitenzahl: 467

Bewertungen

0,0

Rezensionen(0 Rezensionen)

Leseprobe

HTML & CSS für Dummies

Schummelseite

HTML

HTML-Grundgerüst

<!doctype html>

<head>

</head>

<body>

</body>

</html>

Links erstellen

<a href="irgendwo.html">Klicken Sie mal</a>

Bei href steht der Pfad zur Datei, die aufgerufen werden soll. Klicken Sie mal ist der für den Benutzer sichtbare Text, der angeklickt werden soll. Achtung: Attribute wie href stehen immer nur im Start-Tag, nie im End-Tag.

Bilder einfügen

Bei src steht der Pfad zum Bild, bei alt ein Text, der gezeigt wird, wenn das Bild nicht angezeigt werden kann. width und height sollten der wirklichen Größe des Bildes in Pixeln entsprechen. img ist ein leeres Element, es hat kein End-Tag.

Liste mit Links

<ul>

</ul>

Elemente werden ineinander verschachtelt.

Falsch wäre:

Pfadangaben

Datei befindet sich im selben Ordner: dateiname.htmlDatei befindet sich im Unterordner geordnet: geordnet/dateiname.htmlDatei befindet sich einen Ordner höher: ../dateiname.htmlDatei befindet sich zwei Ordner höher: ../../dateiname.htmlDatei befindet sich im Parallelordner mit dem Namen inspiration: ../inspiration/dateiname.htmlGroß-/Kleinschreibung spielt eine Rolle!

Wichtige neue HTML5-Elemente/-Attribute

section – Bereicharticle – eigenständiger Inhaltnav – für die Hauptnavigationenmain – Hauptinhalt (nur einmal pro Dokument)aside – zusätzliche Infoheader – Kopfbereichfooter – Fußbereichfigure mit figcaption – Element mit Beschriftung (oft Bild)video für Videospicture für responsive Bilder »Art Direction«srcset-Attribut für Bilder für hochauflösende Displays oder unterschiedlich je nach Viewport/Layout

Formulare:

Inputvarianten wie type="email", type="url" (Webadresse), type="number" (Zahl), type="range" (ungefähre Zahl), type="tel" (Telefonnummer), type="color" (Farbwähler), type="date" (Kalender)Attribute wie required (obligatorisch), placeholder (Platzhaltertext), autofocus

CSS

Syntax

selektor {

eigenschaft: wert;

eigenschaft2: wert2;

}

Externes Stylesheet einbinden

Diese Angabe sollte innerhalb von <head> und </head> stehen.

Elemente auswählen

Typselektor:p { } wählt alle ...-Elemente aus

Klassenselektor:.beispiel { } wählt alle Elemente mit class="beispiel"

id-Selektor:#beispiel { } wählt das Element mit id="beispiel"

Joker: * { } wählt alle Elemente aus

Nachfahrenkombinator:p strong { } wählt alle strong-Elemente, die innerhalb von und stehen. Im folgenden Beispiel nur das fett Hervorgehobene:

Und da und dort

Formatierung von Links (Pseudoklassen) – kein Leerzeichen beim Doppelpunkt!

a:link {} – nicht besuchte Linksa:visited {} – besuchte Linksa:hover {} – Links beim Hoverna:focus {} – Links, die den Fokus (zum Beispiel per Klick mit -Taste) erhaltena:active {} – aktive Links (beim Klicken)

Inhalte mit CSS erzeugen (Pseudoelemente)

p::before { content: "*"; } erzeugt ein Sternchen am Anfang aller Absätze.

p::after { content: "!"; } erzeugt ein Ausrufezeichen am Ende aller Absätze.

Elemente aufgrund von Attributen auswählen (Attributselektoren)

input[type="submit"] – nur input-Elemente mit einem Attribut type="submit"

Media Queries

@media screen and (min-width: 23em) {}

Angaben in geschweiften Klammern gelten für Viewports mit Mindestbreite von 23em.

Wichtige Einheiten

px – Pixel für Bildgrößen in HTML, Rahmen etc.em – bezieht sich auf die aktuelle Schriftgröße, geeignet für Media Queries, Abständerem – bezieht sich auf die Schriftgröße des html-Elements – gut geeignet für Schriftgröße, Ausmaße% – Prozent, geeignet für flüssige Layoutsvh/vw/vmin/vmax – beziehen sich auf die Viewportgröße

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.

2. Auflage 2023

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: Casimiro – stock.adobe.comKorrektur: Petra Heubach-Erdmann

Print ISBN: 978-3-527-72014-9ePub ISBN: 978-3-527-84026-7

Über die Autorin

Florence Maurice ist ursprünglich (promovierte) Linguistin, hat dann aber begonnen, sich mit Programmiersprachen zu beschäftigen, und darin ihre große Leidenschaft gefunden. Bereits seit vielen Jahren arbeitet sie als Trainerin, Autorin und Programmiererin für Webthemen. Sie hat eine ganze Reihe erfolgreicher Webbücher geschrieben und publiziert regelmäßig in Fachzeitschriften. Zudem erstellt sie Videotrainings, insbesondere für LinkedIn Learning. Ihre Schulungen finden live oder online statt, an der Volkshochschule ebenso wie für große Unternehmen; ab und an kann man sie auch als Speakerin auf Konferenzen erleben.

Nebenbei ist sie als Lehrerin für Webthemen an einer Fernakademie tätig.

Kurz gesagt: Sie vermittelt Techniken rund ums Web auf die verschiedensten Arten. Allerdings realisiert sie auch selbst Webseiten, um ihre Kenntnisse stets aktuell zu halten und in der Praxis zu verfeinern.

HTML und CSS sind ihre Lieblingsthemen. Die immer neuen Möglichkeiten und Weiterentwicklungen im Web inspirieren sie und sie gibt ihr Wissen mit Freude und Begeisterung weiter. Und wenn ihre Arbeit (und ihre Familie) ihr mal ein bisschen mehr Zeit lassen, bloggt sie gern zu Webthemen unter https://maurice-web.de/blog/.

Inhaltsverzeichnis

Cover

Titelblatt

Impressum

Über die Autorin

Einleitung

Über dieses Buch

Konventionen in diesem Buch

Was Sie nicht lesen müssen

Törichte Annahmen über die Leser

Wie dieses Buch aufgebaut ist (Achtung Spoiler!)

Symbole, die in diesem Buch verwendet werden

Wie es weitergeht

Teil I: Die absoluten Basics

Kapitel 1: Ziemlich beste Freunde: HTML und CSS

Webseiten: vor dem Tunen ein Blick unter die Haube

Aufbrezeln mit CSS

Ausgezeichnet mit HTML

Browser: the two and only

Fundamental: HTML-Grundstruktur

CSS – auswählen, formatieren und los

Kurzgefasst

Kapitel 2: Beispiel für das HTML/CSS-Team

Gestatten: die Beispielsite

Der HTML-Code für die Beispielseite

HTML-Code der Startseite im Überblick

HTML-Code der zweiten Seite

Nun zum CSS-Code der zweiten Seite

Kurzgefasst

Kapitel 3: Fremden Code untersuchen, eigenen besser verstehen

Entwicklertools aufrufen

HTML-Code ansehen

CSS-Code untersuchen

Verhalten bei unterschiedlichen Bildschirmgrößen

Kurzgefasst

Kapitel 4: Ab ins Internet

Domain und Webspace

Hosting – Begriffe und Fakten

Dateien mit einem FTP-Programm übertragen

Fehler beheben und Probleme lösen

Kurzgefasst

Teil II: HTML – alles Wichtige

Kapitel 5: Gut strukturiert ist halb gewonnen

Kopf und Rumpf

Grundlegende Techniken

Texte unterteilen

Inline-Elemente

Struktur im Groben

Kurzgefasst

Kapitel 6: Bilder und Videos

Mehr als Worte: Bilder

Bewegt: Videos

iframes: die guten Frames

Was auf die Ohren: Audio

Object, embed und canvas!

Kurzgefasst

Kapitel 7: Links und Pfade

Verlinkungen

Pfade – von hier nach dort und wieder zurück

Kurzgefasst

Kapitel 8: Tabellen und Formulare

Von der Wiege bis zur Bahre – Formulare, Formulare, Formulare

Formulare – wichtige Basics

Informationen in Reih und Glied – Tabellen

Kurzgefasst

Teil III: Losstarten mit CSS

Kapitel 9: HTML mit CSS zusammenbringen

HTML und CSS verknüpfen

Kommentare – in CSS (im Unterschied zu HTML)

Die Qual der Wahl – Elemente auswählen

Voll pseudo: Pseudoklassen und Pseudoelemente

Das Recht des Stärkeren – Spezifität verstehen

Kurzgefasst

Kapitel 10: CSS: Farben, Längeneinheiten und Vererbung

Farben in CSS

Längenangaben

Spezielle Angaben

Vererbung und Standardwert – oder was gilt?

Fehlersuche

Kurzgefasst

Kapitel 11: Schriften wählen und Texte gestalten

Schrift formatieren

text-decoration zur Linkformatierung, aber nicht nur

Texte formatieren und ausrichten

Listen formatieren

Kurzgefasst

Kapitel 12: Richtig vermessen: die Ausmaße von Elementen

Ausmaße von Elementen

Außenabstand

box-sizing und die Gesamtgröße

Formvollendet – abgerundete Ecken und Schatten

Boxmodell bei Inline-Elementen ... und die Eigenschaft display

Elemente drehen, verschieben und skalieren

Kurzgefasst

Kapitel 13: Bilder mit CSS einbinden und formatieren

Hintergrundfarben und -bilder

Bildschirmfüllendes Hintergrundbild

Farbverläufe erstellen

HTML-Bilder mit CSS bearbeiten

Kurzgefasst

Teil IV: CSS für Layouts

Kapitel 14: Bilder floaten, Elemente positionieren und Mehrspaltensatz nutzen

Bilder und Bereiche umfließen lassen

In Position

Multicolumn – Spaltensatz

Kurzgefasst

Kapitel 15: Flexbox – Navigationsleisten und einfache Layouts erstellen

Flexbox für Layouts und Navigationsleisten

Elemente mit Flexbox ausrichten

Navigation mit Flexbox realisieren

Weitere Flexbox-Techniken

Kurzgefasst

Kapitel 16: Gridlayout – Rasterlayouts zum Verlieben

Rasterlayouts leicht gemacht mit Gridlayout

Fortgeschrittene Techniken

Voll flexibles Raster

Ausrichten mit Gridlayout und Abstände zwischen Rasterzellen

Kurzgefasst

Kapitel 17: Responsives Webdesign

Responsiv – das Wesentliche

Bestandteile des responsiven Webdesigns

Responsive Layouts

Komponenten auf responsiv trimmen

Responsiv ohne Media Queries

Die dunkle Seite: Dark Mode

Container Queries

Kurzgefasst

Kapitel 18: Responsive Bilder

Ansprüche an responsive Bilder

Hochauflösende Displays

Unterschiedliche Bilder je nach Layout und Viewport

Art Direction: Nicht nur für Künstler

Verschiedene Bildformate

Alle zusammen

Und die Browser?

Kurzgefasst

Teil V: Top-Ten-Teil

Kapitel 19: Wenn der Browser nicht das macht, was er soll

1. Willkommen im Club

2. HTML-Fehler aufspüren

3. CSS-Fehler aufspüren

4. Verknüpfungen überprüfen

5. Bilder zur Anzeige bewegen

6. Probleme mit einem Hintergrundbild beheben

7. Dokumentstruktur prüfen

8. Browserunterstützung prüfen

9. Fallbacklösungen für ältere Browser

10. Sonderangaben für die modernen Browser

Kapitel 20: Die wichtigsten Tipps zur Suchmaschinenoptimierung

1. Seite für Leser erstellen und nicht für Suchmaschinen

2. Passende und eindeutige Seitentitel

3. Beschreibung bei meta name="description"

4. Seite mit Überschriften strukturieren

5. Klare Navigation mit einfachen URLs

6. Aussagekräftige Linktexte

7. Bilder mit aussagekräftigen Dateinamen und alt-Texten

8. Auch für Smartphones und Co.

9. Google-/Bing-Tools etc. nutzen

10. Noch mehr Tipps

Kapitel 21: Zehn Dinge, die Sie nicht gedacht hätten, dass sie mit CSS gehen

1. Mauszeiger ändern

2. Animationen definieren

3. Animationen anwenden

4. Wenn Sie Animationen definieren ...

5. Smooth Scrolling

6. Text mit Farbverlauf

7. Überblendeffekte

8. Transformationen in 3D

9. Lustige Formen schnipseln mit clip-path

10. Karomuster definieren mit Farbverläufen

Kapitel 22: Die 10 besten Generatoren für faule Coder

1. Farbverläufe

2. Kleckse für alle

3. Ungewöhnliche Formen schnipseln

4. Coole mehrfache Schatten

5. Filtereffekte

6. Ungewöhnliche Ecken

7. Trennlinien aufgehübscht

8. Voll schräg

9. Farbschattierungen

10. Passende Schriftgrößen

Stichwortverzeichnis

End User License Agreement

Tabellenverzeichnis

Kapitel 5

Tabelle 5.1: Entities für Sonderzeichen

Tabelle 5.2: Wichtige Inline-Elemente

Kapitel 10

Tabelle 10.1: Längeneinheiten

Kapitel 12

Tabelle 12.1: Mehrere Werte bei padding (gilt ebenfalls zum Beispiel für margin)

Tabelle 12.2: Logische Werte

Kapitel 16

Tabelle 16.1: Ausrichtungen bei Gridlayout

Kapitel 17

Tabelle 17.1: Abfragbare Eigenschaften

Illustrationsverzeichnis

Kapitel 1

Abbildung 1.1: Quellcode in Firefox aufrufen

Abbildung 1.2: HTML-Quellcode

Abbildung 1.3: Menüleiste in Firefox anzeigen lassen

Abbildung 1.4: CSS deaktivieren

Abbildung 1.5: Webseite ohne CSS

Abbildung 1.6: Seitentitel im Tab sichtbar

Abbildung 1.7: Website des Editors Atom: Das Maskottchen ist schon mal knuddelig.

Abbildung 1.8: Atom: Ordner öffnen

Abbildung 1.9: Atom: Tabs schließen – das Kreuz erscheint, wenn man die Maus auf ...

Abbildung 1.10: Atom mit HTML-Grundgerüst

Abbildung 1.11: Die Webseite von Visual Studio Code: Wirkt bissche...

Abbildung 1.12: VS-Code-Symbol für Erweiterungen

Abbildung 1.13: VS Code: Neue Datei erstellen

Abbildung 1.14: VS Code: HTML-Grundgerüst

Abbildung 1.15: Windows: damit die Endung .html angezeigt wird

Abbildung 1.16: Das erste HTML-Dokument im Browser

Abbildung 1.17: Code hinzaubern mit Emmet

Abbildung 1.18: Seitenquelltext-Ansicht des Dokuments in Firefox

Abbildung 1.19: Ein kleiner Fehler: title ist nicht geschlossen.

Abbildung 1.20: Einmal spitze Klammer vertauscht

Abbildung 1.21: Ein Anführungszeichen vergessen, und schon klappt nix mehr.

Abbildung 1.22: Ausschnitt aus einem Stylesheet

Abbildung 1.23: CSS-Code

Abbildung 1.24: HTML-Dokument mit Link auf das Stylesheet

Abbildung 1.25: Gewinnt noch keinen Schönheitswettbewerb, aber zeigt deutlich: CS...

Kapitel 2

Abbildung 2.1: Startseite des Beispiels

Abbildung 2.2: Informationsseite

Abbildung 2.3: Bei kleinem Bildschirm nun einspaltig

Abbildung 2.4: Startseite ohne CSS

Abbildung 2.5: Den Seitentitel sehen Sie oben im Tab beim Browser.

Abbildung 2.6: Header mit Navigationslinks und Überschrift

Abbildung 2.7: Klassische Liste

Abbildung 2.8: Artikel mit Überschrift, Bild und Absätzen

Abbildung 2.9: Links ohne CSS, rechts mit CSS

Abbildung 2.10: Nach den Formatierungen für body: Deutlich ist zum Beispiel die a...

Abbildung 2.11: Links ungestaltete Überschrift, rechts mit den neuen Formatierung...

Abbildung 2.12: Links ursprüngliche Navigation, rechts nach den Formatierungen

Abbildung 2.13: Der aktuelle Navigationspunkt – Home – ist fett hervorgehoben.

Abbildung 2.14: Ursprünglich alles untereinander (links), jetzt wird die Webseite...

Abbildung 2.15: Footer ursprünglich (links) und nach den Formatierungen (rechts)

Abbildung 2.16: Links: Festes Bild überragt eventuell den anderen Text, rechts fl...

Abbildung 2.17: Ursprünglich werden bei wenig Platz die Spalten zu schmal – nach ...

Abbildung 2.18: Auf der Seite »Infos« ist der Link »Infos« fett.

Kapitel 3

Abbildung 3.1: Entwicklertools in Firefox aufrufen

Abbildung 3.2: Firefox-Entwicklertools

Abbildung 3.3: Entwicklertools in Chrome

Abbildung 3.4: Safari: Unten: Menü »Entwickler« anzeigen lassen

Abbildung 3.5: Firefox: Position der Entwicklertools festlegen

Abbildung 3.6: HTML-Code im »Inspektor«

Abbildung 3.7: Mit aktiviertem Zeigemodus lassen sich die Elemente oben auswählen...

Abbildung 3.8: Klick mit rechter Maustaste auf ein Element, um den HTML-Code zu b...

Abbildung 3.9: HTML-Code bearbeiten

Abbildung 3.10: Der CSS-Code steht rechts vom HTML-Code in einem eigenen Bereich.

Abbildung 3.11: Zweispaltig oder ...

Abbildung 3.12: ... dreispaltig

Abbildung 3.13: CSS-Angaben testweise ändern

Abbildung 3.14: Icon zum Testen der Bildschirmgrößen

Abbildung 3.15: Die aktuelle Größe wird oben angezeigt.

Abbildung 3.16: Seite in verschiedenen Größen testen

Abbildung 3.17: Bildschirmgrößen testen in Chrome aktivieren

Kapitel 4

Abbildung 4.1: Speicherplatz unter Windows ermitteln

Abbildung 4.2: Eine Webseite ohne verschlüsselte Übertragung: links Firefox, rech...

Abbildung 4.3: Eine Webseite mit verschlüsselter Übertragung: links Firefox, rech...

Abbildung 4.4: FileZilla: Datei/Servermanager wählen

Abbildung 4.5: FileZilla: Serverdaten eingeben – bitte durch Ihre eigenen Daten e...

Abbildung 4.6: FileZilla: verbunden

Abbildung 4.7: FileZilla: Dateien zum Übertragen herüberziehen

Abbildung 4.8: Dateien sind übertragen.

Abbildung 4.9: FileZilla: Kontextmenü bei einzelnen Dateien

Kapitel 5

Abbildung 5.1: Seitentitel in der Trefferliste – nur »Kontakt« wäre zu wenig.

Abbildung 5.2: Zusätzliche Leerzeichen und Umbrüche sind nicht zu sehen.

Abbildung 5.3: VS Code: Dokument formatieren

Abbildung 5.4: Bei

https://www.freeformatter.com/html-formatter.html

können Sie w...

Abbildung 5.5: Bei VS Code ohne Softwraps sieht man nicht den vollständigen Text.

Abbildung 5.6: VS Code: Softwraps aktivieren

Abbildung 5.7: Kommentare in einer Webseite in Zeile 12 und Zeile 15

Abbildung 5.8: Zwei Adressen

Abbildung 5.9: Von h1 bis h6: Überschriften

Abbildung 5.10: Mit Überschriften strukturierter Text

Abbildung 5.11: To-dos für heute

Abbildung 5.12: Geordnete Liste zum Beispiel bei einem Kochrezept

Abbildung 5.13: Startpunkt, Aufzählungszeichen und Reihenfolge ändern

Abbildung 5.14: Verschachtelte Liste

Abbildung 5.15: Definitionsliste

Abbildung 5.16: Eine Trennlinie kennzeichnet einen thematischen Wechsel.

Abbildung 5.17: Ein Zitat (blockquote) mit Nennung des Autors (cite)

Abbildung 5.18: Leerzeichen bleiben wegen <pre> wie im Quellcode.

Abbildung 5.19: Eingeklappt (links), aber bei Klick auf die summary kann man die ...

Abbildung 5.20: em und strong

Abbildung 5.21: Eine mit abbr und title gekennzeichnete Abkürzung

Abbildung 5.22: Von der groben Strukturierung sieht man wenig bis gar nichts.

Kapitel 6

Abbildung 6.1: Ausschnitt aus Rastergrafik: Bei der Vergrößerung erscheinen Stufe...

Abbildung 6.2: Speicherdialog für JPEG (hier vom Bildbearbeitungsprogramm GIMP): ...

Abbildung 6.3: JPEG: Bei zu starker Komprimierung zeigen sich unschöne Blöcke (be...

Abbildung 6.4: PNG-Beispiel

Abbildung 6.5: Dokument mit eingebundenem Bild

Abbildung 6.6: Häkchen bei der korrekten Antwort

Abbildung 6.7: alt-Text in verschiedenen Browsern

Abbildung 6.8: Der Inhalt des title-Attributs erscheint beim Hovern.

Abbildung 6.9: Die Bildbeschriftung erscheint unterhalb des Bildes.

Abbildung 6.10: SVG-Bild eingebettet – egal ob inline oder img – das Ergebnis ist...

Abbildung 6.11: Kleine Favicons im Browser-Tab

Abbildung 6.12: Video mit Steuerungselementen unten

Abbildung 6.13: Bei YouTube-Videos den Teilen-Link wählen

Abbildung 6.14: Optionen zum Teilen bei YouTube

Abbildung 6.15: Optionen zum Video-Einbetten

Abbildung 6.16: Seite in Seite: Das iframe-Element macht's möglich.

Kapitel 7

Abbildung 7.1: Das Linkziel sieht man unten in der Statusleiste (hier Firefox).

Abbildung 7.2: Über dem verlinkten Bild wird der Mauscursor zu einem Händchen.

Abbildung 7.3: Bei Klick auf den ersten Link öffnet sich das Fenster im selben Ta...

Abbildung 7.4: Über den Zurück-Pfeil gelangt man wieder zur vorherigen Seite.

Abbildung 7.5: Bei Klick auf den Link wird die Seite in einem neuen Tab geöffnet:...

Abbildung 7.6: Zurück geht es jetzt nicht über den Pfeil nach links in der Browse...

Abbildung 7.7: Links: bei Klick auf »Gesellige, in Gruppen lebende Mangusten« gel...

Abbildung 7.8: Links: Bei Klick auf »nach oben« springt man an den ...

Abbildung 7.9: Firefox: Was soll bei Klick auf einen bestimmten Datentyp geschehe...

Abbildung 7.10: Bei Klick auf einen mailto-Link kann man das E-Mail-Programm wähl...

Abbildung 7.11: Danach erscheint eine leere E-Mail mit dem eingetragenen Adressat...

Abbildung 7.12: Übersicht über die drei Ordner und die Dateien

Abbildung 7.13: Innerhalb desselben Ordners verweisen

Abbildung 7.14: In einen Unterordner verweisen

Abbildung 7.15: Auf eine Datei in einem übergeordneten Ordner verweisen

Abbildung 7.16: In einen Parallelordner verweisen

Abbildung 7.17: Typisch WordPress: Alle Links sind absolut mit angegebener Domain...

Kapitel 8

Abbildung 8.1: Formulare können komplex sein (links) oder auch nur aus einem Feld...

Abbildung 8.2: Formular mit zwei Feldern

Abbildung 8.3: Formulardarstellung mit CSS: bei wenig Platz Beschri...

Abbildung 8.4: Die eingetragenen Werte werden angezeigt.

Abbildung 8.5: Bei der URL sind die Suchbegriffe zu sehen, wenn die Daten per get...

Abbildung 8.6: Meldung, wenn keine E-Mail-Adresse eingegeben wird

Abbildung 8.7: Die passende Tastatur zur Eingabe einer E-Mail-Adresse (Android)

Abbildung 8.8: Links: placeholder-Angabe – rechts: Wenn jemand zu schreiben begin...

Abbildung 8.9: Schützt vor Über-die-Schulter-Guckern: type="password"

Abbildung 8.10: Checkbox: Ja oder Nein, aber nix sonst

Abbildung 8.11: Bei Radiobutton kann nur eine von mehreren Möglichkeiten gewählt ...

Abbildung 8.12: Auswahlliste: links eingeklappt, rechts: ausgeklappt

Abbildung 8.13: Mehrere Optionen zur Auswahl dank multiple – und w...

Abbildung 8.14: textarea: mehr Platz für Texte

Abbildung 8.15: Leerzeichen erscheinen im textarea-Element.

Abbildung 8.16: Um das Formular erkennt man das fieldset-Element am dünnen Rahmen...

Abbildung 8.17: Suchfeld auf dem Mac mit abgerundeten Ecken

Abbildung 8.18: type="tel" vereinfacht die Eingabe einer Telefonnu...

Abbildung 8.19: type="number" in Firefox

Abbildung 8.20: type="range" in Firefox (links) und in Edge (recht...

Abbildung 8.21: type="color" in Edge

Abbildung 8.22: type="date" auf einem Android

Abbildung 8.23: type="date" auf einem iPad

Abbildung 8.24: datalist in Firefox

Abbildung 8.25: Der »Durchsuchen«-Button erscheint automatisch bei type="file".

Abbildung 8.26: progress-Element

Abbildung 8.27: Das Formular mit weiteren Formularfeldern

Abbildung 8.28: Das Feld muss ausgefüllt werden, sonst erscheint eine Meldung.

Abbildung 8.29: Überprüfung bei type="number"

Abbildung 8.30: Das ist keine Tabelle – und da es keine Tabelle is...

Abbildung 8.31: Eine erste Tabelle

Abbildung 8.32: Die Zellen erkennt man mit einer Prise CSS gut.

Abbildung 8.33: Tabelle mit Überschriftszellen

Kapitel 9

Abbildung 9.1: Formatierungen für Absätze und h2-Überschriften stammen aus einem ...

Abbildung 9.2: Der Inline-Stil setzt sich durch.

Abbildung 9.3: CSS mit Superpower – SuperCSS also

Abbildung 9.4: Ein Absatz und eine Überschrift erhalten eine Hintergrundfarbe dur...

Abbildung 9.5: Nur die ungeordnete Liste (ul) innerhalb des nav-Elements hat eine...

Abbildung 9.6: Im Inspektor der Entwicklungstools von Firefox können Sie sehr gut...

Abbildung 9.7: HTML-Elemente in Form eines Stammbaums

Abbildung 9.8: Andere Hintergrundfarbe beim Hovern

Abbildung 9.9: Linkformatierungen

Abbildung 9.10: Links: das Formular im Normalzustand. Rechts: Bei ...

Abbildung 9.11: Bei Klick auf einen internen Link (links) gelangt man zur entspre...

Abbildung 9.12: tr:nth-child(2n): Jede zweite Tabellenzeile hat ei...

Abbildung 9.13: Die Icons sind per CSS ergänzt.

Abbildung 9.14: ::after in den Firefox-Entwicklertools

Abbildung 9.15: ::first-line und ::first-letter

Abbildung 9.16: Das Ergebnis der verschiedenen Angaben

Abbildung 9.17: In den Entwicklertools sind die Regeln durchgestrichen, die von a...

Abbildung 9.18: VS Code zeigt beim Hovern die Spezifität von Selek...

Kapitel 10

Abbildung 10.1: Verschiedene Abstufungen der Transparenz bei rgba(): von 0 ganz d...

Abbildung 10.2: Farbvariationen mit hsl() und hsla()

Abbildung 10.3: Mit Klick bei gleichzeitig gedrückter Umschalt-Tas...

Abbildung 10.4: Farbwähler in Firefox

Abbildung 10.5: Farbwähler in VS Code

Abbildung 10.6: Farbkombinationen bei

paletton.com

Abbildung 10.7: Einstellungen in den Firefox-Entwicklertools

Abbildung 10.8: Zusätzliche Schaltflächen zum Messen in den Firefox-Entwicklertoo...

Abbildung 10.9: Lineal aktivieren in den Firefox-Entwicklertools

Abbildung 10.10: Abmessen mit den Firefox-Entwicklertools

Abbildung 10.11: Die genauen Ausmaße des Elements hängen bei vw u...

Abbildung 10.12: Alle Elemente innerhalb von body erben die rote Textfarbe, nur d...

Abbildung 10.13: Mit »a { color: inherit; }« erbt auch der Link d...

Abbildung 10.14: CSS-Referenzen verraten, ob eine Eigenschaft vererbt wird oder n...

Abbildung 10.15: In den Browser-Entwicklertools sehen Sie, welche Angaben ererbt ...

Abbildung 10.16: Beim Link wirken die Angaben »vom Browser« und die von body erer...

Abbildung 10.17: Konsole in den Entwicklertools

Abbildung 10.18: VS Code: Unterringelung deutet auf Fehler hin.

Kapitel 11

Abbildung 11.1: Im Browser definierte Standardschriften

Abbildung 11.2: Mit kleinen Verzierungen (oben) oder ohne (unten)

Abbildung 11.3: Standardschriften: Firefox unter Windows (links), Android-Smartph...

Abbildung 11.4: VS Code: Vorschläge für Schriftenlisten

Abbildung 11.5: Eine gewählte Schrift: eigene Texte bei der Auswahl anzeigen lass...

Abbildung 11.6: Eine Schrift wurde gewählt.

Abbildung 11.7: Google Fonts: rechts der Bereich mit der gewählten Schrift

Abbildung 11.8: Schrift wählen, Zeichensatz und Styles bestimmen

Abbildung 11.9: Browserunterstützung wählen und Dateien herunterladen

Abbildung 11.10: Ordnerstruktur: HTML- und CSS-Datei sind auf derselben Ebene und...

Abbildung 11.11: Code zum Einbinden – die Pfadangabe lässt sich durch das Formula...

Abbildung 11.12: Bei der Überschrift wird Caveat benutzt.

Abbildung 11.13: Die verwendete Schrift zeigt der Tab Schriftarte...

Abbildung 11.14: Die Schrift in der inneren Liste ist größer.

Abbildung 11.15: Der Tab »Berechnet« in den Firefox-Entwicklertoo...

Abbildung 11.16: Mit rem haben beide Listen die gleiche Schriftgröße.

Abbildung 11.17: Links Original, rechts nach »font-size:80%« bei html. Das Verhäl...

Abbildung 11.18: Verschiedene Schriftformatierungen

Abbildung 11.19: Variationen über die Zeilenhöhe: Im ersten Absatz verkleinert mi...

Abbildung 11.20: Firefox-Entwicklertools: Bei Schriftarten können Sie über Schieb...

Abbildung 11.21: Verschiedene Beispiele für text-shadow

Abbildung 11.22: Abstände zwischen Buchstaben oder Wörtern steuer...

Abbildung 11.23: Linkformatierungen: Die Unterstreichung erscheint nur beim Hover...

Abbildung 11.24: Oben rechts: verschiedene Werte für text-decoration von oben nac...

Abbildung 11.25: Oben linksbündig (Standard), gefolgt von rechtsbündig, zentriert...

Abbildung 11.26: Oben die Seite der United Nations auf Englisch, unten auf Arabis...

Abbildung 11.27: Eingerückte erste Zeile und hängende erste Zeile (text-indent.ht...

Abbildung 11.28: Mögliche Werte für list-style-type (list-style.html)

Abbildung 11.29: list-style-position: Position der Aufzählungszei...

Kapitel 12

Abbildung 12.1: Blockelemente wie Überschriften füllen immer die ganze Breite.

Abbildung 12.2: Bei Layout in den Entwicklertools von Firefox sehe...

Abbildung 12.3: Verschiedene Breitenangaben – width bezieht sich immer auf den um...

Abbildung 12.4: Bei fester Höhe und vergrößerter Schrift ragt der Text unschön au...

Abbildung 12.5: Das Bild nimmt dank »height: 60vh« nie mehr als 60 % der Höhe des...

Abbildung 12.6: Überschrift mit padding – die gestrichelten Linien dienen zur Ver...

Abbildung 12.7: Unterschiedliche Werte für padding

Abbildung 12.8: Rahmenlinien oben und links von der Überschrift

Abbildung 12.9: Rahmentypen

Abbildung 12.10: Verschiedene Werte für overflow

Abbildung 12.11: Der gelbe Bereich ist das margin, die gestrichelte Linie zeigt d...

Abbildung 12.12: Der Abstand zwischen den Elementen beträgt 20 px (H 20 px).

Abbildung 12.13: Im Tab »Layout« liest man die Ausmaße aus: Gesamtbreite 390 px.

Abbildung 12.14: Die untere Box ist wegen box-sizing: border-box 250 px breit.

Abbildung 12.15: Unterschiedliche Abrundungen

Abbildung 12.16: Verschiedene Schatten um die Boxen

Abbildung 12.17: width, padding, border und margin bei einem Inline-Element

Abbildung 12.18: Drei farbige Buttons – beim Hovern ändert sich die Hintergrundfa...

Abbildung 12.19: Beim Hovern über den Wert hinter transform in den Firefox-Entwic...

Kapitel 13

Abbildung 13.1: Im Hintergrund ein gelber Kreis, der gekachelt wird, sodass das E...

Abbildung 13.2: Verschiedene Werte für background-repeat (hintergrundbild_wiederh...

Abbildung 13.3: Mit background-position das Hintergrundbild positionieren (hinter...

Abbildung 13.4: Größe des Hintergrundbilds mit background-size verändern (hinterg...

Abbildung 13.5: Das Hintergrundbild bleibt an der Position, auch wenn man nach un...

Abbildung 13.6: Einem Element können auch mehrere Hintergrundbilder zugewiesen we...

Abbildung 13.7: Das Hintergrundbild füllt immer das Browserfenster vollständig au...

Abbildung 13.8: Ein Farbverlauf von Hellblau nach Dunkelblau, der sich immer an d...

Abbildung 13.9: Unterschiedliche Farbverläufe

Abbildung 13.10: object-fit für HTML-Bilder

Abbildung 13.11: Filtereffekte mit CSS

Abbildung 13.12: Beim Hovern vergrößert sich das Bild und wird heller – Sie sehen...

Kapitel 14

Abbildung 14.1: Standardmäßig befinden sich Bilder auf einer Zeile mit dem nachfo...

Abbildung 14.2: Erstes Bild ist rechts gefloatet, das zweite Bild links.

Abbildung 14.3: Auch Textboxen können floaten.

Abbildung 14.4: Links: Die Linie befindet sich auch neben den Bildern – rechts: M...

Abbildung 14.5: Der eigentlich umfassende Absatz umfasst das gefloatete Element n...

Abbildung 14.6: Jetzt umschließt der Absatz das gefloatete Bild.

Abbildung 14.7: Der umfließende Text passt sich an die Form an.

Abbildung 14.8: shape-Editor in Firefox

Abbildung 14.9: Ohne Positionierung: Die div-Elemente stehen in der Reihenfolge w...

Abbildung 14.10: ».zwei« ist absolut positioniert.

Abbildung 14.11: Nun sind .zwei und .inzwei absolut positioniert.

Abbildung 14.12: Mit »position: relative« wird das Element in Relation zu seiner ...

Abbildung 14.13: ».inzwei« ist immer absolut positioniert: Im rec...

Abbildung 14.14: Firefox-Entwicklertools: Bei Layout sieht man die Art der Positi...

Abbildung 14.15: ropdown-Menü

(https://getbootstrap.com/docs/5.1/components/dropdowns/

Abbildung 14.16: Beschriftung auf einem halbtransparenten Balken auf dem Bild

Abbildung 14.17: Der Footer bleibt immer unten.

Abbildung 14.18: position: sticky

Abbildung 14.19: Ein gelbes Dreieck zeigt, dass diese Browserversion noch ein Prä...

Abbildung 14.20: Autoprefixer erzeugt den Code mit Präfixen.

Abbildung 14.21: Dank column-width: bei mehr Platz mehrspaltig (oben), bei wenige...

Kapitel 15

Abbildung 15.1: Links normale Darstellung – rechts nach Aktivierung von Flexbox ü...

Abbildung 15.2: Verschiedene Angaben für flex-direction von links nach rechts: co...

Abbildung 15.3: Je nach gewählter flex-direction verläuft die Hauptachse anders.

Abbildung 15.4: Die querende Achse ist senkrecht zur Hauptachse.

Abbildung 15.5: Mit gap gibt es Abstand zwischen den Flexitems.

Abbildung 15.6: display: inline-flex – Text steht neben dem Flexco...

Abbildung 15.7: Verschiedene Werte für align-items: stretch, flex-start, center, ...

Abbildung 15.8: Element 4 ist über align-self: flex-end angeordnet (flexbox-align...

Abbildung 15.9: align-items bei flex-direction: column

Abbildung 15.10: Verschiedene Werte für justify-content (flexbox-justify-content....

Abbildung 15.11: Entwicklertools in Chrome: Bei Klick auf das Ico...

Abbildung 15.12: Mit Flexbox horizontal und vertikal zentriert

Abbildung 15.13: Gewünschte Anordnung

Abbildung 15.14: Mit align-self erreichen Sie nicht die geplante Darstellung.

Abbildung 15.15: Navigation mit Flexbox

Abbildung 15.16: Zweigeteilte Navigation

Abbildung 15.17: Produkte ist mit order: -1 ganz an den Anfang gerückt.

Abbildung 15.18: Nun teilen sich die Navigationspunkte den verfügbaren Platz opti...

Abbildung 15.19: Wenn zu wenig Platz da ist, werden die Elemente abgeschnitten un...

Abbildung 15.20: Wenn nicht genügend Platz vorhanden ist, können die Navigationsp...

Kapitel 16

Abbildung 16.1: Typische Anordnung mit Flexbox (oben) im Unterschied zu einer Ano...

Abbildung 16.2: Die Elemente befinden sich untereinander.

Abbildung 16.3: Drei Spalten

Abbildung 16.4: Die Zeilen haben Höhe erhalten.

Abbildung 16.5: Das erste Element erstreckt sich über alle Spalten.

Abbildung 16.6: Gridinspektor in den Firefox-Entwicklertools

Abbildung 16.7: Raster mit angezeigten Rasterlinien

Abbildung 16.8: Raster mit eingeblendeten Rasterlinien und Liniennummern

Abbildung 16.9: Die Elemente werden auf die Rasterzellen verteilt.

Abbildung 16.10: In den weißen Pfeilen stehen die Rasterliniennummern, die Pfeile...

Abbildung 16.11: Links ohne z-index ist B oben, rechts mit »z-index: 1« ist A obe...

Abbildung 16.12: Modifiziertes Raster: Die Navigation befindet si...

Abbildung 16.13: Der Browser ermittelt automatisch die benötigte Anzahl an Spalte...

Abbildung 16.14: Oben: Ohne dense kommt es zu Lücken, unten: keine Lücken wegen g...

Abbildung 16.15: align-content und justify-content

Abbildung 16.16: align-items und justify-items

Abbildung 16.17: Drei ist unten rechts angeordnet, die anderen Griditems sind all...

Kapitel 17

Abbildung 17.1: Webseiten müssen auf allen Geräten funktionieren.

Abbildung 17.2: Firefox-Entwicklertools: Spezielles Gerät auswähle...

Abbildung 17.3: Oben jeweils adaptiv mit Layoutsprüngen, unten res...

Abbildung 17.4: Nicht responsive Seiten werden auf Smartphones ver...

Abbildung 17.5: Links ohne Viewport-Meta-Angabe, rechts mit

Abbildung 17.6: Druckversion ohne Navigation mit Adressen der Links

Abbildung 17.7: Je nach Viewportgröße ist die Hintergrundfarbe anders.

Abbildung 17.8: Von ein- auf dreispaltig, je nach verfügbarem Platz – beachten Si...

Abbildung 17.9: Dreispaltig bei großem Viewport

Abbildung 17.10: Zweispaltig bei mittlerem Viewport und einspaltig bei kleinem Vi...

Abbildung 17.11: Links: Das Bild ist zu groß, rechts: So klappt es.

Abbildung 17.12: Responsives Formular: Beschriftung oberhalb bei kleinem Viewport...

Abbildung 17.13: Mehr Navigationspunkte machen Probleme bei kleinem Viewport.

Abbildung 17.14: Jetzt sind die Navigationspunkte bei kleinem Viewport untereinan...

Abbildung 17.15: Auf kleinen Screens ist die Navigation eingeklap...

Abbildung 17.16: In den Entwicklertools sehen Sie, wie durch Klick auf »Menü« der...

Abbildung 17.17: Über die kleinen Icons Mond und Sonne rechts in den Entwicklerto...

Abbildung 17.18: Links »normal«, rechts mit aktiviertem Dark Mode

Abbildung 17.19: Zwei Darstellungsvarianten einer Komponente: bei wenig Platz Bil...

Kapitel 18

Abbildung 18.1: Zwei Bilder: Das zweite ist doppelt so groß wie das erste.

Abbildung 18.2: Bildschirmgrößen testen in Firefox

Abbildung 18.3: Links normales Display, rechts hochauflösendes Display in Firefox...

Abbildung 18.4: Viewport 440 x, einspaltiges Layout, optimale Bildgröße 400 px br...

Abbildung 18.5: Viewport 750 px, Layout dreispaltig, optimale Bildbreite 218 px

Abbildung 18.6: Bei einem Viewport von 554 px ist das Layout einspaltig. Die Opti...

Abbildung 18.7: Bei einem Viewport von 878 px Breite wäre die Optimalgröße für da...

Abbildung 18.8: Oben: klein gezurrtes Bild – Katzengesicht ist nicht gut zu erken...

Abbildung 18.9: Links bei einem Viewport von 400 px wird der Ausschnitt angezeigt...

Kapitel 19

Abbildung 19.1: In der Seitenquelltext-Anzeige von Firefox können Sie auf verlink...

Abbildung 19.2: Beim Hovern über das Hintergrundbild in den Entwicklertools sollt...

Kapitel 21

Abbildung 21.1: Mauszeiger progress

Abbildung 21.2: Text mit Farbverlauf

Abbildung 21.3: Zuerst die beiden Bilder einzeln, dann mit backgro...

Abbildung 21.4: CSS-3D-Transformationen (https://3dtransforms.desandro.com/

Abbildung 21.5: Bilder mit der CSS-Eigenschaft clip-path beschneid...

Abbildung 21.6: Muster über Farbverläufe

Kapitel 22

Abbildung 22.1: Farbverläufe erzeugen mit

https://cssgradient.io/

Abbildung 22.2: Farbverlaufsgenerator

Abbildung 22.3: Kleckse mit border-radius

Abbildung 22.4: Formen ausschneiden mit clip-path

Abbildung 22.5: Raffinierte Schatten um Boxen

Abbildung 22.6: Filtereffekte

Abbildung 22.7: Mehr als eckig oder rund

Abbildung 22.8: hr kann auch elegant.

Abbildung 22.9: Generator für Schrägen

Abbildung 22.10: Schöne Farbabstufungen

Abbildung 22.11: Gute Kombination von Schriftgrößen wählen

Orientierungspunkte

Cover

Titelblatt

Impressum

Über den Autorin

Inhaltsverzeichnis

Einleitung

Fangen Sie an zu lesen

Stichwortverzeichnis

End User License Agreement

Seitenliste

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

439

440

441

442

443

444

445

446

447

449

450

451

452

453

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

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 soooo 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 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. In Kapitel 18 geht es darum, Bilder so einzusetzen, 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.

Teil V: Der Top-Ten-Teil

Er liefert Ihnen ... genau eine Auswahl nützlicher Tricks:

wie man störrische Browser zur Mitarbeit überredet

die wichtigsten Schritte zur Suchmaschinenoptimierung

erstaunliche Dinge, die man noch mit CSS machen kann

und die 10 besten Code-Generatoren für faule Coder

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.

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

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

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 https://www.wiley-vch.de/ISBN9783527720149 zum Download – und/oder auch selbst schreiben. Dann profitieren Sie am meisten davon.

Damit wissen Sie alles Nötige 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

IN DIESEM TEIL ...

HTML und CSS sind die Basis aller Webseiten, und warum das so ist und wie HTML und CSS funktionieren, erfahren Sie in diesem Teil: Dabei arbeiten Sie sich von einem kleinen Beispiel zu einem ein bisschen größeren vor, erhalten nützliche Tipps zum Umgang mit Webseiten und lernen, wie Sie Ihre Webseite online stellen.

Tausende von E-Books und Hörbücher

Ihre Zahl wächst ständig und Sie haben eine Fixpreisgarantie.

Sie haben über uns geschrieben: