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]

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 …

http://www.w3.org/TR/html4/strict.dtd

Source: http://goo.gl/Bclus

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

http://filezilla-project.org/download.php

http://marcomponline.com/

http://www.youtube.com/watch?v=9VaM_wv0aQ4

tel:(727)%20537-6405

mailto:[email protected]

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.

http://validator.w3.org/

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

Education

Fundamentals of HTML5