Scribd
Upload
16 views132 pages

HTML

The document provides an overview of HTML, the standard markup language for creating web pages, detailing its structure, elements, and various features such as sectioning elements, generic containers, and the use of CSS for styling. It also covers the use of images, links, and lists in web pages, along with examples of HTML syntax. Additionally, it introduces ARIA for accessibility and explains how to format text and set colors using CSS.

Uploaded by

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

HTML

The document provides an overview of HTML, the standard markup language for creating web pages, detailing its structure, elements, and various features such as sectioning elements, generic containers, and the use of CSS for styling. It also covers the use of images, links, and lists in web pages, along with examples of HTML syntax. Additionally, it introduces ARIA for accessibility and explains how to format text and set colors using CSS.

Uploaded by

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

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(“sample.jpg”);}

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="https://www.ssbnc.in/images/pic.jpg">
Relative File Paths
A relative file path points to a file relative to the current page.
Path Description
<img src="picture.jpg"> The "picture.jpg" file is located in the same folder
as the current page
<img src="images/picture.jpg"> The "picture.jpg" file is located
in the images folder in the
current folder
<img src="../picture.jpg"> The "picture.jpg" 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=“html.jpg" width="500"height="600">

Using style attribute:

<img src=“html.jpg"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="https://www.ssbnc.in/">SSBN College</a>

» Destination can be a another webpage.

Eg:<a href="ColorPage.html">Color Page</a>

» Destination can be a file

Eg:<a href=“htmlcolors.pdf">HTML Colors</a>

» Destination can be a mailto reference

Eg:<a href=“mailto:[email protected]">Send 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="ColorPage.html#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 6.Green
5.Red 7.Blue

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


5.Red
<li>Red</li>
45. Green
<li value 46.Blue
=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(image.png) outside;

list-type: outside square url(image.png);


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, ASP.NET (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="movie2.ogg" 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="song2.wav" 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

You might also like