View
1
Download
0
Category
Preview:
Citation preview
1
Internet & Intranet Applications
Binnur Kurt, PhDbkurt@itu.edu.tr
1BTE550 – Internet and Intranet ApplicationsCopyCopyleftleft © © 22000055--2007 2007 vversionersion 11..33
Istanbul Technical UniversityIstanbul Technical UniversityComputer Engineering DepartmentComputer Engineering Department
About the Lecturer
BSc, MSc, PhD
ITU, Computer Engineering 1995, 1997, 2007
Areas of Interest
Digital Image/Video Analysis
2
Real-Time Computer Vision Systems
Multimedia: Indexing and Retrieval
Software Engineering
OO Analysis and Design
Web Services
Welcome to the Course
Important Course Information
18:30-21:30, Friday
Course Web Page
http://www.cs.itu.edu.tr/~kurt/Courses/bte550
3
Grading Scheme
5 Homework (30%)
A midterm exam (30%)
November 16th 2007
A final exam (40%)
4
Academic dishonesty including but not limited tocheating, plagiarism, collaboration is unacceptable andsubject to disciplinary actions. Any student found guiltywill have grade -100. Assignments are due in class on thedue date. Late assignments will NEVER be accepted.
Tell me and I forget. Show me and I remember. Let me do and I understand.
—Chinese Proverb
5BTE550 – Internet and Intranet Applications
1. Networking Fundamentals2. Introduction to Web Technologies3. XML4. XML using DTDs5. HTML
Course Outline
6BTE550 – Internet and Intranet Applications
6. XHTML7. XPath and XSLT8. CSS9. Multimedia Standards: Image, Video, Audio, Animation, VR, 3D10. Dynamic HTML: JavaScript11. Web Applications: Forms, JSP, PHP
2
How to Use the Icons
Demonstration
f
Discussion
7BTE550 – Internet and Intranet Applications
ReferenceExercise
Networking FundamentalsNetworking Fundamentals1
Copyleft © 2005, Binnur Kurt
ndam
enta
ls1
Objectives
►Define basic networking terms►Describe some commonly used network applications►Describe the main purposes and functions of computer
networking►Describe the history and purposes of the OSI reference
9
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
y p pmodel
ndam
enta
ls1
Objectives (Cont.)
►Discuss the functions of each of the seven layers of the OSI reference model and provide examples of each
►Describe the basic process of communication between thelayers of the OSI reference model
►Describe the functions of the TCP/protocol stack and provide examples of each layer’s function
10
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
provide examples of each layer s function►Compare the TCP/IP protocol stack to the OSI reference
model
ndam
enta
ls1
Basic Networking Terminology►NIC►Media►Protocol►NOS►Connectivity devices
11
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
►LAN►MAN►WAN►Physical topology►Logical topology
ndam
enta
ls1
WWW Request-Response
12
Net
wor
king
Fun
BTE550 – Internet and Intranet ApplicationsWeb Browser Web Server
3
ndam
enta
ls1
Sending E-Mail
E-mailServer
E-mailServer
13
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Client A Client B
ndam
enta
ls1
Defining Components of the NetworkHome Office Mobile Users
Internet
14
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Branch Office Main Office
Internet
ndam
enta
ls1
Computer Networks
BranchOffice
15
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
HomeOffice
ISDN
Remote Campus
Floor 1
Floor 2
ServerFarm
ndam
enta
ls1 Application
Presentation
Session
The OSI Reference Model
7
6
5
16
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Transport
Network
Data Link
Physical
4
3
2
1
ndam
enta
ls1
Why a Layered Network Model?
►Reduces complexity►Standardizes interfaces►Facilitates modular engineering
Application
Presentation
Session
T t
7
6
5
4
17
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
►Ensures interoperable technology►Accelerates evolution►Simplifies teaching and learning
Transport
Network
Data Link
Physical
4
3
2
1
ndam
enta
ls1
The Seven Layers of the OSI Model
Network Processes to Applications►Provides network services to
application processes (such as electronic mail, file transfer, and terminal emulation)
Application
Presentation
Session
Transport
7
6
5
4
18
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
p
Network
Data Link
Physical
3
2
1
4
ndam
enta
ls1
The Seven Layers of the OSI Model
Data Representation►Ensures data is readable by
receiving system►Formats data
Network Process to ApplicationsApplication
Presentation
Session
Transport
7
6
5
4
19
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
►Formats data►Structures data►Negotiates data transfer syntax
for application layer
Network
Data Link
Physical
3
2
1
ndam
enta
ls1
The Seven Layers of the OSI Model
Interhost Communication►Establishes, manages, and
Network Process to Applications
Data Representation
Application
Presentation
Session
Transport
7
6
5
4
20
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
terminates sessions between applicationsNetwork
Data Link
Physical
3
2
1
ndam
enta
ls1
The Seven Layers of the OSI Model
End-to-End Connections
Interhost Communication
Network Process to Applications
Data Representation
Application
Presentation
Session
Transport
7
6
5
4
21
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
d to d Co ect o s►Handles transportation issues between hosts►Ensures data transport reliability►Establishes, maintains and terminates virtual
circuits►Provides reliability through fault detection
and recovery information flow control
Network
Data Link
Physical
3
2
1
ndam
enta
ls1
The Seven Layers of the OSI Model
Network Process to Applications
Data Representation
End-to-End Connections
Interhost Communication
Application
Presentation
Session
Transport
7
6
5
4
22
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Data Delivery►Provides connectivity and path
selection between two host systems
►Routes data packets►Selects best path to deliver data
Network
Data Link
Physical
3
2
1
ndam
enta
ls1
The Seven Layers of the OSI Model
Network Process to Applications
Data Representation
End-to-End Connections
Interhost Communication
Application
Presentation
Session
Transport
7
6
5
4
23
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Access to Media►Defines how data is formatted for
transmission and how access to the network is controlled
Data DeliveryNetwork
Data Link
Physical
3
2
1
ndam
enta
ls1
The Seven Layers of the OSI Model
Network Process to Applications
Data Representation
End-to-End Connections
Interhost Communication
Application
Presentation
Session
Transport
7
6
5
4
24
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Binary Transmission►Defines the electrical, mechanical,
procedural, and functional specifications for activating, maintaining, anddeactivating the physical link.
Data Delivery
Access to Media
Network
Data Link
Physical
3
2
1
5
ndam
enta
ls1
Data EncapsulationSender
User DataUser Data
User DataUser DataL7
L7HDR
L6
Application
Presentation
7
6
25
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
HDR = header
Bits
User DataUser Data
User DataUser Data
User DataUser Data
User DataUser Data
User DataUser DataL2
HDRL3
HDRL4
HDRL5
HDRL6
HDRL7
HDR FCS
L7HDR
L7HDR
L7HDR
HDR
L6HDR
L6HDR
L6HDR
HDR
L5HDR
L5HDR
L5HDR
L4HDR
L4HDR
L3HDR
Presentation
Session
Transport
Network
Data Link
Physical
6
5
4
3
2
1
ndam
enta
ls1
Data De-EncapsulationReceiver
Application
i
7
User DataUser Data
User DataUser DataL7
L7HDR
L6
26
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Presentation
Session
Transport
Network
Data Link
Physical
6
5
4
3
2
1
HDR = header
Bits
User DataUser Data
User DataUser Data
User DataUser Data
User DataUser Data
User DataUser DataL2
HDRL3
HDRL4
HDRL5
HDRL6
HDRL7
HDR FCS
L7HDR
L7HDR
L7HDR
L7HDR
L6HDR
L6HDR
L6HDR
L6HDR
L5HDR
L5HDR
L5HDR
L4HDR
L4HDR
L3HDR
ndam
enta
ls1
Peer-to-Peer Communication
ReceiverSender
Application
Presentation
Application
Presentation
27
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
NetworkBits
Frames
Packets
SegmentsSession
Transport
Network
Data Link
Physical
Session
Transport
Network
Data Link
Physical
ndam
enta
ls1
ApplicationApplication
PresentationPresentation
TCP/IP Model
28
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
InternetInternet
Network AccessNetwork Access
ndam
enta
ls1
TCP/IP Protocol Stack vs. OSI Model
Application
Presentation
Session
Application
TCP/IP Protocol StackTCP/IP Protocol Stack OSI ModelOSI Model
Protocols
ApplicationLayers
29
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Transport
Network
Data Link
Physical
Transport
Internet
NetworkAccess
Networks
Data FlowLayers
ndam
enta
ls1
Summary
►There are a number of basic computer network terms, including NIC, media, protocol, physical topology, and logical topology, that are fundamental to an understanding of networks.
►Network applications are software programs that run between computers that are connected together on a
30
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
between computers that are connected together on a network.
►Some common network applications include HTTP, POP3, FTP, Telnet, and SNMP.
6
ndam
enta
ls1
Summary (Cont.)
►There are many different ways in which a computer network can be constructed to meet the requirements of an organization, but user components are generally grouped into the categories of main office, remote locations, and mobile users.
►The ISO created and released the OSI reference model in
31
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
►The ISO created and released the OSI reference model in 1984 to provide vendors with a set of standards to ensure greater compatibility and interoperability between various types of network technologies.
ndam
enta
ls1
Summary (Cont.)
►The OSI reference model reduces complexity, standardizes interfaces, facilitates modular engineering, ensures interoperable technology, accelerates evolution, and simplifies teaching and learning.
►Each layer of the OSI model has a set of unique functions. The seven layers of the OSI model are the
32
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
functions. The seven layers of the OSI model are the application, presentation, session, transport, network, data-link, and physical layers.
►Encapsulation is the process in which data is wrapped in a particular protocol header before network transit.
ndam
enta
ls1
Summary (Cont.)
►The TCP/IP protocol stack has four layers: the application layer, transport layer, internet layer, and network access layer.
►There are both similarities and differences between the TCP/IP protocol stack and the OSI reference model.
33
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
ndam
enta
ls1
Repeater
34
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
ndam
enta
ls1
Hub (Multiport Repeater)
35
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
ndam
enta
ls1
Network Interface Card
36
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
7
ndam
enta
ls1
Bridge
37
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Segment 2Segment 1CorporateInternet
ndam
enta
ls1
Switch
38
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
ndam
enta
ls1
FirewallsCalifornia
Massachusetts
Allow Access to HQ
No Access to HQ
AAAServer
CorporateHeadquarters
39
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Vermont
NewHampshire
• Permit access from MA• Permit packets from NH• Permit packets from VT• Deny all other packets
Allow Access to HQ
ndam
enta
ls1
Summary
►Networking devices are products used to connect networks.
►Hubs, switches, and routers interconnect devices within LANs, MANs, and WANs.
►Networking devices function at different layers of the OSI model primarily Layers 1 2 and 3
40
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
OSI model, primarily Layers 1, 2, and 3.►Repeaters reshape, amplify, and retime signals before
sending them along the network.
ndam
enta
ls1
Summary (Cont.)
►The term "hub" (also called a multiport repeater) is used instead of “repeater" when referring to the device that serves as a connection point in a network. Hubs work Layer 1 only and make no filtering decisions.
►Layer 2 LAN switches work at Layer 2, and they make limited MAC hardware address decisions.
41
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
►Routers can make decisions as to the best path for delivery of data on the network.
ndam
enta
ls1
Summary (Cont.)►Working at Layers 2, 3, and 4, multilayer switches enable
implementation of Layer 3 QoS and security functionality and perform many of the same functions as routers do, but in hardware.
►Voice gateways, DSLAMs, and optical devices are newer types of network connectivity devices.
42
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
yp y►Firewalls and AAA servers provide security to the
network.
8
ndam
enta
ls1
Physical Topologies
Bus Topology Ring Topology Star Topology
43
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Mesh TopologyExtended Star Topology
ndam
enta
ls1
Logical Topologies
Main Switch
Main Server
D
F
E0
E2
E1
Internet
1
2
44
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Bridge
Repeater
WorkgroupSwitch
E
G
I
H
J
A CB
ndam
enta
ls1
Bus Topology
45
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
ndam
enta
ls1
Star Topology
46
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
ndam
enta
ls1
Extended-Star Topology
47
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
ndam
enta
ls1
Ring Topology
48
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
9
ndam
enta
ls1
Dual-Ring Topology
49
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Two links connected to thesame networking device
ndam
enta
ls1
Full-Mesh Topology
50
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
ndam
enta
ls1
Partial-Mesh Topology
51
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
ndam
enta
ls1
Summary►A physical topology describes the plan for wiring the
physical devices, while a logical topology describes how information flows through a network.
►In a physical bus topology, a single cable connects all the devices.
►The most commonly used architecture in Ethernet LANs
52
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
►The most commonly used architecture in Ethernet LANs is the physical star topology, with each host in the network connected to the central device with its own cable.
ndam
enta
ls1
Summary (Cont.)
►When a star network is expanded to include additional networking devices that are connected to the main networking device, it is called an extended-star topology.
►In a ring topology, all the hosts are connected in the form of a ring or circle.
►A full mesh topology connects all devices to each other
53
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
►A full-mesh topology connects all devices to each other, while in a partial-mesh topology, at least one device has multiple connections to others.
ndam
enta
ls1
Communications Protocol
Host Host
54
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
TCP
10
ndam
enta
ls1
TCP/IP Protocol Stack
TCPTCP
FTP,Telnet,SMTP
FTP,Telnet,SMTP NetBIOSNetBIOS
DNS, SNMPDNS, SNMP7
6
5
4
3
ApplicationApplication
PresentationPresentation
SessionSession
TransportTransport
55
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
TCP/IP Protocol StackOSI Reference Model
ICMPICMPIPIP OSPFOSPF IGRPIGRP RIPRIP INT, IS-ISINT, IS-IS
ARP, RARP, SNAPARP, RARP, SNAPLLCLLC
Many Physical ImplementationsMany Physical Implementations
3
2
1
NetworkNetwork
Data-linkData-link
PhysicalPhysical
ndam
enta
ls1
TCP Characteristics
Connection-Oriented Protocol
Full-Duplex Operation
Error Checking
56
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Sequencing
Acknowledgments
Flow Control
Packet Recovery
ndam
enta
ls1
UDP Characteristics
Minimal ServiceMinimal Service
UnreliableUnreliable
57
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Not-GuaranteedNot-Guaranteed
Direct Access to DatagramsDirect Access to Datagrams
ndam
enta
ls1
Application
• File Transfer– TFTP *– FTP *– NFS
• E-Mail– SMTP
• Remote Login*
Application Layer Overview
58
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
*Used by the router
Transport
Network
Data Link
Physical
– Telnet *– rlogin *
• Network Management– SNMP *
• Name Management– DNS*
ndam
enta
ls1
Summary
►Protocols define a standard set of rules for communicating between devices.
►TCP/IP is a suite of protocols arranged as a stack.►TCP is a connection-oriented protocol that provides flow
control and reliable data delivery services.►UDP id i i l t d t t
59
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
►UDP provides minimal, non-guaranteed, transport services.
►The transport layer supports multiple application protocols.
ndam
enta
ls1
Network and Host Addresses
3.1
2.11.2
Network HostNetwork Host
1 1
2 13 1
23
60
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
1.3
1.1
11
ndam
enta
ls1
Dotted-Decimal Notation
►An IP address is a 32-bit binary number:10101100000100001000000000010001
►The 32-bit binary number can be divided into four octets: 10101100 00010000 10000000 00010001
►Each octet (or byte) can be represented in decimal:172 16 128 17
61
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
172 16 128 17►The address can be written in dotted-decimal notation:
172.16.128.17
ndam
enta
ls1
IP Address ClassesNo. of bits 1 7 24
No. of bits 1 1 14 16
No. of bits 1 1 1 21 8
No of bits 1 1 1 1 28
Class A: 0 Network no. Host no.
Class B: 1 0 Network no. Host no.
Class C: 1 1 0 Network no. Host no.
62
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
►*Class D addresses are used for multicast groups. There is no need to allocate octets or bits to separate network and host addresses.
►**Class E addresses are reserved for research use only.
No. of bits 1 1 1 1 28
No. of bits 1 1 1 1 28
Class D:* 1 1 1 0 Address
Class E:** 1 1 1 1 Address
ndam
enta
ls1
Class A: HH
1 Byte8 Bits
1 Byte8 Bits
1 Byte8 Bits
1 Byte8 Bits
HH HHNN
IP Address Class Components
63
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
Class B:
Class C: NN
HH HH
HHNN NN
NN NN
– N = Network number assigned by ARIN– H = Host number assigned by administrator
ndam
enta
ls1
IP Address Range
IP Address ClassIP Address Class
Class AClass A
Class BClass B
Class CClass C
IP Address Range(First octet decimal value)
IP Address Range(First octet decimal value)
1-126 (00000001-01111110) *1-126 (00000001-01111110) *
128-191 (10000000-10111111)128-191 (10000000-10111111)
192-223 (11000000-11011111)192-223 (11000000-11011111)
64
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
*127 (011111111) is a Class A address reserved for loopback testing and cannot be assigned to a network.
Class CClass C
Class DClass D
Class EClass E
192-223 (11000000-11011111)192-223 (11000000-11011111)
224-239 (11100000-11101111)224-239 (11100000-11101111)
240-255 (11110000-11111111)240-255 (11110000-11111111)
Determine the class based on the decimal value of the first octet.
Determine the class based on the decimal value of the first octet.
ndam
enta
ls1
Network Addresses
8 Bits 8 Bits8 Bits8 Bits
32 Bits
NETWORK HOST
65
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
172 0016
Network Address (host bits = all zeros)
8 Bits1 Byte
8 Bits1 Byte
8 Bits1 Byte
8 Bits1 Byte
N HN H
• • •
ndam
enta
ls1
Broadcast Address
8 Bits1 Byte
8 Bits1 Byte
8 Bits1 Byte
8 Bits1 Byte
32 Bits
NETWORK HOST
N HN H
66
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
172 0016
Network Address (host bits = all zeros)
N HN H
Broadcast Address (host bits = all ones)
N HN H
255 255172 16
• • •
• • •
12
ndam
enta
ls1
Private IP Addresses
ClassClass RFC 1918 Internal Address RangeRFC 1918 Internal Address Range
AA 10.0.0.0 to 10.255.255.25510.0.0.0 to 10.255.255.255
67
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
BB
CC
172.16.0.0 to 172.31.255.255172.16.0.0 to 172.31.255.255
192.168.0.0 to 192.168.255.255192.168.0.0 to 192.168.255.255
ndam
enta
ls1
IPv4 Address Allocation
Class C12.5%
Class B 25%
Class B 25%
Other Classes12.5%
68
Net
wor
king
Fun
BTE550 – Internet and Intranet Applications
– With Class A and B addresses virtually exhausted, Class C addresses (12.5 percent of the total space) are left to assign to new networks.
Class A 50%
Class A 50%
Introduction to Web Introduction to Web Application TechnologiesApplication Technologies2
Copyleft © 2005, Binnur Kurt
App
. Tec
h.2
The InternetIn the early days of computer networking, local area networks (LANs)were created to share resources among members of a particular institution. These networks were constrained to short distances.
70
Int.
To W
eb A
BTE550 – Internet and Intranet Applications
The Internet is a Network of Networks
App
. Tec
h.2
Client-Server Architecture
71
Int.
To W
eb A
BTE550 – Internet and Intranet Applications
App
. Tec
h.2
Hypertext Transfer Protocol
►The Hypertext Transfer Protocol (HTTP) is similar to FTP because it is a protocol to transfer files from the server to the client.
►HTTP was created in conjunction with the related Hypertext Markup Language (HTML) standard.
72
Int.
To W
eb A
BTE550 – Internet and Intranet Applications
►There is one fundamental difference between FTP and HTTP: HTTP supports only one request per connection.
►This means that the client connects to the server to retrieve one file and then disconnects. This mechanism allows more users to connect to a given server over a period of time.
13
App
. Tec
h.2
HTML
►HTML is a document display language that allows users to link from one document to another.
►HTML also permits images and other media objects to be embedded in an HTML document. The media objects are stored in files on a server.
73
Int.
To W
eb A
BTE550 – Internet and Intranet Applications
►HTTP also retrieves these files. HTTP can therefore be used to transmit any file that conforms to the Multipurpose Internet Mail Extensions (MIME)specification.
App
. Tec
h.2
Web Browsers and Web Servers
►To view an HTML document with rich media content, a graphical user interface (GUI) was built on top of the client-side HTTP. This GUI is called a Web browser.
►The server-side HTTP component is called a Web server.►Several companies have developed Web browsers and
74
Int.
To W
eb A
BTE550 – Internet and Intranet Applications
Web servers; some have developed both. The first Web server was a process called httpd; the first widely used browser was Mosaic, created by National Center forSupercomputing Applications (NCSA).
App
. Tec
h.2
Web Browsers and Web Servers►Early web servers and browsers
75
Int.
To W
eb A
BTE550 – Internet and Intranet Applications
App
. Tec
h.2
HTTP Client-Server Architecture
►For every exchange over the Web using HTTP, there is a request and a response.
76
Int.
To W
eb A
BTE550 – Internet and Intranet Applications
App
. Tec
h.2
Uniform Resource Locator
►A URL is a canonical name that locates a specific resource on the Internet:protocol://host:port/path/file
►Example:http://www.soccer.org:80/league/Spring2001.html
► h h l i l d h l di
77
Int.
To W
eb A
BTE550 – Internet and Intranet Applications
►The path element includes the complete directory structure path to find the file. The port number is used to identify the TCP port that is used by the protocol on the server. If the port number is the standard port for the given protocol, then that number can be ignored in the URL.
►For example, port 80 is the default HTTP port.
App
. Tec
h.2
Web Applications
►Very early in the development of HTML, the designers created a mechanism to permit a user to invoke a program on the Web server.
►This was called the Common Gateway Interface (CGI). When a Web site includes CGI processing, this is called a
b l
78
Int.
To W
eb A
BTE550 – Internet and Intranet Applications
Web application.
14
App
. Tec
h.2
CGI Programs on the Web Server►Usually, the browser needs to send data to the CGI program on the
server.►The CGI specification defines how the data is packaged and sent in
the HTTP request to the server. This data is usually typed into the Web browser in an HTML form.
►The URL determines which CGI program to execute. This might be
79
Int.
To W
eb A
BTE550 – Internet and Intranet Applications
p g ga script or an executable file.
►The CGI program parses the CGI data in the request, processes the data, and generates a response (usually an HTML page). The CGI response is sent back to the Web server, which wraps the response in an HTTP response. The HTTP response is sent back to the Web browser.
App
. Tec
h.2
CGI Programs on the Web Server
80
Int.
To W
eb A
BTE550 – Internet and Intranet Applications
App
. Tec
h.2
Execution of CGI Programs►At runtime, a CGI program is launched by the Web server as
a separate operating system (OS) shell. ►The shell includes an OS environment and process to
execute the code of the CGI program, which resides within the server’s file system.
81
Int.
To W
eb A
BTE550 – Internet and Intranet Applications
App
. Tec
h.2
Execution of CGI Programs
82
Int.
To W
eb A
BTE550 – Internet and Intranet Applications
Overview of XMLOverview of XML3
Copyleft © 2005, Binnur Kurt
ML
3
Content
►Define XML►Compare and contrast HTML and XML►Identify characteristics of XML documents
84
XM
BTE550 – Internet and Intranet Applications
15
ML
3
What is XML?
►the eXtensible Markup Language►W3C-endorsed standard for document markup►A generic syntax used to mark up data with simple,
human-readable tags ►Provides a standard format for computer documents
85
XM
BTE550 – Internet and Intranet Applications
►Provides a standard format for computer documents ►Flexible enough to be customized for different domains as
diverse as web sites, electronic data interchange, vector graphics, real-estate listings, object serialization, remote procedure calls, voice-mail systems,...
ML
3
What is not XML?
►XML is not a programming language – There's no such thing as an XML compiler that reads XML files
and produces executable code
►XML is not a network transport protocol►XML is not a database
86
XM
BTE550 – Internet and Intranet Applications
– You're not going to replace an Oracle or MySQL server with XML
– A database can contain XML data, but the database itself is not an XML document
ML
3
<html><head> </head><body><h2>Student List</h2>
<ul><li> 9906789 </li><li>Adam</li><li>adam@unl ac uk</li>
students.html students.xmlSpecifies visual presentation Specifies structure of the data
<?xml version = "1.0"?>
<student_list><student><id> 9906789 </id><name> Adam </name><email> adam@unl.ac.uk </email><bsc level=“final”>yes</bsc>
87
XM
BTE550 – Internet and Intranet Applications
<li>adam@unl.ac.uk</li><li>yes - final </li>
</ul><ul><li> 9806791 </li><li>Adrian</li><li>adrian@unl.ac.uk</li><li>no</li>
</ul></body></html>
</student>
<student><id> 9806791 </id><name>Adrian</name><email>adrian@unl.ac.uk</email><bsc>no</bsc>
</student>
</student_list>
ML
3
<html><body><h2>Student List</h2>
<ul><li> 9906789 </li><li>Adam</li><li>adam@unl.ac.uk</li>
What is “yes”?
Is this the student ID? or UCAS number?
HTML Document (Good for Formatting)
88
XM
BTE550 – Internet and Intranet Applications
@<li>yes - final </li>
</ul><ul><li> 9806791 </li><li>Adrian</li><li>adrian@unl.ac.uk</li><li>no</li>
</ul></body></html>
What is “no”?
Data and presentation logic mixed
ML
3
<?xml version = "1.0"?>
<student_list><student><id> 9906789 </id><name>Adam</name><email>adam@unl.ac.uk</email><bsc level=“final”>yes</bsc>
/
• Data is self-describing• Custom tags describe content
Only data
XML Document (Good for Describing Data)
89
XM
BTE550 – Internet and Intranet Applications
</student>
<student><id> 9806791 </id><name>Adrian</name><email>adrian@unl.ac.uk</email><bsc>no</bsc>
</student>
</student_list>
Custom tags describe content(you can/will define your own tags)• Easy to locate data
(e.g. all BSc students)
ML
3
What do we need for Web Services & B2B?►Portable Data►Portable Code<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?><!DOCTYPE employees SYSTEM "employees.dtd"><employees>
<company-name>Sun Microsystems, Inc.</company-name><employee number="2498" >
90
XM
BTE550 – Internet and Intranet Applications
p y<name>
<first>Sridhar</first><last>Reddy</last>
</name><title>Staff Engineer</title><organization>Market Development Engineering</organization><address> 901 San Antonio Road, … </address><email>sridhar.reddy@sun.com</email></employee>
</employees>
16
ML
3
Service Driven Approach
client
91
XM
BTE550 – Internet and Intranet Applications
ML
3
XML: The Missing Link For Web Applications
Portablecode
Portabledata
92
XM
BTE550 – Internet and Intranet Applications
Ubiquitouscommunication
ML
3
XML
►Portable data►Works anywhere►Lingua franca of the Internet►Multiple vendors►Open development process:
93
XM
BTE550 – Internet and Intranet Applications
►Open development process:– World Wide Web Consortium (W3C)
ML
3
Java and XML: Symbiotic Relationship
►It’s a “Match made in Heaven”– Java enables Portable Code– XML enables Portable Data
►XML tools and programs are mostly written in the Java programming language
94
XM
BTE550 – Internet and Intranet Applications
p g g g g►Better API support for Java platform than any other
language►Two great tastes that taste great together
ML
3Two Viewpoints of XML
►Presentation Oriented Publishing (POP)– Useful for Browsers and Editors– Usually used for data that will be consumed by Humans
►Message Oriented Middleware (MOM)– Useful for Machine-to-Machine data exchange
95
XM
BTE550 – Internet and Intranet Applications
Useful for Machine to Machine data exchange– Business-to-Business communication an excellent
example
ML
3
POP - MOM
Presentation Oriented Publishing (POP)
96
XM
BTE550 – Internet and Intranet Applications
Message Oriented Middleware (MOM)
17
ML
3
Standardization Activities
►XML Standards– Through Standard organizations– W3C, IETF, OASIS, UN/CEFACT
97
XM
BTE550 – Internet and Intranet Applications
ML
3
W3C►World Wide Web Consortium (W3C) creates Web
standards.►W3C's mission is to lead the Web to its full potential,
which it does by developing technologies (specifications, guidelines, software, and tools) that will create a forum for information commerce inspiration independent thought
98
XM
BTE550 – Internet and Intranet Applications
information, commerce, inspiration, independent thought, and collective understanding.
►W3C defines the Web as the universe of network-accessible information
►W3C languages RDF, XML, and digital signatures are the building blocks of the Semantic Web.
ML
3
XML
►XML is an extremely flexible format for data►In theory, any data that can be stored in a computer can be
stored in XML format.►In practice, XML is suitable for storing and exchanging
any data that can plausibly be encoded as text.
99
XM
BTE550 – Internet and Intranet Applications
►Unsuitable for multimedia data such as photographs,recorded sound, video, and other very large bit sequences
ML
3
XML
►The eXtensible Markup Language (XML) is the universal format for structured documents and data on the Web
►XML is a text-based markup language.►As with HTML, you identify data using tags (identifiers
enclosed in angle brackets, like this: <...>).
100
XM
BTE550 – Internet and Intranet Applications
►Collectively, the tags are known as "markup".►But unlike HTML, XML tags tell you what the data
means, rather than how to display it.
ML
3How XML Works
<?xml version="1.0"?> <invoiceinvoice>
<orderDateorderDate>2005-01-01</orderDateorderDate><shipDateshipDate>2005-01-05</shipDateshipDate><billingAddressbillingAddress>
<namename>Paul Biron</namename><streetstreet>123 IBM Avenue</streetstreet>
Data Oriented
101
XM
BTE550 – Internet and Intranet Applications
<streetstreet>123 IBM Avenue</streetstreet><citycity>Hawthorne</citycity><statestate>NY</statestate><zipzip>10532</zipzip>
</billingAddressbillingAddress><voicevoice>555-1234</voicevoice><faxfax>555-4321</faxfax>
</invoiceinvoice>
This document is text and might well be stored in a text file. You can edit this file with any standard text editor
ML
3
XML Parser►An XML parser is responsible for dividing the document
into individual elements, attributes, and other pieces. ►It passes the contents of the XML document to an
application piece by piece.►If at any point the parser detects a violation of the wellwell--
formedformedness rules of XML, then it reports the error to the
102
XM
BTE550 – Internet and Intranet Applications
end-tagelementstart-tag
, papplication and stops parsing.
<orderDateorderDate>2005-01-01</orderDateorderDate>
18
ML
3
XML Parser (Con’t)►Individual XML applications normally dictate more
precise rules about exactly which elements and attributesare allowed where– DTD, XML Schema
►Some XML parsers compare the document to its schemaas they read it to see if the document satisfies the
103
XM
BTE550 – Internet and Intranet Applications
yconstraints specified there
►Such a parser is called a validating parser►Checking a document against a schema is called
validationvalidation►Not all parsers are validating parsers. Some merely check
for well-formedness
ML
3
The Evolution of XML
►XML is a descendant of SGML, the Standard GeneralizedMarkup Language
►SGML was invented by Charles F. Goldfarb, Ed Mosher,and Ray Lorie at IBM in the 1970s
►Became ISO standard 8879 in 1986
104
XM
BTE550 – Internet and Intranet Applications
►It is a semantic and structural markup language for textdocuments
►Achieved some success in the U.S. military andgovernment, in the aerospace sector
►SGML's biggest success was HTML, which is an SGMLapplication
ML
3
XML Base Standard
105
XM
BTE550 – Internet and Intranet Applications
ML
3
The Evolution of XML (Con’t)
►The problem: SGML is complicated—very, verycomplicated
►It is so complex that almost no software has everimplemented it fully
►In 1996, J.Bosak, T.Bray, C.M. Sperberg, J.Clark, and
106
XM
BTE550 – Internet and Intranet Applications
several others began work on a "lite" version of SGML►The result, in February of 1998, was XML 1.0►The next standard out of the gate was Namespaces in
XML►Next was the Extensible Stylesheet Language (XSL)
ML
3The Evolution of XML (Con’t)
►Development of extensions to the core XML specification continues– XML Namespaces– XML DTDs, XML Schema– XSL (Extensible Style Sheet Language)
107
XM
BTE550 – Internet and Intranet Applications
( y g g )– XPath (=XSLT∩ XPointer), XLink– XQL (XML Query Language)– eXcelon
ML
3
XML Family of Standards
108
XM
BTE550 – Internet and Intranet Applications
19
XML FundamentalsXML Fundamentals
109
ML
3
XML Documents and XML Files
►An XML document contains text, never binary data►It can be opened with any program that knows how to read
a text file
<personperson> Alan Turing
A very simple yet complete XMLdocument
110
XM
BTE550 – Internet and Intranet Applications
Alan Turing</personperson>
document
person.xml
Your operating system may or may not like these names But an XML parser won't care
ML
3
Elements, Tags, and Character Data
►Example is composed of a single elementelement named person►The element is delimited by the start-tag <person> and the
d /
<personperson> Alan TuringAlan Turing
</personperson>
111
XM
BTE550 – Internet and Intranet Applications
end-tag </person>.►Everything between the start-tag and the end-tag of the
element is called the element's contentcontent►The whitespace is part of the content, though many
applications will choose to ignore it ►The string "Alan Turing" and its surrounding whitespace are
character datacharacter data
ML
3
XML Characteristics
►►ElementsElements
<PurchaseOrderPurchaseOrder></PurchaseOrderPurchaseOrder>
112
XM
BTE550 – Internet and Intranet Applications
ML
3XML Characteristics
►Elements►►TextText
<PurchaseOrder><description>BatteryBattery</description>
113
XM
BTE550 – Internet and Intranet Applications
<quantity>99</quantity>
<price>6060</price>
ML
3
XML Characteristics
►Elements►Text►►AttributesAttributes
<ShoeOrder id="4040458"id="4040458">
114
XM
BTE550 – Internet and Intranet Applications
<color>Brown</color><size>9</size><width>AA</width></ShoeOrder>
20
ML
3
An XML Document<?xml version="1.0"?><!DOCTYPE order SYSTEM "order.dtd"><order >
<book isbn="0-201-34285-5"><title>The XML Companion</title><author>Neil Bradley</author>
Processing InstructionProcessing Instruction
Document Type Definition (DTD)Document Type Definition (DTD)
Roo
t Ele
men
t
AttributeAttribute
115
XM
BTE550 – Internet and Intranet Applications
y<publisher>Addison-Wesley</publisher>
</book></order><!-- This is a comment -->D
ocum
ent R
CommentComment
Element
ML
3
XML Elements
►Basic components of XML documents►Elements must start with a letter, underscore or colon►Encapsulate element content, usually composed of:
– Other elements– Character data
116
XM
BTE550 – Internet and Intranet Applications
– Entity references►Delimited using tags►All elements must have a start-tag and an end-tag►Elements can optionally have attributes►Empty elements can use an abbreviated element form
ML
3
XML Namespaces
►XML Namespaces allow a prefix to be associated with an element to avoid name collisions
►XML Namespaces are a W3C specification►A unique URI must be used with a prefix to denote elements
in this namespace from other namespaces
117
XM
BTE550 – Internet and Intranet Applications
►The URI is only for distinguishing prefixes, it is not actually resolved
►Namespaces use the reserve word xmlns<CC:LunchMenu xmlns:Camp=“http://catering.com/CC”>. . .<CC:MainCourse>. . .</CC:MainCourse>
ML
3
Case Sensitivity
►XML, unlike HTML, is case sensitive►<Person> is not the same as <PERSON> is not the same
as <person>. ►If you open an element with a <person> tag, you can't
close it with a </PERSON> tag
118
XM
BTE550 – Internet and Intranet Applications
ML
3XML Trees
►Every XML document has one element that does not have a parent: root element<invoiceinvoice>
<orderDateorderDate>2005-01-01</orderDateorderDate><shipDateshipDate>2005-01-05</shipDateshipDate><billingAddressbillingAddress>
<namename>Paul Biron</namename>
119
XM
BTE550 – Internet and Intranet Applications
<namename>Paul Biron</namename><streetstreet>123 IBM Avenue</streetstreet><citycity>Hawthorne</citycity><statestate>NY</statestate><zipzip>10532</zipzip>
</billingAddressbillingAddress><voicevoice>555-1234</voicevoice><faxfax>555-4321</faxfax>
</invoiceinvoice> Root Element is invoice
ML
3
XML Trees (Con’t)
fatura
120
XM
BTE550 – Internet and Intranet Applications
siparişsipariş--tarihitarihi gönderimgönderim--tarihitarihi faturafatura--adresiadresi telefontelefon faxfax
isimisim caddecadde ilçeilçe şehirşehir postaposta--kodukodu
21
ML
3
Attributes►Elements can contain attributes to provide information
about the element►Attributes are not considered part of an element’s content►Attributes are not part of the presentation to an end user,
though they may be used to affect the presentation►An attribute is a name-value pair attached to the element's
121
XM
BTE550 – Internet and Intranet Applications
pstart-tag
►Names are separated from values by an equals sign and optional whitespace
►Values are enclosed in single or double quotation marks
ML
3
Attributes (Con’t)
<person bornborn="1912-06-23" dieddied="1954-06-07"> Alan Turing
</person>
or
122
XM
BTE550 – Internet and Intranet Applications
<person bornborn= `1912-06-23` dieddied= `1954-06-07`> Alan Turing
</person>
ML
3
Attributes (Con’t)
<person> <name first="Alan" last="Turing"/> <profession value="computer scientist"/> <profession value="mathematician"/>
<profession value="cryptographer"/>
123
XM
BTE550 – Internet and Intranet Applications
<profession value cryptographer /> </person>
When and whether one should use child elements or attributes to hold information?This is a subject of heated debate
ML
3
White Space►XML defines white space as any of these 4 characters
– Horizontal tab– Line feed– Carriage return– Space
124
XM
BTE550 – Internet and Intranet Applications
►An XML parser must pass all white space contained within content to the application
►An XML parser may remove white space in element tags and attribute values
►All end of line characters are converted to line feed characters by parsers
ML
3XML Names
►Element and other XML names may contain essentially any alphanumeric character.
►This includes the standard English letters A through Z and a through z as well as the digits 0 through 9.
►XML names may also include non-English letters,
125
XM
BTE550 – Internet and Intranet Applications
numbers, and ideograms such as ö, ç, Ω►They may also include these three punctuation characters:
– _ the underscore – - the hyphen – . the period
ML
3
XML Names (Con’t)►XML names may only start with letters, ideograms, and the
underscore character. ►They may not start with a number, hyphen, or period. ►There is no limit to the length of an element or other XML name. ►Thus these are all well-formed elements:
<Drivers License Number>98 NY 32
126
XM
BTE550 – Internet and Intranet Applications
– <Drivers_License_Number>98 NY 32</Drivers_License_Number>
– <month-day-year>7/23/2001</month-day-year> – <first_name>Alan</first_name> – <_4-lane>I-610</_4-lane> – <téléphone>011 33 91 55 27 55 27</téléphone>
22
ML
3
XML Names (Con’t)<permitedNames>
<name/> <xsl:copy-of><A_long_element_name/><A.name.separated.with.full.stops/> <a123323123 231 231/>
<forbidenNames><A;name/><last@name><@#$%^()%+?=/><A*2/><1ex/>
127
XM
BTE550 – Internet and Intranet Applications
<a123323123-231-231/><_12/>
</permitedNames>
<1ex/></forbidenNames>
ML
3
Entity References
►The character data inside an element may not contain a raw unescaped opening angle bracket (<).
►This character is always interpreted as beginning a tag ►If you need to use this character in your text, you can
escape it using the <<
128
XM
BTE550 – Internet and Intranet Applications
►When a parser reads the document, it will replace the <<entity reference with the actual << character
►<publisher>O'Reilly && Associates</publisher>
ML
3
Entity References (Con’t)
►XML predefines exactly five entity references: ►►<<
– The less-than sign; a.k.a. the opening angle bracket (<) ►►&&
– The ampersand (&) ►►& t& t
129
XM
BTE550 – Internet and Intranet Applications
►►>>– The greater-than sign; a.k.a. the closing angle bracket (>)
►►""– The straight, double quotation marks (")
►►''– The apostrophe; a.k.a. the straight single quote (')
ML
3
Character References
►Character references represent displayable characters that cannot otherwise be displayed
►Character references are either decimal or hexadecimal numbers– Decimals are preceded by “&#”
130
XM
BTE550 – Internet and Intranet Applications
– Hexadecimals are preceded by “&#x”– All character references end with a semicolon
►Example:– © or © will display as ©
ML
3CDATA Sections
►When an XML document includes samples of XML or HTML source code, the < and & characters in those samples must be encoded as << and &&.
►The more sections of literal code a document includes and the longer they are, the more tedious this encoding b
131
XM
BTE550 – Internet and Intranet Applications
becomes►Instead you can enclose each sample of literal code in a
CDATA section. CDATA sections exist for the convenience of human authors, not for programs.
►An XML parser will not attempt to process any data in a CDATA section
ML
3
CDATA Sections: Example<p>You can use a default <code>xmlns</code> attribute to avoid
having to add the svg prefix to all your elements:</p> <![CDATA[
<svg xmlns="http://www.w3.org/2000/svg" width="12cm" height="10cm">
132
XM
BTE550 – Internet and Intranet Applications
height 10cm <ellipse rx="110" ry="130" /><rect x="4cm" y="1cm" width="3cm" height="6cm" /> </svg> ]]
>
23
ML
3
Comments
►XML documents can be commented so that coauthors can leave notes for each other and themselves, documenting why they've done what they've done or items that remain to be done.<!<!---- I need to verify and update these links when I get a chance. ---->>
133
XM
BTE550 – Internet and Intranet Applications
►Comments may appear anywhere in the character data of a document.
►They may also appear before or after the root element.
ML
3
Processing Instructions
►XML provides the processing instruction as a mean of passing information to particular applications that may read the document.
►A processing instruction begins with <? and ends with ?>. ►Immediately following the <? is an XML name called the
target
134
XM
BTE550 – Internet and Intranet Applications
target►Processing instructions are markup, but they're not
elements. ►Consequently, like comments, processing instructions may
appear anywhere in an XML document outside of a tag, including before or after the root element.
ML
3
<?php
mysql_connect("database.unc.edu", "clerk", "password");
$result = mysql("HR","SELECT LastName, FirstName FROM Employees ORDER BY LastName, FirstName");
$i = 0;
while ($i < mysql_numrows ($result)) {
$fields = mysql fetch row($result);
135
XM
BTE550 – Internet and Intranet Applications
$fields = mysql_fetch_row($result);
echo "<person>$fields[1] $fields[0] </person>\r\n";
$i++;
}
mysql_close( );
?>
ML
3
Comments
►XML comments are used to provide information about the XML document
►Comments are not considered part of the content►Comment have the following syntax:
<!-- comment text -->►C h i id k
136
XM
BTE550 – Internet and Intranet Applications
►Comments can appear anywhere except inside markup tags and attribute values
►XML comments should not be used to transmit information
►Comments should contain no entity or character references
ML
3The XML Declaration
►XML documents should (but do not have to) begin with an XML declaration.
►The XML declaration looks like a processing instruction with the name xml and version, standalone, and encoding attributes.
137
XM
BTE550 – Internet and Intranet Applications
►Technically, it's not a processing instruction though, just the XML declaration
<??xmlxml version="1.0" encoding="ASCII" standalone="yes"??> <person>
Alan Turing </person>
ML
3
Encoding
►XML documents are composed of pure text►Which encoding?
– Is it ASCII? Latin-1? – Unicode? Something else?
► By default XML documents are assumed to be encoded in h 8 i bl l h di f h i d
138
XM
BTE550 – Internet and Intranet Applications
the UTF-8 variable-length encoding of the Unicode character set.
► However, most XML processors, especially those written in Java, can handle a much broader range of character sets.
►All you have to do is tell the parser which character encoding the document uses.
24
ML
3
Encoding (Con’t)
►An XML document encoded in Latin-1 which includes letters like ö and ç needed for many non-English Western European languages.
<?xmlversion="1.0"encoding="ISOencoding="ISO--88598859--1"1" standalone="yes"?>
<person>
139
XM
BTE550 – Internet and Intranet Applications
<person>
Erwin Schrödinger
</person>
ML
3
Standalone
►If the standalone attribute has the value no, then an application may be required to read an external DTD to determine the proper values for parts of the document.
►For instance, a DTD may provide default values for attributes that a parser is required to report even though h ' ll i h d
140
XM
BTE550 – Internet and Intranet Applications
they aren't actually present in the document.
ML
3
Well-Formedness► Every XML document must be well-formed. This means it must
adhere to a number of rules, including the following: 1. Every start-tag must have a matching end-tag. 2. Elements may nest, but may not overlap. 3. There must be exactly one root element. 4 Attribute values must be quoted
141
XM
BTE550 – Internet and Intranet Applications
4. Attribute values must be quoted. 5. An element may not have two attributes with the same name. 6. Comments and processing instructions may not appear inside
tags. 7. No unescaped < or & signs may occur in the character data of
an element or attribute.
ML
3
Well-formed XML Examples
►A well formed document with one element:<text>This is an XML document</text>
►A well formed document with several elements:<name>
<first>Binnur</first>
142
XM
BTE550 – Internet and Intranet Applications
<first>Binnur</first> <last>Kurt</last>
</name>
ML
3Well-formed XML Examples:
Match start & end Tag►The name in an element's end-tag must match the element
type in the start-tag.►In HTML some elements do not have to have a closing
tag. The following code is legal in HTML:< >Thi i h
143
XM
BTE550 – Internet and Intranet Applications
<p>This is a paragraph <p>This is another paragraph
►In XML all elements must have a closing tag like this:<p>This is a paragraph</p> <p>This is another paragraph</p>
ML
3
Well-formed XML Examples: One root element
►There is exactly one element, called the root, or document element, no part of which appears in the content of anyother element.
<name>Binnur Kurt</name>
144
XM
BTE550 – Internet and Intranet Applications
<name> <first>Binnur</first><last>Kurt</last>
</name>
25
ML
3
Well-formed XML Examples: Element end tag
►Each element has either the end tag or takes the special form.
►There is no difference between <AAA></AAA> and <AAA/> in XML.<listOfTags>
145
XM
BTE550 – Internet and Intranet Applications
<AAA></AAA> <BBB></BBB> <CCC/> <DDD/>
</listOfTags>
ML
3
Well-formed XML Examples: Attributes
►XML elements can have attributes in name/value pairs.►Attribute values must always be quoted►With XML, it is illegal to omit quotation marks around
attribute values.<elements-with-attributes>
l k " " /
146
XM
BTE550 – Internet and Intranet Applications
<el _ok = "yes" /><one attr= "a value"/> <several first="1" second = '2' third= "333"/> <apos_quote case1="John's" case2='He said: "Hello!"'/>
</elements-with-attributes>
ML
3
XML Quiz 1
►Find errors:<root><e1 a*b = "23432"/><e2 value = "12'/><e3 value="aa"aa"/>
147
XM
BTE550 – Internet and Intranet Applications
<e3 value aa aa /><e4 value=bbbb/><e5 xml-ID = "xml2"/></root>
ML
3
XML Quiz 1
►Solution:<root><e1 a*b = "23432"/><e2 value = "12'/><e3 value="aa"aa"/>
148
XM
BTE550 – Internet and Intranet Applications
<e3 value aa aa /><e4 value='bbbb'/><e5 xml-ID = "xml2"/></root>
ML
3XML Quiz 2
►Find Errors:<root><example>
<![CDATA[ <P>Q&R]]></example>
149
XM
BTE550 – Internet and Intranet Applications
<Name>Binnur Kurt
</Name><Address/></root>
ML
3
XML Quiz 2
►Solution:No error
150
XM
BTE550 – Internet and Intranet Applications
26
ML
3
XML Quiz 3
►Find Errors:<root><isLower>
23 < 46</isLower>
151
XM
BTE550 – Internet and Intranet Applications
</isLower><Name>
Willey & Sons</name></root>
ML
3
XML Quiz 3
►Solution:<root><isLower>
23 < 46</isLower>
152
XM
BTE550 – Internet and Intranet Applications
</isLower><Name>
Willey & Sons</name></root>
ML
3
Exercise: Create an XML document►Create an XML document that captures business card
information.►Give appropriate tag names.►cd $Lab$\Mod1►Review card.txt – make appropriate changes and create
153
XM
BTE550 – Internet and Intranet Applications
card.xml
XML Using DTDsXML Using DTDs4
Copyleft © 2005, Binnur Kurt
G D
TDs
4Content
►Define Document Type Definition (DTD)►Give an example of an XML file with a DTD to illustrate
DTD syntax►Write a program that uses a validating SAX parser►Write a SAX program that uses the EntityResolver
155
XM
L U
SIN
BTE550 – Internet and Intranet Applications
p g yinterface to control handling of external subsets
G D
TDs
4
Objectives
►Understand as to why to constrain XML documents– Validation of XML Documents
►Understand as to how to do this using– DTDs and– XML Schema
156
XM
L U
SIN
BTE550 – Internet and Intranet Applications
XML Schema
27
G D
TDs
4
XML and Schema
►XML = Portable data►XML = Unconstrained data►DTDs and XML Schemas add Constraints to XML
157
XM
L U
SIN
BTE550 – Internet and Intranet Applications
G D
TDs
4
Example: Unconstrained XML document
<?xml version="1.0"?><trade account=“1234567” action=“buy”><symbol>SUNW</symbol><symbol>IBM</symbol><symbol>CSCO</symbol>
158
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<symbol>CSCO</symbol><quantity>200</quantity><quantity>100</quantity></trade>
G D
TDs
4
XML DTD – Document Type Definition
►A DTD defines the legal elements of an XML document.►DTD is described in XML 1.0 standard.►A DTD can be declared inline in your XML document, or
as an external reference.►Internal DOCTYPE declaration:
159
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<!DOCTYPE root-element [element-declarations]>►External DOCTYPE declaration:
<!DOCTYPE root-element SYSTEM "filename">
G D
TDs
4
Valid XML documents
►A "Well Formed" XML document has correct XML syntax.
►A "Valid" XML document is not only well-formed, but conforms to a DTD.
160
XM
L U
SIN
BTE550 – Internet and Intranet Applications
G D
TDs
4Why use DTD?
►With a DTD, independent groups of people can agree to use a common DTD for interchanging data.
►Your application can use a standard DTD to verify that the data you receive from the outside world is valid.
►You can also use a DTD to verify your own data.
161
XM
L U
SIN
BTE550 – Internet and Intranet Applications
►A lot of forums are emerging to define standard DTDs for almost everything in the areas of data exchange.
G D
TDs
4
Example: XML document with a DTD<?xml version="1.0"?><!DOCTYPE note [<!ELEMENT note (to,from,heading,body)><!ELEMENT to (#PCDATA)><!ELEMENT from (#PCDATA)><!ELEMENT heading (#PCDATA)><!ELEMENT body (#PCDATA)>
162
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<!ELEMENT body (#PCDATA)>]><note>
<to>J. Canny</to><from>Binnur Kurt</from><heading>Tebrikler</heading><body>Merhaba!!</body>
</note>
28
G D
TDs
4
Rules for DTD
►The document type declaration must appear before the first element in the document.
►The name following the word DOCTYPE in the document type declaration must match the name of root element.
►When an element type has element content, that type must
163
XM
L U
SIN
BTE550 – Internet and Intranet Applications
contain only child elements (no character data), optionally separated by white space.
G D
TDs
4
Example►name.dtd:<!ELEMENT namename (firstfirst, lastlast)><!ELEMENT firstfirst (#PCDATA)><!ELEMENT lastlast (#PCDATA)>►Employees.xml:
<!DOCTYPE name SYSTEM “name.dtd">
164
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<namename><firstfirst>Sridhar</firstfirst><lastlast>Reddy</lastlast>
</namename>
G D
TDs
4
Example: XML document with a DTD<?xml version="1.0"?><!DOCTYPE trade [<!ELEMENT trade (symbol, quantity)><!ATTLIST tradeaccount CDATA #REQUIREDaction (buy | sell) #REQUIRED >
165
XM
L U
SIN
BTE550 – Internet and Intranet Applications
action (buy | sell) #REQUIRED ><!ELEMENT symbol (#PCDATA)><!ELEMENT quantity (#PCDATA)> ]><trade account=“1234567” action=“buy”>
<symbol>SUNW</symbol><quantity>100</quantity>
</trade>
G D
TDs
4
Quiz: Is this a valid XML document?<?xml version="1.0"?><!DOCTYPE trade [<!ELEMENT trade (symbol, quantity)><!ATTLIST tradeaccount CDATA #REQUIREDaction (buy | sell) #REQUIRED >
166
XM
L U
SIN
BTE550 – Internet and Intranet Applications
action (buy | sell) #REQUIRED ><!ELEMENT symbol (#PCDATA)><!ELEMENT quantity (#PCDATA)> ]><trade account=“1234567” action=“steal”>
<symbol>SUNW</symbol><quantity>100</quantity>
</trade>
G D
TDs
4Quiz: Is this a valid XML document?
<?xml version="1.0"?><!DOCTYPE trade [<!ELEMENT trade (symbol, quantity)><!ATTLIST tradeaccount CDATA #REQUIREDaction (buy | sell) #REQUIRED >
167
XM
L U
SIN
BTE550 – Internet and Intranet Applications
action (buy | sell) #REQUIRED ><!ELEMENT symbol (#PCDATA)><!ELEMENT quantity (#PCDATA)> ]><trade account=“1234567” action=“sell”>
<symbol>SUNW</symbol><quantity>100</quantity>
</trade>
G D
TDs
4
Quiz: Is this a valid XML document?<?xml version="1.0"?><!DOCTYPE trade [<!ELEMENT trade (symbol, quantity)><!ATTLIST tradeaccount CDATA #REQUIREDaction (buy | sell) #REQUIRED >
168
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<!ELEMENT symbol (#PCDATA)><!ELEMENT quantity (#PCDATA)> ]><trade account=“1234567” action=“sell”>
<symbol>SUNW</symbol><quantity>100</quantity><quantity>300</quantity>
</trade>
29
G D
TDs
4
More Rules for DTD
►Here are the qualifiers you can add to an element definition:
Qualifier Name Meaning? Question Mark Optional (zero or one)* Asterisk Zero or more
169
XM
L U
SIN
BTE550 – Internet and Intranet Applications
Asterisk Zero or more+ Plus Sign One or more
none Default Must occur once
G D
TDs
4
Example using *, ? and + in DTDtutorial.dtd: <!ELEMENT XXX (AAA? , BBB+)><!ELEMENT AAA (CCC? , DDD*)><!ELEMENT BBB (CCC , DDD)><!ELEMENT CCC (#PCDATA)>
!ELEMENT DDD (#PCDATA)
170
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<!ELEMENT DDD (#PCDATA)>►The root element XXX can contain one element AAA
followed by one or more elements BBB.►Element AAA can contain one element CCC and several
elements DDD.►Element BBB must contain precisely one element CCC
and one element DDD.
G D
TDs
4
Example using *, ? and + in DTDtutorial.dtd: <!ELEMENT XXX (AAA? , BBB+)><!ELEMENT AAA (CCC? , DDD*)><!ELEMENT BBB (CCC , DDD)><!ELEMENT CCC (#PCDATA)> <!ELEMENT DDD (#PCDATA)><!DOCTYPE tutorial SYSTEM "tutorial.dtd">
171
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<XXX><AAA>
<CCC/><DDD/></AAA> <BBB>
<CCC/><DDD/></BBB>
</XXX>
G D
TDs
4
Example using *, ? and + in DTDtutorial.dtd: <!ELEMENT XXX (AAA? , BBB+)><!ELEMENT AAA (CCC? , DDD*)><!ELEMENT BBB (CCC , DDD)><!ELEMENT CCC (#PCDATA)> <!ELEMENT DDD (#PCDATA)><!DOCTYPE tutorial SYSTEM "tutorial.dtd">
172
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<XXX><AAA/> <BBB>
<CCC/><DDD/>
</BBB></XXX>
G D
TDs
4Example using *, ? and + in DTD
tutorial.dtd: <!ELEMENT XXX (AAA? , BBB+)><!ELEMENT AAA (CCC? , DDD*)><!ELEMENT BBB (CCC , DDD)><!ELEMENT CCC (#PCDATA)> <!ELEMENT DDD (#PCDATA)>
173
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<!DOCTYPE tutorial SYSTEM "tutorial.dtd"> <XXX>
<BBB><CCC/><DDD/>
</BBB></XXX>
G D
TDs
4
Example using *, ? and + in DTDtutorial.dtd: <!ELEMENT XXX (AAA? , BBB+)><!ELEMENT AAA (CCC? , DDD*)><!ELEMENT BBB (CCC , DDD)><!ELEMENT CCC (#PCDATA)> <!ELEMENT DDD (#PCDATA)><!DOCTYPE tutorial SYSTEM "tutorial.dtd"> <XXX>
174
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<XXX><AAA>
<CCC/> <CCC/><DDD/> <DDD/>
</AAA> <BBB>
<CCC/><DDD/></BBB>
</XXX>
30
G D
TDs
4
More DTD Rules►With character [ | ] you can select one from several elements.
<!ELEMENT XXX (AAA , BBB)> <!ELEMENT AAA (CCC , DDD)><!ELEMENT BBB (CCC | DDD)> <!ELEMENT CCC (#PCDATA)><!ELEMENT DDD (#PCDATA)>
175
XM
L U
SIN
BTE550 – Internet and Intranet Applications
!ELEMENT DDD (#PCDATA)►The root element XXX must contain one element AAA
followed by one element BBB.►Element AAA must contain one element CCC followed by
element DDD.►Element BBB must contain either one element CCC or one
element DDD
G D
TDs
4
DTD Rules
►Text can be interspersed with elements<!ELEMENT XXX (AAA+ , BBB+)><!ELEMENT AAA (BBB | CCC )><!ELEMENT BBB (#PCDATA | CCC )*><!ELEMENT CCC (#PCDATA)>
176
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<!ELEMENT CCC (#PCDATA)>►The element AAA can contain either BBB or CCC►On the other hand the element BBB can contain any
combination of text and CCC elements.
G D
TDs
4
Attributes declaration in DTD
►Attributes are used to associate name-value pairs with elements.
►Attribute specifications may appear only within start-tags and empty element tags.
►The declaration starts with ATTLIST then follows the
177
XM
L U
SIN
BTE550 – Internet and Intranet Applications
name of the element the attributes belong to and thenfollows the definition of the individual attributes.
►The order of attributes is not important
G D
TDs
4
Example: Attributes declaration in DTD<!ELEMENT attributes (#PCDATA)><!ATTLIST attributes
aaa CDATA #REQUIREDbbb CDATA #IMPLIEDccc CDATA #FIXED “someData” >
178
XM
L U
SIN
BTE550 – Internet and Intranet Applications
►An attribute of CDATA type can contain any character if it conforms to well formedness constraints.
►Required attribute must be always present►Implied attribute is optional.►If an attribute has a default value declared with the #FIXED
keyword, instances of that attribute must match the default value.
G D
TDs
4Example: Attributes declaration in DTD
<!DOCTYPE student [<!ELEMENT student (name)><!ELEMENT name (#PCDATA)><!ATTLIST student DOB
CADAT #REQUIRED EDUCDATA #IMPLIED> ]>
179
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<student DOB="Nov11,1990" EDU="4thGrade"><name>Curran Reddy </name>
</student>
<student EDU="1st Grade" DOB="May14,1994"><name>Kaavya Reddy</name>
</student>
G D
TDs
4
Rules in DTD: Attribute values►Permitted attribute values can be defined in DTD. <!ELEMENT SPORT (player+,practicemonth)><!ELEMENT player (#PCDATA)><!ELEMENT practiceMonth EMPTY)><!ATTLIST player meetsHeightReq ( yes | no )
180
XM
L U
SIN
BTE550 – Internet and Intranet Applications
#REQUIRED> <!ATTLIST practiceMonth (1|2|3|4|5|6|7|8|9|10|11|12)
#IMPLIED>►The attribute meetsHeightReq cannot have the value
"maybe“►The attribute practiceMonth cannot have the value "16"
31
G D
TDs
4
Rules in DTD: Attribute values
►If an attribute is implied, a default value can be provided for the case when the attribute is not used.<!ELEMENT practiceMonth EMPTY)><!ATTLIST practiceMonth (1|2|3|4|5|6|7|8|9|10|11|12) “11”>
►An element can be defined EMPTY. In such a case it can i l ib b
181
XM
L U
SIN
BTE550 – Internet and Intranet Applications
contain only attributes but no text.<!ELEMENT AAA EMPTY><!ATTLIST AAA true ( yes | no ) "yes">
G D
TDs
4
Rules in DTD: Parameter-entity►Parameter-entity references may only appear in the DTD.►Parameter-entity references use percent-sign (%) and semicolon (;)
as delimiters.►Example:
– <!ENTITY % auction-req SYSTEM "Auction.dtd">►Usage:
182
XM
L U
SIN
BTE550 – Internet and Intranet Applications
►Usage:– %auction-req;
►Errors:– Fatal Error: Missing whitespace after % in parameter entity
declaration.– Fatal Error: Illegal parameter entity reference syntax. If space
after % when referencing.
G D
TDs
4
DTD Validation
►Validating with the XML Parser
183
XM
L U
SIN
BTE550 – Internet and Intranet Applications
G D
TDs
4
Designing an XML Data Structure
►Whenever possible, use an existing DTD. It's usually a lot easier to ignore the things you don't need than to design your own from scratch
►Using a standard DTD makes data interchange possible, and may make it possible to use data-aware toolsd l d b h
184
XM
L U
SIN
BTE550 – Internet and Intranet Applications
developed by others.►If an industry standard exists, consider referencing that
DTD with an external parameter entity.►industry-standard DTDs:
– http://www.XML.org– http://www.xmlx.com
G D
TDs
4Attributes and Elements
►When to model a given data item as a subelement or as an attribute of an existing element?
►Use elementelement if:– The data contains substructuressubstructures– The data contains multiple linesmultiple lines
185
XM
L U
SIN
BTE550 – Internet and Intranet Applications
– The data changeschanges frequentlyfrequently►Use attributeattribute if:
– The data is a small, simple string thatsmall, simple string that rarely changesrarely changes– The data is confined to a small number ofconfined to a small number of fixed fixed
choiceschoices
G D
TDs
4
Attributes and Elements►Also consideration can be based on how you would like to parse the
data. <employee>
<id> 12056 </id><grade>Manager</grade><division>Engineering</division>
186
XM
L U
SIN
BTE550 – Internet and Intranet Applications
g g<description>
He is a manager of X product. Leads a team of 15programmers. Also this person is in the special taskforce team to build next generation app.
</description></employee>
32
G D
TDs
4
Attributes and Elements
►or as: <employee grade=“Manager“ id=“12056”
division=“Engineering” ><description>
He is a manager generation app
187
XM
L U
SIN
BTE550 – Internet and Intranet Applications
He is a manager … generation app</description>
</employee>
G D
TDs
4
Limitations of DTDs
►DTDs are not defined in XML►DTDs don't distinguish between different data types, such
as dates, integers, and text strings as Data Types are not mentioned.
188
XM
L U
SIN
BTE550 – Internet and Intranet Applications
G D
TDs
4
XML Schema
►XML Schema facilities for describing the structure and constraining the contents of XML 1.0 documents
►The schema language, which is itself represented in XML 1.0
►XML Schema was a W3C Proposed Recommendation as
189
XM
L U
SIN
BTE550 – Internet and Intranet Applications
of March 16, 2001►XML Schema is now a W3C Recommendation as of May
2nd 2001.– http://www.w3.org/TR/2001/REC-xmlschema-0-
20010502/
G D
TDs
4
Example DTDs and Schemas► Electronics Supply Chain (RosettaNet)► Electronic Business (ebXML - UN/CEFACT & OASIS)► Finance (IFX)► Healthcare (XL7)► Payment Processing (Visa XML)► Hospitality (Hitis-X)► Trading Partners (tpaML - IBM)
190
XM
L U
SIN
BTE550 – Internet and Intranet Applications
► Trading Partners (tpaML IBM)► B2B (eBIS-XML - BASDA)► Internet billing (Spectrum )► WAP (WML)► School Interoperability (SIF)► Telephony (XTML)► Travel (OTA)► and many, many, more...
G D
TDs
4How Will Agreements Be Shared?
►We need to publish XML agreements on the Internet– human search: what industry standard meets my needs?– machine resolution/namespaces– versioning: what is the latest version of a DTD or Schema?– archiving: what is the meaning of documents generated 20
years ago?
191
XM
L U
SIN
BTE550 – Internet and Intranet Applications
years ago?►Requirement for XML registry and repository
– developed/implemented to open specifications– accessible by everyone– unencumbered use of repository
G D
TDs
4
XML.ORG Registry
►Central clearinghouse for accessing XML schemas, vocabularies and related documents
►Self-supporting, non-commercial resource created by OASIS for the community at large
►Model for a distributed web of repositories that will
192
XM
L U
SIN
BTE550 – Internet and Intranet Applications
comply with OASIS Technical Committee specification
33
G D
TDs
4
Exercise: Create a DTD
►Part 1:– Create a DTD for the XML document that captured the
information about business card in lab 1.►Part 2:
– Compare your DTD to the person sitting next to you
193
XM
L U
SIN
BTE550 – Internet and Intranet Applications
p y p g yand see if you can combine into one which can still validate both the XML documents.
G D
TDs
4
DTDs vs. schemas (types)
►By database (or programming language) standard, XML DTDs are rather weak specifications.– Only one base type -- PCDATA.– No useful “abstractions”, e.g., unordered records.– No sub-typing or inheritance.
d d i hi b
194
XM
L U
SIN
BTE550 – Internet and Intranet Applications
– IDREFs are not typed or scoped -- you point to something, but you don’t know what!
►XML extensions to overcome the limitations.– Type systems: XML-Data, XML-Schema, SOX, DCD– Integrity Constraints
G D
TDs
4
XML Schema
►Official W3C Recommendation►A rich type system
– Simple (atomic, basic) types for both element and attributes– Complex types for elements– Inheritance
195
XM
L U
SIN
BTE550 – Internet and Intranet Applications
Inheritance– Constraints
• key• keyref (foreign keys)• uniqueness: “more general” keys
– Namespace
G D
TDs
4
Atomic types►string, integer, boolean, date, …, ►enumeration types►restriction and range [a-z]►list: list of values of an atomic type, …
196
XM
L U
SIN
BTE550 – Internet and Intranet Applications
G D
TDs
4Atomic types: Examples
Example: define an element or an attribute<xs:element name=“car” type=“carType”> <xs:attribute name=“car” type =“carType”>
Define the type:<xs:simpleType name=“carType”>
197
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<xs:simpleType name carType > <xs:restriction base=“xs:string”>
<xs:enumeration value=“Audi”><xs:enumeration value=“BMW”>
</xs:restriction></xs:simpleType>
G D
TDs
4
Complex types
►Sequence: “record type” – ordered►All: record type – unordered ►Choice: variant type►Occurrence constraint: maxOccurs, minOccurs►Group: mimicking parameter type to facilitate complex
198
XM
L U
SIN
BTE550 – Internet and Intranet Applications
►Group: mimicking parameter type to facilitate complex type definition
►Any: “open” type – unrestricted
34
G D
TDs
4
Example
►A complex type for publications:<xs:complexType name=“publicationType”>
<xs:sequence><xs:choice>
<xs:group ref=“journalType”><xs:element name=“conference” type=“xs:string”/>
199
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<xs:element name conference type xs:string /></xs:choice><xs:element name=“title” type=“xs:string”/><xs:element name=“author” type=“xs:string”
minOccur=“0” maxOccur=“unbounded”/></xs:sequence>
</xs:complexType>
G D
TDs
4
Example (cont’d)
<xs:group name=“journalType”> <xs:sequence>
<xs:element name=“name” type=“xs:string”/><xs:element name=“volume” type=“xs:integer”/><xs:element name=“number”
200
XM
L U
SIN
BTE550 – Internet and Intranet Applications
type=“xs:integer”/> </xs:sequence>
</xs:group>
G D
TDs
4
Inheritance -- Extension
►Subtype: extending an existing type by including additional fields<xs:complexType name=“datedPublicationType”>
<xs:complexContent><xs:extension base=“publicationType”>
< >
201
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<xs:sequence><xs:element name=“isbn” type=“xs:string”/>
</xs:sequence><xs:attribute name=“publicationDate” type=“xs:date”/>
</xs:extension></xs:complexContent></xs:complexType>
G D
TDs
4
Inheritance ─ RestrictionSupertype: restricting/removing certain fields of an existing
type <xs:complexType name=“anotherPublicationType”>
<xs:complexContent><xs:restriction base=“publicationType”>
<xs:sequence><xs:choice>
202
XM
L U
SIN
BTE550 – Internet and Intranet Applications
<xs:choice><xs:group ref=“journalType”><xs:element name=“conference” type=“xs:string”/>
</xs:choice><xs:element name=“author” type=“xs:string”
minOccur=“1” maxOccur=“unbounded”/></xs:sequence></xs:restriction>
</xs:complexContent></xs:complexType>
Removed title; minOccur of author is incremented to 1
HTMLHTML5
Copyleft © 2005, Binnur Kurt
ML
5
Content
►Creating Basic Documents►Use HTML to structure a basic Web page by manipulating
text and graphics
204
HTM
BTE550 – Internet and Intranet Applications
35
ML
5
Overview► Hypertext Markup Language (HTML) is the foundation of all Web
documents, or pages. ► This module will teach you the basic elements and architecture of
a web page and how HTML brings it together. ► You will learn to identify tags, view code, create hierarchies,
format text and pages, and use styles and style sheets.
205
HTM
BTE550 – Internet and Intranet Applications
ML
5
Introduction►It is important to know the elements involved with
building Web pages. Upon completion of this lesson, you will be able to: – Summarize Web page creation – List the elements of HTML
206
HTM
BTE550 – Internet and Intranet Applications
– Identify HTML tags – View and evaluate HTML code in a page
ML
5
Basics
►The pages created with HTML are plain text. ►You can create, edit, or view the HTML code for a Web
page in any text editor, such as Windows Notepad, on any computer platform.
207
HTM
BTE550 – Internet and Intranet Applications
ML
5
Web-Authoring Tools►Although creating simple Web pages in a text editor is
easy, it can become a tedious task. ►Web-authoring tools, such as Microsoft FrontPage
Express and Macromedia Dreamweaver, allow you to create HTML Web pages in the same way word documents are created.
208
HTM
BTE550 – Internet and Intranet Applications
ML
5Browsers
►When a Web page is open in a browser, the HTML code that creates the page is not visible.
►Instead, the browser interprets the HTML code and displays the page appropriately on the screen.
209
HTM
BTE550 – Internet and Intranet Applications
ML
5
Edit Views►If you are creating a Web page in a text editor and want to
view the file, save your work and open the file in the browser.
►You can then continue to edit, save your work, and view the results, switching between the text editor and the browser to see the effects of the edits.
210
HTM
BTE550 – Internet and Intranet Applications
36
ML
5
Browser Limitations►The original intent of the HTML specification was to allow Web
authors to describe the structure of a page without spending time on the look of a page.
►Traditionally, each browser had its own way of interpreting the look of the page, and the page created would appear differently on different browsers.
211
HTM
BTE550 – Internet and Intranet Applications
ML
5
Accurate Page Descriptions►HTML can now describe the look of a page accurately. ►More and more descriptive elements are being established
in the HTML specification, such as font styles, sizes, colors, and style sheets that can maintain a consistent look throughout a Web site.
212
HTM
BTE550 – Internet and Intranet Applications
ML
5
Text Limitations►An author can specify a paragraph of text be defined as
one of the six heading levels, but the HTML heading code cannot describe what a heading should look like.
►The Web browser must differentiate each type of heading from the others.
213
HTM
BTE550 – Internet and Intranet Applications
ML
5
View Testing►When a browser differentiates a non-specific message, one
browser might display the first-level heading in a large font centered on the page, while another browser might display it in italics and left-aligned on the page.
►As a result, authors test pages in several of the more popular browsers
214
HTM
BTE550 – Internet and Intranet Applications
popular browsers.
ML
5Standard Views
►The browser market has been consolidating and standardizing to eliminate interpretation problems.
►There are few differences in the ways competing browsers display the widely accepted HTML features in a page.
►However, new HTML features become available all the time, and Web authors must decide whether to include a new feature in a page when that feature may not be well interpreted by some browsers
215
HTM
BTE550 – Internet and Intranet Applications
when that feature may not be well interpreted by some browsers.
ML
5
Elements►A Web page consists of elements, each of which is
defined by an HTML code, or tag.
216
HTM
BTE550 – Internet and Intranet Applications
37
ML
5
Tag Architecture►A tag is always enclosed in angle brackets, and most tags
come in pairs, with an opening and a closing tag. ►The closing tag is the same as the opening tag, but starts
with a forward slash. ►For example, to define text as a first-level heading in
217
HTM
BTE550 – Internet and Intranet Applications
HTML, use the <H1> tag, as shown.
ML
5
Browsers
►A browser interprets tags and displays the text within the tags appropriately.
►The tags themselves are not displayed within a browser unless there is a problem with a tag such as if one of the angle brackets was mistakenly left out.
218
HTM
BTE550 – Internet and Intranet Applications
►Most browsers will ignore any codes within angle brackets that they do not recognize.
ML
5
Attributes
►Some tags have optional or required attributes. An attribute is usually a keyword that takes one of several possible values.
►A value is defined by enclosing it in quotes. ►For example, the heading tag can take an optional
219
HTM
BTE550 – Internet and Intranet Applications
alignment attribute.
ML
5
Uppercase or Lowercase
►You can create a tag in either uppercase or lowercase. ►For example, the two tags <H1> and <h1> are equivalent
to a browser.
220
HTM
BTE550 – Internet and Intranet Applications
ML
5HTML tag
►The <HTML> tag declares that the text that follows defines an HTML Web page that can be viewed in a Web browser.
►The closing </HTML> tag ends the page.
221
HTM
BTE550 – Internet and Intranet Applications
ML
5
HEAD tag
►The <HEAD> tag defines the header area of a page, which is not displayed within the page itself in the browser.
►The closing </HEAD> tag ends the header area.
222
HTM
BTE550 – Internet and Intranet Applications
38
ML
5
TITLE tag
►Title TagThe text between <TITLE> and the closing </TITLE> tag is the title of the Web page and is displayed in the title bar of a browser.
►The title should be descriptive; as it is frequently used by Web indexing and searching programs to name the Web
223
HTM
BTE550 – Internet and Intranet Applications
page. ►In Internet Explorer, a page title is the default name used
when you save the page as a favorite location.
ML
5
BODY tag
►The <BODY> tag delineates the actual content of the Web page that will be displayed in the browser.
►There are several optional attributes for this tag. ►One of them is BACKGROUND, with which you can
specify a background graphical image for the page.
224
HTM
BTE550 – Internet and Intranet Applications
ML
5
Paragraph tag
►Use the paragraph tag (<P>) to mark the beginning of a new paragraph; the ending tag, </P>, is optional but should be included for clarity during revisions.
►You can include the ALIGN attribute to specify whether the paragraph should be centered or right-aligned in the
225
HTM
BTE550 – Internet and Intranet Applications
page.
ML
5
Comment tag►The Comment tag is not revealed in the browser, but will be
advantageous when editing or viewing the HTML code for a page. ► In Internet Explorer, use the <!--> tag to create descriptive
comments within the code, which will be ignored by the browser. ►With other browsers, you can use the combination of symbols to
create a comment.
226
HTM
BTE550 – Internet and Intranet Applications
ML
5Spaces
►You can include extra spaces and blank lines in HTML code to make the code easier to read and interpret.
►When a browser opens a Web page, it ignores multiple spaces within the code and displays them as a single space.
227
HTM
BTE550 – Internet and Intranet Applications
ML
5
Hard Return
►HTML code ignores all hard returns within the code: for example, an Enter at the end of a text line you are editing in Notepad will not be displayed in the user's browser.
228
HTM
BTE550 – Internet and Intranet Applications
39
ML
5
Preformatted tag►In the preformatted tag <PRE>, spaces and hard returns in
the HTML code do display. ►It instructs a browser to display the text in a mono-spaced
font that allows you to align text precisely, such as you would when showing a program listing.
229
HTM
BTE550 – Internet and Intranet Applications
ML
5
Information
►For additional documentation on tags used in HTMLhttp://werbach.com/barebones/barebones.html
230
HTM
BTE550 – Internet and Intranet Applications
ML
5
Underlying Code
►Most Web pages are built from the same text-based HTML language, so when viewing an interesting page in a browser, take a look at the underlying code.
231
HTM
BTE550 – Internet and Intranet Applications
ML
5
Save as View
►To view a page's code, click View > Source in Internet Explorer or View > Page Source in Navigator to display the current page's HTML code within Notepad.
232
HTM
BTE550 – Internet and Intranet Applications
ML
5Evolving Language
►HTML is constantly evolving. ►Web authors may include new and improved tags within
Web pages to produce new effects. ►But browser software may not recognize those HTML
features.
233
HTM
BTE550 – Internet and Intranet Applications
►W3C at the MIT defines and establishes new versions of HTML to help with this problem.
►Unofficially, leaders such as Microsoft and Netscape, regularly invent their own extensions to official HTML which eventually may be included in the official HTML specification.
ML
5
Structuring Web Pages
►When developing a Web page, you must determine a structure for your text and images using HTML that best suites your organization.
►Upon completion of this lesson, you will be able to: – Add structure
234
HTM
BTE550 – Internet and Intranet Applications
– Divide sections – Create hierarchies – Format text and pages – Use styles and style sheets
40
ML
5
Adding Structure
►Adding structure will benefit any Web page you create. ►To add basic structure to a page, add paragraphs and
spaces to text.►To create a paragraph, enclose text within the paragraph
tags (<P> and </P>).
235
HTM
BTE550 – Internet and Intranet Applications
►Your browser will insert some extra space between paragraphs, so in some instances, you will not want to use the <P> tag.
ML
5
Line Break tag
►You may not want extra space between each line of the address.
►To avoid this, use the line-break tag, <BR>. ►This break tells the browser to wrap the text that follows
onto a new line without inserting any extra space between
236
HTM
BTE550 – Internet and Intranet Applications
the lines.
ML
5
Section Divisions
►A simple and effective way to separate sections within a Web page is to insert a horizontal line, which is also called a horizontal rule.
►By default, the line stretches from one side of the page to the other.
237
HTM
BTE550 – Internet and Intranet Applications
ML
5
Structure Separations► If your page has a banner across the top with a company name, you
can insert a horizontal line beneath it. ►This separates it from the table of contents showing links to pages,
beneath which you can insert another line, followed by the main body of the page.
►At the bottom of the page, you can have another line that shows i id ifi
238
HTM
BTE550 – Internet and Intranet Applications
important page identifiers.
ML
5HR tag
►The <HR> tag takes several optional attributes. For example, you can specify the line's thickness and how much of the browser's window it should span (as a percentage or in pixels).
►The line thickness default is one or two pixels in most browsers.
239
HTM
BTE550 – Internet and Intranet Applications
ML
5
Creating Headings
►A common way to add structure to a Web page is through the use of headings.
►A Web page can have a maximum of six levels of headings, the HTML codes for which are conveniently named <H1>, <H2>, <H3>, etc.
240
HTM
BTE550 – Internet and Intranet Applications
►No style is inherent in the headings — different Web browsers might interpret the look of a heading in slightly different ways.
►Structurally, however, all browsers will display headings so low-level headings look subordinate to a higher-level heading.
41
ML
5
Heading Formats► In a browser, a first-level heading is displayed in a larger, bolder
font than a lower-level heading. ►You can use HTML headings in any order, but it is recommended to
use them in an outline format. ►The first-level heading, <H1>, is the highest level, and the sixth
level, <H6>, is the lowest or most subordinate.
241
HTM
BTE550 – Internet and Intranet Applications
ML
5
Paragraphs
►Paragraphs are defined with the <p> tag.<p>This is a paragraph</p>
<p>This is another paragraph</p>
►HTML automatically adds an extra blank line before and after a paragraph.
242
HTM
BTE550 – Internet and Intranet Applications
p g p
ML
5
Line Breaks
►The <br> tag is used when you want to end a line, but don't want to start a new paragraph.
►The <br> tag forces a line break wherever you place it.<p>This <br> is a para<br>graph with line breaks</p>
243
HTM
BTE550 – Internet and Intranet Applications
►The <br> tag is an empty tag. ►It has no closing tag.
ML
5
Comments in HTML
►The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.! hi i
244
HTM
BTE550 – Internet and Intranet Applications
<!-- This is a comment -->
►Note that you need an exclamation point after the opening bracket, but not before the closing bracket.
ML
5Text Formatting Tags
TagTag DescriptionDescription<b><b> Defines bold text
<big><big> Defines big text<em><em> Defines emphasized text<i><i> Defines italic text
<small><small> Defines small text<strong><strong> Defines strong text
245
HTM
BTE550 – Internet and Intranet Applications
<sub><sub> Defines subscripted text<sup><sup> Defines superscripted text<ins><ins> Defines inserted text<del><del> Defines deleted text<s><s> Deprecated. Use <del> instead
<strike><strike> Deprecated. Use <del> instead<u><u> Deprecated. Use styles instead
ML
5
"Computer Output" Tags
TagTag DescriptionDescription<code> Defines computer code text<kbd> Defines keyboard text
<samp> Defines sample computer code<tt> Defines teletype text
246
HTM
BTE550 – Internet and Intranet Applications
<var> Defines a variable<pre> Defines preformatted text
<listing> Deprecated. Use <pre> instead <plaintext> Deprecated. Use <pre> instead
<xmp> Deprecated. Use <pre> instead
42
ML
5
Citations, Quotations, and Definition Tags
TagTag DescriptionDescription<abbr> Defines an abbreviation
<acronym> Defines an acronym<address> Defines an address element
bd D fi h di i
247
HTM
BTE550 – Internet and Intranet Applications
<bdo> Defines the text direction<blockquote> Defines a long quotation
<q> Defines a short quotation<cite> Defines a citation<dfn> Defines a definition term
ML
5
Character Entities►Some characters have a special meaning in HTML, like the less than
sign (<) that defines the start of an HTML tag. ► If we want the browser to actually display these characters we must
insert character entities in the HTML source.►A character entity has three parts: an ampersand (&), an entity name
or a # and an entity number, and finally a semicolon (;).
248
HTM
BTE550 – Internet and Intranet Applications
►To display a less than sign in an HTML document we must write: << or <<
►The advantage of using a name instead of a number is that a name is easier to remember.
►The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.
ML
5
Non-breaking Space
►The most common character entity in HTML is the non-breaking space.
►Normally HTML will truncate spaces in your text. ►If you write 10 spaces in your text, HTML will remove 9
of them.
249
HTM
BTE550 – Internet and Intranet Applications
►To add spaces to your text, use the character entity.
ML
5
The Most Common Character Entities:
ResultResult DescriptionDescription Entity NameEntity Name Entity NumberEntity Numbernon-breaking space  
< less than < <> greater than > >& ampersand & &
250
HTM
BTE550 – Internet and Intranet Applications
& ampersand & &" quotation mark " "' apostrophe ' '
ML
5Some Other Commonly Used Character Entities
ResultResult DescriptionDescription Entity NameEntity Name Entity NumberEntity Number¢¢ centcent ¢¢ ¢¢££ poundpound ££ ££¥¥ yenyen ¥¥ ¥¥§§ sectionsection §§ §§
251
HTM
BTE550 – Internet and Intranet Applications
©© copyrightcopyright ©© ©©®® registered trademarkregistered trademark ®® ®®×× multiplicationmultiplication ×× ××÷÷ divisiondivision ÷÷ ÷÷
ML
5
The Anchor Tag and the href Attribute►HTML uses the <a> (anchor) tag to create a link to
another document.►An anchor can point to any resource on the Web: an
HTML page, an image, a sound file, a movie, etc.►The syntax of creating an anchor:
252
HTM
BTE550 – Internet and Intranet Applications
<a href="url">Text to be displayed</a>
►The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
43
ML
5
The Target Attribute
►With the target attribute, you can define where the linked document will be opened.
►The line below will open the document in a new browser window:
253
HTM
BTE550 – Internet and Intranet Applications
<a href="http://www.itu.edu.tr" target="_blank">Visit ITU!
</a>
ML
5
The Anchor Tag and the Name Attribute
►The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.
► l i h f d h
254
HTM
BTE550 – Internet and Intranet Applications
►Below is the syntax of a named anchor:<a name="label">Text to be displayed</a>
►The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.
►The line below defines a named anchor:►<a name="tips">Useful Tips Section</a>
ML
5
The Anchor Tag and the Name Attribute
►You should notice that a named anchor is not displayed in a special way.
►To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this:<a href="http://www.itu.edu.tr/index.html#kayit">
Kayıtla İlgili Bilgiler
255
HTM
BTE550 – Internet and Intranet Applications
Kayıtla İlgili Bilgiler
</a>
►A hyperlink to the Useful Tips Section from WITHIN the file “index.htm" will look like this: <a href="#tips">Jump to the Useful Tips Section</a>
ML
5
Frames
►With frames, you can display more than one HTML document in the same browser window.
►Each HTML document is called a frame, and each frame is independent of the others.
►The disadvantages of using frames are:
256
HTM
BTE550 – Internet and Intranet Applications
– The web developer must keep track of more HTML documents
– It is difficult to print the entire page
ML
5The Frameset Tag
►The <framesetframeset> tag defines how to divide the window into frames
►Each frameset defines a set of rows or columns ►The values of the rows/columns indicate the amount of
screen area each row/column will occupy
257
HTM
BTE550 – Internet and Intranet Applications
ML
5
The Frameset Tag►The <frame> tag defines what HTML document to put
into each frame ►In the example below we have a frameset with two
columns. ►The first column is set to 25% of the width of the browser
window. The second column is set to 75% of the width of h b i d Th HTML d
258
HTM
BTE550 – Internet and Intranet Applications
the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:<frameset cols="25%,75%">
<frame src="frame_a.htm"><frame src="frame_b.htm">
</frameset>
44
ML
5
Vertical frameset<html><html><frameset cols="25%,50%,25%"><frameset cols="25%,50%,25%"><frame src="frame_a.htm"><frame src="frame_a.htm"><frame src="frame_b.htm"><frame src="frame_b.htm"><frame src="frame_c.htm"><frame src="frame_c.htm">
</frameset></frameset>
259
HTM
BTE550 – Internet and Intranet Applications
//</html></html>
ML
5
Horizontal frameset<html><html><frameset rows="25%,50%,25%"><frameset rows="25%,50%,25%"><frame src="frame_a.htm"><frame src="frame_a.htm"><frame src="frame_b.htm"><frame src="frame_b.htm"><frame src="frame_c.htm"><frame src="frame_c.htm">
</frameset></frameset>
260
HTM
BTE550 – Internet and Intranet Applications
//</html></html>
ML
5
Tables
►Tables are defined with the <tabletable> tag. ►A table is divided into rows (with the <trtr> tag), and each
row is divided into data cells (with the <tdtd> tag). ►The letters tdtd stands for "table data," which is the content
of a data cell.
261
HTM
BTE550 – Internet and Intranet Applications
►A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
ML
5
Example
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
262
HTM
BTE550 – Internet and Intranet Applications
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
ML
5Tables and the Border Attribute
►If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
►To display a table with borders, you will have to use the border attribute:
263
HTM
BTE550 – Internet and Intranet Applications
<table border=“5"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>
ML
5
Headings in a Table►Headings in a table are defined with the <th> tag.
<table border="1"><tr><th>Heading</th><th>Another Heading</th></tr><tr>
264
HTM
BTE550 – Internet and Intranet Applications
<td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>
45
ML
5
Empty Cells in a Table
►Table cells with no content are not displayed very well in most browsers.<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td>
265
HTM
BTE550 – Internet and Intranet Applications
,</tr><tr><td>row 2, cell 1</td><td></td></tr></table>
ML
5
Table TagsTagTag DescriptionDescription
<table> Defines a table<th> Defines a table header<tr> Defines a table row<td> Defines a table cell
< ti > D fi t bl ti
266
HTM
BTE550 – Internet and Intranet Applications
<caption> Defines a table caption<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head<tbody> Defines a table body <tfoot> Defines a table footer
ML
5
Unordered Lists►An unordered list is a list of items. The list items are
marked with bullets (typically small black circles).►An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.<ul>
267
HTM
BTE550 – Internet and Intranet Applications
<li>Coffee</li>
<li>Milk</li>
</ul>
►Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
ML
5
Ordered Lists
►An ordered list is also a list of items. The list items are marked with numbers.
►An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.<ol>
268
HTM
BTE550 – Internet and Intranet Applications
<li>Coffee</li>
<li>Milk</li>
</ol>
ML
5Definition Lists
►A definition list is not a list of items. This is a list of terms and explanation of the terms.
►A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag.
►Each definition-list definition starts with the <dd> tag.
269
HTM
BTE550 – Internet and Intranet Applications
<dl>
<dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd>
</dl>
ML
5
List Tags
TagTag DescriptionDescription<ol> Defines an ordered list<ul> Defines an unordered list<li> Defines a list item
270
HTM
BTE550 – Internet and Intranet Applications
<dl> Defines a definition list<dt> Defines a definition term<dd> Defines a definition description<dir> Deprecated. Use <ul> instead
<menu> Deprecated. Use <ul> instead
46
ML
5
►HTML Forms are used to select different kinds of user input.
<formform name="input" action="html_form_action.asp" method="get">
HTML Forms and Input
271
HTM
BTE550 – Internet and Intranet Applications
Type your first name:
<inputinput type="texttext" namename="FirstName" value="Binnur" sizesize="20">
<br>Type your last name:
<inputinput type="texttext" namename="LastName" value="Kurt" size="20">
<br>
<inputinput type="submitsubmit" valuevalue="SubmitSubmit">
</formform>
ML
5
►Web forms collect information from customers. ►Web forms include different control elements including:
– Input boxes– Selection lists– Drop-down list boxes– Option buttons or radio buttons
Introducing Web Forms
272
HTM
BTE550 – Internet and Intranet Applications
– Check boxes– Group boxes– Text areas– Form buttons
ML
5
►While HTML supports the creation of forms, it does not include tools to process the information.
►The information can be processed through a program running on a Web server.
Forms and Server-Based Programs
273
HTM
BTE550 – Internet and Intranet Applications
ML
5
►Server-based programs are written in many languages►The earliest and most commonly used are Common
Gateway Interface (CGI) scripts that are written in perl.►Other popular languages include:
– AppleScript - PHPASP TCL
Forms and Server-Based Programs
274
HTM
BTE550 – Internet and Intranet Applications
– ASP - TCL– ColdFusion - the Unix shell– C/C++ - Visual Basic
ML
5
►Forms are created using the form element, structured as follows:
<form attributes>elements
</form>
Creating the Form Element
275
HTM
BTE550 – Internet and Intranet Applications
– where attributes are the attributes that control how the form is processed and elements are elements places within the form.
ML
5
Creating the Form Element
►Form attributes usually tell the browser the location of the server-based program to be applied to the form’s data.
►Always specify an id or name for the form.►Two attributes are available to identify the form: id and
name.
276
HTM
BTE550 – Internet and Intranet Applications
47
ML
5
►The syntax of the id and name attributes are as follows:
<form name=“name” id=“id”>… </form>
Example:<form name=“reg” id=“reg”>
Creating the Form Element
277
HTM
BTE550 – Internet and Intranet Applications
<form name= reg id= reg > … </form>
ML
5
►The general syntax of input elements is as follows:<input type=“type” name=“name” id=“id” />
where type specifies the type of input field, and the name and id attributes provide the field’s name and id.
<i t t “t t” “ it ” id “ it ” />
Creating Input Boxes
278
HTM
BTE550 – Internet and Intranet Applications
<input type=“text” name=“city” id=“city” />
ML
5
Type Description of what is displayed
type=”button” button can be clicked to perform an action from a script
type=”checkbox” check box
type=”file” browse button to locate and select a file
type=”hidden” hidden field, not viewable on the form
Clickable inline image performs an action from a
Form Input Types: <input type=
279
HTM
BTE550 – Internet and Intranet Applications
type=”image” Clickable inline image - performs an action from a script
type=”password” text box in which hides text entered by the user
type=”radio” radio (option) button
type=”reset” button which resets the form when clicked
type=”submit” button which submits the form when clicked
type=”text” text box in which displays text entered by the user
ML
5
►By default, an input box displays 20 characters of text.►To change the width of an input box, use the size attribute
which is displayed as follows:<input size=“value” />
►<input type=“text” name=“zip” id=“zip /
Setting the Size of an Input Box
280
HTM
BTE550 – Internet and Intranet Applications
size=“5” />
ML
5Creating a Password Field
►A password field is an input box where characters typed by the user are displayed as bullets or asterisks to protect private or sensitive information on a Web site.
►The syntax for creating a Password field is as follows:<input type=“password” />
281
HTM
BTE550 – Internet and Intranet Applications
ML
5
Working with Form Labels
►link a label with an associated text element for scripting purposes.
►The syntax for creating a form label is as follows:<label for=“zip”>Zip Code </label> Where id is the value of the id attribute for a field on the form,
d
282
HTM
BTE550 – Internet and Intranet Applications
and label text is the text of the label.
48
ML
5
Creating a Selection List
►A selection list– list box from which a user selects a particular value or set of
values. – Selection lists are useful when there are a fixed set of possible
responses from the user.►create selection list using <select> tag
283
HTM
BTE550 – Internet and Intranet Applications
►create selection list using <select> tag.►specify each individual selection item using the <option>
tag.
ML
5
Select list
<form id=“reg”><select name=“item” id=“item”>
<option> dogs </option><option> cats </option><option> mice </option>
284
HTM
BTE550 – Internet and Intranet Applications
<option> mice </option></select></form>
ML
5
Modifying the Appearance of a Selection List
►change the number of options displayed in the selection list – by modifying the size attribute. – Syntax:<select size= “value”>… </select>
Wh i h b f i h h l i li
285
HTM
BTE550 – Internet and Intranet Applications
– Where value is the number of items that the selection list displays in the form.
ML
5
Modifying the Appearance of a Selection List
286
HTM
BTE550 – Internet and Intranet Applications
ML
5Making Multiple Selections
►Add the multiple attribute to the select element to create multiple selections
<select multiple=“multiple”>… </select>
287
HTM
BTE550 – Internet and Intranet Applications
ML
5
Working with Option GroupsUse option groups to organize selection lists into distinct groups.
<select attributes><optgroup label=“label1”><option>itema1</option><option>itema2</option>
…<select attributes>
288
HTM
BTE550 – Internet and Intranet Applications
<select attributes><optgroup label=“label1”><option>itema1</option><option>itema2</option>
…</optgroup>…</select>
49
ML
5
Creating a Field Set►HTML and XHTML allow you to organize option
buttons into a group of fields called field sets. – Most browsers place a group box around a field set– indicates fields belong to a common group.
<fieldset>fields
289
HTM
BTE550 – Internet and Intranet Applications
fields</fieldset>
– where fields are the individual fields within a set.
ML
5
Creating Check Boxes►To create a check box, use:<input type=“checkbox” name=“name” id=“id”value=“value”/>– where the name and id attributes identify the check box field
and – the value attribute specifies the value sent to the server if the
check box is selected
290
HTM
BTE550 – Internet and Intranet Applications
check box is selected.►To specify that a check box be selected by default, use the checked
attribute as follows:<input type=“checkbox” checked=“checked” />
or <input type=“checkbox” checked />
ML
5
Creating a Text Area Box
►Text area boxes allow users to enter comments about the products they’ve purchased.
►An input box would be too small to accommodate the length of text for this use.
291
HTM
BTE550 – Internet and Intranet Applications
ML
5
Creating a Text Area Box►To create a text area box, use the textarea element:
<textarea name=“name” id=“id” rows=“value”cols=“value”>default text</textarea>
Where the rows and cols attributes define
292
HTM
BTE550 – Internet and Intranet Applications
– dimensions of the input box – rows attribute indicates the number of lines in the input box.
ML
5
►Buttons are a type of control element that performs an action.
►Types of buttons:– Command button– Submit button
Working with Form Buttons
293
HTM
BTE550 – Internet and Intranet Applications
– Reset button– File button
ML
5
►Command buttons are created using the <input> tag:<input type=“button” value=“text” />
►Submit buttons submit forms to the server for processing when clicked. Syntax is as follows:<input type=“submit” value=“text” />
Creating a Command button
294
HTM
BTE550 – Internet and Intranet Applications
p yp
►Reset buttons reset forms to their original (default) values. Syntax is as follows:<input type=“reset” value=“text” />
50
ML
5
Creating a File button►File buttons are
used to select files so that their contents can be submitted for processing to a program.
►Th W b
295
HTM
BTE550 – Internet and Intranet Applications
►The Web page then only displays the file’s location, not the file’s contents.
ML
5
Working with Hidden Fields
►Hidden fields are added to a form, but not displayed in the Web page.
►The syntax is as follows:<input type=“hidden” name=“name”id=“id” value=“value” />
296
HTM
BTE550 – Internet and Intranet Applications
ML
5
►After adding the elements to your form, you’ll need to specify where to send the form data and how to send it.
►Use the following attributes:<form action=“url” method=“type”
enctype=“type”>…
Working with Form Attributes
297
HTM
BTE550 – Internet and Intranet Applications
</form>
►where url specifies the filename and location of the program that processes – the form and the method attribute specifies how your Web
browser sends data to the server. – The enctype attribute specifies the format of the data stored in
the form’s field.
ML
5
►The method attribute can have one of two values:– Post– Get
►The get method is the default– get appends the form data to the end of the URL
Working with Form Attributes
298
HTM
BTE550 – Internet and Intranet Applications
get appends the form data to the end of the URL specified in the action attribute.
►The post method sends form data in a separate data stream– allows the Web server to receive the data through
“standard input”.
ML
5
►The mailto action accesses the user’s own e-mail program and uses it to mail form information to a specified e-mail address.
►By-passes the need for server-based programs.►Syntax:
Using the mailto Action
299
HTM
BTE550 – Internet and Intranet Applications
<form action-mailto:e-mail_address method=“post”
enctype=“text/plain”> … </form>
– where e-mail_address is the e-mail address of the recipient in the form.
►Newer browsers do not allow this action for security reasons
ML
5
►Users typically navigate through a form with the tab key►Specify an alternate tab order by adding the tabindex
attribute to any control element in your form.►Example:
<input name=“fname” tabindex=“1” />
Specifying the Tab Order
300
HTM
BTE550 – Internet and Intranet Applications
p►assigns the tab index number “1” to the fname
field from the registration form.
51
ML
5
►An access key– single key typed with the Alt key – in order to jump to one of the control elements in the
form.►Create an access key by adding the accesskey attribute to
t l l t
Specifying an Access Key
301
HTM
BTE550 – Internet and Intranet Applications
any control element.►Example of creating an access key for the lname field:
<input name=“lname” accesskey=“1” />
ML
5
Form Tags
TagTag DescriptionDescription<form> Defines a form for user input<input> Defines an input field
<textarea> Defines a text-area (a multi-line text input control)<label> Defines a label to a control
302
HTM
BTE550 – Internet and Intranet Applications
<fieldset> Defines a fieldset<legend> Defines a caption for a fieldset<select> Defines a selectable list (a drop-down box)
<optgroup> Defines an option group<option> Defines an option in the drop-down box<button> Defines a push button
ML
5
The Image Tag and the ssrcrc Attribute
►In HTML, images are defined with the <img> tag. ►The <img> tag is empty, which means that it contains
attributes only and it has no closing tag ►To display an image on a page, you need to use the src
attribute
303
HTM
BTE550 – Internet and Intranet Applications
►►ssrcrc stands for "source" ►The value of the srcsrc attribute is the URL of the image you
want to display on your page►The syntax of defining an image:
<img srcsrc="url">
ML
5
The Alt Attribute
►The alt attribute is used to define an "alternate text" for an image.
►The value of the alt attribute is an author-defined text <img src="boat.gif" alt="Big Boat">
►The "alt" attribute tells the reader what he or she is
304
HTM
BTE550 – Internet and Intranet Applications
missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image.
►It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.
ML
5Backgrounds
►The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.
►The bgcolorbgcolor attribute specifies a background-color for an HTML page.
►The value of this attribute can be a hexadecimal number,
305
HTM
BTE550 – Internet and Intranet Applications
an RGB value, or a color name<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
►The lines above all set the background-color to black
ML
5
Background
►The background attribute specifies a background-image for an HTML page.
►The value of this attribute is the URL of the image you want to use.
►If the image is smaller than the browser window, the
306
HTM
BTE550 – Internet and Intranet Applications
image will repeat itself until it fills the entire browser window
<body background="clouds.gif"><body background="http://www.cs.itu.edu.tr/bg.gif">
52
ML
5
Useful Tips
►The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions of HTML (HTML 4 and XHTML).
►The World Wide Web Consortium (W3C) has removed these attributes from its recommendations.
307
HTM
BTE550 – Internet and Intranet Applications
►Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).
ML
5
Color Values►Colors are defined using a hexadecimal notation for the
combination of Red, Green, and Blue color values (RGB). ►The lowest value that can be given to one light source is 0
(#00). The highest value is 255 (#FF).
308
HTM
BTE550 – Internet and Intranet Applications
ML
5
Color Names
►A collection of color names is supported by most browsers.
►Only 16 color names are supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and
ll )
309
HTM
BTE550 – Internet and Intranet Applications
yellow). ►For all other colors you should use the Color HEX value.
ML
5
16 Million Different Colors
►The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256).
►Most modern monitors are capable of displaying at least 16384 different colors.
310
HTM
BTE550 – Internet and Intranet Applications
►If you look at the color table (next slide), you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero
ML
5Red
rgb(0,0,0)rgb(8,0,0)rgb(16,0,0)
311
HTM
BTE550 – Internet and Intranet Applications
rgb(255,0,0)
XHTMLXHTML6
Copyleft © 2005, Binnur Kurt
53
ML
6
Content
►Introduction to XHTML►Why XHTML►XHTML vs HTML►XHTML Syntax►XHTML DTD
313BTE550 – Internet and Intranet Applications
XH
TM
►XHTML DTD►XHTML Modules►XHTML Attributes
ML
6
What is XHTML?
►XHTML stands for EXtensible HyperText Markup Language
►XHTML is aimed to replace HTML ►XHTML is almost identical to HTML 4.01 ►XHTML is a stricter and cleaner version of HTML
314BTE550 – Internet and Intranet Applications
XH
TM ►XHTML is HTML defined as an XML application►XHTML is a W3C Recommendation
ML
6
XHTML is a W3C Recommendation
►XHTML 1.0 became a W3C Recommendation January 26, 2000.
►A W3C Recommendation means that the specification is stable, that it has been reviewed by the W3C membership, and that the specification is now a Web standard.
315BTE550 – Internet and Intranet Applications
XH
TM ►W3C defines XHTML as the latest version of HTML. XHTML will gradually replace HTML.
ML
6
All New Browsers Support XHTML
►XHTML is compatible with HTML 4.01.►All new browsers have support for XHTML.
316BTE550 – Internet and Intranet Applications
XH
TMM
L6
Why XHTML?►We have reached a point where many pages on the WWW contain
"bad" HTML.►The following HTML code will work fine if you view it in a
browser, even if it does not follow the HTML rules:<html> <head> <title>This is bad HTML</title>
317BTE550 – Internet and Intranet Applications
XH
TM
<title>This is bad HTML</title><body> <h1>Bad HTML </body>
►XML is a markup language where everything has to be marked up correctly, which results in "well-formed" documents.
►XML was designed to describe data and HTML was designed to display data.
ML
6
Why XHTML?►Today's market consists of different browser technologies,
some browsers run Internet on computers, and some browsers run Internet on mobile phones and hand helds.
►Therefore - by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future XHTML
318BTE550 – Internet and Intranet Applications
XH
TM in the future - XHTML.►XHTML pages can be read by all XML enabled devices
AND while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives you the opportunity to write "well-formed" documents now, that work in ALL browsers and that are backward browser compatible
54
ML
6
How To Get Ready For XHTML
►XHTML is the next generation of HTML, but it will of course take some time before browsers and other software products are ready for it.
►In the meantime there are some important things you can do to prepare yourself for it.
319BTE550 – Internet and Intranet Applications
XH
TM ►XHTML is not very different from HTML 4.01, so bringing your code up to 4.01 standards is a very good start.
►In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER make the bad habit of skipping end tags like the </p>
ML
6
The Most Important Differences
►XHTML elements must be properly nested►XHTML documents must be well-formed►Tag names must be in lowercase►All XHTML elements must be closed
320BTE550 – Internet and Intranet Applications
XH
TMM
L6
Elements Must Be Properly Nested
►In HTML some elements can be improperly nested within each other like this:<bb><ii>This text is bold and italic</bb></ii>
►In XHTML all elements must be properly nested within each other like this:
321BTE550 – Internet and Intranet Applications
XH
TM <bb><ii>This text is bold and italic</ii></bb>
ML
6
Quiz
<ul><li>Coffee</li><li>Tea<ul>
<li>Black tea</li>
322BTE550 – Internet and Intranet Applications
XH
TM
<li>Black tea</li><li>Green tea</li>
</ul><li>Milk</li>
</ul>
ML
6Answer
<ul><li>Coffee</li><lili>Tea<ul>
<li>Black tea</li>
323BTE550 – Internet and Intranet Applications
XH
TM
<li>Black tea</li><li>Green tea</li>
</ul></lili><li>Milk</li>
</ul>
ML
6
Documents Must Be Well-formed
►All XHTML elements must be nested within the <html> root element.
►All other elements can have sub (children) elements. ►Sub elements must be in pairs and correctly nested within
their parent element.
324BTE550 – Internet and Intranet Applications
XH
TM ►The basic document structure is: <html><head> ... </head><body> ... </body></html>
55
ML
6
Tag Names Must Be In Lower Case
►XHTML documents are XML applications. ►XML is case-sensitive. ►Tags like <br> and <BR> are interpreted as different tags.►This is wrong:
<BODYBODY>
325BTE550 – Internet and Intranet Applications
XH
TM <PP>This is a paragraph</PP></BODYBODY>
►This is correct:<bodybody><pp>This is a paragraph</pp></bodybody>
ML
6
All XHTML Elements Must Be Closed
►Non-empty elements must have an end tag.►This is wrong:
<p>This is a paragraph<p>This is another paragraph
►This is correct:
326BTE550 – Internet and Intranet Applications
XH
TM
►This is correct:<p>This is a paragraph</p><p>This is another paragraph</p>
ML
6
Empty Elements Must Also Be Closed
►Empty elements must either have an end tag or the start tag must end with />.
►This is wrong:This is a break<br>Here comes a horizontal rule:<hr>
327BTE550 – Internet and Intranet Applications
XH
TM Here's an image <img src="happy.gif" alt="Happy face">
►This is correct:This is a break<br/>Here comes a horizontal rule:<hr/>Here's an image <img src="happy.gif" alt="Happy face"/>
ML
6
Important Compatibility Note
►To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol like this: <br />, and this: <hr />.
328BTE550 – Internet and Intranet Applications
XH
TMM
L6
Some More XHTML Syntax Rules
►Attribute names must be in lower case►Attribute values must be quoted►Attribute minimization is forbidden►The id attribute replaces the name attribute ►The XHTML DTD defines mandatory elements
329BTE550 – Internet and Intranet Applications
XH
TM
►The XHTML DTD defines mandatory elements
ML
6
Attribute Names Must Be In Lower Case
►This is wrong:<table WIDTHWIDTH="100%">►This is correct:<table width="100%">
330BTE550 – Internet and Intranet Applications
XH
TM
56
ML
6
Attribute Values Must Be Quoted
►This is wrong:<table width=100%100%>
►This is correct:<table width=""100%"">
331BTE550 – Internet and Intranet Applications
XH
TMM
L6
Attribute Minimization Is Forbidden►This is wrong:
<input checkedchecked><input readonly><input disabled><option selected><frame noresize>
332BTE550 – Internet and Intranet Applications
XH
TM
frame noresize►This is correct:
<input checked="checked""checked" /><input readonly="readonly" /><input disabled="disabled" /><option selected="selected" /><frame noresize="noresize" />
ML
6
Attribute Minimization Is Forbidden
►Here is a list of the minimized attributes in HTML and how they should be written in XHTML:
HTML XHTMLcompact compact="compact" checked checked="checked" declare declare="declare" readonly readonly="readonly" disabled disabled="disabled" selected selected="selected"
333BTE550 – Internet and Intranet Applications
XH
TM
selected selected= selected defer defer="defer" ismap ismap="ismap" nohref nohref="nohref" noshade noshade="noshade" nowrap nowrap="nowrap" multiple multiple="multiple" noresize noresize="noresize"
ML
6
The id Attribute Replaces The name Attribute
►HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead.
►This is wrong:<img src="picture.gif" namename="picture1" />
►This is correct:
334BTE550 – Internet and Intranet Applications
XH
TM ►This is correct:<img src="picture.gif" idid="picture1" />
►To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this:<img src="picture.gif" id="picture1" name="picture1" />
ML
6The Lang Attribute
►The langlang attribute applies to almost every XHTML element. It specifies the language of the content within an element.
►If you use the langlang attribute in an element, you must add the xmlxml:langlang attribute, like this:
335BTE550 – Internet and Intranet Applications
XH
TM <div lang="no" xmlxml:langlang="no">Heia Norge!</div>
ML
6
Mandatory XHTML Elements►All XHTML documents must have a DOCTYPE declaration. ►The html, head and body elements must be present, and the title
must be present inside the head element.►This is a minimum XHTML document template:
<!DOCTYPE Doctype goes here><html xmlns="http://www.w3.org/1999/xhtml">
h d
336BTE550 – Internet and Intranet Applications
XH
TM <head><title>Title goes here</title></head>
<body>Body text goes here</body>
</html>
57
ML
6
Mandatory XHTML Elements
►The DOCTYPEDOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag.
►The xmlnsxmlns attribute inside the <html> tag is required in XHTML. However, the validator on w3.org does not
l i h hi ib i i i i
337BTE550 – Internet and Intranet Applications
XH
TM complain when this attribute is missing in an XHTML document.
►This is because "xmlnsxmlns=http://www.w3.org/1999/xhtml" is a fixed value and will be added to the <html> tag even if you do not include it.
ML
6
The <!DOCTYPE> Is Mandatory►An XHTML document consists of three main parts:
– the DOCTYPE– the Head– the Body
►The basic document structure is:<!DOCTYPE ...><html>
338BTE550 – Internet and Intranet Applications
XH
TM <html><head><title>... </title></head><body> ... </body></html>
►The DOCTYPE declaration should always be the first line in an XHTML document.
ML
6
An XHTML Example►This is a simple (minimal) XHTML document:<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head>
339BTE550 – Internet and Intranet Applications
XH
TM <title>simple document</title></head><body><p>a simple paragraph</p></body></html>
ML
6
An XHTML Example►The DOCTYPE declaration defines the document type:<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">►The rest of the document looks like HTML:<html><head>
340BTE550 – Internet and Intranet Applications
XH
TM <head><title>simple document</title></head><body><p>a simple paragraph</p></body></html>
ML
6The 3 Document Type Definitions
►DTD specifies the syntax of a web page in SGML.►DTD is used by SGML applications, such as HTML, to
specify rules that apply to the markup of documents of a particular type, including a set of element and entity declarations.
341BTE550 – Internet and Intranet Applications
XH
TM ►XHTML is specified in an SGML document type definition or 'DTD'.
►An XHTML DTD describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup.
ML
6
The 3 Document Type Definitions
►XHTML 1.0 specifies three XML document types that correspond to three DTDs: – Strict– Transitional– Frameset
342BTE550 – Internet and Intranet Applications
XH
TM
58
ML
6
XHTML 1.0 Strict
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1xhtml1--strict.dtdstrict.dtd">►Use this when you want really clean markup, free of
presentational clutter.
343BTE550 – Internet and Intranet Applications
XH
TM
p►Use this together with Cascading Style Sheets.
ML
6
XHTML 1.0 Transitional
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1xhtml1--
transitional.dtdtransitional.dtd">►Use this
344BTE550 – Internet and Intranet Applications
XH
TM – when you need to take advantage of HTML's presentational features
– when you want to support browsers that don't understand Cascading Style Sheets.
ML
6
XHTML 1.0 Frameset
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1xhtml1--frameset.dtdframeset.dtd">►Use this when you want to use HTML Frames to partition
the browser window into two or more frames.
345BTE550 – Internet and Intranet Applications
XH
TM
ML
6
Why XHTML Modularization?
►XHTML is a simple but large language, containing most of the functionality a web developer will need.
►For some purposes XHTML is too large and complex, and for other purposes it is much too simple.
►By splitting XHTML into modules, the W3C (World
346BTE550 – Internet and Intranet Applications
XH
TM Wide web Consortium) has created small and well-defined sets of XHTML elements that can be used separately for simple devices as well as combined with other XML standards into larger and more complex applications.
ML
6Why XHTML Modularization?
►With modular XHTML, product and application designers can:– Choose the elements to be supported by a device using
standard XHTML building blocks.– Add extensions to XHTML, using XML, without
breaking the XHTML standard.
347BTE550 – Internet and Intranet Applications
XH
TM – Simplify XHTML for devices like hand held computers, mobile phones, TV, and home appliances.
– Extend XHTML for complex applications by adding new XML functionality (like MathML, SVG, Voice and Multimedia).
– Define XHTML profiles like XHTML Basic (a subset of XHTML for mobile devices).
ML
6
XHTML Modules
Module nameModule name DescriptionDescriptionApplet Module Defines the deprecated* applet element.Base Module Defines the base element.Basic Forms Module Defines the basic forms elements.Basic Tables Module Defines the basic table elements.Bi-directional Text Module Defines the bdo element.f X
HTM
L in
to 2
828m
odul
es:
348BTE550 – Internet and Intranet Applications
XH
TM
Bi directional Text Module Defines the bdo element.Client Image Map Module Defines browser side image map elements.Edit Module Defines the editing elements del and ins.Forms Module Defines all elements used in forms.Frames Module Defines the frameset elements.Hypertext Module Defines the a element.Iframe Module Defines the iframe element.Image Module Defines the img element.W
3C h
as sp
lit th
e de
finiti
on o
f
59
ML
6
Image Module Defines the img element.Intrinsic Events Module Defines event attributes like onblur and onchange.Legacy Module Defines deprecated* elements and attributes.Link Module Defines the link element.List Module Defines the list elements ol, li, ul, dd, dt, and dl.Metainformation Module Defines the meta element.Name Identification Module Defines the deprecated* name attribute.Object Module Defines the object and param elements.Presentation Module Defines presentation elements like b and i.
349BTE550 – Internet and Intranet Applications
XH
TM Scripting Module Defines the script and noscript elements.Server Image Map Module Defines server side image map elements.Structure Module Defines the elements html, head, title and body.Style Attribute Module Defines the style attribute.Style Sheet Module Defines the style element.Tables Module Defines the elements used in tables.Target Module Defines the target attribute.Text Module Defines text container elements like p and h1.
ML
6
XHTML Standard Attributes
►XHTML tags can have attributes. ►The special attributes for each tag are listed under each tag
description. ►The attributes listed here are the core and language
attributes that are standard for all tags (with a few
350BTE550 – Internet and Intranet Applications
XH
TM exceptions).
ML
6
Core Attributes
►Not valid in base, head, html, meta, param, script, style, and title elements.
AttributeAttribute ValueValue DescriptionDescription
351BTE550 – Internet and Intranet Applications
XH
TM classclass class_rule or style_rule The class of the element
idid id_name A unique id for the element
stylestyle style_definition An inline style definition
titletitle tooltip_text A text to display in a tool tip
ML
6
Language Attributes
►Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.
AttributeAttribute ValueValue DescriptionDescriptiondir ltr | rtl Sets the text direction
352BTE550 – Internet and Intranet Applications
XH
TM
dir ltr | rtl Sets the text direction lang language_code Sets the language code
ML
6Keyboard Attributes
AttributeAttribute ValueValue DescriptionDescription
accesskey character Sets a keyboard shortcut to accessan element
tabindex number Sets the tab order of an element
353BTE550 – Internet and Intranet Applications
XH
TM tabindex number Sets the tab order of an element
ML
6
XHTML Event Attributes
►New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions.
► ill l b i i h h
354BTE550 – Internet and Intranet Applications
XH
TM ►We will learn more about programming with these events in studying JavaScript and DHTML.
60
ML
6
Window Events
►Only valid in body and frameset elements
AttributeAttribute ValueValue DescriptionDescription
onload script Script to be run when a document loads
355BTE550 – Internet and Intranet Applications
XH
TM loads
onunload script Script to be run when a document unloads
ML
6
Form Element Events
►Only valid in form elements.
AttributeAttribute ValueValue DescriptionDescriptiononchange script Script to be run when the element changes onsubmit script Script to be run when the form is submitted
S i b h h f i
356BTE550 – Internet and Intranet Applications
XH
TM onreset script Script to be run when the form is reset onselect script Script to be run when the element is selected onblur script Script to be run when the element loses focus
onfocus script Script to be run when the element gets focus
ML
6
Keyboard Events
►Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.
AttributeAttribute ValueValue DescriptionDescription
357BTE550 – Internet and Intranet Applications
XH
TM onkeydown script What to do when key is pressed
onkeypress script What to do when key is pressed and released
onkeyup script What to do when key is released
ML
6
Mouse Events►Not valid in base, bdo, br, frame, frameset, head, html, iframe,
meta, param, script, style, and title elements. AttributeAttribute ValueValue DescriptionDescription
onclick script What to do on a mouse click ondblclick script What to do on a mouse doubleclick
358BTE550 – Internet and Intranet Applications
XH
TM onmousedown script What to do when mouse button is pressed onmousemove script What to do when mouse pointer moves
onmouseover script What to do when mouse pointer moves over an element
onmouseout script What to do when mouse pointer moves out of an element
onmouseup script What to do when mouse button is released
ML
6
Quiz
359BTE550 – Internet and Intranet Applications
XH
TM Quiz
ML
6
Question # 1
► What does XHTML stand for?a. EXtensible HyperText Markup Languageb. EXtreme HyperText Markup Languagec. EXtensible HyperText Marking Languaged EXtra Hyperlinks and Text Markup Language
360BTE550 – Internet and Intranet Applications
XH
TM
d. EXtra Hyperlinks and Text Markup Language
61
ML
6
Question # 2
► XHTML is a Web standarda. Trueb. False
361BTE550 – Internet and Intranet Applications
XH
TMM
L6
Question # 3
► XML and HTML will be replaced by XHTMLa. Falseb. True
362BTE550 – Internet and Intranet Applications
XH
TMM
L6
Question # 4
► HTML will be replaced by XHTMLa. Falseb. True
363BTE550 – Internet and Intranet Applications
XH
TM
ML
6
Question # 5
► What is the correct XHTML for a paragraph?a. </p><p>b. <P></P>c. <P></p>d <p></p>
364BTE550 – Internet and Intranet Applications
XH
TM
d. <p></p>
ML
6Question # 6
► What is a correct XHTML tag for a line break?a. <br>b. <br />c. <break/>
365BTE550 – Internet and Intranet Applications
XH
TMM
L6
Question # 7
► What is the correct XHTML for an attribute and its value?
a. WIDTH="80"b. width=80c. WIDTH=80
366BTE550 – Internet and Intranet Applications
XH
TM d. width="80"
62
ML
6
Question # 8
► All elements in XHTML must be closeda. Trueb. False
367BTE550 – Internet and Intranet Applications
XH
TMM
L6
Question # 9► Is this correct XHTML?
<ul><li>Coffee</li><li>Tea<ul><li>Black tea</li>
368BTE550 – Internet and Intranet Applications
XH
TM
li Black tea /li<li>Green tea</li></ul><li>Milk</li></ul>
a. Nob. Yes
ML
6
Question # 10
► The DOCTYPE declaration has no closing taga. Trueb. False
369BTE550 – Internet and Intranet Applications
XH
TM
ML
6
Question # 11
► Which elements are mandatory in an XHTML document?
a. doctype, html, head, body, and titleb. doctype, html and bodyc. doctype, html, head, and body
370BTE550 – Internet and Intranet Applications
XH
TM
yp , , , y
ML
6Question # 12
► XHTML documents must be "well-formed"a. Trueb. False
371BTE550 – Internet and Intranet Applications
XH
TMM
L6
Question # 13
► What XHTML code is "well-formed"?a. <p>A <b><i>short</i></b> paragraph</p>b. <p>A <b><i>short</i></b> paragraphc. <p>A <b><i>short</b></i> paragraph</p>
372BTE550 – Internet and Intranet Applications
XH
TM
63
ML
6
Question # 14
► Which of the following is the right use of the lang attribute?
a. <div language="en">Hello World!</div>b. <div xml:language="en">Hello World!</div>c. <div lang="en" xml:lang="en">Hello World!</div>
373BTE550 – Internet and Intranet Applications
XH
TM
g g
ML
6
Question # 15
► Which attribute replaces the name attribute?a. Noneb. The src attributec. The id attribute
374BTE550 – Internet and Intranet Applications
XH
TMM
L6
Question # 16
► Is attribute minimization allowed in XHTML?a. Yesb. No
375BTE550 – Internet and Intranet Applications
XH
TM
ML
6
Question # 17
► What are the different DTDs in XHTML?a. Strict, Transitional, Framesetb. Strict, Transitional, Loosec. Strict, Transitional, Loose, Frameset
376BTE550 – Internet and Intranet Applications
XH
TMM
L6
Question # 18
► Do all XHTML documents require a doctype?a. Yesb. No
377BTE550 – Internet and Intranet Applications
XH
TMM
L6
Question # 19
► What is the most common XHTML DTD?a. Looseb. Normalc. Framesetd Transitional
378BTE550 – Internet and Intranet Applications
XH
TM
d. Transitional
64
ML
6
Question # 20
► All XHTML tags and attributes must be in lower casea. Falseb. True
379BTE550 – Internet and Intranet Applications
XH
TM
XSLTXSLT7
Copyleft © 2005, Binnur Kurt
LT7
►Define XSL and XSLT►Describe the main components of an XSL document►Write a Java program that uses the TrAX and Xalan►Transform an XML document using the Xalan XSLT
processor and a stylesheet
Content
381
XSL
T
BTE550 – Internet and Intranet Applications
p y
LT7
XSL
►XSL = eXtensible Stylesheet Language–– the Stylesheet Language for XMLthe Stylesheet Language for XML– implemented in XML– includes a transformation language XSLT– includes a formatting language XSLFO–XSL
382
XSL
T
BTE550 – Internet and Intranet Applications
includes a formatting language XSLFO XSL Formatting Objects
– defines how a source document should be transformed to provide an output typically in XML or HTML
– XPath is a language to define XML parts or patterns
LT7
XSLT
►XSLT - XSL Transformations►XSLT Version 1.0 is a W3C Recommendation 16
November 1999►XSLT is designed for use as part of
– XSL - A transformation expressed in
383
XSL
T
BTE550 – Internet and Intranet Applications
p– XSLT is called a stylesheet.
►XSLT processors must use the XML namespaces mechanism to recognize elements
LT7
XSLT (Con’t)
►XSLT is incredibly usefulincredibly useful in– transforming data into a viewable format in a
browser/phone/PDA (Presentation Oriented Publishing (POP)) - data to presentation
– transforming business data between content models
384
XSL
T
BTE550 – Internet and Intranet Applications
(Message Oriented Middleware (MOM)) –Transmitting data between applications
65
LT7
XSLT in POP
►XML document separates contentcontent from presentationpresentation►Transformations can be used to stylestyle (render, present)(render, present)
XML documents►A common styling technique presents XML in HTML
format
385
XSL
T
BTE550 – Internet and Intranet Applications
LT7
XSLT in POP (Con’t)
386
XSL
T
BTE550 – Internet and Intranet Applications
LT7
XSLT in MOM
►Important for eCommerce, B2B/EDI, and dynamic content generation– Different content model– Different structural relationship– Different vocabularies
387
XSL
T
BTE550 – Internet and Intranet Applications
LT7
XSLT in MOM (Con’t)
388
XSL
T
BTE550 – Internet and Intranet Applications
LT7
Transformation process
►XSLT uses XPath to define parts of the source document that match one or more predefined templates.
►When a match is found, XSLT will transform the matching part of the source document into the result document.
►Transforming XML document into
389
XSL
T
BTE550 – Internet and Intranet Applications
►Transforming XML document into– Another XML document
• XML• XHTML• WML
– HTML document
LT7
XSLT Data Transformation
390
XSL
T
BTE550 – Internet and Intranet Applications
66
LT7
XSLT Operational Model
391
XSL
T
BTE550 – Internet and Intranet Applications
LT7
XSLT Processor
►Piece of software– Reads an XSLT stylesheet and input XML document– Converts the input document into an output document– According to the instruction given in the stylesheet
►Called stylesheet processor sometimes
392
XSL
T
BTE550 – Internet and Intranet Applications
►Called stylesheet processor sometimes
LT7
Examples of XSLT Processor
►Built-in within a browser– IE 6
►Built-in within web or application server– Apache Cocoon
►Standalone
393
XSL
T
BTE550 – Internet and Intranet Applications
►Standalone– Michael Kay’s SAXON– Apache.org’s Xalan
LT7
XPath
►Used by XSLT (and by other XML technologies such as XPointer) for referencingreferencing elements and attributes internal to an XML document
►Defines expression language (pattern)expression language (pattern) for referencing►Supports a tree structuretree structure expression
394
XSL
T
BTE550 – Internet and Intranet Applications
– 7th child element of the third person element
LT7
XPath (Con’t)
►XPath expression results in a node setnode set– A node set of “person” elements under “people”
element►Various functions can be used on node sets, including:
–– not()not() – eliminate a specific node
395
XSL
T
BTE550 – Internet and Intranet Applications
()() p–– position()position() – return the position within a node set–– count()count() – returns the number of nodes in a node set
LT7
XML Example Document<?xml version="1.0"?><people><person born="1912" died="1954">
<name><first_name>Alan</first_name><last_name>Turing</last_name>
</name><profession>computer scientist</profession><profession>mathematician</profession><profession>cryptographer</profession>
396
XSL
T
BTE550 – Internet and Intranet Applications
p yp g p p</person><person born="1918" died="1988">
<name><first_name>Richard</first_name><middle_initial>M</middle_initial><last_name>Feynman</last_name>
</name><profession>physicist</profession><hobby>Playing the bongoes</hobby>
</person></people> s1.xml
67
LT7
XSLT Stylesheet
►Genuine XML document►Root element typically is
– stylesheet or transform– Both are defined in standard XSLT namespace
• http://www w3 org/XSL/Transform
397
XSL
T
BTE550 – Internet and Intranet Applications
http://www.w3.org/XSL/Transform• xsl as customary prefix
– XSLT processor should understand both
LT7
Minimal but Complete XSLT Stylesheet
<?xml version="1.0"?><xsl:stylesheet version="1.0“
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
</xsl:stylesheet>s1.xsl
398
XSL
T
BTE550 – Internet and Intranet Applications
</xsl:stylesheet>
java “org.apache.xalan.xslt.Process” –IN s1.xml –XSL s1.xsl –OUT s1.html
LT7
Apache Xalan
►Implements XSLT 1.0 and Xpath 1.0►Can be run from both the command line and within
application code►Support scripting extension►Command line syntax:
399
XSL
T
BTE550 – Internet and Intranet Applications
yjava org.apache.xalan.xslt.Process--ININ <input document>--XSLXSL <stylesheet>--OUTOUT <output document>
LT7
Result of XSLT Processing
<?xml version="1.0" encoding="utf-8"?>AlanTuringcomputer scientistmathematician
400
XSL
T
BTE550 – Internet and Intranet Applications
cryptographerRichardMFeynmanphysicistPlaying the bongoes s1.html
LT7
Result of XSLT Processing
►Applying empty stylesheet to any XML document– Elements are traversed sequentially– Content of each element is put in output
• Attributes are NOT traversed– Default behavior
401
XSL
T
BTE550 – Internet and Intranet Applications
Default behavior►Without any specific templates
– XSLT processor falls back to default behavior►Need for templates
LT7
xml-stylesheet Processing Instruction
►Included as part of XML document►Tells XML-ware browser where to find associated
stylesheet
<?xml version=“1.0”?>
402
XSL
T
BTE550 – Internet and Intranet Applications
<?xml-stylesheettype=“text/xml”href=“http://www.oreilly.com/styles/people.xsl”?>
<people>….
68
LT7
Templates
►Controls which output is created from which input–– xsl:templatexsl:template element form–– matchmatch attribute contains an XpathXpath expressionexpression
• Xpath expression identifies input node setinput node set itmatches
403
XSL
T
BTE550 – Internet and Intranet Applications
– For each node in the node set, the template contentstemplate contents(things between xsl:template tags) are instantiated andinserted into the output tree
LT7
Very Simple XSLT Stylesheet # 1
<?xml version="1.0"?><xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="people"><xsl:template match="people"></xsl:template></xsl:template>
404
XSL
T
BTE550 – Internet and Intranet Applications
pp</xsl:stylesheet>
►Simplest form of Xpath pattern is a name of a single element
LT7
XML Example Document<people><people><person born="1912" died="1954">
<name><first_name>Alan</first_name><last_name>Turing</last_name>
</name><profession>computer scientist</profession><profession>mathematician</profession><profession>cryptographer</profession>
</person>
405
XSL
T
BTE550 – Internet and Intranet Applications
</person><person born="1918" died="1988">
<name><first_name>Richard</first_name><middle_initial>M</middle_initial><last_name>Feynman</last_name>
</name><profession>physicist</profession><hobby>Playing the bongoes</hobby>
</person>
</people></people>
LT7
Result
►<?xml version="1.0" encoding="UTF-8"?>
406
XSL
T
BTE550 – Internet and Intranet Applications
LT7
Very Simple XSLT Stylesheet # 2
<?xml version="1.0"?><xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match=”people"><xsl:template match=”people">
Hello World!Hello World!
407
XSL
T
BTE550 – Internet and Intranet Applications
Hello World!Hello World!</xsl:template></xsl:template>
</xsl:stylesheet>
LT7
Result
<?xml version="1.0" encoding="UTF-8"?>Hello World!
408
XSL
T
BTE550 – Internet and Intranet Applications
69
LT7
Very Simple XSLT Stylesheet # 3
<?xml version="1.0"?><xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="person"><xsl:template match="person">
A Person
409
XSL
T
BTE550 – Internet and Intranet Applications
A Person</xsl:template></xsl:template>
</xsl:stylesheet>►►Literal data charactersLiteral data characters - text copied from the stylesheet into
the output document
LT7
XML Example Document<people><people><<personperson born="1912" died="1954">
<name><first_name>Alan</first_name><last_name>Turing</last_name>
</name><profession>computer scientist</profession><profession>mathematician</profession><profession>cryptographer</profession>
<</personperson>
410
XSL
T
BTE550 – Internet and Intranet Applications
<</personperson><<personperson born="1918" died="1988">
<name><first_name>Richard</first_name><middle_initial>M</middle_initial><last_name>Feynman</last_name>
</name><profession>physicist</profession><hobby>Playing the bongoes</hobby>
<</personperson></people></people>
LT7
Result
<?xml version=“1.0” encoding=“utf-8”?>A PersonA Person
►Whitespace outside of person element preserved
411
XSL
T
BTE550 – Internet and Intranet Applications
►Whitespace outside of person element preserved►person element is replaced by contents of template
LT7
Very Simple XSLT Stylesheet # 4
<?xml version="1.0"?><xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="person"><xsl:template match="person">
A Person
412
XSL
T
BTE550 – Internet and Intranet Applications
A Person</xsl:template></xsl:template>
</xsl:stylesheet>►Same stylesheet with example 3 but with different input
XML document
LT7
XML Example Document<peoplepeople><personperson born="1912" died="1954">
<name><first_name>Alan</first_name><last_name>Turing</last_name>
</name><profession>computer scientist</profession><profession>mathematician</profession><profession>cryptographer</profession>
413
XSL
T
BTE550 – Internet and Intranet Applications
<profession>cryptographer</profession></person><personperson born="1918" died="1988">
...</person>Some text here under people element!<some-tag>some information inside some-tag</some-tag></people>
LT7
Template content
Template content
Result
<?xml version="1.0" encoding="UTF-8"?>
A Person
A Person
414
XSL
T
BTE550 – Internet and Intranet Applications
p
default
default
Some text here under people element!
some information inside some-tag
70
LT7
Very Simple XSLT Stylesheet # 5
<?xml version="1.0"?><xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="person">
<p><p>A PersonA Person </p></p>
415
XSL
T
BTE550 – Internet and Intranet Applications
<p><p>A PersonA Person </p></p></xsl:template>
</xsl:stylesheet>►►Literal data charactersLiteral data characters - text copied from the stylesheet into
the output document
LT7
Result
<?xml version=“1.0” encoding=“utf-8”?><p>A Person</p><p>A Person</p>
►Template content contains tags and character data
416
XSL
T
BTE550 – Internet and Intranet Applications
►Template content contains tags and character data►They have to be well-formed XML
LT7
xsl:valuexsl:value--ofof Element
►Extracts the string value of an element or an attribute and writes it to output– text content of the element after all the tags have been
removed and entity references are resolved►select attribute containing XPath expression identifies an
417
XSL
T
BTE550 – Internet and Intranet Applications
element or an attribute– It could be a node set, in which case, the string value of
first node is taken
LT7
Example Stylesheet
►Extract names of all the people<?xml version="1.0"?><xsl:stylesheet version="1.0”xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="person">
418
XSL
T
BTE550 – Internet and Intranet Applications
xsl:template match person<p>
<xsl:value-of select="name"/></p>
</xsl:template></xsl:stylesheet>
LT7
XML Example Document<people><person born="1912" died="1954">
<name><first_name>AlanAlan</first_name><last_name>TuringTuring</last_name>
</name><profession>computer scientist</profession><profession>mathematician</profession><profession>cryptographer</profession>
</person>
419
XSL
T
BTE550 – Internet and Intranet Applications
</person><person born="1918" died="1988">
<name><first_name>RichardRichard</first_name><middle_initial>MM</middle_initial><last_name>FeynmanFeynman</last_name>
</name><profession>physicist</profession><hobby>Playing the bongoes</hobby>
</person></people>
LT7
Result
<?xml version="1.0" encoding="UTF-8"?>
<p>AlanTuring
420
XSL
T
BTE550 – Internet and Intranet Applications
</p><p>RichardMFeynman</p>
71
LT7
xsl:apply-templates
►XSLT processor reads (traverses) the input XML input XML documentdocument sequentially from top to bottom
►Templates are activated in the order they match elements encountered– Template for a parent will be activated before the
421
XSL
T
BTE550 – Internet and Intranet Applications
children
LT7
xsl:apply-templates (Con’t)
►The order of the traversal can be changed by apply-templates– It can specify which element or elements should be
processed next– It can specify an element or elements should be
422
XSL
T
BTE550 – Internet and Intranet Applications
processed in the middle of processing another element– It can prevent particular elements from being processed
LT7
xsl:apply-templates (Con’t)
►►xsl:applyxsl:apply--templatestemplates lets you make your choice of processing order explicit
►►selectselect attribute contains XPath expression telling the XSLT processor which nodes to process in the input tree– The apply-templates with no select attribute means all
423
XSL
T
BTE550 – Internet and Intranet Applications
elements relative to the current element (context node) should be matched
LT7
xsl:apply-templates Example
►I would like the output to look like as following– Last name then first name– Only name not profession nor hobby
<?xml version=“1.0” encoding=“utf-8”?>Turing
424
XSL
T
BTE550 – Internet and Intranet Applications
TuringAlanFeymanRichard
LT7
xsl:apply-templates Example
<?xml version="1.0"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="name"><xsl:value-of select="last name"/>
425
XSL
T
BTE550 – Internet and Intranet Applications
<xsl:value of select last_name />,<xsl:value-of select="first_name"/>
</xsl:template><!<!---- Something is missing here Something is missing here ---->></xsl:stylesheet>
LT7
Result<?xml version=“1.0” encoding=“utf-8”?>TuringAlancomputer scientistmathematician
426
XSL
T
BTE550 – Internet and Intranet Applications
mathematiciancryptographerFeymanRichardphysicistPlaying the bongoes
72
LT7
xsl:apply-templates Example<?xml version="1.0"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="name"><xsl:value-of select="last_name"/>,<xsl:value-of select="first name"/>
427
XSL
T
BTE550 – Internet and Intranet Applications
<xsl:value of select first_name /></xsl:template><!-- Apply templates only to name children --><xsl:template match="person">
<xsl:apply-templates select="name"/></xsl:template>
</xsl:stylesheet>
LT7
xsl:apply-templates Example►Order of templates does not matter
<?xml version="1.0"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- Apply templates only to name children --><xsl:template match="person">
428
XSL
T
BTE550 – Internet and Intranet Applications
<xsl:apply-templates select="name"/></xsl:template><xsl:template match="name">
<xsl:value-of select="last_name"/>,<xsl:value-of select="first_name"/>
</xsl:template></xsl:stylesheet>
LT7
Result
<?xml version="1.0" encoding="UTF-8"?>
AlanTuring
429
XSL
T
BTE550 – Internet and Intranet Applications
RichardMFeynman
LT7
xsl:apply-templates
►Also useful when child elements have templates of their own<xsl:template match="people"><html><head><title>Famous Scientists</title></head>
430
XSL
T
BTE550 – Internet and Intranet Applications
<body><xsl:apply-templates select=“person”/></body></html></xsl:template>
LT7
xsl:apply-templates (Con’t)
►Replace every people element with html element►Process all person children of the current people element►Insert the output of any matched templates into the output
document’s body element
431
XSL
T
BTE550 – Internet and Intranet Applications
LT7
Example<?xml version="1.0"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="people"><html><head><title>Famous Scientists</title></head><body> <xsl:apply-templates/> </body></html>
432
XSL
T
BTE550 – Internet and Intranet Applications
</xsl:template><xsl:template match="person">
<xsl:apply-templates select="name"/></xsl:template><xsl:template match="name">
<p><xsl:value-of select="last_name"/>,<xsl:value-of select="first_name"/></p>
</xsl:template></xsl:stylesheet>
73
LT7
Result<html><head><META http-equiv="Content-Type" content="text/html; charset=UTF-
8"><title>Famous Scientists</title></head>
433
XSL
T
BTE550 – Internet and Intranet Applications
<body><p>Alan</p><p>Turing</p><p>Richard</p><p>Feynman</p></body></html>
LT7
Attributes<?xml version="1.0"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="people">
<html><head><title>Famous Scientists</title></head>
<body><dl>
<xsl:apply-templates/></dl>/b d
434
XSL
T
BTE550 – Internet and Intranet Applications
</body></html>
</xsl:template><xsl:template match="person">
<dt><xsl:apply-templates select="name"/></dt><dd><ul>
<li>Born: <xsl:apply-templates select="@born"/></li><li>Died: <xsl:apply-templates select="@died"/></li>
</ul></dd></xsl:template></xsl:stylesheet>
LT7
Attributes
►Default rule does not apply– apply-templates has to be present in order to output
values of attributes
435
XSL
T
BTE550 – Internet and Intranet Applications
LT7
Result<html><head><META http-equiv="Content-Type"
content="text/html; charset=UTF-8"><title>Famous Scientists</title></head><body><dl>
<dt>RichardMFeynman</dt><dd><ul><li>Born: 1918</li><li>Died: 1988</li>
436
XSL
T
BTE550 – Internet and Intranet Applications
<dt>AlanTuring</dt><dd><ul><li>Born: 1912</li><li>Died: 1954</li></ul></dd>
<li>Died: 1988</li></ul></dd>
</dl></body></html>
LT7
Modes
►Same input content needs to appear multiple times in the output document formatted according to different template– Titles of chapters
• Table of contents• In the chapters themselves
437
XSL
T
BTE550 – Internet and Intranet Applications
p► mode attribute
– xsl:template– xsl:apply-templates
LT7
Example with mode attribute<?xml version="1.0"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="people">
<html><head><title>Famous Scientists</title></head><body>
<ul><xsl:apply-templates select="person" mode="toc"/></ul><xsl:apply-templates select="person"/>
</body></html>
</xsl:template>
438
XSL
T
BTE550 – Internet and Intranet Applications
<!-- Table of Contents Mode Templates --><xsl:template match="person" mode="toc"><xsl:apply-templates select="name" mode="toc"/></xsl:template><xsl:template match="name" mode="toc"><li><xsl:value-of select="last_name"/>,<xsl:value-of select="first_name"/></li></xsl:template><!-- Normal Mode Templates --><xsl:template match="person"><p><xsl:apply-templates/></p></xsl:template>
</xsl:stylesheet>
74
LT7
Result<html><head><META http-equiv="Content-Type" content="text/html;
charset=UTF-8"><title>Famous Scientists</title></head><body><ul>
AlanTuring
computer scientistmathematiciancryptographer</p><p>
439
XSL
T
BTE550 – Internet and Intranet Applications
<li>Turing,Alan</li><li>Feynman,Richard</li></ul><p>
RichardMFeynman
physicistPlaying the bongoes</p></body></html>
LT7
Filtering
►So far we either process all the elements relative to a node or one element
►We need a way to filter out elements as well►This is done with an XPath control structure
440
XSL
T
BTE550 – Internet and Intranet Applications
LT7
Filtering Example
<?xml version="1.0"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="person">
<xsl:apply-templates select="*[notnot(self::hobby)]"/>
441
XSL
T
BTE550 – Internet and Intranet Applications
<xsl:apply templates select [notnot(self::hobby)] /></xsl:template></xsl:stylesheet>►The selfself keyword is needed to inform the XSLT processor
that the node following is a child of the current one
LT7
Result
<?xml version="1.0" encoding="UTF-8"?>
AlanTuring
442
XSL
T
BTE550 – Internet and Intranet Applications
computer scientistmathematiciancryptographer
RichardMFeynmanphysicist
LT7xsl:for-each
►iterating through a node set►<xsl:for-each></xsl:for-each>
443
XSL
T
BTE550 – Internet and Intranet Applications
LT7
Example of xsl:for-each
<?xml version="1.0"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="people">
<xsl:forfor--eacheach select="person">
444
XSL
T
BTE550 – Internet and Intranet Applications
<xsl:forfor--eacheach select person ><xsl:value-of select="name"/><xsl:value-of select="@born"/>
</xsl:forfor--eacheach></xsl:template></xsl:stylesheet>
75
LT7
Result
<?xml version="1.0" encoding="UTF-8"?>
AlanTuring
1912
445
XSL
T
BTE550 – Internet and Intranet Applications
1912RichardMFeynman
1918
LT7
xsl:if
►We can test content for certain values with XSL:– <xsl:if test=criteria></xsl:if>
►The test attribute is required and will either be true or false
446
XSL
T
BTE550 – Internet and Intranet Applications
LT7
Example of xsl:if<?xml version="1.0"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="people">
<xsl:for-each select="person"><xsl:value-of select="name"/>
447
XSL
T
BTE550 – Internet and Intranet Applications
<xsl:if test="@born='1912'"><xsl:if test="@born='1912'">Died in <xsl:value-of select="@died"/>
</xsl:if></xsl:if></xsl:for-each>
</xsl:template></xsl:stylesheet>
LT7
Result
<?xml version="1.0" encoding="UTF-8"?>AlanTuring
Died in
448
XSL
T
BTE550 – Internet and Intranet Applications
Died in1954RichardMFeynman
LT7
xsl:choose, xsl:when, xsl:otherwise
►We can also select content using:<xsl:choose><xsl:when test=criteria></xsl:when><xsl:otherwise>
449
XSL
T
BTE550 – Internet and Intranet Applications
<xsl:otherwise></xsl:otherwise></xsl:choose>
►The testtest attribute works in the same fashion as xsl:ifxsl:if
LT7
xsl:choose, xsl:when, xsl:otherwise<?xml version="1.0"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="people">
<xsl:for-each select="person"><xsl:value-of select="name"/>
<xsl:choose><xsl:choose><xsl:when test="@born='1912'"><xsl:when test="@born='1912'">
450
XSL
T
BTE550 – Internet and Intranet Applications
@@Died in <xsl:value-of select="@died"/>
</xsl:when></xsl:when><xsl:otherwise><xsl:otherwise>
Did not die in 1912</xsl:otherwise></xsl:otherwise>
</xsl:choose></xsl:choose></xsl:for-each>
</xsl:template></xsl:stylesheet>
76
LT7
Result
<?xml version="1.0" encoding="UTF-8"?>
AlanTuring
Died in 1954
451
XSL
T
BTE550 – Internet and Intranet Applications
Died in 1954
RichardMFeynman
Did not die in 1912
LT7
xsl:sort
►XSLT provides a nice way to sort documents by element contents
►The construct to use is:<xsl:sort select=selection></xsl:sort><xsl:sort select=selection></xsl:sort>
►Sorting can only be done in the following constructs:
452
XSL
T
BTE550 – Internet and Intranet Applications
g y g– <xsl:apply-templates…/>– <xsl:for-each …/>
LT7
Example of xsl:sort (“Ascending”)
<?xml version="1.0"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="people">
<xsl:apply-templates>
453
XSL
T
BTE550 – Internet and Intranet Applications
<xsl:apply templates><xsl:sort select="name"/>
</xsl:apply-templates></xsl:template></xsl:stylesheet>
LT7
Result<?xml version="1.0" encoding="UTF-8"?>
AlanTuring
computer scientistmathematician
454
XSL
T
BTE550 – Internet and Intranet Applications
cryptographer
RichardMFeynman
physicistPlaying the bongoes
LT7
Example of xsl:sort (“Descending”)
<?xml version="1.0"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="people">
<xsl:apply-templates>
455
XSL
T
BTE550 – Internet and Intranet Applications
<xsl:apply templates><xsl:sort select="name” order="descending” />
</xsl:apply-templates></xsl:template></xsl:stylesheet>
LT7
Result<?xml version="1.0" encoding="UTF-8"?>
RichardMFeynman
physicist
456
XSL
T
BTE550 – Internet and Intranet Applications
Playing the bongoes
AlanTuring
computer scientistmathematiciancryptographer
77
LT7
xsl:copy
►Used for creating an XML Document►The copying is done using this construct:
<xsl:copy></xsl:copy><xsl:copy></xsl:copy>►We will also specify to the processor that our output
should be XML instead of HTML
457
XSL
T
BTE550 – Internet and Intranet Applications
<xml:output method=“xml”/><xml:output method=“xml”/>
LT7
Example of xsl:copy<?xml version="1.0"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:output method="xml"/><xsl:template match=”people">
< l >
458
XSL
T
BTE550 – Internet and Intranet Applications
<xsl:copy><xsl:apply-templates>
<xsl:sort select="name"/></xsl:apply-templates>
</xsl:copy></xsl:template></xsl:stylesheet>
LT7
Result<?xml version="1.0" encoding="UTF-8"?>
RichardMFeynman
physicist
459
XSL
T
BTE550 – Internet and Intranet Applications
Playing the bongoes
AlanTuring
computer scientistmathematiciancryptographer
LT7
xsl:copy: Example # 2<?xml version="1.0"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:output method="xml"/><xsl:template match=”*">
< l >
460
XSL
T
BTE550 – Internet and Intranet Applications
<xsl:copy><xsl:apply-templates>
<xsl:sort select="name"/></xsl:apply-templates>
</xsl:copy></xsl:template></xsl:stylesheet>
LT7
Result<?xml version="1.0" encoding="UTF-8"?><people><person><name><first_name>Richard</first_name><middle_initial>M</middle_initial><last_name>Feynman</last_name></name><profession>physicist</profession><hobby>Playing the bongoes</hobby>
461
XSL
T
BTE550 – Internet and Intranet Applications
y y g g y</person><person><name><first_name>Alan</first_name><last_name>Turing</last_name></name><profession>computer scientist</profession><profession>mathematician</profession><profession>cryptographer</profession></person></people>
LT7
Programming API
►Input (Source tree)– File, Character stream, Byte stream– DOM– SAX input stream
►Output (Result tree)
462
XSL
T
BTE550 – Internet and Intranet Applications
►Output (Result tree)– File, Character stream, Byte stream– DOM– SAX events
78
LT7
Programming API using Xalan
//Have XSLTProcessorFactory obtain a interface to a// new XSLTProcessor object.XSLTProcessor processor =XSLTProcessorFactory.getProcessor();// Have the XSLTProcessor processor object transform
463
XSL
T
BTE550 – Internet and Intranet Applications
// Have the XSLTProcessor processor object transform// "foo.xml" to System.out, using the XSLT instructions// found in "foo.xsl".processor.process(new XSLTInputSource("foo.xml"),
new XSLTInputSource("foo.xsl"),new XSLTResultTarget(System.out));
LT7
Programming API using JAXP 1.1TransformerFactory tf = TransformerFactory.newInstance();Transformer transformer =
tf.newTransformer(new StreamSource(“foo.xsl”);transformer.transform(
new StreamSource(“foo.xml”),St S (“b l”))
464
XSL
T
BTE550 – Internet and Intranet Applications
new StreamSource(“bar.xml”));
LT7
XSLT vs. Programming
►Programming is useful when you do more than transformation
►Examples– Interpreting certain elements as database queries– Inserting the query results into output document
465
XSL
T
BTE550 – Internet and Intranet Applications
g q y p– asking users questions in the middle of transformation
CSSCSS8
Copyleft © 2005, Binnur Kurt
S8
Content►What are CSS? ►History of CSS►Why CSS?►Types of Style Sheets►Style Sheets Syntax►Cascading Model
467BTE550 – Internet and Intranet Applications
CSS
►Cascading Model►Box Formatting Model►CSS Syntax►Inheritance ►Classes, Pseudo Classes & IDs►Groups of elements (DIV & SPAN)►Benefits & Disadvantages
S8
►CSS stands for Cascading Style Sheets ►Styles define how to display HTML elements ►Styles are normally stored in Style Sheets►Styles were added to HTML 4.0 to solve a problem►External Style Sheets can save you a lot of work
What is CSS?
468BTE550 – Internet and Intranet Applications
CSS
►External Style Sheets can save you a lot of work ►External Style Sheets are stored in CSS files►Multiple style definitions will cascade into one
79
S8
Styles Solve a Common Problem►HTML tags were originally designed to define the content
of a document. ►They were supposed to say "This is a header", "This is a
paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on.
►The layout of the document was supposed to be taken care
469BTE550 – Internet and Intranet Applications
CSS ►The layout of the document was supposed to be taken care
of by the browser, without using any formatting tags.►As new HTML tags and attributes (like the <font> tag and
the color attribute) are added to the original HTML specification, it became more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.
S8
Styles Solve a Common Problem
►To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0.
470BTE550 – Internet and Intranet Applications
CSS
S8
Style Sheets Can Save a Lot of Work►Styles sheets define HOW HTML elements are to be
displayed, just like the font tag and the color attribute in HTML 3.2.
►Styles are normally saved in external .css files. ►External style sheets enable you to change the appearance
471BTE550 – Internet and Intranet Applications
CSS
y y g ppand layout of all the pages in your Web, just by editing one single CSS document!
►CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once.
S8
Style Sheets Can Save a Lot of Work
►As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want.
►To make a global change, simply change the style, and all elements in the Web are updated automatically.
472BTE550 – Internet and Intranet Applications
CSS
p y
S8
Multiple Styles Will Cascade Into One
►Style sheets allow style information to be specified in many ways.
►Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file.
473BTE550 – Internet and Intranet Applications
CSS ►Even multiple external style sheets can be referenced
inside a single HTML document.
S8
Cascading OrderWhat style will be used when there is more than one style
specified for an HTML element?► All the styles will "cascade" into a new "virtual" style sheet
by the following rules, where number four has the highest priority: 1. Browser default
474BTE550 – Internet and Intranet Applications
CSS 2. External style sheet
3. Internal style sheet (inside the <head> tag) 4. Inline style (inside an HTML element)
► Inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser.
80
S8
Top 10 Reasons for Using CSS
1. Build from the ground up to replace traditional Web design methods
2. Faster download times 3. Shorter development time 4. Greater control over the typography in a Web page
475BTE550 – Internet and Intranet Applications
CSS
yp g p y p g5. It's easy to write 6. Improvements in accessibility 7. Print designs as well as Web page designs 8. Better control over the placement of elements in Web
page
S8
Top 10 Reasons for Using CSS
9. The design of Web pages is separated from the content 10. Better search engine rankings
476BTE550 – Internet and Intranet Applications
CSS
S8
Status of CSS
►CSS, Level 1 (1996)– Concerned with applying simple styles to HTML
elements– http://www.w3.org/TR/REC-CSS1
►CSS, Level 2 (1998)
477BTE550 – Internet and Intranet Applications
CSS – Supports media-specific style sheets (visual browsers,
aural devices, printers, Braille devices)– http://www.w3.org/TR/REC-CSS2
►CSS, Level 3 (draft 2001)– Focused on modularization of the CSS specification– http://www.w3.org/TR/css3-roadmap/
S8
A Brief History of HTML and CSS
►Separating Style from Structure– Mixing display instructions and structural information:
• Adds to complexity of code• Inefficient mechanism for handling display
characteristics of multi-page Web sites
478BTE550 – Internet and Intranet Applications
CSS
p g• Limits cross-platform compatibility of content
– limits diversity of web devices
S8
STYLE
What are they?
CONTENT
479BTE550 – Internet and Intranet Applications
CSS
Web page
S8
CONTENT
What are they?
STYLE
Web page
480BTE550 – Internet and Intranet Applications
CSS Web page
81
S8
CSS
What are they?
481BTE550 – Internet and Intranet Applications
CSS
S8
What are they?
482BTE550 – Internet and Intranet Applications
CSS
Physical layout
Headings Body
Text
Text
CSS
Physical Layout
CSS
Headings
CSS
Body
CSS
S8
CONTENT
Devices
BROWSER
CSS
483BTE550 – Internet and Intranet Applications
CSS
MOBILE
CONTENT CSSCSSCSS
PDA
S8
Types of CSS
►External►Embedded►Imported►Inline
484BTE550 – Internet and Intranet Applications
CSS
S8
External
►Connection made via the LINK tag►Use the optional TYPE attribute to specify a media type
– type/css
485BTE550 – Internet and Intranet Applications
CSS
S8
Internal/Embedded
►Style characteristics are embedded in the HEAD section of the webpage
►Perhaps best used when a single page requires a unique style sheet
486BTE550 – Internet and Intranet Applications
CSS
82
S8
Imported
►Allows for using style sheets from other sources►Must be included at the beginning of the style sheet using
the @import statement►Other CSS rules can be included
487BTE550 – Internet and Intranet Applications
CSS
S8
Inline
►Least flexible►Requires each element to be tagged if you want them to
appear differently►Looses the advantage of using CSS
488BTE550 – Internet and Intranet Applications
CSS
S8
Inserting a CSS
►External sheet
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css” />
489BTE550 – Internet and Intranet Applications
CSS
y y
</head>
S8
Inserting a CSS
►Internal/embedded sheet
<head><style type=“text/css”>hr { color: navy}
490BTE550 – Internet and Intranet Applications
CSS body {margin-left: 20px}
</style></head>
S8
Inserting a CSS
►Internal/embedded sheet for older browsers<head><style type=“text/css”><!-- hr { color: navy}body {margin-left: 20px} -->
491BTE550 – Internet and Intranet Applications
CSS
body {margin left: 20px} ></style></head>
S8
Inserting a CSS
►Inline
<p style=“color: yellow; font-family: verdana”>This is a paragraph</p>
492BTE550 – Internet and Intranet Applications
CSS
</p>
83
S8
Using multiple sheets
►You can use multiple sheets to define the style of your document
►Internal styles will override external styles, if they are duplicated
493BTE550 – Internet and Intranet Applications
CSS
S8
Using multiple sheets
h3 {color: red; text-align: right; font-size: 8pt} (external CSS)h3 {text-align: center; font-size: 20pt} (internal CSS)
will yield
494BTE550 – Internet and Intranet Applications
CSS
S8
Using multiple sheets
h3 {color: red; text-align: right; font-size: 8pt} (external CSS)
h3 {text-align: center; font-size: 20pt} (internal CSS)
will yieldh3 {color: red; text-align: center; font-size: 20pt }
495BTE550 – Internet and Intranet Applications
CSS
S8
Sheet weight or Precedence
Author’s style sheet
User’s style sheet
Browser’s style sheet
496BTE550 – Internet and Intranet Applications
CSS
Greatest weight Least weight
S8
Understanding the Cascade
►Cascading– Determining rule weight by specificity
• Rules with more specific selectors take precedence over rules with less specific selectors
– Determining rule weight by order
497BTE550 – Internet and Intranet Applications
CSS
g g y• Based on order of rule within style sheet
– Those listed later take precedence over those listed earlier in the style sheet
S8
Understanding the Cascade
►Inheritance– Based on hierarchical structure of documents
• CSS rules inherit from parent elements to child elements:
– thus <LI> elements will inherit style rules from
498BTE550 – Internet and Intranet Applications
CSS
y<UL> elements unless a style rule is specifically set for the <LI> element
84
S8
Basic CSS SyntaxBasic CSS Syntax
499BTE550 – Internet and Intranet Applications
CSS Basic CSS SyntaxBasic CSS Syntax
S8
Basic CSS Syntax
►Three parts:– selector– property– value } declaration
500BTE550 – Internet and Intranet Applications
CSS
selector {property: value}
S8
Basic CSS Syntax
selector {property: value}
selectorselector: the basic HTML element tag you wish to define
bodybody
501BTE550 – Internet and Intranet Applications
CSS
bodybody
S8
Basic CSS Syntax
selector {property: value}
propertyproperty: the attribute of the selector that you wish to change
body {colorcolor
502BTE550 – Internet and Intranet Applications
CSS
body {colorcolor
S8
Basic CSS Syntax
selector {property: value}
valuevalue: the particular markup value for that attribute
body {color : black: black}
503BTE550 – Internet and Intranet Applications
CSS
body {color : black: black}
S8
Basic CSS Syntax
If the valuevalue has multiple words, put the value in quotes
p {font-family: “sans serif” }
504BTE550 – Internet and Intranet Applications
CSS
85
S8
Basic CSS Syntax
You can specify multiple propertiesproperties to a single selector. Properties must be separated by a semicolon.
P { text-align: left;; color: red }
505BTE550 – Internet and Intranet Applications
CSS
S8
Basic CSS Syntax
To make properties more readable, put each on a separate line.
p { text-align: center;color: navy;
506BTE550 – Internet and Intranet Applications
CSS
y;font-family: arial}
S8
Basic CSS Syntax
SelectorsSelectors can be grouped so that a common property can be specified
h1,h2,h3,h4,h5,h6{ color: yellow }
507BTE550 – Internet and Intranet Applications
CSS
{ y }
<h1> This is a level 1 heading </h1><h2> This is a level 2 heading </h2>
S8
Basic CSS Syntax
SelectorsSelectors can be descendants
P BP B { color: yellow }
In this example, only those <B><B> elements within a <P><P> element would b ll
508BTE550 – Internet and Intranet Applications
CSS be yellow
<p><b> This would be yellow </b></p><p> This would not be yellow </p>
S8
CSS Syntax - class
The classclass selector allows you to create different styles for the same HTML element.
p.right { text-align: right }p.center { text-align: center }
509BTE550 – Internet and Intranet Applications
CSS
p { g }
S8
CSS Syntax - class
p.right { text-align: right }
<p classclass=“right”>This paragraph will be right aligned.
</p>
510BTE550 – Internet and Intranet Applications
CSS </p>
Note: the class name must be in quotes inside the opening tag
86
S8
CSS Syntax - class
This is improper use of the class selectorselector:
<p class=“right” class=“center”>This paragraph will be right aligned.
</p>
511BTE550 – Internet and Intranet Applications
CSS
Only one class selector can be included inside the tag
S8
CSS Syntax - class
You can also create a class selector free of a tag name if you want all tags that have that class to be formatted the same.
.center { text-align: center }
A i h “ ” l ill b li d
512BTE550 – Internet and Intranet Applications
CSS Any tag with a “center” class will be aligned center
S8
CSS Syntax - class
.centercenter { text-align: center }
<h1 class=“center”>This heading will be centered
</h1>
513BTE550 – Internet and Intranet Applications
CSS
<p class=“center”>So will this text
</p>
S8
CSS Syntax - id
While the class selector can apply to several different elements, the idid selector can only apply to one, unique element.
p#para1 { text-align: center;
514BTE550 – Internet and Intranet Applications
CSS color: green }
S8
CSS Syntax - id
p#para1 { text-align: center;color: green }
<p id=“para1”>This text would be centered and green
515BTE550 – Internet and Intranet Applications
CSS
This text would be centered and green</p>
S8
CSS Syntax - comment
You can insert commentscomments to help you describe the particular style
Comments open with /* and are closed with */
/* This is a comment */P { color: red;
516BTE550 – Internet and Intranet Applications
CSS
{ co o : ed;/* This is another comment */Font-family: verdana }
87
S8
CSS syntax - <div>
►<DIV> can be used with the CLASS attribute to create customized block-level elements– Declare it in the style rule:
• DIV.introduction {font-size: 14pt; margin: 24 pt;}– Apply the style rule in the document:
517BTE550 – Internet and Intranet Applications
CSS
pp y y• <DIV CLASS=“introduction””>This is the
introduction to the document</DIV>
S8
CSS syntax - <span>
►<SPAN> can be used with the CLASS attribute to create customized inline elements– Declare it in the style rule:
• SPAN.logo {color: white; background-color: black;}– Apply the style rule in the document:
518BTE550 – Internet and Intranet Applications
CSS
pp y y• <P>Welcome to the <SPAN CLASS=“logo””>
Wonder Software</SPAN>Web site</P>
S8
Background PropertiesBackground Properties
519BTE550 – Internet and Intranet Applications
CSS Background PropertiesBackground Properties
S8
Background properties
►Define the background effects of an element►Effects include color, using an image for a background,
repeating an image and positioning an image
520BTE550 – Internet and Intranet Applications
CSS
S8
Background properties
►Basic syntax– background– background-color– background-image– background-repeat
521BTE550 – Internet and Intranet Applications
CSS
background repeat– background-attachment– background-position
S8
Background properties
►All attributes can be set in a single declaration:
background: #000000 url(‘psumark.gif’) no-repeat fixed center
522BTE550 – Internet and Intranet Applications
CSS
88
S8
Background properties
►Setting the body background (internal CSS)
body { background: #000000 url(‘psumark.gif’) no-repeat fixed center }
523BTE550 – Internet and Intranet Applications
CSS
S8
Background properties
►Setting the body background (external CSS)
body: { background: #000000 url(‘psumark.gif’) no-repeat fixed center }
524BTE550 – Internet and Intranet Applications
CSS
S8
Background properties
►Elements can also be set separately
body{ background-image: url(psumark.gif);background-color: navy }
525BTE550 – Internet and Intranet Applications
CSS
background color: navy }
S8
Text PropertiesText Properties
526BTE550 – Internet and Intranet Applications
CSS Text PropertiesText Properties
S8
Text properties
►Controls the appearance of text in the web page
527BTE550 – Internet and Intranet Applications
CSS
S8
Text properties
►Commonly used attributes– color– direction– text-align– text-decoration
528BTE550 – Internet and Intranet Applications
CSS
text decoration– text-indent
89
S8
Text properties
►►colorcolor– sets the color of the text– color can be represented by the color name (red), an
rgb value (rgb(255,0,0)), or by a hexadecimal number (#ff0000)
529BTE550 – Internet and Intranet Applications
CSS ►Syntax
– body {color: #ff0000}
S8
Text properties
►►directiondirection– sets the direction of the text– can be set as left to right (ltr) or right to left (rtl)
►Syntax– body {direction: rtl}
530BTE550 – Internet and Intranet Applications
CSS
body {direction: rtl}
S8
Text properties
►►texttext--alignalign– aligns the text in an element– possible values are left, right, center and justify
►Syntax– p {text-align: center}
531BTE550 – Internet and Intranet Applications
CSS
p {text align: center}
S8
Text properties
►►texttext--decorationdecoration– adds certain decoration elements to the text– possible values are none, underline, overline, line-
through and blink►Syntax
532BTE550 – Internet and Intranet Applications
CSS
y– p {text-decoration: underline}
S8
Text properties
►►texttext--indentindent– indents the first line of text inside an element– possible values are length (defines a fixed value) and
% (defines a % of the parent element)►Syntax
533BTE550 – Internet and Intranet Applications
CSS
y– p {text-indent: 20px}
S8
Font PropertiesFont Properties
534BTE550 – Internet and Intranet Applications
CSS Font PropertiesFont Properties
90
S8
Font properties
►Define the look of the font in text areas►One of the broader sets of properties in CSS
535BTE550 – Internet and Intranet Applications
CSS
S8
Font properties
► font ► font-style► font-variant► font-weight► font-size/line-height► font family
536BTE550 – Internet and Intranet Applications
CSS ► font-family
S8
Font properties
► fontfont--stylestyle ► normal► italic► oblique
537BTE550 – Internet and Intranet Applications
CSS
Syntax: body {font-style: italic}
S8
Font properties► fontfont--variantvariant ► normal
– font displays as is► small-caps
– font displays in all capitals, with lower case letters in smaller size
538BTE550 – Internet and Intranet Applications
CSS smaller size
Syntax: body {font-variant: small-caps}
S8
Font properties
► fontfont--weightweight ► normal► bold► bolder► lighter► weighted values
539BTE550 – Internet and Intranet Applications
CSS
► weighted values
Syntax: body {font-weight: bold}
S8
Weighted values► range from 100 – 900► 400 is the same as normal weight► 700 is the same as bold weight
540BTE550 – Internet and Intranet Applications
CSS
91
S8
Font properties► fontfont--sizesize ► xx-small to xx-large
► smaller– smaller than parent
► larger– larger than parent
541BTE550 – Internet and Intranet Applications
CSS
g p► %
– % of the parent
Syntax: body {font-size: 20px}{font-size: x-large}{font-size: 125%}
S8
Font properties
► fontfont--familyfamily ► family-name– “times”, “arial”, “courier”,
“verdana”► generic-family
– “serif”, “sans-serif”,
542BTE550 – Internet and Intranet Applications
CSS
, ,“monospace”
Syntax: body {font-family: verdana, sans-serif}
S8
Border PropertiesBorder Properties
543BTE550 – Internet and Intranet Applications
CSS Border PropertiesBorder Properties
S8
Border properties
►Allows you to specify the style, color and width of an element’s border
►Many different properties can be applied
544BTE550 – Internet and Intranet Applications
CSS
S8
Border properties
►You can specify the width, style, color, thickness and on which sides the border appears
545BTE550 – Internet and Intranet Applications
CSS
S8
Margin PropertiesMargin Properties
546BTE550 – Internet and Intranet Applications
CSS Margin PropertiesMargin Properties
92
S8
Margin properties
►Define the space around elements►You can use negative values to overlap content►Margins can be set independently or collectively►Can be set to auto, a fixed length or a % of the total height
of the document
547BTE550 – Internet and Intranet Applications
CSS
S8
Margin properties►Properties
– margin– margin-top– margin-right– margin-bottom
548BTE550 – Internet and Intranet Applications
CSS
g– margin-left
S8
Margin properties► margin-bottom ► auto
– set by the browser► length
– fixed► %
549BTE550 – Internet and Intranet Applications
CSS
► %
Syntax: h1 {margin-bottom: 20px}
S8
Margin properties
►Can be set in one declaration►Think clock face
– top, right, bottom, left
550BTE550 – Internet and Intranet Applications
CSS
h1 {margin: 10px 20px 30px 40px}
S8
Margin properties
►All margins can be set the same
551BTE550 – Internet and Intranet Applications
CSS
h1 {margin: 40px}
S8
Margin properties
►Margin settings can be paired (left and right, top and bottom)
552BTE550 – Internet and Intranet Applications
CSS
h1 {margin: 40px 5%}
In this example, the top and bottom margins would be 40 pixels,While the left and right margins would be 5% of the total height of
the document.
93
S8
Margin properties
►0 size margins do not need to be specified. 0px, 0pt and 0 are all equivalent.
553BTE550 – Internet and Intranet Applications
CSS
h1 {margin: 40px 0 5% 0}
In this example, the top margin would be 40 pixels, the left andright margins would be 0, and the bottom margin would
be 5% of the total height of the document.
Multimedia StandardsMultimedia Standards9
Copyleft © 2005, Binnur Kurt
Multimedia StandardsMultimedia Standards9
Stan
dard
s9
Content
►Image Compression Standards: JPEG, JPEG2000►Video Compression Standards: MPEG-1,2,4►Image and Video Indexing Standards: MPEG-7
555
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Benefits of Compressing Data
556
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
557
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Image Compression Standards► Facilitates the exchange of compressed data between
various devices and applications.► Economy of scale: permits common hardware/software to
be used for a wide range of products, thus lowering the cost and shortening the development time.
558
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
► Provides reference points for the expected quality of compressed images.
94
Stan
dard
s9
International Standard Organizations
► ISO/IEC– International Organization for Standardization– Deals with information processing, e.g., image storage
and retrieval► ITU-T
559
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
► ITU T– International Telecommunication Union– Formerly known as CCITT– Deals with information transmission
Stan
dard
s9
Image Compression Standards► Binary (bi-level) images:
– Group 3 & 4 (1980); JBIG (1994); JBIG2► Continuous-tone still images:
– JPEG (1992); JPEG-2000 (2000)► Image sequences (moving pictures):
560
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
– H.261 (1990); H.263 (1995); – H.263+ (1997), H.263L– MPEG1 (1994); MPEG2 (1995)– MPEG4 (1997)– MPEG7 (2001)– MPEG21
Stan
dard
s9
What Is JPEG?
► The JPEG (Joint Photographic Experts Group) committee, formed in 1986, has been chartered with the– “Digital compression and coding of continuous-tone still
images”► Joint between ISO and ITU-T
561
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
► Has developed standards for the compression of lossy, lossless, and nearly lossless of still images in the past decade
► Web site: www.jpeg.org
Stan
dard
s9
JPEG Summary► The JPEG committee has published the following
standards:– ISO/IEC 10918-1 | ITU-T Rec. T.81: Digital
compression and Coding of Continuous-Tone Still Images: Requirements and guidelinesISO/IEC 10918 2 | ITU T Rec T 83: Compliance testing
562
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
– ISO/IEC 10918-2 | ITU-T Rec. T.83: Compliance testing– ISO/IEC 10918-3 | ITU-T Rec. T.84: Extensions– ISO/IEC 14495-1 | ITU-T Rec. T.87: Lossless and Near-
Lossless Compression of Continuous-Tone Still Images –Baseline
– ISO/IEC 15444-1 | ITU-T Rec. T.800: JPEG2000 Image Coding System.
Stan
dard
s9
Examples of JPEG Applications
► Consumer imaging (digital cameras, picture disk, etc.)► Professional imaging (desktop publishing, graphic arts,
digital cameras, etc.)► Medical imaging► Internet imaging
563
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
g g► Scanning and printing► Image databases► Mobile
Stan
dard
s9
Baseline JPEG Encoder Block Diagram
564
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
95
Stan
dard
s9
Baseline JPEG Decoder Block Diagram
565
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Baseline JPEG Pros and Cons
Advantages► Memory Efficient► Low complexity► Compression efficiency► Visual model utilization► R b t
Disadvantages► Single resolution► Single quality► No target bit rate► No lossless capability► No tiling
566
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
► Robustness ► No tiling► No ROI► Blocking artifacts► Poor error resilience
Stan
dard
s9
567
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
568
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
JPEG2000 Compression Paradigm
569
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
570
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
96
Stan
dard
s9
571
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
572
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
573
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
574
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
0.125 bpp, CR=64:1
Stan
dard
s9
575
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
0.25 bpp, CR=32:1
Stan
dard
s9
576
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
0.5 bpp, CR=16:1
97
Stan
dard
s9
577
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
1 bpp, CR=8:1
Stan
dard
s9
578
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
overall 0.25 bpp, ROI 0.75 bpp, BG 0.1 bpp
Stan
dard
s9
JPEG 2000 Objectives►Advanced standardization image coding system to serve
applications into the next millennium►Address areas where current standards fail to produce the
best quality or performance► Provide capabilities to markets that currently do not use
579
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
compression► Provide an open system approach to imaging applications
Stan
dard
s9
The JPEG 2000 Standard► Part 1: Core Image Coding System (royalty and fee free)► Part 2: Extensions► Part 3: Motion JPEG 2000► Part 4: Conformance Testing► Part 5: Reference Software
580
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
► Part 5: Reference Software► Part 6: Compound Image File Format
Stan
dard
s9
JPEG 2000 Fundamental Building Blocks
581
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Preprocessing► The input image is partitioned into rectangular and non-
overlapping tiles of equal size (except possibly for those tiles at the image borders) that are compressed independently using their own set of specified compression parameters.
► The unsigned sample values in each component are level
582
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
► The unsigned sample values in each component are level shifted (DC offset) by subtracting a fixed value from each sample to make its value symmetric around zero.
► The level-shifted values can be subjected to a forward point-wise inter-component transformation to decorrelate the color data. A restriction is that components must have identical bit-depths and dimension
98
Stan
dard
s9
Reversible Color Transform
583
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Irreversible Color Transform (ICT)
584
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
585
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
586
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
587
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
588
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
99
Stan
dard
s9
589
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
590
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
591
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
592
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
593
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
594
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
100
Stan
dard
s9
Discrete Wavelet Transform Discrete Wavelet Transform
595
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
(DWT)(DWT)
Stan
dard
s9
Transformations in JPEG 2000
596
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
1D Two-Band DWT
597
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Example of Analysis Filter Bank
598
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
599
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
600
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
101
Stan
dard
s9
601
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
602
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Inverse DWT
603
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
The 1D Two Band DWT
604
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
1 Level, 2D Wavelet Decomposition (DC=1,AC=4)
605
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
2 Level, 2D Wavelet Decomposition (DC=1,AC=4)
606
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
102
Stan
dard
s9
3 Level, 2D Wavelet Decomposition (DC=1,AC=4)
607
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
2D Wavelet Decomposition
608
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Bi-Orthogonal Filter Banks
• Most wavelet based image compression systems use a class ofanalysis/synthesis filters knowns as bi-orthogonal filters:
• The basis functions corresponding to h0(n) and g1(n) areorthogonal; and the basis functions for h1(n) and g0(n) areorthogonal.• Linear-phase (symmetrical) and perfect reconstruction
609
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Linear phase (symmetrical) and perfect reconstruction• Unequal length; odd-length filters differ by an odd multipleof two (e.g., 7/9), while even-length filters differ by an evenmultiple of two (e.g., 6/10)• Symmetric boundary extension.
Stan
dard
s9
Bi-Orthogonal DWT
610
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Region Of Interest CodingRegion Of Interest Coding
611
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Region Of Interest CodingRegion Of Interest Coding
Stan
dard
s9
ROI Example
612
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
103
Stan
dard
s9
ROI Example (cont’d)
613
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Error ResilienceError Resilience
614
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Error ResilienceError Resilience
Stan
dard
s9
Error-prone Channels
615
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Error Effects
616
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Protecting Code-block Data
617
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Error-Resilience Visual Results
BER = 10-5
618
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
JPEG CR=16:1 JPEG 2000 CR=16:1
104
Stan
dard
s9
Error-Resilience Visual Results
BER = 10-4
619
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
JPEG CR=16:1 JPEG 2000 CR=16:1
Stan
dard
s9
JPEG-LS
620
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
PNG
621
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Test Images
622
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Test Images (Cont’d)
623
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
624
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
105
Stan
dard
s9
625
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
626
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Lossless Results
627
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
628
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Non-progressive Results
629
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
630
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
106
Stan
dard
s9
631
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
632
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
633
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
634
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
635
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Video Compression Standards
►MPEG-1 and MPEG-2 provide interoperable ways ofrepresenting audiovisual content, commonly used on digital media and on the air
►MPEG-4 defines how to represent content►MPEG-7 specifies how to describe content
636
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
►MPEG 7 specifies how to describe content►MPEG-21 provides a truly interoperable multimedia
framework
107
Stan
dard
s9
MPEG-1 — ISO/IEC 11172
►Coding of moving pictures and associated audio for digital storage media
►Video and audio at 1.5M bit/s for CD-ROM►Five parts
– Part 1 (systems): multiplexing & synchronization
637
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
( y ) p g y– Part 2 (video): ~VHS quality at 1.15M bit/s– Part 3 (audio): stereo at 384K, 256K, 192K bit/s– Part 4 (conformance testing): references for decoder– Part 5 (reference software): C implementation
►Applications: Video CD, MP3
Stan
dard
s9
MPEG-2 — ISO/IEC 13818►Generic coding of moving pictures and associated audio►Digital Storage Media Command and Control (DSM-CC)
for session set up and remote control of a server, used inset top boxes for satellite and cable TV
►Advanced Audio Coding (AAC) for multi-channel audio►4:2:2 profile for TV production studios
638
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
►4:2:2 profile for TV production studios►Provisions for Intellectual Property Management and
Protection (IPMP)►Applications: digital TV set top boxes, DVD►Transport Stream version►Patent issues
Stan
dard
s9
MPEG-4 — ISO/IEC 14496►Coding of audiovisual objects►MPEG-4 defines how to represent content
– ancestry: VRML– interoperability of content structure
• AFX — Animation Framework eXtension• XMT textual XML format for SMIL Web3D
639
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
• XMT — textual XML format for SMIL, Web3D, etc.
– adapt transparently to device capabilities►FSG — Fine Granularity Scalability►Extensions of AAC and IPMP, Studio Profile►MP4 and AVC file formats, multi-user environment►Patent issues
Stan
dard
s9
MPEG-7 — ISO/IEC 15938
►Multimedia content description interface►MPEG-7 specifies how to describe content
– describe content way beyond metadata– facilitate content management, in particular searching
640
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
MPEG-21 — ISO/IEC (18034) 21000
►Define the technology needed to support Users toexchange, access, consume, trade and otherwisemanipulate Digital Items in an efficient, transparent andinteroperable way
641
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
642
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
108
Stan
dard
s9
643
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
644
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
645
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
646
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
647
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
648
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
109
Stan
dard
s9
649
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
650
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
651
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
652
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
653
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
654
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
110
Stan
dard
s9
655
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
656
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
657
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
658
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
659
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
660
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
111
Stan
dard
s9
661
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
662
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
663
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
664
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
665
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
666
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
112
Stan
dard
s9
667
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
668
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
669
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
670
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
671
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
672
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
113
Stan
dard
s9
673
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
674
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
675
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
676
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
677
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
678
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
114
Stan
dard
s9
679
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
MPEG-4
680
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
MPEG-7
► MPEG-7 is not about compression; it is about metadata “bits about the bits”
► Metadata is digital information that describes the content of other digital data
681
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
682
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
MPEG-21
► An open framework for multimedia delivery andconsumption
► Focal points:► Content creators► Content consumers
683
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
► Content consumers
Stan
dard
s9
MPEG-21 Scope
684
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
115
Stan
dard
s9
MPEG-21 Digital Item
►Structured digital objects, including a standardrepresentation and identification, and metadata
►Fundamental unit of distribution and transaction withinthe MPEG-21 framework
►No further technical meaning
685
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
MPEG-21 User►A User is any entity that interacts in the MPEG-21
environment or makes use of a Digital Item– Users include individuals, consumers, communities,
organizations, corporations, consortia, governments andother standards bodies and initiatives around the world.
►Users are identified specifically by their relationship to
686
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
another User for a certain interaction►MPEG-21 makes no distinction between a “content
provider” and a “consumer” — both are Users– A single entity may use content in many ways– however, a User may assume specific or even unique
rights and responsibilities according to their interaction with other Users within MPEG-21
Stan
dard
s9
MPEG-21 CE Testbed
687
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
The parts of MPEG-21
►1. Vision, technologies and strategies►2. Digital Item Declaration►3. Digital Item Identification►4. Intellectual Property Management and Protection
(IPMP)
688
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
( )►5. Rights Expression Language►6. Rights Data Dictionary►7. Digital Item Adaptation►8. Reference Software►9. File Format
Stan
dard
s9
MPEG-21Part 1 — Vision► Define a multimedia framework to enable transparent
and augmented use of multimedia resources across awide range of networks and devices1. Provide a vision2. Facilitate integration and harmonization of
689
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
technologies3. Provide a strategy for achieving a framework through
collaboration
Stan
dard
s9
Users and content
690
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
116
Stan
dard
s9
Digital assets►World Wide Web’s phases
– 1990 (info.cern.ch) —scientific exchange
– 1995 (tidal wave) —free content
691
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
– 2000 (dot bomb) —ubiquitous fast network
►Users are starting to recognize the value of their digital asset resources
►Markets must be efficient
Stan
dard
s9
The need for harmonization
692
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
MPEG-21 Part 2 — Digital Item Declaration►Index a Digital Item►Purpose: describe a set of abstract terms and concepts to
form a useful model for defining Digital Items►Three normative sections:
– Model• set of abstract terms and concepts
693
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
• set of abstract terms and concepts– Representation
• normative description of syntax & semantics of DID elements
– Schema• normative XML schema comprising the entire
grammar of DID
Stan
dard
s9
Digital Item Declaration in detail
694
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Digital Item Declaration example
695
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
MPEG-21 Part 3 — Digital Item Identification
►The scope of the Digital Item Identification (DII)specification includes:
►How to uniquely identify Digital Items and parts thereof(including resources)
►How to uniquely identify IP related to the Digital Items
696
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
(and parts thereof), for example abstractions►How to uniquely identify Description Schemes►How to use identifiers to link Digital Items with related
information such as descriptive metadata►How to identify different types if Digital Items
117
Stan
dard
s9
DII example: MPEG-21 music album
697
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
MPEG-21 Part 4 — IPMP
►Improvements over MPEG-4 IPMP:– Internetworking– IPMP tool retrieval & authentication– Integration of Rights Expressions (RDD & REL)
►Intellectual Property Management and Protection involves
698
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
►Intellectual Property Management and Protection involves the enforcement of REL permissions– IPMP shall consult REL before any actions are taken in
the User’s system►REL: What is protected? What right applies?
IPMP: How is it protected?
Stan
dard
s9
MPEG-21 Part 5 — REL
►Rights Expression Language►A machine-readable language►Can declare rights and permissions►Uses terms defined in the Rights Data Dictionary
699
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
MPEG-21 Part 5 — REL►The Rights Expression Language consists of licenses and
grants that give specific permissions to Users to perform certain actions on certain resources, given that certain conditions are met– Grants can also allow Users to delegate authority to
others
700
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
►User’s system shall parse and validate the RE►User’s system shall check permissions before any further
action is done►DID parser is responsible for discovering and identifying
where to gather licenses►REL licenses are wrapped in Digital Items
Stan
dard
s9
REL data model
701
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
►REL grant consist of– principal to whom grant is issued– rights the grant specifies– resource to which right in grant applies– condition to be met before grant can be exercised
Stan
dard
s9
MPEG-21 Part 6 — Rights Data Dictionary►Set of clear, consistent, structured, integrated and uniquely
identified Terms to support REL►Specification of dictionary structure and methodology to
create dictionary►Dictionary is prescriptive, inclusive, and has audit
provisions
702
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
p►Legal definitions are mapped from other Authorities►Supports mapping & transformation of metadata from
terminology of one namespace (or Authority) into that of another namespace in automated or partially automatedway
►Dictionary is based on a logical model, the ContextModel, which is the basis of the dictionary ontology
118
Stan
dard
s9
MPEG-21 Part 7 — Digital Item Adaptation
►Goal: achieve transparent interoperable access to distributed multimedia content
►Enable ad hoc formation of Usercommunities in which contents is shared with agreed or contracted
703
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
– Quality– Reliability– Flexibility– Diversity
►Guaranteed user experience
Stan
dard
s9
Concept of Digital Item Adaptation
704
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Relation between DIA and other MPEG-21parts
705
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Scope of standardization►User Characteristics
– Terminal Capabilities– Network Characteristics– Natural Environment Characteristics– Resource Adaptability
706
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
p y– Session Mobility
Stan
dard
s9
Overview of DIA Tools
707
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Bitstream Syntax Description
►A BSD describes the syntax (high level structure) of abinary media resource
►BSDL: XML schema based language to design specificbitstream syntax schemas for particular media formats
►gBS schema: generic schema enabling the construction of
708
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
resource format independent bitstream syntax descriptions
119
Stan
dard
s9
Adaptation architecture
709
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
Terminal and Network Quality of Service►AdaptationQoS specifies the relationship between constraints and
feasible adaptation operations►Constraints: BandwidthInkbps, ComputationTimeInMillisecs►Utilities (qualities): PSNRIndB►Adaptation Methods:
– frameDroppingAndOrCoefficientDropping, requantization,fineGranularScalability, waveletReduction, spatialSizeReduction
►Utilit F ti
710
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
►UtilityFunction:– describes possible adaptation operators and associated qualities
using a set of constraint points as indexes– Linear interpolation is assumed between constraint points
►LookUpTable:– additional multi-dimensional sets of data to support more
elaborate adaptation scenarios►StackFunction
– tool for describing the data in numerical function format
Stan
dard
s9
Metadata Adaptability►MetadataAdaptationHint describes adaptation hint information
pertaining to metadata within a digital item►Hint: a set of syntactical elements with prior knowledge about the
metadata that is useful for reducing the complexity of the metadataadaptation process
711
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
AdaptationQoS — BSD►Link In some cases it is convenient to specify intrinsic
operations based on a universal model for scalable bit-streams
►A specified operation can be seen as a link that iscomposed of a mapping condition between identifiedparameters and an operation, which is conducted if this
712
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
mapping is fulfilled
Stan
dard
s9
(g)BSD, AdaptationQoS, and Link
713
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
MPEG-21 Part 8 — Reference Software
►Success of a standard depends on the availability ofreference software
►Plan to use the software developed in Core Experiments (CE) as a basis
►Platform independence
714
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
►Future repository (requires membership)– http://mpeg.nist.gov/cvsweb/MPEG-21/
►Temporary repository– http://www.titr.uow.edu.au/cgi-bin/mpeg-ref-sw.pl
►Current main issue: parsing DID
120
Stan
dard
s9
Digital Item Processing
►Digital Items act as a structure for organizing resourcesand its descriptions
►Need a mechanism for defining a set of operations bywhich a terminal can process a DI or DID
►Currently considering to specify a set of operations that
715
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
can be used to process DIs: Digital Item Method►A DIM defines an intended method for configuring,
manipulating and/or validating a DI
Stan
dard
s9
Methods vs. processing
►Interoperability of Digital Items means that terminals must handle the DIs in a consistent manner
►Digital Item Methods provide a way to specify a selection of preferred procedures by which the DI should be handled at the DI level
716
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
– a menu of user interaction possibilities►Digital Item Processing encompasses all aspects of
processing a DI from an application perspective►Applications build DIP environments around a
fundamental DIME
Stan
dard
s9
Digital Item processing terminology►CDI — Content Digital Item
– a DID containing the actual content►DIBO — Digital Item Base Operation►DIM — Digital Item Method
– method that can by applied to a DID►DIME DIM E i
717
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
►DIME — DIM Engine– part of the terminal responsible for executing the DIM
►DIML — DIM Language►DIP — Digital Item Processing►MI — Method Item►PI — Processing Item►XDI — Context Digital Item
Stan
dard
s9
Digital Item Processing
718
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
DIP flow control
719
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
Stan
dard
s9
MPEG-21 Part 9 — File Format
►An MPEG-21 file format shall be capable of storing MPEG-21 Digital Items– all components of the DI within a single file
►The MPEG-21 file format will inherit several concepts from MP4, in order to make ‘multi-purpose’ files possible
720
Mul
timed
ia S
BTE550 – Internet and Intranet Applications
121
Dynamic HTML:Dynamic HTML:JavaScriptJavaScript10
Copyleft © 2005, Binnur Kurt
ript
10
Content
► What is JavaScript?► What can a JavaScript Do?► How to include JavaScript in html?► JavaScript Variables► JavaScript Expressions
722
Java
Scr
BTE550 – Internet and Intranet Applications
► Control Statements► DOM and Events► Javascript and XSLT► Setting and Reading Cookies
ript
10
What is JavaScript?
►Language developed by Netscape►Primary purpose is for "client-end" processing of HTML
documents– JavaScript code is embedded within the html of a
document
723
Java
Scr
BTE550 – Internet and Intranet Applications
– An interpreter in the browser interprets the JavaScript code when appropriate
– Code typically allows for "preprocessing" of forms and can add "dynamic content" to a Web page
ript
10
What is JavaScript?
►JavaScript was designed to add interactivity to HTML pages
►JavaScript is a scripting language (a scripting language is a lightweight programming language)
►A JavaScript consists of lines of executable computer
724
Java
Scr
BTE550 – Internet and Intranet Applications
code ►A JavaScript is usually embedded directly into HTML
pages ►JavaScript is an interpreted language (means that scripts
execute without preliminary compilation) ►Everyone can use JavaScript without purchasing a license
ript
10Are Java and JavaScript the Same?
►NO!!►Java and JavaScript are two completely different
languages in both concept and design!►Java (developed by Sun Microsystems) is a powerful and
much more complex programming language - in the same
725
Java
Scr
BTE550 – Internet and Intranet Applications
category as C# and C++.
ript
10
What can a JavaScript Do?►JavaScript gives HTML designers a programming tool
HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages
►JavaScript can put dynamic text into an HTML page
726
Java
Scr
BTE550 – Internet and Intranet Applications
p p y p gA JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page
►JavaScript can react to events: A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
122
ript
10
What can a JavaScript Do?►JavaScript can read and write HTML elements: A
JavaScript can read and change the content of an HTML element
►JavaScript can be used to validate data: A JavaScript can be used to validate form data before it is submitted to a server, this will save the server from extra processing
727
Java
Scr
BTE550 – Internet and Intranet Applications
►JavaScript can be used to detect the visitor's browser:A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser
►JavaScript can be used to create cookies: A JavaScript can be used to store and retrieve information on the visitor's computer
ript
10
How to include JavaScript in html?
►JavaScript programs require the <SCRIPT> tag in .html files<script type = "text/javascript">
ACTUAL JavaScript code here</script>
728
Java
Scr
BTE550 – Internet and Intranet Applications
►These can appear in either the <HEAD> or <BODY> section of an html document– Functions and code that may execute multiple times is
typically placed in the <HEAD>• These are only interpreted when the relevant
function or event-handler are called
ript
10
How to include JavaScript in html?
– Code that needs to be executed only once, when the document is first loaded is placed in the <BODY>
►Some browsers may not support scripting – To be safe, you can put your scripts in html comments – This way browsers that do not recognize JavaScript
729
Java
Scr
BTE550 – Internet and Intranet Applications
This way browsers that do not recognize JavaScript will look at the programs as comments
►Note that, unlike PHP scripts, JavaScripts are visible in the client browser– Since they are typically acting only on the client, this is
not a problem
ript
10
How to include JavaScript in html?
►However, if we want to prevent the script itself from being seen, we can upload our JavaScript from a file– This will show only the upload tag in our final
document, not the JavaScript from the file
730
Java
Scr
BTE550 – Internet and Intranet Applications
, p– Use the src option in the tag<SCRIPTSCRIPT type = "text/javascript" srcsrc="bogus.js"></SCRIPTSCRIPT>
ript
10Simple Example
<HTML><HEAD><TITLE>First JavaScript Example</TITLE></HEAD><BODY><H2>This line is straight HTML</H2><H3><SCRIPT type = "text/javascript">
document write("These lines are produced by<br/>");
731
Java
Scr
BTE550 – Internet and Intranet Applications
document.write( These lines are produced by<br/> );document.write("the JavaScript program<br/>");alert("Hey, JavaScript is fun!");
</SCRIPT></H3><H2>More straight HTML</H2><SCRIPT type = "text/javascript“ src="bogus.js"></script></BODY></HTML>
ript
10
JavaScript Variables
►JavaScript variables have no types– Type is determined dynamically, based on the value stored
• This is becoming familiar!• The typeof operator can be used to check type of a
variable
►D l i d i h k d
732
Java
Scr
BTE550 – Internet and Intranet Applications
►Declarations are made using the var keyword– Can be implicitly declared, but not advisable– Declarations outside of any function are global– Declarations within a function are local to that function– Variables declared but not initialized have the value
undefined
123
ript
10
JavaScript Variables
►A big difference between JavaScript and other languages like JAVA and C is that JavaScript is untyped.
►This means that a JavaScript variable can hold a value of any data type, and its data type does not have to be set when declaring the variable.
733
Java
Scr
BTE550 – Internet and Intranet Applications
►This allows you to change the data type of a variable during the execution of your program, for example:var x = 10;x = "ten";
►In this example the variable x is first assigned the integer value of 10, and then the string value of the word ten.
ript
10
JavaScript Variables►Variable identifiers are similar to those in other languages
– Cannot use a keyword– Must begin with a letter, $, or _
• Followed by any sequence of letters, $, _ or digits– Case sensitive
When you declare a variable within a function the variable can
734
Java
Scr
BTE550 – Internet and Intranet Applications
– When you declare a variable within a function, the variable can only be accessed within that function. When you exit the function, the variable is destroyed.
– These variables are called local variables. You can have local variables with the same name in different functions
– If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.
ript
10
JavaScript Expressions
►Numeric operators in JavaScript are similar to those in most languages+, –, *, /, %, ++, --– Precedence and associativity are also fairly standard
►Strings
735
Java
Scr
BTE550 – Internet and Intranet Applications
g– Have the + operator for concatenation– Have a number of methods to do typical string
operations• charAt, indexOf, toLowerCase, substring
– Looks kind of like Java – intentionally
ript
10
JavaScript Expressions
►Similar to PHP, with mixed number/string type expressions, JavaScript will coerce if it can– If operator is + and an operand is string, it will always
coerce other to string– If operator is arithmetic, and string value can be
736
Java
Scr
BTE550 – Internet and Intranet Applications
coerced to a number it will do so• If string is non-numeric, result is NaN
(NotaNumber)– We can also explicitly convert the string to a number
using parseInt and parseFloat• Again looks like Java
ript
10Control Statements
►Relational operators:==, !=, <, >, <=, >=• The above allow for type coercion. To prevent
coercion there is also===, !==
737
Java
Scr
BTE550 – Internet and Intranet Applications
,– Similar to PHP
►Boolean operators&&, ||, !• &&, || are short-circuited (as in Java and PHP)
ript
10
Control Statements
►Control statements similar to Java– if, while, do, for, switch
• Variables declared in for loop header are global to the rest of the script
►Functions
738
Java
Scr
BTE550 – Internet and Intranet Applications
– Similar to C++ functions, but• Header is somewhat different
function name(param_list)– Return type not specified (since JS has dynamic typing)– Param types also not specified
124
ript
10
Functions►Functions execute when they are called, just as in any
language►To allow this, function code should be in the <HEAD>
section of the .html file►Variables declared in a function are local to the function►Parameters are all value
739
Java
Scr
BTE550 – Internet and Intranet Applications
►Parameters are all value– No parameter type-checking– Numbers of formal and actual parameters do not have to
correspond• Extra actual parameters are ignored• Extra formal parameters are undefined
– All actual parameters can be accessed regardless of formal parameters by using the arguments array
ript
10
Array Objects
►More relaxed version of Java arrays– Size can be changed and data can be mixed– Cannot use arbitrary keys as with PHP arrays
►Creating arrays– Using the new operator and a constructor with multiple
740
Java
Scr
BTE550 – Internet and Intranet Applications
argumentsvar A = new Array("hello", 2, "you");
– Using the new operator and a constructor with a single numeric argumentvar B = new Array(50);
– Using square brackets to make a literalvar C = ["we", "can", 50, "mix", 3.5, "types"];
ript
10
Array Objects
►Array Length– Like in Java, length is an attribute of all array objects– However, like in Javascript it does not necessarily
represent the number of items or even mem. locations in the array
741
Java
Scr
BTE550 – Internet and Intranet Applications
– Unlike Java, length can be changed by the programmer– Actual memory allocation is dynamic and occurs when
necessary• An array with length = 1234 may in fact have memory
allocated for only a few elements• When accessed, empty elements are undefined
ript
10
Array Objects
►Array Methods– There are a number of predefined operations that you
can do with arrays– concat two arrays into one– join array items into a single string (commas
742
Java
Scr
BTE550 – Internet and Intranet Applications
j y g g (between)
– push, pop, shift, unshift» Push and pop are a "right stack"» Shift and unshift are a "left stack"
ript
10Array Objects
• sort– Sort by default compares using alphabetical order– To sort using numbers we pass in a comparison
function defining how the numbers will be compared
743
Java
Scr
BTE550 – Internet and Intranet Applications
• reverse– Reverse the items in an array
ript
10
Array Objects
• These operations are invoked via method calls, in an object-based way
– Also many, such as sort and reverse are mutators, affecting the array itself
– JavaScript also has 2-dimensional arrays
744
Java
Scr
BTE550 – Internet and Intranet Applications
• Created as arrays of arrays, but references are not needed
125
ript
10
JavaScript Objects
►JavaScript is an object-based language– It is NOT object-oriented– It has and uses objects, but does not support some
features necessary for object-oriented languages• Class inheritance and polymorphism not supported
745
Java
Scr
BTE550 – Internet and Intranet Applications
p y p pp– They can be “faked” but are not really there
ript
10
JavaScript Objects
– JavaScript objects are actually represented as property-value pairs• Very much like Perl hashes• The object is analogous to the hash name, and the properties are
analogous to the data stored in the hash– Properties can be data or functions (methods)
• Ex:
746
Java
Scr
BTE550 – Internet and Intranet Applications
• Ex:var my_tv = new Object();
my_tv.brand = "Sony";my_tv.size = 27;my_tv.jacks = new Object();my_tv.jacks.input = 3;my_tv.jacks.output = 2;
ript
10
JavaScript Objects• Note that the objects can be created and their properties can
be changed dynamically• Also, objects all have the same data type – object• We can write constructor functions for objects if we'd like,
but these do not create new data types – just easy ways of uniformly initializing objectsfunction TV(brand size injacks outjacks)
747
Java
Scr
BTE550 – Internet and Intranet Applications
function TV(brand, size, injacks, outjacks){
this.brand = brand;this.size = size;this.jacks = new Object();this.jacks.input = injacks;this.jacks.output = outjacks;
}…var my_tv = new TV("Sony", 27, 3, 2);
ript
10
JavaScript Objects– Once an object is constructed, I can change its properties if I want
to• Let’s say I want to add a method to my TV called
“show_properties”
function show_properties() {document.write("Here is your TV: <BR/>");
748
Java
Scr
BTE550 – Internet and Intranet Applications
document.write("Brand: ", this.brand,"<BR/>");document.write("Size: ", this.size, "<BR/>");document.write("Input Jacks: ");document.write(this.jacks.input, "<BR/>");document.write("Output Jacks: ");document.write(this.jacks.output, "<BR/>");
}…my_tv.show = show_properties;
ript
10Regular Expressions
– JavaScript regular expression handling is also based on that in Perl
• The patterns and matching procedures are the same as in Perl
• However, now the functions are methods within a string objectvar s = "a man, a plan, a canal: panama";
749
Java
Scr
BTE550 – Internet and Intranet Applications
var s a man, a plan, a canal: panama ;var loc = s.search(/plan/);var matches1 = s.match(/an/g);var matches2 = s.match(/\w+/g);s = s.replace(/\W/g, "-");– Note that match is a sort of “complement” to split
» Returns the matched pieces as opposed to the non-matched pieces
» Similar to PHP when using an argument for the result
ript
10
DOM►The Document Object Model
– Developed by W3C (World-Wide Web Consortium)• http://www.w3c.org/DOM/
– Specifies the contents of Web documents in an object-oriented way• Allows programming languages to access and manipulate the
components of documents
750
Java
Scr
BTE550 – Internet and Intranet Applications
components of documents• Defined at a high level so that a variety of languages can be
used with it• It is still being updated / revised
– We are not even scratching the surface here
126
ript
10
Events
– With documents DOM specifies events and event handlers• Event model is similar to the one used in Java• Different parts of a document have different events
associated with them
751
Java
Scr
BTE550 – Internet and Intranet Applications
• We can define handlers to react to these events– These allow us to "interact" with and add "dynamic
content" to web documents• Ex: Can preprocess form elements• Ex: Can load / update / change what is displayed in
response to an event
ript
10
DOM and Events►document refers to the top-level document
– Each document has access to its properties and to the components that are declared within it
• Ex: title, URL, forms[], applets[], images[]• Attributes with IDs can also be specified by ID
Once we know the components events and event handlers we
752
Java
Scr
BTE550 – Internet and Intranet Applications
– Once we know the components, events and event-handlers, we can write JavaScript programs to process Web pages on the client-side
• Client computers are typically less busy than servers, so whatever we can do at the client will be helpful overall
– Ex: Checking form correctness before it is submitted
ript
10
DOM and Events
– In HTML documents events are specified through tag attributes• Within the tag identifying an HTML component,
we can specify in an attribute how the component reacts to various events
753
Java
Scr
BTE550 – Internet and Intranet Applications
– Similar in idea to Java, we assign event handling code to the tag attributes, and the code executes when the event occurs
ript
10
Example: Pre-processing a Form►A very common client-side operation is pre-processing a
form– Ensure that fields are filled and formatted correctly, so
server does not have to• Saves load on the server, saves time and saves
b d id h
754
Java
Scr
BTE550 – Internet and Intranet Applications
bandwidth• We can check a form overall by using the attribute
onsubmit– We can put it right into the form as an attribute– Or we can assign the attribute through the
document object
ript
10Example: Pre-processing a form
• We can check individual components as they are entered as well
– Ex: <input type = "text"> has the onchangeattribute
» Triggered when contents are changed and
755
Java
Scr
BTE550 – Internet and Intranet Applications
focus changes– Ex: <input type = "radio"> has the onclick
attribute» Triggered when the radio button is clicked
with the mouse
ript
10
Javascript and XSLT
function doTransform(source){var objXSL= new
ActiveXObject("Msxml2.DOMDocument");objXSL.load("query1.xsltquery1.xslt");
756
Java
Scr
BTE550 – Internet and Intranet Applications
str=source.transformNode(objXSL);return (str);}
127
ript
10
query1.xslt<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/><xsl:template match="MovieDataBase">
<html><head>
<title>Query</title></head><body>
<xsl:for-each select="Movie">
757
Java
Scr
BTE550 – Internet and Intranet Applications
s : o e c se ec ov e<xsl:for-each select="Genre">
<xsl:if test="node()='Drama'"><li><xsl:value-of select="..//Title"/></li></xsl:if>
</xsl:for-each></xsl:for-each>
</body></html>
</xsl:template></xsl:stylesheet>
ript
10
<html><head>
<title>Javascript and XSLT</title></head><body><script type = "text/javascript">
function doTransform(source){var objXSL= new ActiveXObject("Msxml2.DOMDocument");objXSL.load("query1.xslt");str=source.transformNode(objXSL);
758
Java
Scr
BTE550 – Internet and Intranet Applications
return (str);}var src= new ActiveXObject("Msxml2.DOMDocument");src.load("imdb.xml");var str=doTransform(src);document.write(str);
</script></body>
</html>
ript
10
Setting Cookies ►Create a string and then set the document.cookie property to that. ►Cookie values must never have spaces, commas, or semicolons. ► a pair of functions will code and decode your properties
– escape() – unescape().
f ti tC ki (){
759
Java
Scr
BTE550 – Internet and Intranet Applications
function setCookie(){var the_name = prompt("What's your name?","");var the_cookie = "wm_javascript=" + escape("username:" + the_name);document.cookie = the_cookie;alert("Thanks, now go to the next page.");
}
ript
10
Reading Cookies
►Once you save a cookie to someone's hard disk, it's easy to read.
►Here's the code that reads the example cookiefunction readCookie(){
var the cookie = document.cookie;
760
Java
Scr
BTE550 – Internet and Intranet Applications
_ ;var the_cookie = unescape(the_cookie);var broken_cookie = the_cookie.split(":");var the_name = broken_cookie[1];alert("Your name is: " + the_name);
}
ript
10Complicated Cookie Reading
►If you want your cookie to contain more than just one piece of information, you can make the value of the cookie as long as you want (up to the 4000 character limit).
►Say you're looking to store a person's name, age, and h b
761
Java
Scr
BTE550 – Internet and Intranet Applications
phone number. ►You do something like this: var the_cookie = "username:binnur/age:32/phone:2853608";document.cookie= "my_cookie=" + escape(the_cookie);
ript
10
Complicated Cookie Reading
►I use a slash to separate property names and a colon to distinguish the property name from the property value.
►The slash and colon are arbitrary choices — they could be anything, like say, this:
var the_cookie="username:binnur&age:32&phone:2853608";
762
Java
Scr
BTE550 – Internet and Intranet Applications
document.cookie= "my_cookie="+escape(the_cookie);►The delimiters you choose are up to you. Just remember
what you used so you can decode the cookie later.
128
ript
10
function readTheCookie(the_info) {// load the cookie into a variable and unescape itvar the_cookie = document.cookie;var the_cookie = unescape(the_cookie);// separate the values from the cookie namevar broken_cookie = the_cookie.split("=");var the_values = broken_cookie[1];// break each name:value pair into an arrayvar separated_values = the_values.split("/");// loop through the list of name:values and load up the associate array
l ""
763
Java
Scr
BTE550 – Internet and Intranet Applications
var property_value = "";for (var loop = 0; loop < separated_values.length; loop++) {
property_value = separated_values[loop];var broken_info = property_value.split(":");var the_property = broken_info[0];var the_value = broken_info[1];the_info[the_property] = the_value;
}}
ript
10
Reading and Writing Multiple Cookies
►To save multiple cookies, just give each cookie a different name. If you're adding a new cookie, setting document.cookie doesn't delete cookies that are already there:
var the_cookie = "my_happy_cookie=happiness_and_joy";
764
Java
Scr
BTE550 – Internet and Intranet Applications
document.cookie = the_cookie;var another_cookie=
"my_other_cookie=more_joy_more_happiness";document.cookie = another_cookie;►You have access to both cookies.
ript
10
function readCookie(name) {if (document.cookie == '') { // there's no cookie, so go no furtherreturn false;} else {var firstChar, lastChar;var theBigCookie = document.cookie;firstChar = theBigCookie.indexOf(name);// find the start of 'name'if(firstChar != -1) {// if you found the cookiefirstChar += name.length + 1;// ki ' ' d ' '
765
Java
Scr
BTE550 – Internet and Intranet Applications
// skip 'name' and '='lastChar = theBigCookie.indexOf(';', firstChar);// Find the end of the value string (i.e. the next ';').if(lastChar == -1) lastChar = theBigCookie.length;return unescape(theBigCookie.substring(firstChar, lastChar));} else {
// If there was no cookie of that name, return false.return false;}
}}
ript
10
More About Cookies
►If you do want to save cookies on users' hard drives, you have to set an expiration date, which has to be in a special format called GMT. For example:
Mon, 27-Apr-1998 00:00:00 GMT►To set an expiration date to some distant time in the future
766
Java
Scr
BTE550 – Internet and Intranet Applications
var the_date = new Date("December 31, 2023");var the_cookie_date = the_date.toGMTString();
ript
10More About Cookies
►Here's how to build a cookie that will last until the end of the Mayan calendar: function setCookie() {
// get the informationvar the_name = prompt("What's your name?","");var the_date = new Date("December 31, 2023");
767
Java
Scr
BTE550 – Internet and Intranet Applications
var the_cookie_date = the_date.toGMTString();// build and save the cookievar the_cookie = "my_cookie=" + escape(the_name);the_cookie = the_cookie + ";expires=" + the_cookie_date;document.cookie = the_cookie;
}
Forms, JSP, and PHPForms, JSP, and PHP11
Copyleft © 2005, Binnur Kurt
129
P, P
HP
11
Content
► HTML Forms ► Form Elements► Submission Methods: GET, POST► Form Processing: Server Side Processing
– JSP
769
Form
s, JS
P
BTE550 – Internet and Intranet Applications
JSP– PHP
P, P
HP
11
Creating an HTML Form
770
Form
s, JS
P
BTE550 – Internet and Intranet Applications
P, P
HP
11
The FORM Tag
►The following is a partial structure of an HTML form:<form action='URL TO CONTROLLER' method='GET or POST'><!-- PUT FORM COMPONENT TAGS HERE --></form>►For example:
<ff ti ’ dd l d ’ th d ’POST’>
771
Form
s, JS
P
BTE550 – Internet and Intranet Applications
<formform action=’add_league.do’ method=’POST’>Year: [textfield tag]Season: [drop-down list tag]Title: [textfield tag][submit button tag]</formform>
►A single web page can contain many forms.
P, P
HP
11
Textfield Component
►In Netscape, a textfield component looks like this:
►The HTML content for this component is:16 <p>
772
Form
s, JS
P
BTE550 – Internet and Intranet Applications
16 <p>17 This form allows you to create a new soccer league.18 </p>1920 <form action=’add_league.do’ method=’POST’>21 Year: <input type=’text’ name=’year’ /> <br/><br/>
P, P
HP
11Drop-Down List Component
► In Netscape, a drop-down list component looks like this:
►The HTML content for this component is:
773
Form
s, JS
P
BTE550 – Internet and Intranet Applications
►The HTML content for this component is:22 Season: <select name=’season’>23 <option value=’UNKNOWN’>select...</option>24 <option value=’Spring’>Spring</option>25 <option value=’Summer’>Summer</option>26 <option value=’Fall’>Fall</option>27 <option value=’Winter’>Winter</option>28 </select> <br/><br/>
P, P
HP
11
Submit Button
►In Netscape, a submit button component might look like this:
►The HTML content for this component is:
774
Form
s, JS
P
BTE550 – Internet and Intranet Applications
p29 Title: <input type=’text’ name=’title’ /> <br/><br/>30 <input type=’submit’ value=’Add League’ />31 </form>
130
JSJSPP
775BTE550 – Internet and Intranet Applications
JSJSPP
P, P
HP
11
Objectives
►Describe JSP technology►Write JSP code using scripting elements►Write JSP code using the page directive►Write JSP code using standard tags
776
Form
s, JS
P
BTE550 – Internet and Intranet Applications
P, P
HP
11
JavaServer Pages Technology
►JavaServer Pages enable you to write standard HTMLpages containing tags that run powerful programs based on Java technology.
►The goal of JSP technology is to support separation ofpresentation and business logic:
777
Form
s, JS
P
BTE550 – Internet and Intranet Applications
►Web designers can design and update pages without learning the Java programming language.
►Programmers for Java platform can write code without dealing with web page design.
P, P
HP
11
The hello.jsp Page<%! private static final String DEFAULT_NAME = “World”; %><html><head><title>Hello JavaServer Page</title></head><%-- Determine the specified name (or use default) --%><%
778
Form
s, JS
P
BTE550 – Internet and Intranet Applications
String name = request.getParameter(“name”);if ( (name == null) || (name.length() == 0) ) {name = DEFAULT_NAME;}%>
<body bgcolor=’white’><b>Hello, <%= name %></b>
P, P
HP
11Steps of JSP Page Processing
779
Form
s, JS
P
BTE550 – Internet and Intranet Applications
P, P
HP
11
JSP Processing: Translation Step►The first time a JSP page is requested, Web container converts the JSP
file into a servlet that can respond to the HTTP request. ►Web container translates the JSP file into a Java source file that
contains a servlet class definition.
780
Form
s, JS
P
BTE550 – Internet and Intranet Applications
131
P, P
HP
11
JSP Processing: Compilation Step►Web container compiles the servlet source code into a Java
class file. ►This servlet class bytecode is then loaded into the Web
container’s JVM
781
Form
s, JS
P
BTE550 – Internet and Intranet Applications
P, P
HP
11
JSP Processing: Initialization Step►Web container creates an instance of the servlet class and
performs the initialization life cycle step by calling the special jspInit method.
782
Form
s, JS
P
BTE550 – Internet and Intranet Applications
P, P
HP
11
JSP Processing: Service Step►Finally, the Web container can call the _jspService method
for the converted JSP page so that it can respond to client HTTP requests.
783
Form
s, JS
P
BTE550 – Internet and Intranet Applications
P, P
HP
11
Developing and Deploying JSP Pages►Deploying JSP pages is as easy as deploying static pages.►JSP pages are placed in the same directory hierarchy as
HTML pages. ►In the development environment, JSP pages are in the web
directory.
784
Form
s, JS
P
BTE550 – Internet and Intranet Applications
►In the deployment environment, JSP pages are placed at the top-level directory of the Web application.
P, P
HP
11JSP Scripting Elements
►JSP scripting elements are embedded with the <% %> tags and are processed by the JSP engine during translation of the JSP page.
►There are five types of scripting elements:– Comments <%-- comment --%>
785
Form
s, JS
P
BTE550 – Internet and Intranet Applications
– Directive tag <%@ directive %>– Declaration tag <%! decl %>– Scriptlet tag <% code %>– Expression tag <%= expr %>
P, P
HP
11
Comments►HTML comments<!-- This is an HTML comment. It will show up in the response. -->► JSP page comments<%-- This is a JSP comment. It will only be seen in the JSP code.It will not show up in either the servlet code or the response.--%>► Java comments
786
Form
s, JS
P
BTE550 – Internet and Intranet Applications
► Java comments– Java comments can be embedded with scriptlet and declaration
tags.– These comments are included in the servlet source code during
the translation phase, but do not appear in the HTTP response. <%/* This is a Java comment. It will show up in the servlet code.It will not show up in the response. */%>
132
P, P
HP
11
Directive Tag
►A directive tag provides information that will affect the overall translation of the JSP page.
►The syntax for a directive tag is:<%@ DirectiveName [attr=”value”]* %>
►Three types of directives are currently specified in the JSP
787
Form
s, JS
P
BTE550 – Internet and Intranet Applications
yp y pspecification: page, include, and taglib.
►Here are a couple of examples:<%@ page session=”false” %><%@ include file=”incl/copyright.html” %>
P, P
HP
11
Declaration Tag►A declaration tag allows you to include members in the JSP servlet
class, either attributes or methods. ►The syntax for a declaration tag is:
<%! JavaClassDeclaration %>►Here are a couple of examples:<%! public static final String DEFAULT NAME = “World”; %>
788
Form
s, JS
P
BTE550 – Internet and Intranet Applications
<%! public static final String DEFAULT_NAME = World ; %><%! public String getName(HttpServletRequest request) {
return request.getParameter(“name”);}%><%! int counter = 0; %>
P, P
HP
11
Declaration Tag
►You can think of one JSP page as being equivalent to one servlet class.
►The declaration tags become declarations in the servlet class. You can create any type of declaration that is permissible in a regular Java technology class: instance
i bl i h d l ( i ) i bl
789
Form
s, JS
P
BTE550 – Internet and Intranet Applications
variables, instance methods, class (or static) variables, class methods, inner classes, and so on.
►Be careful with using instance and class variables due to concurrency issues.
►A JSP page is multithreaded like a servlet.
P, P
HP
11
Declaration Tag►You can use a declaration tag to override the jspInitjspInit and jspDestoryjspDestory
life cycle methods. ►The signature of these methods has no arguments and returns void. ►For example:<%!public void jspInit() {
790
Form
s, JS
P
BTE550 – Internet and Intranet Applications
public void jspInit() {/* initialization code here */}public void jspDestroy() {/* clean up code here */}%>
P, P
HP
11Scriptlet Tag
►A scriptlet tag allows the JSP page developer to include arbitrary Java technology code in the jspService method.
►The syntax for a declaration tag is:<% JavaCode %>
►Here are a couple of examples:<% int i = 0; %>
791
Form
s, JS
P
BTE550 – Internet and Intranet Applications
► In this example, the local variable i is declared with an initial value of 0.
<% if ( i > 10 ) { %>I is a big number.<% } else { %>I is a small number<% } %>
P, P
HP
11
Scriptlet Tag
<TABLE BORDER=’1’ CELLSPACING=’0’ CELLPADDING=’5’>
<TR><TH>number</TH><TH>squared</TH></TR><% for ( int i=0; i<10; i++ ) { %><TR><TD><%= i %></TD><TD><%= (i * i)
792
Form
s, JS
P
BTE550 – Internet and Intranet Applications
( )%></TD></TR>
<% } %></TABLE>
133
P, P
HP
11
Expression Tag
►An expression tag holds a Java language expression that is evaluated during an HTTP request.
►The result of the expression is included in the HTTP response stream.
►The syntax for a declaration tag is:
793
Form
s, JS
P
BTE550 – Internet and Intranet Applications
<%= JavaExpression %>
P, P
HP
11
Expression Tag
►<B>Ten is <%= (2 * 5) %></B>This example shows an arithmetic expression. When this is evaluated, the number 10 is the result. The string “<B>Ten is 10</B>” is sent back in the HTTP response stream.
►Thank you <I><%= name %></I> for registering for the
794
Form
s, JS
P
BTE550 – Internet and Intranet Applications
►Thank you, <I><% name %></I>, for registering for the soccer league.This example shows that you can access local variables declared in the JSP page. If the name variable holds a reference to a String object, then that string is sent back in the HTTP response stream.
►The current day and time is: <%= new java.util.Date() %>
P, P
HP
11
Implicit Variables
►The Web container gives the JSP technology developer access to the following variables in scriptlet and expression tags.
►These variables represent commonly used objects for servlets that JSP developers might need to use.
795
Form
s, JS
P
BTE550 – Internet and Intranet Applications
►For example, you can retrieve HTML form parameter data by using the request variable, which represents the HttpServletRequest object.
P, P
HP
11
Implicit Variables
796
Form
s, JS
P
BTE550 – Internet and Intranet Applications
P, P
HP
11The page Directive
►The page directive is used to modify the overall translation of the JSP page.
►For example, you can declare that the servlet code generated from a JSP page requires the use of the Date class:
%@ i ”j il D ” %
797
Form
s, JS
P
BTE550 – Internet and Intranet Applications
<%@ page import=”java.util.Date” %>►The import attribute defines the set of classes and
packages that must be imported in the servlet class definition. The value of this attribute is a comma-delimited list of fully-qualified class names or packages:import=”java.sql.Date,java.util.*,java.text.*”
PHPPHP
798BTE550 – Internet and Intranet Applications
PHPPHP
134
P, P
HP
11
What is PHP?
► PHP stands for PHP: Hypertext Preprocessor ► PHP is a server-side scripting language, like ASP ► PHP scripts are executed on the server ► PHP supports many databases (MySQL, Informix,
Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.)
799
Form
s, JS
P
BTE550 – Internet and Intranet Applications
, y , , g Q , , )► PHP is an open source software (OSS) ► PHP is free to download and use
P, P
HP
11
► PHP (PHP: Hypertext Preprocessor) was created by Rasmus Lerdorf in 1994. It was initially developed for HTTP usage logging and server-side form generation in Unix.
► PHP 2 (1995) transformed the language into a Server-side b dd d i ti l Add d d t b t fil
Brief History of PHP
800
Form
s, JS
P
BTE550 – Internet and Intranet Applications
embedded scripting language. Added database support, file uploads, variables, arrays, recursive functions, conditionals, iteration, regular expressions, etc.
► PHP 3 (1998) added support for ODBC data sources, multiple platform support, email protocols (SNMP,IMAP), and new parser written by Zeev Suraski and Andi Gutmans
P, P
HP
11
Brief History of PHP►PHP 4 (2000) became an independent component of the
web server for added efficiency. The parser was renamed the Zend Engine. Many security features were added.
►PHP 5 (2004) adds Zend Engine II with object oriented programming, robust XML support using the libxml2 library, SOAP extension for interoperability with Web Services SQLite has been bundled with PHP
801
Form
s, JS
P
BTE550 – Internet and Intranet Applications
Services, SQLite has been bundled with PHP
P, P
HP
11
►As of August 2004, PHP is used on 16,946,328 Domains, 1,348,793 IP Addresses http://www.php.net/usage.php
►This is roughly 32% of all domains on the web.
Brief History of PHP
802
Form
s, JS
P
BTE550 – Internet and Intranet Applications
P, P
HP
11What is a PHP File?
►PHP files may contain text, HTML tags and scripts ►PHP files are returned to the browser as plain HTML►PHP files have a file extension of ".php", ".php3", or
".phtml"
803
Form
s, JS
P
BTE550 – Internet and Intranet Applications
P, P
HP
11
What is MySQL?
►MySQL is a small database server ►MySQL is ideal for small and medium applications ►MySQL supports standard SQL ►MySQL compiles on a number of platforms ►MySQL is free to download and use
804
Form
s, JS
P
BTE550 – Internet and Intranet Applications
►MySQL is free to download and use
135
P, P
HP
11
PHP + MySQL
►PHP combined with MySQL are cross-platform (means that you can develop in Windows and serve on a Unix platform)
805
Form
s, JS
P
BTE550 – Internet and Intranet Applications
P, P
HP
11
Why PHP?
►PHP runs on different platforms (Windows, Linux, Unix, etc.)
►PHP is compatible with almost all servers used today (Apache, IIS, etc.)
►PHP is FREE to download from the official PHP resource:
806
Form
s, JS
P
BTE550 – Internet and Intranet Applications
www.php.net ►PHP is easy to learn and runs efficiently on the server side
P, P
HP
11
Where to Start?
►Install an Apache server on a Windows or Linux machine ►Install PHP on a Windows or Linux machine ►Install MySQL on a Windows or Linux machine
807
Form
s, JS
P
BTE550 – Internet and Intranet Applications
P, P
HP
11
PHP
►PHP is another HUGE language– It is a fully functional language– It has an incredible amount of built-in features
• Form processing• Output / generate various types of data (not just text)
808
Form
s, JS
P
BTE550 – Internet and Intranet Applications
Output / generate various types of data (not just text)• Database access
– Allows for various DBs and DB formats• Object-oriented features
►We will look at only a TINY part of PHP
P, P
HP
11PHP Syntax
►You cannot view the PHP source code by selecting "View source" in the browser - you will only see the output from the PHP file, which is plain HTML.
►This is because the scripts are executed on the server before the result is sent back to the browser.
809
Form
s, JS
P
BTE550 – Internet and Intranet Applications
P, P
HP
11
Basic PHP Syntax►A PHP file normally contains HTML tags, just like an HTML file,
and some PHP scripting code.►A simple PHP script which sends the text "Hello World" to the
browser:<html><body><?php echo "Hello World"; ?></body></html>
810
Form
s, JS
P
BTE550 – Internet and Intranet Applications
</html>►A PHP scripting block always starts with <?php and ends with ?>. ►A PHP scripting block can be placed anywhere in the document.►Each code line in PHP must end with a semicolon. The semicolon is
a separator and is used to distinguish one set of instructions from another.
►There are two basic statements to output text with PHP: echo and print. In the example above we have used the echo statement to output the text "Hello World".
136
P, P
HP
11
Scalar Types
►Simple (scalar) types– boolean
• TRUE or FALSE– integer
• Platform dependent – size of one machine word
811
Form
s, JS
P
BTE550 – Internet and Intranet Applications
Platform dependent size of one machine word– 32 bits on most machines
– float• Double precision• We could call it a double, but since we don't declare
variables float works
P, P
HP
11
Scalar Types
– string• We have single-quoted and double-quoted string literals
– Double quoted allows for more escape sequences and allows variables to be interpolated into the string
– What does that mean?R th th t tti th f th i bl
812
Form
s, JS
P
BTE550 – Internet and Intranet Applications
» Rather than outputting the name of the variable, we output its contents, even within a quote
» We'll see an example once we define variables» Note that this is NOT done in Java
• Length can be arbitrary– Grows as necessary
P, P
HP
11
Scalar Types
• Easy conversion back and forth between strings and numbers
– In Web applications these are mixed a lot, so PHP will cast between the types when appropriate
813
Form
s, JS
P
BTE550 – Internet and Intranet Applications
• Can be indexed – the preferred way is using curly braces
$mystring = "hello"; echo $mystring{1};– Output here is 'e'
P, P
HP
11
Variables in PHP
►PHP variables– All PHP variables begin with the $
• Variable names can begin with an underscore• Otherwise rules are similar to most other languages
– Variables are dynamically typed
814
Form
s, JS
P
BTE550 – Internet and Intranet Applications
• No type declarations– Variables are BOUND or UNBOUND
» Unbound variables have the value NULL– Type information is obtained from the current bound
value
P, P
HP
11Variables in PHP
►Below, the PHP script assigns the string "Hello World" to a variable called $txt:<html>
<body><?php
$txt="Hello World";
815
Form
s, JS
P
BTE550 – Internet and Intranet Applications
echo $txt;
?></body>
</html>
P, P
HP
11
Variables in PHP
►PHP programs have access to a large number of predefined variables– These variables allow the script access to server information,
form parameters, environment information, etc.– Ex:
$ SERVER is an arra containing m ch information abo t
816
Form
s, JS
P
BTE550 – Internet and Intranet Applications
• $_SERVER is an array containing much information about the server
• $_POST is an array containing variables passed to a script via HTTP POST
• $_ENV is an array containing environment information
137
P, P
HP
11
Variables in PHP
►To concatenate two or more variables together, use the dot (.) operator:<html><body><?php$txt1="Hello World";$ 2 123
817
Form
s, JS
P
BTE550 – Internet and Intranet Applications
$txt2="1234";echo $txt1 . " " . $txt2 ;?></body></html>
►The output of the script above will be: "Hello World 1234".
P, P
HP
11
Comments in PHP
►In PHP, we use // to make a single-line comment or /* and */ to make a large comment block.<html>
<body><?php//This is a comment/*
This is
818
Form
s, JS
P
BTE550 – Internet and Intranet Applications
a comment
block
*/?></body>
</html>
P, P
HP
11
PHP Operators – Arithmetic OperatorsOperatorOperator DescriptionDescription ExampleExample ResultResult
++ Addition x=2x+2
4
-- Subtraction x=25-x
3
** Multiplication x=4x*5
20
819
Form
s, JS
P
BTE550 – Internet and Intranet Applications
// Division 15/55/2
32.5
%% Modulus (division remainder) 5%210%2
10
++++ Increment x=5x++
x=6
---- Decrement x=5x--
x=4
P, P
HP
11
PHP Operators – Assignment Operators
OperatorOperator ExampleExample Is The Same AsIs The Same As= x=y x=y
+= x+=y x=x+y-= x-=y x=x-y
820
Form
s, JS
P
BTE550 – Internet and Intranet Applications
x y x x y*= x*=y x=x*y/= x/=y x=x/y
%= x%=y x=x%y
P, P
HP
11PHP Operators – Comparison Operators
Operator Description Example== is equal to 5==8 returns false!= is not equal 5!=8 returns true
821
Form
s, JS
P
BTE550 – Internet and Intranet Applications
> is greater than 5>8 returns false< is less than 5<8 returns true
>= is greater than or equal to 5>=8 returns false<= is less than or equal to 5<=8 returns true
P, P
HP
11
PHP Operators – Logical Operators
OperatorOperator DescriptionDescription ExampleExample
&& andx=6y=3 (x < 10 && y > 1) returns truex=6
822
Form
s, JS
P
BTE550 – Internet and Intranet Applications
|| orx=6y=3 (x==5 || y==5) returns false
! notx=6y=3 !(x==y) returns true
138
P, P
HP
11
PHP Operators
►Similar to those in C++ / Java / Perl►Be careful with a few operators
– / in PHP is always floating point division• To get integer division, we must cast to int$x = 15;
823
Form
s, JS
P
BTE550 – Internet and Intranet Applications
$x 15;$y = 6;echo ($x/$y), (int) ($x/$y), "<BR />";
– Output is 2.5 2– Inequality operators do not compare strings
• Will cast strings into numbers before comparing
P, P
HP
11
PHP Operators– To compare strings, use the C-like string comparison function,
strcmp()►Even the == operator has odd behavior in PHP when operands are
mixed– Ex: Consider comparing a string and an int
• Any non-numeric PHP string value will “equal” 0
824
Form
s, JS
P
BTE550 – Internet and Intranet Applications
• Any numeric PHP string will equal the number it represents– Ex: Consider comparing a string and a boolean
• Regular PHP string value will “equal” true• “0” string will equal false
– This behavior is consistent but confusing to the programmer and is probably best avoided
P, P
HP
11
PHP Operators
– An additional equality operator and inequality operator are defined=== returns true only if the variables have the same
value and are of the same type– If casting occurred to compare, the result is false
825
Form
s, JS
P
BTE550 – Internet and Intranet Applications
!== returns true if the operands differ in value or in type
►Precedence and associativity are similar to C++/Java
P, P
HP
11
Conditional Statements
► Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.
► In PHP we have two conditional statements:1. if (...else) statement - use this statement if you want
826
Form
s, JS
P
BTE550 – Internet and Intranet Applications
to execute a set of code when a condition is true (and another if the condition is not true)
2. switch statement - use this statement if you want to select one of many sets of lines to execute
P, P
HP
11if Statement
►If you want to execute some code if a condition is true and another code if a condition is false, use the if....else statement.
►Syntaxif (condition)
827
Form
s, JS
P
BTE550 – Internet and Intranet Applications
code to be executed if condition is true;
else
code to be executed if condition is false;
P, P
HP
11
Example►The following example will output "Have a nice weekend!" if the
current day is Friday, otherwise it will output "Have a nice day!":<html>
<body><?php$d=date("D");if ($d=="Fri")
828
Form
s, JS
P
BTE550 – Internet and Intranet Applications
if ($d== Fri )
echo "Have a nice weekend!"; elseecho "Have a nice day!"; ?></body>
</html>
139
P, P
HP
11
if Statement►If more than one line should be executed when a condition
is true, the lines should be enclosed within curly braces:<html><body><?php$x=10;if ($x==10)
829
Form
s, JS
P
BTE550 – Internet and Intranet Applications
if ($x==10){echo "Hello<br />"; echo "Good morning<br />";}?></body></html>
P, P
HP
11
switch Statement► If you want to select one of many blocks of code to be executed, use
the Switch statement.switch (expression) {case label1:code to be executed if expression = label1;break;
case label2:
830
Form
s, JS
P
BTE550 – Internet and Intranet Applications
case label2:code to be executed if expression = label2;break;
default:code to be executedif expression is different from both label1 and label2;
}
P, P
HP
11
Example<html><body><?phpswitchswitch ($x){casecase 11:echo "Number 1";breakbreak;
casecase 22:echo "Number 2";
►This is how it works: First we have a single expression (most often a variable), that is evaluated once. The value of the expression is then compared with the values for each case in the structure. ►If there is a match, the block of code associated with that case is executed. ►Use break to prevent the code from running into th t t ti ll
831
Form
s, JS
P
BTE550 – Internet and Intranet Applications
echo Number 2 ;breakbreak;
casecase 33:echo "Number 3";breakbreak;
defaultdefault:echo "No number between 1 and 3";
}?></body></html>
the next case automatically. ►The default statement is used if none of the cases are true.
P, P
HP
11
Looping► Very often when you write code, you want the same block of code
to run a number of times. You can use looping statements in your code to perform this.
► In PHP we have the following looping statements:1. whilewhile - loops through a block of code if and as long
as a specified condition is true 2 d hild hil l th h bl k f d d
832
Form
s, JS
P
BTE550 – Internet and Intranet Applications
2. do...whiledo...while - loops through a block of code once, and then repeats the loop as long as a special condition is true
3. forfor - loops through a block of code a specified number of times
4. foreachforeach - loops through a block of code for each element in an array
P, P
HP
11while Statement
►The while statement will execute a block of code if and as long as a condition is true.
►Syntaxwhile (condition)
code to be executed;
833
Form
s, JS
P
BTE550 – Internet and Intranet Applications
P, P
HP
11
Example►The following example demonstrates a loop that will continue to run
as long as the variable ii is less than, or equal to 55. ►► ii will increase by 1 each time the loop runs:
<html><body><?php
$ii=1;
834
Form
s, JS
P
BTE550 – Internet and Intranet Applications
while($ii<=5) {echo "The number is " . $ii . "<br />";$i++;}
?></body></html>
140
P, P
HP
11
dodo...whilewhile Statement
►The do...while statement will execute a block of code at least once - it then will repeat the loop as long as a condition is true.
►Syntaxdo
835
Form
s, JS
P
BTE550 – Internet and Intranet Applications
{
code to be executed;
}
while (condition);
P, P
HP
11
Example►The following example will increment the value of i at least once,
and it will continue incrementing the variable i while it has a value of less than 5:
<html><body><?php $i=0;
836
Form
s, JS
P
BTE550 – Internet and Intranet Applications
do{$i++;echo "The number is " . $i . "<br />";}while ($i<5);?></body></html>
P, P
HP
11
forfor Statement
►The for statement is used when you know how many times you want to execute a statement or a list of statements.
►Syntax
for (initialization; condition; increment)
837
Form
s, JS
P
BTE550 – Internet and Intranet Applications
for (initialization; condition; increment){
code to be executed;}
P, P
HP
11
forfor Statement
►The for statement has three parameters. ►The first parameter is for initializing variables,►The second parameter holds the condition, ►The third parameter contains any increments required to
implement the loop.
838
Form
s, JS
P
BTE550 – Internet and Intranet Applications
p p►If more than one variable is included in either the
initialization or the increment section, then they should be separated by commas.
►The condition must evaluate to true or false.
P, P
HP
11Example
►The following example prints the text "Hello World!" five times:<html>
<body><?php
for ($i=1; $i<=5; $i++)
839
Form
s, JS
P
BTE550 – Internet and Intranet Applications
{
echo "Hello World!<br />";
}
?></body>
</html>
P, P
HP
11
foreachforeach Statement
►Loops over the array given by the parameter. On each loop, the value of the current element is assigned to $value and the array pointer is advanced by one - so on the next loop, you'll be looking at the next element.
►Syntax
840
Form
s, JS
P
BTE550 – Internet and Intranet Applications
foreach (array as value)
{
code to be executed;
}
141
P, P
HP
11
<?$array[0] = 1;$array[5] = "This is element 5";$array[200] = 300;$array['one'] = "One";
$b = $array;$b does not overwrite $array$b does not overwrite $array
PHP Arrays
841
Form
s, JS
P
BTE550 – Internet and Intranet Applications
$b = $array;$b[5] = 'Only in b';
foreach ($array as $elem){
echo "Element is $elem<br>";}?>
No numerical indexNo numerical index
P, P
HP
11
PHP Arrays
►Arrays in PHP are quite versatile– We can use them as we use traditional arrays, indexing
on integer values– We can use them as hashes, associating a key with a
value in an arbitrary index of the array
842
Form
s, JS
P
BTE550 – Internet and Intranet Applications
– In either case we access the data via subscripts• In the first case the subscript is the integer index• In the second case the subscript is the key value
– We can even mix the two if we'd like
P, P
HP
11
PHP Arrays
►PHP Arrays can be created in a number of ways– Explicitly using the array() construct– Implicitly by indexing a variable
• Since PHP has dynamic typing, you cannot identify a variable as an array except by assigning an actual array to it
• If the variable is already set to a scalar indexing will have
843
Form
s, JS
P
BTE550 – Internet and Intranet Applications
If the variable is already set to a scalar, indexing will have undesirable results – indexes the string!
• However, we can unset() it and then index it– We can test a variable to see if it is set (isset() and if it is
an array (is_array()) among other things– Size will increase dynamically as needed
P, P
HP
11
PHP Arrays
►Accessing Arrays – can be done in many ways– We can use direct access to obtain a desired item
• Good if we are using the array as a hash table or if we need direct access for some other reason
– For sequential access, the foreachforeach loop was designed to work with arrays
844
Form
s, JS
P
BTE550 – Internet and Intranet Applications
with arrays• Iterates through the items in two different ways
foreach ($arrayvar as $key => $value)
» Gives both the key and value at each iterationforeach ($arrayvar as $value)
» Gives just the next value at each iteration
P, P
HP
11PHP Arrays
• Be careful – in both cases data is iterated by the order it has been generated, not by index order
• Items accessed in the arrays using foreach are copies of the data, not references to the data
– So changing the loop control variable in the foreach loop in PHP does NOT change the data in the original array
845
Form
s, JS
P
BTE550 – Internet and Intranet Applications
g g y– To do this we must change the value using indexing
– A regular for loop can also be used, but due to the non-sequential requirement for keys, this does not often give the best results
P, P
HP
11
PHP Arrays
• The data in the array is not contiguous, so incrementing a counter for the next access will not work correctly unless the array index values are used in the "traditional" way
– We can also use other iterators such as next and each to access the array elements
• next gives us the next value with each call
846
Form
s, JS
P
BTE550 – Internet and Intranet Applications
g– It moves to the next item, then returns it, so we must get the
first item with a separate call (ex: use current())$curr = current($a1);while ($curr):
echo "\$curr is $curr <BR />\n";$curr = next($a1);
endwhile;
142
P, P
HP
11
PHP Arrays– each returns an array of two items:
• A key field for the current key• A value field for the current value• It returns the next (key,value) pair, then moves, so the first
item is no longer a special case
while ($curr = each($a1)):
847
Form
s, JS
P
BTE550 – Internet and Intranet Applications
while ($curr = each($a1)):$k = $curr["key"];$v = $curr["value"]; echo "key is $k and value is $v <BR />\n";
endwhile;
• This function is preferable to next() if it is possible that FALSE or an empty string or 0 could be in the array
– The loop on the previous slide will stop for any of those values
P, P
HP
11
PHP Arrays– Both of these iteration functions operate similar to the IteratorIterator
interface in Java• Iterate through the data in the collection without requiring us
to know how that data is actually organized• Allow multiple iterations to proceed concurrently on the same
underlying collection
848
Form
s, JS
P
BTE550 – Internet and Intranet Applications
y g• However, unlike in Java, if the array is changed during the
iteration process, the current iteration continues– Since new items are always added at the "end" of the
array adding a new item during an iteration does not cause any data validity problems
P, P
HP
11
Example
►The following example demonstrates a loop that will print the values of the given array:<html><body><?php$arr=array("one", "two", "three");
849
Form
s, JS
P
BTE550 – Internet and Intranet Applications
foreach ($arr as $value){echo "Value: " . $value . "<br />";}?></body></html>
P, P
HP
11
PHP Control Structures
►Again, these are similar to those in C++ / Java– if, while, do, for, switch are virtually identical to those in C++
and Java– PHP allows for an alternative syntax to designate a block in the
if, while, for and switch statements
Open the block ith : rather than {
850
Form
s, JS
P
BTE550 – Internet and Intranet Applications
• Open the block with : rather than {• Close the block with endif, endwhile, endfor, endswitch
– Advantage to this syntax is readability– Now instead of seeing a number of close braces, we see
different keywords to close different types of control structures
P, P
HP
11Form Validation
<form method="post" action="sendmail.php">Email: <input type="text" name="email" /><br />Message:<br /><textarea name="message" rows="15" cols="40"></textarea><br />
851
Form
s, JS
P
BTE550 – Internet and Intranet Applications
</textarea><br /><input type="submit" /></form>
P, P
HP
11
<?$email = $_REQUEST['email'] ;$message = $_REQUEST['message'] ;
if (!isset($_REQUEST['email'])) {header( "Location: form1.html" );
}elseif (empty($email) || empty($message)) {?>
<html>
852
Form
s, JS
P
BTE550 – Internet and Intranet Applications
<html><head><title>Error</title></head><body><h1>Error</h1><p>Oops, it appears you forgot to enter either youremail address or your message. Please press the BACKbutton in your browser and try again.</p></body></html>
143
P, P
HP
11
Form Validation
<?}else {
mail( "kurt@ce.itu.edu.tr", "Feedback Form Results",$message "From: $email" );
853
Form
s, JS
P
BTE550 – Internet and Intranet Applications
$message, From: $email );header( "Location: form1.html" );
}?>
P, P
HP
11
Preventing the Browser From Caching
[...preceding code...]
elseif (empty($email) || empty($message)) {
header( "Expires: Mon, 20 Dec 1998 01:00:00 GMT" );
854
Form
s, JS
P
BTE550 – Internet and Intranet Applications
header( "Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT" );header( "Cache-Control: no-cache, must-revalidate" );header( "Pragma: no-cache" );
?>
Recommended