Fundamentals of
http://www.slideshare.net/chadmairn                   @cmairn
Virtual Petting Zoo/Discussion      anymeeting.com/chadmairn             Want to            hangout?         gplus.to/chad...
In this webinar, learn:•   What HTML5 is and what it can do•   New HTML5 tags/elements/attributes•   Useful coding example...
HTML = Hypertext Markup Language• Displays web pages in a web browser.• Web browser uses the tags to interpret the  conten...
• HTML5 will be the  new standard for  HTML.• HTML 4.01 was born  in 1999.• HTML5 is still a work  in progress.• The major...
HTML <!DOCTYPE> Declaration                  The <!DOCTYPE> declaration is an instruction to the Web                    br...
Here is what a reference to a DTD looks like … <!DOCTYPE HTML PUBLIC "-//W3C//DTD            HTML 4.01//EN""http://www.w3....
Source: http://goo.gl/Bclus
New HTML5 Elements  <article>      <mark>  <aside>        <meter>  <audio>        <nav>  <bdi>          <output>  <canvas>...
Live Demo
Creating an ebook using jQuery Mobile with <iframe> to embed video. No plugins!
Uploading Files1. If you dont have an FTP application, then I recommend that you downloadand install the following: http:/...
To test you work visit …http://marcomponline.com/chadtest/Class/          LastName_FirstName/
Homework …• Pick 2 HTML5 tags (experiment with their  attributes) and add them to your practice Web  site.• Test and valid...
Next Week …• Share with the group good/bad experiences (e.g.,  what worked, what didn’t etc.)• Other coding examples• Goog...
http://www.slideshare.net/chadmairn                  @cmairn
Let’s   Hangout!gplus.to/chadmairn
Upcoming SlideShare
Loading in...5
×

Fundamentals of HTML5

1,161

Published on

HTML5 has changed the Web as we know it. The newest markup language has some exciting features that, for example, make it easy to embed and play multimedia content on the web without having to use proprietary plugins like Adobe’s Flash.

In this webinar, learn:

What HTML5 is and what it can do
New HTML5 tags
Useful coding examples
Testing and validation of your site
Future of HTML5

Participants will be given server space to create their own page and will be required to have a basic HTML editor like Notepad, Notepad++ or Eclipse.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,161
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Fundamentals of HTML5

  1. 1. Fundamentals of
  2. 2. http://www.slideshare.net/chadmairn @cmairn
  3. 3. Virtual Petting Zoo/Discussion anymeeting.com/chadmairn Want to hangout? gplus.to/chadmairn
  4. 4. In this webinar, learn:• What HTML5 is and what it can do• New HTML5 tags/elements/attributes• Useful coding examples• Uploading Files to a Web server• Testing and validation of your site• Future of HTML5
  5. 5. HTML = Hypertext Markup Language• Displays web pages in a web browser.• Web browser uses the tags to interpret the content of the page.• HTML elements consisting of tags enclosed in angle brackets (e.g., <html>)• Tags most commonly come in pairs like <h1> and </h1>• Some elements are unpaired (e.g., <img>)
  6. 6. • HTML5 will be the new standard for HTML.• HTML 4.01 was born in 1999.• HTML5 is still a work in progress.• The major browsers support many of the new HTML5 elements and APIs.
  7. 7. HTML <!DOCTYPE> Declaration The <!DOCTYPE> declaration is an instruction to the Web browser telling it what version of HTML the page is written in. HTML5 is not based on SGML, and therefore does not require a reference to a DTD. [Source: http://www.w3schools.com]<!DOCTYPE html><html><head><title>Title of the document</title></head><body>The content of the document......</body></html>
  8. 8. Here is what a reference to a DTD looks like … <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
  9. 9. Source: http://goo.gl/Bclus
  10. 10. New HTML5 Elements <article> <mark> <aside> <meter> <audio> <nav> <bdi> <output> <canvas> <progress> <command> <rp> <datalist> <rt> <details> <ruby> <embed> <section> <figcaption> <source> <figure> <summary> <footer> <time> <header> <track> <hgroup> <video> <keygen> <wbr>
  11. 11. Live Demo
  12. 12. Creating an ebook using jQuery Mobile with <iframe> to embed video. No plugins!
  13. 13. Uploading Files1. If you dont have an FTP application, then I recommend that you downloadand install the following: http://filezilla-project.org/download.php2. Upload files to your directory (e.g., lastname_firstname).3. When you begin to work with the FTP client, you will need to enter thefollowing credentials:•Host: marcomponline.com•Username: chadm•Password: java_cookie1A quick screencast video demonstrating how to login using the FileZilla FTPClient can be found at http://www.youtube.com/watch?v=9VaM_wv0aQ4.4. You will need either a text editor (TextEdit on mac or Notepad on PC) or atool like Dreamweaver.If you have problems, please contact Chad Mairn at (727) 537-6405 orat chadmairn@gmail.com.
  14. 14. To test you work visit …http://marcomponline.com/chadtest/Class/ LastName_FirstName/
  15. 15. Homework …• Pick 2 HTML5 tags (experiment with their attributes) and add them to your practice Web site.• Test and validate your site at http://validator.w3.org/• Please take good notes because I’d like to spend some time next week discussing any issues you may have had using HTML5.
  16. 16. Next Week …• Share with the group good/bad experiences (e.g., what worked, what didn’t etc.)• Other coding examples• Google Analytics• Discuss the future of HTML5• Questions and answers …
  17. 17. http://www.slideshare.net/chadmairn @cmairn
  18. 18. Let’s Hangout!gplus.to/chadmairn
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×