This document provides an introduction to web development, covering topics such as client-server relationships, web languages and technologies, the internet and world wide web, internet protocols, domain name systems, hypertext transport protocol, and internet media types. The instructor hopes students will understand client-server relationships, that web pages have content, styling, and behavior, and that making web pages can be fun.

1. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
National Diploma in Information and Communication Technology
K72C001M07-Web Programming
Task 01: Introduction to Web Programming
11/23/2018 Introduction to Web Development 1

2. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
What Do I Hope You'll Take Away From This
Class?
Client-server relationship
Web pages are content, styling, and behavior
Making web pages is fun!
11/23/2018 Introduction to Web Development 2

3. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Web Languages / Technologies
• Content: Hypertext Markup Language (HTML): used for writing web
pages
• Style: Cascading Style Sheets (CSS): stylistic info for web pages
• Behavior: JavaScript: interactive and programmable web pages
• Data representation for transfer: JavaScript Object Notation (JSON)
• Enhanced data transfer: Asynchronous JavaScript and XML (AJAX)
• Dynamic Web Servers: PHP Hypertext Processor (PHP)
• Data Bases: Structured Query Language (SQL)
11/23/2018 Introduction to Web Development 3

4. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
The Internet and the World Wide Web
The Internet
Wikipedia: http://en.wikipedia.org/wiki/internet
A connection of computer networks using the
Internet Protocol (IP)
11/23/2018 Introduction to Web Development 4

5. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
The Internet: A Brief History
• Began as a US Department of Defense network called ARPANET (1960s-70s)
• Initial services: electronic mail, file transfer
• Opened to commercial interests in late 80s
• WWW created in 1989-91 by Tim Berners-Lee
• Popular web browsers released: Netscape 1994, IE 1995
• Amazon.com opens in 1995; Google in January 1996
• Facebook founded in February 2004
• Snapchat created in September 2011
11/23/2018 Introduction to Web Development 5

6. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Key Aspects of the Internet
•Subnetworks can stand on their own
•Computers can dynamically join and leave the network
•Built on open standards; anyone can create a new
internet device
•Lack of centralized control (mostly)
•Everyone can use it with simple, commonly-available
software
11/23/2018 Introduction to Web Development 6

7. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Question
Who "runs" the Internet?
Who is responsible for overseeing it?
11/23/2018 Introduction to Web Development 7

8. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
People and Organizations (and Companies)
•Internet Engineering Task Force (IETF): Internet protocol
standards
•Internet Corporation for Assigned Names and Numbers
(ICANN): decides top-level domain names
•World Wide Web Consortium (W3C): web standards
These protocols are carried out in large part by Internet
service providers and other companies and organizations who
build Internet-related products and applications
11/23/2018 Introduction to Web Development 8

9. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Layered Architecture
•Physical layer: devices such as ethernet, coaxial cables, fiber-
optic lines, modems
•Data Link Layer: basic hardware protocols (ethernet, Wi-Fi,
DSL PPP)
•Network/Internet Layer: basic software protocol (IP)
•Transport Layer: adds reliability to network layer (TCP, UDP)
•Application Layer: implements specific communications for
each kind of program (HTTP, POP3/IMAP, SSH, FTP)
11/23/2018 Introduction to Web Development 9

10. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
11/23/2018 Introduction to Web Development 10

11. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Internet Protocol (IPv4)
A simple protocol for attempting to send data between two computers
Each device has a 32-bit IP address written as four 8-bit numbers (0-255)
Find your internet IP address: whatismyip.com
Find out your local IP address: in a terminal, type ipconfig (Windows) or
ifconfig (Mac/Linux)
11/23/2018 Introduction to Web Development 11

12. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Internet Protocol
•Any resource attached to an IP network can be assigned
an IP address, e.g. computer, printer or a scanner.
•It is possible for a single host to have multiple IP
addresses if it is running multiple networking
applications, such as DNS, Web or Mail server software.
•Addresses are always unique.
•Because IP addresses are software configured, it is easy
to move hosts from one network to another simply by
changing the IP address or the network mask
11/23/2018 Introduction to Web Development 12

13. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Transmission Control Protocol (TCP)
Adds multiplexing, guaranteed message delivery on top of IP
Multiplexing: multiple programs using the same IP address
Port: a number given to each program or service
port 80: web browser (port 443 for secure browsing)
port 25: email
port 22: ssh
port 5190: AOL Instant Messenger
More common ports
Some programs (games, streaming media programs) use simpler UDP
protocol instead of TCP
11/23/2018 Introduction to Web Development 13

14. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
The World Wide Web (WWW)
How is it different than the Internet?
The Internet describes all the interconnected devices
that use the "internet protocol." The World Wide
Web is the subset of the Internet that uses the HTTP
and HTTPS protocols, mostly to transmit
"webpages."
11/23/2018 Introduction to Web Development 14

15. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
The World Wide Web
Web Server: software that listens for web page requests
Apache
Microsoft Internet Information Server (IIS) (part of windows)
Web Browser: fetches/displays documents from web
servers
Mozilla Firefox
Microsoft Internet Explorer (IE) and Microsoft Edge
Apple Safari
Google Chrome
Opera
11/23/2018 Introduction to Web Development 15

16. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Uniform Resource Locator (URL)
An identifier for the location of a document on a web site
A basic URL:
http://www.slgti.com/ICT/K72C001M07/index.html
~~~~ ~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~
protocol host path
Upon entering this URL into the browser, it would:
Ask the "DNS" server for the IP address of www.slgti.com
Connect to that IP address at port 80
Ask the server to GET ICT/K72C001M07/index.html
Display the resulting page on the screen
11/23/2018 Introduction to Web Development 16

17. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Domain Name System (DNS)
A set of servers that map written names to IP
addresses
Example: www.lms.slgti.com → 45.40.155.145
Many systems maintain a local cache called a hosts
file
Windows: C:Windowssystem32driversetchosts
Mac: /private/etc/hosts
Linux: /etc/hosts
11/23/2018 Introduction to Web Development 17

18. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Domain Name System (DNS)
•A DNS server provides 'name resolution service‘ which means that
DNS servers resolve names into IP addresses or vice versa.
•DNS servers are also called name servers.
•A local DNS server which performs domain name lookup is usually
located on the network to which your computer is attached.
•If you are using an Internet Service Provider (ISP), your DNS server
is at your ISP.
•If you are using the network at your college or your office, you
probably have a local DNS server somewhere near you at the
server room.
11/23/2018 Introduction to Web Development 18

19. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Hypertext Transport Protocol (HTTP)
The set of commands understood by a web server
and sent from a browser
Some HTTP commands (your browser sends these
internally):
GET filename: download
POST filename: send a web form response
PUT filename: upload
11/23/2018 Introduction to Web Development 19

20. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Hypertext Transport Protocol (HTTP)
•HTTP is a very simple client-server request/response
communication protocol
•HTTP is the heart of the world wide web (WWW)
which is used to transfer or convey information
•HTTP is stateless and relies on URL naming
mechanism
•Development of HTTP was coordinated by the W3C
(World Wide Web Consortium) and the IETF
(Internet Engineering Task Force)
11/23/2018 Introduction to Web Development 20

21. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
HTTP Error Codes
When something goes wrong, the web server returns a special "error
code" number to the browser, possibly followed by an HTML document
Common Error Codes:
200 OK
301-303 page has moved (permanently or temporarily)
403 you are forbidden to access this page
404 page not found
418 I'm a teapot
500 internal server error
Complete list
11/23/2018 Introduction to Web Development 21

22. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Internet Media ("MIME") Types
Sometimes when including resources in a page (style
sheet, icon, multimedia object), we specify their type of
data
MIME type file extension
text/html .html
text/plain .txt
image/gif .gif
image/jpeg .jpg
video/quicktime .mov
application/octet-stream .exe
11/23/2018 Introduction to Web Development 22

23. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Web Page
•A document or information resource that is suitable
for the World Wide Web
•Can be accessed through a web browser
•Displayed on a monitor or mobile device
•This information is usually in HTML or XHTML
format.
•Use other resources such as style sheets, scripts and
images into their final presentation
•Retrieved from a local computer or from a remote
web server
11/23/2018 Introduction to Web Development 23

24. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Web Site
•A collection of related web pages containing images,
videos or other digital assets
•Hosted on at least one web server
•Accessible via a network such as the Internet or a
private local area network through an Internet
address known as a Uniform Resource Locator
•Domain name and IP
11/23/2018 Introduction to Web Development 24

25. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Web Server
•Web server is a software on a server machine that can
be run to answer requests from Web clients using the
Hypertext Transfer Protocol (HTTP).
•This can also be defined as a network server that
manages access to files, folders and other resources
over the Internet or local intranet via HTTP.
•Web servers handle access permission, execute
programs, keep track of directories and files and
communicate with client computers.
11/23/2018 Introduction to Web Development 25

26. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Structure of World Wide Web
1. Clients use browser application to send URLs via HTTP to servers
requesting a Web page
2. The server name part of the URL will be resolved by the DNS
3. Web pages are constructed using HTML (or other markup language)
and consist of text, graphics, sounds and even embedded files
4. Servers respond with requested Web page or other message such as
an error message
5. Client’s browser renders Web page returned by the server to the
client
6. The entire system runs over standard networking protocols such as
TCP/IP and DNS
11/23/2018 Introduction to Web Development 26

27. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Client-Server Computing Architecture
•In the client-server architecture, the client is
separated from a server
•The client is defined as the requester of services and
the server is defined as the provider of services
•A Server a host that is running one or more server
programs which can be sharing of information or
resources
•Client does not share any of its resources, but
requests a server's content or service function.
11/23/2018 Introduction to Web Development 27

28. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Client-Server Computing Architecture
11/23/2018 Introduction to Web Development 28

29. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Client-Server Computing Architecture
11/23/2018 Introduction to Web Development 29
Characteristics of a client
Initiates requests(Master)
Waits for and receives replies
Usually connects to a small number of servers at one time
Typically interacts directly with end-users using a graphical
user interface
Examples: web browsers, email clients and online chat
clients

30. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Client-Server Computing Architecture
11/23/2018 Introduction to Web Development 30
Characteristics of a server
Passive (slave)
Waits for requests from clients
Upon receipt of requests, processes them and then serves
replies
Usually accepts connections from a large number of clients
Typically does not interact directly with end-users
Examples: web servers, database servers and mail servers

31. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Advantages of Client-Server Architecture
•Low coupling of client and server, thus greater
independence for maintenance.
•For example, it is possible to replace, repair, upgrade, or
even relocate a server while its clients remain both
unaware and unaffected by that change.
•Greater security for data stored on the server.
Servers can control access and resources.
•Easy to update and administer data, because of
centralized nature.
•Servers can play different roles for different clients.
11/23/2018 Introduction to Web Development 31

32. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Disadvantages of Client-Server Architecture
•Congestion in Network: More traffic to the server as
the number of simultaneous client requests to a
given server increases.
•If the server fails under a critical condition, the
clients’ request will not be fulfilled.
•Cost : It is very expensive to install and manage this
type of computing.
11/23/2018 Introduction to Web Development 32

33. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Web Application
Any application that uses Web Technologies including
web browsers, web servers and Internet protocols is
called Web Application.
A web application can be divided into three different
layers.
Presentation layer which forms the first tier of the application,
consists of web server and the web browser, which is responsible for
assembling the data into presentable format.
Application layer constitutes the second tier of the application and is
consisting of server side program and scripts.
Finally the third tier provides the programmable access to the
databases.
11/23/2018 Introduction to Web Development 33

34. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Static vs. Dynamic Content
Static web pages do not change the content or layout
depending on user input.
In contrast, dynamic web pages adapt their content
depending on user input or computing environment
(user, time or data).
Dynamic content can be delivered as a result of two
technologies:
Client-side scripting languages
Server-side scripting languages
11/23/2018 Introduction to Web Development 34

35. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Characteristics of Client-side Scripting
•Plain HTML is basically static
• The browser displays the text and graphics and waits for the user to
click a link or fill in a form to return data to the server.
•Client-side scripts can modify the pages at runtime, and
therefore, they also falls under the heading of DHTML
(dynamic HTML).
•Client-side scripts have greater access to the information and
functions available on the user's computer, whereas for
server-side scripts its for the server.
•Client-side scripts require that the user's web browser
understand the scripting language in which they are written.
11/23/2018 Introduction to Web Development 35

36. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Client-side Scripting Languages
JavaScript
VBScript
Action Script
AJAX
11/23/2018 Introduction to Web Development 36

37. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Server Side Scripting
•Server-side scripting is a web server technology in which
a user's request is fulfilled by running a script directly on
the Web server to generate dynamic HTML pages.
•In client-side scripting, the scripts are first downloaded,
and then interpreted and executed by the Web browser.
•Server-side scripting enables the ability to highly
customize the response based on the user's
requirements, access rights, or queries into data stores
11/23/2018 Introduction to Web Development 37

38. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
Server-side Scripting Technologies
•ASP - Microsoft designed, primarily Windows based, solution
allowing various languages (generally VBScript) inside a
HTML-like outer page
•ASP.NET - part of Microsoft's .NET platform and is the
successor to ASP
•JSP - a Java-based system for embedding Java-related code in
HTML pages
•PHP - open source solution based on including code in its
own language into an HTML page
•Ruby on Rails - a free web application framework that aims
to increase the speed and ease with database driven Web
sites creation
11/23/2018 Introduction to Web Development 38

39. Sri Lanka-German Training InstituteDepartment of Information and Communication Technology
--End--
11/23/2018 Introduction to Web Development 39