Page 1
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
Page 2
Internet and WebTechnology Page No:2/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 3
Internet and WebTechnology Page No:3/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 4
Internet and WebTechnology Page No:4/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 5
Internet and WebTechnology Page No:5/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 6
Internet and WebTechnology Page No:6/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 7
Internet and WebTechnology Page No:7/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 8
Internet and WebTechnology Page No:8/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
• 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
Page 9
Internet and WebTechnology Page No:9/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 10
Internet and WebTechnology Page No:10/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 11
Internet and WebTechnology Page No:11/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 12
Internet and WebTechnology Page No:12/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 13
Internet and WebTechnology Page No:13/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
� 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.
Page 14
Internet and WebTechnology Page No:14/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 15
Internet and WebTechnology Page No:15/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 16
Internet and WebTechnology Page No:16/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 17
Internet and WebTechnology Page No:17/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 18
Internet and WebTechnology Page No:18/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 19
Internet and WebTechnology Page No:19/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 20
Internet and WebTechnology Page No:20/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 21
Internet and WebTechnology Page No:21/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
• 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
Page 22
Internet and WebTechnology Page No:22/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
Page 23
Internet and WebTechnology Page No:23/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 24
Internet and WebTechnology Page No:24/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
• 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:
Page 25
Internet and WebTechnology Page No:25/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 26
Internet and WebTechnology Page No:26/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 27
Internet and WebTechnology Page No:27/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
Page 28
Internet and WebTechnology Page No:28/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<title>Untitled</title>
</head>
<body>
</body>
</html>
I will explain what all this means below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
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).
<title>Untitled</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.
Page 29
Internet and WebTechnology Page No:29/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
</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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</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:
Page 30
Internet and WebTechnology Page No:30/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<title>Untitled</title>
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
Page 31
Internet and WebTechnology Page No:31/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
<font face="Arial" size="7" color="red">Welcome To My Homepage</font>
</center>
Which would display text like this:
Page 32
Internet and WebTechnology Page No:32/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<center>
<font face="Arial" size="7" color="red">Welcome To My Homepage</font>
</center>
</body>
</html>
Part 3 - Positioning Text
Introduction
In the last part we finished with the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Page 33
Internet and WebTechnology Page No:33/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<html>
<head>
<title>Untitled</title>
</head>
<body>
<center>
<font face="Arial" size="7" color="red">Welcome To My Homepage</font>
</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>
Page 34
Internet and WebTechnology Page No:34/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 35
Internet and WebTechnology Page No:35/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
<!-- Your comment -->
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>
Page 36
Internet and WebTechnology Page No:36/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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"
Page 37
Internet and WebTechnology Page No:37/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 38
Internet and WebTechnology Page No:38/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 39
Internet and WebTechnology Page No:39/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
Page 40
Internet and WebTechnology Page No:40/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<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:
Page 41
Internet and WebTechnology Page No:41/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<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
Page 42
Internet and WebTechnology Page No:42/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 43
Internet and WebTechnology Page No:43/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
Page 44
Internet and WebTechnology Page No:44/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<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
<h2>A Level 2 Heading</h2>
A Level 3 Heading
<h3>A Level 3 Heading</h3>
A Level 4 Heading
<h4>A Level 4 Heading</h4>
A Level 5 Heading
<h5>A Level 5 Heading</h5>
A Level 6 Heading
<h6>A Level 6 Heading</h6>
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
Page 45
Internet and WebTechnology Page No:45/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 46
Internet and WebTechnology Page No:46/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 47
Internet and WebTechnology Page No:47/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
Page 48
Internet and WebTechnology Page No:48/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<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>
Page 49
Internet and WebTechnology Page No:49/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 50
Internet and WebTechnology Page No:50/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 51
Internet and WebTechnology Page No:51/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 52
Internet and WebTechnology Page No:52/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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">
Page 53
Internet and WebTechnology Page No:53/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
Page 54
Internet and WebTechnology Page No:54/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 55
Internet and WebTechnology Page No:55/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 56
Internet and WebTechnology Page No:56/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 57
Internet and WebTechnology Page No:57/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 58
Internet and WebTechnology Page No:58/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
Page 59
Internet and WebTechnology Page No:59/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
</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>
Page 60
Internet and WebTechnology Page No:60/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
</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).
Page 61
Internet and WebTechnology Page No:61/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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-
Page 62
Internet and WebTechnology Page No:62/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 63
Internet and WebTechnology Page No:63/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
Page 64
Internet and WebTechnology Page No:64/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
Page 65
Internet and WebTechnology Page No:65/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<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.
Page 66
Internet and WebTechnology Page No:66/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
Rounded Table Corners in HTML
• Part 1 - Introduction • Part 2 - Advanced Corners
Part 1 - Introduction
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).
Page 67
Internet and WebTechnology Page No:67/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
This is where your table content is placed if you want it there.
Page 68
Internet and WebTechnology Page No:68/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
Page 69
Internet and WebTechnology Page No:69/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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 is where your table content is placed if you want it there.
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:
Page 70
Internet and WebTechnology Page No:70/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
This is where your table content is placed if you want it there.
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
Page 71
Internet and WebTechnology Page No:71/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
V I G A T I O N
there.
This is where your table content is placed if you want it 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.
Page 72
Internet and WebTechnology Page No:72/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 73
Internet and WebTechnology Page No:73/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
Page 74
Internet and WebTechnology Page No:74/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
</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
Page 75
Internet and WebTechnology Page No:75/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
Page 76
Internet and WebTechnology Page No:76/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<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"
Page 77
Internet and WebTechnology Page No:77/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
Page 78
Internet and WebTechnology Page No:78/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
Page 79
Internet and WebTechnology Page No:79/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<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
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The rest of the document looks like HTML:
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
Page 80
Internet and WebTechnology Page No:80/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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
Page 81
Internet and WebTechnology Page No:81/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<!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
Page 82
Internet and WebTechnology Page No:82/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 83
Internet and WebTechnology Page No:83/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
!DOCTYPE html PUBLIC
"-//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:
!DOCTYPE html PUBLIC
"-//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
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>
Page 84
Internet and WebTechnology Page No:84/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<p>a simple paragraph</p>
</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
Page 85
Internet and WebTechnology Page No:85/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 86
Internet and WebTechnology Page No:86/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
XML
Part 1 - Introduction
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.
Page 87
Internet and WebTechnology Page No:87/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 88
Internet and WebTechnology Page No:88/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 89
Internet and WebTechnology Page No:89/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 90
Internet and WebTechnology Page No:90/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
<?xml version="1.0"?>
<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>
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.
Page 91
Internet and WebTechnology Page No:91/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 92
Internet and WebTechnology Page No:92/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
For now, processing the data first is really the best course of action to take.
Page 93
Internet and WebTechnology Page No:93/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
<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>
<message>
<header>
<from>[email protected] </from>
<to>[email protected] </to>
Page 94
Internet and WebTechnology Page No:94/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<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;
Page 95
Internet and WebTechnology Page No:95/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
}
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 version="1.0"?>
<?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).
Page 96
Internet and WebTechnology Page No:96/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
<?xml version="1.0"?>
<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>
<DIV STYLE="background-color:#EEEEEE; padding:4px">
<SPAN STYLE="color:black">From: <xsl:value-of select="from"/></SPAN>
</DIV>
<DIV STYLE="background-color:#EEEEEE; padding:4px">
<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
Page 97
Internet and WebTechnology Page No:97/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
<?xml version="1.0"?>
<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 version="1.0"?>
<?xml:stylesheet type="text/xsl" href="estyle.xsl" ?>
Page 98
Internet and WebTechnology Page No:98/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 99
Internet and WebTechnology Page No:99/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
You can view the result here.
Page 100
Internet and WebTechnology Page No:100/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
<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>
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>
<from>[email protected] </from>
<to>[email protected] </to>
Page 101
Internet and WebTechnology Page No:101/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
</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, 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
< <
> >
Page 102
Internet and WebTechnology Page No:102/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
& &
' '
" "
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
Page 103
Internet and WebTechnology Page No:103/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 104
Internet and WebTechnology Page No:104/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
• XPath is a language for navigating in XML documents.
What You Should Already Know
Before you continue you should have a basic understanding of the following:
• 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
Page 105
Internet and WebTechnology Page No:105/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 106
Internet and WebTechnology Page No:106/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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> . . .
Page 107
Internet and WebTechnology Page No:107/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
</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>
Page 108
Internet and WebTechnology Page No:108/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
<?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>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>
Page 109
Internet and WebTechnology Page No:109/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
<?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>Title</th>
<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.
The result of the transformation above will look like this:
My CD Collection
Title Artist
Empire Burlesque Bob Dylan
View the XML file <cdcatalog.xml>, View the XSL file <cdcatalog_ex2.xsl>, and View the result
<cdcatalog_with_ex2.xml>
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-
Page 110
Internet and WebTechnology Page No:110/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
set:
<?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>Title</th>
<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.
The result of the transformation above will look like this:
My CD Collection
Title Artist
Empire Burlesque Bob Dylan
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
Page 111
Internet and WebTechnology Page No:111/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
Picture book Simply Red
Red The Communards
Unchain my heart Joe Cocker
View the XML file <cdcatalog.xml>, View the XSL file <cdcatalog_ex3.xsl>, and View the result
<cdcatalog_with_ex3.xml>
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:
<?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>Title</th>
<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>
</body> </html> </xsl:template> </xsl:stylesheet>
The result of the transformation above will look like this:
My CD Collection
Title Artist
Empire Burlesque Bob Dylan
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
Page 112
Internet and WebTechnology Page No:112/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
file:
<?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>Title</th>
<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.
The result of the transformation above will look like this:
My CD Collection
Title Artist
Romanza Andrea Bocelli
One night only Bee Gees
Empire Burlesque Bob Dylan
Hide your heart Bonnie Tyler
The very best of Cat Stevens
Greatest Hits Dolly Parton
Sylvias Mother Dr.Hook
Eros Eros Ramazzotti
Still got the blues Gary Moore
Unchain my heart Joe Cocker
Soulsville Jorn Hoel
For the good times Kenny Rogers
Midt om natten Kim Larsen
Pavarotti Gala Concert Luciano Pavarotti
1999 Grammy Nominees Many
The dock of the bay Otis Redding
When a man loves a woman Percy Sledge
Maggie May Rod Stewart
Stop Sam Brown
Black angel Savage Rose
Picture book Simply Red
Bridge of Spies T`Pau
Red The Communards
Private Dancer Tina Turner
Tupelo Honey Van Morrison
Big Willie style Will Smith
View the XML file <cdcatalog.xml>, View the XSL file <cdcatalog_sort.xsl>, and View the result
Page 113
Internet and WebTechnology Page No:113/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<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:
<?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>Title</th>
<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>
</xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>
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.
The result of the transformation above will look like this:
My CD Collection
Title Artist
Empire Burlesque Bob Dylan
Still got the blues Gary Moore
One night only Bee Gees
Romanza Andrea Bocelli
Black Angel Savage Rose
Page 114
Internet and WebTechnology Page No:114/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
1999 Grammy Nominees Many
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:
<?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>Title</th>
<th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of
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
Empire Burlesque Bob Dylan
Hide your heart Bonnie Tyler
Greatest Hits Dolly Parton
Still got the blues Gary Moore
Eros Eros Ramazzotti
Page 115
Internet and WebTechnology Page No:115/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
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:
<?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>Title</th>
<th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of
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>
</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
Page 116
Internet and WebTechnology Page No:116/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
The result of the transformation will look like this:
My CD Collection
Title Artist
Empire Burlesque Bob Dylan
Hide your heart Bonnie Tyler
Greatest Hits Dolly Parton
Still got the blues Gary Moore
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
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.
Page 117
Internet and WebTechnology Page No:117/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
<?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> <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>
The result of the transformation will look like this:
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
Page 118
Internet and WebTechnology Page No:118/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 119
Internet and WebTechnology Page No:119/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 120
Internet and WebTechnology Page No:120/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
<price>10.90</price> <year>1985</year> </cd> . . . </catalog>
View the XML file <cdcatalog.xml>.
And the accompanying XSL style sheet:
<?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 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
Page 121
Internet and WebTechnology Page No:121/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
Page 122
Internet and WebTechnology Page No:122/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<price>10.90</price> <year>1985</year> </cd> . . . </catalog>
If you have Netscape 6 or IE 5 or higher you can view the XML file <cdcatalog.xml>.
And the accompanying XSL style sheet:
<?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>
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.
Page 123
Internet and WebTechnology Page No:123/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
Page 124
Internet and WebTechnology Page No:124/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
• 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>
Page 125
Internet and WebTechnology Page No:125/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
Introduction to WMLScript
What you should already know
Before you continue you should have a basic understanding of the following:
• 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
Page 126
Internet and WebTechnology Page No:126/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 127
Internet and WebTechnology Page No:127/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Function Description
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.
Function Description
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
Page 128
Internet and WebTechnology Page No:128/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<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
Function Description
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
Page 129
Internet and WebTechnology Page No:129/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<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.
Function Description
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
Page 130
Internet and WebTechnology Page No:130/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<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:
Function Description
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
Page 131
Internet and WebTechnology Page No:131/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
• 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.
Page 132
Internet and WebTechnology Page No:132/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 133
Internet and WebTechnology Page No:133/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 134
Internet and WebTechnology Page No:134/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 135
Internet and WebTechnology Page No:135/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
� 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
Page 136
Internet and WebTechnology Page No:136/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 137
Internet and WebTechnology Page No:137/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
}
} 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
},
]
}
Page 138
Internet and WebTechnology Page No:138/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 139
Internet and WebTechnology Page No:139/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 140
Internet and WebTechnology Page No:140/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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 .
Page 141
Internet and WebTechnology Page No:141/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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">
Page 142
Internet and WebTechnology Page No:142/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<!--Begin Hide
JavaScript
// End Hide-->
</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.
Page 143
Internet and WebTechnology Page No:143/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
<!-- Start Hide
// Display the alert box
alert('This text is in an alert box');
// End Hide-->
</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
Page 144
Internet and WebTechnology Page No:144/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 145
Internet and WebTechnology Page No:145/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 146
Internet and WebTechnology Page No:146/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 147
Internet and WebTechnology Page No:147/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>
<!-- Start Hide
// Set Variables
var welcome_text = 'Hello there ';
var closing_text = '! How are you?';
// Display prompt
var your_name = prompt('Please enter your name', 'Your name');
// Create Output Variable
var output_text = welcome_text + your_name + closing_text;
// End Hide-->
</script>
</head>
<body>
<script>
<!-- Start Hide
// Display Text
document.writeln('<font face="Arial" size="4">' + output_text + '</font><Br><Br>');
// End Hide-->
</script>
<a href="index3.htm#variables"><font face="Arial">Back</font></a>
</body>
</html>
You can see this code in action here.
Page 148
Internet and WebTechnology Page No:148/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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>, <!--Start Hide and // End Hide--> 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.
Page 149
Internet and WebTechnology Page No:149/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 150
Internet and WebTechnology Page No:150/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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'
Page 151
Internet and WebTechnology Page No:151/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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');
Page 152
Internet and WebTechnology Page No:152/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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,
Page 153
Internet and WebTechnology Page No:153/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 154
Internet and WebTechnology Page No:154/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 155
Internet and WebTechnology Page No:155/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 156
Internet and WebTechnology Page No:156/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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':
Page 157
Internet and WebTechnology Page No:157/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
var password = 'hello';
var input = prompt('Please enter the password', '');
while(input != password)
{
var input= prompt('Please enter the password''');
}
This will continuously loop the code inside the { } until the test input does not equal password is
false (the password is correct).
For Loops
For loops are used to do something a set number of times. For example:
for(loop=0; loop < 11; loop++)
{
document.writeln(loop);
}
This will start by setting the variable loop to 0, it will then loop, adding one to the value each time
(using the loop++ code) as long as loop is less than 11. They take the form:
for(starting value; test; increment)
These have many uses.
Page 158
Internet and WebTechnology Page No:158/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 159
Internet and WebTechnology Page No:159/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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)
Page 160
Internet and WebTechnology Page No:160/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
{
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.
Page 161
Internet and WebTechnology Page No:161/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 162
Internet and WebTechnology Page No:162/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 163
Internet and WebTechnology Page No:163/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 164
Internet and WebTechnology Page No:164/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 165
Internet and WebTechnology Page No:165/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 166
Internet and WebTechnology Page No:166/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
{
Page 167
Internet and WebTechnology Page No:167/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
Page 168
Internet and WebTechnology Page No:168/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<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
Page 169
Internet and WebTechnology Page No:169/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 170
Internet and WebTechnology Page No:170/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</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">
Page 171
Internet and WebTechnology Page No:171/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</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;
Page 172
Internet and WebTechnology Page No:172/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 173
Internet and WebTechnology Page No:173/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 174
Internet and WebTechnology Page No:174/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 175
Internet and WebTechnology Page No:175/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 176
Internet and WebTechnology Page No:176/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
Page 177
Internet and WebTechnology Page No:177/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
Page 178
Internet and WebTechnology Page No:178/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 179
Internet and WebTechnology Page No:179/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
Page 180
Internet and WebTechnology Page No:180/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
Page 181
Internet and WebTechnology Page No:181/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 182
Internet and WebTechnology Page No:182/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 183
Internet and WebTechnology Page No:183/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 184
Internet and WebTechnology Page No:184/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
Page 185
Internet and WebTechnology Page No:185/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 186
Internet and WebTechnology Page No:186/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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,
Page 187
Internet and WebTechnology Page No:187/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 188
Internet and WebTechnology Page No:188/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 189
Internet and WebTechnology Page No:189/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 190
Internet and WebTechnology Page No:190/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 191
Internet and WebTechnology Page No:191/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 192
Internet and WebTechnology Page No:192/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 193
Internet and WebTechnology Page No:193/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 194
Internet and WebTechnology Page No:194/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 195
Internet and WebTechnology Page No:195/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 196
Internet and WebTechnology Page No:196/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
'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.
Page 197
Internet and WebTechnology Page No:197/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 198
Internet and WebTechnology Page No:198/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 199
Internet and WebTechnology Page No:199/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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.
Page 200
Internet and WebTechnology Page No:200/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 201
Internet and WebTechnology Page No:201/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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
Page 202
Internet and WebTechnology Page No:202/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
<!--#echo var="DATE_LOCAL"-->
Page 203
Internet and WebTechnology Page No:203/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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:
<!--#include virtual="myfile.txt" -->
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:
<!--#include virtual="/common/myfile.txt" -->
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.
Page 204
Internet and WebTechnology Page No:204/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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):
<!--#exec cgi="/cgi-bin/clicktrade.cgi" -->
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:
<!--#echo var="DATE_LOCAL"-->
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:
<!--#echo var="DATE_GMT"-->
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:
<!--#config timefmt="%A, %d %B %Y"--><!--#echo var="DATE_LOCAL"-->
which will display:
Page 205
Internet and WebTechnology Page No:205/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
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):
<!--#echo var="DOCUMENT_NAME"-->
Doucument's URL (the part after the domain name)
<!--#echo var="DOCUMENT_URI"-->
Refering Page:
<!--#echo var="HTTP_REFERER"-->
Page 206
Internet and WebTechnology Page No:206/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: [email protected]
Users IP Address:
<!--#echo var="REMOTE_ADDR"-->
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.