UNIT 1 THE INTERNET · 1.13 SUMMARY This unit describes the basic concepts about an Internet....

The Internet

UNIT 1 THE INTERNET

Structure Page No.

1.0 Introduction 5

1.1 Objectives 6

1.2 Classification of Networks 6

1.3 Networking Models 7

1.4 What is Packet Switching? 10

1.5 Accessing the Internet 10

1.6 Internet Protocols 12 1.6.1 Internet Protocol (IP)

1.6.2 Transmission Control Protocol (TCP)

1.7 Internet Address 14 1.7.1 Structure of Internet Servers Address

1.7.2 Address Space

1.8 How does the Internet Work? 16

1.9 Intranet & Extranet 17

1.10 Internet Infrastructure 18

1.11 Protocols and Services on Internet 21 1.11.1 Domain Name System

1.11.2 SMTP and Electronic Mail

1.11.3 Http and World Wide Web

1.11.4 Usenet and Newgroups

1.11.5 FTP

1.11.6 Telnet

1.12 Internet Tools 27 1.12.1 Search Engines

1.12.2 Web Browser

1.13 Summary 28

1.14 Solutions/ Answers 28

1.0 INTRODUCTION

The Internet is worldwide computer network that interconnects, million of computing

devices throughout the world. Most of these devices are PC’s, and servers that store

and transmit information such as web pages and e-mail messages. Internet is

revolutionizing and enhancing the way we as humans communicate, both locally and

around the globe. Everyone wants to be a part of it because the Internet literally puts

a world of information and a potential worldwide audience at your fingertips.

The Internet evolved from the ARPANET (Advanced Research Projects Agency) to

which other networks were added to form an inter network. The present Internet is a

collection of several hundred thousand of networks rather than a single network.

From there evolved a high-speed backbone of Internet access for sharing these of

networks. The end of the decade saw the emergence of the World Wide Web, which

heralded a platform-independent means of communication enhanced with a pleasant

and relatively easy-to-use graphical interface.

World Wide Web is an example of an information protocol/service that can be

used to send and receive information over the Internet. It supports:

Multimedia Information (text, movies, pictures, sound, programs . . . ).

HyperText Information (information that contains links to other information

resources).

Graphic User Interface (so users can point and click to request information

instead of typing in text commands).

The World Wide Web model follows Cient/Server software design. A service that

uses client/server design requires two pieces of software to work: Client Software,

5

Scripting Languages

which you use to request information, and Server Software, which is an

Information Provider.

The server software for the World Wide Web is called an HTTP server (or

informally a Web server). Examples are Mac HTTP, CERN HTTP, and NCSA

HTTP. The client software for World Wide Web is called a Web browser. Examples

are: Netscape, and Internet Explorer.

1.1 OBJECTIVES

After going through this unit students should be able to:

Make classification of networks;

understand two types of networking models;

understand the concept of packet switching;

understand how to access to the internet;

list the services available on Internet; and

understand how does the Internet works.

1.2 CLASSIFICATION OF NETWORKS

There are different approaches to the classification of compute Networks. One such

classification is based on the distance approach. In this section we will discuss such

networks.

The networks can be classified into LAN, MAN and WAN networks. Here, we

describe them into brief to understand the difference between the types of network.

Local Area Network (LAN)

LAN is a privately - owned computer networks confined to small geographical area,

such as an office or a factory widely used to connect office PCs to share information

and resources. In a Local area network two or more computers are connected by same

physical medium, such as a transmission cable. An important characteristic of Local

Area networks is speed. i.e. they deliver the data very fast compared to other types of

networks with typical data transmission speed are 10-100 Mbps.

A wide variety of LANs have been built and installed, but a few types have more

recently become dominant. The most widely used LAN system is the Ethernet

system. Intermediate nodes (i.e. repeaters, bridges and switches) allow LANs to be

connected together to form larger LANs. A LAN may also be connected to another

LAN or to WANs and MANs using a “router”.

In summary, a LAN is a communications network, which is:

local (i.e. one building or group of buildings)

controlled by one administrative authority

usually high speed and is always shared

LAN allows users to share resources on computers within an organization.

Metropolitan Area Network (MAN)

A MAN, basically a bigger versions of a LAN is designed to extend over an entire

city. It may be single network such as a cable television network, or it may be a

means of connecting a number of LANs into a large network so that resources may be

shared for example, a company can use a MAN to connect the LANs in all of its

offices throughout a city.

6

The Internet

A MAN typically covers an area of between 5 and 50 km diameter. Many MANs

cover an area the size of a city, although in some cases MANs may be as small as a

group of buildings

The MAN, its communications links and equipment are generally owned by either a

consortium of users or by a single network provider who sells the service to the users.

This level of service provided to each user must therefore be negotiated with the

MAN operator, and some performance guarantees are normally specified.

A MAN often acts as a high-speed network to allow sharing of regional resources

(similar to a large LAN). It is also frequently used to provide a shared connection to

other networks using a link to a WAN.

Wide Area Network (WAN)

The term Wide Area Network (WAN) usually refers to a network, which covers a

large geographical area, and use communications subnets (circuits) to connect the

intermediate nodes. A major factor impacting WAN design and performance is a

requirement that they lease communication subsets from telephone companies or

other communications carriers. Transmission rates are typically 2 Mbps, 34 Mbps,

155 Mbps, 625 Mbps (or sometimes considerably more). The basic purpose of the

subnet is to transmit message from one end to another end through intermediate

nodes.

In most WAN a subnet consists of two types of elements: (i) Transmission lines (ii)

Switching element.

Transmission lines also called channels move about from one machine to another

machine. The basic purpose of the switching element is to select the outgoing path for

forwarding the message.

Numerous WANs have been constructed, including public switched networks, large

corporate networks, military networks, banking networks, stock brokerage networks,

and airline reservation networks. A WAN is wholly owned and used by a single

company is often referred to as an enterprises network.

1.3 NETWORKING MODELS

There are two types of networking models available: OSI reference Model and the

TCP/IP Network Model for the design of computer network system. In this section

we shall look at these models.

OSI (Open System Interconnection) Networking Model

An open system is a model that allows any two different systems to communicate

regardless of their underlying architecture. The purpose of the OSI model is to open

communication between different devices without requiring changes to the logic of

the underlying hardware and software.

The OSI model is not a protocol, it is a model for understanding and designing a

network architecture that is inter- operable, flexible and robust.

The OSI model has a seven-layered architecture. These are:

Application layer

Presentation layer

7

Scripting Languages

Session layer

Transport Layer

Network layer

Data link layer

Physical Layer

Figure 1: OSI Model

Physical layer: the physical layer is concerned with sending raw bits between the

source and destination nodes over a physical medium. The source and destination

nodes have to agree on a number of factors.

Signal encoding: how are the bits 0 and 1 to be represented?

Medium: what is the medium used and its properties?

Bit synchronization: is the transmission synchronous or asynchronous?

Transmission type: whether the transmission is serial or parallel?

Transmission mode: is the transmission simplex, half-duplex or full duplex?

Topology: what is the network topology i.e. star, mesh, ring or bus?

Data link layer: the data link layer is responsible for transmitting a group of bits

between the adjacent nodes. The group of bits is known as frame. The network layer

passes a data unit to the data link layer and data link layer adds the header

information to this data unit. The data link layer performs the following functions:

Addressing: Headers and trailers are added containing the physical addresses

of the adjacent nodes and removed on a successful delivery.

Framing: Grouping of/bits received from the network layer into manageable

units called frame

Flow control: to regulate the amount of data that can be sent to the receiver.

Media access control (MAC): who decide who can send data, when and how

much.

Synchronization: this layer also contains bits to synchronize the timing to

know the bit interval to recognize the bit correctly.

Error control: it incorpoprates the CRC to ensure the correctness of the frame.

Node to node delivery: it’s also responsible for error-free delivery of the entire

frame/packet to the next adjacent node.

Network layer: The network layer is responsible for routing a packet within the

subnet that is, from source to destination nodes across multiple nodes in the same

network or across multiple networks. This layer also ensures the successful delivery

of a packet to the destination node. The network layer performs the following

functions:

Routing: To find the optimal route

Congestion control: which is based on two approaches (i) Increase on the

resources (ii) Decrease the word

Accounting and billing

Transport layer: this layer is the first end-to-end layer. Header of the transport layer

contains information that helps send the message to the corresponding layer at the

8

The Internet

destination node. The message is broken into packets and may travel through a

number of intermediate nodes. This layer takes care of error control and flow control

both at the source and destination for the entire message. The responsibilities of the

transport layer are:

Host-to-host message delivery

Flow Control

Segmentation and reassembly

Session layer: the main functions of this layer are to establish, maintain and

synchronize the interaction between two communication hosts. It makes sure that

once a session is established it must be closed gracefully. It also checks and

establishes connections between the hosts of two different users. The session layer

also decides whether both users can send as well as receive data at the same time or

whether only one host can send and the other can receive. The responsibilities of

session layer are:

Sessions and sub sessions: this layer divides a session into sub session for

avoiding retransmission of entire message by adding the checkpoint feature.

Synchronization: this layer decides the order in which data needs to be passed

to the transport layer.

Dialog control: this layer also decides which user application sends data and at

what point of time and whether the communication is simplex, half duplex or

full duplex.

Session closure: this layer ensures that the session between the hosts is closed

gracefully.

Presentation layer: when two hosts are communicating with each other they might

use different coding standards and character sets for representing data internally. This

layer is responsible for taking care of such differences. This layer is responsible for:

Data encryption and decryption for security

Compression

Translation

Application layer: it’s the topmost layer in the OSI model, which enables the user to

access the network. This layer provides user interface for network applications such

as remote login, World Wide Web and FTP. The responsibilities of the application

layer are:

File access and transfer

Mail services

Remote login

World Wide Web

TCP/IP Networking Model

TCP/IP is an acronym for Transmission Control Protocol / Internet Protocol. TCP/ IP

is a collection of protocols, applications and services. TCP/IP protocol were

developed prior to the OSI model therefore its layers do not match with the OSI

model.

The TCP/IP protocol suit is made of the five layers: Physical, data link, network,

transport & application. The first four layers provide physical standards network

interface, internetworking and transport mechanism whereas the last layer comprises

of the functionalities of the three topmost layers in the OSI model.

1.4 WHAT IS A PACKET SWITCHING?

9

Scripting Languages

End systems are connected together by communication links. There are many types

of communication links, which are made of different types of physical media,

including fiber optics, twisted pair, coaxial cable and radio links. Different links can

transmit data at different rates. The link transmission rate is often called the

bandwith of the link, which is typically measured in bits/second. The highest the

bandwith, the more is the capacity of the channel. End systems are not usually

directly attached to each other via a single communication link. Instead, they are

indirectly connected to each other through intermediate switching devices known as

routers. A router takes a chunk of information arriving on one of its incoming

communication links and forwards that chunk of information on one of its outgoing

communication links. In the jargon of computer networking, the chunk of

information is called a packet. The path that the packet takes from the sending end

system, through a series of communication links and routers, to the receiving end

system is known as a route or path through the network. Rather than providing a

dedicated path between communicating end systems, the Internet uses a technique

known as packet switching that allows multiple communicating end systems to share

a path, or parts of a path, at the same time. Similar to a router, there is another

special machine called gateways used in the network that allows different networks to

talk to the Internet, which uses TCP/IP.

Packet switching is used to avoid long delays in transmitting data over the network.

Packet switching is a technique, which limits the amount of data that a computer can

transfer on each turn. Packet switching allows many communications to proceed

simultaneously. Each packet contains a header that specifies the computer to which

the packet should be delivered and the destination is specified using computer’s

address. Computers that share access to a network take turns in sending packets. On

each turn, a given computer sends one packet. IP uses this packet switching concept

to deliver messages on the Internet If the destination address does not exist on the

local network, it is the responsibility of that network’s router to route the message

one step closer to its destination. This process continues until the destination machine

claims the message packet.

1.5 ACCESSING THE INTERNET

Before we can use the Internet, we have to gain access to it. This access is achieved

in one of several ways, which we will discuss in this section. Above all, the Internet

is a collection of networks that are connected together through various protocols and

hardware.

Dial-up Connection: one of the commonest ways of connection to Internet is

through dial up connection using a modem and a telephone line. Using these you can

connect to a host machine on the Internet. Once connected the telecommunications

software allows you to communicate with the Internet host. When the software runs it

uses the modem to place a telephone call to a modem that connects to a computer

attached to the Internet.

The SLIP (Serial Line Internet Protocol) or PPP (Point to Point Protocol): two

protocols; serial line interface protocol (SLIP) and the point-to-point protocol

(PPP), allow a user to dial into the Internet. They convert the normal telephone data

stream into TCP/IP packets and send them to the network. With these, the user

becomes a peer station on the Internet and has access to all of the Internet’s facilities.

Internet Service Providers

As mentioned earlier, nobody truly owns the Internet, but it is maintained by a group

of volunteers interested in supporting this mode of information interchange. Central

to this control is the Internet service provider (ISP) which is an important component

in the Internet system. Each ISP is a network of routers and communication links.

The different ISPs provide a variety of different types of network access to the end

systems, including 56 Kbps dial-up modem access, residential broadband access such

10

The Internet

as cable modem or DSL, high-speed LAN access, and wireless access. ISPs also

provide Internet access to content providers, connecting Web sites directly to the

Internet. To allow communication among Internet users and to allow users to access

worldwide Internet content, these lower-tier ISPs are interconnected through national

and international upper-tier ISPs, such as Sprint. An upper-tier ISP consists of high-

speed routers interconnected with high-speed fiber-optic links. Each ISP network,

whether upper-tier or lower-tier, is managed independently, runs the IP protocol (see

below), and conforms to certain naming and address conventions.

ISDN (Integrated Services Digital Network) Service

The whole idea of ISDN is to digitize the telephone network to permit the

transmission of audio, video and text over existing telephone lines. The purpose of

the ISDN is to provide fully integrated digital services to users.

The use of ISDN for accessing the Internet has breathed new life into the ISDN

service. ISDN’s slow acceptance was due mostly to a lack of a need for its

capabilities. Being a digital interface, ISDN has provided a means for accessing web

sites quickly and efficiently. In response to this new demand, telephone companies

are rapidly adding ISDN services.

The ISDN standard defines three channels types, each with the different transmission

rate: bearer channel (B), data channel (D) and hybrid channel (H) (see the following

table)

Channel Data Rate (Kbps)

B 64

D 16, 64

H 384, 1536, 1920

The B channel is defined at a rate of 64 Kbps. It is the basic user channel and can

carry any type of digital information in full duplex mode as long as the required

transmission does not exceed 64 kbps. A data channel can be either 16 or 64 kbps

depending on the needs of the user used to carry control signals for B channels.

Of the two basic rate B channels, one is used to upload data to the Internet and one to

download from the Internet. The D Channel assists in setting up connection and

maintaining flow control. There are three ways ISDN can be used to interface to the

Internet, by using a modem, adaptor, or bridge/router. ISDN modems and adaptors

limit access to a single user. Both terminate the line into an ISDN service. The

difference between them is that the ISDN modem takes the Internet traffic and pushes

it through the computer serial port, while, the faster ISDN adaptor connects directly

to the computer’s buses.

ISDN bridge/routers allow for local network connections to be made through ISDN

to the Internet. The ISDN termination is made into an Ethernet-type LAN so that

multiple users can achieve access to the Net through a single access address.

Transfer rates between user and the Internet are between 56 and 128 Kbps.

Direct ISP Service through Leased Line

The most costly method of accessing the Internet is to use leased lines that connect

directly to the ISP. This will increase access rate to anywhere between 64 K and 1.5

Mbps, depending on the system in use. Equipment called data service units (DSU)

and channel service units (CSU) are set up in pairs, one pair at the customer site and

the other at the ISP site. There is no phone dialing required since the connection is

direct. Also the only protocol needed to complete the access is TCP/IP, for much the

same reason. Depending on the transfer rate required and the distance between the

sites, cabling between them can be made with fiber optic cables or unshielded

twisted-pair (UTP) copper wire.

11

Scripting Languages

Cable Modem

One more way of accessing the Internet currently being developed is the use of cable

modems. These require that you subscribe to a cable service and allow you two-way

communication with the Internet at rates between 100K and 30 Mbps. The cable

modem performs modulation and demodulation like any other modem, but it also has

a tuner and filters to isolate the Internet signal from other cable signals. Part of the

concern for use of the cable modem is to formulate LAN adapters to allow multiple

users to access the Internet. A medium access control (MAC) standard for sending

data over cable is being formulated by the IEEE 802.14 committee.

1.6 INTERNET PROTOCOLS

A communication protocol is an agreement that specifies a common language two

computers use to exchange messages. For example, a protocol specifies the exact

format and meaning of each message that a computer can send. It also specifies the

conditions under which a computer should send a given message and how a computer

should respond when a message arrives. Different types of protocols are used in

Internet such as IP and TCP. A computer connected to the Internet needs both TCP

and IP software. IP provides a way of transfering a packet from its source to

destination and TCP handles the lost datagrams and delivery of datagrams. Together,

they provide a reliable way to send data across the Internet. We discuss about these

protocols in brief in the following section.

1.6.1 Internet Protocol (IP)

The Internet protocol specifies the rules that define the details of how computers

communicate. It specifies exactly how a packet must be formed and how a router

must forward each packet on toward its destination. Internet Protocol (IP) is the

protocol by which data is sent from one computer to another on the Internet. Each

computer (known as a host) on the Internet has at least one IP address that uniquely

identifies it from all other computers on the Internet. When sending or receiving data,

the message gets divided into little chunks called packet. Each of these packets

contains both the senders Internet address and the receiver’s address. The packet that

follows the IP specification is called an IP datagram. The Internet sends an IP

datagram across a single network by placing it inside a network packet. For network

the entire IP datagram is data. When the network packet arrives at the next computer,

the computer opens the packet and extracts the datagram. The receiver examines the

destination address on the datagram to determine how to process it. When a router,

determines that the datagram must be sent across another network, the router creates

a new network packet, encloses the datagram inside the packet and sends the packet

across another network toward its destination. When a packet carrying a datagram

arrives at its final destination, local software on the machine opens the packet and

processes the datagram. Because a message is divided into a number of packets a

different route can send each packet across the Internet. Packets can arrive in a

different order than the order they were sent in. The Internet Protocol just delivers

them. It's up to another protocol, the Transmission Control Protocol to put them back

in the right order. IP is a connectionless protocol, which means that there is no

established connection between the end points that are communicating. Each packet

that travels through the Internet is treated as an independent unit of data without any

relation to any other unit of data. In the Open Systems Interconnection (OSI)

communication model, IP is in layer 3, the Networking Layer.

1.6.2 Transmission Control Protocol (TCP)

TCP makes the Internet reliable. TCP solves many problems that can occur in a

packet switching system. TCP provide the following facilities:

TCP eliminates duplicate data.

TCP ensures that the data is reassembled in exactly the order it was sent

12

The Internet

TCP resends data when a datagram is lost.

TCP uses acknowledgements and timeouts to handle problem of loss.

The main features of TCP are:

Reliability: TCP ensures that any data sent by a sender arrives at the destination as it

was sent. There cannot be any data loss or change in the order of the data. Reliability

at the TCP has four important aspects:

Error Control

Loss control

Sequence control

Duplication control

Connection-oriented: TCP is connection-oriented. Connection-oriented means a

connection is established between the source and destination machines before any

data is sent i.e. a connection is established and maintained until such time as the

message or messages to be exchanged by the application programs at each end have

been exchanged. The connections provided by TCP are called Virtual Connections. It

means that there is no physical direct connection between the computers.

TCP is used along with the Internet Protocol to send data in the form of message

units between computers over the Internet. While IP takes care of handling the actual

delivery of the data, TCP takes care of keeping track of the individual units of data

(called Packet) that a message is divided into for efficient routing through the

Internet. TCP provides for a reliable, connection-oriented data transmission channel

between two programs. Reliable means that data sent is guaranteed to reach its

destination in the order sent or an error will be returned to the sender.

For example, when an HTML file is sent to someone from a Web server, the

Transmission Control Protocol (TCP) program layer in that server divides the file

into one or more packets, numbers the packets, and then forwards them individually.

Although each packet has the same destination IP address, it may get routed

differently through the network. At the other end (the client program in our

computer), TCP reassembles the individual packets and waits until they have arrived

to forward them as a single file.

TCP is responsible for ensuring that a message is divided into the packets that IP

manages and for reassembling the packets back into the complete message at the

other end. In the Open Systems Interconnection (OSI) communication model, TCP is

in layer 4, the Transport Layer.

Check Your Progress 1

1. State whether True or False:

a) Internet is a Global network and is managed by a profit-oriented

organization.

b) TCP does not control duplication of packets.

c) For logging in to Internet you must have an account on its host machine.

d) A router is used at the network layer.

e) Internet provides only one-way communication.

2. What are the different layers in the TCP/IP networking Model?

3. Describe the facilities provided by the TCP?

1.7 INTERNET ADDRESS

13

Scripting Languages

Addresses are essential for virtually everything we do on the Internet. The IP in

TCP/IP is a mechanism for providing addresses for computers on the Internet.

Internet addresses have two forms:

Person understandable which is expressed as words

Machine understandable which is expressed as numbers

The following can be a typical person understandable address on Internet:

VVS @ ignou.ac.in

VVS is an username which in general is the name of the Internet account. This name

is same as the one, which you may use when logging into the computer on which you

have your Internet account. Logging in is the process of gaining access to your

account on a computer, which is shared by several users. Your Internet account is

created on it.

@ Connect “who” with where:

.ignou is a subdomain (could be several in each could be separated by (dot). Last one

is referred to a domain).

.edu is a domain top or what part in – It refers to “where” part which is a country

code.

1.7.1 Structure of Internet Servers Address

The structure of an Internet server’s address keyed into a client’s software is as

follows:

http://www.microsoft.com

Where:

http is the communication protocol to be used

www is the notation for World Wide Web

.Microsoft is the registered domain Name associated with the IP address of an

Internet Server.

.com the server provides commercial services to clients who connect to it.

To help to speed up access, its IP address can be directly represented in form of

numbers. 127.57.13.1 instead of the domain name, microsoft.com. In this case no

name resolution needs to take place.

An Internet address is a unique 32-bit number that is typically expressed as four 8-bit

octets, with each octet separated by a period. Each of the octets can take on any

number from 0 through 255.

Hosts, Domains and Subdomains

Hosts are in general, individual machines at a particular location. Resources of a host

machine is normally shared and can be utilized by any user on Internet. Hosts and

local networks are grouped together into domains, which then are grouped together

into one more larger domains. For an analogy a host computer is considered as an

apartment building in a housing complex and your account is just an apartment in it.

Domain may be an apartment complex, a town or even a country. Sub-domains may

correspond to organizations such as IGNOU. India comes under a large domain.

“IN”. Computers termed as name servers contain database of Internets host addresses.

They translate word addresses or persons understandable into numeric equivalents.

Let us see another example of Internet address:

http://www.ignou.ac.in

14

The Internet

What does it all mean? Actually to the ISP server, very little. The server wants to see

something quite different. It wants to see a 32-bit number as an Internet address.

Something like this equivalent decimal grouping:

198.168.45.249

The Internet addresses, known as universal resources locators (URL), are translated

from one form to the other using an address resolution protocol. The first address is

in the form we are most used to and that user use to access an Internet site. In this

example, the address is for a website, identified by the hypertext transfer protocol

(http), which controls access to web pages. Following http is a delimiter sequence, ://,

and identification for the world wide web (www).

The domain name, ignou.ac follows www and identifies the general site for the

web.(dot) edu is one example of a domain top, which is a broad classification of web

users. Other common domain tops are:

.com for commerce and businesses

.gov for government agencies

.mil for military sites

.org for all kinds of organizations.

Lastly, in this example is a country code, again preceded by a dot. Here we are using

in for the India, which is the default country.

Addresses may be followed by subdomains separated by dots or slashes (/) as needed.

These addresses are translated into a 32-bit (4 decimal numeric groups) address

shown as for http:// www.ignou.ac.in we will further discuss this topic in the next

section.

1.7.2 Address Space

Internet addresses are divided into five different types of classes. The classes were

designated A through E. class A address space allows a small number of networks but

a large number of machines, while class C allows for a large number of networks but

a relatively small number of machines per network. The following figure lists five

address classes used in classical network addresses.

0 8 16 24 32

0031

0 Network Host

1 0 Network Host

1 1 0 Network Host

1 1 1 0 Multicast address

1 1 1 1 0 Reserved for future use

Class A

Class B

Class C

Class D

Class E

15

Scripting Languages

Figure 2: The IP Address Structure

Regardless of the class of address space assigned, organizations assigned a particular

class of address will not utilize the entire address space provided. This is especially in

the case of class A and Class B address allocation schemes.

Ports

A port is an additional 16-bit number that uniquely identifies the particular service on

any given machine on the Internet. Port numbers are 16 bit wide, therefore each

computer on the Internet has a maximum number of 216 or 65,536 ports. The

particular application is identified by its unique port number in the same way that a

specific television station has a unique channel number.

Port numbers are divided into three ranges:

Well-known ports are those from 0 through 1,023.

Registered ports are those from 1,024 through 49,151.

Dynamic and private ports are those from 49,152 through 65,535.

Well-known ports, those ranging from 0 through 1,023 are where most common

services on the Internet are residing. These ports are controlled and assigned by the

Internet Assigned Number Authority (IANA) and on most systems can be used only

by system (root) processes or by programs executed by privileged users.

1.8 HOW DOES THE INTERNET WORK?

As discussed in the previous section every computer connected to the Internet has a

unique address. Let's say your IP address is 1.2.3.4 and you want to send a message

to the computer with the IP address 5.6.7.8. The message you want to send is "Hello

computer 5.6.7.8!” Let's say you've dialed into your ISP from home and the message

must be transmitted over the phone line. Therefore the message must be translated

from alphabetic text into electronic signals, transmitted over the Internet, and then

translated back into alphabetic text. How is this accomplished? Through the use of a

protocol stack. Every computer needs one to communicate on the Internet and it is

usually built into the computer's operating system (i.e. Windows, Unix, etc.). The

protocol stack used on the Internet is refered to as the TCP/IP protocol stack, which

was discussed in section 1.3.

If we were to follow the path that the message "Hello computer 5.6.7.8!" took from

our computer to the computer with IP address 5.6.7.8, it would happen something like

this:

Figure 3: Environment of the Packet Flow

1. The message would start at the top of the protocol stack on your computer and

work it's way downward.

2. If the message to be sent is long, each stack layer that the message passes

through may break the message up into smaller chunks of data. This is because

data sent over the Internet (and most computer networks) are sent in

16

The Internet

manageable chunks. On the Internet, these chunks of data are known as

packets.

3. The packets would go through the Application Layer and continue to the TCP

layer. Each packet is assigned a port number, which is used by program on the

destination computer to receive the message because it will be listening on a

specific port.

4. After going through the TCP layer, the packets proceed to the IP layer. This is

where each packet receives it's destination address, 5.6.7.8.

5. Now that our message packets have a port number and an IP address, they are

ready to be sent over the Internet. The hardware layer takes care of turning our

packets containing the alphabetic text of our message into electronic signals

and transmitting them over the phone line.

6. On the other end of the phone line your ISP has a direct connection to the

Internet. The ISPs router examines the destination address in each packet and

determines where to send it. Often, the packet's next stop is another router.

More on routers and Internet infrastructure later.

7. Eventually, the packets reach computer 5.6.7.8. Here, the packets start at the

bottom of the destination computer's TCP/IP stack and work upwards.

8. As the packets go upwards through the stack, all routing data that the sending

computer's stack added (such as IP address and port number) is stripped from

the packets.

9. When the data reaches the top of the stack, the packets have been re-assembled

into their original form, "Hello computer 5.6.7.8!"

1.9 INTRANET AND EXTRANET

Intranets are basically “small” Internets. They use the same network facilities that

the Internet does, but access is restricted to a limited sphere. For instance, a company

can set up an intranet within the confines of the company itself. Access can be tightly

controlled and limited to authorized employees and staff. There is no connection to

the Internet or any other outside network. Functions like web sites, file uploads and

downloads, and e-mail is available on intranets within the confines of the network.

Since frivolous sites are no longer available, there is no employee time lost due to

accessing them. There is, of course, the limitation of the networking area. The very

benefit of restricting access to all of the facilities available on the Internet also restricts

communication to other desirable locations. This is where the extranet steps in.

An extranet is network that connects a number of intranets into a truly mini-Internet

Access is extended to all the intranets connected through the extranet, but, again, not

to the Internet. Extranets requires a constant Internet connection and a hypertext

transfer protocol (http) server.

Extranets can also be used to connect an intranet to the Internet so that remote offsite

access can be made into a company’s intranet by an authorized individual. This can

facilitate through an extranet.

Basically, it uses passwords and smart cards to log in to a gateway server that checks

the requester’s security credentials. If the user checks out, he or she is allowed access

into the company’s intranet structure.

A number of URL address are set aside for intranet and extranet use. Essentially

because intranets are self-contained networks, the same set of addresses can be used

by all intranets without conflict. Extranet addresses are designed to recognize the

intranets they connect and correctly preface each intranet address with an identifier.

This allows two interconnected intranets to retain the same set of address values and

keep them from being mistaken. One class A address, ranging from 10.0.0.0 to

10.255.255.255 is reserved for intranet usage. Again, since an intranet is a self-

contained system, it only needs one class A network to designate the main network.

Subnetworks use reserved class B and class C addresses. There are 16 class B

addresses, from 172.16.0.0 ti 172.31.255.255 and 256 class C addresses, which range

from 192.168.0.0 to 192.168.255.255.

17

Scripting Languages

1.10 INTERNET INFRASTRUCTURE

So now you know how packets travel from one computer to another over the Internet.

But what's in-between? What actually makes up the Internet infrastructure or

backbone?

NSPNSPNSP

Figure 4: Internet Backbone

The Internet backbone is made up of many large networks, which interconnect with

each other. These large networks are known as Network Service Providers or NSPs.

These networks peer with each other to exchange packet traffic. Each NSP is

required to connect to Network Access Points or NAPs. At the NAPs, packet traffic

may jump from one NSP's backbone to another NSP's backbone. NSPs also

interconnect at Metropolitan Area Exchanges or MAEs. MAEs serve the same

purpose as the NAPs but are privately owned. NAPs were the original Internet

interconnects points. Both NAPs and MAEs are referred to as Internet Exchange

Points or IXs. NSPs also sell bandwidth to smaller networks, such as ISPs and

smaller bandwidth providers. Below is a picture showing this hierarchical

infrastructure.

This is not a true representation of an actual piece of the Internet. The above figure is

only meant to demonstrate how the NSPs could interconnect with each other and

smaller ISPs. None of the physical network components are shown in this figure. This

is because a single NSP's backbone infrastructure is a complex drawing by itself.

Most NSPs publish maps of their network infrastructure on their web sites and can be

found easily. To draw an actual map of the Internet would be nearly impossible due

to it's size, complexity, and ever changing structure.

The Internet Routing Hierarchy

So how do packets find their way across the Internet? Does every computer

connected to the Internet know where the other computers are? Do packets simply get

'broadcast' to every computer on the Internet? The answer to both the preceeding

questions is 'no'. No computer knows where any of the other computers are, and

packets do not get sent to every computer. The information used to get packets to

their destinations is contained in routing tables kept by each router connected to the

Internet.

Routers are packet switches. A router is usually connected between networks to

route packets between them. Each router knows about it's sub-networks and which IP

18

The Internet

addresses they use. The router usually doesn't know what IP addresses are 'above' it.

Examine the figure below. The black boxes connecting the backbones are routers.

The larger NSP backbones at the top are connected at a NAP. Under them are several

sub-networks, and under them, more sub-networks. At the bottom are two local area

networks with computers attached.

NAP/

routers

My Computer

1.2.3.4

Figure 5: Routes Connecting in Network

When a packet arrives at a router, the router examines the IP address put there by the

IP protocol layer on the originating computer. The router checks it's routing table. If

the network containing the IP address is found, the packet is sent to that network. If

the network containing the IP address is not found, then the router sends the packet

on a default route, usually up the backbone hierarchy to the next router. Hopefully the

next router will know where to send the packet. If it does not, again the packet is

routed upwards until it reaches a NSP backbone. The routers connected to the NSP

backbones hold the largest routing tables and here the packet will be routed to the

correct backbone, where it will begin its journey 'downward' through smaller and

smaller networks until it finds it's destination.

Domain Names and Address Resolution

But what if you don't know the IP address of the computer you want to connect to?

What if you need to access a web server referred to as www.anothercomputer.com?

How does your web browser know where on the Internet this computer lives? The

answer to all these questions is the Domain Name Service or DNS. The DNS is a

distributed database, which keeps track of computer's names and their corresponding

IP addresses on the Internet.

Many computers connected to the Internet host part of the DNS database and the

software that allows others to access it. These computers are known as DNS servers.

No DNS server contains the entire database; they only contain a subset of it. If a DNS

server does not contain the domain name requested by another computer, the DNS

server re-directs the requesting computer to another DNS server.

19

Scripting Languages

DRDO ISRO RelianceTATA

BARC Bharti

Figure 6: DNS Hierarchy

The Domain Name Service is structured as a hierarchy similar to the IP routing

hierarchy. The computer requesting a name resolution will be re-directed 'up' the

hierarchy until a DNS server is found that can resolve the domain name in the

request. Figure 6 illustrates a portion of the hierarchy. At the top of the tree are the

domain roots. Some of the older, more common domains are seen near the top. What

is not shown are the multitude of DNS servers around the world which form the rest

of the hierarchy.

When an Internet connection is setup (e.g. for a LAN or Dial-Up Networking in

Windows), one primary and one or more secondary DNS servers are usually specified

as part of the installation. This way, any Internet applications that need domain name

resolution will be able to function correctly. For example, when you enter a web

address into your web browser, the browser first connects to your primary DNS

server. After obtaining the IP address for the domain name you entered, the browser

then connects to the target computer and requests the web page you wanted.

1.11 PROTOCOLS AND SERVICES ON INTERNET

To work with Internet and to utilize its facilities we use certain tools. For example,

Telnet is a tool, which is utilized for logging on remote computers on the Internet. Let

us briefly discuss about some of the important tools and services.

1.11.1 Domain Name System

Domain name is a name given to a network for ease of reference. Domain refers to a

group of computers that are known by a single common name. Somebody has to

transfer these domain names into IP addresses. It is decided on the physical location

of the web server as well as where the domain name is registered. Some generic

domain names are:

Domain name Description

Com Commercial organization

Edu Educational organization

Gov Government organization

Mil Military group

Org Non-profit organization

Thus, humans use domain names when referring to computers on the Internet,

whereas computers work only with IP addresses, which are numeric. DNS was

developed as a distributed database. The database contains the mappings between the

domain names and IP addresses scattered across different computers. This DNS was

consulted whenever any message is to be sent to any computer on the Internet. DNS

is based on the creation of the hierarchical domain based naming architecture, which

is implemented as a distributed database. It is used for mapping host names and email

20

The Internet

addresses to IP addresses. Each organization operates a domain name server that

contains the list of all computers in that organization along with their IP addresses.

When an application program needs to translate a computer’s name into the

computer’s IP address, the application becomes a client of the DNS. It contacts a

domain name server and sends the server an alphabetic computer name then the

server returns the correct IP address. The domain name system works like a directory.

A given server does not store the names and addresses of all possible computers in

the Internet. Each server stores the name of the computers at only one company or

enterprise.

1.11.2 SMTP and Electronic Mail

One of the very useful things about Internet is that it allows you almost instantly

exchange of electronic message (e-mail) across the worlds. E-mail is a popular way

of communication on the electronic frontier. You can E-mail to your friend or a

researcher or anybody for getting a copy of a selected paper. Electronic mail system

provides services that allowed complex communication and interaction. E-mail

provide the following facilities:

Composing and sending/receiving a message.

Storing/forwarding/deleting/replying to a message.

Sending a single message to more than one person.

Sending text, voice, graphics and video.

Sending a message that interacts with other computer programs.

Another commonly used Internet service is electronic mail. E-mail uses an

application level protocol called Simple Mail Transfer Protocol or SMTP. SMTP is

also a text-based protocol, but unlike HTTP, SMTP is connection oriented. SMTP is

also more complicated than HTTP.

When you open your mail client to read your e-mail, this is what typically happens:

1. The mail client (Netscape Mail, Lotus Notes, Microsoft Outlook, etc.) opens a

connection to it's default mail server. The mail server's IP address or domain

name is typically setup when the mail client is installed.

2. The mail server will always transmit the first message to identify itself.

3. The client will send an SMTP HELO command to which the server will

respond with a 250 OK message.

4. Depending on whether the client is checking mail, sending mail, etc. the

appropriate SMTP commands will be sent to the server, which will respond

accordingly.

5. This request/response transaction will continue until the client sends an SMTP

QUIT command. The server will then say goodbye and the connection will be

closed.

Similarly, when you send an e-mail message your computer sends it to an SMTP

server. The server forwards it to the recipients mail server depending on the email

address. The received message is stored at the destination mail server until the

addressee retrieves it. To receive E-mail a user Internet account includes an electronic

mailbox. A message sent for you is received at your Internet host computer, where it

is stored in your electronic mailbox. As soon as you login into your Internet account,

one of the first things you should do is to check your mailbox.

Sender’s Computer recipient’s

computer

e-mail

Client

e-mail

Server

21

Scripting Languages

TCP/IP used to transfer message

Figure 7: An e-mail transfer across the Internet uses two programs: client and server

E-mail system follows the client-server approach to transfer messages across the

Internet. When a user sends an E-mail message a program on the sender’s computer

becomes a client. It contacts an e-mail server program on the recipient’s computer

and transfers a copy of the message. Some of the mail programs those exist on

Internet are UCB mail, Elm, Pine etc. However, one thing, which you must

emphasize while selecting a mail program, is the user friendliness of that program.

Through E-mail on Internet you can be in direct touch of your friend and colleagues.

Mailing lists on Internet

Another exciting aspect about the E-mail is that you can find groups of people who

share your interests-whether you are inclined toward research, games or astronomy.

E-mail provides a mechanism for groups of people who have shared interests to

establish and maintain contact. Such interest groups are referred to as mailing lists

(lists for short). After all they are mailing lists of the members e-mail addresses. You

can subscribe to any of such lists. You will receive copies of all the mail sent to the

list. You can also send mail to al subscribers of the list.

1.11.3 Http and World Wide Web

One of the most commonly used services on the Internet is the World Wide Web

(WWW). The application protocol that makes the web work is Hypertext Transfer

Protocol or HTTP. Do not confuse this with the Hypertext Markup Language

(HTML). HTML is the language used to write web pages. HTTP is the protocol that

web browsers and web servers use to communicate with each other over the Internet.

It is an application level protocol because it sits on top of the TCP layer in the

protocol stack and is used by specific applications to talk to one another. In this case

the applications are web browsers and web servers.

HTTP is a connectionless text based protocol. Clients (web browsers) send requests

to web servers for web elements such as web pages and images. After the request is

serviced by a server, the connection between client and server across the Internet is

disconnected. A new connection must be made for each request. Most protocols are

connection oriented. This means that the two computers communicating with each

other keep the connection open over the Internet. HTTP does not however. Before an

HTTP request can be made by a client, a new connection must be made to the server.

When you type a URL into a web browser, this is what happens:

1. If the URL contains a domain name, the browser first connects to a domain

name server and retrieves the corresponding IP address for the web server.

2. The web browser connects to the web server and sends an HTTP request (via

the protocol stack) for the desired web page.

3. The web server receives the request and checks for the desired page. If the page

exists, the web server sends it. If the server cannot find the requested page, it

will send an HTTP 404 error message. (404 means 'Page Not Found' as anyone

who has surfed the web probably knows.)

4. The web browser receives the page back and the connection is closed.

5. The browser then parses through the page and looks for other page elements it

needs to complete the web page. These usually include images, applets, etc.

6. For each element needed, the browser makes additional connections and HTTP

requests to the server for each element.

7. When the browser has finished loading all images, applets, etc. the page will be

completely loaded in the browser window.

22

The Internet

Most Internet protocols are specified by Internet documents known as a Request For

Comments or RFCs. RFCs may be found at several locations on the Internet.

WWW is an Internet navigation tool that helps you to find and retrieve information

links to other WWW pages. The WWW is a distributed hypermedia environment

consisting of documents from around the world. The documents are linked using a

system known as hypertext, where elements of one document may be linked to

specific elements of another document. The documents may be located on any

computer connected to the Internet. The word “document” is not limited to text but

may include video, graphics, databases and a host of other tools.

The World Wide Web is described as a “wide area hypermedia information initiative

among to give universal access to large universe of documents”. World Wide Web

provides users on computer networks with a consistent means to access a variety of

media in a simplified fashion. A popular software program to search the Web is

called Mosaic, the Web project has modified the way people view and create

information. It has created the first global hypermedia network.

Once again the WWW provides an integrated view of the Internet using clients and

servers. As discussed earlier, clients are programs that help you seek out information

while servers are the programs that find information to the clients. WWW servers are

placed all around the Internet.

The operations of the Web mainly rely on hypertext as its means of interacting with

users. But what is hypertext? Hypertext as such is the same as regular text that is it

can be written, read, searched or edited; however, hypertext contains connections

within the text to other documents. The hypertext links are called hyperlinks. These

hyperlinks can create a complex virtual web of connections.

Hypermedia is an advanced version of hypertext documents as it contains links not

only to other pieces of text but also to other forms of media such as sounds, images

and movies. Hypermedia combines hypertext and multimedia.

1.11.4 Usenet and Newsgroups

In Internet there exists another way to meet people and share information. One such

way is through Usenet newsgroups. These are special groups set up by people who

want to share common interests ranging from current topics to cultural heritages.

These are currently thousands of Usenet newsgroups.

The Usenet can be considered as another global network of computers and people,

which is interwined with the Internet. However, Usenet does not operate interactively

like the Internet, instead Usenet machines store the messages sent by users. Unlike

mail from mailing lists, the news articles do not automatically fill your electronic

mailbox. For accessing the information on newsnet, one needs a special type of

program called a newsreader. This program help in retrieving only the news you want

from Usenet storage site and display it on your terminal. Usenet is like living thing,

New newsgroups gets added, the groups which have too much traffic get broken up

into smaller specialized groups, the groups even can dissolve themselves. However,

all of this occurs based on some commonly accepted rules and by voting. For Usenet,

there is no enforcement body; it entirely depends on the cooperation of its computers

owners and users.

The newsgroups are really meant fro interaction of people who share your interests.

You can post your own questions as well as your answers to the questions of others,

on the Usenet. One thing, which is worth mentioning here, is that when one is

interacting wit people on Internet certain mannerism should be adopted. These rules

are sometimes called “netiquette”. In a face-to-face conversation you can always see

a person’s facial gestures and hand movements and can ascertain whether he is

23

Scripting Languages

teasing or is being sarcastic or sometimes even lying. However, in on-line interaction

one cannot see the person one is interacting with. The rules of netiquette may help to

compensate some of these limitations of this on-line environment.

1.11.5 FTP

FTP (File Transfer Protocol), a standard Internet protocol, is the simplest way to

exchange files between computers on the Internet. Like the Hypertext Transfer

Protocol (Hypertext Transfer Protocol), which transfers displayable Web pages and

related files, FTP is an application protocol that uses the Internet's TCP/IP protocols.

FTP is commonly used to transfer Web page files from their creator to the computer

that acts as their server for everyone on the Internet. It's also commonly used to

downloading programs and other files to the computer from other servers. However,

for such transfer you need an account name on a host and the password. The FTP

program will make connection with the remote host, which will help you to browse

its directories and mark files for transfer. However, you cannot look at the contents of

a file while you are connected via FTP. You have to transfer the copy and then look

at it once it is on your own account.

FTP includes many commands but only few are used to retrieve a file. A user needs

to understand the three basic commands to connect to remote computer, retrieve a

copy of file and exit the FTP program. The commands with their meanings are:

Command Purpose

Open connect to a remote computer

get retrieve a file from the computer

bye terminate the connection and leave the FTP program

Transferring a file via FTP requires two participants: an FTP client program and FTP

server program. The FTP client is the program that we run on our computers. The

FTP server is the program that runs on the huge mainframe somewhere and stores

tens thousands of files. It is similar to an online library of files. The FTP client can

download (receive) or upload (send) files to the FTP server. Using Web browser you

can download the files but you can not upload the files. FTP applications will help

you to upload the files to the web sites, which you are maintaining.

FTP only understands two basic file formats. It classifies each file either as a text file

or a binary file. A text file contains a sequence of characters collected into lines.

Although computers used ASCII encoding for text files, FTP includes commands to

translate between ASCII and other character encoding. FTP uses the classification

binary file for all nontext files. The user must specify binary for any file that

contains:

A computer program

Audio data

A graphic or video image

A spreadsheet

A document from a word processor

A compressed file

FTP service compress files to reduce the total amount of disk space the files require.

Before transferring a file user must tell FTP that the file contains ASCII text or

nontext file. FTP assumes to perform ASCII transfers unless the user enters the

binary command.

There are many FTP programs that you can download from the Internet. Windows

has its own command line based FTP program. To execute it, select Run from

Windows taskbar and type FTP and press enter. By typing open command you can

connect to any ftp server. To connect to FTP server you must have a login name and

24

The Internet

the password. Most of the FTP servers allow anonymous connections. In this case

username is anonymous and password is your e-mail address.

Another important FTP program, which is available as a shareware, is WSFTP. Using

this window based program it is easier to maintain your web site.

1.11.6 Telnet

TELNET stands for TErminal NETwork. Telnet is both a TCP/IP application and a

protocol for connecting a local computer to a remote computer. Telnet is a program

that allows an Internet host computer to become a terminal of another host on the

Internet. Telnet is the Internet remote login service. Telnet protocol specifies exactly

how a remote login interacts. The standard specifies how to client contacts the server

and how the server encodes output for transmission to the client. To use the Telnet

service, one must invoke the local application program and specify a remote machine.

The local program becomes a client, which forms a connection to a server on the

remote computer. The client passes keystrokes and mouse movements to the remote

machine and displays output from the remote machine on the user’s display screen.

Telnet provides direct access to various services on Internet. Some of these services

are available on your host, but Telnet is especially useful when these services are not

available on your host. For example, if you want to use graphical interfaces designed

by other users then Telnet, allows you to access their hosts and use their new

interfaces. Similarly, whenever someone creates a useful service on his host, Telnet

allows you to access this valuable information resource. This tools Is especially

useful for accessing public services such as library card catalogues, the kind of

databases available on the machine etc. You can also log into any catalogue service

of a library and use it.

The working of TELNET

1. The commands and characters are sent to the operating system on the common

server computer.

2. The local operating system sends these commands and characters to a TELNET

client program, which is located on the same local computer.

3. The TELNET client transforms the characters entered by the user to an agreed

format known as Network Virtual Terminal (NVT) characters and sends them

to the TCP/IP protocol stack of the server computer. NVT is the common

device between the client and server.

4. The commands and text are first broken into TCP and then IP packets and are

sent across the physical medium from the local client computer to the server.

5. At the server computer’s end, the TCP/IP software collects all the IP packets,

verifies their correctness and reconstructs the original command and handover

the commands or text to that computer operating system.

6. The operating system of the server computer hands over these commands or

text to the TELNET server program, which is executing on that remote

computer.

7. The TELNET server program on the remote server computer then transforms

the commands or text from the NVT format to the format understood by the

remote computer. The TELNET cannot directly handover the commands or text

to the operating system so TELNET hands over the commands/text to the

Psuedo-terminal driver.

8. The Pseudo-terminal driver program then hands over the commands or text to

the operating system of the remote computer, which then invokes the

application program on the remote server.

The working of the TELNET is extremely simple. Suppose you are working as a

faculty member of Indira Gandhi National Open University. You have a typical

account FACULTY-1 on the IGNOU computer, which is one of the hosts of the

Internet. You are selected for academic exchange scholarship to USA. You will get a

user account in U.S.A. However, all your colleagues know only your IGNOU

25

Scripting Languages

account. Thus, using Telnet you can always log on to your account in India for mail

your papers for using programs etc.

There are many databases available on the Internet. You can explore these databases

using Telnet. There are going to be many Internet services yet to be created. Every

year and better means of accessing the treasures of the Internet is appearing in which

Telnet is the key for accessing.


1. State whether True or False:

a) E-mail can be used to send text, pictures and movies.

b) Usenet facility is same as that of mailing list facility.

c) Anonymous FTP allows viewing and retrieving a file from the archieve of

a host without having an account on that machine.

d) Telnet is used for remote login.

e) An Internet address is a 16-bit number.

f) Each computer on the Internet has a maximum number of 216 or 65,536

ports.

2. What is an Internet address?

3. What is FTP?

4. What is Telnet?

1.12 INTERNET TOOLS

In this section we shall look at two software tools available on the Internet.

1.12.1 Search Engines

Search Engines are programs that search the web. Web is a big graph with the pages

being the nodes and hyperlinks being the arcs. Search engines collect all the

hyperlinks on each page they read, remove all the ones that have already been

processed and save the rest. The Web is then searched breadth-first, i.e. each link on

page is followed and all the hyperlinks on all the pages pointed to are collected but

they are not traced in the order obtained. Automated search is the service that is

provided by Search engines. An automated search service allows an individual to find

information that resides on remote computers. Automated search systems use

computer programs to find web pages that contain information related to a given

topic. It allows to locate:

Web pages associated with a particular company or individual

Web pages that contain information about a particular product.

Web pages that contain information about a particular topic.

The results of an automated search can be used immediately or stored in a file on disk

to use it later. The results of a search are returned in the form of a web page that has a

link to each of the items that was found. Automated search is helpful when a user

wants to explore a new topic. The automated search produces a list of candidate

pages that may contain information. The user reviews each page in the list to see

whether the contents are related to topic or not. If so, the user records the location or

if not user moves on to the page in the list. Search mechanisms uses a similar method

of search as in the telephone book i.e. before any user invoke the search mechanism a

computer program contacts computers on the Internet, gathers a list of available

information, sorts the list and then stores the result on a local disk on the computer

that runs a search server. When a user invokes a search, the user client program that

contacts the server. The client sends a request that contains the name the user entered.

When the request arrives at the server, it consults the list of file names on its local

disk and provides the result.

1.12.2 Web Browser

26

The Internet

A Web browser is software program that allows you to easily display Web pages and

navigate the Web. The first graphical browser, Mosaic, was developed in Illinois at

the National Center for Supercomputing Applications (NCSA). Each browser

displays Web-formatted documents a little differently. As with all commercial

software, every program has its own special features.

The two basic categories of Web browser are:

Text-only browsers: A text-only browser such as Lynx allows you to view

Web pages without showing art or page structure. Essentially, you look at ASCII text

on a screen. The advantage of a text-only browser is that it displays Web pages very

fast. There's no waiting for multimedia downloads.

Graphical browsers: To enjoy the multimedia aspect of the Web, you must

use a graphical browser such as Netscape Navigator or NCSA Mosaic. Graphical

browsers can show pictures, play sounds, and even run video clips. The drawback is

that multimedia files, particularly graphics, often take a long time to download.

Graphical browsers tend to be significantly slower than their text-only counterparts.

And this waiting time can be stretched even further with slow connections or heavy

online traffic.

Many different browsers are available for exploring the Internet. The two most

popular browsers are Netscape Navigator and Microsoft Internet Explorer. Both of

these are graphical browsers, which means that they can display graphics as well as

text.


1. State whether True or False

a) Surfing means that you are sending for specific information on Internet.

b) HTML is used for creating home page for World Wide Web.

c) Hypermedia is same as Hypertext.

d) Netscape these days is one of the widely used browser.

e) Windows 95 provides software for browsing Internet.

f) Hypertext documents contain links to other documents.

1.13 SUMMARY

This unit describes the basic concepts about an Internet. Internet is a network of

networks where lot of information is available and is meant to be utilized by you. No

one owns the Internet. It consists of a large number of Interconnected autonomous

networks that connect millions of computers across the world. The unit describes the

various tools available on the Internet and the various services provided by the

Internet to users. In this unit we have talked about the Electronic mail Usenet and

newsgroups, FTP, Telnet and search engines. We also describe the use of frequently

asked questions. The unit also describes the importance of Internet addresses.

Addresses are essential for virtually everything we do on the Internet. There are many

services available on the Internet for document retrieval. For browsing the Internet

there are many browsers available such as Gopher and World Wide Web. Both of

these browsers are easy to use and most popular browsing mechanisms on the

Internet.

1.14 SOLUTIONS/ ANSWERS


1. True or false

a) False

b) False

27

Scripting Languages

c) True

d) True

e) False

2. The TCP/IP networking model has five layers, which are:

The Physical Layer

The Data link Layer

The Network Layer

The Transport Layer

The Application layer

3. Transmission Control protocol provide various facilities which include:

TCP eliminates duplicate data.

TCP ensures that the data is reassembled in exactly the order it was sent

TCP resends data when a datagram is lost.

TCP uses acknowledgements and timeouts to handle problem of loss.


1. True or false

a) True

b) True

c) True

d) True

e) False

f) True

2. Addresses are essential for virtually everything we do on the Internet. The IP in

TCP/IP is a mechanism for providing addresses for computers on the Internet.

Internet addresses have two forms:

Person understandable which expressed as words

Machine understandable which reexpressed as numbers

Internet addresses are divided into five different types of classes. The classes

were designated A through E. class A address space allows a small number of

networks but a large number of machines, while class C allows for a large

number of networks but a relatively small number of machines per network.

3. FTP (File Transfer Protocol), a standard Internet protocol. It is the simplest

way to exchange files between computers on the Internet. FTP is an application

protocol that uses the Internet's TCP/IP protocols. FTP is commonly used to

transfer Web page files. Transferring a file via FTP requires two participants:

an FTP client program and FTP server program. The FTP client is the program

that we run on our computers. The FTP server is the program that runs on the

huge mainframe somewhere and stores tens thousands of files.

4. Telnet is both a TCP/IP application and a protocol for connecting a local

computer to a remote computer. Telnet is the Internet remote login service.

Telnet protocol specifies exactly how a remote login interacts. The standard

specifies how to client contacts the server and how the server encodes output

for transmission to the client. To use the Telnet service, one must invoke the

local application program and specify a remote machine.


1. True or false

28

The Internet

a) False

b) True

c) False

d) False

e) True

f) True

29

30

Scripting Languages

UNIT 2 INTRODUCTION TO HTML

Structure Page No.

2.0 Introduction 30 2.1 Objectives 30 2.2 What is HTML? 31 2.3 Basic Tags of HTML 32 2.3.1 HTML Tag 2.3.2 TITLE Tag 2.3.3 BODY Tag 2.4 Formatting of Text 34

2.4.1 Headers 2.4.2 Formatting Tags 2.4.3 PRE Tag 2.4.4 FONT Tag 2.4.5 Special Characters

2.5 Working with Images 41 2.6 META Tag 43 2.7 Summary 45 2.8 Solutions/ Answers 46

2.0 INTRODUCTION

You would by now have been introduced to the Internet and the World Wide Web (often just called the Web) and how it has changed our lives. Today we have access to a wide variety of information through Web sites on the Internet. We can access a Web site if we have a connection to the Internet and a browser on our computer. Popular browsers are Microsoft Internet Explorer, Netscape Navigator and Opera. When you connect to a Web site, your browser is presented with a file in a special format by the Web server on the remote computer. The contents of the file are stored in a special format using Hyper Text Markup Language, often called HTML This format is rendered, or interpreted, by the browser and you then see the page of the web site from your computer. HTML is one language in a class of markup languages, the most general form of which is Standard Generalized Markup Language, or SGML. Since SGML is complex, HTML was invented as a simple way of creating web pages that could be easily accessed by browsers. HTML is a special case of SGML. HTML consists of tags and data. The tags serve to define what kind of data follows them, thereby enabling the browser to render the data in the appropriate form for the user to see. There are many tags in HTML, of which the few most important ones are introduced in this unit. HTML files usually have the extension �.htm� or �.html�. If you want to create Web pages, you need a tool to write the HTML code for the page. This can be a simple text editor if you are hand-coding HTML. You also have sophisticated HTML editors available that automate many (though not all) of the tasks of coding HTML. You also need a browser to be able to render your code so that you can see the results.

2.1 OBJECTIVES

Che table of contents should be updated

After going through this unit you should be able to learn:

basic concepts of HTML; basic tags of HTML; how to control text attributes such as the font;

31

Introduction to

HTML how to work with images in HTML; and significance of Meta Tag

The unit covers only the simpler concepts of HTML and does not by any means deal with the subject comprehensively.

2.2 WHAT IS HTML?

As indicated earlier, HTML stands for HyperText Markup Language. HTML provides a way of displaying Web pages with text and images or multimedia content. HTML is not a programming language, but a markup language. An HTML file is a text file containing small markup tags. The markup tags tell the Web browser, such as Internet Explorer or Netscape Navigator, how to display the page. An HTML file must have an htm or html file extension. These files are stored on the web server. So if you want to see the web page of a company, you should enter the URL (Uniform Resource Locator), which is the web site address of the company in the address bar of the browser. This sends a request to the web server, which in turn responds by returning the desired web page. The browser then renders the web page and you see it on your computer. HTML allows Web page publishers to create complex pages of text and images that can be viewed by anyone on the Web, regardless of what kind of computer or browser is being used. Despite what you might have heard, you don�t need any special software to create an HTML page; all you need is a word processor (such as Microsoft Word) and a working knowledge of HTML. Fortunately, the basics of HTML are easy to master. However, you can greatly relieve tedium and improve your productivity by using a good tool. A simple tool is Microsoft FrontPage that reduces the need to remember and type in HTML tags. Still, there can always be situations where you are forced to handcode certain parts of the web page. HTML is just a series of tags that are integrated into a document that can have text, images or multimedia content. HTML tags are usually English words (such as blockquote) or abbreviations (such as p for paragraph), but they are distinguished from the regular text because they are placed in small angle brackets. So the paragraph tag is <p>, and the blockquote tag is <blockquote>. Some tags dictate how the page will be formatted (for instance, <p> begins a new paragraph), and others dictate how the words appear (<b> makes text bold). Still others provide information - such as the title - that doesn�t appear on the page itself. The first thing to remember about tags is that they travel in pairs. Most of the time that you use a tag - say <blockquote> - you must also close it with another tag - in this case, </blockquote>. Note the slash - / - before the word �blockquote�; that is what distinguishes a closing tag from an opening tag. The basic HTML page begins with the tag <html> and ends with </html>. In between, the file has two sections - the header and the body. The header - enclosed by the <head> and </head> tags - contains information about a page that will not appear on the page itself, such as the title. The body - enclosed by <body> and </body> - is where the action is. Everything that appears on the page is contained within these tags. HTML pages are of two types:

Static Dynamic

Static Pages

Static pages, as the name indicates, comprise static content (text or images). So you can only see the contents of a web page without being able to have any interaction with it.

32

Scripting Languages

Dynamic Pages

Dynamic pages are those where the content of the web page depend on user input. So interaction with the user is required in order to display the web page. For example, consider a web page which requires a number to be entered from the user in order to find out if it is even or odd. When the user enters the number and clicks on the appropriate button, the number is sent to the web server, which in turn returns the result to the user in an HTML page.

2.3 BASIC TAGS OF HTML

Let us now look at tags in more detail. A <TAG> tells the browser to do something. An ATTRIBUTE goes inside the <TAG> and tells the browser how to do it. A tag can have several attributes. Tags can also have default attributes. The default value is a value that the browser assumes if you have not told it otherwise. A good example is the font size. The default font size is 3. If you say nothing the size attribute of the font tag will be taken to have the value 3. Consider the example shown in Fig. 2.1. Type the code specified in the figure in a text editor such as notepad and save it as �fig1.html�. To render the file and see your page you can choose one of two ways: 1) Find the icon of the html file you just made (fig1.htm) and double click on it. Or- 2) In Internet Explorer, click on File/Open File and point to the file (fig1.htm).

Figure 2.1: A Simple Web Page

<HTML> <!- - This is a comment - - > <HEAD> <TITLE> IGNOU </TITLE> </HEAD> <BODY> This is my first web page. </BODY> </HTML>

2.3.1 HTML Tag

As shown in Figure.2.1, <HTML> is a starting tag. To delimit the text inside, add a closing tag by adding a �/� to the starting tag. Most but not all tags have a closing tag. It is necessary to write the code for an HTML page between <HTML> and </HTML>. Think of tags as talking to the browser or, better still, giving it instructions. What you have just told the browser is 'this is the start of an HTML document' (<HTML>) and 'this is the end of an HTML document' (</HTML>). Now you need to put some matter in between these two markers.

33

Introduction to

HTML Every HTML document is segregated into a HEAD and BODY. The information about the document is kept within <HEAD> tag. The BODY contains the page content.

2.3.2 TITLE Tag

The only thing you have to concern yourselves with in the HEAD tag (for now) is the TITLE tag. The bulk of the page will be within the BODY tag, as shown in Figure.2.1. <HEAD> <TITLE> IGNOU </TITLE> </HEAD> Here the document has been given the title IGNOU. It is a good practice to give a title to the document created. What you have made here is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components. Secondly, the document title is what appears at the very top of the browser window.

2.3.3 BODY Tag

If you have a head, you need a body. All the content to be displayed on the web page has to be written within the body tag. So whether text, headlines, textbox, checkbox or any other possible content, everything to be displayed must be kept within the BODY tag as shown in Figure 2.1. Whenever you make a change to your document, just save it and hit the Reload/Refresh button on your browser. In some instances just hitting the Reload/Refresh button doesn�t quite work. In that case hit Reload/Refresh while holding down the SHIFT key. The BODY tag has following attributes:

a. BGCOLOUR: It can be used for changing the background colour of the page. By default the background colour is white.

b. BACKGROUND: It is used for specifying the image to be displayed in the background of the page.

c. LINK: It indicates the colour of the hyperlinks, which have not been visited or clicked on.

d. ALINK: It indicates the colour of the active hyperlink. An active link is the one on which the mouse button is pressed.

e. VLINK: It indicates the colour of the hyperlinks after the mouse is clicked on it. f. TEXT: It is used for specifying the colour of the text displayed on the page. Consider the following example:

<HTML> <TITLE> IGNOU</TITLE> <BODY BGCOLOUR="#1234567" TEXT = �#FF0000�> Welcome to IGNOU </BODY>

Scripting Languages </HTML>

Figure 2.2: A Web Page with a Background Colour

The values specified for BGCOLOUR and TEXT tags indicate the colour of the background of the page and that of the text respectively. These are specified in hexadecimal format. The range of allowable values in this format is from �#000000� to �#FFFFFF�. The�#� symbol has to precede the value of the colour so as to indicate to the browser that has to be interpreted as a hexadecimal value. In this six digit value, the first two digits specify the concentration of the colour red, the next two digits specify the concentration of the colour green and the last two digits specify the concentration of the colour blue. So the value is a combination of the primary colours red, green and blue and that is why it is called RGB colour. If we specify the value �#FF0000�, the colour appears to be red.�#000000� gives black and �#FFFFFF� gives the colour white. You also have the option of specifying the colour by giving its name, like: <BODY TEXT = �WHITE�>. You can also specify a background image instead. (Note that the image should be in the same folder as your HTML file. More on this below). <HTML> <BODY BACKGROUND="swirlies.gif"> Welcome to INDIA </BODY> </HTML>

Figure 2.3: A Web Page with an Image in the Background

2.4 FORMATTING OF TEXT

Text formatting, in other words presenting the text on an HTML page in a desired manner, is an important part of creating a web page. Let us understand how we can lay out of text controls its appearance on a page.

2.4.1 Headers

34

35

Introduction to

HTML Headers are used to specify the headings of sections or sub-sections in a document. Depending on the desired size of the text, any of six available levels (<H1> to <H6>) of headers can be used. Figure 2.4 shows the usage and varying size of the rendered text depending upon the tag used.

<HTML> <HEAD> <TITLE> IGNOU</TITLE> </HEAD> <BODY> <CENTER>

<H1> Header Level 1</H1> <H2> Header Level 2</H2> <H3> Header Level 3</H3> <H4> Header Level 4</H4> <H5> Header Level 5</H5> <H6> Header Level 6</H6>

</CENTER> </BODY> </HTML>

Figure 2.4: Rendering of the Six Header Levels

There is no predefined sequence for using the different levels of the header tags nor any restrictions on which one can be used. So the user has the option of using any level of header tag anywhere in the document. If you want to center text on a page, use the CENTER tag. The text written between <CENTER> and </CENTER> tag gets aligned in the center of the HTML page. As seen in Figure 2.4, the maximum size of the text is displayed using the <H1> tag. So the size goes in decreasing order with the increasing order of the level (i.e. From <H1> to <H6>).

2.4.2 Formatting Tags

Let us now look at some more tags that can be used to format text. These are all given in the example shown in Figure 2.5.

<HTML> <HEAD> <TITLE> IGNOU</TITLE> </HEAD> <BODY>

<B> IGNOU </B> provides several <I> programmes </I> in the <B><I>Computer </I></B> stream. <P> One of the <I> programmes </I> is <B><U> MCA</U></B> </P> <B>MCA </B> stands for <TT> Master Of Computer Applications </TT>

<BR>

36

Scripting Languages <S>For MCA</S> <B> IGNOU </B> is considered to be one of the premier universities. <BR> <STRONG>IGNOU</STRONG> believes in <STRONG><EM> Quality</EM></STRONG> education <BR> <P>

According to <CITE> IGNOU, </CITE> <B> MCA<B> is one of its best programmes offering convenient timings to the student so that s/he can pursue the course while working at a job.

</P> <BLOCKQUOTE>

For convenience all the courses offered by IGNOU can be seen on its website. A student has also been provided the flexibility of seeing all the information regarding admission to the next semester, examination result etc. on its website.

</BLOCKQUOTE> <HR NOSHADE> <B> IGNOU contact details are : <ADDRESS>

IGNOU, <BR> MAIDAN GARHI, <BR> NEW DELHI � 110 068 <BR> Website : www.ignou.ac.in

</ADDRESS> </BODY> </HTML>

Figure 2.5: An Example showing Various Formatting Tags.

a. BOLD: The text can be displayed in boldface by writing it in between the <B> and

</B> tags.

b. ITALICS: It starts with <I> and ends with </I> tag. It is used to display the text in italics.

c. UNDERLINE: It is used for underlining the text to be displayed. The <U> tag is used for this purpose. These tags can be nested. So in order to see the text in boldface, in italics and underlined, it should be placed between the <B><I><U> and </U></I></B> tags. Note that the closing tags are written in reverse order, because any tag used within some other tag should be closed first.

d. PARAGRAPH: If you want to display the text in the form of paragraphs, then the <P> tag should be used.

e. TT: The <TT> tag is used for displaying text in a fixed width font similar to that of a typewriter.

37

Introduction to

HTML

f. STRIKE: If you want the text to be marked with a strikethrough character, place it within the <S> and </S> tags.

g. STRONG: There are certain text-based browsers that do not render the text as

boldfaced. So you can use the <STRONG> tag instead of the <B> tag. This displays the text to stand out in the most appropriate manner for the browser.

h. EM: Just as the <STRONG> tag corresponds to the <B> tag, the <EM> can be

used instead of the <I> tag. The reason for using it is the same as for the <STRONG> tag. The <EM> tag is used for emphasizing the text in the manner most appropriate to the browser.

i. BR: This tag is used for inserting a line break. The text written after the <BR> tag

is displayed from the beginning of the next line onwards. This tag does not need a corresponding terminating tag.

j. HR: This tag puts a horizontal line on the page. It has the following attributes:

ALIGN: It is used for aligning the line on the page. The possible values of this attribute are LEFT, RIGHT, and CENTER. It is useful when the width of the line is less than the width of the page.

NOSHADE: This attribute is used to prevent any shading effect. SIZE: It is used for specifying the thickness of the line. WIDTH: You can set the width of a line using this attribute. The value can be

specified either in pixels or as a percentage of the width of the page, e.g., <HR WIDTH = �30%�>.

k. BLOCKQUOTE: This tag indents the left margin of the text. It is used for

displaying the text as quoted text as shown in Figure 2.5.

l. ADDRESS: This tag, as shown in Figure 2.5, displays the text in italics.

m. CITE: The text placed in between the <CITE> and </CITE> tags is rendered in italics by the browser.

2.4.3 PRE Tag

This tag is used to present the text exactly as written in the code, including whitespace characters. It is terminated by a </PRE> tag. Consider the example shown in Figure 2.6 to understand how this tag works.

<HTML> <HEAD>

<TITLE>IGNOU</TITLE> </HEAD> <BODY>

<PRE>

IGNOU also offers a virtual campus. Studying through the virtual campus is a new concept in the field of education and this is the first such experiment in India. While studying through the virtual campus mode, students have access to the following learning resources and experiences:

Satellite based interactive tele-conferencing sessions. Viewing recorded video sessions. Computer based tutorials on CD-ROM.

Printed booklets for specific

38

Scripting Languages </PRE> </BODY>

</HTML>

Figure 2.6: Presenting Preformatted Text

As shown in Figure 2.6, the format of the text presented in the browser remains the same as written in the code. If we do not use the <PRE> tag, the browser condenses the white space when presenting the text on the web page. 2.4.4 FONT Tag

HTML provides the flexibility of changing the characteristics of the font such as size, colour etc. Every browser has a default font setting that governs the default font name, size and colour. Unless you have changed it, the default is Times New Roman 12pt with the colour being black. Now with IE 6.0 (Internet Explorer) you can specify font names other than the default, such as ARIAL and COMIC SANS. Consider the example shown in Figure 2.7.

<HTML> <HEAD>

<TITLE> IGNOU </TITLE> </HEAD> <BODY BGCOLOUR="#FFFFFF"> <CENTER>

Welcome to <FONT SIZE=6>INDIA </FONT><BR> Welcome to <FONT FACE = �ARIAL� SIZE=6>INDIA </FONT><BR> Welcome to <FONT FACE = �ARIAL� SIZE=6 COLOUR = �BLUE�>INDIA </FONT><BR>

</CENTER> </BODY> </HTML>

39

Introduction to

HTML

Figure 2.7: Using the FONT Tag

Let us look at the syntax of the <FONT> tag with its different attributes. <FONT FACE = �name� SIZE = n colour = #RGB > The attributes are:

a. FACE: This attribute is used to change the font style. Its value should be given as the name of the desired font. But the font name specified must be present in the system, otherwise the default-name is used by the browser. The font will only display if the user has that font installed on the computer. Arial and Comic Sans MS are pretty widely distributed with Microsoft Windows. So if you are using a Microsoft supplied operating system, these are likely to be available on your computer. In Figure 2.7, you see an example of the Arial font being used.

b. SIZE: Font can be displayed in any of the 7 sizes:

Tiny Small Regular Extra

Medium Large Real Big Largest

1 2 3 4 5 6 7 c. COLOUR: With this attribute you can change the desired font colour. The values

can be specified either by using the hexadecimal format as already described, i.e., #RGB, or by the name of the colour. The hex code of the colour has been explained earlier in this unit. As shown in Figure 2.7, the value of the colour attribute in the third line has been specified as �Blue�. So the text present in the code between the <FONT> and </FONT> tags appears in blue. By default the colour of the text is black. If we specify the text colour in the <FONT> tag then this value overrides the colour value, if any, specified in the <BODY> tag.

2.4.5 Special Characters

You have seen that there are certain characters that have special meaning in HTML code. For example, the �< � and � > � characters delimit tags. If you want to display such characters on the web page, you have to take care that the characters are not interpreted and are displayed literally. To display the �< � character, it can be specified as �&lt�. The �&� interprets the �lt� as the �< � symbol and displays it. But now what if you want to display the & symbol itself? Simply writing �&� in the code will not display it. But first, let us see how to display some special characters. Consider the example shown in Figure 2.8 and also look at Table 2.1.

<HTML> <BODY BGCOLOUR= #FFFFFF�>

This is          Used for         blank space. <BR> < is the Less Than symbol <BR> > is the Greater Than symbol <BR>

40

Scripting Languages & is the ampersand symbol <BR> " is the quotation mark symbol <BR> à is small a, grave accent symbol <BR> À is capital a, grave accent symbol <BR> ñ is small n, tilde symbol <BR> Ñ is capital n, tilde symbol <BR> ü is the umlaut small u symbol <BR> Ü is the umlaut <BR> is the symbol Delta<BR> ¼ is the quarter symbol <BR> ½is the hay symbol <BR>

</BODY> </HTML>

Figure 2.8: Entering Special Characters

The special characters shown in Figure 2.8 are some of the most frequently used characters displayed on web pages. Each of the special characters can be displayed by using its character sequence after the �&�. These can be seen in the following Table 2.1.

Table 2.1: Displaying Special Characters

The browser will display your text in a steady stream unless you tell it to do so otherwise with line breaks. It will reduce any amount of white space to a single space. If you want more spaces, you must use the space character ( ). If you hit Return (or Enter) while you are typing, the browser will interpret that as a space unless there is already a space there.

Special Character Character Symbol Description

< < Less-than symbol > > Greater-than symbol & & Ampersand � " Quotation Mark Blank space à à small a, grave accent À À capital A, grave accent

ñ small n, tilde Ñ Ñ capital N, tilde ü ü umlaut small u Ü Ü umlaut capital U

û delta ¼ ¼ One Fourth ½ ½ Half

Clease correct this to show

Clease correct this to sh

Clease omit the delta sym

... [1]

... [2]

... [3]

41

Introduction to

HTML Consider another example, which shows how to display multiple blank lines. Code a space character with a line break for each blank line you want.

<HTML> <HEAD>

<TITLE>IGNOU</TITLE> </HEAD> <BODY BGCOLOUR="#FFFFFF">

Welcome to <BR> <BR> <BR> <BR> <BR> <BR>INDIA

</BODY> </HTML> Check Your Progress 1

Describe yourself on a web page and experiment with colours in BGCOLOUR, TEXT, LINK, VLINK, and ALINK. Try out different fonts and sizes and also the other tags you have studied so far, such as the <PRE> tag, as well. Check Your Progress 2

Add the following information to the web page that you created above.

�Job: Software Engineer The requirement for the job is that the person should be B.E./M.E/M.C.A. having an aggregate score of 70% or above. The job is project based, so it would be for ½ year only initially. ¼ of the salary would be deducted towards income tax, PF and other statutory deductions.�

2.5 WORKING WITH IMAGES

Let us now make our web pages more exciting by putting in images.

You specify an image with the <IMG> (image) tag. Earlier in this unit, displaying the images on a page was explained using the BACKGROUND attribute of the <BODY> tag, which displays the image as the background image. Background images make the page heavy and hence the page takes a considerable amount of time to load. But the <IMG>tag can be used for displaying an image with the desired height and width. Let us look at an example (Figure 2.9). <HTML>

<HEAD> <TITLE>IGNOU</TITLE>

</HEAD> <BODY BGCOLOUR="#FFFFFF">

<IMG SRC="image.gif" WIDTH=130 HEIGHT=101 ALT = "IMAGE IS TURNED OFF" ALIGN = "BOTTOM" BORDER = 2> This text is placed at the middle of the image.

42

Scripting Languages </BODY> </HTML>

Figure 2.9: Displaying Images on a Web Page

Let us take a look at the syntax of the <IMG> tag:

<IMG SRC = �FILENAME.GIF� WIDTH = �value� HEIGHT = �value� ALT = �alternate text� BORDER = �value� ALIGN = �value�>

a. SRC: This attribute specifies the pathname to the source file that contains the image. The value in the above example, "image.gif", means that the browser will look for the image named image.gif in the same folder (or directory) as the html document itself.

b. WIDTH: This is used for specifying the desired width of the image. c. HEIGHT: This is used for specifying the desired height of the image. d. BORDER: An important attribute of the IMG tag is BORDER. This attribute

specifies the width of the border of the image. By default it is 0, i.e. there is no border. As shown in Figure 2.9 the image �image.gif� has been given a border 2 pixel wide. The following code gives a wider border to the above image.

<BODY BGCOLOUR="#FFFFFF">

<IMG SRC="image.gif" WIDTH=130 HEIGHT=101 BORDER=10> </BODY>

e. ALT: Another IMG attribute that is important is ALT. ALT is sort of a substitute

for the image that is displayed or used when the user is using a browser that does not display images. Someone may be using a text only browser, he may have image loading turned off for speed or he may be using a voice browser (a browser where the web page is read out). In those cases, that ALT attribute could be very important to your visitor as it could be used (given the proper text) to describe the image that is not on the screen.


Create your own background with a paint program using the following steps:

Create a small graphic with the paint program. Save it as a .jpg or .gif file in the same subdirectory (or folder) that you are

keeping the html page that you have been creating. Create a simple HTML file with a background, and put the name of your .jpg or

43

Introduction to

HTML .gif file after the BACKGROUND attribute. (Note: You can easily create the simple html file by copying the html tags above from this web page and pasting them into your new html file. Be sure to substitute the name of your .jpg or .gif file for �image.gif�).

Save the simple html file that you have just created and open it with your web

browser. What do you see? When you are finished, return to this page and continue.

2.6 META TAG

You might be aware of, and perhaps may have used, search engines such as Google to look for web pages on a topic of interest. The META Tag comes in useful if you want your web page to be easily locatable by search engines. When you enter a search string, the search engine shows web pages containing that string, provided the web page has used those in META tag appropriately. The search engine interacts with the META tag of the HTML page in order to find the required string. Information inside a Meta element should be such as to describe the document. Consider the following example (Figure 2.10).

<HTML> <HEAD>

<TITLE>IGNOU</TITLE> <META NAME="author" CONTENT="IGNOU"> <META NAME="description " CONTENT="This website shows you the

different courses offered by IGNOU"> <META NAME="keywords " CONTENT=" Website, different courses offered,

IGNOU,mca,bca"> </HEAD> <BODY>

<P> The meta attributes of this document identify the author and courses offered. </P>

</BODY> </HTML>

Figure 2.10: Using the META Tag

Meta tags have two attributes:

a. NAME: This attribute is used for identifying the type of META tag you are including.

b. CONTENT: This attribute is used to specify the keywords that the search engine catalogs.

Consider the following code of the example shown in Figure 2.10.

44

Scripting Languages <META NAME= �description� CONTENT="This website shows you the different courses offered by IGNOU"> The CONTENT attribute provides the list of words in the form of a sentence to the search engine. So if someone searches for one of the keywords listed by you in the META tag, then your web site would also appear in the result of the search. It is useful to include META tags that include as many keywords as possible. This makes the web page more likely to show up in a search. You can also specify keywords by separating them by commas as shown in the following code fragment of Figure 2.10. <META NAME= �keywords� CONTENT= �Website, different courses offered, IGNOU,mca,bca�> You can use either of the methods of specifying the META tag as convenient. Consider another example shown in Figure 2.11. This example demonstrates how to redirect a user if your site address has changed.

<HTML> <HEAD>

<TITLE>IGNOU</TITLE> <META HTTP-EQUIV="Refresh"

CONTENT="5;URL=http://www.ignou.ac.in"> </HEAD> <BODY>

<P> Sorry! We have moved! The new URL is: www.ignou.ac.in </p> <p> You will be redirected to the new address in five seconds. </p>

</BODY> </HTML>

Figure 2.11: Redirecting a User if the Site has Moved

Consider the following code of Figure 2.11 <META HTTP-EQUIV= �Refresh� CONTENT=�5;URL=http://www.ignou.ac.in�> It indicates to the browser that the page has to be refreshed in 5 seconds with the new URL �http://www.ignou.ac.in�. So when the user sees this page by specifying its original URL,the browser is redirected to the webpage �www.ignou.ac.in� after five seconds. This type of redirection is useful when you want that a user accessing your old website should automatically be redirected to the new website address.

45

Introduction to

HTML Now let us consider an example that makes use of almost all the tags explained so far.

Case Study: Design a single page web site for a store listing the products and services offered. The store sells computers and related products. The site should contain images explaining the products graphically.

<HTML> <HEAD> <TITLE> SOLVED CASE STUDY FOR HTML </TITLE> </HEAD> <BODY LINK="#0000ff" VLINK="#800080"> <P ALIGN="CENTER"> </P> <B><I><U><FONT SIZE=5><P ALIGN="CENTER">ABC Products</P> </FONT> </B></O></I><P>ABC store sells the latest in computers and computer products. Besides, we also stock stationery.</P> <P ALIGN="CENTER"><HR></P> <B><U><P>Product 1.</P> </U></B><P><IMG SRC="Image1.gif" WIDTH=127 HEIGHT=102></P> <P>This is a notebook. It has 200 pages. Each page has three columns with a heading for date, name and address. Its cost is Rs. 100 only.</P> <P ALIGN="CENTER"><HR></P> <B><U><P>Product 2.</P> </U></B><P><IMG SRC="Image2.gif" WIDTH=127 HEIGHT=102></P> <P>This is a computer. It has 512 MB RAM with a 2.3 GHz processor and an 80 GB HDD. Its cost is Rs. 30,000 only. It is pre-loaded with Windows 2003. You can buy Microsoft Office software too from us.</P></BODY> </HTML>


Design a single page web site for a university containing a description of the courses offered. It should also contain some general information about the university such as its history, the campus, its unique features and so on. The site should be coloured and each section should have a different colour.

2.7 SUMMARY

In this unit we have learnt how to create simple HTML pages. The contents of the page have to be written within the BODY tag. The HEAD tag includes the title of the document. An important part of displaying a page is the proper formatting of the text. There exist many tags to do this job. The headers of the sections and sub-sections of the document can be displayed using the header tags (<H1> to <H6>). The <P> tag is used to demarcate a paragraph. The <B>, <I> and <U> tags are used to mark the text as bold, italics and underlined respectively. The <STRONG> and <EM> tags are used to emphasize the text in bold and italics. The <BLOCKQUOTE> tag indents the left margin of the text. The <ADDRESS> tag displays the text in italics. Any text placed between the <CITE> and </CITE> tags, is rendered in italics by the browser. You can display the text exactly as written in the code using the <PRE> tag. The size, colour and the type of the font can be specified using the <FONT> tag. The <IMG> tag is used for inserting images in the document. We have also looked at the very useful <META> tag. This tag is used to redirect the users to other pages, and to provide information about the page. References: INTERNET & WORLD WIDE WEB BY DEITEL, DEITEL & NIETO HANDS ON HTML BY GREG ROBERTSON

46

Scripting Languages



1. <HTML> <HEAD> </HEAD> <BODY LINK="#0000ff" VLINK="#ffff99" BGCOLOUR="#FFFFFF"> <B><FONT SIZE=4><FONT FACE="Arial, sans-serif">Ram</FONT></FONT></B></P> <B><U><FONT SIZE=3><FONT FACE="Arial, sans-serif">Qualification</FONT></FONT></U></B></P> <FONT FACE="Arial, sans-serif"><B>Title</B></FONT>                          <FONT FACE="Arial, sans-serif"><B>Authority</B></FONT>                  <FONT FACE="Arial, sans-serif"><B>Division %</B></FONT>                          <FONT FACE="Arial, sans-serif"><B>Year </B></FONT>                  <BR> <FONT FACE="Arial, sans-serif">10</FONT>             &nbsp      <FONT FACE="Arial, sans-serif">CBSE Board</FONT>

<FONT FACE="Arial, sans-serif">60.00%</FONT>                                <FONT FACE="Arial, sans-serif">1994</FONT>          <BR><FONT FACE="Arial, sans-serif">12 </FONT>             &nbsp      <FONT FACE="Arial, sans-serif">CBSE Board</FONT>                        <FONT FACE="Arial, sans-serif">67.00%</FONT>

47

Introduction to

HTML <FONT FACE="Arial, sans-serif">1996</FONT>          <BR><FONT FACE="Arial, sans-serif">B.E.</FONT>     &nbsp    &nbsp    &nbsp <FONT FACE="Arial, sans-serif">Delhi University</FONT>     &nbsp    &nbsp    &nbsp <FONT FACE="Courier, monospace">I</FONT><FONT FACE="Arial, sans-serif"> Division</FONT>     &nbsp    &nbsp    &nbsp    &nbsp    &nbsp     <FONT FACE="Arial, sans-serif">1999</FONT> <BR><BR><B><U><FONT SIZE=3><FONT FACE="Arial, sans-serif">Personal Details</FONT></FONT></U></B> <PRE> <FONT FACE="Arial, sans-serif"> Father's Name: Mr. Shyam mehta Date of Birth: 23 Jan, 1976. </FONT> <FONT FACE="Arial, sans-serif"> Address: A2-81b, East Of kailash,New Delhi. Tel: 29090909,9220101010</FONT> <FONT FACE="Arial, sans-serif"> Email: [email protected] Sex: Male Marital Status: Single Interests and activities: Troubleshooting hardware and software problems. </FONT> </PRE> </BODY> </HTML>


2. <HTML> <HEAD> </HEAD> <BODY LINK="#ffff00" VLINK="#ffff99" BGCOLOUR="#ffffff"> <PRE> <U><B><FONT FACE="Times New Roman, serif">Job: Software Engineer </FONT></B></U> <FONT FACE="Times New Roman, serif">

The requirement for the job is that the person should be B.E./M.E/M.C.A having an aggregate score of 70% or above. The job is project based, so it would be for ½ year only initially. ¼ of the salary would be deducted towards income tax, PF and other statutory deductions. </PRE> <B><FONT SIZE=4><FONT FACE="Arial, sans-

Comment: Please correct the solution to reflect the pre-formatted text as amended in the question.

48

Scripting Languages serif">Ram</FONT></FONT></B></P> <B><U><FONT SIZE=3><FONT FACE="Arial, sans-serif">Qualification</FONT></FONT></U></B></P> <FONT FACE="Arial, sans-serif"><B>Title</B></FONT>                          <FONT FACE="Arial, sans-serif"><B>Authority</B></FONT>

<FONT FACE="Arial, sans-serif"><B>Division %</B></FONT>                          <FONT FACE="Arial, sans-serif"><B>Year </B></FONT>                  <BR> <FONT FACE="Arial, sans-serif">10</FONT>             &nbsp      <FONT FACE="Arial, sans-serif">CBSE Board</FONT>

<FONT FACE="Arial, sans-serif">60.00%</FONT>

<FONT FACE="Arial, sans-serif">1994</FONT>          <BR><FONT FACE="Arial, sans-serif">12 </FONT>             &nbsp      <FONT FACE="Arial, sans-serif">CBSE Board</FONT>

<FONT FACE="Arial, sans-serif">67.00%</FONT>                                <FONT FACE="Arial, sans-serif">1996</FONT>          <BR><FONT FACE="Arial, sans-serif">B.E.</FONT>     &nbsp    &nbsp    &nbsp <FONT FACE="Arial, sans-serif">Delhi University</FONT>

49

Introduction to

HTML     &nbsp    &nbsp    &nbsp <FONT FACE="Courier, monospace">I</FONT><FONT FACE="Arial, sans-serif"> Division</FONT>     &nbsp    &nbsp    &nbsp    &nbsp    &nbsp     <FONT FACE="Arial, sans-serif">1999</FONT> <BR><BR><B><U><FONT SIZE=3><FONT FACE="Arial, sans-serif">Personal Details</FONT></FONT></U></B> <PRE> <FONT FACE="Arial, sans-serif"> Father's Name : Mr. Shyam mehta Date of Birth : 23 Jan,1976. </FONT> <FONT FACE="Arial, sans-serif"> Address: A2-81b, East Of kailash,New Delhi. Tel.: 29090909,9220101010</FONT> <FONT FACE="Arial, sans-serif"> Email: [email protected] Sex : Male Marital Status : Single Interests and activities : Troubleshooting hardware and software problems. </FONT> </PRE> </FONT>

</BODY> </HTML>


1. <HTML> <HEAD> <TITLE>IGNOU</TITLE> </HEAD> <BODY BGCOLOUR="#FFFFFF"> <IMG SRC="abc.jpg" WIDTH=130 HEIGHT=101 ALT = " IMAGE IS TURNED OFF" ALIGN = "MIDDLE" BORDER = 2> This text is placed at the middle of the image.

Comment: This solution does not reflect an answer to the question. There the image was to form the page background, for instance. Please amend the solution.

</BODY> </HTML>


1. <HTML> <HEAD> </HEAD> <BODY LINK="#0000ff" VLINK="#800080" BGCOLOUR="#ff6600">

<P ALIGN="CENTER"> </P> <B><I><U><FONT SIZE=4><P ALIGN="CENTER">IGNOU</P> </I></U></FONT><FONT SIZE=2><P>I</B>ndira <B>G</B>andhi <B>N</B>ational <B>O</B>pen University is a very old and reputed

50

Scripting Languages University. IGNOU offers various types of courses that are both academic and technical. </P> <P> </P> </FONT><FONT SIZE=4 COLOUR="#0000ff"><P>Master in Computer Applications</P> </FONT><FONT COLOUR="#0000ff"><P>This course has 6 semesters and the total duration is 3 years. The maximum duration allowed for completing the course is 7 years. The fee per semester is Rs 5000 </FONT> </P> <FONT SIZE=4 COLOUR="#00ff00"><P>Bachelor in Computer Applications</P> </FONT><FONT COLOUR="#00ff00"><P>This course has 6 semesters and the total duration is 3 years. The maximum duration allowed for completing the course is 6 years. The fee per semester is Rs 3000</P> </FONT><FONT SIZE=4 COLOUR="#ff0000"><P>Bachelor in Information Technology</P> </FONT><FONT COLOUR="#ff0000"><P>This course has 6 semesters and the total duration is 3 years. The maximum duration allowed for completing the course is 5 years. The fee per semester is Rs 10,000.</P></FONT></BODY> </HTML>

Page 40: [1] Comment milind

Please correct this to show a small �a� with a grave accent.


Please correct this to show a small n with a tilde.


Please omit the delta symbol if it is not displaying correctly.

51

Advanced HTML

UNIT 3 ADVANCED HTML

Structure Page No.

3.0 Introduction 51

3.1 Objectives 51

3.2 Links 52 Anchor tag

3.3 Lists 53 3.3.1 Unordered Lists

3.3.2 Ordered Lists

3.3.3 Definition Lists

3.4 Tables 55 3.4.1 TABLE, TR and TD Tags

3.4.2 Cell Spacing and Cell Padding

3.4.3 Colspan and Rowspan

3.5 Frames 60 3.5.1 Frameset

3.5.2 FRAME Tag

3.5.3 NOFRAMES Tag

3.6 Forms 66 3.6.1 FORM and INPUT Tag

3.6.2 Text Box

3.6.3 Radio Button

3.6.4 Checkbox

3.6.5 SELECT Tag and Pull Down Lists

3.6.6 Hidden

3.6.7 Submit and Reset

3.7 Some Special Tags 71 3.7.1 COLGROUP

3.7.2 THEAD, TBODY, TFOOT

3.7.3 _blank, _self, _parent, _top

3.7.4 IFRAME

3.7.5 LABEL

3.7.6 Attribute for <SELECT>

3.7.7 TEXTAREA

3.8 Summary 79


3.0 INTRODUCTION

In the previous unit you have learned the basics of HTML. After learning about how

to make static web pages, let us now learn how to develop Interactive Web sites. A

good web site should be interactive and easy to use and understand. Of course, very

simple web sites that merely need to present some static information may not provide

for user input. Interactive web sites are those that are capable of taking input from

the user and presenting the output on the basis of the inputs given. To be able to do

so, you will need more HTML features than have been covered so far. Features like

Links, Lists, Tables, Input controls will allow you to create sophisticated web pages

that respond dynamically to user input. HTML provides all these features using

different tags such as A, UL, OL, INPUT, FRAMESET and others, that you will

study in this unit. Besides the tags themselves you will also learn about their common

attributes.

3.1 OBJECTIVES

This unit will enable you to create sophisticated, interactive web pages. After going

through this unit you will be able to learn:

links using ANCHOR tag;

ordered, unordered and definition Lists;

52

Scripting Languages

tables;

frames to divide a web page into different parts; and

forms for accepting user input.

3.2 LINKS

Hyperlinks, or links are one of the most important characteristics of web pages. A

link moves us from the current page to a destination that is specified in the HTML

page.

URL Stands for Universal Resource Locator. A URL is just an address that tells the

browser precisely where on the Internet the resource is to be found. The process of

parsing the URL and actually connecting to the resource can be somewhat complex

and does not concern us here.

3.2.1 Anchor Tag

The Anchor tag is used to create links between different objects like HTML pages,

files, web sites etc. It is introduced by the characters <A> and terminated by </A>.

HREF is the most common attribute of the ANCHOR tag. It defines the destination of

the link.

<HTML>

<HEAD>

<TITLE>IGNOU</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

Go to <A HREF="http://www.ignou.ac.in/">IGNOU!</A>

</BODY>

</HTML>

As shown in Figure 3.1, the text “IGNOU” present between the <A> and </A> tags

becomes the hyperlink. On clicking anywhere on this hyperlink, the browser would

attempt to connect to the given URL and the website http://www.ignou.ac.in would

open, if possible. An email link can be specified in the same way. We just have to

specify the email address instead of a page address as the value of HREF as shown in

the following code. On clicking on the link, the default mail program on the user’s

computer opens up with a “To:” address as specified in the hyperlink. You can then

type your message and send e-mail to that address.


Send me <A HREF="mailto:[email protected]">mail</A>

</BODY>

It is also possible to make an image a link if desired. This is done using the <IMG>

tag. Consider the following example.

<HTML>

<HEAD>


</HEAD>


Go to <A HREF="http://ignou.ac.in/"><IMG SRC="image.gif" WIDTH=130

HEIGHT=101></A>

</BODY>

</HTML>

53

Advanced HTML

So in the example shown in Figure 3.2, the image becomes the link. When the user

clicks on the image, the web site http://www.ignou.ac.in opens up, if possible.


1. Create a web page that provides links to five different web pages or to entirely

different web sites.

2. Write HTML code for the following page (the underlined text is linked to

another file called link_text)

3.3 LISTS

Lists are used when the data are to be mentioned in the form of points like: causes of

a particular issue, list of items etc. Lists break up the monotony of a long paragraph

and direct the reader’s attention to the essential parts.

Lists are segregated into three types, namely Ordered lists, Unordered lists and

Definition lists.

3.3.1 Unordered Lists

First, we will build an unordered list. Sometimes, these lists are also called bulleted

lists. These lists are characterized by list items that do not have numbers. They are

used when the points in the list have no particular order. They are delimited by the

<UL> and </UL> tags. Each point in the list is delimited by the <LI> and </LI> tags.

<HTML>

<HEAD>


</HEAD>


What I want for Id

<UL>

<LI>a big red truck</LI>

<LI>an aeroplane that flies</LI>

<LI> a nice soft toy</LI>

<LI>a drum set</LI>

<LI>a Walkman</LI>

<LI> extra pocket money</LI>

</UL>

Comment: Better give an example that

an Indian reader will relate to.

54

Scripting Languages

</BODY>

</HTML>

The syntax of the <UL> tag is:

<UL TYPE=""> where TYPE= "DISC", "SQUARE" or "CIRCLE".

<LI> </LI>

</UL>

The bullet appearance can be changed to be round (a dark circle), a disc or a circle

depending on the value of the TYPE attribute. As shown in the Figure 3.3, the list of

items are included within the <UL> and </UL> tags. Each list item must be preceded with

a <LI> tag.

3.3.2 Ordered Lists

Lists having numbered items are known as ordered lists. They are used when the

items in the list have a natural order. They can also be used when the number of

items in the list needs to be known at a glance. To make an ordered list, simply

change the <UL> tag to <OL>.

<HTML>

<HEAD>


</HEAD>


What I want for my birthday

<OL>

<LI>a big red truck</LI>

<LI>a toy train</LI>

<LI>a Barbie doll</LI>

<LI>a drum set</LI>

<LI>binoculars</LI>

<LI>a month’s extra pocket money</LI>

</OL>

</BODY>

</HTML>

The syntax of the <OL> tag is:

<OL TYPE="" START=""> where TYPE= "1", "a", "A", "i", "I" and START is the

first item number.

<LI> </LI>

</OL>

The type of the numbering format desired should be specified as the value of the

TYPE attribute. The possible types are shown above in the syntax. The numbering

starts from the START attribute’s value.

3.3.3 Definition Lists

Another type of list is a definition list. Definition lists have a heading and the text

appears below that.

<HTML>

<HEAD>


</HEAD>


<DL>

<DT>10th Amendment </DT>

55

Advanced HTML

<DD>The powers not delegated to the United States by the Constitution, nor

prohibited by it to the States, are reserved to the States respectively, or to the

people.

</DD>

</DL>

</BODY>

</HTML>

A definition list is introduced by the <DL> tag and terminated by </DL>. The

Definition heading should be specified between the <DT> and </DT> tags. The

Definition should be specified between <DD> and </DD> tags.


1. Design a web page that looks similar to following page:

3.4 TABLES

In this section you will see how to put tables in your web documents. It is not that a

table is simply a combination of rows and columns. If you have ever seen any table in

an attractive web page you might be interested to learn how they make good use of

the <TABLE> and related tags.

3.4.1 Table, TR and TD Tags

Three tags form the essential ingredients for creating a table.

TABLE: This is the main tag. It tells the browser that a table follows. It has

attributes like size and border width.

TR: A TableRow defines a horizontal row that consists of TableData cells.

TD: This tag specifies an individual block or cell in a table row.

Thus a table is made up of rows, which in turn are made up of cells.

<--This--- ----is---- ----a---- ---Table--- ---Row-->

Cell

You are now ready to create some tables! We must stress that if you want to learn

how to make quality HTML documents, then you would be spending your time well

56

Scripting Languages

if you teach yourself the tags. In our opinion the best HTML editors to use for

beginners are text-based editors. These editors will force you to code HTML

yourself. They don’t attempt to do it for you. Once you are an expert, you can use

other tools to improve your productivity so that you do not have to handcode your

pages.

Now let us start creating tables. The following example shows some tables with

different attributes.

<HTML>

<HEAD>

<TITLE> IGNOU</TITLE>

</HEAD>

<BODY>

<!- - Table with border = 5 - - >

First: Table with border = 5

<TABLE BORDER=5>

<TR>

<TD>Ajay</TD>

</TR>

</TABLE>

<!- - Table with width = 50%- - >

Second: Table with width = 50%

<TABLE BORDER=3 WIDTH=50%>

<TR>

<TD>Ajay</TD>

</TR>

</TABLE>

<!- - Table with width = 50 - - >

Third: Table with width = 50

<TABLE BORDER=1 WIDTH=50>

<TR>

<TD>Ajay</TD>

</TR>

</TABLE>

<!- - Table with height = 75 and align = center and valign=top - - >

Fourth: Table with height = 75 and align = center and valign=top -

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>

<TR>

<TD ALIGN=CENTER>Ajay</TD>

</TR>

</TABLE>

<!- - Table with an image- - >

Fifth: Table with an image

<TABLE BORDER=3>

<TR>

<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="image1.gif"

WIDTH=32

HEIGHT=32></TD>

</TR>

</TABLE>

<!- - A complete Table with different sized columns- - >

Sixth: A complete Table with different sized columns

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>

<TD WIDTH=60%>Ajay</TD>

<TD WIDTH=20%>Ramesh</TD>

<TD WIDTH=20%>Vijay</TD>

</TR>

<TR>

57

Advanced HTML

<TD>Pankaj</TD>

<TD>Vikas</TD>

<TD>Rohan</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Figure 3.1: Tables with Different Attributes.

In the first table the BORDER attribute is given a value of 5. The default is no border

i.e. border = 0.

When no sizes are specified, the table is only as big as it needs to be, as shown in the

first and third table in Figure 3.6. Specifying a table size is easy. Let us reduce the

table size to 50% of the browser window as has been done in the second example.

See the output in the second table in Figure 3.6. As you can see in the example there

are two ways to specify the table width. Each style has its uses.

You can also change the height of a table. The fourth table in Figure 3.6 shows the

effect of the changed height.

You can control where in the cell the data will appear. For this purpose we use the

ALIGN attribute. In the fourth table in Figure 3.6, we have used a center alignment.

Similarly, right and left can be used for right and left alignment respectively. The

default value is ALIGN=left. This is the value that the browser assumes if you have

not told it otherwise.

You can also control where data will appear vertically in a cell. For this purpose you

specify the VALIGN attribute. In the fourth table, we have used the value center.

You can also use top or bottom. Images can also be placed and manipulated in a table

data cell. In the folder that contains the document with the HTML code, substitute an

IMG tag for text. This is shown in the fifth table. You can also include size attributes

with all your image tags. We will not go into the details here, but doing so makes it

easier for the browser to display the table and avoids any nasty little surprises while

resizing the browser window, for instance.

Now, let us look at multiple rows. Suppose three more friends from across the street

see what is going on and want to be in your table. We think we will give them their

own row. Each row can be assigned a different width for its columns. In the sixth

table we have used 60/20/20 as the relative percentage widths of the three columns.

The last table shows how to create a table with multiple rows and columns. The

WIDTH attributes in the first row carry over to the second row.

Comment: This output cannot come

from the code given earlier. From where

are “First:”, “Second:” etc coming?

58

Scripting Languages

3.4.2 Cell Spacing and Cell Padding

Next let us look at a couple of attributes called CELLPADDING and

CELLSPACING. Both are part of the <TABLE> tag. CELLPADDING is the

amount of space between the border of the cell and the contents of the cell. The

default value for this attribute is 1. This is so that any text in the cells does not appear

to be sticking to the border. However, you can specify a value of 0 if you wish.

The CELLSPACING attribute has a somewhat different meaning. It determines the

spacing between adjacent cells. Its default value is 2. The following example shows

these and some other important attributes of the <TABLE> tag.

<HTML>

<HEAD>

<TITLE> IGNOU</TITLE>

</HEAD>

<BODY>

First: Table with cellspacing and cellpadding

<TABLE BORDER=3 CELLSPACING=7 CELLPADDING=7>

<TR>

<TD>Ajay</TD>

<TD>Vijay</TD>

<TD>Rohan</TD>

</TR>

<TR>

<TD>Pankaj</TD>

<TD>Vikas</TD>

<TD>Sanjay</TD>

</TR>

</TABLE>

Second: Table with colspan

<TABLE BORDER=1>

<TR>

<TD COLSPAN=2>Ajay</TD>

<TD>Vijay</TD>

</TR>

<TR>

<TD>Vikas</TD>

<TD>Pankaj</TD>

<TD>Rohan</TD>

</TR>

</TABLE>

Third: Table with rowspan

<TABLE BORDER=1>

<TR>

<TD ROWSPAN=2>Ajay</TD>

<TD>Vijay</TD>

<TD>Rohan</TD>

</TR>

<TR>

<TD>Pankaj</TD>

<TD>Deepak</TD>

</TR>

</TABLE>

Fourth :Table with rowspan and colspan

<TABLE BORDER=1>

<TR>

<TD ROWSPAN=2>Ajay</TD>

<TD COLSPAN=2>Vijay</TD>

59

Advanced HTML

</TR>

<TR>

<TD>Pankaj</TD>

<TD>Rohan</TD>

</TR>

</TABLE>

Fifth: Table with strong tag and a link in cell's data

<TABLE BORDER=1>

<TR>

<TD COLSPAN=3

ALIGN=CENTER><STRONG><AHREF="http://IGNOU.org/">Ajay</STRO

NG>

</TD>

</TR>

<TR>

<TD>Vijay</TD>

<TD>Vikas</TD>

<TD>Pankaj</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Figure 3.2: Some Important Attributes of the Table Tag Family

The first table in Figure 3.7 illustrates cellspacing and cellpadding.

3.4.3 Colspan and Rowspan

Now let us see how to work with COLSPAN (Column Span) and ROWSPAN (Row

Span).

If we want the cell containing Ajay in Figure 3.7 to be extended to the next cell as

well and make that area part of it own, we can use the COLSPAN attribute. This

amounts to merging the two cells into one. Those of you who are familiar with

spreadsheets such as Microsoft Excel will recognize this as similar to its “merge

cells” feature. As you may have guessed, <ROWSPAN> is just like <COLSPAN>.

The second table in Figure 3.7 shows COLSPAN, the third table shows ROWSPAN

and the fourth table shows an example featuring both COLSPAN and ROWSPAN.


1. Design a web page that has 5 equal columns. The table should look the same in

all screen resolutions.

60

Scripting Languages

2. Make out a brief bio-data of yours and code it as an HTML Page. You can

consider using tables to show your academic history.

3.5 FRAMES

Now let us understand how to make frames for web documents. The intelligent use of

frames can give your pages a cleaner look and make them easier to navigate.

The basic concept goes like this: Each frame is a regular, complete HTML document.

If you wanted to lay out your page into two frames placed side by side, then you

would put one complete HTML document in the left frame and another complete

HTML document in the right frame. In addition you need to write a third HTML

document. This MASTER PAGE contains the <FRAME> tags that specify what goes

where. Dividing a page into frames is actually quite simple.

There are only two major frame tags that you need to learn: <FRAMESET> and

<FRAME>. The easiest way to explain them is to start making some frames. As an

aspiring computer professional, you would be well advised to learn the HTML tags in

detail. Do not use HTML editors unless you know HTML, just as you would not let

a child use a calculator unless she already knows her arithmetic well. Once you have

a thorough grasp of HTML, you can then save labour by using different tools. The

tools might not offer the flexibility that you can get through handcoding HTML. So

they should be used judiciously. Of course, this advice is not meant for lay persons

who want to make web pages.

We will now need a few HTML documents. We will give each document a name.

Create a new folder somewhere and create the first HTML file as One.htm. Now

make another html document. Save this in the same folder as Two.htm. Now do the

same for Three, Four, Five, and Six. Save them just like the others. You should now

have a folder that contains 6 complete standalone HTML documents.

3.5.1 Frameset

Now make a master page in which you write the following code.

<HTML>

<HEAD>

<TITLE>My Frame Page -- The Master Page</TITLE>

</HEAD>

<FRAMESET>

</FRAMESET>

</HTML>

Now, save it in your folder (with all the other files) as index.htm. If you try to open

it with your browser now it will be blank. All you have done so far is make a title.

Now let us start defining just how things are going to look. Tell the browser to split

the main window into 2 columns, each occupying 50% of the window.

<FRAMESET COLS="50%,50%">

</FRAMESET>

This will still give a blank output as you have not specified what goes into the

windows. We have one more thing to do before our code displays some output.

3.5.2 Frame Tag

As you can guess, this tag is used for placing an HTML file in the frame created. We

must now tell the browser what to put in each frame.

Comme

heck

out the

code

for all

the

FRAM

ES

related

exampl

es. Do

we

need a

<BOD

Y> tag?

61

Advanced HTML

<HTML>

<HEAD>

<TITLE>My Frame Page- The Master Page</TITLE>

</HEAD>

<FRAMESET COLS="50%,50%">

<FRAME SRC="One.htm">

<FRAME SRC="Two.htm">

</FRAMESET>

</HTML>

You also need to note here that <FRAMESET> is a container tag, and <FRAME>

is not. A container tag has an opening <TAG> and a closing </TAG>. So notice that

the <FRAME> tag has no delimiter to terminate it. Everything is in its attributes.

The <FRAMESET> tag does all the dividing of the page into different windows. It

also has attributes that specify how to divide them up. Can we divide the page into

more than 2 pieces? Yes, just make sure that you specify a page to occupy each

section or the browser will get confused. Look at the code and the output in Figure

3.10.

<HTML>

<HEAD>


</HEAD>

<FRAMESET COLS="20%,20%,20%,20%,20%">



<FRAME SRC="Three.htm">

<FRAME SRC="Four.htm">

<FRAME SRC="Five.htm">

</FRAMESET>

</HTML>

Figure 3.3: A Web Page with Five Frames

It is only a small step to making the frames all of different sizes. Just make sure your

arithmetic is correct and that the percentages you specify add up to 100, or the

browser will come up with its own interpretation.

If we divide the page into ROWS instead of COLS we get a different layout.

<HTML>

<HEAD>


</HEAD>

<FRAMESET ROWS="10%,20%,30%,15%,25%">





62

Scripting Languages


</FRAMESET>

</HTML>

Let us now take another example with only 2 frames. We can specify 50 to indicate

that number of pixels instead of 50%. We can also use * instead of a number. The *

means whatever is left over.

<HTML>

<HEAD>


</HEAD>

<FRAMESET COLS="50,*">



</FRAMESET>

</HTML>

When you use frames you have to be very careful to code properly to ensure that all

viewers are able to look at reasonably consistent views. Let us suppose that you

make a frame 100 pixels wide on the left and 100 pixels wide on the right. If some

users are running an 800 600 screen they see the middle area as 600 pixels wide.

Other users may have a screen set at 640 480. What do they see? The middle area

for them is only 440 pixels wide. So if you use any absolute dimensions in your

<FRAMESET> tags you should have at least one * that will produce an elastic

frame. That way everything will look at least reasonably good. If you do not do that,

your page might need to scroll on one resolution and not on another. As far as

possible you might want to avoid absolute values in your frames and work on relative

numbers so that things get taken care of automatically by the browser.

We can have more than one leftover frame and specify a size relationship between

them. Try it yourself and see the result.

<HTML>

<HEAD>


</HEAD>

<FRAMESET COLS="50,*,2*">




</FRAMESET>

</HTML>

The above code means: Make 3 frames. Make the first 50 pixels wide. Divide the rest

between frames 2 and 3. But make frame 3 twice as big as frame 2. Put One.html/ in

the first frame, Two.html/ in the second and Three.html/ in the third.

It is important to note that everything is done in order. The first <FRAME> is

displayed according to the first size attribute in the <FRAMESET> tag (50/One), the

second frame with the second (*/Two) and the third frame with the third attribute set

(2*/Three).

Frames inside other frames

Comme

his is

not

clear.

The

proble

m is

more

likely

with

absolut

e

number

s where

50

pixels

might

be a

good

size on

a 640 X

480

screen

but

might

be

miniscu

le on a

1600 X

1200

screen.

63

Advanced HTML

Here we will discuss how to divide frames into different frames i.e. how to put

horizontal frames in a vertical one and vice-versa. Here we are going to divide a

frame in half horizontally.

<HTML>

<HEAD>


</HEAD>




<FRAMESET ROWS="50%,50%">



</FRAMESET>

</FRAMESET>

Here the frame three is at the top and Four at the bottom. This has been done just to

illustrate how to achieve the effect and is not meant to suggest that you actually

divide up your pages like this. Too many frames on a page do not look good. A good

rule of thumb is not to have more than 3 frames on your page. If you can, avoid

frames altogether.

3.5.3 Noframes Tag

The <NOFRAMES> tag can be used for those browsers that are not able to interpret

<FRAME> tags. Although most, if not all, of your visitors will be able to see frames,

there is still a small number of such browsers and there still are many users around

who do not have the latest in equipment. To address as wide an audience as possible,

you could write a no-frames version of your page.

<HTML>

<HEAD>


</HEAD>


<FRAMESET ROWS="50,*,*">



<FRAME SRC="Six.htm">

</FRAMESET>


<FRAMESET ROWS="50%,50%">



</FRAMESET>

</FRAMESET>

<BODY><NOFRAMES> your browser does not handle frames! </NOFRAMES>

</BODY>

64

Scripting Languages

</HTML>

Figure 3.4: Putting in a NOFRAMES Version

Put your non-frames page down between the <NOFRAMES> tags. If someone is

using an old browser, it will skip everything above and come straight down here.

Frames-capable browsers will ignore what is between the <NOFRAMES> tags.

We can also put images in the frames. Let us see how to put in “world.gif” as an

example.

<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>

The scrollbars that you see can be specified as YES, NO or AUTO. YES means the

window gets scrollbars - whether they are needed or not. NO means there will be no

scrollbars. AUTO is the default. If scrollbars are needed, they appear while if they

are not needed they stay conveniently out of the way. So let us see how to get rid of

our scrollbars.

<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO>

You would notice a problem with this code. The image is not in the right frame. The

next two attributes deal with margins. The browser automatically gives each frame

some empty space around its contents. This is normally useful for aesthetic purposes.

You can control the size of these margins by using MARGINWIDTH and

MARGINHEIGHT. They control the left and right and top and bottom margins

respectively. We will set them both to 1. (1 is the minimum)

<HTML>

<HEAD>


</HEAD>

<FRAMESET COLS="146,*">

<FRAMESET ROWS="162,*">

<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO

MARGINWIDTH=1 MARGINHEIGHT=1>


</FRAMESET>


</FRAMESET>

3.6 FORMS

Comme

lease

check

out all

the

code

for

FRAM

ES by

running

it

exactly

as it

appears

.

65

Advanced HTML

Now let us get a grip on how to add interactivity to your web documents by way of

the <FORM> tag. With this tag you can add to your web pages a guestbook, order

forms, surveys, get feedback or put in any other form that you wish.

3.6.1 FORM and INPUT Tag

A good way to learn about forms is to use your notepad editor and create a new

HTML document. Save it as form1.htm in some folder somewhere. You might want

to create a separate folder for learning this tag. Start up your browser. Use it to open

form1.html and run Notepad and the browser side by side. This way you can create

your pages and almost instantaneously see the results of your work. Remember to hit

the refresh button on your browser.

Next we must tell the browser where to send the data we gather and how to send it.

There are two ways you can do this.

1) You can send the data to a cgi script or use some other mechanism for

processing, or

2) You can have the data emailed to you. The first option is outside the scope of

discussion of this unit.

The second, or mailto, form should have the following attributes in the

<FORM> tag.

Note: Microsoft's Internet Explorer 3.0 does not support mailto forms. When you try

to submit the information, the new mail message window pops up. It does support

forms sent to a CGI script.

<HTML>

<HEAD>

<TITLE> Welcome to IGNOU </TITLE>

</HEAD>

<BODY>

<FORM METHOD=POST ACTION="mailto:[email protected]"

ENCTYPE="application/x-www-form-urlencoded">

</FORM>

</BODY>

</HTML>

The line containing the mailto keyword in the Figure 3.17 is very important. The only

thing you have to do is specify your email address after mailto: The rest must be

written exactly as shown. The words FORM, METHOD, POST and ACTION do not

have to be capitalized but there must be a space between every two attributes,

between FORM and METHOD, between POST and ACTION, and between the e-

mail address and ENCTYPE.

Some mail programs are capable of converting the data without needing a separate

program. You may want to try this method first. Just remove the instruction

ENCTYPE="application/x-www-form-urlencoded" and in its place use

ENCTYPE="text/plain".

The following example shows a general form that includes some of the commonly

used controls.

<HTML>

<HEAD>

<TITLE> Welcome to IGNOU </TITLE>

</HEAD>

<BODY>

<FORM METHOD=POST>

66

Scripting Languages

Text box with name, value and size attributes

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 XYZ" SIZE=10>

<BR>Text box with password and maxlength

<INPUT TYPE=PASSWORD MAXLENGTH=10>

<BR>Radio button with default checked<BR>

Who is your best friend?<BR>

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ajay" CHECKED>

Ajay <BR>

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rohan"> Rohan

<BR>

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tarun"> Tarun<P>

<BR>Checkbox<BR>

<INPUT TYPE=CHECKBOX NAME="AJAY" VALUE="YES"> Ajay <BR>

<INPUT TYPE=CHECKBOX NAME="Rohan" VALUE="YES"> Rohan <BR>

<INPUT TYPE=CHECKBOX NAME="BU" VALUE="YES"> Bunty<P>

<BR>Drop down list<BR>

<SELECT NAME="BEST FRIEND" SIZE=4>

<OPTION VALUE="Ajay">Ajay

<OPTION VALUE="Rohan">Rohan

<OPTION VALUE="Tarun">Tarun

<OPTION VALUE="Gagan">Gagan

<OPTION VALUE="Harish">Harish

<OPTION VALUE="Manjit">Manjit

</SELECT>

</FORM>

</HTML>

Figure 3.5: A Web Page with a Form

3.6.2 Text Box

The <INPUT> tag is used to indicate where user input is expected. It has different

attributes, of which the TYPE attribute is used to specify the kind of input that is to

be provided. The most common value of this attribute of the <INPUT> tag is TEXT.

As shown in Figure 3.18, every INPUT needs a NAME. When the user types in his

address (for example 1234 ABC), it will become the input's value and be paired with

NAME so the end result after running it through the Mailto Formatter will be

ADDRESS=1234 ABC.

67

Advanced HTML

We can, if we want, type in a VALUE.

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 XYZ">

This will automatically pair the value 44 XYZ with the name ADDRESS, unless the

user changes it. Take care to use quotes as specified in the example.

We can specify the size of the text input box.

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 XYZ" SIZE=10>

The default value is 20. You already know that the default value is the value that the

browser assumes if you have not told it otherwise.

Go ahead and remove VALUE="44 XYZ".

If we want, we can specify how many characters a user can input.

Experiment with this and try to input more than 10 characters! The MAXLENGTH

attribute is used to restrict the number of characters to be entered in the textbox.

<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=20 MAXLENGTH=10>

Very similar to the TYPE=TEXT is the TYPE=PASSWORD. It is exactly the same,

except that for security it displays *** instead of the actual input. The text entered as

password would not be echoed on the page. So you can use this whenever you want

to accept a password or some other sensitive information from the user.

<INPUT TYPE=PASSWORD>

Remember that each <INPUT> must have a NAME, that gives the name of the

field.

<INPUT TYPE=PASSWORD NAME="USER PASSWORD">

The SIZE, VALUE, and MAXLENGTH attributes work here also just as they do

with TEXT

3.6.3 Radio Button

Radio buttons are used when only one out of the group of options is to be chosen.

In the example code we have put a line break after each button.

Each of the Radio Buttons must be assigned a VALUE and you must label each

button. The code given in Figure 3.18 illustrates this. You can also modify these

labels with other HTML tags if you wish.

This takes care of the basics of your radio buttons. You can tidy things up by adding

a statement above the buttons, and if you want choose a default selection (optional).

To choose a default selection you need to add “CHECKED” with the appropriate

radio button. The user of course can only choose one option. The choice will be

returned to you as the name/value pair BEST FRIEND=Ajay (or whatever the user

picks).

3.6.4 Checkbox

Checkboxes are used when one or more out of the group of options is to be chosen.

Building Check boxes is very similar to radio buttons. Figure 3.18 illustrates the use

of Checkbox.

The user can choose any number such as 1, 2, none or all of the options. The choices

will be returned to you as the name/value pairs

Ajay=YES

Tarun=YES

(or whatever the user chooses. If nothing, nothing will be returned to you)

68

Scripting Languages

The following is code for making a table containing different options for 3 different

questions. Try it yourself and see the result.

<CENTER>

<TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR>

<TD WIDTH=199>

Which of these guys are your friends?<BR>

<INPUT TYPE=CHECKBOX NAME="Friend?..Ajay" VALUE="YES"> Ajay

<BR>

<INPUT TYPE=CHECKBOX NAME="Friend?..Rohan" VALUE="YES"> Rohan

<BR>

<INPUT TYPE=CHECKBOX NAME="Friend?..Tarun" VALUE="YES">

Tarun<BR>

<INPUT TYPE=CHECKBOX NAME="Friend?..BU" VALUE="YES"> Bunty<P>

</TD>

<TD WIDTH=200>

Which of these guys would you lend money to?<BR>

<INPUT TYPE=CHECKBOX NAME="Lend money?...Ajay" VALUE="YES">

Ajay <BR>

<INPUT TYPE=CHECKBOX NAME="Lend money?...Rohan" VALUE="YES">

Rohan <BR>

<INPUT TYPE=CHECKBOX NAME="Lend money?...Tarun" VALUE="YES">

Tarun<BR>

<INPUT TYPE=CHECKBOX NAME="Lend money?...BU" VALUE="YES">

Bunty<P>

</TD>

<TD WIDTH=199>

Which of these guys would you trust with your sister?<BR>

<INPUT TYPE=CHECKBOX NAME="Date sister?...Ajay" VALUE="YES"> Ajay

<BR>

<INPUT TYPE=CHECKBOX NAME="Date sister?...Rohan" VALUE="YES">

Rohan <BR>

<INPUT TYPE=CHECKBOX NAME="Date sister?...Tarun" VALUE="YES">

Tarun<BR>

<INPUT TYPE=CHECKBOX NAME="Date sister?...BU" VALUE="YES">

Bunty<P>

</TD>

</TR></TABLE>

</CENTER>

Figure 3.6: A Form on a Web Page with Checkboxes

3.6.5 SELECT Tag and Pull Down Lists

The next type of input is a Pull Down List. With this type you have to use

<SELECT> instead of <INPUT> and it also has a closing tag. This control is used

69

Advanced HTML

when we have a long list of items to be displayed. The user can also choose any item.

All we have to do to turn it into a Scrolling List is to add a SIZE attribute to the

<SELECT> tag. The SIZE is simply how many options show in the window.

3.6.6 Hidden

Yet another type of input is HIDDEN input.

<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Friend Form

1">

A HIDDEN input is a name/value pair that is returned to you but does not show up

anywhere on the web page. The hidden input above is needed for use with the mailto

Formatter (MTF). It is how MTF recognizes the forms it has to parse.

Suppose you were a company trying to generate leads for a new product. You have a

standard form for gathering information that has name, company, phone, products

interested in, etc. The only problem is there are 6 slightly different versions of the

form in 6 different places. You need to know what is coming from where. What to

do?

You could add a HIDDEN input to your forms like this:

<HTML>

<BODY>

<FORM METHOD=POST>

<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 1"> ...for the

first version


second version


third version

</FORM>

</HTML>

By the way, it doesn't matter what the name/value pair in the hidden input is (or any

input for that matter).

<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> HIDDEN inputs are

also useful for cgi scripts. For example, many Internet Service Providers have a script

you can have your forms sent to. It then sends the form back to you properly

formatted. The hidden input can be used to tell the cgi script who you are, where to

send the parsed data, and so on.

3.6.7 Submit and Reset

Submit and Reset are special types of input buttons. Submit is used to send the data to

the server and Reset clears/resets the form.

<INPUT TYPE=SUBMIT>

<INPUT TYPE=RESET>

We can easily change what the buttons say.

<INPUT TYPE=SUBMIT VALUE="Send it off!"><BR>

<INPUT TYPE=RESET VALUE="Clear the form!"><P>

If necessary, the SUBMIT button can also have a NAME. You would need this if, for

whatever reason, you had more than one SUBMIT button.

70

Scripting Languages


Create a Web page similar to the following:

3.7 SOME SPECIAL TAGS

We now look at some new tags that have been added to HTML in the latest versions.

3.7.1 COLGROUP

<COLGROUP> defines a group of columns in the table and allows you to set the

properties of those columns. <COLGROUP> goes immediately after the <TABLE>

tag and before any <TR>. <COLGROUP> works very much like <COL>, but you

should note that <COLGROUP> requires both an opening and a closing tag.

<TABLE BORDER=1 CELLPADDING=4 RULES=GROUPS FRAME=BOX>

<COLGROUP></COLGROUP>

<COLGROUP SPAN=3></COLGROUP>

3.7.2 THEAD, TBODY, TFOOT

<THEAD>, <TBODY>, and <TFOOT> form groups of rows. <THEAD> indicates

that a group of rows are the header rows at the top of the table. <TBODY> indicates

that a group of rows are body rows. <TFOOT> indicates that a group of rows are the

footer rows at the bottom of the table.

The most popular use for these three tags, which are currently only recognized by

MSIE 4 and up, is to put borders between groups of rows instead of between every

two rows. For example, suppose you have a table in which you want borders around

the top row, the bottom row, and around the entire block of rows in between. You

could do that with the following code. Note that in addition to <THEAD>,

<TBODY>, and <TFOOT> you also must use <TABLE RULES=GROUPS>. The

following example shows the use of these tags:

<HTML>

<BODY>

<TABLE CELLPADDING=6 RULES=GROUPS FRAME=BOX>

<THEAD>

<TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH>

<TH>Qty</TH> </TR>

</THEAD>

<TBODY>

Comme

his

code

fragme

nt does

not at

all

explain

the tag.

Please

give a

more

informa

tive

exampl

e

71

Advanced HTML

<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Komal</TD> <TD>639</TD>

</TR>

<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lovely</TD> <TD>596</TD>

</TR>

<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Rohan</TD> <TD>1135</TD>

</TR>

<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Suresh</TD> <TD>1002</TD>

</TR>

<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Rohan</TD> <TD>908</TD>

</TR>

<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lovely</TD> <TD>371</TD>

</TR>

<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Suresh</TD> <TD>272</TD>

</TR>

</TBODY>

<TFOOT><TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH>

</TR></TFOOT>

</TABLE>

</HTML>

Figure 3.7: Using the THEAD, TBODY and TFOOT Tags

3.7.3 _blank, _self, _parent, _top

These all are attributes of the <A> tag. The following example explains each of these

attributes.

<HTML>

<BODY>

<UL>

<LI>TARGET = "_blank"</LI>

<A HREF="newwindow.html" TARGET="_blank">a new window</A> <BR>

<LI> TARGET = "_self"</LI>

go to <A HREF="selftarget.html" TARGET="_self">next</A> page<BR>

<LI>TARGET = "_top"</LI>

<A HREF="selftarget.html" TARGET="_top">top</A><BR>

</UL>

72

Scripting Languages

</HTML>

Figure 3.8: Attributes of the <A> Tag

TARGET = "_blank"

"_blank" opens the new document in a new window. Run the code given in Figure

3.22 and check how it works. This value does not require the use of any frames.

"_blank" is popular in web pages which are devoted to links to "other resources on

the net". By opening a new window for each resource, the user has a sense of a

"main" page (the list of resources) and "secondary" pages (each individual resource).

Also, the web site providing the link does not risk being supplanted by a link that it

has provided.

Note: Some versions of MSIE do not support "_BLANK"

TARGET = "_self"

"_self" puts the new document in the same window and frame as the current

document. "_self" works the same as if you had not used TARGET at all. For an

example see Figure 3.22.

TARGET = "_parent"

"_parent" is used in a situation where a frameset file is nested inside another frameset

file. A link in one of the inner frameset documents which uses "_parent" will load the

new document where the inner frameset file had been.

If the current document's frameset file does not have any "parent", then "_parent"

works exactly like "_top": the new document is loaded in the full window. Note that

"_parent" does not work in a frameset, which is merely nested inside another frameset

in the same frameset file.

TARGET = "_top"

"_top" loads the linked document in the topmost frame, that is, the new page fills the

entire window.

Refer to Figure 3.22.

3.7.4 IFRAME

<IFRAME> is an HTML 4.0 addition to the frames toolbox. Currently only MSIE

supports <IFRAME>. Unlike frames created using <FRAMESET> and <FRAME>,

<IFRAME> creates a frame that sits in the middle of a regular non-framed web page.

<IFRAME> works like <IMG>, only instead of putting a picture on the page, it puts

another web page.

For example, suppose within the same directory as this page there is a file called

"hello.html". This code puts hello.html into an inline frame:

73

Advanced HTML

<IFRAME SRC="hello.html" WIDTH=450 HEIGHT=100>

If you can see this, your browser does not understand IFRAME. However, we'll still

link <A HREF="hello.html">link</A> you to the file.

</IFRAME>

which gives us this inline frame:

Here’s what the code means:

IFRAME

The name of the <IFRAME> tag

SRC="hello.html"

The URL of the document to show in the inline frame.

WIDTH=450 HEIGHT=100

The dimensions of the inline frame.

If you can see this, your browser doesn't understand IFRAME. However, we'll still

<A HREF="hello.html">link</A> you to the file.

Code between <IFRAME> and </IFRAME> is not displayed by browsers that

understand <IFRAME>. Browsers that do not understand <IFRAME> will display

this code (because they don't know how to ignore it).

You can do most of the things with <IFRAME> that you can do with regular frames,

including setting the frame border, internal margins, and setting information on scroll

bars. You can use the attribute so that you can set links to the target frame.

3.7.5 <LABEL>

<LABEL>, an HTML 4.0 element supported by MSIE and Netscape 6, defines a set

of text that is associated with a particular form element. For example, the code below

indicates that the phrase "send more information" is associated with the “moreinfo”

checkbox because the checkbox is within the <LABEL> element:

<HTML>

<BODY>

<LABEL FOR="moreinfo">

send more information

<INPUT NAME="moreinfo" TYPE=CHECKBOX ID="moreinfo">

</LABEL>

</HTML>

The FOR attribute is required in the above example. The value of FOR should be the

same as the value of ID in the form field that the label applies to.

You can also associate a <LABEL> with a field that is not within its contents using

the FOR attribute.

3.7.6 Attribute for <SELECT>

TABINDEX = integer

TABINDEX is supported by MSIE 4.x and higher and Netscape 6.

Normally, when the user tabs from field to field in a form (in a browser that allows

tabbing, not all browsers do) the tab order is the order in which the fields appear in

the HTML code.

74

Scripting Languages

However, sometimes you want the tab order to flow a little differently. In that case,

you can number the fields using TABINDEX. The tabs then flow in order from the

one with the lowest TABINDEX to the highest.

The code below illustrates this:

<HTML>

<BODY>

<TABLE BORDER CELLPADDING=3 CELLSPACING=5

BGCOLOR="#FFFFCC">

<TR>

<TD>name: <INPUT NAME="realname" TABINDEX=1></TD>

<TD ROWSPAN=3>comments<BR>

<TEXTAREA COLS=25 ROWS=5

TABINDEX=4></TEXTAREA></TD></TR>

<TR> <TD>email: <INPUT NAME="email" TABINDEX=2></TD></TR>

<TR> <TD>department: <SELECT NAME="dep" TABINDEX=3>

<OPTION VALUE="">...

<OPTION VALUE="mkt">Marketing

<OPTION VALUE="fin">Finance

<OPTION VALUE="dev">Development

<OPTION VALUE="prd">Production</SELECT></TD></TR>

</TABLE>

</HTML>

TABINDEX can also be used with <A>, <INPUT>, <TEXTAREA>, and

<BUTTON>.

3.7.7 TEXTAREA

<TEXTAREA> indicates a form field where the user can enter large amounts of text.

In most respects, <TEXTAREA> works like an <INPUT> field. It can have a name

and a default value. It has to be noticed that <TEXTAREA> is a container tag, so it

has a start tag and an ending tag.

In its simplest form, <TEXTAREA> requires the NAME, COLS and ROWS

attributes, and nothing between <TEXTAREA ...> and </TEXTAREA>. Look at the

code fragment shown below

<FORM ACTION="../cgi-bin/mycgi.pl" METHOD=POST>

your comments:<BR>

<TEXTAREA NAME="comments" COLS=40 ROWS=6></TEXTAREA>

<P><INPUT TYPE=SUBMIT VALUE="submit">

</FORM>

gives us this form:

Comme

he

browser

output

has

been

given

for all

the

three

code

fragme

nts. It

would

be

better

to make

it clear

that

they are

fragme

nts and

are not

complet

e code

that

will run

directly

.

75

Advanced HTML

your comments:

The matter between <TEXTAREA ...> and </TEXTAREA> are used as the default

value

<FORM ACTION="../cgi-bin/mycgi.pl">

your response:<BR>

<TEXTAREA NAME="comments" COLS=40 ROWS=6>

Kamal said

: I think it's a great idea

: but it needs more thought

</TEXTAREA>

<P><INPUT TYPE=SUBMIT VALUE="submit">

</FORM>

gives us your response:

Figure 3.10: Using the TEXTAREA Tag

The contents are interpreted as text only; HTML markup is ignored. Theoretically the

user can type unlimited amounts of text into the textarea field. In practice the browser

sets a limit that is usually no more than 32 K. If you want users to send in their latest

novel, consider using some file upload mechanism.

Case Study: Suppose your boss has asked you to create a Web page from which

customers can order computer equipment. You need to collect the customer’s name,

address, phone number, age, credit card information, and what the customer wants to

order.

<HTML>

<HEAD>

<TITLE>ComputoRama Order Form</TITLE>

</HEAD>

<BODY>

<FORM ACTION="mailto:[email protected]" METHOD=POST>

<TABLE BORDER="2" CELLPADDING="1">

<TR>

<TD ROWSPAN="2">Who Are You?</TD>

<TD><INPUT TYPE="text" NAME="FirstName" SIZE=2Ø></TD>

<TD><INPUT TYPE="text" NAME="MiddleInitial" SIZE=1></TD>

<TD><INPUT TYPE="text" NAME="LastName" SIZE=2Ø></TD>

<TD><INPUT TYPE="text" NAME="Age" SIZE=3></TD>

</TR>

<TR>

<TD><FONT SIZE="-2">First Name</FONT></TD>

<TD><FONT SIZE="-2">MI</FONT></TD>

<TD><FONT SIZE="-2">Last Name></TD>

Comment: Maybe you would like this

sentence to be inside a <PRE> tag.

76

Scripting Languages

<TD><FONT SIZE="-2">Age</TD>

</TR>

<TR>

<TD ROWSPAN="3">How Do We Contact You?</TD>

<TD COLSPAN="4" VALIGN="TOP">Street Address: <TEXTAREA

name="StreetAddress" rows=2 cols=3Ø></TEXTAREA></TD>

</TR>

<TR>

<TD COLSPAN="2">City: <INPUT TYPE="text" NAME="City"

SIZE=20></TD>

<TD COLSPAN="2">State: <INPUT TYPE="text" NAME= "State"

SIZE=2></TD>

</TR>

<TR>

<TD COLSPAN="2">ZIP Code: <INPUT TYPE="text"

NAME="ZIPCode"

SIZE=10></TD>

<TD COLSPAN="2">Daytime Phone

(<INPUT TYPE="text" NAME="Phone1" SIZE=3>)

<INPUT TYPE="text" NAME="Phone2" SIZE=3>-

<INPUT TYPE="text" NAME="Phone3" SIZE=4></TD>

</TR>

<TR>

<TD>Credit Card

<INPUT TYPE="radio" NAME="CreditCardType" VALUE="Visa"

CHECKED>Visa

<INPUT TYPE="radio" NAME="CreditCardType"

VALUE="MasterCard">M/C</TD>

<TD COLSPAN="2" ALIGN="CENTER">

<INPUT TYPE="text" NAME="CreditCardNumber1" SIZE=4>



<INPUT TYPE="text" NAME="CreditCardNumber4"

SIZE=4></TD>

<TD COLSPAN="2">Expiration Date:

<INPUT TYPE="text" NAME="ExpirationMonth" SIZE=2>/

<INPUT TYPE="text" NAME="ExpirationYear" SIZE=2></TD>

</TR>

<TR>

<TD>Merchandise</TD>

<TD COLSPAN=4><SELECT MULTIPLE NAME="Merchandise"

SIZE=1>

<OPTION SELECTED> HAL-47Ø <OPTION> Banana9ØØØ

<OPTION> High Res Monitor <OPTION> Low Res Monitor

<OPTION> Deluxe Keyboard <OPTION> Regular Keyboard

<OPTION> Laser Printer <OPTION> Inkjet Printer <OPTION>

Dot Matrix Printer

<OPTION> Mouse <OPTION> Trackball

<OPTION> Scanner

</SELECT></TD>

</TR>

<TR>

<TD ALIGN=CENTER COLSPAN="5">

<H1>Thank You For Your Order!</H1>

</TD>

</TR>

</TABLE>

<CENTER>

<INPUT TYPE="submit" VALUE="Ship It!"> <INPUT TYPE="reset"

VALUE="Clear Entries">

77

Advanced HTML

</CENTER>

</FORM>

</BODY>

</HTML>


Suppose you are asked to design a registration form for members of a web site.

Registration information will include hobbies, interests, assets owned by the member

etc. Create the following Web page.(Case study)

3.8 SUMMARY

In this unit we have learned some important and advanced topics of HTML. You

should now be able to develop interactive Web pages also. We have discussed ways

of linking to different locations in a Web site. We have learned about lists that allow

us to develop Web pages with elementary data. Lists can be of three types i.e.

Ordered Lists, Unordered Lists and Definition Lists. We all know how important a

table is in any document -- from someone’s bio data to a Chief Executive’s report a

table is the simplest way to understand the information. If we display the data in

paragraph form then it would look unorganized and would be difficult to

comprehend. On the other hand, a table presents all the data at a glance. We have also

seen how frames are used to divide a page into multiple sections. For example if we

want to create a Web page that contains information on three different topics, then we

could use frames.

One of the most important points in Web pages is the interaction with the end user.

For creating interactive Web pages we use Forms. In a form we can have different

controls like Text box, Radio buttons, check box, drop down lists etc. All these

controls allow us to interact with the user accept inputs from the user. In the final

section we have learned about some of the recently introduced tags that are available

in the latest version of HTML.



78

Scripting Languages

1. Following is the code to design a Web page that provides links to five different

Web sites.

<HTML>

<TITLE> Link to five different Web sites </title>

<BODY>

Web site 1 <A HREF="http://www.hotmail.com/">Hotmail</A>

Web site 2 <A HREF="http://www.google.com/">google</A>

Web site 3 <A HREF="http://www.astalavista.com/">altavista</A>

Web site 4 <A HREF="http://www.education.com/">education</A>

Web site 5 <A HREF="http://www.computer.com/">computer</A>

</BODY>

</HTML>

2. Following is the code for the given page

<HTML>

<HEAD>

</HEAD>

<BODY>

<B><FONT SIZE=5><P>GENERAL TABLE OF CONTENTS</P>

</FONT><P>So, you want to make a Web page</P></B> LESSONS:

<P><A HREF="../../makapage/introduction.htm">Introduction</A></P>

<P><A HREF="../../makapage/lesson01.html">Lesson 1</A>: getting started, saving

as html <BR>

<A HREF="../../makapage/lesson02.html">Lesson 2</A>: backgrounds, bold, italic,

font & fontsize <BR>

<A HREF="../../makapage/lesson03.html">Lesson 3</A>: basic formatting, line

breaks, inserting images <BR>

<A HREF="../../makapage/lesson04.html">Lesson 4</A>: links, images, thumbnails,

anchors <BR>

<A HREF="../../makapage/lesson05.html">Lesson 5</A>: lists, more formatting,

horizontal rules, comments <BR>

<A HREF="../../makapage/lesson06.html">Lesson 6</A>: more resources <BR>

<A HREF="../../makapage/picker/index.html">Color Picker</A> <BR>

<A HREF="../../makapage/dafonts/master.html">Handy Dandy Font Viewer</A> -

<A HREF="../../makapage/dafonts/index.html">(intro)</A> <BR>

<A HREF="../../makapage/special.html">Special Characters</A> <BR>

<A HREF="../../makapage/upload.html">Upload your page to the Web</A> </P>

<P> </P>

<FONT SIZE=2><P> </P></FONT></BODY>

</HTML>


Code of the given page

<HTML>

<HEAD>

</HEAD>

<BODY>

<P> Following are the key to success: </P>

<UL>

<LI><img src = “arrow.gif”>

Devotion </LI>

<LI><img src = “arrow .gif”>

Hardwork </LI>

<LI><img src =”arrow.gif”>

Smart work </LI>

</UL>

<P> Following are the key to success: </P>

<OL>

Comme

he

output

of this

code is

not

very

pleasin

g – all

the

options

are on

the

same

physica

l line.

Could

be

improv

ed

79

Advanced HTML

<LI> Devotion </LI>

<LI> Hardwork </LI>

<LI> Smartwork </LI>

</OL>

</BODY>

</HTML>


1. Following is the code for a Web page that has 5 equal columns.

<HTML>

<HEAD>

</HEAD>

<BODY>

<TABLE BORDER CELLSPACING=3 BORDERCOLOR="#000000">

<TR><TD WIDTH="20%">

<P>Column 1</TD>

<TD WIDTH="20%">

<P>Column 1</TD>

<TD WIDTH="20%">

<P>Column 1</TD>

<TD WIDTH="20%">

<P>Column 1</TD>

<TD WIDTH="20%">

<P>Column 1</TD>

</TR>

</TABLE>

<P> </P></BODY>

</HTML>

2. Design your Bio-Data in HTML Page.

<HTML>

<HEAD>

</HEAD>

<BODY>

<B><U><P>Qualifications</P></B></U>

<P ALIGN="JUSTIFY"><B>X & XII</B> from CBSE Board.</P>

<P ALIGN="JUSTIFY"><B>BCOM (PASS)</B> from Delhi University in

1999.</P>

<P ALIGN="JUSTIFY"><B>O Level</B> from DOEACC Society India in

2000.</P>

<P ALIGN="JUSTIFY"><B>MCP </B>(Microsoft Certified Professional) in 2001

in Analyzing Requirements and Defining Solutions Architecture with

<U>93.9%</U>.</P>

<P ALIGN="JUSTIFY"><B>CIC</B> (Certificate In Computing) from Indira

Gandhi National Open University with <U>Ist Division</U>. </P>

<P ALIGN="JUSTIFY"><B>PGDCA</B> (Post Graduate Diploma in Computer

Applications) from IGNOU with <U>Ist Division</U>.</P>

<P ALIGN="JUSTIFY"><B>ADCA </B>(Advance Diploma in Computer

Applications) from IGNOU with <U>Ist Division</U>.</P>

<P ALIGN="JUSTIFY"><B>MCA </B>from Indira Gandhi National Open

University with <U>Ist Division</U>. </P>

<B><U><P>Languages Known</P>

<P ALIGN="JUSTIFY"></B></U>C including data structures, C++ including data

structure, MS COBOL 4.5, MS FORTRAN 77, Assembly using MASM, Unix Shell

Programming,<FONT SIZE=5> </FONT>HTML, Corman Common LISP, Visual

Basic 6.0.</P>

<B><U><P>Personal Details</P>

Comment: Better use tables to show

the academic history.

80

Scripting Languages

</B></U><P>Name ABC</P>

<P>Father’s Name<B> </B>XYZ </P>

<P>Date of Birth<B> </B>23<SUP>rd</SUP> Jan,1979. </P>

<P>Address<B> </B>A-2, East Of Kailash, New Delhi. </P>

<P>Tel.<B> </B>29090909</P>

<P>Email<B> </B>[email protected]</P>

<P>Sex<B> </B>Male </P>

<P>Marital Status<B> </B>Single</P>

<B><U><P>Interests and activities</P>

</B></U><P>Troubleshooting hardware and software problems. </P>

<B><U><P>Additional Assets</P>

</B></U><P>Hard work, devotion and curiosity to learn and adapt to new

environments. </P>

<FONT SIZE=2><P> </P>

</FONT><B><P>Date:</B><FONT SIZE=2>

<B> (RAM)</P>

<P>Place:</P></B></FONT></BODY>

</HTML>


<head>

<title>IGNOU SSO</title>

<META HTTP-EQUIV="expires" CONTENT="Sat, 15 Mar 2003 23:59:59 GMT">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Style-Type" content="text/css">

</head>

<body>

<form name= "theForm" action= "/suggest/emailRegistrationServlet" method=POST

onsubmit="return validate()">

<input type="Hidden" name="successURL"

value="http://email.IGNOU.com/success.html">

<input type="Hidden" name="pageTitle" value="IGNOU Email">

<input type="Hidden" name="sourceChannel" value="Email">

<table border=0 cellpadding=0 width="100%">

<tbody>

<tr bgcolor=#8fbc8f>

<td colspan=3 align=center><b class="tdw"> IGNOU Email</b></td>

</tr>

<tr bgcolor=#0066cc>

<td colspan=3><b> <font color="#FFFFFF"><span >ACCOUNT

INFORMATION</span></font></b></td>

</tr>

<tr>

<td valign=center width="31%" class="td"> IGNOU ID: </td>

<td valign=center width="43%"> <input name=username> <span >*</span>

</td>

<td bgcolor=#f0f0f0 width="26%" class="td1">Use only letters, numbers,

dot(.), minus(-) or the underscore (_) .No spaces or special characters

please.<br> <span >If you choose your IGNOU ID as xyz,

your e-mail will be [email protected].</span> </td>

</tr>

<tr>

<td height=42 width="31%" class="td">Password:</td>

<td height=42 width="43%"> <input name=password type=password>

<span>*</span></td>

<td bgcolor=#f0f0f0 rowspan=2 width="26%" class="td1">Must be at least

three (3) characters long, may contain numbers (0-9) , upper and lowercase

letters (A-Z, a-z) and underscore(_) but no spaces or special characters.

Make sure it is difficult for others to guess! </td>

81

Advanced HTML

</tr>

<tr>

<td width="31%" class="td">Re-Enter Password:</td>

<td width="43%"> <input name=confirmPassword type=password> <span

>*</span></td>

</tr>

<tr>

<td width="31%" class="td">Security Queston:</td>

<td width="43%"> <input name=secretQus> <span >* </span></td>

<td bgcolor=#f0f0f0 rowspan=2 width="26%" class="td1">Just in case you

forget your password, we'll verify your identity by asking you this

question. Choose a question only you know the answer to and that has

nothing to do with your password whatsoever.</td>

</tr>

<tr>

<td height=2 width="31%" class="td">Your Answer:</td>

<td height=2 width="43%"> <input name=secretAns> <span >*</span>

</td>

</tr>

<tr>

<td width="31%" class="td">Alternative Email</td>

<td width="43%"> <input maxlength=100 name=altEmail size=35>

  <span >(optional)

</span></td>

<td bgcolor=#f0f0f0 width="26%" class="td1"> This will help you to retrieve

your IGNOU ID <br>

and password in case you forget it. </td>

</tr>

<tr bgcolor=#0066cc>

<td colspan=3><b class="tdw"> <font color="#FFFFFF"><span

class="tdb">PERSONAL

INFORMATION</span></font></b></td>

</tr>

<tr>

<td width="31%" class="td">First Name:</td>

<td width="43%"> <input name=firstName

document.theform.firstname.focus();>

<input type=hidden name=frmURL>

<input type=hidden name="education" value="u">

<span >* </span></td>

<td width="26%"> </td>

</tr>

<tr>

<td width="31%" class="td">Middle Name:</td>

<td width="43%"> <input name=MiddleName> </td>


</tr>

<tr>

<td width="31%" class="td">Last Name:</td>

<td width="43%"> <input name=lastName> <span >*</span> </td>


</tr>

<tr>

<td width="31%" class="td">Date of Birth</td>

<td width="43%"> <font face="MS Sans Serif" size=2>

<select name="date">

<option selected><font face="Arial, Helvetica, sans-

serif">date</font></option>

<option value="01"><font face="Arial, Helvetica, sans-

serif">01</font></option>

82

Scripting Languages



<option value="03"><font face="Arial, Helvetica, sans


























































83

Advanced HTML

</select>

<select name="month">

<option selected><font face="Arial, Helvetica, sans-

serif">month</font></option>

























</select>

<select

size=1 name=year>

<option selected>year</option>

<option value="1970">1970</option>




























84

Scripting Languages






</select>

</font><span > *</span> </td>

<td rowspan=5 align="center"> <font face=arial size=2 color=red><b>Accounts

not accessed for a <br>

consecutive period of 120 days or<br>

more may be deactivated without<br>

any prior intimation. All data in such<br>

mailboxes will be lost. IGNOU will<br>

have no liability for the same.</b> </font> </td>

</tr>

<tr>

<td height=25 width="31%" class="td">Marital Status </td>

<td height=25 width="43%"> <select name=maritalStatus size=1 id="select">

<option selected value="">[Select one]</option>

<option value="S">Single</option>

<option value="M">Married</option>

</select> <span >*</span> </td>

</tr>

<tr>

<td width="31%" class="td">Gender</td>

<td width="43%"> <font face="Arial, Helvetica, sans-serif"

size=2>

<select size=1 name=gender>

<option value=""

selected>[Select one]</option>

<option value=M>Male</option>

<option

value=F>Female</option>

</select>

</font> <span >*</span> </td>

</tr>

<tr>

<td height=35 width="31%" class="td">Pincode </td>

<td height=35 width="43%"> <span class=td1r>

<input name=pin size=10 maxlength=15 onKeyPress="if (event.keyCode <

45 || event.keyCode > 57) event.returnValue = false;">

</span> <span >*</span> </td>

</tr>

<tr>

<td height=24 width="31%" class="td">Country:</td>

<td height=24 width="43%"> <select name="country" size=3>

<option value="in">Select One

<option value="us">United States of America

<option value="bs">Bahamas

<option value="bh">Bahrain

<option value="bd">Bangladesh

<option value="bb">Barbados

<option value="by">Belarus

<option value="be">Belgium

<option value="bz">Belize

<option value="bj">Benin

<option value="bm">Bermuda

<option value="bt">Bhutan

<option value="cv">Cape Verde

<option value="zm">Zambia

85

Advanced HTML

<option value="zw">Zimbabwe </select> <span >* </span></td>

</tr>

<tr>

<td height=27 width="31%" class="td"> Education </td>

<td height=27 width="43%"> <select name=education id="select2">

<option selected value="">[Select One]</option>

<option value=Grad_Post_Prof>Graduate/Post Graduate-

Professional</option>

<option value=Grad_Post_Gen>Graduate/Post Graduate-General</option>

<option value=SomeColl>SomeCollege but not Graduate</option>

<option value=SSC_HSC>SSC/HSC</option>

<option value=5to9>School 5-9 Years</option>

<option value=lessthan4>School upto 4 years</option>

</select> <span >* </span></td>

<td height=27 width="26%"> </td>

</tr>

<tr>

<td height=2 width="31%" class="td">Annual Income </td>

<td height=2 width="43%"> <select name=incomeGroup size=1 id="select3"

style="HEIGHT: 22px; WIDTH: 190px">

<option selected value="">[Select one]</option>

<option value=0to1>Rs 1 Lakh & below</option>

<option value=1to3>Rs 1 Lakh -2.99 Lakhs</option>

<option value=3to5>Rs 3 - 4.99 Lakhs</option>

<option value=5to10>Rs 5 - 9.99 Lakhs</option>

<option value=mysterious>a mysterious sum of money</option>

<option value=morethan10>above Rs 10 Lakhs</option>

</select> <span > * </span></td>

<td height=2 width="26%"> </td>

</tr>

<TR>

<TD width="31%"><FONT face="Arial, Helvetica, sans-serif"

size=2>City:</FONT></TD>

<TD colSpan=2> <FONT face="Arial, Helvetica, sans-serif" size=2>

<SELECT name=city>

<option value="" selected>[Select One] </option>

<option value="Ahmedabad">Ahmedabad </option>

<option value="Bangalore">Bangalore </option>

<option value="Patna">Patna </option>

<option value="Noida">NOIDA </option>

<option value="Pune">Pune </option>

<option value="Surat">Surat </option>

<option value="Varanasi">Varanasi </option>

<option value="Vishakapatnam">Vishakapatnam</option>

</SELECT>

</FONT> <FONT color=#ff0000 face=Arial size=1>*</FONT> </TD>

</TR>

<TR>

<TD height=35><FONT face="Arial, Helvetica, sans-serif"

size=2>State:</FONT></TD>

<TD height=35>

<INPUT maxLength=100 name=state size=35>

<FONT color=#ff0000 face=Arial size=1>*</FONT>

</TD>

<td height=2> </td>

</TR>

<TR>


size=2>Occupation</FONT></TD>

86

Scripting Languages

<TD height=25>

<SELECT name=occupation size=1 style="HEIGHT: 22px; WIDTH: 190px">

<option value="" selected>[Select one]</option>

<option value="Artist">Artist</option>

<option value="Social worker">Social worker</option>

<option value="Student">Student</option>

<option value="Teacher/Administrator">Teacher / Administrator</option>

<option value="Unemployed/Between_jobs">Unemployed / Between

jobs</option>

<option value="No_Work">What ? me work</option>

<option value="Others">others</option>

</SELECT> <font color=#ff0000 face=Arial size=1>*</font> </TD>

<TD height=25> </TD>

</TR>

<TR>


size=2>Industry</FONT></TD>

<TD height=29>

<SELECT name=industry>

<OPTION selected value="">[Select one]</OPTION>

<OPTION value=Sales>Sales</OPTION>

<OPTION value=Marketing>Marketing</OPTION>

<OPTION value=Production>Production</OPTION>

<OPTION value="Self_Employed">Self Employed</OPTION>

<OPTION value=Student>Student</OPTION>

<OPTION value=Others>Others</OPTION>

</SELECT> <font color=#ff0000 face=Arial size=1>*</font> </TD>

<TD height=29> </TD>

</TR>

</table>

</form>

</body>

</html>

90

Scriptin

g Languages

UNIT 4 INTRODUCTION TO JAVASCRIPT

Structure Page No.

4.0 Introduction 90

4.1 Objectives 90

4.2 JavaScript Variables and Data Types 91 4.2.1 Declaring Variables

4.2.2 Data Types

4.3 Statements and Operators

92

4.4 Control Structures 94 4.4.1 Conditional Statements

4.4.2 Loop Statements

4.5 Object-Based Programming 97 4.5.1 Functions

4.5.2 Executing Deferred Scripts

4.5.3 Objects

4.6 Messagebox in Javascript

107 4.6.1 Dialog Boxes

4.6.2 Alert Boxes

4.6.3 Confirm Boxes

4.6.4 Prompt Boxes

4.7 Javascript with HTML 109 4.7.1 Events

4.7.2 Event Handlers

4.8 Forms 112 Forms Array

4.9 Summary 119


4.11 Further Readings 129

4.0 INTRODUCTION

JavaScript is the programming language of the Web. It is used mainly for validating

forms. JavaScript and Java can be related to each other. There exist many other

differences between the two. The client interprets JavaScript, whereas in Java, one can

execute a Java file only after compiling it. JavaScript is based on an object model. In

this unit you will learn how to write JavaScript code and insert them into your HTML

documents, and how to make your pages more dynamic and interactive.

Besides basic programming constructs and concepts, you will also learn about Object-

based programming in JavaScript. We will also discuss some commonly used objects,

message boxes and forms. One of the most important parts of JavaScript is Event

handling that will allow you to write Event-driven code.

4.1 OBJECTIVES

After going through this unit you would be able to learn and use the following

features of the JavaScript:

Operators;

Loop constructs;

Functions;

Objects such as Math object, Date object;

Input and output boxes;

Introduction to

JavaScript Event handlers;

Form object; and

Form array.

4.2 JAVASCRIPT VARIABLES AND DATATYPES

Let us first see the skeleton of a JavaScript file.

<HTML>

<HEAD>

<TITLE>IGNOU </TITLE>

<SCRIPT LANGUAGE = �JavaScript�>

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

JavaScript code should be written between the <SCRIPT> and </SCRIPT> tags. The

value LANGUAGE = �JavaScript� indicates to the browser that Javascript code has

been used in the HTML document. It is a good programming practice to include the

Javascript code within the <HEAD> and </HEAD> tags.

Now let us start with variables. Variables store and retrieve data, also known as

"values". A variable can refer to a value, which changes or is changed. Variables are

referred to by name, although the name you give them must conform to certain rules.

A JavaScript identifier, or name, must start with a letter or underscore ("_");

subsequent characters can also be digits (0-9). Because JavaScript is case sensitive,

letters include the characters "A" through "Z" (uppercase) and the characters "a"

through "z" (lowercase). Typically, variable names are chosen to be meaningful and

related to the value they hold. For example, a good variable name for containing the

total price of goods orders would be total_price.

4.2.1 Declaring Variables

You can declare a variable with the var statement:

var strname = some value

You can also declare a variable by simply assigning a value to the variable. But if you

do not assign a value and simply use the variable then it leads to an error.

Strname = some value

You assign a value to a variable like this:

var strname = "Hello"

Or like this:

strname = "Hello"

The variable name is on the left hand side of the expression and the value you want to

assign to the variable is on to the right side. Thus the variable "strname" shown above

gets the value "Hello" assigned to it.

Life span of variables

When you declare a variable within a function, the variable can be accessed only

within that function. When you exit the function, the variable is destroyed. These 91

92

Scripting Languages variables are called local variables. You can have local variables with the same name

in different functions, because each is recognized only by the function in which it is

declared.

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.

4.2.2 Data Types

A value, the data assigned to a variable, may consist of any sort of data. However,

JavaScript considers data to fall into several possible types. Depending on the type of

data, certain operations may or may not be allowed on the values. For example, you

cannot arithmetically multiply two string values. Variables can be of these types:

Data Types Description

Number

3 or 7.987 are the examples of Integer and floating-point numbers.

Integers can be positive, 0, or negative; Integers can be expressed in decimal

(base 10), hexadecimal (base 16), and octal (base 8). A decimal integer literal

consists of a sequence of digits without a leading 0 (zero). A leading 0 (zero) on

an integer literal indicates it is in octal; a leading 0x (or 0X) indicates

hexadecimal. Hexadecimal integers can include digits (0-9) and the letters a-f

and A-F. Octal integers can include only the digits 0-7.

A floating-point number can contain either a decimal fraction, an "e" (uppercase

or lowercase), that is used to represent "ten to the power of" in scientific

notation, or both. The exponent part is an "e" or "E" followed by an integer,

which can be signed (preceded by "+" or "-"). A floating-point literal must have

at least one digit and either a decimal point or "e" (or "E").

Boolean True or False. The possible Boolean values are true and false. These are special

values, and are not usable as 1 and 0. In a comparison, any expression that

evaluates to 0 is taken to be false, and any statement that evaluates to a number

other than 0 is taken to be true.

String "Hello World!� Strings are delineated by single or double quotation marks.

(Use single quotes to type strings that contain quotation marks.)

Object MyObj = new Object();

Null Not the same as zero � no value at all. A null value is one that has no value and

means nothing.

Undefined A value that is undefined is a value held by a variable after it has been created,

but before a value has been assigned to it.

4.3 STATEMENTS AND OPERATORS

Assignment Operators

Operator Functionality Example/Explanation

= Sets one value equal to another counter=0 Sets the counter to equal

the number 0

+= Shortcut for adding to the current value. clicks += 2 Sets the variable named

counter to equal the current value plus

two.

-= Shortcut for subtracting from the current

value.

clicks -= 2 Sets the variable named

counter to equal the current value

minus two.

*= Shortcut for multiplying the current value. clicks *= 2 Sets the variable named


multiplied by two.

/= Shortcut for dividing the current value. clicks /= 2 Sets the variable named


divided by two.

Introduction to

JavaScript Comparison Operators

Description: The comparison operators compare two items and return a value of "true"if the

condition evaluates to true, else they return false.


== Returns a true value if the items are the same Counter == 10 Returns the

value "true" if the counter's

value is currently equal to the

number 10

!= Returns a true value if the items are not the same Counter != 10 Returns the


value is any value except the

number 10

> Returns a true value if the item on the left is greater

than the item on the right

counter>10 Returns the


value is larger than the

number 10

>= Returns a true value if the item on the left is equal

to or greater than the item on the right

counter>=10 Returns the


value is equal to or larger

than the number 10

< Returns a true value if the item on the left is less

than the item on the right

counter<10 Returns the


value is smaller than the

number 10

<= Returns a true value if the item on the left is equal

to or less than the item on the right

counter<=10 Returns the


value is equal to or less than

the number 10

Computational Operators

Description: The computational operators perform a mathematical function on a value or

values, and return a single value.


+ Adds two values together counter+2 Returns the sum of the counter plus 2

- Subtracts one value from

another

counter-2 Returns the sum of the counter minus

2

* Multiplies two values counter*10 Returns the result of the variable

times 10

/ Divides the value on the left by

the one on the right and returns

the result

counter/2 Divides the current value of the

counter by 2 and returns the result

++X Increments the value, and then

returns the result

++counter Looks at the current value of the

counter, increments it by one, and then returns

the result. If the counter has a value of 3, this

expression returns the value of 4.

X++ Returns the value, and then

increments the value

counter++ Returns the value of the counter, then

increments the counter. If the counter has a value

of 3, this expression returns the value of 3, then

sets the counter value to 4.

--X Decreases the value, and then

returns the result

--counter Looks at the current value of the

counter, decreases it by one, and then returns the

result. If the counter has a value of 7, this

expression returns the value of 6.

X-- Returns the value, and then

decreases the value

counter-- Returns the value of the counter, then

decreases the counter value. If the counter has a

value of 7, this expression returns the value of 7,

then sets the counter value to 6.

Logical Operators

Description: The logical operators evaluate expressions and then return a true or false value

based on the result. 93

94

Scripting Languages Operator Functionality Example/ Explanation

&&

Looks at two expressions and returns a

value of "true" if the expressions on the

left and right of the operator are both

true

If day = 'friday' && date=13 then

alert("Are You Superstitious?")

Compares the value of the day and the

value of the date. If it is true that today is

a Friday and if it is also true that the date

is the 13th, then an alert box pops up with

the message "Are You Superstitious?"

||

Looks at two expressions and returns a

value of "true" if either one -- but not

both -- of the expressions are true.

if day='friday'&&date=13 then

alert("Are You Superstitious?") else if

day='friday'||date=13 then alert("Aren't

you glad it isn't Friday the 13th?")

Compares the value of the day and the

value of the date. If it is true that today is

a Friday and if it is also true that the date

is the 13th, then an alert box pops up with

the message "Are You Superstitious?" If

both are not true, the script moves onto

the next line of code... Which compares

the value of the day and the value of the

date. If either one -- but not both -- is

true, then an alert box pops up with the

message "Aren't you glad it isn't Friday

the 13th?"

4.4 CONTROL STRUCTURES

JavaScript supports the usual control structures:

The conditionals if, if...else, and switch;

The iterations for, while, do...while, break, and continue;

4.4.1 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 JavaScript we have three conditional statements:

if statement - use this statement if you want to execute a set of code when a

condition is true

if...else statement - use this statement if you want to select one of two sets of

code to execute

switch statement - use this statement if you want to select one of many sets of

code to execute

if( myVariable == 2 ) {

myVariable = 1;

} else {

myVariable = 0;

}

If the value of myVariable in Figure 4.1 is 2 then the first condition evaluates to true

and the value of myVariable is set to 1. If it is anything other than 2 then the else part

gets executed.

Now let us see an example of a nested if statement in Figure 4.2.

if ( myVariable == 2 ) {

myVariable = 1;

Introduction to

JavaScript } else {

If (myVariable == 5 ) {

myVariable = 3;

} else {

myVariable = 4;

}

}

Switch Statement

If there exist multiple conditions, the switch statement is recommended. This is

because only one expression gets evaluated based on which control directly jumps to

the respective case.

switch(myVar) {

case 1:

//if myVar is 1 this is executed

case 'sample':

//if myVar is 'sample' (or 1, see the next paragraph)

//this is executed

case false:

//if myVar is false (or 1 or 'sample', see the next paragraph)

//this is executed

default:

//if myVar does not satisfy any case, (or if it is

//1 or 'sample' or false, see the next paragraph)

//this is executed

}

As shown in Figure 4.3, depending on the value of �myvar�, the statement of the

respective case gets executed. If a case is satisfied, the code beyond that case will also

be executed unless the break statement is used. In the above example, if myVar is 1,

the code for case 'sample', case �false� and �default� will all be executed as well.

4.4.2 Loop Statements

A loop is a set of commands that executes repeatedly until a specified condition is

met. JavaScript supports two loop statements: for and while. In addition, you can use

the break and continue statements within loop statements. Another statement, for...in,

executes statements repeatedly but is used for object manipulation.

For Statement

A for loop repeats until a specified condition evaluates to false. The JavaScript for

loop is similar to the Java and C for loops. A for statement looks as follows:

Comment: Please be consistent. If one

value is in quotes, it is better to put the

others in quotes as well.

Comment: Please be careful about

upper and lower case � especially in

JavaScript.

for ([initial-expression]; [condition]; [increment-expression]) {

Statements

}

When a for loop executes, the following sequence of operations occur:

1. The initializing expression initial-expression, if any, is executed. This expression

usually initializes one or more loop counters, but the syntax allows an expression

of any degree of complexity.

2. The condition expression is evaluated. If the value of condition is true, the loop

statements execute. If the value of condition is false, the loop terminates.

3. The update expression increment-expression executes.

4. The statements get executed, and control returns to step 2. Actually the syntax 95

96

Scripting Languages provides for a single statement; when enclosed in braces �{� and �}�, any number

of statements are treated as a single statement.

The following function contains a for loop that counts the number of selected options

in a scrolling list (a select object that allows multiple selections). The for loop declares

the variable i and initializes it to zero. It checks that i is less than the number of

options in the select object, performs the succeeding if statement, and increments i by

one after each pass through the loop.

<HTML>

<HEAD>


<SCRIPT LANGUAGE = �JavaScript�>

function howMany(selectObject) {

var numberSelected=0

for (var i=0; i < selectObject.options.length; i++) {

if (selectObject.options[i].selected==true)

numberSelected++

}

return numberSelected

}

</SCRIPT>

</HEAD>

<BODY>

<FORM NAME="selectForm">

<P><B>Choose some music types, then click the button below:</B>

<BR><SELECT NAME="musicTypes" MULTIPLE>

<OPTION SELECTED> R&B

<OPTION> Jazz

<OPTION> Blues

<OPTION> New Age

<OPTION> Classical

<OPTION> Opera

</SELECT>

<P><INPUT TYPE="button" VALUE="How many are selected?"

onClick="alert ('Number of options selected: ' +

howMany(document.selectForm.musicTypes))">

</FORM>

</BODY>

</HTML>

While Statement

The while statement defines a loop that iterates as long as a condition remains true. In

the following example the control waits until the value of a text field becomes "go":

while (Document.Form1.Text1.Value != "go") {Statements }

In a while loop the condition is evaluated first before executing the statements.

For In Statement

This is a different type of loop, used to iterate through the properties of an object or

the elements of an array. For example consider the following statement that loops

through the properties of the Scores object, using the variable x to hold each property

in turn:

For (x in Scores) {Statements}

Break Statement

The break statement is used for terminating the current While or For loop and then

transferring program control to the statement just after the terminated loop. The

Ca

n

y

o

f

t

h

e

e

x

a

m

p

l

e

s

h

a

v

e

n

o

s

e

m

i

c

o

l

o

n

s

a

t

t

h

e

e

n

d

o

f

s

t

a

t

e

m

e

n

t

s

.

Introduction to

JavaScript following function has a break statement that terminates the while loop when i

becomes equal to 3, and then returns the value 3 * x.

function testBreak(x) {

var i = 0

while (i < 6) {

if (i == 3)

break Comment: The example could be

slightly more realistic � why would one

want to terminate at 3? i++

}

return i*x

}

Continue Statement

A continue statement terminates execution of the block of statements in a while or for

loop and continues execution of the loop with the next iteration. In contrast to the

break statement, continue does not terminate the execution of the loop entirely.

Instead,

In a while loop, it jumps back to the condition.

In a for loop, it jumps back to the increment-expression.

The following example shows a While loop with a continue statement that executes

when the value of i becomes equal to three. Thus, n takes on the values one, three,

seven, and twelve.

i = 0

n = 0

while (i < 5) {

i++

if (i == 3) continue

n += i

}

4.5 OBJECT-BASED PROGRAMMING

JavaScript is a very powerful object-based (or prototype-based) language. JavaScript

is not a full-blown OOP (Object-Oriented Programming) language, such as Java, but it

is an object-based language. Objects not only help you better understand how

JavaScript works, but in large scripts, you can create self-contained JavaScript

objects, rather than the procedural code you may be using now. This also allows you

to reuse code more often.

4.5.1 Functions

Functions are the central working units of JavaScript. Almost all the scripting code

uses one or more functions to get the desired result. If you want your page to provide

certain a user-defined functionality, then functions are a convenient way of doing so.

Therefore it is important that you understand what a function is and how it works.

First let us understand the basic syntax of a function; then we look at how to call it.

After that you must know how to pass arguments and why you need to do this.

Finally, you have to know how to return a value from a function. The following code 97

98

Scripting Languages shows the implementation of a function.

function example(a,b)

{

number += a;

alert('You have chosen: ' + b);

}

The function made above can be called using the following syntax.

Example(1,'house')

In fact, when you define the function Example, you create a new JavaScript command

that you can call from anywhere on the page. Whenever you call it, the JavaScript

code inside the curly brackets {} is executed.

Calling the Function

You can call the function from any other place in your JavaScript code. After the

function is executed, the control goes back to the other script that called it.

alert('Example 1: the House');

example(1,'house');

(write more code)

So this script first generates an alert box, then calls the function and after the function

is finished it continues to execute the rest of the instructions in the calling code.

Arguments

You can pass arguments to a function. These are variables, either numbers or strings,

which are used inside the function. Of course the output of the function depends on

the arguments you give it.

In the following example we pass two arguments, the number 1 and the string 'house':

example(1,'house');

When these arguments arrive at the function, they are stored in two variables, a and b.

You have to declare these in the function header, as you can see below.

function example(a,b)

<HTML>

<HEAD>


<SCRIPT Language = "JavaScript">

function example(a, b)

{

var number;

number += a ;

alert('You have chosen: ' + b);

}

</SCRIPT>

</HEAD>

<BODY>

<FORM NAME="selectForm">

<P><B>Click the button below:</B>

<BR>

<P><INPUT TYPE="button" VALUE="Click" onClick="example(1,�house�)">

Ch

a

t

i

s

n

u

m

b

e

r

h

e

r

e

?

W

i

l

l

t

h

i

s

c

o

d

e

w

o

r

k

?

I

n

a

n

y

c

a

s

e

t

h

e

f

u

n

c

t

i

o

n

d

o

e

s

n

o

t

d

o... [1]

</FORM>

</BODY>

Introduction to

JavaScript </HTML>

Figure 4.1: Using Functions

It adds 1 to number and displays �You have chosen: house�. Of course, if you call the

function like example (5,'palace'), then it adds 5 to number and displays �You have

chosen: palace�. The output of the function depends on the arguments you give it.

Returning a value

One more thing a function can do is to return a value. Suppose we have the following

function:

<HTML>

<HEAD>



function calculate(a,b,c)

{

d = (a+b) * c;

return d;

}

</SCRIPT>

</HEAD>

<BODY>


var x = calculate(4,5,9);

var y = calculate((x/3),3,5);

alert('calculate(4,5,9) = ' +x + ' and ' + ' calculate((x/3),3,5) = ' + y);

</SCRIPT>

</BODY>

</HTML>

99

100

Scripting Languages Figure 4.2: Using a Function that Returns a Value

The function shown in Figure 4.8 calculates a number from the numbers you pass to

it. When it is done it returns the result of the calculation. The function passes the

result back to the function that called it. When the function executes the return

statement, control goes back to the calling program without executing any more code

in the function, if there is any.

The calling of the function is done using the following two statements in the figure:

var x = calculate(4,5,9);

var y = calculate((x/3),3,5);

It means that you have declared a variable x and are telling JavaScript to execute

calculate( ) with the arguments 4, 5 and 9 and to put the returned value (81) in x. Then

you declare a variable y and execute calculate( ) again. The first argument is x/3,

which means 81/3 = 27, so y becomes 150.Of course you can also return strings or

even Boolean values (true or false). When using JavaScript in forms, you can write a

function that returns either true or false and thus tells the browser whether to submit a

form or not.

4.5.2 Executing Deferred Scripts

Deferred scripts do not do anything immediately. In order to use deferred commands,

you must call them from outside the deferred script. There are three ways to call

deferred scripts:

From immediate scripts, using the function mechanism

By user-initiated events, using event handlers

By clicking on links or image-map zones that are associated with the script

Calling Deferred Code from a Script

A function is a deferred script because it does not do anything until an event, a

function, a JavaScript link, or an immediate script calls it. You have probably noticed

that you can call a function from within a script. Sometimes you are interested in

calling a function from the same script, and in other cases you might want to call it

from another script. Both of these are possible.

Calling a function from the same script is very simple. You just need to specify the

name of the function, as demonstrated in Figure 4.9.

<HTML>

<HEAD>

<TITLE>Calling deferred code from its own script</TITLE>

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

Introduction to

JavaScript 4.5.3 Objects

A JavaScript object is an instance of datatype. Object is given a unique name and the

collection of properties of the corresponding object may be accessed using the dot

syntax. As a quick introduction to the concept of JavaScript objects, here is the code

that creates an instance of an object called myObj:

var myObj = new Object();

myObj.business = "Voice and Data Networking"; myObj.CEO = "IGNOU";

myObj.ticker = "CSCO";

After having run that code (in a scope situation that allowed myObj to be accessed as

required), you could run this...

document.write("My Object ticker symbol is " + myObj.ticker + ".");

...and get a complete sentence in your HTML document.

Document Object

The document object is a property of the window object. This object is the container

for all HTML HEAD and BODY objects associated within the HTML tags of an

HTML document

Document Object Properties

Property Description

AlinkColor The color of active links

BgColor The background color of the web page. It is set in the <BODY> tag.

The following code sets the background color to white.

document.bgColor = "#FFFFFF"

Cookie Used to identify the value of a cookie

Domain The domain name of the document server

Embeds An array containing all the plugins in a document

FgColor The text color attribute set in the <body> tag

FileCreatedDate Use this value to show when the loaded HTML file was created

fileModifiedDate Use this value to show the last change date of the HTML file

currently loaded

lastModified The date the file was modified last

Layers An array containing all the layers in a document

LinkColor The color of HTML links in the document. It is specified in the

<BODY> tag.

Title The name of the current document as described between the header

<TITLE> tags.

URL The location of the current document

VlinkColor The color of visited links as specified in the <BODY> tag

Document Object Methods

Method Description

Clear This is depreciated

Close Closes an output stream that was used to create a

document object

contextual It can be used to specify style of specific tags. The

following example specified that text in blockquotes is to

be blue:

document.contextual(document.tags.blockquote).color =

"blue";

Multiple styles may be specified in the contextual

method to set the value of text in a <H3> tag that is

underlined to the color blue, for example.

document.contextual(document.tags.H3,

document.tags.U).color = "blue";

elementFromPoint(x, y) Returns the object at point x, y in the HTML document.

getSelection Get the selected text (if any is selected) 101

Comment: Please put in a short

description of the contents of myObj;

102

Scripting Languages open([mimeType]) Opens a new document object with the optional mime

type.

write(expr1[,expr2...exprN]) Add data to a document. Writes the values passed to the

write function to the document. For example

document.write("<H3>") document.writeln("This is a

Header") document.write("</H3>")

writeln(expr1[,expr2...exprN]) Adds the passed values to the document appended with a

new line character.

Predefined Objects

Let us consider some of the most frequently used predefined objects provided in Javascript.

Math object

In most applications we need to perform calculations, whether it is accounting

software or scientific software. Programmers are often typecast as good

mathematicians. Every mathematician needs a calculator sometimes, or in the case of

JavaScript, the Math object. If we want to calculate "2.5 to the power of 8" or

"Sin0.9" in your script, then JavaScript's virtual calculator is what you need. The Math

object contains a number of manipulating functions:

The Math object

Methods Description

Math.abs(x) Return absolute value of x

Math.acos(x) Return arc cosine of x in radians

Math.asin(x) Return arc sine of x in radians

Math.atan(x) Return arc tan of x in radians

Math.atan2(x, y) Counterclockwise angle between x axis and point (x,y)

Math.ceil(x) Rounds a number up

Math.cos(x) Trigonometric cosine of x (x in radians)

Math.exp(x) Exponential method ex

Math.floor(x) Rounds a number down

Math.log(x) Natural logarithm of x (base e)

Math.max(a, b) Returns the larger of two values

Math.min(a, b) Returns the smaller of two values

Math.pow(x, y) Returns xy

Math.round(x) Rounds x to the closest integer

Math.sin(x) Trigonometric sine of x (x in radians)

Math.sqrt(x) Square root of x

Math.tan(x) Trigonometric tangent of x (x in radians)

Properties Description

Math.E Euler�s constant ( ~ 2.718)

Math.LN10 Natural logarithm of 10 (~ 2.302)

Math.LN2 Natural logarithm of 2 (~ 0.693)

Math.LOG10E Base 10 logarithm of Euler�s constant (~ 0.0434)

Math.LOG2E Base 2 logarithm of Euler�s constant (~1.442)

Math.PI The ratio of a circle�s circumference to its diameter

(~3.141)

Math.SQRT1_2 Square root of 0.5 ( ~ 0.707)

Math.SQRT2 Square root of 2.0 ( ~ 1.414)

Let us have Javascript perform some mathematical calculations:

//calculate e5

Math.exp(5)

//calculate cos(2PI)

Math.cos(2*Math.PI)

Cl

e

a

s

e

p

u

t

s

t

a

t

e

m

e

n

t

t

e

r

m

i

n

a

t

o

r

s

e

v

e

r

y

w

h

e

r

e

Introduction to

JavaScript The "with" statement

If you intend to invoke Math multiple times in your script, a good statement to

remember is "with." Using it you can omit the "Math." prefix for any subsequent Math

properties/methods:

with (Math){

var x= sin(3.5)

var y=tan(5)

var result=max(x,y)

}

Date Object

The Date object is used to work with dates and times.

Creating a Date Instance

You should create an instance of the Date object with the "new" keyword. The

following line of code stores the current date in a variable called "my_date":

var my_date=new Date( )

After creating an instance of the Date object, you can access all the methods of the

object from the "my_date" variable. If, for example, you want to return the date (from

1-31) of a Date object, you should write the following:

my_date.getDate( )

You can also write a date inside the parentheses of the Date( ) object. The following

line of code shows some of the date formats available.

new Date("Month dd, yyyy hh:mm:ss"), new Date("Month dd, yyyy"), new

Date(yy,mm,dd,hh,mm,ss), new Date(yy,mm,dd), new Date(milliseconds)

Here is how you can create a Date object for each of the ways above:

var my_date=new Date("October 12, 1988 13:14:00"), var my_date=new

Date("October 12, 1988"), var my_date=new Date(88,09,12,13,14,00), var

my_date=new Date(88,09,12), var my_date=new Date(500)

Some Date Methods

Methods Explanation

Date( ) Returns a Date object

GetDate( ) Returns the date of a Date object (from 1-31)

GetDay( ) Returns the day of a Date object (from 0-6. 0=Sunday,

1=Monday, etc.)

GetMonth( ) Returns the month of a Date object (from 0-11. 0=January,

1=February, etc.)

GetFullYear( ) Returns the year of the Date object (four digits)

GetHours( ) Returns the hour of the Date object (from 0-23)

GetMinutes( ) Returns the minute of the Date object (from 0-59)

GetSeconds( ) Returns the second of the Date object (from 0-59)

Examples:

Date

Returns the current date, including date, month, and year. Note that the getMonth

method returns 0 in January, 1 in February etc. So add 1 to the getMonth method to

display the correct date.

103

104

Scripting Languages <HTML>

<BODY>

<SCRIPT LANGUAGE="JAVASCRIPT">

var d = new Date()

document.write("date = ")

document.write(d.getDate( ))

document.write(".")

document.write(d.getMonth() + 1)

document.write(".")

document.write(d.getFullYear())

document.write("time = ")

document.write(d.getHours())

document.write(".")

document.write(d.getMinutes() + 1)

document.write(".")

document.write(d.getSeconds())

</SCRIPT>

</BODY>

</HTML>

Figure 4.3: Using the Date Object

Time

Returns the current time for the timezone in hours, minutes, and seconds as shown in

Figure 5.11. To return the time in GMT use getUTCHours, getUTCMinutes etc.

Array Object

An Array object is used to store a set of values in a single variable name. Each value

is an element of the array and has an associated index number. You can refer to a

particular element in the array by using the name of the array and the index number.

The index number starts at zero.

You create an instance of the Array object with the "new" keyword.

var family_names=new Array(5)

The expected number of elements goes inside the parentheses, in this case it is 5.

You assign data to each of the elements in the array like this:

family_names[0]="Sharma" family_names[1]="Singh" family_names[2]="Gill"

family_names[3]="Kumar" family_names[4]="Khan"

The data can be retrieved from any element by using the index of the array element

you want:

Introduction to

JavaScript Mother=family_names[0] father=family_names[1]

The Most Commonly Used Array Methods

Methods Explanation

Length Returns the number of elements in an array. This property is assigned a value

when an array is created

reverse( ) Returns the array reversed

slice( ) Returns a specified part of the array

Sort( ) Returns a sorted array

History Object

The History object is a predefined JavaScript object which is accessible through the

history property of a window object. The window.history property is an array of URL

strings, which reflect the entries in the History object. The History object consists of

an array of URLs, accessible through the browser's Go menu, which the client has

visited within a window. It is possible to change a window's current URL without an

entry being made in the History object by using the location.replace method. The

History object contains 4 properties and 3 methods as summarized here:

Property Summary for History Object

Current Specifies the URL of the current history entry.

Next Specifies the URL of the next history entry.

Previous Specifies the URL of the previous history entry.

Length Reflects the number of entries in the history list.

Method Summary for History Object

Back( ) Loads the previous URL in the history list.

Forward( ) Loads the next URL in the history list.

Go( ) Loads a URL from the history list.

Location Object

The Location object is part of a Window object and is accessed through the

window.location property. It contains the complete URL of a given Window object,

or, if none is specified, of the current Window object. Syntax : All of its properties are

strings representing different portions of the URL, which generally takes the

following form:

<protocol>//<host>[:<port>]/<pathname>[<hash>][<search>]

You can create a Location object by simply assigning a URL to the location property

of an object:

Syntax: window.location = "file:///C:/Projects"

Property Description

Hash The hash property is a string beginning with a hash (#), that specifies an

anchor name in an HTTP URL

Host The host property is a string comprising the hostname and port strings.

hostname The hostname property specifies the server name, subdomain and domain

name (or IP address) of a URL.

Href The href property is a string specifying the entire URL, and of which all

other link properties are substrings.

pathname The pathname property is a string portion of a URL specifying how a

particular resource can be accessed.

Port The port property is a string specifying the communications port that the

server uses.

protocol The protocol property is the string at the beginning of a URL, up to and I

ncluding the first colon (:), which specifies the method of access to the

URL. 105

Comment: Throughout this chapter

there has been little regard for the

correctness of the case of a letter. Please

ensure that the correct case is used unless

the case is not significant. In Javascript,

it usually is significant.

106

Scripting Languages Property Description

search The search property is a string beginning with a question mark that

specifies any query information in an HTTP URL.

Some Common Methods

Method Description

reload The reload method forces a reload of the windows current document, i.e.

the one contained in the Location.href

Replace The replace method replaces the current history entry with the specified

URL. After calling the replace method to change the history entry, you

cannot navigate back to the previous URL using the browser's Back

button.


1. Write a JavaScript code block using arrays and generate the current date in words.

This should include the day, the month and the year.

2. Write JavaScript code that converts the entered text to upper case.

3. Write JavaScript code to validate Username and Password. Username and

Password are stored in variables.

4. Design the following Web page

4.6 MESSAGEBOX IN JAVASCRIPT

In this section, we cover the topic of dialog boxes. This topic is important for

understanding the way parameters are passed between different windows. This

mechanism is a key component of some of the new capabilities of Internet Explorer

5.5 and 6.0, such as print templates. You use dialog boxes all over. The alert box is

probably the most popular one.

4.6.1 Dialog Boxes

In this the user cannot switch to the window without closing the current window. This

kind of dialog box is referred to as a modal dialog box. You create a modal dialog box

with showModalDialog().

Syntax: showModalDialog (�Message�)

<HTML>

<HEAD>


function fnOpenModal(){

window.showModalDialog("test.htm")

}

CP

l

e

a

s

e

b

e

a

c

c

u

r

a

t

e

.

I

f

y

o

u

d

o

u

s

e

t

h

e

r

e

p

l

a

c

e

m

e

t

h

o

d

b

u

t

d

o

n

o

t

c

h

a

n

g

e

t

h

e

h

i... [2]

Introduction to

JavaScript </SCRIPT>

</HEAD>

<BODY>

<FORM NAME = IGNOU>

<INPUT TYPE="button" VALUE="Push Me" onclick="fnOpenModal()">

</BODY>

</HTML>

4.6.2 Alert Boxes

Alert boxes can be utilized for a variety of things, such as to display when an input

field has not been entered properly, to display a message on document open or close,

or to inform someone that they have clicked a link to leave your site. Whatever the

use, the construction is essentially the same.

Syntax : alert(�message�)

The following example will generate a simple alert box based on clicking either a link

or a form button.

<html>

<title>Codeave.com(JavaScript: Alert Box)</title>

<body bgcolor="#ffffff">



<form>

<input type="button" value="Open Alert Box"

onClick='alert("Place your message here... \n Click OK to continue.")'>

</form>

<p>



<a href='javascript:onClick=alert("Place your message here... \n Click OK to

continue.")'>

Open Alert Box</a>

</body>

</html>

Figure 4.4: Using an Alert Box

4.6.3 Confirm Boxes

The JavaScript confirm alert box differs from a regular alert box in that it provides

two choices to the user, OK and Cancel. Typically, you�ll see confirmation boxes

utilized on links where the destination is outside the domain of the page you are

currently on or to alert you of potentially objectionable material. The following

example will display a confirmation alert box when either a link or form button is

clicked. Once either OK or Cancel are selected an alert box will follow to display

which was chosen.

<html> 107

108

Scripting Languages <body bgcolor="#FFFFFF">

<title>CodeAve.com(JavaScript: Confirm Alert Box)</title>

<script language="JavaScript">



</script>

Click <a href="JavaScript:confirm_entry()">here</a>

<p>

<form onSubmit="confirm_entry()">

<input type="submit" >

</form>

</body>

</html>

4.6.4 Prompt Boxes

The prompt box allows the user to enter information. The benefits of using a prompt

are fairly limited and the use of forms would often be preferred (from a user

perspective).

The prompt box title text cannot be changed and the same applies to button text. You

can have 2 lines of text using \n where the new line starts (please note that the opera

browser up to version 7 will only display 1 line of text)

The text entry field is similar to a form input type="text". The 2 buttons are OK and

Cancel. The value returned is either the text entered or null.

The syntax for the prompt is

prompt("your message",""); (script tags omitted)

"your message","" the ,"" holds the default text value "" = empty.

4.7 JAVASCRIPT WITH HTML

4.7.1 Events

Events are actions that can be detected by JavaScript. An example would be the

onMouseOver event, which is detected when the user moves the mouse over an

object. Another event is the onLoad event, which is detected as soon as the page is

finished loading. Usually, events are used in combination with functions, so that the

function is called when the event happens. An example would be a function that

would animate a button. The function simply shifts two images. One image that shows

the button in an "up" position, and another image that shows the button in a "down"

position. If this function is called using an onMouseOver event, it will make it look as

if the button is pressed down when the mouse is moved over the image.

Introduction to

JavaScript

4.7.2 Event Handlers

An event handler executes a segment of a code based on certain events occurring

within the application, such as onLoad or onClick. JavaScript event handlers can be

divided into two parts: interactive event handlers and non-interactive event handlers.

An interactive event handler is the one that depends on user interaction with the form

or the document.

For example, onMouseOver is an interactive event handler because it depends on the

user's action with the mouse. An example of a non-interactive event handler is

onLoad, as it automatically executes JavaScript code without the need for user

interaction. Here are all the event handlers available in JavaScript.

onLoad and onUnload

onLoad and onUnload are mainly used for popups that appear when the user enters or

leaves the page. Another important use is in combination with cookies that should be

set upon arrival or when leaving your pages.

For example, you might have a popup asking the user to enter his name upon his first

arrival to your page. The name is then stored in a cookie. Furthermore, when the

visitor leaves your page a cookie stores the current date. Next time the visitor arrives

at your page, it will have another popup saying something like: "Welcome Ajay, this

page has not been updated since your last visit 8 days ago".

Another common use of the onLoad and onUnload events is in making annoying

pages that immediately open several other windows as soon as you enter the page.

OnFocus and onBlur

The onFocus event handler executes the specified JavaScript code or function on the

occurrence of a focus event. This is when a window, frame or form element is given

the focus. This can be caused by the user clicking on the current window, frame or

form element, by using the TAB key to cycle through the various elements on screen,

or by a call to the window.focus method. Be aware that assigning an alert box to an

object's onFocus event handler will result in recurrent alerts as pressing the 'OK'

button in the alert box will return focus to the calling element or object.

The onFocus event handler uses the Event object properties.

type - this property indicates the type of event.

target - this property indicates the object to which the event was originally sent.

The following example shows the use of the onFocus event handler to replace the

default string displayed in the text box. Note that the first line is HTML code and that

the text box resides on a form called 'myForm'.

Syntax : onfocus = script

<HTML>

<HEAD>

</HEAD>

<BODY>

<FORM NAME = "myform" >

<input type="text" name="myText" value="Give me focus" onFocus =

"changeVal()"> 109 </BODY>

110

Scripting Languages <SCRIPT LANGUAGE="JAVASCRIPT">

s1 = new String(myform.myText.value)

function changeVal() {

s1 = "I'm feeling focused"

document.myform.myText.value = s1.toUpperCase()

}

</SCRIPT>

</HTML>

Figure 4.5: Using the onFocus Method

onblur = script

The onBlur event handler executes the specified JavaScript code or function on the

occurrence of a blur event. This is when a window, frame or form element loses focus.

This can be caused by the user clicking outside of the current window, frame or form

element, by using the TAB key to cycle through the various elements on screen, or by

a call to the window.blur method.

The onBlur event handler uses the Event object properties.



The following example shows the use of the onBlur event handler to ask the user to

check that the details given are correct. Note that the first line is HTML code.

<HTML>

<HEAD>

</HEAD>

<BODY>

<FORM NAME = "myform" >

Enter email address <INPUT TYPE="text" VALUE="" NAME="userEmail"

onBlur=addCheck( )>

</BODY>


function addCheck() {

alert("Please check your email details are correct before submitting")

}

</SCRIPT>

</HTML>

Introduction to

JavaScript

OnError

The onError event handler executes the specified JavaScript code or function on the

occurrence of an error event. This happens when an image or document causes an

error during loading. A distinction must be made between a browser error, when the

user types in a non-existent URL, for example, and a JavaScript runtime or syntax

error. This event handler will only be triggered by a JavaScript error, not a browser

error.

Apart from the onError handler triggering a JavaScript function, it can also be set to

onError="null", which suppresses the standard JavaScript error dialog boxes. To

suppress JavaScript error dialogs when calling a function using onError, the function

must return true (Example 2 below demonstrates this).

There are two things to bear in mind when using window.onerror. First, this only

applies to the window containing window.onerror, not any others, and secondly,

window.onerror must be spelt all lower-case and contained within <script> tags; it

cannot be defined in HTML (this obviously does not apply when using onError with

an image tag, as in example 1 below).

The onFocus event handler uses the Event object properties.



The first example suppresses the normal JavaScript error dialogs if a problem arises

when trying to load the specified image, while Example 2 does the same, but applied

to a window, by using a return value of true in the called function, and displays a

customized message instead.

Syntax : Object.onError = [function name]

Example 1

<IMG NAME="imgFaculty" SRC="dodgy.jpg onError="null">

Example 2

<script type="text/javascript" language="JavaScript">

s1 = new String(myForm.myText.value)

window.onerror=myErrorHandler

function myErrorHandler() {

alert('A customized error message')

return true

}

</script>

<body onload=nonexistantFunc( )>


Design a Web page that displays a welcome message whenever the page is loaded and

an Exit message whenever the page is unloaded.

4.8 FORMS

Each form in a document creates a form object. Since a document can contain more

than one form, Form objects are stored in an array called forms.

111 4.8.1 Forms Array

112

Scripting Languages Using the forms[ ] array we access each Form object in turn and show the value of its

name property in a message box. Let us have a look at an example that uses the forms

array. Here we have a page with three forms on it.

<HTML>

<HEAD>

<SCRIPT LANGUAGE=JavaScript>

function window_onload()

{

var numberForms = document.forms.length;

var formIndex;

for (formIndex = 0; formIndex < numberForms; formIndex++)

{

alert(document.forms[formIndex].name);

}

}

</SCRIPT>

</HEAD>

<BODY LANGUAGE=JavaScript onLoad="window_onload()">

<FORM NAME="form1">

<P>This is inside form1</P>

</FORM>

<FORM NAME="form2">


</FORM>

<FORM NAME="form3">


</FORM>

</BODY>

</HTML>

Within the body of the page we define three forms. Each form is given a name, and

contains a paragraph of text. Within the definition of the <BODY> tag, the

window_onload( ) function is connected to the window object's onLoad event handler.

<BODY LANGUAGE=JavaScript onLoad="return

window_onload( )">

This means that when the page is loaded, our window_onload() function will be

called. The window_onload( ) function is defined in a script block in the HEAD of the

page. Within this function we loop through the forms[ ] array. Just like any other

JavaScript array, the forms[ ] array has a length property, which we can use to

determine how many times we need to loop. Actually, as we know how many forms

there are, we could just write the number in. However, here we are also demonstrating

the length property, since it is then easier to add to the array without having to change

the function. Generalizing your code like this is a good practice to follow.

The function starts by getting the number of Form objects within the forms array and

stores it in the variable numberForms.

Ch

i

s

e

x

a

m

p

l

e

c

o

d

e

d

o

e

s

n

o

t

w

o

r

k

c

o

r

r

e

c

t

l

y

.

P

l

e

a

s

e

c

o

r

r

e

c

t

.

function window_onload( )

{

var numberForms = document.forms.length;

Next we define a variable, formIndex, to be used in our for loop. After this comes the

for loop itself.

Introduction to

JavaScript var formIndex;

for (formIndex = 0; formIndex < numberForms; formIndex++)

{

alert(document.forms[formIndex].name);

}

Remember that since the indices for arrays start at zero, our loop needs to go from an

index of 0 to an index of numberForms - 1. We do this by initializing the formIndex

variable to zero, and setting the condition of the for loop to formIndex <

numberForms.

Within the for loop's code, we pass the index of the desired form (that is, formIndex)

to document.forms[ ], which gives us the Form object at that array index in the forms

array. To access the Form object's name property, we put a dot at the end and the

name of the property, name.

Form Object

Form is a property of the document object. This corresponds to an HTML input form

constructed with the FORM tag. A form can be submitted by calling the JavaScript

submit method or clicking the form SUBMIT button. Some of the form properties are:

Action - This specifies the URL and CGI script file name the form is to be

submitted to. It allows reading or changing the ACTION attribute of the HTML

FORM tag.

Button � An object representing a GUI control.

Elements - An array of fields and elements in the form.

Encoding - This is a read or write string. It specifies the encoding method the form

data is encoded in, before being submitted to the server. It corresponds to the

ENCTYPE attribute of the FORM tag. The default is "application/x-www-form-

urlencoded". Other encoding includes text/plain or multipart/form- data.

Length - The number of fields in the elements array, that is, the length of the

elements array.

Method - This is a read or write string. It has the value "GET" or "POST".

Name - The form name. Corresponds to the FORM Name attribute.

Password � An object representing a password field.

Radio � An object representing a radio button field.

Reset - An object representing a reset button.

Select - An object representing a selection list.

Submit - An object representing a submit button.

Target - The name of the frame or window to which the form submission response

is sent by the server.

Corresponds to the FORM TARGET attribute.

Text - An object representing a text field.

Textarea - An object representing a text area field.

Some of the Form Element Properties are:

Name � It provides access to an element�s name attribute. It applies to all form

elements.

Type � Identifies the object�s type. It applies to all form elements.

Value - Identifies the object�s value. It applies to all, button, checkbox, hidden,

password, radio, reset, submit, text or textarea.

Checked - Identifies whether the element is checked. It applies to checkbox and

radio.

Default checked - Identifies whether the element is checked by default. It applies 113

114

Scripting Languages to checkbox and radio.

Default value � Identifies the object�s default value. It applies to password, submit

and textarea.

Length - Identifies the length of a select list. It applies to select.

Options � An array that identifies the options supported by the select list. It applies

to select.

Syntax : <FORM Name = �myform� Action = �mailto:[email protected]� Method

= POST Enctype = �multipart/form-data� onsubmit = �return check( )� >

<HTML>

<HEAD>

<SCRIPT LANGUAGE = �javascript�>

function check ()

{ if (document.myform.email.value == ��) {

alert(�please enter your email-id�);

return false; }

}

</SCRIPT>

</HEAD>

<BODY>

Enter your Email to subscribe : <p>

<FORM Name = �myform� Action = �mailto:[email protected]� Method = POST

Enctype = �multipart/form-data� onsubmit = �return check()� >

<Input type = �text� Name = �email�>

<Input type = �submit� value = �submit�>

</FORM>

</BODY>

</HTML>

The above code is used for obtaining the user�s email-id. In case the user clicks the

submit button without entering the email-id in the desired text field, he sees a message

box indicating that the email-id has not been entered.

Case Study

Design a Web page with appropriate functionality to accept an order for a fast food

outlet. It should check if the user has entered a valid name and email-id. It should also

calculate the value of the order.

<HTML>

<HEAD>

<TITLE>Donald Duck</TITLE>

<SCRIPT Language="JavaScript">

var m;

function chk_name()

{

if( document.form1.txt_name.value == "")

{

alert("Please enter your name");

document.form1.txt_name.focus();

}

}

function chk_email()

{

var str = document.form1.txt_email.value ;

Ch

e

s

o

l

u

t

i

o

n

t

o

t

h

e

c

a

s

e

s

t

u

d

y

d

o

e

s

n

o

t

w

o

r

k

c

o

r

r

e

c

t

l

y

.

T

h

i

s

n

e

e

d

s

t

o

b

e

t

a

k

e

n... [3]var i;

Introduction to

JavaScript if ( document.form1.txt_email.value == "")

{

alert("Please enter your Email-ID");

document.form1.txt_email.focus();

}

i = str.indexOf("@");

if ( i< 0)

{

alert ("Please enter a valid Email-Id");

}

}

function mainitem(F1)

{ var z=" ";

for(j=0;j<3;j++)

{

for(i=0;i<F1.elements[j].length;i++)

{

if (F1.elements[j][i].selected)

{

var y=F1.elements[j].options[i].value;

z=z+"\n"+y;

F1.elements[3].value=z;

}

}

}

m=z;

}

function cal(F1)

{ var d=0;

for(j=0;j<3;j++)

{

for(i=0;i<F1.elements[j].length;i++)

{

if (F1.elements[j][i].selected)

{

var y=F1.elements[j].options[i].value;

s=new String(y);

var a=s.indexOf(">");

var b=s.substring(a+1,a+3);

c=parseInt(b);

d=d+c;

}

}

}

p="Total cost of the selected items="+d;

m=m+"\n"+p;

F1.elements[3].value=m;

}

function clr(F1)

{

F1.elements[3].value=" ";

}

</SCRIPT>

</HEAD>

<BODY>

<h2><font color="blue"><center> Welcome to the World renowned online Fast Food

Center </font> 115

116

Scripting Languages <font color="red"> Donald Duck ! </center></font></h2>

<Form name="form1" ACTION = "mailto:[email protected]" METHOD = POST>

Select the Menu Items of your choice and then click on the Total Cost to find the bill

amount-

<BR><BR>

<Table >

<TR valign=top ><td>

Major dishes :<BR>

<select name="s1" MULTIPLE onBlur="mainitem(this.form)">

<option value="Onion cheese capsicum Pizza->300" selected> Onion cheese

capsicum Pizza

<option value="Onion mushroom Pizza->200"> Onion mushroom Pizza

<option value="Chicken Tikka Pizza->460"> Chicken Tikka Pizza

<option value="Cheese Pizza->150"> Cheese Pizza

</select>

<BR><BR></td>

<td> </td><td> </td>

<td>

Soups :<BR>

<select name="s2" MULTIPLE onBlur="mainitem(this.form)">

<option value="Tomato Soup->70"> Tomato Soup

<option value="Sweet corn Soup->80">Sweet corn Soup

<option value="Sweet n Sour soup->90">Sweet n Sour soup

<option value="Mixed veg soup->50">Mixed veg soup

</select>

<BR><BR></td>


<td>

Miscellaneous :<BR>

<select name="s3" onBlur="mainitem(this.form)">

<option value=" ">'Desserts'

<option value="Milkshakes->35">Milkshakes

<option value="Soft drinks->20">Soft drinks

<option value="Ice cream sodas->25">Softy

</select>

<BR><BR></td>


</TR>

</Table>

<Table>

<TR valign=top><td>

The items selected form the Menu are :

<TEXTAREA Name="TA1" Rows=10 Cols=50>

</TEXTAREA><BR><BR></td>


<td><BR>

<input type="button" Value="Total Cost" onClick="cal(this.form)">

<input type="button" Value="Clear" onClick="clr(this.form)">

</td>

</TR>

</Table>

<HR noshade>

<h2><font color="red"> Personal Details </center></font></h2>

<Table >


Name:<BR>

<Input Type = "Text" Name = "txt_name" Onblur = "chk_name()">

Introduction to

JavaScript <BR><BR></td>


<td>

Contact Address :<br>

<TEXTAREA Name="TA2" Rows=3 Cols=10>

</TEXTAREA>

<BR><BR></td>


<td>

Email :<BR>

<Input Type = "Text" Name = "txt_email" Onblur = "chk_email()">

<BR><BR></td>


</TR>

</Table>

<Table>


Phone :<BR>

<Input Type = "Text" Name = "txt_phone">

<BR><BR></td>


<td>

<BR>

<Input Type = "submit" Name = "btnsubmit" Value = " Submit ">

<BR><BR></td>


</TR>

</Table>

</Form>

</BODY>

</HTML>


1. Design the following Web page.

Design the following Web site

117

118

Scripting Languages 2. Design the following Web page.

3. Design the following Web page in such a way that selecting any option from

the radio button displays the appropriate result in the Result box.

4. Suppose you have an order form that updates automatically each time you

enter or change a quantity, the cost for that item and the total cost are updated. Each

field must be validated. Design the following web page. (Case Study)

4.9 SUMMARY

In this unit we have learned about the major features of JavaScript. Besides normal

programming constructs, datatypes and variables, we have also discussed the most

commonly used objects. These are: Document, Math, Date, History, Location etc. The

Submit and Reset objects are used to submit the information to the server and reset the

information entered, respectively. Finally, we discussed a very important object, the

Form object.



1.

<HTML>

<HEAD>

Introduction to

JavaScript <TITLE> Date validations </TITLE>

<SCRIPT>

var monthNames = new Array(12);

monthNames[0]= "January";

monthNames[1]= "February";

monthNames[2]= "March";

monthNames[3]= "April";

monthNames[4]= "May";

monthNames[5]= "June";

monthNames[6]= "July";

monthNames[7]= "August";

monthNames[8]= "September";

monthNames[9]= "October";

monthNames[10]= "November";

monthNames[11]= "December";

var dayNames = new Array(7);

dayNames[0]= "Sunday";

dayNames[1]= "Monday";

dayNames[2]= "Tuesday";

dayNames[3]= "Wednesday";

dayNames[4]= "Thursday";

dayNames[5]= "Friday";

dayNames[6]= "Saturday";

function customDateString (m_date)

{

var daywords = dayNames[m_date.getDay()];

var theday = m_date.getDate();

var themonth = monthNames[m_date.getMonth()];

var theyear = m_date.getYear();

return daywords + ", " + themonth + " " + theday + ", " + theyear;

}

</SCRIPT>

</HEAD>

<BODY>

<H1>WELCOME!</H1>

<SCRIPT>

document.write(customDateString( new Date()))

</SCRIPT>

</BODY>

</HTML>

2.

<HTML>

<HEAD>

<SCRIPT language="JavaScript">

Comment: This works, but what is the

second text field for?

function checkData(column_data)

{

if (column_data != "" && column_data.value !=

column_data.value.toUpperCase( ))

{

column_data.value = column_data.value.toUpperCase( )

}

}

</SCRIPT> 119 </HEAD>

120

Scripting Languages

<BODY>

<FORM>

<INPUT TYPE="text" NAME="collector" SIZE=10

onChange="checkData(this)">

<INPUT TYPE="text" NAME="dummy" SIZE=10>

</FORM>

</BODY>

</HTML>

3.

<HTML>

<HEAD>

<TITLE>Password Validation</TITLE>

<SCRIPT language="JavaScript">



</SCRIPT>

</HEAD>

<BODY>

<FORM ACTION="" method="POST" NAME="survey"

onSubmit="return checkOut(this.form)">

<INPUT TYPE="TEXT" NAME="Username" SIZE="15" MAXLENGTH="15">

User Name

<BR><INPUT TYPE="PASSWORD" NAME="Pasword" SIZE="15">Password

<BR><INPUT TYPE="SUBMIT" VALUE="Submit"><INPUT TYPE="RESET"

VALUE="Start Over">

</FORM>

</BODY>

</HTML>

4.

<HTML>

<HEAD>

<TITLE>Displaying the Date and time in the Browser</TITLE>

</HEAD>

<BODY>


function begin(form)

{

form_name = form;

time_out=window.setTimeout("display_date()",500)

}

function display_date()

{

form_name.date.value=new Date();

time_out=window.setTimeout("display_date()",1000)

}

function display_clock()

{

document.write('<FONT COLOR=red SIZE=+1><FORM

NAME=time_form><CENTER><BR><BR>Current Date & Time :')

document.write(' <INPUT NAME=date size=19

value=""</FORM></FONT></CENTER>')

begin(document.time_form)

}

display_clock()

</SCRIPT>

</BODY>

</HTML>


1.

121

122

Scripting Languages <HTML>

<HEAD>

<TITLE>Creating and Using User Defined Functions</TITLE>


var name = "";

function hello( )

{

name = prompt('Enter Your Name:','Name');

alert('Greetings ' + name + ', Welcome to my page!');

}

function goodbye( )

{

alert('Goodbye ' + name + ', Sorry to see you go!');

}

</SCRIPT>

</HEAD>

<BODY onLoad="hello( );" onUnload="goodbye( );">

<IMG SRC="Images\Pinkwhit.gif ">

</BODY>

</HTML>


1.

<HTML>

<HEAD>

<TITLE>FORMS</TITLE>



<SCRIPT Language="JavaScript">

function Ver(form1)

{

v=form1.elements.length;

if (form1.elements[3].name=="Button1")

{

alert('First form name : '+document.forms[0].name);

alert('No. of Form elements of ' +document.forms[0].name + ' = '+v);

}

else if (form1.elements[4].name=="Button2")

{

alert('Second form name : '+document.forms[1].name);

alert('No. of Form elements of ' +document.forms[1].name + ' = '+v);

}

for(i=0;i<v;i++)

alert(form1.elements[i].name+ ' is at position '+i);

}

</SCRIPT>

</HEAD>

Introduction to

JavaScript

<BODY>

<FORM Name="Survey Form 1">

FIRST FORM: <i><b>Survey Form 1 </b></i><BR><BR>

First Name : <Input Type=Text Name="Text1" Value=""><BR><BR>

<Input Type="radio" Name="Radio1" Value=""> Fresher

<Input Type="radio" Name="Radio1" Value="">

Experienced<BR><BR>

<Input Type="Button" Name="Button1" Value="Click1"

onClick="Ver(form)">

</FORM>

<FORM Name="Survey Form 2">

SECOND FORM: <i><b> Survey Form 2 </b></i><BR><BR>

Name : <Input Type="Text" Name="Text2" Value=""> <BR><BR>

Password : <Input Type="Password" Name="Pass2" Value="">

<BR><BR>

<Input Type="CheckBox" Name="Check1" Value="" > Employed

<Input Type="CheckBox" Name="Check2" Value="" > Studying

<BR><BR>

<Input Type="Button" Name="Button2" Value="Click2"

onClick="Ver(form)">

</FORM>

</BODY>

</HTML>

2.

<HMTL>

<HEAD>

<TITLE>FORMS</TITLE>



<SCRIPT Language='JavaScript'>

function Chk(f1)

{

f1.Check.checked=true;

alert(" The Checkbox just got checked ");

f1.Check.checked=false;

f1.Radio[0].checked=true;

f1.Radio[1].checked=false;

alert(" The Radio button just got checked ");

}

</SCRIPT> Comment: The desired functionality is

not apparent in this question. It should be

stated explicitly. </HEAD>

<BODY>

<FORM>

Client Name : <Input Type=Text Name="Text" Value=""><BR><BR> 123

124

Scripting Languages Client Address: <Input Type=Text Name="Text1" Value=""> <BR><BR>

Client E-mail Address :<Input Type=Text Name="Text2"

Value=""><BR><BR>

<Input Type="radio" Name="Radio" Value=""> Male

<Input Type="radio" Name="Radio" Value=""> Female<BR><BR>

<Input Type="CheckBox" Name="Check" Value=""> Employed <BR><BR>

<Input Type="Button" Name="Bt" Value="Set Element Array Value"

onClick="Chk(this.form)">

</FORM>

</BODY>

</HTML>

3.

<HTML>

<HEAD>

<TITLE> Working with Radio Buttons </TITLE>


function calculate(form)

{

if(form.elements[2].checked)

{

form.result.value = form.entry.value * form.entry.value;

}

else

{

form.result.value = form.entry.value * 2;

}

}

</SCRIPT>

</HEAD>

<BODY>

<FORM >

<CENTER><BR>

<B>Value:</B>

<INPUT TYPE="text" NAME="entry" VALUE=0>

<BR><BR>

<SPACER Size= 190>

<B>Action:<B><BR>

<SPACER Size = 225>

<INPUT TYPE="radio" NAME="action1" VALUE="twice"

onClick="calculate(this.form);">Double<BR>

<SPACER Size = 225>

<INPUT TYPE="radio" NAME="action1" VALUE="square"

onClick="calculate(this.form);">Square <BR><BR>

<B>Result:</B>

<INPUT TYPE=text NAME="result" onFocus = "this.blur();">

</CENTER>

</FORM>

Introduction to

JavaScript </BODY>

</HTML>

4. (Case Study)

<HTML>

<HEAD><TITLE>Order Form</TITLE>

Comment: This code keeps saying

�Invalid Phone� or �Invalid Name�. This

needs to be corrected.

<SCRIPT>

// function to calculate the total cost field

function Total()

{ var tot = 0;

tot += (240 * document.order.qty1.value);




document.order.totalcost.value = tot; }

// function to update cost when quantity is changed

function UpdateCost(number, unitcost)

{ costname = "cost" + number; qtyname = "qty" + number;

var q = document.order[qtyname].value;

document.order[costname].value = q * unitcost;

Total();

}

// function to copy billing address to shipping address

function CopyAddress()

{ if (document.order.same.checked)

{ document.order.shipto.value = document.order.billto.value;

}

}

//global variable for error flag

var errfound = false;

//function to validate by length

function ValidLength(item, len)

{ return (item.length >= len); }

//function to validate an email address

function ValidEmail(item)

{ if (!ValidLength(item, 5)) return false;

if (item.indexOf ('@', 0) == -1)

return false;

return true;

}

// display an error alert 125

126

Scripting Languages function error(elem, text)

{

// abort if we already found an error

if (errfound) return;

window.alert(text);

elem.select();

elem.focus();

errfound = true;

}

// main validation function

function Validate()

{

errfound = false;

if (!ValidLength(document.order.name1.value,6))

error(document.order.name1,"Invalid Name");

if (!ValidLength(document.order.phone.value,10))

error(document.order.phone,"Invalid Phone");

if (!ValidLength(document.order.billto.value,30))

error(document.order.billto,"Invalid Billing Address");

if (!ValidLength(document.order.shipto.value,30))

error(document.order.shipto,"Invalid Shipping Address");

if (!ValidEmail(document.order.email.value))

error(document.order.email, "Invalid Email Address");

if (document.order.totalcost.value == "")

error(document.order.qty1, "Please Order at least one item.");

if (document.order.payby.selectedIndex != 1)

{

if (!ValidLength(document.order.creditno.value,2))

error(document.order.creditno,"Invalid Credit/Check number");

}

return !errfound; /* true if there are no errors */ }

</SCRIPT> </HEAD>

<BODY>

<H1>Online Cake Order Form</H1>

<FORM NAME="order" onSubmit="return Validate();">

<B>Name:</B>

<INPUT TYPE="text" NAME="name1" SIZE=20>

<B>Phone: </B>

<INPUT TYPE="text" NAME="phone" SIZE=15>

<B>E-mail address:</B>

<INPUT TYPE="text" NAME="email" SIZE=20><BR><BR>

<B>Shipping Address:</B>

<BR>

127

Introduction to

JavaScript <TEXTAREA NAME="shipto" COLS=40 ROWS=4 onChange="CopyAddress();">

Enter your shipping address here. </TEXTAREA>

<B>Products to Order:</B><BR>

Qty: <INPUT TYPE="TEXT" NAME="qty1" VALUE="0" SIZE=4 onChange =

"UpdateCost(1, 240);">

Cost: <INPUT TYPE="TEXT" NAME="cost1" SIZE=6> (Rs.240 ) Vanilla cake

<BR>



Cost: <INPUT TYPE="TEXT" NAME="cost2" SIZE=6> (Rs.270 ) Strawberry cake

<BR>



Cost: <INPUT TYPE="TEXT" NAME="cost3" SIZE=6> (Rs.300 ) Black Forest

cake <BR>



Cost: <INPUT TYPE="TEXT" NAME="cost4" SIZE=6> (Rs.600 ) Chocolate cake

<HR> <B>Total Cost:</B> <INPUT TYPE="TEXT" NAME="totalcost"

SIZE=8><HR> <B>

Method of Payment</B>:

<SELECT NAME="payby"> <OPTION VALUE="check" SELECTED>

Check or Money Order

<OPTION VALUE="cash">Cash or Cashier's Check

<OPTION VALUE="credit">Credit Card (specify number)

</SELECT><BR> <B>Credit Card or Check Number:</B>:

<INPUT TYPE="TEXT" NAME="creditno" SIZE="20"><BR>

<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Send Your Order">

<INPUT TYPE="RESET" VALUE="Clear Form">

</FORM>

</BODY>

</HTML>

4.11 FURTHER READINGS

1. JavaScript Programmers Reference, Cliff Wootton. Publisher: Wrox Press Inc.

Year 1999.

2. Beginning JavaScript, Paul Wilton. Publisher: Wrox Press Inc. 1st Edition

3. JavaScript: The Definitive Guide, David Flanagan. Publisher: O'Reilly. 4th Edition

2001.

4. The JavaScript Bible, Danny Goodman. Publisher: John Wiley & Sons Inc. Edition

2001.


What is number here? Will this code work? In any case the function does not do

anything meaningful. What is the purpose of the argument �a� here?


Please be accurate. If you do use the replace method but do not change the history entry,

does the statement still hold good?


The solution to the case study does not work correctly. This needs to be taken care of.

!"# $ %&'()'*+ ,-*+.-+/0 1234 5 67 $893:4 $)&.%).&/ :-+/ 2;< =># ?@ABCDEFAGC@ !"# =>! HIJKFAGLKM !"# =>N OPQA ?M RSTFBGUAV !"! =>" WDDG@X RSTFBGUA YCDK AC Q@ Z[\] QXK !"! =>_ RS TFBGUA SQMGFM !"N =>_>! RSTFBGUA QAQ [aUKM =>_>N RSTFBGUA RQBGQIbKM =>_>" RSTFBGUA YC@MAQ@AM =>_>_ RSTFBGUA HUKBQACBM =>= cMG@X YC@DGAGC@Qb TAQAKdK@AM !"e =>f ]CCUG@X [PBCEXP YCDK !"g =>e RSTFBGUA BCFKDEBKM !__ =>h RSTFBGUA YCDG@X YC@LK@AGC@M !_f =>g GFAGC@QBa HIJKFA G@ RSTFBGUA !_h =>g>! \KAPCDMi RSTFBGUA GFAGC@QBa HIJKFA =>g>N RSTFBGUA GFAGC@QBa HIJKFA BCUKBAGKM =>!# jBB HIJKFA !=" =>!#>! \KAPCDMi RSTFBGUA jBB HIJKFA =>!#>N BCUKBAGKMi RSTFBGUA jBB HIJKFA =>!! TEddQBa !f" =>!N TCbEAGC@Mk W@MlKBM !f" =>!" mEBAPKB nKQDG@XM !eN 5<o 3249pq1843p2 WrAKB bKQB@G@X sQLQTFBGUA AC dQtK OKIQXKM APQA BKuEGBK MCdK bCXGFQb UBCFKMMG@Xv lK lGbb DGMFEMM Q@CAPKB LKBa FCddC@ MFBGUAG@X bQ@XEQXKv FQbbKD RS TFBGUA> RSTFBGUA GM \GFBCMCrAwM MFBGUAG@X bQ@XEQXK> ?A K@QIbKM EM AC lBGAK UBCXBQdM APQA K@PQ@FK APK UClKB Cr OKI UQXKM Ia QbbClG@X EM AC FC@ABCb APKGB IKPQLGCEB> WbAPCEXP Z[\] K@QIbKM EM AC DKLKbCU OKI UQXKMv lK FQ@@CA G@FCBUCBQAK G@AC APKd FC@DGAGC@M CB IEMG@KMM BEbKM lGAPCEA EMG@X Q@CAPKB ACCb bGtK Q MFBGUAG@X bQ@XEQXK> ?@ APGM E@GA lK lGbb DGMFEMM APK UBCXBQddG@X FC@MABEFAM APQA QBK MEUUCBAKD Ia RSTFBGUA> [PK FC@MABEFAM lGbb K@QIbK aCE AC GdUbKdK@A Qbb tG@DM Cr bCXGF rCB aCEB OKI UQXKM> OK lGbb QbMC DGMFEMM QICEA HIJKFAM G@ RSTFBGUA Q@D AQbt QICEA APK GFAGC@QBa CIJKFA G@ DKAQGb QM Q@ KxQdUbK> jBBCB PQ@DbG@X GM Q@ GdUCBAQ@A UQBA Cr Q@a tG@D Cr UBCXBQddG@X> ?@ APGM E@GA lK DGMFEMM KBBCB PQ@DbG@X G@ RSTFBGUA> [PK jBB CIJKFA GM EMKD rCB APK UEBUCMK Ia RSTFBGUA 5<y p7z{8436{$ [PK CIJKFAGLK Cr APGM E@GA GM AC KxUbQG@ APK IQMGFM Cr RSTFBGUA> WrAKB FCdUbKAG@X APGM E@GAv aCE lGbb IK QIbK AC lBGAK FCDK rCB OKI UQXKM EMG@X RSTFBGUA> |CE lGbb IK QIbK AC E@DKBMAQ@D APK rCbbClG@X FCdUC@K@AM Cr RSTFBGUAi } RQBGQIbKM } ]CCUM } YC@DGAGC@Qb MAQAKdK@AM } BCFKDEBKM } BCUKBAGKM Q@D \KAPCDM Cr GFAGC@QBa HIJKFA } BCUKBAGKM Q@D \KAPCDM Cr APK jnn HIJKFA>

!"#$%&'( )*+ ,-./ 0# !"#1203/4 56789:;< := > ?@?A@9 BC D:89B=BC<E= 5:=F>G 6>=:8 C>?:GH BC I@J@GB;?@K< ;9BIF8<=L M<N@9 ?@?A@9= :K8GFI@ 5:=F>G 6>=:8 OP9BC@==:BK>G >KI 7<>KI>9I QI:<:BK=R >KI 5:=F>G 6>=:8 CB9 S;;G:8><:BK=T UN:8N := <N@ =89:;<:KV G>KVF>V@ CB9 D:89B=BC< QW8@GL 56789:;< := > =89:;<:KV G>KVF>V@ CB9 XYDZ ;>V@= BK <N@ [B9GI [:I@ [@A >KI 8B9;B9><@ :K<9>K@<=L 56789:;< := ;BU@9CFG >KI N>= >G?B=< >GG <N@ C@><F9@= BC 5:=F>G 6>=:8L MK@ BC <N@ <N:KV= HBF =NBFGI A@ 8BK8@9K@I >ABF< := <N@ =>C@<H >KI =@8F9:<H BC 8G:@K< ?>8N:K@= <N>< >88@== HBF9 [@A =:<@L D:89B=BC< <BB\ <N:= 8BK=:I@9><:BK :K<B >88BFK< UN@K 89@><:KV 56789:;<L PB<@K<:>GGH I>KV@9BF= B;@9><:BK= <N>< 8>K A@ IBK@ :K 5:=F>G 6>=:8 N>J@ A@@K 9@?BJ@I C9B? 56789:;<T :K8GFI:KV <N@ 8>;>A:G:<H <B >88@== IHK>?:8 G:K\ G:A9>9:@= I:9@8<GH >KI <B >88@== <N@ C:G@ =H=<@? BK <N@ 8G:@K< ?>8N:K@L )*] . 0_ !"#1203/ 1a b /a ._ -/cd 3. b eBF 8>K F=@ <N@ 7fghPY @G@?@K< <B >II 56789:;< 8BI@ <B >K XYDZ ;>V@L /ij k#1203/l /mn 56789:;< 8BI@ := U9:<<@K U:<N:K ;>:9@I o7fghPYp <>V=L qB9 @W>?;G@T > ;9B8@IF9@ <B <@=< > I@G:J@9H I><@ ?:VN< >;;@>9 >= CBGGBU=r o7fghPY ZSstuStQvw56789:;<wp oxyy qFK8<:BK f>Kz@G:J@9Oz<R f>Kz@G:J@9 v Ofz><@Oz<R y sBUORR p { QKI qFK8<:BK yyp o|7fghPYp 6@V:KK:KV >KI @KI:KV o7fghPYp <>V= =F99BFKI <N@ 8BI@L YN@ ZSstuStQ ><<9:AF<@ :KI:8><@= <N@ =89:;<:KV G>KVF>V@L eBF ?F=< =;@8:CH <N@ G>KVF>V@ A@8>F=@ A9BU=@9= 8>K F=@ B<N@9 =89:;<:KV G>KVF>V@=T =F8N >= }>J>789:;<L sB<:8@ <N>< <N@ f>Kz@G:J@9 CFK8<:BK := @?A@II@I :K 8B??@K< <>V= Ooxyy >KI yypRL YN:= ;9@J@K<= A9BU=@9= <N>< IB KB< =F;;B9< <N@ o7fghPYp <>V C9B? I:=;G>H:KV <N@ 8BI@ BK <N@ ;>V@L 7:K8@ <N@ @W>?;G@ := > V@K@9>G CFK8<:BK y :< := KB< <:@I <B >KH ;>9<:8FG>9 CB9? 8BK<9BG y HBF 8>K :K8GFI@ :< :K <N@ XQSz =@8<:BK BC <N@ ;>V@ >= =NBUK :K q:VF9@ ~L� A@GBUr oXYDZp oXQSzp oYhYZQpPG>8@ eBF9 M9I@9o|YhYZQp o7fghPY ZSstuStQvw56789:;<wp oxyy qFK8<:BK f>Kz@G:J@9Oz<R f>Kz@G:J@9 v Ofz><@Oz<R y sBUORR p { QKI qFK8<:BK yyp o|7fghPYp o|XQSzp o6Mzep LLL ��

!"# $%&'()'*+ ,-*+.-+/0 123 456 378 9:;<=> ?@24A7 56BCD8E8 F6 56 G>HI J5K8L 123 456 J3M MD8N F6 ?2MD MD8 OPQ1 56R GSTQ 784MF267L G2C8U8EV B23 CF@@ JE2?5?@B C56M M2 J3M 5@@ K868E5@WJ3EJ278 74EFJMF6K 42R8 F6 MD8 GSTQ 784MF26 F6 2ER8E M2 A88J 5@@ MD8 42R8 M2K8MD8EL X88JF6K B23E 42R8 F6 MD8 GSTQ 784MF26 8673E87 MD5M 5@@ MD8 42R8 F7 E85R 56R R842R8R ?8Y2E8 FM F7 688R8R ?B 56B 45@@7 YE2N CFMDF6 MD8 OPQ1 784MF26L P68 62M5?@8 8Z48JMF26 M2 MDF7 E3@8 F7 MD5M B23 N5B C56M M2 JE2UFR8 F6@F68 74EFJMF6K 42R8 CFMDF6 Y2EN7 M2 E87J26R M2 MD8 8U86M7 2Y 2?[84M7 F6 B23E Y2ENL \2E 8Z5NJ@8V B23 456 8N?8R 74EFJMF6K 42R8 M2 E87J26R M2 5 ?3MM26 4@F4A F6 5 Y2EN 57 7D2C6 F6 \FK3E8 ]L# _G>HI _GSTQ _><>IS>87M O3MM26 SU86M7_a><>IS _aGSTQ _OPQ1 _\P;H bTHScd\2EN!d _<b=e> >1=ScdO3MM26d bTHScdO3MM26!d fTIeScd:@F4Ad _9:;<=> \P;cdO3MM26!d SfSb>cd26:@F4Ad ITbgeTgScdfO94EFJMd H7KO2Z dO3MM26 =E8778Rhd _a9:;<=> _a\P;H _aOPQ1 _aG>HI >DF7 8Z5NJ@8 CF@@ RF7J@5B 5 ?3MM26 26 MD8 i8? =5K8L iD86 B23 4@F4A 26 MD8 ?3MM26 FM C23@R RF7J@5B 5 N8775K8 ?2Z 7M5MF6K jO3MM26 =E8778RkL H27M 2Y B23E 42R8 CF@@ 5JJ85E F6 8FMD8E $.l 2E m.*%)'n* JE248R3E87 56R CF@@ ?8 45@@8R 26@B CD86 MD8 42R8 B23 D5U8 CEFMM86 453787 MD5M Y364MF26 M2 8Z843M8L G2C8U8EV B23 456 CEFM8 fO94EFJM 42R8 23M7FR8 JE248R3E87V ?3M 7MF@@ CFMDF6 5 9:;<=> ?@24AL >DF7 42R8 F7 8Z843M8R 26@B 2648V CD86 MD8 G>HI J5K8 @25R7L >DF7 5@@2C7 B23 M2 F6FMF5@Fo8 R5M5 2E RB65NF45@@B 4D56K8 MD8 @22A 2Y B23E i8? J5K8 CD86 FM @25R7L pqr st $uvwxy tz$wu$ >DF7 784MF26 CF@@ RF74377 MD8 ?57F47 2Y fO94EFJM 56R R874EF?8 42648JM7 @FA8 R5M5MBJ87V @22J7 56R 2MD8E7L pqrq{ st$%&'() |-)- y}(/0 fO94EFJM D57 26@B 268 R5M5 MBJ8 45@@8R 5 s-&'-*)L T s-&'-*) F7 5 7J84F5@ AF6R 2Y R5M5 MBJ8 MD5M 456 426M5F6 RFYY8E86M AF6R7 2Y F6Y2EN5MF26V R8J86RF6K 26 D2C FM F7 378RL O845378 s-&'-*) F7 MD8 26@B R5M5 MBJ8 F6 fO94EFJMV FM F7 5@72 MD8 R5M5 MBJ8 E8M3E68R ?B 5@@ Y364MF267 F6 fO94EFJML TM FM7 7FNJ@87MV 5 s-&'-*) 456 426M5F6 8FMD8E 63N8EF4 2E 7MEF6K F6Y2EN5MF26L T s-&'-*) ?8D5U87 57 5 63N?8E CD86 B23 378 FM F6 5 63N8EF4 426M8ZM 56R 57 5 7MEF6K CD86 B23 378 FM F6 5 7MEF6K 426M8ZML >D5M F7V FY B23 5E8 C2EAF6K CFMD R5M5 MD5M @22A7 @FA8 63N?8E7V fO94EFJM 5773N87 MD5M FM F7 5 63N?8E 56R R287 CD5M8U8E F7 N27M 5JJE2JEF5M8 Y2E 63N?8E7L 9FNF@5E@BV FY B23 5E8 C2EAF6K CFMD R5M5 MD5M 456 26@B ?8 7MEF6K R5M5V fO94EFJM ME85M7 FM 57 7MEF6K R5M5L 123 456 5@C5B7 N5A8 63N?8E7 ?8D5U8 57 7MEF6K7 ?B 864@27F6K MD8N F6 ~32M5MF26 N5EA7 �d d�L

!"#$%&'( !)%&)*( #+,(-'./ 012345 671 89:;<1 4=:1>9? 3> 86>94@ ?<A889B9?A69348C A !)%&)*( ?A4 :AD1 B=>671> 598694?69348 AE3=6 671 8;1?9B9? 4A6=>1 3B 4=:1>9? 94B3>:A6934F G3> 1HA:;<1C 23= ?A4 7AI1 4=:1>9? 94B3>:A6934 67A6 >1;>181468 A 5A61 3> A 69:1F J714 =815 K967 3671> 5A61 3> 69:1 5A6AC 671 >18=<6 98 1H;>18815 A8 A 5A61 3> A 69:1F L3= ?A4 A<83 7AI1 A >9?7 IA>9162 3B 4=:1>9? 94B3>:A6934 >A4@94@ B>3: 033<1A4 IA<=18 63 7=@1 B<3A694@M;3946 4=:E1>8F N7181 59BB1>146 ?A61@3>918 3B 94B3>:A6934 67A6 ?A4 E1 ?346A9415 94 A !)%&)*( A>1 ?A<<15 8=E62;18F O386 3B 671 69:1C 23= ?A4 P=86 ;=6 671 D945 3B 5A6A 23= KA46 94 A !)%&)*(C A45 671 !)%&)*( E17AI18 94 A KA2 67A6 98 :386 A;;>3;>9A61 B3> 671 5A6A 96 ?346A948F N71 B3<<3K94@ 6AE<1 873K8 671 8=E62;18 3B 5A6A 67A6 A !)%&)*( ?A4 ?346A94F #+,(-'. Q./$%&'(&R* ST'(-!)%&)*( U494969A<9V15F WA<=1 98 X B3> 4=:1>9? IA>9AE<18 3> A V1>3M<14@67 86>94@ YZZ[ B3> 86>94@ IA>9AE<18F \+]]!)%&)*( 946146934A<<2 ?346A948 43 IA<95 5A6AF "RR].)* _346A948 19671> N>=1 3> GA<81F "-(. _346A948 9461@1> 94 671 >A4@1 X 63 aaF b*(.c.% _346A948 9461@1> 94 671 >A4@1 MdCefg 63 dCefeF h+%%.*$- Mi CddeCXdCfgaCjeeFagXg 63 i CddeCXdCfgaCjeeFagXeF kR*c _346A948 9461@1> 94 671 >A4@1 MCljeCjgdCfjg 63 CljeCjgdCfjeF #&*c]. _346A948 A 894@<1M;>1?98934C B<3A694@M;3946 4=:E1> 94 671 >A4@1 MdFjXgdmdg 63 MlFjXligmMja B3> 41@A69I1 IA<=18n lFjXligmMja 63 dFjXgdmdg B3> ;38969I1 IA<=18F QR+,]. _346A948 A 53=E<1M;>1?98934C B<3A694@M;3946 4=:E1> 94 671 >A4@1 MlFeiefidldjgfdmdXg 63 MjFijXfafjagjljemMdj B3> 41@A69I1 IA<=18n jFijXfafjagjljemMdj 63 lFeiefidldjgfdmdXg B3> ;38969I1 IA<=18F Q)(. _346A948 A 4=:E1> 67A6 >1;>181468 A 5A61 E16K114 oA4=A>2 lC lXX 63 p1?1:E1> dlC iiiiF q&T. r1;>181468 A 69:1 E16K114 XsXXsXX A45 dsaisai #(%&*c _346A948 A IA>9AE<1M<14@67 86>94@ 67A6 ?A4 E1 =; 63 A;;>3H9:A61<2 E9<<934 ?7A>A?61>8 94 <14@67F t,u.$( _346A948 A4 3EP1?6F S%%R% _346A948 A4 1>>3> 4=:E1>F L3= ?A4 =81 ?34I1>8934 B=4?69348 63 ?34I1>6 5A6A B>3: 341 8=E62;1 63 A43671>F 4 A5596934C 671 WA>N2;1 B=4?6934 >16=>48 94B3>:A6934 AE3=6 73K 23=> 5A6A 98 863>15 K96794 A !)%&)*(F vwxwy !"#$%&'( !)%&),]./ z IA>9AE<1 98 A ?34I149146 ;<A?173<51> 67A6 >1B1>8 63 A ?3:;=61> :1:3>2 <3?A6934 K71>1 23= ?A4 863>1 ;>3@>A: 94B3>:A6934 67A6 :A2 ?7A4@1 K79<1 23=> 8?>9;6 98 >=4494@F G3> 1HA:;<1C 23= :9@76 ?>1A61 A IA>9AE<1 ?A<<15 _<9?D_3=46 63 863>1 671 4=:E1> 3B 69:18 A =81> ?<9?D8 A4 3EP1?6 34 A ;A>69?=<A> J1E ;A@1F J71>1 671 IA>9AE<1 98 863>15 94 ?3:;=61> :1:3>2 98 =49:;3>6A46F J7A6 98 9:;3>6A46 98 67A6 23= 34<2 7AI1 63 >1B1> 63 A IA>9AE<1 E2 4A:1 63 811 968 IA<=1 3> 63 ?7A4@1 968 IA<=1F 4 W0{?>9;6C IA>9AE<18 A>1 A<KA28 3B 341 B=45A:146A< 5A6A 62;1C WA>9A46F Q.$])%&*c !)%&),]./ L3= 51?<A>1 IA>9AE<18 1H;<9?96<2 94 23=> 8?>9;6 =894@ 671 p9: 86A61:146C 671 |=E<9? 86A61:146C A45 671 |>9IA61 86A61:146F G3> 1HA:;<1s p9: p1@>118GA7>147196 ldd L3= 51?<A>1 :=<69;<1 IA>9AE<18 E2 81;A>A694@ 1A?7 IA>9AE<1 4A:1 K967 A ?3::AF G3> 1HA:;<1s

!"# $%&'()'*+ ,-*+.-+/0 123 4567 8599537 :;<97 =2>?9 @5A BCD CEF5 G;BECH; C ICH2CJE; 236E2B29EK JK F236EK AF2D> 29F DC3; 2D K5AH FBH269L 4?C9 2F D59 >;D;HCEEK C >55G 6HCB92B; J;BCAF; K5A B5AEG 32FF6;EE 9?; ICH2CJE; DC3; 2D 5D; 5H 35H; 6ECB;F7 BCAF2D> AD;M6;B9;G H;FAE9F N?;D K5AH FBH269 2F HADD2D>L O5H 9?C9 H;CF5D7 9?; P6925D QM6E2B29 F9C9;3;D9 2F CIC2ECJE; 95 H;RA2H; ;M6E2B29 G;BECHC925D 5< CEE ICH2CJE;FL S-T'*+ U/0)&'%)'V*0 WCH2CJE; DC3;F <5EE5N 9?; F9CDGCHG HAE;F <5H DC32D> CDK9?2D> 2D W8XBH269L Y ICH2CJE; DC3;Z [ \AF9 J;>2D N29? CD CE6?CJ;92B B?CHCB9;HL [ ]CDD59 B5D9C2D CD ;3J;GG;G 6;H25GL [ \AF9 D59 ;MB;;G __ B?CHCB9;HFL [ \AF9 J; AD2RA; 2D 9?; FB56; 2D N?2B? 29 2F G;BECH;GL $%V(/ -* ,'a/)'T/ Va b-&'-cd/0 4?; FB56; 5< C ICH2CJE; 2F G;9;H32D;G JK N?;H; K5A G;BECH; 29L e?;D K5A G;BECH; C ICH2CJE; N29?2D C 6H5B;GAH;7 5DEK B5G; N29?2D 9?C9 6H5B;GAH; BCD CBB;FF 5H B?CD>; 9?; ICEA; 5< 9?C9 ICH2CJE;L f9 ?CF E5BCE FB56; CDG 2F BCEE;G C 6H5B;GAH;gE;I;E ICH2CJE;L f< K5A G;BECH; C ICH2CJE; 5A9F2G; C 6H5B;GAH;7 K5A 3Ch; 29 I2F2JE; 95 CEE 9?; 6H5B;GAH;F 2D K5AH FBH269L 4?2F 2F C FBH269gE;I;E ICH2CJE;7 CDG 29 ?CF FBH269gE;I;E FB56;L i5N E5D> C ICH2CJE; ;M2F9F G;<2D;F 29F E2<;923;L 4?; E2<;923; 5< C FBH269gE;I;E ICH2CJE; ;M9;DGF <H53 9?; 923; 29 2F G;BECH;G AD92E 9?; 923; 9?; FBH269 2F <2D2F?;G HADD2D>L Y9 6H5B;GAH; E;I;E7 C ICH2CJE; ;M2F9F 5DEK CF E5D> CF K5A CH; 2D 9?; 6H5B;GAH;L e?;D 9?; 6H5B;GAH; ;M29F7 9?; ICH2CJE; 2F G;F9H5K;GL :5BCE ICH2CJE;F CH; 2G;CE CF 9;365HCHK F95HC>; F6CB; N?;D C 6H5B;GAH; 2F ;M;BA92D>L @5A BCD ?CI; E5BCE ICH2CJE;F 5< 9?; FC3; DC3; 2D F;I;HCE G2<<;H;D9 6H5B;GAH;F J;BCAF; ;CB? 2F H;B5>D2j;G 5DEK JK 9?; 6H5B;GAH; 2D N?2B? 29 2F G;BECH;GL k00'+*'*+ b-d./0 )V b-&'-cd/0 WCEA;F CH; CFF2>D;G 95 ICH2CJE;F BH;C92D> CD ;M6H;FF25D CF <5EE5NFZ 9?; ICH2CJE; 2F 5D 9?; E;<9 F2G; 5< 9?; ;M6H;FF25D CDG 9?; ICEA; K5A NCD9 95 CFF2>D 95 9?; ICH2CJE; 2F 5D 9?; H2>?97 N29? 9?; lmn F2>D J;2D> 9?; CFF2>D3;D9 56;HC95HL O5H ;MC36E;Z 8 m oo $%-d-& b-&'-cd/0 -* k&&-p b-&'-cd/0 \5F9 5< 9?; 923;7 K5A qAF9 NCD9 95 CFF2>D C F2D>E; ICEA; 95 C ICH2CJE; K5A ?CI; G;BECH;GL Y ICH2CJE; B5D9C2D2D> C F2D>E; ICEA; 2F C FBCECH ICH2CJE;L Y9 59?;H 923;F7 29 2F B5DI;D2;D9 95 CFF2>D 35H; 9?CD 5D; H;EC9;G ICEA; 95 C F2D>E; ICH2CJE;L 4?;D K5A BCD BH;C9; C ICH2CJE; 9?C9 BCD B5D9C2D C F;H2;F 5< ICEA;FL 4?2F 2F BCEE;G CD CHHCK ICH2CJE;L YHHCK ICH2CJE;F CDG FBCECH ICH2CJE;F CH; G;BECH;G 2D 9?; FC3; NCK7 ;MB;69 9?C9 9?; G;BECHC925D 5< CD CHHCK ICH2CJE; AF;F 6CH;D9?;F;F r s <5EE5N2D> 9?; ICH2CJE; DC3;L fD 9?; <5EE5N2D> ;MC36E;7 C F2D>E;gG23;DF25D CHHCK B5D9C2D2D> !! ;E;3;D9F 2F G;BECH;GZ 123 Yr!os YE9?5A>? 9?; DA3J;H F?5ND 2D 9?; 6CH;D9?;F;F 2F !o7 CEE CHHCKF 2D W8XBH269 CH; B5AD9;G <H53 JCF; o7 F5 9?C9 9?2F CHHCK CB9ACEEK B5D9C2DF !! ;E;3;D9FL fD FAB? CD CHHCK7 9?; DA3J;H 5< CHHCK ;E;3;D9F 2F CENCKF 9?; DA3J;H F?5ND 2D 6CH;D9?;F;F 6EAF 5D;L 4?2F h2DG 5< CHHCK 2F BCEE;G C <2M;GgF2j; CHHCKL

!"#$%&'( )*+ ,--./0 1,2, 2* 3,45 *6 253 3738302- *6 253 ,99,: +-.0/ ,0 .013; .02* 253 ,99,:< =3/.00.0/ ,2 >39* ,01 301.0/ ,2 ?@A 1,2, 4,0 B3 ,--./031 2* 253 3738302- *6 ,0 ,99,: ,- 6*77*C-D EF@G H IJK EF?G H LIM EFIG H ?@@ < < < EF?@G H JJ N.8.7,97:A 253 1,2, 4,0 B3 9329.3O31 69*8 ,0: 3738302 +-.0/ ,0 .013; .02* 253 P,92.4+7,9 ,99,: 3738302 :*+ C,02< Q*9 3;,8P73D < < < N*83R,9.,B73 H EFSG < < < E99,:- ,93 0*2 7.8.231 2* , -.0/73 1.830-.*0< )*+ 4,0 5,O3 ,- 8,0: ,- K@ 1.830-.*0-A ,725*+/5 8*-2 P3*P73 4,00*2 4*8P935301 8*93 25,0 25933 *9 6*+9 1.830-.*0-< T+72.P73 1.830-.*0- ,93 1347,931 B: -3P,9,2.0/ ,0 ,99,:U- -.>3 0+8B39- .0 253 P,930253-3- C.25 4*88,-< V0 253 6*77*C.0/ 3;,8P73A 253 T:W,B73 O,9.,B73 .- , 2C*X1.830-.*0,7 ,99,: 4*0-.-2.0/ *6 K 9*C- ,01 ?? 4*7+80-D Y.8 T:W,B73FJA ?@G V0 , 2C*X1.830-.*0,7 ,99,:A 253 6.9-2 0+8B39 .- ,7C,:- 253 0+8B39 *6 9*C-Z 253 -34*01 0+8B39 .- 253 0+8B39 *6 4*7+80-< )*+ 4,0 ,7-* 1347,93 ,0 ,99,: C5*-3 -.>3 45,0/3- C5.73 :*+9 -49.P2 .- 9+00.0/< W5.- .- 4,7731 , 1:0,8.4 ,99,:< W53 ,99,: .- .0.2.,77: 1347,931 C.25.0 , P9*431+93 +-.0/ 3.2539 253 [&\ -2,238302 *9 +-.0/ 253 ]3Y.8 -2,238302< *C3O39A 6*9 , 1:0,8.4 ,99,:A 0* -.>3 *9 0+8B39 *6 1.830-.*0- .- P7,431 .0-.13 253 P,930253-3-< Q*9 3;,8P73D Y.8 T:E99,:FG ]3Y.8 E0*2539E99,:FG W* +-3 , 1:0,8.4 ,99,:A :*+ 8+-2 -+B-3_+3027: +-3 a[&\ 2* 132398.03 253 0+8B39 *6 1.830-.*0- ,01 253 -.>3 *6 3,45 1.830-.*0< V0 253 6*77*C.0/ 3;,8P73A a[&\ -32- 253 .0.2.,7 -.>3 *6 253 1:0,8.4 ,99,: 2* IJ< E -+B-3_+302 a[&\ -2,238302 93-.>3- 253 ,99,: 2* L@A B+2 +-3- 253 b%aca%da e3:C*91 2* P93-39O3 253 4*02302- *6 253 ,99,: ,- 253 93-.>.0/ 2,e3- P7,43< ]3Y.8 T:E99,:FIJG < < < ]3Y.8 f93-39O3 T:E99,:FL@G W5393 .- 0* 7.8.2 2* 253 0+8B39 *6 2.83- :*+ 4,0 93-.>3 , 1:0,8.4 ,99,:A B+2 :*+ -5*+71 e0*C 25,2 .6 :*+ 8,e3 ,0 ,99,: -8,7739 25,0 .2 C,-A :*+ 7*-3 253 1,2, .0 253 37.8.0,231 3738302-< ghihj !"#$%&'( klmc(nm(c E 4*0-2,02 .- , 83,0.0/6+7 0,83 25,2 2,e3- 253 P7,43 *6 , 0+8B39 *9 -29.0/ ,01 03O39 45,0/3-< R=N49.P2 136.03- , 0+8B39 *6 .029.0-.4 4*0-2,02-< )*+ 4,0 /32 132,.731 .06*98,2.*0 ,B*+2 253-3 .029.0-.4 4*0-2,02- 69*8 253 R=N49.P2 o,0/+,/3 ]36393043< ?LJ

!"# $%&'()'*+ ,-*+.-+/0 1&/-)'*+ 12*0)-*)0 345 6789:8 5;87<=8>?@8= 64@;:9@:; ?@ ABC67?D: 5;?@E :F8 G4@;: ;:9:8H8@:I JF?; K8:; L45 6789:8 ;:7?@E 47 @5H87?6 64@;:9@:; M?:F H89@?@E>5K @9H8; 9@= 9KK4M; L45 :4 9;;?E@ :F8H K?:879K N9K58;I O47 8P9HDK8Q G4@;: RLC:7?@E S TJF?; ?; HL ;:7?@EIT G4@;: RLUE8 S VW X4:8 :F9: :F8 ;:7?@E K?:879K ?; 8@6K4;8= ?@ Y54:9:?4@ H97Z; [T T\I ]54:9:?4@ H97Z; 978 :F8 H4;: 4N?45; M9L :4 =?>>878@:?9:8 ;:7?@E N9K58; >74H @5H87?6 N9K58;I _9:8 K?:879K; 9@= :?H8 K?:879K; 978 78D78;8@:8= L 8@6K4;?@E :F8H ?@ @5H 87 ;?E@; [\I O47 8P9HDK8Q G4@;: G5:4>>_9:8 S #<!<Wa 345 H9L M9@: :4 9=4D: 9 @9H?@E ;6F8H8 :4 =?>>878@:?9:8 64@;:9@:; >74H N97?9K8;I JF?; M?KK ;9N8 L45 >74H :7L?@E :4 789;;?E@ 64@;:9@: N9K58; MF?K8 L457 ;67?D: ?; 75@@?@EI O47 8P9HDK8b L45 H?EF: M9@: :4 5;8 9 TNT 47 T64@T D78>?P 4@ L457 64@;:9@: @9H8;b 47 L45 H?EF: @9H8 L457 64@;:9@:; ?@ 9KK 69D?:9K K8::87;I _?>>878@:?9:?@E 64@;:9@:; >74H N97?9K8; 8K?H?@9:8; 64@>5;?4@ 9; L45 =8N8K4D H478 64HDK8P ;67?D:;I cdede fg$%&'() h(/&-)2&0 ABC67?D: F9; 9 >5KK 79@E8 4> 4D879:47;b ?@6K5=?@E 97?:FH8:?6 4D879:47;b 64HD97?;4@ 4D879:47;b 64@69:8@9:?4@ 4D879:47;b 9@= K4E?69K 4D879:47;I h(/&-)2& i&/%/j/*%/ kF8@ ;8N879K 4D879:?4@; 46657 ?@ 9@ 8PD78;;?4@b 896F D97: ?; 8N9K59:8= 9@= 78;4KN8= ?@ 9 D78=8:87H?@8= 47=87 69KK8= 4D879:47 D7868=8@68I 345 69@ 5;8 D978@:F8;8; :4 4N877?=8 :F8 47=87 4> D7868=8@68 9@= >4768 ;4H8 D97:; 4> 9@ 8PD78;;?4@ :4 8 8N9K59:8= 8>478 4:F87;I lD879:?4@; M?:F?@ D978@:F8;8; 978 9KM9L; D87>47H8= 8>478 :F4;8 45:;?=8I k?:F?@ D978@:F8;8;b F4M8N87b ;:9@=97= 4D879:47 D7868=8@68 ?; H9?@:9?@8=I kF8@ 8PD78;;?4@; 64@:9?@ 4D879:47; >74H H478 :F9@ 4@8 69:8E47Lb 97?:FH8:?6 4D879:47; 978 8N9K59:8= >?7;:b 64HD97?;4@ 4D879:47; 978 8N9K59:8= @8P:b 9@= K4E?69K 4D879:47; 978 8N9K59:8= K9;:I G4HD97?;4@ 4D879:47; 9KK F9N8 8Y59K D7868=8@68m :F9: ?;b :F8L 978 8N9K59:8= ?@ :F8 K8>:<:4<7?EF: 47=87 ?@ MF?6F :F8L 9DD897I U7?:FH8:?6 9@= K4E?69K 4D879:47; 978 8N9K59:8= ?@ :F8 >4KK4M?@E 47=87 4> D7868=8@68I nd o&')pq/)'% 2(/&-)2&0 rd 12q(-&'02* 2(/&-)2&0 sd ,2+'%-t 2(/&-)2&0 u/0%&'()'2* $vqw2tu/0%&'()'2* $vqw2tu/0%&'()'2* $vqw2t xPD4@8@:?9:?4@ y xY59K?:L S z4E?69K @8E9:?4@ X4: {@97L @8E9:?4@ < |@8Y59K?:L }~ z4E?69K 64@�5@6:?4@ U@= R5K:?DK?69:?4@ � z8;; :F9@ } z4E?69K =?;�5@6:?4@ l7 _?N?;?4@ � �789:87 :F9@ ~ z4E?69K 8P6K5;?4@ �47 |@:8E87 =?N?;?4@ � z8;; :F9@ 47 8Y59K :4 }S z4E?69K 8Y5?N9K8@68 xYN R4=5K5; 97?:FH8:?6 R4= �789:87 :F9@ 47 8Y59K :4 ~S z4E?69K ?HDK?69:?4@ |HD U==?:?4@ � l�86: 8Y5?N9K8@68 |; C5:796:?4@ < C:7?@E 64@69:8@9:?4@ �

!"#$%&'( )*+ ,--./0,102013 .4 1*+ .5+6,1.6- 0- 7+41 1. 608*19 :*+; <=710570/,10.; ,;> >020-0.; .//=6 1.8+1*+6 0; ,; +?56+--0.;@ +,/* .5+6,10.; 0- +2,7=,1+> ,- 01 .//=6- 46.< 7+41 1. 608*19 A0B+C0-+@ C*+; ,>>010.; ,;> -=D16,/10.; .//=6 1.8+1*+6 0; ,; +?56+--0.;@ +,/* .5+6,10.; 0- +2,7=,1+> 0; .6>+6 .4 ,55+,6,;/+ 46.< 7+41 1. 608*19 )*+ -160;8 /.;/,1+;,10.; EFG .5+6,1.6 0- ;.1 ,; ,601*<+10/ .5+6,1.6@ D=1 0; 56+/+>+;/+ 01 4,77- ,41+6 ,77 ,601*<+10/ .5+6,1.6- ,;> D+4.6+ ,77 /.<5,60-.; .5+6,1.6-9 )*+ HI .5+6,1.6 0- ,; .DJ+/1 6+4+6+;/+ /.<5,60-.; .5+6,1.69 K1 >.+- ;.1 /.<5,6+ .DJ+/1- .6 1*+06 2,7=+-L 01 /*+/B- .;73 1. >+1+6<0;+ 04 1C. .DJ+/1 6+4+6+;/+- 6+4+6 1. 1*+ -,<+ .DJ+/19 MNM O#HPQ RSPTHUHSPVW #UVUXYXPU# Z.= /,; /.;16.7 1*+ 47.C .4 3.=6 -/6051 C01* /.;>010.;,7 -1,1+<+;1- ,;> 7..50;8 -1,1+<+;1-9 [-0;8 /.;>010.;,7 -1,1+<+;1-@ 3.= /,; C601+ \]/6051 /.>+ 1*,1 <,B+- >+/0-0.;- ,;> 6+5+,1- ,/10.;-9 )*+ 4.77.C0;8 /.;>010.;,7 -1,1+<+;1- ,6+ ,2,07,D7+ 0; \]/6051_ K4999)*+;9997-+ -1,1+<+;1 +7+/1 a,-+ -1,1+<+;1 Ybc&de Tf$&I&gdI OI&de HhNNNUifdNNNXjIf )*+ HhNNNUifdNNNXjIf -1,1+<+;1 0- =-+> 1. +2,7=,1+ C*+1*+6 , /.;>010.; 0- U%kf .6 lbjIf ,;>@ >+5+;>0;8 .; 1*+ 6+-=71@ 1. -5+/043 .;+ .6 <.6+ -1,1+<+;1- 1. +?+/=1+9 [-=,773 1*+ /.;>010.; 0- ,; +?56+--0.; 1*,1 =-+- , /.<5,60-.; .5+6,1.6 1. /.<5,6+ .;+ 2,7=+ .6 2,60,D7+ C01* ,;.1*+69 m.6 0;4.6<,10.; ,D.=1 /.<5,60-.; .5+6,1.6-@ -++ a.<5,60-.; n5+6,1.6-9 HhNNNUifdNNNXjIf -1,1+<+;1- /,; D+ ;+-1+> 1. ,- <,;3 7+2+7- ,- 3.= ;++>9 okdd&de #(b(fpfd(I &h b Rgdq&(&gd &I U%kf ). 6=; .;73 .;+ -1,1+<+;1 C*+; , /.;>010.; 0- U%kf@ =-+ 1*+ -0;87+r70;+ -3;1,? 4.6 1*+ HhNNNUifdNNNXjIf -1,1+<+;19 )*+ 4.77.C0;8 +?,<57+ -*.C- 1*+ -0;87+r70;+ -3;1,?9 s.10/+ 1*,1 1*0- +?,<57+ .<01- 1*+ XjIf B+3C.6>9 =D m0?t,1+EG t0< <3t,1+ <3t,1+ u vwxyzx{|v K4 <3t,1+ } s.C )*+; <3t,1+ u s.C ;> =D ). 6=; <.6+ 1*,; .;+ 70;+ .4 /.>+@ 3.= <=-1 =-+ 1*+ <=71057+r70;+ E.6 D7./BG -3;1,?9 )*0- -3;1,? 0;/7=>+- 1*+ Xdq Hh -1,1+<+;1@ ,- -*.C; 0; 1*+ 4.77.C0;8 +?,<57+_ =D ~7+61[-+6E2,7=+G K4 2,7=+ u � )*+; ~7+61A,D+79m.6+a.7.6 u 2D�+> ~7+61A,D+79m.;19].7> u )6=+ ~7+61A,D+79m.;19K1,70/ u )6=+ ;> K4 ;> =D yz�

!"# $%&'()'*+ ,-*+.-+/0 1.**'*+ 2/&)-'* $)-)/3/*)0 '4 - 25*6')'5* '0 7&./ -*6 1.**'*+ 8)9/&0 '4 - 25*6')'5* '0 :-;0/ <=> ?@A >BC @A D4EEE79/*EEEF;0/ BG@GCHCAG G= ICJKAC GL= MN=?OB =J CPC?>G@MNC BG@GCHCAGBQ =AC MN=?O G= R>A KJ GSC ?=AIKGK=A KB 7&./T GSC =GSCR MN=?O G= R>A KJ GSC ?=AIKGK=A KB :-;0/U V>M WNCRGXBCRYZ@N>C[ \J Z@N>C ] _SCA WNCRG@MCNUa=RCb=N=R ] ZMcCI WNCRG@MCNUa=AGUd=NI ] _R>C WNCRG@MCNUa=AGU\G@NK? ] _R>C eNBC WNCRG@MCNUa=RC?=N=R ] ZMdN@?O WNCRG@MCNUa=AGUd=NI ] a@NBC WNCRG@MCNUa=AGU\G@NK? ] a@NBC eAI \J eAI V>M _SC J=NN=LKAf JN=L ?S@RG CPgN@KAB GSC JN=L =J GSC @M=ZC CP@HgNCU VG@RG<CB h= \B Z@N>C ]WNCRG@MCNUa=RCb=N=R ] ZMcCI WNCRG@MCNUa=AGUd=NI ] _R>C WNCRG@MCNUa=AGU\G@NK? ] _R>C WNCRG@MCNUa=RCb=N=R ] ZMdN@?O WNCRG@MCNUa=AGUd=NI ] a@NBC WNCRG@MCNUa=AGU\G@NK? ] a@NBC VG=g i/%'6'*+ j/)k//* $/l/&-; m;)/&*-)'l/0 W Z@RK@GK=A =A GSC D4EEE79/*EEEF;0/ BG@GCHCAG @NN=LB n=> G= ?S==BC JR=H BCZCR@N @NGCRA@GKZCBU WIIKAf F;0/D4 ?N@>BCB CPg@AIB GSC J>A?GK=A@NKGn =J GSC D4EEE79/*EEEF;0/ BG@GCHCAG B= GS@G n=> ?@A ?=AGR=N gR=fR@H JN=L M@BCI =A IKJJCRCAG g=BBKMKNKGKCBU a=R CP@HgNCQ V>M cCg=RGo@N>CYZ@N>C[ \J Z@N>C ] _SCA pBfd=P Z@N>C eNBC\J Z@N>C ] ! _SCA pBfd=P Z@N>C eNBC\J Z@N>C ] q GSCA pBfM=P Z@N>C

!"#$%&'( )*+, -+./01 234*5, 056 07 849.,:2 )9; <7 =05 >49 4;; 4+ ?49@ ABCDEF >*45+,+ 4+ @05 9,,; 60 G80HI;, 4*6,8946IH, >J0I>,+K )16,9+IH, 5+, 07 6J, ABCDEF >*45+,+ 076,9 /,>0?,+ >5?/,8+0?,K L /,66,8 M4@ 60 >J00+, /,6M,,9 +,H,84* 4*6,8946IH,+ I+ 6J, #DBD$( NOCD +646,?,96K POQ&RS TD$&C&URC V&(W #DBD$( NOCD XJ, #DBD$( NOCD +685>658, G80HI;,+ 49 4*6,8946IH, 60 EFYYYZWDRYYYABCDEF 708 +,*,>6IH,*@ ,1,>56I9. 09, /*0>[ 07 +646,?,96+ 780? 4?09. ?5*6IG*, /*0>[+ 07 +646,?,96+K L #DBD$( NOCD +646,?,96 G80HI;,+ >4G4/I*I6@ +I?I*48 60 6J, EFYYYZWDRYYYABCD C(O(D\DR(] /56 I6 ?4[,+ >0;, ?08, ,77I>I,96 49; 8,4;4/*,K L #DBD$( NOCD +685>658, M08[+ MI6J 4 +I9.*, 6,+6 ,1G8,++I09 6J46 I+ ,H4*546,; 09>,] 46 6J, 60G 07 6J, +685>658,K XJ, 8,+5*6 07 6J, ,1G8,++I09 I+ 6J,9 >0?G48,; MI6J 6J, H4*5,+ 708 ,4>J NOCD I9 6J, +685>658,K <7 6J,8, I+ 4 ?46>J] 6J, /*0>[ 07 +646,?,96+ 4++0>I46,; MI6J 6J46 NOCD I+ ,1,>56,; _,*,>6 4+, a0>5?,96Kb08?cK48;X@G,KdG6I09+e_,*,>6,;<9;,1fKX,16 4+, 2-4+6,848;2 aI+G*4@- g0.0 34*I;46,- L>>0596 4+, 23I+42 aI+G*4@3I+4g0.0 34*I;46,3I+4L>>0596 4+, 2L?,8I>49 )1G8,++2 aI+G*4@L-)h dg0.0 34*I;46,L-)h dL>>0596 4+, )*+, aI+G*4@i9[90M9<?4., j80?G6L.4I9 )9; _,*,>6 k06I>, 6J46 6J, #DBD$( NOCD +685>658, ,H4*546,+ 49 ,1G8,++I09 09>, 46 6J, 60G 07 6J, +685>658,K <9 >09684+6] 6J, EFYYYZWDRYYYABCDEF +685>658, >49 ,H4*546, 4 ;I77,8,96 ,1G8,++I09 708 ,4>J ABCDEF +646,?,96K =05 >49 8,G*4>, 49 EFYYYZWDRYYYABCDEF +685>658, MI6J 4 #DBD$( NOCD +685>658, 09*@ I7 ,4>J ABCDEF +646,?,96 ,H4*546,+ 6J, +4?, ,1G8,++I09K lYm noopEqr Zstours NoTA uC&RS nUU'C (U tD'DO( NUvD g00GI9. 4**0M+ @05 60 859 4 .805G 07 +646,?,96+ 8,G,46,;*@K _0?, *00G+ 8,G,46 +646,?,96+ 596I* 4 >09;I6I09 I+ wOBCDx 06J,8+ 8,G,46 +646,?,96+ 596I* 4 >09;I6I09 I+ Z%yDK XJ,8, 48, 4*+0 *00G+ 6J46 8,G,46 +646,?,96+ 4 +G,>I7I> 95?/,8 07 6I?,+K XJ, 70**0MI9. *00GI9. +646,?,96+ 48, 4H4I*4/*, I9 3z_>8IG6 a0KKKg00G g00G+ MJI*, 08 596I* 4 >09;I6I09 I+ Z%yDK {JI*,KKK{,9; g00G+ MJI*, 4 >09;I6I09 I+ Z%yDK b08KKKk,16 i+,+ 4 >0596,8 60 859 +646,?,96+ 4 +G,>I7I,; 95?/,8 07 6I?,+K c|} b08 )4>JKKKk,16 ~,G,46+ 4 .805G 07 +646,?,96+ 708 ,4>J I6,? I9 4 >0**,>6I09 08

!"# $%&'()'*+ ,-*+.-+/0 1234 1516178 9: 27 2;;2<= >0'*+ ?@ ,@@(0 A9B 327 BC1 ?@DDD,@@( C82816178C 89 ;B7 2 E593F 9: C82816178C 27 G7H1:G7G81 7B6E1; 9: 8G61C= I41 C82816178C 2;1 ;1J1281H 1G841; K4G51 2 397HG8G97 GC L&./ 9; B78G5 2 397HG8G97 E13961C L&./= M/(/-)'*+ $)-)/N/*)0 OP'Q/ - R@*S')'@* '0 L&./ TC1 841 OP'Q/ F1<K9;H 89 3413F 2 397HG8G97 G7 2 ?@DDD,@@( C82816178= A9B 327 3413F 841 397HG8G97 E1:9;1 <9B 1781; 841 599J U2C C49K7 G7 841 :9559KG7V W4FXG;C8Y4G51 1Z26J51[\ 9; <9B 327 3413F G8 2:81; 841 599J 42C ;B7 28 512C8 9731 U2C C49K7 G7 841 W4F]2C8Y4G51 1Z26J51[= 7 841 W4FXG;C8Y4G51 J;931HB;1\ G: 6<_B6 GC C18 89 G7C812H 9: a#\ 841 C82816178C G7CGH1 841 599J KG55 71b1; ;B7= 7 841 W4F]2C8Y4G51 J;931HB;1\ 841 C82816178C G7CGH1 841 599J ;B7 975< 9731 E132BC1 841 397HG8G97 GC 25;12H< c-Q0/= dBE W4FXG;C8Y4G51U[ eG6 39B781;\ 6<_B6 39B781; f # 6<_B6 f a# e9 Y4G51 6<_B6 g !# 6<_B6 f 6<_B6 h ! 39B781; f 39B781; i ! ]99J jCVk9Z lI41 599J 62H1 l m 39B781; m l ;1J18G8G97C=l n7H dBE dBE W4F]2C8Y4G51U[ eG6 39B781;\ 6<_B6 39B781; f # 6<_B6 f e9 6<_B6 f 6<_B6 h ! 39B781; f 39B781; i ! ]99J Y4G51 6<_B6 g !# jCVk9Z lI41 599J 62H1 l m 39B781; m l ;1J18G8G97C=l n7H dBE I41 2E9b1 :GVB;1 C49KC 8K9 1Z26J51 39H1 :;2V6178C G55BC8;28G7V 841 H9o 599J 27H H9 K4G51 o 599J C82816178C= 7 841 :G;C8 599J 841 397HG8G97 GC 3413F1H E1:9;1 1Z13B8G7V 841 39H1 EB8 G7 841 C1397H 599J 841 C82816178C 2;1 :G;C8 1Z13B81H 9731 27H 8417 841 397HG8G97 GC 3413F1H= 7 841 :G;C8 599J 841 G7C8;B38G97C VGb17 G7 841 599JpC E9H< KG55 71b1; E1 1Z13B81H G: 841 397HG8G97 :2G5C G7G8G255< EB8 G7 841 C1397H 599J 841C1 G7C8;B38G97C K9B5H E1 1Z13B81H 28 512C8 9731= I41 :9559KG7V :59K 342;8 C49KC 841 1Z13B8G97 J527 9: 841 C1397H J;931HB;1 G=1= W413F]2C8Y4G51q

!"#$%&'( )*+,* -./ 01 2/ 34053 6 789.:,.+/. 34053 ;4 7 +<= 2<:,.+/. :15<*., ;4 72<>*>+?>@. 34053 *1 A +<= :15<*., *1 8 )*1B 9>/B?+4 *C. D+?5. 1E :15<*., F&GH%I JKLM NOI$H(&PQ RSTQ PU (VI #I$PQW XPP' &Q F&GH%I JKY ZI'IT(&QG T #(T(I[IQ( \Q(&S T ]PQW&(&PQ "I$P[I _%HI -15 :+< 5/. *C. \Q(&S .4a1,= >< *a1 a+4/ *1 :C.: + :1<=>*>1< >< + bPKKKXPP' /*+*.3.<*c -15 :+< :C.: *C. :1<=>*>1< ;.E1,. 415 .<*., *C. ?11B d+/ /C1a< >< *C. E1??1a><e fCg>,/*h<*>? .i+3B?.jk 1, 415 :+< :C.: >* +E*., *C. ?11B C+/ ,5< +* ?.+/* 1<:. d+/ /C1a< >< *C. fCl+/*h<*>? .i+3B?.jc m/ ?1<e +/ *C. :1<=>*>1< >/ FTSIk *C. ?11B :1<*><5./c )5; fCg>,/*h<*>?dj 9>3 :15<*.,k 34053 :15<*., n 8 34053 n o8 91 h<*>? 34053 n 78 34053 n 34053 p 7 :15<*., n :15<*., q 7 l11B r/es1i tuC. ?11B 3+=. t v :15<*., v t ,.B.*>*>1</ct w<= )5; )5; fCl+/*h<*>?dj 9>3 :15<*.,k 34053 :15<*., n 8 34053 n 7 91 34053 n 34053 q 7 :15<*., n :15<*., q 7 l11B h<*>? 34053 n 78 r/es1i tuC. ?11B 3+=. t v :15<*., v t ,.B.*>*>1</ct w<= )5; NO&(&QG T bPKKKXPP' #(T(I[IQ( U%P[ xQ&WI (VI XPP' 7y7 -15 :+< .i>* + bPKKKXPP' ;4 5/><e *C. NO&( bP /*+*.3.<*c s.:+5/. 415 5/5+??4 a+<* *1 .i>* 1<?4 >< :.,*+>< />*5+*>1</k /5:C +/ *1 +D1>= +< .<=?.// ?11Bk 415

!"# $%&'()'*+ ,-*+.-+/0 123456 417 827 9:') ;< 18=87>7?8 @? 827 A&./ 18=87>7?8 B53CD 3E =? FGHHHAI/*HHH9J0/ 18=87>7?8K LE 827 C3?6@8@3? @1 M-J0/N 827 533O P4?1 =1 414=5K Q827PR@17N S34 OP3B=B5S 6@6 ?38 ?776 = 533O @? 827 E@P18 O5=C7K L? 827 E3553R@?T 7U=>O57N >SV4> @1 =11@T?76 = W=547 82=8 CP7=871 =? 7?65711 533OK X27 FGHHHAI/*HHH9J0/ 18=87>7?8 C27CD1 E3P 82@1 C3?6@8@3?N OP7W7?8@?T 827 7?65711 P7O78@8@3?K Y4B ZU@8ZU=>O57[\ ]@> C34?87PN >SV4> C34?87P _ >SV4> ]3 a?8@5 >SV4> !_ >SV4> >SV4> b ! C34?87P C34?87P c ! LE >SV4> d !_ X27? ZU@8 ]3 e33O f1Tg3U hX27 533O >=67 h i C34?87P i h P7O78@8@3?1Kh Z?6 Y4B j0'*+ kI'J/HHHk/*l X27 kI'J/HHHk/*l 18=87>7?8 @1 OP3W@676 @? mgYCP@O8 E3P 82317 R23 =P7 E=>@5@=P R@82 @81 41=T7K n3R7W7PN B7C=417 3E 827 5=CD 3E E57U@B@5@8S @? kI'J/HHHk/*lN @8 @1 P7C3>>7?676 82=8 S34 417 ;<HHH,<<( @?187=6K j0'*+ M<&HHHo/:) p34 C=? 417 M<&HHHo/:) 18=87>7?81 83 P4? = B53CD 3E 18=87>7?81 = 1O7C@E@C ?4>B7P 3E 8@>71K q3P 533O1N 417 = C34?87P W=P@=B57 R2317 W=547 @1 @?CP7=176 3P 67CP7=176 R@82 7=C2 P7O78@8@3? 3E 827 533OK q3P 7U=>O57N 827 E3553R@?T OP3C764P7 C=4171 = OP3C764P7 C=5576 fSrP3C 83 7U7C487 s_ 8@>71K X27 M<& 18=87>7?8 1O7C@E@71 827 C34?87P W=P@=B57 U =?6 @81 18=P8 =?6 7?6 W=5471K X27 o/:) 18=87>7?8 @?CP7>7?81 827 C34?87P W=P@=B57 BS !K Y4B ]3fSrP3Cs_X@>71[\ ]@> U q3P U ! X3 s_ fSrP3C V7U8 Z?6 Y4B a1@?T 827 $)/( D7SR3P6N S34 C=? @?CP7=17 3P 67CP7=17 827 C34?87P W=P@=B57 BS 827 W=547 S34 1O7C@ESK L? 827 E3553R@?T 7U=>O57N 827 C34?87P W=P@=B57 t @1 @?CP7>7?876 BS # 7=C2 8@>7 827 533O P7O7=81K u27? 827 533O @1 E@?@1276N 838=5 @1 827 14> 3E #N "N vN wN =?6 !_K Y4B XR31X38=5[\ ]@> tN 838=5 q3P t # X3 !_ Y87O # 838=5 838=5 c t V7U8 f1Tg3U hX27 838=5 @1 h i 838=5

!"#$%&'( )*+ ,-. /0 +1231451 671 20-*613 84394.:1; <0- -51 4 *1=46981 #(>' 84:-1? @0- A-56 5B129C< 4* 1*+ 84:-1 6746 95 :155 674* 671 56436 84:-1? D* 671 C0::0E9*= 1F4AB:1; 671 20-*613 84394.:1 A<G-A 95 +1231451+ .< H 1427 69A1 671 :00B 31B1465? I71* 671 :00B 95 C9*9571+; 6064: 95 671 5-A 0C JK; JL; JH; JM; N; K; L; 4*+ H? ,-. G1E/064:OP Q9A A<G-A; 6064: R03 A<G-A S JK /0 H ,61B TH 6064: S 6064: U A<G-A G1F6 V5=W0F X/71 6064: 95 X Y 6064: )*+ ,-. @0- 24* 1F96 4*< Z[%\\\]>( 56461A1*6 .1C031 671 20-*613 3142715 965 1*+ 84:-1 .< -59*= 671 _&( Z[% 56461A1*6? W124-51 <0- -5-4::< E4*6 60 1F96 0*:< 9* 213649* 596-4690*5; 5-27 45 E71* 4* 13303 022-35; <0- 570-:+ -51 671 _&( Z[% 56461A1*6 9* 671 %a> 56461A1*6 .:02b 0C 4* cd\\\e>f\\\_gh> 56461A1*6? DC 671 20*+9690* 95 Zigh>; 671 :00B 3-*5 45 -5-4:? j6713E951 <0- B30.4.:< +9+ *06 *11+ 60 -51 671 :00B 9* 671 C9356 B:421? kh&fl Z[% _i$e\\\]>( m Z[% _i$e\\\]>( :00B 95 59A9:43 60 4 Z[%\\\]>( :00B? D*5614+ 0C 31B1469*= 671 56461A1*65 4 5B129C91+ *-A.13 0C 69A15; 4 Z[% _i$e\\\]>( :00B 31B1465 4 =30-B 0C 56461A1*65 C03 1427 961A 9* 4 20::12690* 0C 0.n1265 03 C03 1427 1:1A1*6 0C 4* 4334<? /795 95 15B1294::< 71:BC-: 9C <0- +0 *06 b*0E 70E A4*< 1:1A1*65 431 B3151*6 9* 4 20::12690*? D* 671 C0::0E9*= o/Vp 20+1 1F4AB:1; 671 20*61*65 0C 4 q&$(&[fi%r 0.n126 431 -51+ 60 B:421 61F6 9* 518134: 61F6 .0F15s to/Vpu to)mQut/D/p)uR03A5 4*+ ):1A1*65tv/D/p)utvo)mQu t,wxDy/ pmGz{mz)SX|W,239B6Xu }~�� /795 20+1 1F4AB:1 +015 Gj/ 9::-563461 671 R03 )427�G1F6 :00B? DC 671 20-*6 0C + 24* .1 +1613A9*1+; 671* 0*1 *11+ *06 .1 -59*= 6795 :00B 4*+ 671 R03�G1F6 :00B E9:: +0? y:1451 =981 4 .16613 1F4AB:1? m6 4 A9*9A-A; E3961 6795 1F4AB:1 60 A4b1 -51 0C 671 R03 )427�G1F6 :00B? t�TT ,-. 2A+w74*=1�j*w:92b Q9A + �w31461 4 84394.:1 ,16 + S w31461j.n126OX,239B69*=?Q92690*43<XP +?m++ XMX; Xm671*5X �m++ 50A1 b1<5 4*+ 961A5 +?m++ XJX; XW1:=34+1X +?m++ XHX; Xw4930X 4 S +?961A5 R03 9 S M /0 +?w0-*6 +02-A1*6?C3AR03A?):1A1*65O9P?|4:-1 S 4O9P G1F6 )*+ ,-. TTu tv,wxDy/u tWjQ@u JL�

!"" #$%&'(&)* +,)*-,*./ 01234256 07859 3:92;<=>?7@>?<6 0A6 0BCADE 4FAG ; <4GHE<60A6 0BCADE 4FAG ; <4GHE<60A6 0BCADE 4FAG ; <4GHE<60A6 0BCADE 4FAG ; <IDEE@C< 3:92;<J?K1LMCNG< O:PQ2;<1RSJT UG>G<60A6 0V78596 0V1234256 0VI8WX6 0VU49P6 YZ.$[ \]-% %]*%.// _ ! a>SEG J@KG E@ JLGJT bLGELG> M CD?cG> Sd GeGC MCK A>S?G @> @KK MCK A>S?G f a>SEG J@KG SC OIgJ>SAE E@ NGCG>MEG ELG 7Sc@CCMJJS dG>SGd 4LSd N@Gd !h !h fh ih jh khl MCK d@ @C 7>@? ELG ELS>K CD?cG> @CbM>Kdh ELG CEL CD?cG> Sd ELG dD? @= ELG mC n !oEL MCK ELG mC n fo EL CD?cG>d i a>SEG J@KG E@ =SCK ELG =MJE@>SMR @= MCF NSeGC CD?cG> 4LSd Sd ELG A>@KDJE @= MRR CD?cG>d =>@? f E@ ELME CD?cG> pqr st#Yuvw uxYyz{uy# BC OIgJ>SAE ELG>G M>G Eb@ TSCKd @= A>@JGKD>Gd| ELG gDc A>@JGKD>G MCK ELG 7DCJES@C A>@JGKD>G #-} %]$.~-%./ : #-} A>@JGKD>G Sd M dG>SGd @= OIgJ>SAE dEMEG?GCEdh GCJR@dGK cF #-} MCK y)~ #-} dEMEG?GCEdh ELME AG>=@>? MJES@Cd cDE K@C�E >GED>C M eMRDG : #-} A>@JGKD>G JMC EMTG M>ND?GCEd mJ@CdEMCEdh eM>SMcRGdh @> GHA>GddS@Cd ELME M>G AMddGK cF M JMRRSCN A>@JGKD>Go B= M #-} A>@JGKD>G LMd C@ M>ND?GCEdh SEd #-} dEMEG?GCE ?DdE SCJRDKG MC G?AEF dGE @= AM>GCELGdGd mo 7SND>G j!� dL@bd M #-} A>@JGKD>G DdGd Eb@ SCE>SCdSJh @> cDSRE�SCh OIgJ>SAE =DCJES@Cdh 9dNI@H MCK BCADEI@Hh E@ A>@?AE M DdG> =@> d@?G SC=@>?MES@C BE ELGC KSdARMFd ELG >GdDREd @= M JMRJDRMES@C cMdGK @C ELME SC=@>?MES@C 4LG JMRJDRMES@C Sd AG>=@>?GK SC M �-)$(&]) A>@JGKD>G J>GMEGK DdSCN OIgJ>SAE 4LG �-)$(&]) A>@JGKD>G Sd dL@bC M=EG> ELG =@RR@bSCN KSdJDddS@C gDc 1@CeG>E4G?Amo EG?A ; BCADEI@Hm<�RGMdG GCEG> ELG EG?AG>MED>G SC KGN>GGd 7<h !o 9dNI@H <4LG EG?AG>MED>G Sd < � 1GRdSDdmEG?Ao � < KGN>GGd 1< 2CK gDc �-)$(&]) %]$.~-%./ : �-)$(&]) A>@JGKD>G Sd M dG>SGd @= OIgJ>SAE dEMEG?GCEd GCJR@dGK cF ELG �-)$(&]) MCK y)~ �-)$(&]) dEMEG?GCEd : �-)$(&]) A>@JGKD>G Sd dS?SRM> E@ M #-} A>@JGKD>Gh cDE JMC MRd@ >GED>C M eMRDG : �-)$(&]) A>@JGKD>G JMC EMTG M>ND?GCEd mJ@CdEMCEdh eM>SMcRGdh @> GHA>GddS@Cd ELME M>G AMddGK E@ SE cF M JMRRSCN A>@JGKD>Go B= M �-)$(&]) A>@JGKD>G LMd C@ M>ND?GCEdh SEd �-)$(&]) dEMEG?GCE ?DdE SCJRDKG MC G?AEF dGE @= AM>GCELGdGd mo : �-)$(&]) >GED>Cd M eMRDG cF

!"#$%&'( )**+,-+-, ) .)/01 23 +2* -)41 +- 3-1 35 4351 *2)2141-2* 36 271 85391:051; <71 51205- 2=81 36 ) >?@$(&A@ +* )/B)=* ) !C%&C@(; D- 271 63//3B+-, 1E)48/1F 271 G1/*+0* 60-92+3- 9)/90/)21* :1,511* G1/*+0* 6534 :1,511* H)751-71+2; I71- 271 60-92+3- +* 9)//1: 6534 271 G3-.152<148 #?J 85391:051F ) .)5+)K/1 93-2)+-+-, 271 )5,041-2 .)/01 +* 8)**1: 23 271 60-92+3-; <71 51*0/2 36 271 9)/90/)2+3- +* 51205-1: 23 271 9)//+-, 85391:051 )-: :+*8/)=1: +- ) 41**),1 K3E; L0K G3-.152<148MN 2148 O D-802P3EMQR/1)*1 1-215 271 214815)2051 +- :1,511* H;QF SN T*,P3E Q<71 214815)2051 +* Q U G1/*+0*M2148N U Q :1,511* G;Q V-: L0K H0-92+3- G1/*+0*M6W1,511*N G1/*+0* O M6W1,511* X YZN [ \ ] V-: H0-92+3- _((&@a bC(C &@(A C@c A?( Ad e%A$c?%f V)97 8+191 36 :)2) +* 8)**1: +-23 =305 85391:051* 0*+-, )- )5,041-2; g5,041-2* *15.1 )* 8/)9173/:15* 635 271 :)2) =30 B)-2 23 8)** +-23 =305 85391:051; h30 9)- -)41 =305 )5,041-2* B+27 )-= .)/+: .)5+)K/1 -)41; I71- =30 951)21 ) 85391:051 0*+-, 1+2715 271 #?J *2)2141-2 35 271 >?@$(&A@ *2)2141-2F 8)51-271*1* 40*2 K1 +-9/0:1: )6215 271 -)41 36 271 85391:051; g-= )5,041-2* )51 8/)91: +-*+:1 271*1 8)51-271*1*F *18)5)21: K= 9344)*; H35 1E)48/1F +- 271 63//3B+-, 1E)48/1F 6W1,511* +* ) 8/)9173/:15 635 271 .)/01 K1+-, 8)**1: +-23 271 G1/*+0* 60-92+3- 635 93-.15*+3-i H0-92+3- G1/*+0*M6W1,511*N G1/*+0* O M6W1,511* X YZN [ \ ] V-: H0-92+3- <3 ,12 :)2) 302 36 ) 85391:051F =30 40*2 0*1 ) >?@$(&A@; j1414K15F ) >?@$(&A@ 85391:051 9)- 51205- ) .)/01k ) #?J 85391:051 9)--32; lf&@a #?J C@c >?@$(&A@ e%A$c?%f &@ mAc g >?@$(&A@ +- =305 93:1 40*2 )/B)=* K1 0*1: 3- 271 5+,72 *+:1 36 ) .)5+)K/1 )**+,-41-2 35 +- )- 1E851**+3-; H35 1E)48/1i <148 O G1/*+0*M6W1,511*N 35 T*,P3E Q<71 G1/*+0* 214815)2051 +* Q U G1/*+0*M6W1,511*N U Q :1,511*;Q <3 9)// ) #?J 85391:051 6534 )-32715 85391:051F =30 9)- n0*2 2=81 271 -)41 36 271 85391:051 )/3-, B+27 .)/01* 635 )-= 51o0+51: )5,041-2*F 1)97 *18)5)21: K= ) 9344); <71 G)// *2)2141-2 +* -32 51o0+51:F K02 +6 =30 :3 0*1 +2F =30 40*2 1-9/3*1 )-= )5,041-2* +- 8)51-271*1*; <71 63//3B+-, 1E)48/1 *73B* 2B3 9)//* 23 271 T=R539 85391:051; p-1 0*1* 271 mCqq *2)2141-2 +- 271 93:1k 271 32715 :31* -32; P327 :3 1E)92/= 271 *)41 27+-,; G)// T=R539M6+5*2)5,F *193-:)5,N T=R539 6+5*2)5,F *193-:)5, r32+91 27)2 271 8)51-271*1* )51 34+221: +- 271 9)// B71- 271 mCqq *2)2141-2 +*-s2 0*1:; St\

!"# $%&'()'*+ ,-*+.-+/0 123 45 $6789: 6;<8=> 6;=4?=:8;=$ @ABCDE FADGHDICADJ KLH JMEEHJICADJ INKI OKP NHQR PAM SLCIH FABH MJCDE TCFLAJAUI VCJMKQ WKJCF XFLCRICDE YBCICADZ @ABCDE FADGHDICADJ FKD CDFQMBH INH UAQQASCDE[ \KOCDE FADGHDICADJ UAL A]HFIJ_ GKLCK]QHJ_ KDB RLAFHBMLHJ @AOOHDICDE FADGHDICADJ HaI UALOKIICDE KDB CDBHDICDE EMCBHQCDHJ NH OKCD LHKJAD UAL MJCDE K FADJCJIHDI JHI AU FABCDE FADGHDICADJ CJ IA JIKDBKLBCbH INH JILMFIMLH KDB FABCDE JIPQH AU K JFLCRI AL JHI AU JFLCRIJ JA INKI PAM KDB AINHLJ FKD HKJCQP LHKB KDB MDBHLJIKDB INH FABHZ cJCDE EAAB FABCDE FADGHDICADJ LHJMQIJ CD RLHFCJH_ LHKBK]QH_ KDB MDKO]CEMAMJ JAMLFH FABH INKI CJ FADJCJIHDI SCIN AINHL QKDEMKEH FADGHDICADJ KDB CJ KJ CDIMCICGH KJ RAJJC]QHZ 6d*0)-*) =-e'*+ 6d*f/*)'d*0 YKLQCHL GHLJCADJ AU VWXFLCRI NKB DA OHFNKDCJO UAL FLHKICDE MJHLgBHUCDHB FADJIKDIJZ @ADJIKDIJ_ CU MJHB_ SHLH CORQHOHDIHB KJ GKLCK]QHJ KDB BCJICDEMCJNHB ULAO AINHL GKLCK]QHJ MJCDE KQQ MRRHLFKJH FNKLKFIHLJZ TMQICRQH SALBJ SHLH JHRKLKIHB MJCDE INH MDBHLJFALH hij FNKLKFIHLZ kAL HaKORQH[ cXYlimnXiTop \Yqimn\Y qNCQH INCJ CJ JICQQ KD KFFHRIK]QH SKP IA CBHDICUP PAML FADJIKDIJ_ PAM OKP SKDI IA MJH KD KQIHLDKICGH DKOCDE JFNHOH_ DAS INKI PAM FKD FLHKIH ILMH FADJIKDIJ MJCDE INH @ADJI JIKIHOHDIZ NCJ FADGHDICAD MJHJ K OCaHBgFKJH UALOKI CD SNCFN FADJIKDI DKOHJ NKGH K rFADr RLHUCaZ kAL HaKORQH[ @ADsAMLtSD@ADJIKDI 4-&'-uv/ =-e'*+ 6d*f/*)'d*0 kAL RMLRAJHJ AU LHKBK]CQCIP KDB FADJCJIHDFP_ MJH INH UAQQASCDE RLHUCaHJ SCIN BHJFLCRICGH DKOHJ UAL GKLCK]QHJ CD PAML VWXFLCRI FABHZ $.u )w(/ 9&/x'y ?y-e(v/ WAAQHKD WQD WQDkAMDB WPIH WPI WPIzMKDICIP {KIH {IO {IOXIKLI {AM]QH {]Q {]Q|LCFH YLLAL YLL YLLtLBHL\MO nDIHEHL nDI nDI|LCFH mADE mDE mDE{CJIKDFH t]HFI t] t]@MLLHDI XCDEQH XDE XDEoGHLKEH XILCDE XIL XIL\KOH 4-&'-uv/ $%d(/ VKLCK]QHJ JNAMQB KQSKPJ ]H BHUCDHB SCIN INH JOKQQHJI JFARH RAJJC]QHZ VWXFLCRI GKLCK]QHJ FKD NKGH INH UAQQASCDE JFARHZ $%d(/ }~/&/ 4-&'-uv/ '0 </%v-&/� 4'0'u'v')w |LAFHBMLHgQHGHQ YGHDI_ kMDFICAD_ AL XM] RLAFHBMLH VCJC]QH CD INH RLAFHBMLH CD SNCFN CI CJ BHFQKLHB XFLCRIgQHGHQ �Yo{ JHFICAD AU KD � Tm RKEH_ AMIJCBH KDP RLAFHBMLH VCJC]QH CD HGHLP RLAFHBMLH CD INH JFLCRI

!"#$%&'( !)%&)*+, #$-', .%,/&0,1 23 345678 369: ;5<=3> 3< ?<:3 8@: ABCD: <E F:6G; BFC: 8< HD64ICJ ?6EE:5:G86B8: 8@: 34<7: <E AB56BFC:3K 2 <G:LC:88:5 34<7: 75:E6M 75:4:?6G; 8@: 8J7: 75:E6M 75<A6?:3 8@63> =68@<D8 DG?DCJ 6G45:B36G; 8@: 369: <E AB56BFC: GBN:3K #$-', .%,/&0 O0)P'+, Q5<4:?D5:LC:A:C R<G: SFCQ564: T45678LC:A:C T TSFCQ564: U,1$%&'(&V, !)%&)*+, )WX .%-$,XY%, Z)P,1 [@: F<?J <E B AB56BFC: <5 75<4:?D5: GBN: 3@<DC? D3: N6M:? 4B3: BG? 3@<DC? F: B3 4<N7C:8: B3 G:4:33B5J 8< ?:3456F: 683 7D57<3:K \G B??686<G> 75<4:?D5: GBN:3 3@<DC? F:;6G =68@ B A:5F> 3D4@ B3 \G68RBN:255BJ <5 ]C<3:S6BC<;K <5 E5:HD:G8CJ D3:? <5 C<G; 8:5N3> 38BG?B5? BFF5:A6B86<G3 B5: 5:4<NN:G?:? 8< @:C7 I::7 GBN: C:G;8@ 5:B3<GBFC:K \G ;:G:5BC> AB56BFC: GBN:3 ;5:B8:5 8@BG _ 4@B5B48:53 4BG F: ?6EE64DC8 8< 5:B?K a@:G D36G; BFF5:A6B86<G3> NBI: 3D5: 8@:J B5: 4<G3638:G8 8@5<D;@<D8 8@: :G865: 345678K <5 :MBN7C:> 5BG?<NCJ 3=684@6G; F:8=::G ]G8 BG? ]<DG8 =68@6G B 345678 <5 3:8 <E 3456783 NBJ C:B? 8< 4<GED36<GK b*c,$( Z)P&Wd e-WV,W(&-W1 [@: E<CC<=6G; 8BFC: C6383 5:4<NN:G?:? 4<GA:G86<G3 E<5 <Ff:483 J<D NBJ :G4<DG8:5 =@6C: 75<;5BNN6G; ghT45678K e-X, e-PP,W(&Wd e-WV,W(&-W1 2CC 75<4:?D5:3 3@<DC? F:;6G =68@ B F56:E 4<NN:G8 ?:3456F6G; =@B8 8@:J ?<K [@63 ?:3456786<G 3@<DC? G<8 ?:3456F: 8@: 6N7C:N:G8B86<G ?:8B6C3 i@<= 68 ?<:3 68j F:4BD3: 8@:3: <E8:G 4@BG;: <A:5 86N:> 5:3DC86G; 6G DGG:4:33B5J 4<NN:G8 NB6G8:GBG4: =<5I> <5 =<53:> :55<G:<D3 4<NN:G83K [@: 4<?: 683:CE BG? BGJ G:4:33B5J 6GC6G: 4<NN:G83 ?:3456F: 8@: 6N7C:N:G8B86<GK 25;DN:G83 7B33:? 8< B 75<4:?D5: 3@<DC? F: ?:3456F:? =@:G 8@:65 7D57<3: 63 G<8 <FA6<D3 BG? =@:G 8@: 75<4:?D5: :M7:483 8@: B5;DN:G83 8< F: 6G B 37:46E64 5BG;:K k:8D5G ABCD:3 E<5 EDG486<G3 BG? AB56BFC:3 8@B8 B5: 4@BG;:? FJ B 75<4:?D5:> :37:46BCCJ 8@5<D;@ 5:E:5:G4: B5;DN:G83> 3@<DC? BC3< F: ?:3456F:? B8 8@: F:;6GG6G; <E :B4@ 75<4:?D5:K Q5<4:?D5: @:B?:5 4<NN:G83 3@<DC? 6G4CD?: 8@: E<CC<=6G; 3:486<G @:B?6G;3K <5 :MBN7C:3> 3:: 8@: E<CC<=6G; 8BFC: 8@B8 :M7CB6G3 8@: 3:486<G @:B?6G; BG? 8@: 4<NN:G8 4<G8:G83 8< F: 6G3:58:? =@6C: ?:A:C<76G; 4<?:K #,$(&-W l,)X&Wd e-PP,W( e-W(,W(1 QD57<3: a@B8 8@: 75<4:?D5: ?<:3 iG<8 @<=jK 233DN786<G3 m638 <E BGJ :M8:5GBC AB56BFC:> 4<G85<C> <5 <8@:5 :C:N:G8 =@<3: 38B8: BEE:483 8@63 75<4:?D5:K nEE:483 m638 <E 8@: 75<4:?D5:o3 :EE:48 <G :B4@ :M8:5GBC AB56BFC:> 4<G85<C> <5 <8@:5 :C:N:G8K \G7D83 nM7CBGB86<G <E :B4@ B5;DN:G8 8@B8 63 G<8 <FA6<D3K nB4@ B5;DN:G8 3@<DC? F: <G B 3:7B5B8: C6G: =68@ 6GC6G: 4<NN:G83K k:8D5G gBCD:3 nM7CBGB86<G <E 8@: ABCD: 5:8D5G:?K p,P,P*,% (q, r-++-s&Wd .-&W(1t nA:5J 6N7<58BG8 AB56BFC: ?:4CB5B86<G 3@<DC? 6G4CD?: BG 6GC6G: 4<NN:G8 ?:3456F6G; 8@: D3: <E 8@: AB56BFC: F:6G; ?:4CB5:?K uvw gB56BFC:3> 4<G85<C3> BG? 75<4:?D5:3 3@<DC? F: GBN:? 4C:B5CJ :G<D;@ 8@B8 6GC6G: 4<NN:G83 B5: <GCJ G::?:? E<5 4<N7C:M 6N7C:N:G8B86<G ?:8B6C3K

!"# $%&'()'*+ ,-*+.-+/0 12 234 546788786 9: ;9<= >?=7@2A ;9< >39<BC 78?B<C4 D8 9E4=E74F 23D2 C4>?=754> 234 >?=7@2A 48<G4=D2786 95H4?2>A @=9?4C<=4>A DB69=723G>A C7DB96 59I4>A D8C 9234= >;>24G C4@48C48?74>J K9G427G4> D @74?4 9: @>4<C9?9C4 C4>?=75786 234 DB69=723G ?D8 54 34B@:<BJ LM&N-))'*+ OM.& PMQ/ K?=448 >@D?4 >39<BC 54 ?98>4=E4C D> G<?3 D> @9>>75B4A F37B4 >27BB DBB9F786 ?9C4 :9=GD22786 29 =4:B4?2 B967? >2=<?2<=4 D8C 84>2786J R4=4 D=4 D :4F @97824=>S T K2D8CD=C 84>24C 5B9?U> >39<BC 54 78C4824C :9<= >@D?4>J T V34 9E4=E74F ?9GG482> 9: D @=9?4C<=4 >39<BC 54 78C4824C 984 >@D?4J T V34 37634>2 B4E4B >2D24G482> 23D2 :9BB9F 234 9E4=E74F ?9GG482> >39<BC 54 78C4824C :9<= >@D?4>A F723 4D?3 84>24C 5B9?U 78C4824C D8 DCC72798DB :9<= >@D?4>J W9= 4IDG@B4A >44 234 ?9C4 78 W76<=4 XJ!Y 54B9FS Z[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[ Z \<=@9>4S ]9?D24> 234 :7=>2 9??<==48?4 9: D >@4?7:74C <>4= Z 78 234 >4=]7>2 D==D;J Z _8@<2>S >2=>4=]7>2aS 234 B7>2 9: <>4=> 29 54 >4D=?34CJ Z >2=VD=642>4=S 234 8DG4 9: 234 <>4= 29 >4D=?3 :9=J Z b42<=8>S V34 78C4I 9: 234 :7=>2 9??<==48?4 9: 234 >2=VD=642>4= Z 78 234 >2=>4=]7>2 D==D;J Z _: 234 2D=642 <>4= 7> 892 :9<8CA =42<=8 c!J Z[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[ W<8?2798 782W78C>4= >2=>4=]7>2aA >2=VD=642>4=a d7G 7 Z ]99@ ?9<824=J d7G 5B8W9<8C Z VD=642 :9<8C :BD6 782W78C>4= e c! 7 e f Z _8727DB7g4 B99@ ?9<824= d9 h37B4 7 ie 59<8C>2=>4=]7>2a D8C j92 5B8W9<8C _: >2=>4=]7>27a e >2=VD=642>4= V348 5B8W9<8C e V=<4 Z K42 :BD6 29 V=<4 782W78C>4= e 7 Z K42 =42<=8 EDB<4 29 B99@ ?9<82 k8C _: 7 e 7 l ! Z _8?=4G482 B99@ ?9<824= ]99@ k8C W<8?2798 Pm/%n OM.& o&M+&/00 p !J h=724 D G48< c C=7E48 @=96=DG 78 qrK?=7@2 29 ?34?U F34234= D 8<G54= 7> 4E48A 9CC D8C F34234= 72 7> @=7G4J sJ h=724 D @=9?4C<=4 29 ?34?U F34234= D >2=786 7> D @DB78C=9G4J tuv wxPyxz{|}O z~��Py x{ �~$P}xoy V34 d7?2798D=; 95H4?2 >29=4> CD2D D> U4;A 724G @D7=>J 1 d7?2798D=; 95H4?2 7> 234 4�<7EDB482 9: D \kb] D>>9?7D27E4 D==D;J _24G>A F37?3 ?D8 54 D8; :9=G 9: CD2DA D=4 >29=4C 78 234 D==D;J kD?3 724G 7> D>>9?7D24C F723 D <87�<4 U4;J V34 U4; 7> <>4C 29 =42=74E4 D8 78C7E7C<DB 724G D8C 7> <><DBB; D8 782464= 9= D >2=786A 5<2 ?D8 54 D8;23786 4I?4@2 D8 D==D;J V34 :9BB9F786 ?9C4 7BB<>2=D24> 39F 29 ?=4D24 D8C <>4 D d7?2798D=; 95H4?2S �3; =4@4D2 237> �<4>2798� V34 G48< C=7E4�37> 7> :784 7: 234 >2<C482> 3DE4 C984 ��

!"#$%&'( )*+,-. )*/01.)+2+-/.34567 89: /;<6<9=7)>+2+-/.)>*/01. )?@A2B+ -0CDE0D/FGHI?J5KL=G. )MNN 1K6 : O@5<8=< 8 ?J5KL= -<P<; P85K8Q;< ?<= : F @5<8=<RQS<J=TG?J5KL=K9UV1KJ=K4985WGX ?YQ J6:0::ZR9@;KJ[ :V0:: G\G] G0685G O0:: 746< [<W7 89: K=<67 :V0:: GG] GIY9=WG :V0:: G_G] G@8689G 8 F :VK=<67 345 K F \ +4 :V@4Y9= :4JY6<9=Va563456V/;<6<9=7TKXVH8;Y< F 8TKX C<b= /9: ?YQ ?YQ J6:/bK7=Z49@;KJ[ :V0:: G8G] G0685G O0:: 746< [<W7 89: K=<67V :V0:: GQG] GIY9=WG :V0:: GJG] G@8689G 2a :V/bK7=7TGJGX +<9 67UQ4b G@ [<W <bK7=7VG /;7< 67UQ4b G@ [<W :4<7 94= <bK7=VG /9: 2a /9: ?YQ ?YQ J6:c<WZ49@;KJ[ :V0:: G8G] G0685G O0:: 746< [<W7 89: K=<67V :V0:: GQG] GIY9=WG :V0:: GJG] G@8689G :Vc<WTGJGX F G:G O?<= [<W a45 GJG =4 G:GV /9: 3Y9J=K49 deffghij ?4Y: 94= =< )>*/01. Q< 8a=<5 =< )>?@A2B+.k deffghij l <5< K7 =< 3Y9J=K49 Q<UK99K9Uk +< J4:< ;K7=K9U7 74Y;: Q< =<7=<: 4Y= Y7K9U J4LW 89: L87=<V /9: ?YQ ?YQ J6:c<W7Z49@;KJ[ :V0:: G8G] G0685G O0:: 746< [<W7 89: K=<67V :V0:: GQG] GIY9=WG :V0:: GJG] G@8689G 8 F :V[<W7 345 K F \ +4 :V@4Y9= :4JY6<9=Va563456V/;<6<9=7TKXVH8;Y< F 8TKX C<b= /9: ?YQ ?YQ J6:A<64P<Z49@;KJ[ :V0:: G8G] G0685G O0:: 746< [<W7 89: K=<67V :V0:: GQG] GIY9=WG :V0:: GJG] G@8689G :VA<64P<TGQGX 8 F :V[<W7 345 K F \ +4 :V@4Y9= :4JY6<9=Va563456V/;<6<9=7TKXVH8;Y< F 8TKX C<b= mn

!"# $%&'()'*+ ,-*+.-+/0 123 456 456 7839:8;<=>?:3>@:29AB7C 3D9:8;<=>?:3> E F6G>HI9:8;<=> 3DJ33 K<KL KJ8<=K MJ33 N:8> C>ON <23 BI>8ND 3DJ33 K6KL KP52IOK 3DJ33 K7KL K9Q<8<2K 3DJ33 KPKL KP<AIB8:=>K MJ33 8>IQ:3 R<BAN :2 IQBN AB2> 6>7<5N> IQ> MA>II>= 6 <A=><3O >HBNIN B2 IQ> SB7IB:2<=OD 123 456 TTU VW49XYZGU VP[S\U V91]G1XU V[X? ]J?1EKR=8 :=8KUV;U VY2;5I GO;> E KG>HIKUV;U VY2;5I GO;> E KG>HIKUV;U VY2;5I GO;> E KG>HIKUV;U VY2;5I GO;> E KP5II:2K ]J?1EK783J33K _J a1EKJ33KU VY2;5I GO;> E KP5II:2K ]J?1EK7831HBNIK _J a1EK1HBNIKU VY2;5I GO;> E KP5II:2K ]J?1EK783b>ONK _J a1EKb>ONKU VY2;5I GO;> E KP5II:2K ]J?1EK783X>8:F>K _J a1EKX>8:F>KUV;U VY2;5I GO;> E KP5II:2K ]J?1EK7839:8;<=>?:3>K _J a1EK9:8;<=> ?:3>KU VY2;5I GO;> E KP5II:2K ]J?1EK783b>OK _J a1EKb>OKU VW[X?U VW91]G1XU VWP[S\U VWcG? U d'+.&/ efgh ijk/ l0'*+ )m/ n'%)'j*-&o pqr/%) efsfg t/)mjk0h uv$%&'() n'%)'j*-&o pqr/%) t/)mjk n/0%&'()'j* J33 ?>IQ:3 J33N < C>OL BI>8 ;<B=D 1HBNIN ?>IQ:3 Y23B7<I>N BR < N;>7BRB>3 C>O >HBNIND YI>8N ?>IQ:3 X>I5=2N <2 <==<O 7:2I<B2B2w <AA BI>8N B2 < SB7IB:2<=O :6x>7ID b>ON ?>IQ:3 X>I5=2N <2 <==<O 7:2I<B2B2w <AA C>ON B2 < SB7IB:2<=O :6x>7ID X>8:F> ?>IQ:3 X>8:F>N < C>OL BI>8 ;<B=DZ=:;>=IB>Ny _P47=B;I SB7IB:2<=O [6x>7I

!"#$%&'( )** +,(-.* #/0(12 3456789:;; <6=> ?86@ ABC,$( DE6 FG@6 3H G I?78?3FGJ= 3456789 K6LM?J6; N,/ DE6 <6= GOO37?G86; P?8E 8E6 ?86@ 46?FQ G;;6;9 K6LM?J6;9 R(,S DE6 ?86@ GOO37?G86; P?8E 8E6 <6= 46?FQ G;;6;9 K6LM?J6;9 T,S1%UV :F 6JJ3J 377MJO ?H 8E6 <6= GWJ6G;= 6X?O8O9 K6H6J 83 Y?QMJ6 Z9[\ H3J 8E6 6XG@]W69 F 8E6 7@;:;;_3FW?7< ]J376;MJ6 8E?O @68E3; ?O MO6; 83 G;; 8E6 a6=O GF; 86@O 83 8E6 I?78?3FGJ= 3456789 b2&V(V +,(-.* K68MJFO DJM6 ?H G O]67?H?6; <6= 6X?O8O ?F 8E6 I?78?3FGJ= 345678> YGWO6 ?H ?8 ;36O F389 #/0(12 3456789cX?O8Od<6=e ABC,$( DE6 FG@6 3H G I?78?3FGJ= 3456789 K6LM?J6;9 N,/ DE6 <6= fGWM6 46?FQ O6GJ7E6; H3J ?F 8E6 I?78?3FGJ= 3456789 K6LM?J6;9 K6H6J 83 Y?QMJ6 Z9[\ H3J 8E6 6XG@]W69 F 8E6 7@;cX?O8O_3FW?7< ]J376;MJ6 8E?O @68E3; ?O MO6; 83 7E67< 8E6 6X?O86F76 3H GF= a6= fGWM6 ?F 8E6 I?78?3FGJ= 3456789 R(,SV +,(-.* K68MJFO GF GJJG= 73F8G?F?FQ GWW 8E6 ?86@O ?F G I?78?3FGJ= 3456789 #/0(12 345678986@O ABC,$( DE6 FG@6 3H G I?78?3FGJ= 3456789 K6LM?J6;9 K6H6J 83 Y?QMJ6 Z9[\ H3J 8E6 6XG@]W6 73;69 F 8E6 7@;:;;_3FW?7< ]J376;MJ6 8E?O @68E3; ?O MO6; 83 J68J?6f6 8E6 ?86@O ?F 8E6 GJJG= fGJ?G4W69 N,/V +,(-.* K68MJFO GF GJJG= 73F8G?F?FQ GWW 6X?O8?FQ <6=O ?F G I?78?3FGJ= 3456789 #/0(12 3456789a6=O ABC,$( DE6 FG@6 3H G I?78?3FGJ= 3456789 K6LM?J6;9 K6H6J 83 Y?QMJ6 Z9[\ H3J 6XG@]W6 73;69 F 8E6 7@;a6=O_3FW?7< ]J376;MJ6 8E?O @68E3; ?O MO6; 83 J68J?6f6 8E6 a6=O ?F 8E6 GJJG= fGJ?G4W69 T,S.g, +,(-.* K6@3f6O G <6=> ?86@ ]G?J HJ3@ G I?78?3FGJ= 3456789 :F 6JJ3J 377MJO ?H 8E6 O]67?H?6; <6=> ?86@ ]G?J ;36O F38 6X?O89 #/0(12 3456789K6@3f6d<6=e ABC,$( DE6 FG@6 3H G I?78?3FGJ= 3456789 K6LM?J6; N,/ DE6 a6= GOO37?G86; P?8E 8E6 <6=h?86@ ]G?J =3M PGF8 83 J6@3f6 HJ3@ 8E6 I?78?3FGJ= 3456789 K6LM?J6; K6H6J 83 Y?QMJ6 Z9[\ H3J 6XG@]W6 73;69 F 8E6 7@;K6@3f6_3FW?7< ]J376;MJ6 8E?O @68E3; ?O MO6; 83 J6@3f6 8E6 ?86@ HJ3@ 8E6 ;?78?3FGJ= 3456789 ijkjl !"#$%&'( m&$(&.01%/ ABC,$( n%.',%(&,V oMO8 W?<6 F3J@GW 345678O 8E6 I?78?3FGJ= 345678 GWO3 EGO 76J8G?F ]J3]6J8?6O9 DE6O6 ]J3]6J8?6O 7GF 46 O68 83 GF= fGW?; fGWM6 GF; 7GF 46 J68J?6f6; GO GF; PE6F J6LM?J6;9 pZp

!"# $%&'()'*+ ,-*+.-+/0 1&2(/&)3 4/0%&'()'2* 56789:;<6=; >:68;:?@ AB; C6789:DE6F 76=; G6: E?:DFH I;@EJ 56KF? >:68;:?@ AB; FK7L;: 6G D?;7E DF 9 MDC?D6F9:@ 6LN;C?J O?;7 >:68;:?@ PF D?;7 G6: 9 I;@J Q;@ >:68;:?@ P I;@ R@F?9ST UVRC:D8? MDC?D6F9:@ WLN;C? RC:D8?DFHJMDC?D6F9:@ X2Y(-&/Z2[/ 1&2(/&)3 R;?E 9F= :;?K:FE ?B; C6789:DE6F 76=; G6: C6789:DFH E?:DFH I;@E DF 9 MDC?D6F9:@ 6LN;C?J R@F?9ST 6LN;C?J56789:;<6=;\ ] _abcde AB; 56789:;<6=; 8:68;:?@ B9E ?B; G6ff6gDFH 89:?ET 1-&) 4/0%&'()'2* WLN;C? h;iKD:;=J Pfg9@E ?B; F97; 6G 9 MDC?D6F9:@ 6LN;C?J 56789:; W8?D6F9fJ OG 8:6jD=;=k _abcd DE 9 j9fK; :;8:;E;F?DFH ?B; C6789:DE6F 76=; KE;= L@ GKFC?D6FE EKCB 9E R?:5678J AB; _abcd 9:HK7;F? B9E ?B; G6ff6gDFH E;??DFHET X2*0)-*) l-m./ 4/0%&'()'2* ULVDF9:@56789:; n >;:G6:7 9 LDF9:@ C6789:DE6FJ jLA;S?56789:; ! >;:G6:7 9 ?;S?K9f C6789:DE6FJ h;79:IET U9fK;E H:;9?;: ?B9F # C9F L; KE;= ?6 :;G;: ?6 C6789:DE6FE KEDFH E8;CDGDC o6C9f; OME po5OMqJ PF ;::6: 6CCK:E DG @6K ?:@ ?6 CB9FH; ?B; C6789:DE6F 76=; 6G 9 MDC?D6F9:@ 6LN;C? ?B9? 9f:;9=@ C6F?9DFE =9?9J AB; 56789:;<6=; 8:68;:?@ KE;E ?B; E97; j9fK;E 9E ?B; _abcd 9:HK7;F? G6: ?B; R?:5678 GKFC?D6FJ h;G;: ?6 rDHK:; "J#n G6: ;S978f; C6=;J OF ?B; C7=56789:;<6=;s6F5fDCI 8:6C;=K:; ?BDE 8:68;:?@ DE KE;= ?6 E;? ?B; C6789:; 76=; ?6 A;S?k E6 ?B9? F6 ?g6 ?;S? I;@E ?B9? 9:; ?B; E97; C9F L; 9==;=J X2.*) 1&2(/&)3 h;?K:FE ?B; FK7L;: 6G D?;7E DF 9 C6ff;C?D6F 6: MDC?D6F9:@ 6LN;C?J ABDE 8:68;:?@ C9F 6Ff@ L; :;9= 9F= C9FF6? L; E;? =D:;C?f@J $3*)-t 6LN;C?J56KF? uvw/%) AB; F97; 6G 9 MDC?D6F9:@ 6LN;C?J h;iKD:;=J h;G;: ?6 rDHK:; "J#n G6: ;S978f; C6=;J OF ?B; C7=P==s6F5fDCI 8:6C;=K:; ?BDE 8:68;:?@ DE KE;= ?6 :;?:D;j; ?B; FK7L;: 6G D?;7E E?6:;= DF ?B; MDC?D6F9:@ 6LN;C?J x)/Y 1&2(/&)3 R;?E 6: :;?K:FE 9F yzd G6: 9 E8;CDGD;= {d| DF 9 MDC?D6F9:@ 6LN;C?J r6: C6ff;C?D6FEk :;?K:FE 9F yzd L9E;= 6F ?B; E8;CDGD;= {d|J ABDE 8:68;:?@ C9F L; :;?:D;j;= 6: E;?J R@F?9ST 6LN;C?JO?;7pI;@q \] F;gD?;7e AB; O?;7 8:68;:?@ B9E ?B; G6ff6gDFH 89:?ET

!"#$%&'( )*%( +,-$%&'(&./ 012345 63789:3;< =>?@AB 5C3 D@E3 0F @ 40>>34590D 0: G94590D@:A 012345< H3A 63789:3;< IJK @BB049@53; ?95C 5C3 LMJN 139DO :35:93P3; 0: @;;3;< D3?953E QR590D@>< SB3; F0: G94590D@:A 012345 0D>AT D0 @RR>94@590D F0: 40>>34590DB< UF R:0P9;3;V WJXLMJN 9B 5C3 D3? P@>83 @BB049@53; ?95C 5C3 BR349F93; YJK< 63E@:HBZ UF YJK 9B D05 F08D; ?C3D 4C@DO9DO @D LMJNV @ D3? YJK 9B 4:3@53; ?95C 5C3 BR349F93; WJXLMJN< UF YJK 9B D05 F08D; ?C3D @553ER59DO 50 :358:D @D 3[9B59DO 953EV @ D3? YJK 9B 4:3@53; @D; 95B 40::3BR0D;9DO 953E 9B >3F5 3ER5A< \,] )%.',%(] 35B @ H3A 9D @ G94590D@:A 012345< UF H3A 9B D05 F08D; ?C3D 4C@DO9DO @ H3AV @D 3::0: ?9>> 0448:< AD5@[Z _aJbM<c3AdYJKe f WJXYJK gC3 \,] R:0R3:5A C@B 5C3 F0>>0?9DO R@:5BZ )*%( +,-$%&'(&./ 012345 63789:3;< =>?@AB 5C3 D@E3 0F @ +&$(&./*%] 012345< c3A 63789:3;< IJK P@>83 139DO 4C@DO3;< D3?H3A 63789:3;< h3? P@>83 5C@5 :3R>@43B 5C3 BR349F93; YJK< 63F3: 50 i9O8:3 j<kl F0: 3[@ER>3 40;3< UD 5C3 4E;c3Am0Dn>94H R:043;8:3 5C9B R:0R3:5A 9B 8B3; 50 4C@DO3 5C3 H3A P@>83 F:0E onp 50 oGp< qrst uvv w"xuyz gC3 {|4:9R5 }:: Q12345 40D5@9DB 9DF0:E@590D @1085 :8D~59E3 3::0:B< gC3 R:0R3:593B 0F 5C3 }:: 012345 @:3 B35 1A 5C3 O3D3:@50: 0F @D 3::0: ~ {9B8@> |@B94V @D =850E@590D 012345V 0: 5C3 {|4:9R5 R:0O:@EE3:< gC3 ;3F@8>5 R:0R3:5A 0F 5C3 }:: 012345 9B h8E13:< }::<h8E13: 40D5@9DB @D 9D53O3: @D; 4@D 13 8B3; 1A @D =850E@590D 012345 50 :358:D @D nQG}< �C3D @ :8D~59E3 3::0: 0448:BV 5C3 R:0R3:593B 0F 5C3 }:: 012345 @:3 F9>>3; ?95C 9DF0:E@590D 5C@5 8D9783>A 9;3D59F93B 5C3 3::0: @D; 9DF0:E@590D 5C@5 4@D 13 8B3; 50 C@D;>3 95< g0 O3D3:@53 @ :8D~59E3 3::0: 9D A08: 40;3V 8B3 5C3 {|4:9R5 }:: Q12345 6@9B3 �35C0;< gC3 }:: 012345�B R:0R3:593B @:3 :3B35 50 �3:0 0: �3:0~>3DO5C B5:9DOB d��e @F53: @D QD }::0: 63B8E3 h3[5 B5@53E3D5< gC3 {|4:9R5 }:: Q12345 n>3@: �35C0; 4@D 13 8B3; 50 3[R>9495>A :3B35 }:: 012345< gC3 }:: 012345 9B @D 9D5:9DB94 012345 ?95C O>01@> B40R3 ~ 5C3:3 9B D0 D33; 50 4:3@53 @D 9DB5@D43 0F 95 9D A08: 40;3< n0DB9;3: 5C3 F0>>0?9DO 3[@ER>3V ?C94C ;9BR>@AB B0E3 0F 5C3 R0BB91>3 3::0:B 5C@5 4@D 13 :@9B3; 3[R>9495>A 50 O3D3:@53 :8D 59E3 3::0:B< ��g�� }=G� �gUg�}�U�hQS��gUg�}� �n6U�g �=h�S=�}f�{|4:9R5�� ~~ 81 4E;81E95mQDn>94H �j�

!"# $%&'()'*+ ,-*+.-+/0 12 34454 467896 :6;< = >?6@A <5 766 BC <?6 8764 62<646D E2F<?B2GH IC JK62JD5@8962<HC549!H<;<LG6HMEN86O P QO R?62 S7GT5; UV58 987< 62<64 F584 EG6 W6C546 78W9B<<B2GHU 3;B< X8W 32D IC = >?6@A <5 766 BC <?6 8764 62<646D E 289W64H IC J:5<JI7:8964B@JD5@8962<HC549!H<;<LG6HMEN86 OOO R?62 S7GT5; UV58 987< 62<64 E 289W64 C54 F584 EG6HU 3;B< X8W 32D IC = >?6@A <5 766 BC <?6 EG6 62<646D B7 MENBDH IC JD5@8962<HC549!H<;<LG6HMEN86 YP QO 14 JD5@8962<HC549!H<;<LG6HMEN86 Z !QQO R?62 S7GT5; UR?6 EG6 F58 62<646D B7 B2MENBDHU 3;B< X8W 32D IC = [E<E N55A7 5AEF 75 78W9B< B<H S7GT5; UR?E2A7 C54 \45MBDB2G F584 EG6HU D5@8962<HC549!H78W9B< 32D X8W X8W @9D<F\6]12>NB@A 12 34454 67896 :6;< C54 B P ! <5 _" 344H@N6E4 344HEB76 B S7GT5; 344HD67@4B\<B52 U a 34454 289W64 a U B :6;< 32D X8W aaZ YbX> IcRZ Ybd3L[Z YT1[V WG>5N54PUeCCCC@@U R6;<PUeQQQQffU Z Yd!Z34454 dE2DNB2G E2D MENBDE<B527Ybd!Z YTZYcZ R?B7 6;E9\N6 D69527<4E<67 MENBDE<B52 <6@?2Bg867 E2D 34454 ?E2DNB2G B2 hTX@4B\<H YbcZYiTZ YTZcN6E76 62<64 <?6 EG6 W6<j662 ! E2D !QQH 1<?64jB76k E2 64454 9677EG6 j58ND W6

!"#$%&'( )*+,-./ 01 2*324315 6-. ,78936 876601:;<=> ;?@AB CDBEFG)0H9IG> ;JD=KE> ;JA> ;JL>E16.H M07H +5.N;<JL> ;JL>;OCPQJ JRPEFGJ.S6G CDBEFG6S6D5.G TOUEFGVG>;<JL> ;<JA> ;JA> ;JL>;OCPQJ JRPEFG=76601G CDBEFG29/T78936G WDKQEFGT78936G>;<JL> ;JL>;<JL> ;JL>;OCPQJ JRPEFG=76601G CDBEFG29/6MX.G WDKQEFG JMX. @) EHH0H, G>;<JL> ;JL>;<JL> ;<JA> ;<JD=KE> ;<?@AB> ;<=@LR> ;<YJBK> Z&[\%] _a b%%c% defgh&f[ &f !"#$%&'( _ij_i k](lcgma !"#$%&'( b%% nop]$( qh]e% k](lcg r*.+H, +** XH0X.H6M ,.66315,: se&m] k](lcg t.1.H+6. + H71u639. .HH0H: v !"#$%&'( b%% nop]$( qh]e% k](lcg #wf(ex a EHH:r*.+H r*.+H, +** XH0X.H6M ,.66315, 0) 6-. EHH 08y.26: Q,. r*.+H 60 .SX*3236*M 2*.+H 6-. EHH 08y.26 +)6.H +1 .HH0H -+, 8..1 -+1/*./: J-3, 3, 1.2.,,+HMz )0H .S+9X*.z {-.1 M07 7,. /.).HH./ .HH0H -+1/*315 {36- @1 EHH0H A.,79. C.S6: W=T2H3X6 2+**, 6-. r*.+H 9.6-0/ +7609+632+**M {-.1.|.H +1M 0) 6-. )0**0{315 ,6+6.9.16, +H. .S.276./N } @1 EHH0H A.,79. C.S6 } ES36 T78 } ES36 ?7126301 v !"#$%&'( b%% nop]$( se&m] k](lcg #wf(exa EHH:A+3,.~1798.Hz ,07H2.z /.,2H3X6301z -.*X)3*.z -.*X2016.S6� J-. @1 EHH0H A.,79. C.S6 ,6+6.9.16z +*,0 2+**./ +1 .HH0H -+1/*.Hz 3, + XH02./7H.u*.|.* ,6+6.9.16: O6 01*M H.9+31, 31 .)).26 {36-31 6-. XH02./7H. 6-+6 2016+31, 6-. 01 .HH0H /.2*+H+6301: J-. W=T2H3X6 316.HXH.6.Hz *34. 9+1M !""

!"# $%&'()'*+ ,-*+.-+/0 1234524678 92:767 23 699;9 <; =:4=69 >211:34 16?617 53<:1 :< @:3A7 2 B9;>6A596 <=2< =23A167 <=6 699;9C D@ 3;36 :7 @;53A8 <=6 7>9:B< =21<7 23A <=6 5769 :7 B96763<6A E:<= <=6 699;9 96751<7 FG <=6 :3<69B96<69C H=6 I2:76 J6<=;A :7 576A @;9 463692<:34 953K<:J6 699;97C L11 <=6 2945J63<7 ;@ <=:7 J6<=;A 296 ;B<:;321 6M>6B< N5JF69C O;E6?698 :@ G;5 576 I2:768 E:<=;5< 7B6>:@G:34 7;J6 2945J63<78 23A <=6 B9;B69<G 76<<:347 ;@ <=6 P99 ;FQ6>< >;3<2:3 ?21567 <=2< =2?6 3;< F663 >16296A8 <=;76 ?21567 F6>;J6 <=6 ?21567 @;9 G;59 699;9C R=63 76<<:34 <=6 35JF69 B9;B69<G <; G;59 ;E3 699;9 >;A6 :3 23 L5<;J2<:;3 ;FQ6><8 G;5 2AA G;59 699;9 >;A6 35JF69 <; <=6 >;37<23< ?FSFQ6><P99;9C T;9 6M2JB168 <; 463692<6 <=6 699;9 35JF69 !U"U8 277:43 ?FSFQ6><P99;9 V !U"U <; <=6 35JF69 B9;B69<GC W&+.X/*)0 Y/0%&'()'Z* [.X\/& L ];34 :3<6469 75F<GB6 <=2< :A63<:@:67 <=6 32<596 ;@ <=6 699;9C _>9:B< 699;97 aF;<= _>9:B<KA6@:36A 23A 5769KA6@:36A 699;97b 296 :3 <=6 92346 UK#""c"C $Z.&%/ L 7<9:34 6MB9677:;3 32J:34 <=6 ;FQ6>< ;9 2BB1:>2<:;3 <=2< ;9:4:3211G 463692<6A <=6 699;9C R=63 76<<:34 <=:7 B9;B69<G @;9 23 L5<;J2<:;3 ;FQ6><8 576 <=6 @;9J B9;Q6><C>1277C D@ 3;<=:34 :7 7B6>:@:6A8 <=6 B9;492JJ2<:> Dd ;@ <=6 >59963< _>9:B< B9;Q6>< :7 576AC Y/0%&'()'Z* L 7<9:34 6MB9677:;3 A67>9:F:34 <=6 699;9C D@ 537B6>:@:6A8 <=6 ?2156 :3 35JF69 :7 6M2J:36AC D@ :< >23 F6 J2BB6A <; 2 _>9:B< 953K<:J6 699;9 >;A68 2 7<9:34 B9;?:A6A FG _>9:B< :7 576A 27 <=6 A67>9:B<:;3C D@ <=696 :7 3; _>9:B< 699;9 >;9967B;3A:34 <; 35JF698 2 46369:> 699;9 J677246 :7 576AC e/f(g'f/ H=6 @511G h521:@:6A B2<= <; <=6 O61B @:16 :3 E=:>= =61B ;3 <=:7 699;9 >23 F6 @;53AC D@ 537B6>:@:6A8 _>9:B< 5767 <=6 @511G h521:@:6A A9:?68 B2<=8 23A @:16 32J6 ;@ <=6 _>9:B< O61B @:16C e/f(%Z*)/i) H=6 >;3<6M< Dd :A63<:@G:34 2 <;B:> E:<=:3 =61B@:16 <=2< B9;?:A67 =61B @;9 <=6 699;9C D@ ;J:<<6A8 <=6 _>9:B< O61B @:16 >;3<6M< Dd @;9 <=6 699;9 >;9967B;3A:34 <; <=6 35JF69 B9;B69<G :7 576A8 :@ :< 6M:7<7 jklmkn o&Z(/&)'/0p qr$%&'() s&& t\u/%) o&Z(/&)'/0 Y/0%&'()'Z* Y/0%&'()'Z* o&Z(/&)v H=6 A67>9:B<:?6 7<9:34 277;>:2<6A E:<= 23 699;9C e/f(wZ*)/i) o&Z(/&)v L >;3<6M< Dd @;9 2 <;B:> :3 2 R:3A;E7 =61B @:16C e/f(x'f/ o&Z(/&)v L @511G h521:@:6A B2<= <; 2 R:3A;E7 =61B @:16C [.X\/& o&Z(/&)v L 35J69:> ?2156 :A63<:@G:34 23 699;9C $Z.&%/ o&Z(/&)v H=6 32J6 ;@ <=6 ;FQ6>< ;9 2BB1:>2<:;3 <=2< ;9:4:3211G 463692<6A <=6 699;9C y Y/0%&'()'Z* o&Z(/&)v I6<5937 ;9 76<7 2 A67>9:B<:?6 7<9:34 277;>:2<6A E:<= 23 699;9C H=6 d67>9:B<:;3 B9;B69<G >;37:7<7 ;@ 2 7=;9< A67>9:B<:;3 ;@ <=6 699;9C z76 <=:7 B9;B69<G <; 2169< <=6 5769 <; 23 699;9 <=2< G;5 >233;< ;9 A; 3;< E23< <; =23A16C R=63 463692<:34 2 5769KA6@:36A 699;98 277:43 2 7=;9< A67>9:B<:;3 ;@ G;59 699;9 <; <=:7 B9;B69<GC D@ d67>9:B<:;3 :7 3;< @:116A :38 23A <=6 ?2156 ;@ <=6_>9:B< P99 SFQ6>< N5JF69 {9;B69<G >;9967B;3A7 <; 2 _>9:B< 953K<:J6 699;98 <=6 A67>9:B<:?6 7<9:34 277;>:2<6A E:<= <=6 699;9 :7 96<5936AC $v*)-i P99Cd67>9:B<:;3 |} ~��~~�� W&+.X/*) p $)&'*+/i(&/00'Z* L 7<9:34 6MB9677:;3 >;3<2:3:34 2 A67>9:B<:;3 ;@ <=6 699;9C y e/f(wZ*)/i) o&Z(/&)v 6<7 ;9 96<5937 2 >;3<6M< Dd @;9 2 <;B:> :3 2 O61B T:16C D@ 2 O61B @:16 :7 7B6>:@:6A

!"#$%&'( )* +,- ./012)3+ 422 567-1+ 8-93:)9- ;2<3-2+=> +,- 8-93?<*+-@+ 32<3-2+= )A BA-C +< DB+<ED+)1D99= C)A39D= +,- 8-93 +<3)1 )C-*+)F)-CG HF 6<+, 8-93:)9- D*C 8-93?<*+-@+ D2- -E3+=> +,- ID9B- <F +,- ./012)3+ 422 567-1+ JBE6-2 ;2<3-2+= )A 1,-1K-CG HF )+ 1<22-A3<*CA +< D ./012)3+ 2B*L+)E- -22<2 ID9B-> +,-* +,- ./012)3+ 8-93 1<*+-@+ HM F<2 +,- -22<2 )A BA-CG HF +,- JBE6-2 32<3-2+= C<-A *<+ 1<22-A3<*C +< D ./012)3+ -22<2> +,- 1<*+-*+A A12--* F<2 +,- ./012)3+ 8-93 F)9- )A C)A39D=-CG #NO(PQ 422G8-93?<*+-@+ RS TUVWXYWZ[\ ]%_ aO( b $cO(aQ(de f ID9)C )C-*+)F)-2 F<2 D 8-93 +<3)1 g)+,)* +,- 8-93 F)9-G 53+)<*D9G h iaj'k&ja l%c'a%(N 0-+A <2 2-+B2*A D FB99= mBD9)F)-C 3D+, +< D 8-93 :)9-G HF D 8-93 F)9- )A A3-1)F)-C )* 8-93:)9-> )+ )A DB+<ED+)1D99= 1D99-C g,-* +,- BA-2 19)1KA +,- 8-93 6B++<* n<2 32-AA-A +,- :o K-=p )* +,- -22<2 E-AADq- C)D9<q 6<@G HF +,- ./012)3+ 422 567-1+ 8-93?<*+-@+ ;2<3-2+= 1<*+D)*A D ID9)C 1<*+-@+ HM F<2 +,- A3-1)F)-C F)9-> +,D+ +<3)1 )A DB+<ED+)1D99= C)A39D=-CG HF *< 8-93:)9- )A A3-1)F)-C> +,- ./012)3+ 8-93 F)9- )A C)A39D=-CG #NO(PQ 422G8-93:)9- RS TUVWXYWZ[\ ]%_ aO( b $cO(aQ(de r,- FB99= mBD9)F)-C 3D+, +< +,- 8-93 F)9-G 53+)<*D9G h s_ ta% l%c'a%(N u-+B2*A <2 A-+A D *BE-2)1 ID9B- A3-1)F=)*q D* -22<2G JBE6-2 )A +,- 422 <67-1+vA C-FDB9+ 32<3-2+=G w,-* 2-+B2*)*q D BA-2LC-F)*-C -22<2 F2<E D* fB+<ED+)<* <67-1+> A-+ 422GJBE6-2 6= DCC)*q +,- *BE6-2 =<B A-9-1+-C DA D* -22<2 1<C- +< +,- 1<*A+D*+ I6567-1+422<2G :<2 -@DE39-> =<B BA- +,- F<99<g)*q 1<C- +< 2-+B2* +,- *BE6-2 oxyo DA D* -22<2 1<C-z 422GuD)A- JBE6-2zS I6567-1+422<2 { oxyo> 0<B21-zS |0<E-?9DAA| #NO(PQ 422GJBE6-2 RS X}}U}V~��X}\ ]%_ aO( b a%%c%O_ ta% f* )*+-q-2 2-32-A-*+)*q D ./012)3+ -22<2 *BE6-2 <2 D* 0?5M4 -22<2 ID9B-G h #c_%$a l%c'a%(N u-+B2*A <2 A-+A +,- *DE- <F +,- <67-1+ <2 D339)1D+)<* +,D+ <2)q)*D99= q-*-2D+-C +,- -22<2G r,- 0<B21- 32<3-2+= A3-1)F)-A D A+2)*q -@32-AA)<* +,D+ )A BABD99= +,- 19DAA *DE- <2 32<q2DEED+)1 HM <F +,- <67-1+ +,D+ 1DBA-C +,- -22<2G �A- 0<B21- +< 32<I)C- =<B2 BA-2A g)+, )*F<2ED+)<* g,-* =<B2 1<C- )A B*D69- +< ,D*C9- D* -22<2 q-*-2D+-C )* D* D11-AA-C <67-1+G :<2 -@DE39-> )F =<B D11-AA �)12<A<F+ 4@1-9 D*C )+ q-*-2D+-A D M)I)A)<* 6= �-2< -22<2> �)12<A<F+ 4@1-9 A-+A +,- ./012)3+ 422 567-1+ JBE6-2 ;2<3-2+= +< )+A -22<2 1<C- F<2 +,D+ -22<2 D*C A-+A 0<B21- +< 4@1-9 D339)1D+)<*G J<+- +,D+ )F +,- -22<2 )A q-*-2D+-C )* D*<+,-2 <67-1+ 1D99-C 6= �)12<A<F+ 4@1-9> 4@1-9 )*+-21-3+A +,- -22<2 D*C A-+A 422GJBE6-2 +< )+A <g* 1<C- F<2 M)I)A)<* 6= �-2<G 8<g-I-2> )+ 9-DI-A +,- <+,-2 422 <67-1+ n)*19BC)*q 0<B21-p DA A-+ 6= +,- <67-1+ +,D+ q-*-2D+-C +,- -22<2G 0<B21- D9gD=A 1<*+D)*A +,- *DE- <F +,- <67-1+ +,D+ <2)q)*D99= q-*-2D+-C +,- -22<2 L =<B2 1<C- 1D* +2= +< ,D*C9- +,- -22<2 D11<2C)*q +< +,- -22<2 C<1BE-*+D+)<* <F +,- <67-1+ =<B D11-AA-CG HF =<B2 -22<2 ,D*C9-2 FD)9A> =<B 1D* BA- +,- 422 <67-1+ )*F<2ED+)<* +< C-A12)6- +,- -22<2 +< =<B2 BA-2> BA)*q 0<B21- D*C +,- <+,-2 422 +< )*F<2E +,- BA-2 g,)1, <67-1+ <2)q)*D99= 1DBA-C +,- -22<2> D C-A12)3+)<* <F +,- -22<2> D*C A< F<2+,G oy�

!"# $%&'()'*+ ,-*+.-+/0 $1*)-2 344567849: ;< =>?@ABCDE?C==@FAG H&+.I/*) J 0)&'*+/2(&/00'K* L MN4OPQ :RS4:MMO7P 4:S4:M:PNOPQ NT: USSVO9UNO7P NTUN Q:P:4UN:W NT: :44745 X-0/ $).Y1J Z:MOQP U [:\ SUQ:] [TO9T OM 8M:W 74 U99:SNOPQ OP74_UNO7P 4:QU4WOPQ MN79M5 aU: M84: NT: 74_ S:474_M NT: S7MMO\V: bUVOWUNO7PM5 cT: MO_SV: :RU_SV: 97W: \:V7[ _:4:Vd MT7[M NT: 74_ UPW U99:SNM OPS8N \8N W7:M P7N MN74: NT: WUNU 74 S:474_ UPd U9NO7P5 efcagh ef3LZh e6ijklc gLmnoLn3<pqr694OSNph estt 68\ 9_WuM8\_ONuvPiVO9 w c7 97PNOP8: NT: V7[ O UPd :4474 79984M 7P 34474 j:M8_: m:RN k W798_:PN574_!5cRNmU_:5qUV8: < pp 74 W798_:PN574_!5cRN3aUOV5qUV8: < pp cT:P ZO_ ada:MMUQ: ada:MMUQ: < plV:UM: :PN:4 d784 PU_: UPW :t_UOV UWW4:MM5p aMQr7R ada:MMUQ:] x] pkP97_SV:N: y74_ 34474p W798_:PN574_!5cRNmU_:5798Mz{ 3PW k w iT:9 N7 M:: O NT: 8M:4 :PN:4:W UPdNTOPQ5 k zg:PzW798_:PN574_!5NRNLQ:5bUV8:{ < x{ cT:P aMQr7R p|78 _8MN :PN:4 d784 UQ: \:74: M8\_ONNOPQ5p 3RON 68\ W798_:PN574_!5NRNLQ:5798Mz{ 3PW k k zm7NzkMm8_:4O9zW798_:PN574_!5NRNLQ:5bUV8:{{{ cT:P aMQr7R p|78 _8MN :PN:4 U P8_\:4 74 d784 UQ:5p 3RON M8\ 3PW k w iT:9 N7 M:: O NT: UQ: :PN:4:W OM bUVOW5 k zW798_:PN574_!5NRNLQ:5bUV8: e x{ v4 zW798_:PN574_!5NRNLQ:5bUV8: h !xx{ cT:P w aMQr7R pcT: UQ: d78 :PN:4:W OM OPbUVOW5p 34459V:U4 3445jUOM: } 3445W:M94OSNO7P < p34474 t cT: UQ: d78 :PN:4:W OM OPbUVOW5p _MQ\7R 3445W:M94OSNO7P 3RON 68\ 3PW k

!"#$%&'( ) *+,+ -../0 ./+1 0. 02345, 5,6 7089.: ;<=+>/0 ?.@ 0=+@5>8 1.2@ A5BC06; D.E24B>,6?.@4F602345, G>D H23 IIJ KLHMNOP<J KLQGR*J K9S*T 38M.-.@U;V????EE; <B:,U;VWWWWXX; Y5>/U;V??WWWW; ZY5>/U;V??WWWW; RY5>/U;VWWXXWW;J K[IIG\*S]R** IIJ K]SN7 >+4B U ;?.@4F; J KMG\<GNJ K<R9YG 9SN*GNU MGYYHPRMO\_UF MGYYPR**O\_UW Ò*<QU;aWW;JK<NJK<*J K<R9YG 9SN*GNUb MGYYHPRMO\_UF MGYYPR**O\_UW Ò*<QUFWWcJK<NJK<*J K]S\< HOdGU;; ]RMGU;R@5+-;JK9JKMG\<GNJKQeJH+4f-B H,.E/ H2@AB1KLQeJKLMG\<GNJKL9JKL]S\<JKL<*J KR \R7GU;O,B4R>E=.@F;JKLRJ KL<NJKL<R9YGJ KQNJ K<R9YG 9SN*GNUb MGYYHPRMO\_UF MGYYPR**O\_UW O*<QUFWWcJ K<NJ K<* RYO_\UNO_Q<Jg\+4BhKL<*J K<*JKO\Pi< <TPGU;<Gj<; \R7GU;<:,\+4B;J KL<*J K<* RYO_\UNO_Q<JgGI7+5-hKL<*J K<*JKO\Pi< <TPGU;<Gj<; \R7GU;<:,G7+5-;JKL<*J KL<NJ K<NJK<* RYO_\UNO_Q<JRDD@B00hKL<*J K<*JKO\Pi< <TPGU;<Gj<; \R7GU;<:,RDD@B00;JKL<*J K<* RYO_\UNO_Q<JR8BhKL<*J K<*JKO\Pi< <TPGU;<Gj<; \R7GU;,:,R8B;JKL<*J KR \R7GU;O,B4R>E=.@F;JKLRJ KL<NJKL<R9YGJ K<R9YG 9SN*GNUW MGYYHPRMO\_UF MGYYPR**O\_UW Ò*<QUFWWcJK<NJK<*J KMG\<GNJ K]S\< HOdGU;; ]RMGU;R@5+-;J KMG\<GNJ K<R9YG 9SN*GNU;W; MGYYPR**O\_U;W; MGYYHPRMO\_U;W; Ò*<QU;kbc;J K9NJKLMG\<GNJ KL]S\<JKLMG\<GNJKL<*J K<*J K]S\< HOdGU;; ]RMGU;R@5+-;J KL<NJ KL<R9YGJ K<R9YG 9SN*GNUW MGYYHPRMO\_UF MGYYPR**O\_UWJ K<NJ FbX

!"# $%&'()'*+ ,-*+.-+/0 1234 125678 69:38:;#412:4123 <57=>?;@29A@4 1B9?2 C=D8;@E@ B5F8;@5GHIJ@ 4 1643KLMGHNK OPQG HRSKLTUKRT KVWKGHKRMK1X64 1XB9?24 1X234 1X2:4 1X256784 125678 69:38:;#4 12:4 123 <57=>?;@29A@4 1B9?2 C=D8;@E@ B5F8;@5GHIJ@ 4 1=?AY2 2ZA8;@:53=9@ ?5[8;@:8CY72\:I]HP6QTTPR_@ <57Y8;@:I]HP#@4NKHRRKG 1XB9?24 1X234 123 <57=>?;@29A@4 1B9?2 C=D8;@E@ B5F8;@5GHIJ@ 4 1=?AY2 2ZA8;@:53=9@ ?5[8;@:8CY72\:I]HP6QTTPR_@ <57Y8;@:I]HP!@4HRTKGUK]HITK 1XB9?24 1X234 123 <57=>?;@29A@4 1B9?2 C=D8;@E@ B5F8;@5GHIJ@ 4 1=?AY2 2ZA8;@:53=9@ ?5[8;@:8CY72\:I]HP6QTTPR_@ <57Y8;@:I]HPE@4KVWKGT 1XB9?24 1X234 123 <57=>?;@29A@4 1B9?2 C=D8;@E@ B5F8;@5GHIJ@ 4 1XB9?24 1X234 1X2:4 1X256784 1X234 15 ?5[8;@=TKU5RMaPGb@41X54 1X2:4 1X256784 125678 69:38:;# F877CA5F=?>;! F877A533=?>;#4 12:4 1234 125678 69:38:;#4 12:4 1234 1B9?2 C=D8;@E@ B5F8;@5GHIJ@ 4 1642OWKL Pc =RSKLTUKRTL OPQ UIdK1X64 1XB9?24 1X234 1X2:4 1X256784 125678 69:38:;#412:4123 <57=>?;@29A@4 1B9?2 C=D8;@E@ B5F8;@5GHIJ@ 4 1=?AY2 2ZA8;@Fe8Ff69g@ ?5[8;@:8CY72\FaKMd6PVb@ <57Y8;@FaKMd6PV#@4=R]HSH]QIJ CTPMdL16:4 1=?AY2 2ZA8;@Fe8Ff69g@ ?5[8;@:8CY72\FaKMd6PVb@ <57Y8;@FaKMd6PV!@49WTHPRL16:4

!"#$%&'( )*+,-. ./,012340356782 +9:012;0<-=.>3?@AB6CDEF2 G9=-0123?@AB6CDEH2I:JKJLM NJOPQ)6;I )*+,-. ./,012340356782 +9:012;0<-=.>3?@AB6CDEF2 G9=-0123?@AB6CDER2I;@LM 0QKLK@ )SN7+.I )S.TI )S.;I )S.96=0I )S.TI )9 +9:012*K@U9OA?CVW2I)S9I )S.;I )S.96=0I ).96=0 67;T0;1X 30==<,93*+Y1Z 30==,9TT*+Y1XI ).;I ).TI ).96=0 67;T0;1XI ).;I ).T G9=*Y+12.7,2I )N7+. <*[012H2 N930129V\LM2 I )6I4C] PC CJ _J CJV QKCABQ)S6I )SN7+.I )S.TI )S.;I )S.96=0I ).96=0 67;T0;1XI).;I).T G9=*Y+12.7,2I )N7+. <*[012H2 N930129V\LM2 I )aEET;7,>T7b+>./,0 EEI )<0=03. +9:012;0<-=.>;LP\C6JKKCOEW2I )7,.*7+I )S7,.*7+I )aEET;7,>T7b+>./,0 +9:012;0<-=.>;LP\C6JKKCOEW2 G9=-012;LP\CEX2 EEI)7,.*7+IZc 7OE=\O@)S7,.*7+I )aEET;7,>T7b+>./,0 +9:012;0<-=.>;LP\C6JKKCOEW2 G9=-012;LP\CEZ2 EEI)7,.*7+IHc .CJA? .CO@ .VLP\Od )S7,.*7+I )aEET;7,>T7b+>./,0 +9:012;0<-=.>;LP\C6JKKCOEW2 G9=-012;LP\CEH2 EEI)7,.*7+IRc 6VCB@V 9QQ\QK@P )S7,.*7+I )aEET;7,>T7b+>./,0 +9:012;0<-=.>;LP\C6JKKCOEW2 G9=-012;LP\CER2 EEI)7,.*7+IFc 7K?@V)S7,.*7+I )S<0=03.I )SN7+.I )S.TI )S.;I )S.96=0I )S.TI )9 +9:012*K@U9OA?CVe2I)S9I )S.;I )S.96=0I ).96=0 67;T0;1X 30==<,93*+Y1Z 30==,9TT*+Y1XI ).;I).TI ).96=0 67;T0;1X 30==<,93*+Y1Z 30==,9TT*+Y1XI ).;I).TI )N7+. <*[012H2 N930129V\LM2 I )6Ib?LK \Q CJV ?CK QKCAB f\AB gCV K?\Q @LV)S6I )SN7+.I)S.TI )S.;I).;I ).TI ZeZ

!"# $%&'()'*+ ,-*+.-+/0 12345 6789:;#; 2<=9:;<>?@A; B 174CD5 5EC9:;59F5; 4<G9:;H96DI5J5KLM2?KANO"; 6789:;PQ; G<FI94R5S:;PQ;B 1T2345B 1T5UB1T5HB 1T5<VI9B 1T5UB 1< 4<G9:;7MKW<XYZ[>\;B1T<B 15UB 15<VI9 V3HU9H:Q =9II6C<=74R:! =9IIC<UU74R:QB15HB15UB 12345 6789:;#; 2<=9:;<>?@A; B 1VB6M[Y] 6W_[A ? [a ]X[b ?M1TVB 1T2345B 1T5UB 1T5HB15HB 15UB 12345 6789:;#; 2<=9:;<>?@A; B 174CD5 5EC9:;59F5; 4<G9:;H96DI5J5KLM2?KANO\; 6789:;c; G<FI94R5S:;c;B 1T2345B 1T5UB1T5HB 1T5<VI9B 1T5UB 1< 4<G9:;7MKW<XYZ[>d;B1T<B 1T5HB 1T5<VI9B 15<VI9 V3HU9H:Q =9II6C<=74R:! =9IIC<UU74R:QB 15HB15UB 15<VI9 V3HU9H:Q =9II6C<=74R:! =9IIC<UU74R:QB 15HB15U e<I7R4:;V3553G;B 12345 6789:;#; 2<=9:;<>?@A; B 1VB<X 7XfKgMWKXM <Nf?YK [> [MZK>gh1TVB 1T2345B 1T5UB 1T5HB15HB 15UB 12345 6789:;#; 2<=9:;<>?@A; B 159F5<H9< 4<G9:;H96DI5J5KLM<>K@Od; H3i6:;\; =3I6:;Pj; iH<C:;6325;B1T59F5<H9<B 1T2345B1T5UB1T5HB 1T5<VI9B 1T5UB 1< 4<G9:;7MKW<XYZ[>k;B1T<B 1T5UB1T5HB15HB15UB 1T=9459HB 1T5UB1T5HB 1T5<VI9B 1T5UB1T5HB 1T5<VI9B 1T=9459HB 1VHB 1=9459HB 174CD5 5EC9:;6DVG75; 4<G9:;YWNJga_W?M; e<ID9:;6a_W?M;B 1T=9459HB 1T23HGB 1TV3UEB

!"#$%&'( )*+,-./ 012$3 456% 7%58%299 : ;< =>?@AB CD> EFGGFH@BA H>I JKA> H@CD KGG LKG@MKC@FB? KBM NOBC@P> >QQFQ DKBMG@BAR S< TOJJF?>U VFO DKW> M>W>GFJ>M ?FP> EQ>>HKQ> KBM OJGFKM>M @C CF CD> XBC>QB>C< Y>EFQ> MFHBGFKM@BA CD> ?FECHKQ>U CD> O?>Q DK? CF E@GG OJ KBM ?OIP@C KB @BCQFMOZCFQV EFQP< =>?@AB CD> EFQP K? ?DFHB H@CD WKG@MKC@FB FE CD> @BJOC? [0\92 #(6]_ abb #cddef4 XB CD@? OB@C VFO DKW> G>KQB>M DFH CF ZQ>KC> g>I JKA>? CDKC O?> LYTZQ@JC< hFO DKW> G>KQB>M CF KMM GFA@Z CF VFOQ g>I JKA>? K? H@CD KBV FCD>Q JQFAQKPP@BA KJJG@ZKC@FB< hFO DKW> KG?F G>KQB>M iIj>ZC ?OJJFQC @B LYTZQ@JC< iB> FE CD> W>QV ZFPPFB KBM FEC>B O?>M FIj>ZC?U CD> =@ZC@FBKQV iIj>ZC DK? I>>B M@?ZO??>M @B M>CK@G< LKG@MKC@FB? EFQP KB @PJFQCKBC JKQC FE EFQP?U HD@ZD DKW> I>>B ?DFHB @B PKBV FE CD> >kKPJG>? @B CD@? OB@C< hFO DKW> KG?F G>KQB>M DFH CF O?> CD> lQQ FIj>ZC EFQ DKBMG@BA NOBC@P> >QQFQ?< hFO H@GG BFH I> KIG> CF M>W>GFJ g>I JKA>? G@m> lBnO@QV EFQP?U KMP@??@FB EFQP? KBM ?F FB< hFO DKW> G>KQB>M KIFOC CD> M@EE>Q>BC FJ>QKCFQ? KBM MKCKCVJ>? ?OJJFQC>M IV LYTZQ@JC KBM DFH CF O?> CD>P< hFO DKW> G>KQBC KIFOC EOBZC@FB? KBM JQFZ>MOQ>?U KBM DFH CF PKm> VFOQ JQFAQKP? PFMOGKQ O?@BA CD>P< oFM@BA ZFBW>BC@FB? ?DFOGM I> EFGGFH>M @B FQM>Q CF PKm> VFOQ JQFAQKP? Q>KMKIG> KBM >K?@GV OBM>Q?CKBMKIG> IV FCD>Q?< ,D>?> @BZGOM> @BM>BCKC@FB FE CD> ZFM>U BKP@BA CD> WKQ@KIG>? KBM ZFB?CKBC? KBM FCD>Q EFQPKCC@BA ZFBW>BC@FB? ?OZD K? CDF?> EFQ ZFPP>BC?< abp #qrcstqu#v eu#wxf# 012$3 456% 7%58%299 b ;< ,D> EFGGFH@BA ZFM> H@GG MF CD> jFIR )ToNXy, .z{|}z|l~WI?ZQ@JC/ )�� ;��

!"# $%&'()'*+ ,-*+.-+/0 12345673 89:;6<=>95;? 95;@5;6<>95;? A6< BC3D45; BC3@5;2= 45;@! 6E>4635>95;?F!?5G=3 89:;6<=@EHC9= =I65 E2345673 =3J 6E 6E>4635>95;?@! 7; 4635>95;?@K 7; 4635>95;?@L?5G=3 89:;6<=@5;2= =I65 E2345673 =3J 6E E7; 45;@4635>95;?M! 57 K 95=N M! 6E>4635>95;?<7J>45;?@O?5G=3 BC3@EHC9= =3J 6E 3=I5 89:;6<=@BC3 P3J 12345673 12345673 89PQ=3>95;? 95;@5;6<>95;? 6E>95;@ROR?5G=3 89PQ=3@5;2= =I65 E2345673 =3J 6E 6E>4635>95;?<7J>K?@O?5G=3 89PQ=3@5;2= =C9= 89PQ=3@EHC9= =3J 6E P3J 12345673 S2B <H63>? 95;@5=I5!TQHC2= A6< BC3PQ=3DBC3:;6<= 6E 375>6932<=;64>95;??5G=3 <9UB7I RV75 32<=;64R =I65 92B =3J 6E 6E>89PQ=3>95;??5G=3 <9UB7I RPQ=3R =C9= <9UB7I RWJJR =3J 6E 6E>89:;6<=>95;??5G=3 <9UB7I RN;6<=R =C9= <9UB7I R375 N;6<=R

!"#$%&'( )*+ ,- .*+ /01 2 33445 63/789:;5 <= >?) @A) -BCCBD,*E -0*F@,B* @B E)*)GH@) @A) -,1B**HFF, ?)G,)?= IJKKLMNO 9@ DB0C+ 1) 1)@@)G @B E,P) +G,P)G FB+) ?B @AH@ @A) ?FG,Q@ FH* 1) FA)FR)+ B0@= ;A) ?HS) ABC+? -BG B@A)G H*?D)G? H? D)CC= T>U7;9VU -,1 W*X ,- WUYZX BG WUY[X @A)* T,1 Y [ .C?)T,1 Y T,1 WU4 [X \ T,1 WU4<X .U] 9- .U] T>U7;9VU = >?) @A) -BCCBD,*E -0*F@,B* @B -,*+ @A) -HF@BG,HC T0*F@,B* THF@BG,HCW*X ],S , 9- * 6 Z ;A)* THF@BG,HC Y Z ._,@ T0*F@,B* .*+ 9- THF@BG,HC Y [ TBG , Y < ;B * THF@BG,HC Y THF@BG,HC , U)_@ .*+ T0*F@,B* abc$d efg% h%fi%cjj k [= 6l;mn5 6l.o]5 6m.;o Uom.Ypq.U.8o;V8p 7B*@)*@Ypm,FGB?B-@ r,?0HC /@0+,B s=Zp5 6;9;n.563;9;n.5 6/789:; noUq>oq.YP1?FG,Q@5 6t44 T0*F@,B* 9?:G,S)W?@GX ?@GY@G,SW?@GX ],S 1C*uF@G 1C*Y@G0) F@GY[ ,-WF,*@W?@GX6[X@A)* 9?:G,S)Y-HC?) )_,@ -0*F@,B* )*+ ,- ,-WF,*@W?@GXY[ BG F,*@W?@GXY< BG F,*@W?@GXYX@A)* 9?:G,S)Y@G0) )_,@ -0*F@,B* )*+ ,- -BG F@GYF,*@W?@GX4[ @B < ?@)Q 4[ ,-WF,*@W?@GXSB+WF@GXYZX@A)* [sv

!"" #$%&'(&)* +,)*-,*./ 012345167 728 94 27:; <6=>9?73012 @28 AB2C;9D2 AB2C;9D2 <6@E72F6;>G 6;>3;>9?F6;>G 94F6;>3HIHG;J72 <6@E723;>B7 7:9; 4B2C;9D2 728 94 94FC92;F6;>G?D8FKG3IG;J72 <6@E723;>B7 7167 <6@E72345167 728 94 @28 AB2C;9D2 LB0 ?M6B0FG 6;>3;7:;!NE51B7 94 2D;F962B?7>9CF6;>GG;J72 ?6O0D: HPD; 2B?7>9CH 7:9; 6B0 728 94 94F>58FIGNCJ7CQ78G;J72 94F<6@E72F6;>GG;J72 ?6O0D: HR76 9; 96 7E72H 7167 ?6O0D: HPD 9; 96 2D; 7E72H 728 94 @:9; 6B0 728 94 94F>58F!GNCJ7CQ78G;J72 94F<6@E72F6;>GG;J72 ?6O0D: HPD 9; 96 2D; D88H 7167 ?6O0D: HR76 9; 96 D88H 728 94 @:9; 6B0 728 94 94F>58FKGNCJ7CQ78G;J72 94F<6=>9?7F6;>GG;J72 ?6O0D: HR76 9; 96 5 S>9?7 2B?07>H 7167 ?6O0D: HPD 9; 96 2D; 5 S>9?7 2B?07>H 728 94 @:9; 6B0 728 94 @28 LB0

!"#$%&'( ))**+ ,)-./012+ ,)3456+ ,7869+ ,1+ 4:;< ,0=1>2 ?@A;BCDEFG <DH;BICDEI JK;JL;E :DMN;BI;:;<I+ 8EE ,0=1>2 ?@A;BCDEFG <DH;BICDEI :DMN;BIGEEI+ 1CFH; ,0=1>2 ?@A;BCDEFG <DH;BICDEI :DMN;BIACFH;I+ ,)1+ ,1+,0=1>2 FEB?;O?P <DH;B?;O?P+,)1+ ,1+,0=1>2 FEBQN??G<P ?@A;BQN??G< :DMN;B7N??G< <DH;BQN??G<P R5=S>5S4BTD:DUJCFA? G<JMFJLBIH@UNQVWI+,)1+ ,)7869+ ,)32XR+ YZ [GMMG\F<] FU ?K; JGE; [N<J?FG< 0U1DMF<ECGH;VU?CW 6FH F-?DC?_F4<E_J?C_QM<1DMF< U?CB?CFHVU?CW QM<1DMF<B?CN; F4<EBM;<VU?CW F.<?BCGN<EVF4<E ) YW F-?DC?BP GC J?CBP ?G JF<?VF.<?W FVHFEVU?C_F4<E_PW,+HFEVU?C_F-?DC?_PWW?K;< 0U1DMF<ECGH;BDMU; 4OF? [N<J?FG< ;<E F F-?DC?BJF<?VF-?DC?WaP F4<EBJF<?VF4<EW*P <;O? FVQM<1DMF<B?CN;W?K;< 0U1DMF<ECGH;B?CN; ;MU; 0U1DMF<ECGH;BDMU; ;<E F 4<E [N<J?FG< -NQ QMD<L-?CVW U?CB?;O?PZ:DMN; FV?CFHVU?CWBIIW?K;< HU]QGO I1MUZ ;<?;C D <NHQ;CI ;OF? UNQ ;<E F FV0U1DMF<ECGH;VU?CWW?K;< HU]QGO I9;UI ;MU; HU]QGO I=GI Pbc

!"# $%&'()'*+ ,-*+.-+/0 123 45 623 789 :;/%< =>.& ?&>+&/00 @ !A BCDEFG BCHG IJK1L M1K4N2 J O19 PJN1 OQ4RQ RS2TJ42K TQ1 UV7RW4PT 8K13 5SW RJXR8XJT42N K89TSTJXKY TJZ1KY 34KRS82TK J23 TSTJXK JK O1XX JK RS31 8K13 TS [JX43JT1 8K1W 42P8TAB\CHG BC6]MG BDDF6GUV7RW4PTL IJK1 7T83_B\DDF6G B7I aD F]bcd]c6efUV7RW4PTfG Bghh ]33 TQ4K TS 42KTW8RT 2S2h6 9WSOK1WK TS Ki4P S[1W UV7RW4PT jS38X1KA kPT4S2 6ZPX4R4T 789 Rj3IJXR8XJT1lk2IX4Ri M4j ]jS82TS5M4KRS82T M4j ]jS82TS5DJZ M4j M7IkdbDlFE D M4j M7IkdbDl]D6 M4j 789TSTJXV15SW1 M4j 789TSTJX]5T1W M4j D]ml]D6 M4j DSTJXISKT 5 nF12nMSR8j12TA5WjIJK17T83_ATZTo8J2T4T_AUJX81p e qp DQ12 EKNVSZ frS8 j8KT 12T1W J s8J2T4T_Af 6Z4T 789 623 5 5 nbST Kb8j1W4RnMSR8j12TA5WjIJK17T83_ATZTo8J2T4T_AUJX81pp DQ12 EKNVSZ fo8J2T4T_ j8KT 91 J 28j1W4R [JX81Af 6Z4T 789 623 5 5 nF12nMSR8j12TA5WjIJK17T83_ARj9aWS38RTKAUJX81p e qp DQ12 EKNVSZ frS8 j8KT K1X1RT J PWS38RTAf 6Z4T 789 623 5 M7IkdbDlFE D e !qqq M7IkdbDl]D6 e A!q D]ml]D6 e qAq" t IJXR8XJT1 TQ1 K89TSTJX 5SW TQ1 SW31WA 789TSTJXV15SW1 e MSR8j12TA5WjIJK17T83_ATZTo8J2T4T_AUJX81 u MSR8j12TA5WjIJK17T83_AX9Xd24TISKTA[JX81 5 n789TSTJXV15SW1 G M7IkdbDlFE Dp DQ12 ]jS82TS5M4KRS82T e 789TSTJXV15SW1 u M7IkdbDl]D6 6XK1 ]jS82TS5M4KRS82T e q

!"#$%&'( )*+ ,- ./0121345-167 8 ./01213496-276 : 5;2/*12-<=>?2/*1 @ A34?/4316 13B6> 3*+ 12134 ?2>1C 5;2/*12-D3B 8 ./0121345-167 E D5FGH5D) D2134A2>1 8 ./0121345-167 I 5;2/*12-D3B @ <=>J43K 1L6 76>/41>C <2?/;6*1C-7;A3>6.1/+KC404./01213496-276CM34/6 8 ./01213496-276 <2?/;6*1C-7;A3>6.1/+KC404<=>?2/*1CM34/6 8 5;2/*12-<=>?2/*1 <2?/;6*1C-7;A3>6.1/+KC404./0121345-167CM34/6 8 ./0121345-167 <2?/;6*1C-7;A3>6.1/+KC404D3B6>CM34/6 8 5;2/*12-D3B <2?/;6*1C-7;A3>6.1/+KC404D2134A2>1CM34/6 8 D2134A2>1 )*+ ./0 ./0 ?;+./0;=1G2*A4=?N @ ./0;=1 1L=> 27+67 -27 J72?6>>=*OC P>O92B QR2/7 27+67 L3> 066* >/0;=116+CQ <2?/;6*1C-7;A3>6.1/+KC./0;=1 )*+ ./0 ./0 ?;0S72+/?1>G2*?L3*O6TU .646?1 A3>6 <2?/;6*1C-7;A3>6.1/+KC?;0S72+/?1>C.646?16+,*+6B A3>6 V <2?/;6*1C-7;A3>6.1/+KC404W*=1A2>1CM34/6 8 VXYZ A3>6 [ <2?/;6*1C-7;A3>6.1/+KC404W*=1A2>1CM34/6 8 \\Z A3>6 ] <2?/;6*1C-7;A3>6.1/+KC404W*=1A2>1CM34/6 8 VYZ A3>6 )4>6 <2?/;6*1C-7;A3>6.1/+KC404W*=1A2>1CM34/6 8 Z )*+ .646?1 )*+ ./0 ::_ a.AH,SD_ ab)5<_ 9c<R_ dcHP e5P)8Q-7;A3>6.1/+KQ_ D59f)_ DH_ D<_9_P2*=127ga9_aD<_ D<_ .)f)AD e5P) 8 Q?;0S72+/?1>Q_ cSD,ce h5fW) 8QZQ _acSD,ce_ cSD,ce h5fW) 8QVQ _,16; VacSD,ce_ cSD,ce h5fW) 8Q[Q_,16; [acSD,ce_ cSD,ce h5fW) 8Q]Q_,16; ]acSD,ce_ a.)f)AD_ aD<_ aDH_ DH_ D<_9_i/3*1=1Kga9_aD<_ D<_ VjY

!"# $%&'()'*+ ,-*+.-+/0 123456 6748 9 :68;6: 3<=8 9:>?>@ABC>D>E: F 1G6HF 1G6IF 16IF 16HF123456 67489:JA>>KC: 3<=89:LMNOBPLAPB>Q: R<S589:OBPLAPB>Q OKT>:F1G6HF 16HF1G6HF 1G6IF 16IF 16HF1JF5CD> OKT>U1GJF1G6HF 16HF 123456 6748 9 :68;6: 3<=8 9:PVP5CD>OKT>: F 1G6HF 1G6IF 16IF 16HF1JFWAV>K>BP VQXKYQ NDTLKAC>U1GJF1G6HF 16HF 123456 6748 9 :68;6: 3<=8 9:PVPWAV>K>BPJQXKYQ: F 1G6HF 1G6IF 16IF 16HF1JFHDTLKAC>U1GJF1G6HF 16HF 123456 6748 9 :68;6: 3<=8 9 :PVPHDTLKAC>: F 1G6HF 1G6IF 16IF 16HF1JFWAV>K>BP BX>QY NDTLKAC>U1GJF1G6HF 16HF 123456 6748 9 :68;6: 3<=8 9:PVPWAV>K>BP<X>QY: F 1G6HF 1G6IF 16IF 16HF1JF6B?QTU1GJF1G6HF 16HF 123456 6748 9 :68;6: 3<=8 9:PVP6B?QT: F 1G6HF 1G6IF 16IF 16HF1JF6K>BP OKT>U1GJF1G6HF 16HF 123456 6748 9 :68;6: 3<=8 9:PVP6K>BPOKT>: F 1G6HF 1G6IF 16IF 16HF123456 67489:JA>>KC: 3<=89:LMNWAVMD>: R<S589:WAVMD> ZYNQY:F1G6HF 16HF1G6HF 1G6IF 1G6<JS8F 1G[ZI=F 1GJZH7F 1G\6=SF

!"#$%&'( )* +,-./0 +,1230 +-4-/10256 789:;<=>?@ A>BC@:=<:C8D E<B>+F-4-/10 GHIIJKLM -NC@ OC@PQ<R@ :N> 98=S TU: O8>@ D8: @N8; >==8= S>@@<B>@* EQ><@> V8==>V:* +F,1230 +5W3X 5Y6W/WAZ[,4-10 +61\-1A0 +]W\- 741Z_ ]261Z2=C<Q 6W/WAZ5/a10256+F]W\-0 +]W\- 741Zb 6W/WAZ5/26c0A>BC@:=<:C8D+F]W\-0 +F61\-1A0 +,A 6W/WAZ5/a10 +]W\- ]261Z6W.46 7<D@ .70 -N<Dd R8U 98= :<dCDB :N> :CS> :8 O8;DQ8<O <DO :>@: 8U= D>; P=8OUV:* 4D 8=O>= :8 @>=e> R8U ;>QQf ;> <@d :N<: R8U @UTSC: :N> 98QQ8;CDB CD98=S<:C8D T>98=> O8;DQ8<OCDB +]W\- ]261Z2A42/ 6W/WAZ5/a10256+F]W\-0@89:;<=>* +,A 6W/WAZA13 [43-,Z_bg0 +61\-1A0 +-25/1 5WA31A 5WA31A6W/WAZ5/a10 +-A0 +-3 2/4Y\ZA4Y,-0h\<S>i+F-30 +-30+4\Ea- -XE1Z-1j- \2.1Z-k:\<S>0 +F-30 +F-A0 +-A0 +-3 2/4Y\ZA4Y,-0h1l.<CQi+F-30 +-30+4\Ea- -XE1Z-1j- \2.1Z-k:1.<CQ0+F-30 +F-A0 +-A0+-3 2/4Y\ZA4Y,-02OO=>@@i+F-30 +-30+4\Ea- -XE1Z-1j- \2.1Z-k:2OO=>@@0+F-30 +F-A0 +-A0 +-3 2/4Y\ZA4Y,-06C:Ri+F-30 +-30+4\Ea- -XE1Z-1j- \2.1Z-k:6C:R0+F-30 +F-A0 +-A0 +-3 2/4Y\ZA4Y,-07:<:>i+F-30 +-30+4\Ea- -XE1Z-1j- \2.1Z-k:7:<:>0+F-30 +F-A0 +-A0 +-3 2/4Y\ZA4Y,-0CPi+F-30 +-30+4\Ea- -XE1Z-1j- \2.1Z-k:CP0+F-30 +F-A0 +-A0 +-3 2/4Y\ZA4Y,-068UD:=Ri+F-30 +-30+4\Ea- -XE1Z-1j- \2.1Z-k:68UD:=R0+F-30 +F-A0 +-A0 +-3 6W/7E2\Z) 2/4Y\Z61\-1A0+4\Ea- -XE1Z7a5.4- \2.1Z5:Dm n2/a1Z7>DO 4:o0+5A0 +]W\- 741Z)0h A>pUC=>O ]C>QO+F]W\-0+F-30 +F-A0 +F-25/10 +,A 6W/WAZA13 [43-,Z_bg0 +]W\- 741Z)0-N<Dd@o+F]W\-0 +76A4E- /2\Ya2Y1Zn57V=CP:0 +oll 7UT 5:DmqWD6QCVd 49 -k:\<S>*n<QU>Z W= -k:1.<CQ*n<QU>Z -N>D 3CS .R.>@@<B> .R.>@@<B> Z EQ><@> >D:>= R8U= D<S> <DO >lS<CQ <OO=>@@* m_m

!"# $%&'()'*+ ,-*+.-+/0 123456 171822938: ;: <=>?5@AB8C8 D5E@ FEE5E< F>G =H F>G IJK LLM NOIPQ=RSM NO4TUVM NOWS1XM YZ[\ ] _ ab_ _bcdefg$ !h ijklmnmo pqrslntu K7 R9JB X5@96h RJKBv2w8Ex TyQ8vBB7h V89Ex #;;! #h zm{ukmu pqrslntu K7 |B86 W5@8E: U9EE8> }vBBh RJKBv2w8Ex ~E56 RE822 =>? RJKh V89Ex #;;� �h pq{slntu ��l u�j ��l�� n�j �j� K7 R9JB SwJEE5CC: �5B9> W82C8Eh RJKBv2w8Ex R89?wAvC RE822h V89Ex !�� h �jks� ��l{j�� p�{slntu nm �� k�{ K7 �8vCw 4E5Aw7: Sv@5Cw7 �58C2h RJKBv2w8Ex I9@2 RJKBv2wv>3h 789Ex !��

!"#$%&'($)%*$+,--#./$ -010.2$ $345$67879:$:4;<$=>7<:;?@A$$B47$C7@>$D6;E7@$896:$;<$@?:$:47$86;C965$F?G><$?F$:47$<7G:;?@$H?@7$I5J$$B47$=>7<:;?@$D?7<$@?:$<;H@;F;G9@:K5$D;FF76$F6?C$=>7<:;?@$L$?F$MNO$LJ$$ !"#$%&'($)P*$+,--#./$ -010.2$ $B4;<$;<$F;@7$;F$:47$<:>D7@:<$49E7$D?@7$OQRS$796K;76J$$T:476U;<7$:47$67F767@G7$:?$OQRS$G9@$I7$D7K7:7DJ$$$

!"#$%&#$'#" ()*+ , !-./01./2.- 34"5645"# 7$8# )9: ;<= >?@ABCDE@FB? GHI ;<G JKLME@FNMO GHI ;<P QOF?R SAMTUVMTNMA GHI ;<I WAMT@M T XF@M YBUM ZTRM GH; ;<[ SMOFR? T ZTRM F? \T]BD@ FMV GHH ;<_ >?OMA@ >UTRMO GI ;<; >?OMA@ aMb@ G; ;<H cBAd F? X@T?CTAC FMV GH ;< FMV @eM XF@M fFgMO Gh ;<h \F?d iBDA SBEDUM?@O Gh= ;<G= XBgD@FB?Oj k?OVMAO GhP ,:l *)+-m!(n+*m) k cMK OF@M FO T OM@ Bo gF?dMC CBEDUM?@O VF@e OeTAMC T@@AFKD@MOp ODEe TO AMgT@MC @BqFEOp T OFUFgTA CMOFR?p BA T OeTAMC qDAqBOM< rTEABUMCFT SAMTUVMTNMA FO T OF@M EAMT@FB? T?C UT?TRMUM?@ @BBgp OB ]BD ET? DOM F@ @B EAMT@M EBUqgM@M cMK OF@MOp F? TCCF@FB? @B F?CFNFCDTg CBEDUM?@O< sM@@F?R O@TA@MC F? rTEABUMCFT SAMTUVMTNMA FO TO MTO] TO BqM?F?R T? MbFO@F?R Yar\ CBEDUM?@ BA EAMT@F?R T ?MV B?M< SAMTUVMTNMA FO T qABoMOOFB?Tg cMK OF@M CMNMgBqUM?@ qABRATU< >@ eTO KMM? CMNMgBqMC @B @TdM TCNT?@TRM Bo @eM ETqTKFgF@FMO Bo @eM gT@MO@ RM?MAT@FB? Bo KABVOMAOp UTdF?R F@ MTO] oBA CMNMgBqMAO @B DOM TCNT?EMC oMT@DAMO ODEe TO O@]gM OeMM@O T?C C]?TUFE Yar\< >@ eTO KMM? CMOFR?MC oABU @eM RABD?C Dq @B VBAd @eM VT] qABoMOOFB?Tg cMK CMNMgBqMAO jCMOFR?MAO CB< SAMTUVMTNMA OqMMCO Dq OF@M EB?O@ADE@FB? T?C O@AMTUgF?MO OF@M UTF?@M?T?EM< aeFO D?F@ VBDgC KM NMA] EB?EFOM F? F@O CMOEAFq@FB? Bo @eM oMT@DAMO Bo @eM EBUqB?M?@O Bo SAMTUVMTNMA< aB MgTKBAT@M B? MNMA]@eF?R VBDgC KM T NBgDUF?BDO @TOd @eT@ UMAF@O T oDgg KBBd oBA F@OMgo< YBVMNMAp @eFO D?F@ VFgg F?@ABCDEM ]BD @B @eM MOOM?@FTg MgMUM?@O< aB RM@ @eM UBO@ BD@ Bo ]BDA SAMTUVMTNMA MbqMAFM?EMp ]BD OeBDgC D?CMAO@T?C @eM KTOFE EB?EMq@O KMeF?C @eM SAMTUVMTNMA VBAd TAMT T?C d?BV eBV @B EeBBOM Bq@FB?Op DOM F?OqME@BAO T?C qT?MgOp T?C OM@ qAMoMAM?EMO @eT@ KMO@ oF@ ]BDA VBAd O@]gM< ,:t muv.n+*2.3 ko@MA RBF?R @eABDRe @eFO D?F@ ]BD VFgg KM TKgM @Bw x Q?CMAO@T?C VBAd TAMT x XM@ Dq @eM XF@M X@ADE@DAM x SMOFR? T qTRM F? gT]BD@ NFMV x kCC EB?@M?@O @B cMK OF@M x >?OMA@ FUTRMO j @TKgMO @B T cMK qTRM ,:y (3*)z !-./01./2.- 19"{ /"#$ \M@ DO O@TA@ VF@e T KAFMo BNMANFMV Bo @eM SAMTUVMTNMA VBAd TAMT< >o ]BD eTNM?|@ TgAMTC] gTD?EeMC SAMTUVMTNMAp CBDKgM}EgFEd @eM SAMTUVMTNMA FEB? B? ]BDA CMOd@Bq @B CB OB< ceM? ]BD gTD?Ee SAMTUVMTNMAp @eM oBggBVF?R VBAd TAMT F@MUO BqM? Dq< aeM SAMTUVMTNMA VBAd TAMT TEEBUUBCT@MO CFooMAM?@ O@]gMO Bo VBAdF?R T?C gMNMgO Bo GHI

!"#$%&$'( )*'(+*(,- ./0.1234.5 678. 9:; <.2 =88;42:>.? 2: @.9A:=1? =7? :2B.1 4B:128;24C 9:; >3<B2 D3@. 2: E:1@ 37 = 2:2=DD9 AD=7@ 40=8.5 FB. G3<;1. A.D:E 4B:E4 ?3GG.1.72 8:>0:7.724 :G 2B. E:1@ =1.=5 H FB. I:8;>.72 E37?:E ?340D=94 2B. 8;11.72 ?:8;>.72 =4 9:; 81.=2. =7? .?32 325 H FB. 6AJ.824 0=7.D 8:72=374 38:74 9:; 8D38@ 2: 374.12 :AJ.824 37 9:;1 ?:8;>.72C =7? 2: 8B=7<. 2B. E=9 9:; E:1@ 37 = ?:8;>.725 H I1.=>E.=K.1 01:K3?.4 >=79 GD:=237< 0=7.D4C 4;8B =4 2B. LFMN O29D.4 0=7.D =7? 2B. P:?. 3740.82:1C EB38B .7=AD. 9:; 2: E:1@ E32B :2B.1 I1.=>E.=K.1 .D.>.7245 H FB. N=;78B.1 A=1 8:72=374 A;22:74 G:1 :0.737< =7? 8D:437< 9:;1 >:42 G1.Q;.72D9 ;4.? 3740.82:14 =7? 0=7.D45 H FB. R1:0.129 3740.82:1 ?340D=94 01:0.123.4 G:1 2B. 4.D.82.? :AJ.82 :1 2./2C =7? D.24 9:; >:?3G9 2B:4. 01:0.123.45 STUVWU XYZX[Y\V[] XX[Y V_ \U[ V_]X[W\ZY [X[_] Z_ \U[ Zab[W\ W\Vc[de ][d[W\[ V_ \U[ ZWfg[_\hi j:; E:;D? A. E.DD =?K34.? 2: 8D:4. =DD 2B. GD:=237< 0=7.D =7? :023:74 A:/.4 8D;22.137< ;0 2B. E:1@ =1.= A9 8D38@37< :7 2B. k :7 2B. 2:0 13<B2 8:17.1 :G 2B. A:/.45 F: :0.7 I1.=>E.=K.1l4 E37?:E4C 3740.82:14C =7? 0=7.D4C ;4. 2B. m37?:E >.7;5 n 8B.8@ >=1@ 7./2 2: =7 32.> 37 2B. m37?:E >.7; 37?38=2.4 2B=2 2B. 7=>.? 32.> 34 8;11.72D9 :0.7 S2B:;<B 32 >=9 A. B3??.7 A.B37? :2B.1 E37?:E4i5 F: ?340D=9 =7 32.> 2B=2 347l2 8;11.72D9 :0.7C 8B::4. 2B. 32.> 7=>. G1:> 2B. >.7; :1 ;4. 324 @.9A:=1? 4B:128;25 op#q$'( $' r#,*st,*u,# N.2 ;4 7:E 42=12 :;1 J:;17.9 372: 2B. 1.=D> :G I1.=>E.=K.15 m. A.<37 E32B 29037< 37 = G.E 2.42 D37.4 37 :;1 I.43<7 K3.E5 O.. B:E :;1 E:1@ =1.= B=4 A..7 ?3K3?.? 372: 2E: E37?:E4C :7. ?340D=937< :;1 2./2 =7? 2B. :2B.1 ?340D=937< 2B. 8:11.40:7?37< LFMN 8:?.5 vwx

!"#$%&#$'#" ()*+ ,-+. /+0-12 ,-+. /3+45.+46+3 742 *-0894: 4 *)7;5+2< -2 <=3++ .4:0> ? 40 4 /+0-12 6-+.@ ? 40 4 ()*+ 6-+.@ 42* ? 40 4 089-< 6-+. <=4< 0=).0 A)<= <=+ *+0-12 42* <=+ BCDE 7)*+F /+0-12 ,-+. ()*+G*+0-12 6-+. ()*+ 6-+. HIJ KLMNOP QLP RSPT SN TLSKL UJV MWP TJWXSNOY ZP[PKQ M RSPT SN QLP \WPM]TPMRPW QJJ[MWF_ : *+a4;9<@ /3+45.+46+3 *-0894:0 <=+ /)7;5+2< .-2*). -2 /+0-12 6-+.F b); .);9* A+ .)3c-21 5)0< )a <=+ <-5+ -2 <=+ *+0-12 6-+. 42* 8+3a)35 47<-)20 0;7= 40 7;<<-21@ 840<-21@ -20+3<-21 8-7<;3+0@ <4A9+0 42* 0) )2F d)3 7=421-21 )3 49<+3-21 <=+ BCDE G 073-8<-21 0-*+@ :); =46+ <) .)3c -2 7)*+ 6-+.F e2 4**-<-)2@ :); 742 .)3c .-<= /3+45.+46+3f0 /+0-12 6-+. -2 <.) *-aa+3+2< .4:0g-2 <=+ h$ijkl 'm#& 42* nl$op$"p 'm#&F HqJV ZP[PKQ QLPZP RSPTZ SN QLP rSPT KMQPOJWU Js QLP tuPKQZ vMNP[w_ e2 <=+ E4:);< 6-+. :); 742 *+0-12 4 841+ 94:);<@ -20+3< 1348=-70@ <+x<@ 42* )<=+3 5+*-4F e2 <=+ y<42*43* 6-+.@ -2 4**-<-)2 <) -20+3<-21 1348=-70 <+x< 42* 5+*-4@ :); 742 490) -20+3< 94:+30@ 73+4<+ a345+ *)7;5+2<0@ 73+4<+ <4A9+0@ 42* 4889: )<=+3 7=421+0 <) :);3 841+g)8<-)20 <=4< 43+ 2)< 464-94A9+ -2 <=+ E4:);< 6-+.F e2 <=+ +x+37-0+@ :); .-99 0++ =). <) *+0-12 z+A 841+0 -2 <=+ 94:);< 6-+. a)99).+* A: <=+ 0<42*43* 5)*+F n#l k{ l|# nml# nl"k}lk"# y<3;7<;3-21 <=+ z+A 0-<+ -0 <=+ a-30< 0<+8 <).43*0 A;-9*-21 <=+ 7)38)34<+ z+A 0-<+F y<3;7<;3-21 -279;*+0 73+4<-21 4 a)9*+3@ .=-7= -279;*+0 499 );3 8-7<;3+ a-9+0@ <+x< a-9+0 42* *4<4A40+ a-9+0 -2 <=+-3 3+08+7<-6+ a)9*+30 -279;*+* -2 <=+ 54-2 a)9*+3@ .=-7= 490) -279;*+0 <=+ =)5+ 841+F C) A+<<+3 ;2*+30<42* <=+ 7)27+8< )a y<3;7<;3-21 <=+ z+A y-<+@ :); 7);9* ;0+ <=+ /3+45.+46+3 <;<)3-49 a-9+ <=4< -0 843< )a <=+ 847c41+F e2 /3+45.+46+3f0 54-2 5+2; 7=))0+ y-<+ ~ �8+2 y-<+@ <=+2 0+9+7< C;<)3-49 � /3+45.+46+3F C=+ C;<)3-49 � /3+45.+46+3 0-<+ 9-2c0 <) <=+ �j%{$�� nml# a-9+0 9)74<+* -2 <=+ /3+45.+46+3 �GC;<)3-49 a)9*+3F �a<+3 0+9+7<-21 <=+ 9)749 0-<+@ 0c-8 <) <=+ (3+4<+ C=+ y-<+ B)5+ �41+ 0+7<-)2 )a <=+ /3+45.+46+3 <;<)3-49F ��

!"#$%&$'( )*'(+*(,- ./0 123453 563 !753 6893 :4;3 <=> ?@A? A BC?D B?EFG?FED CB BD? FH I=E B?=ECJK HAKDB AJL ABBD?B I=E ?@D M=NHABB BC?DO P=FQRR GEDA?D ?@D ICEB? HAKDSA @=ND HAKD I=E ?@D BC?DT UB P=F VFCRL ?@CB HAKDO P=FQRR ALL CNAKDBO ?DW?O AJL XRAB@ ABBD?BY P=FE L=GFNDJ? >CRR G=J?ACJ ?@D BAND LDBCKJ G=NH=JDJ?B AB ?@D G=NHRD?DL M=NHABB @=ND HAKDT !*Z, [\+# ]\"+ ,'& _DKCJ VP BACJK ?@D L=GFNDJ? P=FQED >=EaCJK =JT bT cDAD ?@D dC?D >CJL=> =HDJO AJL GRCGa ?@D e=GFNDJ? >CJL=> ?= NAaD C? AG?CDT f@D dC?D >CJL=> EDNACJB =HDJ CJ ?@D VAGaKE=FJLT gT M@==BD XCRD h dADT iT jJ ?@D dAD UB LCAR=K V=WO BDRDG? ?@D M=NHABBkdC?D I=RLDE AB ?@D R=GA?C=J I=E ?@CB L=GFNDJ?T lT jJ ?@D XCRD <AND ICDRLO ?PHD NPkM=NHABBm=NDT@?NRT nT MRCGa dADT <=?CGD ?@A? ?@D L=GFNDJ? JAND J=> AHHDAEB A? ?@D ?=H =I ?@D e=GFNDJ? >CJL=>T ],o$', &p, ]\"+ ,'& :*(, 5$&q, f@=FK@ ?@D L=GFNDJ? @AB A ICRD JANDO J=?CGD C? CB B?CRR RAVDRRDL rJ?C?RDL e=GFNDJ?Y ?@A? CB VDGAFBD C? JDDLB AJ mfsc L=GFNDJ? JANDO =E HAKD ?C?RDT eDICJCJK A HAKD ?C?RD @DRHB BC?D CBC?=EB CLDJ?CIP ?@D HAKD ?@DP AED VE=>BCJKt ?@D HAKD ?C?RD AHHDAEB CJ ?@D VE=>BDE ?C?RD VAE AJL CJ ?@D V==aNAEa RCB?T jI P=F GEDA?D A L=GFNDJ? >C?@=F? A HAKD ?C?RDO ?@D L=GFNDJ? AHHDAEB CJ ?@D VE=>BDE >C?@ ?@D ?C?RD rJ?C?RDL e=GFNDJ?T jJ ?@CB HAE? =I ?@D ?F?=ECARO P=FQRR ?C?RD P=FE HAKDt buv

!"#$%&#$'#" () *+,- ,-. /0123.4, 5+4605 71,+8.9 1-00:. ;+.5 < =00>?7@ +A ,-. ,00>?7@ +:4B, 7>@.76C 8+:+?>.) /@.735.78.@B: ,00>?7@ 7DD.7@: 7?08. ,-. /0123.4, 5+4605 E) F4 ,-. =+,>. A+.>69 ,CD. G03D7:: H03. I7J.K ,-.4 1>+1L +4 ,-. /0123.4, 5+4605 ,0 :.. ,-. D7J. ,+,>. 2D67,.6 +4 ,-. /0123.4, 5+4605B: ,+,>. ?7@) M N78. C02@ A+>.) OPQ !RSTUV W XWUR TV YWZ[\] TR_ 02 5+>> :,7@, C02@ A+@:, D7J. 5-+>. 50@L+4J +4 /@.735.78.@B: a7C02, 8+.5) 02 5+>> >7C 02, ,-. D7J. 746 ,-.4 +4:.@, +37J.: 746 ,.b,) =-. D7J. C02 103D>.,. +4 ,-+: :.1,+04 0A ,-. ,2,0@+7> 5+>> >00L :+3+>7@ ,0 ,-. D7J. ?.>05) _c"d ef Y$gchi e#& /@.735.78.@ -7: ,50 8+:27> 6.:+J4 8+.5:jN,7467@6 8+.5 746 a7C02, 8+.5) 02B>> :,7@, ?C 50@L+4J +4 a7C02, 8+.59 5-+1- 7>>05: C02 ,0 6@75 >7C02, 1.>>: 0@ >7C02, ,7?>.: +4,0 5-+1- C02 174 766 104,.4, :21- 7: +37J.:9 ,.b,9 0@ 0,-.@ 3.6+7) F4 ,-+: D7@, 0A ,-. ,2,0@+7>9 C02 5+>> >7C 02, ,-. D7J.K +4 ,-. 4.b, :.1,+04 C02 5+>> 766 104,.4,) kl41. C02B@. 103A0@,7?>. 5+,- ,-.:. ,50 ,7:L:9 C02 37C A+46 +, .7:+.@ ,0 766 >7C02, 746 104,.4, ,0J.,-.@)m () F4 ,-. l?n.1,: D74.>9 1>+1L ,-. a7C02, ;+.5 +104 +A +, +:4B, 7>@.76C :.>.1,.6) =-. o.,,+4J N,7@,.6 +4 a7C02, ;+.5 6+7>0J ?0b 7DD.7@: 746 6.:1@+?.: ,-. a7C02, 8+.5 0D,+04:) E) p.8+.5 ,-. 0D,+04:9 ,-.4 1>+1L lq ,0 1>0:. ,-. 6+7>0J ?0b) M) F4 ,-. l?n.1,: D74.> 246.@ a7C02, 40,+1. ,-7, ,-. a7C02, 0D,+04:j/@75 a7C02, G.>> 746 /@75 a7C02, =7?>.j7@. 405 787+>7?>.K ,-.:. 0D,+04: [email protected], 787+>7?>. +4 N,7467@6 8+.5) !"$& Y$gchi r#sst (uu

!"#$%&$'( )*'(+*(,- ./ 012345 6789 234 :1/ ;<19 =12345 :8==> 1/; =12345 51?=8> 53 ;8@7/8 5A8 ;8>7B/ 1<81> 3@ 1 ;3:4C8/5D EA7> 51>F 7> 81>78< 53 1::3CG=7>A 7@ 234 G<8G1<8 1 >1CG=8 3@ 5A8 G1B8 234H<8 :<8157/B ?8@3<8 234 ?8B7/ =127/B 345 1 G1B8D 033F 15 5A8 @3==397/B >1CG=8 =12345 53 B85 1/ 7;81 3@ 5A8 G1B8 =12345 234H<8 :<8157/B 7/ 5A7> >8:573/ 3@ 5A8 5453<71=D EA8<8H> 1 :8== @3< 5A8 I3CG1>> =3B3J 1 51?=8 975A 5A<88 :8==> @3< >758 /167B1573/ ?4553/>J 1 :8== @3< 1/35A8< B<1GA7:J 1/; 1 51?=8 @3< 5A<88 :8==> 5A15 97== A3=; 58K5D L34 97== ;<19 51?=8> 1/; :8==> >7C7=1< 53 5A7> =12345 1> 234 93<F 7/ 234< ;3:4C8/5D M7<>5J 234 97== ;<19 1 =12345 :8== 7/ 9A7:A 234 97== 7/>8<5 5A8 I3CG1>> =3B3D ND I=7:F 7/ 5A8 O3:4C8/5 97/;39 3@ 5A8 C2PI3CG1>>Q3C8 ;3:4C8/5 53 C1F8 5A8 ;3:4C8/5 1:5768D RD .@ 5A82 1<8/H5 1=<81;2 3G8/J 3G8/ 5A8 @3==397/B 93<F 1<81 533=>S T EA8 U?V8:5> G1/8= W:A33>8 X7/;39 Y U?V8:5>ZJ 9A7:A 234H== 4>8 53 1;; 3?V8:5> 53 234< ;3:4C8/5D T EA8 [<3G8<52 7/>G8:53< W:A33>8 X7/;39 Y [<3G8<578>ZJ 9A7:A 234 97== 4>8 53 >85 G<3G8<578> 3< 155<7?458> @3< 3?V8:5> 7/ 234< ;3:4C8/5D .@ 5A8 [<3G8<52 7/>G8:53< 7>/H5 1=<81;2 8KG1/;8;J :=7:F 5A8 8KG1/;8< 1<<39 7/ 5A8 =398< <7BA5 :3</8< >3 234 :1/ >88 1== 5A8 G<3G8<52 3G573/>D \D ./ 5A8 U?V8:5> G1/8=J :=7:F 5A8 O<19 012345 I8== 7:3/D ]D ^368 5A8 G37/58< 53 5A8 O3:4C8/5 97/;39_ 5A8 C34>8 G37/58< :A1/B8> 53 1 ;<197/B 533= W=33F> =7F8 1 >C1== :<3>>ZD I=7:F 7/ 5A8 4GG8< =8@5 :3</8< 3@ 5A8 ;3:4C8/5J 5A8/ ;<1B 53 ;<19 1 =12345 :8==D XA8/ 234 <8=81>8 5A8 C34>8J 1 =12345 :8== 1GG81<> 7/ 1 =12345 51?=8D Na

!"#$%&#$'#" ()* +,-./0 0,1+* *23,456 0. 78++ 0)* 9.:/;*40 <845.<= ,45 5*784*6 0)* 3,>* +,-./0 ,?*,@ ()* <)80* ?*:0,4>+* 86 0)* +,-./0 :*++ -./ A/60 5?*<@ B./ :,4 3+,:* ,55808.4,+ +,-./0 :*++6 84 0)* >?,- ,?*, .7 0)* +,-./0 0,1+*@ C#DEF# G$HIJK L#MMD (. 3?*:86*+- 5*68>4 , 3,>*= -./ :,4 6*0 0)* 68N* .7 :*++6 -./ ,55 84 , 5.:/;*40@ B./ :,4 ,+6. ?*3.6808.4 :*++6 84 0)* 3,>*@ O@ P+8:Q 0)* 1.?5*? .7 0)* +,-./0 :*++ 0. 6*+*:0 80@ R,45+*6 ,33*,? ,?./45 , 6*+*:0*5 +,-./0 :*++S T@ (. ?*68N* 0)86 +,-./0 :*++= 5. .4* .7 0)* 7.++.<84>S U V4 0)* W?.3*?0- 8463*:0.? 7.? 0)* +,-./0 :*++= 0-3* XOY 84 0)* Z82*5 78*+5 0. 6*0 0)* :*++[6 <850) 0. XOY 382*+6= 0)*4 :+8:Q 84 0)* 5.:/;*40 0. 6** 0)* :*++ <850) :),4>*@ \.0*S V7 -./ *40*? , 382*+ <850) 0),0 86 +,?>*? 0),4 0)* <850) .7 0)* +,-./0 0,1+*= .? 0),0 :,/6*6 0)* :*++ 0. .]*?+,3 ,4.0)*? :*++ 84 , +,-./0 0,1+*= 9?*,;<*,]*? ,+*?06 -./ ,45 ,5A/606 0)* :*++ <850) 0. , ],+85 <850)@ U 4 0)* ?8>)0 685* .7 0)* +,-./0 :*++= 5?,> 0)* ;855+* ?*68N* ),45+* 0. 0)* ?8>)0 /408+ 0)* :*++ 86 0)* 5*68?*5 <850)@ _)*4 -./ ?*+*,6* 0)* ;./6*= 0)* :*++[6 <850) 86 5863+,-*5 84 0)* :.+/;4 )*,5*? ,?*, ,+.4> 0)* 0.3 .7 0)* +,-./0 0,1+*@ aa bJMKEcM# G$HIJK L#MMD \*20 -./ <8++ ,55 0)?** +,-./0 :*++6 1*+.< 0)* +.>. :*++ -./ A/60 :?*,0*5@ d,0*? -./ <8++ 846*?0 0)* 3,>*[6 4,]8>,08.4 1/00.46 84 0)*6* :*++6@ O@ V4 0)* 1A*:06 3,4*+= :+8:Q 0)* 9?,< d,-./0 P*++ 8:.4e 0)*4 ).+5 5.<4 0)* P.40?.+ Q*- f_845.<6g .? P.;;,45 Q*- fh,:840.6)g@ T@ V4 0)* 9.:/;*40 <845.<= 3.6808.4 0)* 3.840*? 1*+.< 0)* :*++ -./ 5?*< 7.? 0)* +.>.e 0)*4 5?,> 0. 5?,< , +,-./0 :*++@ P.4084/* 0. ).+5 0)* P.40?.+ Q*- f_845.<6g .? P.;;,45 Q*- fh,:840.6)g ,45 5?,< 0<. ;.?* +,-./0 :*++6@ B./? 6:?**4 6)./+5 +..Q 68;8+,? 0. 0)86@ Oij

!"#$%&$'( )*'(+*(,- ./0, * )*1/+& 2,33 45 678 9::; <7 =>9: 8? <@: A:==B 9:C< <7 :DA@ 7<@:E 678 AD9 E:B>F: D9; G7H: <@: =D678< A:==B DB 678 9::;I J78 AD9 A@D9K: <@: B>F: 75 D =D678< A:== L6 8B>9K 79: 75 ><B E:B>F: @D9;=:BI J78 AD997< A=>AM D9; ;EDK D A:== <7 G7H: >< <7 D 9:N ?7B><>79I 45 678 9::; <7 G7H: D =D678< A:== <7 E:?7B><>79 >< >9 D ;7A8G:9<O 57==7N <@:B: B<:?BI PI Q=>AM <@: L7E;:E 75 D =D678< A:== <7 B:=:A< ><I RI S7 G7H: <@: =D678< A:==O ;7 79: 75 <@: 57==7N>9KT U VB: <@: DEE7N M:6BI U W7=; ;7N9 X@>5< D9; 8B: <@: DEE7N M:6B <7 G7H: D =D678< A:== Y ?>C:=B D< D <>G:I Z#/+% 2,33- $' * )*1/+& [*\3, ]7N 678 N>== ?8< <@: 9DH>KD<>79 L8<<79 A:==B 678 8B< AE:D<:; >9<7 D B>9K=: <DL=:I _E78?>9K <@: A:==B >9<7 D <DL=: :9DL=:B 678 <7 A79<E7= <@: A:== B?DA>9K D9; <7 :DB>=6 G7H: <@: A:==B DB D KE78? >5 678 ND9< <7 A@D9K: <@: ?DK: =D678<I J78 N>== AE:D<: D <DL=: 57E <@: 9DH>KD<>79 L8<<79B <@D< >B <@: BDG: N>;<@ DB <@: =7K7 A:== DL7H: ><I VB: EDN aD678< SDL=: <7 KE78? <@: 9DH>KD<>79 L8<<79 >GDK:BI PI 49 <@: bL:A<B ?D9:=O A=>AM <@: EDN aD678< SDL=: >A79I RI 49 <@: 7A8G:9< N>9;7NO ?7B><>79 <@: ?7>9<:E D< <@: <7? =:5< A7E9:E 75 <@: 5>EB< 9DH>KD<>79 L8<<79 A:==c <@:9 ;EDK <@: ?7>9<:E B7 <@: <DL=: A79<D>9B <@: <@E:: A:==B D9; >B <@: =:9K<@ 75 <@: =7K7 A:==I PI d:=:DB: <@: G78B: <7 B:: <@: A:==B KE78?:; >9 D 9:N <DL=:I Pef

!"#$%&#$'#" () *+, -./0 120.304 . 3.560 3-.3 1+73.879 3-200 6.:+,3 10669 ;3-0 <-830 .20. 87 3-0 3.560= .74 .7 0>?3: 9?.10 ;3-0 @2.: .20. 87 3-0 3.560=) AB'# CD# E$FBGC H$IJ# *+, 1.7 906013 .74 >+/0 . 6.:+,3 3.560 3+ +3-02 .20.9 87 . 4+1,>073) *+, 1.77+3K -+<0/02K >+/0 . 6.:+,3 3.560 9+ 3-.3 83 +/026.?9 .7+3-02) L0M3 :+, <866 >+/0 3-0 3.560 :+, N,93 120.304 . O0< ?8M069 3+ 3-0 28@-3 3+ +OO903 3-0 .68@7>073 +O 3-0 7./[email protected]+7 5,33+79 3+ 3-0 6+@+ <-07 3-0: .20 87902304 87 3-0 ?.@0) P) Q7 3-0 R+1,>073 <874+< 1681S 3-0 3.5 +7 3-0 T.:+,3 3.560 3+ >+/0 83) () R2.@ 3-0 6.:+,3 3.560 . O0< ?8M069 3+ 3-0 28@-3 3+ 20?+9838+7 83K 3-07 42.@ +70 +O 3-0 3.560U9 28@-3 2098V0 -.74609 3+ .68@7 3-0 28@-3 98409 +O 3-0 6+@+ .74 7./[email protected]+7 5,33+7 6.:+,3 10669) L+3810 3-.3 .9 :+, 120.30 70< 3.5609 .74 10669K @28468709 .??0.2 +,368787@ 3-0 6.:+,3 .20.) *+, 1.7 ,90 3-090 @28468709 3+ .68@7 3-0 6.:+,3 060>0739) WXX $YBCD#" E$FBGC Z#JJ L0M3 .44 . 6.:+,3 1066 O+2 3-0 T0.27 [+20 \5+,3 @2.?-81) P) Q7 3-0 ]5N0139 ?.706K 1681S 3-0 R2.< T.:+,3 066 81+7) () Q7 3-0 R+1,>073 <874+<K 42.< . 70< 1066 87 3-0 9?.10 506+< 3-0 7./[email protected]+7 5,33+7 3.560) *+,2 ?.@0 9-+,64 6++S 98>86.2 3+ 3-89_ PP

!"#$%&$'( )*'(+*(,- .#,*&, * )*/0+& 1*23, 45 678 9:;6 ;8<6=>5 ?>@ @;8A <899; 6> <B8:68 : 6:C98D E>FG ?>@ F=99 ;88 7>F 6> ;6:B6 F=67 : 6:C98 :5A :AA <899; 9:68BD HD 45 678 ICJ8<6; K:589G <9=<L 678 MB:F N:?>@6 O:C98 =<>5D PD Q>R8 678 K>=568B 6> 678 M><@S856 F=5A>FD 45 678 :B8: C89>F 678 9:?>@6 <899 ?>@ J@;6 :AA8AG AB:T 678 K>=568B 6> 678 B=T76 6> :9=T5 F=67 678 B=T76 ;=A8 >U 678 6>KS>;6 <899V 6785 AB:T A>F5 6> 678 C>66>S >U 678 M><@S856 F=5A>FD W#*X )*/0+& .,33- $' * 1*23, E>F :AA 9:?>@6 <899; =56> F7=<7 ?>@ F=99 :AA 68Y6 :C>@6 6B:R89 9><:6=>5;D HD 45 678 ICJ8<6; K:589G <9=<L 678 MB:F N:?>@6 Z899 =<>5 :5A S>R8 678 K>=568B 6> 678 9:?>@6 6:C98 ?>@ J@;6 AB8FD PD MB:F : 6:C98 <899 :KKB>Y=S:689? >58[67=BA 678 ;K:<8 =5 678 6:C98D \D Z9=<L 678 C>BA8B >U 678 9:?>@6 <899 6> ;898<6 =6V 6785 =5 678 ]B>K8B6? =5;K8<6>B; _=Y8A U=89AG 6?K8 Ha 6> ;86 678 <899b; F=A67D cD MB:F :5>678B 6:C98 <899 :KKB>Y=S:689? >58[67=BA 678 ;K:<8 =5 678 6:C98 58Y6 6> 678 U=B;6 <899D dD Z9=<L 678 C>BA8B >U 678 9:?>@6 <899 6> ;898<6 =6V 6785 =5 678 ]B>K8B6? =5;K8<6>B; _=Y8A U=89AG 6?K8 Ha 6> ;86 678 <899b; F=A67D eD MB:F 678 9:;6 6:C98 <899 =5 678 B8S:=5=5T ;K:<8 =5 678 6:C98D f8;=g8 >B S>R8 678 <899; 6> :AJ@;6 678 ;=g8 >B K>;=6=>5 >U 678 <899; :; 588A8AD h>@B ;<B885 ;7>@9A 9>>L ;=S=9:B 6> 67=;i HjP

!"#$%&#$'#" ()* +,-./0 +123.- 456 7899 9:;<= >75 7;?@ >5 8=@:<> 8A;B:@ 8= C<:;A7:;D:<E6@8=B C<:;A7:;D:<F@ A;8= A:=6 ;=G 6@8=B >H: IJK:L>@ M;=:9N ON P98LQ ;=?7H:<: 8= >H: 95B5 9;?56> L:99 R>H: >5MA5@> 9;?56> L:99SN P98LQ8=B 8= ; 9;?56> L:99 M9;L:@ >H: 8=@:<>85= M58=> 8= >H: L:99 78>H56> @:9:L>8=B >H: L:99N TN PH55@: U=@:<> V UA;B:N WN U= >H: X:9:L> UA;B: X56<L: G8;95B J5YZ 95L;>: >H: P5AM;@@[X8>: \59G:< ;=G =;D8B;>: >5 >H: ]@@:>@ \59G:<Z >H:= >H: 8A;B:@ \59G:< L98LQ >H: L5AM;@@[95B5NB8\ >5 @:9:L> 8>N _N `;Q: @6<: >H: a:9;>8D: b5 M5Mc6M A:=6 95L;>:G ;> >H: J5>>5A 5\ >H: G8;95B J5Y 8@ @:> >5 C5L6A:=>Z >H:= L98LQ X:9:L> Rd8=G57@S 5< IM:= R;L8=>5@HS >5 @:9:L> >H: 8A;B:N bH: 8A;B: ;MM:;<@ 8= >H: 9;?56> L:99N eN P98LQ ;=?7H:<: 8= >H: f:;<= 5<: ]J56> 9;?56> L:99 >5 M9;L: >H: 8=@:<>85= M58=> 8= >H: L:99N gN U= >H: IJK:L>@ M;=:9F@ P5AA5= L;>:B5<?Z L98LQ >H: U=@:<> UA;B: 8L5=N hN U= >H: X:9:L> UA;B: X56<L: G8;95B J5YZ 95L;>: >H: P5AM;@@[X8>:i]@@:>@i8A;B:@ \59G:<Z ;=G =;D8B;>: >5 9:;<= 5<:]J56>NB8\ >H:= L98LQ X:9:L> Rd8=G57@S 5< IM:= R;L8=>5@HS >5 @:9:L> >H: 8A;B:N bH: 8A;B: ;MM:;<@ 8= >H: 9;?56> L:99N jN PH55@: k89: V X;D: >5 @;D: >H: LH;=B:@ ?56 A;G: >5 >H: H5A: M;B:N l"#$m# $ /noon'#" +%$p# ] <5995D:< 8A;B: 8@ ;= 8A;B: 7H5@: G8@M9;? LH;=B:@ 7H:= >H: M58=>:< M;@@:@ Rq<599@qS 5D:< 8>N 456 7899 6@: C<:;A7:;D:<F@ U=@:<> a5995D:< UA;B: L5AA;=G >5 L<:;>: >H<:: <5995D:< 8A;B:@ \5< >H: =;D8B;>85= J6>>5=@Eb<8M r9;==:<Z C:@>8=;>85=@Z ;=G b<;D:9 f5B@N ] <5995D:< 8A;B: L5=@8@>@ 5\ >75 8A;B:@s >H: 8A;B: G8@M9;?:G 7H:= >H: M;B: \8<@> 95;G@ 8= >H: J<57@:<Z ;=G >H: 8A;B: G8@M9;?:G 7H:= >H: M58=>:< A5D:@ 5D:< >H: 5<8B8=;9 8A;B:N t: @6<: >5 6@: 8A;B:@ >H;> ;<: >H: @;A: @8u:N bH: \8<@> 8A;B: G8L>;>:@ >H: @8u: 5\ >H: G8@M9;?Z @5 8\ >H: @:L5=G 8A;B: 8@ A6LH @A;99:< 5< A6LH 9;<B:<Z >H: <:@69>@ 7899 955Q G8@>5<>:G 5< 6=M<5\:@@85=;9N v:Y>Z ?56 7899 ;GG ; =;D8B;>85= J6>>5= 78>H ; <5995D:< 8A;B: >5 ?56< M;B:N bH:= ?56 7899 ;GG >H: 5>H:< =;D8B;>85= J6>>5=@ ;=G M<:D8:7 >H: M;B: 8= ; J<57@:< >5 >:@> >H: <5995D:<@N ON U= >H: C5L6A:=> 78=G57Z L98LQ 8= >H: \8<@> L:99 5\ >H: =;D8B;>85= J6>>5= >;J9:N bH8@ >:99@ C<:;A7:;D:< 7H:<: ?56 7;=> >H: 8A;B: 8=@:<>:GN TN b5 8=@:<> ; <5995D:< 8A;B:Z G5 5=: 5\ >H: \599578=Bs OjW

!"#$%&$'( )*'(+*(,- . /0 123 456650 781395:; 5< 123 =>?371@ A803BC 7BD7E 123 /0@3:1 F5BB5G3: /6893 D750H . 4255@3 /0@3:1 I /013:871DG3 /6893 I F5BB5G3: /6893H JH /0 123 /0@3:1 F5BB5G3: /6893 KD8B59 >5LC 1;A3 AB8003: D0 123 /6893 M863 <D3BKH N2D@ 9DG3@ 123 D6893 8 O0DPO3 0863C 80K 68E3@ D1 38@DB; DK301D<D8>B3 D0 123 QNRS 75K3H TH /0 123 =:D9D08B /6893 <D3BKC 7BD7E U:5V@3W 1230 08GD9813 15 R30ON:DAXB8003:H9D< 80K 7BD7E Y3B371 Z[D0K5V@\ 5: =A30 ZR87D015@2\H N2D@ 13BB@ ]:386V38G3: V2D72 D6893 15 KD@AB8; V230 123 A893 <D:@1 B58K@H H /0 123 F5BB5G3: /6893 <D3BKC 7BD7E U:5V@3W 1230 08GD9813 15 R30ON:DAXB8003:_50H9D< 80K 7BD7E Y3B371 Z[D0K5V@\ 5: =A30 ZR87D015@2\H N2D@ 13BB@ ]:386V38G3: V2D72 D6893 15 KD@AB8; V230 123 A5D013: D@ 5G3: 123 5:D9D08B D6893H H R8E3 @O:3 123 X:3B58K F5BB5G3: /6893 5A1D50 D@ @3B3713K @5 1281 123 :5BB5G3: D6893@ B58K V230 123 A893 B58K@ D0 123 >:5V@3:C 30@O:D09 8 POD7E 1:80@D1D50 >31V330 D6893@ V230 8 O@3: 65G3@ 123 A5D013: 5G3: 123 5:D9D08B D6893H aH 4BD7E =b 15 7B5@3 123 KD8B59 >5LH N23 D6893 8AA38:@ D0 123 K57O6301H cH F3@Dd3 123 B8;5O1 73BB 15 <D1 123 D6893H e#,*&, &f, g&f,# hgiigj,# kl*(, M5V ;5O VDBB 8KK :5BB5G3: D6893@ <5: 123 5123: 08GD981D50 >O1150@H mH /0 123 ]57O6301 VD0K5VC 7BD7E D0 123 @3750K 08GD981D50 >O1150 73BBW 1230 D0 123 456650 781395:; 5< 123 =>?371@ A803BC 7BD7E 123 /0@3:1 F5BB5G3: /6893 D750H nH /0 123 /0@3:1 F5BB5G3: /6893 KD8B59 >5LC 1;A3 K3@1D081D50@ D0 123 /6893 M863 <D3BK 15 A:5GDK3 123 D6893 8 O0DPO3 0863H JH /0 123 =:D9D08B /6893 <D3BKC 7BD7E U:5V@3C 1230 08GD9813 15 80K @3B371 R30O]3@1D081D50@H9D<H TH /0 123 F5BB5G3: /6893 <D3BKC 7BD7E U:5V@3C 1230 08GD9813 15 80K @3B371 R30O]3@1D081D50@_50H9D<H H R8E3 @O:3 123 X:3B58K F5BB5G3: /6893 5A1D50 D@ @3B3713KC 1230 7BD7E =b 15 7B5@3 123 KD8B59 >5LH H /0 123 ]57O6301 VD0K5VC 7BD7E D0 123 12D:K 08GD981D50 >O1150 73BBW 1230 D0 123 =>?371@ A803Bo@ 456650 781395:;C 7BD7E 123 /0@3:1 F5BB5G3: /6893 D750H aH /0 123 /0@3:1 F5BB5G3: /6893 KD8B59 >5LC 1;A3 1:8G3BB59 D0 123 /6893 M863 <D3BK 15 A:5GDK3 123 D6893 8 O0DPO3 0863H cH /0 123 =:D9D08B /6893 <D3BKC 7BD7E U:5V@3 1230 08GD9813 15 80K @3B371 R30ON:8G3BS59@H9D<H pH /0 123 F5BB5G3: /6893 <D3BKC 7BD7E U:5V@3 1230 08GD9813 15 80K @3B371 R30ON:8G3BS59@_50H9D<H mcT

!"#$%&#$'#" ()* +,-. /01. 23. 41.56,7 865569.1 :;,<. 6=2>6? >/ /[email protected] 23.? @5>@- BC 26 @56/. 23. 7>,56< D6E* ((* 8./>F. 23. 2G6 5,H602 @.55/ 26 I>2 23. >;,<.* J"#'K#& LMN" !MON%#PQ R60 @,??62 9>.G 165569.1 D.3,9>61 >? S1.,;G.,9.1T/ S6@0;.?2 G>?76GU 165569.1 >;,<./ G61- 6?5H >? , D16G/.1* V6G.9.1A H60 @,? =1.9>.G 23. 76@0;.?2 >? S1.,;G.,9.1 26 /.. >2/ D16G/.1W1.5,2.7 I0?@2>6?/* R60 76 ?62 3,9. 26 /,9. 23. 76@0;.?2 D.I61. H60 =1.9>.G >2* (* 41.// X(Y 26 /.. H601 76@0;.?2 >? , Z.D D16G/.1* +69. 23. ;60/. =6>?2.1 69.1 23. 165569.1 >;,<./ H60 @1.,2.7 26 /.. 23.; @3,?<.* Y* Z3.? H60 I>?>/3 =1.9>.G>?< 23. I>5.A @56/. 23. D16G/.1 G>?76G* [* 8.201? 26 S1.,;G.,9.1T/ S6@0;.?2 G>?76G ,?7 @366/. X>5. \ ],9. 26 /,9. 23. @3,?<./ H60 ;,7. 26 23. 36;. =,<.* _ abcde ecfeg6G H60 G>55 ,77 2.E2 >? 23. @.55/ 6I 23. D6226; 5,H602 2,D5.* :? S1.,;G.,9.1A H60 @,? 2H=. @6?2.?2 7>1.@25H >?26 , 5,H602 @.55A 61 H60 @,? @02 ,?7 =,/2. @6?2.?2 I16; ,?623.1 76@0;.?2 >?26 , 5,H602 @.55* :? 23>/ 0?>2A H60 G>55 ,77 2.E2 26 23. 5,H602 @.55 DH @6=H>?< ,?7 =,/2>?< @6?2.?2 I16; ,? .E>/2>?< 2.E2 I>5. 26 , 5,H602 @.55* (* h366/. X>5. \ B=.?U 23.?A >? 23. h6;=,//i]>2. I657.1A 6=.? SZjiV6;.k.E2*2E2* k3. SZjiV6;.k.E2*2E2 76@0;.?2 6=.?/ >? , ?.G S1.,;G.,9.1 S6@0;.?2 G>?76G* Y* :? SZjiV6;.k.E2*2E2 /.5.@2 23. I>1/2 2G6 5>?./ 6I 2.E2A lX5H X>/3>?<l 23160<3 l1,9>65>*l [* h366/. m7>2 \ h6=H 26 @6=H 23. 2.E2* j* :? 23. ;Hih6;=,//V6;. 76@0;.?2A @5>@- >? 23. I>1/2 5,H602 @.55 >? 23. 2.E2W7./@1>=2>6? 5,H602 2,D5.* n* h366/. m7>2 \ 4,/2. 26 =,/2. 23. 2.E2 >?26 23. 5,H602 @.55* o* :? SZjiV6;.k.E2*2E2 /.5.@2 23. ?.E2 2G6 5>?./ 6I 2.E2A lp.9.5 n 8,=>7/l 23160<3 l]>D.1>,*l q* h366/. m7>2 \ h6=H 26 @6=H 23. 2.E2* r* :? 23. ;Hih6;=,//V6;. 76@0;.?2A @5>@- >? 23. /.@6?7 @.55 >? 23. 2.E2 7./@1>=2>6? 5,H602 2,D5.* s* h366/. m7>2 \ 4,/2. 26 =,/2. 23. 2.E2 >?26 23. 5,H602 @.55* (rn

!"#$%&$'( )*'(+*(,- ./0 12 3456789:;:<=0=<= >:?:@= =A: ?B>= =C8 ?D2:> 8E =:<=F GHIJ:= K8I2L MBNBOD2JG =AP8IJA GHIJ:= K8I2L0G ..0 Q8RN =A: =:<=F =A:2 RB>=: D= D2 =A: =ADPL @:?? D2 =A: ?BN8I= =BS?:0 .T0 Q?8>: 3456789:;:<=0=<=F =A:2 @?D@O D2 =A: 9N6Q89RB>>789:0A=9? =8 9BO: D= =A: B@=DU: L8@I9:2=0 VW#X*& Y,Z& [8I @B2 E8P9B= =:<= D2 =A: 38@I9:2= CD2L8C SN >:==D2J RP8R:P=D:> D2 =A: HP8R:P=N D2>R:@=8P0 \DP>=F >:?:@= =A: =:<= N8I CB2= =8 E8P9B=F B2L =A:2 BRR?N =A: @AB2J:>0 [8I CD?? @AB2J: =A: E82= =NR: B2L >D]: 8E =A: =:<=0 .0 1E =A: HP8R:P=N D2>R:@=8P D>2= 8R:2F @A88>: 4D2L8C _ HP8R:P=D:>0 T0 12 =A: EDP>= =:<= L:>@PDR=D82 ?BN8I= @:??F >:?:@= B?? =A: =:<= EP89 =A: C8PL G\?NFG =AP8IJA =A: ?B>= C8PL GPBUD8?D0G 0 12 =A: HP8R:P=N D2>R:@=8P> >:@82L \8P9B= R8RaIR 9:2IF CAD@A @IPP:2=?N P:BL> 3:EBI?= \82=F >:?:@= b:PLB2BF cPDB?F 7:?U:=D@BF >B2>a>:PDE0 50 12 =A: KD]: R8RaIR 9:2IF >:?:@= T0 ;A: =:<= D2 N8IP L8@I9:2= BI=89B=D@B??N IRLB=:> =8 P:E?:@= =A: @AB2J:>0 d0 e:R:B= =A: BS8U: >=:R> =8 >:?:@= B2L E8P9B= =A: =:<= D2 =A: 8=A:P =C8 =:<=aL:>@PDR=D82 ?BN8I= @:??>0 f%%gh iWgW# *'j !&hg, k8C N8I CD?? BRR?N BLLD=D82B? E8P9B==D2J @AB2J:> =8 =A: =:<= >I@A B> @AB2JD2J =A: @8?8P B2L >=N?: =8 @P:B=: A:BLD2J =:<=0 .0 12 =A: EDP>= =:<= L:>@PDR=D82 ?BN8I= @:??F >:?:@= =A: A:BLD2J =:<= EP89 =A: C8PL G\?NG =AP8IJA =A: C8PL Gl8I2=BD2>0G T0 12 =A: HP8R:P=N D2>R:@=8PF @?D@O =A: @8?8P RD@O:Pm =A:2 98U: =A: :N:LP8RR:P =8 =A: n:BP2 l8P: cS8I= D9BJ: D2 =A: L8@I9:2= CD2L8C B2L >:?:@= =A: SP8C2 @8?8P 8E =A: =:<= D2 =A: D9BJ:0 0 K=D?? D2 =A: HP8R:P=N D2>R:@=8PF @?D@O =A: o D@82 =8 BRR?N S8?L >=N?: =8 =A: =:<=0 50 e:R:B= =A: BS8U: >=:R> =8 BRR?N @8?8P B2L >=N?: =8 =A: A:BLD2J =:<= D2 =A: 8=A:P =:<= L:>@PDR=D82 ?BN8I= @:??>0 d0 HP:>> \.T =8 RP:UD:C N8IP RBJ: D2 B SP8C>:P0 [8IP RBJ: >A8I?L ?88O >D9D?BP =8 =A: RBJ: S:?8C0 k8=D@: =A: =:<=0 ;A:P: D> ?D==?: >:RBPB=D82 S:=C::2 =:<= D2 82: ?BN8I= @:?? B2L =A: 2:<=F :>R:@DB??N S:=C::2 =A: >:@82L B2L =ADPL @:??>0 [8I CD?? ED< =AB= D2 =A: ?B=:P RBP= 8E =A: I2D=0 p0 Q?8>: =A: SP8C>:P CD2L8CF =A:2 @?D@O D2 =A: 38@I9:2= CD2L8C =8 9BO: D= B@=DU:0 .qp

!"#$%&#$'#" ()* +,-. /0 1230!3-! 4/5+ 6789:; <=>? =@ A>BCD:B D9E B78=FG 9:; H>I C7G>@J KA9:GA 89: L7F 7MN:@; O9@; 9D 89:E M>@=GF >B>O>F;@ =F 6789:; <=>?P L>E;7=F LA7FG>@ O:@; I> L9OCB>;>M =F Q;7FM7EM <=>?J HA>F 89: @?=;LA ;9 Q;7FM7EM <=>?P 89: ?=BB @>> A9? RE>7O?>7<>E :@>@ ;7IB>@ ;9 LE>7;> 89:E C7G> @;E:L;:E>J KA> 6789:; ;7IB>@ =F 6789:; <=>? 7E> S;7IB>T ;7G@ =F Q;7FM7EM <=>?J U9? 89: ?=BB B>7EF A9? ;9 ?9EV ?=;A ;7IB>@ ;9 L9F;=F:> D=F>W;:F=FG 89:E M>@=GFJ X=E@;P 89: ?=BB @?=;LA ;9 RE>7O?>7<>EY@ Q;7FM7EM <=>?J Z [F ;A> \IN>L;@ C7F>BP LB=LV ;A> Q;7FM7EM ]=>? =L9FJ 9:E C7G> @A9:BM B99V @=O=B7E ;9 ;A> @LE>>F I>B9?J 1#_ #aa b"cd#"_e#fg>BB A>=GA; M>;>EO=F>@ ;A> A>=GA; 9D ;A> @C7L> ?=;A=F 7 L>BB E9?J U9;=L> ;A> @C7L> 7E9:FM ;A> g9OC7@@ B9G9J 9: ?7F; ;9 E>O9<> ;A> >h;E7 @C7L> I>;?>>F ;A> B9G9 7FM F7<=G7;=9F I:;;9F@J iJ gB=LV 7F8?A>E> =F ;A> IB7FV 7E>7 9D ;A> L>BB L9F;7=F=FG ;A> g9OC7@@ B9G9 =O7G> jI:; F9; ;A> =O7G> =;@>BDkJ lJ [F ;A> L>BB mE9C>E;8 =F@C>L;9EP =F ;A> n D=>BM jA>=GA;kP ;A7; L:EE>F;B8 L9F;7=F@ 7 <7B:>P M>B>;> ;A> <7B:>J oJ Q;=BB =F ;A> mE9C>E;8 =F@C>L;9EP LB=LV ;A> pGL9B9E I9h =L9F B9L7;>M =F ;A> I9;;9O 7E>7 9D ;A> mE9C>E;8 =F@C>L;9Eq ;A>F :@> ;A> >8>ME9CC>E ;9 @>B>L; IB7LVJ KA> I7LVGE9:FM L9B9E =@ 7CCB=>M ;9 ;A> L>BBJ rJ gB=LV 7F8?A>E> =F ;A> R9L:O>F; ?=FM9? ;9 @>> ;A> LA7FG>J 1#a#s_etu $ 2$va#U>h; 89: ?=BB 7MN:@; ;A> @C7L> =F ;A> F7<=G7;=9F I:;;9F ;7IB>J KA> >7@=>@; ?78 ;9 @>B>L; 7 ;7IB> =F Q;7FM7EM <=>? =@ I8 :@=FG ;A> ;7G @>B>L;9EP ?A=LA M=@CB78@ nKw6 ;7G@ 9D >B>O>F;@ =F ;A> M9L:O>F;J 9: ?=BB :@> ;A> ;7G @>B>L;9E ;9 @>B>L; ;A> ;7IB> L9F;7=F=FG ;A> F7<=G7;=9F I:;;9F@J iJ gB=LV =F ;A> L>BB ;A7; L9F;7=F@ ;A> KE=C mB7FF>E =O7G>J U9;=L> ;A> ;7G @>B>L;9E 7; ;A> I9;;9O B>D; 9D ;A> R9L:O>F; ?=FM9?J U9;>x KA> ;7G@ =F 89:E ;7G @>B>L;9E O78 <7E8 I7@>M 9F ;A> F:OI>E 9D ;7IB>@ 89: LE>7;>M ?A=B> =F 6789:; <=>?J lJ [F ;A> ;7G @>B>L;9EP LB=LV ;A> E=GA;O9@; S;7IB>T ;7GJ iyz

!"#$%&$'( )*'(+*(,- ./ 012 345672/0 89/:48 ; <4=:2= ;>>2;=? ;=46/: 012 /;@9A;094/ <6004/ 0;<B2C ;/: 012 D=4>2=0E 9/?>2504= /48 =2FB250? >=4>2=092? F4= ; 0;<B2G !,& H*IJ, K#L%,#&$,-M48 E46 89BB 6?2 012 0;<B2 D=4>2=0E 9/?>2504= 04 5B2;= 012 2N0=; ?>;52 9/ 012 /;@9A;094/ <6004/? 0;<B2 ;/: 04 ;:: ; <;5OA=46/: 54B4= 9/ 012 0;<B2G PG ./ 012 D=4>2=0E 9/?>2504=C 5B95O 012 QB2;= R48 S29A10? 954/G .0 9? 012 04> B2F0 <6004/ 9/ 012 B482= 1;BF 4F 012 D=4>2=0E 9/?>2504=G T12 2N0=; ?>;52 9? =274@2: F=47 012 0;<B2G UG V09BB 9/ 012 D=4>2=0E 9/?>2504=C 5B95O 012 WAQ4B4= 54B4= <4N 954/C 012/ 6?2 012 2E2:=4>>2= 04 ?2B250 012 54B4= <B;5OG T12 <B;5O <;5OA=46/: 54B4= 9? ;>>B92: 04 012 /;@9A;094/ <6004/? 0;<B2G XYY Z,JJ K*YY$'(M2N0C E46 89BB 7;O2 51;/A2? 04 012 52BB? 01;0 54/0;9/ 02N0G [? E46 5;/ ?22C 012 02N0 9? 044 5B4?2 04 012 2:A2? 4F 012 52BB?G \46 89BB ;:: >;::9/A 04 012 52BB? 04 B2;@2 =447 <20822/ 012 02N0 ;/: 52BB?G PG QB95O 9/ 012 F9=?0 52BB 9/ 012 02N0 :2?5=9>094/ 0;<B2G UG ./ 012 0;A ?2B2504=C 5B95O 012 =9A1074?0 ]0;<B2 0;A 04 ?2B250 012 0;<B2G _G ./ 012 D=4>2=0E 9/?>2504=? Q2BBD;: F92B:C 0E>2 Pa 04 ;:: Pa >9N2B? 4F ?>;52 <20822/ 012 02N0 ;/: 012 0;<B2 52BB?G bG QB95O ;/E812=2 9/ 012 345672/0 89/:48 04 ?22 012 51;/A2?G cG V;@2 E46= :45672/0G def ghij Hki !hHi lh)i! T4 ?22 ; 19A1mB2@2B =2>=2?2/0;094/ 4F 012 ?0=6506=2 4F ; B45;B ?902C E46 6?2 3=2;782;@2=? V902 n;> @928G \46 5;/ ;B?4 6?2 012 ?902 7;> 04 ;:: /28 F9B2? 04 012 ?902C 04 ;::C =274@2C ;/: 51;/A2 B9/O?C ;/: 04 5=2;02 ; A=;>195 F9B2 4F 012 ?902 01;0 E46 5;/ 2N>4=0 04 ;/: >=9/0 F=47 ;/ 97;A2m2:909/A ;>>B95;094/G T12 ?902 7;> ;B8;E? :9?>B;E? 012 1472 >;A2 F4= ; ?902 ;0 012 04> 4F 012 7;>o <2B48 012 1472 >;A2 E46 5;/ ?22 81951 F9B2? 012 1472 >;A2 B9/O? 04G T12=2 ;=2 ; /67<2= 4F 8;E? 04 :2F9/2 ; ?902? 1472 >;A2G T12 2;?92?0 8;E 04 ?20 ; 1472 >;A2 9? <E 6?9/A 012 54/02N0 72/6 89019/ 012 V902 89/:48G Ppp

!"#$%&#$'#" () *+,-. /01 /,/+1 234 56 /01 7,/1 8,9:58 /5 ;3.1 ,/ 3-/,<1) =>6 /01 7,/1 8,9:58 ,? 95/ <,?,2+1@ -055?1 A,9:58 B 7,/1 C,+1?)D E) >9 /01 7,/1 8,9:58F? G5-3+ C5+:14 +,?/@ 4,H0/I-+,-. =A,9:58?D 54 *59/45+I-+,-. =J3-,9/5?0D /01 ;KL*5;M3??N5;1)0/;+ :5-O;19/P /019 ,9 /01 -59/1Q/ ;19O@ -055?1 71/ 3? N5;1 R3H1) S) *+,-. /01 7,/1 J3M ,-59 ,9 /01 /5M +16/ 3413 56 /01 7,/1 8,9:58P /019 ,9 /01 7,/1 J3M M5MIOM ;19O@ ?1+1-/ J3M 39: C,+1?) T01 7,/1 8,9:58 958 3MM134? 8,/0 /85 <,18? 56 K5O4 +5-3+ ?,/1U 59 /01 +16/ ,? 3 ?,/1 ;3M@ 80,-0 H43M0,-3++K 41M41?19/? /01 -O4419/ ?/4O-/O41 56 /01 *5;M3?? ?,/1 =8,/0 ;KL*5;M3??N5;1)0/;+ 3? /01 05;1 M3H1D@ 39: 59 /01 4,H0/ ,? 3 +,?/ 56 /01 +5-3+ 65+:14F? -59/19/?) T01 ;KL*5;M3??N5;1)0/;+ M3H1 -O4419/+K 03? 95 +,9.?) V5O 8,++ 3:: +,9.? /5 /0,? M3H1 ,9 /01 91Q/ ?1-/,59 56 /0,? O9,/) G13<1 /01 7,/1 8,9:58 5M19 654 958@ ?5 /03/ K5O -39 ?11 058 /01 ?,/1 ;3M H1/? OM:3/1: 3? K5O 3:: +,9.? /5 /01 05;1 M3H1) WXY Z[\] _ a !_b cd\ef >;3H1? ,9 /01 /5M 3413 56 /01 *5;M3?? 05;1 M3H1 HO,:1 <,?,/54? /5 ?M1-,6,- M3H1? 59 /01 ?,/1) g58 K5O 8,++ 3:: +,9.? 654 /01 93<,H3/,59 2O//59?) V5O 8,++ ?11 /03/ /0141 341 3 9O;214 56 83K? /5 -413/1 +,9.? O?,9H h413;813<14) C,4?/@ K5O 8,++ 3:: 3 +,9. 645; /01 T4,M R+39914 ,;3H1 /5 /01 T4,MR+39914)0/;+ M3H1 O?,9H /01 R45M14/K ,9?M1-/54) (ij

!"#$%&$'( )*'(+*(,- ./ 01 234 5624 761897: 89;<=4>?=6?@ 234 6?91 A9B 234 CDEF9CGHIIJ9C4/32C= A6=4 61 46234B GH14/ K34 CDEF9CGHIIJ9C4/32C= A6=4 <4?9C4I 234 H?26L4 761897/ M/ 01 234 N9?;C412 761897: ?=6?@ 234 KB6G O=H114B 6CHP4 91?4 29 I4=4?2 62/ Q/ F399I4 R61897 S OB9G4B264I 29 9G41 234 OB9G4B2D 61IG4?29B 6A 62 6I1T2 H=B4H8D 9G41/ K34 OB9G4B2D 61IG4?29B 86IG=HDI 61A9BCH2691 H<9;2 234 I4=4?248 6CHP4/ UV&,W K34 X61@ A64=8 ?912H61I H 1;C<4B I6P1 YZ[: 9A241 B4A4BB48 29 HI H 1;== 9B \8;CCD\ =61@: ?B4H248 7341 D9; 61I4B248 234 B9==9L4B 6CHP4/ N9 192 B4C9L4 236I ?3HBH?24B/ 02 76== I991 <4 B4G=H?48 7623 234 A6=4 1HC4 9A 234 89?;C412 D9; =61@ 29/ ]/ 01 234 OB9G4B2D 61IG4?29B: ?=6?@ 234 A9=84B 6?91 29 234 B6P32 9A 234 X61@ A64=8/ / 01 234 54=4?2 _6=4 86H=9P <9: <B97I4 29 234 F9CGHIIE5624 A9=84B H18 2341 29 NR]EKB6GO=H114B/32C=a ?=6?@ 54=4?2 YR61897I[ 9B bG41 YcH?6129I3[ 29 I4=4?2 234 A6=4 29 9G41 7341 234 KB6G O=H114B <;2291 6I ?=6?@48/ K34 A6=4 1HC4 HGG4HBI 61 234 X61@ A64=8 9A 234 OB9G4B2D 61IG4?29B/ d97 D9; 76== H88 H =61@ 29 234 N4I261H2691I 6CHP4 ;I61P 234 OB9G4B2D 61IG4?29B H18 234 5624 761897/ e/ F=6?@ 234 262=4 <HB 9A 234 5624 761897 29 CH@4 62 H?26L4: 9B ?399I4 R61897 S 5624 _6=4I/ f4I6g4 D9;B N9?;C412 761897: 6A 14?4IIHBD: I9 23H2 D9; ?H1 G9I62691 234 =4A2 I684 9A 234 N9?;C412 761897 H18 234 5624 761897 I684 <D I684/ h/ 01 234 N9?;C412 761897: ?=6?@ 234 N4I261H2691I 6CHP4 29 I4=4?2 62/ i/ 01 234 OB9G4B2D 61IG4?29B: ?=6?@ 234 NBHP 29 _6=4 6?91 Y=9?H248 29 234 B6P32 9A 234 X61@ A64=8[: 2341 8BHP 234 G96124B 29 234 5624 761897 H18 61 234 X9?H= _9=84B X6I2: G9612 29 234 A6=4 NR]EN4I261H2691I/32C=/ K34 A6=4 1HC4 HGG4HBI 61 234 X61@ A64=8 61 234 OB9G4B2D 61IG4?29B A9B 234 GB98;?2I 6CHP4/ j/ F=6?@ 234 5624 cHG 6?91 61 234 5624 761897/ K34 I624 CHG P42I ;G8H248 29 B4A=4?2 234 =61@ D9; k;I2 H8848/ .jl

!"#$%&#$'#" ( )*+, -./ ,012 2345 56 728 90*3 02 5:3 ,053 ;7) 02<0=753, 5:75 5:3 90*3 =625702, *02>, 56 65:3? <6=+;325,@ A*0=> 5:3 )*+, ,012 56 34)72< 5:3 ,053 ;7) 56 <0,)*78 5:3 7,,6=0753< 90*3,B =*0=> 5:3 ;02+, -C/ ,012 56 =6**7),3 5:3 ,053 ;7)@ D345E 86+ F0** 7<< 7 *02> 96? 5:3 G?7H3*61, 0;713@ IJ@ K2 5:3 L6=+;325 F02<6FE =*0=> 5:3 G?7H3*61, 0;713 56 ,3*3=5 05@ II@ K2 5:3 M?6)3?58 02,)3=56?E <?71 5:3 M6025C56CN0*3 0=62 56 5:3 O053 F02<6FE 72< )6025 56 5:3 90*3 LPQRG?7H3*61@:5;*@ IS@ A:66,3 N0*3 T O7H3 56 ,7H3 5:3 =:7213, 86+ :7H3 ;7<3 56 5:3 :6;3 )713@ U#VW XYZ" [$\# ]6+ =72265 53,5 86+? *02>, 02 L?37;F37H3?B 86+ ;+,5 =:3=> 86+? *02>, 02 7 ?6F,3? 56 ;7>3 ,+?3 5:3 )713, 6)3?753 7, 86+ 34)3=5@ I@ M?3,, NIS 56 )?3H03F 5:3 )713 02 7 ?6F,3?@ A*0=> 5:3 27H0175062 +5562, 56 =:3=> 86+? *02>,@ A*0=> 86+? ?6F,3?_, 7=> +5562 56 ?35+?2 56 86+? :6;3 )713@ S@ P:32 86+ 7?3 9020,:3< 53,5021 86+? )713E =:66,3 N0*3 T A*6,3 56 =*6,3 5:3 )713@ a#bc XYZ" ["Y\"#VV d I@ P:75 7?3 5:3 <0993?325 <3,012 H03F, 7H70*7*3 02 L?37;F37H3? 72< F:75 0, 37=: H03F +,3< 96?e ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff S@ P:75 <6 86+ ;372 8 g6**6H3? 0;713 72< :6F <6 86+ =?3753 623e ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff hidj kl!mn opqrmsq a#bc XYZ" ["Y\"#VV d I@ 7@ t786+5 u03F v 86+ =72 <3,012 )713 *786+5E 02,3?5 1?7):0=,E 72< 65:3? ;3<07@ @ O572<7?< u03F v 02 7<<05062 56 02,3?5021 1?7):0=, 5345 72< ;3<07E 86+ =72 7*,6 02,3?5 *783?,E =?3753 9?7;3 <6=+;325,E =?3753 57*3,E w 65:3? 6)5062, 265 02 *786+5 H03F S@ ( ?6**6H3? 0;713 0, 72 0;713 F:6,3 <0,)*78 =:7213, F:32 5:3 )60253? )7,,3, -x?6**y/ 6H3? 05@ ( ?6**6H3? 0;713 =62,0,5, 69 5F6 0;713, v 5:3 0;713 <0,)*783< F:32 5:3 )713 90?,5 *67<, 02 5:3 ?6F,3? 72< 5:3 0;713 <0,)*783< F:32 5:3 )60253? ;6H3, 6H3? 5:3 6?01027* 0;713@ G6 =?3753 7 ?6**6H3? 0;713E <6 5:3 96**6F021z { K2 5:3 =6;;62 =75316?8 69 5:3 6|3=5 )723*E K2,3?5 g6**6H3? K;713 K=62@ { A:66,3 K2,3?5 T K253?7=50H3 K;713 T g6**6H3? K;713@ { K2,3?5 5:3 K2,3?5 g6**6H3? K;713 L07*61 64E 58)3 27;3 69 5:3 K;713 02 K;713 D7;3 N03*<@ I}I

!"#$%&$'( )*'(+*(,- . /0 123 45676089 /:873 ;639<= >393?1 123 6:873 14 <6>@98A B230 123 @873 948<>C . /0 123 D4994E35 /:873 ;639<= >393?1 123 /:873 14 <6>@98A B230 123 :4F>3 @460135 6> 4E35 123 45676089 /:873C . G53948< D4994E35 /:873 >24F9< H3 >393?13< 14 948< 123 54994E35 6:873 B230 123 @873 B230 123 @873 6> 60616899A 948<3< 14 8E46< <398A>C . I96?J KL 14 ?94>3 123 <68947 H4MC NOP

5

HTML (Hypertext

Markup Language)

SECTION 1 HTML (HYPERTEXT MARKUP

LANGUAGE)

Structure

1.0 Basics of HTML

1.1 How to Create HTML Document?

1.2 Steps for Creating a Simple HTML Program

1.3 Exercises for Practice in Lab Sessions

1.0 BASICS OF HTML

Web pages or materials in the form of hypermedia documents accessed through the

Internet can be located anywhere in the world.

No matter where they originated, most Web documents are created using Hypertext

Markup Language (HTML). HTML is a powerful authoring language and has

different versions like HTML 4.2, HTML 4.0, HTML 3.2, HTML 3.0 and HTML 2.

HTML is used to define document structure and format, with the help of a single tag

or a pair of tags. A tag is a string in the language surrounded by a less than (<) and a

greater than (>) sign. An opening tag does not begin with a slash (/). An ending or

closing tag is a string that begins with a slash (/).

HTML documents format textual information with embedded markup tags that

provide style and structure information. A whole document in HTML begins with

<HTML> and ends with </HTML>.

1.1 HOW TO CREATE AN HTML DOCUMENT?

An HTML document can be created using any HTML editor or text editor like

notepad etc.

1.2 STEPS FOR CREATING A SIMPLE HTML

PROGRAM

1. Go to Start -> Programs->Accessories->Notepad.

6

Lab Manual 2. Begin with a document type tag and an <HTML> opening tag. Enter the

following line in your doc.

<HTML>

3. Indicate that you are beginning the head element of a document by issuing the

<HEAD> opening tag. If a <HEAD> element is included, it must appear within

an <HTML> element. The following line should appear next in your document:

<HEAD>

4. The <TITLE> element is used to indicate the title of an HTML document.

<TITLE> tags are placed within the head component of a document and the title

is placed between the opening and the closing <TITLE> tags. Add the

following <TITLE> element to your document.

<TITLE>My First Page</TITLE>

5. To end the head area issue a <HEAD> closing tag.

</HEAD>

Thus the <HEAD> element is nested within the <HTML> element.

6. At this point the body of the document is developed. A <BODY> opening tag

indicates that this point has been reached. Enter the following line.

<BODY>

7. In the following example, the body of the document contains a simple text

statement which you can now enter in your file:

Hello World !

8. A </BODY> closing tag marks the end of the <BODY> element. Similar to the

Head element, the <BODY> element is also completely nested within the

<HTML> element. To end the <BODY> element, issue the closing

corresponding tag in your document.

</BODY>

9. Finally, terminate the <HTML> tag with </HTML> as shown below:

10. Save your document as mypage.html

7

HTML (Hypertext

Markup Language)

11. To view the document open the .html document in the browser.

1.3 EXERCISES FOR PRACTICE IN LAB SESSION

SESSION 1

Exercises

1. Write HTML code to develop a Web page having the background in red and

title “My First Page” in any other colour.

2. Create an HTML document giving details of your name, age, telephone number,

address, TLC code & enrolment number aligned in proper order.

3. Write an HTML code to design a page containing text, in form of paragraphs

giving suitable heading style.

SESSION 2

Exercises

1. Create a page to show different attributes of Font tag.

2. Create a page to show different attributes: italics, bold, underline.

3. Design a page having background colour yellow, giving text colour red and

using all the attributes of font tab.

SESSION 3

Exercises

1. Write an HTML code to create a Web page of blue color and display links in

red colour.

2. Write an HTML code to create a Web page that contains an image at its center.

3. Create a Web page with appropriate content and insert an image towards the left

hand side of the page. When user clicks on the image, it should open another

Web page.

8

Lab Manual SESSION 4

Exercises

1. Create a Web page using href attribute of anchor tag & the attribute: alink, vlink

etc.

2. Create a Web page, wherein when the user clicks on the link it should go to the

bottom of the page.

3. Write HTML code to create a Web page of pink colour and display a moving

message in red colour.

SESSION 5

Exercises

1. Create a Web page, showing an ordered list of the names of five of your friends.

2. Create an HTML document containing a nested list showing the content page of

any book

3. Create a web page, showing an unordered list of names of five of your friends.

SESSION 6

Exercises

1. Create a Web page, which should contain a table having two rows and two

columns.

2. Fill in some dummy data in the table created by you in question 1 of this session.

3. Create the following table in HTML with Dummy Data

Time Name of

train

Place Destination Train No.

Arrival Departure

Fair

SESSION 7

Exercises

1. Create the following table

Colour (White)

RED GREEN BLACK

2. Design an HTML Page having 3 images placed in the following format.

Image 3

Image 2

Image 1

(Hint: Table can be used to align images)

9

HTML (Hypertext

Markup Language) 3. Write HTML code to generate the following output:

DELHI MUMBAI Weather

40 35

SESSION 8

Exercises

1. What are HTML Physical style tags and Logical style tags?

2. Which HTML tag allows you to scroll text on the Web page?

3. What is the comment tag in HTML?

4. Design an HTML Page for the “Block Introduction” of this book: The page

should allow scrolling and the code should contain a comment header with your

name and enrolment number.

SESSION 9

Exercises

1. What difference does it make if we express the width of a table in percentage or

in pixel value? And how do we set the width of a particular column or cell in a

table?

2. Write HTML code to generate the following output:

1 2 3 4

5 6

7 Image

8

9 10 11 12

3. Create a Web page that should contain a table having seven rows and four

columns, along with the attributes – colspan & rowspan.

SESSION 10

Exercises

1. What are the different versions of HTML?

2. List 5 different HTML Editors.

3. What is the different image formats?

10

Lab Manual

SECTION 2 ADVANCED HTML

Structure

2.0 Advanced Topics of HTML


2.0 ADVANCED TOPICS OF HTML

HTML is made up of many elements, a lot of which are overlooked. Although you can

develop a Website with the basic knowledge of HTML, to take advantage of many of

the advanced features, and to make pages fully compatible, it is useful to learn some

of the advanced topics of HTML, like:

1. Frames

2. Forms

Frame pages are basically an HTML file which break the browser window up into

separate parts or frames. In each frame a different HTML file can be loaded.

The basic idea of an HTML form is the same as that of a paper form. HTML deals

with forms exactly the same way you would with a paper form. There are groups of

items and single items all gathered together in one large form, like a paper form.


SESSION 1

Exercises

1. How do you handle the situation when the browser doesn’t support frames?

2. What are inline frames?

3. Which tag is used to define frames in HTML?

SESSION 2

Exercises

1. Write an HTML code to develop a Web page having two frames that divide the

Web page into two equal rows.

2. Write an HTML code to develop a Web page having two frames that divide the

Web page into two equal rows and then divide the second row into two equal

columns.

3. Write an HTML code to develop a Web page having frames as described in the

above question and then fill each frame with a different background colour.

SESSION 3

Exercises

1. What are the tags used to display information for browsers that do not support

frames?

2. Write the various attributes of frameset tag and frame tag.

3. Write a code in HTML to design a page with two frames. The frame should

remain proportionate even when page is resized.

11

Advanced HTML SESSION 4

Exercises

1. Write the code to develop a Web page, as shown below, using frames:

2. Write the code to make the background colour of each frame in the above

question different.

3. Create a Web page divided into two equal frames.

SESSION 5

Exercises

1. Create a Web page having two frames, one containing links and the containing

content of the links. When link is clicked, appropriate contents should be

displayed in Frame 2.

2. Create a home page for a TLC in following format:

TLC Information

Links Appropriate Information

3. Create a Web page using all the attributes of the frame and other tags.

SESSION 6

Exercises

1. Design a page with a text box called ‘name’ and a button with label ‘Enter.

When you click on the button another page should open, with the message

“Welcome <name>”, where name should be equal to the name entered in the

first page.

2. What are the values of method attribute of the form tag?

3. Set default value of ‘name’ text box of question 1 of this session to Victoria.

Add another button called Reset on click of this button name ‘text box’ should

be set to 100 default value.

SESSION 7

Exercises

1. Design a form using all input types.

12

Lab Manual 2. Create a simple form accepting: 2. Create a simple form accepting:

Name Name

Enrolment Number Enrolment Number

And Submit button And Submit button

SESSION 8 SESSION 8

Exercises Exercises

1. Design a Web Page, which is like ‘compose’ page of e-mail 1. Design a Web Page, which is like ‘compose’ page of e-mail

To To

Copy Copy

Message: Message:

Send Send

2. Which element is used to accept large text inputs from user? 2. Which element is used to accept large text inputs from user?

3. Write a code to create a Web page having radio buttons labeled as name of

colours. Clicking on each radio button should change the colour of the Web

page.

3. Write a code to create a Web page having radio buttons labeled as name of

colours. Clicking on each radio button should change the colour of the Web

page.

SESSION 9 SESSION 9

Exercises Exercises

1. What is the purpose of hidden field? 1. What is the purpose of hidden field?

2. Create a form accepting the values: 2. Create a form accepting the values:

Name Name

Address Address

Marks in 10 + 2, Graduation & Post Graduation Marks in 10 + 2, Graduation & Post Graduation

3. Which element is used to display a drop down list box? 3. Which element is used to display a drop down list box?

SESSION 10 SESSION 10

Exercises Exercises

1. Design a series of three HTML Pages for ABC. COM each called from the

previous one. Accept Name on the first page. When the user clicks on the enter

button, second page should open. The second page should not display the name

but a ‘Welcome screen with some information about ABC.COM. When the user

will click on the ‘next’ button it should display the name accepted in page 1 on

page 3.

1. Design a series of three HTML Pages for ABC. COM each called from the

previous one. Accept Name on the first page. When the user clicks on the enter

button, second page should open. The second page should not display the name

but a ‘Welcome screen with some information about ABC.COM. When the user

will click on the ‘next’ button it should display the name accepted in page 1 on

page 3.

(Hint: you may use hidden fields) (Hint: you may use hidden fields)

2. Create a Web page; divide that page into two frames. In one frame create two

links that will display different HTML forms in the other frame.

2. Create a Web page; divide that page into two frames. In one frame create two

links that will display different HTML forms in the other frame.

13

JavaScript

SECTION 3 JAVASCRIPT

Structure

3.0 Script Basics

3.1 Incorporating JavaScript into a Web Page

3.2 Exercises for Practice in Lab Sessions.

3.0 JAVASCRIPT BASICS

The World Wide Web (WWW) began as a text-only medium. The first version does

not even have the capability to include graphics on a page.

Today’s Web sites include graphics, sound animation, video and sometimes even

useful content! Web scripting languages, such as JavaScript, are one of the easiest

ways to spice up the Web page and to interact with users in new ways, HTML, unlike

which is a simple text markup language, which can’t respond to the user, make

decisions, or automate repetitive tasks. Web scripting languages allow you to

combine scripting with HTML to create interactive Web pages.

A script in JavaScript can range from a single line to a full-scale application.

JavaScript was developed by Netscape Communications Corporation, the makers of

the popular Netscape Navigator Web browser. JavaScript was the first Web scripting

language to be introduced, and it is by far the most popular. Here are a few things you

can do with JavaScript:

! Add scrolling or changing messages to the browser’s status line.

! Validate the contents of a form and make calculations.

! Display messages to the user, either as part of a Web page or in alert boxes.

! Animate images or create images that change when you move the mouse over

them.

! Detect the browser in use and display different content for different browsers.

! Detect installed plug-ins and notify the user if a plug-in is required.

3.1 INCORPORATING JAVASCRIPT INTO A WEB

PAGE

As you, hopefully, already know, HTML (Hypertext Markup Language) is the

language you use to create Web documents. You must have created “Hello World!”

as given below:

<HTML>

<HEAD><TITLE>My First Page</TITLE></HEAD>

<BODY>

Hello World!

</BODY>

</HTML>

To add JavaScript to a page, you’ll use a similar tag: <SCRIPT>.

The <SCRIPT> tag tells the browser to start treating the text as a script, and the

</SCRIPT> tag returns to the regularly scheduled HTML as given below. Note that

the file will be stored as .html or .htm.

14

Lab Manual

The output of the above program will be

In this example, we placed the script within the body of the HTML document. There

are actually four different places where you can use scripts:

! In the body of the page. In this case, the output of the script is displayed, as part

of the HTML document, when the browser loads the page.

! In the header of the page, between the <HEAD> tags. Scripts in the header

aren’t executed immediately, but can be referred to by other scripts. The header

is often used for functions.

15

JavaScript ! Within an HTML tag. This is called an event handler and allows the script to

work with HTML elements. Event handlers are one type of script where you

don’t need to use the <SCRIPT> tag.

! In a separate file entirely JavaScript supports the use of files with the .js

extension containing scripts; these can be included by specifying a file in the

<SCRIPT> tag. This feature works only in Netscape Navigator 3.0 or later and

Internet Explorer 4.0 or later.


SESSION 1

Exercises

1. How would you write any statement using only one write() or writeln()

command?

2. Embed JavaScript in HTML document asking user’s name and then printing

Hello <User_Name>

3. Create a dialogue box with “Welcome to my Website” message.

SESSION 2

Exercises

1. Evaluate the expression:

a. 7+5

b. “7” + “5”

c. 7 * 5

d. 7/5

e. 7 % 5

2. Write the segment of Script that would ask the user if he wants a greeting

message and if he does, display a Gif file called Welcome .gif and display

“Welcome to Netscape Navigator!” in the document window following the Gif

3. Write the object definition for an object called car with four properties model,

make, year & price.

SESSION 3

Exercises

1. Write a program to display a multiplication table.

2. Write a code to create a scrolling text in a text box.

3. Write a JavaScript code to create a pull down menu box.

SESSION 4

Exercises

1. Write a program to move a text with mouse pointer.

2. Write a program to change colour of text randomly.

16

Lab Manual 3. Create a Web page using two image files, which switch b/w one another as the

mouse pointer moves over the image. Use the On Mouse over and On Mouse

out event handler

SESSION 5

Exercises

1. Write a JavaScript code to accept radius & display the area of the circle.

2. Use the date function get Date & set Date to prompt the user for an integer b/w

1 – 31 & return day of the week it represents.

3. Display time and print message accordingly e.g., ‘Good Morning’ in Morning

etc.

SESSION 6

Exercises

1. Using JavaScript create a digital clock.

SESSION 7

Exercises

1. Using JavaScript create a calculator.

SESSION 8

Exercises

1. Create an HTML form that has a number of text boxes. The user fills the

textboxes with data. Write a script that verifies that all textboxes have been

filled. If a text box has been left empty pop up an alert message indicating the

box that has been left empty. When OK button is clicked, set focus to that

specific textbox. If all the textboxes are filled, display thank you.

SESSION 9

Exercises

1. Create an HTML form that inputs employee details and display the same on the

HTML page.

2. Write a program, which prompts the user to enter a sum of two numbers and

display whether the answer is correct or incorrect.

SESSION 10

Exercises

1. Illustrate how the reset button on form functions.

2. Create a program to check for null or empty string.

SESSION 11

Exercises

1. Create a program to generate a hit counter.

17

JavaScript 2. Create a program to verify whether email address provided by the user is valid

or invalid.

SESSION 12

Exercises

1. Write a program to scroll the text on status bar.

2. Write a program to create a small window in main window.

SESSION 13

Exercises

1. The form consists of two multiple choice lists and one single choice list

a. The first multiple choice list displays the major dishes available.

b. The second multiple choice list displays the stocks available.

c. The single choice list displays the miscellaneous (Milkshakes, soft drinks,

softy etc. available)

SESSION 14

Exercises

1. Create a Web page with two forms, one office copy and one customer copy

when user enters date in customer copy it gets updated in office copy.

SESSION 15

Exercises

1. Use JavaScript for authentication and verification of the textboxes in the static

site developed by the student in the HTML exercise.

18

Lab Manual

SECTION 4 VBSCRIPT

Structure

4.0 VBScript Basics

4.1 Incorporating VBScript into HTML Page


4.0 VBSCRIPT BASICS

VBScript is a powerful and easy to learn tool that can be used to add interaction to

your Web pages.

The Web browser receives scripts along with the rest of the Web document. The

browser parses and processes the scripts. HTML was extended to include a tag that is

used to incorporate scripts into HTML-the <SCRIPT> tag.

4.1 INCORPORATING VBSCRIPT INTO HTML PAGE

To add scripts into your Web pages <SCRIPT> tag is used. The <SCRIPT> tag

signifies the start of the script section, while </SCRIPT> marks the end. An example

of this is shown below:

<HTML>

<HEAD>

<TITLE>Working With VBScript</TITLE>

<SCRIPT LANGUAGE="VBScript">



</SCRIPT>

The LANGUAGE attribute of SCRIPT tag specifies the language used for scripting.

Scripts are usually placed at the top of the Web document, in the HEAD. There are

four different places where you can use scripts:

! In the body of the page. In this case, the output of the script is displayed, as part

of the HTML document, when the browser loads the page.

! In the header of the page, between the <HEAD> tags. Scripts in the header

aren’t executed immediately, but can be referred to by other scripts. The header

is often used for functions-groups of VBScript statements that can be used as a

group.

! Within an HTML tag. This is called an event handler and allows the script to

work with HTML elements. Event handlers are the one type of script where you

don’t need to use the <SCRIPT> tag.

! In a separate file entirely.

Not all browsers support scripting languages. To handle such browsers you can

enclose your script in comment tags ().


SESSION 1

Exercises

1. Write a programme to display the following on a Web page:

19

VBScript Hello <User_Name>

2. Create a Web page that displays a message box with the message:

“Welcome to my Website”

3. Write code to change colour of text randomly.

SESSION 2

Exercises

1. Write a VBScript code that accepts the length, breadth and height and displays

the area of a rectangle.

2. Create a programme to generate a hit counter.

SESSION 3

Exercises

1. Write a programme, which prompts, the user to enter the sum of two numbers

and display whether the answer is correct or incorrect.

2. Using VBScript, create a calculator.

SESSION 4

Exercises

1. Create a programme to check for null or empty string.

2. Create a form that has an e-mail field. Now write VBScript code for validation

of the email address.

SESSION 5

Exercises

1. List the Mouse and Keyboard events in VBScript.

2. How do you generate a random number in VBScript?

SESSION 6

Exercises

1. Create a form in HTML containing the following fields and then perform the

validation of each field using VBScript.

Name - textbox

Address - textbox

Date of Birth - a combo box (one for each, day, month and

year)

Email - textbox

2. How do you declare variables in VBScript and enlist the various variables-

naming rules.

20

Lab Manual SESSION 7

Exercises

1. What is the purpose of Option Explicit in VBScript code?

2. Using an HTML form accept the Principal, Rate of Interest and Time from the

user, validate the three fields and then display the Simple Interest to the user.

SESSION 8

Exercises

1. Create a programme that accepts the time from the system clock and

accordingly displays a Good Morning, Good Afternoon or Good Evening

message to the user. Use If – Then – Else statement.

2. Create the above programme using Select Case.

SESSION 9

Exercises

1. Write a programme in VBScript that uses For..Next looping statement to create

a Fibonacci series.

2. Using Do..While loop display the factorial of a number.

SESSION 10

Exercises

1. Write a programme that displays the multiplication of two matrices.

2. Write a programme that displays the transposition of a matrix.

3. Write a programme that accepts a number from the user and displays its

factorial only if it is a prime number.

Dreamweaver

SECTION 5 DREAMWEAVER

Structure

5.0 How to Work in Dreamweaver?

5.1 How to Save your File?

5.2 Menu

5.3 Adding Layers to the Timeline and Giving Motion to the Layer.

5.4 Inserting Scripts

5.5 Inserting External Media in the Web Page

5.6 Adding SSI (Server-side include to the Page)

5.7 Adding CSS Style to your Page

5.8 Adding XML Files to your Page

5.9 To Export a Dreamweaver Document as XML File

5.10 Exercises for Practice in Lab Sessions.

5.0 HOW TO WORK IN DREAMWEAVER?

Where and how to open Dreamweaver?

Step 1: Click on Start

Step 2: Select Program

Step 3: Select Macromedia Dreamweaver

Step 4: Click on Dreamweaver

You will get the screen as given below:

21

Lab Manual

On opening Dreamweaver you will see 3 main windows, (1) Object; which contains

Character, Common, Forms, Frames, Head and Invisible. Many options are available

under these, like under common where you will get, insertion of image, rollover

image, layer, tabular data, horizontal bar, line break, email link, date, flash movie,

fireworks object, shockwave file, generator, plug-ins, active x controls, SSI etc.

under character in which you will find some special character/symbols like ©, ®, £,

¥, ™ etc; under frames where you will find different type/style of frames; under

forms where you will find all the elements of forms, like text box, password box,

radio button, check box, selection box, jump menu, submit & reset button etc. (2)

Properties; which provides the properties of the selected object/item, page properties

etc; (3) Launcher; which contains: Site, Library, HTML Style, CSS Style,

Behaviours, History, HTML Source; On clicking any of the items on the Launcher

the subsequent window opens up.

Before creating your Web page you have to create a Root directory in which all of

your work will be saved. Then in Dreamweaver create a Site and Provide the Root

Directory (which you have created). To do this:

Step 1: Select Site from Launcher window

Step 2: Click on Define Site

Step 3: Click on NEW

Step 4: Give a name under “Site Name”

Step 5: Select the folder by browsing under “Local root folder”

Step 6: Click on OK

Step 7: Click on DONE

Now start working on Dreamweaver

Write your text, format the text, insert picture through Object window or by INSERT

-> IMAGE. The Insert Menu provides you all the features available under the Object

window. The modify menu provides you scope to modify the selection properties,

page properties, link, table, frames etc. The Text menu helps to do all the formatting

for the text, like selecting font, font-size, colour, alignment etc.

5.1 HOW TO SAVE YOUR FILE?

Step 1: Click on FILE

Step 2: Click on SAVE

Step 3: Choose the folder in which you want to save

Step 4: Provide a name to the file (with .htm / .html extension)

Step 5: Click on SAVE

5.2 MENU

File Menu: Under it we have New, Save, Save as, Save as template, Import, Export,

Preview in browser etc. options.

Edit Menu: In this menu we have Cut, Copy, Paste, Undo, Redo, Select all, Find,

Replace, Preference etc. options which help us in editing the document.

View Menu: Rulers, Grids, Plugins etc. are available under this.

Insert Menu: It contains almost all the things, which are there, in the Object tool bar.

Modify Menu: Under this we have Page properties, selection properties, Make link,

remove link, link target, table, layer, frameset, library, template, timeline, translate

etc. This menu helps to modify the page by choosing the option as per requirement.

Text Menu: It helps to format the text written in the page by providing details, such

as indent, outdent, list (ol, ul, dl), alignment, font, style, size, size increase, size

22

Dreamweaver

decrease, HTML style, CSS style, colour etc. It also provides the facility to check the

spellings in the page.

Site Menu: This menu contains site files, site map, new site, open site, define site

options.

Window Menu: It contains all the different windows, like object, properties,

launcher, site file, site map, CSS, timeline, history, behaviour, layer, frame, library,

template etc.

5.3 ADDING LAYERS TO THE TIMELINE AND GIVING

MOTION TO THE LAYER

Step 1: Choose Layer from Common toolbar and draw a layer.

Step 2: Write the text inside the Layer.

Step 3: Click on Modify (when the layer is selected)

Step 4: Click on Timeline

Step 5: Click on Add layer to timeline.

Step 6: Modify -> Timeline -> Select Record path to Layer

Step 7: Drag the layer as per your wish, to define a path.

Step 8: Tick on Auto Play & Loop (if required)

Step 9: Open it in the Browser to see the effect.

5.4 INSERTING SCRIPTS

Step 1: Click on Insert

Step 2: Click on Script

Step 3: Choose the type of Script

Step 4: Write the code in “Content”

Step 5: To finish, click on OK

5.5 INSERTING EXTERNAL MEDIA IN THE WEB PAGE

Step 1: Click on the icon in the object tool bar

Or

Insert -> Media -> Choose the media type to be inserted

Step 2: Find and select the file required (browse)

Step 3: Click on OK

5.6 ADDING SSI (SERVER-SIDE INCLUDE) TO THE

PAGE

Step 1: Click on the icon in the object tool bar

Or

Insert -> SSI

Step 2: Select the file

Step 3: Add the file

Step 4: Provide the URL (where to be attached)

Step 5: Provide information on Relative to the document or to the “Site Root”

Step 6: Click on OK.

To Show/Hide The SSI Document In The Page

Step 1: Click on Edit

Step 2: Select reference

23

Lab Manual

Step 3: Select Translation

Step 4: Click on SSI

Step 5: For showing the SSI file; choose one of the following options:

a) in all files

b) in no files

c) in files with extension (stm, htm, html, shtm, shtml)

d) in files matching one of these expressions “

Step 6: Click on OK

5.7 ADDING CSS STYLE TO YOUR PAGE

Step 1: Click on Window Menu

Step 2: Select CSS Styles

Or Click on CSS Styles in the “Launcher”

Step 3: Click on New to create a new CSS style

Step 4: Choose the Type

a) Make custom style

b) Redefine HTML

c) Use CSS Selection

Step 5: Give a name

Step 6: Click OK

On choosing (a) of step 4 you will get a new screen in which you have to provide the

following details in Category:

i. Type: Provide the Font, Size, Style, Weight, Decoration, then click OK

ii. Background: provide a Colour or insert an image, then click OK

iii. Block: Give the alignment style, then click OK

iv. Box: Provide the margin setup of Top, Left, Right & Bottom, then click OK

v. Border: Provide the width & colour, then click OK

vi. List: Select the list type (OL, UL, DL), then click OK

vii. Positioning: Provide the style, Visibility, Z-index, Placement (Top, Left, Right

& Bottom), click OK.

After providing the details, select the style from the CSS style window. Choose

where to apply this style (body, p, layer etc.), by clicking on Apply button in the CSS

style window.

5.8 ADDING XML FILES TO YOUR PAGE

Step 1: Choose File -> Import XML into Template

Step 2: Select the XML file & click Open

When an XML file is imported, Dreamweaver merges the XML content into the

Template, which is being specified in the XML file and shows the result in the

document window of Dreamweaver. If that specified Template is not found, then

Dreamweaver prompts you to select another Template for use.

The XML file should contain the name of the Template and editable region as XML

tags.

Example:

<doctitle>

<![CDATA[<title>newTemplate</title>]]>

</doctitle>

<Edit-Region>

24

Dreamweaver

<![CDATA[{Edit-Region}]]>

</Edit-Region>

Here doctitle identifies the title of the Template and edit-region identifies the editable

region.

But in a standard Dreamweaver file XML tags use the “item name”. The above

example (XML tags) is given below in standard Dreamweaver file:

<item name="doctitle">

<![CDATA[ <title>newTemplate</title>]]>

</item>

<item name="Edit-Region">

<![CDATA[{Edit-Region}]]></item>

</item>

Here “item name=doctitle” identifies the title of the Template and “item name=edit

region” identifies the editable region.

5.9 TO EXPORT A DREAMWEAVER DOCUMENT AS

XML FILE

Step 1: Choose File -> Open,

Step 2: Select the document that uses a template (and has editable regions)

Step 3: Click Open

Step 4: Choose File -> Export -> Export Editable Regions as XML.

Step 5: In the XML dialog box, choose a tag notation

Step 6: Click OK.

Step 7: Enter a name for the XML file

Step 8: Click Save.

When the document is exported, the generated XML file contains the name of the

Template the document is using and all editable region names.

5.10 EXERCISES FOR PRACTICE IN LAB SESSIONS

SESSION 1

Exercises

1. Design a Home page of your TLC.

2. Design a Home page for a Toy Company. The page has an image as the

background. Do some attractive text formatting to the text written in the page.

3. Insert an image in your page. Give a zigzag motion to the image in your page.

(Hint: Using timeline)

SESSION 2

Exercises

1. Insert an image in a page. In the browser, when you take cursor over it, another

image emerges under it and when you click on the second image, it takes you

to exercise 2 of session 1.

2. Design a Web page which contains details about your TLC. Give links to a few

options. Also make a link “Mail Us”. On clicking this, it will open the

compose box for mailing to “[email protected]”.

25

Lab Manual

SESSION 3

Exercises

1. Show the course contents of HND in a table.

2. Design the table as given below and enter some data:

Table 1 Table 2 Table 3

Name Age Phno. Name Address Name M-1 M-2 Total

Personal Table Address Table Marks Table

3. Include .css file to one of your Web page created earlier.

SESSION 4

Exercises

1. Design a form as shown below:

2. a. Include an SSI file in your document. Show the SSI file in this document.

b. Include an SSI file in your document. Don’t show the SSI file in this

document.

SESSION 5

Exercises

1. Show the course contents of HND in a table using XML and not HTML.

2. Create a Website that has a questionnaire (any), on submitting, it displays the

inputted data on the other page. You are supposed to use CSS and SSI

(wherever necessary).

26

Dreamweaver

SESSION 6

Exercises

1. Create a website that divides the Web page into two unequal frames. In Frame

One, there are two links to two different forms. The forms are validated on

submitting and the result is shown at the bottom of the same page. Use CSS for

formatting.

2. Design the homepage for IGNOU BIT using XML.

3. Write “Indira Gandhi National Open University”, “Bachelor of

Information Technology”, “Name of your TLC”, “Your Name” and “Your

Enrollment Number” in a Web page. The above written text will overlap each

other. The texts written have different coloured backgrounds. (Hint: Use Z-

index)

SESSION 7

Exercises

1. Design a form, which has a list menu. On selecting any item from that menu it

jumps to the related page. Insert a “GO” button alongside the list menu.

2. Using CSS, remake the Website given in Question 2 of Session 1.

SESSION 8

Exercises

1. Make a Web page to include:

1) a background image,

2) set the text colour to blue,

3) make 2 logos, link them to the IGNOU home page,

4) set the colour of all other text links black. (Use Hexadecimal

colour values rather than named colours).

Use Cascading Style Sheets to develop the above Web page

2. Explain the effect of the following HTML Code:

<html>

<head>

<title> Question 2: Session 8</title>

</head>

<body marginwidth="0" marginheigth ="0" topmargin ="0" leftmargin ="0">

<table>

<tr>

<td bgcolor ="#6BA2CC" >

<img src ="image_1.gif">

</td>

<td bgColor ="#6BA2CC" width ='500'> <center>

<b>THE TITLE OF THE WEBSITE </b></center>

</td>

<td bgcolor ="#6BA2CC" align ="right" width ='230' valign ='top'>

<a href="index.asp" style="color:'#134A81'">Home</a> |

<a href="contact_us.asp" style="color:'#134A81'">Contact Us</a> |

<a href="feedback.asp" style="color:'#134A81'">Feedback</a>

<a href="help.asp" style="color:'#134A81'">Help</a>

<input type="text" size ="16" class ="input_box">

<input type="button" value="Search" class ="button">

</td>

</tr>

27

Lab Manual

</table>

<table>

<tr>

<td>

<input type="Button" value="Home">

<input type="Button" value="Contact Us">

<input type="Button" value="Feedback">

<input type="Button" value="Email">

<input type="Button" value="Help">

</td>

</tr>

</table>

</body>

</html>

3. In the above question use gif images instead of buttons.

SESSION 9

Exercises

1. Develop a Web page with the following enhancements:

! A rollover effect, where an image changes if the user places the mouse

over it.

! An animation that occurs in response to the user clicking on an image.

! A pull-down menu with each option linking to a specific page.

2. Design a Web page. Integrate images, audio, video and animation all in one

page.

3. Develop the Question 1: Session 8 using XML

SESSION 10

Exercises

1. Design a website about yourself (minimum 5-7 pages).

2. Design the home page using Frames. The top frame will contain a Flash

animation file (showing pictures of you from childhood to till date), the left

frame will contain all the links and the right page will contain “Welcome to

My Home Page”. When clicked on the links the related page will open in the

right frame.

28

Date post:	13-Jul-2020
Category:	Documents
Upload:	others
View:	4 times
Download:	0 times

UNIT 1 THE INTERNET · 1.13 SUMMARY This unit describes the basic concepts about an Internet....

Documents