Learn HTML5/CSS3 By:-AhmedYousef Co-founder DEVMIX team BY:-AhmedYousef
let's Start…… <ul><li>We will start with HTML5 and will continue with CSS3. </li></ul>BY:-AhmedYousef
Previous knowledge  <ul><li>Before start you should know :- </li></ul><ul><li>HTML .  </li></ul><ul><li>CSS . </li></ul><u...
Today, We Will Cover... <ul><li>What is HTML5? </li></ul><ul><li>HTML5 is the next generation of HTML. </li></ul><ul><li>W...
Introduction  in details…. <ul><li>What is HTML5? </li></ul><ul><li>HTML5 will be the new standard for HTML, XHTML, and th...
Some rules for HTML5 were established…. <ul><li>New features should be based on HTML, CSS, DOM, and JavaScript </li></ul><...
Why I should learn HTML5…. <ul><li>Some of the most interesting new features in HTML5: </li></ul><ul><li>The canvas elemen...
So how …? <ul><li>How can I know if my browser support HTML5??!!! </li></ul><ul><li>http://www.html5test.com/ </li></ul><u...
So what is new?? <ul><li>The internet has changed a lot since HTML 4.01 became a standard in 1999. </li></ul><ul><li>Today...
let's talk about new…. <ul><li>New Markup Elements:-  like(<article>, <footer>, <header>, <section>,<nav>). </li></ul>BY:-...
And new… <ul><li>New Media Elements :- like(<audio>, <video>, <source>,<embed>). </li></ul><ul><li>The Canvas Element:- it...
After this boring intro. let's go to work  …. BY:-AhmedYousef
HTMl5 Basics <ul><li>Video ,Audio ,Canvas………,…….. And so on:- </li></ul>BY:-AhmedYousef
New Doc Type <ul><li>In HTML4:- </li></ul><ul><li>it is an instruction to the web browser about what version of the markup...
New Markup Elements <ul><li><Header> Tag:-  </li></ul><ul><li>Introduction to my home page. </li></ul><ul><li>Specifies a ...
Cont-New Markup Elements <ul><li>How <Header> works?? </li></ul><ul><li><Header> </li></ul><ul><li><h1>Welcome to my websi...
Cont. New Markup Elements <ul><li><Footer> Tag:- </li></ul><ul><li>defines the footer of a section or document. </li></ul>...
Cont. New Markup Elements <ul><li>How <Footer> works:- </li></ul><ul><li><!DOCTYPE HTML> </li></ul><ul><li><html> </li></u...
Cont. New Markup Elements <ul><li><Article> Tag:- </li></ul><ul><li>An article should make sense on its own and it should ...
Cont. New Markup Elements <ul><li>How <Article> works:- </li></ul><ul><li><article> <a href=&quot;http://blog.netscape.com...
Cont. New Markup Elements <ul><li><aside> Tag:- </li></ul><ul><li>defines some content aside from the content it is placed...
Cont. New Markup Elements <ul><li>How <Aside> works:- </li></ul><ul><li><p>My family and I visited Cairo  this summer.</p>...
Cont. New Markup Elements <ul><li><section> tag:- </li></ul><ul><li>defines sections in a document like :- </li></ul><ul><...
HTML5 Video <ul><li>Video on the Web:-  Until now, there has never been a standard for showing video on a web page. </li><...
Cont. HTML5 Video <ul><li>How can I use it?? </li></ul><ul><li><video src=&quot;movie.ogg&quot; width=&quot;320&quot; heig...
Cont. HTML5 Video <ul><li>All <video> Attributes:- </li></ul>BY:-AhmedYousef Value Attribute muted audio autoplay autoplay...
Cont. HTML5 Video <ul><li>Most strange  Examples:- </li></ul><ul><li>YoutubeNewlook </li></ul><ul><li>( http://www.youtube...
HTML5 Audio <ul><li>Audio on the Web:- Until now, there has never been a standard for playing audio on a web page. </li></...
Cont. HTML5 Audio <ul><li>How can I use it?? </li></ul><ul><li><audio src=&quot;song.ogg&quot; controls=&quot;controls&quo...
Cont. HTML5 Audio <ul><li>All <audio> Attributes:- </li></ul>BY:-AhmedYousef Value Attribute auto play auto play controls ...
Cont. HTML5 Audio <ul><li>Audio controls on different browsers:- </li></ul>BY:-AhmedYousef
HTML5 <canvas> <ul><li>What is Canvas?? </li></ul><ul><li><canvas> tag is used to display graphics. </li></ul><ul><li>it i...
Cont. HTML5 <canvas> <ul><li>How <Canvas> works:- </li></ul><ul><li><canvas id=&quot;myCanvas&quot;>your browser does not ...
Cont. HTML5 <canvas> BY:-AhmedYousef Value Attribute pixels height pixels width
Project 1 BY:-AhmedYousef
Upcoming SlideShare
Loading in...5
×

#1 of HTML and CSS3

2,367

Published on

first session in HTML5 in DEVMIX team mini courses

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,367
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
189
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

#1 of HTML and CSS3

  1. 1. Learn HTML5/CSS3 By:-AhmedYousef Co-founder DEVMIX team BY:-AhmedYousef
  2. 2. let's Start…… <ul><li>We will start with HTML5 and will continue with CSS3. </li></ul>BY:-AhmedYousef
  3. 3. Previous knowledge <ul><li>Before start you should know :- </li></ul><ul><li>HTML . </li></ul><ul><li>CSS . </li></ul><ul><li>Java Script . </li></ul><ul><li>Why??????? </li></ul><ul><li>New features should be based on HTML, CSS, DOM, and JavaScript </li></ul>BY:-AhmedYousef
  4. 4. Today, We Will Cover... <ul><li>What is HTML5? </li></ul><ul><li>HTML5 is the next generation of HTML. </li></ul><ul><li>What I gain from Learning it? </li></ul><ul><li>HTML5 ~= HTML + CSS + JS. </li></ul><ul><li>You can work offline . </li></ul><ul><li>You can draw online.!! </li></ul><ul><li>You can develop a mobile Apps!!!!!!!!!?? </li></ul><ul><li>Windows 8 Apps!!!??? </li></ul>BY:-AhmedYousef
  5. 5. Introduction in details…. <ul><li>What is HTML5? </li></ul><ul><li>HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. </li></ul><ul><li>HTML5 is still a work in progress. However, most modern browsers have some HTML5 support. </li></ul><ul><li>How Did HTML5 Get Started? </li></ul><ul><li>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). </li></ul>BY:-AhmedYousef
  6. 6. Some rules for HTML5 were established…. <ul><li>New features should be based on HTML, CSS, DOM, and JavaScript </li></ul><ul><li>Reduce the need for external plugins (like Flash) </li></ul><ul><li>Better error handling </li></ul><ul><li>More markup to replace scripting </li></ul><ul><li>HTML5 should be device independent </li></ul><ul><li>The development process should be visible to the public. </li></ul>BY:-AhmedYousef
  7. 7. Why I should learn HTML5…. <ul><li>Some of the most interesting new features in HTML5: </li></ul><ul><li>The canvas element for drawing </li></ul><ul><li>The video and audio elements for media playback </li></ul><ul><li>Better support for local offline storage </li></ul><ul><li>New content specific elements, like article, footer, header, nav, section </li></ul><ul><li>New form controls, like calendar, date, time, email, url . </li></ul>BY:-AhmedYousef
  8. 8. So how …? <ul><li>How can I know if my browser support HTML5??!!! </li></ul><ul><li>http://www.html5test.com/ </li></ul><ul><li>all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions. </li></ul>BY:-AhmedYousef
  9. 9. So what is new?? <ul><li>The internet has changed a lot since HTML 4.01 became a standard in 1999. </li></ul><ul><li>Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended to. These elements are deleted or re-written in HTML5. </li></ul><ul><li>To better handle today's internet use, HTML5 also includes new elements for better structure, drawing, media content, and better form handling. </li></ul>BY:-AhmedYousef
  10. 10. let's talk about new…. <ul><li>New Markup Elements:- like(<article>, <footer>, <header>, <section>,<nav>). </li></ul>BY:-AhmedYousef
  11. 11. And new… <ul><li>New Media Elements :- like(<audio>, <video>, <source>,<embed>). </li></ul><ul><li>The Canvas Element:- it is a mazing tag??!! </li></ul><ul><li>New Form Elements:- like(<datalist>,<Date pickers>,<keygen>, <email>, <url>,<number>, <search>,<datalist>). </li></ul>BY:-AhmedYousef
  12. 12. After this boring intro. let's go to work  …. BY:-AhmedYousef
  13. 13. HTMl5 Basics <ul><li>Video ,Audio ,Canvas………,…….. And so on:- </li></ul>BY:-AhmedYousef
  14. 14. New Doc Type <ul><li>In HTML4:- </li></ul><ul><li>it is an instruction to the web browser about what version of the markup language the page is written in. </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li>In HTML5:- </li></ul><ul><li><!DOCTYPE html> </li></ul>BY:-AhmedYousef
  15. 15. New Markup Elements <ul><li><Header> Tag:- </li></ul><ul><li>Introduction to my home page. </li></ul><ul><li>Specifies a group of navigation elements for the document. </li></ul><ul><li>Browser Support:- </li></ul><ul><li>All major browsers support <Header> Tag. </li></ul>BY:-AhmedYousef
  16. 16. Cont-New Markup Elements <ul><li>How <Header> works?? </li></ul><ul><li><Header> </li></ul><ul><li><h1>Welcome to my website</h1> </li></ul><ul><li><p>My name is Ahmed Youssef</p> </li></ul><ul><li></Header> </li></ul><ul><li><p> the rest of page</p> </li></ul>BY:-AhmedYousef
  17. 17. Cont. New Markup Elements <ul><li><Footer> Tag:- </li></ul><ul><li>defines the footer of a section or document. </li></ul><ul><li>contains the name of the author, the date the document was written and/or contact information. </li></ul><ul><li>Browser Support:- </li></ul><ul><li>All major browsers support <Header> Tag . </li></ul>BY:-AhmedYousef
  18. 18. Cont. New Markup Elements <ul><li>How <Footer> works:- </li></ul><ul><li><!DOCTYPE HTML> </li></ul><ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><footer><p>This document was written in 2011</p> </li></ul><ul><li><p> all copyright reserved &copy; DEVMIX 2011 </p> </li></ul><ul><li></footer> </li></ul><ul><li></body></html> </li></ul>BY:-AhmedYousef
  19. 19. Cont. New Markup Elements <ul><li><Article> Tag:- </li></ul><ul><li>An article should make sense on its own and it should be possible to distribute. </li></ul><ul><li>Examples of possible articles: </li></ul><ul><li>forum post </li></ul><ul><li>newspaper article </li></ul><ul><li>blog entry </li></ul><ul><li>Browser Support:- </li></ul><ul><li>All major browsers support <Article> Tag. </li></ul>BY:-AhmedYousef
  20. 20. Cont. New Markup Elements <ul><li>How <Article> works:- </li></ul><ul><li><article> <a href=&quot;http://blog.netscape.com/2007/12/28/ end-of-support-for-netscape-web-browsers&quot;> Netscape is dead</a><br /> AOL has a long history on the internet, being one of the first companies to really get people online..... </article> </li></ul>BY:-AhmedYousef
  21. 21. Cont. New Markup Elements <ul><li><aside> Tag:- </li></ul><ul><li>defines some content aside from the content it is placed in. </li></ul><ul><li>The aside content should be related to the surrounding content. </li></ul><ul><li>Browser Support:- </li></ul><ul><li>All major browsers support <Aside> Tag . </li></ul>BY:-AhmedYousef
  22. 22. Cont. New Markup Elements <ul><li>How <Aside> works:- </li></ul><ul><li><p>My family and I visited Cairo this summer.</p> <aside> <h4>Tahrir Square</h4> Cairo is the biggest city in Egypt . </aside> </li></ul>BY:-AhmedYousef
  23. 23. Cont. New Markup Elements <ul><li><section> tag:- </li></ul><ul><li>defines sections in a document like :- </li></ul><ul><li>Chapters. </li></ul><ul><li>Browser Support:- </li></ul><ul><li>All major browsers support <Section> Tag </li></ul>BY:-AhmedYousef
  24. 24. HTML5 Video <ul><li>Video on the Web:- Until now, there has never been a standard for showing video on a web page. </li></ul><ul><li>Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins. </li></ul><ul><li>HTML5 specifies a standard way to include video, with the video element. </li></ul><ul><li>Video Formats:- (Ogg , MPEG 4 , WebM). </li></ul><ul><li>Hint ( all works in chrome). </li></ul>BY:-AhmedYousef
  25. 25. Cont. HTML5 Video <ul><li>How can I use it?? </li></ul><ul><li><video src=&quot;movie.ogg&quot; width=&quot;320&quot; height=&quot;240&quot; controls=&quot;controls&quot;> Your browser does not support the video tag. </video> </li></ul><ul><li><video width=&quot;320&quot; height=&quot;240&quot; controls=&quot;controls&quot;>   <source src=&quot;movie.ogg&quot; type=&quot;video/ogg&quot; />   <source src=&quot;movie.mp4&quot; type=&quot;video/mp4&quot; />   <source src=&quot;movie.webm&quot; type=&quot;video/webm&quot; /> Your browser does not support the video tag. </video>(use more formats). </li></ul>BY:-AhmedYousef
  26. 26. Cont. HTML5 Video <ul><li>All <video> Attributes:- </li></ul>BY:-AhmedYousef Value Attribute muted audio autoplay autoplay controls controls pixels height loop loop url poster preload preload url src pixels width
  27. 27. Cont. HTML5 Video <ul><li>Most strange Examples:- </li></ul><ul><li>YoutubeNewlook </li></ul><ul><li>( http://www.youtube.com/testtube ). </li></ul><ul><li><video> element support:- </li></ul>BY:-AhmedYousef IE Firefox Safari Chrome Opera iPhone Android 9.0+ 3.5+ 3.0+ 3.0+ 10.5+ 1.0+ 2.0+
  28. 28. HTML5 Audio <ul><li>Audio on the Web:- Until now, there has never been a standard for playing audio on a web page. </li></ul><ul><li>Today, most audio are played through a plugin (like flash). However, not all browsers have the same plugins. </li></ul><ul><li>HTML5 specifies a standard way to include audio, with the audio element. </li></ul><ul><li>The audio element can play sound files, or an audio stream. </li></ul><ul><li>Audio Formats:- (Ogg Vorbis, MP3, Wav).Hint:- all works in chrome. </li></ul>BY:-AhmedYousef
  29. 29. Cont. HTML5 Audio <ul><li>How can I use it?? </li></ul><ul><li><audio src=&quot;song.ogg&quot; controls=&quot;controls&quot;> Your browser does not support the audio element. </audio>. </li></ul><ul><li><audio controls=&quot;controls&quot;>   <source src=&quot;song.ogg&quot; type=&quot;audio/ogg&quot; />   <source src=&quot;song.mp3&quot; type=&quot;audio/mpeg&quot; /> Your browser does not support the audio element. </audio>(use more formats). </li></ul>BY:-AhmedYousef
  30. 30. Cont. HTML5 Audio <ul><li>All <audio> Attributes:- </li></ul>BY:-AhmedYousef Value Attribute auto play auto play controls controls loop loop preload preload url src
  31. 31. Cont. HTML5 Audio <ul><li>Audio controls on different browsers:- </li></ul>BY:-AhmedYousef
  32. 32. HTML5 <canvas> <ul><li>What is Canvas?? </li></ul><ul><li><canvas> tag is used to display graphics. </li></ul><ul><li>it is only a container for graphics, you must use a script to actually paint graphics. </li></ul><ul><li>Browser Support:- </li></ul><ul><li>All major browsers support <Canvas> Tag. </li></ul>BY:-AhmedYousef
  33. 33. Cont. HTML5 <canvas> <ul><li>How <Canvas> works:- </li></ul><ul><li><canvas id=&quot;myCanvas&quot;>your browser does not support the canvas tag </canvas> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>varcanvas=document.getElementById('myCanv'); </li></ul><ul><li>var ctx=canvas.getContext('2d'); </li></ul><ul><li>ctx.fillStyle='#FF0000'; </li></ul><ul><li>ctx.fillRect(0,0,80,100); </li></ul><ul><li></script> </li></ul>BY:-AhmedYousef
  34. 34. Cont. HTML5 <canvas> BY:-AhmedYousef Value Attribute pixels height pixels width
  35. 35. Project 1 BY:-AhmedYousef
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×