Unit 1

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. 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.
Careers in Web Technologies and Job Roles

What are the types of roles in web development?

Web developer, Software developer, Web designer, UI developer, Web
designer, Web programmer, Webmaster are some of the types of roles in web
development. Web developer is the person who is working with the Web and
developing applications on the Web. His basic role is to create websites and
applications. He uses programming languages like PHP, ColdFusion, JSP, ASP,
Python etc. Web development is split into two main categories: front-end, and
back-end. Front-end developers are responsible for the look and feel, usability,
accessibility, and speed of the website. Back-end developers are responsible for
the functionality and business rules behind the website.
What does a web-developer do?
Web developers build your websites, and help it look beautiful and
professional. Developers have the ability to work on many different parts of the
website, including server configuration and database development. Many web
developers use a program called html to develop the website pages. Html is a
programming language that converts your website design into the code that is
used to show the website on the internet. A web-developer analyzes a
customer's needs and then creates a website or a part of a website to meet those
needs. The web-developer uses computer languages like HTML, CSS,
JavaScript, ASP, PHP and MySQL to create a website. Above all, he also makes
sure that the website is compatible on different browsers, and that it is easy to
maintain.

How the Website Works?

A website is simply a collection of web pages of codes – codes that
describes the layout, format and content on a page.
 The web server is a internet-connected computer that receives the
request for a web page sent by your browser.
 The browser connects your computer to the server through an IP
address. The IP address is obtained by translating the domain name.
A website

A website is typically a collection of web pages, images and other elements

that are linked together to form a larger, structured document. Think of a
website as a book and each individual page is a web page.

A website can be made up of a single page or it could have thousands of

pages. Each page will have its own text, images and other elements. All web
pages and elements are then placed in a folder and stored on your web host
server.

Each web page is written in codes and these codes describe the layout, format
and content on the page. The most common coding language used to create
web pages is HTML.

Creating a website

But just because a web page is written in codes doesn’t mean you need to be
an IT geek to create one yourself. In fact, you don’t even need to know code
or possess any technical skills or knowledge to create a website nowadays.
Technology has advanced tremendously and there are a lot of website creators
that allows you build functional and professional-looking websites without
much or any technical knowledge.

The majority of website builders on the market are designed for the non-tech
person in mind:

 Everything is online-based. There is nothing to download, nothing to

install. Just open your web browser, type in the URL of the website
builder, sign in and start building your website.
 No technical knowledge required. The website builders are created and
managed by professionals so you don’t have to mess around with the
technical aspects. You can create your entire website with all the
bells and whistles without ever touching one line of code.
 It’s visual. Website builders typically use a WYSIWYG (What You See
Is What You Get) editor that lets you create your website by dragging
and dropping website elements into the desired location.
 templates. You don’t have to worry about
 Professionally-designed
mismatched color schemes or disjointed layout as most website
builders come with an extensive library of professional design
templates.

A domain name

A domain name is the address that you type into your web browser address
bar to get to a website. An example of a domain name is www.doteasy.com.
A domain name is unique to a website. In other words, no two websites can
have the same domain name.

A web server

A web server is the computer that receives the request for a web page sent
by your browser.

Consider this: your company is hiring for a position that has just opened up
and you are in charge of writing the job ad. You may have crafted the mos t
compelling ad but unless you post the ad on a job board, no one will see it.

This is the same with websites. You could create the most stunning website
but unless it’s uploaded to a web server, it is not accessible or viewable on
the Internet.

How it all comes together

Each website will have a website address, or a domain name, and each domain
name is tied to the IP address of the web server it resides on. IP addresses are
managed and tracked via the Domain Name Server (or DNS for short).

DNS works very similarly to the Contacts app on your mobile phone – you
open up the Contacts app, type in a person’s name and your mobile phone
returns with the person’s phone number and other contact information you
might have entered. You can then decide if you want to call, email or text that
person.
When you type in a domain name in your web browser, your web browser is
actually conducting a series of inquiries that include looking up the IP address
of the domain name, locating the web server that hosts the web pa ges of the
domain name, submitting a request to that server for a copy of the web
page(s), receiving the web page(s) from the server and finally translating the
codes on the web page to present the information on your screen.

Client and Server Scripting Language

Client-sidescripting

Web browsers execute client-side scripting. It is used when browsers have all
code. Source code is used to transfer from webserver to user’s computer over
the internet and run directly on browsers. It is also used for validations and
functionality for user events.
It allows for more interactivity. It usually performs several actions without
going to the user. It cannot be basically used to connect to databases on a web
server. These scripts cannot access the file system that resides in the web
browser. Pages are altered on basis of the user’s choice. It can also be used to
create “cookies” that store data on the user’s computer.
Server-sidescripting

Web servers are used to execute server-side scripting. They are basically used
to create dynamic pages. It can also access the file system residing at the
webserver. A server-side environment that runs on a scripting language is a web
server.
Scripts can be written in any of a number of server-side scripting languages
available. It is used to retrieve and generate content for dynamic pages. It is used
to require to download plugins. In this load times are generally faster than client-
side scripting. When you need to store and retrieve information a database will
be used to contain data. It can use huge resources of the server. It reduces client-
side computation overhead. The server sends pages to the request of the
user/client.
Difference between client-side scripting and server-side scripting :

Client-side scripting Server-side scripting

Source code is not visible to the user

because its output
Source code is visible to the user.
of server-sideside is an HTML page.

Its primary function is to manipulate and

Its main function is to provide the
provide access to the respective database
requested output to the end user.
as per the request.

In this any server-side technology can be

It usually depends on the browser used and it does not
and its version. depend on the client.

It runs on the user’s computer. It runs on the webserver.

There are many advantages

The primary advantage is its ability to
linked with this like faster.
highly customize, response
response times, a more
requirements, access rights based on user.
interactive application.

It does not provide security for

It provides more security for data.
data.

It is a technique used in web It is a technique that uses scripts on the

development in which scripts run webserver to produce a response that is
on the client’s browser. customized for each client’s request.

HTML, CSS, and javascript are

PHP, Python, Java, Ruby are used.
used.

No need of interaction with the

It is all about interacting with the servers.
server.
Client-side scripting Server-side scripting

It reduces load on processing unit

It surge the processing load on the server.
of the server.

Domains and Hosting

Web hosting

A web host provides the space where you display your site's content, like text,
images, and videos. A web host doesn't necessarily provide the address visitors
use to reach your site, like www.yourdomain.com.

When you build a site with Squarespace, Squarespace is your web host. This
means that in addition to providing tools for creating and managing your content,
we provide a place on the internet to display your content. Every Squarespace site
is stored on our servers, similar to how physical stores rent space in a shopping
mall.

Domain hosting

A domain host provides a domain name, like www.yourdomain.com, that visitors

can use to find you. A domain name is like a street address that directs people to
your website's location, but it's not the content that visitors see when they visit
your site.

Domain hosts store domain names and facilitate their registration. If you’re using
a domain registered through a third-party provider, like GoDaddy or Hover,
they're your domain host, and you'll manage your domain through them.

Main differences between domain name and web hosting:

 Web hosting is where your website files are physically stored, a domain
name is the address of that storage location.
 You cannot create a website without first purchasing a domain name,
though you can have a domain name without creating a website.
Responsive web design (RWD) is a web development approach that
creates dynamic changes to the appearance of a website, depending on the
screen size and orientation of the device being used to view it. RWD is one
approach to the problem of designing for the multitude of devices available to
customers, ranging from tiny phones to huge desktop monitors.

RWD uses so-called breakpoints to determine how the layout of a site will appear:
one design is used above a breakpoint and another design is applied below that
breakpoint. The breakpoints are commonly based on the width of the browser.

The same HTML is served to all devices, using CSS (which determines the
layout of webpage) to change the appearance of the page. Rather than creating a
separate site and corresponding codebase for wide-screen monitors, desktops,
laptops, tablets and phones of all sizes, a single codebase can support users with
differently sized viewports.

In responsive design, page elements reshuffle as the viewport grows or shrinks.

A three-column desktop design may reshuffle to two columns for a tablet and a
single column for a smartphone. Responsive design relies on proportion-based
grids to rearrange content and design elements.

Types of Websites (Static and Dynamic Websites)

Website

Website is a collection of related web pages that may contain text, images, audio
and video. The first page of a website is called home page. Each website has
specific internet address (URL) that you need to enter in your browser to access
a website.

Website is hosted on one or more servers and can be accessed by visiting its
homepage using a computer network. A website is managed by its owner that can
be an individual, company or an organization.
Static website

Static website is the basic type of website that is easy to create. You don't need
the knowledge of web programming and database design to create a static
website. Its web pages are coded in HTML.

The codes are fixed for each page so the information contained in the page does
not change and it looks like a printed page.

Dynamic website

Dynamic website is a collection of dynamic web pages whose content changes

dynamically. It accesses content from a database or Content Management System
(CMS). Therefore, when you alter or update the content of the database, the
content of the website is also altered or updated.

Dynamic website uses client-side scripting or server-side scripting, or both to

generate dynamic content.

Client side scripting generates content at the client computer on the basis of user
input. The web browser downloads the web page from the server and processes
the code within the page to render information to the user.

In server side scripting, the software runs on the server and processing is
completed in the server then plain pages are sent to the user.
Static vs Dynamic website

Static Website Dynamic Website

Prebuilt content is same every time the Content is generated quickly and
page is loaded. changes regularly.

It uses the HTML code for developing It uses the server side languages
a website. such as PHP,SERVLET, JSP,
and ASP.NET etc. for developing
a website.

It sends exactly the same response for It may generate different HTML
every request. for each of the request.

The content is only changed when The page contains "server-side"

someone publishes and updates the file code which allows the server to
(sends it to the web server). generate the unique content when
the page is loaded.

Flexibility is the main advantage of Content Management System

static website. (CMS) is the main advantage of
dynamic website.

HTTP Request / Response.

The Hypertext Transfer Protocol (HTTP) is application-level protocol for

collaborative, distributed, hypermedia information systems. It is the data
communication protocol used to establish communication between client and
server.

HTTP is TCP/IP based communication protocol, which is used to deliver the data
like image files, query results, HTML files etc on the World Wide Web (WWW)
with the default port is TCP 80. It provides the standardized way for computers
to communicate with each other.
The Basic Characteristics of HTTP (Hyper Text Transfer Protocol):

o It is the protocol that allows web servers and browsers to exchange data
over the web.
o It is a request response protocol.
o It uses the reliable TCP connections by default on TCP port 80.
o It is stateless means each request is considered as the new request. In other
words, server doesn't recognize the user by default.

The Basic Features of HTTP (Hyper Text Transfer Protocol):

There are three fundamental features that make the HTTP a simple and powerful
protocol used for communication:

o HTTP is media independent: It specifies that any type of media content

can be sent by HTTP as long as both the server and the client can handle
the data content.
o HTTP is connectionless: It is a connectionless approach in which HTTP
client i.e., a browser initiates the HTTP request and after the request is sent
the client disconnects from server and waits for the response.
o HTTP is stateless: The client and server are aware of each other during a
current request only. Afterwards, both of them forget each other. Due to
the stateless nature of protocol, neither the client nor the server can retain
the information about different request across the web pages.

HTTP is request/response protocol which is based on client/server based

architecture. In this protocol, web browser, search engines, etc. behave as HTTP
clients and the Web server like Servlet behaves as a server.