SlideShare ist ein Scribd-Unternehmen logo
1 von 28
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

Weitere ähnliche Inhalte

Ähnlich wie Gratis-Webinar HTML5 und CSS3 - Eduvision Ausbildungen

Liquid - Templating on Rails
Liquid - Templating on RailsLiquid - Templating on Rails
Liquid - Templating on Rails
gearwheeldotnet
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
Dirk Ginader
 

Ähnlich wie Gratis-Webinar HTML5 und CSS3 - Eduvision Ausbildungen (20)

Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
HTML5
HTML5HTML5
HTML5
 
CSS3 Entwicklung
CSS3 EntwicklungCSS3 Entwicklung
CSS3 Entwicklung
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
WordCamp 2010: Twenty Ten barrierefrei?
WordCamp 2010: Twenty Ten barrierefrei?WordCamp 2010: Twenty Ten barrierefrei?
WordCamp 2010: Twenty Ten barrierefrei?
 
Liquid - Templating on Rails
Liquid - Templating on RailsLiquid - Templating on Rails
Liquid - Templating on Rails
 
FMK2015: Virtuelle Tabellen by Arnold Kegebein
FMK2015: Virtuelle Tabellen by Arnold KegebeinFMK2015: Virtuelle Tabellen by Arnold Kegebein
FMK2015: Virtuelle Tabellen by Arnold Kegebein
 
Accessibility1x1
Accessibility1x1Accessibility1x1
Accessibility1x1
 
Moderner Webentwicklungs-Workflow
Moderner Webentwicklungs-WorkflowModerner Webentwicklungs-Workflow
Moderner Webentwicklungs-Workflow
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
 
FMK2016 - Marcel Moré - The Power of SVG
FMK2016 - Marcel Moré - The Power of SVGFMK2016 - Marcel Moré - The Power of SVG
FMK2016 - Marcel Moré - The Power of SVG
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
Cv wagener harald_20170830
Cv wagener harald_20170830Cv wagener harald_20170830
Cv wagener harald_20170830
 
Semantischer xhtml code 12w
Semantischer xhtml code 12wSemantischer xhtml code 12w
Semantischer xhtml code 12w
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
 
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene ...
 
Wer gewinnt das SQL-Rennen auf der Hadoop-Strecke?
Wer gewinnt das SQL-Rennen auf der Hadoop-Strecke?Wer gewinnt das SQL-Rennen auf der Hadoop-Strecke?
Wer gewinnt das SQL-Rennen auf der Hadoop-Strecke?
 

Mehr von Eduvision Ausbildungen

Mehr von Eduvision Ausbildungen (20)

Webinar Dashboards und Datenvisualisierung
Webinar Dashboards und DatenvisualisierungWebinar Dashboards und Datenvisualisierung
Webinar Dashboards und Datenvisualisierung
 
Webinar big data für unternehmen
Webinar big data für unternehmenWebinar big data für unternehmen
Webinar big data für unternehmen
 
Pinterest Gratis-Webinar
Pinterest Gratis-WebinarPinterest Gratis-Webinar
Pinterest Gratis-Webinar
 
Content Marketing Tutorial
Content Marketing TutorialContent Marketing Tutorial
Content Marketing Tutorial
 
Pinterest
PinterestPinterest
Pinterest
 
Webinar Facebook_2013
Webinar Facebook_2013Webinar Facebook_2013
Webinar Facebook_2013
 
Probestunde_App_oder_mobile_Website
Probestunde_App_oder_mobile_WebsiteProbestunde_App_oder_mobile_Website
Probestunde_App_oder_mobile_Website
 
App oder Mobile Website Slides zum Webinar
App oder Mobile Website Slides zum WebinarApp oder Mobile Website Slides zum Webinar
App oder Mobile Website Slides zum Webinar
 
Webinar Google AdWords
Webinar Google AdWords  Webinar Google AdWords
Webinar Google AdWords
 
Tutorial Mobile Marketing - QR-Code
Tutorial Mobile Marketing - QR-CodeTutorial Mobile Marketing - QR-Code
Tutorial Mobile Marketing - QR-Code
 
Tutorial Mobile Marketing QR-Code
Tutorial Mobile Marketing QR-CodeTutorial Mobile Marketing QR-Code
Tutorial Mobile Marketing QR-Code
 
E-Mail Marketing Webinar - Praxisnahe Einführung
E-Mail Marketing Webinar  - Praxisnahe EinführungE-Mail Marketing Webinar  - Praxisnahe Einführung
E-Mail Marketing Webinar - Praxisnahe Einführung
 
Creative Suite Probestunde
Creative Suite ProbestundeCreative Suite Probestunde
Creative Suite Probestunde
 
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision AusbildungenGratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
Gratis Wordpress Webinar - Web-Blogsystem Einführung mit Eduvision Ausbildungen
 
Google Analytics Webinar - Praxisnahe Einführung in Webstatistiktool - Eduvis...
Google Analytics Webinar - Praxisnahe Einführung in Webstatistiktool - Eduvis...Google Analytics Webinar - Praxisnahe Einführung in Webstatistiktool - Eduvis...
Google Analytics Webinar - Praxisnahe Einführung in Webstatistiktool - Eduvis...
 
Webinar Joomla!, Drupal & TYPO3 im Vergleich - Eduvision
Webinar Joomla!, Drupal & TYPO3 im Vergleich - EduvisionWebinar Joomla!, Drupal & TYPO3 im Vergleich - Eduvision
Webinar Joomla!, Drupal & TYPO3 im Vergleich - Eduvision
 
Gratis Xing Webinar - Präsentation
Gratis Xing Webinar - PräsentationGratis Xing Webinar - Präsentation
Gratis Xing Webinar - Präsentation
 
Gratis-Webinar Website-Usability
Gratis-Webinar Website-UsabilityGratis-Webinar Website-Usability
Gratis-Webinar Website-Usability
 
Webdesign & Webshop mit Magento Gratis-Probestunde - Eduvision
Webdesign & Webshop mit Magento Gratis-Probestunde - EduvisionWebdesign & Webshop mit Magento Gratis-Probestunde - Eduvision
Webdesign & Webshop mit Magento Gratis-Probestunde - Eduvision
 
Gratis Facebook-Webinar - Eduvision Ausbildungen
Gratis Facebook-Webinar - Eduvision AusbildungenGratis Facebook-Webinar - Eduvision Ausbildungen
Gratis Facebook-Webinar - Eduvision Ausbildungen
 

Gratis-Webinar HTML5 und CSS3 - Eduvision Ausbildungen

  • 1. 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
  • 2. 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
  • 3. HTML5 & CSS3 Webinar - www.eduvision.de Neues beim HTML • Basisgliederung einer Seite • Neue Tags • Video-Tags • Audio-Tags • Canvas-Element
  • 4. HTML5 & CSS3 Webinar - www.eduvision.de Neue Tags
  • 5. HTML5 & CSS3 Webinar - www.eduvision.de Traditionelle Gliederung
  • 6. HTML5 & CSS3 Webinar - www.eduvision.de Gliederung 2.0
  • 7. 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>
  • 8. HTML5 & CSS3 Webinar - www.eduvision.de Neue Formular-Feldtypen • Datetime • Datetime-local • Number • Range • Email • Url • Color
  • 9. HTML5 & CSS3 Webinar - www.eduvision.de Video <video src="meinvideo.ogg" /> und mit “controls” <video src="meinvideo.ogg" controls />
  • 10. 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>
  • 11. HTML5 & CSS3 Webinar - www.eduvision.de Canvas <canvas id=“Beispiel" width="200" height="200"></canvas>
  • 12. HTML5 & CSS3 Webinar - www.eduvision.de Canvasrider.com
  • 13. HTML5 & CSS3 Webinar - www.eduvision.de Storage • localStorage – Datensicherung ohne Zeitlimit • sessionStorage – Datensicherung für 1 Session
  • 14. HTML5 & CSS3 Webinar - www.eduvision.de Neues CSS3 • Farbe • Hintergrund • Ränder • Text • Transformation (2d / 3d)
  • 15. HTML5 & CSS3 Webinar - www.eduvision.de Farben: HSL • HSL-Farben (Hue, Saturation, Lightness) • HSLA-Farben (Hue, Saturation, Lightness, Alpha) • +A = Opacity
  • 16. HTML5 & CSS3 Webinar - www.eduvision.de Farben: RGBA • Alpha-Kanal (Opacity)
  • 17. HTML5 & CSS3 Webinar - www.eduvision.de Hintergrund • Größensteuerung/ Background Size • Mehrere Hintergründe (nicht breit unterstützt)
  • 18. 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
  • 19. HTML5 & CSS3 Webinar - www.eduvision.de Text • Textschatten/ Text shadow • Textübergang/ Text overflow • Textbruch/ Word wrap • Externe Schrifttypen (@font-face)
  • 20. HTML5 & CSS3 Webinar - www.eduvision.de Transformation • Drehen/ Rotate • Skalieren/ Scale • Neigen/ Skew • Übertragen/ Translate
  • 21. HTML5 & CSS3 Webinar - www.eduvision.de Rotate: 30 Grad
  • 22. HTML5 & CSS3 Webinar - www.eduvision.de Scale (transform)
  • 23. HTML5 & CSS3 Webinar - www.eduvision.de Skew
  • 24. HTML5 & CSS3 Webinar - www.eduvision.de Translate
  • 25. HTML5 & CSS3 Webinar - www.eduvision.de Kurs HTML5 & CSS3 • http://eduvision.de/html5-css3 • Alles Neue zu HTML5 • Alles Neue zu CSS3 • Praktisches Fallbeispiel
  • 26. HTML5 & CSS3 Webinar - www.eduvision.de Fragen? Twitter: twitter.com/eduvisionde Facebook: facebook.com/eduvisionde : https://www.xing.com/net/weblounge/
  • 27. 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
  • 28. Arjan Burger/ Ariane Kräutner Danke für Ihre Aufmerksamkeit! Eduvision Ausbildungen info@eduvision.de/at/ch