Html5 - short intro

•

1 gefällt mir•1,229 views

jeiseman

Technologie News & Politik

HTML5
Jason Eiseman
Librarian for Emerging Technologies
Yale Law School

<title>Hypertext Links</title>
<h1>Links and Anchors</h1>
A link is the connection between one piece of
<a href=WhatIs.html>hypertext</a> and another.

1990

“Support Existing Content”

HTML5 Design Principles:http://www.w3.org/TR/html-design-principles

W3C

HTML 4.01 - 1999
XHTML 1.0 - 2002
XHTML 1.1 - 2010

http://www.w3.org/

Web Hypertext Application
Technology Working Group

WHATWG

Web Forms 2.0 - 2004

http://www.whatwg.org

WHATWG & W3C

HTML5 - 2008 - working draft
2012? - candidate
2022? - standard

http://www.w3.org

Internet
Firefox Chrome Explorer 9 Safari Opera

all support HTML5 today

Today?

<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML: XHTML 1.0 Strict//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5: <!DOCTYPE html>

DOCTYPE

XHTML: <script type="text/javascript" src="javascript.js"></script>

HTML5: <script src="javascript.js"></script>

Scripts

XHTML: <link type="text/css" rel="stylesheet" media="all"
href="style.css" />

HTML5: <link rel="stylesheet" href="style.css" />

Stylesheets

<div id= "header">
<div id= "nav">

<div id= "section"> <div id= "sidebar">

<div id= "footer">

Semantics & Page Structure

<header>
<nav>

<article>
<section> <aside>

<footer>

Semantics & Page Structure

Microformats

Semantics & Page Structure

<input name="email" type="email" />
<input name="url" type="url" />

Forms

http://jasoneiseman.com/aall11/forms.html

Forms

<canvas id="theCanvas" width="800" height="800">

</canvas>

Canvas

<script type="application/javascript">
function draw() {
var canvas=document.getElementById('theCanvas');
var context=canvas.getContext('2d');
context.strokeRect(10, 10, 600, 200);
context.font="bold 40px sans-serif";

Canvas

<body onload="draw()">
<canvas id="theCanvas" width="800" height="800">
<img src="carrells.gif" />
</canvas>
</body>

Canvas

http://jasoneiseman.com/aall11/canvas.html

Canvas

Canvas - paper.js - available at: http://paperjs.org

<video src="movie.mp4" controls width="360"
height="240" poster= "placeholder.jpg ">

</video>

Video

X Ogg WebM/VP8
Firefox

X Ogg WebM/VP8
Chrome

H.264 X X
Internet Explorer 9

H.264 X X
Safari

Video

http://jasoneiseman.com/aall11/video.html

Video

<video controls preload width="270" height="186" poster ="poster.png">
<source src="http://jasoneiseman.com/aall11/chain.mp4" type="video/
mp4">
<source src="http://jasoneiseman.com/aall11/chain.ogv" type="video/
ogg">
<object width="270" height="186">
<param name="movie" value="http://jasoneiseman.com/aall11/
chain.swf">
<embed src="http://jasoneiseman.com/aall11/chain.swf" width="270"
height="186">
</object>
</video>

Video

<video width="270" height="186" controls preload poster ="poster.png">

Video

<source src="http://jasoneiseman.com/aall11/chain.mp4" type="video/
mp4">
<source src="http://jasoneiseman.com/aall11/chain.ogv" type="video/
ogg">

Video

<object width="270" height="186">
<param name="movie" value="http://jasoneiseman.com/aall11/
chain.swf">
<embed src="http://jasoneiseman.com/aall11/chain.swf" width="270"
height="186">
</object>

Video

<head>
<script type="text/javascript" src="http://html5.kaltura.org/js" >
</script>
</head>
<body>
<video kentryid="0_swup5zao" kwidgetid="_243342"></video>
</body>

Video

Dive Into HTML5
http://diveintohtml5.org/video.html

Video

<audio src="audio.mp3" controls>

</audio>

Audio

<audio controls>
<source src="audio.mp3" type= "audio/mpeg">
<source src="audio.ogg" type= "audio/ogg">
</audio>

Audio

http://jasoneiseman.com/aall11/audio.html

Audio

offline web applications

Advanced Functionality

http://www.abookapart.com/products/html5-for-web-designers

http://jasoneiseman.com/aall11.zip
jasoneiseman@gmail.com

Further Reading

Empfohlen

$C:\fakepath\url$ $C:\fakepath\url$

C:\fakepath\urlguest6b97bc

More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS W...Shift Conference

Html5 & less cssGraham Johnson

HTML5 workshop, part 1Robert Nyman

PakyCecilia Paye

CookiesRamraj Choudhary

Bannersamogom

Jagerpaskar

Empfohlen

$C:\fakepath\url$ $C:\fakepath\url$

C:\fakepath\urlguest6b97bc

More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS W...Shift Conference

Html5 & less cssGraham Johnson

HTML5 workshop, part 1Robert Nyman

PakyCecilia Paye

CookiesRamraj Choudhary

Bannersamogom

Jagerpaskar

Deliverance talk at plone meetupJazkarta, Inc.

Jager planetaire nevelspaskar

Html5的应用与推行Sofish Lin

HTML5 and CSS3 Techniques You Can Use TodayTodd Anglin

Prioritize your critical css and images to render your site fast velocity ny...Jan-Willem Maessen

Slidecarol.htmlLeda0401

The web contextDan Phiffer

It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow

Html5 - Novas Tags na Prática!Rômulo Reis de Oliveira

Html5 + css3+ java script for future - HTML5Harshana Weerasinghe

HTML5 Video Player - HTML5 Dev Conf 2012steveheffernan

Please dont touch-3.6-jsdayFrancesco Fullone

Taiwan Web Standards Talk 2011Zi Bin Cheah

关于 Html5 那点事Sofish Lin

Taking your Web App for a walkJens-Christian Fischer

Hybrid apphyun soomyung

Webmatrixpptyuvaraj72

Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015beyond tellerrand

Newbies guide to customizing word press themes 25New Tricks

Creating Secure Web Apps: What Every Developer Needs to Know About HTTPS TodayHeroku

Emerging Technologies in Legal Researches Part 2jeiseman

santa 20112803 MEDIA

Weitere ähnliche Inhalte

Was ist angesagt?

Deliverance talk at plone meetupJazkarta, Inc.

Jager planetaire nevelspaskar

Html5的应用与推行Sofish Lin

HTML5 and CSS3 Techniques You Can Use TodayTodd Anglin

Prioritize your critical css and images to render your site fast velocity ny...Jan-Willem Maessen

Slidecarol.htmlLeda0401

The web contextDan Phiffer

It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow

Html5 - Novas Tags na Prática!Rômulo Reis de Oliveira

Html5 + css3+ java script for future - HTML5Harshana Weerasinghe

HTML5 Video Player - HTML5 Dev Conf 2012steveheffernan

Please dont touch-3.6-jsdayFrancesco Fullone

Taiwan Web Standards Talk 2011Zi Bin Cheah

关于 Html5 那点事Sofish Lin

Taking your Web App for a walkJens-Christian Fischer

Hybrid apphyun soomyung

Webmatrixpptyuvaraj72

Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015beyond tellerrand

Newbies guide to customizing word press themes 25New Tricks

Creating Secure Web Apps: What Every Developer Needs to Know About HTTPS TodayHeroku

Was ist angesagt? (20)

Deliverance talk at plone meetup

Jager planetaire nevels

Html5的应用与推行

HTML5 and CSS3 Techniques You Can Use Today

Prioritize your critical css and images to render your site fast velocity ny...

Slidecarol.html

The web context

It's a Mod World - A Practical Guide to Rocking Modernizr

Html5 - Novas Tags na Prática!

Html5 + css3+ java script for future - HTML5

HTML5 Video Player - HTML5 Dev Conf 2012

Please dont touch-3.6-jsday

Taiwan Web Standards Talk 2011

关于 Html5 那点事

Taking your Web App for a walk

Hybrid app

Webmatrixppt

Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015

Newbies guide to customizing word press themes 25

Creating Secure Web Apps: What Every Developer Needs to Know About HTTPS Today

Andere mochten auch

Emerging Technologies in Legal Researches Part 2jeiseman

santa 20112803 MEDIA

Social Media Metrics: a ROI-al Painjeiseman

2010 q3 earnings_google2803 MEDIA

Emerging technologies in librariesjeiseman

Ebooks llnef12jeiseman

Digital Media in 2012Cartwright Reed

Emerging Technologies in Legal Research Part 1jeiseman

Andere mochten auch (8)

Emerging Technologies in Legal Researches Part 2

santa 2011

Social Media Metrics: a ROI-al Pain

2010 q3 earnings_google

Emerging technologies in libraries

Ebooks llnef12

Digital Media in 2012

Emerging Technologies in Legal Research Part 1

Ähnlich wie Html5 - short intro

HTML 5 - OverviewMarcelio Leal

Html5Satoshi Kikuchi

HTML5: Markup EvolvedBilly Hylton

HTML5, the new buzzwordFrédéric Harper

Web AppsTim Wray

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5Sadaaki HIRAI

What you need to know bout html5Kevin DeRudder

Wordcamp Thessaloniki 2011 The NextwebGeorge Kanellopoulos

RESS – Responsive Webdesign and Server Side ComponentsSven Wolfermann

TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!Coulawrence

Merkez, Bağcılar antika kol saati 0531 9810190 eski kurmalı adin sonsuz

Denizköşkler antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz

Ataköy,Bakırköy antika kol saati 0531 9810190 eski kurmalı adin sonsuz

Cevizlik antika kol saati 0531 9810190 eski kurmalı saat alanlaradin sonsuz

Zeytinlik antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz

Evren,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz

Örnek mah. antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz

Kayışdağı antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz

Yeniçamlıca antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz

Göztepe,Bağcılar antika kol saati 0531 9810190 eski kurmalı adin sonsuz

Ähnlich wie Html5 - short intro (20)

HTML 5 - Overview

Html5

HTML5: Markup Evolved

HTML5, the new buzzword

Web Apps

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5

What you need to know bout html5

Wordcamp Thessaloniki 2011 The Nextweb

RESS – Responsive Webdesign and Server Side Components

TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!

Merkez, Bağcılar antika kol saati 0531 9810190 eski kurmalı

Denizköşkler antika kol saati 0531 9810190 eski kurmalı saat

Ataköy,Bakırköy antika kol saati 0531 9810190 eski kurmalı

Cevizlik antika kol saati 0531 9810190 eski kurmalı saat alanlar

Zeytinlik antika kol saati 0531 9810190 eski kurmalı saat

Evren,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat

Örnek mah. antika kol saati 0531 9810190 eski kurmalı saat

Kayışdağı antika kol saati 0531 9810190 eski kurmalı saat

Yeniçamlıca antika kol saati 0531 9810190 eski kurmalı saat

Göztepe,Bağcılar antika kol saati 0531 9810190 eski kurmalı

Kürzlich hochgeladen

Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge

Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation

Gen AI in Business - Global Trends Report 2024.pdfAddepto

My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer

Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz

Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed

DevEX - reference for building teams, processes, and platformsSergiu Bodiu

The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2

Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada

E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxnull - The Open Security Community

DMCC Future of Trade Web3 - Special EditionDubai Multi Commodity Centre

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106

My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos

Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson

What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett

Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar

Search Engine Optimization SEO PDF for 2024.pdfRankYa

Artificial intelligence in cctv survelliance.pptxhariprasad279825

Kürzlich hochgeladen (20)

Designing IA for AI - Information Architecture Conference 2024

Connect Wave/ connectwave Pitch Deck Presentation

Gen AI in Business - Global Trends Report 2024.pdf

My INSURER PTE LTD - Insurtech Innovation Award 2024

Vector Databases 101 - An introduction to the world of Vector Databases

Scanning the Internet for External Cloud Exposures via SSL Certs

DevEX - reference for building teams, processes, and platforms

The Future of Software Development - Devin AI Innovative Approach.pdf

Bun (KitWorks Team Study 노별마루 발표 2024.4.22)

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024

E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx

DMCC Future of Trade Web3 - Special Edition

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics

My Hashitalk Indonesia April 2024 Presentation

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)

Are Multi-Cloud and Serverless Good or Bad?

What's New in Teams Calling, Meetings and Devices March 2024

Unleash Your Potential - Namagunga Girls Coding Club

Search Engine Optimization SEO PDF for 2024.pdf

Artificial intelligence in cctv survelliance.pptx

Html5 - short intro

1. HTML5 Jason Eiseman Librarian for Emerging Technologies Yale Law School

2. 1990

3. <title>Hypertext Links</title> <h1>Links and Anchors</h1> A link is the connection between one piece of <a href=WhatIs.html>hypertext</a> and another. 1990

4. “Support Existing Content” HTML5 Design Principles:http://www.w3.org/TR/html-design-principles

5. World Wide Web Consortium

6. W3C HTML 4.01 - 1999 XHTML 1.0 - 2002 XHTML 1.1 - 2010 http://www.w3.org/

7. Web Hypertext Application Technology Working Group

8. WHATWG Web Forms 2.0 - 2004 http://www.whatwg.org

9. WHATWG & W3C HTML5 - 2008 - working draft 2012? - candidate 2022? - standard http://www.w3.org

10. So why worry about HTML5 now? 2022?

11. Internet Firefox Chrome Explorer 9 Safari Opera all support HTML5 today Today?

12. Today?

13. Today?

14. semantics & page structure

15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML: XHTML 1.0 Strict//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML5: <!DOCTYPE html> DOCTYPE

16. XHTML: <script type="text/javascript" src="javascript.js"></script> HTML5: <script src="javascript.js"></script> Scripts

17. XHTML: <link type="text/css" rel="stylesheet" media="all" href="style.css" /> HTML5: <link rel="stylesheet" href="style.css" /> Stylesheets

18. <div id= "header"> <div id= "nav"> <div id= "section"> <div id= "sidebar"> <div id= "footer"> Semantics & Page Structure

19. <header> <nav> <article> <section> <aside> <footer> Semantics & Page Structure

20. Microformats Semantics & Page Structure

21. forms

22. Validation Forms

23. Required Fields Forms

24. Placeholder Forms

25. Forms

26. Datalist Forms

27. Forms

28. Date Pickers Forms

29. Forms

30. <input name="email" type="email" /> <input name="url" type="url" /> Forms

31. @ Forms

32. / .com Forms

33. http://jasoneiseman.com/aall11/forms.html Forms

34. rich internet applications

35. canvas

36. a drawing surface Canvas

37. <canvas id="theCanvas" width="800" height="800"> </canvas> Canvas

38. <script type="application/javascript"> function draw() { var canvas=document.getElementById('theCanvas'); var context=canvas.getContext('2d'); context.strokeRect(10, 10, 600, 200); context.font="bold 40px sans-serif"; Canvas

39. <body onload="draw()"> <canvas id="theCanvas" width="800" height="800"> <img src="carrells.gif" /> </canvas> </body> Canvas

40. Canvas

41. http://jasoneiseman.com/aall11/canvas.html Canvas

42. Canvas - paper.js - available at: http://paperjs.org

43. video

44. browser-native video Video

45. <video src="movie.mp4" controls width="360" height="240" poster= "placeholder.jpg "> </video> Video

46. X Ogg WebM/VP8 Firefox X Ogg WebM/VP8 Chrome H.264 X X Internet Explorer 9 H.264 X X Safari Video

47. http://jasoneiseman.com/aall11/video.html Video

48. Video

49. Video

50. <video controls preload width="270" height="186" poster ="poster.png"> <source src="http://jasoneiseman.com/aall11/chain.mp4" type="video/ mp4"> <source src="http://jasoneiseman.com/aall11/chain.ogv" type="video/ ogg"> <object width="270" height="186"> <param name="movie" value="http://jasoneiseman.com/aall11/ chain.swf"> <embed src="http://jasoneiseman.com/aall11/chain.swf" width="270" height="186"> </object> </video> Video

51. <video width="270" height="186" controls preload poster ="poster.png"> Video

52. <source src="http://jasoneiseman.com/aall11/chain.mp4" type="video/ mp4"> <source src="http://jasoneiseman.com/aall11/chain.ogv" type="video/ ogg"> Video

53. <object width="270" height="186"> <param name="movie" value="http://jasoneiseman.com/aall11/ chain.swf"> <embed src="http://jasoneiseman.com/aall11/chain.swf" width="270" height="186"> </object> Video

54. Video

55. Video

56. <head> <script type="text/javascript" src="http://html5.kaltura.org/js" > </script> </head> <body> <video kentryid="0_swup5zao" kwidgetid="_243342"></video> </body> Video

57. Video

58. Dive Into HTML5 http://diveintohtml5.org/video.html Video

59. audio

60. browser-native audio Audio

61. <audio src="audio.mp3" controls> </audio> Audio

62. <audio controls> <source src="audio.mp3" type= "audio/mpeg"> <source src="audio.ogg" type= "audio/ogg"> </audio> Audio

63. http://jasoneiseman.com/aall11/audio.html Audio

64. advanced functionality

65. geolocation Advanced Functionality

66. local storage Advanced Functionality

67. offline web applications Advanced Functionality

68. browser history Advanced Functionality