Fundamentals of HTML5
Download as PPTX, PDF2 likes1,644 views
The document is a webinar overview on HTML5, detailing its capabilities, new elements, and coding examples. It emphasizes the significance of HTML5 as the emerging standard and provides guidance on uploading files and testing web pages. Additionally, it includes future discussions on HTML5 and encourages participants to experiment with HTML5 tags.
![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>](https://image.slidesharecdn.com/html5-130118143715-phpapp01/85/Fundamentals-of-HTML5-7-320.jpg)
Fundamentals of HTML5
- 3. Virtual Petting Zoo/Discussion anymeeting.com/chadmairn Want to hangout? gplus.to/chadmairn
- 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. 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. • 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. 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. 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">
- 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. Live Demo
- 12. Creating an ebook using jQuery Mobile with <iframe> to embed video. No plugins!
- 13. Uploading Files 1. If you don't have an FTP application, then I recommend that you download and install the following: http://filezilla-project.org/download.php 2. Upload files to your directory (e.g., lastname_firstname). 3. When you begin to work with the FTP client, you will need to enter the following credentials: •Host: marcomponline.com •Username: chadm •Password: java_cookie1 A quick screencast video demonstrating how to login using the FileZilla FTP Client 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 a tool like Dreamweaver. If you have problems, please contact Chad Mairn at (727) 537-6405 or at [email protected].
- 14. To test you work visit … http://marcomponline.com/chadtest/Class/ LastName_FirstName/
- 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. 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 …
- 18. Let’s Hangout! gplus.to/chadmairn