M2 new

Jain College of Engineering and Research, Belagavi
Module II
HTML5
HTML5
 A group of developers at Opera and Mozilla formed the WHATWG (Web

Hypertext Application Technology Working Group) group within the W3C, and
worked to enhance the features of HTML to higher versions.
 The WHATWG group was very small, led by Ian Hickson. By 2009, the W3C
supported the WHATWG group and the work done by them and named it as
HTML5.



For all practical purposes, all that is different from standard HTML in this example is the
statement.
Given such minimal changes, of course, basic HTML5 will immediately render correctly in
browsers. As indicated, HTML5 is not defined as an SGML or XML application. Because of the
non-SGML/XML basis for HTML, there is no concept of validation in HTML5; instead, an
HTML5 document is checked for conformance to the specification, which provides the same
practical value as validation.
Introduction to Web Programming Prof. Pradnya Malaganve

 Do not use invented tags unless they are included via some other markup language:
<p> I am <danger> doing well at </danger> Us. </p>

Structure of HTML5 Documents
A simple html code

Defines the type of document
<!DOCTYPE html>
<html> Root element – indicates that webpage is written in html
<head>
<title> A simple Program Contains title & information about this web page
</title>
</head>
<body>
<p> A simple program to
show the working of html Contents to be displayed on webpage
documents</p>
</body>
</html> Closing of html document
The DOCTYPE (Document Type Definition) element informs the browser, the type of
document it is about to process.
<!DOCTYPE html > specifies that the web page contains HTML code.
Head and Body

 HTML5 does not require the use of the <html>, <head>, and <body> elements. However,
most web authors continue to use them.
 The <html> element is sometimes called the root element as it contains all the other HTML
elements in the document.
 It has a ‘lang’ attribute - This attribute tells the browser the natural language that is being
used for textual content in the HTML document. Eg: <head lang = “en”>
 HTML pages are divided into two sections: the head and the body, which correspond to the
<head> and <body> elements.
The head contains descriptive elements about the document, such as its title, any style sheets or
JavaScript files it uses, and other types of meta information used by search engines and other
programs. The body contains content (both HTML elements and regular text) that will be
displayed by the browser.
Eg: <head>
<meta charset = “utf-8” />
<link rel = “stylesheet” href = “main.css” />
<script src = “new.js”> </script>
<title> Student activity </title>
<head>
 The <meta> element declares that the character encoding for the document is UTF- 8.
Character encoding refers to which character set standard, is used to encode the
characters in the document. UTF-8 is a more complete variable-width encoding system
that can encode all110,000 characters in the Unicode character set.
 The <link> element specifies an external CSS style sheet file by name ‘main.css’ is used
with this document. The style sheets is used to define the visual display of the HTML
elements in the document. The styles can also be included within the document.
 The <script> element references an external JavaScript file. The JavaScript code can
also be written directly within the HTML document.
 The <title> element is used to provide a broad description of the content. It is displayed
by the browser in its window and/or tab.
Uses of <title> element –

1. To provide a broad description of content
2. Used by the browser for its bookmarks
3. Used by the browser to store the history list
4. Search engines use it as the linked text in their result pages.
Presentational Markup Removed and Redefined

HTML5 removes a number of elements and attributes.
Many of the elements are removed because they are more presentational than semantic.
Table 2-1 presents the elements currently scheduled for removal from HTML5
some elements that apparently should be eliminated somehow live on. For example,<small> continues to be
allowed, but <big> is obsolete. The idea here is to preserve elements but shift meaning. For example,
<small>is no longer intended to correspond to text that is just reduced in size, similar to
<font size=”-1”>or<span style=”font size: smaller;”>




HTML Syntax
Elements and Attributes

 HTML documents are composed of textual content and HTML elements.
 The term HTML element is often used interchangeably with the term tag.
 However, an HTML element consists of the element name within angle brackets
(i.e., thetag) and the content within the tag.
 A tag consists of the element name within angle brackets.
 The element name appears in both thebeginning tag and the closing tag.
 The closing tag contains a forward slash followed by the element name, all enclosed
withinangle brackets.

Opening tag content closing tag
<p style = “font-size:40”> Hello I am a paragraph </p>
In the above example, <p> is the tag and “Hello I am a paragraph” is the content.
HTMLelements can also contain attributes.
 An HTML attribute is a ‘name = value’ pair that provides more information
about theHTML element. In the above example, style is an attribute.

 An element which does not contain any text or image content is called an empty element. It
is an instruction to the browser to do something.
Eg: <img> (image element) is an empty element.
 The empty elements are terminated by a trailing slash.
Eg: <img src= “file.jpg” /> --------- empty element
Nesting HTML Elements

 An HTML element may contain other HTML elements. The container element is said to be a
parent of the contained element (child).
 Any elements contained within the child are said to be descendants of the parent element.
 Any given child element, may have a variety of ancestors
<body>
<p> This is some big <b> text </b> <body> (parent element)
</p>
<h3>A small title here </h3>
<p>,<h3>, <p> (child elements)
<p> This is <span> important </span>
</p>
Siblings elements
</body>
 Each HTML element must be nested properly. That is, a child’s ending tag must occur before
its parent’s ending tag. As shown in the above example, <span> tag must be closed first and
then the <p> tag is closed.
Some basic HTML Elements
HTML5 contains many structural and presentation elements, few elements are explained below -
Headings
 Text is often separated into sections in documents by beginning each section with a
heading.
 Larger sections sometimes have headings that appear more prominent than headings for
sections nested inside them.
 In XHTML, there are six levels of headings, specified by the tags <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>, where <h1> specifies the highest-level heading.
 Headings are usually displayed in a boldface font whose default size depends on the
number in the heading tag.
 On most browsers, <h1>, <h2>, and <h3> use font sizes that are larger than that of the
default size of text, <h4> uses the default size, and <h5> and <h6> use smaller sizes.

 The heading tags always break the current line, so their content always appears on a new
line.
The following example illustrates the use of headings:
<!DOCTYPE html>

<head> <title> Headings </title>
</head>
<body>
<h1> Aidan's Airplanes (h1) </h1>
<h2> The best in used airplanes (h2) </h2>
<h3> "We've got them by the hangarful" (h3) </h3>
<h4> We're the guys to see for a good used airplane (h4) </h4>
<h5> We offer great prices on great planes (h5) </h5>
<h6> No returns, no guarantees, no refunds, all sales are final! (h6) </h6>
</body>
</html>
Output:
Paragraphs and Divisions
 Text is normally organized into paragraphs in the body of a document. 

 The HTML standard does not allow text to be placed directly in a document body. Instead, textual
paragraphs appear as the content of a paragraph element, specified with the tag <p>.
 The <p> tag leaves a line before and after the tag. In displaying the content of a paragraph,
the browser puts as many words as will fit on the lines in the browser window. The browser
supplies a line break at the end of each line.

For example, the following paragraph might be displayed by a browser as shown below.
<p>
Mary had a little lamb, its fleece was white assnow. And everywhere that Mary went, the lamb was
sure to go.
</p>
Notice that multiple spaces in the source paragraph element are replaced by single Spaces. If
the content of a paragraph tag is displayed at a position other than the beginning of the line, the
browser breaks the current line and inserts a blank line. For example, the following line would
be displayed as shown below.
<p> Mary had a little lamb, </p> <p> its

fleece was white as snow. </p>
The <p> tag is a container and can contain HTML and other inline HTML elements (the
<strong> and <a> elements). Inline HTML elements are elements that do not cause a paragraph
break but are part of the regular flow of the text.
The <div> element is also a container element and is used to create a logical grouping of content
Links (anchor tag <a>)
Links are an essential feature of all web pages. Links are created using the <a> element (the “a”
stands for anchor).
<a> is an inline tag. A link has two main parts: the destination and the label. The label of a link
can be text or another HTML element such as an image.

destination label
<a href = “next.html”> click here </a>
<a href = “next.html”><img src = “image1.jpg”></a>
 A link specifies the address of the destination. Such an address might be a file name, a
directory path and a file name, or a complete URL.
 The document whose address is specified in a link is called the target of that link.
 The value assigned to href (hypertext reference) specifies the target of the link. If the target
is in another document in the same directory, the target is just the document’s file name.
If the target file is in a subdirectory named ‘lab’, then the access to file is done by specifying
the directory name. < a href = “lab/next.html”> clickhere</a>.
<!DOCTYPE html >

<html>
<head>
<title >sdfsfdfddddd</title>
</head>
<body>
<p> Mary had a little
<a href="lab/lamb.jpg"> lamb,</a>
</p> <p> its fleece was white as snow. </p>
</body>
</html>
Output:
Mary had a little lamb,

Its fleece was white as snow.
Anchor element <a> can be used to create a wide range of links. These include:
 Links to external file (or to individual resources such as images or movies on an external
site).
 Links to other pages or resources within the current file.

 Links to other places within the current page.
 Links to particular locations on another page (whether on the same site or on an external
site).
 Links that are instructions to the browser to start the user’s email program.
 Links that are instructions to the browser to execute a JavaScript function.
 Links that are instructions to the mobile browser to make a phone call.
Targets within Documents
If the target of a link is not at the beginning of a document, it must be some element within the
document, in which case there must be some means of specifying it. The target element can
include an id attribute, which can then be used to identify it in an href attribute. Consider the
following example:
<h2 id = “avionics”> Avionics </h2>
Nearly all elements can include an id attribute. The value of an id attribute must be unique
within the document. If the target is in the same document as the link, the target is specified in
the href attribute value by preceding the id value with a pound sign (#), as in the following
example:
<a href = “#avionics”> What about avionics? </a>
When the What about avionics? link is taken; the browser moves the display so that the h2
element whose id is avionics is at the top.
When the target is a part or fragment of another document, the name of the part is specified
at the end of the URL, separated by a pound sign (#), as in this example:
<a href = “AIDAN1.html#avionics”> Avionics </a>
One common use of links to parts of the same document is to provide a table of contents in
which each entry has a link. This technique provides a convenient way for the user to get to the
various parts of the document simply and quickly

URL Relative Referencing
 To construct links with the <a> element, reference images with the <img> element, or
include external JavaScript or CSS files, the files should be successfully referred using
relative referencing from the document.
 If the referred file is an external file then absolute reference is required. Absolute path
contains the full path including the domain name, any paths, and then finally the file name of
the desired resource.
 However, when referencing a resource that is on the same server as the HTML document,
then relative referencing is done. Relative paths change depending upon where the links are
present.
There are several rules to create a link using the relative path:
 links in the same directory as the current page have no path information listed filename
 sub-directories are listed without any preceding slashes weekly/filenam
 links up one directory are listed as ../filename
Inline Text Elements

Few HTML elements do not disrupt the flow of text (i.e., do not cause a line break), they are
called inline elements. Eg: ,<u>,<i>,<b>, <a>, <strong>, <time>, <small> elements).

Images
The <img> tag is the oldest method for displaying an image.
<img src = “park.jpg” alt = “Central Park” title = “Central-Park” width = “80” height = “40” />
src attribute - specifies the file containing the image;

alt - specifies text to be displayed when it is not possible to display the image.
title – specifies the title to be displayed in pop-up tool tip when user moves mouse over image.
width and height - can be included to specify (in pixels) the size of the rectangle for the image
Eg:
<html>
<head>
<head> <title>Image display</title>
</head>
<body>
<p >Displays the image</p>
<img src="cycle-riding.jpg" width="200" height="200">
<p >qqqqqqqq,</p>
</body>
</html>

Output:
Character entities
 These are special characters for symbols for which there is either no easy way to type them
via a
 keyboard (such as the copyright symbol or accented characters) or which have a reserved
meaning in HTML (for instance the “<” or “>” symbols).
 There are many HTML character entities. They can be used in an HTML document by using
the entity name or the entity number.

& Ampersand
" Double quote
' Single quote (apostrophe)
° Degree
Lists
HTML provides simple and effective ways to specify lists in documents.
There are three types of lists:
■ Unordered lists. Collections of items in no particular order; these are by default rendered by
the browser as a bulleted list. However, it is common in CSS to style unordered lists without the
bullets. Unordered lists have become the conventional way to markup navigational menus.
■ Ordered lists. Collections of items that have a set order; these are by default rendered by the
browser as a numbered list.
■ Definition lists. Collection of name and definition pairs. These tend to be used infrequently.
Perhaps the most common example would be a FAQ list.
<html >
<head> <title> list </title>
</head>
<body>
<h3> Cessna 210 Engine Starting Instructions </h3>
<ul >
<li>sssss,</li>
<li>saaaaa</li>
</ul>
<hr size="5" />
<ol >
<li> Set propeller to high RPM </li>
<li> Set ignition switch to "BOTH" </li>
<li> Set auxiliary fuel pump switch to "LOW PRIME" </li>
<li> When fuel pressure reaches 2 to 2.5 PSI, push starter button </li>
</ol>
</body>
</html>
Output:
HTML5 Semantic Structure Elements
 The different sections of a website are usually divided by using <div> tag.
 Most complex websites are packed solid with <div> elements. Most of these are marked with
different id or class attributes, that are styled by using various CSS.
 But many <div> elements make the markup confusing and hard to modify.
 Developers typically give suitable names to id or class of <div>, so as to provide some clue
to understand what that part of code means. The new elements help the bots to view sites and
the codes more like people.
 The idea behind using new semantic block structuring elements in HTML5 is to make it
easier to understand, what a particular part of document does.
 Some of <div> tag is replaced with self-explanatory HTML5 elements. There is no

predefined presentation for these new tags. The new semantic elements in HTML5 are listed
below -
1. Headers and Footer
2. Heading Groups
3. Navigation
4. Articles and Sections
5. Figure and Figure Captions
6. Aside
Header and Footer

Most website pages have a recognizable header and footer section. Typically the header contains
the site logo and title (and perhaps additional subtitles or taglines), horizontal navigation links,
and perhaps one or two horizontal banners. The typical footer contains less important material,
such as smaller text versions of the navigation, copyright notices, information about the site’s
privacy policy, and perhaps twitter feeds or links to other social sites.
Both the HTML5 <header> and <footer> element can be used not only for page headers and
footers, but also for header and footer elements within other HTML5 containers, such as
<article> or <section>.
Heading Groups
A header may contain multiple headings <hgroup> element is usually used in such cases. The
<hgroup> element can be used in contexts other than a header. For instance, one could also use
an <hgroup> within an <article> or a <section> element. The <hgroup> element can only contain
<h1>, <h2>, etc., elements.

Navigation
The <nav> element represents a section of a page that contains links to other pages or to other
parts within the same page. Like the other new HTML5 semantic elements, the browser does not
apply any special presentation to the <nav> element. The <nav> element was intended to be used
for major navigation blocks. However, like all the new HTML5 semantic elements, from the
browser’s perspective, there is no definite right or wrong way to use the <nav> element. Its sole
purpose is to make the document easier to understand.
Articles and Sections

The new HTML5 semantic elements <section> and <article> are used to group the tags. Suppose
a book is divided into smaller blocks of content called chapters, which makes the book easier to
read. If each chapter is further divided into sections (and these sections into even smaller
subsections), this makes the content of the book easier to manage for both the reader and the
authors.
The article element represents a section of content that forms an independent part of a document
or site. The section element represents a section of a document, typically with a title
or heading. It is a broader element.
Figure and Figure Captions

Prior to HTML5, web authors typically wrapped images and their related captions
within a nonsemantic <div> element. In HTML5 we can instead use the <figure>
and <figcaption> elements. The figure element represents some flow content,
optionally with a caption, that is self- contained and is typically referenced as a
single unit from the main flow of the document.
<p>This photo was taken on October 22, 2011 with a Canon EOS 30D camera.</p>
<figure>
<img src="images/central-park.jpg" alt="Central Park" /><br/>
<figcaption>Conservatory Pond in Central Park</figcaption>
</figure>
</p>
The above tags illustrates a sample usage of the <figure> and <figcaption> element.
Aside
The <aside> element is similar to the <figure> element, the <aside> element “represents
a section of a page that consists of content that is indirectly related to the content
around the aside element”. The <aside> element is be used for sidebars, pull quotes,
groups of advertising images, or any other grouping of non-essential elements.
HTML5’s Open Media Effort

An interesting aspect of HTML5 that is reminiscent of the previous efforts of
Netscape and Microsoft is the support for tag-based multimedia in HTML
documents.
Traditionally, multimedia has been inserted with the embed and object elements,
particularly when inserting Adobe Flash, Apple QuickTime, Windows Media, and
other formats.
However, there was a time when tags specifically to insert media were supported;
interestingly, some of those features, such as the dynsrc attribute for <img> tags,
lived on until just recently. HTML5 brings this concept of tag-based multimedia
back.
<video>
The <video> tag is used to embed video content in a document, such as a movie clip
or other video streams.
The <video> tag contains one or more <source> tags with different video sources.
The browser will choose the first source it supports.

The text between the <video> and </video> tags will only be displayed in browsers
that do not support the <video> element.
There are three supported video formats in HTML: MP4, WebM, and OGG.
To insert video, use a <video> tag and set its src attribute to a local or remote URL
containing a playable movie. It can also be displayed playblack controls by
including the controls attribute, as well as set the dimensions of the movie to its
natural size. This simple demo shows the use of the new element.
<!DOCTYPE html>
<html>
<body>
<h1>The video element</h1>
<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>
</body>
</html>
<audio>
The <audio> tag is used to embed sound content in a document, such as music or
other audio streams.
The <audio> tag contains one or more <source> tags with different audio sources.
The browser will choose the first source it supports.
The text between the <audio> and </audio> tags will only be displayed in browsers
that do not support the <audio> element.
There are three supported audio formats in HTML: MP3, WAV, and OGG.
<!DOCTYPE html>
<html>
<body>
<h1>The audio element</h1>
<p>Click on the play button to play a sound:</p>
<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>
</body>
</html>
HTML5’s audio element is quite similar to the video element. The element should
support common sound formats such as WAV files. In this manner, the audio
element looks pretty much the same as Internet Explorer’s proprietary bgsound
element.
Client-Side Graphics with <canvas>

The Canvas Element
One of the most exciting features of HTML5 is the <canvas> element for
drawing various graphics components, such as boxes, circles, text, and
images.
However, it is worth mentioning that the <canvas> element is merely a
graphic container. Thus, to define the graphics, a script has to be executed.
Here is an example where JavaScript is used in conjunction with the
element:
<canvas id=”TestCanvas” width=”200″ height=”100″></canvas>
var c = document.getElementById(“TestCanvas”);
var context = c.getContext(“2d”);
context.fillStyle = “#FF0000”;
context.fillRect(0,0,140,75);
The canvas element is used to render simple graphics such as line art, graphs, and other custom

graphical elements on the client side.

Initially introduced in the summer of 2004 by Apple in its Safari browser, the canvas element is
now supported in many browsers, including Firefox 1.5+, Opera 9+, and Safari 2+, and as such is
included in the HTML5 specification.
While Internet Explorer does not directly support the tag as of yet, there are JavaScript libraries3
that emulate <canvas> syntax using Microsoft’s Vector Markup Language (VML).
From a markup point of view, there is little that can be done with a <canvas> tag.
Simply put the element in the page, name it with an id attribute, and define its dimensions with
height and width attributes:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”content-type” content=”text”; charset=”Utf-8”>
<title> Canvas Example</title>
<script type=”text/javascript”>
Window.onload=function()
{
Var canvas= canvas.getcontext(.2d);
Context.strokeStyle=”orange”;
Context.StrockRect(10,10,150,150);
Context.fillStyle= “rgba()218,0,0,0.4”;
Context.fillRct(150,30,75,75);
}
</script>
</head>
<body>
<h1> Simple Canvas Example</h1>
<canvas id=”canvas” width=”300” height=”300”>
<strong> Canvas supporting browsers required</strong>
</canvas>
</body>
</html>
OUTPUT

 Drawing and Styling Lines and Shapes

HTML5 defines a complete API for drawing on a canvas element, which is composed of many
individual sub-APIs for common tasks.
For example, to do some more complex shapes, the path API must be used.
The path API stores a collection of subpaths formed by various shape functions and connects the
subpaths via a fill() or stroke() call.
To begin a path, context.beginPath() is called to reset the path collection.
Then, any variety of shape calls can occur to add a subpath to the collection.
Once all subpaths are properly added, context.closePath() can optionally be called to close the
loop. Then fill() or stroke() will also display the path as a newly created shape.
This simple example draws a V shape using lineTo():
Ex:
context.beginPath();
context.lineTo(20,100);
context.stroke();
Output
Now, if you were to add context.closePath()before context.stroke(), the V shape would turn into a
triangle, because closePath() would connect the last point and the first point.
Also, by calling fill() instead of stroke(), the triangle will be filled in with whatever the fill color
is, or black if none is specified. Of course, you can call both fill() and stroke() on any drawn shape
if you want to have a stroke around a filled region. Thus, to style the drawing, you can specify the

fillStyle and strokeStyle and maybe even define the width of the line using lineWidth, as shown in
this example
context.strokeStyle = "blue";
context.fillStyle = "red";
context.lineWidth = 10;
context.beginPath();
context.closePath();
context.stroke();
context.fill();
Output:
 Applying Some Perspective

As the context is specified as 2d, it is no surprise that everything you have seen so far has been two-
dimensional. It is possible to add some perspective by choosing proper points and shades. The 3D cube
shown in Figure 2-3 is created using nothing more than several moveTo() and lineTo() calls. The lineTo()
call is used to create three sides of the cube, but the points set are not straight horizontal and vertical lines
as we see when we make 2D squares. Shading is applied to give the illusion of dimensionality because of
the application of a light source. While the code here is pretty simple, you can see that using canvas
properly is often a function more of what you may know about basic geometry and drawing than anything
else.


 Drawing Arcs and Curves

Drawing on canvas isn’t limited to simple lines; it is also possible to create curved lines using arc(),
arcTo(), quadraticCurveTo(), and bezierCurveTo().
Use the arc(x, y, radius, startAngle, endAngle, counterclockwise) method to draw circles and parts of
circles. Its location is defined by the point of its center (x,y) as well as the circle’s radius. How much of the
circle is drawn is defined by startAngle and endAngle, in radians.
The direction of the curve is set by a Boolean value, which is the final parameter specified by
counterclockwise. If it is set to true, the curve will move counterclockwise; otherwise, it will move
clockwise. If your math is a bit rusty, to make a full circle, the start angle should be set to 0 and the end
angle should be 2π. So to start your face drawing, use arc() to draw the head as a circle:


 Scaling, Rotating, and Translating Drawings

The canvas API provides a number of useful methods that accomplish the common tasks you will likely
want to perform. First let’s explore the scale(x,y) function, which can be used to scale objects. The x
parameter shows how much to scale in the horizontal direction and the y parameter indicates how much to
scale vertically.
/* scale tall and thin *
context.scale(.5,1.5);
writeBoxes(context);
/* move short and wide */
context.scale(1.75,.2);
writeBoxes(context);

 Using Bitmaps in Drawings

A very interesting feature of canvas is the ability to insert images into the drawing There are several ways
to do this, but let’s start with the most basic, drawImage(img,x,y), which takes an image object and the
coordinates for where the image should be placed.
The image will be its natural size when called in this manner.
Use drawImage(img,x,y,w,h) to modify the image size and set the width and height.
The actual image passed in to the drawImage() method can come from a few places. It can be
• An image already loaded on the page
• Dynamically created through the DOM
• Another canvas object
• An image created by setting its src to a data:
URL The important thing to remember is that the image must be loaded by the time canvas is ready to
access it. This may require use of the onload function for the image

 Text Support for canvas

In browsers that supported early forms of the canvas element, text was not well supported in a drawing, if
at all. Per HTML5, text functions should now be supported by the canvas API, and several browsers
already do support it.
Write text by using fillText (text,x,y [,maxWidth]) or strokeText(text,x,y [,maxWidth]). Both functions
take an optional last parameter, maxWidth, that will cut the text off if the width is longer than specified.
Often, both fillText() and strokeText() will be utilized to display an outline around the text. Here we set a
fill color of blue and then write the phrase “Canvas is great!” with a black stroke around the letters.
context.fillStyle = "rgb(0,0,255)";
context.strokeStyle = "rgb(0,0,0)";
context.fillText("Canvas is great!",10,40);
context.strokeText("Canvas is great!",10,40);
To get more-customized text, use the font property, which you set identically to a CSS font property. Can
use textAlign and textBaseline to set the horizontal and vertical alignment of the text string.
The textAlign property has the possible values of start, end, left, right, and center. The textBaseline
property can be set to top, hanging, middle, alphabetic, ideographic, and bottom.
context.font = "bold 30px sans-serif";

context.textAlign = "center";
context.textBaseline = "middle";
Can add shadows to shapes simply by setting the shadow properties,

shadowOffsetX, shadowOffsetY, shadowBlur, and shadowColor.
The offsets simply set how far the shadow should be offset from the image.
A positive number would make the shadow go to the right and down. A negative number would make it go
to the left and up. The shadowBlur property indicates how blurred the shadow will be, and the
shadowColor property indicates the color. This code fragment demonstrates setting a shadow.
context.shadowOffsetX = 10;
context.shadowOffsetY = 5;
context.shadowColor = "rgba(255,48,48,0.5)";
context.shadowBlur = 5;
context.fillStyle = "red";
context.fillRect(100,100,100,100);

What is SVG?
 SVG stands for Scalable Vector Graphics
 SVG is used to define graphics for the Web
 SVG is a W3C recommendation
The HTML <svg> Element

The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic
images.
SVG Circle
Example
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-
width="4" fill="yellow" />

</svg>
</body>
</html>
SVG Rectangle
Example
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-
width:10;stroke:rgb(0,0,0)" />
</svg>
SVG Rounded Rectangle

Example
<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>
HTML5 Form Changes

The specification added a number of form widgets, validation facilities, and some accessibility
improvements. Few browsers save Opera implemented any of these features, and some in the industry
complained about the complexity of the specification.
However, most of the Web Forms specification has been incorporated into HTML5 and more and more of
its features are now being implemented in browsers.
New Form Field Types

Traditionally, the HTML input element is used to define most form fields. The particular type of form field
of interest is defined with the type attribute, which is set to text, password, hidden, checkbox, radio, submit,
reset, image, or button. HTML5 adds quite a number of other values, which we will briefly explore here.
First, setting the type equal to color should create a color picker.
The <form> Element

The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
HTML Forms
First name:
John
Last name:
Doe
Submit
The <input> Element

The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on
the type attribute.
One of the most used form element is the <input> element.
The <input> element can be displayed in several ways, depending on
the type attribute.
Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Output:
The input Element
First name:
Ex:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many

choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
Text Fields
The <input type="text"> defines a single-line input field for text input.
Example
A form with input fields for text:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Text input fields
First name:
John
Last name:
Doe
Note that the form itself is not visible.
Also note that the default width of text input fields is 20 characters
The <label> Element

Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will
read out loud the label when the user focuses on the input element.
The <label> element also helps users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks the text
within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">

<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Output:
Radio Buttons
Choose your favorite Web language:
HTML
CSS
JavaScript
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
A form with checkboxes:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Output:
Checkboxes
The input type="checkbox" defines a checkbox:
I have a bike
I have a car
I have a boat
Submit

The <select> Element

The <select> element defines a drop-down list:
Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Output:
The select Element
The select element defines a drop-down list:
Submit
Choose a car:
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Example
<option value="fiat" selected>Fiat</option>
The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Textarea
The textarea element defines a multi-line input field.

The <datalist> Element

The <datalist> element specifies a list of pre-defined options for
an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.
Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Output:
The datalist Element
The datalist element specifies a list of pre-defined options for an input element.
Submit
The <output> Element

The <output> element represents the result of a calculation (like one performed by a
script).
Example
Perform a calculation and show the result in an <output> element:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
The output Element
The output element represents the result of a calculation.
0 100 + =
Submit
The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-
handler.
The form-handler is typically a file on the server with a script for processing input
data.
The form-handler is specified in the form's action attribute.
Example
A form with a submit button:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Output:
List of All <form> Attributes

Attribute Description
accept-charset Specifies the character encodings used for form submission
action Specifies where to send the form-data when a form is submitted

autocomplete Specifies whether a form should have autocomplete on or off
enctype Specifies how the form-data should be encoded when submitting it to the server (only for meth
method Specifies the HTTP method to use when sending form-data
name Specifies the name of the form
novalidate Specifies that the form should not be validated when submitted
rel Specifies the relationship between a linked resource and the current document
target Specifies where to display the response that is received after submitting the form



 Validating Data Entry

It is also possible to force the user to enter data, without resorting to JavaScript, in an HTML5–compliant
browser by setting the required attribute for a form control
 Autocomplete Lists
Under HTML5, the input element’s list attribute is used to set the DOM id of a datalist element used to
provide a predefined list of options suggested to the user for entry:

Emerging Elements and Attributes to Support Web Applications

 menu Element
One element that will be implemented in browsers but might not perform the actions defined in HTML5 is
the menu element. Traditionally, this element was supposed to be used to create a simple menu for choices.
<menu type=”list” id=”oldStyle”>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</menu>
Output:
Item1
Item2
Item3
Item4
Item5
 command Element
The menu element may contain not just links but also other interactive items, including the newly
introduced command element.

This empty element takes a label and may have an icon decoration as well. The command element has a
type attribute, which may be set to command, radio, or checkbox, though when radio is employed there
needs to be a radiogroup indication.
 meter and progress Elements

Two fairly similar elements have been introduced in HTML5 to show current status.
First, the meter element defines a scalar measurement within a known range, similar
to what might be represented by a gauge.

 details Element
The details element is supposed to represent some form of extra details, such as a
tooltip or revealed region that may be shown to a user. The details element can
contain one dt element to specify the summary of the details as well as one dd
element to supply the actual details.
 Output element
This is used to define a region that will be used as output from some calculation or
form control.
 The draggable Attribute and the Drag and Drop API

HTML5 introduces drag and drop attributes to the browser. Drag and drop has been
implemented with JavaScript code. Now the logic is made much easier and cleaner
as the HTML5 specification includes an attribute and events that are intended
exclusively for drag and drop.
 contenteditable Attribute
The basic sense of the attribute is that if it is set to true, the browser should allow the
user to modify the text directly when you click the element
Ex.: <p contenteditable=”true”> My name is John and I am Studying in Mechanical

Branch.</p>
 spellcheck Attribute
HTML5 defines a spellcheck attribute globally for elements. Interestingly, some
browsers such as Firefox have supported spell checking of form fields and elements
in content editing mode using the contenteditable attribute for some time. HTML5
makes this attribute standard. Enabling the spell checking of element content is a
matter of setting the spellcheck attribute to true.

HTML HTML5
HTML does not provide native audio HTML5 provides native audio and video
and video support. support.
HTML only supports vector graphics if

HTML5 supports SVG (Scalable Vector
used in conjunction with different
Graphics), Canvas, and other virtual vector
technologies like Flash, VML,
graphics.
or Silverlight.
HTML allows inline MathML and SVG in

HTML5 allows inline MathML and SVG in text
text with restricted use.
HTML doesn’t allow users to draw

HTML allows users to draw shapes such as
shapes such as circles, triangles, and
circles, triangles, and rectangles.
rectangles.
HTML5 uses web SQL databases, local

HTML only uses browser cache and
storage, and application cache for storing data
cookies to store data temporarily.
temporarily.
JavaScript and browser interface run in JavaScript and browser interface run in
the same thread. separate threads.
Longer document type declaration. Shorter document type declaration.
Longer character encoding declaration. Shorter character encoding declaration. Uses

Uses the ASCII character set. the UTF-8 character set.
Only compatible with newer browsers,

Compatible with almost all browsers. considering there are many new tags and
elements which only some browsers support.
Built based on Standard Generalized HTML5 has improved parsing rules providing
Markup Language (SGML). enhanced compatibility.

Color Names Supported by All Browsers
All modern browsers support the following 140 color names (click on a color
name, or a hex value, to view the color as the background-color along with
different text colors):
AliceBlue
#F0F8FF
AntiqueWhite
#FAEBD7
Aqua
#00FFFF
Aquamarine
#7FFFD4
Azure
#F0FFFF
Beige
#F5F5DC
Bisque
#FFE4C4
Black
#000000
BlanchedAlmond
#FFEBCD
Blue
#0000FF
BlueViolet
#8A2BE2
Brown
#A52A2A
BurlyWood
#DEB887
CadetBlue
#5F9EA0
Chartreuse
#7FFF00
Chocolate
#D2691E
Coral
#FF7F50
CornflowerBlue
#6495ED
Cornsilk
#FFF8DC
Crimson
#DC143C
Cyan
#00FFFF
DarkBlue
#00008B
DarkCyan
#008B8B
DarkGoldenRod
#B8860B
DarkGray
#A9A9A9
DarkGrey
#A9A9A9
DarkGreen
#006400
DarkKhaki
#BDB76B
DarkMagenta
#8B008B
DarkOliveGreen
#556B2F
DarkOrange
#FF8C00
DarkOrchid
#9932CC
DarkRed
#8B0000
DarkSalmon
#E9967A
DarkSeaGreen
#8FBC8F
DarkSlateBlue
#483D8B
DarkSlateGray
#2F4F4F
DarkSlateGrey
#2F4F4F
DarkTurquoise
#00CED1
DarkViolet
#9400D3
DeepPink
#FF1493
DeepSkyBlue
#00BFFF

DimGray
#696969
DimGrey
#696969
DodgerBlue
#1E90FF
FireBrick
#B22222
FloralWhite
#FFFAF0
ForestGreen
#228B22
Fuchsia
#FF00FF
Gainsboro
#DCDCDC
GhostWhite
#F8F8FF
Gold
#FFD700
GoldenRod
#DAA520
Gray
#808080
Grey
#808080
Green
#008000
GreenYellow
#ADFF2F
HoneyDew
#F0FFF0
HotPink
#FF69B4
IndianRed
#CD5C5C
Indigo
#4B0082
Ivory
#FFFFF0
Khaki
#F0E68C
Lavender
#E6E6FA
LavenderBlush
#FFF0F5
LawnGreen
#7CFC00
LemonChiffon
#FFFACD
LightBlue
#ADD8E6
LightCoral
#F08080
LightCyan
#E0FFFF
LightGoldenRodYellow
#FAFAD2
LightGray
#D3D3D3
LightGrey
#D3D3D3
LightGreen
#90EE90
LightPink
#FFB6C1
LightSalmon
#FFA07A
LightSeaGreen
#20B2AA
LightSkyBlue
#87CEFA
LightSlateGray
#778899
LightSlateGrey
#778899
LightSteelBlue
#B0C4DE
LightYellow
#FFFFE0
Lime
#00FF00
LimeGreen
#32CD32
Linen
#FAF0E6
Magenta
#FF00FF
Maroon
#800000

MediumAquaMarine
#66CDAA
MediumBlue
#0000CD
MediumOrchid
#BA55D3
MediumPurple
#9370DB
MediumSeaGreen
#3CB371
MediumSlateBlue
#7B68EE
MediumSpringGreen
#00FA9A
MediumTurquoise
#48D1CC
MediumVioletRed
#C71585
MidnightBlue
#191970
MintCream
#F5FFFA
MistyRose
#FFE4E1
Moccasin
#FFE4B5
NavajoWhite
#FFDEAD
Navy
#000080
OldLace
#FDF5E6
Olive
#808000
OliveDrab
#6B8E23
Orange
#FFA500
OrangeRed
#FF4500
Orchid
#DA70D6
PaleGoldenRod
#EEE8AA
PaleGreen
#98FB98
PaleTurquoise
#AFEEEE
PaleVioletRed
#DB7093
PapayaWhip
#FFEFD5
PeachPuff
#FFDAB9
Peru
#CD853F
Pink
#FFC0CB
Plum
#DDA0DD
PowderBlue
#B0E0E6
Purple
#800080
RebeccaPurple
#663399
Red
#FF0000
RosyBrown
#BC8F8F
RoyalBlue
#4169E1
SaddleBrown
#8B4513
Salmon
#FA8072
SandyBrown
#F4A460
SeaGreen
#2E8B57
SeaShell
#FFF5EE
Sienna
#A0522D
Silver
#C0C0C0
SkyBlue
#87CEEB
SlateBlue
#6A5ACD

SlateGray
#708090
SlateGrey
#708090
Snow
#FFFAFA
SpringGreen
#00FF7F
SteelBlue
#4682B4
Tan
#D2B48C
Teal
#008080
Thistle
#D8BFD8
Tomato
#FF6347
Turquoise
#40E0D0
Violet
#EE82EE
Wheat
#F5DEB3
White
#FFFFFF
WhiteSmoke
#F5F5F5
Yellow
#FFFF00
YellowGreen
#9ACD32

M2 new

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

M2 new

Uploaded by

Copyright:

Available Formats

Jain College of Engineering and Research, Belagavi

 A group of developers at Opera and Mozilla formed the WHATWG (Web

Introduction to Web Programming Prof. Pradnya Malaganve

Introduction to Web Programming Prof. Pradnya Malaganve

Structure of HTML5 Documents

A simple html code

Head and Body

Uses of <title> element –

Presentational Markup Removed and Redefined

Introduction to Web Programming Prof. Pradnya Malaganve

Introduction to Web Programming Prof. Pradnya Malaganve

Introduction to Web Programming Prof. Pradnya Malaganve

Introduction to Web Programming Prof. Pradnya Malaganve

Elements and Attributes

Introduction to Web Programming Prof. Pradnya Malaganve

Opening tag content closing tag

<p style = “font-size:40”> Hello I am a paragraph </p>

Introduction to Web Programming Prof. Pradnya Malaganve

Eg: <img> (image element) is an empty element.

 The empty elements are terminated by a trailing slash.

Eg: <img src= “file.jpg” /> --------- empty element

Nesting HTML Elements

Some basic HTML Elements

Introduction to Web Programming Prof. Pradnya Malaganve

The following example illustrates the use of headings:

Paragraphs and Divisions

 Text is normally organized into paragraphs in the body of a document. 

Introduction to Web Programming Prof. Pradnya Malaganve

<p> Mary had a little lamb, </p> <p> its

Links (anchor tag <a>)

Introduction to Web Programming Prof. Pradnya Malaganve

<a href = “next.html”> click here </a>

<a href = “next.html”><img src = “image1.jpg”></a>

<!DOCTYPE html >

Mary had a little lamb,

Introduction to Web Programming Prof. Pradnya Malaganve

 Links to other places within the current page.

Targets within Documents

<h2 id = “avionics”> Avionics </h2>

<a href = “#avionics”> What about avionics? </a>

<a href = “AIDAN1.html#avionics”> Avionics </a>

Introduction to Web Programming Prof. Pradnya Malaganve

URL Relative Referencing

 links up one directory are listed as ../filename

Inline Text Elements

Introduction to Web Programming Prof. Pradnya Malaganve

src attribute - specifies the file containing the image;

Introduction to Web Programming Prof. Pradnya Malaganve

Introduction to Web Programming Prof. Pradnya Malaganve

HTML5 Semantic Structure Elements

 Some of <div> tag is replaced with self-explanatory HTML5 elements. There is no

Header and Footer

Introduction to Web Programming Prof. Pradnya Malaganve

Articles and Sections

Figure and Figure Captions

HTML5’s Open Media Effort

Introduction to Web Programming Prof. Pradnya Malaganve

<h1>The video element</h1>

<video width="320" height="240" controls>

<h1>The audio element</h1>

<p>Click on the play button to play a sound:</p>

Client-Side Graphics with <canvas>

Introduction to Web Programming Prof. Pradnya Malaganve

graphical elements on the client side.