C# AND DOT NET

FRAMEWORK
UNIT 1 INTRODUCTION TO .NET
TECHNOLOGIES
Introduction to Web Technologies

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.

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.
There are many other languages through which one can do front-end development depending
upon the framework for example Flutter user Dart, React uses JavaScript and Django uses
Python, and much more.

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.
 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.

HTML Basics

What is HTML ?

HTML stands for HyperText Markup Language. It is used to design web pages using the
markup language. HTML is the combination of Hypertext and Markup language. Hypertext
defines the link between the web pages and markup language defines the text document
within the tag that define the structure of web pages.

What is HTML used for ?

HTML is used to create the structure of web pages that are displayed on the World Wide
Web (www). It contains Tags and Attributes that are used to design the web pages. Also, we
can link multiple pages using Hyperlinks.

HTML Basic Format Page Structure

The basic structure of an HTML page is laid out below. It contains the essential building-
block elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which
all web pages are created.
<DOCTYPE! html> – A doctype or document type declaration is an instruction that tells the
web browser about the markup language in which the current page is written. It is not an
element or tag. The doctype declaration is not case-sensitive.

<html> – This tag is used to define the root element of HTML document. This tag tells the
browser that it is an HTML document. It is the second outer container element that contains
all other elements within it.

<head> – This tag is used to define the head portion of the HTML document that
contains information related to the document. Elements within the head tag are not visible
on the front-end of a webpage.

<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.

Example 1: This example illustrates the HTML basic structure.

<!DOCTYPE html>

<html>

<head>

<!-- Information about the page -->

<!--This is the comment tag-->

<title> HTML basic structure.</title>

</head>

<body>

<!--Contents of the webpage-->

</body>

</html>

HTML Headings:

These tags help us to give headings to the content of a webpage. These tags are mainly
written inside the body tag. HTML provides us with six heading tags from <h1> to <h6>.
Every tag displays the heading in a different style and font size.

Example: This example illustrates the use of 6 heading tags from <h1> to <h6> in HTML.

<html>

<head>

<title>Headings <h1> to <h6></title>

</head>

<body>

<h1>Hello Headings h1</h1>

<h2>Hello Headings h2</h2>

<h3>Hello Headings h3</h3>

<h4>Hello Headings h4</h4>

<h5>Hello Headings h5</h5>

<h6>Hello Headings h6</h6>

</body>

</html>
HTML Paragraph:

These tags help us to write paragraph statements on a webpage. They start with the <p> tag
and ends with </p>.

HTML Break:

These tags are used for inserting a single line type break. It does not have any closing tag. In
HTML the break tag is written as <br>.

Example: This example illustrates the use of the <p> tag for writing a paragraph statement in
HTML.

<html>

<head>

<title>Paragraph Example</title>

</head>

<body>

<h1>Hello GCCW</h1>

<p> A Computer Science portal for geeks<br>

A Computer Science portal for geeks<br>

A Computer Science portal for geeks<br>

</p>

</body>

</html>

HTML Horizontal Line:

The <hr> tag is used to break the page into various parts, creating horizontal margins with
help of a horizontal line running from the left to right-hand side of the page. This is also an
empty tag and doesn’t take any additional statements.

Example: This example illustrates the use of the <hr> tag for the horizontal line in HTML.

<html>

<head>

<title>Horizontal Line Example</title>

</head>
<body>

<h1>Hello GeeksforGeeks</h1>

<p>

A Computer Science portal for geeks<br>

A Computer Science portal for geeks<br>

A Computer Science portal for geeks<br>

</p>

<hr>

<p>

A Computer Science portal for

geeks<br> A Computer Science portal

for geeks<br> A Computer Science

</p> portal for geeks<br>

<hr>

<p>

A Computer Science portal for

geeks<br> A Computer Science portal

</p> for geeks<br> A Computer Science portal

<hr> for geeks<br>

</body>

</html>

HTML Images:

The image tag is used to insert an image into our web page. The source of the image to be
inserted is put inside the <img src=”source_of_image“> tag.
Image can be inserted in the image tag in two formats: –

 If the image is in the same folder, then we can just write the name of the image
and the format as the path.
 If the image is in another folder, then we do need to mention the path of the image
and the image name as well as the format of the image.

Example: This example illustrates the use of the <img> tag for inserting the images in
HTML.

<html>

<head>

<title>Image Example </title>

</head>

<body>

<img src="https://images.unsplash.com/photo-1610447847416-40bac442fbe6" width="50">

</body>

</html>

Core attributes

Core attributes may also be applied across almost the entire range of HTML elements.

Core attributes are

 id
 title
 class
 style
 lang
 dir

id

 The id attribute of an HTML element provides a unique identifier for an element

within the document.
 The value of id attribute must be absolutely unique.
 The id attribute value must begin with an alphabet and followed by any combination
of digit, hyphens (-), underscores (_), colons (:), and periods (.).
 The id value is case sensitive.
 Syntax:
<element id=“value”>
 Example:
<div id=“mnu”>

title

 The title attribute specifies extra information about an element.

 The information is displayed in a tooltip when the mouse pointer is placed over
the element.
 Syntax:
<element title=“text”>
 Example:
<h1 title=“about JavaScript”>JavaScript</h1>

class

 The class attribute is used to specify the class of element.

 This attribute is used to associate an element with a style sheet.
 One or more class names can be specified for an element.
 Syntax:
<element class="classname">
 Example:
<div class="applycolor">Welcome to CareerRide Info</div>

style

 The style attribute specifies an inline style for the element.

 This attribute provides the facility to specify Cascading Style Sheet (CSS) rules
within the element.
 Example:
<p style="font-family:arial; color:#800080; text-align:center">CareerRide Info</p>

lang

 The lang attribute specifies the language of the element’s content along with
the language of any attribute content.
 This attribute is used to identify the language of the content on a web page.
 The language of the document is declared in the <html> tag.
 Syntax:
<element lang=“language_code”>
 Example:
<html lang="en">

dir

 The dir attribute specifies the reading direction for text as left to right or right to left.
 The dir attribute tells the browser the direction in which the displayed text is
intended to be read.
 The dir attribute can take one of the following two values.
 Ltr - Left to right direction
 Rtl - Right to left direction
 Syntax:
<element dir="ltr">
 Example:
<p dir="rtl"> content </p>

OVERVIEW OF CLIENT SIDE TECHNOLOGIES AND SERVER SIDE

TECHNOLOGIES

Web Application Development involves communication between the client browser and the
server. The web applications are developed by using different scripting languages in addition
to HTML and CSS. The most commonly used scripting languages/ technologies are
JavaScript, VBScript, ASP, Perl, Python, PHP, Ruby on Rails to mention a few. These
scripting technologies can be categorized as Client Side and Server Side Scripting
Technologies depending upon where these scripts are executed.

Scripting language codes needs to be embedded in another document like an HTML

document since one cannot develop a standalone application with a scripting language unlike
a programming language.

Client-side Scripting Technology

In this category the browser of the user requesting a web page executes the scripts written or
embedded in the requested web document. When a user requests a web page from the server,
the server sends the source code of the requested page to the client machine over the
internet.
Browser processes the source code and presents the page to the user. A user is able to see the
code of a client-side scripted page by opening the source (in browser window open view
menu and select “View Source” or right click in the document window in browser and select
“View Source” or “View Page Source”).

In case of client side scripting, the processing of the embedded scripts will be done by
browser only if the scripting language is enabled on the client browser. Scripts received from
the internet may pose security threats since hackers can send the script along with a web page
to compromise a computer. It is preferable to disable scripting option to protect a computer
from unknown internet threats. In such case when a page contains a client-side script the
browser pops up a message and ask for the user’s permission to run such a script.

Commonly used Client Side Scripting technologies-

 HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). CSS is
used for page formatting, controlling text size, color, placement and layout. It can also
be used to control the timing of appearance of various elements on a webpage.
 VBScript and JavaScript are used for event handling and controlling results of
the defined event
 Ajax (Asynchronous JavaScript and XML)
 Java applets for embedding standalone applications in webpages
 Flash Animation in which the actions are controlled with ActionScript

Server-side Scripting Technology

In this category when a user requests a webpage the script contained in it is executed by the
web server and only the results are returned to the client. The user request is responded by the
server that runs the script and generates HTML page. This dynamically generated HTML
document is sent to the client machine where the browser that displays it to the user. A user is
not able to see the code of a server side scripted page by opening the source.

Server-side scripting is a better alternative in case the web application needs to be customised
depending on the options chosen by the user or depending upon her requirements. This is the
most common mechanism to create interactive web sites like database applications, online
stores, feedback or order forms etc.

Commonly used Server Side Scripting languages or technologies-

 PHP
 ASP
 NET
 Ruby on Rails
 Perl
 Python
Difference Between Client Side And Server Side Scripting Technologies

Client Side Scripting Technologies Server Side Scripting Technologies

Scripts are processed or interpreted by the Scripts are processed or interpreted by the
browser web server
The response is faster Response is slower
The server sends only the HTML after
The browser receives the source code from
processing the requested page and script to
the server
the browser
The Scripting codes cannot access resources The Scripting codes can access resources
stored at web server stored at web server
The user can see only the output. She
The user can see the source code
receives the response in form of HTML
Needs to have a scripting language enabled Does not need to have a scripting language
browser enabled browser
Can result in processing overhead on server
No processing overhead on the server and lowering down the performance of a
website
Client-side scripting requires more time and
effort from the developers. The dynamic The source code will be processed by the
WebPages will be used on any kind of server so the developer or programmer just
browsers and the developer have to create has to code the pages according to the
codes that are compatible with the variety scripting technology used on the server.
of
browsers that the users may use.
Client-side code is best option for the
applications where the page elements do not Server-Side coding is the better option where
depend on the database. Changing the color the data presented to the user is stored in a
or look of elements, changing fonts or database. User validation, online reservation,
hiding elements on the basis of user’s choice saving data entered by user are examples
are examples where Client-side scripting can where Server-side scripting Is needed
be
used.

Advantages of Client-side Scripting

There are many great benefits of scripting on the client side, including:

 The scripting language for clients is very simple to master and utilize. It requires
no programming expertise or prior experience.
 The primary benefit of scripting on the client side can be that it's light and easy to
use (syntax not too complicated). Editing and executing code is quick.
 The processing of data happens by the client, not the server, making it easier to
scale apps with large volumes of users. Thus, the servers are less burdened.
 Data validation on the client side can be achieved with the help of a client-side
scripting programming language such as JavaScript.
 The execution of scripts that are client-side is faster because once the Script has been
downloaded from the server, it's executable by the browser right on the computer of
the user.
 Mathematical assessment is also a possibility by using scripting on the client side.
 The client-side software helps complete complicated tasks in a few steps.
 Only script code can be executed by the browser without being connected to
the server.
 It takes less time to run script code.
 Browser will respond instantly when a user presses any key or mouse moves or
clicks, etc.

Disadvantages of Client-side Scripting

There are some disadvantages to client-side scripting, which are as follows:

 The biggest drawback to client-side scripting is it's not secure because the code is
transmitted in the form of a message to the client and, therefore, accessible to it
when the user checks the sources of his website page. In other words, the code is
typically visible.
 Client-side programming is not a viable option for accessing databases or
sending sensitive information via the internet.
 There is no assurance that the user has turned on JavaScript on the browser of his
personal computer. So, any necessary functionality is required to be loaded on
the server, despite possible instances that the server might be disabled.
 The running of the Script (or program) is dependent on the browser used by the
client and its configuration, as well as the security level.
 The web-based application that is based on robust JavaScript can be difficult
to troubleshoot and maintain.
 Languages that Script on the client side are typically less functional than server-side
scripting languages.

Advantages of server-side scripting

 Allows running programs in programming languages that aren’t supported by

the browser.
 Enables you to program dynamic web applications browser- independently,
 Client-side programming features such as Java applets, Dynamic Html,
and ActiveX controls, all of which are browsed specifically.
 Can provide the client (browser) with data that does not reside at the client.
 Provides improved security measures, since you can write code that can never be
viewed from the browser.

Disadvantages of server-side scripting

 Increases the workload of the server.

 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.