Verfügbarkeit: HTML und CSS :: THWS Bibkatalog

HTML und CSS: das umfassende Handbuch

Gespeichert in:

Bibliographische Detailangaben
1. Verfasser:	Wolf, Jürgen 1974- (VerfasserIn)
Format:	Buch
Sprache:	German
Veröffentlicht:	Bonn Rheinwerk 2023
Ausgabe:	5., aktualisierte und überarbeitete Auflage
Schriftenreihe:	Rheinwerk Computing
Schlagworte:	Cascading Style Sheets 3.0 Webdesign JavaScript HTML Cascading Style Sheets HTML 5.0 HTML5 CSS3 Webentwicklung HTML-API Canvas Ajax Web 2.0 Usability User Experience UX-Design UX Responsive Web-Design Style Sheet
Online-Zugang:	Inhaltstext Inhaltsverzeichnis
Beschreibung:	Von der 1. bis zur 3. Auflage unter dem Titel "HTML5 und CSS3" erschienen. Auf dem Umschlag: Von den HTML-Grundlagen bis zur JavaScript-Entwicklung ; Responsive Webdesign, Flexboxen und CSS Grid ; Video, Audio, lokaler Speicher, Media Queries, Dark Mode, Web-APIs, Custom Properties ; Alle Beispielprojekte zum Download
Beschreibung:	1124 Seiten Illustrationen, Diagramme 24 cm x 19 cm
ISBN:	9783836297288

Internformat

MARC


LEADER	00000nam a22000008c 4500
001	BV049046581
003	DE-604
005	20241104
007	t
008	230712s2023 gw a\|\|\| \|\|\|\| 00\|\|\| ger d
015			\|a 23,N17 \|2 dnb
016	7		\|a 1286727448 \|2 DE-101
020			\|a 9783836297288 \|c Festeinband : EUR 49.90 (DE), EUR 51.30 (AT), CHF 63.90 (freier Preis) \|9 978-3-8362-9728-8
024	3		\|a 9783836297288
035			\|a (OCoLC)1401185535
035			\|a (DE-599)DNB1286727448
040			\|a DE-604 \|b ger \|e rda
041	0		\|a ger
044			\|a gw \|c XA-DE-NW
049			\|a DE-1102 \|a DE-M347 \|a DE-29T \|a DE-1050 \|a DE-Aug4 \|a DE-523 \|a DE-92 \|a DE-1051 \|a DE-860 \|a DE-859 \|a DE-703 \|a DE-29 \|a DE-573 \|a DE-210 \|a DE-128
082	0		\|a 006.74 \|2 23/ger
082	0		\|a 006.76 \|2 23/ger
084			\|a ST 252 \|0 (DE-625)143627: \|2 rvk
084			\|a ST 250 \|0 (DE-625)143626: \|2 rvk
084			\|8 1\p \|a 004 \|2 23sdnb
100	1		\|a Wolf, Jürgen \|d 1974- \|e Verfasser \|0 (DE-588)132691256 \|4 aut
240	1	0	\|a HTML5 und CSS3
245	1	0	\|a HTML und CSS \|b das umfassende Handbuch \|c Jürgen Wolf
246	1	0	\|a HTML 5 und CSS 3
250			\|a 5., aktualisierte und überarbeitete Auflage
264		1	\|a Bonn \|b Rheinwerk \|c 2023
300			\|a 1124 Seiten \|b Illustrationen, Diagramme \|c 24 cm x 19 cm
336			\|b txt \|2 rdacontent
337			\|b n \|2 rdamedia
338			\|b nc \|2 rdacarrier
490	0		\|a Rheinwerk Computing
500			\|a Von der 1. bis zur 3. Auflage unter dem Titel "HTML5 und CSS3" erschienen.
500			\|a Auf dem Umschlag: Von den HTML-Grundlagen bis zur JavaScript-Entwicklung ; Responsive Webdesign, Flexboxen und CSS Grid ; Video, Audio, lokaler Speicher, Media Queries, Dark Mode, Web-APIs, Custom Properties ; Alle Beispielprojekte zum Download
650	0	7	\|a Cascading Style Sheets 3.0 \|0 (DE-588)7750895-6 \|2 gnd \|9 rswk-swf
650	0	7	\|a Webdesign \|0 (DE-588)1041632088 \|2 gnd \|9 rswk-swf
650	0	7	\|a JavaScript \|0 (DE-588)4420180-1 \|2 gnd \|9 rswk-swf
650	0	7	\|a HTML \|0 (DE-588)4373477-7 \|2 gnd \|9 rswk-swf
650	0	7	\|a Cascading Style Sheets \|0 (DE-588)4467617-7 \|2 gnd \|9 rswk-swf
650	0	7	\|a HTML 5.0 \|0 (DE-588)7704810-6 \|2 gnd \|9 rswk-swf
653			\|a HTML5
653			\|a CSS3
653			\|a Webentwicklung
653			\|a HTML-API
653			\|a JavaScript
653			\|a Canvas
653			\|a Ajax
653			\|a Web 2.0
653			\|a Usability
653			\|a User Experience UX-Design
653			\|a UX
653			\|a Responsive Web-Design
653			\|a Style Sheet
689	0	0	\|a HTML \|0 (DE-588)4373477-7 \|D s
689	0	1	\|a Cascading Style Sheets \|0 (DE-588)4467617-7 \|D s
689	0	2	\|a JavaScript \|0 (DE-588)4420180-1 \|D s
689	0	3	\|a Webdesign \|0 (DE-588)1041632088 \|D s
689	0		\|5 DE-604
689	1	0	\|a HTML 5.0 \|0 (DE-588)7704810-6 \|D s
689	1	1	\|a Cascading Style Sheets 3.0 \|0 (DE-588)7750895-6 \|D s
689	1	2	\|a JavaScript \|0 (DE-588)4420180-1 \|D s
689	1		\|5 DE-604
710	2		\|a Rheinwerk Verlag \|0 (DE-588)1081738405 \|4 pbl
776	0	8	\|i Erscheint auch als \|n Online-Ausgabe \|z 978-3-8362-9730-1 \|w (DE-604)BV049461484
780	0	0	\|i Ersatz von \|z 978-3-8362-8117-1 \|w (DE-604)BV047390879
856	4	2	\|m X:MVB \|q text/html \|u http://deposit.dnb.de/cgi-bin/dokserv?id=ccdcded0c6dc43fd9240149f4cb81e93&prov=M&dok_var=1&dok_ext=htm \|3 Inhaltstext
856	4	2	\|m DNB Datenaustausch \|q application/pdf \|u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=034309017&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA \|3 Inhaltsverzeichnis
883	1		\|8 1\p \|a vlb \|d 20230420 \|q DE-101 \|u https://d-nb.info/provenance/plan#vlb
943	1		\|a oai:aleph.bib-bvb.de:BVB01-034309017

Datensatz im Suchindex

_version_	1814789511519928320
adam_text	AUF EINEN BLICK 1 EINFUEHRUNG IN DAS HTML-UNIVERSUM . 37 2 GRUNDLEGENDER AUFBAU VON . 61 3 DIE KOPFDATEN EINES HTML-DOKUMENTS . 77 4 DER SICHTBARE BEREICH EINES HTML-DOKUMENTS . 105 5 TABELLEN UND HYPERLINKS . 163 6 GRAFIKEN UND MULTIMEDIA . 193 7 HTML-FORMULARE UND INTERAKTIVE ELEMENTE . 239 8 EINFUEHRUNG IN CASCADING STYLESHEETS (CSS) . 279 9 DIE SELEKTOREN VON CSS . 307 10 DIE VERERBUNG UND DIE KASKADE . 349 11 DAS BOX-MODELL VON CSS . 369 12 CSS-POSITIONIERUNG . 413 13 FLEXBOXEN . 449 14 RESPONSIVES WEBDESIGN UND MEDIA QUERIES . 473 15 CSS GRID . 515 16 STYLEN MIT CSS. 543 17 DER CSS-PRAEPROZESSOR SASS UND SCSS . 615 18 EINE KURZE EINFUEHRUNG IN JAVASCRIPT . 661 19 ARRAYS, FUNKTIONEN UND OBJEKTE IN JAVASCRIPT . 703 20 WEBSEITEN DYNAMISCH AENDERN . 743 21 EINFUEHRUNG IN DIE WEB-APIS (BROWSER-APIS) . 813 22 EINE EINFUEHRUNG IN AJAX UND DIE FETCH-API . 865 23 DAS BOOTSTRAP-FRAMEWORKEINSETZEN . 889 24 EINFUEHRUNG IN DIE GRUNDLEGENDEN KONZEPTE VON REACT . 917 25 EINFUEHRUNG IN DIE GRUNDLEGENDEN KONZEPTE VON ANGULAR . 987 26 BEISPIELPROJEKT ERSTELLEN, TESTEN UND OPTIMIEREN . 1065 INHALT MATERIALIEN ZUM BUCH . 29 VORWORT . 31 1 EINFUEHRUNG IN DAS HTML-UNIVERSUM 37 1.1 IST DIESES BUCH UEBERHAUPT ETWAS FUER MICH? . 37 1.2 DIE VERSCHIEDENEN TYPEN VON WEBSITES . 38 1.2.1 WEBPRAESENZ . 38 1.2.2 BLOG/ONLINEMAGAZIN/PORTFOLIO . 39 1.2.3 E-COMMERCE-WEBSITES-GESCHAEFTE OHNE OEFFNUNGSZEITEN . 40 1.2.4 LANDINGPAGE/MICROSITE . 41 1.2.5 WEBPLATTFORM - SICH EIN EIGENES SOZIALES NETZWERK BAUEN . 41 1.2.6 WEB-APPS . 42 1.3 DYNAMISCHE UND STATISCHE WEBSITES . 42 1.3.1 STATISCHE WEBSITES . 42 1.3.2 DYNAMISCHE WEBSITES . 44 1.4 SPRACHEN FUER DIE GESTALTUNG UND ENTWICKLUNG IM WEB . 46 1.4.1 HTML-DIE TEXTBASIERTE HYPERTEXT-AUSZEICHNUNGSSPRACHE . 46 1.4.2 CSS - DIE GESTALTUNGSSPRACHE CASCADING STYLESHEETS . 46 1.4.3 JAVASCRIPT - DIE CLIENTSEITIGE SKRIPTSPRACHE DES WEBBROWSERS . 47 1.4.4 DIE SERVERSEITIGEN SKRIPTSPRACHEN UND DATENBANKEN . 48 1.4.5 WEBASSEMBLY . 49 1.5 WAS BRAUCHE ICH, UM HIER ANZUFANGEN? . 50 1.5.1 (HTML-)EDITOR ZUM SCHREIBEN VON HTML-DOKUMENTEN . 50 1.5.2 WEBBROWSER FUER DIE ANZEIGE DER WEBSITE . 52 1.5.3 SCHRITT FUER SCHRITT: EINE WEBSEITE ERSTELLEN UND IM WEBBROWSER BETRACHTEN . 53 1.5.4 GESCHRIEBENES HTML UEBERPRUEFEN . 55 1.5.5 GUTE GRUENDE, DEN HTML-CODE (TROTZDEM) ZU VALIDIEREN . 57 1.6 VERWENDETE KONVENTIONEN IM BUCH . 59 1.7 ZUSAMMENFASSUNG. 59 2 GRUNDLEGENDER AUFBAU VON HTML(-DOKUMENTEN) 61 2.1 SYNTAX UND AUFBAU VON HTML(-DOKUMENTEN) . 61 2.1.1 WIE WIRD IN HTML EIN DOKUMENT STRUKTURIERT? . 61 2.1.2 BAUMSTRUKTUR MIT DEM DOM-INSPEKTOR BETRACHTEN . 64 2.1.3 WAS SIND HTML-TAGS UND HTML-ELEMENTE? . 65 2.1.4 HTML-ELEMENTE VERSCHACHTELN UND DIE HIERARCHISCHE STRUKTUR . 66 2.1.5 FALSCHE VERSCHACHTELUNG VON HTML-ELEMENTEN VERMEIDEN . 67 2.1.6 DAS ENDE-TAG EINES HTML-ELEMENTS WEGLASSEN? . 68 2.1.7 ALLEIN STEHENDE HTML-TAGS OHNE ENDE-TAG . 69 2.1.8 ZUSAETZLICHE HTML-ATTRIBUTE FUER HTML-ELEMENTE . 70 2.1.9 KOMMENTARE IN HTML-DOKUMENTEN VERWENDEN . 71 2.2 EIN EINFACHES HTML-DOKUMENT-GRUNDGERUEST . 72 2.2.1 DER HTML-DOKUMENTTYP !DOCTYPE . 72 2.2.2 DER ANFANG UND DAS ENDE EINES HTML-DOKUMENTS MIT HTML . 73 2.2.3 HEAD -DER KOPF EINES HTML-DOKUMENTS . 74 2.2.4 BODY - DER SICHTBARE BEREICH EINES HTML-DOKUMENTS . 74 2.2.5 VORLAGE EINES HTML-GRUNDGERUESTS IN DER PRAXIS . 74 2.3 ZUSAMMENFASSUNG . 75 3 DIE KOPFDATEN EINES HTML-DOKUMENTS 77 3.1 DIE HTML-ELEMENTE FUER DEN KOPF IN DER UEBERSICHT . 77 3.2 TITLE - DIE UEBERSCHRIFT DER HTML-SEITE . 78 3.3 EXKURS: NAMENSKONVENTION UND REFERENZIERUNG . 80 3.3.1 GUELTIGE UND GUTE DATEINAMEN FUER EIN HTML-DOKUMENT . 80 3.3.2 GUELTIGE VERZEICHNISNAMEN UND SINNVOLLE VERZEICHNISSTRUKTUREN . 81 3.3.3 REFERENZ AUF EINE DATENQUELLE NOTIEREN . 82 3.4 DIE BASIS-URL EINER WEBSEITE MIT BASE DEFINIEREN . 85 3.5 BEZIEHUNG ZU EINEM EXTERNEN DOKUMENT MIT LINK . 87 3.6 DOKUMENTGLOBALE CSS-STILE MIT STYLE NOTIEREN . 91 3.7 SKRIPTE IN WEBSEITEN EINBINDEN MIT SCRIPT . 92 3.8 METAINFORMATIONEN FUER DAS DOKUMENT MIT META . 94 3.8.1 DIE VERWENDUNG VON METAANGABEN . 95 3.8.2 DEN VIEWPORT EINSTELLEN . 96 3.8.3 NUETZLICHE METADATEN FUER EINEN WEBCRAWLER ANGEBEN . 98 3.8.4 HILFREICHE METADATEN FUER SUCHMASCHINEN . 98 3.8.5 NUETZLICHE METADATEN FUER DEN WEBBROWSER . 100 3.8.6 ALLGEMEINE METADATEN VERWENDEN . 101 3.8.7 MEINE EMPFEHLUNG: DIESE METADATEN GEHOEREN IN DAS HTML-GRUNDGERUEST . 101 3.8.8 DIE HTML-ATTRIBUTE FUER DAS HTML-ELEMENT META . 102 3.9 ZUSAMMENFASSUNG. 103 4 DER SICHTBARE BEREICH EINES HTML-DOKUMENTS 105 4.1 HTML-ELEMENTE FUER SEITENSTRUKTURIERUNG . 106 4.1.1 BODY -DER DARSTELLBARE INHALTSBEREICH EINES HTML-DOKUMENTS . 106 4.1.2 DIE SEKTIONSELEMENTE VON HTML . 107 4.1.3 INHALT IN THEMENBEZOGENE ABSCHNITTE MIT SECTION EINTEILEN . 107 4.1.4 INHALT IN EINEN IN SICH GESCHLOSSENEN BLOCK MIT ARTICLE EINTEILEN . 108 4.1.5 INHALTE MIT ZUSAETZLICHEN INFORMATIONEN MIT ASIDE ERGAENZEN . 109 4.1.6 EINEN INHALT MIT NAV ZU EINER SEITEN-NAVIGATIONSLEISTE ERKLAEREN . 110 4.1.7 UEBERSCHRIFTEN MIT DEN HTML-ELEMENTEN VON H1 BIS H6 . 112 4.1.8 EIN KOPFBEREICH MIT HEADER UND EIN FUSSBEREICH MIT FOOTER . 114 4.1.9 KONTAKTINFORMATIONEN MIT ADDRESS KENNZEICHNEN . 116 4.2 HTML-ELEMENTE FUER TEXTSTRUKTURIERUNG . 117 4.2.1 TEXTABSAETZE MIT P HINZUFUEGEN . 117 4.2.2 ZEILENUMBRUCH ERZWINGEN MIT BR . 118 4.2.3 EINEN OPTIONALEN ZEILENUMBRUCH MIT WBR HINZUFUEGEN . 119 4.2.4 LEERZEICHEN ERZWINGEN UND UMBRUCH VERHINDERN MIT &NBSP; . 120 4.2.5 THEMATISCHE TRENNUNG MIT HR HINZUFUEGEN . 121 4.2.6 ABSAETZE BZW. ZITATE MIT BLOCKQUOTE HINZUFUEGEN . 122 4.2.7 EINEN ALLGEMEINEN BEREICH MIT DIV GRUPPIEREN . 122 4.2.8 MAIN -EIN HTML-ELEMENT FUER DEN HAUPTINHALT . 124 4.2.9 GESONDERTE BESCHRIFTUNG VON INHALTEN MIT FIGURE UND FIGCAPTION . 125 4.2.10 UNGEORDNETE LISTEN MIT UL UND LI . 126 4.2.11 GEORDNETE LISTEN MIT OL UND LI . 127 4.2.12 NUMMERIERUNG EINER GEORDNETEN LISTE UMKEHREN . 128 4.2.13 NUMMERIERUNG EINER GEORDNETEN LISTE AENDERN . 128 4.2.14 LISTEN INEINANDER VERSCHACHTELN . 129 4.2.15 EINE BESCHREIBUNGSLISTE MIT DL , DT UND DD ERSTELLEN . 130 4.3 HTML-ELEMENTE FUER TEXTAUSZEICHNUNGEN . 132 4.3.1 ABKUERZUNGEN ODER AKRONYME MIT ABBR KENNZEICHNEN . 134 4.3.2 TEXT ALS QUELLE EINES ARBEITSTITELS MIT CITE MARKIEREN . 135 4.3.3 DARSTELLUNG VON COMPUTERCODE MIT CODE UND PRE AUSZEICHNEN . 135 4.3.4 TASTATUREINGABE MIT KBD UND PROGRAMMAUSGABE MIT SAMP . 137 43.5 EINEN TEXT MIT DFN ALS EINE DEFINITION AUSZEICHNEN . 137 43.6 TEXT ALS VARIABLE MIT VAR AUSZEICHNEN . 138 4.3.7 TEXTRICHTUNG MIT BDO UND BDI AENDERN . 138 4.3.8 TEXT BETONEN BZW. HERVORHEBEN MIT EM , STRONG , I UND B . 140 43.9 EINEN TEXT MIT MARK HERVORHEBEN . 141 4.3.10 TEXT ZWISCHEN ANFUEHRUNGSSTRICHE SETZEN MIT Q . 142 4.3.11 TEXT UNTER BZW. DURCHSTREICHEN MIT U UND S . 144 4.3.12 AENDERUNGEN VON TEXT MIT INS UND DEL MARKIEREN . 145 4.3.13 EINEN TEXT HOCHSTELLEN BZW. TIEFSTELLEN MIT SUP UND SUB . 146 4.3.14 DATUMS UND ZEITANGABEN MIT TIME KENNZEICHNEN . 147 4.3.15 DAS KLEINGEDRUCKTE MIT SMALL KENNZEICHNEN . 150 4.3.16 RUBY , RP UND RT FUER EINE ANMERKUNG DER AUSSPRACHE . 150 4.3.17 BEREICH VON EINZELNEN TEXTPASSAGEN MIT SPAN ZUSAMMENFASSEN . 152 4.4 HTML UND DIE SEMANTIK . 152 4.5 BARRIEREARMES WEBDESIGN MIT . 154 4.5.1 DIE ROLLE EINES HTML-ELEMENTS . 155 4.5.2 ZUSTAND UND ATTRIBUTE EINES HTML-ELEMENTS MIT WAI-ARIA BESCHREIBEN . 157 4.53 VERWENDEN SIE EINEN SINNVOLLEN NAMEN FUER DAS HTML-ELEMENT . 158 4.6 EXKURS: ZEICHENCODIERUNG . 158 4.7 ZEICHENENTITAETEN IN HTML . 160 4.8 ZUSAMMENFASSUNG . 162 5 TABELLEN UND HYPERLINKS 163 5.1 DATEN IN EINER TABELLE STRUKTURIEREN . 163 5.1.1 EINE EINFACHE TABELLENSTRUKTUR MIT TABLE , TR , TD UND TH . 164 5.1.2 SPALTEN BZW. ZEILEN MIT COLSPAN BZW. ROWSPAN ZUSAMMENFASSEN . 166 5.13 HTML-ATTRIBUTE FUER DIE TABELLENELEMENTE . 169 5.1.4 TABELLEN MIT THEAD , TBODY UND TFOOT STRUKTURIEREN . 169 5.1.5 SPALTEN EINER TABELLE GRUPPIEREN MIT COLGROUP UND COL . 172 5.1.6 TABELLEN BESCHRIFTEN MIT CAPTION BZW. FIGCAPTION . 173 5.2 ELEKTRONISCHE VERWEISE AKA HYPERLINKS MIT A . 175 5.2.1 LINKS ZU ANDEREN HTML-DOKUMENTEN DER EIGENEN WEBSITE EINFUEGEN . 177 5.2.2 LINKS ZU ANDEREN WEBSITES EINFUEGEN . 179 5.23 LINKS MIT DEM TARGET-ATTRIBUT IN EINEM NEUEN FENSTER OEFFNEN . 180 5.2.4 E-MAIL-LINKS MIT HREF=MAILTO:. . 181 5.2.5 LINKS ZU ANDEREN INHALTSTYPEN SETZEN . 182 5.2.6 DOWNLOADLINKS MIT DEM DOWNLOAD-ATTRIBUT HINZUFUEGEN . 183 5.2.7 LINKS ZU BESTIMMTEN TEILEN EINER WEBSEITE SETZEN . 185 5.2.8 LINKS AUF TELEFONNUMMERN ERSTELLEN . 188 5.2.9 DIE HTML-ATTRIBUTE FUER DAS HTML-ELEMENT A . 189 5.3 ZUSAMMENFASSUNG. 191 6 GRAFIKEN UND MULTIMEDIA 193 6.1 BILDER FUER DAS WEB . 194 6.1.1 DAS JPEG-FORMAT . 194 6.1.2 DASGIF-FORMAT . 195 6.1.3 DAS PNG-FORMAT . 195 6.1.4 SVG FUER VEKTORGRAFIKEN . 196 6.1.5 DAS WEBP-FORMAT . 196 6.1.6 BILDER FUER DAS WEB OPTIMIEREN . 197 6.2 BILDER MIT IMG EINBINDEN . 197 6.2.1 BILDER EINEM HTML-DOKUMENT HINZUFUEGEN . 198 6.2.2 HOEHE UND BREITE FUER DIE GRAFIK ANGEBEN . 201 6.2.3 BILDER BESCHRIFTEN MIT FIGURE UND FIGCAPTION . 203 6.2.4 NATIVES LAZY LOADING . 205 6.2.5 ALTERNATIVE BILDGROESSEN MIT SRCSET UND SIZES . 207 6.2.6 DIE HTML-ATTRIBUTE FUER DAS HTML-ELEMENT IMG . 211 6.3 DAS PASSENDE BILD MIT PICTURE LADEN . 212 6.3.1 BILDER IM PASSENDEN SEITENVERHAELTNIS BZW. DEN PASSENDEN AUSSCHNITT LIEFERN . 212 6.3.2 VERSCHIEDENE DATEIFORMATE ABFRAGEN UND AUSLIEFERN . 215 6.3.3 HTML-ATTRIBUTE VON SOURCE . 215 6.4 EIN ICON FUER DIE WEBSITE HINZUFUEGEN (FAVICON) . 216 6.5 VEKTORGRAFIKEN IN HTML-DOKUMENTEN VERWENDEN . 218 6.5.1 SVG ALS GRAFIKREFERENZ HINZUFUEGEN MIT IMG . 219 6.5.2 SVG DIREKT IN DIE WEBSEITE EINBETTEN MIT SVG . 220 6.5.3 SVG-TAGSFUER DIE VEKTORGRAFIKEN . 220 6.5.4 UEBERSICHT UEBER DIE GRAFISCHEN ELEMENTE VON SVG . 221 6.5.5 WEITERE HINWEISE ZUR VERWENDUNG VON SVG . 222 6.6 GRAFIKEN ZEICHNEN MIT CANVAS . 223 6.7 VIDEOS MIT DEM HTML-ELEMENT VIDEO ABSPIELEN . 224 6.7.1 DIE HTML-ATTRIBUTE FUER DAS HTML-ELEMENT VIDEO . 227 6.7.2 DEM VIDEO UNTERTITEL MIT TRACK HINZUFUEGEN . 228 6.7.3 VIDEOS UEBER YOUTUBE ABSPIELEN LASSEN . 231 6.8 AUDIODATEIEN MIT DEM HTML-ELEMENT AUDIO ABSPIELEN . 232 6.8.1 DIE HTML-ATTRIBUTE FUER DAS HTML-ELEMENT AUDIO . 233 6.9 ANDERE AKTIVE INHALTE EINBINDEN . 234 6.9.1 DAS HTML-ELEMENT EMBED . 235 6.9.2 DAS HTML-ELEMENT OBJECT . 236 6.9.3 DAS HTML-ELEMENT IFRAME . 236 6.10 ZUSAMMENFASSUNG . 238 7 HTML-FORMULARE UND INTERAKTIVE ELEMENTE 239 7.1 EINEN BEREICH FUER FORMULARE DEFINIEREN . 240 7.2 DIE HTML-EINGABEFELDER FUER FORMULARE . 242 7.2.1 EIN EINZEILIGES TEXTEINGABEFELD MIT INPUT TYPE="TEXT" . 242 7.2.2 EIN PASSWORTEINGABEFELD MIT INPUT TYPE="PASSWORD" . 243 7.2.3 EIN MEHRZEILIGES TEXTEINGABEFELD MIT TEXTAREA . 243 7.2.4 EINE AUSWAHLLISTE BZW. DROPDOWN-LISTE MIT SELECT . 244 7.2.5 EINE GRUPPE VON RADIOBUTTONS MIT INPUT TYPE="RADIO" ERSTELLEN . 246 7.2.6 EIN TEXTLABEL MIT LABEL HINZUFUEGEN . 247 7.2.7 CHECKBOXEN MIT INPUT TYPE="CHECKBOX" VERWENDEN . 248 7.2.8 VERSCHIEDENE SCHALTFLAECHEN IM UEBERBLICK . 248 7.2.9 EIN VERSTECKTES EINGABEFELD MIT INPUT TYPE="HIDDEN" VERWENDEN . 249 7.3 SPEZIELLE TYPEN VON EINGABEFELDERN . 250 7.3.1 FELDER FUER DATEIUPLOAD MIT INPUT TYPE="FILE" VERWENDEN . 251 7.3.2 EIN EINGABEFELD FUER FARBEN MIT INPUT TYPE="COLOR" . 251 7.3.3 EIN EINGABEFELD FUER EIN DATUM MIT INPUT TYPE="DATE" . 252 7.3.4 EIN EINGABEFELD FUER EINE UHRZEIT MIT INPUT TYPE="TIME" . 253 7.3.5 EINGABEFELDER FUER DATUM UND UHRZEIT . 253 7.3.6 EINGABEFELDER FUER DEN MONAT UND DIE WOCHE . 253 7.3.7 EIN EINGABEFELD FUER DIE SUCHE MIT INPUT TYPE="SEARCH" . 254 7.3.8 EIN EINGABEFELD FUER E-MAIL-ADRESSEN MIT INPUT TYPE="EMAIL" . 254 7.3.9 EIN EINGABEFELD FUER EINE URL MIT INPUT TYPE="URL" . 255 7.3.10 EIN EINGABEFELD FUER TELEFONNUMMERN MIT INPUT TYPE="TEL" . 255 7.3.11 EIN EINGABEFELD FUER ZAHLEN MIT INPUT TYPE="NUMBER" . 255 7.3.12 EIN EINGABEFELD FUER ZAHLEN EINES BESTIMMTEN BEREICHS . 256 7.3.13 AUSGABE VON WERTEN UND BERECHNUNGEN MIT OUTPUT . 256 7.4 DIE HTML-ATTRIBUTE FUER EINGABEFELDER . 257 7.4.1 DEN EINGABEFOKUS MIT DEM HTML-ATTRIBUT AUTOFOCUS SETZEN . 257 7.4.2 AUTOVERVOLLSTAENDIGUNG (DE)AKTIVIEREN MIT DEM ATTRIBUT AUTOCOMPLETE . 258 7.4.3 EINE LISTE MIT VORSCHLAEGEN MIT DEM HTML-ATTRIBUT LIST UND DATAIIST . 258 7.4.4 MINIMALE UND MAXIMALE WERTE UND DIE SCHRITTWEITE FESTLEGEN . 259 7.4.5 DAS AUSWAEHLEN ODER DIE EINGABE MEHRERER WERTE MIT MULTIPLE . 259 7.4.6 REGULAERE AUSDRUECKE FUER EINGABEFELDER MIT PATTEM . 259 7.4.7 EIN PLATZHALTER FUER EIN EINGABEFELD MIT PLACEHOLDER . 260 7.4.8 EINE EINGABE ERFORDERLICH MACHEN MIT DEM ATTRIBUT REQUIRED . 260 7.4.9 FEHLERMELDUNGEN FUER EINGABEFELDER STEUERN . 260 7.5 WEITERE NUETZLICHE HELFERLEIN FUER EINGABEFELDER . 263 7.5.1 FORMULARELEMENTE MIT DEM HTML-ATTRIBUT DISABLED DEAKTIVIEREN . 264 7.5.2 BEI EINGABEFELDERN MIT DEM ATTRIBUT READONLY NUR LESEN ERLAUBEN . 264 7.5.3 FORMULARELEMENTE GRUPPIEREN MIT FIELDSET UND LEGEND . 265 7.5.4 FORTSCHRITTSANZEIGE MIT PROGRESS . 266 7.5.5 WERTE VISUALISIEREN MIT METER . 266 7.6 FORMULARDATEN MIT PHP VERSENDEN . 267 7.6.1 DIE DATEN VOM WEBBROWSER ZUR WEITERVERARBEITUNG UEBERTRAGEN . 268 7.6.2 DIE POST-METHODE . 269 7.6.3 DIEGET-METHODE . 270 7.6.4 DIE DATEN MIT EINEM PHP-SKRIPT VERARBEITEN . 271 7.7 INTERAKTIVE HTML-ELEMENTE . 274 7.7.1 INHALTE AUF-/ZUKLAPPEN MIT DETAILS UND SUMMARY . 274 7.7.2 EINE DIALOGBOX MIT DIALOG . 275 7.8 ZUSAMMENFASSUNG . 277 8 EINFUEHRUNG IN CASCADING STYLESHEETS (CSS) 279 8.1 DAS GRUNDLEGENDE ANWENDUNGSPRINZIP VON CSS . 280 8.1.1 AUFBAU EINER CSS-REGEL . 282 8.1.2 DIE DEKLARATION EINES SELEKTORS . 283 8.1.3 KOMMENTAREFUER CSS-CODE VERWENDEN . 284 8.1.4 EIN PAAR HINWEISE ZUR CODEFORMATIERUNG VON CSS-CODE . 285 8.2 EINBINDUNGSMOEGLICHKEITEN VON CSS IN HTML . 286 8.2.1 STILANWEISUNGEN DIREKT IM HTML-TAG MIT DEM HTML-ATTRIBUT STYLE . 286 8.2.2 STILANWEISUNGEN IM DOKUMENTKOPF MIT DEM HTML-ELEMENT STYLE . 287 8.2.3 STILANWEISUNGEN AUS EINER EXTERNEN CSS-DATEI MIT IINK EINBINDEN . 288 8.2.4 KOMBINIEREN VON CSS-REGELN IM KOPFBEREICH UND IN EXTERNEN CSS-DATEIEN . 289 8.2.5 EMPFEHLUNG: TRENNEN SIE HTML UND CSS . 290 8.2.6 STILANWEISUNGEN AUS EINER EXTERNEN CSS-DATEI MIT @IMPORT EINBINDEN . 290 8.2.7 MEDIENSPEZIFISCHE STYLESHEETS FUER BESTIMMTE AUSGABEGERAETE . 291 8.2.8 MEDIENSPEZIFISCHE STYLESHEETS MIT CSS . 292 8.3 CSS IM WEBBROWSER ANALYSIEREN . 293 8.4 WERTE AN CSS-EIGENSCHAFTEN UEBERGEBEN . 294 8.4.1 DIE VERSCHIEDENEN MASSEINHEITEN IN CSS . 294 8.4.2 ZEICHENKETTEN UND SCHLUESSELWOERTER ALS WERT FUER CSS-EIGENSCHAFTEN . 297 8.4.3 DIE VIELEN MOEGLICHKEITEN, EINE FARBE IN CSS ZU VERWENDEN . 297 8.4.4 WINKELMASSE IN CSS . 304 8.4.5 WERTE MIT KURZSCHREIBWEISE AN CSS-EIGENSCHAFT UEBERGEBEN . 305 8.5 ZUSAMMENFASSUNG . 306 9 DIE SELEKTOREN VON CSS 307 9.1 DIE EINFACHEN SELEKTOREN VON CSS . 309 9.1.1 HTML-ELEMENTE MIT DEM TYPSELEKTOR ANSPRECHEN . 309 9.1.2 KLASSENSELEKTOR - ELEMENTE MIT EINEM BESTIMMTEN CLASS-WERT ANSPRECHEN . 312 9.1.3 ID-SELEKTOR - EIN ELEMENT MIT EINEM BESTIMMTEN ID-WERT ANSPRECHEN . 315 9.1.4 UNIVERSALSELEKTOR-ALLE ELEMENTE IN EINEM DOKUMENT ANSPRECHEN . 316 9.1.5 ELEMENTE ANHAND DER ATTRIBUTE MIT DEM ATTRIBUTSELEKTOR ANSPRECHEN . 317 9.1.6 ATTRIBUTSELEKTOR FUER ATTRIBUTE MIT EINEM BESTIMMTEN ATTRIBUTWERT . 319 9.1.7 ATTRIBUTSELEKTOR FUER ATTRIBUTE MIT EINEM BESTIMMTEN TEILWERT . 322 9.1.8 CSS-PSEUDOKLASSEN, DIE SELEKTOREN FUER BESTIMMTE EIGENSCHAFTEN . 323 9.1.9 DIE KOMFORTABLEN STRUKTUR-PSEUDOKLASSEN VON CSS . 327 9.1.10 WEITERE NUETZLICHE PSEUDOKLASSEN . 333 9.1.11 PSEUDOELEMENTE, DIE SELEKTOREN FUER NICHT VORHANDENE ELEMENTE . 334 9.2 KOMBINATOREN - DIE SELEKTOREN VERKETTEN . 337 9.2.1 DER NACHFAHRENSELEKTOR (EL E2) . 339 9.2.2 DER KINDSELEKTOR (EL E2) . 340 9.2.3 DER NACHBARSELEKTOR (EL + E2) . 341 9.2.4 DER GESCHWISTERSELEKTOR (EL ~ E2) . 342 9.3 EMPFEHLUNG: SO VERWENDEN SIE EFFIZIENTES UND EINFACHES CSS . 343 9.3.1 SO SCHREIBEN SIE PERFORMANTES CSS . 343 9.3.2 EMPFEHLUNG: HALTEN SIE DEN CSS-CODE SO EINFACH WIE MOEGLICH . 345 9.4 ZUSAMMENFASSUNG . 346 10 DIE VERERBUNG UND DIE KASKADE 349 10.1 DAS PRINZIP DER VERERBUNG IN CSS . 349 10.1.1 VORSICHT BEI DER VERWENDUNG VON RELATIVEN EIGENSCHAFTEN . 353 10.1.2 ES WIRD NICHT ALLES WEITERVERERBT . 353 10.1.3 VERERBUNG ERZWINGEN MIT INHERIT . 354 10.1.4 DEN STANDARDWERT EINER CSS-EIGENSCHAFT WIEDERHERSTELLEN (INITIAL) . 356 10.1.5 VERERBEN ERZWINGEN ODER WERT WIEDERHERSTELLEN (UNSET) . 356 10.1.6 VERERBEN ERZWINGEN ODER WERTE WIEDERHERSTELLEN FUER ALLE EIGENSCHAFTEN 356 10.2 DAS REGELSYSTEM DER KASKADE VERSTEHEN . 358 10.2.1 DIE HERKUNFT EINES STYLESHEETS . 359 10.2.2 DIE PRIORITAET EINER CSS-EIGENSCHAFT MIT LIMPORTANT ERHOEHEN . 360 10.2.3 SORTIERUNG NACH WICHTIGKEIT UND HERKUNFT . 360 10.2.4 SORTIEREN NACH GEWICHTUNG DER SELEKTOREN (SPEZIFITAET) . 362 10.2.5 ZUSAMMENFASSUNG ZUM REGELSYSTEM DER KASKADE . 366 10.2.6 DIE KASKADE IM BROWSER ANALYSIEREN . 366 10.3 ZUSAMMENFASSUNG. 367 11 DAS BOX-MODELL VON CSS 369 11.1 DAS KLASSISCHE BOX-MODELL VON CSS . - . 370 11.1.1 DEN INHALTSBEREICH MIT WIDTH UND HEIGHT VORGEBEN . 370 11.1.2 DEN INNENABSTAND MIT PADDING ANGEBEN . 374 11.1.3 DEN RAHMEN MIT BORDER ERSTELLEN . 375 11.1.4 DEN AUSSENABSTAND MIT MARGIN EINRICHTEN . 375 11.1.5 MARGIN, BORDER, PADDING UND CONTENT MIT DEN ENTWICKLERTOOLS ANALYSIEREN . 377 11.1.6 COLLAPSING MARGINS (ZUSAMMENFALLENDE VERTIKALE AUSSENABSTAENDE) . 378 11.1.7 GESAMTBREITE EINER BOX ERMITTELN . 380 11.2 DAS ALTERNATIVE BOX-MODELL VON CSS . 382 11.2.1 DAS BOX-MODELL BOX-SIZING VERWENDEN . 383 11.2.2 DAS ALTERNATIVE BOX-MODELL EINSETZEN . 383 11.3 LOGISCHE EIGENSCHAFTEN. 386 11.4 DAS BOX-MODELL FUER INLINE-ELEMENTE . 389 11.5 BOXEN GESTALTEN . 390 11.5.1 EINEN RAHMEN MIT DER EIGENSCHAFT BORDER HINZUFUEGEN UND GESTALTEN . 390 11.5.2 HINTERGRUNDFARBE MIT BACKGROUND-COLOR FESTLEGEN . 394 11.5.3 HINTERGRUNDGRAFIKEN VERWENDEN . 394 11.5.4 DIE BOXEN DURCHSICHTIG GESTALTEN . 401 11.5.5 EINEN FARBVERLAUF HINZUFUEGEN . 402 11.5.6 EINEN SCHLAGSCHATTEN MIT DER EIGENSCHAFT BOX-SHADOW HINZUFUEGEN . 405 11.5.7 RUNDE ECKEN MIT DER CSS-EIGENSCHAFT BORDER-RADIUS HINZUFUEGEN . 406 11.6 EXKURS: WEBBROWSER-PRAEFIXE (CSS VENDOR PREFIXES) . 409 11.7 ZUSAMMENFASSUNG . 411 12 CSS-POSITIONIERUNG 413 12.1 DER NORMALE ELEMENTFLUSS . 413 12.1.1 BLOCK-ELEMENTE . 414 12.1.2 INLINE-ELEMENTE . 414 12.1.3 MIT DISPLAY DIE ART DER BOX FESTLEGEN . 414 12.2 POSITIONIERUNG MIT DER CSS-EIGENSCHAFT POSITION . 416 12.2.1 DIE NORMALE POSITIONIERUNG (POSITION: STATIC) . 417 12.2.2 PLATZIERUNG VON ELEMENTEN MIT TOP, RIGHT, BOTTOM UND LEFT . 418 12.2.3 DIE RELATIVE POSITIONIERUNG (POSITION: RELATIVE) . 419 12.2.4 DIE ABSOLUTE POSITIONIERUNG (POSITION: ABSOLUTE) . 420 12.2.5 DIE FIXE POSITIONIERUNG (POSITION: FIXED) . 424 12.2.6 DIE HAFTENDE POSITIONIERUNG (POSITION: STICKY) . 426 12.3 UEBEREINANDERSTAPELN REGELN MIT Z-INDEX . 428 12.4 SCHWEBENDE BOXEN FUER DIE POSITIONIERUNG MIT . 432 12.4.1 DAS UMFLIESSEN BEENDEN . 435 12.4.2 FLOATS ZU EINER EINHEIT ZUSAMMENFASSEN MIT FLOW-ROOT . 436 12.4.3 NICHT RECHTECKIGE FORMEN UMFLIESSEN LASSEN . 438 12.4.4 DIE CSS-EIGENSCHAFT CLIP-PATH . 443 12.5 ZUSAMMENFASSUNG . 447 13 FLEXBOXEN 449 13.1 DEN FLEXBOX-CONTAINER ERSTELLEN . 450 13.1.1 DIE FLIESSRICHTUNG ANPASSEN . 452 13.1.2 FLEX-ITEMS IM FLEXBOX-CONTAINER IN DER ZEILE UMBRECHEN . 454 13.2 FLEX-ITEMS ANPASSEN . 455 13.2.1 WACHSTUMSFAKTOR VON FLEX-ITEMS MIT FLEX-GROW FESTLEGEN . 455 13.2.2 SCHRUMPFFAKTOR VON FLEX-ITEMS MIT FLEX-SHRINK FESTLEGEN . 456 13.2.3 DIE BASISBREITE VON FLEX-ITEMS MIT FLEX-BASIS FESTLEGEN . 456 13.2.4 DIE REIHENFOLGE DER FLEX-ITEMS MIT ORDER BESTIMMEN . 460 13.3 DIE FLEX-ITEMS IM FLEX-CONTAINER AUSRICHTEN . 460 13.3.1 FLEX-ITEMS AN DER HAUPTACHSE DES FLEXBOX-CONTAINERS AUSRICHTEN . 461 13.3.2 AUSRICHTUNG DER FLEX-ITEMS ENTLANG DER QUERACHSE DES FLEXBOX-CONTAINERS . 462 13.3.3 EXTRABEHANDLUNG FUER EIN FLEX-ITEM IM FLEXBOX-CONTAINER . 464 13.3.4 FLEX-ITEMS BEI EINEM MEHRZEILIGEN FLEXBOX-CONTAINER AUSRICHTEN . 466 13.3.5 LEERRAUM ZWISCHEN DEN FLEX-ITEMS HINZUFUEGEN . 467 13.4 BEISPIEL: NAVIGATIONSBAR MIT FLEXBOXEN . 468 13.5 ZUSAMMENFASSUNG. 471 14 RESPONSIVES WEBDESIGN UND MEDIA QUERIES 473 14.1 GRUNDLAGENWISSEN ZUM RESPONSIVEN WEBDESIGN . 473 14.1.1 VERWENDEN SIE IMMER DIE VIEWPORT-META-ANGABE . 475 14.1.2 DIE MEDIENABFRAGEN FUER MEDIENEIGENSCHAFTEN . 478 14.1.3 LAYOUTUMBRUECHE (BREAKPOINTS) . 485 14.1.4 FLEXIBLE UND RESPONSIVE BILDER . 490 14.1.5 TYPOGRAFIE . 491 14.2 DIE DRUCKVERSION EINER WEBSITE . 492 14.2.1 INHALTE AUSBLENDEN . 493 14.2.2 WEBLINKS FUER DEN DRUCK SICHTBAR MACHEN . 493 14.2.3 SEITENUMBRUECHE BEIM DRUCKEN STEUERN . 494 14.2.4 LAYOUT ANPASSEN BZW. VEREINFACHEN . 495 14.3 AUF BENUTZEREINSTELLUNGEN REAGIEREN . 496 14.3.1 DER DARK MODE MIT PREFERS-COLOR-SCHEME . 496 14.3.2 STAERKERE KONTRASTE ANBIETEN MIT PREFERS-CONTRAST . 501 14.3.3 ERZWUNGENE FARBEN MIT FORCED-COLORS ERMITTELN . 503 14.3.4 VERZICHT AUF BEWEGUNG MIT PREFERS-REDUCED-MOTION . 505 14.3.5 DATENVERBRAUCH MIT PREFERS-REDUCED-DATA REDUZIEREN . 506 14.4 CONTAINER QUERIES . 507 14.5 BERECHNUNGEN MIT CSS UND DER CALC()-FUNKTION . 512 14.6 ZUSAMMENFASSUNG . 513 15 CSS GRID 515 15.1 GRID-CONTAINER UND RASTERELEMENTE VERWENDEN . 516 15.1.1 EINEN GRID-CONTAINER MIT SPALTEN UND ZEILEN ERZEUGEN . 517 15.1.2 GRID-ITEMS IM RASTER PLATZIEREN . 520 15.1.3 LAYOUTAENDERUNG LEICHTGEMACHT . 527 15.1.4 ABSTAENDE ZWISCHEN DEN RASTERZEILEN . 528 15.1.5 RASTER IM WEBBROWSER UEBERPRUEFEN . 528 15.2 RESPONSIVES GRID OHNE MEDIA QUERIES . 529 15.2.1 AUTO-FILL UND DIE MINMAX()-FUNKTION . 531 15.2.2 AUTO-FIT VS. AUTO-FILL . 532 15.2.3 GRID-ITEMS AUFSPANNEN UND LUECKEN FUELLEN . 533 15.3 AUSRICHTEN VON GRID-ITEMS . 535 15.3.1 VERTIKALE AUSRICHTUNG MIT ALIGN-ITEMS UND ALIGN-SELF KONTROLLIEREN . 536 15.3.2 HORIZONTALE AUSRICHTUNG MIT JUSTIFY-ITEMS UND JUSTIFY-SELF KONTROLLIEREN . 537 15.3.3 GESAMTEN INHALT IM GRID-CONTAINER MIT ALIGN-CONTENT UND JUSTIFY-CONTENT AUSRICHTEN . 538 15.4 GRID-BEREICHE BENENNEN . 539 15.5 ZUSAMMENFASSUNG . 542 16 STYLEN MIT CSS 543 16.1 SCHRIFTFAMILIEN UND -FORMATIERUNG MIT FONT . 543 16.1.1 SCHRIFTARTEN MIT FONT-FAMILY AUSWAEHLEN . 544 16.1.2 SCHRIFTGROESSE MIT FONT-SIZE FESTLEGEN . 548 16.1.3 TYPOGRAFISCHE AUSZEICHNUNGEN MIT FONT-STYLE UND FONT-WEIGHT . 555 16.1.4 ZEILENABSTAND MIT LINE-HEIGHT DEFINIEREN . 556 16.1.5 KAPITAELCHEN MIT FONT-VARIANT ERSTELLEN . 557 16.1.6 DIE KURZSCHREIBWEISE DER SCHRIFTFORMATIERUNG MIT FONT . 558 16.2 @FONT-FACE, WEBFONTS UND VARIABLE FONTS . 559 16.2.1 VERSCHIEDENE DATEIFORMATE FUER WEBFONTS . 560 16.2.2 SCHRIFTEN VON GOOGLE IN DIE WEBSITE EINBINDEN . 561 16.2.3 LADESTATUS VON SCHRIFTEN MIT FONT-DISPLAY UEBERPRUEFEN . 564 16.2.4 PERFORMANCE-TIPPS FUER WEBFONTS . 565 16.2.5 VARIABLE FONTS . 566 16.3 WEITERERE ANPASSUNGSMOEGLICHKEITEN VON TEXT . 567 16.3.1 BUCHSTABEN UND WORTABSTAENDE MIT LETTER-SPACING UND WORD-SPACING FESTLEGEN . 567 16.3.2 DIE TEXTAUSRICHTUNG MIT TEXT-ALIGN FESTLEGEN . 569 16.3.3 DEN TEXT MIT TEXT-INDENT EINRUECKEN . 570 16.3.4 UNTER UND DURCHSTREICHEN VON TEXT MIT TEXT-DECORATION . 571 16.3.5 GROSS UND KLEINSCHREIBUNG VON TEXT MIT TEXT-TRANSFORM . 572 16.3.6 DEM TEXT SCHLAGSCHATTEN MIT TEXT-SHADOW HINZUFUEGEN . 573 16.3.7 TEXT MIT COLUMN-COUNT IN MEHRERE SPALTEN AUFTEILEN . 574 16.4 LISTEN MIT CSS GESTALTEN . 576 16.4.1 AUFZAEHLUNGSPUNKTE MIT LIST-STYLE-TYPE ANPASSEN . 576 16.4.2 BILDER ALS AUFZAEHLUNGSZEICHEN MIT LIST-STYLE-IMAGE VERWENDEN . 578 16.4.3 AUFZAEHLUNGSLISTE MIT LIST-STYLE-POSITION POSITIONIEREN . 578 16.4.4 DIE KURZSCHREIBWEISE LIST-STYLE FUER DIE LISTENGESTALTUNG . 579 16.4.5 DAS ::MARKER-PSEUDOELEMENT . 580 16.5 SCHOENERE TABELLEN MIT CSS GESTALTEN . 582 16.5.1 TABELLEN MIT FESTER BREITE ERSTELLEN . 582 16.5.2 ALLGEMEINES REZEPT: TABELLE SCHOEN MIT CSS GESTALTEN . 583 16.5.3 KOLLABIERENDE RAHMEN FUER TABELLENZELLEN MIT BORDER-COLLAPSE . 585 16.5.4 ABSTAND ZWISCHEN DEN ZELLEN MIT BORDER-SPACING EINSTELLEN . 585 16.5.5 LEERE TABELLENZELLEN ANZEIGEN MIT EMPTY-CELLS . 586 16.5.6 TABELLENBESCHRIFTUNG MIT CAPTION-SIDE POSITIONIEREN . 587 16.6 BILDER MIT CSS GESTALTEN . 588 16.6.1 DAS BILD IN EINEM CONTAINER MIT OBJECT-FIT UND OBJECT-POSITION ANPASSEN . 588 16.6.2 FLAECHENDECKENDE HINTERGRUNDBILDER VERWENDEN . 591 16.6.3 FESTES SEITENVERHAELTNIS FUER BILDER UND OBJEKTE FESTLEGEN . 594 16.6.4 FILTEREFFEKTE MIT CSS . 596 16.7 ELEMENTE TRANSFORMIEREN MIT CSS . 598 16.7.1 HTML-ELEMENTE SKALIEREN MIT TRANSFORM: SCALE() . 598 16.7.2 HTML-ELEMENTE DREHEN MIT TRANSFORM: ROTATE() . 599 16.7.3 HTML-ELEMENTE NEIGEN MIT TRANSFORM: SKEW() . 599 16.7.4 HTML-ELEMENTE VERSCHIEBEN MIT TRANSFORM: TRANSLATEQ . 599 16.7.5 VERSCHIEDENE TRANSFORMATIONEN KOMBINIEREN . 600 16.7.6 ES GEHT AUCH MIT ANDEREN HTML-ELEMENTEN . 601 16.8 UEBERGAENGE UND ANIMATIONEN MIT CSS ERSTELLEN . 601 16.9 HTML-FORMULARE MIT CSS STYLEN . 605 16.9.1 EIN HTML-FORMULAR ORDENTLICH STRUKTURIEREN . 605 16.9.2 AUSRICHTEN DER FORMULARELEMENTE MIT CSS . 607 16.9.3 GESTALTEN DER FORMULARELEMENTE MIT CSS . 610 16.10 ZUSAMMENFASSUNG . 614 17 DER CSS-PRAEPROZESSOR SASS UND SCSS 615 17.1 SASS ODER SCSS . 616 17.2 VON SASS/SCSS ZU CSS . 617 17.3 EINFUEHRUNG IN SASS . 617 173.1 SASS INSTALLIEREN UND EINRICHTEN . 617 173.2 VARIABLEN MIT SASS VERWENDEN . 622 1733 VERSCHACHTELUNGEN MIT SASS . 624 173.4 MIXINS (@MIXIN, @INLCUDE) . 626 173.5 EXTEND (@EXTEND) . 629 173.6 MEDIA QUERIES UND @CONTENT . 631 173.7 OPERATOREN . 634 17.3. 8 FARBEN UND HELLIGKEIT ANPASSEN . 635 17.3. 9 KONTROLLSTRUKTUREN VON SASS . 638 17.3.1 0 FUNKTIONEN @FUNCTION . 641 17.3.1 1 @IMPORT . 643 17.3.1 2 KOMMENTARE . 644 17.4 CUSTOM PROPERTIES MIT REINEM CSS . 644 17.4.1 WAS SIND CUSTOM PROPERTIES? . 645 17.4.2 VERWENDUNG VON CUSTOM PROPERTIES MIT VAR() . 646 17.4.3 ERLAUBTE WERTE MIT CUSTOM PROPERTIES VERWENDEN . 646 17.4.4 WERTE AUFTEILEN UND KURZFRISTIG AENDERN . 647 17.4.5 JAVASCRIPT UND CUSTOM PROPERTIES . 648 17.4.6 FAZIT ZU DEN CUSTOM PROPERTIES . 650 17.5 VERSCHACHTELTES CSS . 651 17.5.1 WIE MAN DIE VERSCHACHTELUNG ANWENDET . 651 17.5.2 MEDIA QUERIES MIT VERSCHACHTELTEM CSS . 656 17.5.3 NICHT VERWANDTE SELEKTOREN . 658 17.5.4 ACHTUNG BEI DEKLARATIONEN NACH DER VERSCHACHTELUNG . 659 17.6 ZUSAMMENFASSUNG . 659 18 EINE KURZE EINFUEHRUNG IN JAVASCRIPT 661 18.1 JAVASCRIPT IN DER WEBENTWICKLUNG . 662 18.2 JAVASCRIPT-PROGRAMME SCHREIBEN UND AUSFUEHREN . 664 18.2.1 EINE JAVASCRIPT-DATEI IN EINE HTML-DATEI EINBINDEN . 665 18.2.2 JAVASCRIPT INNERHALB VON HTML SCHREIBEN . 667 18.2.3 POSITION DES JAVASCRIPTS UND SEINE AUSFUEHRUNG IM HTML-DOKUMENT . 668 18.2.4 ATTRIBUTE, UM DAS LADEVERHALTEN VON JAVASCRIPT ZU BEEINFLUSSEN (ASYNC, DEFER) . 669 18.2.5 DAS NOSCRIPT -ELEMENT FUER KEIN JAVASCRIPT . 670 18.3 AUSGABE VON JAVASCRIPT . 670 18.3.1 STANDARDDIALOGE (UND EINGABEDIALOG) . 670 18.3.2 AUSGABE AUF DIE KONSOLE . 671 18.3.3 AUSGABE AUF DIE WEBSEITE . 674 18.3.4 JAVASCRIPT OHNE WEBBROWSER AUSFUEHREN . 675 18.3.5 DEN JAVASCRIPT-CODE MIT ANMERKUNGEN KOMMENTIEREN . 677 18.4 DIE VERWENDUNG VON VARIABLEN IN JAVASCRIPT . 677 18.4.1 KONSTANTEN DEFINIEREN . 680 18.4.2 STRIKTER MODUS MIT USE STRICT . 681 18.5 UEBERSICHT UEBER DIE JAVASCRIPT-DATENTYPEN . 681 18.5.1 NUMBER-DATENTYP (ZAHLEN) . 682 18.5.2 STRING-DATENTYPEN (ZEICHENKETTEN) . 682 18.5.3 TEMPLATE-STRINGS . 685 18.5.4 BOOLEAN-DATENTYP . 685 18.5.5 UNDEFINED UND NULL-DATENTYPEN . 686 18.5.6 OBJEKTE . 686 18.5.7 DATENTYPEN KONVERTIEREN . 687 18.6 ARITHMETISCHE OPERATOREN ZUM RECHNEN IN JAVASCRIPT. 688 18.7 BEDINGTE ANWEISUNGEN IN JAVASCRIPT . 690 18.7.1 TRUE ODER FALSE: BOOLESCHER WAHRHEITSWERT . 691 18.7.2 DIE VERSCHIEDENEN VERGLEICHSOPERATOREN IN JAVASCRIPT VERWENDEN . 692 18.7.3 DIE IF-VERZWEIGUNG VERWENDEN . 693 18.7.4 DEN AUSWAHLOPERATOR VERWENDEN . 694 18.7.5 LOGISCHE OPERATOREN . 695 18.7.6 NULLISH COALESCING OPERATOR . 696 18.7.7 MEHRFACHVERZWEIGUNG MIT SWITCH . 697 18.8 PROGRAMMANWEISUNGEN MEHRMALS WIEDERHOLEN MIT SCHLEIFEN . 698 18.8.1 INKREMENT UND DEKREMENTOPERATOR . 698 18.8.2 DIE KOPFGESTEUERTE FOR-SCHLEIFE . 699 18.8.3 DIE KOEPF GESTEUERTE WHILE-SCHLEIFE . 700 18.8.4 DIE FUSSGESTEUERTE DO-WHILE-SCHLEIFE . 701 18.8.5 DEN ANWEISUNGSBLOCK MIT BREAK BEENDEN . 701 18.8.6 MIT CONTINUE ZUM SCHLEIFENANFANG SPRINGEN . 702 18.9 ZUSAMMENFASSUNG. 702 19 ARRAYS, FUNKTIONEN UND OBJEKTE IN JAVASCRIPT 703 19.1 FUNKTIONEN IN JAVASCRIPT . 703 19.1.1 DIE VERSCHIEDENEN MOEGLICHKEITEN, EINE FUNKTION IN JAVASCRIPT ZU DEFINIEREN . 704 19.1.2 FUNKTIONEN AUFRUFEN UND FUNKTIONSPARAMETER . 706 19.1.3 RUECKGABEWERT EINER FUNKTION . 709 19.1.4 DER GUELTIGKEITSBEREICH VON VARIABLEN IN EINER FUNKTION . 710 19.1.5 FUNKTIONEN IN DER KURZSCHREIBWEISE DEFINIEREN (ARROW FUNCTIONS) . 712 19.1.6 FUNKTION IN EINER WEBSEITE VERWENDEN . 713 19.2 ARRAYS . 715 19.2.1 ZUGRIFF AUF DIE EINZELNEN ELEMENTE IM ARRAY . 717 19.2.2 MEHRDIMENSIONALE ARRAYS . 718 19.2.3 EINEM ARRAY NEUE ELEMENTE HINZUFUEGEN BZW. ENTFERNEN . 719 19.2.4 ARRAYS SORTIEREN . 724 19.2.5 SUCHEN IN ARRAYS . 726 19.2.6 WEITERE METHODEN FUER ARRAYS . 726 19.3 ZEICHENKETTEN UND REGULAERE AUSDRUECKE . 727 19.3.1 NUETZLICHE FUNKTIONEN FUER ZEICHENKETTEN . 728 19.3.2 REGULAERE AUSDRUECKE AUF ZEICHENKETTEN ANWENDEN . 728 19.4 OBJEKTORIENTIERTE PROGRAMMIERUNG IN JAVASCRIPT. 729 19.4.1 WAS SIND OBJEKTE GENAU? . 729 19.4.2 OBJEKTE UEBER KONSTRUKTORFUNKTIONEN ERSTELLEN . 731 19.4.3 OBJEKTE MIT DER KLASSENSYNTAX ERZEUGEN . 732 19.4.4 ZUGRIFF AUF DIE OBJEKTEIGENSCHAFTEN UND -METHODEN - SETTER UND GETTER . 733 19.4.5 DAS SCHLUESSELWORT THIS . 735 19.5 WEITERE GLOBALE OBJEKTE . 736 19.5.1 DAS OBERSTE OBJEKT OBJECT . 737 19.5.2 OBJEKTE FUER DIE PRIMITIVEN DATENTYPEN NUMBER, STRING UND BOOLEAN . 737 19.5.3 FUNCTION-OBJEKT . 739 19.5.4 DATE-OBJEKT . 739 19.5.5 . . 740 19.5.6 MAP-OBJEKT . 740 19.5.7 SET-OBJEKT . 740 19.6 ZUSAMMENFASSUNG . 741 20 WEBSEITEN DYNAMISCH AENDERN 743 20.1 EINFUEHRUNG IN DAS DOM EINES HTML-DOKUMENTS . 743 20.2 DAS DOCUMENT-OBJEKT . 745 20.3 DIE PROGRAMMIERSCHNITTSTELLE VON DOM . 745 20.4 AUF ELEMENTE IM DOM ZUGREIFEN . 747 20.4.1 EIN HTML-ELEMENT MIT EINEM BESTIMMTEN ID-ATTRIBUT SUCHEN . 748 20.4.2 HTML-ELEMENTE MIT EINEM BESTIMMTEN TAG-NAMEN SUCHEN . 749 20.4.3 HTML-ELEMENTE MIT EINEM BESTIMMTEN CLASS-ATTRIBUT SUCHEN . 752 20.4.4 HTML-ELEMENTE MIT EINEM BESTIMMTEN NAME-ATTRIBUT SUCHEN . 752 20.4.5 QUERYSELECTOR() UND QUERYSELECTORAIIQ VERWENDEN . 754 20.4.6 WEITERE OBJEKT UND EIGENSCHAFTENSAMMLUNGEN . 756 20.5 AUFJAVASCRIPT-EVENTSREAGIEREN . 759 20.6 MIT DEM EVENT-HANDLER DIE EVENTS BEHANDELN . 761 20.6.1 EVENT-HANDLER ALS HTML-ATTRIBUT IM HTML-ELEMENT EINRICHTEN (VERALTET) 761 20.6.2 EVENT-HANDLER ALS EIGENSCHAFT EINES OBJEKTS EINRICHTEN . 762 20.6.3 EINEN EVENT-HANDLER MIT ADDEVENTLISTENER() EINRICHTEN (BEST PRACTICE) . 763 20.7 GAENGIGE JAVASCRIPT-EVENTS IN DER UEBERSICHT . 765 20.7.1 DIE JAVASCRIPT-EVENTS DER BENUTZEROBERFLAECHE (WINDOW-EVENTS) . 765 20.7.2 JAVASCRIPT-EVENTS, DIE IN VERBINDUNG MIT DER MAUS AUFTRETEN KOENNEN . 767 20.7.3 JAVASCRIPT-EVENTS FUER GERAETE MIT EINEM TOUCHSCREEN . 768 20.7.4 JAVASCRIPT-EVENTS, DIE IN VERBINDUNG MIT DER TASTATUR AUFTRETEN . 769 20.7.5 JAVASCRIPT-EVENTS FUER HTML-FORMULARE . 770 20.7.6 JAVASCRIPT-EVENTS FUER DIE WEB-APIS . 770 20.8 STANDARDAKTION VON EVENTS UNTERDRUECKEN . 770 20.9 DER EVENT-FLUSS (EVENT-PROPAGATION) . 771 20.9.1 MEHR ZUR BUBBLING-PHASE . 772 20.9.2 BUBBLING MIT DER METHODE STOPPROPAGATION() ABBRECHEN . 773 20.9.3 EINGREIFEN IN DEN EVENT-FLUSS WAEHREND DER CAPTURING-PHASE . 775 20.9.4 MEHR INFORMATIONEN ZU CAPTURING-PHASE UND BUBBLING-PHASE . 776 20.10 WEITERE INFORMATIONEN ZU EVENTS MIT DEM EVENT-OBJEKT . 776 20.11 HTML-ATTRIBUT ODER DEN TEXTKNOTEN AENDERN . 779 20.11.1 DEN INHALT VON HTML-ELEMENTEN MIT INNERHTML AENDERN . 780 20.11.2 DEN WERT EINES HTML-ATTRIBUTS AENDERN . 781 20.12 HTML-ELEMENTE HINZUFUEGEN, AENDERN, ENTFERNEN . 783 20.12.1 NEUES HTML-ELEMENT UND INHALT ERZEUGEN UND HINZUFUEGEN . 784 20.12.2 HTML-ELEMENTE NOCH GEZIELTER IM DOM-BAUM ANSTEUERN . 786 20.12.3 EIN NEUES HTML-ELEMENT GEZIELTER DEM DOM-BAUM HINZUFUEGEN . 790 20.12.4 VORHANDENES HTML-ELEMENT VOM DOM-BAUM LOESCHEN . 792 20.12.5 EIN HTML-ELEMENT IM DOM-BAUM DURCH EIN ANDERES ERSETZEN . 793 20.12.6 EINEN KNOTEN ODER GANZE FRAGMENTE DES DOM-BAUMES KLONEN . 794 20.12.7 VERSCHIEDENE METHODEN, DIE HTML-ATTRIBUTE ZU MANIPULIEREN . 795 20.12.8 DAS TEMPLATE -HTML-TAG . 798 20.13 CSS UND JAVASCRIPT. 801 20.13.1 DIREKTFORMATIERUNG UEBER INLINE-STYLES . 801 20.13.2 MEHRERE STYLES AUF EINMAL ANWENDEN . 802 20.13.3 CSS-KLASSEN MIT JAVASCRIPT AENDERN . 803 20.14 HTML-FORMULARE UND JAVASCRIPT . 804 20.14.1 TEXTEINGABEFELDER MIT JAVASCRIPT EINLESEN . 805 20.14.2 AUSWAHLLISTEN MIT JAVASCRIPT EINLESEN . 806 20.14.3 RADIOSCHALTFLAECHEN UND CHECKBOXEN MIT JAVASCRIPT EINLESEN . 807 20.14.4 SCHALTFLAECHEN MIT JAVASCRIPT ABFANGEN . 809 20.14.5 DIE FORTSCHRITTSANZEIGE PROGRESS MIT JAVASCRIPT STEUERN . 810 20.15 ZUSAMMENFASSUNG . 811 21 EINFUEHRUNG IN DIE WEB-APIS (BROWSER-APIS) 813 21.1 VIDEO UND AUDIO-MEDIA-API . 814 21.1.1 EIN VIDEO MIT JAVASCRIPT UND DER MEDIA-API STEUERN . 815 21.1.2 EINE AUDIODATEI MIT JAVASCRIPT UND DER MEDIA-API STEUERN . 819 21.2 DEN STANDORT ERMITTELN MIT DER GEOLOCATION-API . 821 21.2.1 DIE GEOLOCATION-API IN EINEM HTML-DOKUMENT VERWENDEN . 822 21.2.2 FEHLER UND ZUGRIFFSRECHTE DER GEOLOCATION-API BEHANDELN . 824 21.2.3 FEINTUNING MIT WEITEREN OPTIONEN DER GEOLOCATION-API . 826 21.2.4 DIE POSITION DES BENUTZERS DAUERHAFT UEBERWACHEN . 828 21.2.5 DIE POSITION DES BENUTZERS AUF EINER KARTE ANZEIGEN . 829 21.3 WEB STORAGE - DATENBANK FUER OFFLINEANWENDUNGEN . 833 21.3.1 COOKIES MIT JAVASCRIPT REALISIEREN . 837 21.3.2 COOKIES VS. WEB STORAGE . 842 21.3.3 WEITERE OFFLINETECHNOLOGIEN IM UEBERBLICK . 842 21.3.4 DIE INTERNETVERBINDUNG DES BENUTZERS PRUEFEN . 843 21.4 WEB WORKERS - DIE HELFER IM HINTERGRUND . 845 21.5 AKTUALISIEREN OHNE ANFRAGE MIT SERVER-SENT EVENTS . 853 21.6 WEITERE INTERESSANTE WEB-APIS IM SCHNELLDURCHLAUF . 857 21.6.1 KOMMUNIKATION IN ECHTZEIT MIT DEN WEBSOCKETS . 857 21.6.2 SPRACH UND VIDEOTELEFONIE MIT WEBRTC . 859 21.6.3 3D-GRAFIKEN UND SPIELE MIT WEBGL . 860 21.6.4 DER UMGANG MIT LOKALEN DATEIEN MIT DER FILE-API . 860 21.6.5 UEBERSICHT ALLER WEB-APIS . 863 21.7 ZUSAMMENFASSUNG . 864 22 EINE EINFUEHRUNG IN AJAX UND DIE FETCH-API 865 22.1 EINE EINFUEHRUNG IN DIE AJAX-PROGRAMMIERUNG . 865 22.1.1 EIN EINFACHES AJAX-BEISPIEL BEI DER AUSFUEHRUNG . 867 22.1.2 DAS XMLHTTPREQUEST-OBJEKT ERZEUGEN . 869 22.1.3 EINE ANFRAGE AN DEN SERVER STELLEN . 869 22.1.4 DATEN MITSENDEN . 870 22.1.5 DEN STATUS DES XMLHTTPREQUEST-OBJEKTS ERMITTELN . 871 22.1.6 DIE ANTWORT VOM SERVER WEITERVERARBEITEN . 873 22.1.7 DAS AJAX-BEISPIEL BEI DER AUSFUEHRUNG . 873 22.1.8 EIN KOMPLEXERES AJAX-BEISPIEL MIT XML UND DOM . 874 22.1.9 DAS JSON-DATENFORMAT MIT AJAX . 879 22.2 DIE FETCH-API. 883 22.2.1 DIE FETCH-API VERWENDEN . 883 22.2.2 DIE FETCH-API MIT PROMISES VERWENDEN . 885 22.2.3 POST-ANFRAGEN MIT DER FETCH-API VERWENDEN . 886 22.3 ZUSAMMENFASSUNG . 887 23 DAS BOOTSTRAP-FRAMEWORK EINSETZEN 889 23.1 BOOTSTRAP HERUNTERLADEN UND INTEGRIEREN . 890 23.2 DAS LAYOUT MIT DEM BOOTSTRAP-FRAMEWORK ERSTELLEN . 893 23.3 DIE KOMPONENTEN DES BOOTSTRAP-FRAMEWORKS VERWENDEN . 905 23.4 UEBERSICHT UEBER WEITERE BELIEBTE CSS-FRAMEWORKS . 915 23.5 ZUSAMMENFASSUNG . 916 24 EINFUEHRUNG IN DIE GRUNDLEGENDEN KONZEPTE VON REACT 917 24.1 WAS IST REACT? . 917 24.2 DIE UMGEBUNG FUER REACT EINRICHTEN . 918 24.3 EIN REACT-PROJEKT EINRICHTEN UND STARTEN . 919 24.4 HALLO WELT IN REACT . 922 24.5 JSX (JAVASCRIPT XML) . 924 24.5.1 JSX FUER DIE UL VERWENDEN . 924 24.5.2 JSX BEI HTML-ATTRIBUTEN . 927 24.53 ALLEIN STEHENDE ELEMENTE MUESSEN GESCHLOSSEN WERDEN . 928 24.5.4 FALLUNTERSCHEIDUNG . 928 24.5.5 LISTEN MIT REACT . 929 24.6 RENDERN VON ELEMENTEN . 932 24.7 REACT-KOMPONENTEN UND PROPS. 932 24.7.1 FUNKTIONSKOMPONENTE . 934 24.7.2 KLASSENKOMPONENTEN . 937 24.7.3 PROPS . 939 24.8 STATUSMANAGEMENT IN REACT . 941 24.8.1 DAS STATE-OBJEKT IN DER KLASSENKOMPONENTE VERWENDEN . 943 24.8.2 DAS STATE-OBJEKT VERAENDERN . 944 24.8.3 CHILDREN-PROPS . 946 24.9 EREIGNISSE UND DEREN HANDLER . 948 24.9.1 ARGUMENTE AN EVENT-HANDLER UEBERGEBEN . 949 24.10 LIFECYCLE VON KOMPONENTEN . 949 24.10.1 MOUNTING . 950 24.10.2 UPDATING . 955 24.10.3 UNMOUNTING . 957 24.10.4 REACTFRAGMENT . 959 24.11 DIE REACT-HOOKS-API. 960 24.11.1 LOKALER STATE IN FUNKTIONSKOMPONENTEN MIT USESTATE . 961 24.11.2 DER KOMPONENTEN-LIFECYCLE MIT USEEFFECT . 963 24.11.3 ZUGRIFF AUF DEN KONTEXT MIT USECONTEXT . 965 24.11.4 CUSTOM HOOKS . 967 24.12 CSS UND REACT . 968 24.12.1 INLINE-STYLING MIT DEM STYLE-ATTRIBUT . 970 24.12.2 CSS-KLASSEN IN JSX VERWENDEN . 973 24.12.3 CSS-MODULE IN REACT . 975 24.12.4 CSS IN JAVASCRIPT-STYLED COMPONENTS . 976 24.13 FORMULARE IN REACT . 979 24.13.1 CONTROLLED COMPONENTS . 980 24.13.2 UNCONTROLLED COMPONENTS . 982 24.13.3 ZUGRIFF AUF DAS NATIVE DOM UEBER EINE REFERENZ . 983 24.14 SO GEHT ES WEITER . 984 25 EINFUEHRUNG IN DIE GRUNDLEGENDEN KONZEPTE VON ANGULAR 987 25.1 DIE NOETIGEN WERKZEUGE . 987 25.2 HALLO WELT IN ANGULAR . 988 25.2.1 UEBERSICHT DER PROJEKTDATEIEN . 990 25.2.2 UEBERSICHT DER NG-BEFEHLE . 991 25.3 EINE KLEINE EINFUEHRUNG IN TYPESCRIPT . 992 25.3.1 TYPISIERUNG . 994 25.3.2 INTERFACES . 997 25.3.3 EXPORT UND IMPORT . 999 25.3.4 KLASSEN . : . 1000 25.3.5 WEITERES . 1005 25.4 KOMPONENTEN . 1005 25.4.1 KOMPONENTEN ERSTELLEN . 1006 25.4.2 KOMPONENTEN MIT CLI ERSTELLEN . 1011 25.5 KOMPONENTEN BINDEN . 1013 25.5.1 STRING-INTERPOLATION . 1014 25.5.2 PROPERTY-BINDING . 1016 25.5.3 EVENT-BINDING . 1018 25.5.4 TWO-WAY-BINDING . 1023 25.6 PIPES . 1025 25.6.1 VORDEFINIERTE PIPES . 1026 25.6.2 EIGENE PIPES . 1030 25.7 DER DATENFLUSS ZWISCHEN DEN KOMPONENTEN . 1034 25.7.1 INPUT-PROPERTY (EINGEHENDE DATEN) . 1037 25.7.2 OUTPUT-PROPERTY (AUSGEHENDE DATEN) . 1039 25.8 STYLES FUER KOMPONENTEN . 1041 25.8.1 STYLE ALS EXTERNE DATEI MIT STYLEURIS IN @COMPONENT . 1042 25.8.2 STYLES-EIGENSCHAFT IN @COMPONENT . 1042 25.8.3 INLINE-STYLE IM HTML-TEMPLATE . 1043 25.8.4 EXKURS: DAS BOOTSTRAP-FRAMEWORK IN ANGULAR VERWENDEN . 1043 25.9 DER LEBENSZYKLUS EINER KOMPONENTE . 1044 25.9.1 DER KONSTRUKTOR . 1045 25.9.2 REAGIEREN AUF AENDERUNGEN - NGONCHANGES . 1046 25.9.3 DIE KOMPONENTE INITIALISIEREN - NGONLNIT . 1047 25.9.4 IN DEN CHANGEDETECTION-LAUF EINGREIFEN - NGDOCHECK . 1047 25.9.5 VIEWCHILD UND CONTENTCHILD . 1048 25.9.6 AUFRAEUMARBEITEN MIT NGONDESTROY . 1048 25.10 DIREKTIVEN . 1048 25.10.1 STRUKTURDIREKTIVEN . .' . 1049 25.10.2 ATTRIBUTDIREKTIVEN NGCLASS UND NGSTYLE . 1057 25.10.3 EIGENE DIREKTIVEN ERSTELLEN . 1061 25.11 WIE GEHT ES NUN WEITER? . 1063 26 BEISPIELPROJEKT ERSTELLEN, TESTEN UND OPTIMIEREN 1065 26.1 PROJEKTPLANUNG . 1066 26.1.1 WER IST IHRE ZIELGRUPPE? . 1066 26.1.2 DEN INHALT PLANEN . 1066 26.2 GRUNDGERUEST MIT INHALT ERSTELLEN . 1068 26.3 DAS LAYOUT DER WEBSITE FESTLEGEN UND ERSTELLEN . 1070 26.3.1 DAS LAYOUT PLANEN . 1070 26.3.2 DAS GRUNDLEGENDE LAYOUT ERSTELLEN . 1071 26.4 TYPOGRAFIE-AUSWAHL DER SCHRIFTEN . 1077 26.5 NAVIGATION . 1080 26.6 FARBEN FUER DAS PROJEKT FESTLEGEN . 1082 26.7 GRAFIKEN UND BILDER . 1083 26.8 WEBSITE AUF FUNKTIONALITAET TESTEN . 1087 26.8.1 BROWSERTESTS . 1087 26.8.2 LAYOUTUMBRUECHE TESTEN . 1089 26.8.3 HTML UND CSS VALIDIEREN . 1090 26.9 WEBSITE AUF BARRIEREFREIHEIT HIN TESTEN . 1091 26.10 PERFORMANCE DER WEBSITE TESTEN UND VERBESSERN. 1092 26.10.1 SPEED-TESTS . 1092 26.10.2 UNGENUTZTEN CODE ENTFERNEN . 1094 26.10.3 SERVERANFRAGEN REDUZIEREN . 1095 26.10.4 DATEIGROESSE REDUZIEREN . 1096 26.11 NACHHALTIGE WEBENTWICKLUNG . 1097 26.11.1 CO2-BILANZ EINER WEBSITE MESSEN . 1098 26.11.2 SO GEHT NACHHALTIGE WEBENTWICKLUNG . 1099 26.11.3 NACHHALTIG BEI DESIGN UND INHALT . 1099 26.11.4 NACHHALTIG BEI DER WEBENTWICKLUNG . 1103 26.11.5 NACHHALTIG BEIM WEBHOSTING . 1105 26.11.6 FAZIT ZUR NACHHALTIGKEIT BEI DER WEBENTWICKLUNG . 1106 26.12 ZUSAMMENFASSUNG . 1106 INDEX . 1107
adam_txt	AUF EINEN BLICK 1 EINFUEHRUNG IN DAS HTML-UNIVERSUM . 37 2 GRUNDLEGENDER AUFBAU VON . 61 3 DIE KOPFDATEN EINES HTML-DOKUMENTS . 77 4 DER SICHTBARE BEREICH EINES HTML-DOKUMENTS . 105 5 TABELLEN UND HYPERLINKS . 163 6 GRAFIKEN UND MULTIMEDIA . 193 7 HTML-FORMULARE UND INTERAKTIVE ELEMENTE . 239 8 EINFUEHRUNG IN CASCADING STYLESHEETS (CSS) . 279 9 DIE SELEKTOREN VON CSS . 307 10 DIE VERERBUNG UND DIE KASKADE . 349 11 DAS BOX-MODELL VON CSS . 369 12 CSS-POSITIONIERUNG . 413 13 FLEXBOXEN . 449 14 RESPONSIVES WEBDESIGN UND MEDIA QUERIES . 473 15 CSS GRID . 515 16 STYLEN MIT CSS. 543 17 DER CSS-PRAEPROZESSOR SASS UND SCSS . 615 18 EINE KURZE EINFUEHRUNG IN JAVASCRIPT . 661 19 ARRAYS, FUNKTIONEN UND OBJEKTE IN JAVASCRIPT . 703 20 WEBSEITEN DYNAMISCH AENDERN . 743 21 EINFUEHRUNG IN DIE WEB-APIS (BROWSER-APIS) . 813 22 EINE EINFUEHRUNG IN AJAX UND DIE FETCH-API . 865 23 DAS BOOTSTRAP-FRAMEWORKEINSETZEN . 889 24 EINFUEHRUNG IN DIE GRUNDLEGENDEN KONZEPTE VON REACT . 917 25 EINFUEHRUNG IN DIE GRUNDLEGENDEN KONZEPTE VON ANGULAR . 987 26 BEISPIELPROJEKT ERSTELLEN, TESTEN UND OPTIMIEREN . 1065 INHALT MATERIALIEN ZUM BUCH . 29 VORWORT . 31 1 EINFUEHRUNG IN DAS HTML-UNIVERSUM 37 1.1 IST DIESES BUCH UEBERHAUPT ETWAS FUER MICH? . 37 1.2 DIE VERSCHIEDENEN TYPEN VON WEBSITES . 38 1.2.1 WEBPRAESENZ . 38 1.2.2 BLOG/ONLINEMAGAZIN/PORTFOLIO . 39 1.2.3 E-COMMERCE-WEBSITES-GESCHAEFTE OHNE OEFFNUNGSZEITEN . 40 1.2.4 LANDINGPAGE/MICROSITE . 41 1.2.5 WEBPLATTFORM - SICH EIN EIGENES SOZIALES NETZWERK BAUEN . 41 1.2.6 WEB-APPS . 42 1.3 DYNAMISCHE UND STATISCHE WEBSITES . 42 1.3.1 STATISCHE WEBSITES . 42 1.3.2 DYNAMISCHE WEBSITES . 44 1.4 SPRACHEN FUER DIE GESTALTUNG UND ENTWICKLUNG IM WEB . 46 1.4.1 HTML-DIE TEXTBASIERTE HYPERTEXT-AUSZEICHNUNGSSPRACHE . 46 1.4.2 CSS - DIE GESTALTUNGSSPRACHE CASCADING STYLESHEETS . 46 1.4.3 JAVASCRIPT - DIE CLIENTSEITIGE SKRIPTSPRACHE DES WEBBROWSERS . 47 1.4.4 DIE SERVERSEITIGEN SKRIPTSPRACHEN UND DATENBANKEN . 48 1.4.5 WEBASSEMBLY . 49 1.5 WAS BRAUCHE ICH, UM HIER ANZUFANGEN? . 50 1.5.1 (HTML-)EDITOR ZUM SCHREIBEN VON HTML-DOKUMENTEN . 50 1.5.2 WEBBROWSER FUER DIE ANZEIGE DER WEBSITE . 52 1.5.3 SCHRITT FUER SCHRITT: EINE WEBSEITE ERSTELLEN UND IM WEBBROWSER BETRACHTEN . 53 1.5.4 GESCHRIEBENES HTML UEBERPRUEFEN . 55 1.5.5 GUTE GRUENDE, DEN HTML-CODE (TROTZDEM) ZU VALIDIEREN . 57 1.6 VERWENDETE KONVENTIONEN IM BUCH . 59 1.7 ZUSAMMENFASSUNG. 59 2 GRUNDLEGENDER AUFBAU VON HTML(-DOKUMENTEN) 61 2.1 SYNTAX UND AUFBAU VON HTML(-DOKUMENTEN) . 61 2.1.1 WIE WIRD IN HTML EIN DOKUMENT STRUKTURIERT? . 61 2.1.2 BAUMSTRUKTUR MIT DEM DOM-INSPEKTOR BETRACHTEN . 64 2.1.3 WAS SIND HTML-TAGS UND HTML-ELEMENTE? . 65 2.1.4 HTML-ELEMENTE VERSCHACHTELN UND DIE HIERARCHISCHE STRUKTUR . 66 2.1.5 FALSCHE VERSCHACHTELUNG VON HTML-ELEMENTEN VERMEIDEN . 67 2.1.6 DAS ENDE-TAG EINES HTML-ELEMENTS WEGLASSEN? . 68 2.1.7 ALLEIN STEHENDE HTML-TAGS OHNE ENDE-TAG . 69 2.1.8 ZUSAETZLICHE HTML-ATTRIBUTE FUER HTML-ELEMENTE . 70 2.1.9 KOMMENTARE IN HTML-DOKUMENTEN VERWENDEN . 71 2.2 EIN EINFACHES HTML-DOKUMENT-GRUNDGERUEST . 72 2.2.1 DER HTML-DOKUMENTTYP !DOCTYPE . 72 2.2.2 DER ANFANG UND DAS ENDE EINES HTML-DOKUMENTS MIT HTML . 73 2.2.3 HEAD -DER KOPF EINES HTML-DOKUMENTS . 74 2.2.4 BODY - DER SICHTBARE BEREICH EINES HTML-DOKUMENTS . 74 2.2.5 VORLAGE EINES HTML-GRUNDGERUESTS IN DER PRAXIS . 74 2.3 ZUSAMMENFASSUNG . 75 3 DIE KOPFDATEN EINES HTML-DOKUMENTS 77 3.1 DIE HTML-ELEMENTE FUER DEN KOPF IN DER UEBERSICHT . 77 3.2 TITLE - DIE UEBERSCHRIFT DER HTML-SEITE . 78 3.3 EXKURS: NAMENSKONVENTION UND REFERENZIERUNG . 80 3.3.1 GUELTIGE UND GUTE DATEINAMEN FUER EIN HTML-DOKUMENT . 80 3.3.2 GUELTIGE VERZEICHNISNAMEN UND SINNVOLLE VERZEICHNISSTRUKTUREN . 81 3.3.3 REFERENZ AUF EINE DATENQUELLE NOTIEREN . 82 3.4 DIE BASIS-URL EINER WEBSEITE MIT BASE DEFINIEREN . 85 3.5 BEZIEHUNG ZU EINEM EXTERNEN DOKUMENT MIT LINK . 87 3.6 DOKUMENTGLOBALE CSS-STILE MIT STYLE NOTIEREN . 91 3.7 SKRIPTE IN WEBSEITEN EINBINDEN MIT SCRIPT . 92 3.8 METAINFORMATIONEN FUER DAS DOKUMENT MIT META . 94 3.8.1 DIE VERWENDUNG VON METAANGABEN . 95 3.8.2 DEN VIEWPORT EINSTELLEN . 96 3.8.3 NUETZLICHE METADATEN FUER EINEN WEBCRAWLER ANGEBEN . 98 3.8.4 HILFREICHE METADATEN FUER SUCHMASCHINEN . 98 3.8.5 NUETZLICHE METADATEN FUER DEN WEBBROWSER . 100 3.8.6 ALLGEMEINE METADATEN VERWENDEN . 101 3.8.7 MEINE EMPFEHLUNG: DIESE METADATEN GEHOEREN IN DAS HTML-GRUNDGERUEST . 101 3.8.8 DIE HTML-ATTRIBUTE FUER DAS HTML-ELEMENT META . 102 3.9 ZUSAMMENFASSUNG. 103 4 DER SICHTBARE BEREICH EINES HTML-DOKUMENTS 105 4.1 HTML-ELEMENTE FUER SEITENSTRUKTURIERUNG . 106 4.1.1 BODY -DER DARSTELLBARE INHALTSBEREICH EINES HTML-DOKUMENTS . 106 4.1.2 DIE SEKTIONSELEMENTE VON HTML . 107 4.1.3 INHALT IN THEMENBEZOGENE ABSCHNITTE MIT SECTION EINTEILEN . 107 4.1.4 INHALT IN EINEN IN SICH GESCHLOSSENEN BLOCK MIT ARTICLE EINTEILEN . 108 4.1.5 INHALTE MIT ZUSAETZLICHEN INFORMATIONEN MIT ASIDE ERGAENZEN . 109 4.1.6 EINEN INHALT MIT NAV ZU EINER SEITEN-NAVIGATIONSLEISTE ERKLAEREN . 110 4.1.7 UEBERSCHRIFTEN MIT DEN HTML-ELEMENTEN VON H1 BIS H6 . 112 4.1.8 EIN KOPFBEREICH MIT HEADER UND EIN FUSSBEREICH MIT FOOTER . 114 4.1.9 KONTAKTINFORMATIONEN MIT ADDRESS KENNZEICHNEN . 116 4.2 HTML-ELEMENTE FUER TEXTSTRUKTURIERUNG . 117 4.2.1 TEXTABSAETZE MIT P HINZUFUEGEN . 117 4.2.2 ZEILENUMBRUCH ERZWINGEN MIT BR . 118 4.2.3 EINEN OPTIONALEN ZEILENUMBRUCH MIT WBR HINZUFUEGEN . 119 4.2.4 LEERZEICHEN ERZWINGEN UND UMBRUCH VERHINDERN MIT &NBSP; . 120 4.2.5 THEMATISCHE TRENNUNG MIT HR HINZUFUEGEN . 121 4.2.6 ABSAETZE BZW. ZITATE MIT BLOCKQUOTE HINZUFUEGEN . 122 4.2.7 EINEN ALLGEMEINEN BEREICH MIT DIV GRUPPIEREN . 122 4.2.8 MAIN -EIN HTML-ELEMENT FUER DEN HAUPTINHALT . 124 4.2.9 GESONDERTE BESCHRIFTUNG VON INHALTEN MIT FIGURE UND FIGCAPTION . 125 4.2.10 UNGEORDNETE LISTEN MIT UL UND LI . 126 4.2.11 GEORDNETE LISTEN MIT OL UND LI . 127 4.2.12 NUMMERIERUNG EINER GEORDNETEN LISTE UMKEHREN . 128 4.2.13 NUMMERIERUNG EINER GEORDNETEN LISTE AENDERN . 128 4.2.14 LISTEN INEINANDER VERSCHACHTELN . 129 4.2.15 EINE BESCHREIBUNGSLISTE MIT DL , DT UND DD ERSTELLEN . 130 4.3 HTML-ELEMENTE FUER TEXTAUSZEICHNUNGEN . 132 4.3.1 ABKUERZUNGEN ODER AKRONYME MIT ABBR KENNZEICHNEN . 134 4.3.2 TEXT ALS QUELLE EINES ARBEITSTITELS MIT CITE MARKIEREN . 135 4.3.3 DARSTELLUNG VON COMPUTERCODE MIT CODE UND PRE AUSZEICHNEN . 135 4.3.4 TASTATUREINGABE MIT KBD UND PROGRAMMAUSGABE MIT SAMP . 137 43.5 EINEN TEXT MIT DFN ALS EINE DEFINITION AUSZEICHNEN . 137 43.6 TEXT ALS VARIABLE MIT VAR AUSZEICHNEN . 138 4.3.7 TEXTRICHTUNG MIT BDO UND BDI AENDERN . 138 4.3.8 TEXT BETONEN BZW. HERVORHEBEN MIT EM , STRONG , I UND B . 140 43.9 EINEN TEXT MIT MARK HERVORHEBEN . 141 4.3.10 TEXT ZWISCHEN ANFUEHRUNGSSTRICHE SETZEN MIT Q . 142 4.3.11 TEXT UNTER BZW. DURCHSTREICHEN MIT U UND S . 144 4.3.12 AENDERUNGEN VON TEXT MIT INS UND DEL MARKIEREN . 145 4.3.13 EINEN TEXT HOCHSTELLEN BZW. TIEFSTELLEN MIT SUP UND SUB . 146 4.3.14 DATUMS UND ZEITANGABEN MIT TIME KENNZEICHNEN . 147 4.3.15 DAS KLEINGEDRUCKTE MIT SMALL KENNZEICHNEN . 150 4.3.16 RUBY , RP UND RT FUER EINE ANMERKUNG DER AUSSPRACHE . 150 4.3.17 BEREICH VON EINZELNEN TEXTPASSAGEN MIT SPAN ZUSAMMENFASSEN . 152 4.4 HTML UND DIE SEMANTIK . 152 4.5 BARRIEREARMES WEBDESIGN MIT . 154 4.5.1 DIE ROLLE EINES HTML-ELEMENTS . 155 4.5.2 ZUSTAND UND ATTRIBUTE EINES HTML-ELEMENTS MIT WAI-ARIA BESCHREIBEN . 157 4.53 VERWENDEN SIE EINEN SINNVOLLEN NAMEN FUER DAS HTML-ELEMENT . 158 4.6 EXKURS: ZEICHENCODIERUNG . 158 4.7 ZEICHENENTITAETEN IN HTML . 160 4.8 ZUSAMMENFASSUNG . 162 5 TABELLEN UND HYPERLINKS 163 5.1 DATEN IN EINER TABELLE STRUKTURIEREN . 163 5.1.1 EINE EINFACHE TABELLENSTRUKTUR MIT TABLE , TR , TD UND TH . 164 5.1.2 SPALTEN BZW. ZEILEN MIT COLSPAN BZW. ROWSPAN ZUSAMMENFASSEN . 166 5.13 HTML-ATTRIBUTE FUER DIE TABELLENELEMENTE . 169 5.1.4 TABELLEN MIT THEAD , TBODY UND TFOOT STRUKTURIEREN . 169 5.1.5 SPALTEN EINER TABELLE GRUPPIEREN MIT COLGROUP UND COL . 172 5.1.6 TABELLEN BESCHRIFTEN MIT CAPTION BZW. FIGCAPTION . 173 5.2 ELEKTRONISCHE VERWEISE AKA HYPERLINKS MIT A . 175 5.2.1 LINKS ZU ANDEREN HTML-DOKUMENTEN DER EIGENEN WEBSITE EINFUEGEN . 177 5.2.2 LINKS ZU ANDEREN WEBSITES EINFUEGEN . 179 5.23 LINKS MIT DEM TARGET-ATTRIBUT IN EINEM NEUEN FENSTER OEFFNEN . 180 5.2.4 E-MAIL-LINKS MIT HREF=MAILTO:. . 181 5.2.5 LINKS ZU ANDEREN INHALTSTYPEN SETZEN . 182 5.2.6 DOWNLOADLINKS MIT DEM DOWNLOAD-ATTRIBUT HINZUFUEGEN . 183 5.2.7 LINKS ZU BESTIMMTEN TEILEN EINER WEBSEITE SETZEN . 185 5.2.8 LINKS AUF TELEFONNUMMERN ERSTELLEN . 188 5.2.9 DIE HTML-ATTRIBUTE FUER DAS HTML-ELEMENT A . 189 5.3 ZUSAMMENFASSUNG. 191 6 GRAFIKEN UND MULTIMEDIA 193 6.1 BILDER FUER DAS WEB . 194 6.1.1 DAS JPEG-FORMAT . 194 6.1.2 DASGIF-FORMAT . 195 6.1.3 DAS PNG-FORMAT . 195 6.1.4 SVG FUER VEKTORGRAFIKEN . 196 6.1.5 DAS WEBP-FORMAT . 196 6.1.6 BILDER FUER DAS WEB OPTIMIEREN . 197 6.2 BILDER MIT IMG EINBINDEN . 197 6.2.1 BILDER EINEM HTML-DOKUMENT HINZUFUEGEN . 198 6.2.2 HOEHE UND BREITE FUER DIE GRAFIK ANGEBEN . 201 6.2.3 BILDER BESCHRIFTEN MIT FIGURE UND FIGCAPTION . 203 6.2.4 NATIVES LAZY LOADING . 205 6.2.5 ALTERNATIVE BILDGROESSEN MIT SRCSET UND SIZES . 207 6.2.6 DIE HTML-ATTRIBUTE FUER DAS HTML-ELEMENT IMG . 211 6.3 DAS PASSENDE BILD MIT PICTURE LADEN . 212 6.3.1 BILDER IM PASSENDEN SEITENVERHAELTNIS BZW. DEN PASSENDEN AUSSCHNITT LIEFERN . 212 6.3.2 VERSCHIEDENE DATEIFORMATE ABFRAGEN UND AUSLIEFERN . 215 6.3.3 HTML-ATTRIBUTE VON SOURCE . 215 6.4 EIN ICON FUER DIE WEBSITE HINZUFUEGEN (FAVICON) . 216 6.5 VEKTORGRAFIKEN IN HTML-DOKUMENTEN VERWENDEN . 218 6.5.1 SVG ALS GRAFIKREFERENZ HINZUFUEGEN MIT IMG . 219 6.5.2 SVG DIREKT IN DIE WEBSEITE EINBETTEN MIT SVG . 220 6.5.3 SVG-TAGSFUER DIE VEKTORGRAFIKEN . 220 6.5.4 UEBERSICHT UEBER DIE GRAFISCHEN ELEMENTE VON SVG . 221 6.5.5 WEITERE HINWEISE ZUR VERWENDUNG VON SVG . 222 6.6 GRAFIKEN ZEICHNEN MIT CANVAS . 223 6.7 VIDEOS MIT DEM HTML-ELEMENT VIDEO ABSPIELEN . 224 6.7.1 DIE HTML-ATTRIBUTE FUER DAS HTML-ELEMENT VIDEO . 227 6.7.2 DEM VIDEO UNTERTITEL MIT TRACK HINZUFUEGEN . 228 6.7.3 VIDEOS UEBER YOUTUBE ABSPIELEN LASSEN . 231 6.8 AUDIODATEIEN MIT DEM HTML-ELEMENT AUDIO ABSPIELEN . 232 6.8.1 DIE HTML-ATTRIBUTE FUER DAS HTML-ELEMENT AUDIO . 233 6.9 ANDERE AKTIVE INHALTE EINBINDEN . 234 6.9.1 DAS HTML-ELEMENT EMBED . 235 6.9.2 DAS HTML-ELEMENT OBJECT . 236 6.9.3 DAS HTML-ELEMENT IFRAME . 236 6.10 ZUSAMMENFASSUNG . 238 7 HTML-FORMULARE UND INTERAKTIVE ELEMENTE 239 7.1 EINEN BEREICH FUER FORMULARE DEFINIEREN . 240 7.2 DIE HTML-EINGABEFELDER FUER FORMULARE . 242 7.2.1 EIN EINZEILIGES TEXTEINGABEFELD MIT INPUT TYPE="TEXT" . 242 7.2.2 EIN PASSWORTEINGABEFELD MIT INPUT TYPE="PASSWORD" . 243 7.2.3 EIN MEHRZEILIGES TEXTEINGABEFELD MIT TEXTAREA . 243 7.2.4 EINE AUSWAHLLISTE BZW. DROPDOWN-LISTE MIT SELECT . 244 7.2.5 EINE GRUPPE VON RADIOBUTTONS MIT INPUT TYPE="RADIO" ERSTELLEN . 246 7.2.6 EIN TEXTLABEL MIT LABEL HINZUFUEGEN . 247 7.2.7 CHECKBOXEN MIT INPUT TYPE="CHECKBOX" VERWENDEN . 248 7.2.8 VERSCHIEDENE SCHALTFLAECHEN IM UEBERBLICK . 248 7.2.9 EIN VERSTECKTES EINGABEFELD MIT INPUT TYPE="HIDDEN" VERWENDEN . 249 7.3 SPEZIELLE TYPEN VON EINGABEFELDERN . 250 7.3.1 FELDER FUER DATEIUPLOAD MIT INPUT TYPE="FILE" VERWENDEN . 251 7.3.2 EIN EINGABEFELD FUER FARBEN MIT INPUT TYPE="COLOR" . 251 7.3.3 EIN EINGABEFELD FUER EIN DATUM MIT INPUT TYPE="DATE" . 252 7.3.4 EIN EINGABEFELD FUER EINE UHRZEIT MIT INPUT TYPE="TIME" . 253 7.3.5 EINGABEFELDER FUER DATUM UND UHRZEIT . 253 7.3.6 EINGABEFELDER FUER DEN MONAT UND DIE WOCHE . 253 7.3.7 EIN EINGABEFELD FUER DIE SUCHE MIT INPUT TYPE="SEARCH" . 254 7.3.8 EIN EINGABEFELD FUER E-MAIL-ADRESSEN MIT INPUT TYPE="EMAIL" . 254 7.3.9 EIN EINGABEFELD FUER EINE URL MIT INPUT TYPE="URL" . 255 7.3.10 EIN EINGABEFELD FUER TELEFONNUMMERN MIT INPUT TYPE="TEL" . 255 7.3.11 EIN EINGABEFELD FUER ZAHLEN MIT INPUT TYPE="NUMBER" . 255 7.3.12 EIN EINGABEFELD FUER ZAHLEN EINES BESTIMMTEN BEREICHS . 256 7.3.13 AUSGABE VON WERTEN UND BERECHNUNGEN MIT OUTPUT . 256 7.4 DIE HTML-ATTRIBUTE FUER EINGABEFELDER . 257 7.4.1 DEN EINGABEFOKUS MIT DEM HTML-ATTRIBUT AUTOFOCUS SETZEN . 257 7.4.2 AUTOVERVOLLSTAENDIGUNG (DE)AKTIVIEREN MIT DEM ATTRIBUT AUTOCOMPLETE . 258 7.4.3 EINE LISTE MIT VORSCHLAEGEN MIT DEM HTML-ATTRIBUT LIST UND DATAIIST . 258 7.4.4 MINIMALE UND MAXIMALE WERTE UND DIE SCHRITTWEITE FESTLEGEN . 259 7.4.5 DAS AUSWAEHLEN ODER DIE EINGABE MEHRERER WERTE MIT MULTIPLE . 259 7.4.6 REGULAERE AUSDRUECKE FUER EINGABEFELDER MIT PATTEM . 259 7.4.7 EIN PLATZHALTER FUER EIN EINGABEFELD MIT PLACEHOLDER . 260 7.4.8 EINE EINGABE ERFORDERLICH MACHEN MIT DEM ATTRIBUT REQUIRED . 260 7.4.9 FEHLERMELDUNGEN FUER EINGABEFELDER STEUERN . 260 7.5 WEITERE NUETZLICHE HELFERLEIN FUER EINGABEFELDER . 263 7.5.1 FORMULARELEMENTE MIT DEM HTML-ATTRIBUT DISABLED DEAKTIVIEREN . 264 7.5.2 BEI EINGABEFELDERN MIT DEM ATTRIBUT READONLY NUR LESEN ERLAUBEN . 264 7.5.3 FORMULARELEMENTE GRUPPIEREN MIT FIELDSET UND LEGEND . 265 7.5.4 FORTSCHRITTSANZEIGE MIT PROGRESS . 266 7.5.5 WERTE VISUALISIEREN MIT METER . 266 7.6 FORMULARDATEN MIT PHP VERSENDEN . 267 7.6.1 DIE DATEN VOM WEBBROWSER ZUR WEITERVERARBEITUNG UEBERTRAGEN . 268 7.6.2 DIE POST-METHODE . 269 7.6.3 DIEGET-METHODE . 270 7.6.4 DIE DATEN MIT EINEM PHP-SKRIPT VERARBEITEN . 271 7.7 INTERAKTIVE HTML-ELEMENTE . 274 7.7.1 INHALTE AUF-/ZUKLAPPEN MIT DETAILS UND SUMMARY . 274 7.7.2 EINE DIALOGBOX MIT DIALOG . 275 7.8 ZUSAMMENFASSUNG . 277 8 EINFUEHRUNG IN CASCADING STYLESHEETS (CSS) 279 8.1 DAS GRUNDLEGENDE ANWENDUNGSPRINZIP VON CSS . 280 8.1.1 AUFBAU EINER CSS-REGEL . 282 8.1.2 DIE DEKLARATION EINES SELEKTORS . 283 8.1.3 KOMMENTAREFUER CSS-CODE VERWENDEN . 284 8.1.4 EIN PAAR HINWEISE ZUR CODEFORMATIERUNG VON CSS-CODE . 285 8.2 EINBINDUNGSMOEGLICHKEITEN VON CSS IN HTML . 286 8.2.1 STILANWEISUNGEN DIREKT IM HTML-TAG MIT DEM HTML-ATTRIBUT STYLE . 286 8.2.2 STILANWEISUNGEN IM DOKUMENTKOPF MIT DEM HTML-ELEMENT STYLE . 287 8.2.3 STILANWEISUNGEN AUS EINER EXTERNEN CSS-DATEI MIT IINK EINBINDEN . 288 8.2.4 KOMBINIEREN VON CSS-REGELN IM KOPFBEREICH UND IN EXTERNEN CSS-DATEIEN . 289 8.2.5 EMPFEHLUNG: TRENNEN SIE HTML UND CSS . 290 8.2.6 STILANWEISUNGEN AUS EINER EXTERNEN CSS-DATEI MIT @IMPORT EINBINDEN . 290 8.2.7 MEDIENSPEZIFISCHE STYLESHEETS FUER BESTIMMTE AUSGABEGERAETE . 291 8.2.8 MEDIENSPEZIFISCHE STYLESHEETS MIT CSS . 292 8.3 CSS IM WEBBROWSER ANALYSIEREN . 293 8.4 WERTE AN CSS-EIGENSCHAFTEN UEBERGEBEN . 294 8.4.1 DIE VERSCHIEDENEN MASSEINHEITEN IN CSS . 294 8.4.2 ZEICHENKETTEN UND SCHLUESSELWOERTER ALS WERT FUER CSS-EIGENSCHAFTEN . 297 8.4.3 DIE VIELEN MOEGLICHKEITEN, EINE FARBE IN CSS ZU VERWENDEN . 297 8.4.4 WINKELMASSE IN CSS . 304 8.4.5 WERTE MIT KURZSCHREIBWEISE AN CSS-EIGENSCHAFT UEBERGEBEN . 305 8.5 ZUSAMMENFASSUNG . 306 9 DIE SELEKTOREN VON CSS 307 9.1 DIE EINFACHEN SELEKTOREN VON CSS . 309 9.1.1 HTML-ELEMENTE MIT DEM TYPSELEKTOR ANSPRECHEN . 309 9.1.2 KLASSENSELEKTOR - ELEMENTE MIT EINEM BESTIMMTEN CLASS-WERT ANSPRECHEN . 312 9.1.3 ID-SELEKTOR - EIN ELEMENT MIT EINEM BESTIMMTEN ID-WERT ANSPRECHEN . 315 9.1.4 UNIVERSALSELEKTOR-ALLE ELEMENTE IN EINEM DOKUMENT ANSPRECHEN . 316 9.1.5 ELEMENTE ANHAND DER ATTRIBUTE MIT DEM ATTRIBUTSELEKTOR ANSPRECHEN . 317 9.1.6 ATTRIBUTSELEKTOR FUER ATTRIBUTE MIT EINEM BESTIMMTEN ATTRIBUTWERT . 319 9.1.7 ATTRIBUTSELEKTOR FUER ATTRIBUTE MIT EINEM BESTIMMTEN TEILWERT . 322 9.1.8 CSS-PSEUDOKLASSEN, DIE SELEKTOREN FUER BESTIMMTE EIGENSCHAFTEN . 323 9.1.9 DIE KOMFORTABLEN STRUKTUR-PSEUDOKLASSEN VON CSS . 327 9.1.10 WEITERE NUETZLICHE PSEUDOKLASSEN . 333 9.1.11 PSEUDOELEMENTE, DIE SELEKTOREN FUER NICHT VORHANDENE ELEMENTE . 334 9.2 KOMBINATOREN - DIE SELEKTOREN VERKETTEN . 337 9.2.1 DER NACHFAHRENSELEKTOR (EL E2) . 339 9.2.2 DER KINDSELEKTOR (EL E2) . 340 9.2.3 DER NACHBARSELEKTOR (EL + E2) . 341 9.2.4 DER GESCHWISTERSELEKTOR (EL ~ E2) . 342 9.3 EMPFEHLUNG: SO VERWENDEN SIE EFFIZIENTES UND EINFACHES CSS . 343 9.3.1 SO SCHREIBEN SIE PERFORMANTES CSS . 343 9.3.2 EMPFEHLUNG: HALTEN SIE DEN CSS-CODE SO EINFACH WIE MOEGLICH . 345 9.4 ZUSAMMENFASSUNG . 346 10 DIE VERERBUNG UND DIE KASKADE 349 10.1 DAS PRINZIP DER VERERBUNG IN CSS . 349 10.1.1 VORSICHT BEI DER VERWENDUNG VON RELATIVEN EIGENSCHAFTEN . 353 10.1.2 ES WIRD NICHT ALLES WEITERVERERBT . 353 10.1.3 VERERBUNG ERZWINGEN MIT INHERIT . 354 10.1.4 DEN STANDARDWERT EINER CSS-EIGENSCHAFT WIEDERHERSTELLEN (INITIAL) . 356 10.1.5 VERERBEN ERZWINGEN ODER WERT WIEDERHERSTELLEN (UNSET) . 356 10.1.6 VERERBEN ERZWINGEN ODER WERTE WIEDERHERSTELLEN FUER ALLE EIGENSCHAFTEN 356 10.2 DAS REGELSYSTEM DER KASKADE VERSTEHEN . 358 10.2.1 DIE HERKUNFT EINES STYLESHEETS . 359 10.2.2 DIE PRIORITAET EINER CSS-EIGENSCHAFT MIT LIMPORTANT ERHOEHEN . 360 10.2.3 SORTIERUNG NACH WICHTIGKEIT UND HERKUNFT . 360 10.2.4 SORTIEREN NACH GEWICHTUNG DER SELEKTOREN (SPEZIFITAET) . 362 10.2.5 ZUSAMMENFASSUNG ZUM REGELSYSTEM DER KASKADE . 366 10.2.6 DIE KASKADE IM BROWSER ANALYSIEREN . 366 10.3 ZUSAMMENFASSUNG. 367 11 DAS BOX-MODELL VON CSS 369 11.1 DAS KLASSISCHE BOX-MODELL VON CSS . - . 370 11.1.1 DEN INHALTSBEREICH MIT WIDTH UND HEIGHT VORGEBEN . 370 11.1.2 DEN INNENABSTAND MIT PADDING ANGEBEN . 374 11.1.3 DEN RAHMEN MIT BORDER ERSTELLEN . 375 11.1.4 DEN AUSSENABSTAND MIT MARGIN EINRICHTEN . 375 11.1.5 MARGIN, BORDER, PADDING UND CONTENT MIT DEN ENTWICKLERTOOLS ANALYSIEREN . 377 11.1.6 COLLAPSING MARGINS (ZUSAMMENFALLENDE VERTIKALE AUSSENABSTAENDE) . 378 11.1.7 GESAMTBREITE EINER BOX ERMITTELN . 380 11.2 DAS ALTERNATIVE BOX-MODELL VON CSS . 382 11.2.1 DAS BOX-MODELL BOX-SIZING VERWENDEN . 383 11.2.2 DAS ALTERNATIVE BOX-MODELL EINSETZEN . 383 11.3 LOGISCHE EIGENSCHAFTEN. 386 11.4 DAS BOX-MODELL FUER INLINE-ELEMENTE . 389 11.5 BOXEN GESTALTEN . 390 11.5.1 EINEN RAHMEN MIT DER EIGENSCHAFT BORDER HINZUFUEGEN UND GESTALTEN . 390 11.5.2 HINTERGRUNDFARBE MIT BACKGROUND-COLOR FESTLEGEN . 394 11.5.3 HINTERGRUNDGRAFIKEN VERWENDEN . 394 11.5.4 DIE BOXEN DURCHSICHTIG GESTALTEN . 401 11.5.5 EINEN FARBVERLAUF HINZUFUEGEN . 402 11.5.6 EINEN SCHLAGSCHATTEN MIT DER EIGENSCHAFT BOX-SHADOW HINZUFUEGEN . 405 11.5.7 RUNDE ECKEN MIT DER CSS-EIGENSCHAFT BORDER-RADIUS HINZUFUEGEN . 406 11.6 EXKURS: WEBBROWSER-PRAEFIXE (CSS VENDOR PREFIXES) . 409 11.7 ZUSAMMENFASSUNG . 411 12 CSS-POSITIONIERUNG 413 12.1 DER NORMALE ELEMENTFLUSS . 413 12.1.1 BLOCK-ELEMENTE . 414 12.1.2 INLINE-ELEMENTE . 414 12.1.3 MIT DISPLAY DIE ART DER BOX FESTLEGEN . 414 12.2 POSITIONIERUNG MIT DER CSS-EIGENSCHAFT POSITION . 416 12.2.1 DIE NORMALE POSITIONIERUNG (POSITION: STATIC) . 417 12.2.2 PLATZIERUNG VON ELEMENTEN MIT TOP, RIGHT, BOTTOM UND LEFT . 418 12.2.3 DIE RELATIVE POSITIONIERUNG (POSITION: RELATIVE) . 419 12.2.4 DIE ABSOLUTE POSITIONIERUNG (POSITION: ABSOLUTE) . 420 12.2.5 DIE FIXE POSITIONIERUNG (POSITION: FIXED) . 424 12.2.6 DIE HAFTENDE POSITIONIERUNG (POSITION: STICKY) . 426 12.3 UEBEREINANDERSTAPELN REGELN MIT Z-INDEX . 428 12.4 SCHWEBENDE BOXEN FUER DIE POSITIONIERUNG MIT . 432 12.4.1 DAS UMFLIESSEN BEENDEN . 435 12.4.2 FLOATS ZU EINER EINHEIT ZUSAMMENFASSEN MIT FLOW-ROOT . 436 12.4.3 NICHT RECHTECKIGE FORMEN UMFLIESSEN LASSEN . 438 12.4.4 DIE CSS-EIGENSCHAFT CLIP-PATH . 443 12.5 ZUSAMMENFASSUNG . 447 13 FLEXBOXEN 449 13.1 DEN FLEXBOX-CONTAINER ERSTELLEN . 450 13.1.1 DIE FLIESSRICHTUNG ANPASSEN . 452 13.1.2 FLEX-ITEMS IM FLEXBOX-CONTAINER IN DER ZEILE UMBRECHEN . 454 13.2 FLEX-ITEMS ANPASSEN . 455 13.2.1 WACHSTUMSFAKTOR VON FLEX-ITEMS MIT FLEX-GROW FESTLEGEN . 455 13.2.2 SCHRUMPFFAKTOR VON FLEX-ITEMS MIT FLEX-SHRINK FESTLEGEN . 456 13.2.3 DIE BASISBREITE VON FLEX-ITEMS MIT FLEX-BASIS FESTLEGEN . 456 13.2.4 DIE REIHENFOLGE DER FLEX-ITEMS MIT ORDER BESTIMMEN . 460 13.3 DIE FLEX-ITEMS IM FLEX-CONTAINER AUSRICHTEN . 460 13.3.1 FLEX-ITEMS AN DER HAUPTACHSE DES FLEXBOX-CONTAINERS AUSRICHTEN . 461 13.3.2 AUSRICHTUNG DER FLEX-ITEMS ENTLANG DER QUERACHSE DES FLEXBOX-CONTAINERS . 462 13.3.3 EXTRABEHANDLUNG FUER EIN FLEX-ITEM IM FLEXBOX-CONTAINER . 464 13.3.4 FLEX-ITEMS BEI EINEM MEHRZEILIGEN FLEXBOX-CONTAINER AUSRICHTEN . 466 13.3.5 LEERRAUM ZWISCHEN DEN FLEX-ITEMS HINZUFUEGEN . 467 13.4 BEISPIEL: NAVIGATIONSBAR MIT FLEXBOXEN . 468 13.5 ZUSAMMENFASSUNG. 471 14 RESPONSIVES WEBDESIGN UND MEDIA QUERIES 473 14.1 GRUNDLAGENWISSEN ZUM RESPONSIVEN WEBDESIGN . 473 14.1.1 VERWENDEN SIE IMMER DIE VIEWPORT-META-ANGABE . 475 14.1.2 DIE MEDIENABFRAGEN FUER MEDIENEIGENSCHAFTEN . 478 14.1.3 LAYOUTUMBRUECHE (BREAKPOINTS) . 485 14.1.4 FLEXIBLE UND RESPONSIVE BILDER . 490 14.1.5 TYPOGRAFIE . 491 14.2 DIE DRUCKVERSION EINER WEBSITE . 492 14.2.1 INHALTE AUSBLENDEN . 493 14.2.2 WEBLINKS FUER DEN DRUCK SICHTBAR MACHEN . 493 14.2.3 SEITENUMBRUECHE BEIM DRUCKEN STEUERN . 494 14.2.4 LAYOUT ANPASSEN BZW. VEREINFACHEN . 495 14.3 AUF BENUTZEREINSTELLUNGEN REAGIEREN . 496 14.3.1 DER DARK MODE MIT PREFERS-COLOR-SCHEME . 496 14.3.2 STAERKERE KONTRASTE ANBIETEN MIT PREFERS-CONTRAST . 501 14.3.3 ERZWUNGENE FARBEN MIT FORCED-COLORS ERMITTELN . 503 14.3.4 VERZICHT AUF BEWEGUNG MIT PREFERS-REDUCED-MOTION . 505 14.3.5 DATENVERBRAUCH MIT PREFERS-REDUCED-DATA REDUZIEREN . 506 14.4 CONTAINER QUERIES . 507 14.5 BERECHNUNGEN MIT CSS UND DER CALC()-FUNKTION . 512 14.6 ZUSAMMENFASSUNG . 513 15 CSS GRID 515 15.1 GRID-CONTAINER UND RASTERELEMENTE VERWENDEN . 516 15.1.1 EINEN GRID-CONTAINER MIT SPALTEN UND ZEILEN ERZEUGEN . 517 15.1.2 GRID-ITEMS IM RASTER PLATZIEREN . 520 15.1.3 LAYOUTAENDERUNG LEICHTGEMACHT . 527 15.1.4 ABSTAENDE ZWISCHEN DEN RASTERZEILEN . 528 15.1.5 RASTER IM WEBBROWSER UEBERPRUEFEN . 528 15.2 RESPONSIVES GRID OHNE MEDIA QUERIES . 529 15.2.1 AUTO-FILL UND DIE MINMAX()-FUNKTION . 531 15.2.2 AUTO-FIT VS. AUTO-FILL . 532 15.2.3 GRID-ITEMS AUFSPANNEN UND LUECKEN FUELLEN . 533 15.3 AUSRICHTEN VON GRID-ITEMS . 535 15.3.1 VERTIKALE AUSRICHTUNG MIT ALIGN-ITEMS UND ALIGN-SELF KONTROLLIEREN . 536 15.3.2 HORIZONTALE AUSRICHTUNG MIT JUSTIFY-ITEMS UND JUSTIFY-SELF KONTROLLIEREN . 537 15.3.3 GESAMTEN INHALT IM GRID-CONTAINER MIT ALIGN-CONTENT UND JUSTIFY-CONTENT AUSRICHTEN . 538 15.4 GRID-BEREICHE BENENNEN . 539 15.5 ZUSAMMENFASSUNG . 542 16 STYLEN MIT CSS 543 16.1 SCHRIFTFAMILIEN UND -FORMATIERUNG MIT FONT . 543 16.1.1 SCHRIFTARTEN MIT FONT-FAMILY AUSWAEHLEN . 544 16.1.2 SCHRIFTGROESSE MIT FONT-SIZE FESTLEGEN . 548 16.1.3 TYPOGRAFISCHE AUSZEICHNUNGEN MIT FONT-STYLE UND FONT-WEIGHT . 555 16.1.4 ZEILENABSTAND MIT LINE-HEIGHT DEFINIEREN . 556 16.1.5 KAPITAELCHEN MIT FONT-VARIANT ERSTELLEN . 557 16.1.6 DIE KURZSCHREIBWEISE DER SCHRIFTFORMATIERUNG MIT FONT . 558 16.2 @FONT-FACE, WEBFONTS UND VARIABLE FONTS . 559 16.2.1 VERSCHIEDENE DATEIFORMATE FUER WEBFONTS . 560 16.2.2 SCHRIFTEN VON GOOGLE IN DIE WEBSITE EINBINDEN . 561 16.2.3 LADESTATUS VON SCHRIFTEN MIT FONT-DISPLAY UEBERPRUEFEN . 564 16.2.4 PERFORMANCE-TIPPS FUER WEBFONTS . 565 16.2.5 VARIABLE FONTS . 566 16.3 WEITERERE ANPASSUNGSMOEGLICHKEITEN VON TEXT . 567 16.3.1 BUCHSTABEN UND WORTABSTAENDE MIT LETTER-SPACING UND WORD-SPACING FESTLEGEN . 567 16.3.2 DIE TEXTAUSRICHTUNG MIT TEXT-ALIGN FESTLEGEN . 569 16.3.3 DEN TEXT MIT TEXT-INDENT EINRUECKEN . 570 16.3.4 UNTER UND DURCHSTREICHEN VON TEXT MIT TEXT-DECORATION . 571 16.3.5 GROSS UND KLEINSCHREIBUNG VON TEXT MIT TEXT-TRANSFORM . 572 16.3.6 DEM TEXT SCHLAGSCHATTEN MIT TEXT-SHADOW HINZUFUEGEN . 573 16.3.7 TEXT MIT COLUMN-COUNT IN MEHRERE SPALTEN AUFTEILEN . 574 16.4 LISTEN MIT CSS GESTALTEN . 576 16.4.1 AUFZAEHLUNGSPUNKTE MIT LIST-STYLE-TYPE ANPASSEN . 576 16.4.2 BILDER ALS AUFZAEHLUNGSZEICHEN MIT LIST-STYLE-IMAGE VERWENDEN . 578 16.4.3 AUFZAEHLUNGSLISTE MIT LIST-STYLE-POSITION POSITIONIEREN . 578 16.4.4 DIE KURZSCHREIBWEISE LIST-STYLE FUER DIE LISTENGESTALTUNG . 579 16.4.5 DAS ::MARKER-PSEUDOELEMENT . 580 16.5 SCHOENERE TABELLEN MIT CSS GESTALTEN . 582 16.5.1 TABELLEN MIT FESTER BREITE ERSTELLEN . 582 16.5.2 ALLGEMEINES REZEPT: TABELLE SCHOEN MIT CSS GESTALTEN . 583 16.5.3 KOLLABIERENDE RAHMEN FUER TABELLENZELLEN MIT BORDER-COLLAPSE . 585 16.5.4 ABSTAND ZWISCHEN DEN ZELLEN MIT BORDER-SPACING EINSTELLEN . 585 16.5.5 LEERE TABELLENZELLEN ANZEIGEN MIT EMPTY-CELLS . 586 16.5.6 TABELLENBESCHRIFTUNG MIT CAPTION-SIDE POSITIONIEREN . 587 16.6 BILDER MIT CSS GESTALTEN . 588 16.6.1 DAS BILD IN EINEM CONTAINER MIT OBJECT-FIT UND OBJECT-POSITION ANPASSEN . 588 16.6.2 FLAECHENDECKENDE HINTERGRUNDBILDER VERWENDEN . 591 16.6.3 FESTES SEITENVERHAELTNIS FUER BILDER UND OBJEKTE FESTLEGEN . 594 16.6.4 FILTEREFFEKTE MIT CSS . 596 16.7 ELEMENTE TRANSFORMIEREN MIT CSS . 598 16.7.1 HTML-ELEMENTE SKALIEREN MIT TRANSFORM: SCALE() . 598 16.7.2 HTML-ELEMENTE DREHEN MIT TRANSFORM: ROTATE() . 599 16.7.3 HTML-ELEMENTE NEIGEN MIT TRANSFORM: SKEW() . 599 16.7.4 HTML-ELEMENTE VERSCHIEBEN MIT TRANSFORM: TRANSLATEQ . 599 16.7.5 VERSCHIEDENE TRANSFORMATIONEN KOMBINIEREN . 600 16.7.6 ES GEHT AUCH MIT ANDEREN HTML-ELEMENTEN . 601 16.8 UEBERGAENGE UND ANIMATIONEN MIT CSS ERSTELLEN . 601 16.9 HTML-FORMULARE MIT CSS STYLEN . 605 16.9.1 EIN HTML-FORMULAR ORDENTLICH STRUKTURIEREN . 605 16.9.2 AUSRICHTEN DER FORMULARELEMENTE MIT CSS . 607 16.9.3 GESTALTEN DER FORMULARELEMENTE MIT CSS . 610 16.10 ZUSAMMENFASSUNG . 614 17 DER CSS-PRAEPROZESSOR SASS UND SCSS 615 17.1 SASS ODER SCSS . 616 17.2 VON SASS/SCSS ZU CSS . 617 17.3 EINFUEHRUNG IN SASS . 617 173.1 SASS INSTALLIEREN UND EINRICHTEN . 617 173.2 VARIABLEN MIT SASS VERWENDEN . 622 1733 VERSCHACHTELUNGEN MIT SASS . 624 173.4 MIXINS (@MIXIN, @INLCUDE) . 626 173.5 EXTEND (@EXTEND) . 629 173.6 MEDIA QUERIES UND @CONTENT . 631 173.7 OPERATOREN . 634 17.3. 8 FARBEN UND HELLIGKEIT ANPASSEN . 635 17.3. 9 KONTROLLSTRUKTUREN VON SASS . 638 17.3.1 0 FUNKTIONEN @FUNCTION . 641 17.3.1 1 @IMPORT . 643 17.3.1 2 KOMMENTARE . 644 17.4 CUSTOM PROPERTIES MIT REINEM CSS . 644 17.4.1 WAS SIND CUSTOM PROPERTIES? . 645 17.4.2 VERWENDUNG VON CUSTOM PROPERTIES MIT VAR() . 646 17.4.3 ERLAUBTE WERTE MIT CUSTOM PROPERTIES VERWENDEN . 646 17.4.4 WERTE AUFTEILEN UND KURZFRISTIG AENDERN . 647 17.4.5 JAVASCRIPT UND CUSTOM PROPERTIES . 648 17.4.6 FAZIT ZU DEN CUSTOM PROPERTIES . 650 17.5 VERSCHACHTELTES CSS . 651 17.5.1 WIE MAN DIE VERSCHACHTELUNG ANWENDET . 651 17.5.2 MEDIA QUERIES MIT VERSCHACHTELTEM CSS . 656 17.5.3 NICHT VERWANDTE SELEKTOREN . 658 17.5.4 ACHTUNG BEI DEKLARATIONEN NACH DER VERSCHACHTELUNG . 659 17.6 ZUSAMMENFASSUNG . 659 18 EINE KURZE EINFUEHRUNG IN JAVASCRIPT 661 18.1 JAVASCRIPT IN DER WEBENTWICKLUNG . 662 18.2 JAVASCRIPT-PROGRAMME SCHREIBEN UND AUSFUEHREN . 664 18.2.1 EINE JAVASCRIPT-DATEI IN EINE HTML-DATEI EINBINDEN . 665 18.2.2 JAVASCRIPT INNERHALB VON HTML SCHREIBEN . 667 18.2.3 POSITION DES JAVASCRIPTS UND SEINE AUSFUEHRUNG IM HTML-DOKUMENT . 668 18.2.4 ATTRIBUTE, UM DAS LADEVERHALTEN VON JAVASCRIPT ZU BEEINFLUSSEN (ASYNC, DEFER) . 669 18.2.5 DAS NOSCRIPT -ELEMENT FUER KEIN JAVASCRIPT . 670 18.3 AUSGABE VON JAVASCRIPT . 670 18.3.1 STANDARDDIALOGE (UND EINGABEDIALOG) . 670 18.3.2 AUSGABE AUF DIE KONSOLE . 671 18.3.3 AUSGABE AUF DIE WEBSEITE . 674 18.3.4 JAVASCRIPT OHNE WEBBROWSER AUSFUEHREN . 675 18.3.5 DEN JAVASCRIPT-CODE MIT ANMERKUNGEN KOMMENTIEREN . 677 18.4 DIE VERWENDUNG VON VARIABLEN IN JAVASCRIPT . 677 18.4.1 KONSTANTEN DEFINIEREN . 680 18.4.2 STRIKTER MODUS MIT USE STRICT . 681 18.5 UEBERSICHT UEBER DIE JAVASCRIPT-DATENTYPEN . 681 18.5.1 NUMBER-DATENTYP (ZAHLEN) . 682 18.5.2 STRING-DATENTYPEN (ZEICHENKETTEN) . 682 18.5.3 TEMPLATE-STRINGS . 685 18.5.4 BOOLEAN-DATENTYP . 685 18.5.5 UNDEFINED UND NULL-DATENTYPEN . 686 18.5.6 OBJEKTE . 686 18.5.7 DATENTYPEN KONVERTIEREN . 687 18.6 ARITHMETISCHE OPERATOREN ZUM RECHNEN IN JAVASCRIPT. 688 18.7 BEDINGTE ANWEISUNGEN IN JAVASCRIPT . 690 18.7.1 TRUE ODER FALSE: BOOLESCHER WAHRHEITSWERT . 691 18.7.2 DIE VERSCHIEDENEN VERGLEICHSOPERATOREN IN JAVASCRIPT VERWENDEN . 692 18.7.3 DIE IF-VERZWEIGUNG VERWENDEN . 693 18.7.4 DEN AUSWAHLOPERATOR VERWENDEN . 694 18.7.5 LOGISCHE OPERATOREN . 695 18.7.6 NULLISH COALESCING OPERATOR . 696 18.7.7 MEHRFACHVERZWEIGUNG MIT SWITCH . 697 18.8 PROGRAMMANWEISUNGEN MEHRMALS WIEDERHOLEN MIT SCHLEIFEN . 698 18.8.1 INKREMENT UND DEKREMENTOPERATOR . 698 18.8.2 DIE KOPFGESTEUERTE FOR-SCHLEIFE . 699 18.8.3 DIE KOEPF GESTEUERTE WHILE-SCHLEIFE . 700 18.8.4 DIE FUSSGESTEUERTE DO-WHILE-SCHLEIFE . 701 18.8.5 DEN ANWEISUNGSBLOCK MIT BREAK BEENDEN . 701 18.8.6 MIT CONTINUE ZUM SCHLEIFENANFANG SPRINGEN . 702 18.9 ZUSAMMENFASSUNG. 702 19 ARRAYS, FUNKTIONEN UND OBJEKTE IN JAVASCRIPT 703 19.1 FUNKTIONEN IN JAVASCRIPT . 703 19.1.1 DIE VERSCHIEDENEN MOEGLICHKEITEN, EINE FUNKTION IN JAVASCRIPT ZU DEFINIEREN . 704 19.1.2 FUNKTIONEN AUFRUFEN UND FUNKTIONSPARAMETER . 706 19.1.3 RUECKGABEWERT EINER FUNKTION . 709 19.1.4 DER GUELTIGKEITSBEREICH VON VARIABLEN IN EINER FUNKTION . 710 19.1.5 FUNKTIONEN IN DER KURZSCHREIBWEISE DEFINIEREN (ARROW FUNCTIONS) . 712 19.1.6 FUNKTION IN EINER WEBSEITE VERWENDEN . 713 19.2 ARRAYS . 715 19.2.1 ZUGRIFF AUF DIE EINZELNEN ELEMENTE IM ARRAY . 717 19.2.2 MEHRDIMENSIONALE ARRAYS . 718 19.2.3 EINEM ARRAY NEUE ELEMENTE HINZUFUEGEN BZW. ENTFERNEN . 719 19.2.4 ARRAYS SORTIEREN . 724 19.2.5 SUCHEN IN ARRAYS . 726 19.2.6 WEITERE METHODEN FUER ARRAYS . 726 19.3 ZEICHENKETTEN UND REGULAERE AUSDRUECKE . 727 19.3.1 NUETZLICHE FUNKTIONEN FUER ZEICHENKETTEN . 728 19.3.2 REGULAERE AUSDRUECKE AUF ZEICHENKETTEN ANWENDEN . 728 19.4 OBJEKTORIENTIERTE PROGRAMMIERUNG IN JAVASCRIPT. 729 19.4.1 WAS SIND OBJEKTE GENAU? . 729 19.4.2 OBJEKTE UEBER KONSTRUKTORFUNKTIONEN ERSTELLEN . 731 19.4.3 OBJEKTE MIT DER KLASSENSYNTAX ERZEUGEN . 732 19.4.4 ZUGRIFF AUF DIE OBJEKTEIGENSCHAFTEN UND -METHODEN - SETTER UND GETTER . 733 19.4.5 DAS SCHLUESSELWORT THIS . 735 19.5 WEITERE GLOBALE OBJEKTE . 736 19.5.1 DAS OBERSTE OBJEKT OBJECT . 737 19.5.2 OBJEKTE FUER DIE PRIMITIVEN DATENTYPEN NUMBER, STRING UND BOOLEAN . 737 19.5.3 FUNCTION-OBJEKT . 739 19.5.4 DATE-OBJEKT . 739 19.5.5 . . 740 19.5.6 MAP-OBJEKT . 740 19.5.7 SET-OBJEKT . 740 19.6 ZUSAMMENFASSUNG . 741 20 WEBSEITEN DYNAMISCH AENDERN 743 20.1 EINFUEHRUNG IN DAS DOM EINES HTML-DOKUMENTS . 743 20.2 DAS DOCUMENT-OBJEKT . 745 20.3 DIE PROGRAMMIERSCHNITTSTELLE VON DOM . 745 20.4 AUF ELEMENTE IM DOM ZUGREIFEN . 747 20.4.1 EIN HTML-ELEMENT MIT EINEM BESTIMMTEN ID-ATTRIBUT SUCHEN . 748 20.4.2 HTML-ELEMENTE MIT EINEM BESTIMMTEN TAG-NAMEN SUCHEN . 749 20.4.3 HTML-ELEMENTE MIT EINEM BESTIMMTEN CLASS-ATTRIBUT SUCHEN . 752 20.4.4 HTML-ELEMENTE MIT EINEM BESTIMMTEN NAME-ATTRIBUT SUCHEN . 752 20.4.5 QUERYSELECTOR() UND QUERYSELECTORAIIQ VERWENDEN . 754 20.4.6 WEITERE OBJEKT UND EIGENSCHAFTENSAMMLUNGEN . 756 20.5 AUFJAVASCRIPT-EVENTSREAGIEREN . 759 20.6 MIT DEM EVENT-HANDLER DIE EVENTS BEHANDELN . 761 20.6.1 EVENT-HANDLER ALS HTML-ATTRIBUT IM HTML-ELEMENT EINRICHTEN (VERALTET) 761 20.6.2 EVENT-HANDLER ALS EIGENSCHAFT EINES OBJEKTS EINRICHTEN . 762 20.6.3 EINEN EVENT-HANDLER MIT ADDEVENTLISTENER() EINRICHTEN (BEST PRACTICE) . 763 20.7 GAENGIGE JAVASCRIPT-EVENTS IN DER UEBERSICHT . 765 20.7.1 DIE JAVASCRIPT-EVENTS DER BENUTZEROBERFLAECHE (WINDOW-EVENTS) . 765 20.7.2 JAVASCRIPT-EVENTS, DIE IN VERBINDUNG MIT DER MAUS AUFTRETEN KOENNEN . 767 20.7.3 JAVASCRIPT-EVENTS FUER GERAETE MIT EINEM TOUCHSCREEN . 768 20.7.4 JAVASCRIPT-EVENTS, DIE IN VERBINDUNG MIT DER TASTATUR AUFTRETEN . 769 20.7.5 JAVASCRIPT-EVENTS FUER HTML-FORMULARE . 770 20.7.6 JAVASCRIPT-EVENTS FUER DIE WEB-APIS . 770 20.8 STANDARDAKTION VON EVENTS UNTERDRUECKEN . 770 20.9 DER EVENT-FLUSS (EVENT-PROPAGATION) . 771 20.9.1 MEHR ZUR BUBBLING-PHASE . 772 20.9.2 BUBBLING MIT DER METHODE STOPPROPAGATION() ABBRECHEN . 773 20.9.3 EINGREIFEN IN DEN EVENT-FLUSS WAEHREND DER CAPTURING-PHASE . 775 20.9.4 MEHR INFORMATIONEN ZU CAPTURING-PHASE UND BUBBLING-PHASE . 776 20.10 WEITERE INFORMATIONEN ZU EVENTS MIT DEM EVENT-OBJEKT . 776 20.11 HTML-ATTRIBUT ODER DEN TEXTKNOTEN AENDERN . 779 20.11.1 DEN INHALT VON HTML-ELEMENTEN MIT INNERHTML AENDERN . 780 20.11.2 DEN WERT EINES HTML-ATTRIBUTS AENDERN . 781 20.12 HTML-ELEMENTE HINZUFUEGEN, AENDERN, ENTFERNEN . 783 20.12.1 NEUES HTML-ELEMENT UND INHALT ERZEUGEN UND HINZUFUEGEN . 784 20.12.2 HTML-ELEMENTE NOCH GEZIELTER IM DOM-BAUM ANSTEUERN . 786 20.12.3 EIN NEUES HTML-ELEMENT GEZIELTER DEM DOM-BAUM HINZUFUEGEN . 790 20.12.4 VORHANDENES HTML-ELEMENT VOM DOM-BAUM LOESCHEN . 792 20.12.5 EIN HTML-ELEMENT IM DOM-BAUM DURCH EIN ANDERES ERSETZEN . 793 20.12.6 EINEN KNOTEN ODER GANZE FRAGMENTE DES DOM-BAUMES KLONEN . 794 20.12.7 VERSCHIEDENE METHODEN, DIE HTML-ATTRIBUTE ZU MANIPULIEREN . 795 20.12.8 DAS TEMPLATE -HTML-TAG . 798 20.13 CSS UND JAVASCRIPT. 801 20.13.1 DIREKTFORMATIERUNG UEBER INLINE-STYLES . 801 20.13.2 MEHRERE STYLES AUF EINMAL ANWENDEN . 802 20.13.3 CSS-KLASSEN MIT JAVASCRIPT AENDERN . 803 20.14 HTML-FORMULARE UND JAVASCRIPT . 804 20.14.1 TEXTEINGABEFELDER MIT JAVASCRIPT EINLESEN . 805 20.14.2 AUSWAHLLISTEN MIT JAVASCRIPT EINLESEN . 806 20.14.3 RADIOSCHALTFLAECHEN UND CHECKBOXEN MIT JAVASCRIPT EINLESEN . 807 20.14.4 SCHALTFLAECHEN MIT JAVASCRIPT ABFANGEN . 809 20.14.5 DIE FORTSCHRITTSANZEIGE PROGRESS MIT JAVASCRIPT STEUERN . 810 20.15 ZUSAMMENFASSUNG . 811 21 EINFUEHRUNG IN DIE WEB-APIS (BROWSER-APIS) 813 21.1 VIDEO UND AUDIO-MEDIA-API . 814 21.1.1 EIN VIDEO MIT JAVASCRIPT UND DER MEDIA-API STEUERN . 815 21.1.2 EINE AUDIODATEI MIT JAVASCRIPT UND DER MEDIA-API STEUERN . 819 21.2 DEN STANDORT ERMITTELN MIT DER GEOLOCATION-API . 821 21.2.1 DIE GEOLOCATION-API IN EINEM HTML-DOKUMENT VERWENDEN . 822 21.2.2 FEHLER UND ZUGRIFFSRECHTE DER GEOLOCATION-API BEHANDELN . 824 21.2.3 FEINTUNING MIT WEITEREN OPTIONEN DER GEOLOCATION-API . 826 21.2.4 DIE POSITION DES BENUTZERS DAUERHAFT UEBERWACHEN . 828 21.2.5 DIE POSITION DES BENUTZERS AUF EINER KARTE ANZEIGEN . 829 21.3 WEB STORAGE - DATENBANK FUER OFFLINEANWENDUNGEN . 833 21.3.1 COOKIES MIT JAVASCRIPT REALISIEREN . 837 21.3.2 COOKIES VS. WEB STORAGE . 842 21.3.3 WEITERE OFFLINETECHNOLOGIEN IM UEBERBLICK . 842 21.3.4 DIE INTERNETVERBINDUNG DES BENUTZERS PRUEFEN . 843 21.4 WEB WORKERS - DIE HELFER IM HINTERGRUND . 845 21.5 AKTUALISIEREN OHNE ANFRAGE MIT SERVER-SENT EVENTS . 853 21.6 WEITERE INTERESSANTE WEB-APIS IM SCHNELLDURCHLAUF . 857 21.6.1 KOMMUNIKATION IN ECHTZEIT MIT DEN WEBSOCKETS . 857 21.6.2 SPRACH UND VIDEOTELEFONIE MIT WEBRTC . 859 21.6.3 3D-GRAFIKEN UND SPIELE MIT WEBGL . 860 21.6.4 DER UMGANG MIT LOKALEN DATEIEN MIT DER FILE-API . 860 21.6.5 UEBERSICHT ALLER WEB-APIS . 863 21.7 ZUSAMMENFASSUNG . 864 22 EINE EINFUEHRUNG IN AJAX UND DIE FETCH-API 865 22.1 EINE EINFUEHRUNG IN DIE AJAX-PROGRAMMIERUNG . 865 22.1.1 EIN EINFACHES AJAX-BEISPIEL BEI DER AUSFUEHRUNG . 867 22.1.2 DAS XMLHTTPREQUEST-OBJEKT ERZEUGEN . 869 22.1.3 EINE ANFRAGE AN DEN SERVER STELLEN . 869 22.1.4 DATEN MITSENDEN . 870 22.1.5 DEN STATUS DES XMLHTTPREQUEST-OBJEKTS ERMITTELN . 871 22.1.6 DIE ANTWORT VOM SERVER WEITERVERARBEITEN . 873 22.1.7 DAS AJAX-BEISPIEL BEI DER AUSFUEHRUNG . 873 22.1.8 EIN KOMPLEXERES AJAX-BEISPIEL MIT XML UND DOM . 874 22.1.9 DAS JSON-DATENFORMAT MIT AJAX . 879 22.2 DIE FETCH-API. 883 22.2.1 DIE FETCH-API VERWENDEN . 883 22.2.2 DIE FETCH-API MIT PROMISES VERWENDEN . 885 22.2.3 POST-ANFRAGEN MIT DER FETCH-API VERWENDEN . 886 22.3 ZUSAMMENFASSUNG . 887 23 DAS BOOTSTRAP-FRAMEWORK EINSETZEN 889 23.1 BOOTSTRAP HERUNTERLADEN UND INTEGRIEREN . 890 23.2 DAS LAYOUT MIT DEM BOOTSTRAP-FRAMEWORK ERSTELLEN . 893 23.3 DIE KOMPONENTEN DES BOOTSTRAP-FRAMEWORKS VERWENDEN . 905 23.4 UEBERSICHT UEBER WEITERE BELIEBTE CSS-FRAMEWORKS . 915 23.5 ZUSAMMENFASSUNG . 916 24 EINFUEHRUNG IN DIE GRUNDLEGENDEN KONZEPTE VON REACT 917 24.1 WAS IST REACT? . 917 24.2 DIE UMGEBUNG FUER REACT EINRICHTEN . 918 24.3 EIN REACT-PROJEKT EINRICHTEN UND STARTEN . 919 24.4 HALLO WELT IN REACT . 922 24.5 JSX (JAVASCRIPT XML) . 924 24.5.1 JSX FUER DIE UL VERWENDEN . 924 24.5.2 JSX BEI HTML-ATTRIBUTEN . 927 24.53 ALLEIN STEHENDE ELEMENTE MUESSEN GESCHLOSSEN WERDEN . 928 24.5.4 FALLUNTERSCHEIDUNG . 928 24.5.5 LISTEN MIT REACT . 929 24.6 RENDERN VON ELEMENTEN . 932 24.7 REACT-KOMPONENTEN UND PROPS. 932 24.7.1 FUNKTIONSKOMPONENTE . 934 24.7.2 KLASSENKOMPONENTEN . 937 24.7.3 PROPS . 939 24.8 STATUSMANAGEMENT IN REACT . 941 24.8.1 DAS STATE-OBJEKT IN DER KLASSENKOMPONENTE VERWENDEN . 943 24.8.2 DAS STATE-OBJEKT VERAENDERN . 944 24.8.3 CHILDREN-PROPS . 946 24.9 EREIGNISSE UND DEREN HANDLER . 948 24.9.1 ARGUMENTE AN EVENT-HANDLER UEBERGEBEN . 949 24.10 LIFECYCLE VON KOMPONENTEN . 949 24.10.1 MOUNTING . 950 24.10.2 UPDATING . 955 24.10.3 UNMOUNTING . 957 24.10.4 REACTFRAGMENT . 959 24.11 DIE REACT-HOOKS-API. 960 24.11.1 LOKALER STATE IN FUNKTIONSKOMPONENTEN MIT USESTATE . 961 24.11.2 DER KOMPONENTEN-LIFECYCLE MIT USEEFFECT . 963 24.11.3 ZUGRIFF AUF DEN KONTEXT MIT USECONTEXT . 965 24.11.4 CUSTOM HOOKS . 967 24.12 CSS UND REACT . 968 24.12.1 INLINE-STYLING MIT DEM STYLE-ATTRIBUT . 970 24.12.2 CSS-KLASSEN IN JSX VERWENDEN . 973 24.12.3 CSS-MODULE IN REACT . 975 24.12.4 CSS IN JAVASCRIPT-STYLED COMPONENTS . 976 24.13 FORMULARE IN REACT . 979 24.13.1 CONTROLLED COMPONENTS . 980 24.13.2 UNCONTROLLED COMPONENTS . 982 24.13.3 ZUGRIFF AUF DAS NATIVE DOM UEBER EINE REFERENZ . 983 24.14 SO GEHT ES WEITER . 984 25 EINFUEHRUNG IN DIE GRUNDLEGENDEN KONZEPTE VON ANGULAR 987 25.1 DIE NOETIGEN WERKZEUGE . 987 25.2 HALLO WELT IN ANGULAR . 988 25.2.1 UEBERSICHT DER PROJEKTDATEIEN . 990 25.2.2 UEBERSICHT DER NG-BEFEHLE . 991 25.3 EINE KLEINE EINFUEHRUNG IN TYPESCRIPT . 992 25.3.1 TYPISIERUNG . 994 25.3.2 INTERFACES . 997 25.3.3 EXPORT UND IMPORT . 999 25.3.4 KLASSEN . : . 1000 25.3.5 WEITERES . 1005 25.4 KOMPONENTEN . 1005 25.4.1 KOMPONENTEN ERSTELLEN . 1006 25.4.2 KOMPONENTEN MIT CLI ERSTELLEN . 1011 25.5 KOMPONENTEN BINDEN . 1013 25.5.1 STRING-INTERPOLATION . 1014 25.5.2 PROPERTY-BINDING . 1016 25.5.3 EVENT-BINDING . 1018 25.5.4 TWO-WAY-BINDING . 1023 25.6 PIPES . 1025 25.6.1 VORDEFINIERTE PIPES . 1026 25.6.2 EIGENE PIPES . 1030 25.7 DER DATENFLUSS ZWISCHEN DEN KOMPONENTEN . 1034 25.7.1 INPUT-PROPERTY (EINGEHENDE DATEN) . 1037 25.7.2 OUTPUT-PROPERTY (AUSGEHENDE DATEN) . 1039 25.8 STYLES FUER KOMPONENTEN . 1041 25.8.1 STYLE ALS EXTERNE DATEI MIT STYLEURIS IN @COMPONENT . 1042 25.8.2 STYLES-EIGENSCHAFT IN @COMPONENT . 1042 25.8.3 INLINE-STYLE IM HTML-TEMPLATE . 1043 25.8.4 EXKURS: DAS BOOTSTRAP-FRAMEWORK IN ANGULAR VERWENDEN . 1043 25.9 DER LEBENSZYKLUS EINER KOMPONENTE . 1044 25.9.1 DER KONSTRUKTOR . 1045 25.9.2 REAGIEREN AUF AENDERUNGEN - NGONCHANGES . 1046 25.9.3 DIE KOMPONENTE INITIALISIEREN - NGONLNIT . 1047 25.9.4 IN DEN CHANGEDETECTION-LAUF EINGREIFEN - NGDOCHECK . 1047 25.9.5 VIEWCHILD UND CONTENTCHILD . 1048 25.9.6 AUFRAEUMARBEITEN MIT NGONDESTROY . 1048 25.10 DIREKTIVEN . 1048 25.10.1 STRUKTURDIREKTIVEN . .' . 1049 25.10.2 ATTRIBUTDIREKTIVEN NGCLASS UND NGSTYLE . 1057 25.10.3 EIGENE DIREKTIVEN ERSTELLEN . 1061 25.11 WIE GEHT ES NUN WEITER? . 1063 26 BEISPIELPROJEKT ERSTELLEN, TESTEN UND OPTIMIEREN 1065 26.1 PROJEKTPLANUNG . 1066 26.1.1 WER IST IHRE ZIELGRUPPE? . 1066 26.1.2 DEN INHALT PLANEN . 1066 26.2 GRUNDGERUEST MIT INHALT ERSTELLEN . 1068 26.3 DAS LAYOUT DER WEBSITE FESTLEGEN UND ERSTELLEN . 1070 26.3.1 DAS LAYOUT PLANEN . 1070 26.3.2 DAS GRUNDLEGENDE LAYOUT ERSTELLEN . 1071 26.4 TYPOGRAFIE-AUSWAHL DER SCHRIFTEN . 1077 26.5 NAVIGATION . 1080 26.6 FARBEN FUER DAS PROJEKT FESTLEGEN . 1082 26.7 GRAFIKEN UND BILDER . 1083 26.8 WEBSITE AUF FUNKTIONALITAET TESTEN . 1087 26.8.1 BROWSERTESTS . 1087 26.8.2 LAYOUTUMBRUECHE TESTEN . 1089 26.8.3 HTML UND CSS VALIDIEREN . 1090 26.9 WEBSITE AUF BARRIEREFREIHEIT HIN TESTEN . 1091 26.10 PERFORMANCE DER WEBSITE TESTEN UND VERBESSERN. 1092 26.10.1 SPEED-TESTS . 1092 26.10.2 UNGENUTZTEN CODE ENTFERNEN . 1094 26.10.3 SERVERANFRAGEN REDUZIEREN . 1095 26.10.4 DATEIGROESSE REDUZIEREN . 1096 26.11 NACHHALTIGE WEBENTWICKLUNG . 1097 26.11.1 CO2-BILANZ EINER WEBSITE MESSEN . 1098 26.11.2 SO GEHT NACHHALTIGE WEBENTWICKLUNG . 1099 26.11.3 NACHHALTIG BEI DESIGN UND INHALT . 1099 26.11.4 NACHHALTIG BEI DER WEBENTWICKLUNG . 1103 26.11.5 NACHHALTIG BEIM WEBHOSTING . 1105 26.11.6 FAZIT ZUR NACHHALTIGKEIT BEI DER WEBENTWICKLUNG . 1106 26.12 ZUSAMMENFASSUNG . 1106 INDEX . 1107
any_adam_object	1
any_adam_object_boolean	1
author	Wolf, Jürgen 1974-
author_GND	(DE-588)132691256
author_facet	Wolf, Jürgen 1974-
author_role	aut
author_sort	Wolf, Jürgen 1974-
author_variant	j w jw
building	Verbundindex
bvnumber	BV049046581
classification_rvk	ST 252 ST 250
ctrlnum	(OCoLC)1401185535 (DE-599)DNB1286727448
dewey-full	006.74 006.76
dewey-hundreds	000 - Computer science, information, general works
dewey-ones	006 - Special computer methods
dewey-raw	006.74 006.76
dewey-search	006.74 006.76
dewey-sort	16.74
dewey-tens	000 - Computer science, information, general works
discipline	Informatik
discipline_str_mv	Informatik
edition	5., aktualisierte und überarbeitete Auflage
format	Book
fullrecord	<?xml version="1.0" encoding="UTF-8"?><collection xmlns="http://www.loc.gov/MARC21/slim"><record><leader>00000nam a22000008c 4500</leader><controlfield tag="001">BV049046581</controlfield><controlfield tag="003">DE-604</controlfield><controlfield tag="005">20241104</controlfield><controlfield tag="007">t</controlfield><controlfield tag="008">230712s2023 gw a\|\|\| \|\|\|\| 00\|\|\| ger d</controlfield><datafield tag="015" ind1=" " ind2=" "><subfield code="a">23,N17</subfield><subfield code="2">dnb</subfield></datafield><datafield tag="016" ind1="7" ind2=" "><subfield code="a">1286727448</subfield><subfield code="2">DE-101</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">9783836297288</subfield><subfield code="c">Festeinband : EUR 49.90 (DE), EUR 51.30 (AT), CHF 63.90 (freier Preis)</subfield><subfield code="9">978-3-8362-9728-8</subfield></datafield><datafield tag="024" ind1="3" ind2=" "><subfield code="a">9783836297288</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(OCoLC)1401185535</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(DE-599)DNB1286727448</subfield></datafield><datafield tag="040" ind1=" " ind2=" "><subfield code="a">DE-604</subfield><subfield code="b">ger</subfield><subfield code="e">rda</subfield></datafield><datafield tag="041" ind1="0" ind2=" "><subfield code="a">ger</subfield></datafield><datafield tag="044" ind1=" " ind2=" "><subfield code="a">gw</subfield><subfield code="c">XA-DE-NW</subfield></datafield><datafield tag="049" ind1=" " ind2=" "><subfield code="a">DE-1102</subfield><subfield code="a">DE-M347</subfield><subfield code="a">DE-29T</subfield><subfield code="a">DE-1050</subfield><subfield code="a">DE-Aug4</subfield><subfield code="a">DE-523</subfield><subfield code="a">DE-92</subfield><subfield code="a">DE-1051</subfield><subfield code="a">DE-860</subfield><subfield code="a">DE-859</subfield><subfield code="a">DE-703</subfield><subfield code="a">DE-29</subfield><subfield code="a">DE-573</subfield><subfield code="a">DE-210</subfield><subfield code="a">DE-128</subfield></datafield><datafield tag="082" ind1="0" ind2=" "><subfield code="a">006.74</subfield><subfield code="2">23/ger</subfield></datafield><datafield tag="082" ind1="0" ind2=" "><subfield code="a">006.76</subfield><subfield code="2">23/ger</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 252</subfield><subfield code="0">(DE-625)143627:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 250</subfield><subfield code="0">(DE-625)143626:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="8">1\p</subfield><subfield code="a">004</subfield><subfield code="2">23sdnb</subfield></datafield><datafield tag="100" ind1="1" ind2=" "><subfield code="a">Wolf, Jürgen</subfield><subfield code="d">1974-</subfield><subfield code="e">Verfasser</subfield><subfield code="0">(DE-588)132691256</subfield><subfield code="4">aut</subfield></datafield><datafield tag="240" ind1="1" ind2="0"><subfield code="a">HTML5 und CSS3</subfield></datafield><datafield tag="245" ind1="1" ind2="0"><subfield code="a">HTML und CSS</subfield><subfield code="b">das umfassende Handbuch</subfield><subfield code="c">Jürgen Wolf</subfield></datafield><datafield tag="246" ind1="1" ind2="0"><subfield code="a">HTML 5 und CSS 3</subfield></datafield><datafield tag="250" ind1=" " ind2=" "><subfield code="a">5., aktualisierte und überarbeitete Auflage</subfield></datafield><datafield tag="264" ind1=" " ind2="1"><subfield code="a">Bonn</subfield><subfield code="b">Rheinwerk</subfield><subfield code="c">2023</subfield></datafield><datafield tag="300" ind1=" " ind2=" "><subfield code="a">1124 Seiten</subfield><subfield code="b">Illustrationen, Diagramme</subfield><subfield code="c">24 cm x 19 cm</subfield></datafield><datafield tag="336" ind1=" " ind2=" "><subfield code="b">txt</subfield><subfield code="2">rdacontent</subfield></datafield><datafield tag="337" ind1=" " ind2=" "><subfield code="b">n</subfield><subfield code="2">rdamedia</subfield></datafield><datafield tag="338" ind1=" " ind2=" "><subfield code="b">nc</subfield><subfield code="2">rdacarrier</subfield></datafield><datafield tag="490" ind1="0" ind2=" "><subfield code="a">Rheinwerk Computing</subfield></datafield><datafield tag="500" ind1=" " ind2=" "><subfield code="a">Von der 1. bis zur 3. Auflage unter dem Titel "HTML5 und CSS3" erschienen.</subfield></datafield><datafield tag="500" ind1=" " ind2=" "><subfield code="a">Auf dem Umschlag: Von den HTML-Grundlagen bis zur JavaScript-Entwicklung ; Responsive Webdesign, Flexboxen und CSS Grid ; Video, Audio, lokaler Speicher, Media Queries, Dark Mode, Web-APIs, Custom Properties ; Alle Beispielprojekte zum Download</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Cascading Style Sheets 3.0</subfield><subfield code="0">(DE-588)7750895-6</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Webdesign</subfield><subfield code="0">(DE-588)1041632088</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">JavaScript</subfield><subfield code="0">(DE-588)4420180-1</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">HTML</subfield><subfield code="0">(DE-588)4373477-7</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Cascading Style Sheets</subfield><subfield code="0">(DE-588)4467617-7</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">HTML 5.0</subfield><subfield code="0">(DE-588)7704810-6</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">HTML5</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">CSS3</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Webentwicklung</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">HTML-API</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">JavaScript</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Canvas</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Ajax</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Web 2.0</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Usability</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">User Experience UX-Design</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">UX</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Responsive Web-Design</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Style Sheet</subfield></datafield><datafield tag="689" ind1="0" ind2="0"><subfield code="a">HTML</subfield><subfield code="0">(DE-588)4373477-7</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2="1"><subfield code="a">Cascading Style Sheets</subfield><subfield code="0">(DE-588)4467617-7</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2="2"><subfield code="a">JavaScript</subfield><subfield code="0">(DE-588)4420180-1</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2="3"><subfield code="a">Webdesign</subfield><subfield code="0">(DE-588)1041632088</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2=" "><subfield code="5">DE-604</subfield></datafield><datafield tag="689" ind1="1" ind2="0"><subfield code="a">HTML 5.0</subfield><subfield code="0">(DE-588)7704810-6</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="1" ind2="1"><subfield code="a">Cascading Style Sheets 3.0</subfield><subfield code="0">(DE-588)7750895-6</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="1" ind2="2"><subfield code="a">JavaScript</subfield><subfield code="0">(DE-588)4420180-1</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="1" ind2=" "><subfield code="5">DE-604</subfield></datafield><datafield tag="710" ind1="2" ind2=" "><subfield code="a">Rheinwerk Verlag</subfield><subfield code="0">(DE-588)1081738405</subfield><subfield code="4">pbl</subfield></datafield><datafield tag="776" ind1="0" ind2="8"><subfield code="i">Erscheint auch als</subfield><subfield code="n">Online-Ausgabe</subfield><subfield code="z">978-3-8362-9730-1</subfield><subfield code="w">(DE-604)BV049461484</subfield></datafield><datafield tag="780" ind1="0" ind2="0"><subfield code="i">Ersatz von</subfield><subfield code="z">978-3-8362-8117-1</subfield><subfield code="w">(DE-604)BV047390879</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">X:MVB</subfield><subfield code="q">text/html</subfield><subfield code="u">http://deposit.dnb.de/cgi-bin/dokserv?id=ccdcded0c6dc43fd9240149f4cb81e93&prov=M&dok_var=1&dok_ext=htm</subfield><subfield code="3">Inhaltstext</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">DNB Datenaustausch</subfield><subfield code="q">application/pdf</subfield><subfield code="u">http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=034309017&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Inhaltsverzeichnis</subfield></datafield><datafield tag="883" ind1="1" ind2=" "><subfield code="8">1\p</subfield><subfield code="a">vlb</subfield><subfield code="d">20230420</subfield><subfield code="q">DE-101</subfield><subfield code="u">https://d-nb.info/provenance/plan#vlb</subfield></datafield><datafield tag="943" ind1="1" ind2=" "><subfield code="a">oai:aleph.bib-bvb.de:BVB01-034309017</subfield></datafield></record></collection>
id	DE-604.BV049046581
illustrated	Illustrated
index_date	2024-07-03T22:20:27Z
indexdate	2024-11-04T11:02:26Z
institution	BVB
institution_GND	(DE-588)1081738405
isbn	9783836297288
language	German
oai_aleph_id	oai:aleph.bib-bvb.de:BVB01-034309017
oclc_num	1401185535
open_access_boolean
owner	DE-1102 DE-M347 DE-29T DE-1050 DE-Aug4 DE-523 DE-92 DE-1051 DE-860 DE-859 DE-703 DE-29 DE-573 DE-210 DE-128
owner_facet	DE-1102 DE-M347 DE-29T DE-1050 DE-Aug4 DE-523 DE-92 DE-1051 DE-860 DE-859 DE-703 DE-29 DE-573 DE-210 DE-128
physical	1124 Seiten Illustrationen, Diagramme 24 cm x 19 cm
publishDate	2023
publishDateSearch	2023
publishDateSort	2023
publisher	Rheinwerk
record_format	marc
series2	Rheinwerk Computing
spelling	Wolf, Jürgen 1974- Verfasser (DE-588)132691256 aut HTML5 und CSS3 HTML und CSS das umfassende Handbuch Jürgen Wolf HTML 5 und CSS 3 5., aktualisierte und überarbeitete Auflage Bonn Rheinwerk 2023 1124 Seiten Illustrationen, Diagramme 24 cm x 19 cm txt rdacontent n rdamedia nc rdacarrier Rheinwerk Computing Von der 1. bis zur 3. Auflage unter dem Titel "HTML5 und CSS3" erschienen. Auf dem Umschlag: Von den HTML-Grundlagen bis zur JavaScript-Entwicklung ; Responsive Webdesign, Flexboxen und CSS Grid ; Video, Audio, lokaler Speicher, Media Queries, Dark Mode, Web-APIs, Custom Properties ; Alle Beispielprojekte zum Download Cascading Style Sheets 3.0 (DE-588)7750895-6 gnd rswk-swf Webdesign (DE-588)1041632088 gnd rswk-swf JavaScript (DE-588)4420180-1 gnd rswk-swf HTML (DE-588)4373477-7 gnd rswk-swf Cascading Style Sheets (DE-588)4467617-7 gnd rswk-swf HTML 5.0 (DE-588)7704810-6 gnd rswk-swf HTML5 CSS3 Webentwicklung HTML-API JavaScript Canvas Ajax Web 2.0 Usability User Experience UX-Design UX Responsive Web-Design Style Sheet HTML (DE-588)4373477-7 s Cascading Style Sheets (DE-588)4467617-7 s JavaScript (DE-588)4420180-1 s Webdesign (DE-588)1041632088 s DE-604 HTML 5.0 (DE-588)7704810-6 s Cascading Style Sheets 3.0 (DE-588)7750895-6 s Rheinwerk Verlag (DE-588)1081738405 pbl Erscheint auch als Online-Ausgabe 978-3-8362-9730-1 (DE-604)BV049461484 Ersatz von 978-3-8362-8117-1 (DE-604)BV047390879 X:MVB text/html http://deposit.dnb.de/cgi-bin/dokserv?id=ccdcded0c6dc43fd9240149f4cb81e93&prov=M&dok_var=1&dok_ext=htm Inhaltstext DNB Datenaustausch application/pdf http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=034309017&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA Inhaltsverzeichnis 1\p vlb 20230420 DE-101 https://d-nb.info/provenance/plan#vlb
spellingShingle	Wolf, Jürgen 1974- HTML und CSS das umfassende Handbuch Cascading Style Sheets 3.0 (DE-588)7750895-6 gnd Webdesign (DE-588)1041632088 gnd JavaScript (DE-588)4420180-1 gnd HTML (DE-588)4373477-7 gnd Cascading Style Sheets (DE-588)4467617-7 gnd HTML 5.0 (DE-588)7704810-6 gnd
subject_GND	(DE-588)7750895-6 (DE-588)1041632088 (DE-588)4420180-1 (DE-588)4373477-7 (DE-588)4467617-7 (DE-588)7704810-6
title	HTML und CSS das umfassende Handbuch
title_alt	HTML5 und CSS3 HTML 5 und CSS 3
title_auth	HTML und CSS das umfassende Handbuch
title_exact_search	HTML und CSS das umfassende Handbuch
title_exact_search_txtP	HTML und CSS das umfassende Handbuch
title_full	HTML und CSS das umfassende Handbuch Jürgen Wolf
title_fullStr	HTML und CSS das umfassende Handbuch Jürgen Wolf
title_full_unstemmed	HTML und CSS das umfassende Handbuch Jürgen Wolf
title_short	HTML und CSS
title_sort	html und css das umfassende handbuch
title_sub	das umfassende Handbuch
topic	Cascading Style Sheets 3.0 (DE-588)7750895-6 gnd Webdesign (DE-588)1041632088 gnd JavaScript (DE-588)4420180-1 gnd HTML (DE-588)4373477-7 gnd Cascading Style Sheets (DE-588)4467617-7 gnd HTML 5.0 (DE-588)7704810-6 gnd
topic_facet	Cascading Style Sheets 3.0 Webdesign JavaScript HTML Cascading Style Sheets HTML 5.0
url	http://deposit.dnb.de/cgi-bin/dokserv?id=ccdcded0c6dc43fd9240149f4cb81e93&prov=M&dok_var=1&dok_ext=htm http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=034309017&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA
work_keys_str_mv	AT wolfjurgen html5undcss3 AT rheinwerkverlag html5undcss3 AT wolfjurgen htmlundcssdasumfassendehandbuch AT rheinwerkverlag htmlundcssdasumfassendehandbuch

Verfügbarkeit

Es ist kein Print-Exemplar vorhanden.

Fernleihe Bestellen Achtung: Nicht im THWS-Bestand! Beschreibung

MARC

Datensatz im Suchindex

Es ist kein Print-Exemplar vorhanden.

Ähnliche Einträge