V.

RAMAKRISHNA POLYTECHNIC
COLLEGE

WEB
DEVELOPMENT

WILL BE PRESENTED BY
M. SANJAY
II YEAR
DEPARTMENT OF COMPUTER ENGINEERING
V. RAMAKRISHNA POLYTECHNIC COLLEGE –
THIRUVOTTIYUR.
 VISION
◦ BRIEF HISTORY OF WEB.
◦ WHAT IS WEB DEVELOPMENT?
◦ IMPORTANCE OF WEB DEVELOPMENT.
◦ FRONT – END AND BACK – END DEVELOPMENT.
◦ FRONT – END TOOLS: HTML, CSS AND JAVASCRIPT.
◦ DETAILED VIEW ON HTML, CSS AND JAVASCRIPT.
◦ JQUERY.
◦ BACK – END DEVELOPMENT TOOLS.
◦ HOSTING A WEBSITE.
 BRIEF HISTORY OF WEB
Tim Berners-Lee, a British scientist at CERN who invented the World Wide Web
(WWW) in 1989 and first version of Hyper Text Markup Language (HTML) in 1991.

◦ The Web was developed for automated information-sharing among scientists

in universities and institutes around the world.
◦ The fundamental idea behind the WWW was to merge the evolving technologies
of computers, data networks, and hypertext with global information systems.
◦ HTML is a standard markup language for creating Web pages which describes the structure of a Web
page that consist of a series of elements tell the browser how to display the content.
 WHAT IS WEB DEVELOPMENT?
Web Development refers the act of building web pages,
websites or anything over the internet from scratch.
Websites and web-based applications like social networking
sites, online e-commerce sites, and others related to web
are built and maintained using this field.
For Example: www.instagram.com , www.amazon.in , etc.

Developing a website is all about making it look great, run smoothly, and have a seamless user experience.
Web Development has 2 modules: Front – End Development and Back – End Development.
 IMPORTANCE OF WEB DEVELOPMENT
There are many uses for websites and purpose for web development in different fields for various necessity.

For Example: A Website is very essential for a Business.

A company’s website and it’s interface play an important role in:
◦ Generating additional profits, as you need to make your voice heard, your brand seen, and reach the goals.
◦ Website reflects your professionalism and credibility which can bring business from any part of the world.
◦ Though websites are freely available 24/7, it act as your first round-the-clock salesperson.

Finally, you need to have web development skills to develop and design a website.
 FRONT – END &
BACK – END DEVELOPMENT
FRONT-END DEVELOPMENT:
◦ Front - End Development is the process of building and designing websites or web applications with Graphical User
Interfaces.
◦ Front - End Development involves the use of major web development languages, such as HTML, CSS, JavaScript and
front – end components such as Bootstrap, CDNs, Fonts & Icons, which enable users to interact with the app or website.

BACK-END DEVELOPMENT:
◦ Back - End Development is the process of building ‘Behind-The-Scene’ functionality of web applications. It is everything
that the users don't see and contains behind-the-scenes activities that occur when performing any action on a
website.
◦ Back-end development involves the use of programming languages such as PHP, Python, JavaScript, databases such as
MongoDB, MySQL, and servers such as Apache.
 FRONT – END: HTML, CSS &
JAVASCRIPT
HTML is a standard markup language for creating Web pages
which describes the structure of a Web page that consist of a
series of elements tell the browser how to display the content.

CSS (Cascading Style Sheets) describes how HTML elements

should appear on screen, paper, or on other media.
Multiple web pages can be laid out simultaneously with it.

The JavaScript programming language, also known as JS, is a

core technology of the WWW, along with HTML and CSS.
JavaScript was created to “MAKE WEB PAGES ALIVE”.
 DETAILED VIEW ON HTML
HTML5 (2014) is the newest version and the other versions of HTML include HTML 1.0 (1991), HTML 2.0 (1995), HTML 3.2
(1997), HTML 4.01 (1999), and XHTML (2000).

FEATURES OF HTML5:
◦ HTML5, user interaction has been greatly improved, as well as device burden has been reduced.
◦ HTML5 supports all types of media applications and files and also provides full support for JavaScript to run in the background .

HTML5 STRUCTURE:
<!DOCTYPE HTML>
<HTML>
<HEAD><TITLE> </TITLE></HEAD>
<BODY> </BODY>
</HTML>
 DETAILED VIEW ON HTML
ADVANCE HTML TAGS AND FORMATTING TAGS:
◦ LINK TAGS - Link tags <link> or Anchor tag<a> is used to link 2 or more HTML pages together is called THEORTICAL LINK
and HYPERLINK respectively.
◦ LIST TAGS – List tags is used to display the data in Ordered list or Unordered list format.
A List is created by using <ol> (ORDERED LIST) and <ul> (UNORDERED LIST) and Data is given in <li> tag (Unpaired tag).
◦ TABLE TAGS – Table tags is used to display the data in table format by using <table>, <tr> (Represents the starting of Column or
Row), <th> (Used to give Heading to the Column), <td> (Used to give data).
Table tags also has dedicated formatting properties to align the data according to user requirement.
For Example: Align, Cellpadding, Cellspacing, Colspan, Rowspan, etc.
◦ FORM TAGS – Form tags makes the HTML page an user – interactive environment. Forms are created by using <form> tag (used
to create a form) and <input> tag used within <form> tag used to create form control, there are various form controls in Form such
as buttons, text boxes, etc.
 DETAILED VIEW ON HTML
◦ FRAME TAGS – Frame tags is used to divide the browser window into multiple regions called Frames and each frame can
contains different HTML document.
Frames are created using <frameset> (Used to divide the browser window into frames) and <frame> (used to load a HTML
document to be displayed in each frame) tag.
 DETAILED VIEW ON HTML
◦ CANVAS ELEMENT: Used to use graphics in the webpage. Canvas Element also has properties to align the data.
◦ MEDIA ELEMENT: Used to include Audio or Video Clippings in the HTML webpage by using the <audio>, <video>, <source>,
<embed>, etc.
◦ ARTICLE ELEMENT: Used to represent an independent piece of content of a document, such as a blog entry or newspaper
article using <article> tag. and many more new elements.

SPECIAL TAGS:
◦ <colgroup>: Used to group 2 or more columns together in a table.
◦ <thread>: Used to group header content <thead>, body content <tbody> in the HTML page for formatting. <tfoot> to handle the
last row or column data in table.
◦ <textarea>: Used to get unlimited text area to enter data mostly used inside the form.
For Example: Feedback Form.
and many more new tags.
 DETAILED VIEW ON CSS
KEY FEATURES OF CSS:
◦ Document content is separated from Styling.
◦ Any number of html pages can use the same stylesheet using links.
◦ Styles can be modified without changing the content.
A website is a collection of one or more HTML pages. All the HTML pages can use same stylesheet using External
Stylesheet method or by individual styling methods such as
Internal or Inline Stylesheet.
◦ EXTERNAL STYLESHEET is a separate file which contains codes for
providing styles to the webpage.
◦ INTERNAL STYLESHEET are styles written within the HTML document.
◦ INLINE STYLESHEET are giving styles within the HTML tag.
◦ MULTIPLE STYLESHEET is using more than one Stylesheet for same page.
 DETAILED VIEW ON CSS
These days, most websites use external stylesheets because they make it easier to modify the styles and prevent them from becoming
open source. The use of multiple stylesheets on a single page is known as multi stylesheeting.
CSS has dedicated formatting properties for styling fonts and text, formatting properties for colors and background and
borders property, list property, tables property, CSS forms property to enhance the look.
For Example: front-family, font-size, background-color, background-image, CSS border, CSS margin and etc.
Also, CSS has dynamic effect properties such as Display, Visibility, and Hover that alter how each element of a web page is
displayed.
CSS CLASS ATTRIBUTES (.):
Class attributes is used to specify a particular style rule and can be
used with any HTML tag any number of times.
CSS ID ATTRIBUTES (#):
ID attribute is used to assign an unique name to the HTML element and it can be used only once.
 DETAILED VIEW ON JAVASCRIPT
KEY FEATURES OF JAVASCRIPT:
◦ JS can be used to create menu styles, graphics, even – driven programs, etc.
◦ Automatic data type conversion.
JAVASCRIPT is used in HTML using <script> tag, can be given inside head or body tag. Javascript includes the following
concepts: Operator, Break and Continue Statement, Control Structures, Looping Statements, Function, Object, Pop-Up
Boxes, Events, Forms and etc.
◦ OPERATORS: Comparison Operator, Computational Operator, Logical Operator, etc.
◦ CONTROL STRUCTURES: Conditional Statements (if, if…else, etc), Switch Statement.
◦ LOOPING STATEMENTS: while, do-while, for, etc.
◦ OBJECT: Document Objects (Properties and Methods), Pre-Defined Objects (Array Object – Methods, History and Location Object
– Properties and Methods).
◦ POP-UP BOXES: Dialog Box, Alert Box, etc.

◦ EVENTS: Event Handlers (onload, onfocus, onunload, etc).

 JQUERY
jQuery is a fast, small, and feature-rich, most popular and extensible JavaScript library used to simplify the complex
things in JavaScript like AJAX Calls, DOM Manipulation, Effects, Animation, HTML Event Methods. Google, IBM, and
other large companies use jQuery.
jQuery takes lot of common tasks that require many lines of JS code to accomplish and wraps them into methods that
you can call with a single line of code.

KEY PURPOSE OF JQUERY:

◦ Is to make JS code much easier to use on the Website.
◦ Separates HTML and JavaScript in a webpage.
◦ Eliminates cross-browser incompatibilities.
◦ Easy to read, write and understand.
Finally, jQuery means “Write Less Do More”.
 BACK – END DEVELOPMENT TOOLS
Backend development uses a variety of programming languages. Some of the popular languages are PHP, Pearl, C#,
Python, etc.
PHP stands for Hypertext Pre – Processor is a open source, server scripting language, and a powerful tool for making
dynamic and interactive Web pages developed in the year1994 by Rasmus Lerdorf.

KEY FEATURES OF PHP:

◦ PHP uses it’s own memory so the processor speed is high compared to other scripting languages.
◦ Platform Independent, Supports Database, Highly Compatible with all web servers and has multiple layer of security.
PHP is integrated with HTML using the following syntax:
<?php Content… ?>
PHP can declared either in <head> or <body> tag and various PHP concepts such as Constants, Flow Control
Statements, Functions, Strings, Array, etc., can also be implemented in HTML for improved Back End
functionality.
 BACK – END DEVELOPMENT TOOLS
DATABASE: A database is an organized collection of structured information or data by RDBMS that organizes
data in one or more data tables in which data may be related to each other stored in a computer system.
A database is usually controlled by a database management system (DBMS). Popular Databases are MySQL,
MongoDB, etc. MySQL is one of the fast, easy to use RDBMS software developed and marketed by MSQLAB.

SERVER: A Server is a computer program or device that provides a service to another computer program and its
user, also known as the client. Some of the popular Servers are Apache, IIS, etc.
Apache is an open source web server, developed by Robert McCool in the year 1995 and maintained by Apache
Software Foundation till date. Apache works on HTTP server.

FRAMEWORK: A framework is a real or conceptual structure intended to serve as a support or guide for the
building of something that expands the structure into something useful. Popular Databases are Django, Laravel.
 HOSTING A WEBSITE
Web Hosting is a service provided by companies that sell or lease space on a server where you store the files
that make your website accessible on the internet.

NETWORKING: Networking (AKA) Computer Network is defined as the exchange of data between nodes over a shared
medium There are 3 types of networking model: WAN, MAN, LAN, etc.
◦ WIDE AREA NETWORK (WAN): A network implemented within a very large geographical distance.
◦ METROPOLITAN AREA NETWORK (MAN): A network implemented within a small geographical distance.
◦ LOCAL AREA NETWORK (LAN): A network implemented within a very large geographical distance i.e. within a
building.
 HOSTING A WEBSITE
INTERNET PROTOCOL (IP): Internet Protocol is a standard used for communicating data packets from source to
destination using internet.
IP Address is a set of requirements for addressing and routing data on the Internet. It can be used with several transport
protocol, including TCP/IP.

CLIENT-SERVER ARCHITECTURE:
Client - Server is a computer network architecture widely known as Request – Response architecture in which many
clients request server for services through their client computers interface and receive service or result from a centralized
server.
In web development, Webserver(server) acts as a middle man that accepts the HTTP(transaction protocol) request from
internet users(client) through Web Browser and serve them with the required web pages.
Web Browsers are user friendly used for fetching web pages and accessing information given in the websites.

TRANSACTION PROTOCOL: Each internet service has unique methods for data transaction to activate and gain the
service from the respective server.
For Example: HTTP for fetching Web Pages, SMTP for Mail Transfer, FTP for File Transfer, etc.
THANK YOU!