markup language for Web pages
M Vishnuvardhan,
Dept. of Computer Science,
SSBN Degree College, ATP
Content
s
» Images
» L in k s
» HTML Lists
» Tables
» Forms
» Video/Audio
M V nuvardhan
Introduction
» Internet: The Internet is a global wide area network
that
connects computer systems across the world.
» Services offered by Internet: email, video
conferencing, ecommerce, newsgroup, IM,
World wide Web etc.,
» WWW is a information retrieval service.
» Web page:A document which can be displayed in a
web browser.
» Web site: A collection of web pages which are grouped
together.
» Web browser: Software which is used to browse the
www.
M V nuvardhan
HTML - Introduction
» HTML stands for Hyper Text Markup Language
» HTML is the standard markup language for creating
Web pages
» HTML describes the structure of a Web page
» HTML consists of a series of elements
» HTML elements tell the browser how to display the
content.
M V nuvardhan
HTML Element
» An HTML element is defined by a start tag, some content, and an
end tag:
<tagname>Content goes here...</tagname>
» The HTML element is everything from the start tag to the end tag:
Eg: <h1>My First Heading</h1>
<p>My first paragraph.</p>
Note: Some HTML elements have no content (like the <br>).
These elements are called empty
elements.
M V nuvardhan
HTML - Basic Structure
<!-- comments -->
<!DOCTYPEhtml>
<html lang=“en”>
<head>
<meta charset=“UTF-8”/>
<title>Page Title</title>
</head>
<body
>
== == = ==
</body>
</html>
M V nuvardhan
HTML – Basic Structure
» The <!DOCTYPE html> declaration defines that this
document is an
HTML5 document
» The <html> element is the root element of an HTML page
» The <head> element contains meta information about
the HTML
page
» The <title> element specifies a title for the HTML page.
» The <body> element defines the document's body, and
is a container
for all the visible contents, such as headings, paragraphs,
images,
hyperlinks, tables, lists, etc.
M V nuvardhan
HTML Sectioning Elements
» HTML 5 introduced number of sectioning elements which have
more semantic meaning used to mark up pages :
M V nuvardhan
HTML Sectioning Elements
<header> : represents a container for introductory content You can
have several <header> elements in one HTML document. However,
<header> cannot be placed within a <footer>, <address> or
another <header> element.
<nav> : defines a set of navigation links.
<section> : defines a section in a document. A web page could
normally be split into sections for introduction, content, and contact
information.
<article> : specifies independent, self-contained content.
<aside> : defines some content aside from the content it is placed
in (like a sidebar).
<footer> : defines a footer for a document or section.
M V nuvardhan
HTML Generic Containers
HTML two non semantic elements can be used as generic containers
<div> : defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is
then styled with CSS or manipulated with JavaScript.
<span> : is an inline container used to mark up a part of a text, or
a part of a document. <span> tag is much like the <div> element,
but <div> is a block-level element and <span> is an inline element.
M V nuvardhan
HTML Elements
<p> <cite>
<address> <q> <code>
<figure> <blockquote> <pre>
<figcaption> <mark> <small>
<time> <abbr> <br>
<strong> <sup> <wbr>
<em> <sub> <meter>
<b> <ins> <progress>
<i> <del>
<u> <s>
M V nuvardhan
ARIA
WAI-ARIA (Web Accessibility Initiative’s Accessible Rich Internet
Applications), or ARIA for short fills semantic gaps with attributes.
Syntax:
<element role=“value”>
Values can be
application, banner, complementary, contentinfo, form, main,
navigation, and search.
It’s generally a good idea to add ARIA landmark roles to our HTML.
Eg: <div role=“banner”> this is a banner text </div>
M V nuvardhan
Naming HTML Elements
HTML elements can be named using ID or class attribute.
HTML id attribute is used to specify a unique id for an HTML
element. You cannot have more than one element with the same id
in an HTML document.
Eg: <h1 id="myHeader">My Cities</h1>
HTML class attribute is used to specify a class for an HTML element.
Multiple HTML elements can share the same class.
Eg: <h2 class="city">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Note: title attribute is used to show tooltip on the elements
M V nuvardhan
CSS - Introduction
» CSS stands for Cascading Style Sheets
» CSS describes how HTML elements are to be
displayed on screen, paper, or in other media
» CSS saves a lot of work. It can control the layout of
multiple web pages all at once
» External stylesheets are stored in CSS files (.css as
extension)
M V nuvardhan
CSS
Syntax
A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated
by semicolons.
Each declaration includes a CSS property name and a
value, separated by a colon.
Multiple CSS declarations are separated with
semicolons, and declaration blocks are surrounded by
curly braces.
M V nuvardhan
Apply CSS to elements
CSS for the elements can be specified in the style tag. Style tag should
be placed in head tag.
Syntax:
<style> Eg:
element <style>
h1
{ {
property: color: orange;
}
value; </style>
}
</style>
M V nuvardhan
Formatting Text with Styles
CSS can be used to change font, size, line height, foreground,
background colors, spacing and alignment of the text. These changes
can be done for part or entire web page.
font-family:
Choosing right font is essential. Since browsers support few fonts it is
necessary to choose alternate fonts also.
Syntax: font-family: “font1",
“font2”, … ,fontn;
Eg:
H1 {
font-family: "Times New Roman",
“Times”, “serif”;
}
M V nuvardhan
Formatting Text with Styles
font-style:
Syntax: font-style:stylename;
Where style can be normal, italic or oblique
Eg:
H1 { font-style: italic; }
font-weight: used to applying bold
Syntax: font-weight:value;
Where value can be normal, bold, bolder, lighter or numerical value
from 100-900 ( 100- normal 700 –bold)
Eg:
H1 { font-weight: bolder; }
M V nuvardhan
Formatting Text with Styles
line-height:
Syntax: line-height:value;
Where value can be in pixels , em or in percentage.
em-element where 1em=16px
Eg:
p {line-height: ”10px”; }
p {line-height: ”1.6”; }
p {line-height: ”100%”; }
M V nuvardhan
Formatting Text with Styles
font: setting all properties at once. This is inherited property
Syntax: font: font-style font-weight
normal/smallcaps font-size/ line-height
font-family;
Here order is important and size and family-name are mandatory.
Eg:
p { font: 13px/2 “times”; }
p { font: italic bold smallcaps 13px/2 “times”; }
M V nuvardhan
Setting Colors
Colors can be specified with color names or hexa-decimal or rgb values
or rgb percetages or hsl values.
Syntax:
color: color-name;
color: #rrggbb; (Hexadecimals -00 to FF)
color: rgb(r,g,b); (r,g,b values can be 0- 255)
color: hsl(h,s,l);
(h can be 0-360 and s, l cab be 0-100%)
Eg:
P{color: red; }
P{color: #FF3344; }
P{color: rgb(15,65,71);
}
P{color: hsl(5,75%,65%); MV
} nuvardhan
Setting Colors
Colors can be specified with transparency.
color: rgb(r,g,b, a); (a – 0.0 to 1.0)
color: hsl(h,s,l, a);
Where a is alpha transparency 0- transparent and 1 – opaque
Eg:
P{color: rgb(15,65,71,0.7); }
P{color: hsl(5,75%,65%,0.9); }
M V nuvardhan
Text background
It possible to set background of individual elements or whole page.
Background can be color or image.
Syntax: background:color;
background:url(image-path);
Where image should be specified with full path along with extension.
Eg:
p {background: ”red”; }
p {background : url(“[Link]”);}
M V nuvardhan
Spacing – words or letters
Word spacing is between words and letter spacing is spacing between
letters. These are inherited.
Syntax: word-spacing :length;
letter-spacing :length;
Where length can be in pixels or em. It can be negative also.
Eg:
p {word-spacing:5px ; }
M V nuvardhan
indents
Text-indent property determines how much space precede the first
line of the paragraph. It is inherited property.
Syntax: text-indent :length;
Where length can be in pixels or em. Negative value creates hanging
indent .
Eg:
p {text-indent: 40px; }
p {text-indent: 2em; }
p {text-indent: -15px; }
M V nuvardhan
Alignments and
transformations text-align: used
to set the alignment of the text Syntax: text-align
:value;
Where value can be left, center, right or
justify.
Eg:
p {text-align
:center;}
text-transform: used to set text
case
Syntax: text-transform
:value;
Where value can be capitalize, uppercase, lowercase.
Eg:
p {text-transform
:uppercase;}
M V nuvardhan
Fontvariants and Text
decorations Font-variant: used to set the
font normal or small caps Syntax: font-variant
:value;
Where value can normal or small caps.
Eg:
p {font-variant :smallcaps;}
text-decoration: used to decorate the text.
Syntax: text-decoration :value;
Where value can be over-line, under-line, line-through or combination.
Eg:
p {text-decoration : under-line;}
p {text-decoration : under-lineover-
line;}
M V nuvardhan
Images in Webpage
Images can improve the design and the appearance of a web page.
Web pages support many formats but most common formats
are jpeg/jpg , gif and png.
Various factors to distinguish images:
» Format
» Color
» Size and Resolution
» Speed
» Transparency
» Animation
M V nuvardhan
HTML <img>
The HTML <img> tag is used to embed an image in a web
page. <img> tag has two required attributes:
» src - Specifies the path to the image
» alt - Specifies an alternate text for the image
Syntax:<img src="url"
alt="alternatetext"> Eg:
<img src="img_chania.jpg" alt="Flowers in Chania">
Note: If a browser cannot find an image, it will display
the value of the alt attribute:
M V nuvardhan
Image location– File path
A file path describes the location of a file in a web site's folder
structure.
Absolute Paths:
An absolute file path is the full URL to a file:
Eg:<img
src="[Link]
Relative File Paths
A relative file path points to a file relative to the current page.
Path Description
<img src="[Link]"> The "[Link]" file is located in the same folder
as the current page
<img src="images/[Link]"> The "[Link]" file is located
in the images folder in the
current folder
<img src="../[Link]"> The "[Link]" file is located in the folder one level
up
from the current folder
M V nuvardhan
Image dimensions
HTML image dimensions can be specified in two ways
Using width and height attributes:
<img src=“[Link]" width="500"height="600">
Using style attribute:
<img src=“[Link]"style="width:500px;height:600px;">
M V nuvardhan
Links - Introduction
HTML links are hyperlinks. You can click on a link and jump
to another document. The HTML <a> tag defines a hyperlink.
Hyper link consists of two parts label and destination
Syntax:
<a href="url“ >link text</a>
Where url is the destination which can be a website,
webpage, file, mailto etc.,
Link text is the label. Instead of label its possible to have
image as
Note: target attribute specifies where the link opens.
common values are “_blank” and “_self”
MV
nuvardhan
Links
» Destination can be a website.
Eg:<a href="[Link] College</a>
» Destination can be a another webpage.
Eg:<a href="[Link]">Color Page</a>
» Destination can be a file
Eg:<a href=“[Link]">HTML Colors</a>
» Destination can be a mailto reference
Eg:<a href=“[Link] mail</a>
M V nuvardhan
Links – Anchorsor Bookmarks
Bookmarks can be useful to navigate in a page. To create a
bookmark - first create the bookmark, then add a link to it.
When the link is clicked, the page will scroll down or up to the
location with the bookmark
» Bookmark can be created using id attribute.
Eg: <h2 id="C4">Chapter 4</h2>
» Linking bookmark
Eg: <a href="#C4">Jump to Chapter 4</a>
Note: You can also add a link to a bookmark on another page
Eg: <a href="[Link]#footer">Color Page</a>
M V nuvardhan
Lists -Introduction
HTML lists allow web developers to group a
set of related items in lists. Lists are used to
group a set of related items.
Three types of Lists are available.
1. Ordered Lists
2. Un ordered Lists
3. Description Lists
M V nuvardhan
Ordered Lists
An ordered list starts with the <ol> tag. Each list item
starts
with the <li> tag.
The list items will be marked with numbers by
default: E.g.:
<ol> li>
<li>Red</ </ol>
li>
<li>Green</
li>
<li>Blue</
Output 2. Green
1. Red 3. Blue
M V nuvardhan
Un ordered Lists
An unordered list starts with the <ul> tag. Each list item
starts
with the <li> tag.
The list items will be marked with bullets (small black
circles)
by default
E.g.: li> Output
<li> • Red
<ul>
Blue • Green
<li>Red</ </li> • Blue
li>
</ul>
<li>Green</
M V nuvardhan
Ordered Lists – start attribute
It is possible to specify the starting value of the list by
using
start attribute
Syntax: start=“value”
E.g.:
<ol <li>Blue</li>
start=‘5’>
</ol>
<li>Red</
li>
<li>Green</
li>
Output [Link]
[Link] [Link]
M V nuvardhan
Ordered Lists – value attribute
It is possible to specify the value of the each list item
using
value attribute
Syntax: value=“list item”
E.g.:
<ol start=‘5’> Output
[Link]
<li>Red</li>
45. Green
<li value [Link]
=45>Green</li>
<li>Blue</li>
</ol>
M V nuvardhan
Choosing Markers – type attribute
the marker style can be given by type attribute in <ul> or
<ol>
tag or alternately using “list-style-type” style property in
CSS
Using type attribute.
Syntax: <list
type=“value”> values
can be
For un ordered lists Disc, circle, square
For ordered Lists A, a, 1,I , i
M V nuvardhan
Choosing Markers – CSS
list-style-type: used to specify the style of the list
Syntax: list-style-type: value;
values can be
Disc, circle, square
Upper-roman (I,II,III,…..)
Decimals (1,2,3….)
Lower-roman(i,ii,iii,….)
Upper-alpha (A,B,C,
None- nomarker
…..)
Lower-alpha(a,b,c,
…..)
It is also possible to set custom images as markers
Syntax: list-style-image:url(image_path);
M V nuvardhan
Positioning Markers
To specify the position of the list item markers list-style-
position property of CSS is used
Syntax: list-style-position: value;
Value can be “inside” or “outside”
Note: by default the position is out side
M V nuvardhan
Setting all the properties at
once
List-style property can be used to set all properties at once
Syntax: list-style: list-style-type list-style-position list-style-
image;
e.g.:
list-type: square inside;
list-type: url([Link]) outside;
list-type: outside square url([Link]);
M V nuvardhan
Styling Nested Lists
A nested list is a list inside another list and the styling can be
done in that hierarchy for styling outer most level
Syntax: toplevellist li {
rules;} For second level
styling
Syntax: toplevellist second levellist
li{rules;} This can be done for many
levels
E.g.: ul li{color: red;}
ul ul li{color: blue;}
M V nuvardhan
Description Lists
HTML Description List or Definition List displays
elements in definition form like in dictionary (i.e.,
description).
The <dl>, <dt> and <dd> tags are used to define
description list. The 3 HTML description list tags are given
below:
<dl> tag defines the description list.
<dt> tag defines data term.
<dd> tag defines data definition (description).
M V nuvardhan
Description Lists
E.g.:
<dl> Programming Languages
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>Java</dt>
<dd>is an Object oriented programming
language</dd>
<dt>JavaScript</dt>
<dd>is a scripting language</dd>
<dt>SQL</dt>
<dd>is a query language</dd>
</dl>
M V nuvardhan
Tables - Introduction
HTML tables allow web developers to arrange data into
rows
and columns
The <table> tag defines an HTML table.
Each table row is defined with a <tr> tag.
Each table header is defined with a <th> tag.
Each table data/cell is defined with a <td>
tag. By default,
the text in <th> elements are bold and centered.
the text in <td> elements are regular and left-
aligned. MV
nuvardhan
Tables
tr
th th th th th
td td td td Td
td td td td td
M V nuvardhan
Table tags
<caption> is used to set the caption of the table
<thead> used to group header content in an HTML table.
<tfoot> is used to group footer content in an HTML table.
<tbody> is used to group body content in an HTML table.
Note: <thead> <tbody> <tfooter> must have one or more
<tr> tags inside.
M V nuvardhan
Scope attribute
The scope attribute specifies whether a header cell is a header
for a column, row, or group of columns or rows. The scope
attribute has no visual effect in ordinary web browsers, but can
be used by screen readers.
E.g.
<table>
<tr>
<th>Sno.</th>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
<tr>
<td>1</td>
<td>January</td>
<td>$100</td>
</tr>
</table>
M V nuvardhan
Formatting Tables -Borders
A HTML Table can be formatted using CSS
» Border means border of table or border of cell (th, td) the border
property of css is used to set the border.
Syntax: border: border-width border-style border-color;
Where border-width is the width of the border in pixels.
border-style: is the style of the border
(like dotted, solid, dashed, double..)
border-color: is the color of the border
Eg: border: 1px solid black;
» border-collapse: used to collapse the borders of table and td/th.
Syntax: border-collapse: collapse; MV
nuvardhan
Formatting Tables –Width and
alignments
» width: specifies width of the table in pixels or percentage
Syntax: width: value; can be in px or percentage
» text-align: used to align the text in the table horizontally.
Syntax: text-align: value;
value can be left, center or right
» vertical-align: used to specify the vertical alignment of text in the
table
Syntax: vertical-align: value;
value can be top, bottom ,center.
M V nuvardhan
Spanning
rows
the rowspan attribute specifies the number of rows a
cell should span. i.e., allows a single table cell to span
the height of more than one cell or row.
It can be used for <td> or <th>
Syntax
<td rowspan="number">
Specifies the number of rows a cell should span
M V nuvardhan
Spanning
columns
the colspan attribute specifies the number of columns a cell
should span. i.e., allows a single table cell to span the width
of more than one cell or column.
It can be used for <td> or <th>
Syntax
<td colspan="number">
Specifies the number of columns a cell should span
M V nuvardhan
Forms
In HTML
Introduction
An HTML form is used to collect user input.
There are two basic parts of a form:
Designing of form using fields, labels, buttons etc.,
Processing of the form after submit.
M V nuvardhan
Processing Forms
A form can be processed with the help of client side
and
sever side programming.
M V nuvardhan
Processing Forms
Client side programming:
Here many tasks are done without interacting with
the server. They are great for manipulating the browser
window, checking that all the data has been entered
before submitting a form, and other tasks that happen
without the server
E.g. JavaScript, VBScript, CSS (Designing), AJAX, jQuery
etc.,
M V nuvardhan
Processing Forms
Sever side programming:
It is the general name for the kind of program
that runs directly on the server.
Server-side Uses:
Displays the requested pages ✓ Interaction with databases
Structure of web applications ✓ Querying the database
✓ Encoding of data into HTML
Interaction with
servers/storages ✓ Operations over databases
like
delete, update.
E.g. PHP, [Link] (C# OR Visual Basic), C++, Java and
JSP,
Python, Ruby on Rails and so on.
M V nuvardhan
<form> tag
The HTML <form> element is used to create an HTML
form
for user
input:
Syntax:
<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.
M V nuvardhan
<form> attributes
✓ The action attribute defines the action to be
performed when the form is submitted. Usually, the
form data is sent to a file on the server when the
user clicks on the submit
button. The script can log the information to a
database on the server, send the information via
email, or perform any number of other functions.
M V nuvardhan
<form> attributes contd.
✓ The target attribute specifies where to display the
response
that is received after submitting the form (values -
_self,_blank..).
✓ The method attribute specifies the HTTP method to
be used when submitting the form data.
M V nuvardhan
Methods
✓ get: The form-data can be sent as URL variables
✓ post: The form-data can be sent as HTTP post
transaction. The default HTTP method when
submitting form data is GET.
e.g.
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">
M V nuvardhan
get vs. post
get:
Appends the form data to the URL, in name/value pairs
NEVER use GET to send sensitive data! (the
submitted form data is visible in the URL!)
The length of a URL is limited (2048 characters)
Useful for form submissions where a user wants to
bookmark the result
GET is good for non-secure data, like query strings in
Google
M V nuvardhan
get vs. post
post:
Appends the form data inside the body of the HTTP
request
(the submitted form data is not shown in the URL)
POST has no size limitations, and can be used to
send large amounts of data.
Form submissions with POST cannot be bookmarked
M V nuvardhan
Formelements
The HTML <form> element can contain one or
more of the following form elements:
▪ <input> ▪ <button>
▪ <fieldset>
▪ <label>
▪ <legend>
▪ <select>
▪ <option>
▪
▪ <optgroup>
<textarea>
M V nuvardhan
<input> element
Most used form element is the <input> element.
The <input> element can be displayed in
several ways, depending on the type attribute.
E.g: text, password, email, tel, radio, checkbox so on
M V nuvardhan
<input> element type attribute
✓ text:defines a single-line text input field.
Syntax: <input type="text">
✓ password: defines a password field
Syntax: <input type=“password">
✓ email: is used for input fields that should contain an
e-mail address.
Syntax: <input type="email">
Depending on browser support, the e-mail address
can be automatically validated when submitted.
M V nuvardhan
<input> element type attribute
✓ tel: is used for input fields that should contain a
telephone number.
Syntax: <input type="tel">
✓ url:used for input fields that should contain a URL
address.
Syntax: <input type="url">
Depending on browser support, the url field
can be automatically validated when
submitted.
M V nuvardhan
<input> element type attribute
✓ radio: defines a radio button. Radio buttons let a user
select ONLY ONE of a limited number of choices. The
name attribute of radio buttons must be same for
mutually
exclusive option
Syntax: <input type="radio">
✓ checkbox: defines a checkbox. Checkboxes let a user
select
ZERO or MORE options of a limited number of choices.
Syntax: <input type="checkbox">
Note: checked attribute can be used to check the
option in radio button or checkboxes
M V nuvardhan
<input> element type attribute
✓ color: used for input fields that should contain a color.
Depending on browser support, a color picker can
show up in the input field
Syntax:<input type="color">
✓ date:used for input fields that should contain a date.
Depending on browser support, a date picker can show
up in
the input field.
Syntax: <input type="date">
M V nuvardhan
<input> element type attribute
✓ file: defines a file-select field and a "Browse" button
for file uploads.
Syntax:<input type="file">
✓ hidden: defines a hidden input field. A hidden field let
web developers include data that cannot be seen or
modified by users when a form is submitted. A
hidden field often stores
what database record that needs to be updated
when the form is submitted.
Syntax: <input type=“hidden”>
M V nuvardhan
<input> element type attribute
✓ submit: defines a button for submitting form data to a
form- handler. The form-handler is typically a server
page with a script for processing input data.
Syntax: <input type="submit">
✓ reset: defines a button for reset all the form controls.
Syntax: <input type=“reset">
M V nuvardhan
<input> element other attributes
✓ value: specifies an initial value for an input field
✓ readonly: specifies that an input field is read-only.
✓ disabled: specifies that an input field should be
disabled.
✓ size: specifies the visible width, in characters, of an
input field.
✓ maxlength: specifies the maximum number of
characters allowed in an input field.
✓ checked: used to check the radio buttons or
checkboxes.
M V nuvardhan
<input> element other attributes
✓ placeholder: specifies short a hint that
describes the expected value of an input field
✓ required: specifies that an input field must be filled out
before submitting the form.
✓ autofocus: specifies that an input element should
automatically get focus when the page loads
M V nuvardhan
<form> elements
✓ <label>: element defines a label for several form
elements.
✓ <select>: element defines a drop-down list. For every
option in the list <option> is used
Syntax: <select>
<option></option> . .. . .. .
</select>
Note: selected attribute of option is used to set the default
selected option. By default first option is selected.
<optgroup> is used to group the options
M V nuvardhan
<form> elements
✓ <textarea>: element defines a multi-line input field
Syntax: <textarea rows=“r” cols=“c”>
</textarea>
✓ <button>: defines a clickable button
Syntax: <button type="button|submit|reset">
button label</button>
Note: if type is not specified it behaves like submit
button
M V nuvardhan
<form> elements
✓ <fieldset>: element is used to group related data in a
form.
✓ <legend>: element defines a caption for the <fieldset>
element.
M V nuvardhan
Video in Web pages
HTML5 Supports various formats or codecs.
A codec is a computer program that uses a
compression algorithm to encode and decode a
digital stream of data, making it more suitable for
playback.
To show a video in HTML, use the <video> element:
Eg: <video src="movie.mp4" > (OR)
<video>
<source src="movie.mp4" type="video/mp4">
</video>
M V nuvardhan
Video in Web pages
<source> is used to specify multiple sources
Eg: <video>
<source src="movie1.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
</video>
If one source is not available then the next source is
played
Formats used in web mp4, webm, ogg
M V nuvardhan
Video - attributes
Attribute Value Description
autoplay autoplay Specifies that the video will start playing as soon as it
is ready
Specifies that video controls should be displayed
controls controls (such as a play/pause button etc).
height pixels Sets the height of the video player
Specifies that the video will start over again, every
loop loop
time it is
finished
muted muted Specifies that the audio output of the video should be
muted
Specifies an image to be shown while the
poster URL video is downloading, or until the user hits
the play button
src URL Specifies the URL of the video
file width pixels Sets the width of the video
play
NOTE: Autoplay doesn’t work in chrome until you place muted after auto
play
M V nuvardhan
Audio in Web pages
To show a audio in HTML, use the <audio> element:
Eg: <audio src="song.mp3" > (OR)
<audio>
<source src="song.mp3" type="audio/mp3">
</audio>
M V nuvardhan
Audio in Web pages
<source> is used to specify multiple sources
Eg: <audio>
<source src="song1.mp3" type="audio/mp4">
<source src="[Link]" type="audio/wav">
</audio>
If one source is not available then the next source is
played
Formats used in web mp3,ogg,wav
M V nuvardhan
audio -attributes
Attribute Value Description
autoplay autoplay Specifies that the audio will start playing as soon as it is
ready
Specifies that audio controls should be displayed (such
controls controls
as a
play/pause button etc).
Specifies that the audio will start over again, every
loop loop time it is finished
muted muted Specifies that the audio output of the audio should be
muted src URLSpecifies the URL of the audio file
NOTE: Autoplay doesn’t work in chrome until you place muted after auto
play
M V nuvardhan
Questions