INTRODUCTION TO WEB

DEVELOPMENT
HTML
HYPER TEXT MARKUP LANGUAGE.
 WHAT IS WEB DEVELOPMENT?
• WEB DEVELOPMENT USUALLY REFERS TO DEVELOPING THE WEBSITE FOR
THE INTERNET (WORLD WIDE WEB) OR FOR INTRANET(FOR PRIVATE
NETWORK).

• ALSO KNOWN AS WEB PROGRAMMING.

• EXAMPLES OF WEB APPLICATION IS LIKE FACEBOOK, AMAZON ETC

• THERE ARE TWO BROAD DIVISION OF WEB DEVELOPMENT

FRONT-END (CLIENT-SIDE)
BACK-END (SERVER-SIDE)
 FRONT-END
• •FRONT-END DEVELOPMENT REFERS TO
PRODUCING A WEB APPLICATION SO THAT A USER
CAN SEE AND INTERACT WITH THEM DIRECTLY.
• IT IS ALSO KNOWN AS CLIENT-SIDE DEVELOPMENT
AND FOCUSES ON THE VISUAL ELEMENT OF A
WEBSITE THAT A USER WILL INTERACT WITH A
FRONT-END DEVELOPER HAS ONE GENERAL
RESPONSIBILITY TO ENSURE THAT WEBSITE
VISITORS CAN EASILY INTERACT WITH THE PAGE.
• THEY DO THIS THROUGH THE COMBINATION OF
DESIGN, TECHNOLOGY, AND PROGRAMMING TO
CODE A WEBSITE APPEARANCE COMMON
TECHNOLOGIES WE CAN USE IN FRONT-END
IS•HTML•CSS•JAVASCRIP
FRONT-END DEVELOPMENT
• HTML WAS FIRST DEVELOPED BY TIM BERNERS-LEE
IN 1989
• IT STANDS FOR HYPERTEXT MARKUP LANGUAGE.
• HYPERTEXT MEANS THAT THE DOCUMENT CONTAINS
LINKS THAT ALLOW THE READER TO JUMP FROM
ONE PAGE TO OTHER PLACES IN THE DOCUMENT.
• A MARKUP LANGUAGE IS A WAY THAT COMPUTERS
SPEAK TO EACH OTHER TO CONTROL HOW TEXT IS
PROCESSED AND PRESENTED
• DESCRIBES THE STRUCTURE OF A WEB PAGE CONSITS
OF SERIES OF ELEMENTS.
• ITS ELEMENT TELLS THE BROWSER HOW TO DISPLAY
THE CONTENT
• THE CODE IS WRITTEN IN NOTEPAD OR ANY TEXT
EDITOR BUT IT IS SAVED AS AN HTML EXTENSION.
FRONT-END DEVELOPMENT
• Here are some key points to remember about
CSS:- CSS was proposed by Håkon Wium Lie on
October 10, 1994, at CERN (European
Organization for Nuclear Research).- CSS is
used to describe how HTML elements are
displayed on the screen.- Using CSS can save
you a lot of work, as it allows you to control the
layout of multiple web pages all at once.- CSS is
written using a text editor and saved with a .css
extension.
FRONT-END DEVELOPMENT
• Here are some important facts about JavaScript:
• Brendan Eich invented JavaScript in 1995.- JavaScript is the
primary programming language used for the web.
• JavaScript is capable of updating and changing both HTML
and CSS.-
• JavaScript is responsible for the proper functioning of
websites.
• It is a scripting language that allows us to create dynamic
content, control multimedia, animate images, and perform
numerous other tasks.
• JavaScript code can be written in any text editor, but it
must have the .js extension.
BACK-END DEVELOPMENT.
• Back-end development controls what happens behind the scenes
of web development.
• It is also known as the server side.
• Users can’t see how the backend works but this code is what
communicates the database information to the browser
• A back-end usually consists of 3 parts;

• A server.
• An application
• A database.
SQL(STANDARD QUERY LANGUAGE).
• SQL lets us access and manipulate database.
• SQL is a database language it is used for database
creation, deletion, fetching rows, and modifying
rows.
• It can retrieve data and execute queries against
databases.
• Every website is supported by a database. Each
time a user submits information or searches
something in the website, data gets stores and
retrieved from the database.
• SQL is the language for query and storing data.
PHP (HYPERTEXT PREPROCESSOR)

• PHP is a widely used open-source scripting language

• Php scripts are executed on the server php is free to
download and use.
• Php is a server-side scripting language that is
embedded in HTML
• Used to manage dynamics content, database
sessions, tracking web sessions, and even build
entire e-commerce sites
Work of a web developer.
• A web developer is a programmer who specializes in the
development of World Wide Web applications using a client-
server model.
• The application typically uses HTML CSS and javascript on the
client side
• Php, C#, python, node.js, or java in the server and HTTP for
communication between clients and servers
WEB DEVELOPERS TYPICALLY DO THE FOLLOWING.
• Meet with clients or management to discuss the need and design
of a website.
• Create and test applications for a website
• Write code for the website using programming languages such as
HTML CSS javascript, etc.
• Work with team members to determine what information the
site will contain
• Work with graphics, and other designers to determine the
website layout.
• Monitor web traffic.
Types of web developers.
• There are 3 types of web developers
1. Frontend developer
2. Backend developer
3. Full stack developer
• Front-end developer ->They are responsible for how a
website looks they create the site’s layout and
integrate graphics application and other content they
also write web design programs in a variety of
computer languages.
• Back-end -> they are responsible for a server side web
application logic and integration of the work front-end
developers do.
• Full-stack developer -> a full stack developer is a
person who can develop both client and server
software. They perform the task of both front-end and
back-end.
How the web works.
• In this section we’re going to talk about exactly what happens the
moment you type the address of a website on your browser.
• As part of this we’re going to talk about a few important concepts and
terms you need to know as a web developer.
• How a web works provides a simplified view of what happens when
you view a web page in a web browser on your computer or phone.
 How the web works
• When you type an address into your browser, the
browser first contacts the DNS server to obtain
the actual address of the server where the
website resides. Once it has the correct address,
the browser sends an HTTP request message to
the server, asking it to send a copy of the website
to the client. If the server approves the client's
request, it sends a "200 OK" message and starts
transmitting the website's file to the browser in
small packets of data. The browser then puts
together these data packets to form the entire
web page which is then displayed to you.
WEB DEVELOPER VS WEB DESIGNER
WEB DEVELOPER. WEB DESIGNER.
• web developers are more technical in nature. • Web designers are very creative in nature.
• Web designers are the aesthetic elements
• Web development refers to building user-friendly
websites based on client’s specifications. • They transform ideas into visually appealing
designs.
• they transform designs into fully functional websites. • Web designers refer to how the website looks
• Web developers refer to the functionality of the and feels on the outside.
websites and how it works. • Web designing tools include Adobe
• Languages used are HTML, PHP, JavaScript, CSS, Photoshop, illustrator, Dreamweaver, sketch,
etc.
Python, Ruby, jQuery, etc.
Concepts you need to know.
• Clients are the typical web user’s internet-connected devices(for
example, your computer connected to your wi-fi or your phone
connected to your mobile network)and web accessing software
available on those devices (usually a web browser like chrome or
Firefox).
• Servers are computers that store web pages, sites, or apps. When a
client device wants to access a web page a copy of the web page is
downloaded from the server onto the client’s machine to be
displayed onto the client machine o be displayed in the user’s web
browser.
Concepts you need to know
• URL(uniform resource locator) – it’s a way of locating resources on the internet it is
also referred to as web address. Resources can be
• web pages (HTML documents)
• Images
• Video files
• fonts
• Link – The links are what people click on in a website to navigate from one page to
another or open various documents.
• HTTP (Hyper Text protocol) - HTTP is a language that clients use to communicate with
the server. We also have HTTPS.
• DOM(document object model) – this is the object that represents the objects or
elements in our HTML document.
SETUP
• HERE WE ARE GOING TO TALK ABOUT THE TOOLS USED TO HELP YOU
WRITE CODE.
1. NOTEPAD.
2. VISUAL STUDIO CODE.
3. WEB BROWSER(GOOGLE CHROME).
Summary.
• WEB DEVELOPMENT USUALLY REFERS TO DEVELOPING THE WEBSITE FOR THE INTERNET (WORLD
WIDE WEB) OR FOR INTRANET(FOR PRIVATE NETWORK).
• Web development can be broken down into 3 frontend, backend, and full stack.
• Front end uses languages such as HTML, CSS, JS, etc.
• Back end used languages such as PHP SQL, etc
THANK YOU.