This document provides an overview of the CCS375 - Web Technologies course, including its objectives, outcomes, syllabus, and textbooks. The course aims to teach students different internet technologies, web services architecture, and how to develop web applications using frameworks. The syllabus covers topics like website basics, HTML5, CSS3, frameworks, and more across multiple units. Key textbooks listed are related to internet programming, web technologies, and Angular frameworks.

1. CCS375 – WEB
TECHNOLOGIES

2. Course
Objectives
01 To understand different Internet Technologies
02 To learn java-specific web services architecture
03 To Develop web applications using frameworks

3. Course
Outcomes
01 Construct a basic website using HTML and
Cascading Style Sheets
02
Build dynamic web page with validation using Java
Script objects and by applying different event
handling mechanisms
03
Develop server side programs using Servlets and
JSP
04
Construct simple web pages in PHP and to
represent data in XML format
05 Develop interactive web applications

4. Text Book 1
Deitel and Deitel and
Nieto, - “Internet and
World Wide Web -
How to Program.
Text Book 2
Jeffrey C and Jackson,
Web Technologies A
Computer Science
Perspective.
Text Book 3
Angular 6 for
Enterprise-Ready
Web Applications
TEXT BOOKS

5. UNIT 1- WEBSITE BASICS, HTML 5, CSS 3,
WEB 2.0

6. UNIT – 1 SYLLABUS
Tables – Lists – Image – HTML5 control elements
– Drag and Drop – Audio – Video controls
HTML 5
Inline, embedded and external style sheets – Rule
cascading – Inheritance – Backgrounds – Border Images –
Colors – Shadows – Text – Transformations – Transitions –
Animations.
CSS3
Clients, Servers and Communication – The Internet –
World wide web – HTTP Request Message – HTTP
Response Message – Web Clients – Web Servers
Web Essentials
Bootstrap Framework
FRAMEWORK

7. Web
Essentials

8. WEB TECHNOLOGY
About building and delivering
content and services over the
Internet
Collection of tools, methods, and
software that are used to create, develop,
and maintain websites and web
applications
What is Web Technology?

9. COMPONENTS
Name Here Name Here
Name Here Name Here
Web Browsers
Primary interface
through which
users access the
internet.
Web Servers
Powerful computers
that store and serve
web content to users
when requested.
CSS
Visual
presentation of
web content
HTML
Markup language
used to structure
and present
content on the web.
JavaScript
Dynamic
programming
language that adds
interactivity and
functionality to web
pages

10. COMPONENTS
Name Here Name Here
Name Here Name Here
Web
Development
Frameworks and
Libraries
Tools streamline
the development
process,
enhancing the user
experience and
performance
Web Hosting
Services
Making websites and
applications
accessible to a
global audience.
Content
Management
Systems
Simplify the
process of
creating and
managing web
content
DBMS
Store and
retrieve data.
Web Security
Practices such as
SSL/TLS
encryption,
firewalls, and
vulnerability testing
to protect websites
and user data

11. What is a client?
The software that resides on the
remote machine, communicates with
the server, fetches the information,
processes it, and then displays it on
the remote machine is called the
client.
C L I E N T S
WEB
ESSENTIALS

12. What is a server?
The software that distributes the
information and the machine where
the information and software reside is
called the server
S E R V E R S
WEB
ESSENTIALS
With the Internet, it's possible to
access almost any information,
communicate with anyone else in the
world, and do much more

13. What is a web client?
The client side (user side) of the
Web.
WEB CLIENT
WEB
ESSENTIALS
A Web client typically refers to
the Web browser in the user's
machine or mobile device

14. What is a web server?
A web server is software and
hardware that uses HTTP and other
protocols to respond to client
requests made over the World Wide
Web. .
WEB SERVER
WEB
ESSENTIALS
Display website content through
storing, processing and delivering
webpages to users.

15. CLIENT
SERVER
COMMUICATION
Clients and servers exchange messages in a
request response messaging pattern.
The client sends a request, and the server returns
a response.
To communicate, the computers must have a
common language, and they must follow rules so
that both the client and the server know what to
expect.

16. CLIENT
SERVER
COMMUICATION
User enters the URL(Uniform Resource Locator) of
the website or file. The Browser then requests the
DNS(DOMAIN NAME SYSTEM) Server.
DNS Server lookup for the address of the WEB
Server.
DNS Server responds with the IP address of the WEB
Server.
Browser sends over an HTTP/HTTPS request to WEB
Server’s IP.
Server sends over the necessary files of the website.
Browser then renders the files and the website is
displayed.

17. • It is the largest network in the world that connects hundreds of thousands of individual
networks all over the world.
• The popular term for the Internet is the “information highway”.
• With the Internet, it's possible to access almost any information, communicate with anyone
else in the world, and do much more.
• Rather than moving through geographical space, it moves your ideas and information
through cyberspace – the space of electronic movement of ideas and information.
17
The Internet

18. • In 1962, MIT computer scientist J.C.R. Licklider comes up with the idea for a global
computer network.
• Work on packet-switching theory pioneers the way to the world’s first wide-area computer
network - ARPANET in the year 1969.
18
Internet - History

19. • In 1973, Robert Kahn and Vinton Cerf collaborate to develop a protocol for linking
multiple networks together called Transmission Control Protocol/Internet Protocol
(TCP/IP).
• TCP is followed by evolution of Ethernet and USENET.
19
Internet - History

20. • In 1982, the PhoneNet system is established and is connected to ARPANET and the first
commercial network, Telenet, allows for email communication between multiple nations of
the world.
• In 1981, Ethernet products for both computer workstations and personal computers were
announced and this allows for the establishment of local area networks (LANs), followed
by Domain Name System.
20
Internet - History

21. • In 1990, ARPANET is decommissioned.
• Tim Berners-Lee and his colleagues at CERN develop hypertext mark-up language
(HTML) and the uniform resource locator (URL), giving birth to the first incarnation of
the World Wide Web.
21
Internet - History

22. • 2000 sees the rise and burst of the dotcom bubble and Google’s meteoric rise to domination
of the search engine market.
• This decade also sees the rise and proliferation of Wi-Fi - as well as mobile internet
devices like Smartphones.
22
Internet - History

23. 23
Uses of The Internet

24. 24
INTERNET - Worldwide
• Around 63.2% of world population uses internet.

25. 25
INTERNET - India
• In 2020, India had nearly 700 million internet users across the country.

26. 26
WEB
• The Web (World Wide Web) consists of information organized into Web
pages containing text and graphic images.
• It contains hypertext links, or highlighted keywords and images that lead
to related information.
• A collection of linked Web pages that has a common theme or focus is
called a Web site.
• The main page that all of the pages on a particular Web site are organized
around and link back to is called the site’s home page.

27. 27
How to access the Internet?
• Many schools and businesses have direct access to the Internet using
special high speed communication lines and equipment.
• Students and employees can access through the organization’s local area
networks (LAN) or through their own personal computers.
• Another way to access the Internet is through Internet Service Provider
(ISP).

28. 28
How to access the Internet?
• To access the Internet, an existing network need to pay a small registration
fee and agree to certain standards based on the TCP/IP (Transmission
Control Protocol/Internet Protocol) reference model.
• Each organization pays for its own networks and its own telephone bills,
but those costs usually exist independent of the internet.
• The regional Internet companies route and forward all traffic, and the cost
is still only that of a local telephone call.

29. 29
Internet Service Provider (ISP)
• A commercial organization with permanent connection to the Internet that
sells temporary connections to subscribers.
• Examples:
– Prodigy, America Online, Microsoft network, AT&T Networks

30. 30
How to access the Web?
• Once you have your Internet connection, then you need special software
called a browser to access the Web.
• Web browsers are used to connect you to remote computers, open and
transfer files, display text and images.
• Web browsers are specialized programs.
• Examples of Web browser: Netscape Navigator (Navigator) and Internet
Explorer

31. 31
Client/Server Structure of the Web
• Web is a collection of files that reside on computers, called Web servers,
that are located all over the world and are connected to each other through
the Internet.
• When you use your Internet connection to become part of the Web, your
computer becomes a Web client in a worldwide client/server network.
• A Web browser is the software that you run on your computer to make it
work as a web client

32. 32
Hypertext Mark-up Language
(HTML)
• The public files on the web servers are ordinary text files, much like the files used by
word-processing software.
• To allow Web browser software to read them, the text must be formatted according to a
generally accepted standard.
• The standard used on the web is Hypertext mark-up language (HTML).
• HTML uses codes, or tags, to tell the Web browser software how to display the text
contained in the document

33. 33
Addressing on the WEB - INTERNET PROTOCOL
• Internet protocols are set of rules governing communication within and between
computers on a network.
• The main functions of protocols are:
– Deciding how to announce sent and received data.
– Addressing the data
– Deciding how the data is to be sent
– Compressing the data
– Identifying errors
• A computer communication protocol is a detailed specification of how communication
between two computers will be carried out in order to serve some purpose.

34. 34
URL – UNIFORM RESOURSE LOCATOR
• A URL (Uniform Resource Locator) is a form of URI and standardized naming
convention for addressing documents accessible over the Internet and Intranet.
• An example of a URL is https://karpagamtech.ac.in/, which is the URL for the
Karpagam Institute of Technology college website.

35. 35
URL - OVERVIEW
• Below is additional information about each of the sections of the http URL for this
page.
• https://www.karpagamtech.ac.in/academics/computer-science-
engineering
https:// -
www -
karpagamtech.ac.in -
academics -
computer-science-engineering -

36. 36
URL - http or https
• The “http” stands for Hypertext Transfer Protocol.
• It lets the browser to know which type of protocol it is going to use to access the
information specified in the domain.
• An “https” protocol is short for “Hypertext Transfer Protocol Secure” and
indicates that information transmitted over HTTP is encrypted and secure.
• After the http or https is the colon (:) and two forward slashes (//) that separate the
protocol from the remainder of the URL.
• A URL is not explicit to an HTTP or HTTPS addresses; FTP, TFTP, Telnet, and other
addresses are also considered URLs and may not follow the same syntax as our
example.

37. 37
URL - www
• www stands for World Wide Web and is used to distinguish the content.
• This portion of the URL is not required and many times can be left out.
• For example, typing https://karpagamtech.ac.in/academics/computer-
science-engineering would still get you to the Computer Hope website.
• This portion of the address can also be substituted for an important sub
page known as a subdomain.

38. 38
URL - karpagamtech.ac.in
• kapagamtech.ac.in is the domain name for the website.
• The last portion of the domain is known as the domain suffix, or TLD.
• It is used to identify the type or location of the website.
• .in is short for india
• There are several domain suffixes available. To get a domain, you would
register the name through a domain registrar.

39. 39
URL - academics
• Academics - the directories where the web page is on the server.
• To find the file on the server, it would be in the /public_html/academics
directory.
• With most servers, the public_html directory is the default directory
containing the HTML files.

40. 40
URL
• Is an IP address the same as a URL or web address?
– No.
– An IP address is a unique number that's assigned to each device on a network.
– On the World Wide Web, a domain name is assigned a unique IP address.
– When typed (karpagamtech.ac.in), DNS translates the domain name into an IP
address that routers use to find the web server.
– A domain name is used instead of an IP address because it's easier for humans to
remember.

41. The Hypertext
Transfer
Protocol (HTTP)
is the foundation
of the World
Wide Web, and
is used to load
webpages using
hypertext links.
Hyper Text
Transfer Protocol

42. HYPERTEXT
TRANSFER PROTOCOL
HTTP is a Connectionless
protocol which can deliver any sort
of data
The basic structure of HTTP
communication follows request -
response model

43. HYPERTEXT
TRANSFER PROTOCOL
The HTTP’s basic structure
includes two message types.
The Request Message
The Response Message

44. HTTP - REQUEST
MESSAGE
HTTP requests are messages sent
by the client to initiate an action on
the server.
Every HTTP request message has
the same basic structure:
• Request / Start line
• Header field(s) (one or more)
• Blank line
• Message body (optional)

45. 45
• The Request / Start line is mandatory and is structured as
– Method + Request URI + Protocol Version
• Method
– Tells the server what action to perform.
• Request URI
– The resourse path, usually a URL, or the absolute path of the protocol, port, and
domain are usually characterized by the request context.
• Protocol Version
– Defines the structure of the remaining message, acting as an indicator of the
expected version to use for the response.
REQUEST MESSAGE -
START LINE

46. 46
• The HTTP Method, indicates the method to be performed on the resource identified
by the given Request-URI.
• The method is case-sensitive and should always be mentioned in uppercase.
START LINE -
METHODS

47. 47
• The second part of the start line is known as the Request-URI.
• A URI is an identifier that is intended to be associated with a particular resource (such
as a web page or graphics image) on the World Wide Web.
• Every URI consists of two parts: the scheme which appears before the colon (:),and
another part that depends on the scheme.
• URIs using the http scheme are both URIs and URLs.
• The Resource Path / Request URL follows the chosen method in the request line.
• The purpose of the Uniform Resource Identifier recognizes the resource of the request
target.
START LINE -
REQUEST URI

48. 48
• HTTP has four versions : HTTP/0.9, HTTP/1.0, HTTP/1.1, and HTTP/2.0. The version
in common use is HTTP/1.1 and the future will be HTTP/2.0.
HTTP/0.9 HTTP/1.0 HTTP/1.1 HTTP/2.0
The One-line
Protocol
Building
extensibility
The standardized
protocol
The Future
Methods
supported
GET GET, HEAD, POST GET , HEAD , POST
, PUT , DELETE ,
TRACE , OPTIONS
Response type Hypertext Not limited to
hypertext
Not limited to
hypertext
Connection nature Terminated
Immediately after
the response
Terminated
immediately after
the response
Long-lived
START LINE - HTTP
VERSION

49. 49
• GET /test.htm HTTP/1.1
– GET is the method
– /testpage.htm is the relative path to the resource.
– HTTP/1.1 is the protocol version we are using
• A relative path doesn’t include the domain name.
• The web browser uses the URL that we enter to create the relative URI of the resource.
START LINE EXAMPLE

50. 50
• HTTP header fields provide required information about the request or
response, or about the object sent in the message body.
• The Host header field is required in every HTTP/1.1 request message.
• HTTP/1.1 also defines a number of other header fields, several of which
are commonly used by modern browsers.
• Each header field begins with a field name , such as Host, followed by a
colon and then a field value.
REQUEST MESSAGE -
HEADER FIELD

51. 51
REQUEST MESSAGE -
HEADER FIELD

52. 52
• Each Request has a Response.
• Every HTTP Response message
consists of the follwing:
– Status line
– Header field(s) (one or more)
– Blank line
– Message body (optional)
RESPONSE MESSAGE

53. 53
• The start line of an HTTP response, called the status line, contains the following
information:
– The protocol version, usually HTTP/1.1
– A status code, indicating success or failure of the request. Common status codes are
200, 404, or 302
– A status text. A brief, purely informational, textual description of the status code to
help a human understand the HTTP message
A typical status line looks like: HTTP/1.1 404 Not Found.
RESPONSE MESSAGE -
STATUS LINE

54. 54
• HTTP headers for responses follow the same structure as any other header: a case-
insensitive string followed by a colon (':') and a value whose structure depends upon the
type of the header.
• The whole header, including its value, presents as a single line.
– General headers, like Via, apply to the whole message.
– Response headers, like Vary and Accept-Ranges, give additional information about the server
which doesn't fit in the status line.
– Representation metadata headers (formerly entity headers), like Content-Length that describe the
encoding and format of the message body (only present if the message has a body).
RESPONSE MESSAGE -
HEADER FIELDS

55. 55
RESPONSE MESSAGE -
HEADER FIELDS

56. 56
• How to Check HTTP Request and Response on Chrome?
– Open a webpage in Google Chrome and go to “View > Developer > Developer Tools” menu.
– You can also open the developer console by right clicking on the page and choose “Inspect”
option.
– Go to “Network” tab and then reload the page. Now you will see the loading time for each single
component on the page.
– Click on the “Show Overview” icon to remove the timeline so that you can view other details
clearly.
– Click the page URL on the left bar and go to “Response” tab. (You can also view the same details
under “Preview” tab).
HTTP - REQUEST &
RESPONSE MESSAGE

57. 57
HTTP - REQUEST &
RESPONSE MESSAGE

58. Skeleton of all web pages.
Provides structure to the content appearing on a website
Hyper Text Mark-up Language
Created by Tim Berners-Lee in 1991

59. 59
• HTML is composed of elements that structure the webpage and
define its content.
• The elements are the building blocks of any HTML page and are
represented by tags.
• Tags are one of the most important part in an HTML Document.
• HTML uses some predefined tags which tells the browser about
content display property, that is how to display a particular given
content.
HTML - Structure

60. 60
• For Example, to create a paragraph, one must use the paragraph tags(<p> </p>) and to
insert an image one must use the img tags(<img />)
HTML - Structure

61. 61
• An HTML Document is mainly divided into two parts:
– HEAD: This contains the information about the HTML document. For Example, Title of the page,
version of HTML, Meta Data etc.
– BODY: This contains everything you want to display on the Web Page.
HTML - Structure

62. 62
• Every Webpage must contain the above code.
• <!DOCTYPE html>: This tag is used to tells the HTML version. This
currently tells that the version is HTML 5.
• <html>: This is called HTML root element and used to wrap all the code.
• <head>: Head tag contains metadata, title, page CSS etc.
• <body>: Body tag is used to enclosed all the data which a web page has
from texts to links.
• All of the content that you see rendered in the browser is contained within
this element.
HTML - Structure

63. 63
• Example:
• Output:
HTML – First Web Page

64. 64
• The following tags help in organization and basic formatting of elements in our
script or web pages.
– HTML Paragraph <p> </p> - to write paragraph statements in a webpage.
– Break </br> - to break line and acts as a carriage return.
– Horizontal Rule <hr> - to break the page into various parts, creating
horizontal margins
– HTML Images <img src=”source_of_image“> - to insert an image into our
web page
– HTML Attributes - to provide extra or additional information about an
element
– HTML Comments - for inserting comments in the HTML code
Basic HTML Tags & Attributes

65. 65
Basic HTML Tags & Attributes
<html>
<head>
<!-- Example for Basic Tags -->
<title>Basic Tags</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Tags and Usages</h1>
<p>
Computer Science Engineering (CSE) <br>is one of the popular domains among engineering
aspirants which focuses on the basic elements
of computer programming.<br> </p>
<hr>
<img src="download.jpg">
</body>
</html>

66. 66
Basic HTML Tags & Attributes

67. Introduction to
HTML5

68. 68
HTML first
published
1991
2012
2002
-2009
2000
HTML 2.0
HTML 3.2
HTML 4.01
XHTML 1.0
XHTML 2.0
HTML5
1995
1997
1999
2014 HTML5.1
History
After HTML 4.01 was released, focus shifted to
XHTML and its stricter standards.
XHTML 2.0 had very strict standards but was
abandoned in 2009 in favor of HTML5.
HTML5 is much more tolerant and can handle
markup from all the prior versions. A working
draft was released in 2012 and it is scheduled to
be finalized by the end of 2014.

69. • Support all existing web pages.
• Reduce the need for external plugins and scripts.
• Improve the semantic definition.
• Make the rendering of web content universal and independent
of the device being used.
• Handle web documents errors in a better and more consistent
fashion.
69
GOALS

70. • Built-in audio and video support (without plugins)
• Enhanced form controls and attributes
• The Canvas (a way to draw directly on a web page)
• Drag and Drop functionality
• Support for CSS3 (the newer and more powerful version of
CSS)
• More advanced features for web developers, such as data
storage and offline applications.
70
FEATURES

71. <!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.01//EN“
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Head First Lounge</title>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet"
href="lounge.css">
<script type="text/javascript"
src="lounge.js"></script>
</head>
<body>
<h1>Welcome to Head First Lounge</h1>
<p>
<img src="drinks.gif" alt="Drinks">
</p>
<p>
Join us any evening for refreshing <a
href="elixirs.html">elixirs</a>,
conversation and maybe a game or two of Tap Tap
Revolution.
Wireless access is always provided; BYOWS
(Bring Your Own Web Server).
</p>
</body>
</html>
71
HTML 4.1

72. 72
DOCTYPE Declaration
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<!DOCTYPE html>
Just 15 characters!

73. 73
<head> section
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My First XHTML Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>

74. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html> 74
HTML5

75. • Semantic Tags: A semantic element clearly
describes its meaning to both the browser and
the developer.
• HTML5 introduces many semantic elements
which make the code easier to write and
understand for the developer as well as
instructs the browser on how to treat them.
• A Semantic Web “allows data to be shared and
reused across applications, enterprises, and
communities."
75
HTML 5 - Semantics

76. 80
HTML 5 - Header
• The <header> tag in HTML is used to define the header for a document or a section.
• Syntax:
• The header tag contains information related to the title and heading of the related
content.
• The browsers which supports <header> tag are : Google Chrome 6.0, Internet
Explorer 9.0, Firefox 4.0, Opera 11.1, Safari 5.0

77. 81
Header Example

78. 82
HTML 5 - Footer
• The <footer> element specifies a footer for a document or section.
• A element should contain information about its containing element.
• A footer typically contains the author of the document, copyright information, links to
terms of use, contact information, etc.
• Syntax:
<footer> ... </footer>

79. 83
Footer - Example

80. 84
HTML 5 - NAV
• The <nav> element defines a set of navigation links.
• Websites typically have sections dedicated to navigational links, which enables users to
navigate the site.
• These links can be placed inside a nav tag.
• The links in the nav element may point to other webpages or to different sections of the
same webpage.
• Syntax:
<nav> Links </nav>

81. 85
HTML 5 - Aside
• The <aside> tag is used to describe the main object of the web page in a shorter way
like a highlighter.
• It basically identifies the content that is related to the primary content of the web page
but does not constitute the main intent of the primary page.
• The <aside> tag contains mainly author information, links, related content, and so on.
• The <aside> tag makes it easy to design the page and it enhances the clarity of HTML
document.
• Syntax:
<aside>
<h1>Contents...</h1>
</aside>

82. 86
HTML 5 - Article
• The element specifies independent, self-contained content.
• An article should make sense on its own, and it should be possible to read it
independently from the rest of the web site.
• Can be used for
Forum Post
Blog Post
Newspaper Article
• Syntax
<article>
Contents
</article>

83. 87
HTML 5 - Article

84. 88
HTML 5 - FIGURE AND FIGCAPTION
• These are used to add an image in a web page with small description.

85. 89
HTML 5 - Control Elements
• HTML Control Elements are responsible to accept the User input in a specified
manner.
• These elements can be grouped together inside a form to collect data from a User in a
User-friendly manner.

86. 90
HTML 5 - Input Text Control
• Input text controls are used to collect User data as a free text.
• On the web page, it will form a rectangle box where Users can input the data.
• There are different types of input text controls that can be used in the HTML forms.
– Single line Input Text Control
– Multi-line Input Text Control
– Password Input Control

87. 91
Single line Input Text Control
• This allows the user to enter only a single line of data. A typical example of such input
text controls is for entering the name, search box, city, etc.

88. 92
Multi-line Input Text Control
• This input control type allows the user to enter data of multiple lines.
• Typical usage of such input controls is for comments, addresses, description and so on.

89. 93
Password Input Control
• This is typically used for the password field. This works in the same way as the input
text field but the text gets masked for safety purposes.

90. 94
Input Type Submit
• When input type is of submitting it performs the action defined in the form action and
sends the form data to the server.

91. 95
Input Type Radio
• Radio buttons are used when you expect Users to fill data as a Boolean value or you
expect only one input as true out of multiple options.

92. 96
Input Type Checkbox
• A checkbox lets the User select whatever information is true in his case.
• It is a very convenient way of accepting the data when the possible input is already
known.

93. 97
Input Type drop-down list
• The drop-down list enables the user to select one option out of multiple possible
options. This is a very User-friendly way to get the detail from the User as it provides
an exhaustive list of possible options that helps the user to identify the option best suits
him.

94. 98
Input Type Optgroup
• Optgroup works in a similar way as of the drop-down list, the only difference is that
the optgroup lets you to logically group certain options under one umbrella. It helps
the user to quickly identify the relevant option with the help of the optgroup label.

95. 99
Fieldset
• Fieldset is another useful tag in the Html form which let the developer to logically
group certain controls under one legend, this help the developer to give User a clear
instruction on what to expect in this section.

96. 100
HTML output Tag
• It let you display the output of a calculation instantly. This is quite useful when the user
needs to do ay calculation instantly and see the results.

97. 101
Input type Color
• It is often required in the form to just show the color instead of any text.
• It shows the color which you want to display in the form. Typical scenario’s where it is
being used is to show the status of a project or a phase.

98. 102
Input type Date
• Input type date is commonly used where a date type field as input is expected by the
User, it could be anything like a Date of Birth, Hiring date, termination date and so on.

99. 103
HTML 5 Tables
• The HTML table provides a way to derive or define the data such as text, images,
links etc. in terms of rows and columns of cells.
• The HTML tables can be created by using <table> tag.
• The table can be created by using <th>, <td>, and <tr> tags.
– The <th> tag defines a heading for the table.
– The <td> tag specifies the table data cells which is used to make the column.
– The <tr> tag specifies the table rows which is used to make a row.
• The table data can be structured within <table>content of the table</table> with
numerous table elements.

100. 104
Basic Table Usage

101. 105
Table Tags & Attributes
• <caption> - caption for the table
• cellspacing - specifies the space between table cells.
• cellpadding - specifies the space between the border of a table cell and its contents.
• Column and Row Span Attributes - The two or more table rows / columns can be
merged into a single row / column.
• bgcolor - background of the table
• Height and Width of the Table - height and width of the table can be set by using width
and height attributes
• allign - provides the alignment of content inside an element

102. 106
HTML 5 - Audio
• The “audio” tag is an inline element that is used to embed sound files into a web page.
• Attributes: The various attributes that can be used with the “audio” tag are listed
below:
– Controls: Designates what controls to display with the audio player.
– Autoplay: Designates that the audio file will play immediately after it loads controls.
– Loop: Designates that the audio file should continuously repeat.
– src: Designates the URL of the audio file.
– muted: Designates that the audio file should be muted.

103. 107
HTML 5 - Video
• The HTML5 “video” element specifies a standard way to embed a video in a web page.
• There are three different formats that are commonly supported by web browsers – mp4,
Ogg and WebM.
• Attributes that can be used with the “video” tag are listed below :
– Autoplay
– Preload
– Loop
– Height and Width
– Controls
– Muted

104. 108
HTML 5 - Video
• The HTML5 “video” element specifies a standard way to embed a video in a web page.
• There are three different formats that are commonly supported by web browsers – mp4,
Ogg and WebM.
• Attributes that can be used with the “video” tag are listed below :
– Autoplay
– Preload
– Loop
– Height and Width
– Controls
– Muted