+

Web Programming
By: Bernard Mussa
+
Web Technologies
 History of the Web
 Web browser
 HTML vs XHTML
 CSS

 JavaScript

 Dynamic Server Concepts

 Web Application Servers
 XML, Plug-ins, and VRML
+

Web Vs
Internet?
+
History of the web
 Sir Tim Berners-Lee is credited for the invention the World
Wide Web (WWW) in 1989

 Leveraged concepts and principles behind fast-growing

Internet and Hypertext

 By 1990 he had designed:

 HTML: HyperText Markup Language. The markup (formatting)
language for the web.
 URI: Uniform Resource Identifer. A kind of “address” that is
unique and used to identify to each resource on the web. It is
also commonly called a URL.
 HTTP: Hypertext Transfer Protocol. Allows for the retrieval of
linked resources from across the web.
 HTTPD: Web Server

 In 1994 , Tim founded the World Wide Web Consortium (W3C):

an international community devoted to developing open web
standards.
+

What is HTML?
+ HTML
 HTML – HyperText Mark up Language

 NOT a programming language, it’s a mark up language

 Language Designed to specify the content and structure of web

pages in a portable manner (render contents to various devices
such as desktop computer to smartphones, tablets etc.)

 Uses standard tags (<>html</>) to specify:

 Contents of the web page, (e.g. Text, images etc.)
 Meaning or semantics (e.g. bold, italic etc.)
 For more extensive specifcations, CSS helps (To be covered)

 Collaborative Standards (W3C):

 First standard, HTML1 in 1992
 Current standard HTML5 in 2014

 XHTML –A ‘stricker’ version of HTML

+

What is CSS?
+ CSS
 CSS – Cascading Style Sheets

 CSS are used to specify the presentation, or styling, of

elements on a web page (e.g., fonts, spacing, sizes, colors,
positioning).

 CSS was designed to style portable web pages

independently of their content and structure.

 By separating page styling from page content and

structure, you can easily change the look and feel of the
pages on an entire website, or a portion of a website,
simply by swapping out one style sheet for another.

 ` CSS3 is the current version of CSS under development.

+

What is
JavaScript?
+ JavaScript(JS)
 JavaScript was created by Netscape.

 JavaScript helps you build dynamic web pages (i.e.,

pages that can be modifed “on the fy” in response to
events, such as user input, time changes and more) and
computer applications.

 It enables you to do the client-side programming of web

applications.

 Both Netscape and Microsoft have been instrumental in

the standardization of JavaScript by ECMA International
(formerly the European Computer Manufacturers
Association) as ECMAScript.

 JavaScript is a portable scripting language. Programs

written in JavaScript can run in web browsers across a
wide range of devices.
+

What is a Web Browser?

+
Web Browser
 An application software or program
designed to enable users to access,
retrieve and view documents and other
resources on the Internet
 First
developed browser by NCSA in
1993: MOSAIC
 Other popular browsers:
+
Browser Portability
 Challenge: Ensuring a consistent look and feel
on client-side browsers
 No standards –currently
 Browsers are available in many versions and on
many diferent platforms (Microsoft Windows,
Apple Macintosh, Linux, UNIX, etc.).
 Vendors add features to each new version that
sometimes result in cross-platform
incompatibility issues.
 Although browsers share a common set of
features, each browser might render pages
diferently.
+

What is a Web 2.0?

+
Web 2.0
 Credited to Dale Dougherty of O’Reilly
Media
 Trend dating back in 2003,
 Shiftof focus to use web as a platform
to create collaborative, community
based sites (e.g. social networking
sites, blogs, wikis etc)
 Users centered; Embrace Architecture
of Participation
+ Web 1.0 versus Web 2.0
 Web 1.0 (the state of the web through the
1990s and early 2000s) was focused on a
relatively small number of companies and
advertisers producing content for users to
access (some people called it the “brochure
web”).
 Web 2.0 involves the users—not only do they
often create content, but they help organize
it, share it, remix it, critique it, update it, etc.
 One way to look at Web 1.0 is as a lecture, a
small number of professors informing a large
audience of students. In comparison, Web 2.0
is a conversation, with everyone having the
opportunity to speak and share views
+ Web Basics
A web page:
 Nothing more than an HTML (HyperText Markup
Language) document (with the extension .html or
.htm) that describes to a web browser the
document’s content and structure.

 Hyperlinks:
 HTML documents normally contain hyperlinks, which,
when clicked, load a specifed web document.
 Both images and text may be hyperlinked.
 When the user clicks a hyperlink, a web server
locates the requested web page and sends it to the
user’s web browser.
 Similarly, the user can type the address of a web
page into the browser’s address feld and press Enter
to view the specifed page.
+ Web Basics (cont.)
 Hyperlinks can reference other web
pages, e-mail addresses, fles and more
 If a hyperlink’s URL is in the form
“mailto:emailAddress”, clicking the link
loads your default e-mail program and
opens a message window addressed to
the specifed e- mail address.
 If a hyperlink references a fle that the
browser is incapable of displaying, the
browser prepares to download the fle,
and generally prompts the user for
information about how the fle should be
+ Web Basics (cont.)
 URIs and URLs
 URIs (Uniform Resource Identifers) identify
resources on the Internet.
 URIs that start with http:// are called URLs
(Uniform Resource Locators).

 Parts of a URL
A URL contains information that directs a
browser to the resource that the user wishes
to access.
 Web servers make such resources available to
web clients.
 Popular web servers include Apache’s HTTP
Server and Microsoft’s Internet Information
Services (IIS).
+ Web Basics (cont.)
 Let’s examine the components of the URL
 http://www.deitel.com/books/downloads.html

 The text http:// indicates that the HyperText Transfer

Protocol (HTTP) should be used to obtain the
resource.
 Next in the URL is the server’s fully qualifed
hostname (for example, www.deitel.com)—the
name of the web-server computer on which the
resource resides.
 This computer is referred to as the host, because it
houses and maintains resources.
 The hostname www.deitel.com is translated into an
IP (Internet Protocol) address—a numerical value
that uniquely identifes the server on the Internet.
+ Web Basics (cont.)
 An Internet Domain Name System (DNS) server
maintains a database of hostnames and their
corresponding IP addresses and performs the
translations automatically.
 The remainder of the URL (/books/downloads.html)
specifes the resource’s location (/books) and name
(downloads.html) on the web server.
 The location could represent an actual directory on
the web server’s fle system. For security reasons,
however, the location is typically a virtual directory.
 The web server translates the virtual directory into
a real location on the server, thus hiding the
resource’s true location.
 Making a Request and Receiving a Response
+ Client-Server Model
+ Client-Server Model
+ Multi-tier Application Architecture
 Web-based applications are often multitier applications
(sometimes referred to as n-tier applications)

 Divide functionality into separate tiers (i.e., logical groupings of

functionality).

 Three-tier Architecture
+ Multi-tier Application Architecture (cont.)
 The bottom tier (also called the data tier or the
information tier) maintains the application’s data.
 This tier typically stores data in a relational database
management system (RDBMS).

 The middle tier implements business logic, controller

logic and presentation logic to control interactions
between the application’s clients and its data.
 The middle tier acts as an intermediary between data in the
information tier and the application’s clients.
 The middle-tier controller logic processes client requests
(such as requests to view a product catalog) and retrieves
data from the database.
 The middle-tier presentation logic then processes data from
the information tier and presents the content to the client.

 Web applications typically present data to clients as

HTML documents
+ Multi-tier Application Architecture (cont.)
 Business logic in the middle tier enforces business rules
and ensures that data is reliable before the application
updates a database or presents data to users.

 Business rules dictate how clients access data and how

applications process data.

 The top tier, or client tier, is the application’s user

interface, which gathers input and displays output.

 Users interact directly with the application through the

user interface, which is typically a web browser or a
mobile device.

 In response to user actions (e.g., clicking a hyperlink),

the client tier interacts with the middle tier to make
requests and to retrieve data from the information tier.

 The client tier then displays the data retrieved for the
user.
+ Recommended
Books/Readings
 Luke Welling and Laura Thomson (2008). PHP and
MySQL Web Development (4th Edition). USA: Peason
Education

 Leon Shklar and Rich Rosen (2009). Web Application

Architecture: Principles, Protocols and Practices.
Sussex: John Wiley

 Deven N. Shah (2009) A Complete Guide To Internet

And Web Programming, Dreamtech Press

 OneForMe (2012). Learn PHP Programming. O'Reilly

Media

 Marty Hall, Larry Brown (2001), Core Web

Programming, Prentice Hall Professional

 Internet and WWW; How to Program

+ Tips for learning
programming
Do a little each day
Do not give up!
Read documentation
Ask for help in forums
+

END!