html 5

1. Presentation Topic:

2. Group Members:
2
Asfand Yar
Khan
(11051556-
009)
Syed Awais
Gillani
(11051556-029)
Abbas Rasheed
(11051556-017)
Haseeb
Ahmad
(11051556-
028)

3. Presentation Agenda:
 HTML5
◦ Introduction of HTML5
◦ Elements
◦ Canvas
◦ SVG
◦ Drag/Drop
◦ Geo-location
◦ Video
◦ Audio
◦ Form handling
◦ SSE
3

4. Presentation Agenda
Continued..
 PHP
◦ Server side Page with PHP
◦ Issues will be discussed
◦ PHP syntax
◦ Defining variables in php
 PHP String:
◦ Definition of Strings in PHP
◦ Complete server-side page using php
strings and variables.
4

5. HTML5
(Hyper Text Markup Language)
5

6.  HTML5 is The New HTML Standard
 HTML5 is designed to deliver almost
everything you want to do online without
requiring additional plug-ins. It does
everything from animation to apps, music to
movies, and can also be used to build
complicated applications that run in your
browser.
 HTML5 is also cross-platform (it does not
care whether you are using a tablet or a
Smartphone, a net book, notebook or a
Smart TV).
Introduction of HTML5:
6

7. Continued..
 HTML5 can also be used to write web applications that
still work when you are not online
Some of the most interesting new features in HTML5:
◦ 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>(The <nav> tag
defines a set of navigation links. NOT all links of a
document should be inside a <nav> element. The
<nav> element is intended only for major block
of navigation links.)
◦ New form controls, like
calendar, date, time, email, url, search
7

8. Elements
 HTML Element Syntax
◦ An HTML element starts with a start tag /
opening tag
◦ An HTML element ends with an end tag /
closing tag
 <P> for example this is a html element.
8

9. New Elements in HTML5
9

10. Continued..
10

11. Continued..
11

12. Bdi Tag:
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi> </bdi>: 90 points</li>
</ul>
 The HTML <bdi> tag is used on a span of text that is to be
isolated from its surroundings for the purposes of bidirectional
text formatting.
 This can be useful when displaying right-to-left text (such as
Arabic) inside left-to-right text (such as English) when the
text-direction is unknown.
 The <bdi> element allows you to honor the correct
directionality of text when this is unknown
12

13. Nav Tag :
 The <nav> tag defines a set of
navigation links.
 Notice that NOT all links of a
document should be inside a <nav>
element. The <nav> element is
intended only for major block
of navigation links.
13

14. Continued..
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
14
Output:

15. 15
Canvas
 What is Canvas?
◦ The HTML5 <canvas> element is used to
draw graphics.
◦ The <canvas> element is only a container
(Container tags are tags that you place on
your site to trigger not one, but many
other tags) for graphics. You must use a
script to actually draw the graphics.
◦ Canvas has several methods for drawing
paths, boxes, circles, text, and adding
images.

16. Convas Continued..
◦ A canvas is a rectangular area on an
HTML page, and it is specified with the
<canvas> element.
◦ Note: By default, the <canvas> element
has no border and no content.
 <canvas id="myCanvas" width="200"
height="100"></canvas>
 To add a border, use the style
attribute:
16

17. Example..
 <canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
◦ Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
◦ var c=document.getElementById("myCanvas");
◦ var ctx=c.getContext("2d");
◦ ctx.fillStyle="#FF0000";
◦ ctx.fillRect(0,0,150,75);
</script>
17
Output:

18. Write something in Canvas
<canvas id="e" width="200" height="200" style="border:1px
solid;"></canvas>
<script>
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.font = "bold 45px Arial";
context.fillText("Zibri", 60, 100);
</script>
18
Output:

19. SVG
 What is SVG?
◦ SVG stands for Scalable Vector Graphics
◦ SVG is used to define vector-based
graphics for the Web
◦ SVG defines the graphics in XML format
◦ SVG graphics do NOT lose any quality if
they are zoomed or resized
◦ Every element and every attribute in SVG
files can be animated
19

20. SVG Advantages:
 Advantages of using SVG over other
image formats (like JPEG and GIF) are:
◦ SVG images can be created and edited with
any text editor
◦ SVG images can be
searched, indexed, scripted, and compressed
◦ SVG images are scalable
◦ SVG images can be printed with high quality
at any resolution
◦ SVG images are zoomable (and the image
can be zoomed without degradation)
20

21. SVG Example:
<svg width="300" height="200">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"
/>
Sorry, your browser does not support inline SVG.
</svg>
21
Output:

22. Differences Between SVG and
Canvas
 SVG is a language for describing 2D graphics in XML.
 Canvas draws 2D graphics, on the fly (with a
JavaScript).
 SVG is XML based, which means that every element is
available within the SVG DOM. You can attach
JavaScript event handlers for an element.
 In SVG, each drawn shape is remembered as an
object. If attributes of an SVG object are changed, the
browser can automatically re-render the shape.
 Canvas is rendered pixel by pixel. In canvas, once the
graphic is drawn, it is forgotten by the browser. If its
position should be changed, the entire scene needs to
be redrawn, including any objects that might have been
covered by the graphic.
22

23. Drag/Drop
 Drag and drop is a very common
feature. It is when you "grab" an object
and drag it to a different location.
 Some of browser not support this tag.
23

24. HTML code for Drag/Drop
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
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.getEleme
ntById(data));
}
</script>
<div id="div1"
ondrop="drop(event)"
ondragover="allowDrop(even
t)" style="border:solid #000;
height:100px;
width:400px;"></div>
<img id="drag1" src=“img”
draggable="true"
ondragstart="drag(event)"
width="336" height="69">
</body>
24

25. Output:
25

26. Geo-location
 The HTML5 Geolocation is used to get
the geographical position of a user.
 There is two methods of Geo-location
◦ Use for coordinates base location
◦ Use for find location on Google maps.
26

27. Coordinate base location :
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
27

28. Geolocation in map
<p id="demo">Click the button to get
your position:</p>
<button onclick="getLocation()">Try
It</button>
<div id="mapholder"></div>
<script>
var
x=document.getElementById("dem
o");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentP
osition(showPosition,showError);
}
else{x.innerHTML="Geolocation is
not supported by this browser.";}
}
function showPosition(position)
{
var
latlon=position.coords.latitud
e+","+position.coords.longitu
de;
var
img_url="http://maps.googlea
pis.com/maps/api/staticmap?
center="
+latlon+"&zoom=14&size=40
0x300&sensor=false";
document.getElementById("
mapholder").innerHTML="<i
mg src='"+img_url+"'>";
}
28

29. Continued..
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}}
</script>
29

30. Video Tag:
 Until now, there has not been a standard for
showing a video/movie on a web page.
 Today, most videos are shown through a plug-
in (like flash). However, different browsers may
have different plug-ins.
 HTML5 defines a new element which specifies
a standard way to embed a video/movie on a
web page: the <video> element.
30

31. Syntax.
<video width="320" height="240" controls>
<source src="movie.mp4"
type="video/mp4">
Your browser does not support the video
tag.
</video>
• The control attribute adds video
controls, like play, pause, and volume.
31

32. Continue..
32
Output:

33. Audio Tag
 Until now, there has not been a standard for
playing audio files on a web page.
 Today, most audio files are played through a
plug-in (like flash). However, different browsers
may have different plug-ins.
 HTML5 defines a new element which specifies a
standard way to embed an audio file on a web
page: the <audio> element.
33

34. Syntax.
<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>
<details>this song is good very good</details>
34
Output
:

35. Track Tag:
 Track tag use for where we using more than one video/audio
tag we use in track tag for embedded all audios.
 we can also say this container tag.
<track>
<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>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</track>
35

36. Form handling
 HTML5 has the following new form elements:
◦ <datalist>
◦ <keygen>
◦ <output>
 The <datalist> element specifies a list of pre-defined
options for an <input> element.
 The <datalist> element is used to provide an
"autocomplete" feature on <input> elements. Users will
see a drop-down list of pre-defined options as they
input data.
 Use the <input> element's list attribute to bind it
together with a <datalist> element.
36

37. Example
 An <input> element with pre-defined values in a <datalist>:
<input list="browsers" name="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
 This feature works as in www.google.com for searching purpose.
37
Output:

38. Example:
<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”></output>
</form>
38
Output:

39. Forms and input attributes
39
on
off
Autofocus use for focus
on specific input
<input type=“text”
autofocus ></input>
Autocomplete form and send
to the server
<form
action="demo_form.asp“
autocomplete="on">
Indicates that form will be
not validated on submit
<form
action="demo_form.asp"
novalidate>
Add new input in predefine form
<input form="form_id">
specifies the URL of the file
that will process the input
control when the form is
submitted.
<input formaction="URL"><input type="submit"
formenctype="multipart/for
m-data“>
multipart/form-data=No
characters are encoded
<input formmethod="get|post">
Get=Default. Appends the form-data
to the URL in name pairs:
URL?name=value&name=value
Post=Sends the form-data as an
HTTP post transaction

40. Continued..
40
<input type="image"
src="img_submit.gif"
alt="Submit"
width="48"
height="48">
For create a list for
datalist
<input
list="browsers(datalist-
ID)">Quantity (between 1 and
5):
<input type="number"
name="quantity" min="1"
max="5">
Select multiple images except
single image.
Select images: <input
type="file" name="img"
multiple>

41. SSE
 HTML5 Server-Sent Events allow a web page to
get updates from a server.
 Server-Sent Events - One Way Messaging
◦ A server-sent event is when a web page automatically
gets updates from a server.
◦ This was also possible before, but the web page
would have to ask if any updates were available. With
server-sent events, the updates come automatically.
◦ Examples: Facebook/Twitter updates, stock price
updates, news feeds, sport results, etc.
41

42. PHP
(PHP Hypertext Preprocessor)
42

43. Introduction:
 PHP is a server scripting
language, and is a powerful tool for
making dynamic and interactive Web
pages quickly.
 PHP is a widely-used, free, and
efficient alternative to competitors
such as Microsoft's ASP.
 A PHP script can be placed anywhere
in the document. 43

44. PHP syntax
 A PHP script starts with <?php and
ends with ?>:
 <?php
// PHP code goes here
?>
 The default file extension for PHP files
is ".php“
44

45. Continued..
 A PHP file normally contains HTML
tags, and some PHP scripting code.
 Below, we have an example of a simple
PHP file, with a PHP script that uses a
built-in PHP function "echo" to output the
text "Hello World!" on a web page:
 <?php
echo "Hello world!";
?>
 PHP is an acronym for "PHP Hypertext
Preprocessor"
45

46. Continued..
 PHP is a widely-used, open source
scripting language
 PHP scripts are executed on the
server
 PHP files can contain
text, HTML, CSS, JavaScript, and
PHP code
 PHP code are executed on the
server, and the result is returned to the
browser as plain HTML 46

47. What PHP can do?
 PHP can generate dynamic page content
 PHP can create, open, read, write, and
close files on the server
 PHP can collect form data
 PHP can send and receive cookies
 PHP can add, delete, modify data in your
database
 PHP can restrict users to access some
pages on your website
 PHP can encrypt data
47

48. PHP Features.
 PHP runs on various platforms
(Windows, Linux, Unix, Mac OS
X, etc.)
 PHP is compatible with almost all
servers used today (Apache, IIS, etc.)
 PHP supports a wide range of
databases
 PHP is free. Download it from the
official PHP resource: www.php.net
 PHP is easy to learn and runs 48

49. How to Install PHP?
 Install a web server on your own PC
 Use a Web Host With PHP Support
 If your server has activated support for
PHP you do not need to do anything.
 Just create some .php files, place them
in your web directory, and the server will
automatically parse them for you.
 You do not need to compile anything or
install any extra tools.
 Because PHP is free, most web hosts
offer PHP support.
49

50. Server side Page with PHP
<?php
echo “this is
php output”;
?>
</body>
50
<html>
<head>
</head>
<body>
<h1>this is html
tag</h1>
<h3>next output
is in php
language</h3
>

51. Definition of variables in php
 Variables are "containers" for storing
information
<?php
$x=5;
$y=6;
$z=$x+$y;
echo $z;
?>
51

52. Continued..
 As with algebra, PHP variables can be
used to hold values (x=5) or
expressions (z=x+y).
 A variable can have a short name (like
x and y) or a more descriptive name
(age, carname, total_volume).
52

53. ◦ A variable starts with the $ sign, followed
by the name of the variable
◦ A variable name must start with a letter or
the underscore character
◦ A variable name cannot start with a
number
◦ A variable name can only contain alpha-
numeric characters and underscores (A-
z, 0-9, and _ )
◦ Variable names are case sensitive ($y
and $Y are two different variables)
53
Rules for PHP variables:

54. Creating(Declaring) PHP
Variables:
 PHP has no command for declaring a
variable.
 A variable is created the moment you first
assign a value to it:
 Example
◦ <?php
$txt="Hello world!";
$x=5;
$y=10.5;
?>
54

55. PHP is a Loosely Type
Language
 Example
◦ <?php
$txt="Hello world!";
$x=5;
$y=10.5;
?>
 In the example above, notice that we did not
have to tell PHP which data type the variable
is.
 PHP automatically converts the variable to
the correct data type, depending on its value.
55

56. PHP Variables Scope
 In PHP, variables can be declared
anywhere in the script.
 The scope of a variable is the part of
the script where the variable can be
referenced/used.
 PHP has three different variable
scopes:
◦ local
◦ global
◦ static
56

57. Local and Global Scope
 A variable declared outside a function
has a GLOBAL SCOPE and can only
be accessed outside a function.
 A variable declared within a function
has a LOCAL SCOPE and can only be
accessed within that function.
57

58. PHP
String
58

59. Strings in PHP
 A string is a sequence of characters, like "Hello
world!".
 The PHP strlen() function
◦ The strlen() function returns the length of a string, in
characters.
◦ The example below returns the length of the string
"Hello world!":
◦ strlen() is often used in loops or other functions, when
it is important to know when a string ends.
 Example
◦ <?php
echo strlen("Hello world!");
?>
59

60. PHP strpos() function
◦ The strpos() function is used to search for a
specified character or text within a string.
◦ If a match is found, it will return the character
position of the first match. If no match is
found, it will return FALSE.
◦ The example below searches for the text
"world" in the string "Hello world!":
 Example
◦ <?php
echo strpos("Hello world!","world");
?>
60

61. strcmp() Function
 The strcmp() function compares two
strings.
◦ Note: The strcmp() function is binary-safe
and case-sensitive.
 Example
◦ Compare two strings (case-sensitive):
◦ <?php
echo strcmp("Hello world!","Hello world!");
?>
 Syntax:
◦ strcmp(string1,string2)
61

62. Example 2:
 <?php
echo strcmp("Hello world!","Hello
world!"); // the two strings are equal
echo strcmp("Hello world!","Hello"); //
string1 is greater than string2
echo strcmp("Hello world!","Hello world!
Hello!"); // string1 is less than string2
?>
62

63. More String Functions:
63

64. server-side page using php
strings and variables
<html>
<head></head>
<body>
<?php
$a=“imran”;
$b=“shokat”;
echo $a.$b;
?>
<?php
echo strcmp("Hello
world!","Hello world!"); //
the two strings are equal
echo strcmp("Hello
world!","Hello"); // string1
is greater than string2
echo strpos("Hello
world!","world");
?>
</body>
</html>
64

65. 65