Embed Size (px)
Citation preview
Browser Support
Syntax
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<title>HTML OldSkool</title>
<link type="text/css" rel="stylesheet" href="oldskool.css“>
<script type="text/javascript" src="oldskool.js"></script>
</head>
<body>
<h1>Welcome to HTML OldSkool</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8">
<title>HTML5</title>
<link rel="stylesheet" href=“awesome.css“>
<script src=“awesome.js"></script>
</head>
<body>
<h1>Welcome to HTML5</h1>
</body>
</html>
Congratulations!
HTML5 Elements
Article
Header
Footer
Aside
Section
Nav
Dialog
Figure
HTML5 Document:
Example Header and Footer<!doctype html>
<html>
<body>
<header id="header">
</header>
<div id=“maincontent”></div>
<footer id="footer">
<ul>
<li><a href="http://www.mavention.nl">Mavention</a></li
</ul>
</footer>
</body>
</html>
Example Document Elements<!doctype html>
<html>
<body>
<section id="content" role="main">
<article id="maincontent">
<h1>Dutch Information Worker User Group</h1>
<p> ... </p>
</article>
<aside>
<section class="widget">
<h1>DIWUG on twitter</h1>
</section>
</aside>
</section>
</body>
</html>
Example Navigation<!doctype html>
<html>
<body>
<nav role="navigation">
<ul id="mainnavigation">
<li><a href="/pages/upcoming-event.aspx">Upcoming Event</a></li>
<li><a href="/e-magazines/pages/default.aspx">eMagazines</a></li>
<li><a href="/pages/event-history.aspx">Event History</a></li>
<li><a href="/pages/about-diwug.aspx">About DIWUG</a></li>
<li><a href="/pages/event-full.aspx">Event full</a></li>
</ul>
</nav>
</body>
</html>
Figure element<!doctype html>
<html>
<body>
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>
</body>
</html>
Media Elements
Video Audio
HTML5 Video and Audio
Video Elements - Example
<video poster="movieposter.png" autoplay loop controls >
<source src="movie.webm" type="video/webm" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogv" type="video/ogg" />
Your browser does not support the HTML5 video tag
</video>
Audio Elements - Example
<audio src=“Scooter_Friends.mp3” preload=“auto” autoplay loop controls>
Your browser does not support the HTML5 audio tag
</audio>
<audio autoplay loop controls>
<source src=“hyperhyper.mp3" type=“audio/mpeg" />
<source src="hyperhyper.wav" type=“audio/wav" />
<source src="hyperhyper.ogg" type=“audio/ogg" />
Your browser does not support the HTML5 audio tag
</audio>
Must start with : data-
User Defined Attributes
<div class="example" data-subject="physics" data-level="complex">
...
</div>
<img src=“federer.png” data-category=“tennis” />
Microdata
Microdata is a standardized way to provide additional semantics in your web
pages.
Major search engines like Google, Microsoft and Yahoo! rely on this markup to
improve search results
Microdata introduces five global attributes which would be available for any
element to use and give context about your data.
MicrodataAttribute Description
itemscope Creates the Item and indicates that descendants of this
element contain information about it
itemtype This attribute is a valid URL which defines the item and
provides the context for the properties
itemid This attribute is global identifier for the item
itemprop This attribute defines a property of the item
itemref This attribute gives a list of additional elements to crawl
to find the name-value pairs of the item
Microdata Example<div>
My name is Octavie van Haaften, but friends call me Big-O. This is my blog:
<a href="http://blog.octavie.nl">blog.octavie.nl</a>
I live in Gorinchem and I work at Mavention as a SharePoint Consultant.
</div>
<div itemscope itemtype="http://data-vocabulary.org/Person">
My name is <span itemprop="name">Octavie van Haaften</span>, but friends
call me <span itemprop="nickname">Big-O</span>. This is my blog:
<a href="http://blog.octavie.nl" itemprop="url">blog.octavie.nl</a>
I live in Gorinchem and I work at Mavention as a <span
itemprop="title">SharePoint Consultant</span>.
</div>
Forms 2.0
New form elements and attributes
•
•
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
New HTML5 input elementsType Description
Datetime A date and time with the time zone set to
UTC
Datetime-local A date and time with no time zone set
Date A date
Month A date consisting of a year and a month
Week A date consisting of a year and a week
number
Time A time
Number This accepts only numerical value. The step
attribute specifies the precision, defaulting to
1
Type Description
Range The range type is used for input fields that should
contain a value from a range of numbers
Email This accepts only email value
url This accepts only URL value
Color A color picker
Search For search key words
Tel This accepts telephone numbers
New HTML5 input attributes
autofocus
•
•
•
•
•
• placeholder
• required
•
