3

Inhaltsverzeichnis

Das erwartet dich im Buch 8

Kapitel 1 Am Anfang war HTML 14HTML – die Basis aller Webseiten 15HTML fürs Grobe, CSS fürs Feine 16Auszeichnung – so geht’s 18Startbereit – Vorbereitungen treffen 19Das erste Dokument erstellen 21Dokument speichern und anschauen 23Ein Bild einfügen 25Link ergänzen 27Die Bausteine von HTML 28Dokument professionalisieren 29HTML und XHTML 30

Kapitel 2 Gut strukturiert ist halb gewonnen 36Bodybuilding 37Absätze und Zeilenumbrüche 38Überschriften 40Ungeordnete Listen 42Geordnete Listen 45Geordnete Listen – Startwert bestimmen 46Listen verschachteln 47Definitionslisten 49Auszeichnungen von einzelnen Wörtern 51Weitere Auszeichnungen für einzelne Wörter 52Formatierungen über HTML 53Zeichensatzangabe – genauer betrachtet 55Die ISO-8859-Familie 56Die anderen ISO-Zeichensätze 57Alternative mit Zukunft: Unicode 58

UTF-8 im EDITOR 59Entities – Zeichenreferenzen 60

Deine Zeichenkodierung vs. Server 63Schachteln, aber richtig 64Validieren – so geht’s 65Fehlern auf der Spur 67Kommentare 70

4

INHALTSVERZEICHNIS

Kapitel 3 Was für die Optik: Formatierungen mit CSS 72

Aufbau von CSS-Regeln 73CSS-Angaben im Dokumentkopf 74Ein Dokument mit CSS formatieren 75CSS-Angaben in einer externen Datei 77Exkurs: Externe Datei über @import einbinden 79Formatierungen über das style-Attribut 80Klassen als Selektoren 81Kommentare definieren 83Farben definieren 84Farben wählen 85Varianten der Farbangabe 88Dezimal in Hexadezimal umrechnen und zurück 89Schriftart festlegen 90Schriftart definieren 91Maßeinheiten in CSS 93Da waren es nur noch drei: em, px und % 94Wie groß sind eigentlich 100 Pixel? 95Webdeveloper Toolbar installieren 96Webseiten messen 97Schriftgröße definieren 98Fett und kursiv 100Kapitälchen und Zeilenhöhe 101font-Kurzschreibweise 102Absatzformatierungen 103Noch mehr Textformatierungen 104Fehler im CSS-Code aufspüren 105Wer setzt sich durch? 109Kryptische ASCII-Art: Der CDATA-Abschnitt 110

Kapitel 4 Per Link durch die Galaxis 112Links zwischen Dateien 113Links auf externe Adressen 116Link im neuen Fenster/Tab öffnen 117Links innerhalb eines Dokuments 118Links auf E-Mail-Adressen 121Mailto-Links und Spam 122Pfadangaben – Verlinken in einen Unterordner 123

In übergeordneten Ordner wechseln 124Hoch und runter ... Pfadangaben für Profis 125

Absolut und relativ 126Links formatieren 127Links formatieren in der Praxis 128Die „Textausschmückungen“ 130Nützliches zu den Linkzuständen 131Verschiedene Links unterschiedlich formatieren 132Firebug installieren 134Firebug benutzen 135

5

INHALTSVERZEICHNIS

Eine einfache Navigationsleiste, Teil 1 139Eindeutige Kennzeichnung – die id's 141Eine einfache Navigationsleiste, Teil 2 142Noch mal: Inline- und Blockelemente 145Navigationsleiste – letzte Korrekturen 146

Kapitel 5 Oasen in der Textwüste – Bilder 150Drei Bildformate zur Auswahl 151Bilder einfügen 154Breite und Höhe von Bildern 155Bilder verlinken 156Rahmen um verlinkte Bilder entfernen 157Bilder vom Text umfließen lassen 158Die Eigenschaft float 161Hintergrundbilder 162Ein Hintergrundbild über CSS einfügen 163Wiederholung des Hintergrundbilds festlegen 164Position des Hintergrundbilds 165Optionen beim Scrollen 166Hintergrund mit Farbverlauf 167Hintergrundeigenschaften in verkürzter Schreibweise 169Klein, aber fein: Favicon 170Interaktive Karte einbinden – Google Maps 172Videos einbinden 176Videos einbinden – die Hintergründe 178Video einfacher einbinden mit HTML 5 179

Kapitel 6 Mehr CSS: Boxmodell und Co 182Eine Box für jedes Element 183Gesamtbreite einer Box 185Quirks und Standard 186Breitenangaben in Prozent 187Mindest- und Maximalbreite 189Der Innenabstand: padding 190Der Rahmen 191Unterschiedliche Rahmenlinien 192Buttons mit 3D-Effekt erstellen 193Rahmeneigenschaften einzeln schreiben 195Außenabstände 196Verkürzte Schreibweise 198Boxmodell im Blick dank Firebug 200Vererbung 201

Kapitel 7 In Position: Elemente per CSS platzieren 204

Alles im Fluss: float genauer betrachtet 205Umfließen stoppen über clear 207Floats umschließen 208

6

INHALTSVERZEICHNIS

Die clearfix-Zauberformel 210Layout über Float erstellen 213Positionieren über position 218Absolute Positionierung und die Fußzeile 222Absolut ist nicht immer absolut 224Relative Positionierung 226Und jetzt alle zusammen: relativ UND absolut 228Transparente Bildbeschriftung mit position 230Position: fixed 235Was tun mit dem Internet Explorer 6? 237

Kapitel 8 Daten in Reih und Glied: Tabellen 240Tabellen – Basics 241Tabellenüberschriften ergänzen 242Zellen verbinden 243Zellen zeilenweise verbinden 246Tabellen über HTML formatieren 247Mit Kopf, Fuß und Körper 248Tabelle per CSS formatieren 249Aktive Tabellenzeile hervorheben 254

Kapitel 9 Input bitte – Formulare definieren und gestalten 258

Allgegenwärtige Formulare 259Umfassend – das Formularelement 260Textfelder definieren 261Absendebutton definieren 262Brauchst du nicht: den Abbrechen-Button 263Brauchst du: label für die Beschriftung 264Checkbox: willste oder willste net 266Checkbox im Voraus angekreuzt 267Radiobuttons: nur eine von mehreren Optionen 268Auswahllisten 269Weitere Optionen bei den Auswahllisten 270Auswahllisten unterteilen 271Mehrzeiliges Textfeld 272Passwortfeld und verstecktes Feld 273Feld zum Dateiupload 274Formulare unterteilen 275Formulare versenden 277Formulare mit dem Formularchef versenden 279Formulare über CSS anordnen – Vorbereitungen 282Beschriftung oberhalb des Formularfelds 284Beschriftung neben dem Formularfeld 286Rechtsbündige Beschriftung neben dem Formularfeld 289Formularfelder gestalten 290Textfelder mit runden Ecken 291Kontrovers: CSS3 schon heute einsetzen 292

7

INHALTSVERZEICHNIS

Kapitel 10 Und alle zusammen: Ein Layout erstellen 294

Ein Beispiellayout 295Eine vertikale Navigation 296Das Layout erstellen 300Formatierung des Kopfbereichs 302Zentrierung und Zweispaltenanordnung 303Abschlussarbeiten 304Die aktuelle Seite hervorheben 305Eigenes Layout für den Ausdruck 307Printlayout für das Beispiellayout erstellen 309Links mit URL für den Ausdruck 312Die weiteren Unterseiten erstellen 314Gleich lange Spalten 315

Kapitel 11 Mehr Navigationsleisten und Profitricks 318

Navigationsleisten voll automatisch 319Tabs 322Schiebetürtechnik – Sliding Doors 323Navigation mit Tabs erstellen 324Der Hovereffekt bei den Tabs 328Hintergrundbild beim Hovern verschieben 329Tabnavigation – Formatierung des Inhaltsbereichs 330CSS-Sprites bei vertikalen Navigationen 331Mehr Tabs 332Reset verbessert 333Internet Explorer gezielt ansprechen 334

Kapitel 12 Beam it up – die Site ins Internet übertragen 338

Metaangaben ergänzen 339Zugriff durch die Suchmaschinen steuern 341

Exkurs: Passwortschutz für Verzeichnisse 342Seiten überprüfen: 1. Validierung 343Seiten überprüfen: 2. Links prüfen 344Seiten überprüfen: 3. Browsertests 345Provider wählen und Domain reservieren 348FTP – Dateien übertragen 350Website publik machen 352

Stichwortverzeichnis 354