internet and web technology b.e. 6th sem i.t

Internet and WebTechnology Page No:1/206

Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg

Cell: 9229594625, e-mail: [email protected]

Introduction:

• Internet is world wide collection of computer network

• It provides access to communication services and access to information resources to the

millions of users around the globe

• Internet covers globe and include large international network as well as many smaller

local area networks owned by any individual company or country

• M/C or computer on one network can communicate with M/C or computer on other

network and send data file and other information back and forth, for this work M/C on

network must have to agree to speak same language

Internet Services/Applications

• Remote login (TELNET)

• File transfer (FTP)

• Electronic mail (Email)

• News (USENET or network news)

• Hypertext (www)

• Terminal Services

• To receive and send emails

• Read and post article in newsgroup

• Download files to your PC

• Chat with online users

• Access online multimedia

• Search the net for information

• Contribute the articles and other materials

• Do online shopping

Evolution of Internet: In late 1960 US Department of defence started packet switched network ARPANET (Advanced

Research Project Agency) or WAN now known as DARPA (Defence Advanced Research Project




Agency) basic idea was to connect different geographical areas network and allows the

transmission in the form of packets

Challenges faced by ARPA is related with

• Interconnectivity: It deals with transportation of information and for this software protocol

is needed that could package and route the information between multiple site and for this

internet protocol is evolved ie TCP/IP

• Interpretability deals with application-to-application communication, its

challengeous because applications are running vastly on different hardware

platform with different operating system & different file systems. Solution for this

is to develop standard application protocol that would enable application to

application communication and be independent of computer platform e.g.

mainframe based email program and PC based email program both are using same

standard

Evolution of WWW

WWW is huge collection of hypertext pages on the Internet the concept WWW is developed in

Switzerland by European laboratory for particle physics (known CERN) in the year 1989 . The first

text-based prototype was operational in 1991. In the month of December 1991 a public

demonstration was given at Hypertext 91 conference in San Antonio, Texas (USA). In the year

1993, the first graphical interface software package called Mosaic was released

Internet Protocols:

TCP/IP is The Internet Communication Protocol

A communication protocol is a description of the rules computers must follow to communicate with

each other. The Internet communication protocol defines the rules for computer communication

over the Internet.

Your Browser and Your Server Use TCP/IP




Internet browsers and Internet servers use TCP/IP to connect to the Internet. Your browser uses

TCP/IP to access Internet servers, and servers use TCP/IP to send HTML back to your browser.

Your E-Mail Uses TCP/IP

Your e-mail program uses TCP/IP to connect to the Internet for sending and receiving e-mails.

Your Internet Address is TCP/IP

Your Internet address "203.190.144.92" is a part of the standard TCP/IP protocol. (And so is your

domain name "www.someonesplace.com")

TCP/IP is the communication protocol for the Intern et.

Computer Communication Protocol

A computer communication protocol is a description of the rules computers must follow to

communicate with each other.

What is TCP/IP?

TCP/IP is the communication protocol for communication between computers connected to the

Internet.

TCP/IP stands for Transmission Control Protocol / Internet Protocol.

The standard defines how electronic devices (like computers) should be connected to the

Internet, and how data should be transmitted between them.

Inside TCP/IP

Hiding inside the TCP/IP standard there are a number of protocols for handling data

communication:

� TCP (Transmission Control Protocol) communication between applications

� UDP (User Datagram Protocol) simple communication between applications

� IP (Internet Protocol) communication between computers

� ICMP (Internet Control Message Protocol) for errors and statistics

� DHCP (Dynamic Host Configuration Protocol) for dynamic addressing




TCP Uses a Fixed Connection

TCP is for communication between applications.

When an application wants to communicate with another application via TCP, it sends a

communication request. This request must be sent to an exact address. After a "handshake"

between the two applications, TCP will setup a "full-duplex" communication between the two

applications.

The "full-duplex" communication will occupy the communication line between the two computers

until it is closed by one of the two applications.

UDP is very similar to TCP, but is more simple and less reliable.

IP is Connection-Less

IP is for communication between computers.

IP is a "connection-less" communication protocol. It does not occupy the communication line

between two communicating computers. This way IP reduces the need for network lines. Each

line can be used for communication between many different computers at the same time.

With IP, messages (or other data) are broken up into small independent "packets" and sent

between computers via the Internet.

IP is responsible for "routing" each packet to its destination.

IP Routers

When an IP packet is sent from a computer, it arrives at an IP router.

The IP router is responsible for "routing" the packet to its destination, directly or via another router.

The path the packet will follow might be different from other packets of the same communication.

The router is responsible for the right addressing depending on traffic volume, errors in the

network, or other parameters.

Connection-Less Analogy




Communicating via IP is like sending a long letter as a large number of small postcards,

each finding its own (often different) way to the receiver.

TCP/IP

TCP/IP is TCP and IP working together.

TCP takes care of the communication between your application software (i.e. your browser) and

your network software.

IP takes care of the communication with other computers.

TCP is responsible for breaking data down into IP packets before they are sent, and for

assembling the packets when they arrive.

IP is responsible for sending the packets to the receiver.

In brief TCP/IP(Transmission Control protocol / Internet protocol): TCP/IP is referred as an

backbone of the Internet. Its responsible for connecting the different networks apart from their

hardware and software differences since TCP/IP protocol can work with any Hardware or

operating system.

TCP/IP model has only one mode in network layer (i.e. connection less) but supports both

modes in transport layer.




TCP/IP does not distinguish physical and data link layer as in the case of OSI model

Layer 1: Host –To –Host: Totally deals with physical cables connectors & NIC’s and

responsible for establishing the physical connection, transmission is done in terms of bits.

Layer 2: Internet Layer : Internet layer is responsible for routing the packets and providing

single network interface to upper layer carious protocols falling under this layer are:

IP (Internet Protocol)

IP – provides the basic mechanism for forwarding the data between two computer, IP is

low level protocol that routes data packet, data travels in the form of packets called as IP-

Datagram

Services:

IP is responsible for addressing and fragmentation to support packet forwarding

Limitations: Doesn’t guarantee that a packet will reach to its destination

Unable to control the flow of transmission

Error correction and detection is not possible

Sequencing of packet is not guaranteed

a. ARP(Address Resolution Protocol)

As name indicates its responsible for address resolution, i.e. when IP has a packet to

transfer its already having the address of destination computer given by upper layer .

ARP associates IP address with physical address and is used to find to physical

address of node when its IP Address is known

b. RARP( Reverse Address Resolution Protocol)

Allows host to discover its IP address from MAC address .When IP m/c is diskless

there is no way to know IP address initially but its MAC address is available RARP

sends its MAC address to server and find out its IP address

c. Bootp




When diskless workstation is powered on it broadcasts bootp request on network

bootp server listens/accept request and lookup clients MAC address in its bootp file in

response it gives IP address and file that it should boot from

d. ICMP (Internet control message protocol)

Is mechanism used by host and routers to send notification of datagram problems back to the sender, as we know IP is unreliable connectionless protocol ICMP however allows IP to inform sender if datagram is undelivered

e. IGMP (Internet group messaging protocol)

IP protocol is involved in two types of communication unicasting and multicasting, Unicasting is one to one communication, however some process sometimes need to send same message to large number Of receivers this is called multicasting

Transport Layer : Deals with the transportation of data packets using TCP or UDP Application Layer : Responsible for performing FTP and Telnet operations UDP (User Datagram Protocol): It’s an connectionless protocol, its having thin layer or

wrapper around IP (Internet Protocol) it provides datagram services (a connectionless /

unreliable service) it uses the services of IP to do actual work

It adds following functionalities to IP Provides multiplexing and demultiplexing through UDP port so that multiple applications on

client or server have their own stream of datagram

Provides means of checksum to verify the validity of datagram’s received UDP is less reliable but faster as compare to TCP/IP so if speed is preferable over reliability

then UDP is use

Datagram / Packet

|------------16 bit -------------| ------------16 bit -------------|

Datagram is basic unit of data transmission across the networks, it contains the header and

data, Header describes destination of data and its relation with other datagram

URL (Uniform Resource Locator): E.g. http://www.yahoo.com

Source Port Destination Port

Length Checksum




• URL is a web address it consist of protocol a host name, a port (optional) a directory

and filename URL’s can be used to address other internet resources

• First component of URL identifies type of resources for web resource identifier and

it’s http

• Colon separated protocol from the rest of URL

• // Two slashes indicates name followed by hostname

• Port no for http is 80 its optional

• Path of html file name is optional when we connect with the site default web page is

displayed

Addressing in Internet ( IP):

IP Addresses

Each computer must have an IP address before it can connect to the Internet.

Each IP packet must have an address before it can be sent to another computer.

This is an IP address: 192.68.20.50.

An IP Address Contains 4 Numbers.

This is your IP address: 203.190.144.92. TCP/IP uses 4 numbers to address a computer. Each

computer must have a unique 4 number address.

The numbers are always between 0 and 255. Addresses are normally written as four numbers

separated by a period like this: 192.168.1.50.

32 Bits = 4 Bytes

TCP/IP uses 32 bits addressing. One computer byte is 8 bits. So TCP/IP uses 4 computer bytes.

A computer byte can contain 256 different values:

00000000, 00000001, 00000010, 00000011, 00000100, 00000101, 00000110, 00000111,

00001000 .......and all the way up to 11111111.

Now you know why a TCP/IP address is 4 numbers between 0 and 255




An IP address is numeric identifier assigned to eac h machine on an IP network

Class Range Maximum Nodes to be addressed

A 1-127 16,777,214 ie 224 B 128-191 65534 ie 216 C 192-223 254 ie 28

Class A : First byte is assigned for network and remaining three for nodes

network.node.node.node

Class A network is having three bytes ie 24 positions to identify the nodes means its

having 224 unique combinations

Class B: First two bytes are assigned for network and remaining two are for the node in form of

maximum node addressing capability is 216

network.network.node.node

Class C: First three bytes are assigned for network and remaining two are for the node in form of

maximum node addressing capability is 28

network.network.network.node

TCP/IP uses 32 bits, or 4 numbers between 0 and 255 to address a computer.

Domain Names

12 digit numbers are hard to remember. Using a name is easier.

Names used for TCP/IP addresses are called domain names. bitdurg.org is a domain name.

When you address a web site like http://www.bitdurg.org the name is translated to a number by a

DNS process (Domain Name Server).

All over the world, a large number of DNS servers are connected to the Internet. DNS servers are

responsible for translating domain names into TCP/IP addresses and update each other with new

domain names.

When a new domain name is registered together with a TCP/IP address, DNS servers all over the

world are updated with this information.

TCP/IP is a large collection of different communica tion protocols.




A Family of Protocols

TCP/IP is a large collection of different communication protocols based upon the two original

protocols TCP and IP.

TCP - Transmission Control Protocol

The TCP protocol is used for the transmission of data from an application to the network.

TCP is responsible for breaking data down into IP packets before they are sent, and for

assembling the packets when they arrive.

IP - Internet Protocol

The IP protocol takes care of the communication with other computers.

IP is responsible for the sending and receiving data packets over the Internet.

HTTP - Hyper Text Transfer Protocol

The HTTP protocol takes care of the communication between a web server and a web browser.

The HTTP protocol is used for sending requests from a web client (a browser) to a web server

returning web content (web pages) from the server back to the client.

Hypertext transfer protocol handles hypertext document and controls the connection between web

browsers and web servers

• Connection

• Request

• Response

• Close

HTTPS - Secure HTTP

Another protocol for transferring data securely over WWW is S-HTTP Its an extended version of

HTTP and provides encrypted logon authentications and session transmission between client and

server,

The HTTPS protocol takes care of secure communication between a web server and a web

browser.




The HTTPS protocol typically handles credit card transactions and other sensitive data.

SSL - Secure Sockets Layer

The SSL protocol is used for encryption of data for secure data transmission

Secure socket layer is protocol developed by Netscape for transmitting private documents via the

Internet . SSL work by using public key to encrypt the data that’s transferred over the SSL

connection . Both browsers ie Netscape navigator and Internet explorer support SSL, and many

websites use the protocol to obtain confidential user information , such as credit card numbers, By

convention, URL’s require an SSL connection start with https: instead of http:

SSL creates a secure connection between client and server , over which any amount of

data is send securely , but S-HTTP is designed transmit individual messages securely. So SSL

and S-HTTP can be seen as complementary rather than competing technologies. The Internet

Engineering task force(IETF) has approved both protocols as a standard

SMTP - Simple Mail Transfer Protocol

The SMTP protocol is used for the transmission of e-mails.

MIME - Multi-purpose Internet Mail Extensions

The MIME protocol lets SMTP transmit multimedia files including voice, audio, and binary data

across TCP/IP networks.

IMAP - Internet Message Access Protocol

The IMAP protocol is used for storing and retrieving e-mails.

POP - Post Office Protocol

The POP protocol is used for downloading e-mails from an e-mail server to a personal computer.

FTP - File Transfer Protocol

The FTP protocol takes care of the transmission of files between computers.

NTP - Network Time Protocol

The NTP protocol is used for synchronizing the time (the clock) between computers.

DHCP - Dynamic Host Configuration Protocol




The DHCP protocol is used for allocation of dynamic IP addresses to computers in a network.

SNMP - Simple Network Management Protocol

The SNMP protocol is used for the administration of computer networks.

LDAP - Lightweight Directory Access Protocol

The LDAP protocol is used for collecting information about users and e-mail addresses from the

Internet.

ICMP - Internet Control Message Protocol

The ICMP protocol takes care of error handling in the network.

ARP - Address Resolution Protocol

The ARP protocol is used by IP to find the hardware address of a computer network card based

on the IP address.

RARP - Reverse Address Resolution Protocol

The RARP protocol is used by IP to find the IP address based on the hardware address of a

computer network card.

BOOTP - Boot Protocol

The BOOTP protocol is used for booting (starting) computers from the network.

PPTP - Point to Point Tunneling Protocol

The PPTP protocol is used for setting up a connection (tunnel) between private networks.

Email is one of the most important users of TCP/IP.

You Don't

When you write an email, you don't use TCP/IP.

When you write an email, you use an email program like Lotus Notes, Microsoft Outlook or

Netscape Communicator.

Your Email Program Does

Your email program uses different TCP/IP protocols:

� It sends your emails using SMTP




� It can download your emails from an email server using POP

� It can connect to an email server using IMAP

SMTP - Simple Mail Transfer Protocol

The SMTP protocol is used for the transmission of e-mails. SMTP takes care of sending your

email to another computer.

Normally your email is sent to an email server (SMTP server), and then to another server or

servers, and finally to its destination.

SMTP can only transmit pure text. It cannot transmit binary data like pictures, sounds or movies.

SMTP uses the MIME protocol to send binary data across TCP/IP networks. The MIME protocol

converts binary data to pure text.

POP - Post Office Protocol

The POP protocol is used by email programs (like Microsoft Outlook) to retrieve emails from an

email server.

If your email program uses POP, all your emails are downloaded to your email program (also

called email client), each time it connects to your email server.

IMAP - Internet Message Access Protocol

The IMAP protocol is used by email programs (like Microsoft Outlook) just like the POP protocol.

The main difference between the IMAP protocol and the POP protocol is that the IMAP protocol

will not automatically download all your emails each time your email program connects to your

email server.

The IMAP protocol allows you to see through your email messages at the email server before you

download them. With IMAP you can choose to download your messages or just delete them. This

way IMAP is perfect if you need to connect to your email server from different locations, but only

want to download your messages when you are back in your office.




URL / Hyperlink Processing

Fig: URL/Hyperlink Processing Steps in Details When user types URL it’s converted into Internet address. Browser creates a query for the

DNS server and submits it on Internet. Query is sent to the nearest DNS server for address

resolution, if server doesn’t know the query is diverted to other DNS server in upper hierarchy

once it found IP address is diverted towards the browser and during this looking for host

address message is displayed on the status bar of the browser

Now the browser is having IP address that can be used to get connected with concerned

server (For this appropriate request is diverted by browser)

After server get request from client HTML information is packed by TCP in IP packets and

sent over the connection

Internet Service Provider (ISP):

ISP is having high-speed connection with the Internet backbone network and they would

provide lower speed access to the number of users scattered in the city

ISP also provides value added services like e-mail web pages with local contents, you can

connect to ISP via modem, ISDN and ISP routes your TCP/IP packets to and from the

Internet

Getting Connected with Internet:

Client

DNS Server

Filtering Server

Remote Host

Domain (Server)

5. Response to OK Connection

6. Request for webpage

Satisfy response

1. R

eq. t

o IP

eso

lutio

n 2. Return IP A

ddress




There are several ways of connecting with net more expensive service provides more

features, more flexibility and more data transfer capability Selection of type of Internet Connectivity and provider is totally based on users need To get done connectivity we must have to register an account with ISP (e.g . BSNL, SATYAM

etc)

Following are the major two steps that are involved in getting connected with net a) To get a modem approved by DOT (Deptt. Of Telecom)

b) Contact ISP’s customer center in city to complete the formalities related with connectivity

Types Of Connectivity: There are several ways to connect the Internet. The more expensive services provide more

features, more flexibility, and greater data transfer capacity. Large companies choose

dedicated Internet access or LAN dial-up, smaller organizations are happy with dial up access

and terminal; emulation

Dial up/Terminal emulation: This is the cheapest way of getting connected with Internet. Need of such type of connectivity

is computer with modem attach to phone Line, and a package from ISP.

When your PC dials-up your computer runs a terminal emulation program to communicate

with service provider’s server and you say the host computer to go out onto the Internet to do

what you want to be done

Note: Terminal computer or PC uses terminal emulation software to communicate with ISP’s

server instead of using TCP/IP protocol

Fig: Dial up / Terminal Emulation Account

Host

Computer

BSNL

Internet Host

IP Router

Team Server

Gateway Internet Access System

PSTN Dialup

Terminal or PC with




The Internet host Computer or ISP uses TCP/IP protocol to communicate with the rest of the

network

Shell Account :( Client is connected with GIAS syst em of Country)

In case of shell account client /web host is directly attached with the Gateway Internet access

System instead of getting connected with ISP as shown above hence the major advantage of

such type of connectivity is that user is able to access all the facilities of services available at

GIAS system of a particular country

Limitation: Primarily limited to text based services

Web Host

BSNL

Internet Host

Router

Router

BSNL GIAS

ISP




Fig : Pictorial Representation of Shell Account in which Client connected to GIAS

VSAT (Very small aperture terminal) Links:

It can be described as very intelligent earth station connected to geosynchronous satellite suitable

for supporting variety of two-way telecommunication and information services such as voice data

and video

• Uplink data rate is 19.4 kbps and downlink data rate is 512 kbps

• All terminals are having 1M antenna and it consumes around 1 W power as shown in

fig.

These micro stations are not having enough power to communicate with each other directly.

Instead of this a special ground station a hub with large antenna is needed to relay the traffic

between VSAT and its nothing but the hub and is the center of all activities during communication

it carries health check up of all VSAT locations and also it carries out the billing related operations

VSAT or Very Small Aperture Terminals are small, software-driven earth stations (typically 0.9-2.4

meters, which equates to 3-8 feet, though larger units are available) used for the reliable

transmission of data, video, or voice via satellite. It requires no staff or additional technology to

operate it. It simply plugs into existing terminal equipment

Reliable Communications

VSAT satellite communications provide virtually error-free digital data

communications and better than 99.9% network reliability.

Remote Communications

No matter how remote or dispersed your operations are, VSATs

provide a link to your headquarters. VSAT can provide remote




diagnostics, remote monitoring, and data streaming services from remote or hazardous sites.

IP Based Wan Network Services

• E-Mail Service

• Interface with Telephone PBX

• Mobile VSAT Communications System

• Data and Voice Connectivity

• Fax

• Video • Installation, Moving And Set-up Services • Broadcast Services • Contract Installation and Service on VSAT Networks • Real-Time Data Acquisition and Broadcast • 7/24 Hour Service and Support • Lease-Line, Backhaul Support • CDMS (Code Division Multiple Access) Technology • SCPC (Single Carrier Per Channel) Technology • TDMA (Time-Division Multiple Access) Technology

• Multiple Network Configurations

VSAT services are delivered through the use of either C-Band or KU-Band geostationary

satellites for video, voice, fax and data transmissions. VSATs use a star network with the use of

satellite earth stations that rely on a large central hub. Alternatively the use of mesh (hubless)

VSAT networks can provide communication between VSAT terminals directly. They can be

configured in both one-way (receive only) and two-way (interactive) VSAT terminals. Most VSAT

terminals utilize satellite dishes in the 1 to 2.4 meter range, though both smaller and larger dish

configurations are available. The selection of satellite, terminal size and configuration is based on

the specific requirements of the applications for which VSAT will be utilized. H.M.S.

Communications, Inc. can provide the specific solution to your specific communication needs,

through our large array of products, services and provider network. Contact H.M.S.

Communications to learn more.

VSAT is growth compatible, VSAT allows the user to make incremental increases in its network.

The use of VSAT provides the ability to expand capacity and system growth, while maintaining a

handle on costs which are closely associated with the increase in capacity or system growth. The

VSAT network is highly manageable, and allows many options in planning the network with




regards to bandwidth, services and protocols. VSAT can provide a seamless means of

integrating your Wide Area Network (WAN) across the country, or across the world.

Fig: VSAT Communication ISDN Connections:

ISDN is the abbreviation of integrated services Digital Network , an international communications

standard for sending voice, video and data over digital telephone lines or normal telephone wires.

ISDN supports data transfer rates of 64 kbps(64000 bits per second) Typically an ISDN

connection has some Bearer-channels(B-channel), which are the main data channel and some

Delta channel (D-channel), the channel that carries control and signaling information

A completely digit, circuit-switched phone system. Integrates voice and non-voice services. ISDN

allows integration of computers and voice. It means that caller ID can be used to look up your

account on the computer so that by the time a human answers the phone, a screen has your

information already available




ISDN SYSTEM ARCHITECTURE: ISDN uses TDM to handle multiple channels. See Figure on previous page. For home use, the

NT1 (Network Terminator) connects the twisted pair going to the phone company with the house

wiring. Various ISDN devices can be connected to this NT1.

Businesses may have more channels active than the home configuration internal bus can handle.

So a PBX (Private Branch exchange) is used to provide the internal bus containing more

switching capacity. This in turn is connected to NT1.

THE ISDN INTERFACE: Typically a number of channels are combined together. In the USA,

Primary Rate ISDN contains 23 channels (each 64 kbps carrying voice or data) + 1 channel for

signaling and control (16 kbps digital channel.) In Europe, instead of 23 channels, 30 are used.

The primary Rate is designed to connect to a business with a PBX. As it turns out, most

companies now need far more capacity than 64 kbps for the many uses beyond voice. So this is

less than adequate.

N-ISDN may have a life as a connection to homes for people wanting to download images etc.

But it's not useful for serious business applications.

There are two types of ISDN as shown in given table

Type of ISDN No. Of B-Channel No of D-Channel Basic rate 2 1 Primary rate ISDN in USA 23 1 Primary rate ISDN in Europe 30 1




• Basic rate (BRI) ISDN that consist of two 64-kbps B-channels and D-channel for

transmitting control information

• Primary Rate ISDN In the United States of America and a few other countries this

type of ISDN consist of 23 B-channels and one D-channel. In Europe these have 30

B-channels and one D-channel

The original version of ISDN employs base band transmission. Another version called B –ISDN,

uses broadband transmission and is able to support transmission rates of 1.5 MBPS. B-ISDN

requires fiber optics cables and is not widely available at present

DSL (Digital Subscriber Lines) Connections

DSL is acronym for Digital subscriber lines. DSL technologies use sophisticated modulation

schemes to pack data onto copper wires they are sometimes referred to as last-mile technologies

because they are used only for connection from telephone switching station to a home or office,

not between switching stations. DSL is similar to ISDN in as much as both operate over existing

telephone line and both are require the short runs to central telephone office (usually less than

20,000 feet). However, DSL offer much higher speeds – up to 32mbps for upstream traffic (client

to server), and 32 kbps to over 1 Mbps for downstream traffic

There are major two categories

• Asymmetric digital subscriber line (ADSL)

• Symmetric digital subscriber line (SDSL)

Depending upon the speed some also classify as follows:

• High data rate DSL (HDSL)

• Very high DSL (VDSL)

Asymmetric digital subscriber line (ADSL)

Asymmetric digital subscriber line is a new technology that allows more data to be sent over

existing copper telephone lines. ADSL supports data transfer downstream rate from 1.5 to 9

mbps and upstream rate from 16 to 640 kbps. ADSL requires a special ADSL modem . ADSL is

growing in popularity as more areas around the world gain access to Internet




Symmetric digital subscriber line (SDSL)

Symmetric digital subscriber line is technology that allows more data to be sent over existing

copper telephone lines. SDSL supports data rates up to 3 Mbps. SDSL works by sending digital

pulses in the high frequency area of telephone wires. Since these high frequencies are not used

for normal voice communication, SDSL can operate simultaneously with voice connection over

the same wires. SDSL requires a special SDSL modem . SDSL is called symmetric because it

supports the same data rate for both that is upstream and downstream traffic

Web servers:

Internet provides the information and infrastructure for communication traditional information

servers on internet are web, FTP and gopher servers

Overview of IIS:

Microsoft IIS is web server used to run fast and efficient websites Provides high-speed secure

platform for publishing information on Intranet and Internet. The server specifically designed to

handling an increased number of web users and users who are connected with high speed links

such as ISDN and leased lines important features of IIS are listed below

Features:

System takes advantage of Windows NT platform including fault tolerance, RAID storage, NTFS

file system.

High level of security is offered. Administrator can filter IP address.

Server include(SSL) secure socket layer encrypted communication standard for private

communication between client and server.

Hardware Required Recommended

Processor 66 MHZ-486 90 MHZ Pentium RAM 32 mb 64 mb Free Hdd 50 mb 200 mb Monitor VGA Super

S/w required Windows NT workstation with PWS or Windows NT server

Biztalk:




Until now it has been incredibly difficult for companies to conduct business over Internet due to

the lack of single technical vocabulary for describing business data and processes. This challenge

exist both across and within the Industries because no two business use the same application in

exactly the same way. The difference may range from the operating system to the software

created by the different companies. Getting different application to communicate with each other

is a clearly technical challenge

With the help of Biztalk Business must be able to use their existing system to find customers and

partners on the Internet to sell goods and to establish longer term trading relationship. Biztalk

simplifies the application integration needed to do business on the Internet. Biztalk assumes that

application servers and data are loosely coupled, that is they are distinct and separate. This

assumption allows Biztalk system to focus on data interchange instead of infrastructure

compatibility.

Basics of Biztalk data interchange are XML – based vocabulary describing business process

information. This description is called as schema. Schema serves as the basis for information

interchange between applications. These descriptions are published in the form of XML

documents. A schema is used to describe the possible data content of a document in very

rigorous and formal way.

Using these schemas, software developers can take advantage of common vocabulary that

supports specific business information and process Biztalk’s vocabulary and loosely coupled

communications are highly complementary. Vocabulary provides easier data interchange and

loosely coupled communication eases business process integration

Need For BizTalk:

There are two core issues behind the BizTalk initiative

• The application Integration today is too hard. The cost and complexity of integrating

together ERP systems, inventory management systems or sales tracking system within a

single organization is too high for both large and small companies




• Electronic commerce would require massive amount of application integration across

multiple organizations, as trading partners turn to the Internet to automate supply chains,

forecasting system, government services and new types of business interchange

Features

o Document Interchange services

o Support for existing Industry data formats

o Support for existing Industry protocols

o Business-to- Business Tools and processes

o Trading partner management

o Translation and mapping tools

Client Server Model:

Internet works in a client server model. This section gives the details of te servers that are used

in the marketplace today. Server platform refers to the operating system that drives the server

Application Servers:

Application servers are the type of middleware, which occupy a large chunk of computing area

between database server and the end user, and generally they too are responsible to connect

them

Chat Servers:

Chat servers enable a large number of users to exchange information in an environment similar to

Internet newsgroup that offer real time discussion capabilities

List Servers:

List servers offer a way to better manage mailing lists, whether they be interactive discussion

open to the public or one way lists that deliver announcements, newsletter or advertising

News Servers:




News servers act as distribution and delivery source for the thousand of public news groups

currently accessible over the USENET news network

Proxy Servers:

Proxy server sit between client program (typically a web browser) and an external server (another

server on the web) to filter requests, improve performance, and share connections.




HTML - The Basics

• Part 1 - Your First Page • Part 2 - Adding Text • Part 3 - Positioning Text • Part 4 - Hyperlinks and Bookmarks • Part 5 - Images & Backgrounds

Part 1 - Your First Page

Introduction

HTML is the language that makes the web work. It is the usual language used for most web sites

you will visit. It is understood by nearly every computer in the world and is one of the most

universal ways of creating documents. HTML may not have the best formatting tools and you

cannot guarantee that your pages will look the same in every single browser but without it there

would be no internet.

You can, of course, use a WYSIWYG (What You See Is What You Get) HTML editor to make

websites but they have 3 main disadvantages:

1. They sometimes use excess code to create a look on a page which slows down loading

times

2. They do not always create fully compatible code

3. Some WYSIWYG editors change any HTML code you enter by hand

Because of these you can create much better pages by writing HTML by hand. I must admit that I

don't do this much because it is much slower than using a WYSIWYG editor but I still know HTML

as it is always good to have a background knowledge. I assure you that if you learn HTML you will

create better web pages.

This tutorial will show you the basics of writing HTML.

What Software?

You do not actually need any specialist software to write HTML code and many web designers

argue that the best web sites are created in Notepad! For this tutorial, though, I will be using one

of my favorite web design programs, FirstPage 2000. It is free and you can download it here.




Some of the advantages of using an HTML editor is that it will color code your HTML code so that

it is easier to read, 'clean up' your code when you have finished, and you can use buttons in the

software to insert repetitive code.

It doesn't matter if you are using Notepad, FirstPage 2000 or another HTML editor, this tutorial will

actually be teaching you the language.

Understanding HTML

The actual HTML language is very easy to learn once you know the basics. HTML is made up of

a tag. A tag is a piece of text contained in <> and looks something like this:

<tag>

There are two types of tag. Opening and closing tags. Closing tags are only different as they have

a / before them:

</tag>

Tags appear in pairs like this:

<tag></tag>

You are probably not really understanding this so I will explain further. Anything between two tags

will have those tags applied to them. A good example of this is using the <center> tag to center

align text:

<center>Text in here is centered</center>

Nearly all tags have a closing tag but a few do not. What you must remember is:

<Tag>Text</Tag>

Declaring HTML

Open the program you are using to write HTML. If you are using an HTML editor you will have

some code already entered. If you do not have it already, enter the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>




<title>Untitled</title>

</head>

<body>

</body>

</html>

I will explain what all this means below:


This tells the browser what language is being used for the page. It is not entirely necessary but it

is good to add it in.

<html>

Tells the browser that this is the beginning of an HTML document.

<head>

This is the beginning of the header section. The header section contains the configuration options

for the page (like title).


This tells the browser what to display as the title of the page. This appears in the title bar at the

top of the browser. Enter the name of your page between the <title> tags.

</head>

End of the header section.

<body>

</body>

Everything between these is in the body of the page. This is where all text, images etc. are. This

is the most important part of the page.




</html>

Shows the end of the HTML document.

Summary

You have learned how HTML is structured using <tag>text</tag>. You must always remember

that whatever is between a starting tag <tag> and an ending tag </tag> will have the tag applied

to it. You have also learned how to set the page's title and declare an HTML document

Part 2 - Adding Text

Introduction

In part 1 I explained how to declare an HTML document and I explained how HTML was built up

using <tag>text</tag>. Below is the HTML you added in the last part.


<html>

<head>


</head>

<body>

</body>

</html>

In this section we will see that how to create a simple homepage. The first thing to do is change

the title of the page from Untitled to:

My Personal Homepage

To do this change the tag:





to

<title>My Personal Homepage</title>

The <font> Tag

The <font></font> tag set are the most common and one of the most versatile tags found in

HTML. Using the tags in the basic form they will show text on the page (but they can be

changed). To start off we will just display the text:

Welcome To My Homepage on the screen. To do this you need to add:

<font>Welcome To My Homepage</font>

between the <body> and the </body> tags. This will display the text in a standard font size, black,

in Times New Roman. Not the most interesting thing for your homepage.

Size, Color and Face

These are the three things you can set for a piece of text. These are the first tag attributes you

have come across. We will start with the Face attribute. Instead of having a new tag for font face

(the font it will be displayed in) you add it to the font tag like this:

<font face="Arial">Welcome To My Homepage</font>

As you can see you enclose the name of the font in quotation marks "" after an equals sign. You

do not need to include this in the end tag.

More than one attribute can be added to a tag so it is easy to display this in a different size. The

only thing you must remember is that sizes in HTML are not the same as normal font sizes

(measured in point sizes (pt). They are a single number which relate to a standard font size in the

following way:

HTML Font Size Standard Font Size




1 8 pt

2 10 pt

3 12 pt

4 14 pt

5 18 pt

6 24 pt

7 36 pt

You can make a nice large title by changing the tag to the following:

<font face="Arial" size="7">Welcome To My Homepage</font>

As you can see, once you know a tag it is easy to add extra options to it. The final one you will

learn is the color tag. You must make sure that you must use the American spelling for this. Color

is a little different to the other attributes. It can be changed using an HTML Color Word (a

standard color name) but only some color names work with this (you can see a list of them here).

You can also use HEX codes. HEX codes are in the format #000000 (# followed by six numbers).

The first 2 numbers are the amount of Red, the second 2 are Green and the last 2 are blue. To

made this text red you could either use:

<font face="Arial" size="7" color="red">Welcome To My Homepage</font>

or

<font face="Arial" size="7" color="#FF0000">Welcome To My Homepage</font>

Centering The Text

Finally you will want to center the text so that it looks like a real title. To do this you can use the

<center> tag. To do this simply enclose everything you want centered in the <center> tags like

this:

<center>


</center>

Which would display text like this:




Welcome To My Homepage

Summary

You have now learnt how to display text on your web page and how to format the color, size and

font of it. You have also learnt how to center things on the page. This is the code you should now

have for your website.


<html>

<head>


</head>

<body>

<center>


</center>

</body>

</html>

Part 3 - Positioning Text

Introduction

In the last part we finished with the following code:





<html>

<head>


</head>

<body>

<center>


</center>

</body>

</html>

Which displayed the words 'Welcome To My Homepage' in large, red, Arial letters in the middle of

your page.

In this part I am going to show you how to position text (or anything else) on your page. I will also

show you some other useful HTML tags.

The <p> Tag

The <p> tag is extremely. P stands for Paragraph. It is used to break up text into paragraphs. To

define a paragraph you just include the text inside the <p> and </p> tags. This will then group the

text together and leave a space after it (like the paragraphs on this page.

The <p> tag has an attribute which can be added to it. This is the align option. You can specify

three types of alignment (like in a word processor) - left, center and right. For example to align the

text right you use:

<p align="right">Text</p>




It is up to you to decide whether to use the <center> tag or the <p align="center"> tag. I usually

use the <center> tag as it is shorter which will reduce loading times. It is hardly ever necessary to

use the align="left" attribute as nearly all browsers automatically align text to the left but some

people use it.

The <br> Tag

Sometimes you will not want to leave a space after your paragraphs. To do this you should use

the <Br> (break) tag. This tag is very useful as, wherever you insert it, it will start a new line. To

create a new line without a space you use the <Br> tag and to create a line break you use

<Br><Br>. There is no end tag for the <Br> tag.

For example:

This text is on a line

This text is on the next line

This is text after a line break

This is text after 3 <Br> tags.

The <hr> Tag

The <hr> tag is another very useful way of breaking up your page. It will insert a horizontal line

like this:

As you can see this is an extremely simple to use tag. It has no closing tag. There are a few

attributes for them but they are rarely used. You can change the height (in pixels) the width (in %

of window or pixels) and the color (Internet Explorer only). Here is an example of how to create a

line 30 pixels high, 50% of the window in blue (you will see it in gray if you are not using Internet

Explorer:

<hr width="50%" size="30" color="#0000FF">

Comment Tags

Comment tags are useful if you want to put notes into your HTML code which will not show up on

the page. They can be used for copyright notices, little notes to tell you what each section of code

is about, notes to people reading your code or anything else you want to use them for. Some web

hosts use them so that their servers will know where to insert banners (they look for a specific

comment which you must add). These comments take the form:



The browser will ignore anything in a  tag.

Part 4 - Hyperlinks and Bookmarks

Introduction You should know how what a hyperlink is and what it is used for. If you do not, a hyperlink is a piece of text you click to be taken to another page. A bookmark is a way of bookmarking a point on your page so that you can hyperlink to it. The <a> Tag The <a> tag is used when creating hyperlinks and bookmarks. It stands for anchor. The functions are explained more fully below. <a href> To create a hyperlink you need to use the href variable of the <a> tag. Href stands for Hyperlink REFerence. To make a piece of text or an image into a hyperlink you contain it in: <a href="pageurlhere">Text Goes In Here</a> Hyperlinks can specify several things:

Function Example Code

Web Page or Site <a href="http://www.webaddress.com/folder/page">

Local Page <a href="pagename.html">

Local Page In A Folder Level Below <a href="foldername/pagename.html">

Local Page In A Folder Level Above <a href="../pagename.html">

Open E-mail Program With E-mail Addressed

<a href="mailto:[email protected]">

Bookmarked Section <a href="#bookmarkname">

Bookmarked Section In Another Page <a href="pagelocation.htm#bookmarkname">

Bookmarks

Bookmarks on a page are very easy to make as they also use the <a> tag. Instead of changing

the href variable you use the name variable. For example:

<a name="top">The First Text In The Page</a>




Will create a bookmark called top in the text which the tag surrounds. An image can also be

contained in this tag. You can then link to this using a standard hyperlink:

<a href="#top">Back To Top</a>

You can name bookmarks anything you like. Bookmarks are very useful on pages which are very

long as they can be used to quickly go to another part of the page.

Part 5 - Images & Backgrounds

Introduction

images are a very important part of an HTML page. They make it different from an e-mail or just a

printed page. They can be used as a design element to make pages look better and can be used

as the background to make the page more interesting.

Images

Images are added to pages very easily. All you need to do is use an <img> tag. You must use

some variables with it, though, or it will show:

Which is not very helpful. You must use the src= variable to choose the image to insert. Like a

hyperlink this can either be a relative reference or a direct reference including the site's url. For

example:

<img src="http://www.gowansnet.com/images/gnet.gif">

If you include an image in a hyperlink it will, by default, display a blue border round the image. To

turn this off you should use the:

border="0"




variable for the image.

Resizing Images

You can resize images inside the browser using two other image variables - width and height.

Even if you do not want to resize the image it is useful to specify its size using these variables as

it will put a placeholder in the browser and the page will not change much when the image is

loaded.

These tags can also be use to make an image bigger or smaller. All measurements are in pixels.

Here is an example:

<img src="http://www.gowansnet.com/images/gnet.gif" border="0" width="80" height="30">

or

<img src="http://www.gowansnet.com/images/gnet.gif" border="0" width="10" height="10">

It is good to remember that it is probably better to resize an image in an image editing program if

you are making it smaller. This is because the smaller image will have a smaller file size and will

load quicker. This would not be the case if you resized it in the browser.

Alt

The final variable of an image is the alt variable. This tells the browser what the alternative text for

an image should be if the browser has images turned off. It is used like this:

<img src="http://www.gowansnet.com/images/gnet.gif" alt="The Gowansnet Logo">

Finally you should also remember to use gif or jpeg images as the file sizes are much smaller.




Background Colors

You can change the background color of the page using the bgcolor variable of the <body> tag. It

is used like this:

<body bgcolor="#0000FF">

which would set the background color as blue. You could also use an HTML color word.

This is a very simple tag to use as there is really no more to it. You should always remember to

ONLY use a light color text on a dark background or a light color text on a dark background.

NEVER use blue on red or red on blue. It is generally thought that a white background with black

text is best.

Background Images

Background images can be placed on a web page. A background image is an image which is tiled

behind the text. It is done using another variable of the <body> tag. It is background and it is used

like this:

<body background="myimage.gif">

It is sometimes a good idea to include a background color as well so that people can read the text

on the right color before the background image has loaded. Again, you should remember only to

use contrasting colors.

Summary

That is the end of this tutorial. You have learnt how to create an HTML page with formatted text

split into paragraphs, insert images, link between pages and link to different parts of your page.




Advanced HTML

• Part 1 - Advanced Text Formatting

• Part 2 - Lists, Headings & Base

• Part 3 - Forms

• Part 4 - Further Forms

Part 1 - Advanced Text Formatting

Introduction

HTML is made up of a great many elements, a lot of which are overlooked, forgotten or just

unknown to many web designers. Although with a basic knowledge of HTML you can develop a

website, to take advantage of many of the advanced features, and to make pages fully

compatible, it is useful to learn these less popular tags.

Before reading this tutorial, you should have a basic idea of how HTML pages work, and how to

do basic coding in HTML.

More <font>

The font tag is the most used HTML tag, and takes a very basic form. It allows you to specify the

color, size and font of text. Although largely thought to be obsolete by many developers, due to

the greater control given by stylesheets, it still provides a very easy way to change the look of the

page.

The basic use of the font tag involves setting a font using:

<font face="Arial">Text</font>

but this does introduce another problem, that of different computers accessing a page. Unlike

publishing methods such as print, it is up to the user's computer, not the printer, to render the

pages, so they can look different on all computers. This is especially noticable with the font face

attribute, as it is very rare to have a font installed on every computer that visits a website.

Because of this the HTML specification has a system built in where multiple fonts can be

specified. For example, you can use:




<font face="Arial, Helvetica, sans-serif">

which would tell the browser to first try to display the text in Arial, if that wasn't found try Helvetica

and if not use the standard sans-serif font. This allows you to have control over how pages are

displayed by browsers without the correct font, although it is far from perfect. The best uses for

this tag, are if you really want to use a non-standard font (and don't want to use stylesheets) or if it

is important that you can accurately predict how pages will look on other computers. It is good

practice to use font face in this way for all applications, though, for the sake of compatibility.

Bold, Italic, Underline and Strikethrogh

A further method of controlling how your text appears, other than changing the size color and font

is to apply the four standard text formats to it. HTML has tags for all of these, which are supported

by nearly all browsers.

Bold text is simple to create, it uses either the:

<b>Text</b>

or

<strong>Text</strong>

tags. Usually, it is simply a matter of preference over which one you choose, but accessibility

experts normally recommend using <strong> as many screen readers (programs which read web

pages to the blind) will recognise that the text is highlighted and speak it appropriately.

Similarly you can create text in italics using:

<i>Text</i>

or

<em>Text</em>

Again, it really doesn't matter whether you choose to use <em> or <i>, but screen readers can

often recognise <em> and emphasised text.

Underlines are achieved using:




<u>Text</u>

although I would recommend against using this greatly, as it can often be confused with links on

the page. Strikethrough, is used to 'cross out' text:

<strike>Text</strike>

although this is not particularly commonly used.

Subscript and Superscript

Subscript and superscript (text slightly above or below the line) is something which has long been

supported, but is not common as it is only commonly used in scientific applications. There are

other uses, though, and it is not a difficult tag to implement:

8 x 8 = 8<sup>2</sup>

8 x 8 = 82

H<sub>2</sup>O

H2O

Preformatted Text

HTML has been designed so that it ignores multiple spaces in documents, for example if you

enter two standard spaces it is rendered as one. Although this allows indentation of code without

changes to the presentation on screen, it does make it difficult to display some sorts of content

(such as pre-formatted tables written in plain text). For this, you can use the <pre> tag. This

stands for preformatted text, and will display the text exactly as it appears in the document

source, for example:

<pre>

Name Location Sales ---- -------- ----- A. Name London 1,000 A. Nother Washington 2,000 A. Person Paris 2,400 </pre> Without the <pre> tags this would display as: Name Location Sales ---- -------- ----- A. Name London 1,000 A. Nother Washington 2,000 A. Person Paris 2,400




but after adding the tags in it shows up as:

Name Location Sales ---- -------- ----- A. Name London 1,000 A. Nother Washington 2,000 A. Person Paris 2,400 Part 2 - Lists, Headings & Base

Introduction

There are many features of HTML which, even with the greater acceptance of CSS, are still used

often, and have no real replacement, in fact the header tags (explained later) are very important

when using CSS.

Lists

There are many occasions when you may want to write a list in HTML. Of course, it would be

easy enough to just write out the text which you want in the list and type numbers or *s in front of

it, but there is a much easier, more flexible method. THe most basic type of list is a bulleted list, or

an unordered list, as it is known in HTML. To create a list like:

Things To Do:

• Create Website • Upload • Become Millionare

you would use the following code: <ul>Things To Do: <li>Create Website</li> <li>Upload</li> <li>Become Millionare</li> </ul> The tag: <ul>

tells the browser that you are starting an unordered list. It will indent the text from this point. The

tags:

<li> and </li>

tell the browser where list items begin and end, so that it can place a bullet point in front of them.




Notice that new lines are started automatically, without the need for <br> tags. The list is then

closed using the:

</ul>

Sometimes you may want to nest your lists, to have sub-items. For example:

Things To Do:

• Create Website o Make pages

o Check pages

• Upload • Become Millionare

This would be done with the following code:

<ul>Things To Do:

<li>Create Website</li>

<ul><li>Make pages</li>

<li>Check pages</li></ul>

<li>Upload</li>

<li>Become Millionare</li>

</ul>

All you have done is simply to have placed one list inside a list item of another. The browser will

cope with all the formatting of this and, as long as you remember to close your tags correctly, it

will be formatted correctly.

Numbered lists are another feature of HTML. They allow you to have a list with the numbers

automatically added (much like in a word processor). The structure is exactly the same as for an

unordered list, except the list tag is:

<ol>

(standing for ordered list). The following example:

Things To Do:

1. Create Website 2. Upload 3. Become Millionare

would be created with the following code:




<ol>Things To Do:

<li>Create Website</li>

<li>Upload</li>

<li>Become Millionare</li>

</ol>

Again, with numbered lists you can nest them as with unordered lists, or even combine the two.

Headings

HTML formatting is mostly done using the <font> and various other tags, but what many people

do not realise is that there are already some preformatted headings included. There are six of

these, each one being a 'level' lower than the one above. They range from the largest <h1> to the

smallest <h6>. The following are examples:

A Level 1 Heading

<h1>A Level 1 Heading</h1>

A Level 2 Heading


A Level 3 Heading


A Level 4 Heading


A Level 5 Heading


A Level 6 Heading


Although these headings do not look particularly nice, they do have two important uses. Firstly,

being structured (as you move from 1 to 6 it signifies headings of lesser importance) intelligent

software and browsers can use this to decide what is important on the page. Also, speech




browsers for the blind can also take advantage of this.

The second of the uses is more relevant, though. This is, that using CSS (Cascading Style

Sheets) you can very easily change the format of the headings from 1 to 6, to be formatted

exactly how you want them. This has the great benefit of allowing you to have structured

headings but having them looking like they fit in with your site.

Base

The <base> tag is unknown by many people, but in certain circumstances it can be extremely

useful. It has two main attributes, href and target.

The href attribute is used to tell the browser what the base URL for the page is. This can then be

used to correctly interpret relative hyperlinks. For example, you may have a link pointing to:

afolder/mysite.html

If your page was located at:

http://www.mysite.com/page.html

then the URL loaded when the link was clicked would be:

http://www.mystie.com/afolder/mysite.html

You could, though set the base for the document to http://othersite.com. In this case, the link

would load:

http://othersite.com/afolder/mysite.html

This also applies to images and any other relative URLs given to documents. The above <base>

would be implemented using:

<base href="http://othersite.com">

and this tag would be placed in the <head> section of your HTML.

Although the usefulness of this tag may not be instantly apparent, it can be very useful if you need

to put a premade page on another server, or if a page is accessed from multiple domain names.

This way you do not need to update all your links, just the <base> of the document.

The target attribute is useful if you are using frames on your site. With frames, the target frame for

a hyperlink is given as:

<a href="thepage.html" target="contentframe">

which would load the file thepage.html in the frame called contentframe. If you want all links to




open in a particular frame, though, for example if you have a navigation bar page and you want all

the links to load in the content frame, you could use the following <base> tag:

<base target="contentframe">

As with standard HTML targets, you can also use:

_blank to open in a new window

_self to open in the current frame

_parent to open in the frameset parent

_top to open in the whole browser window with no frames

Both the target and href attributes can be combined in the <base> tag.




Part 3 – Forms Introduction

Interactivity is increasingly becoming a major part of many websites. Although the systems are all

run by backend software, such as PHP or ASP, there must still be a front-end interface for the

visitors to use. The sending of data to a script on a website is achieved by using HTML forms.

Form Basics

The basic idea of an HTML form is the same as that for a paper form. You are presented with a

number of related sections of a page where you must input information. There are a number of

different ways to enter data, including typing it in, selecting it from a list and ticking boxes. HTML

deals with forms exactly the same way as you would with a paper form. There are groups of items

and single items all gathered together in one large form and, like a paper form, the HTML tells the

browser where to return it to.

Defining A Form

In HTML the first thing you must do is to define a form as a whole. This is done using the tags:

<form>

</form>

As with any other HTML tag, they apply to everything in between, so everything you contain

inside form tags will be part of that particular form. You are not limited to one form on a page,

though, as you can have as many sets of <form> tags as you need (for example to provide a login

form and a signup form on the same page) as long as they are not nested. <form> is an invisible

tag, as it will not change the way in which the page is displayed (although some browsers seem to

leave a small space after a form).

A form tag on its own is almost completely useless. There are three main attributes you can use,

though, which make the form more useful. The first of these is action, which is used as follows:

<form action="http://yoursite.com/cgi-bin/formmail.cgi">

The action of a form tells the browser where to send the data entered, in this case the file at

http://yoursite.com/cgi-bin/formmail.cgi. This file will then be responsible for dealing with the data.

The useful thing about form tags is that the script you are sending the data to can be anywhere on

the web, so you are not simply limited to scripts on your site.

The second attribute is the method, which is either used as:




<form method="post">

or

<form method="get">

These two methods, POST and GET, refer to the standard HTTP metods of sending data across

the internet. The GET method puts the data into the URL of the next page, so that it is visible in

the browser's address bar, for example:

http://yoursite.com/scripts/page.php?page=12&name=david&agree=yes

This has both an advantage and a disadvantage. The advantage is that URLs can easily be typed

in or linked to using GET, although when using forms this is not vital. The disadvantage of this,

though, is that the data can be seen by anyone looking at your browser and it can show up in the

history. If you are sending sensitive information from your form, you shouldn't use this method.

POST is slightly different. Instead of encoding the form data into the URL, it is sent in a special

data stream. This means that it is invisible in the browser, so is far more secure than GET

(although sensitive information should still not be sent without encryption). By default a form will

submit using GET unless you specify the method (although it is good practice to always specify

whichever one you are using).

Usually form tags only ever include the method and action attributes, but occasionally you will

need to use the name attribute. This is used as:

<form name="loginform">

This allows the browser to recognise the form on the page, which is useful if you are writing

scripts in JavaScript, for example to validate form data.

In practically every case you should use both the method and action tags when defining a form,

and should only use name if you particularly need it.

Text Input

The most basic type of form input is the standard textbox, like this:

It allows the user to enter text and will send this data to the processing script when the form is

submitted. Nearly all input options use the same basic tag, which is the:

<input>




tag. This is combined with a number of attributes to provide different types of input on your form.

To give a standard text box, you use the following:

<input type="text">

This is not quite enough to have a working text box, though, as there is another inportant attribute,

name. Name allows you to give the textbox a name with which the data can be referred to later. It

should be entered without spaces or special characters, but it is important that each item on the

form is given a different name. The name attribute is added as follows:

<input type="text" name="username">

Which names this textbox 'username'. As with many tags involved with HTML forms, this is an

invisible change, and is only really of use once you start processing forms. If you are submitting

your form using GET, though, the input's name will be shown in the URL of the page (it is also

sent with the data if you use POST, but this is invisible), for example:

login.php?username=david

A third attribute which can be used with your textbox is value. This allows you to set an initial

value for your textbox, which can be changed by the user, for example if I had a textbox to take in

an e-mail address, I could set the inital value to '[email protected]' by the following code:

<input type="text" name="email" value="[email protected]">

There are a few more attributes which can be used with textboxes, but they are not necessary for

basic forms, so these will be covered in the next part.

More HTML In Forms

Although it is probably obvious, I will just mention that all other HTML tags are available to you

inside your <form> tags. It is important to remember, for example, to label all your input elements,

so that the user knows what to enter in them. You can use all other types of HTML formatting as

well as text, though, and often the use of tables can help set out an HTML form in a better way.

Buttons

Once you have got the user to enter some data into a form, however basic it may be, you will




need some way for them to send it on to the next page. This is where buttons come in. There are

two basic buttons available to you in HTML, submit and reset. Submit is the most commonly used.

Basically, when you put in a submit button, a button will appear on the page which, when clicked,

tells the browser to send the form data to the URL which you defined in the action part of the form

tag, using the method you supplied. The most basic submit button is added using the following

code:

<input type="Submit">

There is an optional attribute of the submit button, though, which allows you to customize it

slightly. This is the value attribute, which is used in exactly the same way as for a textbox,

although in this case it simply changes the text on the button's face.

<input type="Submit" value="Sign Up">

You can have as many submit buttons in a single form as you like (for example many websites

provide an 'I Agree' button at the top and bottom of a long page of terms and conditions, but all

submit buttons in a single form will do the same thing.

The second button you can add to your form is a reset button. All this does when clicked is to

reset the form to its initial state (usually clearing all values but, in the case of the value attribute

being set for an input option, it will also restore the initial values you set). This is added to a form

using:

<input type="Reset">

Like a submit button, reset can also have its text changed using the value attribute.




Part 4 – Further Forms

Introduction

In the last part, you learned how to create a basic form in HTML, which included a simple textbox.

HTML forms allow you to have a huge number of different form elements, though, and some of

these will be covered in the following page.

Larger Text Inputs

Although textboxes offer a useful way of getting textual input from a user, it is quite limiting as the

user can only enter one line, and this is limited in length. If you want to get more than just a few

words of text from a user, you are better off using the far more flexible textarea. The basic code

for a textarea (or multiline text box) is:

<textarea name="comments">

</textarea>

As with any form element, you must specify a name (in this case comments). You may have

noticed that, unlike the standard text box and button, this form element has a closing tag. This is

because, as well as allowing the user to enter more text than other elements, it is also designed

to allow the webmaster to set more initial text. Anything between the closingand opening tags will

be placed inside the textbox and, unlike with standard HTML, new lines taken in your code

between these tags will be shown as new lines on the page. If I wanted to, for example, ask a

user for comments, I could create the following textbox:

Thank you for visiting the site. W

using this code:

<textarea name="comments">Thank you for visiting the site. We would appreciate it if you would

leave some comments in this box to help us improve.</textarea>

One of the useful features of textboxes is that they will wrap text for you, and also provide

scrollbars if the text cannot all fit in the box. If you expect users to enter very large pieces of data,

though, you will want to have a larger box than the default. Luckily HTML has allowed for this with

the cols and rows attributes. These allow you to set the number of columns in your textbox (i.e.




the number of characters wide it is) and the number of rows which appear. For example, you

could have used the following code for your comments form:

<textarea name="comments" rows="6" cols="25">Thank you for visiting the site. We would

appreciate it if you would leave some comments in this box to help us improve.</textarea>

Radio Buttons

Radio buttons are a form element usually used for choices, such as voting. They are defined in

groups where only one button at a time can be selected, for example:

Red

Green

Blue

This example would be achived using the code:

<input type="radio" name="colors" value="red">Red<br>

<input type="radio" name="colors" value="green">Green<br>

<input type="radio" name="colors" value="blue">Blue

As with most other form elements, radio buttons use the standard <input> tag, with the type set to

'radio'. Unlike other elements, radio buttons must be named based on their groupings, not

individually. For example, with text boxes you might have one called 'name' and one called

'password' but for radio buttons to work correctly (deselecting one when another is chosen) all the

buttons in a group must have the same name. When submitted, the form will give the name of the

group, followed by the value set for the selected button, as its output. If you want multiple radio

button sets in one form all you need to do is to give the othetr set a different name. It is worth

noting that the location on the page has no relation to how radio buttons are grouped, as long as

buttons have the same name and are in the same form, they will be grouped.

Checkboxes

Unlike radio buttons, checkboxes are either on or off. They are not grouped and as many or as

few of them can be selected as the user wants. Again, a checkbox is inserted using the standard

<input> tag, using both name and value:

<input type="checkbox" name="agree" value="yes">




When a form containing a checkbox is submitted, the browser will only send the textbox name

and value if it is selected. If not it will ignore the checkbox.

It may be useful in some cases to have the checkbox pre-selected. IN order to do this, you must

simply add a checked attribute to the <input> tag:

<input type="checkbox" name="agree" value="yes" checked>

The user will still have full control over the checkbox, and can check and uncheck its value, even

if you preset the box as checked, but it is more likely that the user will leave it checked.

Selection Boxes

Selection boxes allow you to provide a list of options on your website from which you can choose

one. This can be very useful for entry such as country, where you don't want the user to be able

to freely enter text, for example:

Item 1

The basic code for setting up a selection box is:

<select>

</select>

As with any other form tag, you can add the name attribute, so that you can access the form data

later. In between the <select> tags you can add each option you want to appear. These should be

in the order you want them in the list. There is no limit to the number of items you can add as the

browser will adjust the box accordingly.

<option value="1st">Item 1</option>

You can put in any value you want, it does not need to be sequential or bear any relation to the

use of the option (as with a text box, for example). Between the <option> and </option> tags you

enter the text you want to appear in the selection list. This can be as long as you want (within

reason), as the select box will automatically resize to cope with the longest item.

In a select box, by default, the first option is displayed when no selection is made. In many cases

this is acceptable (most people will put 'Please Make Your Selection' here and will assign it a

value which they can later detect is an invalid input, but sometimes, for example in country-select

boxes, you will want to make another option the default. To do this, you simiply need to add the

'selected' attribute:

<option value="USA" selected>United States</option>




Hidden Fields

The final element which you can add to your form is one which, at first, appears to be useless. It

is a hidden field, which will simply send a name and value with the form data. Nothing will appear

on screen and the user is not given the chance to change the value. It will show nothing on the

HTML page (although it will be in the source code, so it shouldn't be used for storing the

information which the user shouldn't see). The hidden field is extremely useful in some server-

side systems, where HTML is generated on-the-fly. For example, in many ordering systems there

will be multiple pages where the user inputs data. Often this data is put temporarily into a

database, and the key for accessing it placed into a hidden field on the page for the next stage, so

that the backend system can identify which user is submitting the data from the second page.

A hidden field is added to the form using:

<input type="hidden" name="userid" value="98503804598">

There are no extra attributes for the hidden field, as there are no appearance settings which can

be changed for it. You can have as many hidden fields in your form as you want, as long as they

all have different names and they can be placed anywhere inside the <form> tag.




Frames & Tables in HTML

• Part 1 - Introduction • Part 2 - Frames • Part 3 - WYSIWYG Tables • Part 4 - HTML Tables

Part 1 - Introduction

Why Do I Need Them?

Frames and tables are extremely important in web design. It is impossible to create a navigation

bar on a website without using frames or tables in one form or another.

An example of this is that this page is completely enclosed in a giant invisible table. It has a

column down the side to put the navigation in and a giant cell for all the page text. I could also

have got the same effect using frames.

What Is The Difference?

There is one major difference between frames and tables.

Frames divide up your browser window into separate areas. In each of these a page is loaded.

Links in different pages can be made to change the pages in other frames and frames can stay

the same when another page changes. This means that you can have one page which has the

navigation bar for a whole site on it and it never changes.

Tables divide up a web page into separate cells (like in a spreadsheet). This means that you have

a lot more control over where text and pictures can be placed. By using the method I described

earlier (having a column for a navigation bar and a cell for the page text) you can create complex

page structures. A page looking the same could be created with frames and tables.

Frames: Good and Bad

The best feature of using frames is, of course, the ability to update every page on your site using

one file. For example: if I used frames on Free Webmaster Help I could add another link to the

navigation bar on one page. When the frames loaded on the web you would see this change,

whatever page you are on.

Frames also make very consistent pages. As you are only changing the text for each page of the

site, the actual look of the page will not change much in the user's browser.

When used properly frames can make a very good design feature and, once each frame has




loaded, the loading times of a site are a lot less (as, usually, only one frame is ever changed

throughout the whole site).

Frames do have their bad points, though. One of the major ones is that, even though frames have

been around for a long time, they are still not fully supported. Some people who are still using

older browsers cannot view frames sites. Even worse, some search engines will not index pages

using frames! This could mean a great loss of traffic for your website

Another problem with frames is that if someone arrives at an internal page on your site the frames

will not appear. This could mean that someone might read a page and not actually know they are

on your site.

The final problem is that it is very difficult to bookmark an internal page in your site and if

someone bookmarks a page on your site (using most browsers) and return later, they will see

your first page, not the one they bookmarked.

Tables: Good and Bad

Like frames tables also have good and bad points. Their best feature is that they fix all the

problems with frames. As all the parts are on each page, if you load an internal page of the site

everything will appear and it is possible to bookmark these pages.

All search engines support tables so you do not need to worry about them not indexing your site.

Although, some browsers do not support tables, nearly all the browsers in use do so you should

not have any problems with compatibility.

Like frames, tables also have some bad points. The main one of these is that, all the parts making

the page are stored on each page (not on separate ones like in frames), updating something on

the whole site is more difficult. For example: adding a new link to my navigation bar in frames

would mean changing one page. Doing it in tables would mean changing every page on the site.

This can be overcome by using a search and replace program, though.

Keeping a consistent design is also more difficult using tables because, as I explained earlier,

everything is on each page. This means that each item on your page which is supposed to remain

consistent must be placed in exactly the same place on each page.

The final problem with tables is that, because everything is on every page, the individual pages

take longer to load. This is not much of a problem if you are keeping quite consistent with images,

but it you are not it can increase loading times greatly. Also, the whole table must load before it is




displayed on the screen so users will be left with a blank screen while the page is loading (instead

of seeing the text appear as it is downloaded).

Which Is Better?

I cannot really say which is better! I personally use tables, a template and a search and replace

program to make Free Webmaster Help but it is really a matter of what features are most

important to you.

How Do I Use Them?

Simple! Read on. In this tutorial you can learn how to create tables and frames using a

WYSIWYG program or in HTML code.

How Do Frames Pages Work?

Frames pages are basically an HTML file which breaks the browser window up into separate

parts or frames. In each frame a different HTML file can be loaded. Links in one frame can then

be used to change the content in any frame on the page. If a frame is not re-loaded, changes to

the others do not affect it.




Part –2 Frames In A WYSIWYG Program

The free WYSIWYG HTML editors are not particularly good at creating frames but you can do it

using some of the more expensive ones. If your program does not have a frames option you will

need to do the coding in HTML.

To create a frames page in FrontPage 97/98/2000 all you need to do is choose 'Frames Pages' in

the new page dialog box (File, New, Page). It will really do the rest. You can change the size of

the frames and set the target (the frame that is reloaded when a hyperlink is clicked) from the

normal menus.

The two things you are likely to need to change are the frame borders and the option to resize

them in the browser. These can be changed from the frame properties dialog box. To open this

right-click on the frame you want to edit and choose frame properties. Turn off the option

resizable in browser then click Frames Page Properties... and turn off the Show Frame Borders

option.

FrontPage is actually very good at coping with frames and, if you are quite used to the program,

youshould be able to use frames very easily.

Frames In HTML

To explain how to create frames in HTML code I will give you some sample code and then explain

it. This code creates a page with a left frame for contents.

<html>

<head>

<title>My Frames Page</title>

</head>

<frameset border="0" cols="150,*" frameborder="0">

<frame name="contents" target="main" src="contents.htm" scrolling="auto" noresize>

<frame name="main" src="main.htm" scrolling="auto" noresize>

<noframes>

<body>

<p>This page uses frames, but your browser doesn't support them.</p>

</body>




</noframes>

</frameset>

</html>

I will now explain this code:

<html>

<head>

<title>My Frames Page</title>

</head>

This is the standard start for an HTML document. The title will appear in the browser's title bar for

every page on the site as it is contained in frames.

<frameset border="0" cols="150,*" frameborder="0">

This declares a frames page. It sets the border as none and the frames borders as none. The

part:

cols="150,*"

Says that the frames should be columns. One should be 150 pixels wide and the other should fill

up the rest of the screen. This is a very versatile tag. You can use percentages instead of the

values and any number of frames can be added by just adding another comma.

You can also change this to rows= to make the frames rows instead.

<frame name="contents" target="main" src="contents.htm" scrolling="auto" noresize>

This is the tag for the first frame. It tells you the frame should be referred to as contents, links in it

will open in the frame called main, the page to be loaded in the frame is contents.htm and that

scrollbars should be used if needed. It also tells the browser not to allow the user to resize the

frame. Other values which could have been used for scrolling could be yes and no. These would

set the browser to always display scollbars or never display them respectively.

<frame name="main" src="main.htm" scrolling="auto" noresize>

This is the tag for the second frame.

<noframes>

<body>

<p>This page uses frames, but your browser doesn't support them.</p>

</body>




</noframes>

This is the area where you can put the information to be displayed by browsers which don't

support frames. It is a normal HTML page between the <body></body> tags.

</frameset>

</html>

This text closes the frames and HTML tags.

The final thing you need to know to use the a tag to make hyperlinks refer to another frame. To do

this you add target="framename" to the hyperlink tag. For example to make a page load in the

main frame you would use:

<a href="page.htm" target="main">Click Here</a>

You can also use:

_self - Opens in same frame

_top and _parent - Opens over the top of the frames page, removing the frames

_blank - A new window (not necessarily for frames pages).




Part 3

What Are Tables?

Tables are the same as a table in any other application. They are like a spreadsheet. They have

rows, columns and cells. They are quite complex to make in HTML but can be very effective (this

page is made up of many big and small tables). If you are going to create one in HTML read the

section below first as it will explain how the table works.

Tables In A WYSIWYG Program And Table Terms

I would strongly suggest that you use a WYSIWYG (What You See Is What You Get) program to

create tables even if you don't normally use one. This is because it is difficult to create a table in

HTML as it is difficult to visualize it.

You will be able to either insert a table by choosing Table, Insert Table... or Insert, Table...

depending on the program you are using. You will probably now get a dialog box.

You can specify the number of rows and columns here (although you can add or delete them

later). You can also specify the width and height of the table. If you do not it will resize with the

things you put in it. You can either specify these as a percentage of the browser screen or as a

size in pixels.

Next you can specify the border size, cell padding and cell spacing. The border size is how thick

the border around the cell is. It will be invisible (like on this page) if you set it at 0. Cell spacing is

the space between each individual cell. A value of 1 or 2 is usually common here. A value of 0 will

leave no space between cells. Cell padding is the space between the edge of the cell and the

content inside. The values in here are the same as for cell spacing (1 or 2 is common, 0 is none).

Once you have inserted the table you can put text, images or anything else in it. Two more things

you may need are merging cells, splitting cells and changing the background color.

Merging and splitting cells can usually be done by highlighting the cell(s) and right clicking to get a

menu. If you select 2 (or more) cells and choose to merge them they will become one cell. This

will not effect any of the other cells so you can have cells spanning more than one row or column

in your table.

If you choose to split a cell it will split in two (or more). This allows you to have multiple cells

where there would normally be one.

Finally changing the cell background can be done from the cell properties (usually in the right-




click menu). You can either select a color or an image (like with a page background) and it will be

applied to the cell. An example of this is the cells at the top this page which have a background

color.

Tables are an excellent design tool and if you use them properly you can create complex designs,

far beyond the normal HTML limitations.




Part 4

As creating tables in HTML is quite complicated I will leave the HTML code until the next part

where I will explain it in full.

Before You Start

Before you start learning how to create a table in HTML code you must make sure that you are

familiar with with the terms used when referring to tables. If you have not done this then go back

to part 3 and read about them.

Tables In HTML

Tables are quite difficult to do in HTML. This is not because the code is particularly hard to

remember but because it is difficult to get the table you want by using it. It is extremely difficult to

visualize what you are creating when you are using HTML code.

The first thing you must do is declare the table. This is done using the <table> tag:

<table border="1" cellspacing="2" cellpadding="2" width="500" height="100">

This basically means to create a table with a border of size 1 with cell spacing of 2 and cell

padding of 2. If you do not know what these terms mean click here. The table should be 500

pixels wide and 100 pixels high. You could also use percentage values here by adding a % sign.

If you leave out the width and height tags the table will resize itself depending on the data in it (but

will never be wider than the browser window).

The next tag declares a row in the table:

<tr>

This tag does have some variables but I will deal with them later. The next thing you have to do is

declare the first column:

<td width="100" height="100">

This creates a cell 100 pixels wide and 100 pixels high. Like with a table you can use percentages

(of the total table width and height) or leave out the width and height and the cell will resize itself.

Next you include the standard HTML you want in the cell (you can use anything, even tables)

before closing the column tag:

</td>

You can now add as many columns you like before ending the row using:

</tr>




You can add as many rows and cells as you like before closing the table:

</table>

That may have been a little bit confusing so I will give you an example:

Month Sales Profit

January $10,000 $2,000

February $15,000 $5,000

March $5,000 $1,000

<table width="75%" border="1" cellspacing="2" cellpadding="2">

<tr>

<td>

<center><b>Month</b></center>

</td>

<td>

<center><b>Sales</b></center>

</td>

<td>

<center><b>Profit</b></center>

</td>

</tr>

<tr>

<td>January</td>

<td>$10,000</td>

<td>$2,000</td>

</tr>

<tr>

<td>February</td>

<td>$15,000</td>

<td>$5,000</td>

</tr>




<tr>

<td>March</td>

<td>$5,000</td>

<td>$1,000</td>

</tr>

</table>

This information should have helped you to create a simple table. There are some more complex

tags to make cells span several rows or columns but when you are creating these sort of tables it

is much easier to use a WYSIWYG program. There are just a few more pieces of information you

will need to know:

These are the background and bgcolor attributes. These can be used in the <table> <td> and <tr>

tags to apply a background color or image to that part of the table (or the whole table if used with

<table>). The background attribute is used to specify a background image:

<td background="http://www.gowansnet.com/cellbg.gif">

and the bgcolor is used to specify a color using an HTML color word or an RGB code:

<td bgcolor="#FF0000">

Summary

In this final part you have learned the basics of creating a table in HTML. Tables are a very good

navigation feature but in my opinion they are best created by WYSIWYG programs as they can

soon become quite complex.




Rounded Table Corners in HTML

• Part 1 - Introduction • Part 2 - Advanced Corners


Introduction

One of the best effects which you can use on your website to make it look more professional is

rounded table corners. They can be used very effectively to create borders, blocks of colour,

navigation bars and many other effects. Throughout this tutorial we will show you how do this.

The software used in this tutorial is Macromedia Fireworks but you can use nearly any image

software.

Creating The Table

The first example in this tutorial will be a table looking like this:

This is where your table content is placed if you want it there.

A simple block of colour with rounded corners. Firstly, you create a normal coloured table but

slightly different to how you would normally do it. You should add 2 rows and 2 columns to the

table you want (for example if you want a table with one cell you should create one with 3 rows

and 3 columns as follows:

The central cell will be used for your content and the other ones will be for the edging. You should

set the border, cell padding and cell spacing of the table to zero for this to work.

Before you create the corners you will need to make the table the right colours. Set the

background of all the cells to the colour red (#FF0000).




Creating The Images

The actual corners for the table are created using 4 images. This is where your graphics program

is required. Firstly, create a new image with a white background which is 25 pixels high and 25

pixels wide. Choose the circle tool and draw a circle touching the edges of the image but with only

quarter of the circle in the image like this:

Next, set the fill colour of the circle to red which will produce this:

Finally, export or save the image as topleft.gif

Then, use the rotate function to rotate the image 90 degrees clockwise, save it as topright.gif.

Rotate it another 90 degrees and save it as bottomright.gif then do it one more time and save it as

bottomleft.gif. You should now have a set of images like this:

Creating The Table

Now all you have to do is insert these images in your table. In each of the corner cells place the

appropriate image. You will now have something which looks like this:

Now all you need to do is set the alignment of the two right cells to 'right' and your table will nearly

be complete. Just add the text to the center cell and you now have a table with rounded corners:





Part 2

In part two I will show you how you can use this same technique to create inside corners for

Introduction

In the last part of this tutorial I showed you how to use HTML and your image program to create

rounded corners for your HTML tables. In this part I will show you how to create inside corners

and how to make a 'frame' round your content.

Creating The Inside Corners

In this part I will show you how to create a table slightly different from last week:


This works better with large amounts of text (or full web pages) but could be used for anything. To

create this you have to create a table with 5 rows and 5 columns. The cell spacing and padding

should be 0 and there should be no border. As with the last example the central cell will contain

the content. The outer cells will contain the border. The cells between the outer border and the

content will be the margin and will contain the inside corners.

Now you must set the background colours of all the outside cells to red (#FF0000) and set the

widths of the two outer colums to 25 pixels.

Creating The Images

As with the other example all the corners are made from images. You can use the four you

created for the last table:




img src="http://www.freewebmasterhelp.com/static/tutorials/corners/topleft.gif" width="25"

height="25">

and, as with that table, they should be placed in the four corner cells. You must also create four

inside corner images. These are made in exactly the same way as the outer corner images with a

few differences. When you create your 25x25 image this time, set the background to red. Then

draw a circle like the one for the outer corners but this time make it white. As before, rotate the

image four times and you will be left with a set of images like this:

Creating The Table

Now all you have to do is insert these images in your table. In each of the inner 4 corner cells (the

ones between the content and the border place the appropriate corner. If you need to, adjust the

alignment and the widths and heights of the cless. You should now have a table like this:


Creating 'Frames' On Your Site

One of the best uses of rounded table corners is to create a 'frame' for your site. One very good

example is to make a table like the one above except making the left border column wider. This

can then contain your navigation bar. All the page's content will go in the central cell, containing

your whole site in a coloured frame.

Another thing you could do is to create a half frame like this:

N A This is where your table

content is placed if you want it




V I G A T I O N

there.


This table actually has 5 columns and 5 rows.

One of the best things about rounded table corners is that the same ones can be used over and

over again for many different designs, only changing the colours. You could even save the ones

from this page!

Conclusion

Rounded table corners are an easy but effective effect to produce and should give you lots of new

design ideas. The designs here are only ideas but there are thousands you could create.

Sometimes you will need to make slightly different images but the basic idea is the same.

XHTML is a stricter and cleaner version of HTML.

What Is XHTML?

• XHTML stands for EXtensible HyperText Markup Language

• XHTML is aimed to replace HTML

• XHTML is almost identical to HTML 4.01

• XHTML is a stricter and cleaner version of HTML

• XHTML is HTML defined as an XML application

• XHTML is a W3C Recommendation

What You Should Already Know

Before you continue you should have a basic understanding of the following:

• HTML and the basics of building web pages

If you want to study HTML first, please read our HTML tutorial.

XHTML is a W3C Recommendation

XHTML 1.0 became a W3C Recommendation January 26, 2000.

A W3C Recommendation means that the specification is stable, that it has been reviewed by the

W3C membership, and that the specification is now a Web standard.




W3C defines XHTML as the latest version of HTML. XHTML will gradually replace HTML.

Stay updated with the latest web standards with our W3C tutorial.

All New Browsers Support XHTML

XHTML is compatible with HTML 4.01.

All new browsers have support for XHTML.

W3Schools Has Converted To XHTML

XHTML is a reformulation of HTML 4.01 in XML, and can be put to immediate use with existing

browsers by following a few simple guidelines.

W3Schools was completely rewritten to XHTML 1.0 in 1999.

XHTML is a combination of HTML and XML (EXtensible Markup Language).

XHTML consists of all the elements in HTML 4.01 com bined with the syntax of XML.

Why XHTML?

We have reached a point where many pages on the WWW contain "bad" HTML.

The following HTML code will work fine if you view it in a browser, even if it does not follow the

HTML rules:

<html>

<head>

<title>This is bad HTML</title>

<body>

<h1>Bad HTML

</body>

XML is a markup language where everything has to be marked up correctly, which results in "well-

formed" documents.

XML was designed to describe data and HTML was designed to display data. Today's market consists of different browser technologies, some browsers run Internet on

computers, and some browsers run Internet on mobile phones and hand helds. The last-

mentioned do not have the resources or power to interpret a "bad" markup language.

Therefore - by combining HTML and XML, and their strengths, we got a markup language that is

useful now and in the future - XHTML.




XHTML pages can be read by all XML enabled devices AND while waiting for the rest of the world

to upgrade to XML supported browsers, XHTML gives you the opportunity to write "well-formed"

documents now, that work in all browsers and that are backward browser compatible !!!

You can prepare yourself for XHTML by starting to w rite strict HTML.

How To Get Ready For XHTML

XHTML is the next generation of HTML, but it will of course take some time before browsers and

other software products are ready for it.

In the meantime there are some important things you can do to prepare yourself for it. As you will

learn from this tutorial, XHTML is not very different from HTML 4.01, so bringing your code up to

4.01 standards is a very good start. In addition, you should start NOW to write your HTML code in

lowercase letters, and NEVER make the bad habit of skipping end tags like the </p>.

Happy coding!

The Most Important Differences:

• XHTML elements must be properly nested

• XHTML documents must be well-formed

• Tag names must be in lowercase

• All XHTML elements must be closed

Elements Must Be Properly Nested

In HTML some elements can be improperly nested within each other like this:

<b><i>This text is bold and italic</b></i>

In XHTML all elements must be properly nested within each other like this:

<b><i>This text is bold and italic</i></b>

Note: A common mistake in nested lists, is to forget that the inside list must be within a li element, like this:

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>




</ul>

<li>Milk</li>

</ul>

This is correct:

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

<li>Milk</li>

</ul>

Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example.

Documents Must Be Well-formed

All XHTML elements must be nested within the <html> root element. All other elements can have

sub (children) elements. Sub elements must be in pairs and correctly nested within their parent

element. The basic document structure is:

<html>

<head> ... </head>

<body> ... </body>

</html>

Tag Names Must Be In Lower Case This is because XHTML documents are XML applications. XML is case-sensitive. Tags like <br>

and <BR> are interpreted as different tags.

This is wrong: <BODY>

<P>This is a paragraph</P>

</BODY>

This is correct: <body>

<p>This is a paragraph</p>

</body>

All XHTML Elements Must Be Closed




Non-empty elements must have an end tag.

This is wrong:

<p>This is a paragraph

<p>This is another paragraph

This is correct:

<p>This is a paragraph</p>

<p>This is another paragraph</p>

Empty Elements Must Also Be Closed

Empty elements must either have an end tag or the s tart tag must end with />.

This is wrong:

This is a break<br>

Here comes a horizontal rule:<hr>

Here's an image <img src="happy.gif" alt="Happy face">

This is correct:

This is a break<br /> Here comes a horizontal rule:<hr /> Here's an image <img src="happy.gif" alt="Happy face" /> IMPORTANT Compatibility Note:

To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol like this: <br />, and this: <hr />.

Writing XHTML demands a clean HTML syntax.

Some More XHTML Syntax Rules:

• Attribute names must be in lower case

• Attribute values must be quoted

• Attribute minimization is forbidden

• The id attribute replaces the name attribute

• The XHTML DTD defines mandatory elements

Attribute Names Must Be In Lower Case

This is wrong:




<table WIDTH="100%">

This is correct:

<table width="100%">

Attribute Values Must Be Quoted

This is wrong:

<table width=100%>

This is correct:

<table width="100%">

Attribute Minimization Is Forbidden

This is wrong:

<dl compact>

<input checked>

<input readonly>

<input disabled>

<option selected>

<frame noresize>

This is correct:

<dl compact="compact">

<input checked="checked" />

<input readonly="readonly" />

<input disabled="disabled" />

<option selected="selected" />

<frame noresize="noresize" />

Here is a list of the minimized attributes in HTML and how they should be written in XHTML:

HTML XHTML compact compact="compact"




checked checked="checked"

declare declare="declare"

readonly readonly="readonly"

disabled disabled="disabled"

selected selected="selected"

defer defer="defer"

ismap ismap="ismap"

nohref nohref="nohref"

noshade noshade="noshade"

nowrap nowrap="nowrap"

multiple multiple="multiple"

noresize noresize="noresize"

The id Attribute Replaces The name Attribute

HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In

XHTML the name attribute is deprecated. Use id instead.

This is wrong:

<img src="picture.gif" name="picture1" />

This is correct:

<img src="picture.gif" id="picture1" />

Note: To interoperate with older browsers for a while, you should use both name and id, with

identical attribute values, like this:

<img src="picture.gif" id="picture1" name="picture1" />

IMPORTANT Compatibility Note:

To make your XHTML compatible with today's browsers, you should add an extra space before

the "/" symbol.

The Lang Attribute

The lang attribute applies to almost every XHTML element. It specifies the language of the

content within an element.

If you use the lang attribute in an element, you must add the xml:lang attribute, like this:

<div lang="no" xml:lang="no">Heia Norge!</div>




Mandatory XHTML Elements

All XHTML documents must have a DOCTYPE declaration. The html, head and body elements

must be present, and the title must be present inside the head element.

This is a minimum XHTML document template:

<!DOCTYPE Doctype goes here>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Title goes here</title>

</head>

<body>

Body text goes here

</body>

</html>

Note : The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML

element, and it should not have a closing tag.

Note : The xmlns attribute inside the <html> tag is required in XHTML. However, the validator on

w3.org does not complain when this attribute is missing in an XHTML document. This is because

"xmlns=http://www.w3.org/1999/xhtml" is a fixed value and will be added to the <html> tag even if

you do not include it.

You will learn more about the XHTML document type definition in the next chapter.

The XHTML standard defines three Document Type Defi nitions.

The most common is the XHTML Transitional.

The <!DOCTYPE> Is Mandatory

An XHTML document consists of three main parts:

• the DOCTYPE

• the Head

• the Body

The basic document structure is:

<!DOCTYPE ...>

<html>

<head>




<title>... </title>

</head>

<body> ... </body>

</html>

The DOCTYPE declaration should always be the first line in an XHTML document.

An XHTML Example

This is a simple (minimal) XHTML document:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>simple document</title>

</head>

<body>

<p>a simple paragraph</p>

</body>

</html>

The DOCTYPE declaration defines the document type:

<!DOCTYPE html



The rest of the document looks like HTML:

<html>

<head>


</head>

<body>


</body>

</html>




The 3 Document Type Definitions

• DTD specifies the syntax of a web page in SGML.

• DTD is used by SGML applications, such as HTML, to specify rules that apply to the

markup of documents of a particular type, including a set of element and entity

declarations.

• XHTML is specified in an SGML document type definition or 'DTD'.

• An XHTML DTD describes in precise, computer-readable language, the allowed syntax

and grammar of XHTML markup.

There are currently 3 XHTML document types:

• STRICT

• TRANSITIONAL

• FRAMESET

XHTML 1.0 specifies three XML document types that correspond to three DTDs: Strict,

Transitional, and Frameset.

XHTML 1.0 Strict

<!DOCTYPE html



Use this when you want really clean markup, free of presentational clutter. Use this together with

Cascading Style Sheets.

XHTML 1.0 Transitional

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Use this when you need to take advantage of HTML's presentational features and when you want

to support browsers that don't understand Cascading Style Sheets.

XHTML 1.0 Frameset




<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Use this when you want to use HTML Frames to partition the browser window into two or more

frames.

How W3Schools Was Converted To XHTML

W3Schools was converted from HTML to XHTML the weekend of 18. and 19. December 1999, by

Hege Refsnes and Ståle Refsnes.

To convert a Web site from HTML to XHTML, you should be familiar with the XHTML syntax rules

of the previous chapters. The following steps were executed (in the order listed below):

A DOCTYPE Definition Was Added

The following DOCTYPE declaration was added as the first line of every page:

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Note that we used the transitional DTD. We could have chosen the strict DTD, but found it a little

too "strict", and a little too hard to conform to.

A Note About The DOCTYPE

Your pages must have a DOCTYPE declaration if you want them to validate as correct XHTML.

Be aware however, that newer browsers (like Internet Explorer 6) might treat your document

differently depending on the <!DOCTYPE> declaration. If the browser reads a document with a

DOCTYPE, it might treat the document as "correct". Malformed XHTML might fall over and

display differently than without a DOCTYPE.

Lower Case Tag And Attribute Names

Since XHTML is case sensitive, and since XHTML only accepts lower case HTML tags and

attribute names, a general search and replace function was executed to replace all upper case




tags with lowercase tags. The same was done for attribute names. We have always tried to use

lower case names in our Web, so the replace function did not produce many real substitutions.

All Attributes Were Quoted

Since the W3C XHTML 1.0 Recommendation states that all attribute values must be quoted,

every page in the web was checked to see that attributes values were properly quoted. This was

a time-consuming job, and we will surely never again forget to put quotes around our attribute

values.

Empty Tags: <hr> , <br> and <img>

Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr />

and <br />.

This produced a problem with Netscape that misinterpreted the <br/> tag. We don't know why, but

changing it to <br /> worked fine. After that discovery, a general search and replace function was

executed to swap the tags.

A few other tags (like the <img> tag) were suffering from the same problem as above. We

decided not to close the <img> tags with </img>, but with /> at the end of the tag. This was done

manually.

The Web Site Was Validated

After that, all pages were validated against the official W3C DTD with this link: XHTML Validator.

A few more errors were found and edited manually. The most common error was missing </li>

tags in lists.

Should we have used a converting tool? Well, we could have used TIDY.

Dave Raggett's HTML TIDY is a free utility for cleaning up HTML code. It also works great on the

hard-to-read markup generated by specialized HTML editors and conversion tools, and it can help

you identify where you need to pay further attention on making your pages more accessible to

people with disabilities.

The reason why we didn't use Tidy? We knew about XHTML when we started writing this web

site. We knew that we had to use lowercase tag names and that we had to quote our attributes.

So when the time came (to do the conversion), we simply had to test our pages against the W3C




XHTML validator and correct the few mistakes. AND - we have learned a lot about writing "tidy"

HTML code.

An XHTML document is validated against a Document T ype Definition.

Validate XHTML With A DTD

An XHTML document is validated against a Document Type Definition (DTD). Before an XHTML

file can be properly validated, a correct DTD must be added as the first line of the file.

The Strict DTD includes elements and attributes that have not been deprecated or do not appear

in framesets:

!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

The Transitional DTD includes everything in the strict DTD plus deprecated elements and

attributes:


"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

The Frameset DTD includes everything in the transitional DTD plus frames as well:


"-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

This is a simple XHTML document:

<!DOCTYPE html



<html>

<head>


</head>

<body>





</body>

</html>

Test Your XHTML With The W3C Validator

Input your page address in the box below:

http://w w w .w 3schools.com/xhtml/default.asp

Validate the page

The XHTML modularization model defines the modules of XHTML.

Why XHTML Modularization?

XHTML is a simple but large language, containing most of the functionality a web developer will

need.

For some purposes XHTML is too large and complex, and for other purposes it is much too

simple.

By splitting XHTML into modules, the W3C (World Wide web Consortium) has created small and

well-defined sets of XHTML elements that can be used separately for simple devices as well as

combined with other XML standards into larger and more complex applications.

With modular XHTML, product and application designers can:

� Choose the elements to be supported by a device using standard XHTML building blocks.

� Add extensions to XHTML, using XML, without breaking the XHTML standard.

� Simplify XHTML for devices like hand held computers, mobile phones, TV, and home

appliances.

� Extend XHTML for complex applications by adding new XML functionality (like MathML,

SVG, Voice and Multimedia).

� Define XHTML profiles like XHTML Basic (a subset of XHTML for mobile devices).

XHTML Modules




W3C has split the definition of XHTML into 28 modules:

Module name Description

Applet Module Defines the deprecated* applet element.

Base Module Defines the base element.

Basic Forms Module Defines the basic forms elements.

Basic Tables Module Defines the basic table elements.

Bi-directional Text Module Defines the bdo element.

Client Image Map Module Defines browser side image map elements.

Edit Module Defines the editing elements del and ins.

Forms Module Defines all elements used in forms.

Frames Module Defines the frameset elements.

Hypertext Module Defines the a element.

Iframe Module Defines the iframe element.

Image Module Defines the img element.

Intrinsic Events Module Defines event attributes like onblur and onchange.

Legacy Module Defines deprecated* elements and attributes.

Link Module Defines the link element.

List Module Defines the list elements ol, li, ul, dd, dt, and dl.

Metainformation Module Defines the meta element.

Name Identification Module Defines the deprecated* name attribute.

Object Module Defines the object and param elements.

Presentation Module Defines presentation elements like b and i.

Scripting Module Defines the script and noscript elements.

Server Image Map Module Defines server side image map elements.

Structure Module Defines the elements html, head, title and body.

Style Attribute Module Defines the style attribute.

Style Sheet Module Defines the style element.

Tables Module Defines the elements used in tables.

Target Module Defines the target attribute.

Text Module Defines text container elements like p and h1.

* Deprecated elements should not be used in XHTML. What You Should Already Know




XML


Introduction

XML is a new type of language which has been developed for the web which is different to any

other type of scripting or programming language available before. Instead of being concerned with

the processing and display of data, XML's primary purpose is to tell the computer what data

entered actually means.

The Two Problems

There are two main reasons for the development of XML:

1. Computers do not understand the information placed in them.. For example there is no

way for a search engine, or any other computer,

to know that this is page contains the introduction part of an XML tutorial. All it is is a

collection of letters and numbers, with HTML formatting around it. The computer cannot

even tell what on this page is a heading, what is text and what is an advert. This is the

main problem which XML was designed to overcome. If a page or document is written in

XML, a computer can understand exactly what it is about. As will probably be obvious,

this has very major implications for search engine technology. If a search engine knew

exactly what was on a page, it would be able to instantly provide the exact results a

person was looking for, with no inaccurate matches and no half-relevant pages. This is

just the revolution the over-bloated web needs.

2. Web pages are not compatible across different devices. One of the major difficulties that

web designers have today is that people are now accessing the pages from a variety of

different devices. PCs, Macs, mobile phones, palmtop computers and even televisions.

Because of this, web designers must now either produce their pages in several different

formats to cope with this, or they must cut back on the design in order to have the page

compatible across the different formats. Because XML is used to define what data means

and not how it is displayed, it makes it very easy to use the same data on several different

platforms.




What Is XML?

So what actually is XML? The thing about it which people find the most difficult to understand is

that XML does not actually do anything. XML is not a way to design your home page and it won't

change the way in which you build sites. This has made many people believe that XML is useless,

as they can't see a way that it will benefit them. XML has a wide variety of benefits though, two of

which were outlined above.

The real use of XML, though, is to describe data. It is used, in a similar way in which HTML is,

except for the fact that there is a major difference between the two:

HTML is used to describe how data is formatted.

XML is used to describe what data actually means.

The Language

As mentioned above, XML looks, and is structured very similarly to HTML. They both use the

system where tags are used to enclose the data they refer to. They both can use nested tags and

both can also have attributes added to their tags.

The most revolutionary thing about XML, though is that you are not restricted to just using the

normal, pre-defined tags like font and br. Instead you are responsible for making up the tags

yourself. You can name them anything you like and can use them to represent anything you like.

This is a feature which cannot be found in any other scripting language on the web.

Is It Difficult To Learn?

The answer to this, in short, is no. The only thing you have to learn about XML is how to structure

your tags, and they are in fact almost identical to HTML tags. Most of it is just logical thinking.

Before learning XML it is important that you already know HTML. It is also useful if you know a

web scripting language such as PHP, ASP or JavaScript. If you do not yet know these try some of

the tutorials on the site. If you are looking to be able to format a web page, not describe data, you

will be better of learning XHTML, the new standard replacing HTML.




Part 2 – Writing XML Introduction

As you will have read in part I, the way in which XML is written is very similar to HTML. They both

use the same system of enclosing pieces of information or data in tags to apply formatting (in the

case of HTML or data rules (in the case of XML) to it.

XML Tags

The tags used in XML, as well as being very similar in construction to HTML, also look like HTML

tags. They are formed by a word (or a number of words) enclosed inside <> and </> signs. Just

like, for example the <font></font> tag in HTML. The difference, of course, though is that XML

tags are not pre-defined like HTML ones are. An example could be the XML tag <message> and

the end tag </message> which could be used to enclose an e-mail message stored on a web

based e-mail system.

Nesting And Structure

Much like HTML tags, XML tags can be nested. Using the example of the e-mail above, this is a

piece of XML code:

<message>

<header>

<from>[email protected]</from>

<to>[email protected]</to>

<subject>Comments on XML</subject>

</header>

<body>

I think that XML has great potential. It will work very well and will help many people to make much

better use of the internet.

</body>

</message>

As you can see. this piece of code includes nested tags. The first element (tag) in the XML code

is the <message> element. This is what is called the root element. It defines the bottom level of

the document and is saying 'This is an e-mail message'. All the other tags are nested inside this

<message> tag. The next tag which appears is the <header> tag. This is saying that the




information contained within it is the e-mail header. This also has nested tags. for example the

<subject> tag, which appears as part of the header tag. as the subject is part of the header.

Something which is often done in HTML is incorrect nesting. For example: the code: <b><i>Bold

and italic</b></i> would work correctly in a web browser. even though the italic tags should both

be inside the bold tags. This must not be done in XML. It is very important that all XML tags are

correctly nested.

XML Correctness

Another point which should be brought up now, is the strictness of XML when writing code. The

whole idea of XML is that it should be independent of the platform it is running on. The same code

should run the same way on a PC, a Mac, a mobile phone and even a toaster. As XML does not

actually do anything (it is just a language for defining data), it is up to software developers to

make software to use this data on a particular platform. This means that it is important that all

XML code is structured the same way, so that software can easily be developed. Because of this

requirement for correct code, it has been decided (and is now a standard) that if any mistakes (for

example incorrectly nested tags) are found in XML code, it will not execute, and will just give an

error message. This means that when writing XML, you must be very careful about correct syntax.

Declaring XML

The final part of the XML syntax you should learn just now is how to declare an XML document.

The correct way of doing this is to use the tag:

<?xml version="1.0"?>

This tells whatever software receives this data that you are writing XML and that it should match

the specification for version 1.0. As this is not actually an XML tag it does not require a closing

tag.




Part 3 – XML and Browsers

Introduction

Now you should know what XML is for and how to write a basic XML document. In this part I will

show you how to create a full XML document and load it in a browser, as well and the different

ways it can be displayed.

Making The Document

Creating your XML document is as easy as making an HTML page. All you need is a text editor

(for example Notepad). Create a new document and enter the XML document into it, for example,

the e-mail message from part 2:


<message>

<header>




</header>

<body>



</body>

</message>

Then, all you have to do is to save the document with a .xml extension. Now, try loading this file in

your browser.

Click Here To Load The File

This is probably quite a surprising result, whatever browser you are using. I will now cover the

results for both Internet Explorer and Netscape/Mozilla.

XML In Internet Explorer

Internet Explorer is probably one of the best browsers for viewing XML pages. It provides a

hierarchical display of the XML file, color coding the elements and allowing you to expand and

collapse the nested elements.




If you don't have Internet Explorer you can see what it looks like in the image below (without the

collapsable elements, though).

This is proably quite surpising to see, as it doesn't look like any other web page you will have

seen before. You may also be surprised that you can't really do much, but this is exactly what

XML is. Some sort of program or code must be written to process the data.

Netscape/Mozilla

The Mozilla and Netscape browsers are not as good as Internet Explorer at supporting XML.

Mozilla, for example, presents the XML data as plain text:

This is also a valid display of XML, because, as you will have noticed from the code above, there

is really no way to tell the browser how to display the data, so it just shows it as plain text.

Which Is Best?

Probably the best way to develop your XML files is to use Internet Explorer. Apart from the fact

that it will provide you with a nicely formatted version of your XML file, it also has another benefit.

If there is an error in your XML file, Internet Explorer provides a helpful message telling you

exactly where the error is and displaying the incorrect piece of code. The latest version of Mozilla

will also do this, although its XML formatting is not as good.

How Can I Guarantee The User Will See The Page?

This is the major problem with XML. With so many browsers around there is no way to guarantee

that your data will be displayed the way you want it (which is the reason why there are images of

the output in this tutorial). Luckily, there are very few occasions where you will want your users to

see the raw XML data, and in most cases a piece of software or a script will process the data first.




For now, processing the data first is really the best course of action to take.




Part 4 – Formatting XML Introduction

As you will have seen in the last part of the tutorial, browsers are not particularly good at

formatting XML, and only the very latest browsers support it at all. Although most of the time XML

will be used to define data, not to display it, there may be occasions where you decide that you

want to format the XML data for viewing. There are three main ways of doing this.

CSS

Cascading Style Sheets (CSS) are one of the more recent web technologies, and are used

extensively for formatting standard HTML pages. If you would like to find out more about

Cascading Style Sheets read the tutorial on Free Webmaster Help (see related links).

CSS can also be used to format XML documents, though. CSS can 'redefine' HTML tags,

allowing them to be presented in different ways. Similarly, it can be used to define how XML tags

are displayed. In this section of the tutorial, I will be using an expanded version of my earlier e-

mail example:

<email>

<message>

<header>




</header>

<body>



</body>

</message>

<message>

<header>






<subject>An excellent site</subject>

</header>

<body>

I have just visited your site and I think it is amazing. Keep up the good work!

</body>

</message>

</email>

If I wanted to display this on a web page, I could use the following CSS code:

email

{

background-color: #ffffff;

width: 100%;

}

message

{

display: block;

background-color: #DDDDDD;

margin-bottom: 30pt;

}

header

{

display: block;

background-color: #999999;

margin-bottom: 10pt;

}

from

{

display: block;

color: #0000FF;

font-size: 12pt;




}

to

{

display: block;

color: #FF0000;

font-size: 12pt;

}

subject

{

display: block;

font-size: 14pt;

font-weight: bold;

}

body

{

display: block;

font size: 12pt;

}

There may be a few pieces of code here that are unfamiliar, so I will just cover them. display:

block; is important as it tells the system to display the data inside this tag as a block on the page,

and most importantly, taking a new line after it. This is also related to the margin-bottom

declaration, which allows a space after pieces of data have been displayed.

The actual format of this CSS code is quite simple, though. The XML element name is given,

followed by the formatting data inside curly brackets { }. The easiest way to use this with your

code is to save it as a .css file (which is just a plain text file, which can be made in any text editor.

Finally, add the following to the beginning of the XML code:


<?xml-stylesheet type="text/css" href="estyle.css"?>

The first line is the standard declaration of the XML document. The second line points to the

stylesheet which will format this document (in this case estyle.css).




You can click here to see the output of this (only recent browsers will support this).

XSL

XSL stands for eXstensible Stylesheet Language, and is a new language developed to format

XML docuements. For this example, I will use the same XML code from above.

To format the code, you must create an XSL stylesheet. Although XSL is a language in itself, I will

just cover the basics here. The following code goes in a file estyle.xsl:


<HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<BODY STYLE="font-family:Arial, helvetica, sans-serif; font-size:12pt;

background-color:#FFFFFF">

<xsl:for-each select="email/message">

<xsl:for-each select="header">

<DIV STYLE="background-color:#EEEEEE; padding:4px">

<SPAN STYLE="color:black">To: <xsl:value-of select="to"/></SPAN>

</DIV>


<SPAN STYLE="color:black">From: <xsl:value-of select="from"/></SPAN>

</DIV>


<SPAN STYLE="font-weight: bold; color:black"><xsl:value-of select="subject"/></SPAN>

</DIV>

</xsl:for-each>

<DIV STYLE="margin-left:20px; margin-bottom:1em; font-size:10pt">

<xsl:value-of select="body"/>

</DIV>

</xsl:for-each>

</BODY>

</HTML>

At first glance it looks very strange, but really it is just HTML DIV and SPAN tags, combined with a

little XSL code. I won't cover DIV and SPAN tags fully here, as this is not an HTML tutorial, but the




basics of them are that you are assigning areas of the page which contain formatting. The XSL

document is really just an HTML page with a bit of XSL code added to it. For anyone who has

used PHP or another scripting language to output HTML, this will all be quite familiar. The actual

XSL is as follows:


<HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">

This is the standard header for an XSL document.

<xsl:for-each select="email/message">

This works just like a for loop in a scripting or programming language. It tells the browser to loop

through all the items <message> inside the <email> tag.

<xsl:for-each select="header">

This is another for loop to go through all the occurences of the <header> tag inside the

<message> tag. In this example of code, there is only one <header> for each message, but this

code needs to be included so that the browser looks inside the <header> tag.

To: <xsl:value-of select="to"/>

This is probably the best feature of XSL over CSS. You will have noticed that in the CSS

formatted document, all I could do was to display the e-mail addresses at the top of the message.

Using XSL (as it is really just an HTML document with extra coding in it), I can tell the browser to

output To: before the value. The second part of this line tells the browser to output the value of

the tag <to> in the position of the XSL tag.

</xsl:for-each>

This is the end of the loop through the header. At this point the browser looks to see if there is

another <header> in the <message> section of the document. As there is not, it continues.

</xsl:for-each>

The second occurance of this tag tells the browser to loop through to the next <message> tag. As

you can see, it can get difficult to follow your nested loops like this, so often it is helpful to indent

your code.

Finally, add the following to your XML code:


<?xml:stylesheet type="text/xsl" href="estyle.xsl" ?>




As with the CSS, this tells the browser to look for the XSL file estyle.xsl to get formatting details.

You can view the output of these files here.

Data Islands

Another way of formatting XML is to use Data Islands. Currently, only Internet Explorer 5 and

upwards support this, and it is an unofficial standard. Again, I will use the same XML to

demonstrate this. Using this method, you use the unofficial <xml> tag in a normal HTML

document. You can either surround your XML data with <xml> and </xml> or you can embed a

remote file.

To embed data straight into the file you use the folloing format:

<xml id="emails">

XML code goes in here but without first declaration line

</xml>

To embed XML from a remote file use:

<xml id="emails" src="emails.xml">

</xml>

As you will have noticed, you must give an ID to your XML.

Now you have got the XML data into the file, you can format it by normal HTML, but using <span>

tags to insert particular fields. This is an example of formatting the e-mail file:

<html>

<body>

<xml id="emails" src="emaildata.xml"></xml>

<table bgcolor= "#EEEEEE" border="0" datasrc="#emails">

<tr bgcolor="#CCCCCC"><td>To: <span datafld="to"></span></td></tr>

<tr bgcolor="#CCCCCC"><td>From: <span datafld="from"></span></td></tr>

<tr bgcolor="#CCCCCC"><td><b>Subject: <span datafld="subject"></span></b></td></tr>

<tr><td><span datafld="body"></span></td></tr>

</table>

</body>

Although I used the same XML data for this as for all the others, I removed the <header> item as

the data objects only appear to work on the first level of the document.




You can view the result here.




Part 5 – More XML

Introduction

In the last four parts of this tutorial, I have shown you how to create a basic XML document and

how it can be displayed in the browser. This section explains a few more XML techniques, and

also provides a real-world usage of XML.

Attributes

Attributes are another way of storing data using XML. Up until now, we have just used very basic

tags, surrounding information with tags which describe them. For example, this is the code we

have been using so far:

<message>

<header>




</header>

<body>



</body>

</message>

If you go back to thinking of XML as HTML, you will notice that this is made up completely of

'simple' tags. In HTML varient os tags are used which have attributes, for example to output text

in the Arial font the following code would be used:

<font face="Arial">The text</font>

Similarly, in XML attributes can be used to store data. If I wanted, for example, to get rid of the

subject tags in this example, I could use the following code:

<message subject="Comments on XML">

<header>






</header>

<body>



</body>

</message>

As you can see, I have used the attribute of the tag <message> to store the subject instead of it

having its own tag.

This, although correct XML, would not really be a correct usage of the attributes of a tag. The

attribute is used to give information about what is contained in the tag. Although it could be

argued that it is telling you what the message is about, it would be more correct to provide this

document in the original form, where there is a subject tag.

Although I have said that this would not really be a correct usage, you can use these fully

interchangably, for example all the data for this e-mail message could have been stored as

attributes of the message tag. To really benefit from XML, though, it is probably best to use

attributes as little as possible, and to concentrate on structuring your documents correctly.

CDATA

One problem which becomes apparent when using XML is that the parser parses all data in an

XML document. So in the following:

<body>Sales last year were less than sales this year</body>

Would be fully parsed by the parser, both the tags and text. This does not cause a problem,

though. If this was written as:

<body>Sales last year < Sales this year</body>

This would cause a problem, because the XML parser would read this and think that the less than

sign (<) in the text was the beginning of a new tag, so would cause an error. This can be

overcome, though as, like HTML, XML has a variety of special codes for displaying these

characters. There are 5 in XML:

Symbol Code

< <

> >




& &

' '

" "

By using these you can display the correct symbols, and the XML parser still works. So you could

enter this text as:

<body>Sales last year < Sales this year</body>

There are occasions, though, when you will have a lot of these special symbols in one section of

your XML code, for example if you want to display programming code on your site. For this, the

CDATA has been invented. This is like the HTML <xmp> tag, which causes the parser to ignore

everything contained in it (so it misses all the special characters, but also will miss any tags

contained in it). It is constructed as follows:

<![CDATA[

Text to be ignored

]]>

Real World Usage

After reading this whole tutorial, you may still be wondering what the point of XML is. It doesn't

improve the look of your web page and the lack of browser support means that you can't use it as

an alternative to a server-side database. There are uses which have been developed, though,

although it will take a lot more development to make XML a mainstream language.

XMLNews is a system which allows news stories to be stored as XML. By using tags like

<headline>, <byline>, <location> and <story> web pages and software systems can be developed

which will take the XML data and will output it as a correctly formatted web page. In fact, the

same story could be displayed on a WAP phone, news website, headlines news ticker, news e-

mail, SMS message or in a piece of software, all from the same source file. As you can see, this

creates a huge benefit, as a story can be written once by a journalist, but distributed around the

world in many different formats. You can find more information at XMLNews.org.

Conclusion

Although XML still has a long way to go to become a mainstream programming language, it has

great potential. After reading this tutorial you should know how to create a basic XML document




and also how to output it in a browser. With this knowledge you will be able to create XML

solutions for your website

XSL – XSLT

It Started with XSL

XSL stands for EXtensible Stylesheet Language.

The World Wide Web Consortium (W3C) started to develop XSL because there was a need for an

XML-based Stylesheet Language.

CSS = HTML Style Sheets

HTML uses predefined tags and the meaning of the tags are well understood .

The <table> element in HTML defines a table - and a browser knows how to display it .

Adding styles to HTML elements are simple. Telling a browser to display an element in a special

font or color, is easy with CSS.

XSL = XML Style Sheets

XML does not use predefined tags (we can use any tag-names we like), and the meaning of these

tags are not well understood .

A <table> element could mean an HTML table, a piece of furniture, or something else - and a

browser does not know how to display it .

XSL describes how the XML document should be displayed!

XSL - More Than a Style Sheet Language

XSL consists of three parts:

• XSLT - a language for transforming XML documents

• XPath - a language for navigating in XML documents

• XSL-FO - a language for formatting XML documents

XSLT

• XSLT - the language for transforming XML documents.

• XSLT is a language for transforming XML documents into XHTML documents or to other

XML documents.




• XPath is a language for navigating in XML documents.

What You Should Already Know


• HTML / XHTML

• XML / XML Namespaces

• XPath

What is XSLT?

• XSLT stands for XSL Transformations

• XSLT is the most important part of XSL

• XSLT transforms an XML document into another XML document

• XSLT uses XPath to navigate in XML documents

• XSLT is a W3C Recommendation

XSLT = XSL Transformations

XSLT is the most important part of XSL.

XSLT is used to transform an XML document into another XML document, or another type of

document that is recognized by a browser, like HTML and XHTML. Normally XSLT does this by

transforming each XML element into an (X)HTML element.

With XSLT you can add/remove elements and attributes to or from the output file. You can also

rearrange and sort elements, perform tests and make decisions about which elements to hide and

display, and a lot more.

A common way to describe the transformation process is to say that XSLT transforms an XML

source-tree into an XML result-tree .

XSLT Uses XPath

XSLT uses XPath to find information in an XML document. XPath is used to navigate through

elements and attributes in XML documents.

If you want to study XPath first, please read our XPath Tutorial </xpath/default.asp>.

How Does it Work?

In the transformation process, XSLT uses XPath to define parts of the source document that




should match one or more predefined templates. When a match is found, XSLT will transform the

matching part of the source document into the result document.

XSLT is a Web Standard

XSLT became a W3C Recommendation 16. November 1999.

To read more about the XSLT activities at W3C, please read our W3C Tutorial

</w3c/w3c_xsl.asp>

Not all Internet browsers have full support for XML and XSLT.

Firefox 1.0.2

This web browser has support for XML and XSLT (and CSS).

Mozilla 1.8

Mozilla includes Expat for XML parsing and has support to display XML + CSS. Mozilla also has

some support for Namespaces.

Mozilla 1.8 is available with an XSLT implementation.

Netscape 8

Netscape 8 is based on the Mozilla engine. Same XML / XSLT support as Mozilla.

Opera 8

This web browser supports XML.

Internet Explorer 6

Microsoft's web browser has full XML support, including support for Namespaces. Style sheets in

CSS and as well as XSLT 1.0 are supported.

The XML Parser 3.0 in Internet Explorer 6.0 and Windows XP is based on both the W3C XSLT

1.0 and the W3C XPath 1.0 Recommendations.

If you are serious about learning XSLT you should upgrade to Internet Explorer 6.0.

Internet Explorer 5

XSLT in Internet Explorer 5 is NOT compatible with the official W3C XSL Recommendation.




Internet Explorer MSXML Parser

MSXML Parser 2.5 is the XML parser that is shipped with Windows 2000 and IE 5.5.

MSXML Parser 3.0 is the XML parser that is shipped with IE 6.0 and Windows XP.

According to Microsoft, the MSXML Parser 3.0 is 100% compatible with the official W3C XSLT

Recommendation.

For more info: <http://msdn.microsoft.com/xml/general/xmlparser.asp>

Read more about the latest releases of different browsers in our Browser section

</browsers/default.asp>.

Example study: How to transform XML into XHTML using XSLT.

The details of this example will be explained in the next chapter.

Correct Style Sheet Declaration

The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or

<xsl:transform>.

Note: <xsl:stylesheet> and <xsl:transform> are completely synonymous and either can be used!

The correct way to declare an XSL style sheet according to the W3C XSLT Recommendation is:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

or:

<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

To get access to the XSLT elements, attributes and features we must declare the XSLT

namespace at the top of the document.

The xmlns:xsl="http://www.w3.org/1999/XSL/Transform" points to the official W3C XSLT

namespace. If you use this namespace, you must also include the attribute version="1.0".

Start with a Raw XML Document

We want to transform the following XML document ("cdcatalog.xml") into XHTML:

<?xml version="1.0" encoding="ISO-8859-1"?> <catalog> <cd> <title>Empire

Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country>

<company>Columbia</company> <price>10.90</price> <year>1985</year> </cd> . . .




</catalog>

Viewing XML Files in Firefox and Internet Explorer: Open the XML file (typically by clicking on

a link) - The XML document will be displayed with color-coded root and child elements. A plus (+)

or minus sign (-) to the left of the elements can be clicked to expand or collapse the element

structure. To view the raw XML source (without the + and - signs), select "View Page Source" or

"View Source" from the browser menu.

Viewing XML Files in Netscape 6: Open the XML file, then right-click in XML file and select

"View Page Source". The XML document will then be displayed with color-coded root and child

elements.

Viewing XML Files in Opera 7: Open the XML file, then right-click in XML file and select "Frame"

/ "View Source". The XML document will be displayed as plain text.

View "cdcatalog.xml" <cdcatalog.xml>

Create an XSL Style Sheet

Then you create an XSL Style Sheet ("cdcatalog.xsl") with a transformation template:

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0"

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

<h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th

align="left">Title</th> <th align="left">Artist</th> </tr> <xsl:for-each select="catalog/cd">

<tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr>

</xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>

View "cdcatalog.xsl" <cdcatalog.xsl>

Link the XSL Style Sheet to the XML Document

Add the XSL style sheet reference to your XML document ("cdcatalog.xml"):

<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl"

href="cdcatalog.xsl"?> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob

Dylan</artist> <country>USA</country> <company>Columbia</company>

<price>10.90</price> <year>1985</year> </cd> . . . </catalog>




An XSL style sheet consists of one or more set of rules that are called templates.

Each template contains rules to apply when a specified node is matched.

The <xsl:template> Element

The <xsl:template> element is used to build templates.

The match attribute is used to associate a template with an XML element. The match attribute

can also be used to define a template for the entire XML document. The value of the match

attribute is an XPath expression (i.e. match="/" defines the whole document).

Ok, let's look at a simplified version of the XSL file from the previous chapter:



<h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th>

<th>Artist</th> </tr> <tr> <td>.</td> <td>.</td> </tr> </table> </body> </html>

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

Since an XSL style sheet is an XML document itself, it always begins with the XML declaration:

<?xml version="1.0" encoding="ISO-8859-1"?> .

The next element, <xsl:stylesheet> , defines that this document is an XSLT style sheet document

(along with the version number and XSLT namespace attributes).

The <xsl:template> element defines a template. The match="/" attribute associates the template

with the root of the XML source document.

The content inside the <xsl:template> element defines some HTML to write to the output.

The last two lines defines the end of the template and the end of the style sheet.

The result of the transformation above will look like this:

My CD Collection

Title Artist . .

View the XML file <cdcatalog.xml>, View the XSL file <cdcatalog_ex1.xsl>, and View the result

<cdcatalog_with_ex1.xml>




The result from this example was a little disappointing, because no data was copied from the XML

document to the output.

In the next chapter you will learn how to use the <xsl:value-of> element to select values from the

XML elements.

The <xsl:value-of> element is used to extract the value of a selected node.

The <xsl:value-of> Element

The <xsl:value-of> element can be used to extract the value of an XML element and add it to the

output stream of the transformation:




<th>Artist</th> </tr> <tr> <td><xsl:value-of select="catalog/cd/title"/></td> <td><xsl:value-of

select="catalog/cd/artist"/></td> </tr> </table> </body> </html> </xsl:template> </xsl:stylesheet>

Note: The value of the select attribute is an XPath expression. An XPath expression works like

navigating a file system; where a forward slash (/) selects subdirectories.


My CD Collection

Title Artist

Empire Burlesque Bob Dylan



The result from this example was also a little disappointing, because only one line of data was

copied from the XML document to the output.

In the next chapter you will learn how to use the <xsl:for-each> element to loop through the XML

elements, and display all of the records.

The <xsl:for-each> element allows you to do looping in XSLT.

The <xsl:for-each> Element

The XSL <xsl:for-each> element can be used to select every XML element of a specified node-




set:




<th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of

select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each> </table>

</body> </html> </xsl:template> </xsl:stylesheet>

Note: The value of the select attribute is an XPath expression. An XPath expression works like

navigating a file system; where a forward slash (/) selects subdirectories.


My CD Collection

Title Artist


Hide your heart Bonnie Tyler

Greatest Hits Dolly Parton

Still got the blues Gary More

Eros Eros Ramazzotti

One night only Bee Gees

Sylvias Mother Dr.Hook

Maggie May Rod Stewart

Romanza Andrea Bocelli

When a man loves a woman Percy Sledge

Black angel Savage Rose

1999 Grammy Nominees Many

For the good times Kenny Rogers

Big Willie style Will Smith

Tupelo Honey Van Morrison

Soulsville Jorn Hoel

The very best of Cat Stevens

Stop Sam Brown

Bridge of Spies T`Pau

Private Dancer Tina Turner

Midt om natten Kim Larsen

Pavarotti Gala Concert Luciano Pavarotti

The dock of the bay Otis Redding




Picture book Simply Red

Red The Communards

Unchain my heart Joe Cocker



Filtering the Output

We can also filter the output from the XML file by adding a criterion to the select attribute in the

<xsl:for-each> element.

<xsl:for-each select="catalog/cd[artist='Bob Dylan' ]">

Legal filter operators are:

• = (equal)

• != (not equal)

• < less than

• > greater than

Take a look at the adjusted XSL style sheet:




<th>Artist</th> </tr> <xsl:for-each select="catalog/cd[artist='Bob Dylan']"> <tr> <td><xsl:value-of

select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each> </table>



My CD Collection

Title Artist


View the XML file <cdcatalog.xml>, View the XSL file <cdcatalog_filter.xsl>, View the result

<cdcatalog_filter.xml>

The <xsl:sort> element is used to sort the output.

Where to put the Sort Information

To sort the output, simply add an <xsl:sort> element inside the <xsl:for-each> element in the XSL




file:




<th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <xsl:sort select="artist"/> <tr>

<td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-

each> </table> </body> </html> </xsl:template> </xsl:stylesheet>

Note: The select attribute indicates what XML element to sort on.


My CD Collection

Title Artist









Still got the blues Gary Moore










Stop Sam Brown




Red The Communards




View the XML file <cdcatalog.xml>, View the XSL file <cdcatalog_sort.xsl>, and View the result




<cdcatalog_sort.xml>

The <xsl:if> element is used to put a conditional test against the content of the XML file.

The <xsl:if> Element

To put a conditional if test against the content of the XML file, add an <xsl:if> element to the XSL

document.

Syntax

<xsl:if test="expression"> ... ...some output if the expression is true... ... </xsl:if>

Where to Put the <xsl:if> Element

To add a conditional test, add the <xsl:if> element inside the <xsl:for-each> element in the XSL

file:




<th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <xsl:if test="price > 10"> <tr>

<td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:if>


Note: The value of the required test attribute contains the expression to be evaluated.

The code above will only output the title and artist elements of the CDs that has a price that is

higher than 10.


My CD Collection

Title Artist





Black Angel Savage Rose





View the XML file <cdcatalog.xml>, View the XSL file <cdcatalog_if.xsl>, and View the result

<cdcatalog_if.xml>

The <xsl:choose> element is used in conjunction with <xsl:when> and <xsl:otherwise> to express

multiple conditional tests.

The <xsl:choose> Element

To express a multiple conditional test against the content of the XML file, add an <xsl:choose>

element to the XSL document.

Syntax

<xsl:choose> <xsl:when test="expression"> ... some output ... </xsl:when> <xsl:otherwise> ...

some output .... </xsl:otherwise> </xsl:choose>

Where to put the Choose Condition

To insert a conditional choose test against the content of the XML file, add the <xsl:choose>,

<xsl:when>, and <xsl:otherwise> elements to the XSL file:





select="title"/></td> <xsl:choose> <xsl:when test="price > 10"> <td

bgcolor="#ff00ff"> <xsl:value-of select="artist"/></td> </xsl:when> <xsl:otherwise>

<td><xsl:value-of select="artist"/></td> </xsl:otherwise> </xsl:choose> </tr> </xsl:for-

each> </table> </body> </html> </xsl:template> </xsl:stylesheet>

The code above will add a pink background-color to the "Artist" column WHEN the price of the CD

is higher than 10.

The result of the transformation will look like this:

My CD Collection

Title Artist





















Stop Sam Brown







Red The Communards


View the XML file <cdcatalog.xml>, View the XSL file <cdcatalog_choose.xsl>, and View the

result <cdcatalog_choose.xml>

Another Example

Here is another example that contains two <xsl:when> elements:





select="title"/></td> <xsl:choose> <xsl:when test="price > 10"> <td

bgcolor="#ff00ff"> <xsl:value-of select="artist"/></td> </xsl:when> <xsl:when

test="price > 9 and price <= 10"> <td bgcolor="#cccccc"> <xsl:value-of

select="artist"/></td> </xsl:when> <xsl:otherwise> <td><xsl:value-of

select="artist"/></td> </xsl:otherwise> </xsl:choose> </tr> </xsl:for-each> </table>


The code above will add a pink background color to the "Artist" column WHEN the price of the CD




is higher than 10, and a grey background-color WHEN the price of the CD is higher than 9 and

lower or equal to 10.


My CD Collection

Title Artist


















Stop Sam Brown







Red The Communards


View the XML file <cdcatalog.xml>, View the XSL file <cdcatalog_choose2.xsl>, and View the

result <cdcatalog_choose2.xml>

The <xsl:apply-templates> element applies a template to the current element or to the current

element's child nodes.




The <xsl:apply-templates> Element

The <xsl:apply-templates> element applies a template to the current element or to the current

element's child nodes.

If we add a select attribute to the <xsl:apply-templates> element it will process only the child

element that matches the value of the attribute. We can use the select attribute to specify the

order in which the child nodes are processed.

Look at the following XSL style sheet:


xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My

CD Collection</h2> <xsl:apply-templates/> </body> </html> </xsl:template> <xsl:template match="cd">

<p> <xsl:apply-templates select="title"/> <xsl:apply-templates select="artist"/> </p> </xsl:template>

<xsl:template match="title"> Title: <span style="color:#ff0000"> <xsl:value-of select="."/></span> <br />

</xsl:template> <xsl:template match="artist"> Artist: <span style="color:#00ff00"> <xsl:value-of

select="."/></span> <br /> </xsl:template> </xsl:stylesheet>


My CD Collection

Title: Empire Burlesque

Artist: Bob Dylan

Title: Hide your heart

Artist: Bonnie Tyler

Title: Greatest Hits

Artist: Dolly Parton

Title: Still got the blues

Artist: Gary Moore

Title: Eros

Artist: Eros Ramazzotti

Title: One night only

Artist: Bee Gees




Title: Sylvias Mother

Artist: Dr.Hook

Title: Maggie May

Artist: Rod Stewart

Title: Romanza

Artist: Andrea Bocelli

Title: When a man loves a woman

Artist: Percy Sledge

Title: Black angel

Artist: Savage Rose

Title: 1999 Grammy Nominees

Artist: Many

Title: For the good times

Artist: Kenny Rogers

Title: Big Willie style

Artist: Will Smith

Title: Tupelo Honey

Artist: Van Morrison

Title: Soulsville

Artist: Jorn Hoel

Title: The very best of

Artist: Cat Stevens

Title: Stop

Artist: Sam Brown

Title: Bridge of Spies

Artist: T`Pau

Title: Private Dancer




Artist: Tina Turner

Title: Midt om natten

Artist: Kim Larsen

Title: Pavarotti Gala Concert

Artist: Luciano Pavarotti

Title: The dock of the bay

Artist: Otis Redding

Title: Picture book

Artist: Simply Red

Title: Red

Artist: The Communards

Title: Unchain my heart

Artist: Joe Cocker

View the XML file <cdcatalog.xml>, View the XSL file <cdcatalog_apply.xsl>, and View the result

<cdcatalog_apply.xml>.

If your browser supports it, XSLT can be used to transform the document to XHTML in your

browser.

A JavaScript Solution

In the previous chapters we have explained how XSLT can be used to transform a document from

XML to XHTML. We did this by adding an XSL style sheet to the XML file and let the browser do

the transformation.

Even if this works fine, it is not always desirable to include a style sheet reference in an XML file

(e.g. it will not work in a non XSLT aware browser.)

A more versatile solution would be to use a JavaScript to do the transformation.

By using a JavaScript, we can:

• do browser-specific testing

• use different style sheets according to browser and user needs

That is the beauty of XSLT! One of the design goals for XSLT was to make it possible to

transform data from one format to another, supporting different browsers and different user




needs.

XSLT transformation on the client side is bound to be a major part of the browsers work tasks in

the future, as we will see a growth in the specialized browser market (Braille, aural browsers, Web

printers, handheld devices, etc.)

The XML File and the XSL File

Look at the XML document that you have seen in the previous chapters:

<?xml version="1.0" encoding="ISO-8859-1"?> <catalog> <cd> <title>Empire Burlesque</title>

<artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company>


View the XML file <cdcatalog.xml>.

And the accompanying XSL style sheet:





<tr> <td><xsl:value-of select="title" /></td> <td><xsl:value-of select="artist" /></td> </tr>


View the XSL file <cdcatalog.xsl>.

Notice that the XML file does not have a reference to the XSL file!

IMPORTANT: The above sentence indicates that an XML file could be transformed using many

different XSL style sheets!

Transforming XML to XHTML in Your Browser

Here is the source code needed to transform the XML file to XHTML on the client:

<html> <body> <script type="text/javascript"> // Load XML var xml = new

ActiveXObject("Microsoft.XMLDOM") xml.async = false xml.load("cdcatalog.xml") // Load XSL var xsl =

new ActiveXObject("Microsoft.XMLDOM") xsl.async = false xsl.load("cdcatalog.xsl") // Transform




document.write(xml.transformNode(xsl)) </script> </body> </html>

Tip: If you don't know how to write JavaScript, you can study our JavaScript tutorial

</js/default.asp>.

The first block of code creates an instance of the Microsoft XML parser (XMLDOM), and loads the

XML document into memory. The second block of code creates another instance of the parser

and loads the XSL document into memory. The last line of code transforms the XML document

using the XSL document, and displays the result as XHTML in your browser. Nice!

See how it works in IE 6.0 <tryit.asp?filename=cdcatalog>.

Since not all browsers support XSLT, one solution is to transform the XML to XHTML on the

server.

A Cross Browser Solution

In the previous chapter we explained how XSLT can be used to transform a document from XML

to XHTML in the browser. We let a JavaScript use an XML parser to do the transformation. This

solution will not work with a browser that doesn't support an XML parser.

To make XML data available to all kinds of browsers, we have to transform the XML document on

the SERVER and send it as pure XHTML to the BROWSER.

That's another beauty of XSLT. One of the design goals for XSLT was to make it possible to

transform data from one format to another on a server, returning readable data to all kinds of

future browsers.

XSLT transformation on the server is bound to be a major part of the Internet Information Server

work tasks in the future, as we will see a growth in the specialized browser market (Braille, aural

browsers, Web printers, handheld devices, etc.)

The XML file and the XSLT file

Take a new look at the XML document that you saw in the previous chapters:

<?xml version="1.0" encoding="ISO-8859-1"?> <catalog> <cd> <title>Empire Burlesque</title>

<artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company>





If you have Netscape 6 or IE 5 or higher you can view the XML file <cdcatalog.xml>.

And the accompanying XSL style sheet:





<tr> <td><xsl:value-of select="title" /></td> <td><xsl:value-of select="artist" /></td> </tr>


If you have Netscape 6 or IE 5 or higher you can view the XSL file <cdcatalog.xsl>.

Note: Be sure that the XML file does not have a reference to the XSL file.

IMPORTANT: The above sentence indicates that an XML file on the server could be transformed

using many different XSL files.

Transforming XML to XHTML on the Server

Here is the source code needed to transform the XML file to XHTML on the server:

<% 'Load XML set xml = Server.CreateObject("Microsoft.XMLDOM") xml.async = false

xml.load(Server.MapPath("cdcatalog.xml")) 'Load XSL set xsl =

Server.CreateObject("Microsoft.XMLDOM") xsl.async = false xsl.load(Server.MapPath("cdcatalog.xsl"))

'Transform file Response.Write(xml.transformNode(xsl)) %>

Tip: If you don't know how to write ASP, you can study our ASP tutorial

<http://www.w3schools.com/asp/default.asp>.

The first block of code creates an instance of the Microsoft XML parser (XMLDOM), and loads the

XML file into memory. The second block of code creates another instance of the parser and loads

the XSL document into memory. The last line of code transforms the XML document using the

XSL document, and returns the result to the browser. Nice!

See how it works <cdcatalog.asp>.

If you are serious about XML, you will benefit from using a professional XML Editor.




XML is Text-based

XML is a text-based markup language.

One great thing about XML is that XML files can be created and edited using a simple text-editor

like Notepad.

However, when you start working with XML, you will soon find that it is better to edit XML

documents using a professional XML editor.

Why Not Notepad?

Many web developers use Notepad to edit both HTML and XML documents because Notepad is

included with the most common OS and it is simple to use. Personally I often use Notepad for

quick editing of simple HTML, CSS, and XML files.

But, if you use Notepad for XML editing, you will soon run into problems.

Notepad does not know that you are writing XML, so it will not be able to assist you.

Why an XML Editor?

Today XML is an important technology, and development projects use XML-based technologies

like:

• XML Schema to define XML structures and data types

• XSLT to transform XML data

• SOAP to exchange XML data between applications

• WSDL to describe web services

• RDF to describe web resources

• XPath and XQuery to access XML data

• SMIL to define graphics

To be able to write error-free XML documents, you will need an intelligent XML editor!

XML Editors

Professional XML editors will help you to write error-free XML documents, validate your XML

against a DTD or a schema, and force you to stick to a valid XML structure.

An XML editor should be able to:




• Add closing tags to your opening tags automatically

• Force you to write valid XML

• Verify your XML against a DTD

• Verify your XML against a Schema

• Color code your XML syntax

Altova's XMLSPY

At W3Schools we have been using XMLSPY for many years. XMLSPY is our favorite XML editor.

These are some of the features we especially like:

• Easy to use

• Syntax coloring

• Automatic tag completion

• Automatic well-formed check

• Easy switching between text view and grid view

• Built in DTD and / or Schema validation

• Built in graphical XML Schema designer

• Powerful conversion utilities

• Database import and export

• Built in templates for most XML document types

• Built in XPath analyzer

• Full SOAP and WSDL capabilities

• Powerful project management

Read more about XMLSPY <http://www.altova.com/ref/?s=w3schools&q=xml>




Introduction to WMLScript

What you should already know


• WWW, HTML and the basics of building Web pages

• JavaScript

• WML

What is WML?

WML stands for Wireless Markup Language. It is a mark-up language inherited from HTML, but

WML is based on XML, so it is much stricter than HTML.

WML is used to create pages that can be displayed in a WAP browser. Pages in WML are called

DECKS. Decks are constructed as a set of CARDS.

What is WMLScript?

• WMLScript is the scripting language used in WML pages

• WMLScript is a light version of the JavaScript language

• WML scripts are not embedded in the WML pages. WML pages only contains references

to script URLs

• WMLScript is compiled into byte code on the server before it is sent to the WAP browser

• WMLScript is a part of the WAP specification

What is WMLScript used for?

• WMLScript is used to validate user input

• WMLScript is used to generate message boxes and dialog boxes locally, to view error

messages and confirmations faster

• WMLScript is used to access facilities of the user agent

How to call a WMLScript from a WML page

Notice that WMLScripts are not embedded in WML pages. The WML pages only contains




references to script URLs.

In the example below; if you select the go label the external script will direct you to

http://www.w3schools.com/wap.wml:

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="no1" title="Go to URL"> <do

type="options" label="Go"> <go href="check.wmls#go_url('W3Schools')"/> </do> </card> </wml>

The red line above contains a reference to a WMLScript. The script is in a file called check.wmls ,

and the name of the function is go_url .

Here is the WML page called check.wmls :

extern function go_url(the_url) { if (the_url=="W3Schools") {

WMLBrowser.go("http://www.w3schools.com/wap.wml") } }

Note that the function is using the extern keyword. When using this keyword the function can be

called by other functions or WML events outside the .wmls file. To keep a function private, drop

the extern keyword.

The Dialog Library provides functions to display alerts and messages.

Dialogs Library Functions

The functions in the Dialogs Library are quite similar to JavaScript alerts and message boxes.

The alert function is used to display a message, the confirm function is used when the user

should select between two answers (like "yes" or "no"), and the prompt function is used when the

user should input an answer.

Function Description

alert() <dialog_alert.asp> Displays a message, waits for a confirmation, and then returns an

empty string

confirm() <dialog_confirm.asp> Displays a message, waits for an answer, and returns a boolean

value depending on the selected answer

prompt() <dialog_prompt.asp> Displays a question, waits for an input, and then returns the user's

answer




The Float Library contains a set of mathematic functions, mostly about rounding of numbers.

Float Library Functions

The Float library contains a set of mathematic functions that is normally a part of the JavaScript's

Math object. The Float library works only on those clients who supports floating-point numbers. If

floating-point numbers are not supported, all functions should return invalid.


ceil() <float_ceil.asp> Returns the nearest integer that is not smaller than a specified number

floor() <float_floor.asp> Returns the nearest integer that is not larger than a specified number

int() <float_int.asp> Returns the integer part of a specified number

maxFloat()

<float_maxfloat.asp>

Returns the largest possible floating-point number

minFloat()

<float_minfloat.asp>

Returns the smallest possible floating-point number

pow() <float_pow.asp> Raises a number to the power of a second number and returns the result

round() <float_round.asp> Returns the nearest integer to a specified number

sqrt() <float_sqrt.asp> Returns the square root of a specified number

The Lang library contains a set of functions that are closely related to the WMLScript core.

The Lang Library

The Lang Library contains functions for absolute value calculations, data type manipulation, and

random number generation.


abort() <lang_abort.asp> Aborts a WMLScript and returns a message to the caller of the script

abs() <lang_abs.asp> Returns the absolute value of a number

characterSet()

<lang_characterset.asp>

Returns the character set supported by the WMLScript interpreter

exit() <lang_exit.asp> Exits a WMLScript and returns a message to the caller of the script

float() <lang_float.asp> Returns true if floating-point numbers are supported, and false if not

isFloat()

<lang_isfloat.asp>

Returns true if a specified value can be converted into a floating-point number

by the parseFloat() function, and false if not

isInt() <lang_isint.asp> Returns true if a specified value can be converted into an integer by the

parseInt() function, and false if not

max() <lang_max.asp> Returns the largest value of two numbers

maxInt() Returns the maximum possible integer value




<lang_maxint.asp>

min() <lang_min.asp> Returns the smallest value of two numbers

minInt()

<lang_minint.asp>

Returns the minimum possible integer value

parseFloat()

<lang_parsefloat.asp>

Returns a floating-point value defined by a string

parseInt()

<lang_parseint.asp>

Returns an integer defined by a string

random()

<lang_random.asp>

Returns a random integer between 0 and a specified number

seed() <lang_seed.asp> Initializes the random number generator with a number, and returns an empty

string

Note: You may have noticed, that the Lang Library contains some functions that you would

expect to find in a Math Library.

We think that the Lang Library has a slightly misleading name. But it is called the Lang Library

because it contains functions that are closely related to the core of the WMLScript engine.

Also notice the existence of a Float Library.

The String library contains functions quite similar to the ones found in the JavaScript String object.

String Library Functions


charAt()

<string_charat.asp>

Returns a character that is placed in a specified position of a string

compare()

<string_compare.asp>

Compare two strings, and returns an integer that tells if the one string is

identical, smaller or larger than the other

elementAt()

<string_elementAt.asp>

Separates a string into elements, and then return a specified element

elements()

<string_elements.asp>

Returns the number of times a specified value appears in a string

find() <string_find.asp> Returns the position of a substring in a string

format()

<string_format.asp>

Formats a value, and returns the result

insertAt()

<string_insertAt.asp>

Separates a string into elements, inserts a substring, and then return the

result

isEmpty() Returns a boolean value that is true if the string is empty, and false if not




<string_isempty.asp>

length()

<string_length.asp>

Returns the length of a string

removeAt()

<string_removeat.asp>

Separates a string into elements, removes an element, and then return the

result

replace()

<string_replace.asp>

Replaces a part of a string with a new string, and return the result

replaceAt()

<string_replaceat.asp>

Separates a string into elements, replaces an element, and then return the

result

squeeze()

<string_squeeze.asp>

Reduces all white spaces to single spaces, and returns the result

subString()

<string_substring.asp>

Returns a string that is a specified part of another string

toString()

<string_tostring.asp>

Creates a string from a number, and return the result

trim() <string_trim.asp> Returns a string without leading and trailing spaces

The URL Library

The URL library contains a set of functions for handling relative and absolute URLs.


escapeString()

<url_escapestring.asp>

Replaces special characters in a URL with an escape sequence, and returns

the result

getBase()

getFragment()

<url_getfragment.asp>

Returns the fragment in a URL

getHost()

<url_gethost.asp>

Returns the host specified in a URL

getParameters()

<url_getparameters.asp>

Returns the parameters in the last path segment of a URL

getPath()

<url_getpath.asp>

Returns the path specified in a URL

getPort()

<url_getport.asp>

Returns the port number specified in a URL

getQuery()

<url_getquery.asp>

Returns the query part in a URL

getReferer()

getScheme() Returns the scheme in a URL




<url_getscheme.asp>

isValid()

<url_isvalid.asp>

Returns true if a URL has the right syntax, and false if not

loadString() Returns the content and the content type of a specified URL

resolve()

<url_resolve.asp>

Returns an absolute URL from a base URL and a relative URL

unescapeString()

<url_unescapestring.asp

>

Replaces the escape sequences in a URL with characters, and return the

result

The WMLBrowser library contains functions that can be used to access browser variables.

WMLBrowser Library Functions

Information stored by the browser is often called the browser context. The browser context can

contain variables set by a program and variables set by the browser, like the current URL, and the

card history stack.

The WML Browser library contains functions to set and access the browser context:


getCurrentCard()

<wmlbrowser_getcurrentcard.asp>

Returns the (relative) URL of the current card

getVar() <wmlbrowser_getvar.asp> Returns the value of a variable

go() <wmlbrowser_go.asp> Goes to a new card, specified by the new URL, and returns an

empty string

newContext()

<wmlbrowser_newcontext.asp>

Clears all variables, and returns an empty string

prev() <wmlbrowser_prev.asp> The browser goes back to the previous card, and returns an empty

string

refresh()

<wmlbrowser_refresh.asp>

Refreshes the current card, and returns an empty string

setvar() <wmlbrowser_setvar.asp> Sets the value of a variable, and returns true if the new value was

implemented successfully, and false if not

NOTE: The WML specification states that calls to library functions that are not supported by the

browser should return invalid. Because of this, all the above functions should be tested against

their return value, and proper action should be taken in case a function returns invalid.

Virtual Reality Modeling Language(VRML)

• The term Virtual reality is coined in late 1993 by Mark pesce and Tony Parisi




• VRML version 1.0 developed in 1994 specifies static VRML world with only limited

interactive model i.e. it contains static 3d objects and hyperlinks to other type of media

• VRML version 2.0 is developed in 1996 and allows more complex behaviors, it supports

dynamic objects and can be programmatically scripted using java and java scripts

• VRML 97 specification is Draft International Specification standard (DIS)

• VRML is language for describing multiparticipant interactive simulation. This allows virtual

world networked via the global net and hyperlinked with www

• At highest level of Interaction VRML is a way for objects to read and write themselves.

Theoretically objects can contain anything 3D geometry, scene, graphics, JPEG and gif

images, VRML defines set of objects useful for drawing 3d graphics these objects are

called nodes and nodes are arranged in hierarchal manner to form a scene graph. A

scene consists of multiple nodes. There are nodes for variety of characteristics like

shape, color, texture and lighting

• VRML world have event generators and event receivers. Most event generators are

sensor nodes. Sensor nodes enable interactivity within VRML world

• VRML works like HTML except it works in 3D it is language for describing multi-user

interactive simulation or virtual world networked via global net and hyperlinked with www

• On VRML site you can walk around a 3D world that contain different objects places. As

the user walk through site they can interact with objects and even communicate with them

Limitations:

• Requires powerful computers and bandwidth

• Development & operational cost is too high

• Software support is not enough

• Distribution is poor

• Quality and reliability is lacking

• Displays used may not come close to quality

• Experience is not compelling

The Virtual Reality Modeling Language (VRML) is a file format for describing 3D interactive worlds

and objects. It may be used in conjunction with the World Wide Web.




VRML is capable of representing:

Static objects.

Animated objects.

Hyperlinks to other media such as sound, movies, and image.

VRML 1.0, 2.0, 97 AAAAAGH!

The VRML specifications can be found at:

http://www.web3d.org/VRML2.0/FINAL/

Applications that can show VRML files are widely available as browser’s plug-ins or as stand-

alone applications. For example:

Blaxxun Contact (http://www.blaxxun.com/)

Virtue3D’s Virtuoso Optimizer (http://www.virtue3d.com/)

GLView (http://home.snafu.de/hg/)

OBJECTS:

A VRML file is essentially a collection of objects, arranged in a particular order. As in real life, an

object often corresponds to something physical that has

• A particular shape.

• Various surface properties (color, smoothness, shininess, etc.).

• A position in 3D space.

Other VRML objects include.

• Sounds.

• Lights.

• Viewpoints.

These also have positions in 3D space.

NODES




At the highest level of abstraction, VRML is simply a file format for describing objects.

Theoretically, the objects can contain.

3D geometry.

MIDI data.

JPEG images.

Etc.

• VRML defines a set of objects useful for doing 3D graphics, multi-media, and interactive

object/world building.

• These objects are called nodes, and contain elemental data, which is stored in fields and

events.

General Node Characteristics

Type name.

This is a name like Box, Color, Group, Sphere, Sound, SpotLight, and so on.

Specific fields.

Each Sphere node might have a different radius.

Different spotlights have different intensities, colors, and locations.

Each node specification defines the type, name, and default value for each of its fields.

fields nodes are private and cannot be changed, while exposedField nodes are public and may be

modified by other nodes.

A set of associated events that nodes can receive and send.

Nodes can receive a number of incoming set_* events, denoted as eventIn (like set_position,

set_color, and set_on), which typically change the node.

Nodes can also send out a number of *_changed events, denoted as eventOut, which indicate

that something in the node has changed (position_changed, color_changed, on_changed).

The file syntax for representing nodes is as follows:

nodetype { fields }

Only the node type and braces are required.




Nodes may or may not have field values specified.

Unspecified field values are set to the default values in the specification.

Type name.

• This is a name like Box, Color, Group, Sphere, Sound, Spotlights, and so on.

Specific fields.

• Each Sphere node might have a different radius.

• Different spotlights have different intensities, colors, and locations.

• Each node specification defines the type, name, and default value for each of its fields.

• Fields nodes are private and cannot be changed, while exposed Field nodes are public

and may be modified by other nodes.

A set of associated events that nodes can receive and send.

� Nodes can receive a number of incoming set_* events, denoted as eventIn (like

set_position, set_color, and set_on), which typically change the node.

� Nodes can also send out a number of *_changed events, denoted as eventOut, which

indicate that something in the node has changed (position_changed, color_changed,

on_changed).

qThe file syntax for representing nodes is as follows:

nodetype { fields }

� Only the node type and braces are required.

� Nodes may or may not have field values specified.

� Unspecified field values are set to the default values in the specification.

Shape { exposedField SFNode appearance NULL

exposedField SFNode geometry NULL

} The Shape node has two fields: appearance and geometry which are used to create

rendered objects in the world.

� The appearance field specifies an Appearance node that specifies the visual attributes

(e.g. material and texture) to be applied to the geometry.

� The geometry field specifies a geometry node.




� The specified geometry node is rendered with the specified appearance nodes applied.

Appearance { exposedField SFNode material NULL

exposedField SFNode texture NULL

exposedField SFNode textureTransform NULL

} The Appearance node specifies the visual properties of geometry by defining the material and

texture nodes.

� The material field, if specified, must contain a Material node. If the material field is NULL

or unspecified, lighting is off.

� The texture field, if specified, must contain one of the various types of texture nodes

(ImageTexture, MovieTexture, or PixelTexture).

� The textureTransform field, if specified, must contain a TextureTransform node.

Material { exposedField SFFloat ambientIntensity 0.2

exposedField SFColor diffuseColor 0.8 0.8 0.8

exposedField SFColor emissiveColor 0 0 0

exposedField SFFloat shininess 0.2

exposedField SFColor specularColor 0 0 0

exposedField SFFloat transparency 0

}qThe Material node specifies surface material properties for associated geometry nodes

Cylinder {

field SFBool bottom TRUE

field SFFloat height 2

field SFFloat radius 1

field SFBool side TRUE

field SFBool top TRUE

}The Cylinder node specifies a capped cylinder centered at (0,0,0) in the local coordinate

system and with a central axis oriented along the local Y-axis.

q #VRML V2.0 utf8




Shape { appearance Appearance {

material Material { }

} geometry Cylinder {

radius 3

height 6

side TRUE

top FALSE

bottom TRUE

} } Transform { … exposedField SFVec3f center 0 0 0

exposedField MFNode children []

exposedField SFRotation rotation 0 0 1 0

exposedField SFVec3f scale 1 1 1

exposedField SFVec3f translation 0 0 0

} §A Transform is a grouping node that defines a coordinate system for its children that is relative to the coordinate systems of its parents Group { … exposedField MFNode children [] } qA Group node is equivalent to a Transform node, without the transformation fields. #VRML V2.0 utf8

Group {

children [

DEF PLANE Shape {

appearance Appearance {

material Material {

diffuseColor .75 .71 .71

ambientIntensity 0.2




}

} geometry IndexedFaceSet {

solid FALSE

coord Coordinate {

point [

-1 -1 -1,

1 -1 -1,

1 1 -1,

-1 1 -1,

] } coordIndex [

0,1,2,3,-1,

]

color Color {

color [

1 1 1,

1 0 0,

0 1 0,

0 0 1, ] } } }, Transform {

center 0 0 -1

rotation 1 0 0 1.57

children USE PLANE

},

]

}




JavaScript

Introduction :

Thousands of sites around the world use JavaScript but it is still not a particularly well known

programming language (compared to HTML). If you have seen anything interactive on a website

like a calculation, pop-up-window, some web counters and even some navigation systems then

you have probably seen JavaScript.

Unfortunately, JavaScript has changed from being a language which improves web sites to a

language which destroys them. This is because there are huge JavaScript sites which have

thousands of scripts for download. These usually involve things which do not benefit a website at

all, like status bar effects and scrolling text which do not add much to a website.

JavaScript must not be confused with Java. Java is a completely different programming language.

It is usually used for text effects and games, although there are some JavaScript games around.

So why should you use JavaScript? Well, JavaScript can allow you to create new things on your

website that are both dynamic and interactive, allowing you to do things like find out some

information about a user (like monitor resolution and browser), check that forms have been filled

in correctly, rotate images, make random text, do calculations and many other things.

In this tutorial I am assuming that you understand HTML.

What is JavaScript?

JavaScript is an easy-to-use programming language that can be embedded in the header of your

web pages. It can enhance the dynamics and interactive features of your page by allowing you to

perform calculations, check forms, write interactive games, add special effects, customize

graphics selections, create security passwords and more.

What's the difference between JavaScript and Java?

Actually, the 2 languages have almost nothing in common except for the name. Although Java is

technically an interpreted programming language, it is coded in a similar fashion to C++, with

separate header and class files, compiled together prior to execution. It is powerful enough to

write major applications and insert them in a web page as a special object called an "applet." Java

has been generating a lot of excitement because of its unique ability to run the same program on

IBM, Mac, and Unix computers. Java is not considered an easy-to-use language for non-

programmers.




Javascript is much simpler to use than Java. With Javascript, if I want check a form for errors, I

just type an if-then statement at the top of my page. No compiling, no applets, just a simple

sequence.

What is Object Oriented Programming?

Everyone that wants to program JavaScript should at least try reading the following section. If you

have trouble understanding it, don't worry. The best way to learn JavaScript is from the examples

presented in this tutorial. After you have been through the lessons, come back to this page and

read it again.

OOP is a programming technique (note: not a language structure - you don't even need an object-

oriented language to program in an object-oriented fashion) designed to simplify complicated

programming concepts. In essence, object-oriented programming revolves around the idea of

user- and system-defined chunks of data, and controlled means of accessing and modifying those

chunks.

Object-oriented programming consists of Objects, Methods and Properties. An object is basically

a black box which stores some information. It may have a way for you to read that information and

a way for you to write to, or change, that information. It may also have other less obvious ways of

interacting with the information.

Some of the information in the object may actually be directly accessible; other information may

require you to use a method to access it - perhaps because the way the information is stored

internally is of no use to you, or because only certain things can be written into that information

space and the object needs to check that you're not going outside those limits.

The directly accessible bits of information in the object are its properties. The difference between

data accessed via properties and data accessed via methods is that with properties, you see

exactly what you're doing to the object; with methods, unless you created the object yourself, you

just see the effects of what you're doing.

Other Javascript pages you read will probably refer frequently to objects, events, methods, and

properties. This tutorial will teach by example, without focusing too heavily on OOP vocabulary.

However, you will need a basic understanding of these terms to use other JavaScript references.

Objects and Properties




Your web page document is an object. Any table, form, button, image, or link on your page is also

an object. Each object has certain properties (information about the object). For example, the

background color of your document is written document.bgcolor . You would change the color of

your page to red by writing the line: document.bgcolor="red"

The contents (or value) of a textbox named "password" in a form named "entryform" is

document.entryform.password.value .




Methods

Most objects have a certain collection of things that they can do . Different objects can do different

things, just as a door can open and close, while a light can turn on and off. A new document is

opened with the method document.open() You can write "Hello World" into a document by typing

document.write("Hello World") . open() and write() are both methods of the object: document.

Events

Events are how we trigger our functions to run. The easiest example is a button, whose definition

includes the words onClick="run_my_function()" . The onClick event, as its name implies, will

run the function when the user clicks on the button. Other events include OnMouseOver,

OnMouseOut, OnFocus, OnBlur, OnLoad, and OnUnload.

What Do I Need?

You will not need any special hardware or software to write JavaScript, you can just use Notepad

or any other text editor. You do not even need to have any special software on your webserver.

JavaScript will run on any webserver anywhere! All you will need to do is make sure that you have

at least a version 3 browser, as versions of Internet Explorer and Netscape Navigator before this

do not support JavaScript, so you will not be able to see your creations.

Declaring JavaScript

Adding JavaScript to a web page is actually surprisingly easy! To add a JavaScript all you need to

add is the following (either between the <head></head> tags or between the <body></body> tags

- I will explain more about this later):

<script language="JavaScript">

JavaScript

</script>

As you can see the JavaScript is just contained in a normal HTML tag set. The next thing you

must do is make sure that the older browsers ignore it. If you don't do this the code for the

JavaScript will be shown which will look awful.

There are two things you must do to hide the code from older browsers and show something

instead:

<script language="JavaScript">

</script>

<noscript>

HTML Code

</noscript>

As you can see this makes the code look a lot more complex, but it is really quite simple. If you

look closely you can see that all that has been done is that the JavaScript is now contained in an

HTML comment tag. This is so that any old browsers which do not understand <script> will just

think it is an HTML comment and ignore it.

Because of this the <noscript> tag was created. This will be ignored by browsers which

understand <script> but will be read by the older browsers. All you need to do is put between

<noscript> and </noscript> what you want to appear if the browser does not support JavaScript.

This could be an alternative feature or just a message saying it is not available. You do not have

to include the tag if you don't want anything shown instead.

Commenting

Something you might have noticed in the example above was that on the line:

// End Hide-->

There was a:

//

which does not usually appear in an HTML comment. This is because it is the sign for a

JavaScript comment (it was included here to stop the browser from thinking the closing HTML tag

was a piece of JavaScript).

It is very important in JavaScript, as with any other programming language to include comments,

especially if you want others to learn from your code. It is also useful for including a copyright

message.

Part – II

Now you have learnt all about the basics of JavaScript. You know how to declare a JavaScript

and how to make it backwards compatible. In the next part I will show you how to write some code

to actually do something.

Introduction

In part 1 I showed you how to declare a JavaScript and make sure that non-compatible browsers

can see something. In this part I will show you how to actually do something with your JavaScript.

Alerts

The first JavaScript command I will show you is:

alert()

This command will make a popup box appear (click here to see it in action). This can be useful for

warning users about things or (in some cases) giving them instructions. It is used in the following

way:

alert('Text for alert box');

In the example above I have used single quotations ' but you could use double quotations if you

want to ". They work exactly the same way. The reason I use single quotes is because, later on,

when you are using HTML code and JavaScript together you will need to use them and it is good

to be consistent.

Here is the full JavaScript for the earlier example:

<script>



</script>

This is placed between the <head> and </head> tags of the page. As you can see, I have used a

comment tag as well as the alert box code. This makes your code more readable but is not

essential.

Variables

Variables in JavaScript, as in other computer languages, can be used to store information. For




example I could tell the computer that the variable called:

my_number

should have the value:

3456

Variables can also contain text for example the variable:

my_name

could have the value:

David Gowans

Variables can be very useful for text or numbers that you repeat several times in a program, for

doing calculations or for getting input from a user. Variables are declared as follows:

Number:

var my_number = 3456;

Strings (text):

var my_name = 'David Gowans';

As you can see a string is included in quotes (either single or double) but a number does not. If

you include a number in quotes it will not be treated as a number. You may also notice that each

line ends with a semicolon. This is standard JavaScript code to show the end of a line. Always

remember to put it in.

When naming your strings you can use any word or combination of words as long as it is not

already in use by JavaScript (so don't use alert as a variable name etc.). Do not include spaces,

replace them with _.

Calculations

You can do calculations if you have variables containing numbers. Here is an example of some

code which does a calculation:

// Set Variables

var first_number = 15;

var second_number = 5;

var third_number = 10;

var fourth_number = 25;

//Do Calculations




var new_number = first_number + second number

var answer = new_number * third_number

var answer = answer / fourth_number

This code sets four number variables. It then adds the first and second numbers together and

stores the answer as a variable called new_answer. Then it multiplies new_number by the third

number and stores the answer as answer. Finally, it divides the answer by the fourth_number to

get a new value for the answer.

Getting Information From The User

Once you have started using variables you will realize that it will be quite useful to get some

information from the user. You can do this by using the:

prompt()

command. Take a look at this example. I will explain how this works.

First of all, the new prompt command is used. I set the variable your_name using it:

var your_name = prompt('Please enter your name', 'Your Name');

The text between the first set of quotes is what is written on the prompt box. The text between the

second set of quotes is what is the default text for the input section of the box.

After this I have to create the output string. I do this by adding together the input with two strings I

declared earlier (view the source on the example page for more information):

var output_text = welcome_text + your_name + closing_text;

As you can see this is much the same as adding 3 numbers together but, as these are strings

they will be put one after the other (you could have also used quotes in here to add text and

strings together). This added the text I had set as the welcome_text to the input I had received

and then put the closing_text on the end.

Finally I displayed the output_text variable in an alert box with the following code:

alert(output_text);

which, instead of having text defined as the content for the alert box, places the string in the box.




Part – III

In part 3 I will show you how to display information in the page

Introduction

In the last part I showed you how to display alert boxes and how to get information from the user.

I also explained how variables work.

document.writeln

This command is very useful as it will output information to a web page. I will start with a basic

example of how to use it:

document.writeln('Hello there!');

This basically tells the JavaScript to write to the document (web page) on a new line the text Hello

there!. The really useful bit of this is that you can tell the JavaScript to output text, HTML and

variables. First of all I will show you how to output HTML:

document.writeln('<font face="Arial" size="5" color="red">Hello there!</font>');

This will display the following on the page:

Hello there!

As you can see, this allows you to just put standard HTML code into a web page using

JavaScript. If you can't see a good reason for this it is not surprising at the moment but next I will

introduce variables to the script.

Outputting Variables

If you look at the final example I did in the last part, where I took information from the user and

added it to some other text before displaying the output in an alert box. This can also be displayed

in the page. Before doing this, though, I will explain a little more about where you can put your

JavaScript code.

Up until now all the JavaScrit code has been contained inside the <head> and </head> tags of

the HTML document. The reason for this is that the JavaScript will be loaded and executed before

the rest of the document. This works fine for most scripts but, as the scripts become more

advanced, you may need to have them both in the document and the head. I will use this script to

demonstrate.

To put JavaScript in the <body></body> section of the page is exactly the same as putting it in

the <head></head> section of the page. I would suggest that you adopt the following way of

creating scripts:

Put all your initialization code in the head of the page (like setting variables, prompts, alerts etc.)

and then all display code (document.writeln etc.) in the body of the page. This is the code for the

new improved version of the example which uses document.writeln:

<html>

<head>

<title>Variable Example</title>

<script>



</script>

</head>

<body>

<script>



</script>

<a href="index3.htm#variables"><font face="Arial">Back</font></a>

</body>

</html>

You can see this code in action here.

As you can see from the above code, variables are added into document.writeln by using the +

signs. There are no quotes round the variable names.

Remote JavaScript

Now you have learnt how to use the document.writeln command you can now start using one of

the most useful applications of JavaScript, remote scripting. This allows you to write a JavaScript

in a file which can then be 'called' from any other page on the web.

This can be used for things on your own site which you may like to update site-wide (like a footer

on the bottom of every page) or something used on remote sites (for example newsfeed or some

counters).

To insert a remote JavaScript you do the following:

<script language="JavaScript" src="http://www.yourdomain.com/javascript.js">

</script>

Which will then run the JavaScript stored at http://www.yourdomain.com/javascript.js. The .js file

is also very simple to make, all you have to do is write your JavaScript (omitting the <script>,

</script>,  tags into a simple text file and save it as something.js.

If you want to include information for browsers which do not support JavaScript you will need to

put the <noscript></noscript> tags in the HTML, not the JavaScript file.

There is one problem with using remote JavaScript which is that only the recent browsers support

it. Some browsers which support JavaScript do not support Remote JavaScript. This makes it

advisable not to use this for navigation bars and important parts of your site.




Part –IV :

In the next part I will show you how to open and manipulate browser windows.

Introduction

In the last part I showed you how you can use JavaScript to prompt the user for information and

how you can display HTML via JavaScript. In this part I will show you how you can create and

manipulate browser windows using JavaScript.

Windows and HTML

Before learning how to create and manipulate windows in JavaScript, it is important to know how

to create and manipulate them in HTML. The HTML manipulation is very basic but will also help

you to understand how windows work in web browsers.

Firstly you must know the two ways of creating a link which opens in a separate window. The

most common use is to have:

<a href="link.html" target="_blank">Click Here</a>

This is the standard HTML code for opening a new window with the page in it.

A less common way of opening a new window is to use:

<a href="link.html" target="mywindow">Click Here</a>

This will create a new window, just like the first set of code, but it will also name the window

'mywindow'. This means that you can then have:

<a href="page2.html" target="mywindow">Change the page</a>

which, when clicked, will change the page which appears in the window you opened.

Knowing about how a window name works is very important as you must understand it to use

JavaScript windows effectively.

Opening A Window With JavaScript

The first thing you should learn to do with JavaScript is to do exactly the same thing with

JavaScript as you could do with HTML. The JavaScript command used to open a window is:

window.open

For this to work, though, it requires two extra things. Firstly you will need to have some extra

information so that the JavaScript knows how to open the window:

window.open('link.html','mywindow');

This means that a window called 'mywindow' will open with the page link.html in it, exactly like




with the HTML code above.

This code can either used as part of your JavaScript code (for example if you included it in the

JavaScript code in the <head> section of your page it would open when the page loaded) or can

be used when a link is clicked. To do this you must use another JavaScript command called

onclick.

I will give you more information about how this command works in a later part but for now all you

really need to know is the following: In your standard HTML code include a link as follows:

<a href="#" onClick="window.open('link.html','mywindow');">Click Here</a>

As you can see this is just the same window.open command inside an HTML tag.

Manipulating The Window

The main reason of using JavaScript to manipulate windows, though, is because you can set

many things on the window which you could never do with HTML. JavaScript allows you to use

commands to decide which parts of the browser window appear. This is done using a third part of

the window.open command. This is where you decide the window features:

window.open('link.html','mywindow','window features');

There are many things you can include here. For example if you wanted a window that only has a

location bar and a status bar (the part at the bottom of the browser) then you would use the

following code:

window.open('link.html','mywindow','location, status');

There are many different things you can include in your new window:

Feature Function

menubar The File, Edit etc. menus at the top of the browser will be shown

scrollbar This will show scrollbars at the side of the window if they are needed

width You can set the width of the window in pixels (see the next section)

height You can set the height of the window in pixels (see the next section)

toolbar This will display the browser toolbar with the Back, Stop, Refresh buttons etc.

location The location bar (where you type in URLs) will be displayed in the browser

resizable This will allow the window to be resized by the user

directories This will show the directories in Netscape browsers like 'Whats new' and 'Whats cool'




Examples Of Manipulating Windows

You may be a little confused by all these options so I will show you a few examples of opening a

window in JavaScript:

This window will open with a location bar, toolbar and will be resizable:

window.open('window1.htm','the_first_window','location, toolbar, resizable');

This will open another page in this window:

window.open('window2.htm','thefirstwindow');

This will open a window 200 pixels wide and 300 pixels high. It is not resizable and has a status

bar and will scroll if necessary. This is a very commonly used combination:

window.open('window1.htm','thesecondwindow','height=300,width=200,status,scrollbars');




Part -V

Introduction

In this part I will show you how to use link events, do image swaps and display things in the

browser status bar.

Link Events

A link event is a different way of including JavaScript on your page. Instead of having <script>

tags in your HTML you can set JavaScript that will only be executed when certain things happen.

There are three ways of executing some JavaScript code in a link. They are:

onClick

onMouseOver

onMouseOut

They can have many different uses but the most common is for image swaps (mouseover

images).

onClick

onClick works in exactly the same way as a standard HTML link. It is executed when someone

clicks on a link in a page. It is inserted as follows:

<a href="#" onClick="JavaScript Code">Click Here</a>

As you can see, one main difference is that the href of the link points to a #. This is nothing to do

with the JavaScript, it just neabs that, instead of opening a new page, the link will not do anything.

You could, of course, include a link in here and you would be able to open a new page AND

execute some code at the same time. This can be useful if you want to change the content of

more than one browser window or frame at the same time.

onMouseOver and onMouseOut

onMouseOver and onMouseOut work in exactly the same way as onClick except for one major

difference with each.

onMouseOver, as the name suggests, will execut the code when the mouse passes over the link.

The onMouseOver will execute a piece of code when the mouse moves away from the link. They

are used in exactly the same way as onClick.

Rollover Images

This is one of the main ways of using link events. If you have not seen rollover images before,




they are images (usually used on navigation bars like the one at the top of this page) and when

the mouse moves over the link it changes the image which is displayed.

This is done using a combination of the onMouseOver and onMouseOut events. To explain -

when the mouse passes over the link you want the image to change to the new image, when it

moves away from the link, the old picture should be displayed again.

The first thing you must do is edit the <img> tag you use to insert the image you want to change.

Instead of just having something like this:

<img src="home.gif" alt="Home">

you would have the following:

<img src="home.gif" alt="Home" name="home_button">

The name for the image could be anything and, like the window names from the last part, is used

to refer to the image later on.

Now you have given a name to the image you are using you will want to create the rollover. The

first thing you must do is create the image for the rollover and save it. Then create a link round the

image. If you don't want to have a link on the image you can still do a rollover by specifying the

href as # which will make the link do nothing eg:

<a href="#"></a>

The following code will make a mouseover on your image (assuming you inserted the image as

shown above and called your mouseover image homeon.gif):

<a href="index.htm" onMouseOver="home_button.src='homeon.gif';"

onMouseOut="home_button.src='home.gif';"><img src="home.gif" alt="Home"

name="home_button" border="0"></a>

I will now explain this code:

Firstly you are creating a standard link to index.htm. Then you are telling the browser that when

the mouse moves over the link the image with the name home_button will change to homeon.gif.

Then you are telling it that when the mouse moves away from the link to change the image called

home_button to home.gif. Finally you are inserting an image called home_button with an alt tag of

'Home' and no border round it.

If you have read the last part of the tutorial you will see that onClick, onMouseOver and

onMouseOut can be used with text links as well as images in exactly the same way as you did




above. This, of course, means that you can create interesting effects by, when the mouse moves

over an image, another image changes. This could be very useful for placing a description of a

link on a page.

Status Bar

The status bar is the grey bar along the bottom of a web browser where information like, how

much the page has loaded and the URL which a link is pointing to appears. You can make your

own text apppear in the status bar using the JavaScript you already know using the following

code:

window.status='Your Text In Here';

You can include this in standard code, onClick, onMouseOver or onMouseOut. This allows you to

do things like display a description of a link when the mouse moves over it.




Part - VI

Introduction

In previous parts I have shown you how to declare a JavaScript, open windows and display

information. In this part I will show you how to use two of JavaScripts most important functions, If

and Loops.

If

The if function allows you to check to see if something is true or false. For example you could

check to see if text entered by a user matches a piece of text you already have (like a password).

To show if in action click here.

As you can see this could be very useful for many sites. The code is as follows:

var guess = prompt("Please guess a number between 1 and 10","");

if(guess == 5)

{

alert('Correct! I was thinking of 5');

}

else

{

alert('Wrong! I was thinking of 5');

}

This code is made up of three main parts. The first part which gets the guess from the user, you

have used before. This is followed by:

if(guess ==5)

Which is quite self explanitary. It checks to see if the variable guess is equal to 5. The if statement

is followed by:

{

alert('Correct! I was thinking of 5');

}

The important part of this is the curly brackets round the alert command. These contain the code

which should be executed if the if statement returns 'true' (in this example if guess equals 5). The

final part is the:

else

{

alert('Wrong! I was thinking of 5');

}

This tells the browser that if the if statement does not return 'true' (in this example if guess does

not equal 5) to execute the code between the curly brackets.

Together this code makes up the if statement.




More If

There are other conditions you can test with the if statement. Firstly, as well as using numbers

you can compare variables or text:

if(variable == variable)

if(variable == "some text")

As well as doing this you can check to see if one variable is greater than another, less than

another or not the same as another:

if(variable < othervariable)

If variable is less than othervariable

if(variable > othervariable)

If variable is greater than othervariable

if(variable <= othervariable)

If variable is less than or equal to othervariable

if(variable >= othervariable)

If variable is greater than or equal to othervariable

if(variable != othervariable)

If variable is not equal to other variable

These can be very useful in your web pages. You can also check to see if two conditions are true

before executing code using &&:

if(variable1 == variable2) && (variable1 < variable3)

This will only execute its code if variable1 is equal to variable2 and is less than variable3. You can

also run the code if one of the conditions is true:

if(variable1 == variable2) || (variable1 < variable3)

This will only execute its code if variable 1 is equal to variable to or is less than variable3.

While Loops

While loops are pieces of code which will repeat until the condition is met. This is very useful for

things like passwords when you want to keep asking the user until they get it correct. For example

this code will repeat until the user enters the word 'hello':




Part -VII

Introduction

In part 6 I showed you how to use If and loops. In this part I will show you how you can

manipulate HTML forms with JavaScript to improve your website.

Changing The Value Of A Text Box

Before you can manipulate text boxes you must first know how to create a form and how to create

a text box in HTML. I will quickly explain this.

Forms for JavaScript are slightly different to standard ones as they do not require any information

or script to handle them. You can do everything by just giving the form a name (although later you

may want to add the other information so that you can also have the form submitted):

<form name="formname">

</form>

In this form you can place a text box using:

<input type="text" name="boxname">

Once you have this you can create your first JavaScript to refer to a form:

Move the mouse over here to add some text to the box

This is done very easily using the onMouseOver property of the link. It can refer to the text box as

follows:

window.document.example1.first_text.value='Hi there';

This tells the browser to put 'Hi there!' into the value of the item called 'first_text' in the form called

'example1'.

You can also do this with multiline text boxes. You can use

/n

to start a new line.

In this section, you have learnt the most important part of this lesson, how to refer to an item in a

form.

Events




Just like links, you can set events for items in a form. They are:

onBlur - Happens when the cursor is moved out of the field

onFocus - Happens when the cursor is moved into the field

onChange - Happens when the field is changed and the cursor moves out of it

These are placed into the code as part of the form's item for example:

<input type="text" onBlur="dothis">

JavaScript Functions

JavaScript functions are very useful, and this seems an appropriate place to introduce them. They

are pieces of JavaScript which can be declared at the top of your page and can then be referred

to again and again in your code. You can even pass parameters to them and make them do

different things.

Functions take the following form:

function functionname(parameters)

{

}

For a very basic function you need no parameters and it would be constructed like this (in the

<head> of the document):

function sayhi()

{

alert(Hi there!);

}

Then, anywhere in the text you could place this:

<a href="#" onMouseOver="sayhi();">Say Hi</a>

Which would display the alert whenever the mosuse passed over it. Unless you are repeating

something many times, though, this will not seem particularly useful. This is where parameters

become useful.

Parameters

Parameters are a very useful part of functions. They allow you to pass data to the function when it

is called. Here is an example:

function say(what)




{

alert(what);

}

in the head, then:

<a href="#" onMouseOver="say(hi);">Say Hi</a>

<a href="#" onMouseOver="say(bye);">Say Bye</a>

What this is doing is the information in the brackets is passed to the function. In the brackets of

the function is the word 'what'. This is telling the JavaScript to assign the information in the

brackets to the variable what (the same as var what='something';). You can even do this with

multiple pieces of information by separating them by commas.

As you can see functions and parameters are very useful.




Part - VIII

Introduction

In the last part I explained a few of the things you can do using forms. In this, the final part, of the

JavaScript tutorial I will explain how you can do some other things with your JavaScript forms.

Using The Submit Button

The most common use of forms is to submit data to a script so that it can be processed. This is

fine if you are using CGI to do a mailto form or something like that, but if you just want to run a

piece of JavaScript from a form you will need to do things a little differently. The first part you

must learn about is the return false; attribute. It can be used as follows:

<form name="myform" onSubmit="return false;">

<input type="submit" value="Submit">

</form>

You can try it out below:

Submit

What this code does is tell the JavaScript that when the form is submitted it should do nothing.

This stops Netscape from refreshing the page (as it would do if there was just a submit button and

the form had no action). Now what you can do is to call a function using the submit button:

<form name="myform" onSubmit="MyFunction(); return false;">

Which will tell the browser to run the function 'MyFunction' when the Submit button is clicked. You

can, of course, use this without the:

return false;

part. This would be useful if, for example, you want to validate a form before it is sent to a CGI

script. You would include the form's action as normal. Then, in the onSubmit part you would call

your function to check what had been entered.

Checkboxes

Checkboxes and radio buttons are two of the remaining form items. First I will cover checkboxes.

Checkboxes have two possible values:

Unchecked Box




Checked Box

As there are only two possible values, the JavaScript to refer to a checkbox is slightly different to

that of a text box. In the example below the checkbox has been given the name my_checkbox

and is in the form example1.

if(window.document.example1.my_checkbox.checked=true)

{

alert('The box is checked!')

}

else

{

window.document.example1.my_checkbox.checked=true;

alert('The box was not checked so I have checked it!');

}

I will now explain what this code does. It will check the value of the checkbox. If the value is ture

(which means the checkbox is checked) then it will display an alert box which will tell you the box

is checked. If it is not checked it will check the box (put a checkmark in it) and tell you what it has

done.

If, of course, you want to check or refer to the unchecked value of a checkbox the code would be:

window.document.example1.my_checkbox.checked=false;

Remember that, when refering to check boxes you do not need to inclose true or false in

quotations.

As with all other form objects you can use onBlur, onChange and onFocus.

Radio Buttons

Radio buttons are usually found in groups like this:

Blue

Red

Green

Only one button in the group can be checked at a time. Radio buttons work in exactly the same




way as a checkbox, having a .checked property which can either be true or false.

Selects and Menus

The two remaining form elements are selects and menus. I will cover menus first. Menus are drop

down boxes with several options in them (they are mainly used for things like selecting your

country on a form). Selects are really just menus with multiple lines and scrollbars. To show how

they work I will show you a quick example of a menu in action and the code for it. For a select box

I would just change the height propery. To see the example click here. The code used is below:

<form name="go" onSubmit="return false;">

<select name="select"

onChange="window.document.location=window.document.go.select.value;">

<option value="#" selected>Please Select</option>

<option value="http://www.microsoft.com">Microsoft</option>

<option value="http://www.yahoo.com">Yahoo!</option>

<option value="http://www.gowansnet.com">Gowansnet</option>

</select>

</form>

What this code is doing is, when the select is changed it is telling the page in the browser to

change its location to the value of the select box. The location of the document is accessed using:

window.document.location

As you can see, this is could be very useful, both for getting feedback from visitors and for

redirecting them (as in the example above).

Conclusion

In this tutorial I covered some of the most important parts of JavaScript and now you should be

able to start writing some quite advanced scripts. There is still a lot of JavaScript left to learn with

many more advanced commands One way of improving your skills, though, is to look at the code

of other people's pages that use JavaScript. Don't steal them but you can learn more about the

language by doing this.




What is CSS?

• CSS stands for Cascading Style Sheets

• Styles define how to display HTML elements

• Styles are normally stored in Style Sheets

• Styles were added to HTML 4.0 to solve a problem

• External Style Sheets can save you a lot of work

• External Style Sheets are stored in CSS files

• Multiple style definitions will cascade into one

CSS Demo

With CSS, your HTML documents can be displayed using different output styles:

See how it works

Styles Solve a Common Problem

HTML tags were originally designed to define the content of a document. They were supposed to

say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>,

<table>, and so on. The layout of the document was supposed to be taken care of by the browser,

without using any formatting tags.

As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags

and attributes (like the <font> tag and the color attribute) to the original HTML specification, it

became more and more difficult to create Web sites where the content of HTML documents was

clearly separated from the document's presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting

consortium responsible for standardizing HTML - created STYLES in addition to HTML 4.0.

Both Netscape 4.0 and Internet Explorer 4.0 support Cascading Style Sheets.

Style Sheets Can Save a Lot of Work




Styles in HTML 4.0 define how HTML elements are displayed, just like the font tag and the color

attribute in HTML 3.2. Styles are normally saved in files external to your HTML documents.

External style sheets enable you to change the appearance and layout of all the pages in your

Web, just by editing a single CSS document. If you have ever tried to change the font or color of

all the headings in all your Web pages, you will understand how CSS can save you a lot of work.

CSS is a breakthrough in Web design because it allows developers to control the style and layout

of multiple Web pages all at once. As a Web developer you can define a style for each HTML

element and apply it to as many Web pages as you want. To make a global change, simply

change the style, and all elements in the Web are updated automatically.

Multiple Styles Will Cascade Into One

Style Sheets allow style information to be specified in many ways. Styles can be specified inside a

single HTML element, inside the <head> element of an HTML page, or in an external CSS file.

Even multiple external Style Sheets can be referenced inside a single HTML document.

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by

the following rules, where number four has the highest priority:

1. Browser default

2. External Style Sheet

3. Internal Style Sheet (inside the <head> tag)

4. Inline Style (inside HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will

override every style declared inside the <head> tag, in an external style sheet, and in a browser

(a default value).

Syntax




The CSS syntax is made up of three parts: a selector, a property and a value:

Selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute

you wish to change, and each property can take a value. The property and value are separated

by a colon and surrounded by curly braces:

body {color: black}

If the value is multiple words, put quotes around the value:

p {font-family: "sans serif"}

Note: If you wish to specify more than one property, you must separate each property with a

semi-colon. The example below shows how to define a center aligned paragraph, with a red text

color:

p {text-align:center;color:red}

To make the style definitions more readable, you can describe one property on each line, like this:

p

{

text-align: center;

color: black;

font-family: arial

}

Grouping

You can group selectors. Separate each selector with a comma. In the example below we have

grouped all the header elements. Each header element will be green:

h1,h2,h3,h4,h5,h6

{




color: green

}

The class Selector

With the class selector you can define different styles for the same type of HTML element. Say

that you would like to have two types of paragraphs in your document: one right-aligned

paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align: right}

p.center {text-align: center}

You have to use the class attribute in your HTML document:

<p class="right">

This paragraph will be right-aligned.

</p>

<p class="center">

This paragraph will be center-aligned.

</p>

Note: Only one class attribute can be specified per HTML element! The example below is wrong:

<p class="right" class="center">

This is a paragraph.

</p>

You can also omit the tag name in the selector to define a style that will be used by all HTML

elements that have a certain class. In the example below, all HTML elements with class="center"

will be center-aligned:

.center {text-align: center}

In the code below both the h1 element and the p element have class="center". This means that

both elements will follow the rules in the ".center" selector:




<h1 class="center">

This heading will be center-aligned

</h1>

<p class="center">

This paragraph will also be center-aligned.

</p>

The id Selector

With the id selector you can define the same style for different types of HTML element.

The style rule below will match a p element that has an id with a value of "para1":

p#para1

{

text-align: center;

color: red

}

The style rule below will match any element that has an id attribute with a value of "green":

#green {color: green}

The rule above will both match the h1 and the p element:

<h1 id="green">Some text</h1>

<p id="green">Some text</p>

The style rule below will match any p element that have an id attribute with a value of "green":

p#green {color: green}

The rule above will not match a h1 element:

<h1 id="green">Some text</h1>

CSS Comments




You can insert comments in CSS to explain your code, which can help you when you edit the

source code at a later date. A comment will be ignored by the browser. A CSS comment begins

with "/*", and ends with "*/", like this:

/* This is a comment */

p

{

text-align: center;

/* This is another comment */

color: black;

font-family: arial

}

How to Insert a Style Sheet

When a browser reads a style sheet, it will format the document according to it. There are three

ways of inserting a style sheet:

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style

sheet, you can change the look of an entire Web site by changing one file. Each page must link to

the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head>

<link rel="stylesheet" type="text/css"

href="mystyle.css" />

</head>

The browser will read the style definitions from the file mystyle.css, and format the document

according to it.




An external style sheet can be written in any text editor. The file should not contain any html tags.

Your style sheet should be saved with a .css extension. An example of a style sheet file is shown

below:

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

Do NOT leave spaces between the property value and the units! If you use "margin-left: 20 px"

instead of "margin-left: 20px" it will only work properly in IE6 but it will not work in Mozilla or

Netscape.

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:

<head>

<style type="text/css">

hr {color: sienna}



</style>

</head>

The browser will now read the style definitions, and format the document according to it.

Note: A browser normally ignores unknown tags. This means that an old browser that does not

support styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on

the page. It is possible to prevent an old browser from displaying the content by hiding it in the

HTML comment element:

<head>

<style type="text/css">

</style>

</head>

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation.

Use this method sparingly, such as when a style is to be applied to a single occurrence of an

element.

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain

any CSS property. The example shows how to change the color and the left margin of a

paragraph:

<p style="color: sienna; margin-left: 20px">

This is a paragraph

</p>

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be

inherited from the more specific style sheet.

For example, an external style sheet has these properties for the h3 selector:

h3

{

color: red;

text-align: left;




font-size: 8pt

}

And an internal style sheet has these properties for the h3 selector:

h3

{

text-align: right;

font-size: 20pt

}

If the page with the internal style sheet also links to the external style sheet the properties for h3

will be:

color: red;

text-align: right;

font-size: 20pt

The color is inherited from the external style sheet and the text-alignment and the font-size is

replaced by the internal style sheet.

CSS Background properties define the background eff ects of an element.

Examples

Set the background color

This example demonstrates how to set the background color for an element.

Set an image as the background

This example demonstrates how to set an image as the background.

How to repeat a background image

This example demonstrates how to repeat a background image only vertically.




How to place the background image

This example demonstrates how to place the image on the page.

How to set a fixed background image

This example demonstrates how to set a fixed background image. The image will not scroll with

the rest of the page.

All the background properties in one declaration

This example demonstrates how to use the shorthand property for setting all of the background

properties in one declaration.

CSS Background

The Background properties allow you to control the background color of an element, set an image

as the background, repeat a background image vertically or horizontally, and position an image

on a page.

Background Properties:

NN: Netscape, IE: Internet Explorer, W3C: Web Standard

Property Description Values NN IE W3C

background A shorthand property for setting

all background properties in one

declaration

background-color

background-image

background-repeat

background-

attachment

background-position

6.0 4.0 CSS1

background-

attachment

Sets whether a background

image is fixed or scrolls with the

rest of the page

scroll

fixed

6.0 4.0 CSS1

background-color Sets the background color of an

element

color-rgb

color-hex

color-name

transparent

4.0 4.0 CSS1

background-image Sets an image as the

background

url

none

4.0 4.0 CSS1




background-

position

Sets the starting position of a

background image

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

x-% y-%

x-pos y-pos

6.0 4.0 CSS1

background-repeat Sets if/how a background image

will be repeated

repeat

repeat-x

repeat-y

no-repeat

4.0 4.0 CSS1

CSS Text properties define the appearance of text.

Examples

Set the color of the text

This example demonstrates how to set the color of the text.

Set the background-color of the text

This example demonstrates how to set the background-color of a part of the text.

Specify the space between characters

This example demonstrates how to increase or decrease the space between characters.

Align the text

This example demonstrates how to align the text.

Decorate the text

This example demonstrates how to add decoration to text.

Indent text

This example demonstrates how to indent the first line of a paragraph.




Control the letters in a text

This example demonstrates how to control the letters in a text.

CSS Text

Text properties allow you to control the appearance of text. It is possible to change the color of a

text, increase or decrease the space between characters in a text, align a text, decorate a text,

indent the first line in a text, and more.

Text Properties:

NN: Netscape, IE: Internet Explorer, W3C: Web Standard

Property Description Possible Values NN IE W3C

color Sets the color of a text color 4.0 3.0 CSS1

direction Sets the text direction ltr rtl

CSS2

letter-spacing Increase or decrease the space between characters

normal length

6.0 4.0 CSS1

text-align Aligns the text in an element left right center justify

4.0 4.0 CSS1

text-decoration Adds decoration to text none underline overline line-through blink

4.0 4.0 CSS1

text-indent Indents the first line of text in an element

length %

4.0 4.0 CSS1

text-shadow none color length

text-transform Controls the letters in an element

none capitalize uppercase lowercase

4.0 4.0 CSS1

unicode-bidi normal embed bidi-override

5.0 CSS2

white-space Sets how white space inside an element is handled

normal pre nowrap

4.0 5.5 CSS1

word-spacing Increase or decrease the space between words

normal length

6.0 6.0 CSS1




Flash

Introduction

Flash is one of the most popular technologies on the internet, with thousands of websites using it

for introductions, animations and advertisements. Although many people feel that these

animations are sometimes unnecessary, Flash has created a way of including multimedia on web

pages, which will run over a standard internet connections. The recent release, Flash 5, has

brought many changes to the creation of Flash animations. Many of the techniques covered in

this tutorial will also apply to past versions of Flash, as well as Flash MX, the very latest version,

though.

Why Use Flash?

Flash is one of the best multimedia formats on the internet today for several reasons. Firstly, the

Flash plugin (required to view the animations) is installed on nearly every computer connected to

the internet. All the major browsers come with it installed by default and, for those who don't have

it, the download is very small. Secondly, Flash is a 'vector based' program, which means the

animations and graphics created by it have much smaller file sizes than a video or streaming

media version of the same animation would be. You can also include sound, graphics and

dynamically created information in your animation.

Flash provides a versatile and easy way for webmasters to create animations for their users.

What Do I Need?

As mentioned above, all you need to view a Flash animation is a modern web browser with the

Flash plugin. To create Flash animations, though, you will need some software. Although there

are other Flash creations on the market, Macromedia's Flash 5, is by far the best and, as

Macromedia created the Flash format, it always has the latest features in it. Unfortunately, the

software costs $400, but you can download a free 30 day trial from Macromedia.

Once you have downloaded and installed the trial (or bought the software) you will be ready to

start creating Flash animations.

The Flash Interface

When you first open Flash you will find an interface that looks something like this:




I will quickly cover the different aspects of this screen.

In the centre is the large white 'Stage'. This is the actual movie where you will place all the objects

you want to include in it.

Across the top of the screen is the timeline. This is where you insert all the actions that happen in

your movie so that they happen at the correct times. It is split up into frames.

Down the left hand side of the screen is the 'Tools' pallette. This is where you will find all the tools

for inserting objects and text into your animation.

There are also four floating pallettes on the screen. The 'Mixer' pallette allows you to choose the

colours you will be using in your animation. It will change the colours of the currently selected

object. The' Info' pallette will allow you to find out a bit of information about the object you have

selected and will allow you to make changes to the properties of a tool you are using. The

'Character' pallette contains all the text formatting tools. Finally the 'Instance' pallette contains all

the tools for changing objects when you are animating them, including sound and several other

tools for making changes to your animation.

Each of the parts of the Flash window does many different things. Instead of going through each

tool explaining what it does, I will show you examples and explain how to create them, showing

you how to use each tool while doing so.




Part 2

In part 2 I will show you how to create your first animation with graphics and text appearing on the

screen.

Introduction

In the last part I showed you the Flash interface and explained exactly what Flash is. In this part I

will show you how to use Flash's drawing and painting tools to put something into your animation.

At this point there will be no interactivity and nothing will move but once you know the basics you

can develop this futher.

Basic Drawing

The first thing you need to learn how to do is to draw basic shapes in Flash. We will start with the

most basic shape, the circle/oval. Before you start you might want to move some of the floating

pallettes so that you can see enough of the stage to work on.

Firstly, choose the Oval tool from the Tools bar on the left:

Then, draw the oval or circle you want on the stage (just as you would in a normal graphics

program). Holding down shift will force the object drawn to be a circle. Once you have drawn your

circle you will now notice a few things about it. Firstly, there is a line around the circle and a fill

inside it. These are changed using the colors section of the Tools bar:

The first option (set at black in this example) is the line colour and the bottom option (blue in this

example) is the fill colour. To change them click on the box filled with colour. You will get a menu

with a selection of colours. If you want to match the colour to a colour on your screen click on

anything on the screen and its colour will be used.

Now, try drawing another circle or oval, but this time change the fill and line colours.

The next tool you will use is the rectangle tool:




As with the circle tool, this works in exactly the same way as in any standard grapics program,

you can drag out a rectangle you want to draw and hold down shift to force a square. Like the

circle, the rectangle's line and fill colours are set using the colors section of the Tools bar.

The rectange tool, unlike the oval, has some options which can be set. These appear in the

Options section of the Tools bar:

There is only one option for the rectange, the Round Rectangle Radius. This creates rectangles

with rounded corners like this:

Click on the option. A box appears asking for the radius in pixels. The example above used a

radius of 20 pixels but it is best to experiment to find the best setting for what you want. After you

have set this draw another rectangle. This one should have rounded corners. Remember: Flash

will remember this setting so before you draw another standard rectange you should set it back to

0.

Like any other drawing program, Flash also has a straight line too:

This works in exactly the same way as the line tool in graphics software.

The objects you have drawn can also be moved. You must be careful, though, as Flash treats the

fill and the line separately, so to move both together you must double-click in the object before

dragging it if you want to move them both.

Drawing Or Painting?

Flash is a very strange program for editing grapics. It is really a cross between a drawing and a

painting program with some special features of its own. It is like a drawing program because you

can move and change objects once you have drawn them but it acts like a painting program with

fills etc. For example if you drew two circles, a large one with a black line and a blue fill and a




small one with a black line and no fill, then moved the small one on top of the bigger one. You

could then use the fill tool to fill in the middle of the small circle, changing only part of the big one.

Flash also allows you to break up graphics using other ones. If you now moved the small circle

away from the larger circle it would leave a white space behind where it used to be. This feature

can be extremely useful.

Special Fills

AS well as filling a shape with a single colour you can also use Flash's premade fills. They are

found at the bottom of the fill box. There are three gradient fills but the best are the radial fills.

These allow you to fill in any shape with a radial gradient (going from light to dark). The special

thing about them is that the lightest part will be where you click your mouse when using the fill

option:

so you can very effectively make 3D looking circles, which are excellent for buttons.




Part 3

In the next part I will show you some more of the tools and how to use text in Flash.

Introduction

In the last part of the tutorial I showed you some of the basic drawing tools in Flash. Before I show

you how to create animations in Flash, I will first explain some more of the tools available to you.

These tools are not as important as the ones I showed you last week but, to create good

animations, it is useful to know how to use all the tools.

Ink Bottle

The ink bottle tool is quite useful. If you have a block of colour (for example one created with the

paintbrush - which will be covered later in this tutorial) you can click on it to add a line round the

edge. The colour of the line placed round the edge will be the same as the colour selected as line

colour on the tools bar.

Dropper Tool

The dropper tool, like the ones in graphics software, is used to pick a colour off one part of the

screen and use it as the fill or line colour. If you click on a fill, the fill colour will be set and the

pointer will change to the fill tool. If you click on a line, the line colour will be set and the pointer

will change to the ink bottle tool.

Eraser Tool

The eraser tool is used to rub things out on the stage. It is used by just clicking and holding down

the mouse. It does have a few options though:

The large section at the bottom is used to select the size and shape of the eraser brush. On the

right at the top is the faucet tool. This makes the eraser work like the fill tool - you just have to

click once to remove the fill from an area. The part on the left is the special option. This allows




you to choose the type of eraser you use. The default is Erase Normal, which works like a normal

eraser tool. Some of the other options are:

• Erase Fills which will leave all lines intact as you use the eraser but will rub out fills

• Erase Lines which leaves fills but rubs out lines

• Erase Inside which allows you to erase inside a shape without harming the edges

Paintbrush Tool

The paintbrush tool will paint lines all the time you have the mouse button held down. It has some

options, though, which are like the eraser tool options:

• Paint fills, will only paint inside a shape • Paint Behind, which will paint behind all shapes and fills

Pencil Tool

The pencil tool allows you to draw lines on the screen. It is different to a normal freehand tool,

though, as it has three options which can be set:

This option will allow you to choose what flash does to your line once you have drawn it. The

default option is Straighten. Flash will straighten out your line so that any part of it that is almost

straight will be made into a straight line. The two other options are smooth and ink. Smooth will

change your line so that it is smoothed out to make curves. The ink option will not make so many

changes to your line but will still smooth it a bit and straighten some lines.

The Text Tool

The text tool is used for adding text to your flash movies. Just click on the stage where you want

the text to appear and a cursor will appear, where you can type in your text. To make changes

you need to use the character palette:




The options here are quite self explanitary. The font section lets you choose the font for the text.

With flash all fonts are embeded in the file so the user does not need to have the font on their

computer. Below that is the size box which lets you choose the text size. Next to that are the

normal bold, italic and colour options. Below that is the Tracking option. This allows you to choose

how spaced out the characters are. At 0 the spacing is normal. If you increase this, spaces will be

left between your characters. If you decrese it, your characters will start to overlap. The option

below this is the superscript/subscript option and below this you can specify a URL for a link.




Part 4

In this part you have learnt most of the standard tools in Flash. In the next part of the tutorial I will

show you how to create Symbols and how to create your first animation.

Introduction

Over the last few parts you have learnt how to use most of the standard drawing tools in Flash. In

this part of the tutorial I will show you how to create your first Flash movie with animation.

Symbols

In order to animate something in Flash it must first be changed into a Symbol. There are three

types of symbol: Graphic, Button and Movie. In this part of the tutorial I will just deal with

Graphics.

To start, draw a filled circle in the middle of the screen, a few centimetres high. Choose the arrow

tool and double click on the circle to select it and the line around it. Then press F8 on the

keyboard. You will get a window called Symbol Properties. In this window you can give a name to

your symbol so that you can refer to it later. Type 'Circle' (without the quotes) in the box and then

select Graphic and click OK.

You will now notice that the circle apears with a blue line around it. The next thing you will want to

do is to animate this circle.

The Timeline

To create animation in flash you must use the timeline:

The timeline window shows all the frames that make up your animation and all the layers (which

will be covered later). Each small box in the timeline is a frame. The animation runs at 12 frames

per second (shown at the bottom) as standard but this can be changed. As you can see above,




there is a black dot in the first frame. This signifies that it is a keyframe.

Keyframes

Keyframes are very important in flash as they are used whenever something is changed. For

instance if you wanted the circle to appear in another position later in the movie you would create

a keyframe in the frame where you want it to change and then you could move the circle without

affecting the rest of the movie. That is exactly what you are going to do now.

Right click in frame 50 on the timeline and choose Insert Keyframe. This will insert a new

keyframe into the animation at frame 50 and it will contain the same information as the previous

keyframe. You could have also chosen Blank Keyframe which will make a new blank keyframe

but you want the circle to be in both keyframes in your movie.

Now, click in frame one and press Enter to play the movie. As you can see you now have a 4.1

second long movie of a circle in the middle of the screen - not very interesting.

To make something happen you will need to change the second keyframe. Click on it (frame 50)

and the symbol of the circle will be selected. Now, with the arrow tool, click and drag the circle to

the upper left hand corner of the stage. Then click in frame one again and press Enter to play the

movie.

Animation

The movie you have created now has a circle which moves on the screen but, as you will have

noticed, it stays in the same place and then suddenly moves in the last frame. Animations, like

television and film, are made up many frames, each of which has a slight change from the last

one. As they are played very fast (12 frames per second in flash) the object looks like it is moving.

Luckily, flash has been built so that you don't have to do all of this manually.

Acutally, animating the circle on the screen is amazingly easy because of the Flash feature called

Motion Tweening. This feature will automatically create all the frames to go between two

keyframes to animate an object which you have moved (in this case the circle). All you have to do

is right click in any frame between your two keyframes and choose Create Motion Tween.

Once you have done this the frames will change from being grey to being blue with an arrow

across them. This signifies a motion tween. Click in frame one and press Enter to view your

movie. As you can see, now flash has made your circle move smoothly accross the screen and, if

you click in the frames between your keyframes you will see that it has created all the frames in




between.

Scaling

Motion Tweens can be used for other things as well as moving objects. You can also change their

size. For this you will use the scale tool. Right click inn frame 80 and create a new keyframe.Your

circle will be selected. Now choose the Scale tool:

from the Options section on the tools pallette (if it is not available make sure you have the black

pointer tool selected). This tool allows you to change the size of objects. 6 white boxes will appear

at the edges of the circle, just like in any other image application. Use the bottom right hand one

to drag the circle size until it is considerably larger. You will also notice that the circle grows

equally around its centre point. Now, as before, right click in between frames 50 and 80 and

choose Create Motion Tween.

Now you can play your movie.




Part 5

In this part you learnt how to create a simple flash animation. In the next part I will show you some

of the other animation tools you can use.

Introduction

In the last part I introduced you to Symbols and how you can use them to create animations in

Flash. There are other things you can do to symbols, though, as well as moving them around and

changing their size. In fact, almost any change to a symbol can be animated.

Rotation

Resizing a symbol is not the only thing you can do to it. Symbols can also be rotated. To do this

create a movie and draw a large red square in the middle. Then, select the square and make it a

symbol (F8). Give it a name and choose Graphic as the type. Then go to frame 30 and insert a

keyframe. In this new keyframe choose the black arrow from the Tools menu and then click on the

Rotation option:

which is found next to the Scale option under the Options section for the arrow. Then click on one

of the white handles that appear round the rectangle and drag the mouse until the rectangle

rotates to about 90 degrees (or any rotation). Then all you have to do is right click between

frames 1 and 30 and choose Create Motion Tween to animate your rotation.

Animating Text

Text, like images can be made into symbols and animated in exactly the same way as images

can. The technique is exactly the same except for one difference: even when it is a symbol you

can still edit text by double clicking on it. Apart from this you can rotate it, scale it, move it and

perform any other changes that you normally could.

Importing Images

You can import any graphic into Flash and then use it as you would as if it had been created in

Flash. This is especially useful for pictures such as photos which could not be created using

Flash's graphics tools. To import an image is very simple: just go to File then Import... find the

image on your hard drive and then click Open. The image will then appear on the stage. You can

now resize it and make it a symbol if you want to.




Symbol Effects

There are several effects you can apply to a symbol which are slightly different to what you have

already done. This involves using another one of the floating palettes. Firsly, click on a symbol to

select it. Then find the Effects pallette. If it is not immediately visible look for the Instance pallette

then click on the Effects tab. You will get a pallette like this:

There are four different options. First, select Brightness. This will allow you to change the

brightness of the symbol. You can either type in a percentage (between -100 (for darkest) and

100 (for lightest) where 0 is the current value) or you can use the slider which can be accessed

using the little arrow next to the percentage box.

Tint allows you to place a tint colour over the symbol. On this part you have a few options. Firstly

you can specify the percentage for the tint between 0 (no tint) and (100) fully coloured. Values

around 50% usually give quite good results. You can also choose your colour and there are three

options for this. You can use the standard Flash colours menu, choose it from the large Colour

Selector at the bottom or you can enter an RGB value in the three boxes.

Alpha is a very useful option. It allows you to make your symbol partially or fully transparent. You

can choose from a percentage (like for the brightness) where 0 is invisible and 100 is the normal

symbol. This, as you can probably work out, is how you create fading effects in Flash. You create

a symbol and start it and alpha 0% then use a motion tween to animate it to 100% for a fade in

and the opposite for a fade out.

The fourth option, Advanced just combines these three effects.

These effects are quite hard to explain so this Flash movie shows you all the different effects in

action.

Multiple Animation

You don't only have to change one thing at once when you animate a symbol. For example create

a symbol of a square. Create a keyframe at frame 30. Then click on the symbol in frame 30. Use




the scale tool to make it much bigger. Then use the rotate tool to turn it to a different angle. Finally

use the effects pallete to set the alpha at 100%. Now go back to frame 1 and click on the same

square. Go the effects pallette and set the Alpha to 0. Then create a motion tween between

frames 1 and 30 and play your movie.

You now have a square which rotates and grows while fading in.

Part 6

In part 6 I will show you how to create layers and buttons to control your animation.

Introduction

In the last parts I have taught you how to create simple animations. In this part I will explain how

Flash's layers work and how you can create simple buttons.

Layers

One major feature of Flash is that, like several image editing programs, everything you do is put

into layers on the screen. Layers are like pieces of transparent plastic. You can put pictures text

and animation on them. Layers higher up have their content over the top of layers lower down. So

far everything you have done has been contained in one layer, though.

Layers are controlled through the timeline, which you have seen before:

As you can see, there is only one layer in this animation, Layer 1. The first thing you should do is

to rename this layer. Although your animation will work with it being called Layer 1 it is much

easier to understand what you are doing if you use proper names for your layers. Doubleclick on

the name and type in Scrolling Text.

Now you will want to put in some content for this layer. Make a symbol with the text:

This is my Flash Animation




And make it a symbol. Now move it right off the left edge of the stage. Insert a keyframe at frame

120 and in that frame move the text to off the other side of the stage. Now make a motion tween.

Your text should 'scroll' across the screen.

Now you can add another frame. Click the little icon on the timeline with a + sign on it. This will

add a new frame above the one you are currently using. Rename this to Circle.

In this layer make a circle which is very small, make it a symbol and then animate it to grow much

bigger in 120 frames.

This should show you how, when you create a second layer it is completely independent of the

other layers but that layers above another layer overlap them.

Buttons

For the second part of this tutorial I will show you how to make basic button. Create a new movie.

In the first frame draw a rectangle. Then put some text on it using the text tool saying 'Frame 2'.

Now select both the text and the rectangle and create a symbol. This time make it a Button.

Now double click on the new symbol and the button editor will open. This is slightly different to

what you have seen before. The timeline now only has three frames, each with its own name:

• Up - The normal state of the button

• Down - How the button looks when your mouse is over it

• Click - How the button looks when your mouse button is down

• Hit - The area which will trigger mouse events

You will need to create a keyframe in each of these frames. Go to the second frame and change

the colour of the rectangle. Then do the same in the third frame. The fourth frame does not need

changing. It is invisible but, as the button image is in there, the correct area will trigger the button.

Now click on Scene 1 at the top above the timeline.

You are now returned to your movie. Create a new Blank Keyframe in frame 2 and just insert the

text 'Frame 2'. This will allow us to see when the button has worked. Press Ctrl+Enter on the

keyboard to test the movie (so that the buttons work). As you can see, it just loops the 2 frames

continuously. Click the close button to return to the editor.

To stop Flash from repeating the frames over and over you will need to insert a frame action

(more about these in the next part). Right click in frame 1 and choose Actions. Double click on




Stop in the left column and then close the box. Now use Ctrl+Enter to play your movie again. This

time only frame one will be displayed and you can test your button. It does not yet take you to

frame 2 though.

To do this, return to the editor and right click on the button. Choose Actions (like you did for the

frame). Double click on GoTo. This will bring up some options at the bottom of the screen. Frame

Number is already selected so type 2 in the Frame box. As you want the movie to stop when you

arrive there, uncheck the Goto and Play option. Close the Actions box and play your movie.

Now when you click the button it will show frame 2, just as you wanted.




Part 7

In part 7 I will explain more about how to use actions to control your movie and how you can

actually use them for simple (and some advanced) scripting in Flash.

Introduction

In the last part of the tutorial I introduced you to actions in Flash using buttons to control your

animation. In this part I will show you more of the things you can do with Flash 5's actions.

Inserting Actions

In the last part I showed you how to use an action with a button so that it was triggered when the

button was clicked. Actions can also be added to frames and to other mouse events on the

button. Firstly I will cover the buttons. If you haven't done so already make a simple button for

your animation and right click on it and choose Actions. The actions window (which you first used

last week) will appear. It has two windows. The one on the right contains the hundreds of actions

you can add. The one on the left contains the code (like programming code). Choose an event

(like Go To) and double click it to add it to the code. This is as far as you did in the last part.

What you didn't learn last week was that you can change what triggers the action. There are

several options for this. To access them click on the part of the code which says:

on (release) {

A new section will now appear at the bottom of the box with the options for this part of the code (in

Flash you write code by selecting options). Her you can choose what triggers the action. As you

can see it is currently set as Release so when the mouse button is released the action will

happen. This is fine for clicks but you may want to use some of the other triggers. To change the

trigger just deselect the old one and select a new one. You can select more than one but just now

I don't recommend it.

You can also trigger actions when a frame loads. Right click in any keyframe and choose Actions.

This is exactly the same as the button Actions box except when you add an action there will be

no:

on() {

code as the actions are executed when the frame is played.

Some Actions

I will now cover some of the actions you can add. Most of these will be available for both buttons




and frames but some may not.

Go To

Go To, like its name suggests, makes the playback move to a different part of the movie. There

are several options for this. You can choose the Scene in your movie to point to (if you are using

multiple scenes), choose the type of Go To and the Frame. The type has several options but the 3

you will probably use most are Frame Number, Next Frame and Previous Frame. If you choose

Frame Number, type in the box below which frame you want the movie to go to. Next and

Previous frame are self explanitary.

The other option is the Go To and Play checkbox. If this is checked the movie will go to the

specified frame (or scene) and will continue playing from that point. If you deselect it the movie

will go to that frame but will only show that frame, and will not continue playing until another action

tells it to.

Play and Stop

The Play and Stop actions have no parameters. One plays the movie from the current point and

the other stops it (although it remains at its current position).

Toggle High Quality and Stop All Sounds

Toggle High Quality will switch the movie between high and low quality. Stop All Sounds will stop

all the sounds currently playing in the movie. Neither of these have any parameters which can be

set.

Get URL

This can be used for both frames and buttons. Basically, when clicked, it will point the browser to

the specified URL. The URL is specified in the parameters for the action. You can also choose the

window for the new page you are opening. This is the same as target in HTML. _blank will open in

a new window and you can specify the name of a frame in here (if you are using them). The

Variables option allows you to send the variables set in a form in your movie just like an HTML

form (this is good for Submit buttons). You can choose between the standard POST and GET

options.

If Frame Is Loaded

The If Frame Is Loaded is quite a complex but very useful command. It is used to make the




'loading' parts at the beginning of some Flash movies. It is used like an IF statement in a program.

Double click the If Frame Is Loaded action to add it to the code, then double click the Go To

action. You now have a small IF loop.

Firstly you should set the parameters for If Frame Is Loaded. Click on this part of the code. You

will see that this is very similar to the Go To parameters. Here you select the frame you want to

use. When this code is run it will check whether the specified frame has loaded yet, if it has then it

will execute the code within the { and }.

Creating A 'Loading' Sequence

Many Flash animations on the internet, especially ones with a lot of sound and images, will not

just start playing smoothly while they are still loading. For these, most people add a 'loading' part

to their movie. This is a actually a few frames which will repeat until the movie is loaded. They are

actually quite easy to make.

Firstly choose how many frames you will want for your 'loading' section. Something like 10 frames

is about right. Create the part of the animation you want to loop in these frames. In the last frame

of the 'loading' section right click to access the Actions menu. Double click on If Frame Is Loaded

and then immediately afterwards double click on Go To. Then click on the final } in the animation

and double click the Go To action again. You should now have the following code:

ifFrameLoaded (1) {

gotoAndPlay (1);

}

gotoAndPlay (1);

This is the code which will do the 'loading' part. Firstly click on ifFrameLoaded(1) and choose the

frame you want to wait until it is loaded from the parameters. Click on the first gotoAndPlay(1) and

choose frame 11 (if you used 10 frames for your 'loading' sequence). Finally, for the last

gotoAndPlay(1) choose the first frame in your animation.

This is actually a very basic program, showing how easily complex programs can be written using

Flash's actions. What the code actually does is to check if the specified frame is loaded. If it is it

goes to the first frame of the acutal animation. Otherwise, it returns to the beginning and plays the

'loading' ssequence again.




Part 8

In this part I have shown you how you can use the Actions options in Flash to make your movie

more interactive. In the next part I will show you how to include some sound into your movie.

Introduction

In the past 7 parts of this tutorial I have showed you how you can create visual effects using

Flash. In this part I will show you how you can create an even better user experience by using

sound in your animation.

Importing Sounds

Before sounds can be used in your animation they must be first made available for the software to

use. To do this you must use the standard Import menu. To access this go to File, Import. From

here you can select each file you want to import (just as you did in an earlier part with images).

The only confusing thing about this is that once you have imported your sound you will see

nothing special on the screen. This is because the sound has been added to the library.

The Library

The library is not only for sound, but is actually one of the most useful parts of Flash when you

start to create large movies with many elements. Basically, the library contains all the objects you

have in your movie, the three types of symbol (movie, button and graphic) and all sounds. This

can be very useful as, to add something to the movie from the library you just drag it to the

position you want it on the stage.

You can also preview all the objects here, graphics will appear in the top window and if you select

a button, sound or movie clip you can watch or listen to it by clicking the little play button which

appears in the preview window. You should be able to see and preview any sounds you have

added here.

Adding Sound

Sound is added using the sound palette. This is in the same palette as Instance, Effect and

Frame. If it is not on the screen go to Window and choose Panels, Sound. The sound palette will

probably be 'greyed out' at first. Insert a keyframe into your movie and click in it to make all the

options available.




In the first 'Sound' box you can select the sound you want to play. If no sounds appear here, you

have not yet imported any into your movie. Check the Library to see if any appear.

Now the effect box will be available. This is not particularly important just now. The next box is the

Sync box. You can choose Event, Start, Stop and Stream. The only ones you really want to learn

about at the moment are Event and Stream. They each have their own features.

Stream

Streaming sounds work like streaming audio on the internet. The sound does not need to be fully

loaded before it starts playing, it will load as it plays. Streaming sounds will only play for the

number of frames that are available for it (until the next keyframe). This is fine for background

sounds but it will not work very well for a button.

Event

Event sounds are mainly used for when someihtng happens in your movie. Once they have

started playing they will continue until they end, whatever else happens in the movie. This makes

them excellent for buttons (where the button moves on to another frame as soon as it is clicked).

The problem with Event sounds, though, is that they must fully load before they can play.

Adding A Streaming Sound

It is much easier to manage your sounds if you put them on a separate layer. Insert a new layer

and place a keyframe at the beginning. Using the sounds palette select the sound you want to

play and select Stream from the Sync. If you want the sound to loop change the value in the

Loops box (for some reason a value of 0 (default) will cause the sound to play once).

Now you must insert some frames to give the sound time to play. Insert a frame (or keyframe) at

about frame 500 in the movie (this will give most sounds time to play). When working out how

many frames are needed remember that the movie will play at 12 frames per second. A graphical

representation of the sound will appear in the frames it will be playing during so that you can see

how much space it takes up. Press CTRL + Enter to preview your movie.

With the sound on a separate layer you can have your movie running on other layers while the

sound plays in its own layer.




Adding An Event Sound to a Button

Adding an event sound to a button is nearly as easy as adding a streaming sound. Either create a

button or use a pre-made one and right click and choose Edit. This will allow you to see the 4

different states of the button (as you learned about in part 6. Usually sounds are placed in the

Over or Down frames. To make a sound play when the mouse moves over the button choose

Over and to hear it when the button is clicked choose Down.

Insert a new frame and then put a keyframe for the button state you want to use. Click in the

frame and use the sounds palette to add an Event sound. You don't need to put in any extra

frames as an event sound will play until it finishes. Now return to the movie and use CTRL + Enter

to test it with the button.

Effects

The effects option allows you to add a variety of effects to the sound as it plays. The preset ones

are quite self explanitary but you can also use the Edit.. button to create your own. This will open

a window with the the waveform representation of the sound (left speaker at the top, right at the

bottom). On the top of this is a line which is the volume control (the top is full volume (the volume

the sound was recorded at) and the bottom is mute). By clicking in the window you can insert little

squares. The line goes between these squares. You can also drag them around the screen. By

doing this you can change the volume of the sound at different points throughout its playing time,

and make it different for each speaker.




Part 9

In the final part of this tutorial I will show you how to export your animation for the web.

Introduction

Over the past 8 parts of this tutorial I have taught you the basics of how to create an animation, or

even a full site, in Flash. Finally, in this part, I will show you how to export your animation for use

on the web.

Publishing

The movies you have been working with for the past few weeks are saved as .fla files. These are

Flash 5's own file format, which is used when creating and editing files. These files, though, are

no good for use on the web for several reasons. Firstly, they are quite large, usually about double

the size they will be on the web, and they cannot be played by people's web browsers, even with

the Flash plugin.

For use on the web, Flash files must be saved as .swf files. These will play in any browser which

has the Flash 5 plugin. You can make your flash file work on older versions of the Flash plugin as

well, though. To do this you must use the Publish option in Flash.

The publish option doesn't only export to .swf files but can also do a variety of different file formats

including creating the HTML code for the web and a stand-alone player for distribution.

Publish Settings

Before publishing your flash file you should first check the settings for the output. Click File,

Publish Settings... to bring up the publish settings menu. Here you can select the formats you

want to output. Some of the most useful ones are:

• Flash - The .swf file which contains the animation

• HTML - The HTML code for including the Flash on your website (recommended)

• GIF - An animated GIF with all the frames of your animation will be output

• Windows Projector - Will create an .exe file which will play the animation, whether the

Flash player is installed or not (useful for ditribution offline)

For each option you have selected a tab will appear at the top of the window. This contains the

advanced options for each of the options you selected. These are not particularly important




unless you are not happy with the current options that have been set. They let you change things

like the quality of the animation, the size of the image and the quality of the audio. This is quite

useful for exporting your animation for use offline (where quality can be higher) etc.

Publishing

The final stage is to now Publish your movie. You can either click the Publish button or choose

File, Publish. Before doing this you may want to preview the published version by choosing File,

Publish Preview and then choosing what you want to have a preview of. Once your files are

published you can test them out by running them as normal.

You can publish your movie as many times as you like without problems, although it is normal to

wait until it is finished to do this.

Uploading

Now all you have to do is to upload your files as you would normally (remember you will need

both HTML and .swf to make it work online) or put the files on your distribution media (CD etc.)

and your animation is finished.

Conclusion

Over the past 9 parts of this tutorial you have learned the basics, and some of the advanced

parts, of creating a site or animation in Flash 5. There is a lot more you can learn, though, and in

the future we will be running a tutorial on some of the more advanced things you can do with

flash. There are also many other websites on the internet about Flash (like FlashKit which has

loads of useful information

Server Side Includes (SSI)

Part 1 - Introduction & Including A File

Introduction

Server Side Includes (SSI) are extremely useful, even though you may have never heard of them

or known that you are experiancing them. SSI is a server side method of manipulating web pages

which means that you do not need a specific browser to use them, and they will run on any

computer.

You will never have noticed SSI before on a web page because nothing special appears, in fact

the adverts at the bottom and side of this page are placed there using SSI. What SSI does is it

tells the server to replace the SSI tag with something else, for example a piece of text. This is

done when the page is requested and the user will see nothing different to if the text (or code)

was already there (view the source of the page to see this).

Why Should I Use Them?

You are probably thinking that this seems a very strange way to include some text, or even some

HTML code on your page. It seems like a bit of a waste of time when you could just enter it as you

normally would. There are two great benefits of SSI, though. Firstly, you can get many pages to

include the information from a single file so that you could, for example, include a standard footer

on each page with your copyright information. You could then update all the pages by just

changing this one page.

Secondally, you can get your SSI to execute a CGI script on your server. This allows you to have

text counters, advanced advert rotations, random text and images and several other extras on

your web pages. This is one of the best uses of SSI.

What Do I Need?

As I mentioned earlier, SSI tags are parsed server-side, not by the user's browser. This means

that SSI must be set up on your server for them to work. You are unlikely to have SSI enabled if

you do not have a CGI-BIN but if you do it is very likely that the server administrator will have

enabled SSI.

To test whether SSI is set up on your server place the following code in an HTML page:

Then try to run this page on the server. If SSI is enabled the current date and time on the server

will be displayed. If this does not work try renaming the page extension to .shtml instead of .html

or .htm. Many servers require this for SSI to work. If neither of these work, check the source code

of your page. If the SSI tag is still there there is a problem. E-mail the system administrator and

ask him if SSI is enabled.

If you do not have SSI on your server then you could try one of the free web hosts that support it

like Virtual Avenue or Hypermart.

Including A File

This is one of the most simple things you can do using SSI. Create a text file with a little bit of text

in it and save it. Upload it to your server. Then create an HTML file and add the following:



The way in which this works is that the file is refered to relative to your accounts root. To explain

this I will show what would happen if you had the file saved in a folder called 'common'. Your site

is at www.mysite.com.

To include this file from any page on your site you would use:



This would be the same even if it was on the page www.mysite.com/index.htm or

www.mysite.com/html/files/myfile.htm

An easy way to work out what the path would be is to take your domain name (or subdomain) off

the file's name:

http://www.mysite.com/common/myfile.txt

in this example. The obvious benefit of this is that you don't even have to keep updating the code

on each page like you would with an image or a link.

Part 2 - Scripts & Preset Commands

Introduction

In the last part I explained what SSI is and what it can be used for. In this part I will show you how

using it with a script is useful and how you can include certian information into your page.

Scripts

One major use of SSI is to include the output from a script in your page. As I explained in the last

part, the adverts a the bottom and side of this page are placed there using SSI. There is a very

simple CGI script which, every time it is run, generates the code for an advert to place on the

page.

This file is then called via a standard SSI call (like for any other file) with a slight change (although

'include virtual' usually also works):



As well as for advertising rotation, SSI can be used with many other scripts, for example to

display a textual visitor count on your page or to do an image or text rotation on a page of your

site. It can even be used in conjunction with a content gathering script to seamlessly integrate it

into your pages.

Preset Commands

SSI can also be used to display information on your page which is preset by the server. One of

the major uses in the date and time command which is used as follows:



which appears like this:

Friday, 12-Apr-2002 11:03:34 EDT

(this is not a live example, the true system time would be shown on a real ssi page)

This is the date and time on the server your site is hosted on. You can also display the date and

time time in GMT using:



The format the date and time appear as may not be what you want so you can format it using the

'Timeformat' command before the date command, for example:



which will display:

Friday 12 April 2002

(again this is not a live example)

The time format is made up of some codes which you can separate as you want them to appear

(like the comma I used above). Here is a list of some of the codes you can use:

Code Function Examples

%A Full weekday name Monday, Wednesday

%a Abbreviated weekday name Mon, Wed

%B Full month name January, December

%b Abbreviated month name Jan, Dec

%d Number of day in month 03, 15

%e Number of day in month 3, 15

%H Hour (1-24) 05, 22

%I Hour (under 12) 03, 11

%j Day number in year 12, 245

%m Number of month 1, 12

%M Minute 12, 59

%p AM or PM AM, PM

%n New Line

%S Second 12, 57

%t Tab

%y 2 Digit Year 99, 03

%Y 4 Digit Year 1999, 2003

%Z Time Zone EST, GMT

As well as the time there are several other preset commands you can use including:

Document Name (the file's name):



Doucument's URL (the part after the domain name)



Refering Page:

Users IP Address:



There are some others as well, although these are the most useful.

What Next

Now you have learned the basics of using SSI you will probably find that you can't do without it! If

you want to find out some of the other preset commands in SSI you can do a search on your

favourite search engine.