internet & grading schemebkurt/courses/bte550/bte550.lecture.notes.pdf · bte550 – internet...

1

Internet & Intranet Applications

Binnur Kurt, [email protected]

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


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


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


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


►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


Client A Client B

ndam

enta

ls1

Defining Components of the NetworkHome Office Mobile Users

Internet

14

Net

wor

king

Fun


Branch Office Main Office

Internet

ndam

enta

ls1

Computer Networks

BranchOffice

15

Net

wor

king

Fun


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


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


►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


p

Network

Data Link

Physical

3

2

1

4

ndam

enta

ls1


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


►Formats data►Structures data►Negotiates data transfer syntax

for application layer

Network

Data Link

Physical

3

2

1

ndam

enta

ls1


Interhost Communication►Establishes, manages, and

Network Process to Applications

Data Representation

Application

Presentation

Session

Transport

7

6

5

4

20

Net

wor

king

Fun


terminates sessions between applicationsNetwork

Data Link

Physical

3

2

1

ndam

enta

ls1


End-to-End Connections

Interhost Communication


Data Representation

Application

Presentation

Session

Transport

7

6

5

4

21

Net

wor

king

Fun


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



Data Representation



Application

Presentation

Session

Transport

7

6

5

4

22

Net

wor

king

Fun


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



Data Representation



Application

Presentation

Session

Transport

7

6

5

4

23

Net

wor

king

Fun


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



Data Representation



Application

Presentation

Session

Transport

7

6

5

4

24

Net

wor

king

Fun


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


HDR = header

Bits

User DataUser Data

User DataUser Data

User DataUser Data

User DataUser Data


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


L7HDR

L6

26

Net

wor

king

Fun


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


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


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


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


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


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


►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


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


ndam

enta

ls1

Repeater

34

Net

wor

king

Fun


ndam

enta

ls1

Hub (Multiport Repeater)

35

Net

wor

king

Fun


ndam

enta

ls1

Network Interface Card

36

Net

wor

king

Fun


7

ndam

enta

ls1

Bridge

37

Net

wor

king

Fun


Segment 2Segment 1CorporateInternet

ndam

enta

ls1

Switch

38

Net

wor

king

Fun


ndam

enta

ls1

FirewallsCalifornia

Massachusetts

Allow Access to HQ

No Access to HQ

AAAServer

CorporateHeadquarters

39

Net

wor

king

Fun


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


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


►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


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


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


Bridge

Repeater

WorkgroupSwitch

E

G

I

H

J

A CB

ndam

enta

ls1

Bus Topology

45

Net

wor

king

Fun


ndam

enta

ls1

Star Topology

46

Net

wor

king

Fun


ndam

enta

ls1

Extended-Star Topology

47

Net

wor

king

Fun


ndam

enta

ls1

Ring Topology

48

Net

wor

king

Fun


9

ndam

enta

ls1

Dual-Ring Topology

49

Net

wor

king

Fun


Two links connected to thesame networking device

ndam

enta

ls1

Full-Mesh Topology

50

Net

wor

king

Fun


ndam

enta

ls1

Partial-Mesh Topology

51

Net

wor

king

Fun


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


►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


►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


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


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


Sequencing

Acknowledgments

Flow Control

Packet Recovery

ndam

enta

ls1

UDP Characteristics

Minimal ServiceMinimal Service

UnreliableUnreliable

57

Net

wor

king

Fun


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


*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


►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


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


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


►*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


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


*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


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


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


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


– 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


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


The Internet is a Network of Networks

App

. Tec

h.2

Client-Server Architecture

71

Int.

To W

eb A


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


►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


►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


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


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


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


►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


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


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


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


App

. Tec

h.2

Execution of CGI Programs

82

Int.

To W

eb A


Overview of XMLOverview of XML3


ML

3

Content

►Define XML►Compare and contrast HTML and XML►Identify characteristics of XML documents

84

XM


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


►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


– 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> [email protected] </email><bsc level=“final”>yes</bsc>

87

XM


<li>[email protected]</li><li>yes - final </li>

</ul><ul><li> 9806791 </li><li>Adrian</li><li>[email protected]</li><li>no</li>

</ul></body></html>

</student>

<student><id> 9806791 </id><name>Adrian</name><email>[email protected]</email><bsc>no</bsc>

</student>

</student_list>

ML

3

<html><body><h2>Student List</h2>

<ul><li> 9906789 </li><li>Adam</li><li>[email protected]</li>

What is “yes”?

Is this the student ID? or UCAS number?

HTML Document (Good for Formatting)

88

XM


@<li>yes - final </li>

</ul><ul><li> 9806791 </li><li>Adrian</li><li>[email protected]</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>[email protected]</email><bsc level=“final”>yes</bsc>

/

• Data is self-describing• Custom tags describe content

Only data

XML Document (Good for Describing Data)

89

XM


</student>

<student><id> 9806791 </id><name>Adrian</name><email>[email protected]</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


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>[email protected]</email></employee>

</employees>

16

ML

3

Service Driven Approach

client

91

XM


ML

3

XML: The Missing Link For Web Applications

Portablecode

Portabledata

92

XM


Ubiquitouscommunication

ML

3

XML

►Portable data►Works anywhere►Lingua franca of the Internet►Multiple vendors►Open development process:

93

XM


►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


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


Useful for Machine to Machine data exchange– Business-to-Business communication an excellent

example

ML

3

POP - MOM

Presentation Oriented Publishing (POP)

96

XM


Message Oriented Middleware (MOM)

17

ML

3

Standardization Activities

►XML Standards– Through Standard organizations– W3C, IETF, OASIS, UN/CEFACT

97

XM


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


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


►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


►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


<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


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


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


►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


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


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


( y g g )– XPath (=XSLT∩ XPointer), XLink– XQL (XML Query Language)– eXcelon

ML

3

XML Family of Standards

108

XM


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


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


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


ML

3XML Characteristics

►Elements►►TextText

<PurchaseOrder><description>BatteryBattery</description>

113

XM


<quantity>99</quantity>

<price>6060</price>

ML

3

XML Characteristics

►Elements►Text►►AttributesAttributes

<ShoeOrder id="4040458"id="4040458">

114

XM


<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


y<publisher>Addison-Wesley</publisher>

</book></order>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


– 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


►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


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


<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


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


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


<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


<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


►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


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


– <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


<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


►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


►►>>– 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


– Hexadecimals are preceded by “&#x”– All character references end with a semicolon

►Example:– &#169 or &#xA9 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


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


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.<!>

133

XM


►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


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


$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:

►C h i id k

136

XM


►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


►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


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


<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


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


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


<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


<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


<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


<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


<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


<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


<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


<Name>Binnur Kurt

</Name><Address/></root>

ML

3

XML Quiz 2

►Solution:No error

150

XM


26

ML

3

XML Quiz 3

►Find Errors:<root><isLower>

23 < 46</isLower>

151

XM


</isLower><Name>

Willey & Sons</name></root>

ML

3

XML Quiz 3

►Solution:<root><isLower>

23 < 46</isLower>

152

XM


</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


card.xml

XML Using DTDsXML Using DTDs4


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


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


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


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


<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


<!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


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


►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


<!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


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


<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


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


action (buy | sell) #REQUIRED ><!ELEMENT symbol (#PCDATA)><!ELEMENT quantity (#PCDATA)> ]><trade account=“1234567” action=“steal”>


</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


action (buy | sell) #REQUIRED ><!ELEMENT symbol (#PCDATA)><!ELEMENT quantity (#PCDATA)> ]><trade account=“1234567” action=“sell”>


</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


<!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


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


<!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


<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


<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


<!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


<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


!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


<!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


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


►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


<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


#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


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


►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


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


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


– 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


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


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


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


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


► 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


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


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


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


– 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


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


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


<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


►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


<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


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


<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


<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


ML

5

Content

►Creating Basic Documents►Use HTML to structure a basic Web page by manipulating

text and graphics

204

HTM


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


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


– 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


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


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


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


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


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


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


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


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


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


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


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


►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


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


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


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


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


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


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


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


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


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

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


ML

5

Information

►For additional documentation on tags used in HTMLhttp://werbach.com/barebones/barebones.html

230

HTM


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


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


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


►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


– 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


►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


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


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


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


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


►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


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


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


►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




►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


<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


<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


<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


►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


►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


& 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


©© 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


<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


<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


►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


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


– 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


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


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


//</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


//</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


►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>


</tr>

262

HTM


</tr>

<tr>



</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


<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


<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


,</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


<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


<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


<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


<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


<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


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


– 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


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


– 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


– where attributes are the attributes that control how the form is processed and elements are elements places within the form.

ML

5


►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


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”>


277

HTM


<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


<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


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


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


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


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


►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


<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


– 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


ML

5Making Multiple Selections

►Add the multiple attribute to the select element to create multiple selections

<select multiple=“multiple”>… </select>

287

HTM


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


<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


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


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


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


– 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


– 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


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


►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


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


</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


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


<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


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


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


<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


►►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


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


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


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


►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


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


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


►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


rgb(255,0,0)

XHTMLXHTML6


53

ML

6

Content

►Introduction to XHTML►Why XHTML►XHTML vs HTML►XHTML Syntax►XHTML DTD


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


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.


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.


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>


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


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.


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


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:


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>


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>


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.


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>


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:


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>


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 />.


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


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%">


XH

TM

56

ML

6

Attribute Values Must Be Quoted

►This is wrong:<table width=100%100%>

►This is correct:<table width=""100%"">


XH

TMM

L6

Attribute Minimization Is Forbidden►This is wrong:

<input checkedchecked><input readonly><input disabled><option selected><frame noresize>


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"


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:


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:


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


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


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>


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>


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>


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.


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


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.


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


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.


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


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.


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:


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.


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


XH

TM exceptions).

ML

6

Core Attributes

►Not valid in base, head, html, meta, param, script, style, and title elements.

AttributeAttribute ValueValue DescriptionDescription


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


XH

TM

dir ltr | rtl Sets the text direction lang language_code Sets the language code

ML

6Keyboard Attributes


accesskey character Sets a keyboard shortcut to accessan element

tabindex number Sets the tab order of an element


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


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


onload script Script to be run when a document loads


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


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.



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


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


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


XH

TM

d. EXtra Hyperlinks and Text Markup Language

61

ML

6

Question # 2

► XHTML is a Web standarda. Trueb. False


XH

TMM

L6

Question # 3

► XML and HTML will be replaced by XHTMLa. Falseb. True


XH

TMM

L6

Question # 4

► HTML will be replaced by XHTMLa. Falseb. True


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>


XH

TM

d. <p></p>

ML

6Question # 6

► What is a correct XHTML tag for a line break?a. <br>b. <br />c. <break/>


XH

TMM

L6

Question # 7

► What is the correct XHTML for an attribute and its value?

a. WIDTH="80"b. width=80c. WIDTH=80


XH

TM d. width="80"

62

ML

6

Question # 8

► All elements in XHTML must be closeda. Trueb. False


XH

TMM

L6

Question # 9► Is this correct XHTML?

<ul><li>Coffee</li><li>Tea<ul><li>Black tea</li>


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


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


XH

TM

yp , , , y

ML

6Question # 12

► XHTML documents must be "well-formed"a. Trueb. False


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>


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>


XH

TM

g g

ML

6

Question # 15

► Which attribute replaces the name attribute?a. Noneb. The src attributec. The id attribute


XH

TMM

L6

Question # 16

► Is attribute minimization allowed in XHTML?a. Yesb. No


XH

TM

ML

6

Question # 17

► What are the different DTDs in XHTML?a. Strict, Transitional, Framesetb. Strict, Transitional, Loosec. Strict, Transitional, Loose, Frameset


XH

TMM

L6

Question # 18

► Do all XHTML documents require a doctype?a. Yesb. No


XH

TMM

L6

Question # 19

► What is the most common XHTML DTD?a. Looseb. Normalc. Framesetd Transitional


XH

TM

d. Transitional

64

ML

6

Question # 20

► All XHTML tags and attributes must be in lower casea. Falseb. True


XH

TM

XSLTXSLT7


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


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


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


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


(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


LT7

XSLT in POP (Con’t)

386

XSL

T


LT7

XSLT in MOM

►Important for eCommerce, B2B/EDI, and dynamic content generation– Different content model– Different structural relationship– Different vocabularies

387

XSL

T


LT7

XSLT in MOM (Con’t)

388

XSL

T


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


►Transforming XML document into– Another XML document

• XML• XHTML• WML

– HTML document

LT7

XSLT Data Transformation

390

XSL

T


66

LT7

XSLT Operational Model

391

XSL

T


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


►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


►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


– 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


()() 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


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


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


</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


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


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


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


<?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


– 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


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">



</person>

405

XSL

T


</person><person born="1918" died="1988">



</person>

</people></people>

LT7

Result

►<?xml version="1.0" encoding="UTF-8"?>

406

XSL

T


LT7



xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match=”people"><xsl:template match=”people">

Hello World!Hello World!

407

XSL

T


Hello World!Hello World!</xsl:template></xsl:template>

</xsl:stylesheet>

LT7

Result

<?xml version="1.0" encoding="UTF-8"?>Hello World!

408

XSL

T


69

LT7



xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="person"><xsl:template match="person">

A Person

409

XSL

T


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">



<</personperson>

410

XSL

T


<</personperson><<personperson born="1918" died="1988">



<</personperson></people></people>

LT7

Result

<?xml version=“1.0” encoding=“utf-8”?>A PersonA Person

►Whitespace outside of person element preserved

411

XSL

T


►Whitespace outside of person element preserved►person element is replaced by contents of template

LT7



xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="person"><xsl:template match="person">

A Person

412

XSL

T


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">



413

XSL

T


<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


p

default

default

Some text here under people element!

some information inside some-tag

70

LT7



xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="person">

<p><p>A PersonA Person </p></p>

415

XSL

T


<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


►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


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


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>


</person>

419

XSL

T


</person><person born="1918" died="1988">

<name><first_name>RichardRichard</first_name><middle_initial>MM</middle_initial><last_name>FeynmanFeynman</last_name>


</person></people>

LT7

Result


<p>AlanTuring

420

XSL

T


</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


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


processed in the middle of processing another element– It can prevent particular elements from being processed

LT7


►►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


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


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


<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”?>TuringAlancomputer scientistmathematician

426

XSL

T


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


<xsl:value of select first_name /></xsl:template><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">

<xsl:template match="person">

428

XSL

T


<xsl:apply-templates select="name"/></xsl:template><xsl:template match="name">

<xsl:value-of select="last_name"/>,<xsl:value-of select="first_name"/>


LT7

Result


AlanTuring

429

XSL

T


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


<body><xsl:apply-templates select=“person”/></body></html></xsl:template>

LT7


►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


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


</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>

73

LT7

Result<html><head><META http-equiv="Content-Type" content="text/html; charset=UTF-

8"><title>Famous Scientists</title></head>

433

XSL

T


<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


</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


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


<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


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


<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><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


<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


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


<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


AlanTuring

442

XSL

T


computer scientistmathematiciancryptographer

RichardMFeynmanphysicist

LT7xsl:for-each

►iterating through a node set►<xsl:for-each></xsl:for-each>

443

XSL

T


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


<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


AlanTuring

1912

445

XSL

T


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


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


<xsl:if test="@born='1912'"><xsl:if test="@born='1912'">Died in <xsl:value-of select="@died"/>

</xsl:if></xsl:if></xsl:for-each>


LT7

Result

<?xml version="1.0" encoding="UTF-8"?>AlanTuring

Died in

448

XSL

T


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


<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


@@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>


76

LT7

Result


AlanTuring

Died in 1954

451

XSL

T


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


g y g– <xsl:apply-templates…/>– <xsl:for-each …/>

LT7

Example of xsl:sort (“Ascending”)


<xsl:apply-templates>

453

XSL

T


<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


cryptographer

RichardMFeynman

physicistPlaying the bongoes

LT7

Example of xsl:sort (“Descending”)


<xsl:apply-templates>

455

XSL

T


<xsl:apply templates><xsl:sort select="name” order="descending” />

</xsl:apply-templates></xsl:template></xsl:stylesheet>

LT7


RichardMFeynman

physicist

456

XSL

T


Playing the bongoes

AlanTuring


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


<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


<xsl:copy><xsl:apply-templates>

<xsl:sort select="name"/></xsl:apply-templates>

</xsl:copy></xsl:template></xsl:stylesheet>

LT7


RichardMFeynman

physicist

459

XSL

T


Playing the bongoes

AlanTuring


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


<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


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


►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


// 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


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


g q y p– asking users questions in the middle of transformation

CSSCSS8


S8

Content►What are CSS? ►History of CSS►Why CSS?►Types of Style Sheets►Style Sheets Syntax►Cascading Model


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?


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


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.


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


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.


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.


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


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


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


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)


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


CSS

p g• Limits cross-platform compatibility of content

– limits diversity of web devices

S8

STYLE

What are they?

CONTENT


CSS

Web page

S8

CONTENT

What are they?

STYLE

Web page


CSS Web page

81

S8

CSS

What are they?


CSS

S8

What are they?


CSS

Physical layout

Headings Body

Text

Text

CSS

Physical Layout

CSS

Headings

CSS

Body

CSS

S8

CONTENT

Devices

BROWSER

CSS


CSS

MOBILE

CONTENT CSSCSSCSS

PRINT

PDA

S8

Types of CSS

►External►Embedded►Imported►Inline


CSS

S8

External

►Connection made via the LINK tag►Use the optional TYPE attribute to specify a media type

– type/css


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


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


CSS

S8

Inline

►Least flexible►Requires each element to be tagged if you want them to

appear differently►Looses the advantage of using CSS


CSS

S8

Inserting a CSS

►External sheet

<head>

<link rel=“stylesheet” type=“text/css” href=“mystyle.css” />


CSS

y y

</head>

S8

Inserting a CSS

►Internal/embedded sheet

<head><style type=“text/css”>hr { color: navy}


CSS body {margin-left: 20px}

</style></head>

S8

Inserting a CSS

►Internal/embedded sheet for older browsers<head><style type=“text/css”>


CSS

body {margin left: 20px} ></style></head>

S8

Inserting a CSS

►Inline

<p style=“color: yellow; font-family: verdana”>This is a paragraph</p>


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


CSS

S8


h3 {color: red; text-align: right; font-size: 8pt} (external CSS)h3 {text-align: center; font-size: 20pt} (internal CSS)

will yield


CSS

S8


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 }


CSS

S8

Sheet weight or Precedence

Author’s style sheet

User’s style sheet

Browser’s style sheet


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


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


CSS

y<UL> elements unless a style rule is specifically set for the <LI> element

84

S8

Basic CSS SyntaxBasic CSS Syntax


CSS Basic CSS SyntaxBasic CSS Syntax

S8

Basic CSS Syntax

►Three parts:– selector– property– value } declaration


CSS

selector {property: value}

S8

Basic CSS Syntax


selectorselector: the basic HTML element tag you wish to define

bodybody


CSS

bodybody

S8

Basic CSS Syntax


propertyproperty: the attribute of the selector that you wish to change

body {colorcolor


CSS

body {colorcolor

S8

Basic CSS Syntax


valuevalue: the particular markup value for that attribute

body {color : black: black}


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” }


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 }


CSS

S8

Basic CSS Syntax

To make properties more readable, put each on a separate line.

p { text-align: center;color: navy;


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 }


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


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 }


CSS

p { g }

S8

CSS Syntax - class

p.right { text-align: right }

<p classclass=“right”>This paragraph will be right aligned.

</p>


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>


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


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>


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;


CSS color: green }

S8

CSS Syntax - id

p#para1 { text-align: center;color: green }

<p id=“para1”>This text would be centered and green


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;


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:


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:


CSS

pp y y• <P>Welcome to the <SPAN CLASS=“logo””>

Wonder Software</SPAN>Web site</P>

S8

Background PropertiesBackground Properties


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


CSS

S8


►Basic syntax– background– background-color– background-image– background-repeat


CSS

background repeat– background-attachment– background-position

S8


►All attributes can be set in a single declaration:

background: #000000 url(‘psumark.gif’) no-repeat fixed center


CSS

88

S8


►Setting the body background (internal CSS)

body { background: #000000 url(‘psumark.gif’) no-repeat fixed center }


CSS

S8


►Setting the body background (external CSS)

body: { background: #000000 url(‘psumark.gif’) no-repeat fixed center }


CSS

S8


►Elements can also be set separately

body{ background-image: url(psumark.gif);background-color: navy }


CSS

background color: navy }

S8

Text PropertiesText Properties


CSS Text PropertiesText Properties

S8

Text properties

►Controls the appearance of text in the web page


CSS

S8

Text properties

►Commonly used attributes– color– direction– text-align– text-decoration


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)


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}


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}


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


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


CSS

y– p {text-indent: 20px}

S8

Font PropertiesFont Properties


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


CSS

S8

Font properties

► font ► font-style► font-variant► font-weight► font-size/line-height► font family


CSS ► font-family

S8

Font properties

► fontfont--stylestyle ► normal► italic► oblique


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


CSS smaller size

Syntax: body {font-variant: small-caps}

S8

Font properties

► fontfont--weightweight ► normal► bold► bolder► lighter► weighted values


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


CSS

91

S8

Font properties► fontfont--sizesize ► xx-small to xx-large

► smaller– smaller than parent

► larger– larger than parent


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”,


CSS

, ,“monospace”

Syntax: body {font-family: verdana, sans-serif}

S8

Border PropertiesBorder Properties


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


CSS

S8

Border properties

►You can specify the width, style, color, thickness and on which sides the border appears


CSS

S8

Margin PropertiesMargin Properties


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


CSS

S8

Margin properties►Properties

– margin– margin-top– margin-right– margin-bottom


CSS

g– margin-left

S8

Margin properties► margin-bottom ► auto

– set by the browser► length

– fixed► %


CSS

► %

Syntax: h1 {margin-bottom: 20px}

S8

Margin properties

►Can be set in one declaration►Think clock face

– top, right, bottom, left


CSS

h1 {margin: 10px 20px 30px 40px}

S8

Margin properties

►All margins can be set the same


CSS

h1 {margin: 40px}

S8

Margin properties

►Margin settings can be paired (left and right, top and bottom)


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.


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


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


Stan

dard

s9

Benefits of Compressing Data

556

Mul

timed

ia S


Stan

dard

s9

557

Mul

timed

ia S


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


► 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


► 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


– 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


► 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


– 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


g g► Scanning and printing► Image databases► Mobile

Stan

dard

s9

Baseline JPEG Encoder Block Diagram

564

Mul

timed

ia S


95

Stan

dard

s9

Baseline JPEG Decoder Block Diagram

565

Mul

timed

ia S


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


► Robustness ► No tiling► No ROI► Blocking artifacts► Poor error resilience

Stan

dard

s9

567

Mul

timed

ia S


Stan

dard

s9

568

Mul

timed

ia S


Stan

dard

s9

JPEG2000 Compression Paradigm

569

Mul

timed

ia S


Stan

dard

s9

570

Mul

timed

ia S


96

Stan

dard

s9

571

Mul

timed

ia S


Stan

dard

s9

572

Mul

timed

ia S


Stan

dard

s9

573

Mul

timed

ia S


Stan

dard

s9

574

Mul

timed

ia S


0.125 bpp, CR=64:1

Stan

dard

s9

575

Mul

timed

ia S


0.25 bpp, CR=32:1

Stan

dard

s9

576

Mul

timed

ia S


0.5 bpp, CR=16:1

97

Stan

dard

s9

577

Mul

timed

ia S


1 bpp, CR=8:1

Stan

dard

s9

578

Mul

timed

ia S


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


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


► Part 5: Reference Software► Part 6: Compound Image File Format

Stan

dard

s9

JPEG 2000 Fundamental Building Blocks

581

Mul

timed

ia S


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


► 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


Stan

dard

s9

Irreversible Color Transform (ICT)

584

Mul

timed

ia S


Stan

dard

s9

585

Mul

timed

ia S


Stan

dard

s9

586

Mul

timed

ia S


Stan

dard

s9

587

Mul

timed

ia S


Stan

dard

s9

588

Mul

timed

ia S


99

Stan

dard

s9

589

Mul

timed

ia S


Stan

dard

s9

590

Mul

timed

ia S


Stan

dard

s9

591

Mul

timed

ia S


Stan

dard

s9

592

Mul

timed

ia S


Stan

dard

s9

593

Mul

timed

ia S


Stan

dard

s9

594

Mul

timed

ia S


100

Stan

dard

s9

Discrete Wavelet Transform Discrete Wavelet Transform

595

Mul

timed

ia S


(DWT)(DWT)

Stan

dard

s9

Transformations in JPEG 2000

596

Mul

timed

ia S


Stan

dard

s9

1D Two-Band DWT

597

Mul

timed

ia S


Stan

dard

s9

Example of Analysis Filter Bank

598

Mul

timed

ia S


Stan

dard

s9

599

Mul

timed

ia S


Stan

dard

s9

600

Mul

timed

ia S


101

Stan

dard

s9

601

Mul

timed

ia S


Stan

dard

s9

602

Mul

timed

ia S


Stan

dard

s9

Inverse DWT

603

Mul

timed

ia S


Stan

dard

s9

The 1D Two Band DWT

604

Mul

timed

ia S


Stan

dard

s9

1 Level, 2D Wavelet Decomposition (DC=1,AC=4)

605

Mul

timed

ia S


Stan

dard

s9


606

Mul

timed

ia S


102

Stan

dard

s9


607

Mul

timed

ia S


Stan

dard

s9

2D Wavelet Decomposition

608

Mul

timed

ia S


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


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


Stan

dard

s9

Region Of Interest CodingRegion Of Interest Coding

611

Mul

timed

ia S


Region Of Interest CodingRegion Of Interest Coding

Stan

dard

s9

ROI Example

612

Mul

timed

ia S


103

Stan

dard

s9

ROI Example (cont’d)

613

Mul

timed

ia S


Stan

dard

s9

Error ResilienceError Resilience

614

Mul

timed

ia S


Error ResilienceError Resilience

Stan

dard

s9

Error-prone Channels

615

Mul

timed

ia S


Stan

dard

s9

Error Effects

616

Mul

timed

ia S


Stan

dard

s9

Protecting Code-block Data

617

Mul

timed

ia S


Stan

dard

s9

Error-Resilience Visual Results

BER = 10-5

618

Mul

timed

ia S


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


JPEG CR=16:1 JPEG 2000 CR=16:1

Stan

dard

s9

JPEG-LS

620

Mul

timed

ia S


Stan

dard

s9

PNG

621

Mul

timed

ia S


Stan

dard

s9

Test Images

622

Mul

timed

ia S


Stan

dard

s9

Test Images (Cont’d)

623

Mul

timed

ia S


Stan

dard

s9

624

Mul

timed

ia S


105

Stan

dard

s9

625

Mul

timed

ia S


Stan

dard

s9

626

Mul

timed

ia S


Stan

dard

s9

Lossless Results

627

Mul

timed

ia S


Stan

dard

s9

628

Mul

timed

ia S


Stan

dard

s9

Non-progressive Results

629

Mul

timed

ia S


Stan

dard

s9

630

Mul

timed

ia S


106

Stan

dard

s9

631

Mul

timed

ia S


Stan

dard

s9

632

Mul

timed

ia S


Stan

dard

s9

633

Mul

timed

ia S


Stan

dard

s9

634

Mul

timed

ia S


Stan

dard

s9

635

Mul

timed

ia S


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


►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


( 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


►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


• 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


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


Stan

dard

s9

642

Mul

timed

ia S


108

Stan

dard

s9

643

Mul

timed

ia S


Stan

dard

s9

644

Mul

timed

ia S


Stan

dard

s9

645

Mul

timed

ia S


Stan

dard

s9

646

Mul

timed

ia S


Stan

dard

s9

647

Mul

timed

ia S


Stan

dard

s9

648

Mul

timed

ia S


109

Stan

dard

s9

649

Mul

timed

ia S


Stan

dard

s9

650

Mul

timed

ia S


Stan

dard

s9

651

Mul

timed

ia S


Stan

dard

s9

652

Mul

timed

ia S


Stan

dard

s9

653

Mul

timed

ia S


Stan

dard

s9

654

Mul

timed

ia S


110

Stan

dard

s9

655

Mul

timed

ia S


Stan

dard

s9

656

Mul

timed

ia S


Stan

dard

s9

657

Mul

timed

ia S


Stan

dard

s9

658

Mul

timed

ia S


Stan

dard

s9

659

Mul

timed

ia S


Stan

dard

s9

660

Mul

timed

ia S


111

Stan

dard

s9

661

Mul

timed

ia S


Stan

dard

s9

662

Mul

timed

ia S


Stan

dard

s9

663

Mul

timed

ia S


Stan

dard

s9

664

Mul

timed

ia S


Stan

dard

s9

665

Mul

timed

ia S


Stan

dard

s9

666

Mul

timed

ia S


112

Stan

dard

s9

667

Mul

timed

ia S


Stan

dard

s9

668

Mul

timed

ia S


Stan

dard

s9

669

Mul

timed

ia S


Stan

dard

s9

670

Mul

timed

ia S


Stan

dard

s9

671

Mul

timed

ia S


Stan

dard

s9

672

Mul

timed

ia S


113

Stan

dard

s9

673

Mul

timed

ia S


Stan

dard

s9

674

Mul

timed

ia S


Stan

dard

s9

675

Mul

timed

ia S


Stan

dard

s9

676

Mul

timed

ia S


Stan

dard

s9

677

Mul

timed

ia S


Stan

dard

s9

678

Mul

timed

ia S


114

Stan

dard

s9

679

Mul

timed

ia S


Stan

dard

s9

MPEG-4

680

Mul

timed

ia S


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


Stan

dard

s9

682

Mul

timed

ia S


Stan

dard

s9

MPEG-21

► An open framework for multimedia delivery andconsumption

► Focal points:► Content creators► Content consumers

683

Mul

timed

ia S


► Content consumers

Stan

dard

s9

MPEG-21 Scope

684

Mul

timed

ia S


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


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


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


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


( )►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


technologies3. Provide a strategy for achieving a framework through

collaboration

Stan

dard

s9

Users and content

690

Mul

timed

ia S


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


– 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


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


• 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


Stan

dard

s9

Digital Item Declaration example

695

Mul

timed

ia S


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


(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


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


►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


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


►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


►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


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


– Quality– Reliability– Flexibility– Diversity

►Guaranteed user experience

Stan

dard

s9

Concept of Digital Item Adaptation

704

Mul

timed

ia S


Stan

dard

s9

Relation between DIA and other MPEG-21parts

705

Mul

timed

ia S


Stan

dard

s9

Scope of standardization►User Characteristics

– Terminal Capabilities– Network Characteristics– Natural Environment Characteristics– Resource Adaptability

706

Mul

timed

ia S


p y– Session Mobility

Stan

dard

s9

Overview of DIA Tools

707

Mul

timed

ia S


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


resource format independent bitstream syntax descriptions

119

Stan

dard

s9

Adaptation architecture

709

Mul

timed

ia S


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


►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


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


mapping is fulfilled

Stan

dard

s9

(g)BSD, AdaptationQoS, and Link

713

Mul

timed

ia S


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


►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


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


– 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


►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


Stan

dard

s9

DIP flow control

719

Mul

timed

ia S


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


121

Dynamic HTML:Dynamic HTML:JavaScriptJavaScript10


ript

10

Content

► What is JavaScript?► What can a JavaScript Do?► How to include JavaScript in html?► JavaScript Variables► JavaScript Expressions

722

Java

Scr


► 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


– 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


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


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


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


►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


►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


– 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


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


►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


, 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


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


►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


►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


– 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


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


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


,– 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


– 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


►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


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


– 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


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


• 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


• 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


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


• 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


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


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


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


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


• 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


– 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


– 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


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


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


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


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>


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


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


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


_ ;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


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


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


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


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


// 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


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


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


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


JSP– PHP

P, P

HP

11

Creating an HTML Form

770

Form

s, JS

P


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'></form>►For example:

<ff ti ’ dd l d ’ th d ’POST’>

771

Form

s, JS

P


<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


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


►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


p29 Title: <input type=’text’ name=’title’ /> <br/><br/>30 <input type=’submit’ value=’Add League’ />31 </form>

130

JSJSPP


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


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


►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


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


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


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


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


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


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


►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


– Directive tag <%@ directive %>– Declaration tag <%! decl %>– Scriptlet tag <% code %>– Expression tag <%= expr %>

P, P

HP

11

Comments►HTML comments► 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


► 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


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


<%! 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


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


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


► 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


( )%></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


<%= 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


►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


►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


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


<%@ 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


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


, 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


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


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


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


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


►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


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


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


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


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


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


</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


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


» 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


• 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


• 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


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


• $_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


$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


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


// 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


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


> 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


|| 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


$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


• 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


!== 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


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


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


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


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


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


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


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


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


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


{


}

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


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


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


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


{

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


foreach (array as value)

{


}

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


$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


– 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


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


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


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


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


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


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


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


• 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


</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


<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( "[email protected]", "Feedback Form Results",$message "From: $email" );

853

Form

s, JS

P


$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


header( "Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT" );header( "Cache-Control: no-cache, must-revalidate" );header( "Pragma: no-cache" );

?>