Arjan Burger/ Ariane Kräutner
Webinar
HTML5 & CSS3
Welche neuen Entwicklungen und Möglichkeiten
gibt es im Bereich HTML und CSS?
Eduvision Ausbildungen
www.eduvision.de/html5-css3
HTML5 & CSS3 Webinar - www.eduvision.de
Was besprechen wir?
• Neues im Bereich HTML5
(Tags, Gliederung usw.)
• Neues im Bereich CSS3
(Zeichen, Farben, Ränder usw.)
• Wichtige Teile: Status Flash und Javascript
HTML5 & CSS3 Webinar - www.eduvision.de
Neues beim HTML
• Basisgliederung einer Seite
• Neue Tags
• Video-Tags
• Audio-Tags
• Canvas-Element
HTML5 & CSS3 Webinar - www.eduvision.de
Neue Tags
HTML5 & CSS3 Webinar - www.eduvision.de
Traditionelle Gliederung
HTML5 & CSS3 Webinar - www.eduvision.de
Gliederung 2.0
HTML5 & CSS3 Webinar - www.eduvision.de
In HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8">
<title>HTML5</title>
</head>
<body>
<header>
<nav></nav>
</header>
<section>
<article>
<header></header>
<figure></figure>
<footer></footer>
<dialog><dialog>
</article>
<aside></aside>
</section>
<footer></footer>
</body>
</html>
HTML5 & CSS3 Webinar - www.eduvision.de
Neue Formular-Feldtypen
• Datetime
• Datetime-local
• Number
• Range
• Email
• Url
• Color
HTML5 & CSS3 Webinar - www.eduvision.de
Video
<video src="meinvideo.ogg" />
und mit “controls”
<video src="meinvideo.ogg" controls />
HTML5 & CSS3 Webinar - www.eduvision.de
Audio
<audio src="meinaudio.ogg"></audio>
<audio src="meinaudio.ogg" autoplay controls
loop>
<a href="meinaudio.ogg">download</a>
</audio>
HTML5 & CSS3 Webinar - www.eduvision.de
Canvas
<canvas id=“Beispiel" width="200" height="200"></canvas>
HTML5 & CSS3 Webinar - www.eduvision.de
Canvasrider.com
HTML5 & CSS3 Webinar - www.eduvision.de
Storage
• localStorage – Datensicherung ohne Zeitlimit
• sessionStorage – Datensicherung für 1
Session
HTML5 & CSS3 Webinar - www.eduvision.de
Neues CSS3
• Farbe
• Hintergrund
• Ränder
• Text
• Transformation (2d / 3d)
HTML5 & CSS3 Webinar - www.eduvision.de
Farben: HSL
• HSL-Farben (Hue, Saturation, Lightness)
• HSLA-Farben (Hue, Saturation, Lightness,
Alpha)
• +A = Opacity
HTML5 & CSS3 Webinar - www.eduvision.de
Farben: RGBA
• Alpha-Kanal (Opacity)
HTML5 & CSS3 Webinar - www.eduvision.de
Hintergrund
• Größensteuerung/ Background Size
• Mehrere Hintergründe (nicht breit unterstützt)
HTML5 & CSS3 Webinar - www.eduvision.de
Ränder
• Farbenübergänge/ Colored borders
• Bildübergänge/ Border image
• Abgerundete Ecken/ Border radius
• Schatten/ Box shadow
HTML5 & CSS3 Webinar - www.eduvision.de
Text
• Textschatten/ Text shadow
• Textübergang/ Text overflow
• Textbruch/ Word wrap
• Externe Schrifttypen (@font-face)
HTML5 & CSS3 Webinar - www.eduvision.de
Transformation
• Drehen/ Rotate
• Skalieren/ Scale
• Neigen/ Skew
• Übertragen/ Translate
HTML5 & CSS3 Webinar - www.eduvision.de
Rotate: 30 Grad
HTML5 & CSS3 Webinar - www.eduvision.de
Scale (transform)
HTML5 & CSS3 Webinar - www.eduvision.de
Skew
HTML5 & CSS3 Webinar - www.eduvision.de
Translate
HTML5 & CSS3 Webinar - www.eduvision.de
Kurs HTML5 & CSS3
• http://eduvision.de/html5-css3
• Alles Neue zu HTML5
• Alles Neue zu CSS3
• Praktisches Fallbeispiel
HTML5 & CSS3 Webinar - www.eduvision.de
Fragen?
Twitter: twitter.com/eduvisionde
Facebook: facebook.com/eduvisionde
: https://www.xing.com/net/weblounge/
HTML5 & CSS3 Webinar - www.eduvision.de
Später Fragen?
Rufen Sie an oder mailen Sie uns!
+49 (0) 211 237 06 572
+43 (0) 720 88 19 05
+41 (0) 43 508 14 91
info@eduvision.de/at/ch
Arjan Burger/ Ariane Kräutner
Danke für Ihre Aufmerksamkeit!
Eduvision Ausbildungen
info@eduvision.de/at/ch

Gratis-Webinar HTML5 und CSS3 - Eduvision Ausbildungen

  • 1.
    Arjan Burger/ ArianeKräutner Webinar HTML5 & CSS3 Welche neuen Entwicklungen und Möglichkeiten gibt es im Bereich HTML und CSS? Eduvision Ausbildungen www.eduvision.de/html5-css3
  • 2.
    HTML5 & CSS3Webinar - www.eduvision.de Was besprechen wir? • Neues im Bereich HTML5 (Tags, Gliederung usw.) • Neues im Bereich CSS3 (Zeichen, Farben, Ränder usw.) • Wichtige Teile: Status Flash und Javascript
  • 3.
    HTML5 & CSS3Webinar - www.eduvision.de Neues beim HTML • Basisgliederung einer Seite • Neue Tags • Video-Tags • Audio-Tags • Canvas-Element
  • 4.
    HTML5 & CSS3Webinar - www.eduvision.de Neue Tags
  • 5.
    HTML5 & CSS3Webinar - www.eduvision.de Traditionelle Gliederung
  • 6.
    HTML5 & CSS3Webinar - www.eduvision.de Gliederung 2.0
  • 7.
    HTML5 & CSS3Webinar - www.eduvision.de In HTML5 <!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="utf-8"> <title>HTML5</title> </head> <body> <header> <nav></nav> </header> <section> <article> <header></header> <figure></figure> <footer></footer> <dialog><dialog> </article> <aside></aside> </section> <footer></footer> </body> </html>
  • 8.
    HTML5 & CSS3Webinar - www.eduvision.de Neue Formular-Feldtypen • Datetime • Datetime-local • Number • Range • Email • Url • Color
  • 9.
    HTML5 & CSS3Webinar - www.eduvision.de Video <video src="meinvideo.ogg" /> und mit “controls” <video src="meinvideo.ogg" controls />
  • 10.
    HTML5 & CSS3Webinar - www.eduvision.de Audio <audio src="meinaudio.ogg"></audio> <audio src="meinaudio.ogg" autoplay controls loop> <a href="meinaudio.ogg">download</a> </audio>
  • 11.
    HTML5 & CSS3Webinar - www.eduvision.de Canvas <canvas id=“Beispiel" width="200" height="200"></canvas>
  • 12.
    HTML5 & CSS3Webinar - www.eduvision.de Canvasrider.com
  • 13.
    HTML5 & CSS3Webinar - www.eduvision.de Storage • localStorage – Datensicherung ohne Zeitlimit • sessionStorage – Datensicherung für 1 Session
  • 14.
    HTML5 & CSS3Webinar - www.eduvision.de Neues CSS3 • Farbe • Hintergrund • Ränder • Text • Transformation (2d / 3d)
  • 15.
    HTML5 & CSS3Webinar - www.eduvision.de Farben: HSL • HSL-Farben (Hue, Saturation, Lightness) • HSLA-Farben (Hue, Saturation, Lightness, Alpha) • +A = Opacity
  • 16.
    HTML5 & CSS3Webinar - www.eduvision.de Farben: RGBA • Alpha-Kanal (Opacity)
  • 17.
    HTML5 & CSS3Webinar - www.eduvision.de Hintergrund • Größensteuerung/ Background Size • Mehrere Hintergründe (nicht breit unterstützt)
  • 18.
    HTML5 & CSS3Webinar - www.eduvision.de Ränder • Farbenübergänge/ Colored borders • Bildübergänge/ Border image • Abgerundete Ecken/ Border radius • Schatten/ Box shadow
  • 19.
    HTML5 & CSS3Webinar - www.eduvision.de Text • Textschatten/ Text shadow • Textübergang/ Text overflow • Textbruch/ Word wrap • Externe Schrifttypen (@font-face)
  • 20.
    HTML5 & CSS3Webinar - www.eduvision.de Transformation • Drehen/ Rotate • Skalieren/ Scale • Neigen/ Skew • Übertragen/ Translate
  • 21.
    HTML5 & CSS3Webinar - www.eduvision.de Rotate: 30 Grad
  • 22.
    HTML5 & CSS3Webinar - www.eduvision.de Scale (transform)
  • 23.
    HTML5 & CSS3Webinar - www.eduvision.de Skew
  • 24.
    HTML5 & CSS3Webinar - www.eduvision.de Translate
  • 25.
    HTML5 & CSS3Webinar - www.eduvision.de Kurs HTML5 & CSS3 • http://eduvision.de/html5-css3 • Alles Neue zu HTML5 • Alles Neue zu CSS3 • Praktisches Fallbeispiel
  • 26.
    HTML5 & CSS3Webinar - www.eduvision.de Fragen? Twitter: twitter.com/eduvisionde Facebook: facebook.com/eduvisionde : https://www.xing.com/net/weblounge/
  • 27.
    HTML5 & CSS3Webinar - www.eduvision.de Später Fragen? Rufen Sie an oder mailen Sie uns! +49 (0) 211 237 06 572 +43 (0) 720 88 19 05 +41 (0) 43 508 14 91 info@eduvision.de/at/ch
  • 28.
    Arjan Burger/ ArianeKräutner Danke für Ihre Aufmerksamkeit! Eduvision Ausbildungen info@eduvision.de/at/ch