1

Web
Technologies
Introduction
BY:
ABID JAMEEL
 Why you should become a web programmer3?
Welcome to the field of Opportunities !!!
 Today, every business needs a website to remain competitive.
 As of January 2016, the World Wide Web contained at least 4.84 billion
pages.
 This number underscores the abundant job opportunities and job security that
await web developers, the people who are essential for coding, building,
analyzing, and maintaining all those websites.
 The size of the World Wide Web (The Internet) The Indexed Web contains at
least 3.7 billion pages (Tuesday, 08 March, 2022).
 Employment for web developers is projected to grow by 27% over current
levels by 2024, which is much faster than any other occupation.
 According to the Bureau of Labor Statistics, job opportunities for web
developers are projected to grow by a whopping 20% by 2022.
 This field gives you a chance to become your own boss
 Who is web Designer ? 4
 A Web designer is someone who prepares content for the Web. This role is
mainly related to the styling and layout of pages with content, including text
and images
 Web designers use many technologies but commonly rely on resources
including HTML, CSS , Bootstrap and additional Web design tools like graphic
design software (think Adobe Photoshop , Illustrator and InDesign) to create a
look for the web.

EXAMPLE:
A web designer would be responsible for the aesthetic design of the car (the
comfort of the seats, the layout of the dashboard, etc.)

“The life of a designer is a life of fight. Fight against the ugliness. Just like a doctor fights against
disease. For us, the visual disease is what we have around, and what we try to do is cure it
somehow with design.” – Massimo Vignelli
 Who is web Developer ? 5

 A web developer is responsible for programming the code that “tells” a

website how to function.
 A web developer is a programmer who specializes in, or is specifically
engaged in, the development of World Wide Web applications, or
applications that are run over HTTP from a web server to a web browser.
(Wikipedia).

EXAMPLE:
A web developer would be responsible for using various components like
the engine, transmission, wheels, etc. to construct a fully-functional car
that is error-free in its technical aspects.
 Web Development 6

 Web Development can be divided into three parts:

 Client-side scripting. (HTML, CSS, JavaScript, JQuery)
 Server-side scripting (PHP, ASP.NET , C , Java , Python Ruby)
 Database technology (MySQL, Oracle, Microsoft SQL Server, IBM
DB2, Apache, MongoDB).

Types of Web Developers:

o Front-End Developers - that codes the front end of the website – the way a
website looks .
o Back-End Developers – that builds something behind the scene.

o Full stack Developers - They are knowledgeable with the server side as well as
the client side’s user experience - Also able to look at the 'big
picture'.
Salary Information 7
So which is better: Web design/development? 8

This is really hard to say, BUT look at what you are good at.
 Right-Brained Vs. Left-Brained:
“It is said that people who enjoy creativity and possess an
artistic nature are right-brain dominant and will flourish in
web design”
-While-
“people who think more linearly and logically are left-brain
dominant and will enjoy and be more comfortable with web
development”.
Neil deGrasse Tyson put it, “Don’t call me left brained, right brained. Call me human.” Don’t
think you’re predisposed to do better in one area than another – and this is my final point.
 Can you be a Designer or Developer ? 9

 All of these differences seem to imply that designers and developers are
two very different jobs or roles.

 But they don’t have to be.

 You can be a designer and developer at the same time. More people are
beginning to label themselves in this way and it is becoming an in-demand
skill-set.

 I am even one of those people.

 Idea Behind Web Application 10
 Desktop Applications
 Web Applications
 Mobile Applications

Some basic concept to web ?

HTTP: Hypertext Transfer Protocol
Send Our URL to the DNS Server

DNS Server:
 - Domain Name System
 - Give Name to IP Address like : 192.167.5.1 (mentorspakistan)
 - That Name is Called Domain Name
 - Like : http://www.aup.edu.com
 - Its work like Contact in Our Mobile.
 Basic Concept to web 11

URL
 Uniform resource locator
 It Points Location of Every Single Page.
 Like : aup.edu.pk/result.php
Domain
 If You want user to access your Website through web You
will must Purchase a Domain Name From DNS.
 Like aup.edu.pk
 After Purchasing a domain name your website will be
accessible through HTTP.
Why DNS ?
 Just like your mobile contact.
 How Web Applications Work ? 12
 Enter URL in Browser like www.mentorspakistan.com

 Browser send URL to DNS through HTTP

 DNS Search for IP of required URL
 If DNS Find URL in their Table they will send back IP address of
required URL to The User otherwise they will Send Message
“This webpage is not available”
 After receiving IP the Browser Will Send Request to the required
Server.
 The server will send back all the required data to the browser in
the form of HTML.
 The Browser Will read the tags and generate the page.
How Web Applications Work ? 13
 Web Technologies 14

 HTML (HyperText Markup Language)

 HTML is used to create electronic documents (called pages) that are
displayed on the World Wide Web.
 HTML is used to give layout to resources(text, image, video) in
webpage.
 CSS (Cascading Style Sheets)
 Give style to the page.

 Bootstrap
 Bootstrap is responsive, mobile-first and front-end framework, which is developed along with CSS,
JavaScript, and HTML.
 Web Technologies 15

 JAVASCRIPT
 JavaScript is most commonly used as a client side scripting language.
 Give programming tools to the HTML(Var, Condition, Loops tec)
 JQUERY
 Third party package of JavaScript Readymade Code

 AJAX (asynchronous JavaScript & XML)

 Change page Without Refreshing/Reloading.

 PHP
 Give Connectivity between HTML and Database.
 MySQL
 Database Where all website data store.
 16
 What is Web Browser :
 The purpose of a web browser (like Internet Explorer or Firefox) is to read
HTML documents and display them as web pages
 The browser does not display the HTML tags, but uses the tags to interpret
the content of the page.
 like : h1 give bigger layout and img insert image
 Static web page:
 A web page that displays same page/information to all users.
 No user interaction
 No Database
 Create in HTML,CSS,JS
 Dynamic web page:
 Information is different for each user e.g. Facebook, Google+
 Involves user interaction
 Must Have Database
 create in HTML, CSS, JS, php, Mysql
17
18