O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Das Beste an HTML & CSS

Das Beste an HTML & CSS

by Ben Henick
Publisher: O'Reilly Verlag
Release Date: July 2010
ISBN: 9783868993042
View table of contents
Start reading

Book Description

HTML und CSS bilden seit mehr als zehn Jahren das Herzstück des Webdesigns, aber trotz oder gerade wegen ihres stolzen Alters beinhalten diese Techno-logien auch einige überholungsbedürftige Features. Autor Ben Henick nimmt in diesem Buch die beiden grundlegenden Webtechnologien unter die Lupe und stellt einen nützlichen Katalog an Webdesign-Best Practices zusammen.

Das Beste an HTML & CSS richtet sich an Webdesigner und –autoren, die mit den Grundlagen von CSS und HTML vertraut sind und die auf der Suche nach konkreten Tipps sind, mit denen sie ihren Arbeitsstil und ihren Code verbessern können. Anhand klassischer Themen des Webdesigns wird Ihnen vermittelt, wie Sie beispielsweise Farben und Schriften, Bilder und Formulare so einsetzen, dass möglichst wenig Reibungsverluste im Hinblick auf verschiedene Browser und Ausgabegeräte entstehen.

Table of Contents

  1. Das Beste an HTML & CSS
  2. Einleitung
    1. Über dieses Buch
      1. Was ist das Beste an HTML und CSS
      2. Was Sie vor dem Lesen dieses Buches wissen sollten
      3. Der ideale Leser
      4. Eine Warnung zum Thema (mangelnde) Kenntnis
    2. Ziele dieses Buches
      1. Was Sie nicht in diesem Buch finden
      2. Über Webstandards
      3. Über Photoshop
      4. Was Sie auf der Website zu diesem Buch finden
      5. Nomenklatur
      6. »Read the Source, Luke!«
    3. Typografische Konventionen
    4. Die Verwendung der Codebeispiele
    5. Danksagungen
  3. 1. Hypertext von innen
    1. Das Web ohne Links
    2. URIs
      1. Mit Links umgehen
      2. Den Anwenderkomfort durch Links verbessern
      3. Herausforderungen bei der Implementierung von Hypertext
  4. 2. Mit HTML-Markup arbeiten
    1. HTML-Syntax
      1. Tags, Elemente und Attribute
      2. Seitenstruktur
    2. Darstellungsmodi, Varianten von HTML und Dokumenttyp-Deklarationen
      1. HTML oder XHTML?
      2. Strict, Transitional oder Frameset?
      3. Die Geschichte der zwei Boxmodelle
      4. Der richtige Dokumenttyp für Ihr Projekt
    3. Die schönen Seiten: universelle Attribute
      1. Stylesheet-Anweisungen per »class« und »id« einbinden
      2. Inhalt beschreiben mit »title« und »lang«
      3. Das Attribut »contenteditable« in HTML 5
    4. Die Trennung von Inhalt, Strukur, Präsentation und Verhalten
      1. Die Trennung in der Praxis
      2. Mit Dokumentenbäumen arbeiten
    5. Browser, Parsing und Rendering
      1. Dynamisches HTML, Ajax und Rendering
  5. 3. CSS-Überblick
    1. Stylesheets und HTML-Dokumente verbinden
      1. Ein Stylesheet per »link«-Element einbinden
      2. Conditional Comments zum Ansprechen verschiedener Versionen des Internet Explorers
      3. »link« durch »style« ersetzen
      4. Die Verwendung von »@import«
      5. Finger weg vom »style«-Attribut!
      6. Regeln für bestimmte Medientypen
    2. Selektoren für Elemente, die mit Stilen versehen werden sollen
      1. Eltern, Kinder und Geschwister: Beziehungen zwischen Elementen
      2. Einfache Selektoren
      3. Gruppierte Selektoren und Selektoren für Nachfahrenelemente
      4. Kindelemente direkt auswählen
    3. Regelkonflikte, Priorität und Präzedenz
      1. Priorität der Selektoren
      2. Regelkonflikte vermeiden
      3. Vererbte Werte
    4. Untersuchung von CSS-Eigenschaften und -Werten
    5. CSS-Maßeinheiten
      1. Medienübergreifende Längen- und Maßeinheiten
      2. Pixelwerte und Punktdichte
      3. Druckfreundliche Längeneinheiten
      4. Schriftgrößen
      5. Farbwerte
    6. Die wichtigsten CSS-Eigenschaften für das Layout
  6. 4. Eine gesunde Beziehung zu den Webstandards entwickeln
    1. Viele Standards fürs Web
    2. Wozu Webstandards?
      1. Interoperabilität
      2. Die Kräfte des Marktes
      3. Vorwärtskompatibilität
      4. Zugänglichkeit
      5. Prioritäten der Hersteller
      6. Altlasten als Bremse
      7. Best Practices (und ihr Fehlen)
      8. Strikte Gesetzesauslegung
    3. Der Mittelweg: Standardfreundlichkeit
      1. Vorteile der Standardfreundlichkeit
      2. Die Regeln für standardfreundliche Entwicklung
  7. 5. Effektive Stylesheets und Dokumentenstrukturen
    1. Die vier wichtigsten Angewohnheiten für effektive Stylesheets
      1. Angewohnheit 1: In der Kürze liegt die Würze
        1. Schlichtheit bei sehr großen Sites
      2. Angewohnheit 2: Flexibilität
        1. Flexibilität, eigene Bibliotheken und die Wiederverwendung von Code
      3. Angewohnheit 3: Konsistenz
        1. Konsistenz durch Template-Verwaltung
      4. Angewohnheit 4: Auf Kurs bleiben
        1. Produktdokumentation als »Kompass«
    2. CSS-Zen und die Erfahrung des Gestalters
      1. Die Funktionsprinzipien des CSS-Zen
    3. Informationsarchitektur und Usability des Webs
      1. Mehrdimensionalität
      2. Navigation: Ortsbestimmung und Orientierungshilfen
      3. Besucherstrategien
      4. Richtlinien für die Erstellung benutzbarer Schnittstellen
        1. Links auf das aktuelle Element deaktivieren
      5. Szenarios und Benutzertests zur Vorhersage von Besucherverhalten
      6. Taxonomie und Nomenklatur
      7. Taxonomie auf die Kaskade anwenden
      8. Neue Strukturelemente (HTML 5)
  8. 6. Lösungen für das CSS-Layout-Puzzle
    1. Das CSS-Boxmodell und die Größe von Elementen
    2. Quirks Mode und Strict Mode
    3. auto-Werte
      1. Die Eigenschaft »overflow«
      2. Länge und Breite für Elemente anstelle expliziter Werte nur begrenzen
      3. Mit Unwägbarkeiten umgehen
    4. Rahmen, Innen- und Außenabstände
      1. Negative Außenabstände
      2. Zusammengefasste Außenabstände
      3. Rahmen
      4. Innenabstände
      5. Das Box-Verhalten der Wurzelelemente des Dokuments
      6. Längenangaben für Box-Eigenschaften und Prozentwerte
    5. Darstellungsrollen
      1. Inline-Elemente
      2. Block-Elemente
      3. Inline-Block-Elemente
    6. Das Flussverhalten eines Elements mit »display« ändern
      1. Die Eigenschaft »display«
    7. Die Eigenschaften »float« und »clear«
      1. Das Verhalten von Floats
      2. Das »float«-Verhalten mit der Eigenschaft »clear« steuern
      3. »float«-Kontext
    8. Mehrspaltige Layouts implementieren
      1. Ein zweispaltiges Tabellen-Layout nach CSS portieren
      2. Die Regeln für das zweispaltige Layout
      3. Vorteile der Beschränkung von Layout-Anweisungen auf Stylesheets
      4. Zwei Spalten auf drei Spalten erweitern
      5. Mehr als drei Spalten
      6. Semantisch leere Container für mehrspaltige Layouts
      7. Fortgeschrittenes Layout mit CSS 3
    9. CSS-Eigenschaften für die Positionierung
      1. Wie die Positionierung funktioniert
      2. Positionierte Elemente begrenzen
    10. Die Eigenschaften »visibility« und »z-index«
      1. Ändern der Sichtbarkeit ohne Auswirkungen auf den Dokumentenfluss
      2. Stapelung
    11. Quellcode-Reihenfolge und präzises Layout für die Navigation
      1. Die Liste ausrichten
      2. Navigationslisten genau platzieren
    12. Layouttypen und Hilfslinien-Raster
      1. Feste, proportionale und flexible Layouts
      2. Hilfslinien definieren
      3. Die Drittelregel, der Goldene Schnitt und die Fibonacci-Folge
      4. Implementierung eines flexiblen Layoutrasters
  9. 7. Listen
    1. Geordnete und ungeordnete Listen
      1. Browser-Standarddarstellung für geordnete und ungeordnete Listen
      2. Gültige geordnete und ungeordnete Listen erstellen
      3. Die Eigenschaft »list-style-type« und das Attribut »type«
      4. Das »nav«-Element (HTML 5)
        1. Überlegungen zu Zugänglichkeit und Usability
        2. Browsern ermöglichen, die Navigation auf andere Weise anzuzeigen
      5. Die Zählweise in geordneten Listen anpassen
        1. Längere Welllenlängen
        2. Kürzere Wellenlängen
    2. Andere Verwendungen für Listen
      1. Gliederungen
      2. Aufzählungen
      3. Das Layout für Links im Fußteil anpassen
      4. Aufzählungszeichen als Hintergrundbild?
    3. Stile für Navigationselemente
      1. Platzierung der primären Navigation in der Quellcode-Reihenfolge
      2. Rezept für die primäre Navigation
      3. Rezept für die Navigation im Fußteil
    4. Definitionslisten
      1. Stile für Definitionslisten
      2. Wörterbuch-Beispiel
      3. Beispiel für einen Dialog
  10. Überschriften, Hyperlinks, Inline-Elemente und Zitate
    1. Überschriften und gutes Schreiben
      1. Gedruckte Überschriften
      2. Optimale Platzierung für Überschriften
    2. Stile für Überschriften
      1. Größe und Schriftart
      2. Die Größen von Überschriften anpassen
      3. Überschriften hervorheben
    3. Markup für Links
      1. Link-Attribute
      2. Virtuose Verwendung des »href«-Attributs
      3. Links auf bestimmte Teile eines Dokuments
      4. Effektiver Inhalt für Links und Werte für das »title«-Attribut
    4. Stildefinitionen für Links
      1. Pseudoklassen für Links
      2. Mit »display: block« den anklickbaren Bereich von Links vergrößern
      3. Die Eigenschaft »text-decoration«
      4. Die Eigenschaft »cursor«
    5. Semantische Bedeutung durch Inline-Elemente
    6. Zitate
  11. 9. Farben und Hintergründe
    1. Farbenlehre und Webfarben
      1. Usability, Zugänglichkeit und Farbe
      2. Das additive Farbmodell
      3. Das HSB-Farbmodell
      4. Das subtraktive Farbmodell
      5. Design, Kontrast und Komplementärfarben
      6. Farben identifizieren, Kurzfassung
      7. Monitore und die »websichere« Farbpalette
      8. Eigene Farbpaletten erstellen
    2. CSS-Hintergründe
      1. Die richtigen Werte für »background-position«
      2. Die CSS-Kurzschrift-Eigenschaft »background«
    3. Hintergrundbilder erstellen
      1. »Faux Columns«
      2. Gekachelte Hintergrundtexturen und -muster
      3. Größere Hintergrundtexturen und nicht wiederholte Embleme
      4. Schattenwürfe, Gel-Effekte und abgerundete Ecken
    4. Grafische Schriften und das Fahrner Image Replacement
      1. Die FIR-Stylesheet-Regeln
      2. Nachteile der FIR-Methode
    5. Die Serverlast mit Sprites verringern
  12. 10. (Daten-)Tabellen
    1. Nachteile von Layout-Tabellen
      1. Quellcode-Reihenfolge: Die Quadratur des Kreises
      2. Vom CSS-Zen bleibt nur ein Mythos
      3. Die unvermeidliche Abhängigkeit von Templates
      4. Positionierung ist bei Tabellen-Layouts wertlos
    2. Bestandteile einer Datentabelle
      1. Beispiel: Die volle Packung Tabellen-Markup
    3. Tabellenzellen anlegen
      1. Tabellen- und Datenanordnung
    4. Tabellenkopf- und -fußteil und ihre Zellen
      1. Attribute und Kindselektoren
      2. Den Kontrast für Kopf- und Fußteil reduzieren
      3. Rollover-Effekte für Tabellen
  13. 11. Bilder und Multimedia
    1. Ersetzte Elemente
    2. Bilder vorbereiten
      1. Das »alt«-Attribut
      2. Bildgrößen und Rahmen
    3. Bilder erstellen
      1. Beschneiden
      2. »Matting«: Ein virtuelles Passepartourt
      3. Skalieren: Die absolute Bildgröße ändern
      4. Tonwert und Kontrast anpassen
      5. Mehrere Anpassungen auf einmal
    4. Mit Farbprofilen arbeiten
    5. Bildoptimierung
      1. Das richtige Dateiformat wählen
      2. Die goldene Mitte zwischen Dateigröße und Bildqualität
    6. Bilder veröffentlichen
      1. Bilder richtig ordnen
      2. Bilder mit einem CMS verwalten und veröffentlichen
      3. Etikette beim Veröffentlichen von Bildern
    7. Stile für Bilder und Plugin-Inhalte
      1. Bildlayout innerhalb einer Spalte
      2. Bildbeschriftungen
      3. Vorschaubilder für Galerien und Diaschauen (Slideshows)
      4. Lightbox: Vorschaubilder, Galerien und Diaschauen
      5. SlideShowPro
    8. Integration von Videos und Präsentationen im Flash-Format mit SWFObject
    9. Multimediadaten integrieren
      1. Die Geschichte dreier Firmen
      2. Flash als möglicher Ausweg
      3. Multimedia-Inhalte mit reinem Markup einbinden
      4. Probleme mit Stilen für Plugin-Inhalte
      5. Plugin-Probleme mit dem HTTP-Header »Content-Disposition« umgehen
      6. Eine offene Haltung bewahren
      7. Die Elemente »video« und »audio« (HTML 5)
        1. Videos einbetten
        2. Unterstützung für alternative Videoformate
        3. Rückwärtskompatibilität mit Browsern, die das »video«-Element nicht unterstützen
      8. Das »canvas«-Element (HTML 5)
        1. Die »CanvasRenderingContext2D«-API
        2. SVG als Alternative zu »canvas«
  14. 12. Web-Typografie
    1. Eine kurze Geschichte der Schrift
      1. Die Herkunft moderner westlicher Buchstabenformen
      2. Gutenbergs Druckerpresse und die Kunst der Typografie
      3. Das Aufkommen des Digitalsatzes
      4. Verschiedene Beschränkungen, aber keine veränderten Erwartungen
    2. Ein kurzes Glossar der Typografie
    3. Schriftenglättung: Aliasing und Anti-Aliasing
    4. Schriftstile, Lesbarkeit und Erkennbarkeit
      1. Stildefinitionen zum Erhöhen der Lesbarkeit
      2. Stildefinitionen zum Erhöhen der Erkennbarkeit
      3. Der »Knick« und kleine Schriften
    5. Schriftgrößen angeben
      1. Die richtigen Längeneinheiten für Schriftgrößen
      2. Berechnung der Werte für em-Einheiten und Prozentangaben
      3. Schlüsselwörter für Schriftgrößen
    6. Arbeit mit Schriften und Schriftschnitten
      1. Das Problem der geringen Auswahl
      2. Eigene Schriften definieren: Die Eigenschaft »font-family«
      3. Die richtigen Schriftnamen finden
      4. Mit der Eigenschaft »font« auf Systemschriften zugreifen
    7. Überblick über die Zeichenkodierung
      1. Was ist Zeichenkodierung?
      2. ASCII, ISO 8859-1, Unicode und UTF-8
      3. Das richtige Kodierungsschema wählen
      4. Zeichen-Entities zur Definition von Nicht-ASCII-Zeichen
    8. Ausgewogene Schriftgestaltung
      1. Vorhersagbarkeit und Panik
      2. Die Grenzen von Inhalten ermitteln
      3. Schrift unterscheiden: Schriftschnitt, Größe, Gewicht, Stil und Farbe
      4. Das »Überlaufen« von Text verhindern
      5. Stile für Textpassagen mit gleicher Priorität
      6. Schriftübersichten
    9. Verschiedene typografische Aspekte von CSS
      1. Die Eigenschaft »line-height«
      2. Die Eigenschaften »font-variant« und »text-transform«
      3. Die Eigenschaften »letter-spacing« und »word-spacing«
      4. Die Eigenschaft »white-space«
    10. Gute Webtypografie in der Praxis
  15. 13. Saubere und zugängliche Formulare
    1. Effektive Formulare erstellen
      1. Webapplikationen, Benutzerperspektive und Design-Entscheidungen
      2. Benutzerschnittstellen nach Funktion ordnen
      3. Zehn Regeln für effektive Webformulare und -applikationen
    2. Einschätzung und Struktur
      1. Anforderungen ermitteln
      2. Markup und Struktur
    3. Grundsätzliche Struktur, Darstellung und Verhalten von Formularen
      1. Vom Formular ausgelöste GET-Requests
      2. Die POST-Methode und das Hochladen von Dateien
      3. Die Größe und das Aussehen einzelner Formularelemente anpassen
    4. Prototyping und Layout
      1. Das Einmaleins des Prototyping
      2. Design-Templates, Grundstile und Formular-Layout
      3. Einheitliche Gestaltung von gleichen Formularelementen
    5. Erforderliche Formularfelder und Eingabeformate
      1. Erforderliche Felder hervorheben
      2. Eingabefehler aufspüren und identifizieren
      3. Die Attribute »disabled« und »readonly«
    6. Zugängliche Formulare erstellen
      1. Zugängliche Formulare implementieren
      2. Formulare über die Tastatur steuern
    7. Neue Merkmale in HTML 5
      1. Neue Eingabeelemente
      2. Das Attribut »required«
  16. 14. Die schlechten Seiten
    1. Die schlechten Manieren des Internet Explorers (speziell IE 6)
      1. Browserkrieg 2.0
      2. Fehlende oder schlechte Unterstützung für Selektoren
      3. »hasLayout«
      4. Verdoppelte Außenabstände: Der »Double Margin Bug«
      5. »expression()«-Werte
      6. ActiveX-Filter, Transparenz und Farbverläufe
      7. PNG-Unterstützung (oder ihr Fehlen)
      8. Schlecht unterstützte CSS-Eigenschaften
      9. Probleme mit XHTML und XML
    2. Ein hässliches System
      1. Zerbrechliche Templates und Inhalte von Drittanbietern
      2. Markup-Validierung als Voraussetzung für korrekte Stylesheet-Implementierung
      3. »Optimiert für …«
      4. Abgestufte Unterstützung
      5. »embed« oder »object«
      6. Formularelemente, Plugins und der Stapelkontext
      7. Obskure Gründe für ungültiges Markup
    3. Sackgassen und die bösen Nachbarn von HTML
      1. Frames
      2. Das Element »strike«
      3. Das Attribut »name«
      4. Die Elemente »noscript« und »noframes«
      5. Semantische Verrenkungen und der begrenzte Wortschatz von HTML
      6. Präsentationselemente und wie Sie sie vermeiden
      7. Vertikalen Leerraum verändern: »hr« und »br«
      8. Das Element »pre« und die Eigenschaft »white-space«
    4. CSS-Travestien
      1. @-Direktiven
      2. Berechnete Werte und Rundungsunterschiede
      3. Herstellerspezifische Präfixe: »-moz« und »-webkit«
      4. Der Wert »inherit«
      5. Dinge verstecken: »z-index« und »clip«
      6. Zähler
      7. Regeln für den Fluss der Elemente
      8. Unicode-Werte und die Eigenschaft »content«
    5. Die furchtbaren Seiten
      1. Die Elemente »marquee« und »blink«
      2. Eigenschaften der Benutzeroberfläche (IE)
      3. Das Attribut »align«
      4. Das Attribut »style«
      5. Div-itis
      6. Attribute für Event-Handler
      7. Überflüssige Unterstreichungen
      8. Das Attribut »http-equiv«
    6. Das Puzzle wieder zusammensetzen
  17. A. URIs, Client-Server-Architektur und HTTP
    1. Die zugrunde liegende Client-Server-Architektur
    2. Was jeder Webentwickler über HTTP wissen sollte
    3. MIME-Typen in aller Kürze
    4. Die Anzahl der Requests kontrollieren
  18. Glossar
  19. Stichwortverzeichnis
    1. Über den Autor
    2. Über den Übersetzer
  21. Kolophon