Web Development Report PDF 2 PDF

A
INDUSTRIAL TRAINING REPORT
ON
Web Development Course- Build 15

Projects
Submitted by
Harshal Babanrao Wahatule
Roll no: 2130331372059
Department of Electronics & Telecommunication Engineering

Dr. Babasaheb Ambedkar Technological University, Lonere.
Lonere-402103
2022 -2023
ACKNOWLEDGEMENT
I would like to express my deep and sincere gratitude to my guide, Dr.S.L.Nalbalwar
of Electronic and Telecommunication Engineering for their unflagging support and
continuous encouragement throughout the internship work. Without their guidance and
persistent help this report would not have been possible.
I must acknowledge the staffs of Electronic and Telecommunication Engineering for

their planning, support and helpful guidance.
Thank you
MR. HARSHAL BABANRAO WAHATULE

ROLL NO. 2130331372059
CERTIFICATE
This is to certify that the Internship entitled “Web Devlopment Cource-Build 15

Projects” submitted by Harshal Babanrao Wahatule (Roll no. 2130331372059) is
record of bonafide work carried out by him under my guidance in the partial fulfilment the
requirement for the award of Degree of B.Tech. in Electronics and Telecommunication
Engineering course of Dr. Babasaheb Ambedkar Technological University, Lonere (Dist.
Raigad) in the academic year 2022-2023.
Prof. S. L. NALBALWAR
Head of Department
Electronics and Telecommunication Engineering

Dr. Babasaheb Ambedkar Technological University
Lonere-Raigad 402103
DATE:
PLACE: Lonere, Raigad (402103)
Internship Certificate
Abstract
Web development is the building and maintenance of websites. Web develops- meant
is the work involved in developing web pages, a web site for the internet (World Wide Web)
or an intranet (a private network). As we know, websites are useful for any type of work such
as business, social awareness, etc. It’s most of the work happens in the background to make
a website look great, work fast and perform well with the seamless user experience. There
are three sub categories in the web development.
• Front-End web development
• Back-End web development
• Full-stack web development
Front end take care about only client-side interface. In this category, we work on
layouts, design, and interactivity. To develop this type of interface, we use HTML, CSS, and
JavaScript. This will help to develop smooth, interactive, user-friendly interface. Back end
takes care of what is going on behind the scenes. This includes the data storage, data insertion,
data updating, data deletion, fetching data from the stored data, and many more. We know
that without data, and data operations, there will no front end. Full stack web development
includes the both front end and back end. Full-stacker take care of both the front-end and the
back-end, and need to know how the web works on all levels, in order to determine how the
client- and server- sides will relate.
Name: Harshal B. Wahatule

PRN no.: 2130331372059
Semester: 3th
Branch: Electronic and Telec-
comunication Engineering
Date: / /
INDEX
Sr. No. Title Page No.
• LIST OF FIGURES VIII

• LIST OF ABBRIVESATIONS IX
CHAPTER 1 INTRODUCTION 10
1.1 Introduction 10
1.2 How website works? 11
1.3 What is HTTP? 13
CHAPTER 2 WEB DEVLOPMENT 15

2.1 Type of web development 15
2.2 How to learn? 16
2.3 Why web development? 16
CHAPTER 3 FRONT END WEB DEVELOPMENT 17

3.1 Technologies used for font end 18
3.1.1 HTML 18
3.1.2 CSS 19
3.1.3 JavaScript 21
3.2 Differences between HTML, CSS, JavaScript 22
CHAPTER 4 BACK-END WEB DEVELOPMENT 24

4.1 Technologies used for back end 24
4.1.1 SQL 24
4.2 High level language 24
CHAPTER 5 FULL STACK DEVELOPMENT 26

CHAPTER 8 CONCLUSION 27
• REFERENCES 28
LIST OF FIGURES
FIGURE TITLE OF FIGURE PAGE NO.

NO.
Fig 1.1 Introduction to web development 10
Fig 1.2 Examples of websites 11
Fig 1.3 How website works? 12
Fig 1.4 HTTP request and response 14
Fig 2.1 Types of web development 15
Fig 2.2 Why web development? 16
Fig 3.1 Responsive website 17
Fig 3.2 HTML5 18
Fig 3.3 HTML general format 19
Fig 3.4 CSS3 20
Fig 3.5 General format of CSS3 21
Fig 3.6 Java Script 22
Fig 3.7 Difference between HTML, CSS 23
Fig 4.1 SQL 24
Fig 4.2 High level language with SQL 25
Fig 5.1 Full Stack web development 26
VIII
LIST OF ABBREVATIONS
HTML HYPER TEXT MARKUP LANGUAGE
CSS CASCADING STYLE SHEET
SQL STRUTURED QUERY LANGUAGE
PHP HYPERTEX PREPROCESSOR
URL UNIFORM RESOURCE LOCATORS
IP INTERNET PROTOCOL
HTTP HYPER TEXT TRANSFER PROTOCOL
WWW WORLD WIDE WEB
IX
AN INERNSHIP SEMINAR REPORT ON “WEB DEVELOPMENT COURCE”
Chapter 1
INTRODUCTION
Web development is also called as web programming. It in-volves the creation of dynamic
web applications. We are in the 21st century, and we see that the most of the work is digitalized
right now. We will do it online from home itself. There comes an important role of website.
Websites are the main interface between business owner and the customers. We know that
the websites plays an important role in almost all fields right now. Hence the web development
is a good career in today’s world.
Figure 1.1: Introduction to web development.
Website is a collection of related web pages that involves text, images, videos, audio, stickers,
and many more. The main or the first page of the website is called home page. The first
website was introduced on 6 August 1991. It was developed by Tim Berners-Lee at CERN.
10
DR. BABASAHEB AMBEDKAR TECHNOLOGICAL UNIVERSITY
DEPARTMENT OF ELECTRONICS AND TELECOMMUNICATION.
As of January 2018, there were around 1.7 billion websites on the internet. There are many
examples of the websites.
Everything that run or load on browser is a website. The good example of the website is all
social media. We daily uses much more websites. some examples are google.com,
amazon.com, facebook.com, etc.
Figure 1.2: Examples of websites.
Now we have seen introduction and examples of the websites. Let’s see how websites
work?
1.1 How website works?

1. A user enters a URL into a browser (for example, google.com. This request is passed
to a domain name server.
11
2. The domain name server returns an IP address for the server that hosts the Website
(for example, 68.178.157.132).
3. The browser requests the page from the Web server using the IP address specified
by the domain name server.
4. The Web server returns the page to the IP address specified by the browser requesting
the page. The page may also contain links to other files on the same server, such as
images, which the browser will also request.
Figure 1.3: How website works?
12
The requests from browser to server and back server to the browser is done in the form of
HTTP. Let’s see what is HTTP?
1.2 What is HTTP?

As we seen above, the requests are sent and received with the
help of HTTP. HTTP stand for Hyper Text Transfer Protocol. Communication between
client computers and web servers is done by sending HTTP Requests and receiving HTTP
Responses. The World Wide Web (WWW) is commonly known as the web. It is an
information system where documents and other web resources are identified by Uniform
Resource Locators (URL). They are interlinked by hypertext, and accessed over the internet.
The resources of the web are transferred via HTTP.
The steps of the communication between clients and servers is
done as per the following steps. Let’s see the steps of the same.
1. A client sends a HTTP request to the web with URL. We use browser to do it.
2. A web server received a request.
3. A server runs an application and process the request.
4. The server returns an HTTP request to the browser.
5. A client received a response in the form of web pages.
Now let’s see the pictorial figure to understand it in better way.
13
Figure 1.4: HTTP request and response.
14
Chapter 2
WEB DEVELOPMENT
We have seen the brief introduction and working of the websites
in the last chapter. In this chapter we will see the categories in web development, technologies
used in that categories, etc.
2.1 Types of web developer

There are three categories of web development with respect to
the technologies, working, creativity, database operations, etc. The three categories of web
development are as follows:
Figure 2.1: Types of web development.
We will see the whole information about these three categories in separate chapters.
15
2.2 How to learn?

Today we are living in the 21st century and we know that the
most of the work is done online from work with the help of websites. So, learning web
development is very good to anyone. Anyone can learn it by himself/herself.
It’s very easy. There is a roadmap to learn web development. There is a common way to learn
it which is start with basics of the front end. After that go deep in front end, we can use some
frameworks also. Then learn back end. We will require much concentration during the
learning of back-end web development. After that go deep in back end. At the last, build
some real-world projects and practice more. After learning these two categories, you will
become a full stack developer.
2.3 Why web development?

We will see the picture which explain us that why we need web-
sites? and why we should develop websites? Let’s see...
Figure 2.2: Why web development?
16
Chapter 3
FRONT END WEB DEVELOPMENT

Front end development is a practice of converting data into graph-
ical form, and make it interactive. If we want to take some information from the user and
store it in the database. We can collect the information by creating interactive form. Also we
can keep some validations to make keep data clear and pure.
Another main and important thing that we should do as a front
end web developer is make our website responsive. It means our website should display
properly in any device. It may change some layout in different devices like laptop, mobile,
ipad, etc. We have to code separately to make the website responsive. The following image
shows the laptop and mobile view of the same website.
Figure 3.1: Responsive website
17
3.1 Technologies used for front end

There are several technologies, tools, and platforms that can be used to develop the front end
website. We may know the platforms like Wordpress, etc. Now let’s see the technologies
used for front end web development from scratch.
3.1.1 HTML
HTML stands for the Hyper Text Markup Language. It is the Backbone of any website
development process. We know that without HTML the web page does not exists.
Figure 3.2: HTML5
Hyper Text means the text which may have links called as hyperlink. After clicking on this
type of text we will redirect to the given link that id the another web page. Markup
Language means we can convert any data ot text into graphical representation. We can use
pictures, videos, and many more. Let’s take an example of gift. We know that the main thing
is in
18
the box and which is wrap in the beautiful and interactive paper and some colourful flowers.
Same happens with websites also. The main content means the data or text. This main
content that is data or text is written by using HTML. The whole text data which see in the
webpage is written in the HTML. There are many tags in the HTML which helps us to
customize the text and make it little bit interactive. We have to save HTML file with .html
file extension. The general format of the HTML file is looking as follows:
Figure 3.3: HTML general format.
3.1.2 CSS
CSS stand for Cascading Style Sheet. It is used to design HTML tags. Websites should look
good and interactive, and hence CSS used widely on the web. It is a style sheet language
which is used to describe the look and for- matting of a document written in markup language.
It provides an additional feature to HTML. It is generally used with HTML to change the
19
style of web pages and user interfaces. It can also be used with any kind of XML documents
including plain XML, SVG and XUL.
Let’s take the example of gift again. The content is HTML. We
can say that the colourful paper wrapped around the gift is css. Both are used to look the
content beautiful and interactive. We can change whole look of the website by doing small
change in css. Hence CSS is most important for designing the website.
Figure 3.4: CSS3
We can use css in the HTML file or we can create a separate css file. The CSS file is saved
with .css extension. We use css properties to HTML tags to make it interactive. The common
format of the css is as follows.
20
Figure 3.5: General format of CSS3.

If we create an external css file, then we have to link it with html file using link tag of HTML.
3.1.3 JavaScript
JavaScript is a light weight object-oriented programming Lan- gauge. By using JavaScript, we
can make website more interactive and dynamic. If can also be used for validation purpose,
display date and time, display clock, and more.
21
Figure 3.6: JavaScript
Let’s take the previous example of gift. The some interactive flowers are JavaScript. The
main purpose of that is to make the object more interactive , powerful, and ac- curate. We
use JavaScript to make website dynamic. There are many events in the JavaScript. We can
use it to make website dynamic. e.g. Onclick event, we can set some activity on onclick
event of some button. It will make our website more interactive.
3.2 Difference between HTML, CSS, JavaScript

We will see it by using pictorial representation. We can understand it better by using
it.
22
Figure 3.7: Difference between HTML, CSS
23
Chapter 4
BACK-END WEB DEVELOPMENT
Back-end development refers to the server side of an applica-
tion and everything that communicates between the database and the browser. This works
behind the scenes. The data storage, fetch data from database, insert data, update data, remove
data are some common operations in the back end.
4.1 Technologies used for back end

The above-mentioned operations are very important in back end
and are done by using SQL language. We have to use other high-level language with SQL.
4.1.1 SQL
SQL stands for Structured Query Language. SQL can access the database and can
do anything with database as per queries.
Figure 4.1: SQL.

There are queries in sql for any type of operation. e.g. update, insert into, delete, drop, etc.
4.2 High level language

We have to use any one high level programming language with SQL.
We can use any one among C, C++, Java, PHP, etc. The picture of it is as follows:
24
Figure 4.2: High level language with SQL.
25
Chapter 5
FULL STACK WEB DEVELOPMENT
A full stack web developer is a person who can develop both
client and server software. That he/she have a whole knowledge of front end as well as back
end.
Figure 5.1: Full Stack web development.
Full-stack developers are experts in both the front-end and back-end; so, the full stack of
technology that makes up a website. They are proficient in both front-end and back-end
languages and frameworks, as well as in server, network and hosting environments. To get to
this breadth and depth of knowledge, most full-stack developers will have spent many years
working in a variety of different roles.
26
CONCLUSION
This internship provides me a brief knowledge about web development. I have got an
experience of how to work in web development? how to work in industry team? and real world
project process. Web development is widely ranged. We have much more to learn and
implement it in our real-world projects. I have got a practical knowledge of how websites
works? how request goes to server and what the response of the main server? I have got an
opportunity to update my skills and creativity. I worked more in the back end, so I have got a
good experience in back end. I learned how to build a efficient query to work it faster and
correct.
27
REFERENCES
[1] HTML, CSS, JavaScript, SQL, PHP on W3school.com
[2] HTML, CSS, JavaScript, SQL, PHP on javatpoint.com
[3] Front end development on Wikipedia.
[4] back-end development on Wikipedia.
28

Web Development Report PDF 2 PDF

Uploaded by

Copyright:

Available Formats

Web Development Report PDF 2 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Development Report PDF 2 PDF

Uploaded by

Copyright:

Available Formats

A

INDUSTRIAL TRAINING REPORT

Web Development Course- Build 15

Department of Electronics & Telecommunication Engineering

I must acknowledge the staffs of Electronic and Telecommunication Engineering for

MR. HARSHAL BABANRAO WAHATULE

This is to certify that the Internship entitled “Web Devlopment Cource-Build 15

Electronics and Telecommunication Engineering

• Front-End web development

• Back-End web development

• Full-stack web development

Name: Harshal B. Wahatule

Sr. No. Title Page No.

• LIST OF FIGURES VIII

CHAPTER 2 WEB DEVLOPMENT 15

CHAPTER 3 FRONT END WEB DEVELOPMENT 17

CHAPTER 4 BACK-END WEB DEVELOPMENT 24

CHAPTER 5 FULL STACK DEVELOPMENT 26

FIGURE TITLE OF FIGURE PAGE NO.

HTML HYPER TEXT MARKUP LANGUAGE

CSS CASCADING STYLE SHEET

SQL STRUTURED QUERY LANGUAGE

PHP HYPERTEX PREPROCESSOR

URL UNIFORM RESOURCE LOCATORS

HTTP HYPER TEXT TRANSFER PROTOCOL

WWW WORLD WIDE WEB

Figure 1.1: Introduction to web development.

Figure 1.2: Examples of websites.

1.1 How website works?

Figure 1.3: How website works?

1.2 What is HTTP?

2. A web server received a request.

3. A server runs an application and process the request.

4. The server returns an HTTP request to the browser.

5. A client received a response in the form of web pages.

Now let’s see the pictorial figure to understand it in better way.

Figure 1.4: HTTP request and response.

2.1 Types of web developer

Figure 2.1: Types of web development.

2.2 How to learn?

2.3 Why web development?

Figure 2.2: Why web development?

FRONT END WEB DEVELOPMENT

Figure 3.1: Responsive website

3.1 Technologies used for front end

Figure 3.2: HTML5

Figure 3.3: HTML general format.

Figure 3.4: CSS3

Figure 3.5: General format of CSS3.

Figure 3.6: JavaScript

3.2 Difference between HTML, CSS, JavaScript

Figure 3.7: Difference between HTML, CSS

4.1 Technologies used for back end

Figure 4.1: SQL.

4.2 High level language

Figure 4.2: High level language with SQL.

Figure 5.1: Full Stack web development.

[2] HTML, CSS, JavaScript, SQL, PHP on javatpoint.com

[3] Front end development on Wikipedia.