Scribd
Upload
93 views34 pages

Module 2 - HTML 5

2

Uploaded by

Shreyas Guduri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
93 views34 pages

Module 2 - HTML 5

2

Uploaded by

Shreyas Guduri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

2/15/2021

 HTML5 – Text tags; Graphics, Form elements, HTML 5


Input types, semantic tags
Module 2 - HTML 5

Mrs.V.Mareeswari
Assistant Professsor(Sr)
School of Information Technology and Engineering
VIT,Vellore
Cabin No:SJT 210-A30

1 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 2 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

What is HTML5?
HTML5 is a standard for structuring and presenting content on
the World Wide Web.
Superseding of HTML 4.01 and XHTML 1.1. Top 10 design trends in 2020
The historic logo made by the W3C  https://youtu.be/T6Jcl-GqeBA

Tim Berners-Lee
HTML5 is a cooperation between the World
Wide Web Consortium (W3C) and the Web
Hypertext Application Technology Working
Group (WHATWG

3 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 4 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

1
2/15/2021

Introduction to HTML HTML Editors


 Web pages are written in HTML - a simple scripting language.  Since HTML documents are just text files they can be written in
 HTML is short for Hyper Text Markup Language. even the simplest text editor (Notepad).
Hypertext is simply a piece of text that works as a link.  A more popular choice is to use a special HTML editor - maybe
Markup Language is a way of writing layout information within even one that puts focus on the visual result rather than the
documents. codes - a so-called WYSIWYG editor ("What You See Is What
 Basically an HTML document is a plain text file that contains text You Get").
and nothing else.  FrontPage,Dreamweaver or visual studio and online editors…
 When a browser opens an HTML file, the browser will look for  Save the file with .html extension or an .htm extension (for
HTML codes in the text and use them to change the layout, instance "mypage.html").
insert images, or create links to other pages.
5 V.Mareeswari / AP(Sr) / SITE / VIT 6 V.Mareeswari / AP(Sr) / SITE / VIT

Tags or Elements
 Basically, a computer sees an "A" as simply an "A" - whether it is bold,
italic, big or small. To tell the browser that an "A" should be bold we
need to put a markup in front of the A. Such a markup is called a Tag.
 All HTML tags are enclosed in < and >.
 Example text in web page: a piece of text as it appears on the screen.
This is an example of bold text.
 HTML code: This is an example of <b>bold</b> text.
 As you can see, the start tag <b> indicates that whatever follows
should be written in bold. The corresponding end tag </b> indicates
that the browser should stop writing text in bold.
 Although some tags, known as empty elements, are unpaired, e.g <img>.  Support all existing web pages. With HTML5, there is no requirement to
go back and revise older websites.
 Attributes : Elements may contain attributes that are used to set
various properties of an element. <div class = "example">...</div>  Handle web documents errors in a better and more consistent fashion.
7 V.Mareeswari / AP(Sr) / SITE / VIT 8 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

2
2/15/2021

New features over HTML 4


 New Semantic Elements − These are like <header>, <footer>, and <section>. Basic HTML5 Web Page
 Forms 2.0 − Improvements to HTML web forms where new attributes have been
introduced for <input> tag.
Putting the prior sections together, and now adding the <body> section and
 Persistent Local Storage − To achieve without resorting to third-party plugins.
closing tags, we have our first complete web page in HTML5:
 WebSocket − A next-generation bidirectional communication technology for web
applications. <!DOCTYPE html>
 Server-Sent Events − HTML5 introduces events which flow from web server to the <html lang="en">
web browsers and they are called Server-Sent Events (SSE). <head>
 Canvas − This supports a two-dimensional drawing surface that you can program with <meta charset="utf-8">
JavaScript. <title>My First HTML5 Page</title>
 Audio & Video − You can embed audio or video on your webpages without resorting to <link rel="stylesheet" href="style.css">
third-party plugins. </head>
 Geolocation − Now visitors can choose to share their physical location with your web <body>
application. <p>HTML5 is fun!</p>
 Microdata − This lets you create your own vocabularies beyond HTML5 and extend </body>
your web pages with custom semantics. </html>
 Drag and drop − Drag and drop the items from one location to another location on the
same webpage.
Let's open this page in a web browser to see how it looks…
9 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 10 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

Two parts
<HEAD>
<!--This section is for the title and technical info of the page.
The head is used for text and tags that do not show directly on the page. -->
<!DOCTYPE html> <TITLE> Welcome </TITLE>

The DOCTYPE tells the browser which type and version of document to </HEAD>
expect. This should be the last time the DOCTYPE is ever changed. From <BODY> <!-- This section is for all that you want to show on the page. -->
now on, all future versions of HTML will use this same simplified declaration.
<! Insert only BODY tags. >
<html lang="en"> <H1> Hello World </H1>
<!-- Rest of page goes here.
The lang attribute in the <html> element declares which language the page
content is in. Though not strictly required, it should always be specified, as it This is the multiple line comment. -->
can assist search engines and screen readers. e.g. Spanish = "es", French = </BODY>
"fr", German = "de", Chinese = "zh", Arabic = "ar".

11 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 12 V.Mareeswari / AP(Sr) / SITE / VIT

3
2/15/2021

HTML head Elements Title with Icon


Tag Description <html><head>
<head> Defines information about the document <title>Your Website Title Here</title>
<title> Defines the title of a document <!-- this is the code that will allow icon to be visible in the title bar of
the brower -->
<base> Defines a default address or a default target for all links on a page <link rel="icon" type="image/ico" href="micky mouse.png" />
Defines the relationship between a document and an external <!-- you can also say this: <link rel="icon" type="image/png"
<link> resource href="location/image.png" /> -->
<link rel = "stylesheet" href = "stylefile.css"> </head><body>
<meta> Defines metadata about an HTML document <p>My website content and design here</p>
Defines a client-side script (JavaScript/VBScript) </body></html>
<script>
<script src = "scriptfile.js"></script>
Defines style information for a document (CSS)
<style>
13 V.Mareeswari / AP(Sr) / SITE / VIT 14 V.Mareeswari / AP(Sr) / SITE / VIT

In the head section, always write a title: <title>The title of your Meta Tag
page</title>. Notice how the title will be shown in the upper left corner  Metadata is data (information) about data.
of your browser:  Metadata will not be displayed on the page, but will be machine
parsable.
 Meta elements are typically used to specify page description,
keywords, author of the document, last modified, and other metadata.
The title is especially important because it is used by search engines (such
as Google) to index your website and is shown in the search results.  Note: <meta> tags always goes inside the <head> element.
 Note: Metadata is always passed as name/value pairs.

15 V.Mareeswari / AP(Sr) / SITE / VIT 16 V.Mareeswari / AP(Sr) / SITE / VIT

4
2/15/2021

Example 1 - Define keywords for search engines:


<meta name="keywords" content="HTML, CSS, XML, XHTML,
JavaScript">
Example 2 - Define a description of your web page:  Example 6 - the expires tag to indicate to search engines when to
delete your web-page from their database.
<meta name="description" content="Free Web tutorials on HTML and
<meta name="expires" content="tue, 01 Jun 2010 19:45:00
CSS"> GMT">
Example 3 - Define the author of a page:
<meta name="author" content=“John">  Example 7 - Responsive web design
Example 4 - Refresh document every 30 seconds:  <meta name="viewport" content="width=device-width">
<meta http-equiv="refresh" content="30">
Example 5 - Specifies the character encoding for the HTML document
<meta charset="UTF-8">

17 V.Mareeswari / AP(Sr) / SITE / VIT 18 V.Mareeswari / AP(Sr) / SITE / VIT

Body Section
 The body of the document contains all that can be seen when the user
 HTML5 comes with a lot of flexibility and it supports the loads the page.
following features −
 you can learn in detail about all the different aspects of HTML,
 Uppercase tag names. including:
 Quotes are optional for attributes.  Text :Formatting, Resizing, Layout & Listing
 Attribute values are optional.  Links : To local pages, To pages at other sites & To bookmarks
 Closing empty elements are optional.  Images : Inserting images (GIF and jpg) & Adding a link to an image
 Backgrounds : Colors & Images
 Tables
 Forms

19 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 20 V.Mareeswari / AP(Sr) / SITE / VIT

5
2/15/2021

Body Tag Words to know


 The body tag serves as the element containing all the content for the
website. Tag - Used to specify ("mark-up") regions of HTML documents for
the web browser to interpret.Tags look like this: <tag>
 leftmargin Sets a lefthand margin for your body element.
Eg: <p>
 topmargin Sets a margin along the top of your body element
 The text attribute sets the text color of all text contained within Element - A complete tag, having an opening <tag> and a closing
the body tags.
</tag>.
 We may also specify base colors for active ,visted and unvisted Eg: <p> </p>
links. [Deprecated in HTML5, use CSS code]
<body bgcolor=“yellow” text=“red” topmargin=10 leftmargin=20 Attribute - Used to modify the value of the HTML element.
link=“green” alink=“black” vlink=“blue” > Elements will often have multiple attributes.
Eg: <p align=“center”> </p>

21 V.Mareeswari / AP(Sr) / SITE / VIT 22 V.Mareeswari / AP(Sr) / SITE / VIT

Headings
Headings
<HTML>
<HEAD>
<TITLE>Document Headings</TITLE>
<H1 ...> text </H1> -- largest of the six </HEAD>
<H2 ...> text </H2> <BODY>
Samples of the six heading types:
<H3 ...> text </H3> <H1>Level-1 (H1)</H1>
<H4 ...> text </H4> <H2 ALIGN="center">Level-2 (H2)</H2>
<H3><U>Level-3 (H3)</U></H3>
<H5 ...> text </H5> <H4 ALIGN="right">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6 ...> text </H6> -- smallest of the six <H6>Level-6 (H6)</H6>
</BODY>
</HTML>
ALIGN="position" --left (default), center or right

23 V.Mareeswari / AP(Sr) / SITE / VIT 24 V.Mareeswari / AP(Sr) / SITE / VIT

6
2/15/2021

Paragraph
 The <p> tag defines a paragraph. Using this tag places a blank
line above and below the text of the paragraph.
 Attributes:
 ID=p1
 NAME=“Introduction”
 ALIGN="position" (left, center, right)
 Fully-specified text uses <P> and </P>
 But </P> is optional.
 Multiple <P>'s do not create blank lines.
 Use <BR> for blank line.

25 V.Mareeswari / AP(Sr) / SITE / VIT 26 V.Mareeswari / AP(Sr) / SITE / VIT

Paragraph - Example
<HTML><BODY>
<P>Here is some text Here is some text Here is some text Here is some text Here is some
text Here is some text Here is some text Here is some text Here is some text Here is
some text Here is some text Here is some text Here is some text Here is some text Here
is some text Here is some textHere is some text Here is some text Here is some text
Here is some text</P>
<P ALIGN="center"> Centered text Centered text Centered text Centered textCentered
text Centered textCentered textCentered textCentered textCentered textCentered
textCentered textCentered textCentered textCentered textCentered textCentered
textCentered textCentered textCentered textCentered textCentered text</P>
<p><p><p><p>
<P ALIGN="right"> Right-justified text Right-justified text Right-justified text Right-
justified text Right-justified text Right-justified text Right-justified text Right-justified
text Right-justified text Right-justified text Right-justified text Right-justified text Right-
justified text Right-justified text Right-justified text
<! Note: no closing /P tag is not a problem>
</BODY></HTML>

27 V.Mareeswari / AP(Sr) / SITE / VIT 28 V.Mareeswari / AP(Sr) / SITE / VIT

7
2/15/2021

Line Break Horizontal Rule


 A line break ends the line you are currently on and resumes  Use the <HR> tag to display lines across the screen. Note: the
on the next line. Placing <BR> within the code is the same horizontal rule tag has no ending tag.
as pressing the return key in a word processor. Example:
<p>Sincerely,<br> <hr> Use <hr><hr> Them <hr >
<br> Sincerely,
Output:
<br> ________________________________________
Amirta <br> Amirta Use
Class Representative </p> ________________________________________
Class Representative ________________________________________
Them
________________________________________
29 V.Mareeswari / AP(Sr) / SITE / VIT 30 V.Mareeswari / AP(Sr) / SITE / VIT

Formatting Text Formatting Text  Sample Output


 <B>Bold</B><BR>  Bold
 <I>Italic</I><BR>
 <SAMP>Sample  Keyboard Text
 Italic
 <U>Underlined</U><BR> Output</SAMP><BR>
 Underlined  Definition
 Subscripts: f<SUB>0</SUB> +
 Subscripts: f0 + f1  <KBD>Keyboard
f<SUB>1</SUB><BR>  Variable
 Superscripts: x2 + y2 Text</KBD><BR>
 Superscripts: x<SUP>2</SUP> +  Citation
y<SUP>2</SUP><BR>  Smaller  <DFN>Definition</DFN><BR>
 <SMALL>Smaller</SMALL><BR>  Bigger  JDK Acronym
 <VAR>Variable</VAR><BR>
 <BIG>Bigger</BIG><BR>  Emphasized Text
 <EM>Emphasized Text</EM><BR>  Teletype (Monospaced)
 <CITE>Citation</CITE><BR>
 <TT>Teletype (Monospaced)</TT><BR>  Computer Code Text  <ACRONYM TITLE="Java
 <CODE>Computer Code Text</CODE><BR> Development Kit">JDK
 Strike Through
 <STRIKE>Strike Through</STRIKE><BR>
 Bold Italic Acronym</ACRONYM>
 <B><I>Bold Italic</I></B><BR>
 abcdefDeletefhkfjdkhfdhgf
 abcdef<DEL>Delete</DEL>fhkfjdkhfdhgf<BR>
 gfhgfhgfhInsertgfhfghgf
 gfhgfhgfh<INS>Insert</INS>gfhfghgf<BR>
31 V.Mareeswari / AP(Sr) / SITE / VIT 32 V.Mareeswari / AP(Sr) / SITE / VIT

8
2/15/2021

<address>
<address>
<PRE> Preformatted Text
<a
href="mailto:[email protected]">[email protected]</a> <PRE>
<br> if (a < b) {
<a href="tel:+13115552368">(311) 555-2368</a><br> a++;
b = c * d;
<a href="tel:04162202740">0416 220 2740</a> }
</address> else {
a--;
b = (b-1)/2;
}
</PRE>

33 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 34 V.Mareeswari / AP(Sr) / SITE / VIT

Special Characters Entities

35 V.Mareeswari / AP(Sr) / SITE / VIT 36 V.Mareeswari / AP(Sr) / SITE / VIT

9
2/15/2021

Indian Rupee Symbol

 <p>Price &#x20b9; 9500 </p>

 <p>Price &#8377; 5500 </p>

 <p>Price &#8360; 500 </p>

 <p>Price &#x20a8; 2000 </p>

37 V.Mareeswari / AP(Sr) / SITE / VIT 38 V.Mareeswari / AP(Sr) / SITE / VIT

Image
Colors  In HTML, images are defined with the <img> tag. It is empty, which means
that it contains attributes only, and has no closing tag.
 Values for BGCOLOR and COLOR  The value of the src (source) attribute is the URL of the image you want to
Example: 3 ways display.
 <body bgcolor=“AA22FF” >  The alt attribute specifies alternate text to be displayed if for some reason the
 <p color =“black”> browser cannot find the image, or if a user has image files disabled.
 <body bgcolor =“rgb(200,200,200)”>  To define the height and width of the image, use the height and width attributes.
rgb(0,0,0)black, rgb(255,255,255)white  Use the align attributes to place images within your body, tables, or sections.

Tips: Hexa Decimal representation is best. All colors can be specified  <img src=“sunset.jpg" alt=“ Sunset Image" align=“left/right/center”
as a six character hexadecimal value: RRGGBB width="304" height="228" >
 Tips
Tips:: Jpeg images have an unlimited color wheel, and have a high compression
rate downsizing your load times and saving hard drive space. Its best to use
Jpegs for photo galleries, or artwork. Gif images are best used for banners, clip
art, and buttons.
39 V.Mareeswari / AP(Sr) / SITE / VIT 40 V.Mareeswari / AP(Sr) / SITE / VIT

10
2/15/2021

Can I use several elements at the same Link


time?  Hypertext documents contain hypertext links, items that you can select
 You can easily use several elements at the same time as long as you to view another topic or document, often called the destination of the
avoid overlapping elements. This is best illustrated by an link.
example:
 Use the <a></a> tags to define the start and ending of an anchor.
Example:
 If you want to emphasise small text, it must be done like this:
 Internal - Links to anchors on the current page.
<em><small>Emphasised small text</small></em>
 Local - Links to other pages within your site.
 And NOT like this:
<em><small>Emphasised small text</em></small>  Global - Links to outside of your site. Demo
 The difference is that in the first example, we closed the tag we
first opened last. This way we avoid confusing both ourselves and
the browser.

41 V.Mareeswari / AP(Sr) / SITE / VIT 42 V.Mareeswari / AP(Sr) / SITE / VIT

Anchor Attribute
 The href attribute defines reference that the link refers to. Basically this is
where the user will be taken if they wish to click this link.
 The target attribute defines whether to open the page in a separate
window, or to open the link in the current browser window.
< a href=“htttp://www.mail.vit.ac.in” target=“_blank”> VIT Email
</a>

43 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 44 V.Mareeswari / AP(Sr) / SITE / VIT

11
2/15/2021

Anchor Attribute / Bookmark anchors


 .html  The name attribute specifies the name of an anchor.
<a name="tips">Useful Tips Section</a> (or)
<h1 id="tips">Useful Tips Section</h1>
 Create a link to the "Useful Tips Section" inside the same document:
frame1.html and <a href="#tips">Visit the Useful Tips Section</a>
link_target.html  Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
 Named anchors are often used to create "table of contents" at the
beginning of a large document. Each chapter within the document is given
a named anchor, and links to each of these anchors are put at the top of the
document.
45 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 46 V.Mareeswari / AP(Sr) / SITE / VIT

Email Link
 Creating an email link is
simple. If you want
Folder Link / download links
somebody to mail you  With HTML, absolute pathnames begin with a slash (/) and are
about your site a good way followed by a sequence of folders beginning with the highest
to do it is place an email level folder and proceeding to the folder that contains the file.
link with a subject already <a href="d:/IWP/Material/Unit I.pptx">Unit I
in place for them. Material</a>
<a <a href =“http://www.mwu.edu/course/info.html”>Course
href="mailto:vmareeswari Information</a>
@vit.ac.in?subject=Feedba <a href= “ftp://192.168.4.76/lab/SWE312 IWP Lab/Basics
ck&body= Sweet site"> of HTML.pdf ”> Lab Material</a>
Send Mail</a> <a href=“/downloads/test.zip">Download Zip file</a>

47 V.Mareeswari / AP(Sr) / SITE / VIT 48 V.Mareeswari / AP(Sr) / SITE / VIT

12
2/15/2021

Default Link
 Use the <base> tag in the head element to set a default URL for all
links on a page to go to.
 It's always a good idea to set a base tag just incase your links become
bugged somewhere down the line. Usually set your base to your
home page.
<head>
<base href="http://www.vit.ac.in">
</head>

<a href="home.asp">LINK</a>

49 V.Mareeswari / AP(Sr) / SITE / VIT 50 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

List
 There are 3 different types of lists.
 A <ol> tag starts an ordered list, <ul> for unordered lists, and
<dl> for definition lists.
 Use the type and start attributes to fine tune your lists
accordingly.
1. <ul> - unordered list; bullets
2. <ol> - ordered list; numbers
3. <dl> - definition list; dictionary

Demo

51 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 52 V.Mareeswari / AP(Sr) / SITE / VIT

13
2/15/2021

Ordered (Numbered) Lists Unordered (Bulleted) Lists


Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag Create a bulleted list with the <ul> tag. The bullet itself comes in three
between your opening <ol> and closing </ol> tags to create list items flavors: square (box), disc, and circle. The default bullet displayed by most
<OL TYPE="1" START=6> web browsers is the traditional full disc.
<LI> Item one </LI>
<ol type="a"> <UL TYPE="disc">
<LI> Item two </LI>
<OL TYPE="I" > <ol type="A">
<LI> One </LI> •One
<LI> Two </LI> •Two
<LI> Sublist item one </LI>
<UL TYPE="circle"> oThree
<LI> Sublist item two </LI>
6. Item one <LI> Three </LI> oFour
<OL TYPE="i">
<LI> Four </LI>
<LI> Sub-sublist item one </LI> 7. Item two Five
<UL TYPE="square">
<LI> Sub-sublist item two </LI> I. Sublist item one Six
<LI> Five </LI>
</OL> II. Sublist item two
<LI> Six </LI>
</OL> i. Sub-sublist item one
</UL>
</OL> ii. Sub-sublist item two </UL>
53 V.Mareeswari / AP(Sr) / SITE / VIT 54
</UL> V.Mareeswari / AP(Sr) / SITE / VIT

Table
 The <table> tag is used to begin a table.
Definition List  Within a table element are the <tr> (table rows) and <td> (table
 A definition list is a list of items, with a description of each columns) tags.
item.  A table cell is defined by <td> and </td>.
 The <dl> tag defines a definition list.  The border attribute defines how wide the table's border will be.
 The <dl> tag is used in conjunction with <dt> (defines the
 If you would like to place headers at the top of your columns, use the
item in the list) and <dd> (describes the item in the list)
<th> tag.
<dl>
<dt>Coffee</dt>  Use rowspan to span multiple rows and colspan to span multiple
Coffee
<dd>black hot drink</dd> columns.
black hot drink
<dt>Milk</dt>  With the cellpadding and cellspacing attributes you will be able to adjust
Milk
<dd>white cold drink</dd> the white space on your tables.
white cold drink
</dl>  Spacing defines the width of the border, while padding represents the
distance between cell borders and the content within.
55 V.Mareeswari / AP(Sr) / SITE / VIT 56 V.Mareeswari / AP(Sr) / SITE / VIT

14
2/15/2021

Simple Table
<html> <head> <title>HTML Tables</title> </head> <body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th> </tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td> </tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td> </tr>
</table> </body> </html>
V.Mareeswari / AP(Sr) / SITE / VIT V.Mareeswari / AP(Sr) / SITE / VIT
57 58

<caption> Example for Table </caption> Table in HTML5


<table border="5" cellpadding="10" cellspacing=10
bgcolor="AABBCC“ height=200 width=300> background=“sunset.jpg”
<tr> <th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th></tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td> Demo
<td bgcolor=“pink">Row 1 Cell 2</td>
<td>Row 1 Cell 3</td> </tr>
<tr bgcolor="red">
<td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr></table>
59 V.Mareeswari / AP(Sr) / SITE / VIT 60 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

15
2/15/2021

 an optional <caption> element, html5_table.html

 zero or more <colgroup> elements,


 an optional <thead> element,
 either one of the following:
 zero or more <tbody> elements
 one or more <tr> elements
 an optional <tfoot> element
 Simply, HTML4 table + CSS= HTML5 table with semantic
elements

61 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 62 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

The <col> element defines a column within a table and defining common
semantics on all common cells. It is found within a <colgroup> element.
rowsgroup establishes a relationship <colgroup> defines a group of columns within a table.
between owned row elements and is a
structural equivalent to
the thead, tfoot and tbody elements in
HTML.

63 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 64 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

16
2/15/2021

<iframe> in HTML 5 <html>


<body>
 define an inline frame with HTML tag <iframe>.
<iframe src="link.html" width="300" height="100"></iframe>
 it can appear anywhere in your document.
<br><br><br><br><br><br>
 defines a rectangular region within the document in which the
<iframe src="table.html" width="200" height="200"
browser can display a separate document, including scrollbars and
align="right"></iframe>
borders.
</body>
 Attribute : id, src, style, title, width, height, sandbox,
</html>

65 V.Mareeswari / AP(Sr) / SITE / VIT 66 V.Mareeswari / AP(Sr) / SITE / VIT

sandbox in <iframe>
sandbox  Enables an extra set of restrictions for the content in an <iframe>
 JavaScript will not execute in the framed document.

 Over time, we have gotten used to integrate more and more content  Forms cannot be submitted.
on our web pages. Sometimes these content come from third parties  Plugins will not load. (Flash, Silverlight plugins, or Java applets )
(social networks widgets, advertising, etc). It implies two  The framed document cannot create new windows or dialogs
consequences: the webpages size continues to rise, and we display to (via window.open or target="_blank", for instance).
the users some content that we can’t fully control.  Features that trigger automatically (autofocused form elements,
 Some of these external content are integrated via the <iframe> tag, autoplaying videos, etc.) are blocked.
and you should pay special attention to these elements for your  AJAX requests can’t be initiated
website’s security. To limit the risks, the W3C added the sandbox
 You limit the storage capabilities on the browser (eg: using cookies
attribute in the HTML5 specifications, allowing to restrict the
or localStorage is impossible)
actions available from an iframe
<iframe sandbox src=”...”></iframe>
67 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 68 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

17
2/15/2021

Remove some restrictions from sandbox


 allow-forms: form submission is allowed
 allow-scripts: scripts are executed
 allow-same-origin: the iframe uses the same “origin” that the page,
so it no longer faces to CORS mechanism restrictions (permission to
use AJAX requests, localStorage, cookies…)
 allow-top-navigation: the iframe can navigate to its top-level
browsing context
 allow-popups: you can open a new window/a popup
 allow-pointer-lock: the Pointer Lock API is operable
<iframe sandbox=”allow-same-origin allow-forms allow-popups”
src=”...”></iframe>

69 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 70 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

Div Tag
 The <div> tag defines a division or a section in an HTML document.
 The <div> tag is used to group block-elements to format them with
styles.
 The <div> element is very often used together with CSS, to layout a
web page.
 Attributes: id, width, height, title, style
 For the purpose of this example, we have included the style attribute in
order to color our div tag in order to bring a stronger visualization for
our viewers.
 When HTML first began, web creators only had two choices. A, table
layout or frame. The div element provides a 3rd alternative, since a div
can contain any/every other type of html element within its beginning
and ending tag.
71 Dr.Mareeswari V/ AP(Sr) / SITE / VIT
72 V.Mareeswari / AP(Sr) / SITE / VIT

18
2/15/2021

<body> Demo
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<h5>Content Articles</h5>
<p>This paragraph would be your content
paragraph with all of your readable material.</p>
</div>
<div id="menu" align="right" style="color:#FF0000“>Links:<a
href="">HOME</a> | <a href="">CONTACT</a> | <a
href="">ABOUT</a> |</div><br>
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div> </body>
74 Dr.Mareeswari V/ AP(Sr) / SITE / VIT
73 V.Mareeswari / AP(Sr) / SITE / VIT

<span> text box


 <span> is an inline element and it can be used to group inline- First Name Last Name

Address #1

elements in an HTML document. Address #2

City State Zip


 <span> tag is used with inline elements where as the <div> tag is used Country

with block-level elements. Item Purchased Purchase Date

drop-down Serial Number group


<html> <body> list box box
Used For (check one) Network Operating System (check all that apply)

<p>My mother has Home


Business
Netware
Banyan Vines

radio Windows
<span style="color:blue;font-weight:bold"> buttons
Religious or Charitable Institution
Government IBM Lan Server check
Educational Institution PC/NFS boxes
blue</span> eyes and my father has
text
<span style="color:darkolivegreen;font-weight: Comments?: area

bold"> dark green</span> eyes.</p>


form
</body> </html> button
Send Registration Cancel

75 V.Mareeswari / AP(Sr) / SITE / VIT 76 V.Mareeswari / AP(Sr) / SITE / VIT

19
2/15/2021

Forms The target attribute


 HTML forms are used to pass data to a server.
 The target attribute specifies where to display the response that is
 A form can contain input elements like label, text fields, received after submitting the form.
checkboxes, radio-buttons, submit buttons, select lists, textarea  <form action="/action_page.php" target="_blank">
and more.
 The default value is _self which means that the response will open in
<form method="post/get" action=“action_page.php”> the current window.
….input elements…..
</form>
 method - We will only be using the post functionality of method,
which sends the data without displaying any of the information to
the visitor.
 action - Specifies the URL to send the data to. In the example, the
form data is sent to a file called "action_page.php". This file
77 V.Mareeswari / AP(Sr) / SITE / VIT 78 Dr.Mareeswari V/ AP(Sr) / SITE / VIT
contains a server-side script that handles the form data.

 When autocomplete is on, the browser automatically complete <form> Elements


values based on values that the user has entered before.
 <input>
 <form action="/action_page.php" autocomplete="on">
 <label>
 The novalidate attribute is a boolean attribute.
 <select>
 When present, it specifies that the form-data (input) should not be
validated when submitted.  <textarea>

 <form action="/action_page.php" novalidate>  <button>


 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>
79 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 80 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

20
2/15/2021

<label> element Form - <Input> tag


The <input> has a few attributes that you should be aware of.
 The <label> element is useful for screen-reader users, because the
screen-reader will read out loud the label when the user focus on  type - Determines what kind of input field it will be. Possible
the input element. choices are text, submit, and password.
<label for="fname">First name:</label>  name - Assigns a name to the given field so that you may
 The for attribute of the <label> tag should be equal to reference it later.
the id attribute of the <input> element to bind them together.  size - Sets the horizontal width of the field. The unit of
measurement is in blank spaces.
 maxlength - Dictates the maximum number of characters that can
be entered

81 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 82 V.Mareeswari / AP(Sr) / SITE / VIT

Demo

Form – <Input > tag <button> element


<form method="post" action="mailto:[email protected]">  It defines a clickable button.
Name: <input type="text" size="10" maxlength="40" <button> Click here</button>
name="name"> <br> It allows a user to simply input some text
<button type="button" onclick="alert('Hello World!')">Click
Password: <input type="password" size="10" maxlength="10" Me!</button>
name="password"><br> the browser hides the characters being typed; replacing them with stars. <input type="button" value="Press me!"/>
<input type="submit" value="Send"> It will perform the form's set action

<input type="reset" value="Reset Form Values"><br>


</form> Reset buttons exist to reset the fields of your form.

83 V.Mareeswari / AP(Sr) / SITE / VIT 84 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

21
2/15/2021

<fieldset> and <legend> elements Form – Input - Radio Button


 Radios are types of input forms that allow a user to pick an either/or type of
 The <fieldset> element is used to group related data in a form. selection.
 value - specifies what will be sent if the user chooses this radio button. Only one value
 The <legend> element defines a caption for the <fieldset> element. will be sent for a given group of radio buttons.
<fieldset>  name - defines which set of radio buttons that it is a part of. Below we have 2 groups:
<legend>Person Name:</legend> shade and size.
 By using the checked attribute, we can tell our form to automatically "check" a
<label for="fname">First name:</label><br> default radio.
<input type="text" id="fname" value="Mareeswari"><br> What kind of shirt are you wearing? <br>
<label for="lname">Last name:</label><br> Shade:
<input type="radio" name="shade" value="dark">Dark
<input type="text" id="lname" value="V"><br><br>
<input type="radio" name="shade" value="light">Light <br>
<input type="submit" value="Submit"> Size:
</fieldset> <input type="radio" name="size" value="small“ checked=“yes”>Small
<input type="radio" name="size" value="medium">Medium
<input type="radio" name="size" value="large">Large <br>
85 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 86
V.Mareeswari / AP(Sr) / SITE / VIT

Form – Input - Checkbox Form – Input - TextArea


 Check boxes allow for multiple items to be selected for a certain group of  Textareas retrieve "blog" type information from the user. Paragraphs,
choices.The check box's name and value attributes behave the same as a essays, or memos can by cut and pasted into textareas and submitted.
radio button. It is possible to precheck the input boxes for your viewers
 Textareas have an opening and a closing tag, any words placed between
using the checked attribute. Simply set the checked attribute to yes or no.
them will appear inside your text area.
Please select every sport that you play.<br>
 Adjusting the size of the appearance of the text area requires two
Soccer: <input type="checkbox" name="sports"
value=“vollyball" > <br> attributes, cols and rows. Use a numeric value for each attribute and the
larger the value the larger the field will appear.
Football: <input type="checkbox" name="sports"
value="football“ checked=“yes”> <br>  Setting a yes or no value for the readonly attribute determines whether or
Baseball: <input type="checkbox" name="sports" not a viewer can manipulate the text inside the text field.
value="baseball"> <br>  As the readonly attribute disables text manipulation, we can take things
Basketball: <input type="checkbox" name="sports" one step further by setting the disabled attribute. This grays out the
value="basketball"> textarea altogether and inhibits any change in the text as well as text
highlighting.
87 V.Mareeswari / AP(Sr) / SITE / VIT 88 V.Mareeswari / AP(Sr) / SITE / VIT

22
2/15/2021

 The wrap attribute refers to how the text reacts when it reaches the end <textarea cols="20" rows="5" readonly="yes">As you can
of each row in the text field. see many times word wrapping is often the desired look for
 Wrapping can be one of three settings: soft, hard, off your textareas. Since it makes everything nice and easy to
 Soft forces the words to wrap once inside the text area but when the
read.</textarea>
form is submitted, the words will no longer appear as such (Line breaks <textarea cols="20" rows="5" disabled="yes">
will not be added). As you can see many times word wrapping is often the desired
 Hard wraps the words inside the text box and places line breaks at the look for your text areas. Since it makes everything nice and
end of each line so that when the form is submitted it appears exactly as easy to read.
it does in the text box.
 Off sets a textarea to ignore all wrapping and places the text into one
ongoing line.
<textarea cols="20" rows="5" wrap="hard"
readonly="yes">As you can see many times word wrapping
is often the desired look for your textareas. Since it makes
89 everything nice
V.Mareeswari / AP(Sr) and
/ SITE / VIT easy to read.</textarea> 90 V.Mareeswari / AP(Sr) / SITE / VIT

Form – Input - Select <optgroup> element


 Drop down lists are the basic selection
<select>  The <optgroup> tag is used to group related options in a <select> element
forms. (drop-down list).
 By default the first coded <option>
<option>India</option>
 If you have a long list of options, groups of related options are easier to handle
will be displayed or selected as the <option>SriLanka</option> for a user.
default. We can change this using the <option>Pakistan</option> Choose a car:
selected attribute. </select> <select name="cars">
 We use the size attribute to break out
<optgroup label="Swedish Cars">
from the single displayed drop down <select multiple="yes" size=3>
list. <option value="volvo">Volvo</option>
<option>India</option> <option value="saab">Saab</option>
 We can further add to our selection
forms by adding the multiple attribute. <option>SriLanka</option> </optgroup>
This allows the user to select more <option selected="yes">Pakistan <optgroup label="German Cars">
than one entry from your selection </option> <option value="mercedes">Mercedes</option>
forms. Obviously this attribute does <option value="audi">Audi</option>
not work with the single drop down <option>America</option> </optgroup>
lists. <option>Africa</option> </select>
</select>
91 V.Mareeswari / AP(Sr) / SITE / VIT 92 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

23
2/15/2021

<form>
<input type="number"><br>
type=search
<input type="range"><br> <form action="http://www.google.com/search" method="get">
<input type="date"><br> <label>Google:
<input type=" time"><br> <input type="search" name="q"></label>
<input type="datetime-local"> <input type="submit" value="Search...">
<input type="color"><br> </form>
Telephone<input type="tel"><br> <form action="http://www.bing.com/search" method="get">
Email<input type="email"> <br> <label>Bing: <input type="search" name="q"></label>
URL<input type="url"><br> <input type="submit" value="Search...">
<input type="hidden" name="MAX_FILE_SIZE" value="500" /> </form>
</form>

93 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 94 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

Added Attribute
 placeholder
type =image It should only be used for short descriptions and set in form field.
 Always specify both the height and width attributes for images. If For anything longer, use the title attribute.
height and width are set, the space required for the image is reserved <input type="text“ id="user-name" placeholder="at least 3
when the page is loaded. Without these attributes, the browser does characters">
not know the size of the image, and cannot reserve the appropriate  autofocus
space to it. The effect will be that the page layout will change during Adding it to an input automatically focuses that field when the page
loading (while the images load). is rendered.
 <input type="image" src="img_submit.gif" alt="Submit" <input type="text" name="first-name“ autofocus>
width="48" height="48">  autocomplete
The autocomplete attribute helps users complete forms based on
earlier input. The default state is set to on.
<input type="text id="tracking-code" autocomplete="off">
95 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 96 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

24
2/15/2021

 required
 list and datalist
By adding it to a form field, the browser requires the user to enter data
into that field before submitting the form. The input list attribute refers to a <datalist> element that
<input type="text" id="given-name“ required>
contains pre-defined options for an <input> element.
 pattern <input list="browsers">
pattern makes it easy for us to implement specific validation for
<datalist id="browsers">
product codes, invoice numbers, and so on. <option value="Internet Explorer">
<option value="Firefox">
<input type="tel" id="phone“ placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> <option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

97 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 98 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

 multiple  step
 The input multiple attribute specifies that the user is allowed to enter  The input step attribute specifies the legal number intervals for an
more than one value in an input field. It works with the following input field.
input types: email, and file.  Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
<form action="/action_page.php">  Tip: This attribute can be used together with the max and min
attributes to create a range of legal values.
<label for="files">Select files:</label>
 The step attribute works with the following input types: number,
<input type="file" id="files“ multiple><br><br> range, date, datetime-local, month, time and week.
<input type="submit" value="Submit"> </form>  <input type="number" id="points“ step="3">
<p>To select multiple files, hold down the CTRL or SHIFT key while  min and max
selecting.</p> The min and max attributes work with the following input types:
number, range, date, datetime-local, month, time and week.
<input type="date" id="datemax“ max="1979-12-31"><br><br>
<input type="number" id="quantity“ min="1" max="5"><br>

99 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 100 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

25
2/15/2021

Semantic Description
Elements
<output> element <header> Defines a header for a document
<footer> Defines a footer for a document.(author, copyright information, etc)
The <output> element represents the result of a calculation (like one <article> This tag represents an independent piece of content of a document, such as a blog entry or newspaper
article.
performed by a script). <aside> This tag represents a piece of content that is only slightly related to the rest of the page.
<audio> Allow to play audio on browser.
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> <canvas> Used to draw Graphics on web.
<figure> Specifies self-contained content associated a caption together with some embedded content, such as a
0 <input type="range" id="a“ value="50"> 100 <br><br> graphic or video
<meter> Defines a scalar measurement within a known range
<input type="number" id="b“ value="50"> <br><br> <nav> Defines navigation links
<section> Defines a section in a document. It can be used together with h1-h6 to indicate the document structure.
Added value = <output name="x" for="a b"></output>
<source> Defines multiple media resources for media elements (audio and video)
<br><br> <video> Defines a video or movie
<progress> Represents the progress of a task
</form> <mark> Defines marked/highlighted text
<details> Used to create an interactive widget that the user can open and close
<bdi> Full form of BDI is Bi-Directional Isolation. This element is useful when embedding user-generated
content with an unknown directionality.
<summary> It specifies a visible heading for <detailed> element.
<wbr> Used for possible line bread
<time> Used for define date and time
<track> Used for defines text tracks for media elements (<video> and <audio>)
101 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 102 <ruby>Dr.MareeswariUsed
V/ AP(Sr) / SITEa/ruby
for defines VIT annotation
<output> Used for represents the result of a calculation

The <nav> element defines a set of


navigation links.

<nav>
<a href="/css/" target="_blank">CSS</a> |
<a href="/html/" target="_blank">HTML</a> |
<a href="/javascript/" target="_blank">JavaScript</a>|
<a href="/sql/tutorial/" target="_blank">SQL</a>
file:///E:/Mareeswari/CSE2015/Program/HTML/semantic.html </nav>
file:///E:/Mareeswari/CSE2015/Program/HTML/semantic%20without.html
103 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 104 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

26
2/15/2021

<main> <main>
<h1>Web Browsers</h1>
• <main> tag is used to represent the main content area within an
<p>Google Chrome, Firefox, and Internet Explorer are the most used
HTML document. browsers today.</p>
• <main> tag surrounds the main content of the page - content <article>
<h1>Google Chrome</h1>
that is unique to that document and is obviously the "main" <p>Google Chrome is a free, open-source web browser developed by
Google, released in 2008.</p> </article>
content for that page. This excludes any content that is repeated <article>
<h1>Internet Explorer</h1>
across multiple pages (such as navigation bars, headers, footers, <p>Internet Explorer is a free web browser from Microsoft, released in
etc). 1995.</p> </article>
<article>
• An HTML document can have a maximum of <h1>Mozilla Firefox</h1>
one <main> element. It must not appear within <p>Firefox is a free, open-source web browser from Mozilla, released in
the <article>, <aside>, <footer>, <header> or <nav> tags. 2004.</p> </article></main>
105 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 106 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

<article> <section>
• Any given web page or article could have many sections.
• <article> tag is used to represent an article.
• For example, a homepage could have a section for introducing the
• The content within the <article> tag is independent from the other
content on the site (even though it could be related). company, another section for news items, and another section for
• By "independent" means that its contents could stand alone, for example in contact information.
syndication. <article>
<header><h1>Welcome</h1></header>
<article><h4>Environmentally Friendly City</h4> <section><h4>What We Do</h4><p>We protect
<p>A brand new city is being built in Abu Dhabi in the United sharks...</p></section>
Arab Emirates which, when finished, will be the world's first zero
<section> <h4>News Items</h4><p>Man eats
carbon, zero waste city.</p><p>Masdar City, a completely self
sustaining city, will be powered by renewable energy and all waste shark...</p></section>
will be recycled or reused.</p></article> <section> <h4>Contact Us</h4><p>At the
beach...</p></section></article>
107 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 108 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

27
2/15/2021

<header> and <footer> <html><head></head><body>


<header>
• Headers can contain headings, subheadings, version information, <span style="color:brown;font-style:italic;">Woofer Dog: Version
navigational controls, etc.
1.0</span>
• No attributes <hr><h1>Talking Dogs</h1><h2>Humans aren't the only
• Footers usually contain information such as the author of the document, talkers!</h2></header>
copyright information, links to terms of use, privacy policy, etc. <nav></nav>
• Contact information within a <footer> tag should be marked up using <main><article>
the <address> tag. <p>Ever encountered a talking dog? I have.</p>
<p>It all happened one day as I was swimming down the
• Although footers are typically located at the bottom of a document, this
street...</p></article></main>
is not required.
<footer><hr>© 2009 Woofer Dog Corporation</footer>
• A document/section can have more than one footer. </body></html>

109 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 110 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

<aside> <div style="font:0.8em/1.2em Arial, Helvetica, Sans-Serif;">


<aside style="font-size:larger;font-
• The HTML <aside> tag is used to represent content that is related style:italic;color:green;float:right;width:35%;padding-left:5px;">
to the surrounding content within an article or web page, but could 70% of the world's reefs will be destroyed over the next 40 years.
still stand alone in its own right. </aside>
• This type of content is often represented in sidebars. <p>Global warming is affecting coral reefs all over the world. At the
current rate, 70% of the world's reefs will be destroyed over the next 40
years.</p>
<p>As hopeless as this may sound, there are things we can do to help. By
developing greener habits, we can all do our part in reducing global
warming.</p>
<p>We can use a green font for example. And we can use images with a
green tinge to them. Heck, we can even use a green background
too!</p></div>

111 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 112 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

28
2/15/2021

<marquee> in html4
 An HTML marquee is a scrolling piece of text displayed either
HTML5: Video
 Until now, there hasn't been a standard for showing video on a web
horizontally across or vertically down your webpage depending on the
page.
settings.
 Today, most videos are shown through a plugin (like Flash). However,
 Attributes:
not all browsers have the same plugins.
 width, height
 HTML5 specifies a standard way to include video with the video
 direction= up ,down ,left or right
element.
 behavior – type of scrolling -> scroll, slide and alternate
 Currently, there are 3 supported video formats for the video element:
 loop – how many time to scroll
 hspace = %
 vspace = %
 scrolldelay- This specifies how long to delay between each jump

<marquee>This is an example of marquee</marquee>

113 V.Mareeswari / AP(Sr) / SITE / VIT 114 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

HTML5: Video HTML5: Video

<!DOCTYPE HTML>
<html><body>
<video src="movie.ogg" width="320" height="240"
controls="controls">
Your browser does not support the video tag.
</video>
</body> </html>

115 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 116 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

29
2/15/2021

HTML5: Video
HTML5: Video
<video width="320" height="240" controls="controls">
 The last example uses an Ogg file, and will work in Firefox,
Opera and Chrome. <source src="movie.ogg" type="video/ogg" />
 To make the video work in Safari and future versions of Chrome, <source src="movie.mp4" type="video/mp4" />
we must add an MPEG4 andWebM file. <source src="movie.webm" type="video/webm" />
 The video element allows multiple source elements. Source Your browser does not support the video tag.
elements can link to different video files. The browser will use the </video>
first recognized format.
 Internet Explorer 8 does not support the video element. In IE 9,
there will be support for video element using MPEG4. <source> tag is used to specify multiple media resources for
media elements, such as <video> and <audio>.

117 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 118 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

HTML5: Audio HTML5: Audio


 Until now, there has never been a standard for playing audio on a web
page. <!DOCTYPE HTML> <audio controls="controls">
 Today, most audio is played through a plugin (like Flash). However, not <html> <body> <source src="song.ogg"
all browsers have the same plugins. <audio src="song.ogg" type="audio/ogg" />
 HTML5 specifies a standard way to include audio, with the audio controls="controls"> <source src="song.mp3"
element.The audio element can play sound files, or an audio stream.
Your browser does not support type="audio/mpeg" />
 Currently, there are 3 supported formats for the audio element:
the audio element. Your browser does not support
</audio> the audio element.
</body> </html> </audio>

119 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 120 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

30
2/15/2021

HTML5: Audio HTML5: Audio

 The last example uses an Ogg file, and will work in Firefox, Opera
and Chrome.
 To make the audio work in Safari, the audio file must be of type MP3
orWav.
 The audio element allows multiple source elements. Source elements
can link to different audio files. The browser will use the first
recognized format.
 Internet Explorer 8 does not support the audio element. In IE 9, there
will be support for audio element.

121 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 122 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

<figure> & <figcaption> <meter>


• <meter> tag is used for indicating a scalar measurement within a
• <figure> tag is used for annotating illustrations, diagrams, photos,
known range, or a fractional value.
code listings, etc. The <figcaption> element is to provide a caption
• Also known as a gauge, usage could include displaying disk usage, the
for the contents of your <figure> element.
amount raised during fundraising activities, or the relevance of a
<figure> search query result.
<img src="/kookaburra.jpg" alt="Kooaburra"> Attributes value Description
<img src="/pelican.jpg" alt="Pelican stood on the beach"> form form_id Specifies one or more forms the <meter> element belongs to

<img src="/lorikeet.jpg" alt="Cheeky looking Rainbow low number Specifies the range that is considered to be a low value
Lorikeet"> high number Specifies the range that is considered to be a high value
<figcaption>Australian Birds. From left to right, Kookburra, max number Specifies the maximum value of the range

Pelican and Rainbow Lorikeet. Originals by <a min number Specifies the minimum value of the range

href="http://www.flickr.com/photos/rclark/">Richard optimum number Specifies what value is the optimal value for the gauge

Clark</a></figcaption></figure> value number Required. Specifies the current value of the gauge
123 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 124 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

31
2/15/2021

<p>Heat the oven to <meter min="200" max="500"


value="350">350 degrees</meter></p>
<p>He got a <meter low="69" high="80" max="100"
value="84">B</meter> on the exam.</p>
<p>Width:<meter min="0" max="100" value="25"
title="millimeters">25mm</meter></p> If the value is between min and low, the meter
<p>Height:<meter min="0" max="100" value="25" is yellow. If the value is the low value, the high
optimum="30" low="30" high="80" value, or anywhere in between, the meter is
title="millimeters">25mm</meter></p> green. If the value is between high and max, it
will be red. Currently the optimum value has
no noticeable effect.

125 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 126 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

<progress>
• Use the <progress> tag in conjunction with JavaScript to display the <dialog>
progress of a task.
• Indeterminate State: If the progress bar does not have a value  The <dialog> tag defines a dialog box or window.
attribute then it will be in the indeterminate state.
 The <dialog> element makes it easy to create popup
dialogs and modals on a web page.
Attribute Value Description
Attribute Value Description
max number Specifies how much work the task requires in total
value number Specifies how much of the task has been completed open open Specifies that the dialog element is active and
that the user can interact with it
<progress></progress>
Downloading progress:
<progress value="22" max="100"></progress>

127 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 128 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

32
2/15/2021

<div> <mark>
<dialog id="myFirstDialog" style="width:50%;background-
color:#F4FFEF;border:1px dotted black;"> <mark> tag is used for indicating text as marked or highlighted
<p><q>The world is full of magical things patiently waiting for our wits to for reference purposes, due to its relevance in another context.
grow sharper.</q> - <cite>Bertrand Russell</cite></p>
<button id="hide">Close</button></dialog> <p>Despite the stockmarket crash in 2008, the value of my share
<!-- "Show" button --><button id="show">Show
Dialog</button></div>
portfolio <mark>increased by 100 percent</mark>. I must be
<!-- JavaScript to provide the "Show/Close" functionality --> doing something right.</p> <p>I should point out that the value
<script type="text/JavaScript"> only increased because I kept pumping more money in!</p>
(function() {
var dialog = document.getElementById('myFirstDialog');
document.getElementById('show').onclick = function() {
dialog.show(); };
document.getElementById('hide').onclick = function() {
dialog.close(); }; })(); </script>
129 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 130 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

<details> & <summary> <!DOCTYPE html>


<html>
• The HTML <details> tag specifies additional details that the user can
view or hide on demand. <body>
• used in conjunction with the HTML5 <summary> tag to provide a <details>
heading that can be clicked on to expand/collapse the details as <summary>Copyright 1999-2014.</summary>
required. <p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of
the company Refsnes Data.</p>
</details>
<p><b>Note:</b> The summary element is not supported in
Edge/Internet Explorer.</p>
</body>
</html>

131 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 132 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

33
2/15/2021

<wbr>
The <wbr> (Word Break Opportunity) tag specifies where in a text it would be
ok to add a line-break.Tip: When a word is too long, or you are afraid that
the browser will break your lines at the wrong place, you can use the <wbr>
HTML5: Canvas
element to add word break opportunities.
<h2>Wikitechy wbr tag</h2> <p>
ThewbrIsAwordBreakOpportunity.<wbr>ThatIsUsedToProvideAOpportuni
tyToTheBrowserToCreateNewLine-  The HTML5 canvas element uses JavaScript to draw graphics on a
Break.<wbr>WhenTheContentDidNotFitTo web page.
TheBrowserWindowThatWillBe<wbr>AutomaticallyTogglesLine-
 A canvas is a rectangular area, and you control every pixel of it.
BreakOnIt. </p>
 The canvas element has several methods for drawing paths, boxes,
circles, characters, and adding images.
 Adding a canvas element to the HTML5 page.
<canvas id="myCanvas" width="200" height="100"></canvas>

133 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 134 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

HTML5: Canvas
The canvas element has no drawing abilities of its own. All drawing must
be done inside a JavaScript:  HTML 5 differences from HTML 4

<script type="text/javascript"> https://www.w3.org/TR/2008/WD-html5-diff-20080122/


var c=document.getElementById("myCanvas");  HOW WELL DOES YOUR BROWSER SUPPORT
HTML5?
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000"; https://html5test.com/
cxt.fillRect(0,0,150,75);
</script>

135 Dr.Mareeswari V/ AP(Sr) / SITE / VIT 136 Dr.Mareeswari V/ AP(Sr) / SITE / VIT

34

You might also like