IFET COLLEGE OF ENGINEERING

CS8651 - INTERNET PROGRAMMING

UNIT I- WEBSITE BASICS, HTML 5, CSS 3, WEB 2.0

(REGULATION-2017)
(For VI Semester B.E (CSE) Students)

Prepared by, Approved by,

Mrs. A. Divya, SAP/CSE Mrs. P.Kanimozhi
Mr. R.Raghuraman,SAP/CSE Head of the Department /CSE

Course Coordinator
Mr. R.Rajmohan, Asso.Prof/CSE
 DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Programme Outcomes (POs): On the completion of the program the graduates are expected to know
or develop the abilities defined through the Programme Outcomes.

PO 1: Apply knowledge of mathematics, science, engineering fundamentals and an engineering

specialization to the conceptualization of computer science engineering models.
PO 2: Identify, formulate, research literature and solve complex engineering problems reaching
substantiated conclusions using first principles of mathematics and engineering sciences.
PO 3: Design solutions for complex engineering problems and design systems, components or
processes that meet specified needs with appropriate consideration for public health and safety,
cultural, societal, and environmental considerations.
PO 4: Conduct investigations of complex problems including design of experiments, analysis
and interpretation of data, and synthesis of information to provide valid conclusions.
PO 5: Create, select and apply appropriate techniques, resources, and modern engineering tools,
including prediction and modeling, to complex engineering activities, with an understanding of
the limitations.
PO 6: Function effectively as an individual, and as member or leader in diverse teams, and in
multidisciplinary settings.
PO 7: Communicate effectively on complex engineering activities with the engineering
community and with the society at large, such as, being able to comprehend and write effective
reports and design documentation, make effective presentations, and give and receive clear
instructions.
PO 8: Demonstrate understanding of the societal, health, safety, legal and cultural issues and the
consequent responsibilities relevant to engineering practice.
PO 9: Understand and commit to professional ethics and responsibilities and norms of
engineering practice.
PO 10: Understand the impact of engineering solutions in a societal context and demonstrate
knowledge of and need for sustainable development.
PO 11: Demonstrate a knowledge and understanding of management and business practices,
such as risk and change management, and understand their limitations.
PO 12: Recognize the need for, and have the preparation and ability to engage in independent
and life-long learning in the broadest context of technologies.

Course outcomes (COs): On successful completion of the course, the students will be able to
CO Description
C310.1 Construct a basic website using HTML and Cascading Style Sheets
Build dynamic web page with validation using Java Script objects and by applying
C310.2
different event handling mechanisms.
C310.3 Develop server side programs using Servlets
C310.4 Create applications using JSP
C310.5 Construct simple web pages in PHP and to represent data in XML format
C310.6 Design rich client presentation using AJAX
C310.7 Use web services to develop interactive web applications.
Regulation: 2017 Academic Year: 2019-2020

IFET COLLEGE OF ENGINEERING

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS8651 - INTERNET PROGRAMMING
UNIT I- WEBSITE BASICS, HTML 5, CSS 3, WEB 2.0

Web Essentials: Clients, Servers and Communication – The Internet – Basic Internet protocols –
World wide web – HTTP Request Message – HTTP Response Message – Web Clients – Web Servers
– HTML5 – Tables – Lists – Image – HTML5 control elements – Semantic elements – Drag and Drop
– Audio – Video controls - CSS3 – Inline, embedded and external style sheets – Rule cascading –
Inheritance – Backgrounds – Border Images – Colors – Shadows – Text – Transformations –
Transitions – Animations
1. Web Essentials: Clients, Servers and Communication
 Server: The software that distributes the information and the machine where the information and
software reside is called the server.
 Provides requested service to client
 e.g., Web server sends requested Web page
 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.
 initiates contact with server (―speaks first‖)
 Typically requests service from server
 Web: client implemented in browser
 Web server: Software that delivers Web pages and other documents to browsers using the HTTP
protocol
 Web Page: A web page is a document or resource of information that is suitable for the World Wide
Web and can be accessed through a web browser.
 Website: A collection of pages on the World Wide Web that is accessible from the same URL and
typically residing on the same server.
 URL: Uniform Resource Locator, the unique address which identifies a resource on the Internet for
routing purposes.
1.1Client-server paradigm
 The Client-Server paradigm is the most prevalent model for distributed computing protocols. It is
the basis of all distributed computing paradigms at a higher level of abstraction. It is service-
oriented, and employs a request-response protocol.
 A server process, running on a server host, provides access to a service. A client process, running
on a client host, accesses the service via the server process. The interaction of the process proceeds
according to a protocol.
 The primary idea of a client/server system is that have a central repository of information some kind
of data, often in a database—that want to distribute on demand to some set of people or machines.
2. The Internet:
 Medium for communication and interaction in inter connected network.
 Makes information constantly and instantly available to anyone with a connection.
Protocol: A Protocol is a set of communication rules. It is a set of standards that ensures various
network programs work together. Protocols are agreed formats for transmitting data between devices.
The protocol determines:
 The error checking required
 Data compression method used
 The way the end of a message is signaled
 The way the device indicates that it has received the message
1
Regulation: 2017 Academic Year: 2019-2020

Fig 1: Client- Server Paradigm

3. Basic Internet Protocol:
There are many protocols used by the Internet and the WWW:
 TCP/IP
 HTTP
 FTP
 Electronic mail protocols IMAP
 POP
TCP/IP
 Transmission control protocol (TCP): Controls disassembly of message into packets at the origin
reassembles at the destination
 Internet protocol (IP): Specifies the addressing details for each packet Each packet is labelled with
its origin and destination.
3.1 Hypertext Transfer Protocol (HTTP)
 The hypertext transfer protocol (HTTP) was developed by Tim Berners-Lee in 1991
 HTTP was designed to transfer pages between machines
 The client (or Web browser) makes a request for a given page and the Server is responsible for
finding it and returning it to the client
 The browser connects and requests a page from the server
 The server reads the page from the file system, sends it to the client and terminates the connection.

Fig 2: Overview diagram of HTTP

Electronic Mail Protocols:
Electronic mail uses the client/server model
 The organization has an email server devoted to handling email o Stores and forwards email
messages
 Individuals use email client software to read and send email
• (e.g. Microsoft Outlook, or Netscape Messenger)
 Simple Mail Transfer Protocol (SMTP)
• Specifies format of mail messages
2
Regulation: 2017 Academic Year: 2019-2020
 Post Office Protocol (POP) tells the email server to:
• Send mail to the user’s computer and delete it from the server
• Send mail to the user’s computer and do not delete it from the server o Ask whether
new mail has arrived.
Interactive Mail Access Protocol (IMAP)
 Newer than POP, provides similar functions with additional features.
 e.g. can send specific messages to the client rather than all the messages. A user can view email
message headers and the sender’s name before downloading the entire message.
 Allows users to delete and search mailboxes held on the email server.

The disadvantage of POP: can only access messages from one PC.
The disadvantage of IMAP: Since email is stored on the email server, there is a need for more and
more expensive (high speed) storage space.

4. World Wide Web:

The World Wide Web is a way of exchanging information between computers on the Internet, tying
them together into a vast collection of interactive multimedia resources.
It comprises software (Web server and browser) and data (Web sites).
Evolution:

Fig 3: Web Evolution

Internet Protocol (IP) Addresses:
- Every node has a unique numeric address
- Form: 32-bit binary number
- New standard, IPv6, has 128 bits (1998)
- Organizations are assigned groups of IPs for their computers
- Domain names
- Form: host-name. Domain-names
- First domain is the smallest (Google)
- Last domain specifies the type of organization (.com)
- Fully qualified domain name - the host name and all of the domain names
- DNS servers - convert fully qualified domain names to IPs
3
Regulation: 2017 Academic Year: 2019-2020

5. HTTP Request Message – HTTP Response Message – Web Clients – Web Servers
5.1 HTTP
 Hypertext Transfer Protocol (HTTP) is the communication protocol used by the Internet to transfer
hypertext documents.
 A protocol to transfer hypertext requests and information between servers and browsers
 Hypertext is text, displayed on a computer, with references (hyperlinks) to other text that the reader
can immediately follow, usually by a mouse HTTP is behind every request for a web document or
graph, every click of a hypertext link, and every submission of a form.
 In fig 4, HTTP specifies how clients request data, and how servers respond to these requests.
 The client makes a request for a given page and the server is responsible for finding it and returning
it to the client.
 The browser connects and requests a page from the server.
 The server reads the page from the file system and sends it to the client and then terminates the
connection

Fig 4: HTTP Transaction

5.2 HTTP Message:
HTTP message is the information transaction between the client and server.
Two types of HTTP Message:
1. Requests
a. Client to server
2. Responses
4
Regulation: 2017 Academic Year: 2019-2020
a. Server to client

Fig 5: Structure of HTTP Request Message

Fields
 Request line or Response line:
 It begins with a method token, followed by the Request-URI and the protocol version, and
ending with CRLF
 General header
 Request header or Response header
 Entity header
 Entity body

5.3 HTTP Request Message:

Request Line:
 A request line has three parts, separated by spaces o a method name
• the local path of the requested resource o the version of HTTP being used
 A typical request line is: : GET /path/to/file/index.html HTTP/1.1
 GET is the most common HTTP method; it says "give me this resource". Other methods
include POST and HEAD. Method names are always uppercase
 The path is the part of the URL after the host name, also called the request URI o The HTTP
version always takes the form "HTTP/x.x", uppercase.
Request Header:

Fig 6: Structure of HTTP Request Header

5
Regulation: 2017 Academic Year: 2019-2020

Fig 7: HTTP Request Message

5.4 HTTP Response Message:
Response Line:
 A request line has three parts, separated by spaces o the HTTP version,
• A response status code that gives the result of the request, and o an English reason
phrase describing the status code
 Typical status lines are: HTTP/1.0 200 OK or HTTP/1.0 404 Not Found
 The HTTP version is in the same format as in the request line, "HTTP/x.x".
 The status code is meant to be computer-readable; the reason phrase is meant to be human-readable,
and may vary.
HTTP Response Header:

Fig 8: Structure of HTTP Response Header

Fig 9: HTTP Response Message

6
Regulation: 2017 Academic Year: 2019-2020
EXAMPLE
HTTP Method:
 HTTP method is supplied in the request line and specifies the operation that the client has
requested.
Some common methods:
• Options
• Get
• Head
• Post
• Put
• Move
• Delete
Two methods that are mostly used are the GET and POST:
 GET for queries that can be safely repeated
 POST for operations that may have side effects (e.g. ordering a book from an on-line store).

The GET Method

 It is used to retrieve information from a specified URI and is assumed to be a safe, repeatable
operation by browsers, caches and other HTTP aware components
 Operations have no side effects and GET requests can be re-issued.
 For example, displaying the balance of a bank account has no effect on the account and can be
safely repeated.
 Most browsers will allow a user to refresh a page that resulted from a GET, without displaying
any kind of warning
 Proxies may automatically retry GET requests if they encounter a temporary network
connection problem.
 GET requests is that they can only supply data in the form of parameters encoded in the URI
(known as a Query String)
 Cannot be unused for uploading files or other operations that require large amounts of data to
be sent to the server.

The POST Method

 Used for operations that has side effects and cannot be safely repeated.
 For example, transferring money from one bank account to another has side effects and should
not be repeated without explicit approval by the user.
 If refresh a page in Internet Explorer that resulted from a POST, it displays the following
message to warn that there may be side effects:

 The POST request message has a content body that is normally used to send parameters and
data
 The IIS server returns two status codes in its response for a POST request
o The first is 100 Continue to indicate that it has successfully received the POST request
o The second is 200 OK after the request has been processed.
7
Regulation: 2017 Academic Year: 2019-2020
HTTP response status codes
 Informational (1xx)
 Successful (2xx)
 Redirection (3xx)
o 301: moved permanently
 Client error (4xx)
o 403 : forbidden o 404: Not found
 Server error (5xx)
o 503: Service unavailable
o 505: HTTP version not supported
6. HTML 5
HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and
XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.
HTML5 is cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG).
The new standard incorporates features like video playback and drag-and-drop that have been
previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and
Google Gears.
Features:
HTML5 introduces a number of new elements and attributes that can help in building modern
websites. Here is a set of some of the most prominent features introduced in HTML5.
 New Semantic Elements − These are like <header>, <footer>, and <section>.
 Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced
for <input> tag.
 Persistent Local Storage − To achieve without resorting to third-party plugins.
 WebSocket − A next-generation bidirectional communication technology for web applications.
 Server-Sent Events − HTML5 introduces events which flow from web server to the web
browsers and they are called Server-Sent Events (SSE).
 Canvas − This supports a two-dimensional drawing surface that can program with JavaScript.
 Audio & Video − embed audio or video on webpages without resorting to third-party plugins.
 Geolocation − Now visitors can choose to share their physical location with web application.
 Microdata − This create own vocabularies beyond HTML5 and extend web pages with custom
semantics.
 Drag and drop − Drag and drop the items from one location to another location on the same
webpage.
Backward Compatibility
 HTML5 is designed, as much as possible, to be backward compatible with existing web
browsers. Its new features have been built on existing features and allow to provide fallback
content for older browsers.
 It is suggested to detect support for individual HTML5 features using a few lines of
JavaScript.
Document Type Declaration
The document type declaration (DOCTYPE is required to render the page in standards mode,
according to the HTML and CSS specifications.
The DOCTYPE declaration for HTML5 is very simple:
<!DOCTYPE html>
The character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">
Example:

8
Regulation: 2017 Academic Year: 2019-2020
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Output:

My First Heading
My first paragraph.
HTML5 New Elements:
HTML5 offers new elements for better document structure:
Tag Description
<article> Defines an article in a document
<aside> Defines content aside from the page content
Isolates a part of text that might be formatted in a different direction from other
<bdi>
text outside it
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption
Defines a caption for a <figure> element
>
<figure> Defines self-contained content
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<main> Defines the main content of a document
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters
<ruby> Defines a ruby annotation
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break

New Form Elements:

Tag Description
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
New Input Types:
New Input Types New Input Attributes
 color  autocomplete

9
Regulation: 2017 Academic Year: 2019-2020
 date  autofocus
 datetime  form
 datetime-local  formaction
 email  formenctype
 month  formmethod
 number  formnovalidate
 range  formtarget
 search  height and width
 tel  list
 time  min and max
 url  multiple
 week  pattern (regexp)
 placeholder
 required
 step

HTML5 - New Attribute Syntax:

HTML5 allows four different syntaxes for attributes.
This example demonstrates the different syntaxes used in an <input> tag:
Type Example
Empty <input type="text" value="John" disabled>
Unquoted <input type="text" value=John>
Double-quoted <input type="text" value="John Doe">
Single-quoted <input type="text" value='John Doe'>
In HTML5, all four syntaxes may be used, depending on what is needed for the attribute.
HTML5 Graphics:
Tag Description
<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)
<svg> Draw scalable vector graphics

New Media Elements:

Tag Description
<audio> Defines sound content
<embed> Defines a container for an external (non-HTML) application
<source> Defines multiple media resources for media elements (<video> and <audio>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines video or movie

7. HTML Table
 HTML table allows the developer to arrange data into rows and columns. They are commonly
used to display tabular data like product listings, customer's details, financial reports, and so
on.
 An HTML table is defined with the <table> tag.
 Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By
default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
The following example demonstrates the most basic structure of a table:
<!DOCTYPE html>
<html>
<body>

10
Regulation: 2017 Academic Year: 2019-2020
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Output:
Basic HTML Table
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

HTML Table - Adding a Border:

If the developer do not specify a border for the table, it will be displayed without borders. The border
attribute with the value "1" specifies that the browser should place borders around the table and the
table’s cells. The caption element specifies a table’s title..
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>A simple HTML5 table</title>
</head>
<body>
<table border = "1">
<caption><strong>Table of Fruits (1st column) and
Their Prices (2nd column)</strong></caption>
<thead>
<tr> <!-- <tr> inserts a table row -->
<th>Fruit</th> <!-- insert a heading cell -->

11
Regulation: 2017 Academic Year: 2019-2020
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<th>$3.75</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Apple</td>
<td>$0.25</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.50</td>
</tr>
<tr>
<td>Banana</td>
<td>$1.00</td>
</tr>
<tr>
<td>Pineapple</td>
<td>$2.00</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:

8. Lists
Lists is used to organize the content in a web page
Example:
<!DOCTYPE html>
<html>
<head>
12
Regulation: 2017 Academic Year: 2019-2020
<meta charset = "utf-8">
<title>Links</title>
</head>
<body>
<h1>Here are my favorite sites</h1>
<p><strong>Click on a name to go to that page</strong></p>

Nested Lists:
Lists may be nested to represent hierarchical relationships, as in a multilevel outline.
9. Images
Mark up documents that contain only text, but web pages may also contain images, animations,
graphics, audios and even videos. The most popular image formats used by web developers are PNG
and JPEG
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Images</title>
</head>
<body>
<p>
<img src = "cpphtp.png" width = "92" height = "120"
alt = "C++ How to Program book cover">
<img src = "jhtp.png" width = "92" height = "120"
alt = "Java How to Program book cover">
</p>
</body>
</html>

alt Attribute

13
Regulation: 2017 Academic Year: 2019-2020
Every img element in an HTML5 document must have an alt attribute. If a browser cannot render an
image, the browser displays the alt attribute’s value.
Void Elements
Some HTML5 elements contain only attributes and do not mark up text (i.e., text is not placed
between a start and an end tag). Although this is not required in HTML5, you can terminate void
elements (such as the img element) by using the forward slash character (/) inside the closing right
angle bracket (>) of the start tag.
10. HTML Control Elements
The <input> Element
 The most important form element is the <input> element.
 The <input> element can be displayed in several ways, depending on the type attribute.
Example
<input name="firstname" type="text">

The <select> Element

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

Visible Values:
Use the size attribute to specify the number of visible values:
Example
<select name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:
Example
<select name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
 The <textarea> Element
14
Regulation: 2017 Academic Year: 2019-2020
 The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
 The rows attribute specifies the visible number of lines in a text area.
 The cols attribute specifies the visible width of a text area.

The <button> Element

The <button> element defines a clickable button:
Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
HTML5 Form Elements
HTML5 added the following form elements:
 <datalist>
 <output>
HTML5 <datalist> Element
 The <datalist> element specifies a list of pre-defined options for an <input> element.
 Users will see a drop-down list of the pre-defined options as they input data.
 The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
HTML5 <output> Element
The <output> element represents the result of a calculation (like one performed by a script).
Example
Perform a calculation and show the result in an <output> element:
<form action="/action_page.php"oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" name="a" value="50"> 100 +
<input type="number" id="b" name="b" value="50">=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

HTML Form Elements

Tag Description

<form> Defines an HTML form for user input

<input> Defines an input control

15
Regulation: 2017 Academic Year: 2019-2020

<textarea> Defines a multiline input control (text area)

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<button> Defines a clickable button

<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

11. HTML5 Semantic Elements

Elements such as <header>, <footer> and <article> are all considered semantic because they
accurately describe the purpose of the element and the type of content that is inside them.
 Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
 Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

11.1 HTML5 <header> Element

The <header> element specifies a header for a document or section.
The <header> element should be used as a container for introductory content.
It have several <header> elements in one document.
The following example defines a header for an article:
Example
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p> WWF's mission is to stop the degradation of our planet's natural environment, and build a future
in which humans live in harmony with nature.</p>
</article>

16
Regulation: 2017 Academic Year: 2019-2020
11.2 HTML5 <footer> Element
The <footer> element specifies a footer for a document or section.
A <footer> 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.
It have several <footer> elements in one document.
Example
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
Semantic Elements in HTML5
Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
Specifies self-contained content, like illustrations, diagrams, photos, code listings,
<figure>
etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

12. HTML5 Drag and Drop

 Drag and drop is a very common feature. It is when "grab" an object and drag it to a different
location.
 In HTML5, drag and drop is part of the standard: Any element can be draggable.

Make an Element Draggable

To make an element draggable, set the draggable attribute to true:
<img draggable="true">

ondragstart and setData()

It specify what should happen when the element is dragged.
In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to
be dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:
Example
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
ondragover
 The ondragover event specifies where the dragged data can be dropped.

17
Regulation: 2017 Academic Year: 2019-2020
 By default, data/elements cannot be dropped in other elements. To allow a drop, we must
prevent the default handling of the element.
 This is done by calling the event.preventDefault() method for the ondragover event:
event.preventDefault()
ondrop
 When the dragged data is dropped, a drop event occurs.
 In the example above, the ondrop attribute calls a function, drop(event):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

13. HTML5 Audio

The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
13.1 HTML Audio
 The controls attribute adds audio controls, like play, pause, and volume.
 The <source> element used to specify alternative audio files which the browser may choose
from. The browser will use the first recognized format.
 The text between the <audio> and </audio> tags will only be displayed in browsers that do not
support the <audio> element.
13.2 HTML Audio - Media Types
File Format Media Type

MP3 audio/mpeg

OGG audio/ogg

WAV audio/wav
13.3 HTML Audio - Methods, Properties, and Events
 HTML5 defines DOM methods, properties, and events for the <audio> element.
 This allows the user to load, play, and pause audios, as well as set duration and volume.
 There are also DOM events that can notify the user when an audio begins to play, is paused,
etc.

13.4 HTML5 Audio Tags

Tag Description

<audio> Defines sound content

<source> Defines multiple media resources for media

elements, such as <video> and <audio>

18
Regulation: 2017 Academic Year: 2019-2020

14. HTML5 Video

 The HTML5 <video> element specifies a standard way to embed a video in a web page.
 The HTML <video> Element
 To show a video in HTML, use the <video> element:
Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
14.1 HTML Video:
 The controls attribute adds video controls, like play, pause, and volume.
 It is a good idea to always include width and height attributes. If height and width are not set,
the page might flicker while the video loads.
 The <source> element used to specify alternative video files which the browser may choose
from. The browser will use the first recognized format.
 The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.
14.2 HTML <video> Autoplay
To start a video automatically use the autoplay attribute:
Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
HTML Video - Media Types
File Format Media Type

MP4 video/mp4

WebM video/webm

Ogg video/ogg
14.3 HTML Video - Methods, Properties, and Events
 HTML5 defines DOM methods, properties, and events for the <video> element.
 This allows the user to load, play, and pause videos, as well as setting duration and volume.
 There are also DOM events that can notify the user when a video begins to play, is paused, etc.
14.4 HTML5 Video Tags
Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <video> and <audio>
<track> Defines text tracks in media players

15. CSS3
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of
a document written in a markup language. CSS3 is a latest standard of css earlier versions(CSS2).
The main difference between css2 and css3 is follows −

19
Regulation: 2017 Academic Year: 2019-2020
 Media Queries
 Namespaces
 Selectors Level 3
 Color
15.1 CSS3 modules
CSS3 is collaboration of CSS2 specifications and new specifications, we can called this collaboration
is module. Some of the modules are shown below −
 Selectors
 Box Model
 Backgrounds
 Image Values and Replaced Content
 Text Effects
 2D Transformations
 3D Transformations
 Animations
 Multiple Column Layout
 User Interface

15.2 Types of CSS (Cascading Style Sheet)

Cascading Style Sheet(CSS) is used to set the style in web pages which contain HTML elements. It
sets the background color, font-size, font-family, color, … etc property of elements in a web pages.
There are three types of CSS which are given below:
 Inline CSS
 Internal or Embedded CSS
 External CSS

15.2.1 Inline CSS:

Inline CSS contains the CSS property in the body section attached with element is known as inline
CSS. This kind of style is specified within an HTML tag using style attribute.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>

<body>
<p style = "color:#009900; font-size:50px;
font-style:italic; text-align:center;">
HelloWorld
</p>
</body>
</html>

15.2.2 Internal or Embedded CSS:

This can be used when a single HTML document must be styled uniquely. The CSS rule set should be
within the HTML file in the head section i.e the CSS is embedded within the HTML file.
Example:
<!DOCTYPE html>
20
Regulation: 2017 Academic Year: 2019-2020
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>

<div class ="geeks">

A computer science portal for geeks
</div>
</div>
</body>
</html>
15.2.3 External CSS:
External CSS contains separate CSS file which contains only style property with the help of tag
attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css
extension and should be linked to the HTML document using link tag. This means that for each
element, style can be set only once and that will be applied across web pages.
Example: The file given below contains CSS property. This file saves with .css extension. For
Ex: eg.css
body {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}

21
Regulation: 2017 Academic Year: 2019-2020
Below is the HTML file that is making use of the created external style sheet
 link tag is used to link the external style sheet with the html webpage.
 href attribute is used to specify the location of the external style sheet file.
filter_none
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="geeks.css"/>
</head>

<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div id ="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Properties of CSS: Inline CSS has the highest priority, then comes Internal/Embedded followed by
External CSS which has the least priority. Multiple style sheets can be defined on one page. If for an
HTML tag, styles are defined in multiple style sheets then the below order will be followed.
 As Inline has the highest priority, any styles that are defined in the internal and external style
sheets are overridden by Inline styles.
 Internal or Embedded stands second in the priority list and overrides the styles in the external
style sheet.
 External style sheets have the least priority. If there are no styles defined either in inline or
internal style sheet then external style sheet rules are applied for the HTML tags.
Rule Cascading
 Stylesheets cascade — at a very simple level this means that the order of CSS rules matter;
when two rules apply that have equal specificity the one that comes last in the CSS is the one
that will be used.
 In the below example, we have two rules that could apply to the h1. The h1 ends up being
colored blue these rules have an identical selector and therefore carry the same specificity
Example:
h1 {
color: red;
}
h1 {
color: blue;
}
<h1>This is my heading.</h1>
This is my heading.

16. Inheritance
 Inheritance also needs to be understood in this context — some CSS property values set on parent
elements are inherited by their child elements, and some aren't.
 For example, if you set a color and font-family on an element, every element inside it will also be
styled with that color and font, unless you've applied different color and font values directly to
them.
22
Regulation: 2017 Academic Year: 2019-2020
 Example
body {
color: blue;
}

span {
color: black;
}
<p>As the body has been set to have a color of blue this is inherited through the descendants.</p>
<p>We can change the color by targeting the element with a selector, such as this
<span>span</span>.</p>

As the body has been set to have a color of blue this is inherited through the descendants.
We can change the color by targeting the element with a selector, such as this span.
17. Backgrounds
Background properties of an elements are :
 The background-color property is used to set the background color of an element.
 The background-image property is used to set the background image of an element.
 The background-repeat property is used to control the repetition of an image in the
background.
 The background-position property is used to control the position of an image in the
background.
 The background-attachment property is used to control the scrolling of an image in the
background.
 The background property is used as a shorthand to specify a number of other background
properties.
Set the Background Color
<html>
<head>
</head>

<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>
Set the Background Image
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>

23
Regulation: 2017 Academic Year: 2019-2020
<body>
<h1>Hello World!</h1>
</body>
<html>
18. Border Image
CSS Border image property is used to add image boarder to some elements. Don't need to use any
HTML code to call boarder image. Sample syntax of boarder image is as follows
#borderimg {
border: 10px solid transparent;
padding: 15px;
}
S.No. Value & Description
1 border-image-source - Used to set the image path
2 border-image-slice- Used to slice the boarder image
3 border-image-width- Used to set the boarder image width
4 border-image-repeat- Used to set the boarder image as rounded, repeated and stretched
19. Shadows
CSS3 supported to add shadow to text or elements. Shadow property has divided as follows −
 Text shadow- add shadow effects to text
 Box Shadow - add shadow effects to elements
20. Text
CSS3 contained several extra features are:
 text-overflow
 word-wrap
 word-break
Value Description
text-align-last Used to align the last line of the text
text-emphasis Used to emphasis text and color
text-overflow used to determines how overflowed content that is not displayed is
signaled to users
word-break Used to break the line based on word
word-wrap Used to break the line and wrap onto next line

21. Transformations
 2D Transforms
 3D Transforms

21.1 2D Transforms
2D transforms are used to re-change the element structure as translate, rotate, scale, and skew.
The following table has contained common values which are used in 2D transforms
Value Description
matrix(n,n,n,n,n,n) Used to defines matrix transforms with six values
translate(x,y) Used to transforms the element along with x-axis and y-axis
translateX(n) Used to transforms the element along with x-axis
translateY(n) Used to transforms the element along with y-axis
scale(x,y) Used to change the width and height of element
scaleX(n) Used to change the width of element
24
Regulation: 2017 Academic Year: 2019-2020
scaleY(n) Used to change the height of element
rotate(angle) Used to rotate the element based on an angle
skewX(angle) Used to defines skew transforms along with x axis
skewY(angle) Used to defines skew transforms along with y axis

21.2 3D Transforms
Using with 3d transforms, we can move element to x-axis, y-axis and z-axis, Below example clearly
specifies how the element will rotate.

Methods of 3D transform:
Sr.No. Value & Description
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)-Used to transforms the element by using 16
1
values of matrix
2 translate3d(x,y,z)-Used to transforms the element by using x-axis,y-axis and z-axis
3 translateX(x)-Used to transforms the element by using x-axis
4 translateY(y)-Used to transforms the element by using y-axis
5 translateZ(z)-Used to transforms the element by using y-axis
6 scaleX(x)-Used to scale transforms the element by using x-axis
7 scaleY(y)-Used to scale transforms the element by using y-axis
8 scaleY(y)-Used to transforms the element by using z-axis
9 rotateX(angle)- Used to rotate transforms the element by using x-axis
10 rotateY(angle)-Used to rotate transforms the element by using y-axis
11 rotateZ(angle)-Used to rotate transforms the element by using z-axis

22. Animations
 Animation is process of making shape changes and creating motions with elements.
@keyframes
 Keyframes will control the intermediate animation steps in CSS3.
Example of key frames with left animation –
@keyframes animation {
from {background-color: pink;}
to {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: animation;
animation-duration: 5s;
}
The above example shows height, width, color, name and duration of animation with
keyframes syntax.

25