Documente Academic
Documente Profesional
Documente Cultură
Introduction:
• Internet covers globe and include large international network as well as many smaller
• 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
Internet Services/Applications
• Hypertext (www)
• Terminal Services
• 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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:2/206
Agency) basic idea was to connect different geographical areas network and allows the
• 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
platform with different operating system & different file systems. Solution for this
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:
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:3/206
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 program uses TCP/IP to connect to the Internet for sending and receiving e-mails.
Your Internet address "203.190.144.92" is a part of the standard TCP/IP protocol. (And so is your
What is TCP/IP?
TCP/IP is the communication protocol for communication between computers connected to the
Internet.
The standard defines how electronic devices (like computers) should be connected to the
Inside TCP/IP
Hiding inside the TCP/IP standard there are a number of protocols for handling data
communication:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:4/206
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
UDP is very similar to TCP, but is more simple and less reliable.
IP is Connection-Less
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
IP Routers
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
Connection-Less Analogy
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:5/206
Communicating via IP is like sending a long letter as a large number of small postcards,
TCP/IP
TCP takes care of the communication between your application software (i.e. your browser) and
TCP is responsible for breaking data down into IP packets before they are sent, and for
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:6/206
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:
Limitations:
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:7/206
bootp server listens/accept request and lookup clients MAC address in its bootp file in
Transport Layer: Deals with the transportation of data packets using TCP or UDP
UDP (User Datagram Protocol): It’s an connectionless protocol, its having thin layer or
Provides multiplexing and demultiplexing through UDP port so that multiple applications on
UDP is less reliable but faster as compare to TCP/IP so if speed is preferable over reliability
Datagram / Packet
Length Checksum
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
E.g. http://www.yahoo.com
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:8/206
• URL is a web address it consist of protocol a host name, a port (optional) a directory
• First component of URL identifies type of resources for web resource identifier and
it’s http
• Path of html file name is optional when we connect with the site default web page is
displayed
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 your IP address: 203.190.144.92. TCP/IP uses 4 numbers to address a computer. Each
The numbers are always between 0 and 255. Addresses are normally written as four numbers
32 Bits = 4 Bytes
TCP/IP uses 32 bits addressing. One computer byte is 8 bits. So TCP/IP uses 4 computer bytes.
Now you know why a TCP/IP address is 4 numbers between 0 and 255
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:9/206
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
24
having 2 unique combinations
Class B: First two bytes are assigned for network and remaining two are for the node in form of
16
maximum node addressing capability is 2
network.network.node.node
Class C: First three bytes are assigned for network and remaining two are for the node in form of
8
maximum node addressing capability is 2
network.network.network.node
Domain Names
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:10/206
A Family of Protocols
TCP/IP is a large collection of different communication protocols based upon the two original
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
IP - Internet Protocol
IP is responsible for the sending and receiving data packets over the Internet.
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
• Connection
• Request
• Response
• Close
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:11/206
The HTTPS protocol typically handles credit card transactions and other sensitive data.
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
The MIME protocol lets SMTP transmit multimedia files including voice, audio, and binary data
The POP protocol is used for downloading e-mails from an e-mail server to a personal computer.
The FTP protocol takes care of the transmission of files between computers.
The NTP protocol is used for synchronizing the time (the clock) between computers.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:12/206
The DHCP protocol is used for allocation of dynamic IP addresses to computers in a network.
The LDAP protocol is used for collecting information about users and e-mail addresses from the
Internet.
The ARP protocol is used by IP to find the hardware address of a computer network card based
on the IP address.
The RARP protocol is used by IP to find the IP address based on the hardware address of a
The BOOTP protocol is used for booting (starting) computers from the network.
The PPTP protocol is used for setting up a connection (tunnel) between private networks.
You Don't
When you write an email, you use an email program like Lotus Notes, Microsoft Outlook or
Netscape Communicator.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:13/206
The SMTP protocol is used for the transmission of e-mails. SMTP takes care of sending your
Normally your email is sent to an email server (SMTP server), and then to another server or
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
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
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:14/206
DNS
Server
1. Req. to IP esolution
2. Return IP Address
Filtering
Server
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
Now the browser is having IP address that can be used to get connected with concerned
After server get request from client HTML information is packed by TCP in IP packets and
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:15/206
There are several ways of connecting with net more expensive service provides more
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
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
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
Note: Terminal computer or PC uses terminal emulation software to communicate with ISP’s
Host BSNL
Computer Internet
Host
PSTN IP Router
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Dialup
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Team Server
Terminal or PC with Gateway Internet Access System
Internet and WebTechnology Page No:16/206
The Internet host Computer or ISP uses TCP/IP protocol to communicate with the rest of the
network
Web Host
BSNL
GIAS
BSNL
Internet
Host
Router
Router
ISP
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:17/206
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
Reliable Communications
Remote Communications
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:18/206
diagnostics, remote monitoring, and data streaming services from remote or hazardous sites.
• E-Mail Service
• 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
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.
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:19/206
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.
ISDN Connections:
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:20/206
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
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
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
N-ISDN may have a life as a connection to homes for people wanting to download images etc.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:21/206
• Basic rate (BRI) ISDN that consist of two 64-kbps B-channels and D-channel for
• 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
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
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:22/206
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
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.
Server include(SSL) secure socket layer encrypted communication standard for private
Biztalk:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:23/206
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
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
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
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
• 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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:24/206
multiple organizations, as trading partners turn to the Internet to automate supply chains,
Features
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
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:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:25/206
News servers act as distribution and delivery source for the thousand of public news groups
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:26/206
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
1. They sometimes use excess code to create a look on a page which slows down loading
times
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
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:27/206
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
It doesn't matter if you are using Notepad, FirstPage 2000 or another HTML editor, this tutorial will
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>
<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:
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:
<html>
<head>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:28/206
<title>Untitled</title>
</head>
<body>
</body>
</html>
This tells the browser what language is being used for the page. It is not entirely necessary but it
<html>
<head>
This is the beginning of the header section. The header section contains the configuration options
<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>
<body>
</body>
Everything between these is in the body of the page. This is where all text, images etc. are. This
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:29/206
</html>
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
Introduction
In part 1 I explained how to declare an HTML document and I explained how HTML was built up
using <tag>text</tag>. Below is the HTML you added in the last part.
<html>
<head>
<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
My Personal Homepage
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:30/206
<title>Untitled</title>
to
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
<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.
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:
As you can see you enclose the name of the font in quotation marks "" after an equals sign. You
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:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:31/206
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:
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
or
Finally you will want to center the text so that it looks like a real title. To do this you can use the
<center> tag. To do this simply enclose everything you want centered in the <center> tags like
this:
<center>
</center>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:32/206
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
<html>
<head>
<title>Untitled</title>
</head>
<body>
<center>
</center>
</body>
</html>
Introduction
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:33/206
<html>
<head>
<title>Untitled</title>
</head>
<body>
<center>
</center>
</body>
</html>
Which displayed the words 'Welcome To My Homepage' in large, red, Arial letters in the middle of
your page.
In this part I am going to show you how to position text (or anything else) on your page. I will also
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
<p align="right">Text</p>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:34/206
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
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
For example:
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:
Comment Tags
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:35/206
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:
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 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:
Example Code
Function
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:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:36/206
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:
You can name bookmarks anything you like. Bookmarks are very useful on pages which are very
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
Images
Images are added to pages very easily. All you need to do is use an <img> tag. You must use
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
border="0"
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:37/206
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:
or
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:
Finally you should also remember to use gif or jpeg images as the file sizes are much smaller.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:38/206
Background Colors
You can change the background color of the page using the bgcolor variable of the <body> tag. It
<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
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:39/206
Advanced HTML
• Part 3 - Forms
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
Before reading this tutorial, you should have a basic idea of how HTML pages work, and how to
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:40/206
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.
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
<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.
<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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:41/206
<u>Text</u>
although I would recommend against using this greatly, as it can often be confused with links on
<strike>Text</strike>
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
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
<pre>
</pre>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:42/206
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
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
Things To Do:
• Create Website
• Upload
• Become Millionare
<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:
tell the browser where list items begin and end, so that it can place a bullet point in front of them.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:43/206
Notice that new lines are started automatically, without the need for <br> tags. The list is then
</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
<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
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
<ol>
Things To Do:
1. Create Website
2. Upload
3. Become Millionare
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:44/206
<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
A Level 1 Heading
A Level 2 Heading
A Level 3 Heading
A Level 4 Heading
A Level 5 Heading
A Level 6 Heading
Although these headings do not look particularly nice, they do have two important uses. Firstly,
being structured (as you move from 1 to 6 it signifies headings of lesser importance) intelligent
software and browsers can use this to decide what is important on the page. Also, speech
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:45/206
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
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
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>
<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
which would load the file thepage.html in the frame called contentframe. If you want all links to
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:46/206
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">
Both the target and href attributes can be combined in the <base> tag.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:47/206
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
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
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:48/206
<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
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
Usually form tags only ever include the method and action attributes, but occasionally you will
<form name="loginform">
This allows the browser to recognise the form on the page, which is useful if you are writing
In practically every case you should use both the method and action tags when defining a form,
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>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:49/206
tag. This is combined with a number of attributes to provide different types of input on your form.
<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
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 'user@domain.com' by the following code:
There are a few more attributes which can be used with textboxes, but they are not necessary for
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:50/206
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.
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
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:51/206
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
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
<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
<textarea name="comments">Thank you for visiting the site. We would appreciate it if you would
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:52/206
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:53/206
When a form containing a checkbox is submitted, the browser will only send the textbox name
It may be useful in some cases to have the checkbox pre-selected. IN order to do this, you must
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
Item 1
<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
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:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:54/206
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.
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:55/206
• Part 1 - Introduction
• Part 2 - Frames
• Part 3 - WYSIWYG Tables
• Part 4 - HTML Tables
Part 1 - Introduction
Frames and tables are extremely important in web design. It is impossible to create a navigation
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
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
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.
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,
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:56/206
loaded, the loading times of a site are a lot less (as, usually, only one frame is ever changed
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
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
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
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.
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:57/206
displayed on the screen so users will be left with a blank screen while the page is loading (instead
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.
Simple! Read on. In this tutorial you can learn how to create tables and frames using a
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:58/206
Part –2
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
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,
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>
</head>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:59/206
</noframes>
</frameset>
</html>
<html>
<head>
</head>
This is the standard start for an HTML document. The title will appear in the browser's title bar for
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.
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.
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:60/206
</noframes>
This is the area where you can put the information to be displayed by browsers which don't
</frameset>
</html>
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
_top and _parent - Opens over the top of the frames page, removing the frames
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:61/206
Part 3
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
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
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
Finally changing the cell background can be done from the cell properties (usually in the right-
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:62/206
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,
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:63/206
Part 4
As creating tables in HTML is quite complicated I will leave the HTML code until the next part
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
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:
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
<tr>
This tag does have some variables but I will deal with them later. The next thing you have to do is
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)
</td>
You can now add as many columns you like before ending the row using:
</tr>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:64/206
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:
<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>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:65/206
<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
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
<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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:66/206
• 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.
The first example in this tutorial will be a table looking like this:
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:67/206
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
Next, set the fill colour of the circle to red which will produce this:
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
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:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:68/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:69/206
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
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
As with the other example all the corners are made from images. You can use the four you
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:70/206
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:
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.
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:71/206
V there.
I
G This is where your table
A content is placed if you want it
T there.
I
O
N
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
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.
What Is XHTML?
Before you continue you should have a basic understanding of the following:
If you want to study HTML first, please read our HTML tutorial.
A W3C Recommendation means that the specification is stable, that it has been reviewed by the
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:72/206
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.
XHTML is a reformulation of HTML 4.01 in XML, and can be put to immediate use with existing
XHTML consists of all the elements in HTML 4.01 combined 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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:73/206
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 write strict HTML.
XHTML is the next generation of HTML, but it will of course take some time before browsers and
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!
In HTML some elements can be improperly nested within each other like this:
In XHTML all elements must be properly nested within each other like this:
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>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:74/206
</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.
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
<html>
<head> ... </head>
<body> ... </body>
</html>
This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph</p>
</body>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:75/206
This is wrong:
<p>This is a paragraph
This is correct:
<p>This is a paragraph</p>
Empty elements must either have an end tag or the start tag must end with />.
This is wrong:
This is a break<br>
Here comes a horizontal rule:<hr>
Here's an image <img src="happy.gif" alt="Happy face">
This is correct:
To make your XHTML compatible with today's browsers, you should add an extra space before
the "/" symbol like this: <br />, and this: <hr />.
This is wrong:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:76/206
<table WIDTH="100%">
This is correct:
<table width="100%">
This is wrong:
<table width=100%>
This is correct:
<table width="100%">
This is wrong:
<dl compact>
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
This is correct:
<dl compact="compact">
Here is a list of the minimized attributes in HTML and how they should be written in XHTML:
HTML XHTML
compact compact="compact"
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:77/206
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"
HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In
This is wrong:
This is correct:
Note: To interoperate with older browsers for a while, you should use both name and id, with
To make your XHTML compatible with today's browsers, you should add an extra space before
The lang attribute applies to almost every XHTML element. It specifies the language of the
If you use the lang attribute in an element, you must add the xml:lang attribute, like this:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:78/206
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.
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 will learn more about the XHTML document type definition in the next chapter.
• the DOCTYPE
• the Head
• the Body
<!DOCTYPE ...>
<html>
<head>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:79/206
<title>... </title>
</head>
<body> ... </body>
</html>
The DOCTYPE declaration should always be the first line in an XHTML document.
An XHTML Example
<!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>
<!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>
</body>
</html>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:80/206
• DTD is used by SGML applications, such as HTML, to specify rules that apply to the
declarations.
• STRICT
• TRANSITIONAL
• FRAMESET
XHTML 1.0 specifies three XML document types that correspond to three DTDs: Strict,
<!DOCTYPE html
"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
<!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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:81/206
<!DOCTYPE html
"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.
W3Schools was converted from HTML to XHTML the weekend of 18. and 19. December 1999, by
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):
The following DOCTYPE declaration was added as the first line of every page:
Note that we used the transitional DTD. We could have chosen the strict DTD, but found it a little
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:82/206
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.
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 are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr />
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
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.
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:83/206
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 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:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
The Transitional DTD includes everything in the strict DTD plus deprecated elements and
attributes:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
The Frameset DTD includes everything in the transitional DTD plus frames as well:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
<!DOCTYPE html
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:84/206
</body>
</html>
http://w w w .w 3schools.com/xhtml/default.asp
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.
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,
Define XHTML profiles like XHTML Basic (a subset of XHTML for mobile devices).
XHTML Modules
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:85/206
Client Image Map Module Defines browser side image map elements.
Intrinsic Events Module Defines event attributes like onblur and onchange.
List Module Defines the list elements ol, li, ul, dd, dt, and dl.
Server Image Map Module Defines server side image map elements.
Structure Module Defines the elements html, head, title and body.
* Deprecated elements should not be used in XHTML. What You Should Already Know
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:86/206
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
1. Computers do not understand the information placed in them.. For example there is no
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
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:87/206
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
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:
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:88/206
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
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
Much like HTML tags, XML tags can be nested. Using the example of the e-mail above, this is a
<message>
<header>
<from>webmaster@gowansnet.com</from>
<to>webmaster@xml.org</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
</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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:89/206
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.
<?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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:90/206
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
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,
<?xml version="1.0"?>
<message>
<header>
<from>webmaster@gowansnet.com</from>
<to>webmaster@xml.org</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
</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.
This is probably quite a surprising result, whatever browser you are using. I will now cover the
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:91/206
If you don't have Internet Explorer you can see what it looks like in the image below (without the
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.
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
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:92/206
For now, processing the data first is really the best course of action to take.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:93/206
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>webmaster@gowansnet.com</from>
<to>webmaster@xml.org</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
</body>
</message>
<message>
<header>
<from>webmaster@gowansnet.com</from>
<to>webmaster@goodsite.com</to>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:94/206
</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:
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;
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:95/206
to
display: block;
color: #FF0000;
font-size: 12pt;
subject
display: block;
font-size: 14pt;
font-weight: bold;
body
display: block;
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.
<?xml version="1.0"?>
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).
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:96/206
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">
background-color:#FFFFFF">
<xsl:for-each select="email/message">
<xsl:for-each select="header">
</DIV>
</DIV>
</DIV>
</xsl:for-each>
<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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:97/206
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">
<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
<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.
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
</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.
<?xml version="1.0"?>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:98/206
As with the CSS, this tells the browser to look for the XSL file estyle.xsl to get formatting details.
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>
</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>
<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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:99/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:100/206
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
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
<message>
<header>
<from>webmaster@gowansnet.com</from>
<to>webmaster@xml.org</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
</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
Similarly, in XML attributes can be used to store data. If I wanted, for example, to get rid of the
<header>
<from>webmaster@gowansnet.com</from>
<to>webmaster@xml.org</to>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:101/206
</header>
<body>
I think that XML has great potential. It will work very well and will help many people to make much
</body>
</message>
As you can see, I have used the attribute of the tag <message> to store the subject instead of it
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
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
CDATA
One problem which becomes apparent when using XML is that the parser parses all data in an
Would be fully parsed by the parser, both the tags and text. This does not cause a problem,
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
Symbol Code
< <
> >
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:102/206
& &
' '
" "
By using these you can display the correct symbols, and the XML parser still works. So you could
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
<![CDATA[
Text to be ignored
]]>
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:103/206
and also how to output it in a browser. With this knowledge you will be able to create XML
XSL – XSLT
The World Wide Web Consortium (W3C) started to develop XSL because there was a need for an
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
XML does not use predefined tags (we can use any tag-names we like), and the meaning of these
A <table> element could mean an HTML table, a piece of furniture, or something else - and a
XSLT
• XSLT is a language for transforming XML documents into XHTML documents or to other
XML documents.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:104/206
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 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
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
A common way to describe the transformation process is to say that XSLT transforms an XML
XSLT uses XPath to find information in an XML document. XPath is used to navigate through
If you want to study XPath first, please read our XPath Tutorial </xpath/default.asp>.
In the transformation process, XSLT uses XPath to define parts of the source document that
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:105/206
should match one or more predefined templates. When a match is found, XSLT will transform the
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
Netscape 8 is based on the Mozilla engine. Same XML / XSLT support as Mozilla.
Opera 8
Internet Explorer 6
Microsoft's web browser has full XML support, including support for Namespaces. Style sheets in
The XML Parser 3.0 in Internet Explorer 6.0 and Windows XP is based on both the W3C XSLT
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:106/206
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.
Read more about the latest releases of different browsers in our Browser section
</browsers/default.asp>.
<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:
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. If you use this namespace, you must also include the attribute version="1.0".
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:107/206
</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
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"
Then you create an XSL Style Sheet ("cdcatalog.xsl") with a transformation template:
Add the XSL style sheet reference to your XML document ("cdcatalog.xml"):
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:108/206
An XSL style sheet consists of one or more set of rules that are called 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
Ok, let's look at a simplified version of the XSL file from the previous chapter:
</xsl:template> </xsl:stylesheet>
Since an XSL style sheet is an XML document itself, it always begins with the XML declaration:
The next element, <xsl:stylesheet>, defines that this document is an XSLT style sheet document
The <xsl:template> element defines a template. The match="/" attribute associates the template
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.
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>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:109/206
The result from this example was a little disappointing, because no data was copied from the XML
In the next chapter you will learn how to use the <xsl:value-of> element to select values from the
XML elements.
Note: The value of the select attribute is an XPath expression. An XPath expression works like
My CD Collection
Title Artist
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
In the next chapter you will learn how to use the <xsl:for-each> element to loop through the XML
The XSL <xsl:for-each> element can be used to select every XML element of a specified node-
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:110/206
set:
Note: The value of the select attribute is an XPath expression. An XPath expression works like
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:111/206
View the XML file <cdcatalog.xml>, View the XSL file <cdcatalog_ex3.xsl>, and View the result
<cdcatalog_with_ex3.xml>
We can also filter the output from the XML file by adding a criterion to the select attribute in the
<xsl:for-each> element.
• = (equal)
• != (not equal)
View the XML file <cdcatalog.xml>, View the XSL file <cdcatalog_filter.xsl>, View the result
<cdcatalog_filter.xml>
To sort the output, simply add an <xsl:sort> element inside the <xsl:for-each> element in the XSL
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:112/206
file:
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:113/206
<cdcatalog_sort.xml>
The <xsl:if> element is used to put a conditional test against the content of the XML file.
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>
To add a conditional test, add the <xsl:if> element inside the <xsl:for-each> element in the XSL
file:
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:114/206
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
To express a multiple conditional test against the content of the XML file, add an <xsl:choose>
Syntax
<xsl:choose> <xsl:when test="expression"> ... some output ... </xsl:when> <xsl:otherwise> ...
some output .... </xsl:otherwise> </xsl:choose>
The code above will add a pink background-color to the "Artist" column WHEN the price of the CD
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:115/206
View the XML file <cdcatalog.xml>, View the XSL file <cdcatalog_choose.xsl>, and View the
result <cdcatalog_choose.xml>
Another Example
The code above will add a pink background color to the "Artist" column WHEN the price of the CD
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:116/206
is higher than 10, and a grey background-color WHEN the price of the CD is higher than 9 and
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:117/206
The <xsl:apply-templates> element applies a template to the current element or to the current
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
My CD Collection
Title: Eros
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:118/206
Artist: Dr.Hook
Title: Romanza
Artist: Many
Title: Soulsville
Title: Stop
Artist: T`Pau
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:119/206
Title: Red
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
transform data from one format to another, supporting different browsers and different user
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:120/206
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
Look at the XML document that you have seen in the previous chapters:
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:121/206
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!
Since not all browsers support XSLT, one solution is to transform the XML to XHTML on the
server.
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
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
Take a new look at the XML document that you saw in the previous chapters:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:122/206
If you have Netscape 6 or IE 5 or higher you can view the XML file <cdcatalog.xml>.
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
Here is the source code needed to transform the XML file to XHTML on the server:
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
If you are serious about XML, you will benefit from using a professional XML Editor.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:123/206
XML is Text-based
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
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
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.
Today XML is an important technology, and development projects use XML-based technologies
like:
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:124/206
Altova's XMLSPY
At W3Schools we have been using XMLSPY for many years. XMLSPY is our favorite XML editor.
• 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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:125/206
Introduction to WMLScript
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 used to create pages that can be displayed in a WAP browser. Pages in WML are called
What is WMLScript?
• 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 used to generate message boxes and dialog boxes locally, to view error
Notice that WMLScripts are not embedded in WML pages. The WML pages only contains
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:126/206
In the example below; if you select the go label the external script will direct you to
http://www.w3schools.com/wap.wml:
The red line above contains a reference to a WMLScript. The script is in a file called check.wmls,
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 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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:127/206
The Float Library contains a set of mathematic functions, mostly about rounding of numbers.
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() Returns the largest possible floating-point number
<float_maxfloat.asp>
minFloat() Returns the smallest possible floating-point number
<float_minfloat.asp>
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 contains functions for absolute value calculations, data type manipulation, and
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() Returns the character set supported by the WMLScript interpreter
<lang_characterset.asp>
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() Returns true if a specified value can be converted into a floating-point number
<lang_isfloat.asp> 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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:128/206
<lang_maxint.asp>
min() <lang_min.asp> Returns the smallest value of two numbers
minInt() Returns the minimum possible integer value
<lang_minint.asp>
parseFloat() Returns a floating-point value defined by a string
<lang_parsefloat.asp>
parseInt() Returns an integer defined by a string
<lang_parseint.asp>
random() Returns a random integer between 0 and a specified number
<lang_random.asp>
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
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.
The String library contains functions quite similar to the ones found in the JavaScript String object.
Function Description
charAt() Returns a character that is placed in a specified position of a string
<string_charat.asp>
compare() Compare two strings, and returns an integer that tells if the one string is
<string_compare.asp> identical, smaller or larger than the other
elementAt() Separates a string into elements, and then return a specified element
<string_elementAt.asp>
elements() Returns the number of times a specified value appears in a string
<string_elements.asp>
find() <string_find.asp> Returns the position of a substring in a string
format() Formats a value, and returns the result
<string_format.asp>
insertAt() Separates a string into elements, inserts a substring, and then return the
<string_insertAt.asp> result
isEmpty() Returns a boolean value that is true if the string is empty, and false if not
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:129/206
<string_isempty.asp>
length() Returns the length of a string
<string_length.asp>
removeAt() Separates a string into elements, removes an element, and then return the
<string_removeat.asp> result
replace() Replaces a part of a string with a new string, and return the result
<string_replace.asp>
replaceAt() Separates a string into elements, replaces an element, and then return the
<string_replaceat.asp> result
squeeze() Reduces all white spaces to single spaces, and returns the result
<string_squeeze.asp>
subString() Returns a string that is a specified part of another string
<string_substring.asp>
toString() Creates a string from a number, and return the result
<string_tostring.asp>
trim() <string_trim.asp> Returns a string without leading and trailing spaces
The URL library contains a set of functions for handling relative and absolute URLs.
Function Description
escapeString() Replaces special characters in a URL with an escape sequence, and returns
<url_escapestring.asp> the result
getBase()
getFragment() Returns the fragment in a URL
<url_getfragment.asp>
getHost() Returns the host specified in a URL
<url_gethost.asp>
getParameters() Returns the parameters in the last path segment of a URL
<url_getparameters.asp>
getPath() Returns the path specified in a URL
<url_getpath.asp>
getPort() Returns the port number specified in a URL
<url_getport.asp>
getQuery() Returns the query part in a URL
<url_getquery.asp>
getReferer()
getScheme() Returns the scheme in a URL
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:130/206
<url_getscheme.asp>
isValid() Returns true if a URL has the right syntax, and false if not
<url_isvalid.asp>
loadString() Returns the content and the content type of a specified URL
resolve() Returns an absolute URL from a base URL and a relative URL
<url_resolve.asp>
unescapeString() Replaces the escape sequences in a URL with characters, and return the
<url_unescapestring.asp result
>
The WMLBrowser library contains functions that can be used to access browser variables.
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
The WML Browser library contains functions to set and access the browser context:
Function Description
getCurrentCard() Returns the (relative) URL of the current card
<wmlbrowser_getcurrentcard.asp>
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() Clears all variables, and returns an empty string
<wmlbrowser_newcontext.asp>
prev() <wmlbrowser_prev.asp> The browser goes back to the previous card, and returns an empty
string
refresh() Refreshes the current card, and returns an empty string
<wmlbrowser_refresh.asp>
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.
• The term Virtual reality is coined in late 1993 by Mark pesce and Tony Parisi
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:131/206
• 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 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
• VRML world have event generators and event receivers. Most event generators are
• 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:
• Distribution is poor
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:132/206
Static objects.
Animated objects.
http://www.web3d.org/VRML2.0/FINAL/
Applications that can show VRML files are widely available as browser’s plug-ins or as stand-
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
• A particular shape.
• A position in 3D space.
• Sounds.
• Lights.
• Viewpoints.
NODES
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:133/206
At the highest level of abstraction, VRML is simply a file format for describing objects.
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.
Type name.
This is a name like Box, Color, Group, Sphere, Sound, SpotLight, and so on.
Specific fields.
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
Nodes can receive a number of incoming set_* events, denoted as eventIn (like set_position,
Nodes can also send out a number of *_changed events, denoted as eventOut, which indicate
nodetype { fields }
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:134/206
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 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
Nodes can receive a number of incoming set_* events, denoted as eventIn (like
Nodes can also send out a number of *_changed events, denoted as eventOut, which
on_changed).
nodetype { fields }
Unspecified field values are set to the default values in the specification.
Shape {
exposedField SFNode appearance NULL
}
The Shape node has two fields: appearance and geometry which are used to create
The appearance field specifies an Appearance node that specifies the visual attributes
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:135/206
The specified geometry node is rendered with the specified appearance nodes applied.
Appearance {
exposedField SFNode material 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
The texture field, if specified, must contain one of the various types of texture nodes
Material {
exposedField SFFloat ambientIntensity 0.2
}qThe Material node specifies surface material properties for associated geometry nodes
Cylinder {
}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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:136/206
Shape {
appearance Appearance {
material Material { }
}
geometry Cylinder {
radius 3
height 6
side TRUE
top FALSE
bottom TRUE
}
}
Transform {
…
exposedField SFVec3f center 000
}
§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.
Group {
children [
appearance Appearance {
material Material {
ambientIntensity 0.2
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:137/206
}
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
},
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:138/206
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
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.
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
Actually, the 2 languages have almost nothing in common except for the name. Although Java is
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:139/206
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.
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-
user- and system-defined chunks of data, and controlled means of accessing and modifying those
chunks.
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
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
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:140/206
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
The contents (or value) of a textbox named "password" in a form named "entryform" is
document.entryform.password.value.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:141/206
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,
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
<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
There are two things you must do to hide the code from older browsers and show something
instead:
<script language="JavaScript">
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:142/206
<!--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
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
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
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:143/206
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
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:
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.
<script>
// 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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:144/206
my_number
3456
my_name
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:
Strings (text):
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
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,
Calculations
You can do calculations if you have variables containing numbers. Here is an example of some
// Set Variables
var second_number = 5;
//Do Calculations
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:145/206
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
Once you have started using variables you will realize that it will be quite useful to get some
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:
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):
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
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:146/206
Part – III
Introduction
In the last part I showed you how to display alert boxes and how to get information from the user.
document.writeln
This command is very useful as it will output information to a web page. I will start with a basic
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
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:147/206
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
<html>
<head>
<title>Variable Example</title>
<script>
// Set Variables
// Display prompt
// End Hide-->
</script>
</head>
<body>
<script>
// Display Text
// End Hide-->
</script>
</body>
</html>
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:148/206
As you can see from the above code, variables are added into document.writeln by using the +
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).
</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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:149/206
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
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
Firstly you must know the two ways of creating a link which opens in a separate window. The
This is the standard HTML code for opening a new window with the page in it.
This will create a new window, just like the first set of code, but it will also name the window
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
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
window.open('link.html','mywindow');
This means that a window called 'mywindow' will open with the page link.html in it, exactly like
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:150/206
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:
As you can see this is just the same window.open command inside an HTML tag.
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
directories This will show the directories in Netscape browsers like 'Whats new' and 'Whats cool'
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:151/206
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('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');
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:152/206
Part -V
Introduction
In this part I will show you how to use link events, do image swaps and display things in the
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
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
onMouseOver and onMouseOut work in exactly the same way as onClick except for one major
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
Rollover Images
This is one of the main ways of using link events. If you have not seen rollover images before,
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:153/206
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.
The name for the image could be anything and, like the window names from the last part, is used
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
<a href="#"></a>
The following code will make a mouseover on your image (assuming you inserted the image as
name="home_button" border="0"></a>
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:154/206
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:
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:155/206
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:156/206
More If
There are other conditions you can test with the if statement. Firstly, as well as using numbers
if(variable == variable)
As well as doing this you can check to see if one variable is greater than another, less than
if(variable != othervariable)
These can be very useful in your web pages. You can also check to see if two conditions are true
This will only execute its code if variable1 is equal to variable2 and is less than variable3. You can
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':
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:157/206
while(input != password)
This will continuously loop the code inside the { } until the test input does not equal password is
For Loops
For loops are used to do something a set number of times. For example:
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:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:158/206
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
Before you can manipulate text boxes you must first know how to create a form and how to create
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>
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
In this section, you have learnt the most important part of this lesson, how to refer to an item in a
form.
Events
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:159/206
Just like links, you can set events for items in a form. They are:
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:
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.
function functionname(parameters)
For a very basic function you need no parameters and it would be constructed like this (in the
function sayhi()
alert(Hi there!);
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
function say(what)
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:160/206
alert(what);
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:161/206
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.
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>
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:
Which will tell the browser to run the function 'MyFunction' when the Submit button is clicked. You
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
Checkboxes
Checkboxes and radio buttons are two of the remaining form items. First I will cover checkboxes.
Unchecked Box
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:162/206
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
if(window.document.example1.my_checkbox.checked=true)
else
window.document.example1.my_checkbox.checked=true;
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
Blue
Red
Green
Only one button in the group can be checked at a time. Radio buttons work in exactly the same
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:163/206
way as a checkbox, having a .checked property which can either be true or false.
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:
<select name="select"
onChange="window.document.location=window.document.go.select.value;">
<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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:164/206
What is CSS?
CSS Demo
With CSS, your HTML documents can be displayed using different output styles:
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,
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
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:165/206
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.
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:166/206
The CSS syntax is made up of three parts: a selector, a property and a 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
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:
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:167/206
color: green
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 class="right">
</p>
<p class="center">
</p>
Note: Only one class attribute can be specified per HTML element! The example below is wrong:
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:
In the code below both the h1 element and the p element have class="center". This means that
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:168/206
<h1 class="center">
</h1>
<p class="center">
</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":
The rule above will both match the h1 and the p element:
The style rule below will match any p element that have an id attribute with a value of "green":
CSS Comments
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:169/206
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
/* This is a comment */
text-align: center;
color: black;
font-family: arial
When a browser reads a style sheet, it will format the document according to it. There are three
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>
href="mystyle.css" />
</head>
The browser will read the style definitions from the file mystyle.css, and format the document
according to it.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:170/206
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}
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.
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}
</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
<head>
<style type="text/css">
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:171/206
<!--
hr {color: sienna}
p {margin-left: 20px}
-->
</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:
This is a paragraph
</p>
If some properties have been set for the same selector in different style sheets, the values will be
For example, an external style sheet has these properties for the h3 selector:
h3
color: red;
text-align: left;
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:172/206
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
Examples
This example demonstrates how to set the background color for an element.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:173/206
This example demonstrates how to set a fixed background image. The image will not scroll with
This example demonstrates how to use the shorthand property for setting all of the background
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:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:174/206
background- Sets the starting position of a top left 6.0 4.0 CSS1
position background image top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Examples
This example demonstrates how to set the background-color of a part of the text.
This example demonstrates how to increase or decrease the space between characters.
Indent text
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:175/206
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,
Text Properties:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:176/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:177/206
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.
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
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
When you first open Flash you will find an interface that looks something like this:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:178/206
In the centre is the large white 'Stage'. This is the actual movie where you will place all the objects
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
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:179/206
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:180/206
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
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
Now, try drawing another circle or oval, but this time change the fill and line colours.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:181/206
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
There is only one option for the rectange, the Round Rectangle Radius. This creates rectangles
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:182/206
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
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:183/206
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
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
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
Eraser Tool
The eraser tool is used to rub things out on the stage. It is used by just clicking and holding down
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:184/206
you to choose the type of eraser you use. The default is Erase Normal, which works like a normal
• Erase Fills which will leave all lines intact as you use the eraser but will rub out fills
• 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
Pencil Tool
The pencil tool allows you to draw lines on the screen. It is different to a normal freehand tool,
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 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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:185/206
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:186/206
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
You will now notice that the circle apears with a blue line around it. The next thing you will want to
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,
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:187/206
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:188/206
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:189/206
Part 5
In this part you learnt how to create a simple flash animation. In the next part I will show you some
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:190/206
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
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:191/206
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
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
Now you will want to put in some content for this layer. Make a symbol with the text:
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:192/206
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.
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
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:
• Click - How the button looks when your mouse button is down
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.
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:193/206
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:194/206
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
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() {
Some Actions
I will now cover some of the actions you can add. Most of these will be available for both buttons
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:195/206
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
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.
The Play and Stop actions have no parameters. One plays the movie from the current point and
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:196/206
'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
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
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
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:197/206
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
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
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.
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:198/206
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
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.
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:199/206
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
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
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,
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:200/206
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
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
• 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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:201/206
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
You can publish your movie as many times as you like without problems, although it is normal to
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.)
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:202/206
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).
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
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
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"-->
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:203/206
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
If you do not have SSI on your server then you could try one of the free web hosts that support it
Including A File
This is one of the most simple things you can do using SSI. Create a text file with a little bit of text
in it and save it. Upload it to your server. Then create an HTML file and add the following:
The way in which this works is that the file is refered to relative to your accounts root. To explain
this I will show what would happen if you had the file saved in a folder called 'common'. Your site
is at www.mysite.com.
To include this file from any page on your site you would use:
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
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:204/206
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
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
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"-->
(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
<!--#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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:205/206
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:
%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:
<!--#echo var="DOCUMENT_NAME"-->
<!--#echo var="DOCUMENT_URI"-->
Refering Page:
<!--#echo var="HTTP_REFERER"-->
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org
Internet and WebTechnology Page No:206/206
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
Compiled by: Mr. D. P. Mishra Lecturer Comp. Sci. & Engg. BIT, Durg
Cell: 9229594625, e-mail: dpmishra@bitdurg.org