A000 Meta A-Zeitplan Zeitplan B-Beispiele-aus-der-Vorlesung Beispiele aus der Veranstaltung C-Nachschlagen All in One Recommendations, Tutorials, Hilfsmittel Skript zur Vorlesung D-Formtester Formtester E-Worum-es-geht Datenbasis Strandkorb (Struktur) Strandkorb (Struktur und Aussehen) Strandkorb (Variante 2) Strandkorb (Variante 3) A010 Basics A-Sprachen-und-Sprachlemente All in One XML-Sprachelemente HTML-Sprachelemente CSS-Sprachelemente Andere Auszeichnungssprachen Programmiersprachen fürs Web B-HTML-Grundgeruest All in One DOCTYPE: Mehrere Doctypes Basic Structure HTML5 Basic Responsive Structure Basic Responsive Structure mit Javascript C-Elemente-und-ihre-Kategorien All in One Block- und Inline-Elemente Physische und logische Auszeichnungen Elemente "mit Bedeutung" Elemente "ohne Bedeutung" HTML5 Content-Modelle D-Attribute All in One Elemente, Attribute Globale Attribute E-Validitaet All in One Einfache HTML-Seite, nicht valide Einfache HTML-Seite Z-Beispiel All in One Aufgabe - Berge Die höchsten Berge der Alpen A020 Basic Pages A-Textstrukturierung All in One Block-Elemente zur Textstrukturierung Inline-Elemente zur Textstrukturierung Bilder einbinden Das figure-Element Verlinkungen B-Seitenstrukturierung All in One Ausgewählte Elemente zur Seitenstrukturierung Vom W3C empfohlene Meta-Elemente Weiterleitung nach 2 Sekunden Weiterleitung nach 2 Sekunden C-Gestaltung All in One Element-Selektoren Klassen-Selektoren ID-Selektoren Kombinatoren Listenselektoren Der !important-Zusatz Überschreiben, Neu-Definition Vererbung Spezifizierung Berechnung des Spezifitätswerts Z-Beispiel All in One Die höchsten Berge der Alpen A030 Visual Formatting 1 A-DOM All in One Document Object Model Manipulation des DOM Methoden und Eigenschaften Events entgegennehmen Testdokument B-Massangaben All in One Absolute Maßangaben Relative Maßangaben Maßangaben: Beispiele Farben Maßangaben für Responsive Webdesgn C-Boxmodelle All in One Illustration der Boxmodelle Boxmodell: content-box Boxmodelle: Vergleich Beispiel: Border-Box und Content-Box Textüberlauf Z-Beispiel All in One Aufgabenstellung - Hafen Hafen, Hamburg A040 Visual Formatting 2 A-Floaten All in One Floaten Floaten und einrücken Floaten, Anwendungen B-Positionieren All in One Static Relative Absolute Fixed Sticky Beispiel: Vier "Ohren" Zielscheibe: Mittige Ausrichtung C-Layer All in One z-index Beispiel, Guckloch D-Flex All in One Flex - Elemente gleichmäßg anordnen Feste und relative Breite Flex - Umbrüche Flex - Reihenfolge E-Grid Einfaches Grid Grid-Bereiche Grid-Bereiche und flex Z-Beispiel All in One Aufgabe - Flexbox Unabhängige Spalten mit flexbox Unabhängige Spalten mit flexbox A050 Embedded Content A-Einbettung-von-Bildern All in One Bildformate Das <figure>-Elemente Spritegrafiken, Bsp 1 Spritegrafiken, Bsp 2 B-Audio-und-Video All in One Audio-Einbindung Video-Einbindung YouTube-Einbindung C-HTML5-API All in One Geolocation Canvas-Elementr Video API D-iFrame All in One iFrame - Das Fenster im Dokument Draußen Z-Beispiel All in One Aufgabe - Embedded Content Embedded Content - Dokument 1 Embedded Content - iFrame A060 User Experience A-Weiterfuehrende-Selektoren All in One Attribut-Selektoren Kind-Selektoren Der n-te Kind-Selektor Geschwister-Selektor Generated Content Unicode-Zeichen in CSS verwenden B-Pseudoklassen-und-Elemente All in One Pseudoklasse :hover Pseudoklasse :target Pseudo-Element ::first-letter Pseudo-Element ::first-line C-Texte All in One Listen Semantische und formale Listen Textblöcke Einrückungen Merkmale von Schriften Ersatzschriftarten Webfonts Font Awesome Spalten durch "float" und "comlumn" Typografische Regeln D-Menues-und Buttons All in One Interne Links, Sprungmarken Smooth Scroll Externe Links, Target und Tooltip Buttons, die Events nutzen Buttons, die Links nutzen Listenmenü, einfach Listenmenü, vertikal Listenmenü, horizontal Mehrere Menüs auf einer Seite Listenmenü: Kacheloptik E-Vorgehensweise All in One Website: Scribble Website: Die besten Erdbeeren der Welt Website: Die besten Erdbeeren der Welt F-Irritationen All in One Irritation durch Unterstreichungen Irritation durch unerwartetes Hovern Gestaltgesetze Eventuelle Irritation durch rot-grün High Contrast Mode Z-Beispiel All in One Mehrere Menüs auf einer Seite A070 Forms A-Minimalformulare Minimalformulare Formular als E-Mail versenden Das Label-Element Minimal-Security (Formulare) B-Erweiterte-Formulare Weitere Formularelemente Registrierungsformular Information in Webstorage-Objekt speichern C-Tabellen Minimale HTML-Tabelle HTML-Tabelle mit CSS Minimale CSS-Tabelle CSS-Tabelle mit weiteren Eigenschaften Z-Beispiel Aufgabe - Formular Musterlösung, Formular A080 Responsive Webdesign A-Webdesign-Philosophien Statisches Webdesign "Elastisches" Webdesign "Flüssiges" Webdesign Adaptives Webdesign Responsive Webdesign B-Media-Attribute Media Query: max-width Media Query: min-width Media Query: min-width und max-width Media Query: orientation Die Media-Attribute "print" und "screen" C-Bilder-und-Container Vordergrundbild skalieren, Einzelbild Hintergrundbild skalieren, Einzelbild Hintergrundbild skalieren, Kachelmuster D-Menues Adaptives Verhalten, Minimaldokument Adaptives Verhalten Menü nach oben Menü nach unten E-Media-Querys Media Querys und Flex Media Querys und Grid F-Bootstrap Bootstrap 101 Template My First Template Bootstrap-Template: Hallo, Welt! Bootstrap: Ausgewählte Klassen Bootstrap-Beispiel: Hallo, Welt! Z-Beispiel Aufgabe - Firma Blau GmbH Firma Blau GmbH A090 CSS Effekte A-Verlauf-und-Schatten Box-Shadow, CSS3 Text-Shadow, CSS3 Verläufe, CSS3 Buttons mit Verläufen B-Transformation Transformation section-Element Verformung mehrerer section-Elemente Transformation einer PNG-Grafik Verformung des BODY-Elements C-Transition Transition eines section-Elements Transition beim Hovern Transition, lineare Bewegung CSS Accordion CSS Menü D-Animation Lineare Animation: Von Keyframe zu Keframe... Animationen: Von Keyframe zu Keframe... Animationen: Räder Z-Beispiel Aufgabe - Maschine Maschine A100 XML Elemente A-XML-Anwendungsbeispiele XML Datenbereitstellung XML basierte Sprachen XML-Sprachelemente B-Daten strukturieren Wohlgeformt und valide Umlaute verwenden Verknüpfungszeichen C-PCDATA und CDATA Unterschiede PCDATA/CDATA D-Schritt-fuer-Schritt Ein XML-Dokument erstellen Z-Beispiel Aufgabe - XML-Dokument erstellen Lösung - XML-Dokument erstellen A110 XML Dokumente A-Attribute definieren Attribute definieren Modifikatoren Elemente oder Attribute? B-Entities Entities C-Namensraum PDF Namensräume D-Valides XML mit XSD DTD und XSD Vergleich XSD und DTD Ein Excel-Dokument analysieren Z-Beispiel Aufgabe - Scribble umsetzen in XML Aufgabe - XSD A120 XML Transformationen A-Transformationen Einfache Transformation Einfache Transformation HTML5 B-Kontrollanweisungen Mehrere Datensätze transformieren Kontrollanweisungen nutzen Z-Beispiel Aufgabe - XSL Lösung - XSL A130 Practice Weitere Aufgaben HTMLCSS Aufgabe - Menü Musterlösung, Aufgabe Menü Arbeitsaufträge - Kirsche Musterlösung - Kirsche 1 Müsterlösung - Kirsche 2, High Contrast Musterlösung - Kirsche 3 Arbeitsauftrag - Zoo Musterlösung - Zoo Weitere Aufgaben XML Arbeitsauftrag - MathML (Firefox) Lösung MathML - Formel Arbeitsauftrag - SVG Lösung SVG - Smiley A140 Klausuren Klausuren_gezippt Checkliste Klausurvorbereitung Klausur richtig abgeben Ausgewählte Abschlussklausuren A150 Specials Aufklappmenu Menu CSS-Anwendungen Realisierung eines Zählers mit CSS Tooltip mit CSS Automatische Anführungszeichen Hamburger "Hamburger" Menü Javascript Formular mit JavaScript-Funktionen JavaScript: Hallo Welt! Einfache Slide-Show mit jQuery und dem Cycle2-Plugin Einfache Slide-Show mit jQuery und dem Cycle2-Plugin HTML-Dokument mit Einklappmenü Impressum Copyright Lizenz Angaben Impressum und Lizenz
