cmpt 165 notes on html5 - simon fraser university · html5… why bother? html is constantly...
TRANSCRIPT
![Page 1: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/1.jpg)
CMPT 165
Nov. 26th, 2015
Notes on HTML5
![Page 2: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/2.jpg)
HTML5… Why bother? HTML is constantly evolving… HTLM5 is latest version
• New (more semantically meaningful) markup tags:
<nav>
<aside>
…
• Old (vs. new) tags:
– New tags are introduced
– Some XHTML tags become deprecated* in HTML5
• should not use any more, but browsers “should” support them
– Some XHTML tags become obsolete* in HTML5
• should avoid as these are tags which browsers are not required to support
• More convenience…
*Details here http://www.w3.org/TR/html401/conform.html#h-4.1
2
![Page 3: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/3.jpg)
![Page 4: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/4.jpg)
Question: which 3 parts are required on every markup page?
1. Document type declaration (DTD)
2. Header
3. Body
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Heading</h1>
</body>
</html>
![Page 5: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/5.jpg)
DTD in HTML5
5
<!DOCTYPE html>
<html>
<head>
<title>HTML5: A demo</title>
</head>
<body>
</body>
</html>
![Page 6: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/6.jpg)
DTD in HTML5
6
<!DOCTYPE html>
<html>
<head>
<title>HTML5: A demo</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Heading</h1>
</body>
</html>
![Page 7: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/7.jpg)
HTML5… Why bother? HTML is constantly evolving… HTLM5 is latest version
• New (more semantically meaningful) markup tags:
<nav>
<aside>
…
• Old (vs. new) tags:
– New tags are introduced
– Some XHTML tags become deprecated* in HTML5
• i.e. should not use any more, but browsers “should” keep supporting them
– Some XHTML tags become obsolete* in HTML5
• i.e. should avoid as these are tags which browsers are not required to support
• More convenience…
*Details here http://www.w3.org/TR/html401/conform.html#h-4.1
7
![Page 8: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/8.jpg)
More semantic markup tags /*Default style of
most browsers */
nav {
display: block;
}
8
<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<a href="/js/">JavaScript</a>
<a href="/jquery/">jQuery</a>
</nav>
<aside>
<blockquote>
<p>All the world's a stage.</p>
</blockquote>
<p>William Shakespeare</p>
</aside>
![Page 9: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/9.jpg)
HTML4 to HTML5 “Migration”
Typical HTML4 Typical HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>
9
![Page 10: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/10.jpg)
Figures and captions made easy <figure> + <figcaption>
Efficient way to mark up a figure in a document. Easier way to cite images.
10
<figure>
<img src="IMG_3101.jpg" alt="One early morning." width="304" />
<figcaption>One early morning. By <a href="#me">LT</a>.</figcaption>
</figure>
One early morning. By LT.
![Page 11: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/11.jpg)
<time>
• Encode dates and times in a machine-readable way
• User agents* can offer these options to users: – add reminders to birthday, scheduled events to user's
calendar
• Search engines can produce smarter search results
*the browsers that your users use
11
<time datetime="2015-07-13"> July 13, 2015 </time>
![Page 12: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/12.jpg)
Some tags worthy to know about
Semantic:
nav
aside
figure
figcaption
time
Frames:
iframe, object
12
![Page 13: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/13.jpg)
<iframe>
To display a web page within a web page. Examples:
13
<iframe src="http://www.youtube.com/embed/W7qWa52k-nE"
width="560" height="315" allowfullscreen></iframe>
<iframe width="100%" height="750px" scrolling="no"
src="https://docs.google.com/spreadsheets/d/1bZXNV453jfysdqL2XdMsDICEXzdUOR4WWVAy
lmFNRxE/pubhtml?gid=0&single=true&widget=true&headers=false"
alt="Calendar with links to assignments and exercises">
</iframe>
![Page 14: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/14.jpg)
<object> <object
width="400"
height="400"
data="http://www.w3schools.com/tags/helloworld.swf">
Your browser does not support Flash.
</object>
14
![Page 15: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/15.jpg)
Some tags worthy to know about
Semantic: nav aside figure figcaption time
Frames: iframe, object
Multi-media: svg audio video
15
![Page 16: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/16.jpg)
CMPT 165 D1 (Summer 2005) 16
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<g>
<rect x="10" y="10"
height="80" width="110"
style="stroke:#ff0000; fill: #0000ff">
</rect>
<text fill="#ffffff"
font-size="25"
font-family="arial" x="30" y="86">HTML5</text>
<animateTransform
attributeName="transform"
begin="0s"
dur="20s"
type="rotate"
from="0 60 60"
to="360 60 60"
repeatCount="indefinite"
/>
</g>
</svg>
<figcaption>My first animated SVG.</figcaption>
</figure>
Demo
![Page 17: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/17.jpg)
Some tags worthy to know about
Semantic: nav aside figure figcaption time
Frames: iframe, object
Multi-media: svg audio video
17
![Page 18: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/18.jpg)
<audio>
<audio controls>
<source src="monochrome.mp3"
type="audio/mp3">
Your browser does not support the audio
element.
</audio>
18
<a href="monochrome.mp3"
type="audio/mp3">Narration</a>
![Page 19: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/19.jpg)
<video> | <audio>
• controls attribute gives control buttons for: – play
– pause
– volume
• It is a good idea to always include width and height attributes
• Multiple <source> elements can link to different files – browser will use the first recognized format
19
![Page 20: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/20.jpg)
<video>
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
20
![Page 21: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/21.jpg)
<audio> Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES
21
Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
![Page 22: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/22.jpg)
<video> Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES
22
Format MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
![Page 23: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/23.jpg)
License-free audio/visual files
Video
https://us.fotolia.com
http://www.shutterstock.com/
http://www.pond5.com/free
Music
https://www.youtube.com/audiolibrary/music
Text-to-speech audio files:
http://www.fromtexttospeech.com/
23
![Page 24: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/24.jpg)
Demos
http://www2.cs.sfu.ca/CourseCentral/165/lisat/demos/html5/
24
![Page 25: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/25.jpg)
![Page 26: CMPT 165 Notes on HTML5 - Simon Fraser University · HTML5… Why bother? HTML is constantly evolving ... ... Your browser does not support](https://reader031.vdocuments.site/reader031/viewer/2022022112/5c63685809d3f210758b4c64/html5/thumbnails/26.jpg)
Questions?
26