Einstieg in HTML und CSS
Webseiten erstellen mit HTML und CSS – ganz ohne Vorwissen
Seiten
2022
|
2., akt. u. erw. Auflage
Rheinwerk (Verlag)
978-3-8362-9089-0 (ISBN)
Rheinwerk (Verlag)
978-3-8362-9089-0 (ISBN)
- Grundlagen, Konzepte, Gestaltung
- Responsive Webseiten und Bilder
- Moderne Layouts mit Flexbox und CSS Grid
Webseiten erstellen mit HTML und CSS
Sie suchen eine gute Einführung in die Gestaltung von Webseiten mit HTML und CSS? Dann liegen Sie mit diesem Buch genau richtig! Unser Autor Peter Müller erklärt Ihnen hervorragend, was Sie bei der modernen Webgestaltung wissen müssen: von den grundlegenden Prinzipien bis hin zu den neuesten Entwicklungen. Immer kompetent, klar und verständlich. Anschauliche Beispiele aus der Praxis können Sie leicht auf eigene Projekte anwenden – inkl. einer guten Prise Humor.
Erstellen Sie Webseiten mit HTML
Sie erhalten schnell solide HTML-Kenntnisse und lernen u. a. semantische Elemente wie 'header', 'nav', 'main' und 'footer' kennen. Mit diesem Wissen erstellen Sie eine komplette Übungswebsite.
Gestalten Sie Webseiten mit CSS
Gestalten Sie Ihre Webseiten mit modernem CSS: flexible Einheiten, Farben, Webfonts, Schatten, Rundungen und Farbverläufe. Dabei lernen Sie quasi nebenbei wichtige Konzepte wie Kaskade, Vererbung und Box-Modell kennen.
Machen Sie Ihre Webseiten responsiv
Erstellen Sie ein einspaltiges Basislayout, das sich bei genügend Platz automatisch zu einer mehrspaltigen Variante erweitert. Mobile First! Inkl. mobiler Navigation und Gestalten per Flexbox und Grid.
Aus dem Inhalt:
Schnellstart HTML und CSS
Schriften, Farben, Hyperlinks
Selektoren und Einheiten
Stylesheets ordnen
Kontaktformular und Tabellen
Box-Modell
Spezifität, Kaskade und Vererbung
Positionierung
Media Queries und Mehrspaltigkeit
Mobile Version
Layouts mit Flexbox und CSS Grid
Peter Müller arbeitet seit vielen Jahren als IT-Dozent und versteht es, komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen. Er ist als Autor des CSS-Bestsellers "Little Boxes" bekannt, dessen neueste Auflage unter dem Titel "Einstieg in CSS" erschienen ist.
Materialien zum Buch ... 26
Geleitwort ... 27
Vorwort ... 29
1. Wissenswertes über Webseiten ... 33
1.1 ... Webseiten sehen bei jedem Benutzer anders aus ... 33
1.2 ... Webseiten bestehen aus Quelltext ... 34
1.3 ... Quelltext besteht aus HTML, CSS und JavaScript ... 36
1.4 ... Webseiten werden von einem Browser dargestellt ... 39
1.5 ... Editoren zum Schreiben und Bearbeiten von Quelltext ... 41
1.6 ... Referenzen und Nachschlagewerke zu HTML und CSS ... 42
1.7 ... Auf einen Blick ... 44
2. HTML kennenlernen: Die erste Webseite erstellen ... 45
2.1 ... Webseiten bestehen aus rechteckigen Kästchen ... 45
2.2 ... HT-M-L: die »HyperText Markup Language« ... 46
2.3 ... Jede Webseite hat ein HTML-Grundgerüst ... 48
2.4 ... Der "!doctype" und das Stammelement "html" ... 51
2.5 ... HTML-Elemente können im Anfangs-Tag Attribute enthalten ... 52
2.6 ... "head" enthält wichtige Infos über die Webseite ... 53
2.7 ... "body" enthält den sichtbaren Bereich der Webseite ... 57
2.8 ... Der Kopfbereich "header" mit Überschrift und Slogan ... 59
2.9 ... Entwicklerwerkzeuge im Browser: HTML untersuchen ... 60
2.10 ... Auf einen Blick ... 63
3. CSS kennenlernen: Die erste Webseite gestalten ... 65
3.1 ... Jeder Browser hat ein fest eingebautes Stylesheet ... 65
3.2 ... Das HTML für
3.3 ... Das erste eigene Stylesheet: »style.css« ... 68
3.4 ... Die erste eigene CSS-Regel: Hintergrund- und Schriftfarbe für "body" ... 70
3.5 ... Den Kopfbereich "header" selektieren und gestalten ... 72
3.6 ... Entwicklerwerkzeuge: CSS im Browser untersuchen ... 74
3.7 ... Auf einen Blick ... 76
4. HTML-Elemente für Text: Überschriften, Absätze, Hervorhebungen und Listen ... 77
4.1 ... Überschriften strukturieren den Inhalt: "h1" bis "h6" ... 78
4.2 ... Absätze und Hervorhebungen: "p", "strong", "em" ... 80
4.3 ... Webseiten von Anfang an in unterschiedlichen Viewports testen ... 82
4.4 ... Listen erstellen mit "ul", "ol" und "li" ... 84
4.5 ... Listen verschachteln: Eine Liste in einer Liste ... 87
4.6 ... Über Blockelemente, Inline-Elemente und die Eigenschaft »display« ... 89
4.7 ... Auf einen Blick ... 90
5. Hyperlinks -- das Besondere am Web ... 91
5.1 ... Das Standardverhalten von Hyperlinks ... 91
5.2 ... Anatomie eines Hyperlinks: Linktext ... 92
5.3 ... Hyperlinks und sinnvolle Linktexte: das »Klicken-Sie-hier«-Syndrom ... 94
5.4 ... Hyperlinks in neuem Tab oder Fenster öffnen ... 95
5.5 ... Eine Navigation ist eine Liste mit Links ... 96
5.6 ... Eine grundlegende Gestaltung für die Navigation ... 97
5.7 ... Im Fußbereich einen Link »Nach oben« einfügen ... 102
5.8 ... Besondere Links: Dateien, E-Mail und Telefon ... 106
5.9 ... Auf einen Blick ... 108
6. HTML-Elemente für Bilder, Audio und Video ... 109
6.1 ... Über Grafikformate im Web: JPEG, GIF, PNG, SVG & Co ... 109
6.2 ... Ein Bild als Logo einbinden mit "img" ... 111
6.3 ... Pixelbilder und hochauflösende Bildschirme ... 114
6.4 ... Bilder mit flexibler Breite: »max-width: 100%« ... 119
6.5 ... Abbildungen beschriften: "figure" und "figcaption" ... 122
6.6 ... »Lazy Loading«: Seiten mit vielen Bildern optimieren ... 124
6.7 ... Let there be sound: Audiodateien einbinden mit "audio" ... 125
6.8 ... Bewegte Bilder einbinden mit "video" ... 127
6.9 ... Auf einen Blick ... 131
7. HTML-Elemente zur Strukturierung von Webseiten und Inhalten ... 133
7.1 ... Die semantischen Strukturelemente auf einen Blick ... 134
7.2 ... Kopfbereiche auszeichnen mit "header" ... 134
7.3 ... Navigationsbereiche erstellen mit "nav" ... 137
7.4 ... Der Hauptinhalt einer Webseite steht in "main" ... 140
7.5 ... Fußbereiche auszeichnen mit "footer" ... 141
7.6 ... Inhaltliche Abschnitte erstellen mit "section" ... 142
7.7 ... In sich geschlossene, eigenständige Blöcke mit "article" ... 144
7.8 ... Bereiche mit zusätzlichen Informationen: "aside" ... 148
7.9 ... Elemente mit "div" semantisch neutral gruppieren ... 150
7.10 ... Auf einen Blick ... 152
8. Weitere HTML-Elemente zur Auszeichnung von Text ... 153
8.1 ... Zitate auszeichnen mit "blockquote" und "cite" ... 153
8.2 ... Einen Zeilenumbruch erzwingen mit "br" ... 157
8.3 ... Kontaktinformationen auszeichnen mit "address" ... 157
8.4 ... Zeitangaben für Menschen und Maschinen: "time" ... 159
8.5 ... Ausklappbare Inhalte: "details" und "summary" ... 161
8.6 ... Änderungen am Text dokumentieren: "del" und "ins" ... 164
8.7 ... Kurz vorgestellt: "span", "hr" und "small" ... 166
8.8 ... Weitere Inline-Elemente in der Übersicht ... 167
8.9 ... Know-how: Zeichensätze und Sonderzeichen ... 169
8.10 ... Auf einen Blick ... 172
9. HTML-Elemente zum Erstellen von Formularen ... 173
9.1 ... Interaktion mit Besuchern basiert auf HTML-Formularen ... 174
9.2 ... Das Element "form" definiert ein Formular ... 174
9.3 ... Einzeilige Eingabefelder erstellen und beschriften: "input" und "label" ... 176
9.4 ... Mehrzeilige Eingabefelder erstellen und beschriften: "textarea" und "label" ... 180
9.5 ... Zum Anklicken: eckige Kontrollkästchen, runde Optionsfelder und ausklappbare Auswahllisten ... 181
9.6 ... Formularfelder gruppieren mit "fieldset" und die Gruppe beschriften mit "legend" ... 185
9.7 ... Ein Button zum Abschicken der Formulardaten ... 186
9.8 ... Ein DSGVO-kompatibles Kontaktformular erstellen ... 187
9.9 ... Auf einen Blick ... 193
10. HTML-Elemente zum Erstellen von Tabellen ... 195
10.1 ... Eine einfache HTML-Tabelle: "table", "tr" und "td" ... 195
10.2 ... Tabellenüberschriften stehen in "th" ... 197
10.3 ... Tabellen strukturieren: "thead", "tbody" und "tfoot" ... 198
10.4 ... Zellen verbinden mit »colspan« und »rowspan« ... 199
10.5 ... HTML-Tabellen erstellen und gestalten -- ein Beispiel ... 200
10.6 ... Auf einen Blick ... 204
11. Von der Webseite zur Website ... 205
11.1 ... Fine-Tuning für die Startseite ... 205
11.2 ... Das HTML überprüfen mit dem HTML-Validator ... 210
11.3 ... Die Seiten »News«, »Über uns« und »Kontakt« erstellen ... 212
11.4 ... Inhalte für die Seite »News« hinzufügen ... 216
11.5 ... Ein Bild auf der Seite »Über uns« einfügen ... 220
11.6 ... Kontaktdaten und Formular für die Seite »Kontakt« ... 222
11.7 ... Die Seiten »Impressum« und »Datenschutz« ... 225
11.8 ... Auf einen Blick ... 226
12. CSS kennenlernen: Syntax, Box-Modell, Farbwerte und Einheiten ... 227
12.1 ... Überblick: Webseiten gestalten per CSS ... 227
12.2 ... Wichtige Vokabeln: Der Aufbau einer CSS-Regel ... 228
12.3 ... Es gibt drei verschiedene Möglichkeiten, CSS zu speichern ... 229
12.4 ... Das Box-Modell kennenlernen: »padding«, »border« und »margin« ... 231
12.5 ... Farbnamen in CSS: Einfach, aber nicht sehr flexibel ... 236
12.6 ... Weit verbreitet: Hexadezimale Farbangaben mit #rrggbb ... 238
12.7 ... Die Alternative: Farben mit rgb() -- auch mit Transparenz ... 240
12.8 ... Nützliche Werkzeuge und Websites zur Arbeit mit Farben ... 242
12.9 ... Wichtige Einheiten: px, em, rem, % & Co ... 245
12.10 ... Auf einen Blick ... 248
13. Die wichtigsten Selektoren und Spezifität ... 249
13.1 ... Einfache Selektoren: Elemente, Gruppierung und »*« ... 250
13.2 ... Klassen sind klasse: Der Selektor mit dem Punkt ... 251
13.3 ... IDs sind einmalig: Der Selektor mit der Raute ... 253
13.4 ... Überblick: Die HTML-Elemente im DOM-Baum ... 254
13.5 ... Nachfahren auswählen: Der Selektor mit dem Leerzeichen ... 256
13.6 ... Selektoren zum Auswählen von Kindelementen ... 256
13.7 ... Nachbar- und Geschwisterselektoren mit + und ~ ... 260
13.8 ... Attributselektoren haben eckige Klammern: [attribut] ... 261
13.9 ... Quellen zum Nachschlagen von weiteren Selektoren ... 265
13.10 ... Spezifität: Einige Selektoren sind wichtiger als andere ... 266
13.11 ... Auf einen Blick ... 268
14. Der Browser und das CSS: Kaskade, Vererbung oder Standardwert ... 269
14.1 ... Die Kaskade: Wichtigkeit, Spezifität und Reihenfolge ... 269
14.2 ... Intuitiv: Die Reihenfolge im CSS entscheidet ... 271
14.3 ... Ungewohnt: Spezifität ist wichtiger als Reihenfolge ... 272
14.4 ... Ausnahme: »!important« gewinnt immer ... 274
14.5 ... Nichts gefunden? Vererbung oder Standardwert ... 275
14.6 ... Die Kaskade im Browser analysieren ... 277
14.7 ... Übersicht: Kaskade, Vererbung oder Standardwert ... 278
14.8 ... Auf einen Blick ... 280
15. Schrift und Text gestalten per CSS ... 281
15.1 ... Klassische Schriftarten mit und ohne Serifen im Web ... 281
15.2 ... Die Schriftart definieren mit »font-family« ... 283
15.3 ... Die Systemschrift des Geräts: Gut lesbar und echt schnell ... 285
15.4 ... Webfonts -- die Schriftart gleich mitliefern ... 287
15.5 ... Schnell und einfach: Google Fonts direkt von Google ... 288
15.6 ... Auf der sicheren Seite: Google Fonts selbst ausliefern ... 291
15.7 ... Gut lesbarer Text: »font-size« und »line-height« ... 295
15.8 ... Listen: Aufzählungszeichen gestalten per CSS ... 299
15.9 ... Hyperlinks: Unterstreichung gestalten mit »text-decoration« ... 303
15.10 ... Hyperlinks: Linkzustände gestalten mit Pseudoklassen ... 305
15.11 ... Externe Hyperlinks kennzeichnen mit »::after« ... 309
15.12 ... Weitere Eigenschaften zur Gestaltung von Schrift und Text ... 312
15.13 ... Auf einen Blick ... 315
16. Abstände gestalten mit dem Box-Modell ... 317
16.1 ... Das klassische Box-Modell für Blockboxen ... 317
16.2 ... Die Breite begrenzen: »min-width« und »max-width« ... 318
16.3 ... Der Abstand zum Rand: »padding« ... 320
16.4 ... Rahmenlinien gestalten mit »border« und »border-radius« ... 323
16.5 ... Blockboxen horizontal zentrieren mit »margin: auto« ... 327
16.6 ... Abstände zwischen den Elementen mit »margin« ... 328
16.7 ... »Collapsing Margins«: Vertikale Außenabstände kollabieren ... 329
16.8 ... Das intuitivere Box-Modell: »box-sizing: border-box« ... 335
16.9 ... Das Box-Modell für Inline-Boxen ... 337
16.10 ... Inline-Block: Blockboxen, aber nebeneinander ... 338
16.11 ... Auf einen Blick ... 339
17. Boxen gestalten per CSS ... 341
17.1 ... Hintergrundgrafiken per CSS einbinden und gestalten ... 341
17.2 ... Lineare Farbverläufe: »background-image« und »linear-gradient()« ... 348
17.3 ... Schattenboxen mit »box-shadow« ... 350
17.4 ... Gestalten mit dem Box-Modell: Zitate als Kundenstimmen ... 352
17.5 ... »Call to Action«: Hyperlinks in Buttons verwandeln ... 355
17.6 ... Boxen am Bildschirm ausblenden: »visually-hidden« ... 360
17.7 ... Auf einen Blick ... 363
18. Ordnung halten: Stylesheets organisieren ... 365
18.1 ... Stylesheets strukturieren mit Kommentaren ... 366
18.2 ... Verschiedene Schreibweisen für CSS-Regeln ... 367
18.3 ... CSS überprüfen mit dem CSS-Validator ... 371
18.4 ... Modulbauweise: Ein zentrales Stylesheet erleichtert die Entwicklung ... 372
18.5 ... Die Stylesheets für die einzelnen Module erstellen ... 374
18.6 ... Das Modul »basis.css« ist das Fundament ... 376
18.7 ... Das Modul »layout.css« für Seitenlayout und Layoutbereiche ... 379
18.8 ... Das Modul »navi-inline.css« für die Navigation ... 381
18.9 ... Das Modul »content.css« zur Gestaltung der Inhalte ... 382
18.10 ... Das Modul »forms.css« für Kontaktdaten und Formulare ... 383
18.11 ... Ein neues Modul für ein modernes Layout ... 384
18.12 ... Auf einen Blick ... 391
19. Media Queries und responsives Webdesign ... 393
19.1 ... »Responsives Webdesign«: Das Web wird flexibel ... 393
19.2 ... Medientypen definieren das Ausgabemedium ... 394
19.3 ... Media Queries = Medientypen + Medieneigenschaften ... 397
19.4 ... Media Queries brauchen den »Meta-Viewport« ... 401
19.5 ... Media Queries und die Suche nach dem Breakpoint ... 403
19.6 ... Auf einen Blick ... 404
20. Der Flow und die Eigenschaft »position« ... 405
20.1 ... Blockboxen, der Flow und »position: static« ... 405
20.2 ... Versetzt weiterfließen mit »position: relative« ... 407
20.3 ... Raus aus dem Flow mit »position: absolute« ... 408
20.4 ... Der Trick: »absolute« und »relative« kombinieren ... 409
20.5 ... Wie ein Fels in der Brandung -- »position: fixed« ... 412
20.6 ... Scrollen und dann stehen bleiben: »position: sticky« ... 413
20.7 ... Positionierte Boxen und der »z-index« ... 414
20.8 ... Auf einen Blick ... 417
21. Schweben und schweben lassen: »float« ... 419
21.1 ... Text um eine Abbildung fließen lassen mit »float« ... 419
21.2 ... Floats beenden mit »clear: both« ... 423
21.3 ... Floats umschließen mit »display: flow-root« ... 424
21.4 ... Praktisch: Klassen zum Floaten und Clearen ... 425
21.5 ... Das Umschließen von Floats mit »@supports« ... 427
21.6 ... Auf einen Blick ... 428
22. Flexbox: Mehrspaltige Layouts mit »display: flex« ... 429
22.1 ... Flexbox und Grid -- das moderne CSS-Layout ... 429
22.2 ... Flex-Container erstellen mit »display: flex« ... 431
22.3 ... Die Fließrichtung von Flex-Items kontrollieren mit »flex-flow« ... 434
22.4 ... Flex-Items an der Hauptachse ausrichten mit »justify-content« ... 438
22.5 ... Flex-Items an der Querachse ausrichten mit »align-items« und »align-self« ... 439
22.6 ... Automatische Abstände für Flex-Items mit »margin« ... 442
22.7 ... Flexibilität für Flex-Items: Die Zauberformel »flex: 1« ... 444
22.8 ... Flexbox in Aktion: Den Footer am unteren Rand des Browserfensters platzieren ... 447
22.9 ... Die Reihenfolge von Flex-Items ändern ... 450
22.10 ... Auf einen Blick ... 451
23. Eine responsive Navigation erstellen ... 453
23.1 ... Die responsive Navigation im Überblick ... 453
23.2 ... Schritt 1: Prüfen, ob JavaScript im Browser aktiv ist ... 457
23.3 ... Schritt 2: Die mobile Navigation gestalten ... 459
23.4 ... Schritt 3: Den Menübutton im HTML einfügen ... 461
23.5 ... Schritt 4: Den Menübutton per CSS gestalten ... 464
23.6 ... Schritt 5: Die Navigation per CSS ausblenden ... 468
23.7 ... Schritt 6: Die Navigation mit dem Menübutton einblenden ... 470
23.8 ... Schritt 7: Eine horizontale Navigation für breitere Viewports ... 471
23.9 ... Die Navigation im Fußbereich gestalten ... 473
23.10 ... Auf einen Blick ... 474
24. CSS-Grid: Mehrspaltige Layouts erstellen mit »display: grid« ... 477
24.1 ... Ein »Grid« ist ein Raster und schafft Ordnung ... 477
24.2 ... Mehrspaltiges Layout nur für moderne Browser: »@supports« ... 478
24.3 ... Das erste Grid-Layout: Drei Boxen nebeneinander ... 479
24.4 ... Flexbox und Grid sind ein gutes Team ... 485
24.5 ... Grid-Items manuell platzieren mit nummerierten Grid-Linien ... 488
24.6 ... Grid-Items manuell platzieren mit benannten Grid-Bereichen ... 493
24.7 ... Die Grid-Zauberformel: Responsiv ohne Media Query ... 497
24.8 ... Die wichtigsten Grid-Eigenschaften in der Übersicht ... 502
24.9 ... Auf einen Blick ... 504
25. Flexible Icons und responsive Bilder ... 505
25.1 ... Flexible Icons: Skalierbare Symbole mit SVG ... 505
25.2 ... SVG-Icons mit
25.3 ... SVG-Icons kann man im Editor bearbeiten ... 509
25.4 ... SVG-Icons inline direkt im HTML einfügen ... 510
25.5 ... Unterschiedliche Bilder je nach Pixeldichte des Bildschirms ... 512
25.6 ... Unterschiedliche Bilder je nach Viewportbreite ... 513
25.7 ... Auf einen Blick ... 518
Index ... 519
»Wer seine Webseiten selber erstellen und aufmotzen möchte, findet hier ein ideales Begleitbuch.« Mac Life 202212
Die Fachpresse zur Vorauflage:
Mac Life: »Wer eigene Webseiten responsiv gestalten möchte, sollte sich dieses pfiffige Lehrbuch für Theorie und Praxis unbedingt ansehen.«
Publisher: »Auf 507 Seiten bietet Peter Müller [...] einen tollen Einstieg in HTML und CSS. «
gweep.at: »Der Einstieg in die Welt von HTML und CSS ist mit diesem Buch unübertroffen. Eine sehr gute Ausgangsbasis mit garantierten Erfolg zur eigenen Webseite.«
| Erscheinungsdatum | 24.06.2022 |
|---|---|
| Verlagsort | Bonn |
| Sprache | deutsch |
| Maße | 172 x 230 mm |
| Einbandart | kartoniert |
| Themenwelt | Informatik ► Web / Internet ► HTML / CSS |
| Schlagworte | Buch Bücher Wissen • Cascading Style Sheets • CSS • CSS3 • Die eigene Website • HTML • HTML5 • Programmieren Entwickeln • Web-Entwicklung • Webseiten erstellen • Webseiten Websites • WordPress CMS Jimdo |
| ISBN-10 | 3-8362-9089-8 / 3836290898 |
| ISBN-13 | 978-3-8362-9089-0 / 9783836290890 |
| Zustand | Neuware |
| Haben Sie eine Frage zum Produkt? |
Mehr entdecken
aus dem Bereich
aus dem Bereich
Buch | Hardcover (2012)
Westermann Schulbuchverlag
CHF 44,90
Buch | Softcover (2018)
Gruner + Jahr (Verlag)
CHF 23,95
