LERNEN ÜBEN
HTML 5 und CSS 3

## 1.1 - HTML GrundgerüstHTML

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

1. Lernhandout

## Hilfreiche Links CSS | HTML

- Hier findest du nützliche Links zum Unterricht!

1. Code ausprobieren mit Tryit
2. Zeichenreferenz
3. HTML validieren
4. Google Fonts
5. Background Generator

## 2.1 - Basis Tags HTML

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

1. Lernhandout

## 2.2 - Basis a href, imgHTML

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

1. Lernhandout

## 2.3 - Best PracticeHTML

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

1. Lernhandout
2. Zeichenreferenz

## Ü 2.1 - Basis Tags HTML

- 2.1.1 TXT in HTML (Landtagswahl Salzburg)

1. Übungsblatt
2. LW_Salzburg_2013.txt

## Ü 2.2 - Basis a href, img HTML

- 2.2.1 Ein Inhaltsverzeichnis
- 2.2.2 Top-Ten Webseites
- 2.2.3 Suchmaschinen

1. Übungsblatt

## 3.1 - Tabellen HTML

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

1. Lernhandout
2. Testtabelle.html

## 3.2 - HTML validieren HTML

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

1. Lernhandout
2. HTML validieren

## Ü 3.1 - Tabellen HTML

- 3.1.1 Stundenplan
- 3.1.2 Ländervergleich

1. Übungsblatt

## 4.1 - style, span, color CSS | HTML

- style Attribut
- CSS Anweisungen im Tag
- span Element
- Farbmodelle
- Farben zuweisen
- Namen, RGB, HEX
- andere Farbmodelle

1. Lernhandout

## 4.2 - RahmenCSS

- border Eigenschaft
- Rahmendicke
- Rahmentyp
- Rahmenfarbe
- Ecken abrunden

1. Lernhandout

## 4.3 - Höhe und BreiteCSS

- height und width
- Absolute Längenmaße
- relative Längenmaße
- Maximale Größe
- Minimale Größe

1. Lernhandout

## Ü 4.3 - FarbenCSS | HTML

- 4.3.1 Loveparade
- 4.3.2 Farbtabelle
- 4.3.3 Einfache Buttons
- 4.3.4 Eine Ampel

1. Übungsblatt

## 5.1 - CSS im Head CSS | HTML

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

1. Lernhandout

## 5.2 - SchriftartenCSS

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

1. Lernhandout
2. Google Fonts

## 5.3 - SchriftgrößenCSS

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

1. Lernhandout

## 5.4 - Text DekorationCSS

- text-decoration
- line, style, color
- Textschatten
- text-shadow

1. Lernhandout

## Ü 5.4 - Schriften und TextCSS | HTML

- 5.4.1 Einfache Buttons im Head
- 5.4.2 Buttons im Head
- 5.4.3 Google Fonts
- 5.4.4 Österreich

1. Übungsblatt
2. Austria.txt

## 6.1 - AusrichtungCSS

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

1. Lernhandout

## 6.2 - AbständeCSS

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

1. Lernhandout

## 6.3 - Best PracticeHTML | CSS

- Stylesheets einbinden
- .css Dateien
- Einfache Selektoren
- Mehrere Klassen
- Universalselektoren

1. Lernhandout

## Ü 6.2 - AusrichtungCSS | HTML

- 6.2.1 Ländervergleich
- 6.2.2 Stundenplan
- 6.2.3 Text mit Spalten

1. Übungsblatt
2. Wordelemente.html

## 7.1 - HintergrundCSS

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

1. Lernhandout

## 7.2 - HintergrundCSS

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

1. Lernhandout
2. Background Generator

## 7.3 - FarbverlaufCSS

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

1. Lernhandout

## Ü 7.3 - HintergrundCSS | HTML

- 7.3.1 Carnary Wharf
- 7.3.2 Rainbow Warrior

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

## C 1.1 - Case Study skylineCSS | HTML

- 1.1.1 Vorbereitungsarbeiten
- 1.1.2 Fahrgastinformation

1. Übungsblatt
2. skyline_logo.svg
3. flugzeug.png

## 8.1 - PositionierungCSS

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

1. Lernhandout
2. Beispiel_Pos.html

## 8.2 - DisplayCSS

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

1. Lernhandout

## 8.3 - StrukturierungHTML

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

1. Lernhandout

## 8.4 - FloatCSS

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

1. Lernhandout

## Ü 8.2 - DisplayCSS | HTML

- 8.2.1 Textgestaltung "Word ..."
- 8.2.2 Textgestaltung mit Bild
- 8.2.3 Freie kreative Übung

1. Übungsblatt

## C 2.1 - Case Study skylineCSS | HTML

- 2.1.1 Impressum

1. Übungsblatt

## 9.1 - PseudoklassenCSS

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

1. Lernhandout

## 9.2 - PseudoklassenCSS

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

1. Lernhandout

## 9.3 - iframeHTML

- iframe Element
- Attribute von iframe
- Einbetten von YouTube Videos

1. Lernhandout

## Ü 9.2 - PseudoklassenCSS | HTML

- 9.2.1 Buttons
- 9.2.2 Links neu gestalten
- 9.2.3 Navigationsleiste
- 9.2.4 Ein- und ausblenden

1. Übungsblatt
2. abfalltrennung.html

## Ü 9.3 - iframeCSS | HTML

- 9.3.1 PDF darstellen
- 9.3.2 YouTube
- 9.3.3 Google Maps

1. Übungsblatt

## C 3.1 - Case Study skylineCSS | HTML

- 3.1.1 Tankprotokolle

1. Übungsblatt
2. Tankprotokolle.zip

## 10.2 - PseudoelementeCSS

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

1. Lernhandout

## 10.3 - AudioHTML

- Audio in HTML
- Browsersupport
- Audio Attribute
- Fallback

1. Lernhandout
2. Europahymne.mp3

## 10.4 - VideoHTML

- Video in HTML
- Browsersupport
- Video Attribute
- Fallback, Vorschaubild

1. Lernhandout
2. paint.mp4

## Ü 10.2 - PseudoelementeCSS | HTML

- 10.2.1 Wordelemente
- 10.2.2 Datei Explorer

1. Übungsblatt
2. Wordelemente.html

## Ü 10.3 - AudioCSS | HTML

- 10.3.1 Blues Soundcheck
- 10.3.2 Blues Design

1. Übungsblatt
2. Bluesfiles.zip

## Ü 10.4 - VideoCSS | HTML

- 10.4.1 Video mit Beschriftung
- CSS Eigenschaft: opacity

1. Übungsblatt
2. paint.mp4

## 11.1 - MedienabfragenCSS

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

1. Lernhandout

## 11.2 - ObjekteHTML

- picture Element
- object Element
- embed Element

1. Lernhandout

## 11.3 - ViewportHTML | CSS

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

1. Lernhandout

## 11.4 - Box EigenschaftenCSS

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

1. Lernhandout

## Ü 11.1 - MedienabfragenCSS | HTML

- 11.1.1 Media Queries
- 11.1.2 Media Queries mit Text
- 11.1.3 Lebenslauf

1. Übungsblatt

## Ü 11.2 - ObjekteCSS | HTML

- 11.2.1 Smartphone Shop I
- 11.2.2 Smartphone Shop II
- 11.2.3 Smartphone Shop III

1. Übungsblatt
2. Smartphone_Shop.zip

## Ü 11.3 - ViewportCSS | HTML

- 11.3.1 Smartphone Shop IV
- 11.3.2 Smartphone Shop V
- 11.3.3 Smartphone Shop VI

1. Übungsblatt
2. Smartphone_Shop.zip

## C 4.1 - Case Study skylineCSS | HTML

- 4.1.1 Corporate Design Lite

1. Übungsblatt
2. fonts.zip (Schriftarten)

## C 5.1 - Case Study skylineCSS | HTML

- 5.1.1 Optimierung mobile Geräte

1. Übungsblatt

## 12.1 - FormulareHTML

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

1. Lernhandout
2. Report_GET.html

## 12.2 - TextareaHTML

- Mehrzeilige Texteingaben
- textarea Element
- textarea Attribute
- Darstellen von HTML Code

1. Lernhandout

## 12.3 - InputHTML

- Einzeilige Eingabe
- input Element
- input Attribute

1. Lernhandout

## 12.4 - Input TypenHTML

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

1. Lernhandout

## 12.5 - Formular ButtonsHTML

- Formular Schaltflächen
- button Element
- button Attribute

1. Lernhandout
2. Report_GET.html

## 12.6 - DialogeingabenHTML

- Datei-Upload
- Datei-Upload Attribute
- Farbauswahl
- Datum und Uhrzeit
- Versteckte Elemente

1. Lernhandout

## 12.7 - AuswahleingabenHTML

- Radio-Button Element
- Radio-Button Attribute
- Checkbox Element
- Checkbox Attribute
- Fieldset Element
- Legend Element

1. Lernhandout

## 12.8 - AuswahllistenHTML

- Drop-Down-Listen
- Select Element
- Select Attribute
- Option Element
- Option Attribute

1. Lernhandout

## Ü 12.3 - InputCSS | HTML

- 12.3.1 get und post
- 12.3.2 Kommentarfeld

1. Übungsblatt

## Ü 12.4 - InputtypesCSS | HTML

- 12.4.1 Anmeldeformular
- 12.4.2 Online Sparen

1. Übungsblatt

## Ü 12.5 - Formular ButtonsCSS | HTML

- 12.5.1 Passierschein A38

1. Übungsblatt

## Ü 12.6 - DialogeCSS | HTML

- 12.6.1 Farbauswahl
- 12.6.2 Online Bewerbung

1. Übungsblatt
2. Report_GET.html

## Ü 12.7 - AuswahleingabeCSS | HTML

- 12.7.1 Salat Online
- 12.7.2 Salat Online Mobil

1. Übungsblatt
2. Report_GET.html

## Ü 12.8 - AuswahllistenCSS | HTML

- 12.8.1 Softwareliste
- 12.8.2 Gewinnspiel

1. Übungsblatt
2. Report_GET.html

## C 6.1 - Case Study skylineCSS | HTML

- 6.1.1 Bewerbungsformular

1. Übungsblatt

## 13.1 - AnimationenCSS

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

1. Lernhandout

HTML 5 und CSS 3 © Thomas Maier, 2018 Graz