You are on page 1of 61

Web Development

Web Development
Web Development
Web Development

M.P.C. . .

Autonomous
College


DEPARTMENT OF COMMERCE

A Project Report On
“WEB DEVELOP MENT”
SESSION:- 2017-20

Guided By: -
Submitted By: -
Miss Komal Agarawal
Surajeet Parida
Lecture In Commerce Exam. Roll No. :-
3217005
Class Roll No. :- BC 17-109
Registration No. :- 10033/17
Web Development
Web Development
Web Development
Web Development
B. Com 6th sem. (E-Commerce)

Web Development
Web Development
ACKNOWLEDGEMENT

I am highly indebted to my Guide Miss. Komal Agarwal is lecture in commerce Department of


M.P.C.(Autonomous) College, Takatpur, Baripada, Mayurbhanj for her help and guidance, for timely
completion of this project.

I wish to place on record my sincere regards to my parents whose blessing and loving care enable
me to go ahead in my life.

I shall be failing in my duty if I do not express my sincere gratitude to all the persons who have
provided me facts, figures and data for the present study.

Surajeet Parida
MPC AUTONOMOUS COLLEGE
ROLL NO. :- 3217005
GUIDE CERTIFICATE

This is to certificate that Surajeet Parida student of M.P.C AUTONOMOUS, COLLEGE


TAKATPUR, and Baripada bearing examination ROLL NO- 3217005 and CLASS ROLL NO- BC17-109
has carried out his research work titled “Web Development” a new initiative as partial fulfillment degree of
(B.Com) commerce and has not been purpose under my guidance

Signature By Guidance
DATE :- Miss. Komal Agarwal
DECLARATION

I hereby declare that the project work with the title “Web Development” in this project all the
information required is corrected through my own efforts is true to the best of my knowledge and belief.
This work has been not submitted to any other institution carrier.

I further declare that the project work is original and genuine to the best of my knowledge and
information; the honorable authority may take necessary disciplinary action against me, if the report is found
to be missed and false.

Surajeet Parida
+3 Final Year Commerce(E-Commerce)
Exam. Roll No. :- 3217005
Web Developers
Table Of Contents
Page
Chapter Topic No.

 Introduction of The Web Developer


I 

Introduction To Web Development
Meaning & Objective
 Importance & limitation
 Objective of Study
II  Objective of study

 Review of The Literature


III
 Company Profile
IV
 Research Methodology
V
 Limitation of The Study
VI
 Analysis and Interpretation of Study
VII
 Findings, Conclusion, Suggestion
VIII
IX  Reference/Bibliography

1
Chapter - I
Introduction of The Web Developer

2
Web Development Introduction

INTRODUCTION – WEB DEVELOPMENT

In Web Development there need a System, Servers and a Device which is connected with
internet.

The Internet:
In simplest words it is a global network of smaller networks interconnected using
communication protocols that are standardised. The Internet standards describe a framework
known as the Internet protocol suite. This model divides methods into a layered system of
protocols.

These layers are as follows:


1. Application layer (highest) – concerned with the data(URL, type, etc), where HTTP,
HTTPS, etc comes in.
2. Transport layer – responsible for end-to-end communication over a network.
3. Network layer – provides data route.
Provides a variety of information and communication facilities; contains forums, databases,
email, hypertext, etc. It consists of private, public, academic, business, and government networks
of local to global scope, linked by a broad array of electronic, wireless, and optical networking
technologies.

3
Web Development Introduction

The World Wide Web:


The web is a subset of the internet. It’s a system of Internet servers that support specially
formatted documents. The documents are formatted in a markup language called HTML (that
supports links, multimedia, etc). These documents are interlinked using hypertext links and are
accessible via the Internet.

To link hypertext to the Internet, we need:


1. The markup language, i.e., HTML.
2. The transfer protocol, e.g., HTTP.
3. Uniform Resource Locator (URL), the address of the resource.

We access the web using web browsers.

Difference between Web and Internet:

INTERNET WEB

Internet is the library and


web a collection of books. Web is a subset of the internet. The web is a large portion of the
The internet also consists of internet but it isn’t all of it.
databases, email, forums, etc.

The Web is ideally a way of accessing information over the


The internet is a network, a
medium of the Internet. Web is a collection of internet servers
way of transporting content
that can host HTML formatted documents. A collection of
and web lets us use that
pages, of information connected to each other around the globe.
content.
Each page can be a combination of text and multimedia.

4
Web Development Introduction

URI:
URI stands for ‘Uniform Resource Identifier’, it’s like an address providing a unique global
identifier to a resource on the Web. Uniform Resource Locator (URL) is the most commonly used
form of a URI.

The URL consists mainly of two parts:


1. The protocol used in transfer, e.g., HTTP.
2. The domain names.

Who governs the Internet?

The Internet is not governed; it has no single authority figure. The ultimate authority for
where the Internet is going rests with the Internet Society, or ISOC.
ISOC is a voluntary membership organization whose purpose is to promote global information
exchange through Internet technology.

 ISOC appoints the IAB- Internet Architecture Board. They meet regularly to review
standards and allocate resources, like addresses.

 IETF- Internet Engineering Task Force. Another volunteer organisation that meets
regularly to discuss operational and technical problems.

5
Web Development Introduction

Internet and Web programming


The Internet is a vast network of computers, and server’s, which communicate with each
other. The internet connects with the whole wide world together. How does it actually work at a
very low level?

Client side:

First when we type a URL like www.google.com, the browser converts it into a file
containing:

1. GET /HTTP/1.1 (where GET means we are requesting some data from the server and
HTTP refers to protocol that we are using, 1.1 refers to version of HTTP request)
2. Host: www.google.com
3. And some other information

Now this file is converted to binary code by the browser and it is sent down the wires if we are
connected through Ethernet and if we are using Wi-Fi, first it converts it to radio signal which is
decoded by router in a very low level. It is converted to binary and then sent to the servers.

This information or ‘binary codes’ go to the destination and respond if it is received by the sender
only because of the IP address.

One router will send the information to another and this keeps on going until the binary codes
reach the destination.

6
Web Development Introduction

Server side:
Now the server receives the binary code and decodes it and sends the response in the following
manner:

1. HTTP/1.1 200 ok (where 200 ok is the status)


2. Content-type: type/html
3. Body of page

Now this is converted back to binary by the server and sent to the IP address that is requesting it.
Once the codes are received by the client, the browser again decodes the information in the
following way:

1. First it checks the status


2. It starts reading the document from html tag and constructs a Tree like structure.
3. The html tree is then converted to corresponding binary code and rendered on the
screen.
4. In the end we see the website front-end.

Below is the tree structure of html document:

7
Web Development Introduction

8
Web Development Introduction

The following diagram show the whole process:

To understand the basic web terminology, refer: The Internet and the Web

9
Web Development Introduction

The World Wide Web abbreviated as WWW and commonly known as the web. The WWW was
initiated by CERN (European library for Nuclear Research) in 1989.

 History:

It is a project created, by Timothy Berner’s Lee in 1989, for researchers to work together
effectively at CERN. is an organisation, named World Wide Web Consortium (W3C), was
developed for further development in web. This organisation is directed by Tim Berner’s Lee,
aka father of web.

 System Architecture:

From user’s point of view, the web consists of a vast, worldwide connection of
documents or web pages. Each page may contain links to other pages anywhere in the world.
The pages can be retrieved and viewed by using browsers of which internet explorer,
Netscape Navigator, Google, Chrome, etc are the popular ones. The browser fetches the page
requested interprets the text and formatting commands on it, and displays the page, properly
formatted, on the screen. The basic model of how the web works is shown in figure below.
Here the browser is displaying a web page on the client machine. When the user clicks on a
line of text that is linked to a page on the abd.com server, the browser follows the hyperlink
by sending a message to the abd.com server asking it for the page.

Here the browser displaying web page om the client machine when the user clicks on a line of
text that is linked to a page on abd.com, the browser follows the hyperlink by sending a
message to abd.com server asking it for the page.

10
Web Development Introduction

Working of WWW:
The World Wide Web is based on several different technologies: Web browsers,
Hypertext Markup Language (HTML) and Hypertext Transfer Protocol (HTTP).

A Web browser is used to access webpages. Web browsers can be defined as programs which
display text, data, pictures, animation and video on the Internet. Hyperlinked resources on the
World Wide Web can be accessed using software interface provided by Web browsers.
Initially Web browsers were used only for surfing the Web but now they have become more

11
Web Development Introduction

universal. Web browsers can be used for several tasks including conducting searches, mailing,
transferring files, and much more. Some of the commonly used browsers are Internet
Explorer, Opera Mini, Google Chrome.
Features of WWW:
 HyperText Information System
 Cross-Platform
 Distributed
 Open Standards and Open Source
 Uses Web Browsers to provide a single interface for many services
 Dynamic, Interactive and Evolving.
 “Web”
There are 3 versions of Web
 Web 1.0
 Web 2.0
 Web 3.0

 Web 1.0
Web 1.0 refers to the first stage of the World Wide Web evolution. Earlier, there were
only few content creators in Web 1.0 with the huge majority of users who are consumers of
content. Personal web pages were common, consisting mainly of static pages hosted on ISP-
run web servers, or on free web hosting services.

In Web 1.0 advertisements on websites while surfing the internet is banned. Also, in Web
1.0, is an online digital photography website, on which user could store, share, view and print
digital pictures. Web 1.0 is a content delivery network (CDN) which enables to showcase the
piece of information on the websites. It can be used as personal websites. It costs to user as
per pages viewed. It has directories which enable user to retrieve a particular piece of
information.

12
Web Development Introduction

Four design essentials of a Web 1.0 site include:


1. Static pages.
2. Content is served from the server’s file-system.
3. Pages built using Server Side Includes or Common Gateway Interface (CGI).
4. Frames and Tables used to position and align the elements on a page.

 Web 2.0 –
Web 2.0 refers to world wide website which highlight user-generated content, usability and
interoperability for end users. Web 2.0 is also called participative social web. It does not refer to a
modification to any technical specification, but to modify in the way Web pages are designed and
used. The transition is beneficial but it does not seem that when the changes are occurred. An
interaction and collaboration with each other is allowed by Web 2.0 in a social media dialogue as
creator of user-generated content in a virtual community. Web 1.0 is enhanced version of Web 2.0.
The web browser technologies are used in Web 2.0 development and it includes AJAX and
JavaScript frameworks. Recently, AJAX and JavaScript frameworks have become a very popular
means of creating web 2.0 sites.

Five major features of Web 2.0 –


Free sorting of information, permits users to retrieve and classify the information
collectively.
Dynamic content that is responsive to user input.
Information flows between site owner and site users by means of evaluation & online
commenting.
Developed APIs to allow self-usage, such as by a software application.

13
Web Development Introduction

Web access leads to concern different, from the traditional Internet user base to a wider variety of
users.

Usage of Web 2.0 –


The social Web contains a number of online tools and platforms where people share their
perspectives, opinions, thoughts and experiences. Web 2.0 applications tend to interact much
more with the end user. As such, the end user is not only a user of the application but also a
participant by these 8 tools mentioned below:
1. Podcasting
2. Blogging
3. Tagging
4. Curating with RSS
5. Social bookmarking
6. Social networking
7. Social media
8. Web content voting

 Web 3.0 –
It refers the evolution of web utilization and interaction which includes altering the Web
into a database. In enables the upgradation of back-end of the web, after a long time of focus
on the front-end (Web 2.0 has mainly been about AJAX, tagging, and another front-end user-
experience innovation). Web 3.0 is a term which is used to describe many evolutions of web
usage and interaction among several paths. In this, data isn’t owned but instead shared, where
services show different views for the same web / the same data.

14
Web Development Introduction

The Semantic Web (3.0) promises to establish “the world’s information” in more reasonable
way than Google can ever attain with their existing engine schema. This is particularly true
from the perspective of machine conception as opposed to human understanding. The
Semantic Web necessitates the use of a declarative ontological language like OWL to produce
domain-specific ontologies that machines can use to reason about information and make new
conclusions, not simply match keywords.

 Below are 5 main features that can help us define Web 3.0:

1. Semantic Web
The succeeding evolution of the Web involves the Semantic Web. The semantic web
improves web technologies in demand to create, share and connect content through search
and analysis based on the capability to comprehend the meaning of words, rather than on
keywords or numbers.

2. Artificial Intelligence
Combining this capability with natural language processing, in Web 3.0, computers
can distinguish information like humans in order to provide faster and more relevant
results. They become more intelligent to fulfil the requirements of users.

3. 3D Graphics
The three-dimensional design is being used widely in websites and services in Web
3.0. Museum guides, computer games, ecommerce, geospatial contexts, etc. are all
examples that use 3D graphics.

4. Connectivity

15
Web Development Introduction

With Web 3.0, information is more connected thanks to semantic metadata. As a


result, the user experience evolves to another level of connectivity that leverages all the
available information.

5. Ubiquity
Content is accessible by multiple applications, every device is connected to the web,
the services can be used everywhere.

WEB 1.0 WEB 2.0 WEB 3.0

Mostly Read-Only Wildly Read-Write Portable and Personal

Company Focus Community Focus Individual Focus

Home Pages Blogs / Wikis Live-streams / Waves

Owning Content Sharing Content Consolidating Content

Web Forms Web Applications Smart Applications

Directories Tagging User Behaviour

Page Views Cost Per Click User Engagement

16
Web Development Introduction

WEB 1.0 WEB 2.0 WEB 3.0

Banner Advertising Interactive Advertising Behavioural Advertising

Britannica Online Wikipedia The Semantic Web

HTML/Portals XML / RSS RDF / RDFS / OWL

WORLD-WIDE-WEB(WWW) is different from the Internet

The Internet (a portmanteau of the interconnected network) is the global system of


interconnected computer networks that uses the Internet protocol suite (TCP/IP) to link devices
worldwide.

In simple terms, it is also known as Networks of Networks which links all devices together globally.

Honestly, nobody is in charge of the Internet. The Internet is a large distributed network there is no
central authority of controlling it how the packets should be routed from the networks. It makes sure
everyone has an end to end connectivity Just like a phone call.

17
Web Development Introduction

An information system on the Internet which allows documents to be connected to other


documents by hypertext links, enabling the user to search for information by moving from one
document to another.

World Wide Web is one of the services which is provided by the internet over HTTP (Hyper Text
Transfer Protocol). It uses URL (Uniform Resource Locator) to locate file and HTML (Hypertext
markup language) to display the information which can be rendered by your browser.

In analogy, we can consider the world wide web is a movie theatre and the road as an internet.

Apart from world-wide-web, the Internet supports other protocols like FTP (File Transfer
Protocol), SMTP (Simple Mail Transfer Protocol), POP (Post Office Protocol), etc.

Nowadays the rise in mobile computing there is a steady decline in the usage of the world wide web.
Most of the world wide web services are provided as a mobile app like Gmail, Spotify, YouTube, etc.
which are easily accessible to the users.

Components of Web

There are 3 components of web:


 Uniform Resource Locator (URL): 
serves as system for resources on web.

 Hyper Text Transfer Protocol (HTTP): 


specifies communication of browser and server.

 Hyper Text Markup Language (HTML): 

18
Web Development Introduction

defines structure, organisation and content of webpage.

URL full form


URL is the abbreviation of Uniform Resource Locator. It is the resource address on the
internet. The URL (Uniform Resource Locator) is created by Tim Berners-Lee and the Internet
Engineering working group in 1994. URL is the character string (address) which is used to access
data from the internet. The URL is the type of URI (Uniform Resource Identifier).

A URL contains the following information which is listed below:


 Protocol name
 A colon followed by double forward-slash (://)
 Hostname (domain name) or IP address
 A colon followed by port number
 Path of the file

19
Web Development Introduction

Syntax of URL:
protocol://hostname/filename

Protocol: 

A protocol is the standard set of rules that are used to allow electronic devices to
communicate with each other.

Hostname:

 It describes the name of the server on the network.

Filename:
 It describes the pathname to the file on the server.

The URL https://mpcautocollege.or.ing/php-function contains the


information protocol: https, hostname: geeksforgeeks.org and filename: php-function.

HTML | Introduction
HTML stands for Hyper Text Markup Language. It is used to design web pages using markup
language. HTML is the combination of Hypertext and Markup language. Hypertext defines the
link between the web pages. Markup language is used to define the text document within tag
which defines the structure of web pages. This language is used to annotate (make notes for the
computer) text so that a machine can understand it and manipulate text accordingly. Most of
markup (e.g. HTML) languages are human readable. Language uses tags to define what
manipulation has to be done on the text.

20
Web Development Introduction

HTML is a markup language which is used by the browser to manipulate text, images and
other content to display it in required format. HTML was created by Tim Berners-Lee in 1991.
The first ever version of HTML was HTML 1.0 but the first standard version was HTML 2.0
which was published in 1999.

Elements and Tag: 


HTML uses predefined tags and elements which tells the browser about content display
property. If a tag is not closed then browser applies that effect till end of page.

HTML VERSION YEAR

HTML 1.0 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML 5 2014

21
Web Development Introduction

HTML page structure: 

The Basic structure of HTML page is given below. It contains some elements like head,
title, body, … etc. These elements are used to build the blocks of web pages.

22
Web Development Introduction

<DOCTYPE! html>:
This tag is used to tells the HTML version. This currently tells that the version is HTML

<html>: 
This is called HTML root element and used to wrap all the code.

<head>:
  Head tag contains metadata, title, page CSS etc. All the HTML elements that can be used
inside the <head> element are:

 <style>

 <title>

 <base>

 <noscript>

 <script>

 <meta>

 <title>

23
Web Development Introduction

<body>: Body tag is used to enclosed all the data which a web page has from texts to links. All of the
content that you see rendered in the browser is contained within this element.

 Example: 
HTML page can be created using any text editor (notepad). Then save that file
using .htm or .html extension and open that file in browser. It will get the HTML page response.

24
Web Development Introduction

<!DOCTYPE html>

<html>

<head>

<title>demo web page</title>

<style>

h1 {

color:#009900;

font-size:46px;

p{

font-size:17px;

margin-top:-25px;

margin-left:15px;

25
Web Development Introduction

</style>

</head>

<body>

<h1>Web Development</h1>

<p>Develop Website</p>

</body>

</html>

Output: -

Web Development
Develop Website

26
Web Development Introduction

Features of HTML:
 It is easy to learn and easy to use.
 It is platform independent.
 Images, video and audio can be added to a web page.
 Hypertext can be added to text.
 It is a markup language.

Why learns HTML?


 It is a simple markup language. Its implementation is easy.
 It is used to create a website.
 Helps in developing fundamentals about web programming.
 Boost professional career.

Advantages:
 HTML is used to build a websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript etc.

Disadvantages:
 HTML can create only static webpages so for dynamic web page other languages have to
be used.
 Large amount of code has to be written to create a simple web page.
 Security feature is not good.

27
Web Development Introduction

Web programming, also known as web development, is the creation of dynamic websites and
web applications. This is where it all begins! A hands-on introduction to all of the essential tools
you'll need to build real, working websites. Web development is the work involved in developing
a website for the Internet (World Wide Web) or an intranet (a private network).  Web development can
range from developing a simple single static page of plain text to complex web-based internet
applications (web apps), electronic businesses, and social network services. A more comprehensive list
of tasks to which web development commonly refers, may include web engineering, web design, web
content development, client liaison, client-side/server-side scripting, web server and network
security configuration, and e-commerce development.

Among web professionals, "Web Development" usually refers to the main non-design aspects of
building websites: writing mark-up and coding.  Web development may use content management
systems (CMS software like Drupal, WordPress, Biwi, Joomla etc) to make content changes easier and
available with basic technical skills.

 Examples of web applications are social networking sites like Facebook, Twitter, WhatsApp,
Instagram and e-commerce sites like Amazon, Flipkart, AliExpress, Club Factory.

The good news is that learning web development is not that hard!

In fact, many argue it’s the best form of coding for beginners to learn. It’s easy to set up, you get
instant results and there’s plenty of online training available.

28
Web Development Introduction

A lot of people learn web coding because they want to create the next best sites or find a job in the
industry. But it’s also a good choice if you just want a general introduction to coding, since it’s super
easy to get started. No matter whether you’re looking for a career or just want to learn coding, learning
how to develop for the websites.

Web developers often work for clients who are trying to get their product or service onto the web.
The work is typically very project focused and involves collaborating with a team that helps to
coordinate the client’s needs into the end product. The client could be a tech company, an
organization, or a government. The work could involve front-end, back-end, or full-stack web
development.

Web development could be a good profession for you if you like solving logical problems, building
useful things, and experimenting with new technologies. Web developers are in high demand,
generally have a good work/life balance, and command comfortable salaries. Google your specific
location to get a better sense of your local web development job opportunities.

Difference between Browsing and Surfing

Browsing:
When folks open a web site they need to use an online browser for that. it’s an application
that permits the user to enter a web address and then takes them to it address wherever they’ll
get all the data they have. In straightforward terms browsing is outlined as trying to find some
type of data and reading regarding it with none correct aim or objective. Browsing is faster
and less time consuming than surfing and we get less satisfaction and information than surfing
because in surfing, we have to search lot of pages to get the desired result or in order to
increase our knowledge. By using browsing, folks will notice what they’re trying to find if
they need some plan of the subject beforehand and that they find yourself obtaining the data in
less time.

29
Web Development Introduction

Surfing:
Generally, folks that use the web find yourself searching for random stuff on the online to
boost their data, they merely enter a research term and keep gap one term from the opposite
till they apprehend enough to prevent trying. This is often through with the assistance of
search engines. Surfing is the act of finding data while not looking on the web browser.
Surfing is often principally done once the person doesn’t have any specific plan of what they
will notice. Surfing could be a wide term than browsing as a result of just in case of doubt on
given resource, browsing converts into surfing to look for the reliable information.

Difference between browsing and surfing:

S.NO BROWSING SURFING

Browsing is done through


1. While it is done through search engines.
web browser.

In browsing, we search for


2. While in surfing, we randomly search for something.
something specific.

Browsing is faster and easy


3. Here, it is slower than browsing and tough process.
process

Browsing is less time Surfing is more time consuming because in surfing, we


4.
consuming. have to search lot of pages to get the desired result.

5. In browsing, we get a plenty While in surfing, we can get bundle of information about

30
Web Development Introduction

S.NO BROWSING SURFING

of material related to one


various topics.
topic.

Browsing is the process of


While surfing is process of studying something without
6. reading something with the
any explicit target.
desire.

In browsing, we get While in surfing, we get satisfaction and information


7. satisfaction and information more than browsing because in surfing, we search lot of
but less than surfing. material in order to increase our knowledge.

Why Development?
The trade of IT and Computer Science (CSE) is basically categorized into three sub-domains;
Software engineering, Networking and website development. However former two are also very
interesting and fruitful as web development, students are consistently made to believe that those
are more important and significant than WebDev.

I can’t stress this point enough, Web Development and Designing is third wheel in computer
technologies and it can’t be under-estimated.

I’ve personally seen people wandering in software engineering for jobs and careers regardless
of their non-interests in field and after failing that, commencing website development.

Web Development is the future. Have a look around and you’ll agree.

31
Web Development Introduction

Web Development is not limited to websites, you can create browsers, plugins, games, e-
commerce and SOFTWARES too. The development scope is too vast, describing it would take
more than one article. WebDev can get you jobs in high-reputed companies like Facebook,
Microsoft, Google etc. or you could always work as a high-profiled freelancer. Although
beginning career might disappoint you, but as you keep growing, so does your pay cheque.

Web Development, although fun, requires hard work especially during PHP/ASP.net phase. You
have to work in a specific order if you want to become a good web developer.

Web Development History

32
Web Development Introduction

Learn Web Development


How can I start learning web development? Is it easy? And how can I keep up with the latest
web designing technologies?
These are the questions that appear in every beginner’s mind. There is also a confusion between
web designing and web development, but we’ll talk about web development.

It totally depends on how much you are interested and are serious about it. if you desperately
wanted to learn then you can easily be an expert on it. There’s nothing like it’s so hard or
something like it’s so difficult to design websites like we use or look around our day to day life.
e.g: Facebook, Google, Amazon, Flipkart, Snapdeal and many more.

But if we really think about it, Scaring is natural, comes in mind when we look on it as a bunch of
graphical elements like different colours, different kind of fonts, images, Card views, Tables,
Animations, etc. and the most interesting one is the term called ‘Responsive’ websites, responsive
websites are those websites which change it’s element’s alignments, spacing, etc according to the
device it’s browsing.

But nowadays it’s not a very hard concepts anymore, you can easily design your website
responsive with the help of some predefined libraries, we have so many types of frameworks
available for designing web sites and the best thing is that it’s all freely available to use, you just
need to learn ‘How to use it’. Now if you are wondering about how to learn it then just don’t
worry about it. I am sharing one of the best sources available on the Internet to learn all these
things freely and easily, you just need to follow it and practice it own.

33
Web Development Introduction

If you are reading this Blog then definitely you want to become a website developer, and if you
really want to become a developer.

Waw! it’s really dame true, to learn website designing web is the best place you will ever have. It
will be something like you no need to study theory concepts of something first then do the practice
of that, what actually we all do during our academics. You will learn the concept with the whole
details about the effect of that learning. You will see all different kind of things that developed day
by day and when you will observe it, you want to do it yourself which emphasis you to learn more
day by day. You will be always engaged with the field you are working on. Let’s start learning
Web…

Stage 1 –

HTML:
 HTML, you have heard about it lots of times before. If I am not wrong HTML is the
language you have learned in your school life. Yes, it’s actually the same as what you have
learned a long time ago but as long as time changes technologies are changes. Nowadays as
you have grown up, even HTML has been grown up too, now there is called HTML5 which
comes in existence. What? Worried about what is it? Don’t be. I just said that as we have
grown up HTML has grown up too but the difference between us and HTML is, it changed its
name to HTML5. In HTML5, you can not just prepare the basic structure of the web page but
we have many more things that we can do. We can store and process values on variables on-
page itself without any databases like we do in any programming languages (Temporary
variables), we can develop games on it. No need for flash to play animations on it. Even we
can develop a fully functional blog with HTML4 itself without any help to server-side
scripting languages.

Stage 2 –

34
Web Development Introduction

CSS: 
We live in such a society where everybody wants to look pretty, beautiful, to achieve this
everyone does makeup. Similarly, CSS does for HTML. CSS creates the beauty on HTML
pages. With the help of CSS, you can make your web page colorful and smooth. You can even
create animations using CSS. You can add transitions, changing the scrolling events of your
pages, mouse click events and many more. But as HTML changes to HTML5, CSS also has
been changed to CSS3.

Stage 3 –

JAVASCRIPT: 
You have learned how your site will look like, you have designed the beauty of your page
yet. Now, it’s turn to create some useful tasks that your web page elements will do when some
activities performed on your web pages like button click events, mouse over any text, playing
and pausing some animations on page, etc. With the help of JAVASCRIPT, you can do that
easily. One of the best scripting languages used to make a web page more smooth, flexible
and platform-independent is javascript. It’s not that easy to learn but whatever you learned at
an easy level, that will be enough to do your all tasks.

Stage 4 –

BOOTSTRAP:
 Remember the term Responsive ? Okay, let me explain to you what exactly responsive
website means. Responsive websites are those sites which change its element’s alignments,
spacing according to the screen size of the device it is browsing. This is the technology called
Bootstrap which makes it easier to design a responsive web site. Bootstrap is an open-source
front end framework that works with HTML, CSS, and JavaScript to design responsive web
sites for your laptops, tablets and mobile devices.

35
Web Development Introduction

Stage 5 –

PHP: 
As up to now you have learned about how your web page will look like, how the interface
of your web page users will face. How it reacts based upon the user’s activity but only at the
client machine. But nowadays we have the works of a lot perform on the back end of our web
page called server. So to code on server-side we need server-side scripting language which
one is PHP (Hypertext Preprocessor). We have also many more other server-side scripting
languages are there like Asp.net, JSP etc but PHP is one of the easiest and most used server-
side scripting languages.

As PHP is a server-side scripting language it must have a server to run? So how can you do
that? Surely you can not afford a server to learn PHP. So don’t worry about it. We have a lot
of tools available in the IT market which helps you to run PHP codes on your local machine.
Following tools can be used to run PHP codes on local machine :

 WAMP(Windows, Apache MySQL, PHP) – For windows machines


 LAMP(Linux, Apache, My-Sql, PHP) – For Linux based machines
 XAMP(X-for any OS, Apache, My-Sql, PHP) – It can work on any OS

Stage 6 –

MySQL: 
Now it comes to databases, We have so many data available to display on the web page
but we just can’t simply store them on web pages. A database management system is
important because it manages data efficiently and allows users to perform multiple tasks with
ease. A database management system stores organizes and manages a large amount of
information within a single software application. MY-SQL is one of the open-source database
management available in the IT industry. I am recommending learning PHP language instead

36
Web Development Introduction

of ASP and JSP just because it provides easiest way to connect MY-SQL database with it If
you have a basic concept of C/C++ Programming languages. Even you can practice the
connectivity of PHP and MY-SQL on your local machine with the help of tools discussed
above.

Advance Technologies to Learn: Why should you learn advanced technologies? Obviously, this
question will be arising in your mind. It’s absolutely true that you can develop a fully functional
website with a well-designed front end and a good performance back end but what if you want to
design such a web site like Amazon, Flipkart, Google, Microsoft, Facebook, Snapdeal, OLX, etc.
Those websites are not just using the above languages, tools but they use more than these
technologies that I am going to explain to you as below.

Frameworks: Frameworks are built to make building and working with programming languages
easier. Frameworks typically take all the difficult, repetitive tasks in setting up a new web
application and either does them for you or make them very easy for you to do

 Django – A full-stack framework built using python


 Ruby On Rails – A full-stack framework built using ruby
 Node Js – A server-side JavaScript framework
 PhoneGap or Cordova – A mobile framework that exposes native api’s of iOS and Android
for use when writing JavaScript
 WordPress – A CMS (content management system) built on PHP. Currently, about 20% of
all websites run on this framework
 Drupal – A CMS framework built using PHP
 Angular Js – A front-end JavaScript framework

Libraries: Libraries are groupings of code snippets to enable a large amount of functionality


without having to write it all by yourself. Libraries typically also go through the trouble to make

37
Web Development Introduction

sure the code is efficient and works well across browsers and devices (not always the case, but
typically they do).

 Jquery – Its a javascript library which makes HTML documents traversal, manipulations, event handling,
animations and AJAX with a much easy to use API that works with multiple browsers.

 UnderScoreJs – Its also a javascript library which provides a whole mess of functional programming helpers.

API: An API is an application programming interface. It is created by the developer of an


application to allow other developers to use some of the application’s functionality without
sharing code. Developers expose “endpoints” which are like inputs and outputs of the application.
Using an API can control access with API keys. Examples of good APIs are those created by
Facebook, Twitter, and Google for their web services.

For larger organizations and businesses, web development teams can consist of hundreds of people
(web developers) and follow standard methods like Agile methodologies while developing websites.
Smaller organizations may only require a single permanent or contracting developer, or secondary
assignment to related job positions such as a graphic designer or information systems technician. Web
development may be a collaborative effort between departments rather than the domain of a designated
department. There are three kinds of web developer specialization: 

I. Front-End Developer

II. Back-End Developer

38
Web Development Introduction

III. and Full-Stack Developer

Front-end developers are responsible for behaviour and visuals that run in the user browser,
while back-end developers deal with the servers. There are two broad divisions of web development
– front-end development (also called client-side development) and back-end development (also
called server-side development). The frontend developer would create the theme: the images, style,
and presentation. While the backend developer may work on managing the database, as well as the
site’s users, security, and site performance issues.

I. Front-End Developer
Front-End Developer also known as “Web Designer” or UI/UX Designer (User
Interface/User Experience)

39
Web Development Introduction

Definition: 

Front end development manages everything that users visually see first in their
browser or application. Front end developers are responsible for the look and feel of a site. 
“Front End” typically refers to all the kinds of stuff that the user actually sees on the website,
once it loads completely. This is why it is also called the “client-side” of the front-end.
This includes user interface elements like menus and dropdowns, navigation bar, sidebars,
headers, footers and also CSS animations. The front end of any website has to communicate with
both, the user and the back-end part of the system. So, the front-end developer is responsible for
the aestheticism, design and look of the website. Also, as per the recent market trends, a front-end
developer must have the knowledge of making a website responsive to different devices, browsers,
and screen sizes. This is because the market is very versatile, and different browsers and devices
have some complications and properties that have to be kept into consideration before making a
website or a blog (for example, the shadow property).

A front-end developer focuses heavily on the understanding of HTML, CSS and JavaScript.


Front-end developers also have to make sure that the user’s interaction with the website is
smooth and friendly. A front-end developer doesn’t need back-end development skills and the
websites created by the front-end developers doesn’t need to interact with information stored in a
database in order to be functional.
Now talking about the job opportunities, there are multiple job positions and vacancies available
in the industry. However, the skill set required for a job profile at a company might differ
completely from the skill set required at some other company for the same job profile.
This means that one job title may mean something at one company, and then complete another
thing at some other company. So, it’s always better, not to guess anything about the job profile by
yourself, and to search and read about the skills needed and the work that you will have to do after
getting hired, before going for the interview.

40
Web Development Introduction

Most commonly seen job titles, related to the front-end development are:
1. Front End Developer
2. UI/UX designers
3. Web Designer
 UI stands for User Interface while UX stands for User Experience. UI designers have to take
care of the virtual aspects of the website’s design while the UX designers conducts user testing to
ensure the smooth running of the website.
 A web designer uses graphics and graphic design software like Adobe Photoshop, Illustrator or
InDesign to create a look for the website. A strong grasp on a variety of concepts including color
and typography, special relationships, audience and user experience is required to be a good web
designer. So, the main work of a website designer is to create the most aesthetic look possible for
a website using software like Adobe Photoshop, InDesign etc.
 Whereas, a web developer is responsible for developing the design given by the web designer
to a working model that can be accessed by different users over the globe. HTML, JavaScript,
JQuery, and CSS are some of the tools that a web developer must have in their kit.

1. Front end Languages: The front-end portion is built by using some languages


which are discussed below:

 HTML: 
HTML stands for Hyper Text Mark-up Language. It is used to design
the front-end portion of web pages using mark-up language. HTML is the
combination of Hypertext and Mark-up language. Hypertext defines the link
between the web pages. The mark-up language is used to define the text
documentation within tag which defines the structure of web pages.

 CSS: 

41
Web Development Introduction

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

2. Front End Frameworks and Libraries:

 AngularJS: 
AngularJs is a JavaScript open source front-end framework that is
mainly used to develop single page web applications (SPAs). It is a
continuously growing and expanding framework which provides better ways
for developing web applications. It changes the static HTML to dynamic
HTML. It is an open source project which can be freely used and changed
by anyone. It extends HTML attributes with Directives, and data is bound
with HTML.

 React.js:
React is a declarative, efficient, and flexible JavaScript library for
building user interfaces. ReactJS is an open-source, component-based front-
end library responsible only for the view layer of the application. It is
maintained by Facebook.
Bootstrap: Bootstrap is a free and open-source tool collection for creating

42
Web Development Introduction

responsive websites and web applications. It is the most popular HTML,


CSS, and JavaScript framework for developing responsive, mobile-first web
sites.

 jQuery:
jQuery is an open source JavaScript library that simplifies the
interactions between an HTML/CSS document, or more precisely the
Document Object Model (DOM), and JavaScript. Elaborating the terms,
jQuery simplifies HTML document traversing and manipulation, browser
event handling, DOM animations, Ajax interactions, and cross-browser
JavaScript development.

 SASS: 
It is the most reliable, mature and robust CSS extension language. It is
used to extend the functionality of an existing CSS of a site including
everything from variables, inheritance, and nesting with ease.

II. Back-End Developer

Definition: 
Back end development refers to the server side of an application and everything that
communicates between the database and the browser.

The part of the application that lives basically on the server is called the backend of
the website. Since this part is accessible to the website visitors and users, hence it is also
known as the server-side of the website. The main objective of the backend is to make sure

43
Web Development Introduction

that correct data is sent out to the browser at the user’s request. Although it is not an easy
process and a lot has to be done to retrieve the information from the backend and then
display it to the user on the front-end.
Let’s take an example to make the things more clear; A student wants to get his semester
result from his college’s website. After filling the required form (enrollment number, Date
of Birth etc) he submits the submit button. After the submit button is pressed, the website
starts matching the information entered by the user with the information stored in his
database. If the information is found to be correct, the back-end collects and processes the
data from the back-end and sends it to the front-end of the website where the result is
eventually displayed to the student.

Back-end developers use languages such as Java, PHP, Ruby on Rails, Python, and.Net to
get the work done. Back-end development is very much required to create a dynamic website.
Dynamic websites are those websites whose data keeps on updating itself with time. For
example, When you log into your twitter account after a fair amount of time, you are
automatically greeted with the latest updates from people you follow on your feed. They’re
not going to be the same updates that you saw yesterday. How did the page change? There’s
no chance that any company would recruit employees just to manually update the news feed.
Actually, a script on the Twitter back-end would have received the updates and re-generated
the front-end accordingly.

 Examples of dynamic sites include Facebook, Twitter, and Google Maps.


The back-end has three parts to it: Server, Application, and Database.
Note: Technologies like MySQL and MongoDB are used for the database management.

1. Back end Languages: 

The back-end portion is built by using some languages which are discussed
below:

44
Web Development Introduction

 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
server-side scripting language.

 C++:
 It is a general-purpose programming language and widely used now a
days for competitive programming. It is also used as backend language.

 Java: 
Java is one of the most popular and widely used programming language
and platform. It is highly scalable. Java components are easily available.

 Python:
Python is a programming language that lets you work quickly and
integrate systems more efficiently.
 JavaScript: 
JavaScript can be used as both (front end and back end) programming
languages.

 Node.js: 
Node.js is an open source and cross-platform runtime environment for
executing JavaScript code outside of a browser. You need to remember that
NodeJS is not a framework and it’s not a programming language. Most of
the 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, Walmart and so on.

45
Web Development Introduction

2. Back End Frameworks:


 The list of back end frameworks are: Express, Django, Rails, Laravel,
Spring, etc.
 The other back end program/scripting languages are: C#, Ruby,
REST, GO etc.

 Example: - Here’s an example. Say you log into your Twitter account, and you are greeted
with the latest updates in your News Feed. They’re not going to be the same updates that
you saw yesterday. How did the page change? Did a Twitter employee manually edit the
page to update your news feed? Of course not. A script on the Twitter back-end would have
received the updates and re-generated the front-end accordingly.

III. Full-Stack Developer


Full-stack developers are comfortable working with both the front and back ends. In
the Odin Project, Full-stack development, covering all aspects of web development.

We can define full-stack developer as someone who is highly proficient in one of the two
ends but can also handle working with the other end whenever necessary. Basically, the full
stack developers are familiar with both front and back-end development. However, they may
not have the same depth of knowledge as someone who specializes in either front end or back
end. This is why sometimes they are referred to as the ‘Jack of both trades’.

Front-end web basically composes of the HTML and CSS which are the scripting


language and the JavaScript which is the programming language. The front ends of all the
websites, whether small or large, are built using these three languages. This is why they are
called the Holy Trinity of the Front-End web development.
It is also essential for the full stack developers to be familiar with these three languages, so
they can understand how the server side changes affect the user interface side of the website
(useful for the development of dynamic websites).

46
Web Development Introduction

HTML (Hyper Text Markup Language):

HTML is the language used to create the websites you visit every day, and it provides a
logical way to structure content for websites. We can also define HTML as the language that
helps in creating the backbone of any website.
Below mentioned are the basic HTML tags which divides the whole document into various
parts like head, body etc.

 Every HTML document begins with a HTML document tag. Although this is not
mandatory but 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 document like the title of the page and other miscellaneous information. These
information’s are enclosed within head tag which opens with <head> and ends
with </head>. The contents will of this tag will be explained in the later sections of course.

 <title> : We can mention the title of a web page using the <title> tag. This is a header
information and hence 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>. Every content enclosed within this tag will be shown
on the web page be it writings or images or audios or videos or even links. We will see

47
Web Development Introduction

later in the section how using various tags we may insert mentioned contents into our web
pages.

<html>

<head>

<!-- Information about the page -->

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

<title>GeeksforGeeks</title>

</head>

<body>

<!--Contents of the webpage-->

</body>

</html>

This code won’t display anything. It just shows the basic pattern of how to write the
HTML code and will name the title of the page as GeeksforGeeks. is the comment tag in
HTML and it doesn’t read the line present inside this tag.

CSS (Cascading Style Sheets):


CSS is used to stylize the HTML contents present on a website. This includes modifying the
page color, font-family, font-size, element positioning and more.
There are three types of CSS:
1. In a separate file (external)
2. At the top of a web page document (internal)
3. Right next to the text it decorates (inline)

48
Web Development Introduction

External Style Sheets: Separate files having CSS instructions with the file extension (.css). The
main advantage of using external style sheet is that you can change the whole website’s style at
once, without rewriting or modifying the style tag every page. Thus saving a lot of time and
energy. However, the external style sheet must be linked into the HTML file by using the tag
between for making it work.

<head>
<link rel="stylesheet" type="text/css" href="gfg.css">

</head>

Internal Styles: Placed at the top of each web page document before any of the content is listed. The
internal style CSS codes are written between the head tags in the of the HTML file itself. Internal
styles are very easy to find and they are given the second highest priority, next to the external style
sheets.

<head>

<style>

body {

background-color: linen;

h1 {

color: maroon;

font-style: bold;

49
Web Development Introduction

</style>

<body>

<h1>Hello, Web Developers</h1>

</body>

</head>

output:

Hello, Web Developers

Inline Styles: Placed right where you need them, next to the text or graphics you wish to decorate.
The inline styles can be inserted in the middle of the HTML code. This gives the real freedom to
specify each web page element, however, can make the maintenance work of the website difficult.

<h1 style="color: blue; font-style: italic;"> Hello, Web Developers </h1>

Output:

Hello, Web Developers

JavaScript:
One thing that must be kept in mind is that JavaScript and Java are completely different
languages, both in concept and design, and both have no correlation with each other. Java is an
Object-Oriented Programming (OOP) language created by James Gosling of Sun Microsystems.
JavaScript is a scripting language and was originally known as Live Script. JavaScript is used in
front-end development whereas Java is used for back-end development in web development.

50
Web Development Introduction

The main function of a JavaScript is to add logic and interactivity to a webpage (For Ex. A link
changes its colour once the user clicks on it).
However, the script should be included in or referenced by an HTML document for the code to be
interpreted by the browser. It means that a web page need not be a static HTML, but can include
programs that interact with the user, control the browser, and dynamically create HTML content.

The merits of using JavaScript are:


1. Less server interaction: The user input can be validated before sending the page off to the
server. This saves server traffic, which in turn make the website faster to load.
2. The visitors don’t have to wait for a page reload to see if they have forgotten to enter
something. For example, the website instantly notifying the user about the corrections
needed in form before it is submitted.
3. Such interfaces can be created that that will change the font-style or the font-color of a link,
once the user hovers over them with a mouse.
4. JavaScript can be used to include items as drag-and-drop components and sliders, thus
creating a richer and better interface for the user.

Web Development Jobs


Tech Jobs are a great option for those who are interested in programming and computers
as they form a leading employment sector with vast returns for employees. The Information
Technology (IT) sector is booming currently, with an estimated 7.7% contribution to the
Indian GDP in 2017. Also, the revenue generated by the IT industry in 2018-2019 observed
the growth of 8% to reach $167 billion.

In the current technology dominated the world, Tech Jobs are ever increasing in various
lucrative fields ranging from Data Analysis to Machine Learning to Cloud Development and
so on.

The top 10 highest paying tech jobs in the current scenario are provided below to help you
know the market better and maintain your edge in this super-competitive environment.

51
Web Development Introduction

1. Data Scientist

The Data Scientist analyses complex data to find common trends and patterns that
eventually help in making more informed decisions. This involves collecting the data from
various sources, cleaning it to ensure accuracy and then using various data models and
algorithms to analyze the data. After that, the data scientist may use data visualization
techniques to convey the findings to company officials.

Some of the skills required for a Data Scientist are knowledge of statistical analysis,
knowledge of programming languages such as Python, SQL, etc. as well as good data
intuition and business acumen.

The average pay for a Data Scientist is $141,000 per year.

2. IOT Solutions Architect


The IOT Solutions Architect is responsible for the development of practical IOT solutions
and the applications using IOT technology. In essence, the IOT Solutions Architect handles
the development of the whole IOT ecosystem. This can involve making abstract IOT ideas
more concrete, helping with interdepartmental IOT constructs and so on.

Some of the skills required for an IOT Solutions Architect are knowledge of machine
learning, good programming skills, knowledge of hardware architecture as well as knowledge
about the IOT solutions.

The average pay for an IOT Solutions Architect is $133,000 per year.

3. Software Architect
The Software Architect interacts with the clients as well as developers to optimize
the development process by making various design choices. This requires a keen
understanding of software architecture. Also, software prototypes are developed by the
Software Architect using the customer requirements to ensure the quality of the design.

52
Web Development Introduction

Some of the skills required for a Software Architect are technical knowledge, good
analytical and programming skills as well as communication and management skills.

The average pay for a Software Architect is $130,000 per year.

4. BlockChain Engineer
The BlockChain Engineer develops and implements digital solutions using the
BlockChain technology. So the system architecture, decentralized applications, etc. can
be constructed by BlockChain Engineers.

Some of the skills required for a BlockChain Engineer are a thorough knowledge of
various technologies that are used in BitCoin, Ripple, Etherium, etc. as well as analytical
skills and attention to detail.

The average pay for a BlockChain Engineer is $130,000 per year.

5. DevOps Engineer
The DevOps engineer handles the deployment and network operations of an
organization by overseeing the code releases. This involves handling the deployment
model, managing the resources for provisioning, monitoring the release performance, etc..

Some of the skills required for a DevOps Engineer are good coding and scripting skills as
well as knowledge of DevOps tools such as Gradle, Git, Jenkins, etc. Also, knowledge of
Linux or Unix system administration is required.

The average pay for a DevOps Engineer is $123,000 per year.

6. AI Architect
The AI Architect handles the AI development and management of an organization.
This involves creating AI solutions for the client as well as creating the system
architecture based on the AI frameworks.

53
Web Development Introduction

Some of the skills required for an AI Architect are knowledge of languages used for
statistical computing is required such as Python, R, etc. as well as technologies in the
domain of AI such as Machine Learning, Deep Learning, Statistical Learning, Neural
Networks, etc.

The average pay for an AI Architect is $119,000 per year.

7. Cloud Architect
The Cloud Architect manages the cloud computing strategy of an organization which
includes cloud management, cloud application design, cloud architecture, cloud
deployment models, etc.

Some of the skills required for a Cloud Architect are the knowledge of an operating
system such as Linux, Unix, etc, knowledge of cloud computing services, cloud security,
etc.

The average pay for a Cloud Architect is $118,000 per year.

8. Data Warehouse Architect


The Data Warehouse Architect creates data warehouse designing solutions and works
with data warehouse technologies for effective management in a company. In essence, the
vast amounts of data in the data warehouse of a company is controlled by the Data
Warehouse Architect.

Some of the skills required for a Data Warehouse Architect are knowledge of data
warehousing technologies and database design, knowledge of some technologies such as
J2EE, Cognos, etc. as well as communication skills.

54
Web Development Introduction

The average pay for a Data Warehouse Architect is $116,000 per year.

9. Full Stack Developer


The Full Stack Developer has the ability to work on all aspects of application
development and so requires the knowledge of both the front-end and back-end
development as well as database, networking, system infrastructure, etc.

Some of the skills required for a Full Stack Developer are the basics of database
technologies, web development, API development, etc. Also, knowledge of various
technologies such as AngularJS, MongoDB, Node.js, etc is required.

The average pay for a Full Stack Developer is $110,000 per year.

10. Data Security Analyst


The Data Security Analyst handles the security of computers and the network as well
as overseeing the system protection infrastructure. The security policies of the company
are also imparted to the employees by the Data Security Analyst.

Some of the skills required for a Data Security Analyst are knowledge of computer
networks and operating systems as well as information about the risk management
factors.

The average pay for a Data Security Analyst is $90,000 per year.

55

You might also like