MANGALORE UNIVERSITY

National Education Policy – 2020(NEP-2020)

III SEMESTER BCA

C# and Dot Net Framework

21BCA3C8L

STUDY MATERIALS FOR UNIT-I

Introduction to .NET Technologies
 Introduction to Web Technology
Web Technology refers to the various tools and techniques that are utilized in the process of
communication between different types of devices over the internet. A web browser is used to access
web pages. Web browsers can be defined as programs that display text, data, pictures, animation,
and video on the Internet. Hyperlinked resources on the World Wide Web can be accessed using
software interfaces provided by Web browsers.
Web Technology can be classified into the following sections:
World Wide Web (WWW): The World Wide Web is based on several different technologies: Web
browsers, Hypertext Markup Language (HTML) and Hypertext Transfer Protocol (HTTP).
Web Browser: The web browser is an application software to explore www (World Wide Web). It
provides an interface between the server and the client and requests to the server for web documents
and services.
Web Server: Web server is a program which processes the network requests of the users and serves
them with files that create web pages. This exchange takes place using Hypertext Transfer Protocol
(HTTP).
Web Pages: A webpage is a digital document that is linked to the World Wide Web and viewable
by anyone connected to the internet has a web browser.
Web Development: Web development refers to the building, creating, and maintaining of websites.
It includes aspects such as web design, web publishing, web programming, and database
management. It is the creation of an application that works over the internet i.e. websites.
Web Development can be classified into two ways:
• Frontend Development: The part of a website that the user interacts directly is termed as front
end. It is also referred to as the ‘client side’ of the application.
• Backend Development: Backend is the server side of a website. It is the part of the website
that users cannot see and interact. It is the portion of software that does not come in direct
contact with the users. It is used to store and arrange data.

Page 2 of 23
Frontend Languages: The front end portion is built by using some languages which are discussed
below:
• HTML: HTML stands for Hypertext Markup Language. It is used to design the front-end
portion of web pages using a markup language. HTML is the combination of Hypertext and
Markup language. Hypertext defines the link between the web pages. The markup language
is used to define the text documentation within the tag which defines the structure of web
pages.
• CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language
intended to simplify the process of making web pages presentable. CSS allows you to apply
styles to web pages. More importantly, CSS enables you to do this independent of the HTML
that makes up each web page.
• JavaScript: JavaScript is a famous scripting language used to create magic on the sites to
make the site interactive for the user. It is used to enhancing the functionality of a website to
running cool games and web-based software.
• AJAX: Ajax is an acronym for Asynchronous Javascript and XML. It is used to communicate
with the server without refreshing the web page and thus increasing the user experience and
better performance.

Backend Languages: The back end portion is built by using some languages which are discussed
below:
• PHP: PHP is a server-side scripting language designed specifically for web development.
Since PHP code executed on the server-side, so it is called a server-side scripting language.
• Node.js: Node.js is an open-source and cross-platform runtime environment for executing
JavaScript code outside a browser. You need to remember that NodeJS is not a framework,
and it’s not a programming language. Most people are confused and understand it’s a
framework or a programming language. We often use Node.js for building back-end services
like APIs like Web App or Mobile App. It’s used in production by large companies such as
Paypal, Uber, Netflix, Wallmart, and so on.

Page 3 of 23
• Python: Python is a programming language that lets you work quickly and integrate systems
more efficiently.
• Ruby: Ruby is a dynamic, reflective, object-oriented, general-purpose programming
language. Ruby is a pure Object-Oriented language developed by Yukihiro Matsumoto.
Everything in Ruby is an object except the blocks but there are replacements too for it i.e
procs and lambda. The objective of Ruby’s development was to make it act as a sensible buffer
between human programmers and the underlying computing machinery.
• Java: Java is one of the most popular and widely used programming languages and platforms.
It is highly scalable. Java components are easily available.
• JavaScript: JavaScript can be used as both (front end and back end) programming.
• Golang: Golang is a procedural and statically typed programming language having the syntax
similar to C programming language. Sometimes it is termed as Go Programming Language.
• C# :C# is a general-purpose, modern and object-oriented programming language pronounced
as “C sharp”.
• DBMS: The software which is used to manage database is called Database Management
System (DBMS).
Data Format: Format of data is used by web applications to communicate with each other. It is light
weight text based data interchange format which means, it is simpler to read and write.
Below are two common data formats used in web development:
• XML: Extensible Markup Language (XML) is a markup language that defines a set of rules
for encoding documents in a format that is both human-readable and machine-readable.
• JSON: JSON or JavaScript Object Notation is a format for structuring data.

API: API is an abbreviation for Application Programming Interface which is a collection of

communication protocols and subroutines used by various programs to communicate between them.

Web Protocols: Web protocols are set of rules followed by everyone communicating over the web.
• HTTP: The Hypertext Transfer Protocol (HTTP) is designed to enable communications
between clients and servers. HTTP works as a request-response protocol between a client and
server. A web browser may be the client, and an application on a computer that hosts a web
site may be the server.
• Other Protocols:
• TCP/IP Model
• UDP
• FTP
• SMTP
• SOAP
Graphics: Graphical elements are one of the key feature of any webpage. They can be used to
convey important points better than text does and beautify the webpage.
• Canvas: The HTML “canvas” element is used to draw graphics via JavaScript.
• SVG: SVG stands for Scalable Vector Graphics. It basically defines vector-based graphics in
XML format.

Page 4 of 23
 HTML Basics

What is HTML?

• HTML stands for Hyper Text Markup Language

• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Some HTML elements have no content (like the <br> element). These elements are called empty
elements. Empty elements do not have an end tag.

HTML Page Structure

Below is a visualization of an HTML page structure:

Page 5 of 23
 <!DOCTYPE html>: This is the document type declaration (not technically a tag). It declares
a document as being an HTML document. The doctype declaration is not case-sensitive.
<html>: This is called the HTML root element. All other elements are contained within it.
<head>: The head tag contains the “behind the scenes” elements for a webpage. Elements within
the head aren’t visible on the front-end of a webpage. HTML elements used inside the <head>
element include:
• <style>-This html tag allows us to insert styling into our webpages and make them appealing
to look at with the help of CSS.
• <title>-The title is what is displayed on the top of your browser when you visit a website and
contains title of the webpage that you are viewing.
• <base>-It specifies the base URL for all relative URL’s in a document.
• <noscript>– Defines a section of HTML that is inserted when the scripting has been turned
off in the users browser.
• <script>-This tag is used to add functionality in the website with the help of JavaScript.
• <meta>-This tag encloses the meta data of the website that must be loaded every time the
website is visited. For eg:- the metadata charset allows you to use the standard UTF-8
encoding in your website. This in turn allows the users to view your webpage in the language
of their choice. It is a self closing tag.
• <link>– The ‘link’ tag is used to tie together HTML, CSS and JavaScript. It is self closing.
<body>: The body tag is used to enclose all the visible content of a webpage. In other words,
the body content is what the browser will show on the front-end.

An HTML document can be created using any text editor. Save the text file using .html or .htm.
Once saved as an HTML document, the file can be opened as a webpage in the browser.

HTML Tags

The things wrapped in triangular braces (the < … > characters) are called tags. These are the most
important part of HTML markup that is used to describe the structure of content. There are
both opening tags and closing tags (or starting tags and ending tags) which come in pairs to
enclose pieces of content.

Structure of an HTML tag

There are two types of tags in HTML that are:

1. Paired Tags (Opening and Closing Tags)

2. Unpaired Tags (Singular Tag)

Page 6 of 23
Paired Tags - Opening and Closing Tags
Paired tags are a set of two tags with the same name. In each Paired tag set, one is an opening tag,
and the other one is the closing tag. The closing tag has a / slash, it means that the tag is closed
now.

It is necessary to close a paired tag; otherwise, it can result in the malfunctioning of the website.
When the content is written within paired tags, then it ensures that the effect of those tags would
be limited to only the content between them.

Look at the list of some paired tags in HTML below. Notice that each tag has a closing tag with a
slash(/) before the name of the tag.

Syntax: <tag> Content </tag>

Unpaired Tags - Singular Tags

Unpaired tags are single tags with no closing tag. These tags are also called Singular Tags. These
are also called non-container tags because they do not contain any content.

It is recommended to close the unpaired/singular tags also. But unfortunately, we do not have the
closing tag for those. So, an unpaired tag is closed after adding a slash(/) just before the greater
than > sign. For example: <br />.

Important HTML tags:

<body> Tag

The <body> tag in HTML is used to define the main content present inside an HTML page. It is
always enclosed within <html>tag. The <body> tag is the last child of <html> tag. A body tag
contains starting as well as an ending tag.
Syntax:
<body> Body Contents... </body>
Attributes: There are many attributes in the <body> tag which are depreciated from HTML5
are listed below:
• background: It contains the URL of the background image. It is used to set the background
image.
• bgcolor: It is used to specify the background color of an image.
• alink: It is used to specify the color of the active link.
• link: It is used to specify the color of visited links.
• text: It specifies the color of the text in a document.
• vlink: It specifies the color of visited links.
• onLoad: Name of the function to call when document has finished loading.
Note: Many of these attributes are deprecated in HTML5 we must use CSS properties instead.

Page 7 of 23
Paragraph or <p> tag:
The <p> tag in HTML defines a paragraph. These have both opening and closing tags. So
anything mentioned within <p> and </p> is treated as a paragraph. Most browsers read a line as
a paragraph even if we don’t use the closing tag i.e, </p>, but this may raise unexpected results.
So, it is both a good convention, and we must use the closing tag.
Syntax:
<p> Content </p>
HTML Heading tags

A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display
on the webpage. When you place the text within the heading tags <h1>.........</h1>, it is displayed
on the browser in the bold format and size of the text depends on the number of heading.

There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest
level h1 (main heading) to the least level h6 (least important heading).

h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading
and h6 is used for least important.

Headings in HTML helps the search engine to understand and index the structure of web
page.

The following code shows all the heading levels, in use.

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Here is the result of this code:

Page 8 of 23
HTML text formatting tags:

1) Bold Text

HTML<b> and <strong> formatting elements

The HTML <b> element is a physical tag which display text in bold font, without any logical
importance. If you write anything within <b>............</b> element, is shown in bold letters.
Example:
<p> <b> This is bold text.</b></p>
Output:
This is bold text.
The HTML <strong> tag is a logical tag, which displays the content in bold font and informs the
browser about its logical importance. If you write anything between <strong>???????. </strong>,
is shown important text.
example:
<p><strong>This is an important content</strong>, and this is normal content</p>
Output:
This is an important content, and this is normal content

2) Italic Text

HTML <i> and <em> formatting elements

The HTML <i> element is physical element, which display the enclosed content in italic font,
without any added importance. If you write anything within <i>............</i> element, is shown in
italic letters.
Example:
<p> <i>This is italic text.</i></p>
Output:
This is italic text.
The HTML <em> tag is a logical element, which will display the enclosed content in italic font,
with added semantics importance.
Example:
<p><em>This is an important content</em>, which displayed in italic font.</p>
Output:
This is an important content, which displayed in italic font.
3) HTML Marked formatting
If you want to mark or highlight a text, you should write the content within <mark>.........</mark>.
Example:
<h2> I want to put a <mark> Mark</mark> on your face</h2>
Output:
I want to put a Mark on your face
4) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.
See this example:

Page 9 of 23
<p> <u>This is underlined text.</u></p>
Output:
This is underlined text.

5) Strike Text
Anything written within <strike>.......................</strike> element is displayed with strikethrough.
It is a thin line which cross the statement.
Example:
<p> <strike>Text with strikethrough</strike>.</p>
Output:
Text with strikethrough
6) Superscript Text
If you put the content within ^{..............} element, is shown in superscript; means it is
displayed half a character's height above the other characters.
Example:
<p>x² +y²</p>
Output:
X2+y2

7) Subscript Text

If you put the content within _{..............} element, is shown in subscript ; means it is
displayed half a character's height below the other characters.

Example:
<p>H₂ O </p>
Output:
H2O

HTML <DIV> Tag:

The div tag is known as Division tag. The div tag is used in HTML to make divisions of content
in the web page like (text, images, header, footer, navigation bar, etc). Div tag has both
open(<div>) and closing (</div>) tag and it is mandatory to close the tag. The Div is the most
usable tag in web development because it helps us to separate out data in the web page and we
can create a particular section for particular data or function in the web pages.
• Div tag is Block level tag
• It is a generic container tag
• It is used to the group of various tags of HTML so that sections can be created and style can
be applied to them.
Example:

<html>
<head>
<title>gfg</title>
<style type=text/css>

Page 10 of 23
 p{
background-color:gray;
margin: 10px;
}

div
{
color: white;
background-color: 009900;
margin: 2px;
font-size: 25px;
}
</style>

</head>

<body>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>

</body>
</html>

Output:

HTML Table

HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of <tr>
, <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is
defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body
content, footer section etc. But it is recommended to use div tag over table to manage the layout
of the page .

HTML Table Tags

Page 11 of 23
 Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.

Example:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>

<h2>A basic HTML table</h2>

<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Infosys</td>
<td>Narayn Murthy</td>
<td>India</td>
</tr>
<tr>
<td>Google</td>
<td>Sundar Pichai</td>
<td>United States</td>
</tr>
</table>

<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>

Page 12 of 23
 Output:

HTML Table – Rowspan

To make a cell span over multiple rows, use the rowspan attribute: The value of
the rowspan attribute represents the number of rows to span.
Example:
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
Output:

HTML Table – Colspan

To make a cell span over multiple columns, use the colspan attribute. The value of
the colspan attribute represents the number of columns to span
Example:
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>

Page 13 of 23
 <td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
Output:

HTML <a> Tag

The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.
Example: <a href="https://www.google.co.in">Visit Google<a>
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
Attributes
Attribute Value Description

download filename Specifies that the target will be downloaded when a user clicks on
the hyperlink
href URL Specifies the URL of the page the link goes to
target _blank Specifies where to open the linked document
_parent
_self
_top
type media_type Specifies the media type of the linked document

HTML <img> tag:

HTML <img> tag is used to add image inside webpage/website. Nowadays website does not
directly add images to a web page, as the images are linked to web pages by using the <img>
tag which holds space for the image.

Page 14 of 23
Syntax:

<img src="" alt="" width="" height="">

Attributes: The <img> tag has following attributes.
• src: It is used to specify the path to the image.
• alt: It is used to specify an alternate text for the image. It is useful as it informs the user about
what the image means and also due to any network issue if the image cannot be displayed
then this alternate text will be displayed.
• height: It is used to specify the height of the image.
• width: It is used to specify the width of the image.
• sizes: It is used to specify image sizes for different page layouts.
• srcset: It is used to specify a list of image files to use in different situations.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The img element</h1>

<img src="tiger.jpg" alt="Tiger Face" width="200" height="300">

</body>
</html>

Output:

HTML Lists:
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

Page 15 of 23
HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>

Output:
1. Aries
2. Bingo
3. Leo
4. Oracle
HTML Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list
also. The Unordered list starts with <ul> tag and list items start with the <li> tag.
Example:

<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>

Output:
o Aries
o Bingo
o Leo
o Oracle

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also
known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or other
name-value list.
The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

Page 16 of 23
 Example:
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>

Output:
Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.

Form Tag
Forms are required to take input from the user who visits the website. This form is used basically
for the registration process, logging into your profile on a website or to create your profile on a
website, etc … The information that is collected from the form is -1. Name 2.Email Addresses
etc. Now the form will take input from the form and post that data in backend applications (like
PHP). So the backend application will process the data which is received by them. There are
various form elements that we can use like text fields, text area, drop-down list, select,
checkboxes, radio, etc.
Syntax:
<form> Form Content... </form>
Attributes: There are many attributes that are associated with the <form> tag. Some of them are
listed below:
• Action Attribute: -This is used to send the data to the server after the submission of the form.
• Method: -This is used to upload the data by using two methods that are Get and Post.
1. Get Method: -It has a limited length of characters of URL. -we should not use get
to send some sensitive data. -This method is better for non-secure data.
2. Post Method: -1. It has no size limitations 2. The submission of the form with the
method post, can not be bookmarked.
• Enctype attribute: -This attribute is used to specify that how a browser decodes the data
before it sends it to the server .so the values of this attribute are: -1.application/x-www-form-
urlencoded − It is the standard method most forms used 2.multipart/form-data -it is used when
you have something to upload like files of images, word files, etc.

Page 17 of 23
Example

An HTML form with two input fields and one submit button:
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>

HTML <frame> tag (Not supported in HTML5):

HTML <frame> tag define the particular area within an HTML file where another HTML web
page can be displayed.
A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections or frames,
and each frame can contain different web pages.
Note: Do not use HTML <frame> tag as it is not supported in HTML5, instead you can use
<iframe> or <div> with CSS to achieve similar effects in HTML.

Syntax
< frame src = "URL" >

Example 1:
Create Vertical frames:
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

Output:

Page 18 of 23
Frame1.html

<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #7fffd4;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is first frame</h2>
</div>
</body>
</html>

Frame2.html

<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #2f4f4f;
height: 500px;

}
</style>
</head>
<body>
<div>
<h2>This is Second frame</h2>
</div>
</body>
</html>

Frame3.html

<!DOCTYPE html>
<html>

Page 19 of 23
<head>
<style>
div{
background-color: #c1ffc1;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is Third frame</h2>
</div>
</body>
</html>

Example 2:
Create Horizontal frames:
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset rows="30%, 40%, 30%">
<frame name="top" src="frame1.html" >
<frame name="main" src="frame2.html">
<frame name="bottom" src="frame3.html">
</frameset>
</html>

Output:

Page 20 of 23
Attributes:
Tag-specific attribute
Attribute Value Description
frameborder 0 It specifies whether to display a border around the frame or not, and
1 its default value is 1
longdsec URL It specifies a page which contains the long description of the content
of the frame.
marginheight pixels It specifies the top and bottom margins of the frame.
marginwidth pixels It defines the height of the margin between frames.
name text It is used to assign the name to the frame.
noresize noresize It is used to prevent resizing of the frame by the user.
scrolling yes It specifies the existence of the scrollbar for overflowing content.
no
auto
src URL It specifies the URL of the document which we want to display in a
frame.

Web Scripting and its Types

The process of creating and embedding scripts in a web page is known as web-scripting. A script
or a computer-script is a list of commands that are embedded in a web-page normally and are
interpreted and executed by a certain program or scripting engine.
• Scripts may be written for a variety of purposes such as for automating processes on a local-
computer or to generate web pages.
• The programming languages in which scripts are written are called scripting language, there
are many scripting languages available today.
• Common scripting languages are VBScript, JavaScript, ASP, PHP, PERL, JSP etc.
Types of Script :
Scripts are broadly of following two type :

Client-Side Scripts :
1. Client-side scripting is responsible for interaction within a web page. The client-side scripts
are firstly downloaded at the client-end and then interpreted and executed by the browser
(default browser of the system).

Page 21 of 23
2. The client-side scripting is browser-dependent. i.e., the client-side browser must be scripting
enables in order to run scripts
3. Client-side scripting is used when the client-side interaction is used. Some example uses of
client-side scripting may be :
• To get the data from user’s screen or browser.
• For playing online games.
• Customizing the display of page in browser without reloading or reopening the page.
4. Here are some popular client-side scripting languages VBScript, JavaScript, Hypertext
Processor(PHP).

Server-Side Scripts :
1. Server-side scripting is responsible for the completion or carrying out a task at the server-end
and then sending the result to the client-end.
2. In server-side script, it doesn’t matter which browser is being used at client-end, because the
server does all the work.
3. Server-side scripting is mainly used when the information is sent to a server and to be
processed at the server-end. Some sample uses of server-scripting can be :
• Password Protection.
• Browser Customization (sending information as per the requirements of client-end
browser)
• Form Processing
• Building/Creating and displaying pages created from a database.
• Dynamically editing changing or adding content to a web-page.
4. Here are some popular server-side scripting languages PHP, Perl, ASP (Active Server Pages),
JSP ( Java Server Pages).

Advantages of Client-side scripts:

• Allow for more interactivity by immediately responding to users’ actions.
• Execute quickly because they do not require a trip to the server.
• May improve the usability of Web sites for users whose browsers support scripts.
• Can give developers more control over the look and behaviour of their Web widgets.
• Can be substituted with alternatives (for example, HTML) if users’ browsers do not support
scripts
• Are reusable and obtainable from many free resources.

Disadvantages
• Not all browsers support scripts, therefore, users might experience errors if no alternatives
have been provided.
• Different browsers and browser versions support scripts differently, thus more quality
assurance testing is required.
• More development time and effort might be required (if the scripts are not already available
through other resources).
• Developers have more control over the look and behaviour of their Web widgets; however,
usability problems can arise if a Web widget looks like a standard control but behaves differently
or vice-versa.

Page 22 of 23
Advantages of server-side scripts:
• User can create one template for the entire website
• The site can use a content management system which makes editing simpler.
• Generally quicker to load than client-side scripting
• User is able to include external files to save coding.
• Scripts are hidden from view so it is more secure. Users only see the HTML output.
• User does not need to download plugins like Java or Flash.

Disadvantages:
• Many scripts and content management systems tools require databases in order to store
dynamic data.
• It requires the scripting software to be installed on the server.
• The nature of dynamic scripts creates new security concerns, in some cases making it easier
for hackers to gain access to servers exploiting code flaws.

Content Credits:

1. https://www.geeksforgeeks.org/web-technology/
2. https://www.w3schools.com/html/
3. https://www.tutorialspoint.com/html/index.htm
4. https://www.javatpoint.com/html-tutorial
5. https://developer.mozilla.org/en-US/docs/Web/HTML

Page 23 of 23