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.

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

HTML Basics:

Below mentioned are the basic HTML tags that divide the whole document into various
parts like head, body, etc.
 Every HTML document begins with a HTML document tag. Although this is not
mandatory, it is a good convention to start the document with this below-mentioned tag.
<!DOCTYPE html>
 <html> : Every HTML code must be enclosed between basic HTML tags. It begins
with <html> and ends with </html> tag.
 <head>: The head tag comes next which contains all the header information of the web
page or documents like the title of the page and other miscellaneous information. This
information is enclosed within the head tag which opens with <head> and ends
with </head>. The contents will of this tag will be explained in the later sections of the
course.
 <title>: We can mention the title of a web page using the <title> tag. This is header
information and hence is mentioned within the header tags. The tag begins with <title> and
ends with </title>.
 <body>: Next step is the most important of all the tags we have learned so far. The body
tag contains the actual body of the page which will be visible to all the users. This opens
with <body> and ends with </body>. All content enclosed within this tag will be shown on
the web page be it writings or images or audio or videos or even links. We will see later in
the section how using various tags we may insert mentioned contents into our web pages.

Example: This example illustrates the HTML basic structure.

<html>

<head>
<!-- Information about the page -->
<!--This is the comment tag-->
 <title>GeeksforGeeks</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.
Most HTML heading tag that we use :-
 Heading 1
 Heading 2
 Heading 3

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

<head>
<title>GeeksforGeeks</title>
</head>

<body>
<h1>Hello GeeksforGeeks</h1>
<h2>Hello GeeksforGeeks</h2>
<h3>Hello GeeksforGeeks</h3>
<h4>Hello GeeksforGeeks</h4>
<h5>Hello GeeksforGeeks</h5>
<h6>Hello GeeksforGeeks</h6>
</body>
</html>

Output:
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>GeeksforGeeks</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>

</body>

</html>

Output:

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>GeeksforGeeks</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 portal for geeks<br>
</p>
<hr>

<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
</body>
</html>
Output:

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>GeeksforGeeks</title>
</head>

<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-
low_res.png">
</body>

</html>

Output:

Scripts: