book

Workshop HTML5 & CSS3

by Stephan Heller

September 2012

Beginner to intermediate

316 pages

7h 44m

German

dpunkt

Read now

Unlock full access

Danke
So ist dieses Buch aufgebautAktuelle BrowserDeutsche oder englische Fachbegriffe?
Ziel des WorkshopsUmsetzung eines fertigen GrafikdesignsArbeitsweise pro KapitelBarrierefreiheit und Suchmaschinenoptimierung
2.1 Anlegen einer sinnvollen Ordnerstruktur2.2 Das brauchen Sie, um loslegen zu können2.3 Analyse des Layouts2.3.1 Grundstruktur ermitteln2.3.2 Seitentypen ermitteln2.3.3 Abstände und Farben ermitteln
3.1 HTML-Grundgerüst anlegen3.2 HTML-Seitengerüst aufbauen3.3 CSS-Grundlayout aufsetzen3.3.1 CSS-Struktur vorbereiten3.3.2 Seitenbreite

4.1 Grafikdatei verlinken (src)4.2 Alternativtext einfügen (alt)4.3 Breite und Höhe (width und height)4.4 Das richtige Dateiformat4.5 Einbau der Grafiken in das Beispiellayout
5.1 Innen- und Außenabstände5.2 Elemente fließen lassen (float)5.3 float-Verhalten auflösenclear nachfolgenden Elementen hinzufügenStabilste Lösung: clear-divclearfix5.4 Mindesthöhe für den Inhaltsbereich
8.1 Hauptnavigation aufbauennav-Elementul-Elementa-Element8.2 Quernavigationen gestalten8.3 Funktionslinks gestalten
10.1 Bereiche für Teaser10.2 Textteaser aufbauen10.3 Teaser mit Bild
11.1 Einfache Beitragsseite aufbauen11.2 Text-Bild-Bausteine unterschiedlich gestalten11.3 Video/Audio einbindenFür Abwärtskompatibilität sorgen
12.1 Beispielseite aufbauen12.2 Login-Formular für die Startseite12.3 Schlechte CSS-Unterstützung von Formularelementen
14.1 Komplexe Tabellen14.2 Kinoprogramm-Tabelle Schritt für Schritt gestalten
17.1 Verstecke Texte17.2 Skalierbare Einheiten17.3 Drei Layouttypen: fix, elastisch und flüssig17.4 Korrekter Einsatz von label-Elementen17.5 Kontraste17.6 Abkürzungen, Akronyme und Sprachauszeichnung
SEO (Search Engine Optimization)SEM (Search Engine Marketing)
Funktionelle Browser-KompatibilitätOptische Browser-Kompatibilität19.1 Welche Browser sollten unterstützt werden?Was Sie bei Browserstatistiken beachten solltenKonsequenzen für die Entwicklung19.2 HTML5-Browser-Kompatibilität herstellen19.2.1 JavaScript-Lösung19.2.2 HTML5-Strukturelemente mit div-Elementen nachbauen19.3 CSS3-Browser-Kompatibilität herstellen19.3.1 CSS3 PIE19.3.2 Conditional Comments (CC)19.3.3 CSS-Hacks@media-Hack (Internet Explorer 8)Star-HTML-Hack (Internet Explorer 6)Star-Plus-HTML-Hack (Internet Explorer 7)
20.1 Browsereigene Entwicklertools20.1.1 Firefox: Seiten-Inspektor20.1.2 Google Chrome Web Inspector20.1.3 Safari-Menü »Entwickler«20.1.4 Entwicklertools des Internet Explorer20.1.5 Opera Dragonfly20.2 Zusätzliche Entwicklungstools20.2.1 Web Developer-Extension20.2.2 IETester (DebugBar)
21.1 HTML validieren21.2 CSS validieren
24.1 TagStarttag (Anfangstag oder öffnendes Tag)Inhalt (Content)Endtag (schließendes Tag)24.2 HTML-Element24.2.1 Leere HTML-ElementeSchreibweise in XHTML 1.024.2.2 HTML-Elemente mit optionalem EndtagSchreibweise in XHTML 1.024.3 HTML-Attribute24.3.1 Kategorisierung von AttributenAttribute mit feststehenden WertenAttribute mit Werten nach bestimmten RegelnAttribute mit freien WertenAttribute ohne Wertzuweisung / leere AttributeSchreibweise in XHTML 1.024.3.2 Universalattribute24.3.3 Abhängigkeiten zwischen Attributen24.3.4 Attribut-Standardbelegung von HTML-Elementen24.3.5 HTML-Elemente ohne individuelle Attribute24.4 HTML Entities und SonderzeichenHTML-eigene Zeichen (Entities)SonderzeichenGeschütztes Leerzeichen24.5 Relative und absolute Pfade24.6 Grundgerüst einer HTML-Datei24.7 Kommentare in HTML
25.1 Doctype-Deklaration für HTML525.2 HTML 4.01- und XHTML 1.0-Doctype25.3 Quirks-Modus ohne Doctype-Deklaration
26.1 title-Tag26.2 meta-Element26.2.1 charsetcharset-Angabe in den alten Standards26.2.2 name, http-equiv und content26.3 link-Tag26.3.1 Einbinden von externen StylesheetsAbwärtskompatibilität26.3.2 Einbinden des Favoriten-Icons26.3.3 Weitere externe Dateien verlinken26.4 style-ElementAbwärtskompatibilität26.5 script-ElementAbwärtskompatibilität
27.1 HTML-Elemente zur Seitenstrukturierung27.2 HTML-Elemente zur Textstrukturierung27.3 HTML-Elemente zur Auszeichnung von Texten27.4 HTML-Formular-ElementeFormular mit HTML aufbauenAlle FormularelementeNeue Formularelemente in HTML527.5 HTML-Elemente zum Einbetten verschiedener Medien und Inhalte27.6 HTML-Tabellen-Elemente
28.1 Veraltete HTML-Elemente28.2 Noch nicht unterstützte HTML-Elemente28.3 Nicht standardkonformes HTML in Browsern
30.1 Schlüsselwörter (Keywords)30.2 Numerische Datentypen30.2.1 Ganzzahl (integer)30.2.2 Fließkommazahl (number)30.2.3 Prozentangabe (percentage)30.3 Längenangaben (length)30.3.1 Relative Längenangaben (relative lengths)30.3.2 Absolute Längenangaben (absolute lengths)30.4 Farbangaben30.4.1 Farbnamen (color keywords)30.4.2 transparent30.4.3 Hexadezimal-Farbangaben30.4.4 rgb()- und rgba()-Farbangaben30.4.5 hsl()- und hsla()-Farbangaben30.5 Bildangaben über url()30.6 Weitere Einheiten
31.1 Aufbau einer CSS-Regel31.2 Kurzschreibweisen – Shorthand Properties31.2.1 Kurzschreibweisen für verschiedene Eigenschaften31.2.2 Kurzschreibweisen für die vier Ausrichtungen31.2.3 Zusammenspiel von Kurzschreibweisen und einzelnen Eigenschaften31.3 @-Regeln31.4 CSS-Regeln zusammengefasst
33.1 Inline-Styles über das HTML-Attribut style33.2 Styles im head per HTML-Element style33.3 Externe Styles über das link-Tag einbinden33.4 Styles über die @import-Regel einbinden33.5 @media-Regel / Media Queries33.5.1 Media Queries (Eigenschaftsspezifische Stylesheets)33.5.2 Responsive Design
id-Attributclass-Attribut
36.1 Einfachselektoren (simple selectors)36.1.1 Universalselektor (universal selector)36.1.2 Elementselektor (type selector)36.1.3 ID-Selektor (ID selector)36.1.4 Klassenselektor (class selector)36.2 Kombinationsselektoren (combinators)36.2.1 Nachfahrselektor (descendant combinator)36.2.2 Kindselektor (child combinator)36.2.3 Direkter Geschwisterselektor (adjacent sibling combinator)36.2.4 Indirekter Geschwisterselektor (general sibling combinator)36.3 Arbeiten mit SelektorenKombination von CSS-Regeln mit verschiedenen SelektorenGroß- und Kleinschreibung von SelektorenGruppierung von Selektoren36.4 Alle Selektoren im ÜberblickBrowserunterstützung von Selektoren
37.1 Kaskade37.2 Rangfolge und Gewichtung37.2.1 Reihenfolge in den CSS-Dateien37.2.2 Spezifität37.2.3 !important-Regel37.3 Vererbungsprinzip
38.1 Box-Modell38.2 Natürlicher Elementfluss (Dokumentfluss)38.3 Block-Elemente38.4 Inline-Elemente38.5 Inline-Block-Elemente38.6 Block- und Inlineverhalten sind veränderbar!38.7 ZeilenhöheAnordnung von HTML-Elementen in ZeilenAbstände von Inline- und Inline-Block-Elementen in Zeilen

Content preview from Workshop HTML5 & CSS3

35 HTML-Attribute id und class

Abb. 35–1 Der Einsatz von id und class. id ist eindeutig, class eher allgemein.

Beides sind »Adressaten« oder »Ansprechpunkte« in HTML, über welche die Verbindung zwischen HTML und CSS herstellt wird. Der Unterschied der beiden Attribute ist jedoch vehement, da verschiedene Eigenschaften damit verbunden sind.

id-Attribut

Im Amerikanischen wird der Personalausweis im allgemeinen Sprachgebrauch als »ID« (kurz für identity card) bezeichnet. »Show your ID please« bedeutet nichts anders als: »Bitte zeigen Sie mir Ihren Ausweis.« Dies bedeutet, eine ID ist einzigartig und gibt es nur ein einziges Mal. Genauso verhält es ...