Embed Size (px)
DESCRIPTION
An introductory session for HTML5, session was introduced in Mozilla Power'13, the first event for Mozilla in Egypt.
Citation preview
<!DOCT
YPE ht
ml>
<html
lang=”
en”>
<head><ti
tle>HT
ML5</t
itle>
</head
>
Ibrahim Abdel Fattah Mohamed@bingorabbit
bingorabbit.com
lcomW !
Let's get back in
History..http://en.wikipedia.org/wiki/HTML
1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
I just had to take thehypertext idea and connect it tothe TCP and DNS ideasand — ta-da!— the World Wide Web.
–- Sir, Tim Berners-LeeKnown as the Creator of WWW
Sir. Tim Berners-Lee
The Father of The Internet
1995: HTML 2.0Just standardized rules what people have been already using before..and it wasn't that good!
1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
1997: HTML 3.2, Proposing 4.0Adding standard support for tables and applets..
1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
StrictTransitional
Frameset
1999: HTML 4.01Stable syntax and structure for HTML till it became the standard for web authoring.
1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
2000: XHTML 1.0Trying to move structure more towards XML's, but browsers manufactures were kinda stubborn!
1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
2000->: The LEAP!XHTML 2.0 Up then DOWN!, Flash, Multimedia, and AJAX
2004 - Present: HTML 5 RiseWHATWG, W3C adopts WHATWG work, Rich
applications, Video, Audio, APIs.Large companies involved.
1995 1997 1998 1999 2000 2002 2004 2006 2009 2010
But..
WHY?!
Simp licity..is the ultimate sophistication..
-– Leonardo Da Vinci
Photo Credit: http://www.flickr.com/photos/hugo_provoste/522495023/
!DOCTYPE
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Before..
<!DOCTYPE html>
After..
Interoperability
New Features..(Syntax)
<article>, <aside>, <header>, <footer>
<nav>, <section>, <audio>, <video>
<embed>, <canvas>, <progress>, <meter>
New Tags
<input type=”email” />
<input type=”url” />
<input type=”range” />
<input type=”date” />
<input type=”tel” />
<input type=”color” />
<input type=”number” />
FORMS!
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
FORMS!
Placeholder, Required, Patterns
<input pattern="[0-9][A-Z]{3}"
name="product"
type="text"
title="Single digit then 3 UC letters."/>
FORMS!
Geo LocationDEMO!
http://html5demos.com/geo
● 20 Things I learned about Browsers and Web: www.20thingsilearned.com● Angry Birds: http://angrybirds.com/● Evolution of the Web: http://evolutionofweb.appspot.com/● HTML5 Test: http://html5test.com● HTML5 Demos: http://html5demos.com/● Arena5: http://www.kevs3d.co.uk/dev/arena5/● Asteroids: http://www.kevs3d.co.uk/dev/asteroids/● HTML5 Visual Cheat Sheet: http://goo.gl/fL8DCa
Mobile Apps
HTML5 Mobile App DevelopmentHTML5 BoilerplateModernizrDive into HTML5 BookHTML5 DoctorHTML5 RocksHTML5 Readinesscaniuse.com
Keywords
Questions?
Ibrahim A. MohamedTweet to me:@bingorabbit
Thanks!:)
![HTML5 - W3C...HTML4 + CSS 56 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] Novos elementos (semânticos) HTML5 + CSS E o que ficou de fora do HTML5?](https://img.dokumen.tips/doc/110x75/5f9769938559bc0a406dee44/html5-w3c-html4-css-56-html5-futuro-da-web-futuro-da-web-html5-html.jpg)
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ......2.1.55 [HTML5] Section 4.9.5 The tbody element ..... 55 2.1.56 [HTML5] Section 4.9.8 The tr element..... 55 2.1.57 [HTML5]](https://img.dokumen.tips/doc/110x75/5fb29d840f1bb936bf5a22fb/ms-html5-microsoft-edge-internet-explorer-html5-2155-html5-section.jpg)
![[HTML5 CONVERSION] BEST HTML5 TEMPLATES TO INSPIRE YOU](https://img.dokumen.tips/doc/110x75/548cfd0eb47959e70c8b6512/html5-conversion-best-html5-templates-to-inspire-you.jpg)
