Read more

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.
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

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.«

List of contents

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 und das Stammelement ... 51

2.5 ... HTML-Elemente können im Anfangs-Tag Attribute enthalten ... 52

2.6 ... enthält wichtige Infos über die Webseite ... 53

2.7 ... enthält den sichtbaren Bereich der Webseite ... 57

2.8 ... Der Kopfbereich

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 als schematische Darstellung ... 67

3.3 ... Das erste eigene Stylesheet: »style.css« ... 68

3.4 ... Die erste eigene CSS-Regel: Hintergrund- und Schriftfarbe für ... 70

3.5 ... Den Kopfbereich

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:

bis

... 78

4.2 ... Absätze und Hervorhebungen: , , ... 80

4.3 ... Webseiten von Anfang an in unterschiedlichen Viewports testen ... 82

4.4 ... Listen erstellen mit

,
und
1. ... 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 ... 111
   
   6.3 ... Pixelbilder und hochauflösende Bildschirme ... 114
   
   6.4 ... Bilder mit flexibler Breite: »max-width: 100%« ... 119
   
   6.5 ... Abbildungen beschriften:

   und