Team Code: 9cs20u5

Vidyalankar Institute of Technology

Orientation Program: Academic Year 2022-2023
Subject: Internet Programming CSDO501
Semester: V

Subject Teacher
Prof. Amit Aylani

08/09/2023 1
08/09/2023 2
Course Objectives:
1  To get familiar with the basics of Internet Programming.
2  To acquire knowledge and skills for creation of web site considering both client and
server- side programming
3  To gain ability to develop responsive web applications
4  To explore different web extensions and web services standards
5  To learn characteristics of RIA
6  To learn React js

08/09/2023 3
What We learn in this course?

Module-01: Web programming fundamentals

Module-02: Front End Development
Module-03: Back End Development
Module-04: Rich Internet Application (RIA)
Module-05: Web Extension: PHP and XML
Module-06: React js

08/09/2023 4
Module-01:Web programming fundamentals

• Clients, Server & Communication

• Internet Protocol
• HTML5
• CSS3

08/09/2023 5
Module-02: Front End Development

• Java Script
• DOM
• Validation

08/09/2023 6
Module-03: Back End Development

• Servlets-GET & POST

• Database Connectivity
• JSP

08/09/2023 7
Module-04: Rich Internet Application (RIA)

• RIA
• AJAX
• JQuery

08/09/2023 8
Module-05: Web Extension: PHP and XML

• XML
• PHP

08/09/2023 9
Module-06: React Js

• JSX –JavaScript extension

• React Feature

08/09/2023 10
 Course Outcome

•Implement interactive web page(s) using HTML and

CSS.
•Design a responsive web site using JavaScript
•Demonstrate database connectivity using JDBC
•Demonstrate Rich Internet Application using Ajax
•Demonstrate and differentiate various Web
Extensions.
•Demonstrate web application using Reactive Js

08/09/2023 11
Career
• Front-end developer.
• Full-stack engineer.
• Back-end developer.

08/09/2023 12
Course Planning
1. Assignment based on scenario based. Evaluation after completion
of module.
2. Mini Project with group (min. 3-5)
3. Quiz module-wise on Kahoot
4. Complete a web development course (HTML-CSS, JS, React JS etc)
on well known portal like coursera, Udmey, Edex etc.
5. All the ppt will be upload on teams->file section-> PPTs
6. Previous year discussion in the classroom.
7. Guest Lecture by industry expert on React js
8. Participate Coding competition min. 2-3 times.
08/09/2023 13
Syllabus
Module-01:Introduction to web Technology

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 – fundamental syntax and semantics, 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, Animation, Basics of Bootstrap.
08/09/2023 14
Clients, Servers and Communication

• Client/Server communication involves two

components, namely a client and a server.
• They are usually multiple clients in
communication with a single server.
• The clients send requests to the server and
the server responds to the client requests.

08/09/2023 15
08/09/2023 16
The Internet

• The internet is the world’s largest

IP-based network. It is an
amorphous group of computers in
many different countries on all
seven continents that talk to each
other using the IP protocol.

08/09/2023 17
Protocol

• A protocol is a precise set of rules

defining how components
communicate, the format of addresses,
how data is split into packets

08/09/2023 18
Internet Protocols
• Communication protocol: how computers talk.
• Internet protocols developed as part of ARPANET research ARPANET
began using TCP/IP.
• IP is the fundamental protocol defining the Internet.
• IP address: 32-bit number (in IPv4)
• Associated with at most one device at a time (although device may
have more than one)
• Written as four dot-separated bytes, e.g. 192.0.34.166

08/09/2023 19
List out the basic Internet Protocols.
HTTP - Hypertext Transfer Protocol
SMTP - Simple Mail Transfer Protocol
MIME – Multimedia Internet Message Extension Protocol
IMAP – Internet Message Access Protocol

08/09/2023 20
World Wide Web
• Invented by Tim Berners-Lee
• World Wide Web, which is also known as a Web, is a
collection of websites or web pages stored in web
servers and connected to local computers through the
internet.
• Users can access the content of these sites from any
part of the world over the internet using their devices
such as computers, laptops, cell phones, etc.
• The WWW, along with internet, enables the retrieval
and display of text and media to your device

08/09/2023 21
HTTP Protocol
• HTTP is a form of stateless communication protocol which
gives a detailed specification of how web client and server
should communicate, and the basic structure followed is
known as Request-Response model

08/09/2023 22
HTTP Request message
• An HTTP client sends an HTTP request to a server in the form of a
request message which includes following format
1. Request-line
2. Header
3. message-body
• The GET method is used to retrieve information from the given server
using a given URI. Requests using GET should only retrieve data and
should have no other effect on the data.
• Head: Same as GET, but it transfers the status line and the header
section only.

08/09/2023 23
• POST request is used to send data to the server, for example,
customer information, file upload, etc. using HTML forms.
• PUT: Replaces all the current representations of the target resource
with the uploaded content.

08/09/2023 24
HTTP - Responses
• After receiving and interpreting a request message, a server responds
with an HTTP response message:
1. Status line
2. Header
3. Message body

08/09/2023 25
Web Server
• Web server is a computer where
the web content is stored.
Basically, web server is used to
host the web sites but there exists
other web servers also such as
gaming, storage, FTP, email etc.
• Web server respond to the client
request in either of the following
two ways:
1. Sending the file to the client
associated with the requested URL.
2. Generating response by invoking
a script and communicating with
database
08/09/2023 26
• When client sends request for a web page, the web server search for
the requested page if requested page is found then it will send it to
client with an HTTP response.
• If the requested web page is not found, web server will the send
an HTTP response: Error 404 Not found.
• If client has requested for some other resources, then the web server
will contact to the application server and data store to construct the
HTTP response.

08/09/2023 27
Web Client

• The client side (user side) of

the Web. A Web client
typically refers to the Web
browser in the user's
machine or mobile device. It
may also refer to extensions
and helper applications that
enhance the browser to
support special services from
the site.

08/09/2023 28
HTML 5
• Specify the HTML5 DOCTYPE at the very beginning of your page.

<!DOCTYPE html>
<html>
<head>
<title>HTML5, for Fun &amp; Profit</title>
</head>
<body>
</body>
</html>
08/09/2023 29
• Define the character encoding of your web page.

<meta charset="UTF-8" />

Empty elements: Line break, continue displaying content on the next

line.
<br />

08/09/2023 30
HTML Table
• <table> tag defines an HTML table. <table style="width:100%">
  <tr>
• Each table row is defined with a <tr> tag.     <th>Firstname</th>
Each table header is defined with     <th>Lastname</th>
    <th>Age</th>
a <th> tag. Each table data/cell is defined   </tr>
with a <td> tag.   <tr>
    <td>Jill</td>
• By default, the text in <th> elements are     <td>Smith</td>
bold and centered.     <td>50</td>
  </tr>
• By default, the text in <td> elements are   <tr>
    <td>Eve</td>
regular and left-aligned.     <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

08/09/2023 31
 <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>
</table>

08/09/2023 32
List in HTML
• 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:
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

08/09/2023 33
• An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
• <ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

08/09/2023 34
HTML Image
• Images can improve the design and the appearance of a web page.
• The HTML <img> tag is used to embed an image in a web page.
• The <img> tag has two required attributes:
1. src - Specifies the path to the image
2. alt - Specifies an alternate text for the image
<img src="url" alt="alternatetext">
Eg: <img src="img_abc.jpg" alt="Flowers">

08/09/2023 35
• <input type="radio"> defines a radio button.
• <input type="checkbox"> defines a checkbox.
--------- <label for="vehicle1"> I have a bike</label>

08/09/2023 36
 1. Forms in HTML
• HTML5 has introduced additional form controls which can also be
used for validation purpose. New input types are:
1. <input type="color"> is used for input fields that should contain a
color.

08/09/2023 37
2. <input type="number"> : Defines a field for entering a number
You can also set restrictions on what numbers are accepted

3. <input type="url"> : is used for input fields that should contain a URL
address.
Depending on browser support, the URL field can be automatically validated
when submitted. Some smartphones recognize the URL type and adds ".com"
to the keyboard to match URL input.

4. <input type="image"> : defines an image as a submit button. The path to the

image is specified in src attribute.

08/09/2023 38
5. <input type="date"> Defines a date picker with the year, month and day

6. <input type="email"> : is used for input fields that should contain an e-

mail address. Depending on browser support, the e-mail address can be
automatically validated when submitted. Some smartphones recognize
the email type and add ".com" to the keyboard to match email input

08/09/2023 39
7. <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field

8. <input type=”range"> defines a control for entering a number whose exact

value is not important (like a slider control). Default range is 0 to 100.
However, you can set restrictions on what numbers are accepted with
the min, max, and step attributes
 <input type="range” min="0" max=”100">

08/09/2023 40
9. <input type="datetime-local">: Specifies a date and time input field
depending on browser support, a date picker can show up in the input field.

10. <input type="time"> : allows the user to select time

08/09/2023 41
11. <input type="week"> : allows the user to select a week and year

12. <input type="search"> : used for search field (a search field behaves like a
regular text field)

08/09/2023 42
 13. <input type="file"> : defines a file select field and a “Browse” button for
file uploads.

14. <input type="tel"> : is used for input fields that should contain a
telephone number.

08/09/2023 43
<Audio >Tag
• The <audio> element enables you to embed(or add) audio files on
Webpages.
Declare the audio tag, and specify the source attribute with the Audio
file location.
Syntax :
• <audio src="sample.mp3" type="audio/ mpeg" controls>
</audio>

08/09/2023 44
<video>Tag
• The HTML <video> tag is used to embed video into your web page, it
has several video sources.
• There are three different formats that are commonly supported by
web browsers – .mp4, .Ogg and .WebM.
Syntax :
<video src="URL" controls></video>

08/09/2023 45
Tags
<area>: <hr>
<article> :
<bgsound>
<blink>:
<caption>
<dd>
<b>
<i>
<u>
<frame>
08/09/2023 46
CSS
• Inline, embedded and external style sheets – Rule cascading,
Inheritance, Backgrounds, Border Images, Colors, Shadows, Text,
Transformations, Transitions, Animation, Basics of Bootstrap

08/09/2023 47
CSS
• 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

08/09/2023 48
CSS Syntax
A CSS rule set contains:
• a selector and
• a declaration block

Selector : Selector indicates the HTML element you want to style. It could be any tag like <h1>, <body> etc.
Declaration Block : The declaration block can contain one or more declarations separated by a semicolon.
For the above example, there are two declarations:
1. color : yellow;
2. font-size :11 px;
Each declaration contains a property name and value, separated by a colon.
Property : A Property is a type of attribute of HTML element. It could be color, border etc.
Value : Values are assigned to CSS properties. In the above example, value "yellow" is assigned to color property.
• Selector{Property1: value1; Property2: value2}

08/09/2023 49
 Types of CSS
There are three methods of implementing styling information to
an HTML document.
1. Inline CSS
2. Embedded stylesheet or Internal CSS
3. External CSS

1. Inline stylesheet : It uses the style attribute in the HTML start

tag. Inline CSS is used to apply CSS on a single line or element.
Eg: <p style="color:blue">Hello CSS</p>

08/09/2023 50
2. Embedded stylesheet or internal CSS : This is used to apply CSS
on a single document or page. It can affect all the elements of the
page. It is written inside the style tag within head section of html.
<!DOCTYPE html> <html>
<head>
<style>
h1{color: Red;}
</style></head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected. </p>
</body>
</html>

08/09/2023 51
08/09/2023 52
08/09/2023 53
 3. External stylesheet : The external style sheet is generally used
when you want to make changes on multiple pages.
It facilitates to change the look of the entire web site by changing
just one file. It uses the <link> tag on every page and the <link>
tag should be put inside the head section.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a heading</h1> </body></html>

08/09/2023 54
CSS Id Selector :
The Id selector selects the id attribute of an HTML element to
select a specific element. An id is always unique within the page,
so it is unique element. It is written with the hash character(#),
followed by the id name.
<!DOCTYPE html>
<html>
<head>
<style>
#para1{text-align: center; color: blue} </style>
</head>
<body>
<p id="para1">Hello Students</p> <p>This paragraph will not be
affected.</p>
</body>
</html>
08/09/2023 55
CSS Class Selector
• The class selector selects HTML elements with a specific class attribute. It is used
with a period character '.' (full stop symbol) followed by the class name. The Class
selector is used when you want to change a group of elements within your HTML
page. The class name should not start with number.
<!DOCTYPE html>
<html>
<head>
<style> .intro{text-align:center;color:blue} </style></head>
<body>
<h1 class="intro">This heading is blue and center-aligned.</h1>
<p class="intro">This paragraph is blue and center-aligned.</p>
</body>
</html>

08/09/2023 56
 • Class Selector for specific element
• To specify only one specific HTML element should be affected then you
should use the element name with class selector.
<!DOCTYPE html>
<html><head><style>
p.intro {text-align: center;color: blue}
</style></head>
<body>
<h1 class="intro">This heading is not affected</h1>
<p class="intro">This paragraph is blue and center-aligned.</p>
</body>
</html>

08/09/2023 57
Universal Selector
• The universal selector is used as a wildcard character. It selects
all the elements on the Webpages.
<!DOCTYPE html> <html><head><style>
* { color: green; font-size: 20px;} </style></head>
<body>
This css style will be applied on Entire page.It does not check tag
or plain text<br>
<h2>This css is applied to heading </h2>
<p id="para1">it is applied to first paragaraph</p>
<p>Also to second paragraph !</p> </body>
</html>

08/09/2023 58
Group Selector:
• The grouping selector is used to select all the elements with the same style
definitions. It is used to minimize the code. Commas are used to separate
each selector in grouping. Let's see the CSS code without group selector.
h1{ text-align:center;color:blue}
h2{ text-align:center;color:blue}
p {text-align:center;color:blue}
you need to define CSS properties for all the elements. It can be grouped as-
h1,h2,p{ text-align:center;color:blue}

08/09/2023 59
 <!DOCTYPE html>
<html>
<head>
<style>
h1,h2,p{text-align: center; color: blue} </style>
</head>
<body>
<h1>Hello Heading 1</h1> <h2>Hello Heading 2 (In smaller
font)</h2>
<p>This is a paragraph.</p>
</body>
</html>

08/09/2023 60
• Positioning in CSS
• CSS helps to position the HTML elements. The position property
is used to set position for an element. The element can be
positioned using the top, bottom, left and right properties.
Syntax :
• Selector{position:value;top:value;
left:value:bottom:value;right:value}
Where values in positions are fixed, absolute, relative and values
of top, bottom, left, right are in pixels

08/09/2023 61
 • There are four types of positioning in CSS
1. Static Positioning : This is a by- default position for HTML elements. It is not
affected by the top, bottom, left and right properties.
2. Fixed Positioning : This property helps to put the text fixed on the browser.
The FIXED property forces an element into a fixed position relative to the
browser window. The fixed element will not move, even when the page is
scrolled.
3. Relative Positioning : The relative positioning property is used to set the
element relative to its normal position.
4. Absolute Positioning : This property sets an element in a specific location
and it is not affected by the flow of the page. This property positions the
element at the specified coordinates relative to your screen top-left corner.

08/09/2023 62
<!DOCTYPE html> <html><head><style> p.fixed{position: fixed;
top: 50px; right: 5px; color: blue}
</style></head>
<body>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<p class="fixed">This is the fix positioned text.</p>
</body>
</html>

08/09/2023 63
 <!DOCTYPE html>
<html><head>
<style>
.first{position: relative;top: -10px; right: -10px;}
h2{position: absolute; left:100px;top:150px}
</style>
<body>
<h1 class="first">This is heading 1 </h1>
<h2>This is heading 2</h2>
</body>
</html>

08/09/2023 64
• Float Property
Float is a CSS property written in CSS file or directly in the style of
an element. The float property defines the flow of content.
Following are the types of floating properties :
1. float : left : This keeps the element float on left side of the
container
2. float : right : This keeps the element float on right side of
container
3. float : none : This is default property i.e. this shows the
element as it is.

08/09/2023 65
 <!DOCTYPE html>
<html><head>
<title>Float Example</title></head> <style>
.float-left{float:left;font- size:20px;background-color:gold}
.float-right{float: right; font-size:20px;background-color:gold} </style>
<h2 class="float-left">Balbharati </h2>
<p>This text rearranges itself to flow around the element that is
floated left.
</p>
<h2 class="float-right">Balbharati </h2>
<p>This text rearranges itself to flow around the element that is
floated right. </p>
</body></html>

08/09/2023 66
• Display property
• The Display property in CSS defines how the components (div, hyperlink, heading,
etc) are going to be placed on the web page. It specifies how the element is
displayed. As the name suggests, this property is used to define the display of
different parts of a web page.
Syntax :
Display : value;
Where values are :
Inline : It is used to display an element as an inline element.
Block : It is used to display an element as an block element. It starts on a new line,
and takes up the whole width of the browser window.
Block-inline : This value is very similar to inline element but the difference is that you
are able to set the width and height.
None : The element is completely removed.

08/09/2023 67
 Example
<!DOCTYPE html> <html>
<head>
<style>
p{
display: inline;
}
</style>
</head>
<body>
<p>welcome to balbharti</p>
<p>Javascript</p>
<p>HTML5</p>
<p>CSS</p>
</body></html>

08/09/2023 68
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS display</title> <style type="text/css">
a{
display : block; background-color:orange;
} </style>
</head>
<body>
<p>
<a href="https://www.ebalbharti.in" > Visit balbharti</a>
<br> </p>
</body> </html>

08/09/2023 69
Inheritance
• In CSS, inheritance controls what happens when no value is specified
for a property on an element. CSS properties can be categorized in
two types:
• inherited properties, which by default are set to the computed
value of the parent element
• non-inherited properties, which by default are set to initial value of
the property.

08/09/2023 70
Inherited properties
• When no value for an inherited property has been specified on an element,
the element gets the computed value of that property on its parent
element. Only the root element of the document gets the initial value given
in the property's summary.
• p { color: green; }
• <p>This paragraph has <em>emphasized text</em> in it.</p>
words "emphasized text" will appear green, since the em element has
inherited the value of the color property from the p element. It does not get
the initial value of the property (which is the color that is used for the root
element when the page specifies no color).

08/09/2023 71
CSS background-color
body {
  background-color: lightblue;
}

You can set the background color for any HTML elements:

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

08/09/2023 72
CSS border image
• The border-image property allows you to specify an image to be used
as the border around an element.
#borderimg {
  border-image: url(border.png) 30 round;
} Click to add text

08/09/2023 73
CSS Text Color
• <h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Background color
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

08/09/2023 74
CSS Text Shadow Effects
• The CSS text-shadow property applies shadow to text.
• In its simplest use, you only specify the horizontal shadow (2px) and the vertical
shadow (2px):
h1 {
  text-shadow: 2px 2px;
}
h1 {
  text-shadow: 2px 2px red;
}
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
08/09/2023 75
CSS Box shadow
• The box-shadow property attaches one or more shadows to an
element. Add shadows to different <div> elements:
#example1 {
  box-shadow: 5px 10px;
}

#example2 {
  box-shadow: 5px 10px #888888;
}

08/09/2023 76
Animation in css
• /* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
08/09/2023 77