HTML und CSS
1.1 - HTML GrundgerüstHTML
- Was ist ein Tag?
- Das HTML-Grundgerüst
- HTML-Files speichern
- Lernhandout
Hilfreiche Links CSS | HTML
2.1 - Basis Tags HTML
- Zeichenformatierung
- Absatzformatierung
- Div. Tags (p, h1 - h6, br, hr, i, uw.)
- Listen
- Aufzählungen
- Lernhandout
2.2 - Basis a href, imgHTML
- Hyperlinks
- Link-Attribute
- Bilder einfügen
- Bild-Attribute
- Bildformate mit Eigenschaften
- Lernhandout
2.3 - Best PracticeHTML
Ü 2.1 - Basis Tags HTML
Ü 2.2 - Basis a href, img HTML
- Übung A: Ein Inhaltsverzeichnis
- Übung B: Top-Ten Webseites
- Übung C: Suchmaschinen
- Übungsblatt
3.1 - Tabellen HTML
- Allgemeines über Tabellen
- HTML Konstrukt
- Div. Tags (table, thead, tbody, tr ...)
- Zellen verbinden
- colspan und rowspan
- Lernhandout
- Testtabelle.html
3.2 - HTML validieren HTML
Ü 3.1 - Tabellen HTML
- Übung A: Stundenplan
- Übung B: Ländervergleich
- Übungsblatt
4.1 - style, span, color CSS | HTML
- style Attribut
- CSS Anweisungen im Tag
- span Element
- Farbmodelle
- Farben zuweisen
- Namen, RGB, HEX
- andere Farbmodelle
- Lernhandout
4.2 - RahmenCSS
- border Eigenschaft
- Rahmendicke
- Rahmentyp
- Rahmenfarbe
- Ecken abrunden
- Lernhandout
4.3 - Höhe und BreiteCSS
- height und width
- Absolute Längenmaße
- relative Längenmaße
- Maximale Größe
- Minimale Größe
- Lernhandout
Ü 4.3 - FarbenCSS | HTML
- Übung A: Loveparade
- Übung B: Farbtabelle
- Übung C: Einfache Buttons
- Übung D: Eine Ampel
- Übungsblatt
5.1 - CSS im Head CSS | HTML
- Style Element im Head
- HTML Tag überschreiben
- ID definieren
- CLASS definieren
- Groß-Kleinschreibung
- Lernhandout
5.2 - SchriftartenCSS
- Schriften mit font-family
- Generische Schriften
- Schriftart einbinden
mit @font-face
- Dateigrößen beachten
- Urheberrechte beachten
- Google Fonts
- Lernhandout
- Google Fonts
5.3 - SchriftgrößenCSS
- font-size
- Schlüsselwörter
- Absolute Angaben
- Relative Angaben
- Strichstärken
- Kapitälchen
- Lernhandout
5.4 - Text DekorationCSS
- text-decoration
- line, style, color
- Textschatten
- text-shadow
- Lernhandout
Ü 5.4 - Schriften und TextCSS | HTML
- Übung A: Einfache Buttons im Head
- Übung B: Buttons im Head
- Übung C: Google Fonts
- Übung D: Österreich
- Übungsblatt
- Austria.txt
6.1 - AusrichtungCSS
- Textausrichtungen
Links- und Rechtsbündig
Zentriert, Blocksatz
- Erstzeileneinzug
- Spalten
- Spaltenanzahl, Zischenraum, Trennlinie
- Lernhandout
6.2 - AbständeCSS
- Box-Modell
- Innenabstand
- Außenabstand
- Box-Element zentrieren
- Body Seitenränder
- Lernhandout
6.3 - Best PracticeHTML | CSS
- Stylesheets einbinden
- .css Dateien
- Einfache Selektoren
- Mehrere Klassen
- Universalselektoren
- Lernhandout
Ü 6.2 - AusrichtungCSS | HTML
7.1 - HintergrundCSS
- Hintergrundgrafik einbinden
- Hintergrundbild skalieren (Größe)
- Hintergrund wiederholen
- Lernhandout
7.2 - HintergrundCSS
7.3 - FarbverlaufCSS
- Linearer Verlauf
- Gradient Funktion
- Mehrere Farben
- Hintergrund Verlauf
im Body
- Österreich-Flagge
- Lernhandout
Ü 7.3 - HintergrundCSS | HTML
8.1 - PositionierungCSS
8.2 - DisplayCSS
- Die display-Eigenschaft
- divs nebeneinander
- Unterschied zwischen
visibility und display:none
- Vertikal zentrieren
- Lernhandout
8.3 - StrukturierungHTML
- Seitenstruktur
- DOM (Document Object Model)
- nav, main, header, footer
section, article
adress, aside
- Lernhandout
8.4 - FloatCSS
- Float-Modell (left, right)
- Floaten von mehreren Elementen
- clear:both
- Lernhandout
Ü 8.2 - DisplayCSS | HTML
9.1 - PseudoklassenCSS
- a:link
a:visited
a:any-link
a:hover
a:focus
a:active
- Beispiel für einen Button
- Lernhandout
9.2 - PseudoklassenCSS
- Anker und Sprungmarken
- :target
- Ein- und ausblenden
- weitere Pseudoklassen
- Lernhandout
9.3 - iframeHTML
- iframe Element
- Attribute von iframe
- Einbetten von YouTube Videos
- Lernhandout
Ü 9.2 - PseudoklassenCSS | HTML
Ü 9.3 - iframeCSS | HTML
- Übung A: PDF darstellen
- Übung B: YouTube
- Übung C: Google Maps
- Übungsblatt
10.2 - PseudoelementeCSS
- ::first-line
- ::first-letter
- ::before
- ::after
- ::selection
- Lernhandout
10.3 - AudioHTML
10.4 - VideoHTML
Ü 10.2 - PseudoelementeCSS | HTML
Ü 10.3 - AudioCSS | HTML
Ü 10.4 - VideoCSS | HTML
11.1 - MedienabfragenCSS
- Media Queries
- Browsersupport
- CSS Anweisungen
- Für den Druck
- Für kleiner/gleich 600px
- Lernhandout
11.2 - ObjekteHTML
- picture Element
- object Element
- embed Element
- Lernhandout
11.3 - ViewportHTML | CSS
- Mobile Devices
- Meta Tag viewport
- Responsive Web Design
- content Attribut
- Emfpehlungen für RWD
- Lernhandout
11.4 - Box EigenschaftenCSS
- Schatten für Boxen
- box-shadow
- Anzeigen von Inhalten
- overflow
- resize
- Lernhandout
Ü 11.1 - MedienabfragenCSS | HTML
- Übung A: Media Queries
- Übung B: Media Queries mit Text
- Übung C: Lebenslauf
- Übungsblatt
Ü 11.2 - ObjekteCSS | HTML
Ü 11.3 - ViewportCSS | HTML
12.1 - FormulareHTML
12.2 - TextareaHTML
- Mehrzeilige Texteingaben
- textarea Element
- textarea Attribute
- Darstellen von HTML Code
- Lernhandout
12.3 - InputHTML
- Einzeilige Eingabe
- input Element
- input Attribute
- Lernhandout
12.4 - Input TypenHTML
- Eingabe von Text
- Passwörter, eMail, Web
- Eingabe von Zahlen
- Range (Schieberegler)
- Telefonnummern
- Lernhandout
12.5 - Formular ButtonsHTML
12.6 - DialogeingabenHTML
- Datei-Upload
- Datei-Upload Attribute
- Farbauswahl
- Datum und Uhrzeit
- Versteckte Elemente
- Lernhandout
12.7 - AuswahleingabenHTML
- Radio-Button Element
- Radio-Button Attribute
- Checkbox Element
- Checkbox Attribute
- Fieldset Element
- Legend Element
- Lernhandout
12.8 - AuswahllistenHTML
- Drop-Down-Listen
- Select Element
- Select Attribute
- Option Element
- Option Attribute
- Lernhandout
Ü 12.3 - InputCSS | HTML
- Übung A: get und post
- Übung B: Kommentarfeld
- Übungsblatt
Ü 12.4 - InputtypesCSS | HTML
- Übung A: Anmeldeformular
- Übung B: Online Sparen
- Übungsblatt
Ü 12.5 - Formular ButtonsCSS | HTML
Ü 12.6 - DialogeCSS | HTML
Ü 12.7 - AuswahleingabeCSS | HTML
Ü 12.8 - AuswahllistenCSS | HTML
13.1 - AnimationenCSS
- @keyframes Regel
- from to
- animation-name
- animation-duration
- Ein Quadrat wird zum Kreis
- Lernhandout
13.2 - AnimationenCSS
- @keyframes Prozente
- Verzögerung (delay)
- Wiederholungen (iteration-count)
- Zustand (play-state)
- Lernhandout
13.3 - AnimationenCSS
- animation-direction
- animation-fill-mode
- animation-timing-function
- CSS Eigenschaft animation
- Div aus Bildschirmmitte
- Browsersupport
- Lernhandout
13.4 - TransformierenCSS
- transform Eigenschaft
- Skalieren scale(x,y);
- animierte Unterstreichung
- Drehen rotate();
- analoger Sekundenzeiger
- Lernhandout
13.5 - TransformierenCSS
- Verzerren skew(x,y);
- Verschieben translate(x,y)
- Einfacher Tab-Reiter (Registerblatt)
- Hinweis: matrix()
- Lernhandout
13.6 - TransitionsCSS
- weiche Übergänge
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- transition Shorthand
- Lernhandout
Ü 13.3 - AnimationenCSS | HTML
- Übung A: Abstimmungsergebnis
- Übung B: Rechtecke ins Zentrum
- Übungsblatt
Ü 13.4 - TransformierenCSS | HTML
Ü 13.6 - TransitionsCSS | HTML
- Übung A: Buttons mit Übergang
- Übung B: Accordion
- Übung C: Mülltrennung
- Übungsblatt
14.1 - CSS VariablenCSS
- CSS Variablen
- Browsersupport
- Variablen festlegen
- Variablen abrufen
- Beispiel
- Lernhandout
14.2 - calc() FunktionCSS
- calc() Funktion
- Browsersupport
- Arithmetische Operationen
- calc() und var()
- Fallback
- Lernhandout
14.3 - counter() FunktionCSS
- Zähler/Nummerierung
- counter-reset
- counter-increment
- ::before content
- counter() Funktion
- Verschachtelte Zähler
- Lernhandout
14.4 - AttributselektorenCSS
- Einfache Attributselektoren
- Attributselektor mit Wert
- Teilübereinstimmungen von Werten
- Verbindung mit anderen Selektoren
- Lernhandout
Ü 14.3 - CSS FunktionenCSS | HTML
Ü 15.1 - Image MapCSS | HTML