#2 of HTML and CSS3

1,413 views

Published on

second session in HTML5 in DEVMIX team mini courses

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,413
On SlideShare
0
From Embeds
0
Number of Embeds
156
Actions
Shares
0
Downloads
65
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

#2 of HTML and CSS3

  1. 1. Learn HTML5/CSS3part 2<br />By:-AhmedYousef<br />Co-founder DEVMIX team<br />By:AhmedYousef<br />
  2. 2. Project 1<br />Surprise<br />By:AhmedYousef<br />
  3. 3. HTML5 Web Storage<br /><ul><li>HTMl5 storting data on the Client.
  4. 4. HTML5 uses twonew objects for storing data on the client :-</li></ul>local Storage :- stores data with no time limit.<br />session Storage :- stores data for one session.<br />By:AhmedYousef<br />
  5. 5. The local Storage Object<br /><ul><li>How to writeIt (General) :-
  6. 6. <script type="text/javascript"></li></ul>localStorage.lastname=« ahmed";<br />document.write("Last name: " + localStorage.lastname);<br /></script><br />By:AhmedYousef<br />
  7. 7. Con. The local Storage Object<br /><ul><li>Examble:- count # of visits,
  8. 8. <script type="text/javascript"></li></ul>if (localStorage.pagecount)<br />{ localStorage.pagecount=Number(localStorage.pagecount) +1; }<br />else{ localStorage.pagecount=1; }<br />document.write("Visits: " + localStorage.pagecount + " time(s).");<br /></script> <br /><p>Refresh the page to see the counterincrease.</p><br /><p>Close the browser window, and tryagain, and the counterwill continue.</p><br />By:AhmedYousef<br />
  9. 9. The session Storage Object<br /><ul><li>How to write It (General) :-
  10. 10. <script type="text/javascript"></li></ul>sessionStorage.lastname="Smith";<br />document.write(sessionStorage.lastname);<br /></script><br />By:AhmedYousef<br />
  11. 11. Con. The session Storage Object<br /><ul><li>Examble:- count # of visits,
  12. 12. <script type="text/javascript"></li></ul>if (sessionStorage.pagecount)<br />{ sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; }<br />else<br />{ sessionStorage.pagecount=1; }<br />document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");<br /></script> <br /><p>Refresh the page to see the counter increase.</p><br /><p>Close the browser window, and try again, and the counter has been reset.</p><br />By:AhmedYousef<br />
  13. 13. HTML5 Input Types<br /><ul><li>HTML5 New Input Types:-
  14. 14. Email.
  15. 15. Url.
  16. 16. Number.
  17. 17. Range.
  18. 18. Date pickers (date, month, week, time, datetime, datetime-local)
  19. 19. Search.
  20. 20. Color.</li></ul>By:AhmedYousef<br />
  21. 21. Con. HTML5 Input Types<br /><ul><li>Input Type – email:-
  22. 22. It isusedwith input fieldsthatcontain e-mails.
  23. 23. The value of the email field is automatically validated when the form is submitted.
  24. 24. Browser Support:-</li></ul>By:AhmedYousef<br />
  25. 25. Con. HTML5 Input Types<br /><ul><li>How E-mail Works??
  26. 26. <!DOCTYPE HTML></li></ul><html><br /><body><br /><form action="#" method="get"><br />E-mail: <input type="email" name="user_email" /><br /><br /><input type="submit" /><br /></form><br /></body><br /></html><br />By:AhmedYousef<br />
  27. 27. Con. HTML5 Input Types<br /><ul><li>Input Type – Url:-
  28. 28. It isusedwith input fieldsthatcontainUrl.
  29. 29. It is automatically validated when the form is submitted.
  30. 30. Browser Support:-</li></ul>By:AhmedYousef<br />
  31. 31. Con. HTML5 Input Types<br /><ul><li>How URL Works??</li></ul><!DOCTYPE HTML><br /><html><br /><body><br /><form action=« #" method="get"><br />Homepage: <input type="url" name="user_url" /><br /><br /><input type="submit" /><br /></form><br /></body><br /></html><br />By:AhmedYousef<br />
  32. 32. Con. HTML5 Input Types<br /><ul><li>Input Type - number
  33. 33. It isusedwith input fieldsthatcontainnumeric value.
  34. 34. set restrictions on what numbers are accepted?!
  35. 35. Browser Support:-</li></ul>By:AhmedYousef<br />
  36. 36. Con. HTML5 Input Types<br /><ul><li>How NumberWorks??
  37. 37. <!DOCTYPE HTML></li></ul><html><br /><body><br /><form action="#" method="get"><br />Points: <input type="number" name="points" min="1" max="10" /><br /><input type="submit" /><br /></form><br /></body><br /></html><br />By:AhmedYousef<br />
  38. 38. Con. HTML5 Input Types<br /><ul><li>Input Type – numberattributs:-</li></ul>By:AhmedYousef<br />
  39. 39. Con. HTML5 Input Types<br /><ul><li>Input Type – range:-
  40. 40. It isusedwith input fieldsthatcontainvalue from a range of numbers.
  41. 41. set restrictions on what numbers are accepted
  42. 42. Browser Support:-
  43. 43. Have the sameattribute of Number.</li></ul>By:AhmedYousef<br />
  44. 44. Con. HTML5 Input Types<br /><ul><li>How Range Works??</li></ul><!DOCTYPE HTML><br /><html><br /><body><br /><form action=" #" method="get"><br />Points: <input type="range" name="points" min="1" max="10" /><br /><input type="submit" /><br /></form><br /></body><br /></html><br />By:AhmedYousef<br />
  45. 45. Con. HTML5 Input Types<br /><ul><li>Input Type - Date Pickers:-
  46. 46. There are several wayes to write Date:-</li></ul>date - Selects date, month and year<br />month - Selects month and year<br />week - Selects week and year<br />time - Selects time (hour and minute)<br />datetime - Selects time, date, month and year (UTC time)<br />datetime-local - Selects time, date, month and year (local time)<br />By:AhmedYousef<br />
  47. 47. Con. HTML5 Input Types<br /><ul><li>How Date PickersWorks??</li></ul><!DOCTYPE HTML><br /><html><br /><body><br /><form action="#" method="get"><br />Date: <input type="date" name="user_date" /><br /><input type="submit" /><br /></form><br /></body><br /></html><br />By:AhmedYousef<br />
  48. 48. Con. HTML5 Input Types<br /><ul><li>Input Type - Date Pickers:-
  49. 49. Browser Support:-</li></ul>By:AhmedYousef<br />
  50. 50. Con. HTML5 Input Types<br /><ul><li>Input Type – search:-
  51. 51. The search field behaves like a regular text field.
  52. 52. The search type is used for search fields.
  53. 53. Browser Support:-</li></ul>By:AhmedYousef<br />
  54. 54. Con. HTML5 Input Types<br />How Search Works??<br /><ul><li><form></li></ul><input type="text" name="q" size="15" maxlength="255" value="" placeholder="Search"/><br /><input type="submit" value="GO"/><br /></form<br />By:AhmedYousef<br />
  55. 55. Con. HTML5 Input Types<br /><ul><li>Input Type – color:-
  56. 56. It isusedwith input fieldsthatcontain a color.
  57. 57. Hint:-in Operaappearcolorpicker but in chrome support onlyheaxa values.
  58. 58. Browser Support:-</li></ul>By:AhmedYousef<br />
  59. 59. Con. HTML5 Input Types<br /><ul><li>How Color Works??
  60. 60. <!DOCTYPE HTML></li></ul><html><br /><body><br /><form action="#" method="get"><br />Color: <input type="color" name="user_color" /><br /><input type="submit" /><br /></form><br /></body><br /></html><br />By:AhmedYousef<br />
  61. 61. Project2<br /><ul><li>Registerform for DEVMIX mini Course </li></ul>HTML5/CSS3<br />By:AhmedYousef<br />

×