Download File - MANSOOR AHMED BUGHIO

Mansoor Ahmed Bughio
1
Reference
H.M. Deitel, P.J. Deitel and T.R. Nieto, Internet
and World Wide Web: How to Program, Prentice
Hall, 2002
2
Web Engineering is the application of systematic,
disciplined and quantifiable approaches to
development, operation, and maintenance of Webbased applications.
It is both a pro-active approach and a growing
collection of theoretical and empirical research
in Web application development.
3
The Internet is a global system of interconnected
computer networks. In contrast, the World
Wide Web is one of the services transferred over
these networks. It is a collection of text
documents and other resources, linked by
hyperlinks and URLs, usually accessed
by web browsers, from webservers.
4
The Web has a massive and permanent influence on our
lives!
Economy, industry, education, healthcare,
public administration, entertainment
Tourism
Systems, Train Information, Stores, .
.. Web Application the Web as an application medium
The reason for this:
availability and
to
the global and permanent
the comfortable and uniform access
often widely distributed information
producible
by anyone in the form of Web pages
5
A Web application is a software system based on
technologies and standards of the World Wide Web
Consortium (W3C) that provides Web specific
resources such as content and services through a
Web browse
The World Wide Web Consortium (W3C) is the
main international standards organization for the
World Wide Web (abbreviated WWW or W3c)
6
Web pages are stored on a Web server as ready-made, i.e.
static, HTML documents and sent to the Web client in
response to a request .
These Web pages are usually updated manually using
respective tools
Disadvantages:
significant cost factor for Web sites with frequent updates
danger of outdated information danger of inconsistencies
due to redundant storage.
7
Advantages:
simplicity and stability of the system short response time
Examples: static homepages simple web presences for
small businesses
8
Programming network applications
Large amounts of internet sites Auctions, advertising,
commerce, portals with collections of sites concerning
business, music, film, software, info, reports of various
kinds books, search engines, education, . .
Kinds of application programs
.
 E-mail
 News
 Web based databases
 Client-server, per-to-peer
 Telephone
 Video
.
9
Networks.
A network is in this respect a collection of
interconnected computers and/or other kinds of
equipment Terminology:
 Node, a machine that is connected to the
network (computer, printer, bridge, vending
machine, . . . )
 host, a fully autonomous computer connected
to the network
 address, each node has a unique Address (a
number of bytes)
10


packet, modern networks are packet based, meaning
that the information is broken down to and sent as
small chunks, each chunk of information handled
separately.
protocol, rules, specifying how to perform
communication.
11
The client-server model
 Today, the client-server model is the prevailing when
constructing distributed, cooperating application
programs.

a client asks a server for a service (as eg. information
about the time) I a server accomplishes the
corresponding task and delivers the service (like
sending time info, sending a file from its local file
system, eg. a web page)
 both following a protocol that enables asking for and
providing services over the network
12
4. Internet Programming
4. Internet Programming
13
4. Internet Programming
Web site development

To develop a Web site, three steps:
1. Obtain the appropriate equipment
 Web Server – hardware and software
2. Register the Web Server to an Internet
Service Provider (ISP)
 Obtain the IP address and DNS address
3. Develop the contents
 Internet Programming
14
4. Internet Programming
Internet Programming



Web service is a kind of client / server process
Need interaction between client and server
Programming for providing Web service can
also be divided into
–
–
Client-side programming: to define the operation to
be performed on the client’s machine
Server-side programming: to define the operation to
be performed on the server
15
4. Internet Programming
Internet
Database Web Server
Web Client
Server-side Programming
Client-side Programming
Skills that are often required:
• CGI
• PHP
• ASP
• Perl
• Java Servlet, …
Skills that are often required:
• XHTML
• Javascript
• Java
• Dreamweaver
• Flash
• SMIL, XML …
16
4. Internet Programming - XHTML
4.1 XHTML – Extensible HyperText
MarkUp Language
17
4. Internet Programming - XHTML
Web programming using XHTML

Nowadays, there are many tools that help to
develop Web page
–



Dreamweaver, Visual studio
Provide sophisticated tools to allow Web page
developed in a graphical manner
Finally, the job of these tools is to convert the
user design to XHTML code
Understanding of XHTML allows us
–
–
fine tuning the codes generated by these tools
understand the source of a Web page
18
4. Internet Programming - XHTML
WHAT IS XHTML?
• Unlike procedural programming languages, e.g. C,
C++, XHTML is a markup language that specifies the
format of document to be seen in browser
• XHTML has replaced the HTML as the primary means of
describing the Web page content
• Become a World Wide Web Consortium (W3C)
recommendation
• W3C is an industry consortium
• Seeks to promote standards for the evolution of the Web and
interoperability between WWW products by producing
specifications and reference software
• Compared with HTML, XHTML provides more robust,
richer and extensible features
19
4. Internet Programming - XHTML
FEATURES OF XHTML
• Platform independent
• The same piece of code can give the same display in Mac,
Linux and Windows
• Text-based
• Program is written with ASCII characters
• Can be written using a text editor, such as notepad
• An XHTML file must have an extension of .html or .htm
• Information is generally enclosed inside paired tags
• E.g. <html> … </html>
• There are many tags in XHTML. They specify different
information required to display the Web page content
start tag
end tag (with a /)
20
4. Internet Programming - XHTML
BASIC STRUCTURE OF XHTML
<html>
<!-- This is a comment -->
<head>
<title>
This is title, describing the content
</title>
</head>
<body>
This is body, main part of the page
</body>
</html>
21
HTML Images
HTML images are defined with the <img> tag.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src=“" C:\Users\Bughio\Pictures\d12.jpg" wi
dth="104" height="142“>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
22
HTML Elements
HTML documents are made up by HTML elements.
HTML elements are written with a start tag, with an end tag, with
the content in between:
<tagname>content</tagname>
The HTML element is everything from the start tag to the end tag:
23
Nested HTML Elements
HTML elements can be nested (elements can contain
elements).
All HTML documents consist of nested HTML elements.
24
HTML ATTRIBUTES
HTML Attributes
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
25
HTML Background Color
The background-color property defines the background color for an
HTML element:
This example sets the background for a page to lightgrey:
<html>
<body style="background-color:lightgrey;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
26