CH 1 HTML

CH.
1: HTML5
Dr. Sanjay P. Bhakkad
Associate Professor
IMSCD&R, Ahmednagar
Introduction to HTML
HyperText Markup Language, commonly abbreviated
as HTML, is the standard markup language used to
create web pages as well as to create user interfaces
for mobile and web applications.
Web browsers can read HTML files and render them
into visible or audible web pages.
HTML describes the structure of a website semantically
and included cues for the presentation or appearance
of the document (web page), making it a markup
language, rather than a programming language.
Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.
Basics of HTML5
HTML5 is a markup language used for structuring and
presenting content on the World Wide Web.
It is the 5th and current version of the HTML standard.
It was published in October 2014 by the World Wide
Web Consortium(W3C) to improve the language with
support for the latest multimedia, while keeping it easily
readable by humans—and consistently understood by
computers and devices such as web browsers, parsers,
etc.
HTML5 is the next major revision of the HTML standard
superseding not only HTML 4, but also XHTML 1
and DOM Level 2 HTML.

Basics of HTML5
HTML5 is a the next generation language for Web
development as it has revolutionized the way designers
create websites and the way viewers interact with them.
HTML5 enables the developers to concentrate on how
websites look and work across the various browsers and
platforms.
The new standard incorporates features like Audio,
Video and Canvas. It provides you the facilities like
drag and drop, drawing graphics on Web pages,
storing data offline. No need to use external plug-ins
like Adobe Flash, Microsoft Silverlight and Sun JavaFx
etc to view animation or to create and play games.

Browser Support
The latest versions of Apple Safari, Google
Chrome, Mozilla Firefox, and Opera all support
many HTML5 features and Internet Explorer 9.0 will
also have support for some HTML5 functionality.
The mobile web browsers that come pre-installed on
iPhones, iPads, and Android phones all have
excellent support for HTML5.

New Features in HTML5
New Elements:
AUDIO and VIDEO: to embed media files in a web
page.
HEADER and FOOTER: to display header and footer
sections in a web page.
CANVAS: provides a canvas on a Web page to draw
graphics on it.
PROGRESS: shows the progress of an ongoing process.
MENU: shows a menu bar on a Web page

New Attributes:
Enables you to edit the content of the Web page
Check the spelling mistakes in the text entered in the
text field
You can specify keyboard shortcut for an element for
easy access
A context menu
Specifies whether or not the user is able to drag an
element
To specify the drop zone for a dragged element
To hide the non-relevant element
Link Relations:
A link relation is a relation between two files.
Links with external resources are created by using the
LINK element.
Links with different HTML documents (also known as
hyperlinks) are created by using the A element.
HTML5 introduces some new values for rel attribute,
such as
rel-help: which link your HTML document with a help document and
rel-licence: link with a document having copyright information

Microdata:
The Microdata spec provides a standardized syntax for
additional semantic markup to your web pages to
enhance the machine readability of your web pages.
It’s purpose is not to make a new widget appear on
your web page, but to help automated programs like
Google to understand and better handle the content of
your web pages.
It won’t cause any problems with browsers that don’t
support it.

ARIA Accessibility:
ARIA stands for ‘Accessible Rich Internet Applications’
and can help make your website more accessible to
people with disabilities such as hearing or visual
impairment. These peoples generally rely on a screen
readers.
HTML5 provides an integration between the HTML
elements and ARIA roles by using aria-* attributes.
The aria-* attributes instruct the screen readers to read
the content of websites for the people, who have
disabilities by providing audio or video instructions.

Web Forms 2.0:
Form elements and attributes in HTML5 provide a
greater degree of semantic mark-up than HTML4 and
remove a great deal of the need for tedious scripting
and styling that was required in HTML4.
HTML5 introduces a number of new attributes, input
types, and other elements for your markup toolkit, like
autocomplete, placeholder, autofocus, required,
novalidate, etc.

Multimedia:
In HTML5, you can embed audio or video using native
HTML tags: audio and video, and if the browser
supports the tags, it will give users controls to play the
file.
Why is native better?
No plugins needed
Better performance
Native, accessible controls

2D and 3D Drawings Support:
HTML5 introduces a new element called CANVAS to
provide a drawing surface.
You can also use Scalable Vector Graphics (SVG) to
create 2D drawings.
You can use the CANVAS element with Web-based
Graphics Language (WebGL) to generate interactive
3D graphics in a Web browser.

Offline Web Applications and Caching:
HTML5 allows you to create a Web application to
which users can interact even if the application is
offline.
It provides caching feature that enables you to use
cache manifest file containing a list of files required to
work offline.

CSS Enhancements:
CSS is used to provide style information for a Web
document.
HTML5 includes various new features of CSS like
CSS selectors, New fonts, Text wrapping, Columns, Text
stroke, Opacity, Round corners, Color model, Color
gradients, Shadows, Background enhancements, Transitions,
Transformations, Animations, etc.

New Selectors:
Selectors are methods that help in searching and
selecting the HTML elements in a Web page to perform
various types of tasks, such as changing the color or
position of the content of an element.
HTML5 introduces various new selectors namely:
getElementByClassName()
querySelector()
querySelectorAll()

Client Side Storage:
Client side storage refers to the memory area used to
store the Web content locally on your system.
HTML5 provides the following types of client side
storage:
Session storage: the data is attached to a browser session
and gets deleted when the session ends.
Local storage: represents a key value used to store the data
permanently on a user’s computer.
Database storage: stores the data on the client’s machine
using a real SQL database.
Web Sockets:
Web socket is a protocol-based communication system
between a server and its clients.
It allows bidirectional communication between a Web
browser and a Web server with the help of
Transmission Control Protocol (TCP) connection.
Before Web sockets, polls ( a short-lived connections) are
used for communication where as TCP is a persistent type of
connection.

Web Workers:
Web workers are scripts that can run in the background
independently without interrupting any user interface
scripts.
They allow long tasks to be executed without disturbing
the current loaded Web page.
You can execute one or more Web workers
concurrently.
Web workers are JavaScript files which are heavy
weight.
Notifications:
HTML5 provides a new feature of sending notifications
to your desktop.
These are alerts raised by a website to display
message on a user’s desktop regarding any fact or
task.
Modernizr:
Modernizr is an open source Javascript library that
detects whether the features of HTML5 and CSS3 are
supported by a browser or not.
Drag and Drop API:
HTML5 allows user to drag and drop an image or a
shape from one position to another.
For a draggable element, there is a need to define a
drop target or location where the draggable element
has to be dropped.
The draggable element can pass the information
between the source and destination location.

Geolocation:
Geoloction is the technology that can find your
geographical position anywhere in the world.
HTML5 provides golocation API that enables you to
share your location with trusted websites.
These APIs send the information related to the latitude
and longitude of your device to a remote Web server
and shows your location on a map.

HTML5 Page Structure
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
It’srequired by browsers that need the presence of a

doctype to trigger standards mode.
<meta charset=utf-8>
<meta http-equiv=“Content-Type” content=“text/html”; charset=“UTF-8”>
Then we need to define the document’s character

encoding. Not doing so can result in an obscure but real
security risk.
This should be in the first 512 bytes of the document.
we recommend UTF-8 as the character encoding.
HTML5 Page Structure: lax syntax
<!doctype html>
<title>Interesting blog</title>
<p>Today I drank coffee for breakfast. 14 hours
later, I went to bed.</p>
With no head, body, or html tag, the document

validates.
The browser’s debugger adds the missing elements
like head and body.
HTML5 Page Structure: lax syntax
Skipping the <html> tag hurts your screen reader
users, as that’s where you set the primary language
of the document: <html lang=en>
This is important as the words are pronounced
differently depending on whether the language is
English, French or some other.
IE requires the <body> element before it will
apply CSS to style new HTML5 elements.
Another problem is, Page is difficult to maintain.
The minimum maintainable HTML5 page:
<!DOCTYPE html>
<html lang=en>
<head>
<title>Interesting blog</title>
</head>
<body>
<p>Today I drank coffee for breakfast. 14 hours later, I
went to bed.</p>
</body>
</html>

A <video> element
Need:
Previously, there is a need to use <object> element which is
a generic container for foreign objects.
Due to browser inconsistencies there is a also need to use
<embed> element.
All these creates code which is ugly and ungainly.
A correct version of third party plugin is also required on

the user’s machine.
Sometimes, your layout overlaps the plugin’s drawing area.
Can’t resize with page.

Old way to add Video: Using Object
<object width=”425” height=”344”>
<param name=”movie”
value=”http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1
&”></param>
<param name=”allowFullScreen” value=”true”></param>
<param name=”allowscriptaccess” value=”always”></param>
<embed src=”http://www.youtube.com/v/9sEI1AUFJKw
&hl=en_GB&fs=1&” type=”application/x-shockwave-flash”
allowscriptaccess=”always” allowfullscreen=”true” width=”425”
height=”344”></embed>
</object>

A <video> element
Code:
<video src=sampleVideo.ogv></video>
src refers to the URL of the video to embed.
Autoplay:
<video src=sampleVideo.ogv autoplay></video>
Code with Fallback Content facility:
<h1>Video and legacy browser fallback</h1>
<video src=sampleVideo.ogv>
Your browser does not support HTML5. Please upgrade your
browser.
</video>

A <video> element
Controls:
<video src=sampleVideo.ogv controls> </video>
Display’s a play/ pause toggle, a seek bar, and volume control.
Poster:
The poster attribute points to an image that the browser will use
while the video is downloading, or until the user tells the video to
play.
If you don’t use the poster attribute, the browser shows the first
frame of the movie, which may not be the representative image
you want to show.
<video src=sampleVideo.ogv controls
poster="/images/myVideo.gif"> </video>
A <video> element
Height, Width:
These attributes tell the browser the size in pixels of the video.
<video width="320" height="240” src=sampleVideo.ogv> </video>
If you leave them out, the browser uses the intrinsic width of the
video resource, if that is available. Otherwise it is the intrinsic
width of the poster frame, if that is available. Otherwise it is 300
pixels.
If you specify one value, but not the other, the browser adjusts the
size of the unspecified dimension to preserve the video’s aspect
ratio.
If you set both width and height to an aspect ratio that doesn’t
match that of the video, the video is not stretched to those
dimensions but is rendered “letter-boxed” inside the video element
of your specified size while retaining the aspect ratio.
A <video> element
Loop:
The loop attribute is another Boolean attribute. As you
would imagine, it loops the media playback.
<video src=sampleVideo.ogv controls loop></video>
Muted:
A boolean attribute when present, it specifies that the
audio output of the video should be muted.
<video src=sampleVideo.ogv controls muted></video>

A <video> element
Preload:
The preload attribute specifies if and how the author thinks
that the video should be loaded when the page loads.
<video preload="auto|metadata|none">
Value Description
auto A suggestion to the browser that it should begin
downloading the entire file.
metadata Suggest the browser to download metadata, such
as length of the video or its format.
none Suggest the browser not to download any of the
video. This saves bandwidth.
A <video> element : Codecs
Since not all browsers can play the same formats, in production
environments you need to have more than one source file.
For example, Opera and Firefox support Vorbis and Theora.
Safari provide native support for the H.264 video codec and
MP3 audio. IE9 support H.264, which is also supported on
iPhone and Android. Google Chrome supports Theora and
H.264 video, and Vorbis and MP3 audio.
Google announced it is opensourcing a video codec called
VP8 (webM). Opera, Firefox and Chrome have announced it
will support it. every YouTube video will be in webM format.
The rule is: provide both royalty-free (webM or Theora) and
H.264 video in your pages, and both Vorbis and MP3 audio so
that nobody gets locked out of your content.
Multiple <source> elements
To do this you need to tie the separate versions of the file to the
media element. Instead of using the single src attribute, you nest
separate <source> elements for each encoding with appropriate
type attributes inside the <audio> or <video> element and let the
browser download the format that it can display.
<video controls>
<source src=“sampleVideo.ogv” type=“video/ogg” >
<source src=“sampleVideo.mp4” type=“video/mp4”>
</video>
If you miss out on the type attribute, the browser downloads a small
bit of each file before it figures out that it is unsupported, which
wastes bandwidth and could delay the media playing.

A <audio> element:
Fig.: Gallery of audio players by major web browsers

A <audio> element:
<audio src=“sampleAudio.mp3" controls>
</audio>
<audio controls>
<source src="vincent.mp3" type="audio/mpeg"/>

<source src="vincent.ogg" type="audio/ogg"/>
</audio>
Attributes of <audio> element:
controls, autoplay, loop, src, preload

A <canvas> element:
The HTML <canvas> element is used to draw graphics, on
the fly, via scripting (usually JavaScript).
The <canvas> element is only a container 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.
Canvas objects can move. Everything is possible: from simple
bouncing balls to complex animations.
Canvas can respond to JavaScript events. Canvas can
respond to any user action (key clicks, mouse clicks, button
clicks, finger movement).
Canvas' methods for animations, offer a lot of possibilities
for HTML gaming applications.
Basic Canvas Example
<canvas id="myCanvas" width="200" height="100"></canvas>
The <canvas> element must have an id attribute so it can be
referred to by JavaScript.
The width and height attributes are both optional.
When no width and height attributes are specified, the canvas
will initially be 300 pixels wide and 150 pixels high.
You can have multiple <canvas> elements on one HTML page.
By default, the <canvas> element has no border and no
content. See: Canvas0.html
To add a border, use a style attribute.
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas> See: Canvas1.html

Draw on the Canvas: With JavaScript
All drawing on the HTML canvas must be done with JavaScript
Step 1: Find the Canvas Element
This is done by using the HTML DOM method getElementById()
var canvas = document.getElementById("myCanvas");
Step 2: Create a Drawing Object
The getContext() is a built-in HTML object, with properties and methods for
drawing:
var ctx = canvas.getContext("2d");
Step 3: Draw on the Canvas
To draw on the canvas, set the fill style of the drawing object to the some color.
The fillStyle property can be a CSS color, a gradient, or a pattern. The default
fillStyle is: black.
The fillRect(x, y, width, height) method draws a rectangle, filled with the fill style,
on the canvas:
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
Draw on the Canvas: With JavaScript
Complete Example
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100“ style="border:1px solid #c3c3c3;">

Your browser does not support the canvas element.
</canvas>
<script>
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html> See: Canvas2.html

Canvas Coordinates:
The HTML canvas is a two-
dimensional grid.
The upper-left corner of the
canvas has the coordinates
(0,0)
In the previous example, you
saw this method used:
fillRect(0,0,150,75).
This means: Start at the
upper-left corner (0,0) and
draw a 150x75 pixels
rectangle.

Drawing rectangles:
There are three functions that draw rectangles on the canvas:
fillRect(x, y, width, height)
Draws a filled rectangle.
strokeRect(x, y, width, height)
Draws a rectangular outline.
clearRect(x, y, width, height)
Clears the specified rectangular area, making it fully transparent.
Example
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);

Drawing Paths:
A path is a list of points, connected by segments of lines
that can be of different shapes, curved or not, of
different width and of different color. A path, or even a
subpath, can be closed. To make shapes using paths you
have to take some extra steps:
1. First, you create the path.
2. Then you use drawing commands to draw into the path.
3. Then you close the path.
4. Once the path has been created, you can stroke or fill
the path to render it.
Drawing Paths:
Here are the functions used to perform above steps:
beginPath():
Creates a new path. Once created, future drawing commands are
directed into the path and used to build the path up. Every time
this method is called, the list is reset and we can start drawing
new shapes.
moveTo(x, y):
Moves the pen to the coordinates specified by x and y.
When the canvas is initialized or beginPath() is called, you
typically will want to use the moveTo() function to place the
starting point somewhere else. We could also use moveTo() to
draw unconnected paths.

Drawing Paths:
closePath():
Closes the path so that future drawing commands are once again
directed to the context. This method tries to close the shape by
drawing a straight line from the current point to the start. If the
shape has already been closed or there's only one point in the
list, this function does nothing.
stroke():
Draws the shape by stroking its outline.
fill():
Draws a solid shape by filling the path's content area.
When you use a fill() method, any open shapes are closed
automatically, so you don't have to call closePath(). This is not the case
when you call stroke().
Drawing Paths:
Drawing Lines
For drawing straight lines, use the lineTo() method.
lineTo(x, y):
Draws a line from the current drawing position to the

position specified by x and y.
This method takes two arguments, x and y, which are the
coordinates of the line's end point.
The starting point is dependent on previously drawn paths,
where the end point of the previous path is the starting
point for the following, etc.
The starting point can also be changed by using the
moveTo() method. See: Canvas3.html, Cabvas4.html, CanvasTriangle.html
Drawing Circle:
beginPath() : Begins a path.
arc(x,y,r,startangle,endangle, anticlockwise)
Creates an arc/curve.
The x and y parameters define the center of the circle. The r
parameter defines the radius of the circle.
Define a circle with the arc() method. Then use the stroke()
method to actually draw the circle.
ctx.arc(95,50,40,0,2*Math.PI);
Note: Angles in the arc function are measured in radians, not
degrees. To convert degrees to radians you can use the following
JavaScript expression: radians = (Math.PI/180)*degrees.
To create a circle with arc(), Set start angle to 0 and end angle
to 2*Math.PI.
See: CanvasCircle.html
Drawing Smiley Face : Example
ctx.beginPath();
ctx.arc(250,150,50,0,Math.PI*2);// Outer Circle - Face
ctx.moveTo(285,150);
ctx.arc(250,150,35,0,Math.PI); // Mouth
ctx.arc(235,140,5,0,Math.PI*2); // Left Eye
ctx.arc(265,140,5,0,Math.PI*2); // Right Eye
ctx.stroke();
See: CanvasSmileyFace.html
Drawing Text:
To draw text on a canvas, the most important property
and methods are:
font : defines the font properties for the text
fillText(text,x,y) : draws "filled" text on the canvas
strokeText(text,x,y) : draws text on the canvas (no fill)
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
ctx.strokeText("Hello World",10,150);
Add Color and Center Text : Example
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="200“ style="border:1px solid #d3d3d3;">

Your browser does not support the canvas element.
</canvas>
<script>
var ctx=canvas.getContext("2d");
ctx.font="30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
</script>
</body>
</html>
See: CanvasText.html
TextBaseLineEx.html
Canvas : Gradients
Shapes on the canvas are not limited to solid colors. Gradients
can be used to fill rectangles, circles, lines, text, etc.
There are two different types of gradients:
createLinearGradient(x,y,x1,y1) - creates a linear gradient
createRadialGradient(x, y, r, x1,y1,r1) - creates a
radial/circular gradient
Once we have a gradient object, we must add two or more
color stops using the addColorStop() method. This method
specifies the color stops, and its position along the gradient.
Gradient positions can be anywhere between 0 to 1.
To use the gradient, set the fillStyle or strokeStyle property to
the gradient, then draw the shape (rectangle, text, or a line).
Linear Gradient
createLinearGradient():
Used to create a linear gradient.
Linear gradients are defined by an imaginary line which defines the
direction of the gradient.
Once we've created our gradient, we can insert colors using
the addColorStop method.
The direction of the linear gradient moves from the starting point to
the ending point of the imaginary line defined with
createLinearGradient() method.
We've used two color stops, one that originates at the starting point
of the gradient, and the other that ends with the ending point.
Color stops are placed along the imaginary line somewhere
between 0 and 1, where 0 is at the starting point, and 1 is at the
ending point.
Linear Gradient : Example
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// add linear gradient

var grd = context.createLinearGradient(0, 0, 600, 0);
// Set two colors

grd.addColorStop(0, 'Red'); // First Color as Red.
grd.addColorStop(1, 'Blue'); // Second Color as Blue
// Use fillStyle and fillRect to draw the shape

context.fillStyle = grd;
context.fillRect(0, 0, canvas.width, canvas.height);
</script>
See: CanvasLinGradient.html
Radial Gradient
createRadialGradient() :
Used to create a radial gradient.
Radial gradients are defined with two imaginary circles
- a starting circle and an ending circle, in which the
gradient starts with the start circle and moves towards
the end circle.
Each circle is defined with center point represented by
x and y; and radius as r.
Syntax:
createRadialGradient(x0, y0, r0, x1, y1, r1)

Radial Gradient : Example
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// add radial gradient

var grd = context.createRadialGradient(200,200,10,200,200,300);
// Set two colors

grd.addColorStop(0, 'Red'); // First Color as Red.
grd.addColorStop(1, 'Blue'); // Second Color as White
// Use fillstyle and fillrect to draw the shape

context.fillStyle = grd;
context.fillRect(0, 0, canvas.width, canvas.height);
</script> See: CanvasRadGradient.html
Also See: GradientText.html
Drawing an Image:
drawImage():
Used to draw an image on the canvas.
The method can be invoked with three different set of arguments:
context.drawImage(image, dx, dy)
Position the image on the canvas.
context.drawImage(image, dx, dy, dw, dh)
Position the image on the canvas, and specify width and height of
the image
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
Clip the image and position the clipped part on the canvas.
Note: d represents the destination canvas and
s represents the source image
Draw Image: Example
<script>
var context = document.getElementById("myCanvas").getContext("2d");
// Create an image object.

var img = new Image();
// When the image has loaded, draw it to the canvas.

img.onload = function () {
context.drawImage(img, 50, 50); // Draw an Image here.
}
// Now set the source of the image that we want to load.

img.src = "MalgudiDays.jpg";
</script> See: DrawImageEx1.html, DrawImageEx2.html, DrawImageEx3.html
Using SVG:
SVG stands for Scalable Vector Graphics.
SVG defines vector-based graphics in XML format.
SVG is mostly useful for vector type diagrams like Pie
charts, Two-dimensional graphs in an X,Y coordinate system
etc.
SVG graphics do NOT lose any quality if they are zoomed
or resized
Every element and every attribute in SVG files can be
animated
SVG is a W3C recommendation.
Most of the modern browsers support SVG, if not, you
require SVG viewer.

SVG Advantages:
Advantages of using SVG over other image formats (like JPEG /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 without any degradation
SVG is an open standard
SVG files are pure XML
The main competitor to SVG is Flash.

The biggest advantage SVG has over Flash is the compliance with
other standards (e.g. XSL and the DOM).
Flash relies on proprietary technology that is not open source.

Differences Between SVG & Canvas
SVG Canvas
Vector based (composed of shapes) Raster based (composed of pixel)
Multiple graphical elements, which Single HTML element similar
become the part of the DOM to <img> in behavior
Modified through script and CSS Modified through script only
Give better performance with Give better performance with
smaller number of objects or larger smaller surface or larger number of
surface, or both objects, or both
Better scalability — can be printed Poor scalability — not suitable for
with high quality at any resolution printing on higher resolution

SVG <line>
<!DOCTYPE html>
<html>
<body>
<svg height="210" width="500">

<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0); stroke-width:2" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
SVG <circle>
<circle cx="50" cy="50" r="40" stroke=“green“
stroke-width="3" fill=“yellow" />
</svg>
SVG <ellipse>
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow; stroke:purple; stroke-width:2" />
</svg>
SVG Rectangle: <rect>
<svg width="400" height="110">
<rect width="300" height="100“ style="fill:rgb(0,0,255); stroke-
width:3; stroke:rgb(0,0,0)" />
</svg>
The style attribute is used to define CSS properties for the rectangle.
<rect x="50" y="20" width="150" height="150" style="fill:blue;
stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9" />
</svg>
The opacity value has legal range: 0 to 1.
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red; stroke:black; stroke-width:5; opacity:0.5" />
</svg>
The rx and the ry attributes rounds the corners of the rectangle.

SVG <polygon>
Polygons are made of straight lines, and the shape is "closed"
(all the lines connect up).
<polygon points="200,10 250,190 160,210" style="fill:lime;
stroke:purple; stroke-width:1" />
</svg>
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime; stroke:purple; stroke-width:5; fill-rule:nonzero;" />
</svg>
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime; stroke:purple; stroke-width:5; fill-rule:evenodd;" />
</svg>
SVG <polyline>
The <polyline> element is used to create any shape
that consists of only straight lines:
<polyline points="20,20 40,25 60,40 80,120 120,140
200,180" style="fill:none; stroke:black; stroke-
width:3" />
</svg>
<polyline points="0,40 40,40 40,80 80,80 80,120

120,120 120,160" style="fill:white; stroke:red; stroke-
width:4" />
</svg>

SVG <text>
<text x="0" y="15" fill="red">I like SVG!</text>
</svg>
<text x="150" y="50" fill="red"

transform="rotate(45 150,50)">I like SVG</text>
Sorry, your browser does not support inline SVG.
</svg>

CH 1 HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

CH 1 HTML

Caricato da

Copyright:

Formati disponibili

CH.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

MENU: shows a menu bar on a Web page

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

It’srequired by browsers that need the presence of a

Then we need to define the document’s character

With no head, body, or html tag, the document

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

A correct version of third party plugin is also required on

Can’t resize with page.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Fig.: Gallery of audio players by major web browsers

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

<source src="vincent.mp3" type="audio/mpeg"/>

controls, autoplay, loop, src, preload

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

<canvas id="myCanvas" width="200" height="100“ style="border:1px solid #c3c3c3;">

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Draws a line from the current drawing position to the

<canvas id="myCanvas" width="300" height="200“ style="border:1px solid #d3d3d3;">

// add linear gradient

// Set two colors

// Use fillStyle and fillRect to draw the shape

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

// add radial gradient

// Set two colors

// Use fillstyle and fillrect to draw the shape

// Create an image object.

// When the image has loaded, draw it to the canvas.

// Now set the source of the image that we want to load.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

SVG images are scalable

SVG images can be printed with high quality at any resolution

SVG images are zoomable without any degradation

SVG is an open standard

SVG files are pure XML

The main competitor to SVG is Flash.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.

<svg height="210" width="500">

Dr. Sanjay P. Bhakkad, Associate Professor, IMSCD&R Ahmednagar.