• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
#2 of HTML and CSS3
 

#2 of HTML and CSS3

on

  • 1,353 views

second session in HTML5 in DEVMIX team mini courses

second session in HTML5 in DEVMIX team mini courses

Statistics

Views

Total Views
1,353
Views on SlideShare
1,257
Embed Views
96

Actions

Likes
1
Downloads
59
Comments
0

2 Embeds 96

http://ahmedyousef972.wordpress.com 95
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    #2 of HTML and CSS3 #2 of HTML and CSS3 Presentation Transcript

    • Learn HTML5/CSS3part 2
      By:-AhmedYousef
      Co-founder DEVMIX team
      By:AhmedYousef
    • Project 1
      Surprise
      By:AhmedYousef
    • HTML5 Web Storage
      • HTMl5 storting data on the Client.
      • HTML5 uses twonew objects for storing data on the client :-
      local Storage :- stores data with no time limit.
      session Storage :- stores data for one session.
      By:AhmedYousef
    • The local Storage Object
      • How to writeIt (General) :-
      • <script type="text/javascript">
      localStorage.lastname=« ahmed";
      document.write("Last name: " + localStorage.lastname);
      </script>
      By:AhmedYousef
    • Con. The local Storage Object
      • Examble:- count # of visits,
      • <script type="text/javascript">
      if (localStorage.pagecount)
      { localStorage.pagecount=Number(localStorage.pagecount) +1; }
      else{ localStorage.pagecount=1; }
      document.write("Visits: " + localStorage.pagecount + " time(s).");
      </script>
      <p>Refresh the page to see the counterincrease.</p>
      <p>Close the browser window, and tryagain, and the counterwill continue.</p>
      By:AhmedYousef
    • The session Storage Object
      • How to write It (General) :-
      • <script type="text/javascript">
      sessionStorage.lastname="Smith";
      document.write(sessionStorage.lastname);
      </script>
      By:AhmedYousef
    • Con. The session Storage Object
      • Examble:- count # of visits,
      • <script type="text/javascript">
      if (sessionStorage.pagecount)
      { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; }
      else
      { sessionStorage.pagecount=1; }
      document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
      </script>
      <p>Refresh the page to see the counter increase.</p>
      <p>Close the browser window, and try again, and the counter has been reset.</p>
      By:AhmedYousef
    • HTML5 Input Types
      • HTML5 New Input Types:-
      • Email.
      • Url.
      • Number.
      • Range.
      • Date pickers (date, month, week, time, datetime, datetime-local)
      • Search.
      • Color.
      By:AhmedYousef
    • Con. HTML5 Input Types
      • Input Type – email:-
      • It isusedwith input fieldsthatcontain e-mails.
      • The value of the email field is automatically validated when the form is submitted.
      • Browser Support:-
      By:AhmedYousef
    • Con. HTML5 Input Types
      • How E-mail Works??
      • <!DOCTYPE HTML>
      <html>
      <body>
      <form action="#" method="get">
      E-mail: <input type="email" name="user_email" /><br />
      <input type="submit" />
      </form>
      </body>
      </html>
      By:AhmedYousef
    • Con. HTML5 Input Types
      • Input Type – Url:-
      • It isusedwith input fieldsthatcontainUrl.
      • It is automatically validated when the form is submitted.
      • Browser Support:-
      By:AhmedYousef
    • Con. HTML5 Input Types
      • How URL Works??
      <!DOCTYPE HTML>
      <html>
      <body>
      <form action=« #" method="get">
      Homepage: <input type="url" name="user_url" /><br />
      <input type="submit" />
      </form>
      </body>
      </html>
      By:AhmedYousef
    • Con. HTML5 Input Types
      • Input Type - number
      • It isusedwith input fieldsthatcontainnumeric value.
      • set restrictions on what numbers are accepted?!
      • Browser Support:-
      By:AhmedYousef
    • Con. HTML5 Input Types
      • How NumberWorks??
      • <!DOCTYPE HTML>
      <html>
      <body>
      <form action="#" method="get">
      Points: <input type="number" name="points" min="1" max="10" />
      <input type="submit" />
      </form>
      </body>
      </html>
      By:AhmedYousef
    • Con. HTML5 Input Types
      • Input Type – numberattributs:-
      By:AhmedYousef
    • Con. HTML5 Input Types
      • Input Type – range:-
      • It isusedwith input fieldsthatcontainvalue from a range of numbers.
      • set restrictions on what numbers are accepted
      • Browser Support:-
      • Have the sameattribute of Number.
      By:AhmedYousef
    • Con. HTML5 Input Types
      • How Range Works??
      <!DOCTYPE HTML>
      <html>
      <body>
      <form action=" #" method="get">
      Points: <input type="range" name="points" min="1" max="10" />
      <input type="submit" />
      </form>
      </body>
      </html>
      By:AhmedYousef
    • Con. HTML5 Input Types
      • Input Type - Date Pickers:-
      • There are several wayes to write Date:-
      date - Selects date, month and year
      month - Selects month and year
      week - Selects week and year
      time - Selects time (hour and minute)
      datetime - Selects time, date, month and year (UTC time)
      datetime-local - Selects time, date, month and year (local time)
      By:AhmedYousef
    • Con. HTML5 Input Types
      • How Date PickersWorks??
      <!DOCTYPE HTML>
      <html>
      <body>
      <form action="#" method="get">
      Date: <input type="date" name="user_date" />
      <input type="submit" />
      </form>
      </body>
      </html>
      By:AhmedYousef
    • Con. HTML5 Input Types
      • Input Type - Date Pickers:-
      • Browser Support:-
      By:AhmedYousef
    • Con. HTML5 Input Types
      • Input Type – search:-
      • The search field behaves like a regular text field.
      • The search type is used for search fields.
      • Browser Support:-
      By:AhmedYousef
    • Con. HTML5 Input Types
      How Search Works??
      • <form>
      <input type="text" name="q" size="15" maxlength="255" value="" placeholder="Search"/>
      <input type="submit" value="GO"/>
      </form
      By:AhmedYousef
    • Con. HTML5 Input Types
      • Input Type – color:-
      • It isusedwith input fieldsthatcontain a color.
      • Hint:-in Operaappearcolorpicker but in chrome support onlyheaxa values.
      • Browser Support:-
      By:AhmedYousef
    • Con. HTML5 Input Types
      • How Color Works??
      • <!DOCTYPE HTML>
      <html>
      <body>
      <form action="#" method="get">
      Color: <input type="color" name="user_color" />
      <input type="submit" />
      </form>
      </body>
      </html>
      By:AhmedYousef
    • Project2
      • Registerform for DEVMIX mini Course
      HTML5/CSS3
      By:AhmedYousef