Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML 5

Getting started using HTML 5, which adds more seamless interactivity to HTML.
by

Richard McKenna

on 28 August 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML 5

HTML 5
Interactivity Improved
HTML
and XHTML

The New HTML Standard
HTML 5
HTML 5 Goals
Oh, and only one doctype
XHTML Attributes
And XHTML?
XHTML Elements
HTML
w3schools
HTML 5
Where to start?
HTML Tutorial & Quiz
http://www.w3schools.com/html
http://www.w3schools.com/html/html_quiz.asp

HTML 5 Tutorial & Quiz
http://www.w3schools.com/html/html_quiz.asp
http://www.w3schools.com/html/html5_quiz.asp
<html> <head> <title> <meta> <link> <style> <script> <noscript> <body> <h1> <h2> <h3> <h4> <h5> <p> <ul> <li> <ol> <table> <thead> <th> <tbody> <tr> <td> <span> <img> <a> <div> <br /> <hr /> <strong> <em> <form> <input> <select> <textarea> <option> <button> <label> <fieldset> <legend>

http://www.w3schools.com/html/html_quick.asp
Well formed HTML
i.e. HTML + XML

XHTML DOCTYPE is mandatory

The XML namespace attribute in <html> is mandatory

<html>, <head>, <title>, and <body> are mandatory
XHTML elements must be properly nested

XHTML elements must always be closed

XHTML elements must be in lowercase

XHTML documents must have one root element
Attribute names must be in lower case

Attribute values must be quoted

Attribute minimization is forbidden
New Elements
New Attributes
Full CSS3 Support
Video and Audio

New features based on HTML, CSS, DOM, & JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>

Let's use a good tool
https://netbeans.org/kb/

Color coded editing
D Graphics
Local Storage
Local SQL Database
Web Applications
HTML 5 New Features
<canvas> for 2D drawing

<video> and <audio> for media playback

calendar, date, time, email, url, search form controls

<article>, <footer>, <header>, <nav>, <section>

Support for local storage
Removed Elements
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
HTML 5 canvas
Create a canvas for 2D Graphics

Draw:
Rectangles
Circles
Lines
Text
Gradients
Images
Etc.
(draw on it using JavaScript)
Create a canvas
Blank by default
Always give it an id
A page may have more than one

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
JavaScript Drawing
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
JavaScript Drawing
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
(draw a filled rectangle)
(draw a line)
JavaScript Drawing
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
(draw a circle)
JavaScript Drawing
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
</script>
(draw text)
JavaScript Drawing
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>
(draw image)
What else?
Scalable Vector Graphics
Video
Drag & Drop
XML-defined
Preserves Zoomed/Resized Quality
Fully animatable

<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;
fill-rule:evenodd;">
</svg>

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Methods like load, play, pause

Properties like loop, volume, etc.
Grab an object
Drag it somewhere else
In HTML5 any element can be draggable
How?
set elements as draggable
respond to events
ondragstart
ondragover
ondrop
We'll see examples later
Form Elements
<datalist> - autocomplete

<keygen> - user authentication

<output> - display generated results
Geolocation
Requires User Approval
getCurrentPosition()
gives you Coordinate
watchPosition()
continuous updates
So what?
display map
navigation
what's nearby?
Audio
Like video, tag replaces plug-ins

<audio controls> <source src="horse.ogg"
type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
New Input Types
color
date
datetime
datetime-local
email
month
number
New Form Attributes
<form>:
autocomplete
novalidate
<input>:
autocomplete height/width
autofocus list
form min/max
formaction multiple
formenctype pattern(regexp)
formmethod placeholder
formnovalidate required
formtarget step
New Semantic Elements
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
And Other Stuff
Local & Session Storage
Application Cacheing
JavaScript Web Workers
Server-Side Events
range
search
tel
time
url
week
Full transcript