HTML5 Fundamentals

HTML5
Fundamentals
Ikhmal Hisyam Abd Aziz
HTML5
HTML5 is a markup language for presenting
content on the Web
Released in December 2012, it is the fifth revision
of HTML
Original HTML was created in 1990
Its fourth revision was standardized in 1997
HTML
To fully appreciate HTML5, we will go through the
elements of HTML before proceeding with the
new elements introduced in HTML5
Example 1
Using your favorite text editor, create a new html file and
name it as html1
Copy the codes from the next slide into your new file and
try it on your browser
Example 1
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Elements
An HTML element has a start tag <body> and an
end tag </body>
HTML elements may contain another HTML
element (a <p> element)
HTML elements with no content are called empty
elements such as <br>
HTML elements with no closing tags has a trailing
slash in it such as <br /> or <input />
HTML Attributes
HTML elements can have attributes

Attributes provide additional information about an
element
Attributes are always specified in the start tag
Attributes come in name/value pairs like:
name=value
<a href="http://www.enc.com.my">This is a
link</a>
HTML Attributes
Attribute
Description
class
Specifies one or more classnames for an element

(refers to a
class in a style sheet)
Id
Specifies a unique id for an element
style
Specifies an inline CSS style for an element
title
Specifies extra information about an element

(displayed as a
tool tip)
Headings
Headings are defined with the <h1> to
<h6> tags.
<h1> defines the most important heading.
<h6> defines the least important heading.
Copy the codes from the next slide into
your html file and test on your browser.
Headings
<h1>This
<h2>This
<h3>This
<h4>This
<h5>This
<h6>This
is
is
is
is
is
is
heading
heading
heading
heading
heading
heading
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
10
Line Breaks
Use <hr> between HTML elements to
draw a line from end to end.
Normally used as separator between
different content elements in a HTML
page.
11
Comments
Comments can be inserted into the HTML
code to make it more readable and
understandable.
Comments are ignored by the browser and
are not displayed.

12
Paragraphs
Browsers automatically add an empty line
before and after a paragraph
your sample file and test it in your browser
13
Paragraphs
<p>This is a paragraph.</p>
14
Styles
CSS (Cascading Style Sheets) is used to
style HTML elements
Defeats the purpose of using hundreds of
images to decorate your web page which
makes it really slow to load
15
Example 2
Create a new html file and name it as
html2.
Copy the codes from the next slide to your
new file and name try it in your browser.
Note that there are HTML5 elements in this
example.
You may want to test it on different
browsers to see the different formats and
elements supported by each browser.
16
Example 2
<!DOCTYPE html>
<html>
<body>
<div
style="opacity:0.5;position:absolute;left:50px;wid
th:
300px;height:150px;backgroundcolor:#40B3DF"></div>
<div style="fontfamily:verdana;padding:20px;borderradius:
10px;border:10px solid #EE872A;">
<div
17
Example 2
<h3>Look! Styles and colors</h3>
<div style="letter-spacing:12px;">Manipulate
Text</div>
<div style="color:#40B3DF;">Colors
<span
style="backgroundcolor:#B4009E;color:#ffffff;">
Boxes</span>
</div>
<div style="color:#000000;">and more...</div>
</div>
</body>
18
</html>
Forms
HTML forms are used to pass data to a server.
An HTML form can contain input elements like
text fields, checkboxes, radio-buttons, submit
buttons and more.
A form can also contain select lists, textarea,
fieldset, legend, and label elements.
The most important form element is the <input>
element.
The <input> element is used to select user
information.
19
Forms
<form>
Password: <input type="password" name="pwd">
</form>
20
Iframe
An iframe is used to display a web page within a
web page.
Create a new html file and name it as html3.
Copy the codes from the next slide and test it on
your browser.
21
Iframe
<!DOCTYPE html>
<html>
<body>
<iframe src=html2.htm"
frameborder="0"></iframe>
<p>Some older browsers don't support
iframes.</p>
<p>If they don't, the iframe will not be
visible.</p>
</body>
</html>
22
Javascripts
The <script> tag is used to define a client-side
script, such as a JavaScript.
The <script> element either contains scripting
statements or it points to an external script file
through the src attribute.
Common uses for JavaScript are image
manipulation, form validation, and dynamic
changes of content.
23
Javascripts
Copy these lines of code into your third sample
file and test on your browser.
<script>
document.write("Hello World!")
</script>
24
Javascripts
The <noscript> tag is used to provide an
alternate content for users that have disabled
scripts in their browser or have a browser that
doesnt support client-side scripting.
The <noscript> element can contain all the
elements that you can find inside the <body>
element of a normal HTML page.
25
Javascripts
Copy this line of code just below the ones we just
copied and try in your browser to see the effects.
Try with older versions of Internet Explorer.
<noscript>
Sorry, your browser does not support JavaScript!
</noscript>
26
27
HTML5
New Elements
New Attributes
Full CSS3 Support
Video and Audio
2D/3D Graphics
Local Storage
Local SQL Database
Web Applications
28
Example 4
Browse the internet for some short video
clips around 10 15 seconds long in either
the format of .mp4, .ogg or .webm.
Save it into your examples folder.
Create a new html file with a .html
extension and name it as html4.
your new file and test on your browser.
29
Example 4
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src=movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>
30
Example 4
Video Formats and Browser Support

Currently, there are 3 supported video formats for the
<video> element: MP4, WebM, and Ogg:
Browser
MP4 WebM Ogg
Internet Explorer YES
NO
NO
Chrome
YES
YES
YES
Firefox
NO YES
YES
Safari
YES
NO
NO
Opera
NO
YES
YES
Update: Firefox 21 running on Windows 7, Windows 8,
Windows Vista, and Android now supports MP4
31
Doctype
The <!DOCTYPE> declaration must be the
very first thing in your HTML document,
before the <html> tag.
The <!DOCTYPE> declaration is not an
HTML tag.
It is an instruction to the web browser
about what version of HTML the page is
written in.
32
Doctype
In previous HTML iterations, doctype is
written as <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In HTML5, it is only written as <!DOCTYPE
HTML>
This tells the browser that the file it is
parsing is written with HTML5 elements in
it.
Refer to the codes for Example 4.
33
Minimum scripting
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
34
Minimum scripting
In HTML5, the <head> and <title>
elements are not required
Refer to the codes for Example 4
35
New features
The <canvas> element for 2D drawing
The <video> and <audio> elements for
media playback
Support for local storage
New content-specific elements, like
<article>, <footer>, <header>, <nav>,
<section>
New form controls, like calendar, date,
time, email, url, search
36
Canvas
The <canvas> element is used to draw
graphics, on the fly, on a web page.
Create a new file and name it as html5.
your new file and test on your browser.
37
Example 5
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200"
height="100"
style="border:1px solid #000000;">
Your browser does not support the HTML5
canvas tag.
</canvas>
</body>
</html>
38
Canvas
All drawing on the canvas must be done
inside a JavaScript.
your fifth example (after the <script> tag)
and try it.
39
Canvas
<script>
var
c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
40
Example 6 draw line

For this example we will draw a straight line
in our canvas.
Create new html file and copy the codes
from the next slide into your new file.
41
Example 6 draw line

<script>
var
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
42
Example 7 draw shape

For this example we will draw a circle in our
canvas.
Create new html file and copy the codes
from the next slide into your new file
43
Example 7 draw shape

<script>
var c=document.getElementById("myCanvas");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
Eg: http://www.williammalone.com/articles/createhtml5-canvas-javascript-drawing-app/#demosimple
44
Example 8 draw text

In this example we will draw text in our
canvas.
Suitable for Captcha.
Create new file and copy the codes from
the next slide into your new file.
45
Example 8 draw text

<script>
var
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
</script>
46
Example 9 draw text 2

Similar to example 8, but this time were
only going to draw the outline of the text.
Create new file and copy the codes from
the next slide into your file.
47
Example 9 draw text 2

<script>
var
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
48
Example 10 gradient
In HTML5, you can also draw gradient
colors in the canvas.
In this example we will draw linear
gradient.
49
Example 10 gradient
<script>
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
</script>
50
Example 11 gradient 2
In this example we will draw radial gradient
in the canvas.
51
Example 11 gradient 2
<script>
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
</script>
52
Drag and Drop
A new standard introduced with HTML5

Browse the internet for an image that you like
53
Example 13
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px
solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
54
Example 13 (cont)
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
55
Example 13 (cont)
</script>
</head>
<body>
<p>Drag the image into the rectangle:</p>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="my_img.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
56
Audio
Just like video, the audio element also
include controls such as play, pause and
volume buttons for the user.
Create new file and test these codes.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio
element.
57
</audio>
New Input Elements
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
58
Common Input Elements
Input
Submit
Button
Select
59
Example 16 color
Create new file and try the codes
from the next slide.
Test with different browsers.
60
Example 16 color
<form action="demo_form.asp">
Select your favorite color:
<input type="color"
name="favcolor">
<br>
<input type="submit">
</form>
61
Example 17 date
Create new file and test the codes.
Birthday: <input type="date"
name="bday">
</form>
62
Example 18 datetime
Birthday (date and time): <input
type="datetime"
name="bdaytime">
</form>
63
Example 19 local
datetime
Birthday (date and time):
<input type="datetime-local"
name="bdaytime">
</form>
64
Example 20 email
<form>
E-mail: <input type="email"
name="email">
<br>
</form>
65
Example 20 number
This element is used for numeric input
only.
Developer can also set minimum and
maximum value for the element.
66
Example 21 number
Quantity (between 1 and 5):
<input type="number"
name="quantity"
min="1" max="5">
</form>
67
Example 22 range
<form action="demo_form.asp"
method="get">
Points: <input type="range"
name="points" min="1" max="10">
</form>
68
New Form elements

<datalist>
<keygen>
<output>
69
Datalist
a new file and try it.
Press any key on your keyboard and
see how it works.
70
Example 23
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
</datalist>
<input type="submit"></form>
</body>
</html>
71
Example 24 keygen
This new element is used to generate a
long encrypted key.
Suitable for hashing passwords.
72
Example 24 keygen
<form action="demo_keygen.asp"
method="get">
Username: <input type="text"
name="usr_name">
Encryption: <keygen name="security">
</form>
73
Example 25 output
This element is used to display the
result of a calculation.
74
Example 25 output
<form
oninput="x.value=parseInt(a.value)
+parseInt(b.value)">0
<input type="range" id="a"
value="50">100 +
<input type="number" id="b"
value="50">=
<output name="x" for="a
b"></output>
</form>
75
New <form> attribute

autocomplete
novalidate
76
New <input> attribute
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max

multiple
pattern (regexp)
placeholder
required
step
77
Example 26 - autocomplete
Just like commercial search engine and
browsers, HTML5 now has its own
autocomplete element.
Create new file and test the codes from the
next slide.
78
Example 26 - autocomplete
<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email"
autocomplete="off"><br>
</form>
<p>Fill in and submit the form, then reload the page to see how
autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for
the e-mail field.</p>
79
Example 27 - novalidate
HTML5 forms came with its own built-in
validation function.
No more javascripts validation codes.
Create new file and test the codes from
the next slide.
80
Example 27 - novalidate
<form action="demo_form.asp"
novalidate>
E-mail: <input type="email"
name="user_email">
</form>
81
Example 28 autofocus
Create new file and test this line of code
First name :
<input type="text" name="fname"
autofocus>
82
Example 29 form
An element outside <form> but still a
part of it
Create new file and test these codes
<form action="demo_form.asp" id="form1">
First name: <input type="text"
name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname"
form="form1">
83
Formaction
The formaction attribute specifies the
URL of a file that will process the input
control when the form is submitted.
The formaction attribute overrides the
action attribute of the <form> element
84
Example 30
First name: <input type="text"
name="fname"><br>
Last name: <input type="text"
name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit"
formaction="demo_admin.asp"
value="Submit as admin">
85
</form>
Multiple Input
The multiple attribute is a boolean
attribute.
When present, it specifies that the user
is allowed to enter more than one value
in the <input> element.
86
Example 31
<!DOCTYPE html>
<html>
<body>
Select images: <input type="file" name="img"
multiple>
</form>
<p>Try selecting more than one file when browsing for
files.</p>
</body>
</html>
87
Example 32
Username: <input type="text"
name="username"
required>
</form>
88
Web Storage
With HTML5, web pages can store data
locally within the user's browser.
Earlier, this was done with cookies.
However, Web Storage is more secure
and faster.
The data is not included with every
server request, but used ONLY when
asked for.
It is also possible to store large amounts
of data, without affecting the website's
89
performance.
Web Storage
There are two objects for storing data on
client side.
localStorage - stores data with no
expiration date.
sessionStorage - stores data for one
session.
These two objects will be used again in
our noSQL example later in this course.
90
localStorage
The localStorage object stores the data
with no expiration date.
The data will not be deleted when the
browser is closed, and will be available
the next day, week, or year.
Create new html file and test the codes
from the next slides.
91
Example 33
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if (typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
92
Example 33 (cont)
localStorage.clickcount=Number(localStorage.clickcount)
+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have
clicked the button " + localStorage.clickcount + "
time(s).";
}
else
93
Example 33 (cont)
{
document.getElementById("result").innerHTML="Sorry,
your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">
Click me!</button></p>
<div id="result"></div>
94
Example 33 (cont)
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and
the counter will continue to count (is not reset).</p>
</body>
</html>
95
sessionStorage
The sessionStorage object is equal to the
localStorage object, except that it stores
the data for only one session.
The data is deleted when the user closes
the browser window.
Create new file and test the codes from
the next slides.
96
Example 34
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if (typeof(Storage)!=="undefined")
{
if (sessionStorage.clickcount)
{
97
Example 34 (cont)
sessionStorage.clickcount=Number(sessionStorage.clickco
unt)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have
clicked the button " + sessionStorage.clickcount + "
time(s) in this session.";
}
else
98
Example 34 (cont)
{
document.getElementById("result").innerHTML="Sorry,
your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">
Click me!</button></p>
<div id="result"></div>
99
Example 34 (cont)
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and
the counter is
reset.</p>
</body>
</html>
100

HTML5 Fundamentals

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML5 Fundamentals

Uploaded by

Copyright:

Available Formats

HTML5

HTML elements can have attributes

Specifies one or more classnames for an element

Specifies a unique id for an element

Specifies an inline CSS style for an element

Specifies extra information about an element

Video Formats and Browser Support

Example 6 draw line

Example 6 draw line

Example 7 draw shape

Example 7 draw shape

Example 8 draw text

Example 8 draw text

Example 9 draw text 2

Example 9 draw text 2

Drag and Drop

A new standard introduced with HTML5

New Input Elements

Common Input Elements

New Form elements

New <form> attribute

New <input> attribute

min and max

You might also like