HTML und CSS
1.1 - HTML GrundgerüstHTML
Hilfreiche Links CSS | HTML
2.1 - Basis Tags HTML
- Refcode: HCL021
- Zeichenformatierung
- Absatzformatierung
- Div. Tags (p, h1 - h6, br, hr, i, uw.)
- Listen
- Aufzählungen
- Lernhandout
- Codebeispiel
2.2 - Basis a href, imgHTML
- Refcode: HCL022
- Hyperlinks
- Link-Attribute
- Bilder einfügen
- Bild-Attribute
- Bildformate mit Eigenschaften
- Lernhandout
- Codebeispiel
2.3 - Best PracticeHTML
Ü 2.1 - Basis Tags HTML
Ü 2.2 - Basis a href, img HTML
- Refcode: HCU022
- Übung A: Ein Inhaltsverzeichnis
- Übung B: Top-Ten Webseites
- Übung C: Suchmaschinen
- Übungsblatt
3.1 - Tabellen HTML
3.2 - HTML validieren HTML
Ü 3.1 - Tabellen HTML
- Refcode: HCU031
- Übung A: Stundenplan
- Übung B: Ländervergleich
- Übungsblatt
4.1 - style, span, color CSS | HTML
- Refcode: HCL041
- style Attribut
- CSS Anweisungen im Tag
- span Element
- Farbmodelle
- Farben zuweisen
- Namen, RGB, HEX
- andere Farbmodelle
- Lernhandout
- Codebeispiel
4.2 - RahmenCSS
4.3 - Höhe und BreiteCSS
- Refcode: HCL043
- height und width
- Absolute Längenmaße
- relative Längenmaße
- Maximale Größe
- Minimale Größe
- Lernhandout
- Codebeispiel
Ü 4.3 - FarbenCSS | HTML
- Refcode: HCU043
- Übung A: Loveparade
- Übung B: Farbtabelle
- Übung C: Einfache Buttons
- Übung D: Eine Ampel
- Übungsblatt
5.1 - CSS im Head CSS | HTML
- Refcode: HCL051
- Style Element im Head
- HTML Tag überschreiben
- ID definieren
- CLASS definieren
- Groß-Kleinschreibung
- Lernhandout
- Codebeispiel
5.2 - SchriftartenCSS
- Refcode: HCL052
- Schriften mit font-family
- Generische Schriften
- Schriftart einbinden
mit @font-face
- Dateigrößen beachten
- Urheberrechte beachten
- Google Fonts
- Lernhandout
- Google Fonts
- Codebeispiel
5.3 - SchriftgrößenCSS
- Refcode: HCL053
- font-size
- Schlüsselwörter
- Absolute Angaben
- Relative Angaben
- Strichstärken
- Kapitälchen
- Lernhandout
- Codebeispiel
5.4 - Text DekorationCSS
Ü 5.4 - Schriften und TextCSS | HTML
- Refcode: HCU054
- Übung A: Einfache Buttons im Head
- Übung B: Buttons im Head
- Übung C: Google Fonts
- Übung D: Österreich
- Übungsblatt
- Austria.txt
6.1 - AusrichtungCSS
- Refcode: HCL061
- Textausrichtungen
Links- und Rechtsbündig
Zentriert, Blocksatz
- Erstzeileneinzug
- Spalten
- Spaltenanzahl, Zischenraum, Trennlinie
- Lernhandout
- Codebeispiel
6.2 - AbständeCSS
- Refcode: HCL062
- Box-Modell
- Innenabstand
- Außenabstand
- Box-Element zentrieren
- Body Seitenränder
- Lernhandout
- Codebeispiel
6.3 - Best PracticeHTML | CSS
- Refcode: HCL063
- Stylesheets einbinden
- .css Dateien
- Einfache Selektoren
- Mehrere Klassen
- Universalselektoren
- Lernhandout
- Codebeispiel
Ü 6.2 - AusrichtungCSS | HTML
7.1 - HintergrundCSS
- Refcode: HCL071
- Hintergrundgrafik einbinden
- Hintergrundbild skalieren (Größe)
- Hintergrund wiederholen
- Lernhandout
- Codebeispiel
7.2 - HintergrundCSS
7.3 - FarbverlaufCSS
- Refcode: HCL073
- Linearer Verlauf
- Gradient Funktion
- Mehrere Farben
- Hintergrund Verlauf
im Body
- Österreich-Flagge
- Lernhandout
- Codebeispiel
Ü 7.3 - HintergrundCSS | HTML
8.1 - PositionierungCSS
8.2 - DisplayCSS
- Refcode: HCL082
- Die display-Eigenschaft
- divs nebeneinander
- Unterschied zwischen
visibility und display:none
- Vertikal zentrieren
- Lernhandout
- Codebeispiel
8.3 - StrukturierungHTML
- Refcode: HCL083
- Seitenstruktur
- DOM (Document Object Model)
- nav, main, header, footer
section, article
adress, aside
- Lernhandout
- Codebeispiel
8.4 - FloatCSS
Ü 8.2 - DisplayCSS | HTML
9.1 - PseudoklassenCSS
- Refcode: HCL091
- a:link
a:visited
a:any-link
a:hover
a:focus
a:active
- Beispiel für einen Button
- Lernhandout
- Codebeispiel
9.2 - PseudoklassenCSS
9.3 - iframeHTML
Ü 9.2 - PseudoklassenCSS | HTML
Ü 9.3 - iframeCSS | HTML
- Refcode: HCU093
- Übung A: PDF darstellen
- Übung B: YouTube
- Übung C: Google Maps
- Übungsblatt
10.2 - PseudoelementeCSS
10.3 - AudioHTML
10.4 - VideoHTML
Ü 10.2 - PseudoelementeCSS | HTML
Ü 10.3 - AudioCSS | HTML
Ü 10.4 - VideoCSS | HTML
11.1 - MedienabfragenCSS
- Refcode: HCL111
- Media Queries
- Browsersupport
- CSS Anweisungen
- Für den Druck
- Für kleiner/gleich 600px
- Lernhandout
- Codebeispiel
11.2 - ObjekteHTML
11.3 - ViewportHTML | CSS
- Refcode: HCL113
- Mobile Devices
- Meta Tag viewport
- Responsive Web Design
- content Attribut
- Emfpehlungen für RWD
- Lernhandout
- Codebeispiel
11.4 - Box EigenschaftenCSS
Ü 11.1 - MedienabfragenCSS | HTML
- Refcode: HCU111
- Ü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
- Refcode: HCL122
- Mehrzeilige Texteingaben
- textarea Element
- textarea Attribute
- Darstellen von HTML Code
- Lernhandout
- Codebeispiel
12.3 - InputHTML
12.4 - Input TypenHTML
- Refcode: HCL124
- Eingabe von Text
- Passwörter, eMail, Web
- Eingabe von Zahlen
- Range (Schieberegler)
- Telefonnummern
- Lernhandout
- Codebeispiel
12.5 - Formular ButtonsHTML
12.6 - DialogeingabenHTML
- Refcode: HCL126
- Datei-Upload
- Datei-Upload Attribute
- Farbauswahl
- Datum und Uhrzeit
- Versteckte Elemente
- Lernhandout
- Codebeispiel
12.7 - AuswahleingabenHTML
- Refcode: HCL127
- Radio-Button Element
- Radio-Button Attribute
- Checkbox Element
- Checkbox Attribute
- Fieldset Element
- Legend Element
- Lernhandout
- Codebeispiel
12.8 - AuswahllistenHTML
- Refcode: HCL128
- Drop-Down-Listen
- Select Element
- Select Attribute
- Option Element
- Option Attribute
- Lernhandout
- Codebeispiel
Ü 12.3 - InputCSS | HTML
- Refcode: HCU123
- Übung A: get und post
- Übung B: Kommentarfeld
- Übungsblatt
Ü 12.4 - InputtypesCSS | HTML
- Refcode: HCU124
- Ü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
- Refcode: HCL0131
- @keyframes Regel
- from to
- animation-name
- animation-duration
- Ein Quadrat wird zum Kreis
- Lernhandout
- Codebeispiel
13.2 - AnimationenCSS
- Refcode: HCL132
- @keyframes Prozente
- Verzögerung (delay)
- Wiederholungen (iteration-count)
- Zustand (play-state)
- Lernhandout
- Codebeispiel
13.3 - AnimationenCSS
- Refcode: HCL133
- animation-direction
- animation-fill-mode
- animation-timing-function
- CSS Eigenschaft animation
- Div aus Bildschirmmitte
- Browsersupport
- Lernhandout
- Codebeispiel
13.4 - TransformierenCSS
- Refcode: HCL134
- transform Eigenschaft
- Skalieren scale(x,y);
- animierte Unterstreichung
- Drehen rotate();
- analoger Sekundenzeiger
- Lernhandout
- Codebeispiel
13.5 - TransformierenCSS
- Refcode: HCL135
- Verzerren skew(x,y);
- Verschieben translate(x,y)
- Einfacher Tab-Reiter (Registerblatt)
- Hinweis: matrix()
- Lernhandout
- Codebeispiel
13.6 - TransitionsCSS
- Refcode: HCL136
- weiche Übergänge
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- transition Shorthand
- Lernhandout
- Codebeispiel
Ü 13.3 - AnimationenCSS | HTML
- Refcode: HCU133
- Übung A: Abstimmungsergebnis
- Übung B: Rechtecke ins Zentrum
- Übungsblatt
Ü 13.4 - TransformierenCSS | HTML
- Refcode: HCU134
- Übung A: Spielkarten
- Übung B: Polaroid
- Übungsblatt
Ü 13.6 - TransitionsCSS | HTML
- Refcode: HCU136
- Übung A: Buttons mit Übergang
- Übung B: Accordion
- Übung C: Mülltrennung
- Übungsblatt
14.1 - CSS VariablenCSS
- Refcode: HCL141
- CSS Variablen
- Browsersupport
- Variablen festlegen
- Variablen abrufen
- Beispiel
- Lernhandout
- Codebeispiel
14.2 - calc() FunktionCSS
- Refcode: HCL142
- calc() Funktion
- Browsersupport
- Arithmetische Operationen
- calc() und var()
- Fallback
- Lernhandout
- Codebeispiel
14.3 - counter() FunktionCSS
- Refcode: HCL143
- Zähler/Nummerierung
- counter-reset
- counter-increment
- ::before content
- counter() Funktion
- Verschachtelte Zähler
- Lernhandout
- Codebeispiel
14.4 - AttributselektorenCSS
- Refcode: HCL144
- Einfache Attributselektoren
- Attributselektor mit Wert
- Teilübereinstimmungen von Werten
- Verbindung mit anderen Selektoren
- Lernhandout
- Codebeispiel
Ü 14.3 - CSS FunktionenCSS | HTML
Ü 15.1 - Image MapCSS | HTML