Verfügbarkeit: Einstieg in HTML und CSS

Einstieg in HTML und CSS:

Gespeichert in:

Bibliographische Detailangaben
1. Verfasser:	Müller, Peter 1960- (VerfasserIn)
Format:	Buch
Sprache:	German
Veröffentlicht:	Bonn Rheinwerk 2020
Ausgabe:	1. Auflage
Schriftenreihe:	Rheinwerk Computing
Schlagworte:	HTML Cascading Style Sheets Programmieren Entwickeln WordPress CMS Jimdo CSS3 HTML5 Web-Entwicklung Responsive Web-Design Webseiten erstellen Buch Bücher Wissen lernen Grundlagen Anfänger Einstieg Kurse Workshops Tutorial Anleitung Website erstellen Die eigene Website
Online-Zugang:	Inhaltstext Inhaltsverzeichnis
Beschreibung:	Auf dem Umschlag: Alle wichtigen HTML-Elemente und CSS-Eigenschaften, Moderne Layouts mit Flexbox und CSS Grid, Responsive Webseiten und mobile Navigation
Beschreibung:	507 Seiten Illustrationen, Diagramme
ISBN:	9783836276467 3836276461

Internformat

MARC


LEADER	00000nam a22000008c 4500
001	BV046781344
003	DE-604
005	20241121
007	t\|
008	200625s2020 gw a\|\|\| \|\|\|\| 00\|\|\| ger d
015			\|a 20,N09 \|2 dnb
016	7		\|a 1205211837 \|2 DE-101
020			\|a 9783836276467 \|c kart. : EUR 29.90 (DE), EUR 30.80 (AT), CHF 38.90 (freier Preis) \|9 978-3-8362-7646-7
020			\|a 3836276461 \|9 3-8362-7646-1
024	3		\|a 9783836276467
035			\|a (OCoLC)1164636127
035			\|a (DE-599)DNB1205211837
040			\|a DE-604 \|b ger \|e rda
041	0		\|a ger
044			\|a gw \|c XA-DE-NW
049			\|a DE-525 \|a DE-1050 \|a DE-860 \|a DE-92 \|a DE-Aug4 \|a DE-29T \|a DE-1051 \|a DE-859 \|a DE-19 \|a DE-83 \|a DE-573 \|a DE-473 \|a DE-703
084			\|a ST 250 \|0 (DE-625)143626: \|2 rvk
084			\|a ST 252 \|0 (DE-625)143627: \|2 rvk
084			\|a 004 \|2 sdnb
100	1		\|a Müller, Peter \|d 1960- \|e Verfasser \|0 (DE-588)1013505735 \|4 aut
245	1	0	\|a Einstieg in HTML und CSS \|c Peter Müller
250			\|a 1. Auflage
264		1	\|a Bonn \|b Rheinwerk \|c 2020
300			\|a 507 Seiten \|b Illustrationen, Diagramme
336			\|b txt \|2 rdacontent
337			\|b n \|2 rdamedia
338			\|b nc \|2 rdacarrier
490	0		\|a Rheinwerk Computing
500			\|a Auf dem Umschlag: Alle wichtigen HTML-Elemente und CSS-Eigenschaften, Moderne Layouts mit Flexbox und CSS Grid, Responsive Webseiten und mobile Navigation
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
653			\|a Programmieren Entwickeln
653			\|a WordPress CMS Jimdo
653			\|a Cascading Style Sheets
653			\|a CSS3
653			\|a HTML5
653			\|a Web-Entwicklung
653			\|a Responsive Web-Design
653			\|a Webseiten erstellen
653			\|a Buch Bücher Wissen lernen Grundlagen Anfänger Einstieg Kurse Workshops Tutorial Anleitung
653			\|a Website erstellen
653			\|a Die eigene Website
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		\|5 DE-604
710	2		\|a Rheinwerk Verlag \|0 (DE-588)1081738405 \|4 pbl
856	4	2	\|m X:MVB \|q text/html \|u http://deposit.dnb.de/cgi-bin/dokserv?id=4d4fd4a2bece4df88f653e3d5a319ac0&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=032190514&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA \|3 Inhaltsverzeichnis
943	1		\|a oai:aleph.bib-bvb.de:BVB01-032190514

Datensatz im Suchindex

_version_	1816359724766986240
adam_text	AUF EINEN BLICK TEIL I WEBSEITEN, HTML UND CSS 1 WISSENSWERTES UEBER WEBSEITEN . 35 2 HTML KENNENLERNEN: DIE ERSTE WEBSEITE ERSTELLEN . 47 3 CSS KENNENLERNEN: DIE ERSTE WEBSEITE GESTALTEN . 69 TEIL II HTML (MIT EINER PRISE CSS) 4 HTML-ELEMENTE FUER UEBERSCHRIFTEN, TEXT UND LISTEN . 85 5 HYPERLINKS - DAS BESONDERE AM WEB . 103 6 HTML-ELEMENTE FUER BILDER, AUDIO UND VIDEO . 121 7 HTML-ELEMENTE ZUR STRUKTURIERUNG VON WEBSEITEN UND INHALTEN . 139 8 WEITERE HTML-ELEMENTE ZUR AUSZEICHNUNG VON INHALTEN . 159 9 HTML-ELEMENTE ZUM ERSTELLEN VON FORMULAREN . 179 10 HTML-ELEMENTE ZUM ERSTELLEN VON TABELLEN . 201 11 VON DER WEBSEITE ZUR WEBSITE . 213 TEIL III CSS-GRUNDLAGEN 12 GESTALTEN PER CSS: FARBEN UND EINHEITEN . 237 13 DIE WICHTIGSTEN SELEKTOREN UND SPEZIFITAET . 253 14 DER BROWSER UND DAS CSS: KASKADE, VERERBUNG ODER STANDARDWERT . 271 15 SCHRIFT UND TEXT GESTALTEN PER CSS . 285 16 DAS BOX-MODELL FUER BLOCK- UND INLINE-BOXEN . 307 17 BOXEN GESTALTEN PER CSS . 329 18 ORDNUNG HALTEN: STYLESHEETS ORGANISIEREN . 357 TEIL IV CSS - LAYOUT 19 MEDIA QUERIES UND RESPONSIVES WEBDESIGN . 383 20 DER FLOW UND DIE EIGENSCHAFT POSITION . 399 21 SCHWEBEN UND SCHWEBEN LASSEN: FLOAT . 413 22 GESTALTEN PER FLEXBOX: DAS CSS FLEXIBLE BOX LAYOUT . 423 23 EINE RESPONSIVE NAVIGATION ERSTELLEN . 443 24 GESTALTEN MIT RASTER: DAS CSS GRID LAYOUT . 459 25 FLEXIBLE ICONS UND RESPONSIVE BILDER . 483 INHALT MATERIALIEN ZUM BUCH . 26 GELEITWORT . 27 VORWORT . 29 TEIL I WEBSEITEN, HTML UND CSS 1 WISSENSWERTES UEBER WEBSEITEN ZS 1.1 WEBSEITEN SEHEN BEI JEDEM BENUTZER ANDERS AUS . 35 1.2 WEBSEITEN BESTEHEN AUS QUELLTEXT . 36 1.3 QUELLTEXT BESTEHT AUS HTML, CSS UND JAVASCRIPT . 37 1.3.1 DER INHALT: HTML IST NICHT HUEBSCH, ABER FLEXIBEL . 38 1.3.2 DAS STYLING: CSS GESTALTET DAS HTML . 39 1.4 WEBSEITEN WERDEN VON EINEM BROWSER DARGESTELLT . 40 1.4.1 DIE BEKANNTESTEN BROWSER: CHROME, FIREFOX, SAFARI, EDGE UND CO . 40 1.4.2 VIELE BROWSER SIND MITEINANDER VERWANDT . 41 1.4.3 BESONDERHEITEN: BROWSER UNTER IOS UND INTERNET EXPLORER . 41 1.5 EDITOREN ZUM SCHREIBEN UND BEARBEITEN VON QUELLTEXT . 42 1.6 REFERENZEN UND NACHSCHLAGEWERKE ZU HTML UND CSS . 43 1.6.1 SELFHTML-DAS DEUTSCHSPRACHIGE URGESTEIN . 43 1.6.2 DAS MOZILLA DEVELOPER NETWORK (MDN) - MOSTLY ENGLISH . 44 1.6.3 ANLAUFSTELLE FUER FRAGEN ZUR BROWSERUNTERSTUETZUNG: CANIUSE.COM 45 1.7 AUF EINEN BLICK . 46 2 HTML KENNENLERNEN: DIE ERSTE WEBSEITE ERSTELLEN 47 2.1 WEBSEITEN BESTEHEN AUS RECHTECKIGEN KAESTCHEN. 48 2.2 HT-M-L: DIE HYPERTEXT MARKUP LANGUAGE . 49 2.2.1 HT WIE HYPERTEXT-TEXT MIT HYPERLINKS . 49 2.2.2 M WIE MARKUP - TEXT MIT TAGS . 49 5 INHALT 2.23 L WIE LANGUAGE-VOKABELN UND GRAMMATIKREGELN . 49 2.2.4 DER UNTERSCHIED ZWISCHEN ELEMENT UND TAG . 50 2.3 JEDE WEBSEITE HAT EIN HTML-GRUNDGERUEST . 50 2.3.1 DIE DATEI INDEX.HTML IM EDITOR ERSTELLEN UND SPEICHERN . 51 2.3.2 EINE GUTE ANGEWOHNHEIT: !-- KOMMENTARE -- . 51 2.3.3 DAS HTML-GRUNDGERUEST FUER DIE STARTSEITE ERSTELLEN . 52 2.4 DER !DOCTYPE UND DAS STAMMELEMENT HTML . 54 2.4.1 DIE DOKUMENTTYP-DEFINITION !DOCTYPE HTML . 54 2.4.2 DAS STAMMELEMENT: HTML UND /HTML UMSCHLIESSEN DEN QUELLTEXT . 55 2.5 HTML-ELEMENTE KOENNEN ATTRIBUTE HABEN . 55 2.6 DER HEAD ENTHAELT WICHTIGE INFOS UEBER DIE WEBSEITE . 56 2.6.1 DIE ANGABE DES ZEICHENSATZES: META CHARSET="UTF-8" . 56 2.6.2 DER SEITENTITEL STEHT ZWISCHEN TITLE UND /TITLE . 57 2.6.3 DIE SEITENBESCHREIBUNG MIT CMETA NAME="DESCRIPTION" . 58 2.7 BITTE NICHT VERKLEINERN: META NAME="VIEWPORT" . . 59 2.7.1 MOBILE BROWSER STELLEN WEBSEITEN VERKLEINERT DAR . 59 2.7.2 RESPONSIVE WEBSEITEN SOLLEN NICHT VERKLEINERT WERDEN . 59 2.7.3 DER META-VIEWPORT GEHOERT MIT INS HTML-GRUNDGERUEST . 60 2.8 DER SICHTBARE BEREICH DER WEBSEITE STEHT IN BODY . 61 2.9 DER KOPFBEREICH DER WEBSEITEN: HEADER . 63 2.10 ENTWICKLERWERKZEUGE IM BROWSER: HTML ANALYSIEREN . 64 2.11 EINE SEHR KURZE GESCHICHTE VON HTML . 65 2.11.1 DAS W3C DEFINIERTE DIE STANDARDS: HTML 1 BIS 4 UND XHTML . 65 2.11.2 W3C UND WHATWG: HTML5 UND HTML- LIVING STANDARD . 66 2.12 AUF EINEN BLICK . 67 3 CSS KENNENLERNEN: DIE ERSTE WEBSEITE GESTALTEN 69 3.1 JEDER BROWSER HAT EIN FEST EINGEBAUTES STYLESHEET . 69 3.2 DAS HTML FUER BODY ALS SCHEMATISCHE DARSTELLUNG . 70 3.3 DAS ERSTE EIGENE STYLESHEET: STYLE.CSS . 72 3.3.1 SCHRITT 1: EINEN UNTERORDNER UND EIN STYLESHEET ERSTELLEN . 72 6 INHALT 3.3.2 SCHRITT 2: HTML-DATEI UND CSS-DATEI VERBINDEN MIT LINK . 72 3.4 DIE ERSTE CSS-REGEL: HINTERGRUNDFARBE FUER BODY . 73 3.4.1 AUCH IN CSS EINE GUTE ANGEWOHNHEIT: /* KOMMENTARE / . 74 3.4.2 HINTERGRUND- UND SCHRIFTFARBE FUER BODY AENDERN . 74 3.5 DEN KOPFBEREICH HEADER SELEKTIEREN UND GESTALTEN . 76 3.5.1 HINTERGRUND-UND SCHRIFTFARBE FUER HEADER AENDERN . 76 3.5.2 ETWAS ABSTAND ZWISCHEN TEXT UND RAND EINFUEGEN MIT PADDING . 77 3.6 WICHTIGE VOKABELN: DER AUFBAU EINER CSS-REGEL . 78 3.7 ENTWICKLERWERKZEUGE IM BROWSER: CSS ANALYSIEREN. 79 3.8 EINE SEHR KURZE GESCHICHTE VON CSS . 80 3.9 AUF EINEN BLICK . 81 TEIL II HTML (MIT EINER PRISE CSS) 4 HTML-ELEMENTE FUER UEBERSCHRIFTEN, TEXT UND LISTEN SS 4.1 UEBERSCHRIFTEN STRUKTURIEREN DEN INHALT: HL BIS H6 . 85 4.1.1 HTML KENNT SECHS EBENEN FUER UEBERSCHRIFTEN . 86 4.1.2 EINE H2 -UEBERSCHRIFT IM INHALTSBEREICH EINFUEGEN . 87 4.2 ABSAETZE UND HERVORHEBUNGEN: P , STRONG , EM . 88 4.2.1 ABSAETZE MIT P UND HERVORHEBUNGEN MIT STRONG UND EM . 88 4.2.2 FLIESSTEXT AUF DER UEBUNGSWEBSITE EINFUEGEN . 88 4.2.3 HTML-ELEMENTE VERSCHACHTELN - ZUERST GEOEFFNET, ZULETZT GESCHLOSSEN 89 4.3 WEBSEITEN IN UNTERSCHIEDLICH GROSSEN VIEWPORTS TESTEN . 90 4.4 LISTEN ERSTELLEN MIT UL , OL UND LI . 92 4.4.1 AUFZAEHLUNGEN: UNGEORDNETE LISTEN MIT UL UND LI . 92 4.4.2 NUMMERIERUNGEN: GEORDNETE LISTEN MIT OL UND LI . 93 4.5 LISTEN VERSCHACHTELN: EINE LISTE IN EINER LISTE . 94 4.6 BESCHREIBUNGSLISTEN MIT DL , DD UND DT . 96 4.6.1 DAS HTMLFUER EINE BESCHREIBUNGSLISTE . 96 4.6.2 EINE EINFACHE GESTALTUNG FUER EINE BESCHREIBUNGSLISTE . 97 7 INHALT 4.7 EIN KURZER BLICK AUF DAS BROWSER-STYLESHEET . 98 4.7.1 DAS BROWSER-STYLESHEET DES FIREFOX HEISST HTML.CSS . 98 4.7.2 NICHT HUEBSCH, ABER LESBAR - WAS EIN BROWSER-STYLESHEET MACHT . 99 4.7.3 DIE CSS-REGEL FUER EINE HL -UEBERSCHRIFT AUS DEM BROWSER- STYLESHEET . 100 4.8 UEBER BLOCKELEMENTE, INLINE-ELEMENTE UND DISPLAY . 100 4.8.1 BLOCKELEMENTE WERDEN SO BREIT, WIE ES GEHT . 100 4.8.2 INLINE-ELEMENTE WERDEN NUR SO BREIT WIE IHR INHALT . 101 4.8.3 BLOCK- UND INLINE-ELEMENTE IM BROWSER-ENTWICKLERTOOL . 101 4.9 AUF EINEN BLICK . 102 5 HYPERLINKS - DAS BESONDERE AM WEB 103 5.1 DAS STANDARDVERHALTEN VON HYPERLINKS. 103 5.2 ANATOMIE EINES HYPERLINKS: A HREF ="." LINKTEXT /A . 104 5.3 HYPERLINKS IN NEUEM TAB ODER FENSTER OEFFNEN . 106 5.4 EINE NAVIGATION IST EINE LISTE MIT LINKS . 107 5.5 EINE GRUNDLEGENDE GESTALTUNG FUER DIE NAVIGATION . 109 5.5.1 SCHRITT 1: DIE LISTENELEMENTE NEBENEINANDERSTELLEN . 109 5.5.2 SCHRITT 2: DEN NAVIGATIONSBEREICH UND DIE LISTE GESTALTEN . 111 5.5.3 SCHRITT 3: DIE LINKS UND DEN LINKTEXT GESTALTEN . 112 5.6 IM FUSSBEREICH EINEN LINK NACH OBEN EINFUEGEN . 114 5.6.1 SCHRITT 1: DAS HTMLFUER EINEN LINK NACH OBEN AUF DERSELBEN SEITE . 114 5.6.2 SCHRITT 2: EINE GRUNDLEGENDE GESTALTUNG FUER DEN FOOTER UND DEN LINK . 115 5.7 BESONDERE LINKS: DATEIEN, E-MAIL UND TELEFON . 117 5.7.1 HYPERLINKS AUF DATEIEN, DIE KEINE WEBSEITEN SIND: PDF & CO . 117 5.7.2 LINKS AUF E-MAIL-ADRESSEN . 118 5.7.3 LINKS AUF TELEFONNUMMERN . 118 5.8 AUF EINEN BLICK . 119 8 INHALT 6 HTML-ELEMENTE FUER BILDER, AUDIO UND VIDEO 121 6.1 UEBER GRAFIKFORMATE IM WEB: JPEG, GIF, PNG UND SVG . 121 6.2 EIN BILD ALS LOGO EINBINDEN MIT IMG . 123 6.2.1 DAS ELEMENT IMG UND SEINE WICHTIGSTEN ATTRIBUTE . 123 6.2.2 EIN LOGO AUF DER UEBUNGSWEBSITE EINFUEGEN MIT IMG . 124 6.2.3 HOCHAUFLOESENDE BILDSCHIRME BENOETIGEN GROESSERE BILDER . 125 6.2.4 FINE-TUNING: DIE ABSTAENDE UM LOGO UND SLOGAN ANPASSEN . 126 6.3 BILDER MIT FLEXIBLER BREITE: MAX-WIDTH: 100% . 127 6.3.1 DAS PROBLEM: PIXELBILDER HABEN EINE FESTE BREITE . 127 6.3.2 DIE LOESUNG: FLEXIBLE BILDER MIT MAX-WIDTH: 100% . 128 6.4 ABBILDUNGEN BESCHRIFTEN: FIGURE UND FIGCAPTION . 130 6.4.1 EIN FOTO MIT EINER BESCHRIFTUNG: FIGURE UND FIGCAPTION IM EINSATZ . 130 6.4.2 DIE EINRUECKUNG VON FIGURE ENTFERNEN UND DIE BESCHRIFTUNG ZENTRIEREN . 131 6.5 AUDIODATEIEN EINBINDEN MIT AUDIO . 133 6.5.1 AUDIOFORMATE, BROWSERUNTERSTUETZUNG UND AUDIOPLAYER . 133 6.5.2 DIE EINBINDUNG VON SOUND-DATEIEN MIT AUDIO . 133 6.5.3 AUDIODATEIEN BESCHRIFTEN MIT FIGURE UND FIGCAPTION . 134 6.6 BEWEGTE BILDER EINBINDEN MIT VIDEO . 135 6.6.1 VIDEOFORMATE UND BROWSERUNTERSTUETZUNG IM UEBERBLICK . 135 6.6.2 DIE EINBINDUNG VON VIDEODATEIEN MIT VIDEO . 136 6.6.3 FLEXIBLE VIDEOS PER CSS MIT MAX-WIDTH: 100% . 137 6.7 AUF EINEN BLICK . 138 7 HTML-ELEMENTE ZUR STRUKTURIERUNG VON WEBSEITEN UND INHALTEN 139 7.1 DIE SEMANTISCHEN STRUKTURELEMENTE AUF EINEN BLICK. 140 7.2 KOPFBEREICHE AUSZEICHNEN: HEADER . 140 7.2.1 DAS ELEMENT HEADER KANN AUF EINER SEITE MEHRFACH VORHANDEN SEIN . 140 7.2.2 DEN KOPF BEREICH AUF DER UEBUNGSWEBSITE UM EINE KLASSE ERWEITERN . 142 9 INHALT 7.3 NAVIGATIONSBEREICHE ERSTELLEN MIT NAV . 143 7.3.1 NAV FUER DIE SITE-NAVIGATION AUF DER UEBUNGSWEBSITE . 143 7.3.2 DEN NAVIGATIONSBEREICH AUF DER UEBUNGSWEBSITE UM EINE KLASSE ERWEITERN . 144 7.3.3 NAV KANN IN DER HTML-STRUKTUR AUCH AN ANDEREN POSITIONEN STEHEN . 145 7.4 DER HAUPTINHALT EINER WEBSEITE STEHT IN MAIN . 146 7.4.1 DAS ELEMENT MAIN FUER DEN HAUPTINHALT EINER WEBSEITE . 146 7.4.2 DEN INHALTSBEREICH DER UEBUNGSWEBSITE UM EINE KLASSE ERWEITERN . 147 7.5 FUSSBEREICHE AUSZEICHNEN: FOOTER . 147 7.5.1 DER FUSSBEREICH FOOTER AUF DER UEBUNGSWEBSITE . 147 7.5.2 DEN FUSSBEREICH AUF DER UEBUNGSWEBSITE UM EINE KLASSE ERWEITERN . 148 7.6 INHALTLICHE ABSCHNITTE ERSTELLEN: SECTION . 148 7.7 IN SICH GESCHLOSSENE, EIGENSTAENDIGE BLOECKE: ARTICLE . 151 7.7.1 GRUNDLEGENDE GESTALTUNG FUER DEN ABSCHNITT UND DIE INFOBOXEN . 153 7.8 BEREICHE MIT ZUSAETZLICHEN INFORMATIONEN: ASIDE . 154 7.9 ELEMENTE SEMANTISCH NEUTRAL GRUPPIEREN: DIV . 156 7.10 AUF EINEN BLICK . 158 8 WEITERE HTML-ELEMENTE ZUR AUSZEICHNUNG VON INHALTEN 159 8.1 ZITATE AUSZEICHNEN MIT BLOCKQUOTE UND CITE . 159 8.1.1 DAS HTML FUER BLOCKZITATE: BLOCKQUOTE UND CITE . 160 8.1.2 EIN BLOCKZITAT MIT EINEM FOOTER FUER DIE QUELLENANGABE . 161 8.1.3 EINE EINFACHE GESTALTUNG FUER EIN ZITAT . 162 8.2 EINEN ZEILENUMBRUCH ERZWINGEN MIT BR . 163 8.3 KONTAKTINFORMATIONEN AUSZEICHNEN MIT ADDRESS . 163 8.3.1 EINE KONTAKTADRESSE AUSZEICHNEN MIT ADDRESS . 164 8.3.2 EINE GRUNDLEGENDE GESTALTUNG FUER EINE KONTAKTADRESSE . 164 8.4 AENDERUNGEN AM TEXT DOKUMENTIEREN: DEL UND INS . 165 8.4.1 DAS HTMLFUER AENDERUNGEN AM TEXT . 165 8.4.2 EINE EINFACHE GESTALTUNG FUER AENDERUNGEN AM TEXT . 166 10 INHALT 8.5 ZEITANGABEN FUER MENSCHEN UND MASCHINEN: TIME . 167 8.5.1 DATUMSANGABEN MIT TIME . 167 8.5.2 DIE UHRZEIT MIT TIME . 168 8.6 KURZ VORGESTELLT: SPAN , HR UND SMALL . 169 8.6.1 SPAN IST EIN SEMANTISCH NEUTRALES INLINE-ELEMENT . 170 8.6.2 HR MARKIERT EINEN INHALTLICHEN BRUCH INNERHALB EINES ABSCHNITTS . 170 8.6.3 DAS SPRICHWOERTLICHE KLEINGEDRUCKTE MIT SMALL . 170 8.7 AUSKLAPPBARE INHALTE: DETAILS UND SUMMARY . 171 8.7.1 DAS HTMLFUER AUSKLAPPBARE INHALTE: DETAILS UND SUMMARY . 171 8.7.2 EINE GRUNDLEGENDE GESTALTUNG FUER DETAILS UND SUMMARY . 172 8.8 WEITERE INLINE-ELEMENTE IN DER UEBERSICHT. 174 8.9 KNOW-HOW: ZEICHENSAETZE UND SONDERZEICHEN . 175 8.9.1 UTF-8: WISSENSWERTES UEBER ZEICHENSAETZE . 175 8.9.2 DIE KODIERUNG VON SONDERZEICHEN IN HTML . 176 8.10 AUF EINEN BLICK . 178 9 HTML-ELEMENTE ZUM ERSTELLEN VON FORMULAREN 179 9.1 FORMULARE DIENEN ZUR INTERAKTION MIT DEN BESUCHERN . 179 9.2 DAS ELEMENT FORM DEFINIERT EIN FORMULAR . 180 9.3 EINZEILIGE EINGABEFELDER MIT INPUT UND LABEL . 181 9.3.1 EIN EINZEILIGES EINGABEFELD FUER TEXT: INPUT TYPE="TEXT" . 182 9.3.2 DIE BESCHRIFTUNG EINES FORMULARFELDES MIT LABEL . 182 9.3.3 EIN EINGABEFELD FUER E-MAIL-ADRESSEN: INPUT TYPE="EMAIL" . 184 9.3.4 PFLICHTFELDER DEFINIEREN: DAS ATTRIBUT REQUIRED . 185 9.4 MEHRZEILIGE EINGABEFELDER MIT TEXTAREA UND LABEL . 186 9.5 KONTROLLKAESTCHEN UND OPTIONSFELDER . 187 9.5.1 ECKIGE KONTROLLKAESTCHEN MIT INPUT TYPE="CHECKBOX" . 187 9.5.2 RUNDE OPTIONSFELDER MIT INPUT TYPE="RADIO" . 188 9.6 FORMULARFELDER GRUPPIEREN: FIELDSET UND LEGEND . 189 9.7 EIN BUTTON ZUM ABSCHICKEN DER FORMULARDATEN. 190 9.8 EIN DSGVO-KOMPATIBLES KONTAKTFORMULAR ERSTELLEN . 192 9.8.1 SCHRITT 1: DAS HTML FUER DIE EINGABEFELDER . 193 11 INHALT 9.8.2 SCHRITT 2: DSGVO-EINVERSTAENDNIS PER KONTROLLKAESTCHEN . 194 9.8.3 SCHRITT 3: EINE GRUNDLEGENDE GESTALTUNG FUER DAS FORMULAR . 195 9.8.4 SCHRITT 4: BESCHRIFTUNG UND FORMULARFELDER AUSRICHTEN . 196 9.9 AUF EINEN BLICK . 198 10 HTML-ELEMENTE ZUM ERSTELLEN VON TABELLEN 201 10.1 EINE EINFACHE HTML-TABELLE: TABLE , TR UND TD . 201 10.2 TABELLENUEBERSCHRIFTEN STEHEN IN TH . 203 10.3 TABELLEN STRUKTURIEREN: THEAD , TBODY UND TFOOT . 204 10.4 ZELLEN VERBINDEN MIT COLSPAN UND ROWSPAN . 205 10.5 HTML-TABELLEN ERSTELLEN UND GESTALTEN - EIN BEISPIEL . 206 10.5.1 SCHRITT 1: DAS HTML FUER DIE BEISPIELTABELLE . 207 10.5.2 SCHRITT 2: EINE GRUNDLEGENDE GESTALTUNG FUER DIE BEISPIELTABELLE . 209 10.5.3 SCHRITT 3: ZWISCHENRAUM KONTROLLIEREN MIT BORDER-SPACING UND BORDER-COLLAPSE . 210 10.6 AUF EINEN BLICK . 211 11 VON DER WEBSEITE ZUR WEBSITE 213 11.1 FINE-TUNING FUER DIE STARTSEITE . 213 11.1.1 EINE KLASSE FUER DIE SEITE: BODYCLASS="STARTSEITE" . 214 11.1.2 SIE SIND HIER: DEN AKTUELLEN MENUEPUNKT HERVORHEBEN . 214 11.1.3 IM FOOTER: LINKS ZU IMPRESSUM UND DATENSCHUTZ EINFUEGEN . 216 11.2 DAS HTML UEBERPRUEFEN MIT DEM HTML-VALIDATOR . 218 11.3 DIE SEITEN NEWS, UEBER UNS UND KONTAKT ERSTELLEN . 220 11.3.1 DIE SEITE NEWS ERSTELLEN UND ANPASSEN . 220 11.3.2 DIE SEITEN UEBER UNS UND KONTAKT ERSTELLEN UND ANPASSEN . 222 11.4 DIE SEITE NEWS MIT INHALT FUELLEN . 224 11.4.1 EINEN NEUEN ABSCHNITT HINZUFUEGEN: SECTION CLASS="BEITRAGSLISTE" . 224 11.4.2 EINEN BEREICH MIT LINKLISTEN ERSTELLEN: ASIDE CLASS="LINKLISTEN" . 226 11.4.3 EINE GRUNDLEGENDE GESTALTUNG FUER DIE INHALTE DER SEITE NEWS . 227 12 INHALT 11.5 EIN BILD AUF DER SEITE UEBER UNS EINFUEGEN . 228 11.6 KONTAKTDATEN UND FORMULAR FUER DIE SEITE KONTAKT . 229 11.6.1 DEN ABSCHNITT KONTAKTDATEN HINZUFUEGEN . 230 11.6.2 EINEN ABSCHNITT MIT EINEM KONTAKTFORMULAR HINZUFUEGEN . 231 11.7 DIE SEITEN IMPRESSUM UND DATENSCHUTZ . 233 11.8 AUF EINEN BLICK . 234 TEIL III CSS-GRUNDLAGEN IJGESTALTEN PER CSS: FARBEN UND EINHEITEN 237 12.1 UEBERBLICK: WEBSEITEN GESTALTEN PER CSS . 237 12.2 CSS KANN AN DREI STELLEN DEFINIERT WERDEN . 238 12.2.1 EXTERNES STYLESHEET: CSS-REGELN IN EINER EIGENEN DATEI . 238 12.2.2 STYLE-BLOCK: CSS-REGELN MIT STYLE IM HEAD EINER WEBSEITE . 239 12.2.3 INLINE-STYLES: ANWEISUNGEN MIT DEM ATTRIBUT STYLE IM ELEMENT . 239 12.2.4 DIE EMPFOHLENE VORGEHENSWEISE: CSS-DATEI, STYLE UND STYLE-" " . 240 12.3 FARBNAMEN IN CSS: EINFACH, ABER NICHT SEHR FLEXIBEL . 240 12.4 HEXADEZIMALE FARBANGABEN: #RRGGBB . 241 12.4.1 DER AUFBAU EINES HEXADEZIMALEN FARBWERTES . 242 12.4.2 DIE HEXADEZIMALE KURZSCHREIBWEISE: #RGB . 242 12.4.3 UEBERSICHT: EINIGE FARBNAMEN UND IHRE HEX-WERTE . 243 12.4.4 HEXEN UND BLAUFAERBEN: FARBNAMEN AUF DER UEBUNGSWEBSITE AENDERN . 243 12.5 FARBEN DEFINIEREN MIT RGB() UND RGBA() . 244 12.6 WERKZEUGE UND WEBSITES ZUR ARBEIT MIT FARBEN . 246 12.6.1 FIREFOX HAT IN DEN ENTWICKLERWERKZEUGEN EINEN FARBWAEHLER . 246 12.6.2 AUSFUEHRLICHE FARBAUSWAHL IN DEN ENTWICKLERWERKZEUGEN DER BROWSER . 247 12.7 WICHTIGE EINHEITEN: PX, EM, REM, % & CO . 248 12.7.1 DIE EINHEIT PX: EIN PIXEL IST NICHT IMMER EIN PIXEL . 249 12.7.2 DIE EINHEIT EM HAT VERSCHIEDENE BERECHNUNGSGRUNDLAGEN . 250 13 INHALT 12.7.3 DIE EINHEIT REM ENTSPRICHT DER STANDARDSCHRIFTGROESSE DES BROWSERS . 251 12.7.4 DIE EINHEIT % (PROZENT) IST MEIST RELATIV ZUM ELTERNELEMENT . 251 12.8 AUF EINEN BLICK . 252 13 DIE WICHTIGSTEN SELEKTOREN UND SPEZIFITAET 253 13.1 EINFACHE SELEKTOREN: ELEMENTE, GRUPPIERUNG UND . 253 13.1.1 DER NAME DER KISTE-EINFACHE ELEMENTSELEKTOREN . 254 13.1.2 MEHRERE KAESTCHEN ZUGLEICH: SELEKTOREN MIT EINEM KOMMA GRUPPIEREN . 254 13.1.3 ALLE KAESTCHEN AUSWAEHLEN: DER UNIVERSALSELEKTOR * . 255 13.2 KLASSEN SIND KLASSE: DER SELEKTOR MIT DEM PUNKT . 255 13.2.1 KLASSEN ZUR GETRENNTEN GESTALTUNG VON GLEICHNAMIGEN ELEMENTEN . 255 13.2.2 KLASSEN ZUM GRUPPIEREN VON ELEMENTEN ZUR GEMEINSAMEN GESTALTUNG . 256 13.2.3 GEBUNDENE KLASSEN: KLASSEN AUF EINEN ELEMENTTYP BESCHRAENKEN . 256 13.2.4 EIN HTML-ELEMENT KANN MEHRERE KLASSENNAMEN HABEN . 257 13.3 IDS SIND EINMALIG: DER SELEKTOR MIT DER RAUTE . 257 13.4 SELEKTOREN FUER NACHFAHREN UND KINDER . 258 13.4.1 FAMILIENAUFSTELLUNG: HTML-ELEMENTE IM DOM-BAUM . 259 13.4.2 DER NACHFAHRENSELEKTOR: DER SELEKTOR MIT DEM LEERZEICHEN . 260 13.4.3 DER KINDSELEKTOR: DER SELEKTOR MIT DEM (GROESSER-ALS-ZEICHEN) . 260 13.4.4 SPEZIELLE KINDER SELEKTIEREN MIT :FIRST-CHILD UND :LAST-CHILD . 261 13.4.5 DIE GESCHWISTERSELEKTOREN: PLUSZEICHEN + UND TILDE ~ . 262 13.5 ATTRIBUTSELEKTOREN HABEN ECKIGE KLAMMERN . 264 13.5.1 NUR DAS ATTRIBUT: ELEMENT[ATTRIBUT] . 264 13.5.2 MIT EINEM GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT="ZEICHEN"] . 265 13.5.3 MIT TILDE UND GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT~="ZEICHEN"] . 265 13.5.4 MIT HUETCHEN UND GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT A ="ZEICHEN"] . 265 13.5.5 MIT DOLLAR UND GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT$="ZEICHEN"] . 266 13.5.6 MIT STERNCHEN UND GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT="ZEICHEN"] . 266 13.6 SPEZIFITAET: EINIGE SELEKTOREN SIND WICHTIGER ALS ANDERE . 267 14 INHALT 13.6.1 EINER WIRD GEWINNEN: SO FUNKTIONIERT SPEZIFITAET . 267 13.6.2 GANZ SPARSAM BENUTZEN: ! IMPORTANT MACHT ANWEISUNGEN WICHTIG! . 268 13.7 AUF EINEN BLICK . 269 14 DER BROWSER UND DAS CSS: KASKADE, VERERBUNG ODER STANDARDWERT 271 14.1 DIE KASKADE: WICHTIGKEIT, SPEZIFITAET UND REIHENFOLGE . 271 14.1.1 DIE KASKADE HILFT DEM BROWSER, GENAU EINE ANWEISUNG ZU FINDEN . 272 14.1.2 DIE AUSGANGSSITUATION: DAS BEISPIEL IM UEBERBLICK . 272 14.1.3 BEISPIEL NR. 1: DIE REIHENFOLGE ENTSCHEIDET . 273 14.1.4 BEISPIEL NR. 2: DIE SPEZIFITAET IST WICHTIGER ALS DIE REIHENFOLGE. 274 14.1.5 BEISPIEL NR. 3: LIMPORTANT GEWINNT IMMER . 276 14.2 DIE KASKADE IM BROWSER ANALYSIEREN . 277 14.2.1 DIE KASKADE IM ENTWICKLERWERKZEUG DES FIREFOX . 277 14.2.2 DER TRICK MIT DEM TRICHTER: ANWEISUNGEN NACH EIGENSCHAFT FILTERN . 279 14.3 NICHTS GEFUNDEN? VERERBUNG ODER STANDARDWERT . 279 14.3.1 VERERBUNG MACHT EIN STYLESHEET UEBERSICHTLICHER . 279 14.3.2 BESTIMMTE EIGENSCHAFTEN WERDEN NICHT VERERBT . 280 14.3.3 FALLS ER GAR NICHTS FINDET, NIMMT DER BROWSER DEN STANDARDWERT . 281 14.4 UEBERBLICK: KASKADE, VERERBUNG ODER STANDARDWERT . 281 14.5 AUF EINEN BLICK . 283 15 SCHRIFT UND TEXT GESTALTEN PER CSS 285 15.1 KLASSISCHE SCHRIFTARTEN IM WEB . 285 15.1.1 SCHRIFTARTEN MIT UND OHNE SERIFEN . 285 15.1.2 SEHR PRAKTISCH: DIE SCHRIFTGESTALTUNG IM FIREFOX ANALYSIEREN . 286 15.2 DIE SCHRIFTART DEFINIEREN MIT FONT-FAMILY . 287 15.2.1 BITTE EINE SCHRIFT OHNE SERIFEN: FONT-FAMILY: SANS-SERIF . 287 15.2.2 GENERISCHE SCHRIFTFAMILIEN IM UEBERBLICK . 289 15.2.3 DIE SYSTEM SCHRIFT: GUT ZU LESEN UND ECHT SCHNELL . 289 15 INHALT 15.3 WEBFONTS - DIE SCHRIFTART GLEICH MITLIEFERN . 291 153.1 WEBFONTS IM UEBERBLICK . 291 153.2 EINFACH, SCHNELL UND KOSTENLOS: GOOGLE FONTS . 292 1533 SCHRITT 1: SCHRIFTART UND SCHRIFTSCHNITTE AUSWAEHLEN . 293 153.4 SCHRITT 2: DEN CODE FUER DIE SCHRIFTART KOPIEREN UND EINFUEGEN . 293 15.4 GUT LESBARER FLIESSTEXT: FONT-SIZE UND LINE-HEIGHT . 295 15.4.1 SCHRIFTGROESSE DEFINIEREN MIT FONT-SIZE UND EINER LAENGENEINHEIT . 295 15.4.2 SCHRIFTGROESSE DEFINIEREN MIT FONT-SIZE UND EINEM WORT . 297 15.4.3 WICHTIG FUER DIE LESBARKEIT: DER ZEILENABSTAND MIT LINE-HEIGHT . 298 15.5 HYPERLINKS GESTALTEN MIT PSEUDOKLASSEN . 299 15.5.1 BESUCHTE UND NICHT BESUCHTE HYPERLINKS MIT :LINK UND :VISITED . 299 15.5.2 BENUTZERAKTIONEN GESTALTEN MIT :HOVER, :FOCUS UND :ACTIVE . 301 15.6 WEITERE EIGENSCHAFTEN ZUR SCHRIFT- UND TEXTGESTALTUNG . 303 15.6.1 DIE WICHTIGSTEN EIGENSCHAFTEN ZUR SCHRIFT- UND TEXTGESTALTUNG IM UEBERBLICK . 303 15.6.2 SCHRIFT GESTALTEN: FETT, KURSIV, KAPITAELCHEN UND ZEICHENABSTAND . 303 15.6.3 DIE KURZSCHREIBWEISE FONT . 304 15.6.4 TEXT AUSRICHTEN UND DIE ERSTE ZEILE EINRUECKEN . 305 15.6.5 SCHATTEN IM TEXT: TEXT-SHADOW . 305 15.7 AUF EINEN BLICK . 306 16 DAS BOX-MODELL FUER BLOCK- UND INLINE-BOXEN 307 16.1 DAS KLASSISCHE BOX-MODELL FUER BLOCKBOXEN . 307 16.1.1 BREITE UND HOEHE FUER DEN INHALT DEFINIEREN: WIDTH, HEIGHT & CO . 308 16.1.2 DER INNENABSTAND PADDING SCHAFFT PLATZ ZWISCHEN INHALT UND RAND . 309 16.1.3 DIE RAHMENLINIEN DRUMHERUM: BORDER . 310 16.1.4 DER AUSSENABSTAND MARGIN REGELT DEN ABSTAND ZU ANDEREN BOXEN . 310 16.1.5 DER UNTERSCHIED ZWISCHEN ABSTAENDEN MIT PADDING UND MARGIN . 311 16.2 DAS BOX-MODELL IM BROWSER VISUALISIEREN . 312 16.3 DIE BREITE VON BLOCKBOXEN BEGRENZEN: MAX-WIDTH . 313 16.4 BLOCKBOXEN ZENTRIEREN MIT MARGIN: AUTO . 314 16 INHALT 16.5 DER ABSTAND ZUM RAND: PADDING . 315 16.5.1 DAS PADDING FUER DEN KOPFBEREICH DER SEITE . 316 16.5.2 DAS PADDING FUER DIE NAVIGATION UND DEN FUSSBEREICH . 317 16.5.3 DAS PADDING FUER DEN INHALTSBEREICH . 318 16.6 VERTIKALE AUSSENABSTAENDE UND COLLAPSING MARGINS . 319 16.6.1 VERTIKALE AUSSENABSTAENDE AUFEINANDERFOLGENDER ELEMENTE KOLLABIEREN . 319 16.6.2 EIN KOPFBEREICH MIT UEBERSCHRIFT UND UEBERRASCHENDE ABSTAENDE . 320 16.6.3 NUETZLICH: EINE CSS-REGEL ZUR VERMEIDUNG VON COLLAPSING MARGINS . 322 16.7 DAS INTUITIVERE BOX-MODELL: BOX-SIZING: BORDER-BOX. 324 16.7.1 DAS BORDER-BOX-MODELL IN DER UEBERSICHT . 324 16.7.2 DAS BORDER-BOX-MODELL AKTIVIEREN MIT BOX-SIZING: BORDER-BOX . 325 16.8 DAS BOX-MODELL FUER INLINE-BOXEN . 326 16.9 INLINE-BLOCK: BLOCKBOXEN, ABER NEBENEINANDER. 327 16.10 AUF EINEN BLICK . 328 17 BOXEN GESTALTEN PER CSS 329 17.1 HINTERGRUNDGRAFIKEN PER CSS EINBINDEN UND GESTALTEN . 329 17.1.1 HINTERGRUNDGRAFIKEN EINBINDEN: BACKGROUND-IMAGE . 330 17.1.2 HINTERGRUNDGRAFIKEN WIEDERHOLEN: BACKGROUND-REPEAT . 331 17.1.3 HINTERGRUNDGRAFIKEN POSITIONIEREN: BACKGROUND-POSITION . 332 17.1.4 HINTERGRUNDGRAFIKEN FIXIEREN: BACKGROUND-ATTACHMENT . 333 17.1.5 DIE GROESSE DER HINTERGRUNDGRAFIK DEFINIEREN: BACKGROUND-SIZE . 333 17.1.6 DIE KURZSCHREIBWEISE: BACKGROUND . 335 17.1.7 DAS BOX-MODELL UND DIE DRITTE DIMENSION . 335 17.2 SCHATTENBOXEN MIT BOX-SHADOW . 336 17.3 ABGERUNDETE ECKEN MIT BORDER-RADIUS. 338 17.4 LINEARE FARBVERLAEUFE MIT LINEAR-GRADIENT() . 339 17.5 GESTALTEN MIT DEM BOX-MODELL: ZITATE . 341 17.5.1 DAS HTML: SECTION UND BLOCKQUOTE . 341 17.5.2 ZITATE GESTALTEN MIT PADDING, BORDER UND MARGIN . 342 17.6 LINKS DE LUXE: HYPERLINKS ALS BUTTON GESTALTEN . 344 17.6.1 DIE AUSGANGSSITUATION: ZWEI GANZ NORMALE HYPERLINKS . 345 17 INHALT 17.6.2 SCHRITT 1: DIE GRUNDLEGENDE GESTALTUNG DER BEIDEN LINKS . 345 17.6.3 SCHRITT 2: DIE UNTERSCHIEDE - PRIMAERE UND SEKUNDAERE BUTTONS . 346 17.6.4 SCHRITT 3: EINEN HOVER-EFFEKT MIT TRANSITION ANIMIEREN . 347 17.7 EXTERNE HYPERLINKS KENNZEICHNEN MIT ::AFTER . 349 17.7.1 SCHRITT 1: EXTERNE HYPERLINKS AUSWAEHLEN MIT EINEM ATTRIBUTSELEKTOR . 349 17.7.2 SCHRITT 2: DAS PSEUDOELEMENT ::AFTER UND DIE EIGENSCHAFT CONTENT . 350 17.7.3 SCHRITT 3: LINKS KENNZEICHNEN MIT EINEM UNICODE-SYMBOL . 351 17.8 BOXEN AM BILDSCHIRM AUSBLENDEN: VISUALLY-HIDDEN. 352 17.8.1 SCHRITT 1: DIE KLASSE VISUALLY-HIDDEN ERSTELLEN . 352 17.8.2 SCHRITT 2: DEN ELEMENTEN DIE KLASSE VISUALLY-HIDDEN ZUWEISEN . 354 17.9 AUF EINEN BLICK . 355 18 ORDNUNG HALTEN: STYLESHEETS ORGANISIEREN 357 18.1 KOMMENTARE ZUM STRUKTURIEREN VON STYLESHEETS . 358 18.1.1 DER KOMMENTAR AM ANFANG DES STYLESHEETS . 358 18.1.2 EIN STYLESHEET MIT KOMMENTAREN IN ABSCHNITTE UNTERTEILEN . 359 18.2 VERSCHIEDENE SCHREIBWEISEN FUER CSS-REGELN . 359 18.2.1 WEIT VERBREITET: EINE ANWEISUNG PRO ZEILE . 359 18.2.2 KURZE REGELN: ALLES IN EINER ZEILE . 360 18.2.3 UEBERSICHTLICH: NUR EIN GRUPPIERTER SELEKTOR PRO ZEILE . 360 18.2.4 REIHENFOLGE DER ANWEISUNGEN: 1. AM BOX-MODELL ORIENTIEREN . 361 18.2.5 REIHENFOLGE DER ANWEISUNGEN: 2. AM ALPHABET ORIENTIEREN . 362 18.3 EIN ZENTRALES STYLESHEET ERLEICHTERT DIE ENTWICKLUNG . 362 18.3.1 WAEHREND DER ENTWICKLUNG: MODULBAUWEISE MIT MEHREREN STYLESHEETS . 362 18.3.2 FUER DIE LIVE-SITE: ALLES IN EINEM STYLESHEET VEREINEN . 363 18.4 DIE EINZELNEN STYLESHEETS ERSTELLEN UND EINBINDEN . 364 18.4.1 SCHRITT 1: DIE EINZELNEN STYLESHEETS ERSTELLEN . 364 18.4.2 SCHRITT 2: STYLESHEETS MIT @IMPORT IN STYLE.CSS EINBINDEN . 365 18.5 AUFRAEUMEN: DAS CSS AUF DIE STYLESHEETS VERTEILEN . 366 18.5.1 ALLGEMEINE EINSTELLUNGEN UND GRUNDLEGENDE GESTALTUNG IN BASIS.CSS. 366 18.5.2 DAS SEITENLAYOUT UND DIE INHALTSBEREICHE: LAYOUT.CSS . 368 18 INHALT 18.53 DIE GESTALTUNG DER NAVIGATION IN NAVI-INLINE.CSS . 370 18.5.4 DIE GESTALTUNG DES INHALTS: CONTENT.CSS . 371 18.5.5 DIE GESTALTUNG DER FORMULARE: FORMULARE.CSS . 372 18.6 CSS UEBERPRUEFEN MIT DEM CSS-VALIDATOR. 373 18.7 EIN NEUES MODUL FUER EIN MODERNES LAYOUT . 374 18.7.1 SCHRITT 1: DAS HTML ANPASSEN-DIE DOPPLUNG MIT DIV . 375 18.7.2 SCHRITT 2: DAS STYLESHEET LAYOUT-MODERN.CSS HINZUFUEGEN . 377 18.7.3 SCHRITT 3: FINE-TUNING FUER DIE INFOBOXEN AUF DER STARTSEITE . 379 18.8 AUF EINEN BLICK . 380 TEIL IV CSS-LAYOUT 19 MEDIA QUERIES UND RESPONSIVES WEBDESIGN ZGZ 19.1 GETTING RESPONSIVE: DAS WEB WIRD FLEXIBEL . 383 19.2 MEDIENTYPEN DEFINIEREN DAS AUSGABEMEDIUM . 384 19.2.1 DIE MEDIENTYPEN IN DER UEBERSICHT . 384 19.2.2 EINE DRUCKVERSION FUER DIE UEBUNGSWEBSITE MIT @MEDIA PRINT . 385 19.3 MEDIA QUERIES = MEDIENTYPEN + MEDIENEIGENSCHAFTEN . 387 19.3.1 DIE SYNTAX: @MEDIA MEDIENTYP AND (EIGENSCHAFT: WERT) . 387 19.3.2 EIN BEISPIEL: EINE MEDIA QUERY ZUR AENDERUNG DER HINTERGRUNDFARBE 388 19.3.3 WEITERE BEISPIELE FUER MEDIA QUERIES . 389 19.3.4 DIE WICHTIGSTEN MEDIENEIGENSCHAFTEN IM UEBERBLICK . 390 19.4 MEDIA QUERIES UND DER META-VIEWPORT . 391 19.4.1 MEDIA QUERIES FUNKTIONIEREN IN MOBILEN BROWSERN MANCHMAL NICHT . 391 19.4.2 DER META-VIEWPORT DEFINIERT DIE VIEWPORTBREITE FUER MOBILE BROWSER NEU . 392 19.5 MEDIA QUERIES UND DER RICHTIGE BREAKPOINT . 393 19.5.1 WEIT VERBREITET: BREAKPOINTS FUER MOBIL, TABLET UND DESKTOP . 393 19.5.2 BREAKPOINTS SOLLTE MAN VOM LAYOUT ABLEITEN, NICHT VON GERAETEN . 394 19.6 MEHRSPALTIGER TEXT MIT DEM MULTI-COLUMN LAYOUT . 394 19.7 AUF EINEN BLICK . 396 19 INHALT 20 DER FLOW UND DIE EIGENSCHAFT POSITION 399 20.1 DER NORMALE FLOW MIT POSITION: STATIC . 399 20.2 VERSETZT WEITERFLIESSEN MIT POSITION: RELATIVE . 401 20.3 RAUS AUS DEM FLOW MIT POSITION: ABSOLUTE . 402 20.4 DER TRICK: ABSOLUTE UND RELATIVE KOMBINIEREN . 403 20.5 WIE EIN FELS IN DER BRANDUNG: POSITION: FIXED . 405 20.5.1 IN EINEM SCHMALEN VIEWPORT: ICONS NEBENEINANDER, UNTER DEM TEXT . 406 20.5.2 IN EINEM BREITEREN VIEWPORT: ICONS UNTEREINANDER, NEBEN DEM TEXT . 407 20.6 SCROLLEN UND DANN STEHEN BLEIBEN: POSITION: STICKY . 408 20.7 POSITIONIERTE BOXEN UND DER Z-INDEX . 409 20.8 AUF EINEN BLICK . 412 21 SCHWEBEN UND SCHWEBEN LASSEN: FLOAT 413 21.1 TEXT UM EINE ABBILDUNG FLIESSEN LASSEN MIT FLOAT . 413 21.1.1 DIE AUSGANGSSITUATION: EIN FIGURE MIT BILD UND BESCHRIFTUNG . 413 21.1.2 DAS FIGURE -ELEMENT NACH RECHTS FLOATEN MIT FLOAT: RIGHT . 414 21.1.3 GEFLOATETE BOXEN IN EINEM SCHMALEN VIEWPORT UEBERPRUEFEN . 416 21.1.4 DIE UMGEBENDEN ELEMENTE REICHEN BIS UNTER DIE GEFLOATETE BOX . 416 21.2 FLOATS BEENDEN MIT CLEAR: BOTH . 417 21.3 FLOATS UMSCHLIESSEN MIT DISPLAY: FLOW-ROOT . 417 21.3.1 DAS PROBLEM: FLOATS RAGEN NACH UNTEN AUS DEM ELTERNELEMENT HERAUS . 418 21.3.2 DIE LOESUNG: FLOATS UMSCHLIESSEN MIT DISPLAY: FLOW-ROOT . 418 21.4 PRAKTISCH: KLASSEN ZUM FLOATEN UND CLEAREN . 419 21.5 DAS UMSCHLIESSEN VON FLOATS MIT @SUPPORTS . 420 21.6 AUF EINEN BLICK . 422 20 INHALT 22 GESTALTEN PER FLEXBOX: DAS CSS FLEXIBLE BOX LAYOUT 423 22.1 FLEXBOX UND GRID - DAS NEUE CSS-LAYOUT . 423 22.1.1 DER BLOCK FORMATTING CONTEXT IST FUER LAYOUTS NUR BEDINGT GEEIGNET . 424 22.1.2 JENSEITS VOM BLOCK FORMATTING CONTEXT: FLEXBOX UND GRID . 424 22.1.3 LAYOUTEN PER FLEXBOX: NEUE MOEGLICHKEITEN OHNE ALTE PROBLEME . 424 22.2 LOS GEHT S: FLEX-CONTAINER ERSTELLEN MIT DISPLAY: FLEX . 425 22.2.1 DIE AUSGANGSPOSITION-EINE EINFACHE NAVIGATION . 425 22.2.2 EINE FLEXBOX DEFINIEREN MIT DISPLAY: FLEX . 426 22.3 FLIESSRICHTUNG: DIE RICHTUNG AENDERN MIT FLEX-FLOW . 428 22.3.1 JEDE FLEXBOX HAT EINE HAUPTACHSE UND EINE QUERACHSE . 428 22.3.2 FLEX-DIRECTION AENDERT DIE FLIESSRICHTUNG: VON ROW ZU COLUMN . 428 22.3.3 FLEX-WRAP ERMOEGLICHT EINEN ZEILENUMBRUCH IN DER FLEXBOX . 429 22.3.4 FLEX-FLOW IST KURZ FUER FLEX-DIRECTION UND FLEX-WRAP . 430 22.4 AUSRICHTUNG: LEERRAUM VERTEILEN MIT JUSTIFY-CONTENT . 431 22.5 AUSRICHTUNG: AUTOMATISCHE ABSTAENDE MIT MARGIN . 432 22.5.1 FLEX-ITEMS AM ENDE DES FLEX-CONTAINERS AUSRICHTEN MIT MARGIN . 433 22.5.2 ELEMENTE HORIZONTAL UND VERTIKAL ZENTRIEREN MIT MARGIMAUTO . 433 22.6 FLEXIBILITAET: DIE ZAUBERFORMEL FLEX: 1 . 434 22.6.1 LIEBER BROWSER, BITTE MACH ALLE FLEX-ITEMS GLEICH GROSS. . 434 22.6.2 FLEX IST KURZ FUER FLEX-GROW, FLEX-SHRINK UND FLEX-BASIS . 435 22.6.3 UEBERRASCHUNG: FLEX-GROW IN EINER MEHRZEILIGEN FLEXBOX . 436 22.7 FLEXBOX IN AKTION: DEN FOOTER PLATZIEREN . 437 22.7.1 SCHRITT 1: BODY WIRD FLEX-CONTAINER, DIE LAYOUTBEREICHE FLEX-ITEMS . 437 22.7.2 SCHRITT 2: DIE ZAUBERFORMEL FLEX: 1 FUER DEN INHALTSBEREICH . 438 22.8 DIE REIHENFOLGE DER FLEX-ITEMS AENDERN . 440 22.9 AUF EINEN BLICK . 441 21 INHALT 23 EINE RESPONSIVE NAVIGATION ERSTELLEN 443 23.1 DIE RESPONSIVE NAVIGATION IM UEBERBLICK . 443 23.2 SCHRITT 1: GRUNDLEGENDE FORMATIERUNG DER NAVIGATION . 445 23.2.1 NEUES STYLESHEET ERSTELLEN UND EINBINDEN . 445 23.2.2 DIE GRUNDLEGENDE FORMATIERUNG DER NAVIGATION FUER SCHMALE VIEWPORTS . 445 23.3 SCHRITT 2: DEN MENUEBUTTON IM QUELLTEXT ERSTELLEN . 447 23.4 SCHRITT 3: DEN MENUEBUTTON PER CSS GESTALTEN . 449 23.4.1 DEN MENUEBUTTON PER CSS GESTALTEN . 449 23.4.2 EINE GRAFIK FUER DEN MENUEBUTTON MIT ::BEFORE HINZUFUEGEN . 450 23.5 SCHRITT 4: DIE NAVIGATIONSLISTE PER CSS AUSBLENDEN . 452 23.6 SCHRITT 5: DIE NAVIGATIONSLISTE PER CSS EINBLENDEN . 453 23.7 SCHRITT 6: MEDIA QUERY UND HORIZONTALE NAVIGATION . 455 23.8 DIE META-NAVIGATION IM FUSSBEREICH GESTALTEN . 456 23.8.1 EIN NEUES STYLESHEET NAVI-META.CSS ERSTELLEN UND EINBINDEN . 457 23.8.2 DIE NAVIGATION IM FUSSBEREICH GESTALTEN . 457 23.9 AUF EINEN BLICK . 458 24 GESTALTEN MIT RASTER: DAS CSS GRID LAYOUT 459 24.1 EIN GRID IST EIN RASTER UND SCHAFFT ORDNUNG . 459 24.2 MEHRSPALTIGES LAYOUT NUR FUER MODERNE BROWSER: SUPPORTS . 460 24.3 LET * S GRID: DREI INFOBOXEN NEBENEINANDER . 461 24.3.1 EIN BLICK AUF DAS HTMLFUER DEN ABSCHNITT MIT DEN INFOBOXEN . 461 24.3.2 SCHRITT 1: EINEN GRID-CONTAINER DEFINIEREN MIT DISPLAY: GRID . 462 24.3.3 SCHRITT 2: EIN RASTER DEFINIEREN MIT GRID-TEMPLATE-COLUMNS UND FR . 463 24.3.4 SCHRITT 3: DEN ZWISCHENRAUM KONTROLLIEREN MIT GRID-GAP . 465 24.4 GRID-ITEMS MIT NUMMERIERTEN LINIEN PLATZIEREN . 467 24.4.1 DAS HTMLFUER DEN ABSCHNITT MIT DEN KUNDENSTIMMEN . 467 24.4.2 EINEN GRID-CONTAINER DEFINIEREN UND DAS RASTER ERSTELLEN . 468 24.4.3 GRID-ITEMS MANUELL AUF DEM RASTER PLATZIEREN MIT GRID-COLUMN . 469 22 INHALT 24.5 PRAKTISCH: EIN GRID MIT BENANNTEN BEREICHEN . 471 24.5.1 DIE HTML-STRUKTUR FUER DEN INHALTSBEREICH DER SEITE NEWS . 472 24.5.2 EINEN GRID-CONTAINER DEFINIEREN UND DAS RASTER ERSTELLEN . 472 24.6 DIE GRID-ZAUBERFORMEL: RESPONSIV OHNE MEDIA QUERY . 474 24.6.1 DIE AUSGANGSPOSITION: HTML UND CSS FUER DIE TEAMVORSTELLUNG . 475 24.6.2 SCHRITT 1: REPEATQ ERZEUGT MIT AUTO-FIT BELIEBIG VIELE SPALTEN . 477 24.6.3 SCHRITT 2: DIE FUNKTION MINMAX() MACHT DAS RESPONSIVE GRID PERFEKT . 478 24.7 AUF EINEN BLICK . 480 25 FLEXIBLE ICONS UND RESPONSIVE BILDER 483 25.1 FLEXIBLE ICONS: SKALIERBARE SYMBOLE MIT SVG. 483 25.1.1 FERTIGE SVG-ICONS HERUNTERLADEN UND EINBINDEN . 484 25.1.2 MOEGLICHKEIT 1: SVG-ICONS ALS DATEI EINBINDEN MIT IMG SRC="ICON.SVG" . 485 25.1.3 EINE SVG-DATEI IM EDITOR OEFFNEN: SVG IST MARKUP. WIE HTML . 487 25.1.4 MOEGLICHKEIT 2: SVG-ICON INLINE DIREKT IM HTML-QUELLTEXT EINBINDEN . 488 25.2 PIXELBILDER UND HOCHAUFLOESENDE BILDSCHIRME . 490 25.2.1 DPR: DAS VERHAELTNIS VON GERAETEPIXELN ZU LOGISCHEN PIXELN . 490 25.2.2 DIE EINFACHE LOESUNG: EINE DOPPELT SO GROSSE GRAFIK EINBINDEN . 491 25.3 UNTERSCHIEDLICHE BILDER JE NACH PIXELDICHTE . 491 25.4 UNTERSCHIEDLICHE BILDER JE NACH VIEWPORTBREITE . 493 25.4.1 TAUSCHE X GEGEN W: IMG , SRCSET W UND SIZES . 493 25.4.2 DAS ATTRIBUT SIZES KANN DIE BREITE DES VIEWPORTS ABFRAGEN . 495 25.5 AUF EINEN BLICK . 497 INDEX . 499 23
adam_txt	AUF EINEN BLICK TEIL I WEBSEITEN, HTML UND CSS 1 WISSENSWERTES UEBER WEBSEITEN . 35 2 HTML KENNENLERNEN: DIE ERSTE WEBSEITE ERSTELLEN . 47 3 CSS KENNENLERNEN: DIE ERSTE WEBSEITE GESTALTEN . 69 TEIL II HTML (MIT EINER PRISE CSS) 4 HTML-ELEMENTE FUER UEBERSCHRIFTEN, TEXT UND LISTEN . 85 5 HYPERLINKS - DAS BESONDERE AM WEB . 103 6 HTML-ELEMENTE FUER BILDER, AUDIO UND VIDEO . 121 7 HTML-ELEMENTE ZUR STRUKTURIERUNG VON WEBSEITEN UND INHALTEN . 139 8 WEITERE HTML-ELEMENTE ZUR AUSZEICHNUNG VON INHALTEN . 159 9 HTML-ELEMENTE ZUM ERSTELLEN VON FORMULAREN . 179 10 HTML-ELEMENTE ZUM ERSTELLEN VON TABELLEN . 201 11 VON DER WEBSEITE ZUR WEBSITE . 213 TEIL III CSS-GRUNDLAGEN 12 GESTALTEN PER CSS: FARBEN UND EINHEITEN . 237 13 DIE WICHTIGSTEN SELEKTOREN UND SPEZIFITAET . 253 14 DER BROWSER UND DAS CSS: KASKADE, VERERBUNG ODER STANDARDWERT . 271 15 SCHRIFT UND TEXT GESTALTEN PER CSS . 285 16 DAS BOX-MODELL FUER BLOCK- UND INLINE-BOXEN . 307 17 BOXEN GESTALTEN PER CSS . 329 18 ORDNUNG HALTEN: STYLESHEETS ORGANISIEREN . 357 TEIL IV CSS - LAYOUT 19 MEDIA QUERIES UND RESPONSIVES WEBDESIGN . 383 20 DER FLOW UND DIE EIGENSCHAFT POSITION . 399 21 SCHWEBEN UND SCHWEBEN LASSEN: FLOAT . 413 22 GESTALTEN PER FLEXBOX: DAS CSS FLEXIBLE BOX LAYOUT . 423 23 EINE RESPONSIVE NAVIGATION ERSTELLEN . 443 24 GESTALTEN MIT RASTER: DAS CSS GRID LAYOUT . 459 25 FLEXIBLE ICONS UND RESPONSIVE BILDER . 483 INHALT MATERIALIEN ZUM BUCH . 26 GELEITWORT . 27 VORWORT . 29 TEIL I WEBSEITEN, HTML UND CSS 1 WISSENSWERTES UEBER WEBSEITEN ZS 1.1 WEBSEITEN SEHEN BEI JEDEM BENUTZER ANDERS AUS . 35 1.2 WEBSEITEN BESTEHEN AUS QUELLTEXT . 36 1.3 QUELLTEXT BESTEHT AUS HTML, CSS UND JAVASCRIPT . 37 1.3.1 DER INHALT: HTML IST NICHT HUEBSCH, ABER FLEXIBEL . 38 1.3.2 DAS STYLING: CSS GESTALTET DAS HTML . 39 1.4 WEBSEITEN WERDEN VON EINEM BROWSER DARGESTELLT . 40 1.4.1 DIE BEKANNTESTEN BROWSER: CHROME, FIREFOX, SAFARI, EDGE UND CO . 40 1.4.2 VIELE BROWSER SIND MITEINANDER VERWANDT . 41 1.4.3 BESONDERHEITEN: BROWSER UNTER IOS UND INTERNET EXPLORER . 41 1.5 EDITOREN ZUM SCHREIBEN UND BEARBEITEN VON QUELLTEXT . 42 1.6 REFERENZEN UND NACHSCHLAGEWERKE ZU HTML UND CSS . 43 1.6.1 SELFHTML-DAS DEUTSCHSPRACHIGE URGESTEIN . 43 1.6.2 DAS MOZILLA DEVELOPER NETWORK (MDN) - MOSTLY ENGLISH . 44 1.6.3 ANLAUFSTELLE FUER FRAGEN ZUR BROWSERUNTERSTUETZUNG: CANIUSE.COM 45 1.7 AUF EINEN BLICK . 46 2 HTML KENNENLERNEN: DIE ERSTE WEBSEITE ERSTELLEN 47 2.1 WEBSEITEN BESTEHEN AUS RECHTECKIGEN KAESTCHEN. 48 2.2 HT-M-L: DIE HYPERTEXT MARKUP LANGUAGE . 49 2.2.1 HT WIE HYPERTEXT-TEXT MIT HYPERLINKS . 49 2.2.2 M WIE MARKUP - TEXT MIT TAGS . 49 5 INHALT 2.23 L WIE LANGUAGE-VOKABELN UND GRAMMATIKREGELN . 49 2.2.4 DER UNTERSCHIED ZWISCHEN ELEMENT UND TAG . 50 2.3 JEDE WEBSEITE HAT EIN HTML-GRUNDGERUEST . 50 2.3.1 DIE DATEI INDEX.HTML IM EDITOR ERSTELLEN UND SPEICHERN . 51 2.3.2 EINE GUTE ANGEWOHNHEIT: !-- KOMMENTARE -- . 51 2.3.3 DAS HTML-GRUNDGERUEST FUER DIE STARTSEITE ERSTELLEN . 52 2.4 DER !DOCTYPE UND DAS STAMMELEMENT HTML . 54 2.4.1 DIE DOKUMENTTYP-DEFINITION !DOCTYPE HTML . 54 2.4.2 DAS STAMMELEMENT: HTML UND /HTML UMSCHLIESSEN DEN QUELLTEXT . 55 2.5 HTML-ELEMENTE KOENNEN ATTRIBUTE HABEN . 55 2.6 DER HEAD ENTHAELT WICHTIGE INFOS UEBER DIE WEBSEITE . 56 2.6.1 DIE ANGABE DES ZEICHENSATZES: META CHARSET="UTF-8" . 56 2.6.2 DER SEITENTITEL STEHT ZWISCHEN TITLE UND /TITLE . 57 2.6.3 DIE SEITENBESCHREIBUNG MIT CMETA NAME="DESCRIPTION" . 58 2.7 BITTE NICHT VERKLEINERN: META NAME="VIEWPORT" . . 59 2.7.1 MOBILE BROWSER STELLEN WEBSEITEN VERKLEINERT DAR . 59 2.7.2 RESPONSIVE WEBSEITEN SOLLEN NICHT VERKLEINERT WERDEN . 59 2.7.3 DER META-VIEWPORT GEHOERT MIT INS HTML-GRUNDGERUEST . 60 2.8 DER SICHTBARE BEREICH DER WEBSEITE STEHT IN BODY . 61 2.9 DER KOPFBEREICH DER WEBSEITEN: HEADER . 63 2.10 ENTWICKLERWERKZEUGE IM BROWSER: HTML ANALYSIEREN . 64 2.11 EINE SEHR KURZE GESCHICHTE VON HTML . 65 2.11.1 DAS W3C DEFINIERTE DIE STANDARDS: HTML 1 BIS 4 UND XHTML . 65 2.11.2 W3C UND WHATWG: HTML5 UND HTML- LIVING STANDARD . 66 2.12 AUF EINEN BLICK . 67 3 CSS KENNENLERNEN: DIE ERSTE WEBSEITE GESTALTEN 69 3.1 JEDER BROWSER HAT EIN FEST EINGEBAUTES STYLESHEET . 69 3.2 DAS HTML FUER BODY ALS SCHEMATISCHE DARSTELLUNG . 70 3.3 DAS ERSTE EIGENE STYLESHEET: STYLE.CSS . 72 3.3.1 SCHRITT 1: EINEN UNTERORDNER UND EIN STYLESHEET ERSTELLEN . 72 6 INHALT 3.3.2 SCHRITT 2: HTML-DATEI UND CSS-DATEI VERBINDEN MIT LINK . 72 3.4 DIE ERSTE CSS-REGEL: HINTERGRUNDFARBE FUER BODY . 73 3.4.1 AUCH IN CSS EINE GUTE ANGEWOHNHEIT: /* KOMMENTARE / . 74 3.4.2 HINTERGRUND- UND SCHRIFTFARBE FUER BODY AENDERN . 74 3.5 DEN KOPFBEREICH HEADER SELEKTIEREN UND GESTALTEN . 76 3.5.1 HINTERGRUND-UND SCHRIFTFARBE FUER HEADER AENDERN . 76 3.5.2 ETWAS ABSTAND ZWISCHEN TEXT UND RAND EINFUEGEN MIT PADDING . 77 3.6 WICHTIGE VOKABELN: DER AUFBAU EINER CSS-REGEL . 78 3.7 ENTWICKLERWERKZEUGE IM BROWSER: CSS ANALYSIEREN. 79 3.8 EINE SEHR KURZE GESCHICHTE VON CSS . 80 3.9 AUF EINEN BLICK . 81 TEIL II HTML (MIT EINER PRISE CSS) 4 HTML-ELEMENTE FUER UEBERSCHRIFTEN, TEXT UND LISTEN SS 4.1 UEBERSCHRIFTEN STRUKTURIEREN DEN INHALT: HL BIS H6 . 85 4.1.1 HTML KENNT SECHS EBENEN FUER UEBERSCHRIFTEN . 86 4.1.2 EINE H2 -UEBERSCHRIFT IM INHALTSBEREICH EINFUEGEN . 87 4.2 ABSAETZE UND HERVORHEBUNGEN: P , STRONG , EM . 88 4.2.1 ABSAETZE MIT P UND HERVORHEBUNGEN MIT STRONG UND EM . 88 4.2.2 FLIESSTEXT AUF DER UEBUNGSWEBSITE EINFUEGEN . 88 4.2.3 HTML-ELEMENTE VERSCHACHTELN - ZUERST GEOEFFNET, ZULETZT GESCHLOSSEN 89 4.3 WEBSEITEN IN UNTERSCHIEDLICH GROSSEN VIEWPORTS TESTEN . 90 4.4 LISTEN ERSTELLEN MIT UL , OL UND LI . 92 4.4.1 AUFZAEHLUNGEN: UNGEORDNETE LISTEN MIT UL UND LI . 92 4.4.2 NUMMERIERUNGEN: GEORDNETE LISTEN MIT OL UND LI . 93 4.5 LISTEN VERSCHACHTELN: EINE LISTE IN EINER LISTE . 94 4.6 BESCHREIBUNGSLISTEN MIT DL , DD UND DT . 96 4.6.1 DAS HTMLFUER EINE BESCHREIBUNGSLISTE . 96 4.6.2 EINE EINFACHE GESTALTUNG FUER EINE BESCHREIBUNGSLISTE . 97 7 INHALT 4.7 EIN KURZER BLICK AUF DAS BROWSER-STYLESHEET . 98 4.7.1 DAS BROWSER-STYLESHEET DES FIREFOX HEISST HTML.CSS . 98 4.7.2 NICHT HUEBSCH, ABER LESBAR - WAS EIN BROWSER-STYLESHEET MACHT . 99 4.7.3 DIE CSS-REGEL FUER EINE HL -UEBERSCHRIFT AUS DEM BROWSER- STYLESHEET . 100 4.8 UEBER BLOCKELEMENTE, INLINE-ELEMENTE UND DISPLAY . 100 4.8.1 BLOCKELEMENTE WERDEN SO BREIT, WIE ES GEHT . 100 4.8.2 INLINE-ELEMENTE WERDEN NUR SO BREIT WIE IHR INHALT . 101 4.8.3 BLOCK- UND INLINE-ELEMENTE IM BROWSER-ENTWICKLERTOOL . 101 4.9 AUF EINEN BLICK . 102 5 HYPERLINKS - DAS BESONDERE AM WEB 103 5.1 DAS STANDARDVERHALTEN VON HYPERLINKS. 103 5.2 ANATOMIE EINES HYPERLINKS: A HREF ="." LINKTEXT /A . 104 5.3 HYPERLINKS IN NEUEM TAB ODER FENSTER OEFFNEN . 106 5.4 EINE NAVIGATION IST EINE LISTE MIT LINKS . 107 5.5 EINE GRUNDLEGENDE GESTALTUNG FUER DIE NAVIGATION . 109 5.5.1 SCHRITT 1: DIE LISTENELEMENTE NEBENEINANDERSTELLEN . 109 5.5.2 SCHRITT 2: DEN NAVIGATIONSBEREICH UND DIE LISTE GESTALTEN . 111 5.5.3 SCHRITT 3: DIE LINKS UND DEN LINKTEXT GESTALTEN . 112 5.6 IM FUSSBEREICH EINEN LINK NACH OBEN EINFUEGEN . 114 5.6.1 SCHRITT 1: DAS HTMLFUER EINEN LINK NACH OBEN AUF DERSELBEN SEITE . 114 5.6.2 SCHRITT 2: EINE GRUNDLEGENDE GESTALTUNG FUER DEN FOOTER UND DEN LINK . 115 5.7 BESONDERE LINKS: DATEIEN, E-MAIL UND TELEFON . 117 5.7.1 HYPERLINKS AUF DATEIEN, DIE KEINE WEBSEITEN SIND: PDF & CO . 117 5.7.2 LINKS AUF E-MAIL-ADRESSEN . 118 5.7.3 LINKS AUF TELEFONNUMMERN . 118 5.8 AUF EINEN BLICK . 119 8 INHALT 6 HTML-ELEMENTE FUER BILDER, AUDIO UND VIDEO 121 6.1 UEBER GRAFIKFORMATE IM WEB: JPEG, GIF, PNG UND SVG . 121 6.2 EIN BILD ALS LOGO EINBINDEN MIT IMG . 123 6.2.1 DAS ELEMENT IMG UND SEINE WICHTIGSTEN ATTRIBUTE . 123 6.2.2 EIN LOGO AUF DER UEBUNGSWEBSITE EINFUEGEN MIT IMG . 124 6.2.3 HOCHAUFLOESENDE BILDSCHIRME BENOETIGEN GROESSERE BILDER . 125 6.2.4 FINE-TUNING: DIE ABSTAENDE UM LOGO UND SLOGAN ANPASSEN . 126 6.3 BILDER MIT FLEXIBLER BREITE: MAX-WIDTH: 100% . 127 6.3.1 DAS PROBLEM: PIXELBILDER HABEN EINE FESTE BREITE . 127 6.3.2 DIE LOESUNG: FLEXIBLE BILDER MIT MAX-WIDTH: 100% . 128 6.4 ABBILDUNGEN BESCHRIFTEN: FIGURE UND FIGCAPTION . 130 6.4.1 EIN FOTO MIT EINER BESCHRIFTUNG: FIGURE UND FIGCAPTION IM EINSATZ . 130 6.4.2 DIE EINRUECKUNG VON FIGURE ENTFERNEN UND DIE BESCHRIFTUNG ZENTRIEREN . 131 6.5 AUDIODATEIEN EINBINDEN MIT AUDIO . 133 6.5.1 AUDIOFORMATE, BROWSERUNTERSTUETZUNG UND AUDIOPLAYER . 133 6.5.2 DIE EINBINDUNG VON SOUND-DATEIEN MIT AUDIO . 133 6.5.3 AUDIODATEIEN BESCHRIFTEN MIT FIGURE UND FIGCAPTION . 134 6.6 BEWEGTE BILDER EINBINDEN MIT VIDEO . 135 6.6.1 VIDEOFORMATE UND BROWSERUNTERSTUETZUNG IM UEBERBLICK . 135 6.6.2 DIE EINBINDUNG VON VIDEODATEIEN MIT VIDEO . 136 6.6.3 FLEXIBLE VIDEOS PER CSS MIT MAX-WIDTH: 100% . 137 6.7 AUF EINEN BLICK . 138 7 HTML-ELEMENTE ZUR STRUKTURIERUNG VON WEBSEITEN UND INHALTEN 139 7.1 DIE SEMANTISCHEN STRUKTURELEMENTE AUF EINEN BLICK. 140 7.2 KOPFBEREICHE AUSZEICHNEN: HEADER . 140 7.2.1 DAS ELEMENT HEADER KANN AUF EINER SEITE MEHRFACH VORHANDEN SEIN . 140 7.2.2 DEN KOPF BEREICH AUF DER UEBUNGSWEBSITE UM EINE KLASSE ERWEITERN . 142 9 INHALT 7.3 NAVIGATIONSBEREICHE ERSTELLEN MIT NAV . 143 7.3.1 NAV FUER DIE SITE-NAVIGATION AUF DER UEBUNGSWEBSITE . 143 7.3.2 DEN NAVIGATIONSBEREICH AUF DER UEBUNGSWEBSITE UM EINE KLASSE ERWEITERN . 144 7.3.3 NAV KANN IN DER HTML-STRUKTUR AUCH AN ANDEREN POSITIONEN STEHEN . 145 7.4 DER HAUPTINHALT EINER WEBSEITE STEHT IN MAIN . 146 7.4.1 DAS ELEMENT MAIN FUER DEN HAUPTINHALT EINER WEBSEITE . 146 7.4.2 DEN INHALTSBEREICH DER UEBUNGSWEBSITE UM EINE KLASSE ERWEITERN . 147 7.5 FUSSBEREICHE AUSZEICHNEN: FOOTER . 147 7.5.1 DER FUSSBEREICH FOOTER AUF DER UEBUNGSWEBSITE . 147 7.5.2 DEN FUSSBEREICH AUF DER UEBUNGSWEBSITE UM EINE KLASSE ERWEITERN . 148 7.6 INHALTLICHE ABSCHNITTE ERSTELLEN: SECTION . 148 7.7 IN SICH GESCHLOSSENE, EIGENSTAENDIGE BLOECKE: ARTICLE . 151 7.7.1 GRUNDLEGENDE GESTALTUNG FUER DEN ABSCHNITT UND DIE INFOBOXEN . 153 7.8 BEREICHE MIT ZUSAETZLICHEN INFORMATIONEN: ASIDE . 154 7.9 ELEMENTE SEMANTISCH NEUTRAL GRUPPIEREN: DIV . 156 7.10 AUF EINEN BLICK . 158 8 WEITERE HTML-ELEMENTE ZUR AUSZEICHNUNG VON INHALTEN 159 8.1 ZITATE AUSZEICHNEN MIT BLOCKQUOTE UND CITE . 159 8.1.1 DAS HTML FUER BLOCKZITATE: BLOCKQUOTE UND CITE . 160 8.1.2 EIN BLOCKZITAT MIT EINEM FOOTER FUER DIE QUELLENANGABE . 161 8.1.3 EINE EINFACHE GESTALTUNG FUER EIN ZITAT . 162 8.2 EINEN ZEILENUMBRUCH ERZWINGEN MIT BR . 163 8.3 KONTAKTINFORMATIONEN AUSZEICHNEN MIT ADDRESS . 163 8.3.1 EINE KONTAKTADRESSE AUSZEICHNEN MIT ADDRESS . 164 8.3.2 EINE GRUNDLEGENDE GESTALTUNG FUER EINE KONTAKTADRESSE . 164 8.4 AENDERUNGEN AM TEXT DOKUMENTIEREN: DEL UND INS . 165 8.4.1 DAS HTMLFUER AENDERUNGEN AM TEXT . 165 8.4.2 EINE EINFACHE GESTALTUNG FUER AENDERUNGEN AM TEXT . 166 10 INHALT 8.5 ZEITANGABEN FUER MENSCHEN UND MASCHINEN: TIME . 167 8.5.1 DATUMSANGABEN MIT TIME . 167 8.5.2 DIE UHRZEIT MIT TIME . 168 8.6 KURZ VORGESTELLT: SPAN , HR UND SMALL . 169 8.6.1 SPAN IST EIN SEMANTISCH NEUTRALES INLINE-ELEMENT . 170 8.6.2 HR MARKIERT EINEN INHALTLICHEN BRUCH INNERHALB EINES ABSCHNITTS . 170 8.6.3 DAS SPRICHWOERTLICHE KLEINGEDRUCKTE MIT SMALL . 170 8.7 AUSKLAPPBARE INHALTE: DETAILS UND SUMMARY . 171 8.7.1 DAS HTMLFUER AUSKLAPPBARE INHALTE: DETAILS UND SUMMARY . 171 8.7.2 EINE GRUNDLEGENDE GESTALTUNG FUER DETAILS UND SUMMARY . 172 8.8 WEITERE INLINE-ELEMENTE IN DER UEBERSICHT. 174 8.9 KNOW-HOW: ZEICHENSAETZE UND SONDERZEICHEN . 175 8.9.1 UTF-8: WISSENSWERTES UEBER ZEICHENSAETZE . 175 8.9.2 DIE KODIERUNG VON SONDERZEICHEN IN HTML . 176 8.10 AUF EINEN BLICK . 178 9 HTML-ELEMENTE ZUM ERSTELLEN VON FORMULAREN 179 9.1 FORMULARE DIENEN ZUR INTERAKTION MIT DEN BESUCHERN . 179 9.2 DAS ELEMENT FORM DEFINIERT EIN FORMULAR . 180 9.3 EINZEILIGE EINGABEFELDER MIT INPUT UND LABEL . 181 9.3.1 EIN EINZEILIGES EINGABEFELD FUER TEXT: INPUT TYPE="TEXT" . 182 9.3.2 DIE BESCHRIFTUNG EINES FORMULARFELDES MIT LABEL . 182 9.3.3 EIN EINGABEFELD FUER E-MAIL-ADRESSEN: INPUT TYPE="EMAIL" . 184 9.3.4 PFLICHTFELDER DEFINIEREN: DAS ATTRIBUT REQUIRED . 185 9.4 MEHRZEILIGE EINGABEFELDER MIT TEXTAREA UND LABEL . 186 9.5 KONTROLLKAESTCHEN UND OPTIONSFELDER . 187 9.5.1 ECKIGE KONTROLLKAESTCHEN MIT INPUT TYPE="CHECKBOX" . 187 9.5.2 RUNDE OPTIONSFELDER MIT INPUT TYPE="RADIO" . 188 9.6 FORMULARFELDER GRUPPIEREN: FIELDSET UND LEGEND . 189 9.7 EIN BUTTON ZUM ABSCHICKEN DER FORMULARDATEN. 190 9.8 EIN DSGVO-KOMPATIBLES KONTAKTFORMULAR ERSTELLEN . 192 9.8.1 SCHRITT 1: DAS HTML FUER DIE EINGABEFELDER . 193 11 INHALT 9.8.2 SCHRITT 2: DSGVO-EINVERSTAENDNIS PER KONTROLLKAESTCHEN . 194 9.8.3 SCHRITT 3: EINE GRUNDLEGENDE GESTALTUNG FUER DAS FORMULAR . 195 9.8.4 SCHRITT 4: BESCHRIFTUNG UND FORMULARFELDER AUSRICHTEN . 196 9.9 AUF EINEN BLICK . 198 10 HTML-ELEMENTE ZUM ERSTELLEN VON TABELLEN 201 10.1 EINE EINFACHE HTML-TABELLE: TABLE , TR UND TD . 201 10.2 TABELLENUEBERSCHRIFTEN STEHEN IN TH . 203 10.3 TABELLEN STRUKTURIEREN: THEAD , TBODY UND TFOOT . 204 10.4 ZELLEN VERBINDEN MIT COLSPAN UND ROWSPAN . 205 10.5 HTML-TABELLEN ERSTELLEN UND GESTALTEN - EIN BEISPIEL . 206 10.5.1 SCHRITT 1: DAS HTML FUER DIE BEISPIELTABELLE . 207 10.5.2 SCHRITT 2: EINE GRUNDLEGENDE GESTALTUNG FUER DIE BEISPIELTABELLE . 209 10.5.3 SCHRITT 3: ZWISCHENRAUM KONTROLLIEREN MIT BORDER-SPACING UND BORDER-COLLAPSE . 210 10.6 AUF EINEN BLICK . 211 11 VON DER WEBSEITE ZUR WEBSITE 213 11.1 FINE-TUNING FUER DIE STARTSEITE . 213 11.1.1 EINE KLASSE FUER DIE SEITE: BODYCLASS="STARTSEITE" . 214 11.1.2 SIE SIND HIER: DEN AKTUELLEN MENUEPUNKT HERVORHEBEN . 214 11.1.3 IM FOOTER: LINKS ZU IMPRESSUM UND DATENSCHUTZ EINFUEGEN . 216 11.2 DAS HTML UEBERPRUEFEN MIT DEM HTML-VALIDATOR . 218 11.3 DIE SEITEN NEWS, UEBER UNS UND KONTAKT ERSTELLEN . 220 11.3.1 DIE SEITE NEWS ERSTELLEN UND ANPASSEN . 220 11.3.2 DIE SEITEN UEBER UNS UND KONTAKT ERSTELLEN UND ANPASSEN . 222 11.4 DIE SEITE NEWS MIT INHALT FUELLEN . 224 11.4.1 EINEN NEUEN ABSCHNITT HINZUFUEGEN: SECTION CLASS="BEITRAGSLISTE" . 224 11.4.2 EINEN BEREICH MIT LINKLISTEN ERSTELLEN: ASIDE CLASS="LINKLISTEN" . 226 11.4.3 EINE GRUNDLEGENDE GESTALTUNG FUER DIE INHALTE DER SEITE NEWS . 227 12 INHALT 11.5 EIN BILD AUF DER SEITE UEBER UNS EINFUEGEN . 228 11.6 KONTAKTDATEN UND FORMULAR FUER DIE SEITE KONTAKT . 229 11.6.1 DEN ABSCHNITT KONTAKTDATEN HINZUFUEGEN . 230 11.6.2 EINEN ABSCHNITT MIT EINEM KONTAKTFORMULAR HINZUFUEGEN . 231 11.7 DIE SEITEN IMPRESSUM UND DATENSCHUTZ . 233 11.8 AUF EINEN BLICK . 234 TEIL III CSS-GRUNDLAGEN IJGESTALTEN PER CSS: FARBEN UND EINHEITEN 237 12.1 UEBERBLICK: WEBSEITEN GESTALTEN PER CSS . 237 12.2 CSS KANN AN DREI STELLEN DEFINIERT WERDEN . 238 12.2.1 EXTERNES STYLESHEET: CSS-REGELN IN EINER EIGENEN DATEI . 238 12.2.2 STYLE-BLOCK: CSS-REGELN MIT STYLE IM HEAD EINER WEBSEITE . 239 12.2.3 INLINE-STYLES: ANWEISUNGEN MIT DEM ATTRIBUT STYLE IM ELEMENT . 239 12.2.4 DIE EMPFOHLENE VORGEHENSWEISE: CSS-DATEI, STYLE UND STYLE-" " . 240 12.3 FARBNAMEN IN CSS: EINFACH, ABER NICHT SEHR FLEXIBEL . 240 12.4 HEXADEZIMALE FARBANGABEN: #RRGGBB . 241 12.4.1 DER AUFBAU EINES HEXADEZIMALEN FARBWERTES . 242 12.4.2 DIE HEXADEZIMALE KURZSCHREIBWEISE: #RGB . 242 12.4.3 UEBERSICHT: EINIGE FARBNAMEN UND IHRE HEX-WERTE . 243 12.4.4 HEXEN UND BLAUFAERBEN: FARBNAMEN AUF DER UEBUNGSWEBSITE AENDERN . 243 12.5 FARBEN DEFINIEREN MIT RGB() UND RGBA() . 244 12.6 WERKZEUGE UND WEBSITES ZUR ARBEIT MIT FARBEN . 246 12.6.1 FIREFOX HAT IN DEN ENTWICKLERWERKZEUGEN EINEN FARBWAEHLER . 246 12.6.2 AUSFUEHRLICHE FARBAUSWAHL IN DEN ENTWICKLERWERKZEUGEN DER BROWSER . 247 12.7 WICHTIGE EINHEITEN: PX, EM, REM, % & CO . 248 12.7.1 DIE EINHEIT PX: EIN PIXEL IST NICHT IMMER EIN PIXEL . 249 12.7.2 DIE EINHEIT EM HAT VERSCHIEDENE BERECHNUNGSGRUNDLAGEN . 250 13 INHALT 12.7.3 DIE EINHEIT REM ENTSPRICHT DER STANDARDSCHRIFTGROESSE DES BROWSERS . 251 12.7.4 DIE EINHEIT % (PROZENT) IST MEIST RELATIV ZUM ELTERNELEMENT . 251 12.8 AUF EINEN BLICK . 252 13 DIE WICHTIGSTEN SELEKTOREN UND SPEZIFITAET 253 13.1 EINFACHE SELEKTOREN: ELEMENTE, GRUPPIERUNG UND . 253 13.1.1 DER NAME DER KISTE-EINFACHE ELEMENTSELEKTOREN . 254 13.1.2 MEHRERE KAESTCHEN ZUGLEICH: SELEKTOREN MIT EINEM KOMMA GRUPPIEREN . 254 13.1.3 ALLE KAESTCHEN AUSWAEHLEN: DER UNIVERSALSELEKTOR * . 255 13.2 KLASSEN SIND KLASSE: DER SELEKTOR MIT DEM PUNKT . 255 13.2.1 KLASSEN ZUR GETRENNTEN GESTALTUNG VON GLEICHNAMIGEN ELEMENTEN . 255 13.2.2 KLASSEN ZUM GRUPPIEREN VON ELEMENTEN ZUR GEMEINSAMEN GESTALTUNG . 256 13.2.3 GEBUNDENE KLASSEN: KLASSEN AUF EINEN ELEMENTTYP BESCHRAENKEN . 256 13.2.4 EIN HTML-ELEMENT KANN MEHRERE KLASSENNAMEN HABEN . 257 13.3 IDS SIND EINMALIG: DER SELEKTOR MIT DER RAUTE . 257 13.4 SELEKTOREN FUER NACHFAHREN UND KINDER . 258 13.4.1 FAMILIENAUFSTELLUNG: HTML-ELEMENTE IM DOM-BAUM . 259 13.4.2 DER NACHFAHRENSELEKTOR: DER SELEKTOR MIT DEM LEERZEICHEN . 260 13.4.3 DER KINDSELEKTOR: DER SELEKTOR MIT DEM (GROESSER-ALS-ZEICHEN) . 260 13.4.4 SPEZIELLE KINDER SELEKTIEREN MIT :FIRST-CHILD UND :LAST-CHILD . 261 13.4.5 DIE GESCHWISTERSELEKTOREN: PLUSZEICHEN + UND TILDE ~ . 262 13.5 ATTRIBUTSELEKTOREN HABEN ECKIGE KLAMMERN . 264 13.5.1 NUR DAS ATTRIBUT: ELEMENT[ATTRIBUT] . 264 13.5.2 MIT EINEM GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT="ZEICHEN"] . 265 13.5.3 MIT TILDE UND GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT~="ZEICHEN"] . 265 13.5.4 MIT HUETCHEN UND GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT A ="ZEICHEN"] . 265 13.5.5 MIT DOLLAR UND GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT$="ZEICHEN"] . 266 13.5.6 MIT STERNCHEN UND GLEICHHEITSZEICHEN: ELEMENT[ATTRIBUT="ZEICHEN"] . 266 13.6 SPEZIFITAET: EINIGE SELEKTOREN SIND WICHTIGER ALS ANDERE . 267 14 INHALT 13.6.1 EINER WIRD GEWINNEN: SO FUNKTIONIERT SPEZIFITAET . 267 13.6.2 GANZ SPARSAM BENUTZEN: ! IMPORTANT MACHT ANWEISUNGEN WICHTIG! . 268 13.7 AUF EINEN BLICK . 269 14 DER BROWSER UND DAS CSS: KASKADE, VERERBUNG ODER STANDARDWERT 271 14.1 DIE KASKADE: WICHTIGKEIT, SPEZIFITAET UND REIHENFOLGE . 271 14.1.1 DIE KASKADE HILFT DEM BROWSER, GENAU EINE ANWEISUNG ZU FINDEN . 272 14.1.2 DIE AUSGANGSSITUATION: DAS BEISPIEL IM UEBERBLICK . 272 14.1.3 BEISPIEL NR. 1: DIE REIHENFOLGE ENTSCHEIDET . 273 14.1.4 BEISPIEL NR. 2: DIE SPEZIFITAET IST WICHTIGER ALS DIE REIHENFOLGE. 274 14.1.5 BEISPIEL NR. 3: LIMPORTANT GEWINNT IMMER . 276 14.2 DIE KASKADE IM BROWSER ANALYSIEREN . 277 14.2.1 DIE KASKADE IM ENTWICKLERWERKZEUG DES FIREFOX . 277 14.2.2 DER TRICK MIT DEM TRICHTER: ANWEISUNGEN NACH EIGENSCHAFT FILTERN . 279 14.3 NICHTS GEFUNDEN? VERERBUNG ODER STANDARDWERT . 279 14.3.1 VERERBUNG MACHT EIN STYLESHEET UEBERSICHTLICHER . 279 14.3.2 BESTIMMTE EIGENSCHAFTEN WERDEN NICHT VERERBT . 280 14.3.3 FALLS ER GAR NICHTS FINDET, NIMMT DER BROWSER DEN STANDARDWERT . 281 14.4 UEBERBLICK: KASKADE, VERERBUNG ODER STANDARDWERT . 281 14.5 AUF EINEN BLICK . 283 15 SCHRIFT UND TEXT GESTALTEN PER CSS 285 15.1 KLASSISCHE SCHRIFTARTEN IM WEB . 285 15.1.1 SCHRIFTARTEN MIT UND OHNE SERIFEN . 285 15.1.2 SEHR PRAKTISCH: DIE SCHRIFTGESTALTUNG IM FIREFOX ANALYSIEREN . 286 15.2 DIE SCHRIFTART DEFINIEREN MIT FONT-FAMILY . 287 15.2.1 BITTE EINE SCHRIFT OHNE SERIFEN: FONT-FAMILY: SANS-SERIF . 287 15.2.2 GENERISCHE SCHRIFTFAMILIEN IM UEBERBLICK . 289 15.2.3 DIE SYSTEM SCHRIFT: GUT ZU LESEN UND ECHT SCHNELL . 289 15 INHALT 15.3 WEBFONTS - DIE SCHRIFTART GLEICH MITLIEFERN . 291 153.1 WEBFONTS IM UEBERBLICK . 291 153.2 EINFACH, SCHNELL UND KOSTENLOS: GOOGLE FONTS . 292 1533 SCHRITT 1: SCHRIFTART UND SCHRIFTSCHNITTE AUSWAEHLEN . 293 153.4 SCHRITT 2: DEN CODE FUER DIE SCHRIFTART KOPIEREN UND EINFUEGEN . 293 15.4 GUT LESBARER FLIESSTEXT: FONT-SIZE UND LINE-HEIGHT . 295 15.4.1 SCHRIFTGROESSE DEFINIEREN MIT FONT-SIZE UND EINER LAENGENEINHEIT . 295 15.4.2 SCHRIFTGROESSE DEFINIEREN MIT FONT-SIZE UND EINEM WORT . 297 15.4.3 WICHTIG FUER DIE LESBARKEIT: DER ZEILENABSTAND MIT LINE-HEIGHT . 298 15.5 HYPERLINKS GESTALTEN MIT PSEUDOKLASSEN . 299 15.5.1 BESUCHTE UND NICHT BESUCHTE HYPERLINKS MIT :LINK UND :VISITED . 299 15.5.2 BENUTZERAKTIONEN GESTALTEN MIT :HOVER, :FOCUS UND :ACTIVE . 301 15.6 WEITERE EIGENSCHAFTEN ZUR SCHRIFT- UND TEXTGESTALTUNG . 303 15.6.1 DIE WICHTIGSTEN EIGENSCHAFTEN ZUR SCHRIFT- UND TEXTGESTALTUNG IM UEBERBLICK . 303 15.6.2 SCHRIFT GESTALTEN: FETT, KURSIV, KAPITAELCHEN UND ZEICHENABSTAND . 303 15.6.3 DIE KURZSCHREIBWEISE FONT . 304 15.6.4 TEXT AUSRICHTEN UND DIE ERSTE ZEILE EINRUECKEN . 305 15.6.5 SCHATTEN IM TEXT: TEXT-SHADOW . 305 15.7 AUF EINEN BLICK . 306 16 DAS BOX-MODELL FUER BLOCK- UND INLINE-BOXEN 307 16.1 DAS KLASSISCHE BOX-MODELL FUER BLOCKBOXEN . 307 16.1.1 BREITE UND HOEHE FUER DEN INHALT DEFINIEREN: WIDTH, HEIGHT & CO . 308 16.1.2 DER INNENABSTAND PADDING SCHAFFT PLATZ ZWISCHEN INHALT UND RAND . 309 16.1.3 DIE RAHMENLINIEN DRUMHERUM: BORDER . 310 16.1.4 DER AUSSENABSTAND MARGIN REGELT DEN ABSTAND ZU ANDEREN BOXEN . 310 16.1.5 DER UNTERSCHIED ZWISCHEN ABSTAENDEN MIT PADDING UND MARGIN . 311 16.2 DAS BOX-MODELL IM BROWSER VISUALISIEREN . 312 16.3 DIE BREITE VON BLOCKBOXEN BEGRENZEN: MAX-WIDTH . 313 16.4 BLOCKBOXEN ZENTRIEREN MIT MARGIN: AUTO . 314 16 INHALT 16.5 DER ABSTAND ZUM RAND: PADDING . 315 16.5.1 DAS PADDING FUER DEN KOPFBEREICH DER SEITE . 316 16.5.2 DAS PADDING FUER DIE NAVIGATION UND DEN FUSSBEREICH . 317 16.5.3 DAS PADDING FUER DEN INHALTSBEREICH . 318 16.6 VERTIKALE AUSSENABSTAENDE UND COLLAPSING MARGINS . 319 16.6.1 VERTIKALE AUSSENABSTAENDE AUFEINANDERFOLGENDER ELEMENTE KOLLABIEREN . 319 16.6.2 EIN KOPFBEREICH MIT UEBERSCHRIFT UND UEBERRASCHENDE ABSTAENDE . 320 16.6.3 NUETZLICH: EINE CSS-REGEL ZUR VERMEIDUNG VON COLLAPSING MARGINS . 322 16.7 DAS INTUITIVERE BOX-MODELL: BOX-SIZING: BORDER-BOX. 324 16.7.1 DAS BORDER-BOX-MODELL IN DER UEBERSICHT . 324 16.7.2 DAS BORDER-BOX-MODELL AKTIVIEREN MIT BOX-SIZING: BORDER-BOX . 325 16.8 DAS BOX-MODELL FUER INLINE-BOXEN . 326 16.9 INLINE-BLOCK: BLOCKBOXEN, ABER NEBENEINANDER. 327 16.10 AUF EINEN BLICK . 328 17 BOXEN GESTALTEN PER CSS 329 17.1 HINTERGRUNDGRAFIKEN PER CSS EINBINDEN UND GESTALTEN . 329 17.1.1 HINTERGRUNDGRAFIKEN EINBINDEN: BACKGROUND-IMAGE . 330 17.1.2 HINTERGRUNDGRAFIKEN WIEDERHOLEN: BACKGROUND-REPEAT . 331 17.1.3 HINTERGRUNDGRAFIKEN POSITIONIEREN: BACKGROUND-POSITION . 332 17.1.4 HINTERGRUNDGRAFIKEN FIXIEREN: BACKGROUND-ATTACHMENT . 333 17.1.5 DIE GROESSE DER HINTERGRUNDGRAFIK DEFINIEREN: BACKGROUND-SIZE . 333 17.1.6 DIE KURZSCHREIBWEISE: BACKGROUND . 335 17.1.7 DAS BOX-MODELL UND DIE DRITTE DIMENSION . 335 17.2 SCHATTENBOXEN MIT BOX-SHADOW . 336 17.3 ABGERUNDETE ECKEN MIT BORDER-RADIUS. 338 17.4 LINEARE FARBVERLAEUFE MIT LINEAR-GRADIENT() . 339 17.5 GESTALTEN MIT DEM BOX-MODELL: ZITATE . 341 17.5.1 DAS HTML: SECTION UND BLOCKQUOTE . 341 17.5.2 ZITATE GESTALTEN MIT PADDING, BORDER UND MARGIN . 342 17.6 LINKS DE LUXE: HYPERLINKS ALS BUTTON GESTALTEN . 344 17.6.1 DIE AUSGANGSSITUATION: ZWEI GANZ NORMALE HYPERLINKS . 345 17 INHALT 17.6.2 SCHRITT 1: DIE GRUNDLEGENDE GESTALTUNG DER BEIDEN LINKS . 345 17.6.3 SCHRITT 2: DIE UNTERSCHIEDE - PRIMAERE UND SEKUNDAERE BUTTONS . 346 17.6.4 SCHRITT 3: EINEN HOVER-EFFEKT MIT TRANSITION ANIMIEREN . 347 17.7 EXTERNE HYPERLINKS KENNZEICHNEN MIT ::AFTER . 349 17.7.1 SCHRITT 1: EXTERNE HYPERLINKS AUSWAEHLEN MIT EINEM ATTRIBUTSELEKTOR . 349 17.7.2 SCHRITT 2: DAS PSEUDOELEMENT ::AFTER UND DIE EIGENSCHAFT CONTENT . 350 17.7.3 SCHRITT 3: LINKS KENNZEICHNEN MIT EINEM UNICODE-SYMBOL . 351 17.8 BOXEN AM BILDSCHIRM AUSBLENDEN: VISUALLY-HIDDEN. 352 17.8.1 SCHRITT 1: DIE KLASSE VISUALLY-HIDDEN ERSTELLEN . 352 17.8.2 SCHRITT 2: DEN ELEMENTEN DIE KLASSE VISUALLY-HIDDEN ZUWEISEN . 354 17.9 AUF EINEN BLICK . 355 18 ORDNUNG HALTEN: STYLESHEETS ORGANISIEREN 357 18.1 KOMMENTARE ZUM STRUKTURIEREN VON STYLESHEETS . 358 18.1.1 DER KOMMENTAR AM ANFANG DES STYLESHEETS . 358 18.1.2 EIN STYLESHEET MIT KOMMENTAREN IN ABSCHNITTE UNTERTEILEN . 359 18.2 VERSCHIEDENE SCHREIBWEISEN FUER CSS-REGELN . 359 18.2.1 WEIT VERBREITET: EINE ANWEISUNG PRO ZEILE . 359 18.2.2 KURZE REGELN: ALLES IN EINER ZEILE . 360 18.2.3 UEBERSICHTLICH: NUR EIN GRUPPIERTER SELEKTOR PRO ZEILE . 360 18.2.4 REIHENFOLGE DER ANWEISUNGEN: 1. AM BOX-MODELL ORIENTIEREN . 361 18.2.5 REIHENFOLGE DER ANWEISUNGEN: 2. AM ALPHABET ORIENTIEREN . 362 18.3 EIN ZENTRALES STYLESHEET ERLEICHTERT DIE ENTWICKLUNG . 362 18.3.1 WAEHREND DER ENTWICKLUNG: MODULBAUWEISE MIT MEHREREN STYLESHEETS . 362 18.3.2 FUER DIE LIVE-SITE: ALLES IN EINEM STYLESHEET VEREINEN . 363 18.4 DIE EINZELNEN STYLESHEETS ERSTELLEN UND EINBINDEN . 364 18.4.1 SCHRITT 1: DIE EINZELNEN STYLESHEETS ERSTELLEN . 364 18.4.2 SCHRITT 2: STYLESHEETS MIT @IMPORT IN STYLE.CSS EINBINDEN . 365 18.5 AUFRAEUMEN: DAS CSS AUF DIE STYLESHEETS VERTEILEN . 366 18.5.1 ALLGEMEINE EINSTELLUNGEN UND GRUNDLEGENDE GESTALTUNG IN BASIS.CSS. 366 18.5.2 DAS SEITENLAYOUT UND DIE INHALTSBEREICHE: LAYOUT.CSS . 368 18 INHALT 18.53 DIE GESTALTUNG DER NAVIGATION IN NAVI-INLINE.CSS . 370 18.5.4 DIE GESTALTUNG DES INHALTS: CONTENT.CSS . 371 18.5.5 DIE GESTALTUNG DER FORMULARE: FORMULARE.CSS . 372 18.6 CSS UEBERPRUEFEN MIT DEM CSS-VALIDATOR. 373 18.7 EIN NEUES MODUL FUER EIN MODERNES LAYOUT . 374 18.7.1 SCHRITT 1: DAS HTML ANPASSEN-DIE DOPPLUNG MIT DIV . 375 18.7.2 SCHRITT 2: DAS STYLESHEET LAYOUT-MODERN.CSS HINZUFUEGEN . 377 18.7.3 SCHRITT 3: FINE-TUNING FUER DIE INFOBOXEN AUF DER STARTSEITE . 379 18.8 AUF EINEN BLICK . 380 TEIL IV CSS-LAYOUT 19 MEDIA QUERIES UND RESPONSIVES WEBDESIGN ZGZ 19.1 GETTING RESPONSIVE: DAS WEB WIRD FLEXIBEL . 383 19.2 MEDIENTYPEN DEFINIEREN DAS AUSGABEMEDIUM . 384 19.2.1 DIE MEDIENTYPEN IN DER UEBERSICHT . 384 19.2.2 EINE DRUCKVERSION FUER DIE UEBUNGSWEBSITE MIT @MEDIA PRINT . 385 19.3 MEDIA QUERIES = MEDIENTYPEN + MEDIENEIGENSCHAFTEN . 387 19.3.1 DIE SYNTAX: @MEDIA MEDIENTYP AND (EIGENSCHAFT: WERT) . 387 19.3.2 EIN BEISPIEL: EINE MEDIA QUERY ZUR AENDERUNG DER HINTERGRUNDFARBE 388 19.3.3 WEITERE BEISPIELE FUER MEDIA QUERIES . 389 19.3.4 DIE WICHTIGSTEN MEDIENEIGENSCHAFTEN IM UEBERBLICK . 390 19.4 MEDIA QUERIES UND DER META-VIEWPORT . 391 19.4.1 MEDIA QUERIES FUNKTIONIEREN IN MOBILEN BROWSERN MANCHMAL NICHT . 391 19.4.2 DER META-VIEWPORT DEFINIERT DIE VIEWPORTBREITE FUER MOBILE BROWSER NEU . 392 19.5 MEDIA QUERIES UND DER RICHTIGE BREAKPOINT . 393 19.5.1 WEIT VERBREITET: BREAKPOINTS FUER MOBIL, TABLET UND DESKTOP . 393 19.5.2 BREAKPOINTS SOLLTE MAN VOM LAYOUT ABLEITEN, NICHT VON GERAETEN . 394 19.6 MEHRSPALTIGER TEXT MIT DEM MULTI-COLUMN LAYOUT . 394 19.7 AUF EINEN BLICK . 396 19 INHALT 20 DER FLOW UND DIE EIGENSCHAFT POSITION 399 20.1 DER NORMALE FLOW MIT POSITION: STATIC . 399 20.2 VERSETZT WEITERFLIESSEN MIT POSITION: RELATIVE . 401 20.3 RAUS AUS DEM FLOW MIT POSITION: ABSOLUTE . 402 20.4 DER TRICK: ABSOLUTE UND RELATIVE KOMBINIEREN . 403 20.5 WIE EIN FELS IN DER BRANDUNG: POSITION: FIXED . 405 20.5.1 IN EINEM SCHMALEN VIEWPORT: ICONS NEBENEINANDER, UNTER DEM TEXT . 406 20.5.2 IN EINEM BREITEREN VIEWPORT: ICONS UNTEREINANDER, NEBEN DEM TEXT . 407 20.6 SCROLLEN UND DANN STEHEN BLEIBEN: POSITION: STICKY . 408 20.7 POSITIONIERTE BOXEN UND DER Z-INDEX . 409 20.8 AUF EINEN BLICK . 412 21 SCHWEBEN UND SCHWEBEN LASSEN: FLOAT 413 21.1 TEXT UM EINE ABBILDUNG FLIESSEN LASSEN MIT FLOAT . 413 21.1.1 DIE AUSGANGSSITUATION: EIN FIGURE MIT BILD UND BESCHRIFTUNG . 413 21.1.2 DAS FIGURE -ELEMENT NACH RECHTS FLOATEN MIT FLOAT: RIGHT . 414 21.1.3 GEFLOATETE BOXEN IN EINEM SCHMALEN VIEWPORT UEBERPRUEFEN . 416 21.1.4 DIE UMGEBENDEN ELEMENTE REICHEN BIS UNTER DIE GEFLOATETE BOX . 416 21.2 FLOATS BEENDEN MIT CLEAR: BOTH . 417 21.3 FLOATS UMSCHLIESSEN MIT DISPLAY: FLOW-ROOT . 417 21.3.1 DAS PROBLEM: FLOATS RAGEN NACH UNTEN AUS DEM ELTERNELEMENT HERAUS . 418 21.3.2 DIE LOESUNG: FLOATS UMSCHLIESSEN MIT DISPLAY: FLOW-ROOT . 418 21.4 PRAKTISCH: KLASSEN ZUM FLOATEN UND CLEAREN . 419 21.5 DAS UMSCHLIESSEN VON FLOATS MIT @SUPPORTS . 420 21.6 AUF EINEN BLICK . 422 20 INHALT 22 GESTALTEN PER FLEXBOX: DAS CSS FLEXIBLE BOX LAYOUT 423 22.1 FLEXBOX UND GRID - DAS NEUE CSS-LAYOUT . 423 22.1.1 DER BLOCK FORMATTING CONTEXT IST FUER LAYOUTS NUR BEDINGT GEEIGNET . 424 22.1.2 JENSEITS VOM BLOCK FORMATTING CONTEXT: FLEXBOX UND GRID . 424 22.1.3 LAYOUTEN PER FLEXBOX: NEUE MOEGLICHKEITEN OHNE ALTE PROBLEME . 424 22.2 LOS GEHT S: FLEX-CONTAINER ERSTELLEN MIT DISPLAY: FLEX . 425 22.2.1 DIE AUSGANGSPOSITION-EINE EINFACHE NAVIGATION . 425 22.2.2 EINE FLEXBOX DEFINIEREN MIT DISPLAY: FLEX . 426 22.3 FLIESSRICHTUNG: DIE RICHTUNG AENDERN MIT FLEX-FLOW . 428 22.3.1 JEDE FLEXBOX HAT EINE HAUPTACHSE UND EINE QUERACHSE . 428 22.3.2 FLEX-DIRECTION AENDERT DIE FLIESSRICHTUNG: VON ROW ZU COLUMN . 428 22.3.3 FLEX-WRAP ERMOEGLICHT EINEN ZEILENUMBRUCH IN DER FLEXBOX . 429 22.3.4 FLEX-FLOW IST KURZ FUER FLEX-DIRECTION UND FLEX-WRAP . 430 22.4 AUSRICHTUNG: LEERRAUM VERTEILEN MIT JUSTIFY-CONTENT . 431 22.5 AUSRICHTUNG: AUTOMATISCHE ABSTAENDE MIT MARGIN . 432 22.5.1 FLEX-ITEMS AM ENDE DES FLEX-CONTAINERS AUSRICHTEN MIT MARGIN . 433 22.5.2 ELEMENTE HORIZONTAL UND VERTIKAL ZENTRIEREN MIT MARGIMAUTO . 433 22.6 FLEXIBILITAET: DIE ZAUBERFORMEL FLEX: 1 . 434 22.6.1 LIEBER BROWSER, BITTE MACH ALLE FLEX-ITEMS GLEICH GROSS. . 434 22.6.2 FLEX IST KURZ FUER FLEX-GROW, FLEX-SHRINK UND FLEX-BASIS . 435 22.6.3 UEBERRASCHUNG: FLEX-GROW IN EINER MEHRZEILIGEN FLEXBOX . 436 22.7 FLEXBOX IN AKTION: DEN FOOTER PLATZIEREN . 437 22.7.1 SCHRITT 1: BODY WIRD FLEX-CONTAINER, DIE LAYOUTBEREICHE FLEX-ITEMS . 437 22.7.2 SCHRITT 2: DIE ZAUBERFORMEL FLEX: 1 FUER DEN INHALTSBEREICH . 438 22.8 DIE REIHENFOLGE DER FLEX-ITEMS AENDERN . 440 22.9 AUF EINEN BLICK . 441 21 INHALT 23 EINE RESPONSIVE NAVIGATION ERSTELLEN 443 23.1 DIE RESPONSIVE NAVIGATION IM UEBERBLICK . 443 23.2 SCHRITT 1: GRUNDLEGENDE FORMATIERUNG DER NAVIGATION . 445 23.2.1 NEUES STYLESHEET ERSTELLEN UND EINBINDEN . 445 23.2.2 DIE GRUNDLEGENDE FORMATIERUNG DER NAVIGATION FUER SCHMALE VIEWPORTS . 445 23.3 SCHRITT 2: DEN MENUEBUTTON IM QUELLTEXT ERSTELLEN . 447 23.4 SCHRITT 3: DEN MENUEBUTTON PER CSS GESTALTEN . 449 23.4.1 DEN MENUEBUTTON PER CSS GESTALTEN . 449 23.4.2 EINE GRAFIK FUER DEN MENUEBUTTON MIT ::BEFORE HINZUFUEGEN . 450 23.5 SCHRITT 4: DIE NAVIGATIONSLISTE PER CSS AUSBLENDEN . 452 23.6 SCHRITT 5: DIE NAVIGATIONSLISTE PER CSS EINBLENDEN . 453 23.7 SCHRITT 6: MEDIA QUERY UND HORIZONTALE NAVIGATION . 455 23.8 DIE META-NAVIGATION IM FUSSBEREICH GESTALTEN . 456 23.8.1 EIN NEUES STYLESHEET NAVI-META.CSS ERSTELLEN UND EINBINDEN . 457 23.8.2 DIE NAVIGATION IM FUSSBEREICH GESTALTEN . 457 23.9 AUF EINEN BLICK . 458 24 GESTALTEN MIT RASTER: DAS CSS GRID LAYOUT 459 24.1 EIN GRID IST EIN RASTER UND SCHAFFT ORDNUNG . 459 24.2 MEHRSPALTIGES LAYOUT NUR FUER MODERNE BROWSER: SUPPORTS . 460 24.3 LET * S GRID: DREI INFOBOXEN NEBENEINANDER . 461 24.3.1 EIN BLICK AUF DAS HTMLFUER DEN ABSCHNITT MIT DEN INFOBOXEN . 461 24.3.2 SCHRITT 1: EINEN GRID-CONTAINER DEFINIEREN MIT DISPLAY: GRID . 462 24.3.3 SCHRITT 2: EIN RASTER DEFINIEREN MIT GRID-TEMPLATE-COLUMNS UND FR . 463 24.3.4 SCHRITT 3: DEN ZWISCHENRAUM KONTROLLIEREN MIT GRID-GAP . 465 24.4 GRID-ITEMS MIT NUMMERIERTEN LINIEN PLATZIEREN . 467 24.4.1 DAS HTMLFUER DEN ABSCHNITT MIT DEN KUNDENSTIMMEN . 467 24.4.2 EINEN GRID-CONTAINER DEFINIEREN UND DAS RASTER ERSTELLEN . 468 24.4.3 GRID-ITEMS MANUELL AUF DEM RASTER PLATZIEREN MIT GRID-COLUMN . 469 22 INHALT 24.5 PRAKTISCH: EIN GRID MIT BENANNTEN BEREICHEN . 471 24.5.1 DIE HTML-STRUKTUR FUER DEN INHALTSBEREICH DER SEITE NEWS . 472 24.5.2 EINEN GRID-CONTAINER DEFINIEREN UND DAS RASTER ERSTELLEN . 472 24.6 DIE GRID-ZAUBERFORMEL: RESPONSIV OHNE MEDIA QUERY . 474 24.6.1 DIE AUSGANGSPOSITION: HTML UND CSS FUER DIE TEAMVORSTELLUNG . 475 24.6.2 SCHRITT 1: REPEATQ ERZEUGT MIT AUTO-FIT BELIEBIG VIELE SPALTEN . 477 24.6.3 SCHRITT 2: DIE FUNKTION MINMAX() MACHT DAS RESPONSIVE GRID PERFEKT . 478 24.7 AUF EINEN BLICK . 480 25 FLEXIBLE ICONS UND RESPONSIVE BILDER 483 25.1 FLEXIBLE ICONS: SKALIERBARE SYMBOLE MIT SVG. 483 25.1.1 FERTIGE SVG-ICONS HERUNTERLADEN UND EINBINDEN . 484 25.1.2 MOEGLICHKEIT 1: SVG-ICONS ALS DATEI EINBINDEN MIT IMG SRC="ICON.SVG" . 485 25.1.3 EINE SVG-DATEI IM EDITOR OEFFNEN: SVG IST MARKUP. WIE HTML . 487 25.1.4 MOEGLICHKEIT 2: SVG-ICON INLINE DIREKT IM HTML-QUELLTEXT EINBINDEN . 488 25.2 PIXELBILDER UND HOCHAUFLOESENDE BILDSCHIRME . 490 25.2.1 DPR: DAS VERHAELTNIS VON GERAETEPIXELN ZU LOGISCHEN PIXELN . 490 25.2.2 DIE EINFACHE LOESUNG: EINE DOPPELT SO GROSSE GRAFIK EINBINDEN . 491 25.3 UNTERSCHIEDLICHE BILDER JE NACH PIXELDICHTE . 491 25.4 UNTERSCHIEDLICHE BILDER JE NACH VIEWPORTBREITE . 493 25.4.1 TAUSCHE X GEGEN W: IMG , SRCSET W UND SIZES . 493 25.4.2 DAS ATTRIBUT SIZES KANN DIE BREITE DES VIEWPORTS ABFRAGEN . 495 25.5 AUF EINEN BLICK . 497 INDEX . 499 23
any_adam_object	1
any_adam_object_boolean	1
author	Müller, Peter 1960-
author_GND	(DE-588)1013505735
author_facet	Müller, Peter 1960-
author_role	aut
author_sort	Müller, Peter 1960-
author_variant	p m pm
building	Verbundindex
bvnumber	BV046781344
classification_rvk	ST 250 ST 252
ctrlnum	(OCoLC)1164636127 (DE-599)DNB1205211837
discipline	Informatik
discipline_str_mv	Informatik
edition	1. 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">BV046781344</controlfield><controlfield tag="003">DE-604</controlfield><controlfield tag="005">20241121</controlfield><controlfield tag="007">t\|</controlfield><controlfield tag="008">200625s2020 gw a\|\|\| \|\|\|\| 00\|\|\| ger d</controlfield><datafield tag="015" ind1=" " ind2=" "><subfield code="a">20,N09</subfield><subfield code="2">dnb</subfield></datafield><datafield tag="016" ind1="7" ind2=" "><subfield code="a">1205211837</subfield><subfield code="2">DE-101</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">9783836276467</subfield><subfield code="c">kart. : EUR 29.90 (DE), EUR 30.80 (AT), CHF 38.90 (freier Preis)</subfield><subfield code="9">978-3-8362-7646-7</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">3836276461</subfield><subfield code="9">3-8362-7646-1</subfield></datafield><datafield tag="024" ind1="3" ind2=" "><subfield code="a">9783836276467</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(OCoLC)1164636127</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(DE-599)DNB1205211837</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-525</subfield><subfield code="a">DE-1050</subfield><subfield code="a">DE-860</subfield><subfield code="a">DE-92</subfield><subfield code="a">DE-Aug4</subfield><subfield code="a">DE-29T</subfield><subfield code="a">DE-1051</subfield><subfield code="a">DE-859</subfield><subfield code="a">DE-19</subfield><subfield code="a">DE-83</subfield><subfield code="a">DE-573</subfield><subfield code="a">DE-473</subfield><subfield code="a">DE-703</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="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">004</subfield><subfield code="2">sdnb</subfield></datafield><datafield tag="100" ind1="1" ind2=" "><subfield code="a">Müller, Peter</subfield><subfield code="d">1960-</subfield><subfield code="e">Verfasser</subfield><subfield code="0">(DE-588)1013505735</subfield><subfield code="4">aut</subfield></datafield><datafield tag="245" ind1="1" ind2="0"><subfield code="a">Einstieg in HTML und CSS</subfield><subfield code="c">Peter Müller</subfield></datafield><datafield tag="250" ind1=" " ind2=" "><subfield code="a">1. Auflage</subfield></datafield><datafield tag="264" ind1=" " ind2="1"><subfield code="a">Bonn</subfield><subfield code="b">Rheinwerk</subfield><subfield code="c">2020</subfield></datafield><datafield tag="300" ind1=" " ind2=" "><subfield code="a">507 Seiten</subfield><subfield code="b">Illustrationen, Diagramme</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">Auf dem Umschlag: Alle wichtigen HTML-Elemente und CSS-Eigenschaften, Moderne Layouts mit Flexbox und CSS Grid, Responsive Webseiten und mobile Navigation</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="653" ind1=" " ind2=" "><subfield code="a">Programmieren Entwickeln</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">WordPress CMS Jimdo</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Cascading Style Sheets</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">CSS3</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">HTML5</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Web-Entwicklung</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Responsive Web-Design</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Webseiten erstellen</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Buch Bücher Wissen lernen Grundlagen Anfänger Einstieg Kurse Workshops Tutorial Anleitung</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Website erstellen</subfield></datafield><datafield tag="653" ind1=" " ind2=" "><subfield code="a">Die eigene Website</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=" "><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="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=4d4fd4a2bece4df88f653e3d5a319ac0&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=032190514&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Inhaltsverzeichnis</subfield></datafield><datafield tag="943" ind1="1" ind2=" "><subfield code="a">oai:aleph.bib-bvb.de:BVB01-032190514</subfield></datafield></record></collection>
id	DE-604.BV046781344
illustrated	Illustrated
index_date	2024-07-03T14:49:59Z
indexdate	2024-11-21T19:00:18Z
institution	BVB
institution_GND	(DE-588)1081738405
isbn	9783836276467 3836276461
language	German
oai_aleph_id	oai:aleph.bib-bvb.de:BVB01-032190514
oclc_num	1164636127
open_access_boolean
owner	DE-525 DE-1050 DE-860 DE-92 DE-Aug4 DE-29T DE-1051 DE-859 DE-19 DE-BY-UBM DE-83 DE-573 DE-473 DE-BY-UBG DE-703
owner_facet	DE-525 DE-1050 DE-860 DE-92 DE-Aug4 DE-29T DE-1051 DE-859 DE-19 DE-BY-UBM DE-83 DE-573 DE-473 DE-BY-UBG DE-703
physical	507 Seiten Illustrationen, Diagramme
publishDate	2020
publishDateSearch	2020
publishDateSort	2020
publisher	Rheinwerk
record_format	marc
series2	Rheinwerk Computing
spelling	Müller, Peter 1960- Verfasser (DE-588)1013505735 aut Einstieg in HTML und CSS Peter Müller 1. Auflage Bonn Rheinwerk 2020 507 Seiten Illustrationen, Diagramme txt rdacontent n rdamedia nc rdacarrier Rheinwerk Computing Auf dem Umschlag: Alle wichtigen HTML-Elemente und CSS-Eigenschaften, Moderne Layouts mit Flexbox und CSS Grid, Responsive Webseiten und mobile Navigation HTML (DE-588)4373477-7 gnd rswk-swf Cascading Style Sheets (DE-588)4467617-7 gnd rswk-swf Programmieren Entwickeln WordPress CMS Jimdo Cascading Style Sheets CSS3 HTML5 Web-Entwicklung Responsive Web-Design Webseiten erstellen Buch Bücher Wissen lernen Grundlagen Anfänger Einstieg Kurse Workshops Tutorial Anleitung Website erstellen Die eigene Website HTML (DE-588)4373477-7 s Cascading Style Sheets (DE-588)4467617-7 s DE-604 Rheinwerk Verlag (DE-588)1081738405 pbl X:MVB text/html http://deposit.dnb.de/cgi-bin/dokserv?id=4d4fd4a2bece4df88f653e3d5a319ac0&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=032190514&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA Inhaltsverzeichnis
spellingShingle	Müller, Peter 1960- Einstieg in HTML und CSS HTML (DE-588)4373477-7 gnd Cascading Style Sheets (DE-588)4467617-7 gnd
subject_GND	(DE-588)4373477-7 (DE-588)4467617-7
title	Einstieg in HTML und CSS
title_auth	Einstieg in HTML und CSS
title_exact_search	Einstieg in HTML und CSS
title_exact_search_txtP	Einstieg in HTML und CSS
title_full	Einstieg in HTML und CSS Peter Müller
title_fullStr	Einstieg in HTML und CSS Peter Müller
title_full_unstemmed	Einstieg in HTML und CSS Peter Müller
title_short	Einstieg in HTML und CSS
title_sort	einstieg in html und css
topic	HTML (DE-588)4373477-7 gnd Cascading Style Sheets (DE-588)4467617-7 gnd
topic_facet	HTML Cascading Style Sheets
url	http://deposit.dnb.de/cgi-bin/dokserv?id=4d4fd4a2bece4df88f653e3d5a319ac0&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=032190514&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA
work_keys_str_mv	AT mullerpeter einstieginhtmlundcss AT rheinwerkverlag einstieginhtmlundcss

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