HTML und CSS

1.1 - HTML GrundgerüstHTML

  • Was ist ein Tag?
  • Das HTML-Grundgerüst
  • HTML-Files speichern
  1. Lernhandout

Hilfreiche Links CSS | HTML

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

  • Übung A: TXT in HTML
  1. Übungsblatt
  2. LW_Salzburg_2013.txt

Ü 2.2 - Basis a href, img HTML

  • Übung A: Ein Inhaltsverzeichnis
  • Übung B: Top-Ten Webseites
  • Übung C: 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

  • Übung A: Stundenplan
  • Übung B: 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

  • Übung A: Loveparade
  • Übung B: Farbtabelle
  • Übung C: Einfache Buttons
  • Übung D: 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

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

  • 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

  • Übung A: Ländervergleich
  • Übung B: Stundenplan
  • Übung C: 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

  • Übung A: Carnary Wharf
  • Übung B: 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

  • Übung A: Textgestaltung "Word ..."
  • Übung B: Textgestaltung mit Bild
  • Übung C: 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

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

  • Übung A: PDF darstellen
  • Übung B: YouTube
  • Übung C: 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

  • Übung A: Wordelemente
  • Übung B: Datei Explorer
  1. Übungsblatt
  2. Wordelemente.html

Ü 10.3 - AudioCSS | HTML

  • Übung A: Blues Soundcheck
  • Übung B: Blues Design
  1. Übungsblatt
  2. Bluesfiles.zip

Ü 10.4 - VideoCSS | HTML

  • Übung A: 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

  • Übung A: Media Queries
  • Übung B: Media Queries mit Text
  • Übung C: Lebenslauf
  1. Übungsblatt

Ü 11.2 - ObjekteCSS | HTML

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

  • Übung A: Smartphone Shop IV
  • Übung B: Smartphone Shop V
  • Übung C: 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

  • Übung A: get und post
  • Übung B: Kommentarfeld
  1. Übungsblatt

Ü 12.4 - InputtypesCSS | HTML

  • Übung A: Anmeldeformular
  • Übung B: Online Sparen
  1. Übungsblatt

Ü 12.5 - Formular ButtonsCSS | HTML

  • Übung A: Passierschein A38
  1. Übungsblatt

Ü 12.6 - DialogeCSS | HTML

  • Übung A: Farbauswahl
  • Übung B: Online Bewerbung
  1. Übungsblatt
  2. Report_GET.html

Ü 12.7 - AuswahleingabeCSS | HTML

  • Übung A: Salat Online
  • Übung B: Salat Online Mobil
  1. Übungsblatt
  2. Report_GET.html

Ü 12.8 - AuswahllistenCSS | HTML

  • Übung A: Softwareliste
  • Übung B: 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

13.2 - AnimationenCSS

  • @keyframes Prozente
  • Verzögerung (delay)
  • Wiederholungen (iteration-count)
  • Zustand (play-state)
  1. Lernhandout

13.3 - AnimationenCSS

  • animation-direction
  • animation-fill-mode
  • animation-timing-function
  • CSS Eigenschaft animation
  • Div aus Bildschirmmitte
  • Browsersupport
  1. Lernhandout

13.4 - TransformierenCSS

  • transform Eigenschaft
  • Skalieren scale(x,y);
  • animierte Unterstreichung
  • Drehen rotate();
  • analoger Sekundenzeiger
  1. Lernhandout

13.5 - TransformierenCSS

  • Verzerren skew(x,y);
  • Verschieben translate(x,y)
  • Einfacher Tab-Reiter (Registerblatt)
  • Hinweis: matrix()
  1. Lernhandout

13.6 - TransitionsCSS

  • weiche Übergänge
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
  • transition Shorthand
  1. Lernhandout

 

 

 

Ü 13.3 - AnimationenCSS | HTML

  • Übung A: Abstimmungsergebnis
  • Übung B: Rechtecke ins Zentrum
  1. Übungsblatt

Ü 13.4 - TransformierenCSS | HTML

  • Übung A: Spielkarten
  • Übung B: Polaroid
  1. Übungsblatt

 

Ü 13.6 - TransitionsCSS | HTML

  • Übung A: Buttons mit Übergang
  • Übung B: Accordion
  • Übung C: Mülltrennung
  1. Übungsblatt

C 7.1 - Case Study skylineCSS | HTML

  • 7.1.1 Der neue Helikopter
  1. Übungsblatt
  2. Helicopter.psd

14.1 - CSS VariablenCSS

  • CSS Variablen
  • Browsersupport
  • Variablen festlegen
  • Variablen abrufen
  • Beispiel
  1. Lernhandout

14.2 - calc() FunktionCSS

  • calc() Funktion
  • Browsersupport
  • Arithmetische Operationen
  • calc() und var()
  • Fallback
  1. Lernhandout

14.3 - counter() FunktionCSS

  • Zähler/Nummerierung
  • counter-reset
  • counter-increment
  • ::before content
  • counter() Funktion
  • Verschachtelte Zähler
  1. Lernhandout

14.4 - AttributselektorenCSS

  • Einfache Attributselektoren
  • Attributselektor mit Wert
  • Teilübereinstimmungen von Werten
  • Verbindung mit anderen Selektoren
  1. Lernhandout

 

 

 

Ü 14.3 - CSS FunktionenCSS | HTML

  • Übung A: Farbpalette
  • Übung B: Impressum
  1. Übungsblatt
  2. impressum.html

 

C 8.1 - Case Study skylineCSS | HTML

  • 8.1.1 Amtsblatt veröffentlichen
  1. Übungsblatt
  2. Verordnung.docx

15.1 - Image MapHTML

  • Image bestimmen (usemap)
  • map definieren
  • area shapes
  • area coords
  • area Verweis
  1. Lernhandout
  2. Austria.png
  3. Austria.psd

Ü 15.1 - Image MapCSS | HTML

  • Übung A: Fehlersuchbild
  1. Übungsblatt
  2. Image Map Generator

 

 

HTML 5 und CSS 3 © Thomas Maier, 2018 Graz | Lösungen zu den Übungsbeispielen