Fundamentals of HTML5
-
Upload
chad-mairn -
Category
Education
-
view
1.685 -
download
3
description
Transcript of Fundamentals of HTML5
Fundamentals of
http://www.slideshare.net/chadmairn
@cmairn
Virtual Petting Zoo/Discussion
Want to hangout?
gplus.to/chadmairn
anymeeting.com/chadmairn
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
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>)
• 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.
HTML <!DOCTYPE> Declaration
<!DOCTYPE html><html><head><title>Title of the document</title></head>
<body>The content of the document......</body>
</html>
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 PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
Here is what a reference to a DTD looks like …
Source: http://goo.gl/Bclus
New HTML5 Elements<article><aside><audio><bdi><canvas><command><datalist> <details><embed><figcaption><figure><footer><header><hgroup><keygen>
<mark><meter><nav><output><progress><rp><rt><ruby><section><source><summary><time><track><video><wbr>
Live Demo
Creating an ebook using jQuery Mobile with <iframe> to embed video. No plugins!
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].
Uploading Files
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 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.
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 …
http://www.slideshare.net/chadmairn
@cmairn
Let’s Hangout!
gplus.to/chadmairn