1
CS1113 Web Programming
Lecture 01
Overview
COURSE OBJECTIVE
• To produce dynamic, animated, interactive,
database driven websites.
• Familiarize students with HTML5 and how to use
Cascading Style Sheets on a web page.
• Introduce students to client side scripting
language, JavaScript.
• Students will also learn Server side programming
COURSE OVERVIEW
• The course will consist of: Ϟ 30-32 Lectures (1 hour each) Ϟ 15-16 Labs (2 hour each)
Ϟ 4 Assignments Ϟ 4 Quizzes
Ϟ 2 Exams (Midterm and Final)
• Work Load:
In order to do well in this course, most of you should
Evaluation Criteria
• Assignments (10 %)
• Quiz (10 %)
• Viva (5 %)
• Presentation (5 %)
• Midterm Exam (30 %)
– During the 8th week.
– Duration: 1.5 hour.
– Will cover all material covered during the first seven weeks.
• Final Exam (40 %)
– During the 16th week.
– Will cover whole of the course with a slight emphasis on the
material cover after the midterm exam.
BOOKS
• Programming the World Wide Web by Robert
W. Sebesta 4th Edition.
• Web Applications: concepts and real world
Grading Scale
Grade Marks GPA
A 85 – 100 4.0
A- 80 – 84 3.7 – 3.9
B+ 75 – 79 3.5 – 3.7
B 70 – 74 3.0 – 3.4
C+ 65 – 69 2.5 – 2.9
C 60 – 64 2.0 – 2.4
D+ 55 – 59 1.5 – 1.9
D 50 – 54 1.0 – 1.4
SOFTWARES
• Web Server (Apache)
• Database (MySQL)
• Text Editor (Notepad ++)
http://notepad-plus-plus.org/
Instructor Introduction
• Course Instructor:
Yasir Naeem Sherwani
• Email Address:
• Contact Hours:
• Tue, Wed, Thu, Sat (10am – 4pm) • Friday (10am – 12pm)
(Room # CS-102)
• Course web page:
• Today’s computer are more useful and the
reason behind it is Internet.
• Internet is huge network of computers, who
can talk to each other 24 hours a day.
• ARPANET was born in 1969.
• Develop for US Department of Defense
Advanced Research Projects Agency.
• The main purpose to combine all small
isolated networks in USA means to form a
network of networks.
• ARPANET make possible 60,000 computers
who were spread across America in different
• A number of other networks were developed
during the late 70s and 80s, BITNET and CSNET. For variety of reasons, neither BITNET nor
CSNET became a dominant national network.
• A new national network, NSFnet was created in
• By 1990, NSFnet had replaced ARPAnet for
most non-military uses.
• By 1992, NSFnet connected more than 1
million computers around the world.
• Internet is network of networks.
• A large number of networks, interconnected
physically
• Capable of communicating and sharing data with
each other
• From the user’s point view, Internet – a collection
of interconnected networks – looks like a single, unified network
15
Packet (1)
• The smallest unit of data transmitted over a
computer network
• A message to be transferred over the network is broken up into small packets by the sending
computer
• Each packet contains the following info:
– Sender's address
– Destination address
– Data
16
Packet (2)
• All packets travel independently
• When all packets are received by the destination
computer, it reassembles them to form the original
17
Protocols
• Networks use protocols, or rules, to exchange info
through shared channels
• Protocols prevent collisions of packets caused by
simultaneous transmission between two or more computers
• Several protocols are available for various types of
networks. Here we discuss two that are popular for
18
Internet Networking Protocols
Communications on the Internet is controlled by a set of two protocols:
19
TCP/IP (1)
Transmission Control Protocol/Internet Protocol
• Networking protocol used by all computers and
networks on the Internet
• Originally developed by the US DoD for Unix, but
20
TCP/IP (2)
Transmission Control Protocol/Internet Protocol
• TCP breaks down the message to be sent over the
Internet into packets
• IP routes these packets through the Internet to get
them to their destination
• When the packets reach the destination computer,
WORLD WIDE WEB - 1989
• In 1989 an event took place due it the popularity of
computing today become unprecedented. That was invention of World Wide Web.
• Tim Berners Lee, British Physicist at the CERN in
Geneva started an idea there.
• He somehow wanted to make it simple for his
colleagues to share there documents.
• World wide web is a way of accessing information
over the internet. The web uses HTTP protocol.
• The documents are formatted in a markup
language called HTML that supports links to other documents, as well as graphics, audio, and video files.
• Web Browser like “Netscape Navigator” and
23
24
Internet Services
There are many, but we will look at only the following:
• FTP
• Telnet • Web • eMail
CLIENT AND SERVER ARCHITECTURE
• Internet is based on client server architecture.
• On internet we have two types of computers
some are called client and some are called
server.
• Server computer is those who serves or
• Client is user’s computer.
• Example: your personal desktop pc is client,
and the websites (www.yahoo.com) which is
resided on computer is server computer.
CLIENT-SERVER MODEL
Client A
Internet
Server X
Client C Client
DEKTOP SOFTWARE & WEB BASED
SOFTWARE
• SOFTWARE is group of components, which are
written in any programming language.
• These components/modules together solved a
purpose or task.
– Desktop Software
• Desktop Software: They reside at your local
computer and execute only at your local
computer e.g. Any program developed through
MS Excel, MS Word
• Web-based Software: they reside on a server
machine.
• There are different programming languages
present through which we can create software.
• Some programming languages are designed to
develop only desktop software and some are
designed to develop web-based apps only.
WHAT IS A WEBSITE?
• A collection of related documents/pages available on
the Web
• The first portion of the URLs in the Web pages of a
Web site is the same e.g.
– http://www.uol.edu.pk/ – http://www.uol.edu.pk/cs
– http://www.uol.edu.pk/cs1010
COMPONENTS OF A WEBSITE
32 index.html page1.html page2.html page3.html
WEBPAGE DESIGNING TOOLS?
• Adobe Dreamweaver
• Microsoft Visual Web Developer
• NVU
• Page Decoration: CSS (Cascaded Style Sheets) • Graphic Designing: Adobe Photoshop
BROWSER AND WEB SERVER
• Browser is a desktop software, through which youaccess web pages.
• Examples:
Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Netscape Navigator etc…
• Web server is a software that facilitate the user’s
request for a webpage.
• Examples:
35 CLIENT COMPUTER
Web Browser (IE, Opera, Mozilla, Google Chrome…)
SERVER COMPUTER
Web Server (IIS, Apache…)
Website 1 Website 2 Website 3
Web pages Web pages Web pages
requ est
SERVER SIDE PROGRAMMING
• Server side programming means the program we write to build back end of a website.
• Server side programming languages are those
languages which fulfill the request of client after performing some action.
CLIENT SIDE PROGRAMMING
• Client side programming means the program which we write to build front end of a
website.
• Client side programming languages are those
languages which execute on client machine.
• Examples: JavaScript
What is an HTML File?
• HTML stands for Hyper Text Markup Language.
• An HTML file is a text file containing small markup tags • The markup tags tell the Web browser how to display
page.
• An HTML file must have an .htm or .html file
extension.
• An HTML file can be created using a simple text editor .
• An HTML tags are case-insensitive
• HTML is language that makes it possible, to
various computers to communicate each other. These computers may on different networks,
different countries, different platforms, different operating system.
Note: If you want to follow the latest web
standards, you should always use lowercase tags.
• HTML is originally based on SGML (Standard Generalized Markup Language).
• Hyperlinks are fundamental capability of
HTML, this is what makes the web go round.
Versions of HTML
• There are several versions of HTML available.
Good news all the browsers support all the versions.
• HTML 2.0 (1995) first standardized version
• HTML 3.2 (1997)Approved by www consortium
• HTML 4.01 (1998) clear the issues in previous
version
HTML5
• WHATWG – The Web Hypertext Application
Technology Working Group
• W3C favored XHTML 2.0
• HTML5 is actually group of related
technologies, which HTML is part, these
technologies including DOM, working with
