HTML5 Fundamentals

HTML5Fundamentals

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

2

HTML

3

To fully appreciate HTML5, we will go through theelements of HTML before proceeding with the new elements introduced in HTML5

Example 1

4

• 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>

5

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 />

6

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>

7

HTML Attributes

Attribute Description

class Specifies one or more classnames for an element (refers to aclass 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 atool tip)

8

Headings

9

• 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

10

<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>

Line Breaks

11

• 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.

Comments

12

• 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.

• 

Paragraphs

13

• Browsers automatically add an empty line before and after a paragraph

• Copy the codes from the next slide into your sample file and test it in your browser

Paragraphs

14

<p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p>

Styles

15

• 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

Example 2

16

• 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.

Example 2

17

<!DOCTYPE html><html><body><div style="opacity:0.5;position:absolute;left:50px;width:

300px;height:150px;background-color:#40B3DF"></div>

<div style="font-family:verdana;padding:20px;borderradius:10px;border:10px solid #EE872A;">

<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></

div>

Example 2

18

<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></html>

Forms

19

• 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.

Forms

20

<form>Password: <input type="password" name="pwd"></form>

Iframe

21

• 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.

Iframe

22

<!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>

Javascripts

23

• 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.

Javascripts

24

• Copy these lines of code into your third sample file and test on your browser.

<script>document.write("Hello World!")

</script>

Javascripts

25

• The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t 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.

Javascripts

26

• 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>

27

HTML5

28

• New Elements• New Attributes• Full CSS3 Support• Video and Audio• 2D/3D Graphics• Local Storage• Local SQL Database• Web Applications

Example 4

29

• 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’.• Copy the codes from the next slide into your new file


Example 4

30

<!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>

Example 4

31

• 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

Doctype

32

• 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.

Doctype

33

• 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.

Minimum scripting

34

<!DOCTYPE html><html>

<head><title>Title of the document</title>

</head><body>

The content of the document......</body>

</html>

Minimum scripting

35

• In HTML5, the <head> and <title> elements are not required

• Refer to the codes for Example 4

New features

36

• 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

Canvas

37

• The <canvas> element is used to draw graphics, on the fly, on a web page.

• Create a new file and name it as ‘html5’.• Copy the codes from the next slide into your new file


Example 5

38


<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;">Your browser does not support the HTML5 canvas tag.

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

Canvas

39

• All drawing on the canvas must be done inside a JavaScript.

• Copy the codes from the next slide into your fifth example (after the <script> tag) and try it.

Canvas

40

<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);

</script>

Example 6 – draw line

41

• 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.

Example 6 – draw line

42

<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.moveTo(0,0);ctx.lineTo(200,100);ctx.stroke();

</script>

Example 7 – draw shape

43

• 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

Example 7 – draw shape

44

<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>

Eg: http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/#demo-simple

Example 8 – draw text

45

• 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.

Example 8 – draw text

46

<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Arial";ctx.fillText("Hello World",10,50);

</script>

Example 9 – draw text 2

47

• Similar to example 8, but this time we’re only going to draw the outline of the text.

• Create new file and copy the codes from the next slide into your file.

Example 9 – draw text 2

48

<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Arial";ctx.strokeText("Hello World",10,50);

</script>

Example 10 gradient‑

49

• In HTML5, you can also draw gradient colors in the canvas.

• In this example we will draw linear gradient.

Example 10 gradient‑

50

<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");// Create gradientvar grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);

</script>

Example 11 – gradient 2

51

• In this example we will draw radial gradient in the canvas.

Example 11 – gradient 2

52

<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");// Create gradientvar grd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);

</script>

Drag and Drop

53

• A new standard introduced with HTML5• Browse the internet for an image that you like

Example 13

54

<!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();}

Example 13 (con’t)

55

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));

}


56

</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>

Audio

57

• 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.

</audio>

New Input Elements

58

• color• date• datetime• datetime-local• email• month• number

• range• search• tel• time• url• week

Common Input Elements

59

• Input• Submit• Button• Select

Example 16 color‑

60

• Create new file and try the codes from the next slide.

• Test with different browsers.

Example 16 color‑

61

<form action="demo_form.asp">Select your favorite color: <input type="color" name="favcolor"><br><input type="submit">

</form>

Example 17 date‑

62

• Create new file and test the codes.

<form action="demo_form.asp">Birthday: <input type="date"

name="bday"><input type="submit">

</form>

Example 18 datetime‑

63


<form action="demo_form.asp">Birthday (date and time): <input type="datetime"name="bdaytime"><input type="submit">

</form>

Example 19 – localdatetime

64


<form action="demo_form.asp">Birthday (date and time): <input type="datetime-local" name="bdaytime"><input type="submit">

</form>

Example 20 email‑

65


<form>E-mail: <input type="email" name="email"><br><input type="submit">

</form>

Example 20 number‑

66

• This element is used for numeric input only.• Developer can also set minimum and maximum

value for the element.

Example 21 number‑

67

<form action="demo_form.asp">Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"><input type="submit">

</form>

Example 22 range‑

68


<form action="demo_form.asp" method="get">Points: <input type="range" name="points" min="1" max="10"><input type="submit">

</form>

New Form elements

69

• <datalist>• <keygen>• <output>

Datalist

70

• Copy the codes from the next slide into a new file and try it.

• Press any key on your keyboard and see how it works.

Example 23

71

<!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>

Example 24 keygen‑

72

• This new element is used to generate a long encrypted key.

• Suitable for hashing passwords.

Example 24 keygen‑

73

<form action="demo_keygen.asp" method="get">Username: <input type="text" name="usr_name">Encryption: <keygen name="security"><input type="submit">

</form>

Example 25 output‑

74

• This element is used to display the result of a calculation.

Example 25 output‑

75

<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>

New <form> attribute

76

• autocomplete• novalidate

New <input> attribute

77

• autocomplete• autofocus• form• formaction• formenctype• formmethod• formnovalidate• formtarget• height and width• list

• min and max• multiple• pattern (regexp)• placeholder• required• step

Example 26 - autocomplete

78

• 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.

Example 26 - autocomplete

79

<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><input type="submit">

</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>

Example 27 - novalidate

80

• 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.

Example 27 - novalidate

81

<form action="demo_form.asp" novalidate>E-mail: <input type="email" name="user_email"><input type="submit">

</form>

Example 28 autofocus‑

82

• Create new file and test this line of code

First name : <input type="text" name="fname" autofocus>

Example 29 form‑

83

• 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">

Formaction

84

• 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

Example 30

85

• Create new file and test these codes

<form action="demo_form.asp">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">

</form>

Multiple Input

86

• 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.

Example 31

87


<form action="demo_form.asp">Select images: <input type="file" name="img" multiple><input type="submit">

</form><p>Try selecting more than one file when browsing for files.</p>

</body></html>

Example 32

88

• Create new file and test these codes

<form action="demo_form.asp">Username: <input type="text" name="username"required><input type="submit">

</form>

Web Storage

89

• 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 performance.

Web Storage

90

• 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.

localStorage

91

• 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.

Example 33

92

<!DOCTYPE html><html><head><script>

function clickCounter(){

if (typeof(Storage)!=="undefined"){

if (localStorage.clickcount){


93

localStorage.clickcount=Number(localStorage.clickcount)+1;

}else

{localStorage.clickcount=1;

}document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

}else


94

{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>


95

<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>

sessionStorage

96

• 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.

Example 34

97

<!DOCTYPE html><html><head><script>function clickCounter(){

if (typeof(Storage)!=="undefined"){

if (sessionStorage.clickcount){


98

sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;}else{

sessionStorage.clickcount=1;}document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

}else


99

{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>


100

<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>

Date post:	21-Dec-2015
Category:	Documents
Upload:	sharatul-salma
View:	24 times
Download:	3 times

HTML5 Fundamentals

Documents