lnhaltsverreichnis I. HTML ist keine Programmiersprache Teil I Die Einleitung Teil ll HTML- Kisten erstellen

(1)

lnhaltsverreichnis

Teil I Die Einleitung

I DasWeb ist nicht aus Papier

1.1 Papierdenken, Webseiten und enttäuschte Erwartungen Unterschied I: Der Autor einer Webseite hat keine vollständige Kontrolle

Unterschied 2: Webseiten sehen bei jedem Benutzer anders aus

Die Zeitung: Papierseiten sind starr, Webseiten flexibel

1.2 Jenseits von Papier

Webseiten haben Schichten Mediengerechte Webseiten 1.3 Webseiten gestalten mit Tabellen?

Notwehr: Tabellen und <font>

Zurück zum Papierdenken 1.4 Tabellenfreie Layouts mit CSS

Teil ll HTML

-

Kisten erstellen

2 So funktioniert HTML

2.1 Webseiten bestehen aus rechteckigen Kästchen

2.2 Was ist HT

-

M

-

L eigentlich?

HT wie Hypertext: Hyperlinks erstellen M wie Markup: Etiketten kleben

Lwie Language: Vokabeln und Grammatikregeln XHTML: Die neueste Version von HTML

2.3 Die drei häufigsten Missverständnisse zu HTML

I.

HTML ist keine Programmiersprache

2. HTML ist keine Seitenbeschreibungssprache 3. HTMLdient nicht zum Gestalten von Webseiten

(2)

C!-- HTML-Kommentare

-->

⁴⁰

Auf jeder Webseite vorhanden: Das Grundgerüst 41 Ein Crundgerüst für die Webseite erstellen 41

I.

Die Dokumenttyp-Definition: <!DOCNPE html PUBLIC

... >

43

2. Das Stammelement: <html> 43

3. Der Vorspann: <head> 44

4. Der Inhalt der Webseite: <body> 46

Wissenswertes zu HTML-Elementen 46

Die Namen der HTML-Elemente stammen aus dem

Englischen 46

Alle HTML-Elemente haben einen Anfangs- und ein Ende-Tag 46 HTML-E1emente:Anfangs-Tag, Inhalt und Ende-Tag 47

Das Wichtigste zu Attributen 47

Block- und inline-Elemente verhalten sich unterschiedlich 48

Auf einen Blick 49

Die wichtigsten HTML-Elemente 51

Die Seite in Bereiche einteilen: div 51 Vier Bereiche: Kopf, Navigation, Text und Fusszeile 52

Der Schutzumschlag: wrapper 52

Die Bereiche erstellen m i t div 53

Visuell: Schematische Darstellung der div-Bereiche 54

Überschriften: h~bis h 6 54

Benutzen Sie Überschriften 55

Überschriftebene nicht aufgrund der Schriftgröße wählen 55

Absätze: p wie paragraph 56

Text hervorheben: strong und em 57

HTML-Elemente verschachteln: Zuerst geöffnet, zuletzt geschlossen57

Jeder Browser hat ein eingebautes Sfylesheet 58 Listen: Aufzählungen und Nummerierungen 59 Aufzählungen: Ungeordnete Listen m i t u l und li 59 Nummerierungen: Geordnete Listen m i t o l und li 60

Verschachtelte Listen 61

Schematische Darstellung der verschachtelten Liste 62

Definitionslisten: dJ, dt unddd ⁶²

Hyperlinks: Das Besondere am World Wide Web 63

Anatomie eines Hyperlinks 63

Die Navigation: Eine ungeordnete Liste m i t Hyperlinks 64

(3)

Skip-Links: Hyperlinks auf derselben Seite 66 Ein Skip-Link zum Überspringen der Navigation 66

Ein Hyperlink zurück nach oben 67

Die Wegbeschreibung zur Grafik: img 67

Die Attribute zu img 68

Ein Logo als Überschrift? 69

Weitere nützliche Elemente 70

Beginne eine neue Zeile: tbr I> 70

address für Adressen 71

blockquote und cite für Zitate 71

span i s t ein neutrales Inline-Element 72 Character Entities: Allgemeine Sonderzeichen 73

Tabellen sind nicht verboten 75

Eine einfache Tabelle: table, tr und t d 75 Im Quelltext stehen die Spalten untereinander 76

Kopf, Fuß und Körper einer Tabelle 76

Stimmt die Statik? HTML überprüfen mit dem Validator 78 CSS zum Ausprobieren: Die W3C Core Styles 79 Die Kontaktseite: Von der Seite zur Site. 81 Der Quelltext der Webseiten im Überblick 82 Der Quelltext der Startseite index.html 82 Der Quelltext der Kontaktseite kontakt.html 84

Auf einen Blick 85

Teil III CSS-Grundlagen

-

Kisten gestalten

CSS kennen lernen: Schriften, Farben und Hyperlinks Ein Stylesheet i s t eine Sammlung von Formatvorlagen CSS und die HTML-Kästchen auf der Webseite

Das erste eigene Stylesheet

Stylesheet erstellen und einen CSS-Kommentar schreiben Die Verbindung zwischen HTML und CSS: link

Hintergrund- und Schriftfarben definieren

Hintergrund- und Schriftfarbe für body und Mrapper Hintergrund- und Schriftfarben im Kopfbereich Schriftart und -größe: font-family und font-size Schriftgröße für Überschriften ändern

Style: Der Aufbau einer CSS-Regel Die Adresse gestalten

(4)

Hyperlinks gestalten ¹⁰⁰

Hyperlinks: Das HTML-Element a 100

Besuchte und nicht besuchte Hyperlinks ¹⁰⁰ Wenn die Maus darüber schwebt: a:hover und Kollegen ¹⁰² Die Reihenfolge der Pseudoklassen im Stylesheet ist wichtig 104

Den Skip-Link ausblenden 104

Styles werden an drei verschiedenen Stellen definiert 106

1. CSS-Regeln in einer externen CSS-Datei 106

2. Zwischen <head> und </head>: Das Element style 106 Direkt im HTML-Element: Das Attribut style 107

Vorfahrt: Welche Styles gewinnen? 107

Das Stylesheet im Überblick 108

Auf einen Blick 109

Selektoren, Einheiten und Farben

Ein Selektor wählt das zu gestaltende Kästchen aus Ein einfacher Selektor: Der Name des Kästchens Mehrere Kästchen auf einmal: Selektoren mit Komma trennen

Alle Kästchen auf der Seite: Der Universalselektor * Nur in diesem Bereich: Selektoren verschachteln Nur die Hyperlinks im Textbereich: #textbereich a

Aufzählungszeichen in ungeordneten Listen gestalten: ul li Unterschiedliche Nummerierung bei geordneten Listen Eigene Namen vergeben mit ID und class

Es kann nur einen geben: ID, der Selektor mit der Raute Gruppenbildung: class, der Selektor mit dem Punkt ID oder Klasse

-

Wann nimmt man was?

ID-und Class-Namen sollten die Bedeutung des Elements beschreiben

Spezifität: Das Punktesystem für Selektoren Einer wird gewinnen: So funktioniert Spezifität Ein paar Beispiele für die Punktewertung Sparsam benutzen: limportant

Werte und Maße in CSS: Die Qual der Wahl Grundregeln: Die Leerstelle, die Null und der Anführungsstrich

Für den Bildschirm: Relative Einheiten Für den Drucker: Absolute Einheiten

(5)

Farben definieren: Hexadezimal, Dezimal und Namen 123

Auf einen Blick 125

Abstände gestalten mit dem Box-Modell 127

Potentielle Probleme beim Gestalten der Kästchen 127

Das Box-Modell in der Übersicht 128

Alle Boxen sind gleich: Das Modell 128

Der Inhaltsbereich: width (Breite) und height (Höhe) 129 Der Innenabstand: padding (Polsterung) ⁷³⁰

Der Rahmen: border (Rahmenlinien) 130

Der Außenabstand: margin (Rand) 131

Vertikale Augenabstände kollabieren: collapsing margins 131 Wenig intuitiv: Die Gesamtbreite einer Box berechnen 132

Kalibrierung: Abstände auf Null setzen 133 Die Abstände der eingebauten Browser Stylesheets

annullieren 133

Die Abstände für die wichtigsten Elemente neu definieren 135

Die Breite eines Elements: width 136

Die Seite zentrieren: margin: auto 137

Eine Rahmenlinie erstellen: border 138

Ein bisschen Abstand drum herum: padding 139 Das Box-Modell und die farbliche Gestaltung 142

Hintergrundgrafiken per CSS 143

Hintergrundgrafik einbinden: background-image 143 Hintergrundgrafiken kacheln: background-repeat 144 i-iintergrundgrafik positionieren: background-position 146 Hintergrundgrafik fixieren: background-attachment 146

Das Stylesheet im Überblick 147

Auf einen Blick 149

Ordnung halten imStylesheet Der Kommentar am Anfang

Das Stylesheet in Abschnitte unterteilen Teil 1

-

Kalibrierung und allgemeine Styles Teil 2

-

Styles für die Layoutbereiche Teil 3-Sonstige Styles

Sinnvoller Aufbau der Styles Eine typische CSS-Regel Alles in einer Zeile

Verschachtelte und gruppierte Selektoren

(6)

Die Reihenfolge der Deklarationen im Style Reihenfolge orientiert sich am Box-Modell Alphabetisch sortiert

Kurzschreibweisen padding und margin Alle vier Seiten gleich

Die Reihenfolge entscheidet: Nur eine Seite anders Unterschiedliche Werte für alle vier Seiten

Paarweise: Oben ⁼unten und links = rechts Das aufgeräumte Stylesheet im Überblick Der CSS-Validator

Auf einen Blick

Eine horizontale Navigation erstellen Listenelemente nebeneinander: display: inline Der verschachtelte Selektor #navibereich li

Feineinstellungen: Abstände und Hyperlinks anpassen Punktsieg: Specificity in der Praxis

margin-bottom für ul Die Farbe der Hyperlinks

Feineinstellungen für die Hyperlinks

Tabbed Navigation

-

Navigation mit Registern Vorbereitende Maßnahmen für #navibereich Die Hyperlinks im Navigationsbereich ändern Einen Rollover-Effekt für die Hyperlinks definieren Sie sind hier: Aktuelle Seite hervorheben

Standardkonform, barrierefrei und flexibel Die Styles zur Navigation im Überblick Auf einen Blick

Druckversion und Kontaktformular

Eine Druckversion für die Webseiten erstellen Stylesheet nur für die Anzeige am Bildschirm Ein zweites Stylesheet nur für den Ausdruck Grundlegende Schriftgestaltung

Gestaltung der Überschriften Navigation und Skip-Link ausblenden URL der Hyperlinks sichtbar machen Ein Formular für die Kontaktseite

Schritt I:Das Formular im HTML-Quelkext Schritt z:

Das

Formular per CSS gestalten

(7)

Schritt 3: Den Cursor in das erste Feld setzen Schritt 4: Das Reiseziel für das Formular festlegen

Schritt 5: Dem Formular-Chef die E-Mail-Adresse mitteilen Schritt 6: Testen des fertigen Formulars

9.3 Auf einen Blick

10 Der Browser und das CSS: Kaskade, Vererbung und Standardwertig7

10.1 Der Stammbaum: Die Struktur der Webseite Der Stammbaum für die Startseite

Die Reihenfolge: Kaskade

-

Vererbung

-

Standardwert

10.2 Die Kaskade: Das Cascading in Cascading Style Sheets Stufe ^1:Finde alle Deklarationen zu einem Element Stufe 2: Sortiere nach Ursprung und Wichtigkeit Stufe 3: Sortiere nach Spezifität des Selektors Stufe 4: Sortiere nach Reihenfolge des Auftretens 10.3 Die Vererbung (inheritance)

Vererbung macht ein Stylesheet übersichtlicher Bestimmte Eigenschaften werden nicht vererbt 10.4 Der Standardwert (initial value)

10.5 Auf einen Blick

Teil lV CSS-Layout

-

Kisten verschieben

11 Der Flow und die Positionierung

11.1 Die Seite ist ein langer ruhiger Fluss

11.2 Let it flow: Der normale Fluss der Boxen Drei Boxen im Fluss

Drei verkürzte Boxen im Fluss

Versetzt weiterfließen: position: relative 11.3 Die absolute Positionierung: Raus aus dem Fluss

I.

position: absolute, relativ zum Stammelement

2. position: absolute, relativ zum Kopfbereich Schriftgestaltungfür den Slogan im Kopfbereich Wie ein Fels in der Brandung: position: fixed 11.4 Auf einen Blick

12 Float: Schwebende Boxen

12.1 Text um Bilder fließen lassen Die Grafik einbinden

(8)

iittie hI3%@~

- e P I I . X C g h h -

Die Grafik floaten

Abstand zwischen Grafik und Text definieren Praktisch: CSS-Klassen zum links und rechts floaten clear: Text unterhalb der Grafik beginnen lassen Floats mit mehreren Boxen

Das Beispiel: Drei Boxen ohne float Drei Kästchen nach links floaten Drei Kästchen nach rechts floaten

Float und zu wenig Platz im Browserfenster Float und verschieden hohe Boxen

Kleine Galerie: Gefloatete Elemente umschließen Der HTML Quelltext

Der erste Versuch: Die Bilder floaten LösungI:HTML-Element mit clear Lösung2: Set a float to fix a float

Lösung3: Ohne float und clear: overfiow: hidden Floats umschließen: Die Übersicht

Die Galerie in die Beispielsite einbauen Die Beispielseite galerie.htm1

Das CSS im Überblick

Die Seite im lnternet Explorer 6 Auf einen Blick

Mehrspaltige Layouts mit position: absolute Ein einfaches zweispaltiges Layout

Ein einfaches dreispaltiges Layout Ein dreispaltiges Layout mit Kopfbereich Das Problem: Ein durchgehender Fußbereich Auf einen Blick

Mehrspaltige Layouts mit float

Zweispaltiges Layout mit float und margin Schritt I: Den Navigationsbereich floaten

Schritt 2: Den Textbereich mit einem großen Rand versehen

Schritt 3: Die Listeneiemente in der Navigation gestalten Schritt 4: Die Hyperlinks in der Navigation gestalten Schritt 5: Den aktuellen Navigationspunkt hervorheben Schritt 6: »Falsche Spaltes

-

Hintergrundfarbe für die Navigation

(9)

Schritt 7: Den Fußbereich clearen Exkurs: Die globale Wirkungvon clear Dreispaltiges Layout mit float und margin Das HTMLfür die dritte Spalte

Die Anpassungen im CSS

Zweispaltiges Layout mit entgegengesetzten Floats Eine andere Reihenfolge im HTML

Das CSS anpassen

Dreispaltig mit entgegengesetzten Floats Zwei zusätzliche Bereiche im HTML einfügen Die beiden neuen Spalten im CSS gestalten Auf einen Blick

Layouts für Fortgeschrittene Liquid Layouts (mit Prozentangaben) Elastische Layouts (Angaben in em) Fertige CSS-Layouts

YAML-Yet Another Multicolumn Layout Auf einen Blick

Patchwork: Flicken imCSS Patches und Hacks

Vor dem Einbau von Patches gründlich checken Inline-Patches und zusätzliche Stylesheets Inline-Patches: Sternchen & Co.

@import

-

Styles vor alten Browsern verstecken Der lnternet Explorer

Kurze Geschichte des lnternet Explorer Der Internet Explorer und das »Layout«

Das etwas andere Box-Modell des IE 5.x Conditional Comments: Styles nur für den

IE

Testen, ob Conditional Comments funktionieren Conditional Comments in Aktion

Patches für den IE5.x Patches für IEg und IE6 Patches für den IE7 Auf einen Blick

(10)

Teil V Wichtige Werkzeuge 17 Nützliche Programme 17.1 Browser

17.2 TopStyle -der CSS-Editor TopStyle Lite downloaden Kurzes Tutorial zu TopStyle Lite 17.3 Praktische Add-Ons für den Firefox

Visual Source Chart

-

die Kästchen im Quelltext sichtbar machen

Web Developer

-

Das Schweizer Offiziersmesser Firebug

-

Das Analysetool

ColorZilla

-

Die Farbenwahl 17-4 Hilfreiche Sites zu CSS

77.5 Interessante Bücher Stichwortverzeichnis