E-Book, Deutsch, 551 Seiten
Reihe: Rheinwerk Computing
Müller Einstieg in HTML und CSS
3. Auflage 2024
ISBN: 978-3-367-10235-8
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection
Webseiten programmieren und gestalten
E-Book, Deutsch, 551 Seiten
Reihe: Rheinwerk Computing
ISBN: 978-3-367-10235-8
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection
Autoren/Hrsg.
Weitere Infos & Material
Materialien zum Buch ... 26 Geleitwort ... 27 Vorwort ... 29TEIL I. Webseiten, HTML und CSS ... 33 1. Wissenswertes über Webseiten ... 35 1.1 ... Webseiten sehen nicht überall gleich aus ... 35 1.2 ... Webseiten bestehen aus Quelltext ... 37 1.3 ... Quelltext besteht aus HTML, CSS und JavaScript ... 38 1.4 ... Webseiten werden von einem Browser dargestellt ... 41 1.5 ... Webseiten und Barrierefreiheit ... 43 1.6 ... Editoren zum Schreiben und Bearbeiten von Quelltext ... 44 1.7 ... Websites zum Nachschlagen von HTML und CSS ... 45 1.8 ... Auf einen Blick ... 48 2. HTML kennenlernen: die erste Webseite erstellen ... 49 2.1 ... Webseiten bestehen aus rechteckigen Kästchen ... 50 2.2 ... HT-M-L: die »HyperText Markup Language« ... 51 2.3 ... Die erste Webseite erstellen: »index.html« ... 52 2.4 ... Jede Webseite hat ein HTML-Grundgerüst ... 54 2.5 ... Der und das Stammelement ... 56 2.6 ... HTML-Elemente können im Anfangs-Tag Attribute enthalten ... 57 2.7 ... enthält wichtige Infos über die Webseite ... 58 2.8 ... enthält den im Browser sichtbaren Bereich der Webseite ... 61 2.9 ... Der Kopfbereich mit Überschrift und Slogan ... 63 2.10 ... Entwicklerwerkzeuge: HTML im Browser untersuchen ... 64 2.11 ... Auf einen Blick ... 66 3. CSS kennenlernen: die erste Webseite gestalten ... 67 3.1 ... Jeder Browser hat ein eingebautes Stylesheet ... 67 3.2 ... HTML-Elemente als rechteckige Kästchen visualisieren ... 69 3.3 ... Das erste eigene Stylesheet: »style.css« ... 70 3.4 ... Die erste eigene CSS-Regel: Hintergrund- und Schriftfarbe für ... 72 3.5 ... Den Kopfbereich im CSS selektieren und gestalten ... 74 3.6 ... Wichtige Vokabeln: der Aufbau einer CSS-Regel ... 76 3.7 ... Entwicklerwerkzeuge: CSS im Browser untersuchen ... 77 3.8 ... Auf einen Blick ... 79TEIL II. HTML (mit einer Prise CSS) ... 81 4. HTML-Elemente für Text: Überschriften, Absätze, Hervorhebungen und Listen ... 83 4.1 ... Überschriften strukturieren den Inhalt: bis ... 84 4.2 ... Absätze und Hervorhebungen: , , ... 86 4.3 ... Webseiten in unterschiedlichen Umgebungen testen ... 88 4.4 ... Listen erstellen mit , und ... 89 4.5 ... Listen verschachteln: eine Liste in einer Liste ... 93 4.6 ... Über Blockelemente, Inline-Elemente und »display« ... 95 4.7 ... Auf einen Blick ... 96 5. HTML und Hyperlinks -- das Besondere am Web ... 97 5.1 ... Das Standardverhalten von Hyperlinks ... 97 5.2 ... Anatomie eines Hyperlinks: Linktext ... 98 5.3 ... Hyperlinks in neuem Tab oder Fenster öffnen ... 100 5.4 ... Eine Navigation ist eine Liste mit Links ... 101 5.5 ... Eine grundlegende Gestaltung für die Navigation ... 103 5.6 ... Im Fußbereich einen Link »Nach oben« einfügen ... 109 5.7 ... Links zu Dateien und E-Mail-Adressen ... 112 5.8 ... Auf einen Blick ... 114 6. HTML-Elemente für Bilder, Audio und Video ... 115 6.1 ... Über Grafikformate im Web: JPEG, GIF, PNG, SVG & Co ... 115 6.2 ... Ein Bild als Logo einbinden mit ... 117 6.3 ... Pixelbilder in Zeiten hochauflösender Bildschirme ... 121 6.4 ... Bilder mit flexibler Breite: »max-width: 100%« ... 125 6.5 ... Abbildungen beschriften: und ... 128 6.6 ... »Lazy Loading«: Seiten mit vielen Bildern optimieren ... 130 6.7 ... Audiodateien einbinden mit ... 131 6.8 ... Videodateien einbinden mit ... 133 6.9 ... Auf einen Blick ... 136 7. Semantische HTML-Elemente zur Strukturierung von Webseiten und Inhalten ... 139 7.1 ... Warum semantische Strukturelemente eine sinnvolle Sache sind ... 140 7.2 ... Kopfbereiche auszeichnen mit ... 140 7.3 ... Navigationsbereiche erstellen mit ... 143 7.4 ... Der Hauptinhalt einer Webseite steht in ... 145 7.5 ... Fußbereiche auszeichnen mit ... 146 7.6 ... Inhaltliche Abschnitte erstellen mit ... 147 7.7 ... In sich geschlossene, eigenständige Blöcke mit ... 149 7.8 ... Bereiche mit zusätzlichen Informationen: ... 153 7.9 ... Elemente mit semantisch neutral gruppieren ... 155 7.10 ... Orientierungspunkte für Screenreader: »ARIA Landmark Roles« ... 156 7.11 ... Auf einen Blick ... 160 8. Weitere HTML-Elemente zur Auszeichnung von Text ... 161 8.1 ... Zitate auszeichnen mit und ... 161 8.2 ... Einen Zeilenumbruch erzwingen mit ... 165 8.3 ... Kontaktinformationen auszeichnen mit ... 165 8.4 ... Zeitangaben für Menschen und Maschinen: ... 167 8.5 ... Ausklappbare Inhalte: und ... 169 8.6 ... Änderungen am Text dokumentieren: und ... 172 8.7 ... Kurz vorgestellt: , und ... 174 8.8 ... Weitere Inline-Elemente in der Übersicht ... 175 8.9 ... Know-how: Zeichensätze und Sonderzeichen ... 176 8.10 ... Auf einen Blick ... 179 9. HTML-Elemente zum Erstellen von Formularen ... 181 9.1 ... Im Web basieren alle Interaktionen mit Besuchern auf HTML-Formularen ... 181 9.2 ... Das Element definiert ein Formular ... 182 9.3 ... Einzeilige Eingabefelder mit und ... 183 9.4 ... Mehrzeilige Eingabefelder mit und ... 188 9.5 ... Zum Anklicken: Kontrollkästchen, Optionsfelder und Auswahllisten ... 189 9.6 ... Formularfelder gruppieren mit und ... 193 9.7 ... Ein Button zum Abschicken der Formulardaten ... 194 9.8 ... Ein Kontaktformular mit DSGVO-Checkbox erstellen ... 195 9.9 ... Auf einen Blick ... 20110. HTML-Elemente zum Erstellen von Tabellen ... 203 10.1 ... Eine einfache HTML-Tabelle: 11. Von der Webseite zur Website ... 215TEIL III. CSS -- Grundlagen ... 23712. Gestalten per CSS: Box-Modell, Farben und Einheiten ... 23913. Das Box-Modell in Aktion: »padding«, »border« und »margin« ... 25914. Die wichtigsten Selektoren und ihre Spezifität ... 28315. Text gestalten: Schriften, Listen, Links und mehr ... 30516. Der Browser und das CSS: Vererbung, Standardwert und Kaskade ... 33917. Boxen gestalten: Hintergrund, Schatten und am Bildschirm ausblenden ... 35118. Ordnung halten: Stylesheets aufräumen und organisieren ... 379TEIL IV. CSS -- Layout ... 40719. Der normale Flow, »position« und »float« ... 40920. Media Queries und responsives Webdesign ... 43321. Flexbox: Mehrspaltige Layouts mit »display: flex« ... 44922. CSS-Grid: Mehrspaltige Layouts erstellen mit »display: grid« ... 47523. Flexible Icons und responsive Bilder ... 50524. Eine responsive Navigation erstellen ... 521, und ... 203 10.2 ... Tabellenüberschriften stehen in ... 205 10.3 ... Tabellen strukturieren: , und ... 206 10.4 ... Zellen verbinden mit »colspan« und »rowspan« ... 207 10.5 ... Übung: Tabelle für »Die 10 besten Alben aller Zeiten« ... 208 10.6 ... Auf einen Blick ... 213 11.1 ... »Sie sind hier«: aktuellen Menüpunkt hervorheben ... 215 11.2 ... Rechtliche Pflichtlinks im Footer einfügen ... 219 11.3 ... Das HTML überprüfen mit dem HTML-Validator ... 221 11.4 ... Die Seiten »News«, »Über uns« und »Kontakt« erstellen ... 223 11.5 ... Inhalte für die Seite »News« hinzufügen ... 226 11.6 ... Ein Bild auf der Seite »Über uns« einfügen ... 230 11.7 ... Die Seite »Kontakt« mit Kontaktdaten und Formular ... 232 11.8 ... Die Seiten »Datenschutz« und »Impressum« ... 234 11.9 ... Auf einen Blick ... 235 12.1 ... CSS kann man an drei verschiedenen Stellen schreiben ... 239 12.2 ... Das Box-Modell kennenlernen: »padding«, »border« und »margin« ... 242 12.3 ... Farben in CSS: Farbnamen, hexadezimale Schreibweise und Transparenz ... 248 12.4 ... Die wichtigsten Längeneinheiten: px, em, rem, % & Co ... 253 12.5 ... Auf einen Blick ... 257 13.1 ... Das Box-Modell im Browser visualisieren ... 259 13.2 ... Die Breite begrenzen: »min-width« und »max-width« ... 261 13.3 ... Der Abstand zum Rand: »padding« ... 262 13.4 ... Rahmenlinien gestalten mit »border« und »border-radius« ... 266 13.5 ... Blockboxen horizontal zentrieren mit »margin« ... 270 13.6 ... Abstände zwischen den Elementen mit »margin« ... 272 13.7 ... Tipps zum Gestalten mit »padding« und »margin« ... 273 13.8 ... Know-how: Collapsing Margins -- vertikale Außenabstände kollabieren ... 276 13.9 ... Auf einen Blick ... 280 14.1 ... Einfache Selektoren: Elemente, Gruppierung und * ... 284 14.2 ... Klassen sind klasse: der Selektor mit dem Punkt ... 285 14.3 ... IDs sind einmalig: der Selektor mit der Raute ... 287 14.4 ... Attributselektoren haben eckige Klammern: [attribut] ... 288 14.5 ... DOM: die Hierarchie der HTML-Elemente ... 293 14.6 ... Nachfahren auswählen: der Selektor mit Leerzeichen ... 294 14.7 ... Selektoren zum Auswählen von Kindelementen ... 294 14.8 ... Nachbarn und Geschwister selektieren mit + und ~ ... 298 14.9 ... Kurz vorgestellt: der praktische Elternselektor :has() ... 300 14.10 ... Nützliche Quellen zum Nachschlagen von Selektoren ... 301 14.11 ... Spezifität: Einige Selektoren sind wichtiger als andere ... 302 14.12 ... Auf einen Blick ... 304 15.1 ... Klassische Schriftarten mit und ohne Serifen im Web ... 306 15.2 ... Die Schriftart definieren mit »font-family« ... 307 15.3 ... Die Systemschrift des Geräts: gut lesbar und echt schnell ... 310 15.4 ... Webfonts -- die Schriftart gleich mitliefern ... 311 15.5 ... Schnell und einfach: Google Fonts selbst ausliefern ... 312 15.6 ... Gut lesbarer Text mit »font-size« und »line-height« ... 317 15.7 ... Listen: Aufzählungszeichen gestalten per CSS ... 322 15.8 ... Hyperlinks: Unterstreichung gestalten mit »text-decoration« ... 325 15.9 ... Hyperlinks: Linkzustände gestalten mit Pseudoklassen ... 327 15.10 ... Links in neuem Tab kennzeichnen mit dem Pseudoelement »::after« ... 330 15.11 ... Weitere Eigenschaften zur Gestaltung von Schrift und Text ... 333 15.12 ... Auf einen Blick ... 336 16.1 ... Überblick: Vererbung, Standardwert und Kaskade ... 339 16.2 ... Nichts gefunden? Vererbung oder Standardwert ... 340 16.3 ... Die Kaskade: Wichtigkeit, Spezifität und Reihenfolge ... 343 16.4 ... Auf einen Blick ... 350 17.1 ... Hintergrundgrafiken per CSS einbinden und gestalten ... 352 17.2 ... Lineare Farbverläufe: »background-image« und »linear-gradient()« ... 358 17.3 ... Schattenboxen mit »box-shadow« ... 360 17.4 ... Zitate als Kundenstimmen gestalten ... 362 17.5 ... »Call to Action«: Links in Buttons verwandeln ... 365 17.6 ... Boxen am Bildschirm ausblenden: »visually-hidden« ... 372 17.7 ... »Skip-Link«: per Tastatur direkt zum Inhalt springen ... 375 17.8 ... Auf einen Blick ... 378 18.1 ... Benutzerdefinierte Eigenschaften: Variablen in CSS ... 380 18.2 ... Stylesheets mit Kommentaren strukturieren ... 383 18.3 ... Verschiedene Schreibweisen für CSS-Regeln ... 384 18.4 ... CSS überprüfen mit dem CSS-Validator ... 387 18.5 ... Modulbauweise: Ein zentrales Stylesheet erleichtert die Entwicklung ... 388 18.6 ... Die Modul-Stylesheets erstellen und importieren ... 390 18.7 ... Das CSS auf die Modul-Stylesheets verteilen ... 393 18.8 ... Ein neues Modul für ein modernes Layout ... 398 18.9 ... Auf einen Blick ... 405 19.1 ... Flow: Die Seite ist ein langer ruhiger Fluss ... 410 19.2 ... Versetzt weiterfließen mit »position: relative« ... 411 19.3 ... Raus aus dem Flow mit »position: absolute« ... 412 19.4 ... Wie ein Fels in der Brandung mit »position: fixed« ... 416 19.5 ... Scrollen und stehen bleiben mit »position: sticky« ... 418 19.6 ... Positionierte Boxen und der »z-index« ... 419 19.7 ... Text um eine Abbildung fließen lassen mit »float« ... 421 19.8 ... Floats beenden mit »clear: both« ... 424 19.9 ... Praktisch: Klassen zum Floaten und Clearen ... 425 19.10 ... Floats umschließen mit »display: flow-root« ... 426 19.11 ... Floats nicht rechteckig umfließen mit »shape-outside« ... 429 19.12 ... Auf einen Blick ... 430 20.1 ... Responsives Webdesign: Das Web wird flexibel ... 433 20.2 ... Medientypen definieren das Ausgabemedium ... 434 20.3 ... Media Queries = Medientypen + Medieneigenschaften ... 437 20.4 ... Media Queries brauchen den »Meta-Viewport« ... 441 20.5 ... Media Queries und die Suche nach dem Breakpoint ... 443 20.6 ... Responsive Schriftgröße mit und ohne Media Queries ... 444 20.7 ... Auf einen Blick ... 448 21.1 ... Flexbox und Grid -- jenseits vom »Block Formatting Context« ... 449 21.2 ... Flex-Container erstellen: »display: flex« ... 450 21.3 ... Fließrichtung von Flex-Items kontrollieren: »flex-flow« ... 454 21.4 ... Flex-Items an der Hauptachse ausrichten: »justify-content« ... 458 21.5 ... Flex-Items an der Querachse ausrichten: »align-items« und »align-self« ... 459 21.6 ... Automatische Abstände für Flex-Items mit »margin« ... 462 21.7 ... Flexibilität für Flex-Items: die Zauberformel »flex: 1« ... 464 21.8 ... Flexbox in Aktion: »Sticky Footer« am unteren Rand des Browserfensters ... 466 21.9 ... Die Reihenfolge von Flex-Items ändern ... 470 21.10 ... Auf einen Blick ... 472 22.1 ... Ein »Grid« ist ein Raster und schafft Ordnung ... 475 22.2 ... Mehr Platz für moderne Browser: »@supports« ... 476 22.3 ... Ein Grid-Layout: Boxen neben- und untereinander ... 477 22.4 ... Grid-Items manuell platzieren: 1. nummerierte Linien ... 483 22.5 ... Grid-Items manuell platzieren: 2. benannte Bereiche ... 488 22.6 ... Die Grid-Zauberformel: responsiv ohne Media Query ... 492 22.7 ... Verschachtelte Grids mit »subgrid« ... 498 22.8 ... Flexbox und Grid sind ein gutes Team ... 499 22.9 ... Auf einen Blick ... 502 23.1 ... Flexible Icons: skalierbare Symbole mit SVG ... 505 23.2 ... SVG-Icons mit als Datei einfügen ... 507 23.3 ... SVG-Icons inline direkt im HTML einfügen ... 510 23.4 ... HTML und responsive Bilder ... 511 23.5 ... Unterschiedliche Bilddateien je nach Viewportbreite ... 512 23.6 ... Unterschiedliche Bildmotive und Dateiformate ... 517 23.7 ... Auf einen Blick ... 519 24.1 ... Die responsive Navigation im Überblick ... 521 24.2 ... Schritt 1: Eine vertikale Navigation für schmale Viewports ... 524 24.3 ... Schritt 2: Eine horizontale Navigation für breitere Viewports ... 526 24.4 ... Schritt 3: Menübutton einfügen mit und JavaScript ... 528 24.5 ... Schritt 4: Menübutton per CSS gestalten ... 532 24.6 ... Schritt 5: Navigation per CSS ein- und ausblenden ... 536 24.7 ... Auf einen Blick ... 540 Index ... 541
