HTML und CSS

## 1.1 - HTML GrundgerüstHTML

- Refcode: HCL011
- Was ist ein Tag?
- Das HTML-Grundgerüst
- HTML-Files speichern

1. Lernhandout
2. Codebeispiel

## Hilfreiche Links CSS | HTML

- Hier findest du nützliche Links zum Unterricht!

1. Impress Präsentation 16:9
2. PDF Präsentation 16:9
3. Code ausprobieren mit MachMal
4. Code ausprobieren mit Tryit
5. Zeichenreferenz
6. HTML validieren
7. Google Fonts
8. Background Generator

## 2.1 - Basis Tags HTML

- Refcode: HCL021
- Zeichenformatierung
- Absatzformatierung
- Div. Tags (p, h1 - h6, br, hr, i, uw.)
- Listen
- Aufzählungen

1. Lernhandout
2. Codebeispiel

## 2.2 - Basis a href, imgHTML

- Refcode: HCL022
- Hyperlinks
- Link-Attribute
- Bilder einfügen
- Bild-Attribute
- Bildformate mit Eigenschaften

1. Lernhandout
2. Codebeispiel

## 2.3 - Best PracticeHTML

- Refcode: HCL023
- Code strukturieren
- Parent, Child, Sibling
- HTML eigene Zeichen
- Zeichenreferenz
- Kommentare

1. Lernhandout
2. Zeichenreferenz
3. Codebeispiel

## Ü 2.1 - Basis Tags HTML

- Refcode: HCU021
- Übung A: TXT in HTML

1. Übungsblatt
2. LW_Salzburg_2013.txt

## Ü 2.2 - Basis a href, img HTML

- Refcode: HCU022
- Übung A: Ein Inhaltsverzeichnis
- Übung B: Top-Ten Webseites
- Übung C: Suchmaschinen

1. Übungsblatt

##

## 3.1 - Tabellen HTML

- Refcode: HCL031
- Allgemeines über Tabellen
- HTML Konstrukt
- Div. Tags (table, thead, tbody, tr ...)
- Zellen verbinden
- colspan und rowspan

1. Lernhandout
2. Testtabelle.html
3. Codebeispiel

## 3.2 - HTML validieren HTML

- Refcode: HCL032
- Browser unterschiede
- W3C Konsortium
- Markup Validation Service
- Arten der Prüfung

1. Lernhandout
2. HTML validieren
3. Codebeispiel

## Ü 3.1 - Tabellen HTML

- Refcode: HCU031
- Übung A: Stundenplan
- Übung B: Ländervergleich

1. Ü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

1. Lernhandout
2. Codebeispiel

## 4.2 - RahmenCSS

- Refcode: HCL042
- border Eigenschaft
- Rahmendicke
- Rahmentyp
- Rahmenfarbe
- Ecken abrunden

1. Lernhandout
2. Codebeispiel

## 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

1. Lernhandout
2. Codebeispiel

##

##

## Ü 4.3 - FarbenCSS | HTML

- Refcode: HCU043
- Übung A: Loveparade
- Übung B: Farbtabelle
- Übung C: Einfache Buttons
- Übung D: Eine Ampel

1. Übungsblatt

## 5.1 - CSS im Head CSS | HTML

- Refcode: HCL051
- Style Element im Head
- HTML Tag überschreiben
- ID definieren
- CLASS definieren
- Groß-Kleinschreibung

1. Lernhandout
2. Codebeispiel

## 5.2 - SchriftartenCSS

- Refcode: HCL052
- Schriften mit font-family
- Generische Schriften
- Schriftart einbinden
  mit @font-face
- Dateigrößen beachten
- Urheberrechte beachten
- Google Fonts

1. Lernhandout
2. Google Fonts
3. Codebeispiel

## 5.3 - SchriftgrößenCSS

- Refcode: HCL053
- font-size
- Schlüsselwörter
- Absolute Angaben
- Relative Angaben
- Strichstärken
- Kapitälchen

1. Lernhandout
2. Codebeispiel

## 5.4 - Text DekorationCSS

- Refcode: HCL054
- text-decoration
- line, style, color
- Textschatten
- text-shadow

1. Lernhandout
2. Codebeispiel

##

##

##

## Ü 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

1. Übungsblatt
2. Austria.txt

## 6.1 - AusrichtungCSS

- Refcode: HCL061
- Textausrichtungen
  Links- und Rechtsbündig
  Zentriert, Blocksatz
- Erstzeileneinzug
- Spalten
- Spaltenanzahl, Zischenraum, Trennlinie

1. Lernhandout
2. Codebeispiel

## 6.2 - AbständeCSS

- Refcode: HCL062
- Box-Modell
- Innenabstand
- Außenabstand
- Box-Element zentrieren
- Body Seitenränder

1. Lernhandout
2. Codebeispiel

## 6.3 - Best PracticeHTML | CSS

- Refcode: HCL063
- Stylesheets einbinden
- .css Dateien
- Einfache Selektoren
- Mehrere Klassen
- Universalselektoren

1. Lernhandout
2. Codebeispiel

##

## Ü 6.2 - AusrichtungCSS | HTML

- Übung A: Ländervergleich
- Übung B: Stundenplan
- Übung C: Text mit Spalten

1. Übungsblatt
2. Wordelemente.html

##

## 7.1 - HintergrundCSS

- Refcode: HCL071
- Hintergrundgrafik einbinden
- Hintergrundbild skalieren (Größe)
- Hintergrund wiederholen

1. Lernhandout
2. Codebeispiel

## 7.2 - HintergrundCSS

- Refcode: HCL072
- Position der Hintergrundgraphik
- Hintergrundbild befestigen
- Hintergrundeigenschaften
  für bestimmte Bereiche

1. Lernhandout
2. Background Generator
3. Codebeispiel

## 7.3 - FarbverlaufCSS

- Refcode: HCL073
- Linearer Verlauf
- Gradient Funktion
- Mehrere Farben
- Hintergrund Verlauf
  im Body
- Österreich-Flagge

1. Lernhandout
2. Codebeispiel

##

##

## Ü 7.3 - HintergrundCSS | HTML

- Refcode: HCU073
- Übung A: Carnary Wharf
- Übung B: Rainbow Warrior

1. Lernhandout
2. carnary_wharf.html
3. london.png

## 8.1 - PositionierungCSS

- Refcode: HCL081
- Positionierungsarten
- top, bottom, left, right
- eine fixe Fußzeile
- z-index
- Beschriftung eines Bildes

1. Lernhandout
2. Beispiel_Pos.html
3. Codebeispiel

## 8.2 - DisplayCSS

- Refcode: HCL082
- Die display-Eigenschaft
- divs nebeneinander
- Unterschied zwischen
  visibility und display:none
- Vertikal zentrieren

1. Lernhandout
2. Codebeispiel

## 8.3 - StrukturierungHTML

- Refcode: HCL083
- Seitenstruktur
- DOM (Document Object Model)
- nav, main, header, footer
  section, article
  adress, aside

1. Lernhandout
2. Codebeispiel

## 8.4 - FloatCSS

- Refcode: HCL084
- Float-Modell (left, right)
- Floaten von mehreren Elementen
- clear:both

1. Lernhandout
2. Codebeispiel

##

## Ü 8.2 - DisplayCSS | HTML

- Refcode: HCU082
- Übung A: Textgestaltung
- Übung B: Textgestaltung mit Bild

1. Übungsblatt
2. Wordelemente.html

##

##

## 9.1 - PseudoklassenCSS

- Refcode: HCL091
- a:link
  a:visited
  a:any-link
  a:hover
  a:focus
  a:active
- Beispiel für einen Button

1. Lernhandout
2. Codebeispiel

## 9.2 - PseudoklassenCSS

- Refcode: HCL092
- Anker und Sprungmarken
- :target
- Ein- und ausblenden
- weitere Pseudoklassen

1. Lernhandout
2. Codebeispiel

## 9.3 - iframeHTML

- Refcode: HCL093
- iframe Element
- Attribute von iframe
- Einbetten von YouTube Videos

1. Lernhandout
2. Codebeispiel

##

## Ü 9.2 - PseudoklassenCSS | HTML

- Refcode: HCU092
- Übung A: Buttons
- Übung B: Links neu gestalten
- Übung C: Navigationsleiste
- Übung D: Ein- und ausblenden

1. Übungsblatt
2. abfalltrennung.html

## Ü 9.3 - iframeCSS | HTML

- Refcode: HCU093
- Übung A: PDF darstellen
- Übung B: YouTube
- Übung C: Google Maps

1. Übungsblatt

## 10.2 - PseudoelementeCSS

- Refcode: HCL102
- ::first-line
- ::first-letter
- ::before
- ::after
- ::selection

1. Lernhandout
2. Codebeispiel

## 10.3 - AudioHTML

- Refcode: HCL103
- Audio in HTML
- Browsersupport
- Audio Attribute
- Fallback

1. Lernhandout
2. Europahymne.mp3
3. Codebeispiel

## 10.4 - VideoHTML

- Refcode: HCL104
- Video in HTML
- Browsersupport
- Video Attribute
- Fallback, Vorschaubild

1. Lernhandout
2. paint.mp4
3. Codebeispiel

## Ü 10.2 - PseudoelementeCSS | HTML

- Refcode: HCU102
- Übung A: Wordelemente
- Übung B: Datei Explorer

1. Übungsblatt
2. Wordelemente.html

## Ü 10.3 - AudioCSS | HTML

- Refcode: HCU103
- Übung A: Blues Soundcheck
- Übung B: Blues Design

1. Übungsblatt
2. Bluesfiles.zip

## Ü 10.4 - VideoCSS | HTML

- Refcode: HCU104
- Übung A: Video mit Beschriftung
- CSS Eigenschaft: opacity

1. Übungsblatt
2. paint.mp4

## 11.1 - MedienabfragenCSS

- Refcode: HCL111
- Media Queries
- Browsersupport
- CSS Anweisungen
- Für den Druck
- Für kleiner/gleich 600px

1. Lernhandout
2. Codebeispiel

## 11.2 - ObjekteHTML

- Refcode: HCL112
- picture Element
- object Element
- embed Element

1. Lernhandout
2. Codebeispiel

## 11.3 - ViewportHTML | CSS

- Refcode: HCL113
- Mobile Devices
- Meta Tag viewport
- Responsive Web Design
- content Attribut
- Emfpehlungen für RWD

1. Lernhandout
2. Codebeispiel

## 11.4 - Box EigenschaftenCSS

- Refcode: HCL114
- Schatten für Boxen
- box-shadow
- Anzeigen von Inhalten
- overflow
- resize

1. Lernhandout
2. Codebeispiel

## Ü 11.1 - MedienabfragenCSS | HTML

- Refcode: HCU111
- Übung A: Media Queries
- Übung B: Media Queries mit Text
- Übung C: Lebenslauf

1. Übungsblatt

## Ü 11.2 - ObjekteCSS | HTML

- Refcode: HCU112
- Übung A: Smartphone Shop I
- Übung B: Smartphone Shop II
- Übung C: Smartphone Shop III

1. Übungsblatt
2. Smartphone_Shop.zip

## Ü 11.3 - ViewportCSS | HTML

- Refcode: HCU113
- Übung A: Smartphone Shop IV
- Übung B: Smartphone Shop V
- Übung C: Smartphone Shop VI

1. Übungsblatt
2. Smartphone_Shop.zip

##

## 12.1 - FormulareHTML

- Refcode: HCL121
- Nutzung von Formularen
- form Element
- form Attribute
- get und post Methode
- label Element
- label Attribute

1. Lernhandout
2. Report_GET.html
3. Codebeispiel

## 12.2 - TextareaHTML

- Refcode: HCL122
- Mehrzeilige Texteingaben
- textarea Element
- textarea Attribute
- Darstellen von HTML Code

1. Lernhandout
2. Codebeispiel

## 12.3 - InputHTML

- Refcode: HCL123
- Einzeilige Eingabe
- input Element
- input Attribute

1. Lernhandout
2. Codebeispiel

## 12.4 - Input TypenHTML

- Refcode: HCL124
- Eingabe von Text
- Passwörter, eMail, Web
- Eingabe von Zahlen
- Range (Schieberegler)
- Telefonnummern

1. Lernhandout
2. Codebeispiel

## 12.5 - Formular ButtonsHTML

- Refcode: HCL125
- Formular Schaltflächen
- button Element
- button Attribute

1. Lernhandout
2. Report_GET.html
3. Codebeispiel

## 12.6 - DialogeingabenHTML

- Refcode: HCL126
- Datei-Upload
- Datei-Upload Attribute
- Farbauswahl
- Datum und Uhrzeit
- Versteckte Elemente

1. Lernhandout
2. Codebeispiel

## 12.7 - AuswahleingabenHTML

- Refcode: HCL127
- Radio-Button Element
- Radio-Button Attribute
- Checkbox Element
- Checkbox Attribute
- Fieldset Element
- Legend Element

1. Lernhandout
2. Codebeispiel

## 12.8 - AuswahllistenHTML

- Refcode: HCL128
- Drop-Down-Listen
- Select Element
- Select Attribute
- Option Element
- Option Attribute

1. Lernhandout
2. Codebeispiel

##

##

## Ü 12.3 - InputCSS | HTML

- Refcode: HCU123
- Übung A: get und post
- Übung B: Kommentarfeld

1. Übungsblatt

## Ü 12.4 - InputtypesCSS | HTML

- Refcode: HCU124
- Übung A: Anmeldeformular
- Übung B: Online Sparen

1. Übungsblatt

## Ü 12.5 - Formular ButtonsCSS | HTML

- Refcode: HCU125
- Übung A: Passierschein A38

1. Übungsblatt

## Ü 12.6 - DialogeCSS | HTML

- Refcode: HCU126
- Übung A: Farbauswahl
- Übung B: Online Bewerbung

1. Übungsblatt
2. Report_GET.html

## Ü 12.7 - AuswahleingabeCSS | HTML

- Refcode: HCU127
- Übung A: Salat Online
- Übung B: Salat Online Mobil

1. Übungsblatt
2. Report_GET.html

## Ü 12.8 - AuswahllistenCSS | HTML

- Refcode: HCU128
- Übung A: Softwareliste
- Übung B: Gewinnspiel

1. Übungsblatt
2. Report_GET.html

## 13.1 - AnimationenCSS

- Refcode: HCL0131
- @keyframes Regel
- from to
- animation-name
- animation-duration
- Ein Quadrat wird zum Kreis

1. Lernhandout
2. Codebeispiel

## 13.2 - AnimationenCSS

- Refcode: HCL132
- @keyframes Prozente
- Verzögerung (delay)
- Wiederholungen (iteration-count)
- Zustand (play-state)

1. Lernhandout
2. Codebeispiel

## 13.3 - AnimationenCSS

- Refcode: HCL133
- animation-direction
- animation-fill-mode
- animation-timing-function
- CSS Eigenschaft animation
- Div aus Bildschirmmitte
- Browsersupport

1. Lernhandout
2. Codebeispiel

## 13.4 - TransformierenCSS

- Refcode: HCL134
- transform Eigenschaft
- Skalieren scale(x,y);
- animierte Unterstreichung
- Drehen rotate();
- analoger Sekundenzeiger

1. Lernhandout
2. Codebeispiel

## 13.5 - TransformierenCSS

- Refcode: HCL135
- Verzerren skew(x,y);
- Verschieben translate(x,y)
- Einfacher Tab-Reiter (Registerblatt)
- Hinweis: matrix()

1. Lernhandout
2. Codebeispiel

## 13.6 - TransitionsCSS

- Refcode: HCL136
- weiche Übergänge
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- transition Shorthand

1. Lernhandout
2. Codebeispiel

##

##

## Ü 13.3 - AnimationenCSS | HTML

- Refcode: HCU133
- Übung A: Abstimmungsergebnis
- Übung B: Rechtecke ins Zentrum

1. Übungsblatt

## Ü 13.4 - TransformierenCSS | HTML

- Refcode: HCU134
- Übung A: Spielkarten
- Übung B: Polaroid

1. Übungsblatt

##

## Ü 13.6 - TransitionsCSS | HTML

- Refcode: HCU136
- Übung A: Buttons mit Übergang
- Übung B: Accordion
- Übung C: Mülltrennung

1. Übungsblatt

## 14.1 - CSS VariablenCSS

- Refcode: HCL141
- CSS Variablen
- Browsersupport
- Variablen festlegen
- Variablen abrufen
- Beispiel

1. Lernhandout
2. Codebeispiel

## 14.2 - calc() FunktionCSS

- Refcode: HCL142
- calc() Funktion
- Browsersupport
- Arithmetische Operationen
- calc() und var()
- Fallback

1. Lernhandout
2. Codebeispiel

## 14.3 - counter() FunktionCSS

- Refcode: HCL143
- Zähler/Nummerierung
- counter-reset
- counter-increment
- ::before content
- counter() Funktion
- Verschachtelte Zähler

1. Lernhandout
2. Codebeispiel

## 14.4 - AttributselektorenCSS

- Refcode: HCL144
- Einfache Attributselektoren
- Attributselektor mit Wert
- Teilübereinstimmungen von Werten
- Verbindung mit anderen Selektoren

1. Lernhandout
2. Codebeispiel

##

##

## Ü 14.3 - CSS FunktionenCSS | HTML

- Refcode: HCU143
- Übung A: Farbpalette
- Übung B: Impressum

1. Übungsblatt
2. impressum.html

##

## 15.1 - Image MapHTML

- Refcode: HCL151
- Image bestimmen (usemap)
- map definieren
- area shapes
- area coords
- area Verweis

1. Lernhandout
2. Austria.png
3. Austria.psd
4. Codebeispiel

## Ü 15.1 - Image MapCSS | HTML

- Refcode: HCU151
- Übung A: Fehlersuchbild

1. Übungsblatt
2. Image Map Generator

HTML 5 und CSS 3 © Thomas Maier, 2022 Graz | Lösungen