Scribd
Upload
45 views

Html5: Prof. Cesare Pautasso Cesare - Pautasso@usi - CH

The document discusses HTML5 and how it separates content from presentation through CSS. It describes new HTML5 elements like video, audio, and forms. It also outlines rules for XHTML and the tree structures of XHTML and HTML5.

Uploaded by

cuteastig29
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
45 views

Html5: Prof. Cesare Pautasso Cesare - Pautasso@usi - CH

The document discusses HTML5 and how it separates content from presentation through CSS. It describes new HTML5 elements like video, audio, and forms. It also outlines rules for XHTML and the tree structures of XHTML and HTML5.

Uploaded by

cuteastig29
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

1 / 18

HTML5
Prof. Cesare Pautasso
http://www.pautasso.info
[email protected]
@pautasso

2 / 18

Presentation/Content

Content
Presentation

HTML

Content
Presentation

CSS XML
HTML5

©2014 Cesare Pautasso


©2014 Cesare Pautasso

3 / 18

Separating Content from Presentation helps:


Reuse Style Sheets
one style for the entire website (easier to maintain)
spare bandwidth (css can be cached)
Different styles for the same content
multi-channel delivery (Web browser, printer, mobile phone,
screen reader)
user personalization (choose themes)

4 / 18

XHTML
EXtensible HyperText Markup Language (W3C
Standard, 2000)
Combines:
XML (Strict Syntax)
HTML (existing tags for Web pages)
It will gradually replace HTML (legacy)
Works well together with CSS
5 / 18

HTML5
HyperText Markup Language (W3C Standard,
HTML4, 1999, HTML5, ?)
Cross-browser support for Web applications:
Document Markup (clean Web pages)
Multimedia (SVG, native Video/Audio without Flash)
Web Applications (Context Menus, DataGrid, Canvas, Offline
storage, Progress Bars, Drag and Drop, Worker Threads, Web
Forms)
Communication (Web Sockets, Cross Document Messaging)
Microformats (Time, Meter)
6 / 18

XML Rules
1. All element tags and attribute names written
in lowercase (XML is case sensitive)
2. Always close every opened element tag
<tag>...</tag>
<tag/>

3. All elements must be properly nested


<ul><li><b></b></li><li><p></p></li></ul>

4. Only one root element per document


<html><body></body></html>

5. Attribute values must be quoted


<a href="http://www.usi.ch">...</a>

6. id attribute replaces the name attribute


<div id="navigation">...</div>
8 / 18

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

<html>
<head>
<title>My Homepage</title>
</head>
<body>
<h1>My Title</h1>
<p>Some paragraph</p>
<!–- Comment -->
</body>
</html>

9 / 18

HTML5 Tree
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>My Homepage</title>
</head>
<body>
<h1>My Title</h1>
<p>Some paragraph</p>
<!–- Comment -->
</body>
</html>
10 / 18

XHTML Structure
<div id="header">

<div id="navigation">

<div id="section">
<div id="article"> ar " >
sid eb
<div id="figure"> id = "
<div

<div id="footer">

11 / 18

HTML5 Structure
<header>

<nav>

<section>
<article>
<sidebar>
<figure>

<footer>
12 / 18

No longer HTML
acronym
applet
basefont
bgsound
big
blink
center
dir
font
frame
frameset
isindex
noframes
noscript
s
strike
tt 13 / 18

u
New in HTML5
article
aside
audio
canvas
command
datagrid
datalist
details
dialog
event-source
figure
footer
header
legend
mark (m)
meter
nav
output
progress
source
time
video
14 / 18

HTML5 Multimedia
Sound
<audio src="/sound/boom.mp3" controls="true">
<a href="/sound/boom.mp3">Listen</a>
</audio>

Movies
<video src="/video/movie.mov" controls="true">
<p>Your browser does not support the video tag.
Get a better browser</p>
</video>

http://www.html5rocks.com/en/tutorials/video/basics/

15 / 18

HTML5 Forms
Input Validation
<input type="color"/>
<input type="number"/>
<input type="email"/>
<input type="tel"/>

New Input Controls


<input type="text" placeholder="Hint"/>
<input type="range" min="0" max="50" value="0"/>
16 / 18

HTML5 UI
Progress Bar
<progress value="0" max="100">0 %</progress>

17 / 18

References
Robert W. Sebesta, Programming the World Wide Web, Addison-Wesley, 2013
Mark Pilgrim, Dive into HTML5, http://diveintohtml5.info/
(http://diveintohtml5.info/)
HTML5Rocks, http://www.html5rocks.com
(http://www.html5rocks.com/en/tutorials/)
Mozilla, HTML5 Guide (https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/HTML5)

You might also like