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

Workshop HTML5 & CSS3

Book Description

  • origineller, praxisnaher Ansatz: vorgegebenes grafisches Layout wird mit HTML- und CSS-Techniken umgesetzt+ verschiedene Zugangsmöglichkeiten: Workshopteil und systematische Erklärungen+ Website mit CSS3-Referenz und allen Codebeispielen

Table of Contents

  1. Cover
  2. Titel
  3. Impressum
  4. Vorwort
    1. Danke
  5. Inhaltsverzeichnis
  6. Einleitung
    1. So ist dieses Buch aufgebaut
    2. Aktuelle Browser
    3. Deutsche oder englische Fachbegriffe?
  7. Teil I Workshop – Schritt für Schritt zum professionellen HTML-CSS-Design
    1. 1 So geht der Workshop vor
      1. Ziel des Workshops
      2. Umsetzung eines fertigen Grafikdesigns
      3. Arbeitsweise pro Kapitel
      4. Barrierefreiheit und Suchmaschinenoptimierung
    2. 2 Vorbereitungen
      1. 2.1 Anlegen einer sinnvollen Ordnerstruktur
      2. 2.2 Das brauchen Sie, um loslegen zu können
      3. 2.3 Analyse des Layouts
        1. 2.3.1 Grundstruktur ermitteln
        2. 2.3.2 Seitentypen ermitteln
        3. 2.3.3 Abstände und Farben ermitteln
    3. 3 Grundlayout aufbauen
      1. 3.1 HTML-Grundgerüst anlegen
      2. 3.2 HTML-Seitengerüst aufbauen
      3. 3.3 CSS-Grundlayout aufsetzen
        1. 3.3.1 CSS-Struktur vorbereiten
        2. 3.3.2 Seitenbreite
    4. 4 Grafiken einbinden
      1. 4.1 Grafikdatei verlinken (src)
      2. 4.2 Alternativtext einfügen (alt)
      3. 4.3 Breite und Höhe (width und height)
      4. 4.4 Das richtige Dateiformat
      5. 4.5 Einbau der Grafiken in das Beispiellayout
    5. 5 Abstände einfügen und Elemente fließen lassen
      1. 5.1 Innen- und Außenabstände
      2. 5.2 Elemente fließen lassen (float)
      3. 5.3 float-Verhalten auflösen
        1. clear nachfolgenden Elementen hinzufügen
        2. Stabilste Lösung: clear-div
        3. clearfix
      4. 5.4 Mindesthöhe für den Inhaltsbereich
    6. 6 Übergreifende Formate definieren
    7. 7 Seitenkopf und -fuß gestalten über Hintergrundgrafiken
    8. 8 Navigationselemente gestalten
      1. 8.1 Hauptnavigation aufbauen
        1. nav-Element
        2. ul-Element
        3. a-Element
      2. 8.2 Quernavigationen gestalten
      3. 8.3 Funktionslinks gestalten
    9. 9 Seitentypen anlegen
    10. 10 Startseite aufbauen
      1. 10.1 Bereiche für Teaser
      2. 10.2 Textteaser aufbauen
      3. 10.3 Teaser mit Bild
    11. 11 Inhalte aufbauen und gestalten
      1. 11.1 Einfache Beitragsseite aufbauen
      2. 11.2 Text-Bild-Bausteine unterschiedlich gestalten
      3. 11.3 Video/Audio einbinden
        1. Für Abwärtskompatibilität sorgen
    12. 12 Formulare gestalten
      1. 12.1 Beispielseite aufbauen
      2. 12.2 Login-Formular für die Startseite
      3. 12.3 Schlechte CSS-Unterstützung von Formularelementen
    13. 13 Mit Listen im Inhalt arbeiten
    14. 14 Datentabellen gestalten
      1. 14.1 Komplexe Tabellen
      2. 14.2 Kinoprogramm-Tabelle Schritt für Schritt gestalten
    15. 15 Responsive Design: Mobile Endgeräte und Media Queries
    16. 16 Druckausgabe
    17. 17 Barrierefreiheit
      1. 17.1 Verstecke Texte
      2. 17.2 Skalierbare Einheiten
      3. 17.3 Drei Layouttypen: fix, elastisch und flüssig
      4. 17.4 Korrekter Einsatz von label-Elementen
      5. 17.5 Kontraste
      6. 17.6 Abkürzungen, Akronyme und Sprachauszeichnung
    18. 18 Suchmaschinenoptimierung
      1. SEO (Search Engine Optimization)
      2. SEM (Search Engine Marketing)
    19. 19 Cross-Browser-Kompatibilität
      1. Funktionelle Browser-Kompatibilität
      2. Optische Browser-Kompatibilität
      3. 19.1 Welche Browser sollten unterstützt werden?
        1. Was Sie bei Browserstatistiken beachten sollten
        2. Konsequenzen für die Entwicklung
      4. 19.2 HTML5-Browser-Kompatibilität herstellen
        1. 19.2.1 JavaScript-Lösung
        2. 19.2.2 HTML5-Strukturelemente mit div-Elementen nachbauen
      5. 19.3 CSS3-Browser-Kompatibilität herstellen
        1. 19.3.1 CSS3 PIE
        2. 19.3.2 Conditional Comments (CC)
        3. 19.3.3 CSS-Hacks
          1. @media-Hack (Internet Explorer 8)
          2. Star-HTML-Hack (Internet Explorer 6)
          3. Star-Plus-HTML-Hack (Internet Explorer 7)
    20. 20 Entwicklungs- und Debug-Tools
      1. 20.1 Browsereigene Entwicklertools
        1. 20.1.1 Firefox: Seiten-Inspektor
        2. 20.1.2 Google Chrome Web Inspector
        3. 20.1.3 Safari-Menü »Entwickler«
        4. 20.1.4 Entwicklertools des Internet Explorer
        5. 20.1.5 Opera Dragonfly
      2. 20.2 Zusätzliche Entwicklungstools
        1. 20.2.1 Web Developer-Extension
        2. 20.2.2 IETester (DebugBar)
    21. 21 Quelltexte auf Standardkonformität prüfen
      1. 21.1 HTML validieren
      2. 21.2 CSS validieren
  8. Teil II Grundlagen
    1. 22 Was macht HTML und was CSS?
    2. 23 Allgemeines zu HTML und Spezielles zu HTML5
    3. 24 Syntax
      1. 24.1 Tag
        1. Starttag (Anfangstag oder öffnendes Tag)
        2. Inhalt (Content)
        3. Endtag (schließendes Tag)
      2. 24.2 HTML-Element
        1. 24.2.1 Leere HTML-Elemente
          1. Schreibweise in XHTML 1.0
        2. 24.2.2 HTML-Elemente mit optionalem Endtag
          1. Schreibweise in XHTML 1.0
      3. 24.3 HTML-Attribute
        1. 24.3.1 Kategorisierung von Attributen
          1. Attribute mit feststehenden Werten
          2. Attribute mit Werten nach bestimmten Regeln
          3. Attribute mit freien Werten
          4. Attribute ohne Wertzuweisung / leere Attribute
          5. Schreibweise in XHTML 1.0
        2. 24.3.2 Universalattribute
        3. 24.3.3 Abhängigkeiten zwischen Attributen
        4. 24.3.4 Attribut-Standardbelegung von HTML-Elementen
        5. 24.3.5 HTML-Elemente ohne individuelle Attribute
      4. 24.4 HTML Entities und Sonderzeichen
        1. HTML-eigene Zeichen (Entities)
        2. Sonderzeichen
        3. Geschütztes Leerzeichen
      5. 24.5 Relative und absolute Pfade
      6. 24.6 Grundgerüst einer HTML-Datei
      7. 24.7 Kommentare in HTML
    4. 25 Doctype-Deklaration
      1. 25.1 Doctype-Deklaration für HTML5
      2. 25.2 HTML 4.01- und XHTML 1.0-Doctype
      3. 25.3 Quirks-Modus ohne Doctype-Deklaration
    5. 26 head: Kopf einer HTML-Datei
      1. 26.1 title-Tag
      2. 26.2 meta-Element
        1. 26.2.1 charset
          1. charset-Angabe in den alten Standards
        2. 26.2.2 name, http-equiv und content
      3. 26.3 link-Tag
        1. 26.3.1 Einbinden von externen Stylesheets
          1. Abwärtskompatibilität
        2. 26.3.2 Einbinden des Favoriten-Icons
        3. 26.3.3 Weitere externe Dateien verlinken
      4. 26.4 style-Element
        1. Abwärtskompatibilität
      5. 26.5 script-Element
        1. Abwärtskompatibilität
    6. 27 HTML-Tags für den body
      1. 27.1 HTML-Elemente zur Seitenstrukturierung
      2. 27.2 HTML-Elemente zur Textstrukturierung
      3. 27.3 HTML-Elemente zur Auszeichnung von Texten
      4. 27.4 HTML-Formular-Elemente
        1. Formular mit HTML aufbauen
        2. Alle Formularelemente
        3. Neue Formularelemente in HTML5
      5. 27.5 HTML-Elemente zum Einbetten verschiedener Medien und Inhalte
      6. 27.6 HTML-Tabellen-Elemente
    7. 28 HTML-Elemente, die man nicht einsetzen sollte
      1. 28.1 Veraltete HTML-Elemente
      2. 28.2 Noch nicht unterstützte HTML-Elemente
      3. 28.3 Nicht standardkonformes HTML in Browsern
    8. 29 Allgemeines zu CSS und Spezielles zu CSS3
    9. 30 Schlüsselwörter, Werte und Maßeinheiten
      1. 30.1 Schlüsselwörter (Keywords)
      2. 30.2 Numerische Datentypen
        1. 30.2.1 Ganzzahl (integer)
        2. 30.2.2 Fließkommazahl (number)
        3. 30.2.3 Prozentangabe (percentage)
      3. 30.3 Längenangaben (length)
        1. 30.3.1 Relative Längenangaben (relative lengths)
        2. 30.3.2 Absolute Längenangaben (absolute lengths)
      4. 30.4 Farbangaben
        1. 30.4.1 Farbnamen (color keywords)
        2. 30.4.2 transparent
        3. 30.4.3 Hexadezimal-Farbangaben
        4. 30.4.4 rgb()- und rgba()-Farbangaben
        5. 30.4.5 hsl()- und hsla()-Farbangaben
      5. 30.5 Bildangaben über url()
      6. 30.6 Weitere Einheiten
    10. 31 CSS-Regel
      1. 31.1 Aufbau einer CSS-Regel
      2. 31.2 Kurzschreibweisen – Shorthand Properties
        1. 31.2.1 Kurzschreibweisen für verschiedene Eigenschaften
        2. 31.2.2 Kurzschreibweisen für die vier Ausrichtungen
        3. 31.2.3 Zusammenspiel von Kurzschreibweisen und einzelnen Eigenschaften
      3. 31.3 @-Regeln
      4. 31.4 CSS-Regeln zusammengefasst
    11. 32 Kommentare in CSS
    12. 33 CSS in HTML einbinden
      1. 33.1 Inline-Styles über das HTML-Attribut style
      2. 33.2 Styles im head per HTML-Element style
      3. 33.3 Externe Styles über das link-Tag einbinden
      4. 33.4 Styles über die @import-Regel einbinden
      5. 33.5 @media-Regel / Media Queries
        1. 33.5.1 Media Queries (Eigenschaftsspezifische Stylesheets)
        2. 33.5.2 Responsive Design
    13. 34 Elternelement, Kindelement, Geschwisterelement
    14. 35 HTML-Attribute id und class
      1. id-Attribut
      2. class-Attribut
    15. 36 Selektoren
      1. 36.1 Einfachselektoren (simple selectors)
        1. 36.1.1 Universalselektor (universal selector)
        2. 36.1.2 Elementselektor (type selector)
        3. 36.1.3 ID-Selektor (ID selector)
        4. 36.1.4 Klassenselektor (class selector)
      2. 36.2 Kombinationsselektoren (combinators)
        1. 36.2.1 Nachfahrselektor (descendant combinator)
        2. 36.2.2 Kindselektor (child combinator)
        3. 36.2.3 Direkter Geschwisterselektor (adjacent sibling combinator)
        4. 36.2.4 Indirekter Geschwisterselektor (general sibling combinator)
      3. 36.3 Arbeiten mit Selektoren
      4. Kombination von CSS-Regeln mit verschiedenen Selektoren
      5. Groß- und Kleinschreibung von Selektoren
      6. Gruppierung von Selektoren
      7. 36.4 Alle Selektoren im Überblick
      8. Browserunterstützung von Selektoren
    16. 37 Ergänzungs- und Vererbungsprinzip
      1. 37.1 Kaskade
      2. 37.2 Rangfolge und Gewichtung
        1. 37.2.1 Reihenfolge in den CSS-Dateien
        2. 37.2.2 Spezifität
        3. 37.2.3 !important-Regel
      3. 37.3 Vererbungsprinzip
    17. 38 Grundprinzipien der Darstellung: Box-Modell und Elementfluss
      1. 38.1 Box-Modell
      2. 38.2 Natürlicher Elementfluss (Dokumentfluss)
      3. 38.3 Block-Elemente
      4. 38.4 Inline-Elemente
      5. 38.5 Inline-Block-Elemente
      6. 38.6 Block- und Inlineverhalten sind veränderbar!
      7. 38.7 Zeilenhöhe
        1. Anordnung von HTML-Elementen in Zeilen
        2. Abstände von Inline- und Inline-Block-Elementen in Zeilen
    18. 39 @font-face-Regel
    19. 40 Browserkennungen / Vendor-Präfixe
  9. Index