WEB APPLICATION-803

CLASS-XI
SESSION-2020-21
(DRAFT STUDY MATERIAL)

Unit-1 BASICS OF NETWORKING AND WEB ARCHITECTURE

1.1 Basic Networking Concepts

1.2 Networking Concepts -II

1.3 Network Protocols

1.4 Web Architecture

1.5 Network Threats and Security Measures

 Unit-1 BASICS OF NETWORKING AND WEB ARCHITECTURE

Evolution of Internet

In 1876 Bell came forward with the concept of communication through telephone lines
leading to development of Public Switched Telephone Network (PSTN) in 1877. It
opened the new frontiers allowing several homes to connect through telephone lines.
From that time, communication was mainly through telephone lines.
In the late 1950s, all the military communications started using telephone networks
setting up dedicated connections between the two parties. This dedicated connection
made use of technology called circuit switching. The connection consisted of several
intermediary lines and switching offices enroute. They were vulnerable to danger of
damage to the switching offices which may disrupt the entire network. At the peak of the
cold war, the US Department of Defense (DoD) realized the need to establish fault-
tolerant networks that would not fail at the time of nuclear war and could survive a single
point failure in the network. Paul Baran along with Donald Davies and Len Kleinrock
came forward with the idea of digital packet switching in which the message to be
transmitted is divided into small chunks called packets. Unlike circuit switching in which
resources are reserved along the dedicated path of communication, packet switching is
based on link sharing.
The US Department of Defense realized the need to connect geographically separated
research computers together to form a network. This led to the development of
Advanced Research Projects Agency Network (ARPANET) in 1969. ARPANET made
use of technology called digital packet switching. Initially its use was restricted to non-
commercial purposes such as military and research. Subsequently, its use extended to
education by supporting various educational institutes.
Need for communication between various heterogeneous networks led to the
development of TCP/IP (Transmission Control Protocol/Internet Protocol) in 1970. Along
with several smaller networks, another large network called NSFNET was developed in
1984 by NSF, U.S. National Science Foundation for research and education purposes.
When ARPANET and NSFNET were interconnected, the network growth increased
tremendously. TCP/ IP protocol (rules for communication) acted as a glue to connect
various heterogeneous networks together into a single network. This wide network is an
Internet (network of networks).
The Internet is a global network that comprises many voluntarily interconnected
networks. It operates without a central governing body. The standardization of the core
protocols (IPv4 and IPv6) is an activity of the Internet Engineering Task Force (IETF),
To maintain interoperability, the principal name spaces of the Internet are administered
by the Internet Corporation for Assigned Names and Numbers (ICANN). ICANN
coordinates the assignment of unique identifiers for use on the Internet, including
domain names, Internet Protocol (IP) addresses and many other parameters. Several
government and private organizations, collectively called Internet Service Providers
(ISPs) joined hands to provide connectivity for the Internet. The Internet made it
possible to exchange information and communicate with remote nodes. Bandwidth
describes the maximum data transfer rate of a network or Internet connection.

1.1 Basic Networking Concepts

A network is any collection of independent computers that communicate with one

another over a shared network medium.

1.1.1 Need for Networking

Computer networks can be used as means of resource sharing and communication.

● Resource Sharing: Connecting computers through networking allows us to

share hardware and software resources. Examples of hardware resources
include peripherals (for example, printers and scanners), CPU, and memory.
Examples of software resources include system and application software, and
files that may include text, audio, and video content. Note that in the network
shown in Figure 1.1 the three computer systems are connected with each other
and to the printer through the network.
● Communication: Connecting computers through a network facilitates exchange
of information amongst the nodes in the network. For example, any of the
computer systems in Figure 1.1 may send data to any of the three computer
systems or the printer, as it is connected to every node in the network. Creation
of a network requires various network devices such as modems, routers,
switches, and bridges, each of which plays a specific role in the network.
Networks differ on the basis of transmission media used, arrangement of nodes
in the network, their geographical span, and their purpose.
● Access to remote databases: It is easy for an average person to access any
remote database, say for example airline reservations and thereby book tickets.
Likewise databases of trains, online universities, hotels etc can be accessed as
per the requirement. Remote-control/access programs can be used to
troubleshoot problems or show new users how to perform a task
 Figure 1.1 Computer Network

1.1.2 Requirements of a network

Every network includes:

● At least two computers - Server or Client workstation.
● Network Interface Cards (NIC) A connection medium, usually a wire or cable,
although wireless communication between networked computers and peripherals
is also possible.
● Network Operating system soft
software,
ware, such as Microsoft Windows NT or 2000,
Novell NetWare, Unix and Linux.

1.1.3 Network Terminologies

Let us first learn about some terminologies commonly used in networking.

i) Nodes (Workstations) :--A A computer becomes a node (also called a workstation) as

soon as it is attached to a network. Each user on a network works on a workstation. If
there are no nodes there would be no network.

A computer that facilitates sharing of data, software and hardware resources

ii) Server:-A
on the network iss known as the server. A network can have more than one server also.
Each server has a unique name by which it is identified by all the nodes on the network.
Servers can be of two types:
a) Dedicated and b) Non dedicated servers
Dedicated Servers: These are generally used on big network installations where one
computer is reserved for the server's job. It helps all nodes access data, software and
hardware resources. Since it does not double up as a workstation but only manages the
network, it is known as a dedicated server and such types of networks are called
master- slave networks.
Non dedicated servers: In small networks, a workstation can double up as a server.
These servers are known as non dedicated servers. The small networks using such a
server are known as Peer to Peer networks.

iii) Network Interface Unit (NIU):- A network interface unit is a device that is attached
to each of the workstations and the server which helps to establish communication
between the server and workstations. As soon as a standalone computer becomes a
workstation, it needs an interface to help establish connection with the network because
without this the workstations will not be able to share network resources or
communicate with each other. The NIC basically acts like an interpreter and is also
known as Terminal Access Point (TAP) or Network Interface card(NIC).The NIC
manufacturer assigns a unique physical address to each NIC card and this physical
address is known as the MAC address.

1.1.4 Switching Techniques

Switching techniques are used to efficiently transmit data across the network. The two
types of switching techniques employed nowadays to provide communication between
two computers on a network are: Circuit Switching and Packet Switching Circuit
Switching.

● Circuit switching is a technique in which a dedicated and complete physical

connection is established between two nodes and through this dedicated
communication channel, the nodes may communicate. The circuit guarantees the
full bandwidth of the channel and remains connected for the duration of the
communication session. Even if no communication is taking place in a dedicated
circuit, that channel still remains unavailable to other users (idle channels). The
defining example of a circuit-switched network is the early analogue telephone
network. When a call is made from one telephone to another, switches within the
telephone exchange create a continuous wire circuit between the two
telephones, for as long as the call lasts.
 ● Packet switching is a switching technique in which packets (discrete blocks of
data of fixed size and of any content, type or structure) are routed between
nodes over data links shared with other traffic. The term "packets" refers to the
fact that the data stream from your computer is broken up into packets of about
200 bytes (on average), which are then sent out onto the network. Each packet
contains a "header" with information necessary for routing the packet from
source to destination. Each packet in a data stream is independent. The main
advantage of packet-switching is that the packets from many different sources
can share a line, allowing for very efficient use of the communication medium.
With current technology, packets are generally accepted onto the network on a
first-come, first-served basis. If the network becomes overloaded, packets are
delayed or discarded ("dropped"). This method of data transmission became the
fundamental networking technology behind the internet and most Local Area
Networks

1.1.5 Data communication terminologies

Let us learn about some data communication terminologies being used.

● Channel: A communication channel is a medium that is used in the transmission

of a message from one point to another. In simple terms we can say that it is a
pathway over which data is transferred between remote devices. It may refer to
the entire physical medium, such as a telephone line, optical fibre, coaxial cable
or twisted pair wire, or, it may refer to one of the several carrier frequencies
transmitted simultaneously within the line. Depending on their speed, we have
three broad categories of communication channels - narrow band which is slow
and used for telegraph lines and low speed terminals; voice band used for
ordinary telephone communication and broadband which is fastest and is used
for transmitting large volumes of data at high speeds.

● Bandwidth: In electronic communication, bandwidth refers to the range of

frequencies available for transmission of data. It is expressed as the difference in
Hertz(Hz) between the highest frequency and the lowest frequency. For example,
a typical voice signal has a bandwidth of approximately 3KHz. Wider the
bandwidth of a communication system, greater is the capacity and hence greater
is the amount of data that can be transmitted over a period of time.

● The data transfer rate (DTR) is the amount of data in digital form that is moved
from one place to another in a given time on a network. As studied before, the
greater the bandwidth of a given medium, the higher is the data transfer rate.
This can also be referred to as throughput, although data transfer rate applies
 specifically to digital data streams. Data transfer rate is often measured in bits
per second (bps), although the unit baud , which is one bit per second is also
used. It is commonly used to measure how fast data is transferred from one
location to another. For example, your ISP may offer an Internet connection with
a maximum data transfer rate of 4Mbps.

1.1.6 Network Types

On the basis of geographical span, the network can be broadly categorized as PAN,
LAN, MAN, and WAN.
● Personal Area Network
A personal area network (PAN) is a computer network used for communication among
computers and devices close to one person. Some examples of devices that are used in
a PAN are personal computers, printers, fax machines, telephones, PDAs, scanners,
and even video game consoles. A PAN may include wired and wireless devices. The
reach of a PAN typically extends to 10 meters.
● Local Area Network
Local Area networks (LAN) are private networks and can span a radius of up to 1 Km.
They are generally established within a building or campus.LANs operate at a speed in
the range 10 Mbps to 1 Gbps.
● Metropolitan Area Network
Metropolitan Area Network (MAN) may be owned by a single organization or by many
individuals or organizations. These networks are used to establish links within a city,
and span an area of radius up to 50 Km. MANs facilitate sharing of resources by
connecting various local area networks For example, a cable television network within a
city.

● Wide Area Network

Wide Area Network (WAN) spans about 1000 Km. They are used for long distance
communication and are well suited for connecting remote areas. They establish links
within a country or continent. A WAN may be owned and managed by several
organizations. It connects various local and metropolitan area networks.

1.2 Networking Concepts - II

1.2.1Transmission Medium
A transmission medium refers to the channel of transmission through which data can be
transmitted from one node to another in the form of signal. A signal encodes the data in
a form suitable for transmission on the medium. A medium is characterized by its
bandwidth defining the information carrying capacity of the medium. Common meth methods
of Internet access by users include dial dial-up
up with a computer modem via telephone
circuits, broadband over coaxial cable, fiber optics or copper wires, Wi Wi-Fi, satellite, and
cellular telephone technology (e.g. 3G, 4G).A transmission medium may belong to one
of the following two categories:
● Guided Medium: The term refers to physical conductors such as twisted pairs,
coaxial cable, and fiber optics. In twisted pair and coaxial cable, the signal travels
as voltage and current signal whereas in optical fibre, the signal is in the form of
light.
● Unguided Medium:: The unguided medium uses electro magnetic waves that do
electro-magnetic
not require a physical conductor. Examples of unguided medium include
microwave, radio wave,infrared.

Fig 1.2 Transmission Medium

1.2.2.Network Topologies
The arrangement (also called layout) of nodes in a network is called network topology.
There are broadly two types of topologies – broadcast and point to point.
In broadcast topology, all nodes share the same physical link. When one node
transmits, all nodes receive. Collision may occur when more than one node
simultaneously transmits, and there is a collision resolution mechanism for handling it.
Broadcast topologies are mainly bus and ring. In point to point topology, every pair of
nodes has a dedicated link. Popular point to point topologies are star and mesh.
 ● Bus Topology
In bus topology, there is a long cable, called backbone cable (or simply backbone), that
tha
connects various nodes through a connector called tap as shown in Figure 1.10 In this,
a message sent by one is received by all devices connected to backbone cable. This
topology requires less cabling and is easy to install and extend the network laid using
u it.
however, fault detection and isolation is difficult.

Fig 1.3 Bus Topology

● Ring Topology
In ring topology, all the devices are attached through a cable in the form of ring as
shown in Figure 1.11The message to be communicated is transmitted in one direction,
thereby, relaying the message to the intended recipient. addition and deletion of
ion and isolation is easy. However, the topology suffers from
devices, and fault detection
the limitation of single point failure leading to disruption of the entire network. sending a
message from one node to another node may take more time (four steps while sending

message from device

ce a to e)

Fig 1.4Ring Topology

 ● Star Topology
In star topology, all the devices are connected to the central controller called hub as
shown in Figure 1.12 communication between any two devices takes place through the
hub responsible
ible for relaying messages. Star network can be easily installed and
configured. Also, fault detection and isolation is easy. However, it requires more cabling
as compared to bus and ring topology. Also,, hub failure will lead to network failure

Fig 1.5 Star Topology

● Mesh Topology
In mesh topology, every node is connected with every other node in the network as
shown in Figure 1.13 Because of dedicated point to point connection between every
transfer without any traffic
possible pair of nodes, the topology provides secure data transfer
problem. it requires a large number of connections to establish the topology. This leads
to difficulty in installation as the number of nodes grow as the network grows.
 Fig 1.6 Mesh Topology

● Tree Topology
tree topology is a hybrid topology using a combination of star and bus topology.
Backbone cable in a bus topology acts like the stem of the tree, and star networks (and
even individual nodes) are connected to the main backbone cable like the branches of
tree as shown in Figure 1.14 damage to a segment of a network laid using tree topology
will not affect other segments.installation and configuration is difficult as compared to
other topologies. also, if the backbone cable cable is damaged, the entire network
communication is disrupted

Fig 1.7 Tree Topology

1.2.3.Network Devices

Creation of a network requires various network devices, s, each of which plays a specific
role in the network.
● Repeater
With increase in distance, a signal may become weak and distorted. A repeater is used
to restore the input signal to its original form, so that it can travel a larger distance.
Thus, it is placed between two cable segments as shown in Fig ure 1.8 It is also known
Figure
as digital regenerator which reshapes and amplifies the digital signal.

Fig 1.4 Repeater

● Hub
Unlike a repeater which connects two cables, a hub connects several lines, also called,
input/output (I/O) ports, each of which Fig 1.5
cable segments. A hub comprises several input/output
connects to a single cable as shown in Figure 1.5 Data arriving on an incoming line is
output to all lines except the line on which the hub receives the data.

Fig1.5 Hub
 ● Bridge
ce used for connecting two or more local area networks
A bridge is a multiport device
(LAN), possibly operating at different speeds as shown in Figure 1.6 Thus, a bridge may
be used to produce bigger LAN by combining smaller LANs. A bridge enables devices
on one LAN segment to communicate
communicate with the devices on another LAN segment. Unlike
hubs, they are intelligent devices which exercise discretion while forwarding data to the
outgoing line leading to the destination.

Fig1.6 Bridge
● Switch
Unlike bridges which connect two or more LAN segments, switches are used to connect
individual nodes in the network with each other. Each node within network is connected
to a unique port in the switch as shown in Figure 1.7 On receiving the incoming data
connecting to the destination node. All the nodes
rame, it forwards it to only a single line connecting
connected through switch forms only one LAN.

Fig 1.7 Switch

● Router
Routers are used for connecting various networks (LAN or WAN) with each other as
router transmits data from an incoming network to another
shown in Figure 1.8. A router
network. A route maintains a routing table of various networks. Based on the destination
address, the router determines to which network the incoming packet should be
transmitted.

Fig 1.8 Router

● Gateway
A gateway connects networks based on different protocol technologies to communicate
with each other as shown in figure 1.9 Data coming from one network operating on one
protocol is converted according to the protocol of the outgoing network, and then
forwarded. Thus a gateway may be thought of as a router equipped with software for
protocol conversion.

Fig 1.9 Gateway

● RJ-45
RJ-45 nnector that is used to
45 , short form of Registered Jack - 45 , is an eight wired connector
connect computers on a local area network(LAN), especially Ethernet. RJ RJ-45
RJ 11 connector used for connecting telephone
connectors look similar to the RJ-11
equipment, but they are somewhat wider.
 ● Wi-Fi Card
Wi-Fi cards are small and portable cards that allow your desktop or laptop computer to
connect to the internet through a wireless network. Wi-Fi transmission is through the
use of radio waves. The antenna transmits the radio signals and these signals are
picked up by Wi-Fi receivers such as computers and cell phones equipped with Wi-Fi
cards. These devices have to be within the range of a Wi-Fi network to receive the
signals. The Wi-Fi card then reads the signals and produces a wireless internet
connection. Many newer computers, mobile devices etc. are equipped with wireless
networking capability and do not require a Wi-Fi card.

1.3 Network Protocols

Network protocols are formal standards and rules that define communication between
two or more devices over a network. They ensure that computer network devices can
transmit and receive data using a common language regardless of their different
designs, hardware or infrastructures. Some of the protocols are listed below.

Transmission Control Protocol / Internet protocol (TCP/IP) TCP/IP are the two protocols
that are used together and together they form the backbone protocol of the internet.
They can also be used for private networks i.e. intranets and extranets. When you are
set up with direct access to the Internet, your computer is provided with a copy of the
TCP/IP program TCP/IP has two major components: TCP and IP.
● Transmission Control Protocol (TCP)
TCP is a popular communication protocol which is used for communicating over a
network. It divides any message into a series of packets that are sent from source to
destination and there it gets reassembled at the destination.
● Internet Protocol (IP)
IP is designed explicitly as addressing protocol. It is mostly used with TCP. The IP
addresses in packets help in routing them through different nodes in a network until it
reaches the destination system. An IP address is a unique identifier for a node or host
connection on an IP network. An IP address is a 32 bit binary number usually
represented as 4 decimal values, each representing 8 bits, in the range 0 to 255 (known
as octets) separated by decimal points. This is known as "dotted decimal" notation.
Example: 140.179.220.200
● Point-to-Point Protocol
PPP (Point-to-Point Protocol) is used for communication between two computers using
a serial interface, mostly a personal computer connected by phone line to a server. For
example, an Internet Service Provider (ISP) may provide you with a PPP connection so
that the ISP's server can respond to your requests, pass them on to the Internet, and
forward your requested Internet responses back to you. It was basically designed to
help communication between two systems through telephone lines as it supports
transmission of network packets over a serial point to point link. PPP is sometimes
considered a member of the TCP/IP suite of protocol
● HyperText Transfer Protocol (HTTP)
HTTP is designed for transferring a hypertext among two or more systems. HTML tags
are used for creating links. These links may be in any form like text or images. HTTP is
designed on Client-server principles which allow a client system for establishing a
connection with the server machine for making a request. The server acknowledges the
request initiated by the client and responds accordingly. HTTP has three important
features. Firstly, it is connectionless. After a request is made, the client disconnects
from the server and waits for a response. To process the request, the server has to re-
establish the connection with the client. Secondly, HTTP is media independent. This
means any type of data(text , images , sound , video etc.) can be sent by HTTP as long
as both the client and server know how to handle the data content. Thirdly HTTP is
stateless.This is because the server and the client are aware of each other only during a
request. Afterwards, they get disconnected. Hence neither the client nor the browser
can retain information between different requests across the web pages.
HTTPS is abbreviated as HyperText Transfer Protocol Secure is a standard protocol to
secure the communication among two computers one using the browser and other
fetching data from a web server. HTTP is used for transferring data between the client
browser (request) and the web server (response) in the hypertext format, same in case
of HTTPS except that the transferring of data is done in an encrypted format. So it can
be said that https thwart hackers from interpretation or modification of data throughout
the transfer of packets.
● File Transfer Protocol (FTP)
FTP allows users to transfer files from one machine to another. Types of files may
include program files, multimedia files, text files, and documents, etc.
● Simple mail transport Protocol (SMTP)
SMTP is designed to send and distribute outgoing EMail.SMTP is a reliable and easy to
set up protocol. Messages either get to a recipient, or there is an error message that
explains why that wasn't possible. One of the purposes of an SMTP is that it simplifies
the communication of email messages between servers. It allows the server to break up
different parts of a message into categories the other server can understand. Any email
message has a sender, a recipient or sometimes multiple recipients - a message body,
and usually a title heading. Once a message goes out on the internet, everything is
turned into strings of text. This text is separated by code words or numbers that identify
the purpose of each section of an email. SMTP provides those codes, and email server
software is designed to interpret these codes. SMTP has a major disadvantage that it is
relatively easy to send a message with a fake sender address. This results in the
spread of many email-based viruses.
● Post office Protocol (POP)
POP3 is designed for receiving incoming Emails. Post Office Protocol 3 or POP3 is the
third version of a widespread method of receiving email which receives and holds email
for an individual until they pick it up. SMTP has a disadvantage that if the destination
computer is not online, mails cannot be received. So the SMTP server receives the mail
on behalf of every host and the respective host then interacts with the SMTP server to
retrieve messages by using a client server protocol called POP3.
● Telnet
Telnet is the main internet protocol for creating a connection with a remote machine. It
allows you to connect to remote computers (called remote hosts) over a TCP/IP network
(such as the Internet). Once your telnet client establishes a connection to the remote
host, your client becomes a virtual terminal, allowing you to communicate with the
remote host from your computer with whatever privileges you may have been granted to
the specific application and data on that host computer.

● Internet Relay Chat (IRC)

IRC protocol is used for chatting. It provides chatting between a group or between two
individuals. It was developed by JarkkoOikarinen in Finland in the late 1980s. It is based
on the client/server model. The IRC client sends and receives messages to and from an
IRC server. The IRC server transports the message from one client to another. The IRC
server is linked to many other servers to form an IRC network. IRC server identifies
every user through a unique nickname. Each user is assigned a unique channel in case
multiple discussions are taking place.

● Voice over Internet Protocol (VoIP)

It enables the transfer of voice using a packet switched network rather than using a
public switched telephone network. By using VOIP software, phone calls can be done
using standard internet connection. This method of making phone calls is much cheaper
than conventional way because the service of Telecommunication Company is not
used.There are three different methods of VoIP service in common use today:
i.ATA -
ATA stands for analog-to-digital converted. It is used to connect the telephone device
to the computer. It takes the analog signals from the phone and converts them to digital
signals. These digital signals can be transmitted over the internet. Some providers also
are bundling ATAs free with their service.
ii. IP phones -
IP phones appear much like an ordinary telephone or cordless phone. They are directly
connected to the router or the LAN. They have all the hardware and software necessary
right onboard to handle the IP call. IP Phones are sometimes calledVoIP telephones,
SIP phones or Soft phones.
iii. Computer-to-computer -
It is the most easy and simplest way to use VoIP. The basic hardware requirements are
Computer, Internet, Speakers, Microphone. The only cost involved with computer - to-
computer VoIP is the monthly ISP fee.

1.4 Web Architecture

Web Architecture can be defined as the conceptual structure of the internet. The WWW
or internet is a constantly changing medium that enables communication between
different users and the technical interaction between different systems and
subsystems. The infrastructure of the internet is made of three core components of data
transmission protocols (TCP/IP, HTTP, HTTPS), representation formats (HTML, CSS,
XML), and addressing standards (URI, URL).
Origin of web architecture

The world wide web is a concept that was realized in the 1990s so that people and
machines could communicate with each other within a certain space. It is used to
exchange, distribute, and share information in a network. At that time, the web
consisted predominantly of static websites based on HTML, in other words, hypertexts
that can be retrieved by a browser. Dynamic websites and distributed web services
were added later.

1.4.1Types of web architectures

I) Client-server model

Initially, the web consisted of a two-tiered architecture: clients and servers. Clients and
servers shared the tasks and services that the system was supposed to perform. For
example, the client may request a service from the server; the server answers the
request by providing the service. Retrieving a website using a URL address that directs
a server to load the site in the client’s browser is an example of the two-layer model,
also known as the client-server model.
The internet protocol family, which now consists of around 500 different network
protocols, is usually used as the basis for the WWW, but it usually comprises the
TCP/TCP/IP reference model. Three prerequisites must exist in the web architecture for
the application systems to communicate with one another:

● Representation formats with a fixed standard: The most frequently used formats
are HTML(HyperText Mark Up Language) , CSS(Cascading Style Sheet) or XML
(Extensible Mark up Language )when machines communicate with one another.

● Protocols for data transfer: HTTP (Hypertext Transfer Protocol) or HTTPS

(Hypertext Transfer Protocol Secure) is used in the web. Other applications, such
as mail servers, use SMTP (Simple Mail Transfer Protocol) or POP (Post Office
Protocol).

● The standard for addressing: This refers to the URL (Uniform Resource Locator)
which is an instance of the more general concept of URI.

Finally, the web architecture is the operational structure of application systems for data
storage, data transmission, and presentation. When transferred to the web, the web
architecture typically consists of database servers that manage the data and resources.
They communicate with a client using a transfer protocol that can retrieve the data and
view it in a browser. The representation is usually done with HTML and CSS.

II) Three-tier model

Three-tier models include an application logic between the client and the server, which
handles the data processing and allows a certain degree of interaction. For example, an
application server can process data while a database server is dedicated solely to data
storage. In this way, content can be dynamically loaded and saved. The script language
JavaScript is often responsible for the behavior of the client.

Generally, a distinction is made between server-side and client-side data processing.

Dynamic websites are characterized by the fact that content is changed on the client
side. On the server side, modified content is stored via the application server on the
database server. Optionally, this can be a virtual server that emulates a physical one.

There are different programming languages and frameworks to implement three-tier

models like :-
● Hypertext Preprocessor (PHP)
● Common Gateway Interface (CGI)
● JavaServer Pages (JSP)
● Active Server Pages (ASP.NET)
 ● Java applets, JavaScript and VBScript (client-side technologies)

III) Service-oriented architectures (SOA)

Today the web is used for the networking of globally distributed IT structures. Modern IT
and web applications are much more complex than the client-server model. With SOAs,
business processes can be automated by the involved systems communicating with one
another - partly without human intervention - and performing certain tasks. Examples
include online banking, e-commerce, e-learning, online marketplaces, and business
intelligence applications. They are known as N-tier architectures and have so far been
used primarily in the business sector.

If the Web architecture was represented as an evolutionary timeline, IoT and Semantic
Web would be the top of the development. The architectures that are used there are
correspondingly complex.

The effects of different architectures are extremely diverse. From a user perspective,
websites and web services are changing to a degree that not even developers can keep
track of, what with hundreds of protocols, programming and scripting languages,
frameworks and interfaces. Websites become interactive, data can be exchanged
faster, and services interact with each other easily. From a developer’s perspective,
web architectures are becoming more and more complex and many different
approaches exist at the same time.

1.4.2 Identification of computers and users over a network

● MAC Address
Once a network has been set up, the nodes can communicate among themselves. But
for proper communication, the nodes should be uniquely identifiable. If a node X sends
some information for node Y on a network, then it is mandatory that nodes X and Y are
uniquely identifiable on the network. Let us see how this is achieved.Each NIC has a
universally unique address assigned to it by its manufacturer. This address is known as
the MAC (Media Access Control) address of the card. It means that a machine with an
NIC can be identified uniquely through its NIC's MAC address. The MAC address of an
NIC is permanent and does not change.
MAC addresses are 12-digit hexadecimal (or 48 bit) numbers. By convention, MAC
addresses are usually written in one of the following two formats:
MM:MM:MM:SS:SS:SS
MM-MM-MM-SS-SS-SS
The first half (MM:MM:MM) of a MAC address contains the ID number of the adapter
manufacturer. The second half (SS:SS:SS) of a MAC address represents the serial
number assigned to the adapter (NIC) by its manufacturer.
For example, in the following MAC address,
00:A0:C9 : 14:C8:35
The prefix 00:A0:C9 indicates that the manufacturer is Intel Corporation. And the last
three numbers 14:C8:35 are given by the manufacturer (Intel in this example) to this
NIC.

● IP Address
Every machine in a network has another unique identifying number, called its IP
Address. An IP address is a group of four bytes (or 32 bits) each of which can be a
number from 0 to 255. A typical IP address looks like this:
59.177.134.72
To make it easier for us to remember, IP addresses are normally expressed in decimal
format as a "dotted decimal number" like the one above.
On a network, the IP address of a machine, and not the MAC address of its NIC, is used
to identify it. Do you recall IP protocol? IP protocol identifies a machine with its IP
address to route the packets.
MAC address is used only when a specific machine is to be targeted. For example,
suppose we want to block a specific PC to access some network resource. If we use the
PCs IP address, then the PC is not blocked permanently as its IP address may change
when it connects to the network next time. Instead, if the PCs MAC address is used for
the purpose, then the job is done!
An IP (Internet Protocol) address is a unique 4 digit hexadecimal number assigned to
each node on a network. IP address settings of a node can be changed by the user You
might wonder how an IP address differs from a MAC address. In fact, the IP address is
assigned by the network administrator or the internet service provider while the MAC
address is assigned by the manufacturer. Thus if a computer is transferred from one
network to another, its IP address gets changed whereas the MAC address remains the
same. From the IP address it is usually possible to track the tentative location of the
computer but this is not the case with a MAC address.
● Domain Name
So, whenever we have to communicate with a computer on the internet, we can do so
by using its IP address. But it is practically impossible for a person to remember the IP
addresses of all the computers one may have to communicate with. Therefore, a
system has been developed which assigns names to some computers (web servers)
and maintains a database of these names and corresponding IP addresses. These
names are called Domain Names. Examples of some domain names are cbse.nic.in,
sikkimipr.org, indianrailway.gov.in etc. Domain names are used in URLs to identify
particular Web servers. For example, in the URL http://www.cbse.nic.in/welcome.htm,
the domain name is www.cbse.nic.in.
A domain name usually has more than one parts: top level domain name or primary
domain name and sub-domain name(s). For example, in the domain name , in is the
primary domain name; nic is the sub-domain of in; cbse is the sub-domain of nic.There
are only a limited number of top level domains, and these are divided into two
categories: Generic Domain Names and Country-Specific Domain Names. For example
Generic Domain Names:
·com - commercial business
·edu - Educational institutions
·gov - Government agencies
·mil - Military
·net - Network organizations
·org - Organizations (nonprofit)

Country Specific Domain Names:

.in - India
·au - Australia
·ca - Canada
.ch - China
.nz - New Zealand
.pk - Pakistan
.jp - Japan
.us - United States of America

● Domain Name Resolution is the process of getting the corresponding IP

address from domain name. It happens as follows:
Suppose you mention a URL in the web-browser to visit a website. The browser first
checks your computer to find if the IP address of the server corresponding to the
Domain Name (embedded in the URL) is present. If this address is present then with
the help of this address, the corresponding server is contacted and then the website
opens in your browser. Otherwise the browser sends this domain name to some specific
servers (called domain name servers) to find the corresponding IP address. Once the IP
address is known, the server is contacted and then the website opens in your browser.
1.5 Network Threats and Security Measures

With the increase in use of the network for accessing data and resource sharing,
security is becoming a prime concern. The Internet represents an insecure channel for
exchanging information, which leads to a high risk of intrusion or fraud, such as
phishing,[viruses, trojans, worms and more.
1.5.1Malwares
The term malware refers to malicious software (programs) designed with the intention to
affect the normal functionality by causing harm to the system, or with the intention of
getting unauthorized access to the system, or denying access to legitimate users of
computing resources. A malware may be a virus, worm, Trojan horse.
● Virus
A virus is a software code that may harm your system by overwriting or corrupting the
system files. A computer virus is similar in action to viruses in our body which replicate
themselves and affect body cells. The affected part is called the infected area. A
computer virus may make several copies of it by inserting its code onto the system
programs, files or boot sector of hard drives and thereby may corrupt them. This causes
the system to slow down or even stop functioning like boot sector virus, file infector
virus, and macro virus.
● Worm
A worm is often received via network, and it automatically keeps on creating several
copies of itself on the hard disk thereby flooding the hard disk. When a worm is received
as an email attachment, it is automatically forwarded to the recipients leading to network
congestion. Thus a worm may crash the system and entire network. No host application
is required for worms to replicate themselves e.g. Code Red Worm which makes more
than 2,50,000 copies of itself in approximately 9 hours.
● Trojan Horse
Trojan Horse is a code that appears to be desirable and useful but ends up harming the
system.Trojan horse can attach itself with a safe application. For example, it may be
attached to any game downloaded over the Internet. Such an application when
executed creates a backdoor in the system through which a hacker can access the
system. The hacker can monitor all the activity performed on the system. He can also
control the infected system by harming the data on the system. For example, in the late
1990s, Trojan Horse named Sub7 was created which took advantage of security flaws
of earlier version browsers such as Internet Explorer and Chrome to illegally access the
host computer.
1.5.2 Evesdropping
Eavesdropping is the act of secretly or stealthily listening to the private conversation or
communications of others without their consent. Eavesdropping is done through
telephone lines, cellular networks, email, and instant messaging.
1.5.3 Denial of Service
A denial-of-service attack (DoS attack) is a cyber-attack in which the machine or
network resource becomes unavailable to its users by temporarily or indefinitely
disrupting services.. Denial of service is typically accomplished by flooding the targeted
machine or resource with superfluous requests in an attempt to overload systems and
prevent requests from being fulfilled. A DoS attack is like a group of people crowding
the entry door of a shop, making it hard for legitimate customers to enter.
1.5.4.4Phishing
Phishing refers to the act of stealing a user's personal information through fraud mails.
These emails eit4er entail personal information through embedded forms, or contain
links to the web page that may prompt you to provide this information. Information
attempted to be stolen may include bank account number, debit/credit card number,
passwords or any other valuable data

1.5.5 Cyber Crime

Cybercrimes are the crimes related to the misuse of computers or the Internet such as
theft, fraud, and forgery. The IT act defines cybercrime as an unlawful act where in the
computer is either a tool or a target or both. Some of these crimes are mentioned below
● Sending spam mails to uninterested recipients.
● Hacking someone’s account or system.
● Stealing someone’s personal information through phishing
● Hosting a site carrying lots of malwares or being a source for spreading them.
● Harassing someone through mails, messages or social networking.
● Posting offensive content on any site or sending it to anyone.
● Defaming someone using the Internet.
● Forging someone’s digital signatures
● Indulging in fraudulent financial transaction
● Providing misleading information to clients/ general public through use of Internet
resources
● Intellectual Property theft
● Illegal downloads, plagiarism
1.5. B Network Security Tools and Services

Since the Internet has emerged as a prime tool for sharing resources and accessing
data, an exponentially growing number of users are using it with both good and bad
intentions. Everyone accessing the Internet needs to be aware of the security issues
and take protective measures to address the same.

1.5.1Firewalls

A firewall aims at protecting the internal network of an organization, home, or individual

from malicious traffic from external networks. A router or a computer (often dedicated to
serve as a firewall) may be installed between external network and internal network for
this purpose. Firewall inspects the network traffic, and allows only that data to pass
through the network that does not violate the security constraint. Hardware firewalls in
the form of a router prevents malicious software from entering your network from
outside the network. However, software firewalls installed on personal computers
prevent unauthorized access or malwares from gaining access to personal computers.
Network firewalls may also encrypt the incoming data by converting it to non readable
format, thus, adding further protection.
1.5.2 Antivirus
Anti-virus is software that aims to protect your system against malicious and potentially
unwanted programs. It is responsible for detecting these malicious programs by
searching for them, and removing them to keep the system protected. The software
operates by maintaining a database of malware definitions, which are automatically
updated. It searches for any malicious program by scanning the files against the stored
malware definitions for a match. In case of a match, they are declared as potentially
harmful, and are disabled and removed depending upon anti-virus software settings.

1.5.3 Password managers

A password manager is a software application that helps a user store and organize
passwords. Password managers usually store passwords encrypted, requiring the user
to create a master password; a single, ideally very strong password which grants the
user access to their entire password database from top to bottom
1.5.4 Protective Measures while accessing Internet
● Never click on a suspicious link specified on a web page or send through a mail
for which you are not sure about its authenticity.
● Make sure that passwords are strong and are changed frequently. Passwords
are the means for authenticating users, thereby allowing access to networked
systems. Weak passwords have smaller length and use a small subset of
possible characters, and thus, are subjected to be cracked easily. One should
also avoid setting obvious passwords such as names, mobile numbers, or date of
birth. Passwords should be strong, having long length and including characters
such as numbers and punctuation signs.
● Never disclose personal information such as date of birth, home address,
personal phone number, account details, passwords, credit and debit card
details, work history details.
● Report phishing issues to the concerned authorities or at cybercrime.gov.in. In
case of unsolicited mails, mark them as spam mails.
● Security of the communication made over the Internet can be indicated by the
security of protocol being used. Secure HyperText Transfer Protocol (HTTPs) is
a secure version used for communication between client and host on the
Internet. So, ensure that all communications are secure, especially online
transactions.The security of the website can be ensured if there is a padlock on
the left side of the address bar. It indicates that the website has a SSL (Secure
Socket Layer) digital certificate issued by a trusted party which ensures and
proves the identity of the remote host.
● Ensure that the web browser being used for accessing the web is updated and is
secure. For example, chrome browser is up to date, if the security patch
indicated by three dots on top right corner are grey in color. Green, orange and
red color security patches indicate that browser update is available for two, four
and seven days Respectively.
● Be selective while making friends on the social networking site. Do not send or
accept friendship requests from any unknown user. Also, trust the authenticity of
a message only if you are sure about its origin (sender).
● Do not post any offensive content on social networking site as it may lead to a
criminal
action against you.
● Beware before spreading any kind of a rumor as it may be treated as a cyber-
crime.
● If someone is harassing or threatening you, take snapshot of it as a proof, and
block
the person. Also, report the incident to the site administrator.
● Use updated antivirus and firewall, secure browsing, and password management
techniques.
 ● Make sure that the website address is properly spelled. Because there may be
two websites with almost the same name, one being a phishing website.
● Delete cookies periodically. A cookie is a small piece of information about the
client browsing a website. On receiving a request from a client, the server
records the client information such as domain name and registration id on the
server site in the form of a file or a string. The server sends this cookie along with
the response requested by the client. At the client side, the browser stores this
cookie received from the server in a directory called cookie directory. By
obtaining access to these cookies, hackers may gain unauthorized access to
these websites. Thus, cookies should be deleted occasionally along with the
temporary files stored on our system during web browsing.

1.5.5 Cyber Law

Cyber laws are the laws for systematic use of e-resources, for example, e-business,
and serve as a measure against illegal cyber-crime. Various cyber laws have also been
enacted to prevent cyber-crimes and take action against those involved in such crimes.
These laws define the action that would be taken against people committing the
offences. For cyber security, an amendment in IT Act 2000 named Information
Technology Amendment Act,2008 was also introduced. The act also defines offences
and penalties for cyber-crime. Cyber police are responsible for detecting such crimes
and taking the necessary measure against it according to the IT Act.
Cyber offences under IT Act
● Tampering with computer source documents - Section 65
● Hacking -Section 66
● Publishing of information which is obscene in electronic form -Section 67

Intellectual property rights (IPR) Issues

Intellectual property rights are the rights given to an individual over the invention of their
own. They usually give the creator an exclusive right over the use of his/her creation for
a certain period of time. There are only three ways to protect intellectual property
● Patent is a term used for a specific product designed by an individual. The
designer is given exclusive rights over the patent for a limited period of time. With
help of the patent right, the owner can stop others from making, using or selling
the product design. The owner can take a legal action if someone uses the
patent without his/ her permission In order to obtain a patent, the following
conditions should be met: The product should be new It should be capable of
 being made or used in some kind of industry It should not be a scientific or
mathematical discovery It should not be a dramatic, musical dramatic or artistic
work
● Trademark can be defined as a name or a different sign or a device identifying a
product or a service. The product or the service is produced or provided by a
specific person or a company. A Trademark is also known as brand name.It
should be officially registered and legally restricted to the use of the specific
person or the company.
● Copyright is the term used for a written document. A legal action can be taken, if
copyrights are violated. The following category of work can be considered for
copyrights. literary works musical works, including any accompanying words

Points to Remember

● Network: A collection of independent computers that communicate with one

another over a shared network medium.
● Node: A computer attached to a network.
● Server: A computer that facilitates sharing of data, software and hardware
resources on the network.
● Network Interface Unit (NIU): A device that helps to establish communication
between the server and workstations.
● Circuit switching: A technique in which a dedicated and complete physical
connection is established between two nodes for communication.
● Packet switching: A switching technique in which packets are routed between
nodes over data links shared with other traffic
● Channel: A medium that is used in the transmission of a message from one point
to another.
● Bandwidth: The range of frequencies available for transmission of data
● Personal Area Network (PAN): A computer network organized around an
individual person.
● Local Area Network (LAN): A network in which the devices are connected over a
relatively short distance.
● Metropolitan Area Network (MAN): A network which spans a physical area ( in
the range of 5 and 50 km diameter) that is larger than a LAN but smaller than a
WAN.
● Wide Area Network (WAN): A network which spans a large geographical area,
often a country or a continent
● Transmission Medium: One which carries a signal from one computer to another.
● Modem: A device that enables a computer to transmit data over, telephone or
cable lines. RJ-45: An eight wired connector used to connect computers on a
LAN.
● Ethernet card: A kind of network adapter.
● Switch: A small hardware device that joins multiple computers together within a
LAN.
● Repeater: An electronic device that amplifies the received signal and then
retransmits it on the network
● Router: A network device that connects two networks with different protocols.
● Gateway: A network device that connects two dissimilar networks.
● Wi-Fi card: A small, portable card that allow your computer to connect to the
internet through a wireless network.
● Protocol: A special set of rules that two or more machines on a network follow to
communicate with each other.
● Transmission Control Protocol(TCP): It breaks the data into packets that the
network can handle efficiently.
● Internet protocol(IP): It gives distinct addresses (called IP address) to each data
packet.
● File Transfer Protocol (FTP): It is used for transferring files from one system to
another on the internet.
● HyperText Transfer Protocol (HTTP): It is the protocol that is used for transferring
hypertext files on the World Wide Web.
● Point-to-Point Protocol (PPP): It is used for communication between two
computers using a serial interface.
● Simple Mail Transfer Protocol (SMTP): It allows transmission of email over the
Internet.
● Post Office Protocol 3(POP3): It receives and holds email for an individual until
they pick it up.
● Telnet: A protocol for creating a connection with a remote machine.
● IRC: IRC protocol is used for chatting. It is based on client/server model.
● VOIP: VOIP stands for voice over internet protocol. It enables the transfer of
voice using a packet switched network rather than using a public switched
telephone network.
● A MAC (Media Access Control) address is a unique 12 digit (6 digits for manufacturer
code and 6 digits for serial number) hexadecimal number assigned to each NIC. MAC
address of an NIC never changes.
● An IP (Internet Protocol) address is a unique 4 digit hexadecimal number assigned to
each node on a network.
● Domain Name is a name assigned to a server through Domain Name System (DNS). A
domain name usually has more than one parts: top level domain name or primary
domain name and sub-domain name(s).
● Domain Name Resolution is the process of getting corresponding IP address from
a domain name.
● The term malware refers to malicious software (programs) designed with the intention to
affect the normal functionality by causing harm to the system, or with the intention of getting
unauthorized access to the system, or denying access to legitimate users of computing
resources.
● Virus: Virus is a malicious program that attaches itself to the host program. It is
designed to infect the host program and gain control over the system without the
owner's knowledge.
● Worm: Worm is also a malicious program like a virus. But unlike viruses, it does
not need to attach itself to a host program. A worm works by itself as an
independent object.
● Trojan horse: A Trojan horse is a program that contains hidden malicious
functions. Trojan Horses trick users into installing them by appearing to be
legitimate programs.
● Spam: The term spam means endless repetition of worthless text. In other words,
unwanted messages or emails are known as Spam.
● Cookies: This small text file is a cookie. Generally a cookie contains the name of
the website that it has come from and a unique ID tag.
● Firewall: A firewall is hardware or software based network security system. It
prevents unauthorized access (hackers, viruses, worms etc.) to or from a
network.
● Cyber Crime: Cybercrime is defined as a crime in which a computer and internet
is used in an illegitimate way to harm the user.
● Cyber Law: Cyber law is an attempt to integrate the challenges presented by
human activity on the internet with a legal system of laws applicable to the
physical world. Intellectual property rights are the rights given to an individual
over the invention of their own. They usually give the creator an exclusive right
over the use of his/her creation for a certain period of time.
● Intellectual property rights (IPR) Issues: Intellectual property rights are the rights
given to an individual over the invention of their own. They usually give the
creator an exclusive right over the use of his/her creation for a certain period of
time.
● Hacking: The term was used for people who engaged themselves in harmless
technical experiments and fun learning activities.
● Cracking: Cracking can be defined as a method by which a person who gains
unauthorized access to a computer with the intention of causing damage.
 EXERCISE
1. Fill in the blanks:
a. Two or more computers connected to each other for information exchange form a
_____________.
b. The range of frequencies available for transmission of data is called____________.
c. _____________ is the network of networks.
d. A technique in which a dedicated and complete physical connection is established between two
nodes for communication is ______________switching.
e. Any computer attached on the network is called a ____________.

2. Multiple Choice Questions:

1) Choose the option, which is not included in networking.
a. Access to remote database
b. Resource sharing
c. Power transferring
d. Communication
2) Data transfer rate is often measured in
a. Mbps
b. Kbps
c. Bps
d. gbps
3) Which one of the following is not in the category of communication channels?
a. narrow band
b. broadband
c. light band
d. voice band
4) The greater the bandwidth of a given medium, the ________ is the data transfer rate
a. higher
b. lower
c. both a and b
d. neither a nor b
5) What is the approximate bandwidth of a typical voice signal?
a. 2KHz
b. 2MHz
c. 3KHz
d. 3MHz

3.Expand the following:

a. ARPANET.
b. DTR
c. NIU
d. ISP
e.FTP
f. TCP
g.SMTP
h.VoIP

LONG ANSWERS
1. What is a network? Give any two uses of having a network in your school computer lab.
2. Mention any two disadvantages of a network.
3. What are the requirements for setting up a network?
4. How is a dedicated server different from a non dedicated server?
5. Define a channel. Name the three categories of communication channels.
6. What do you mean by bandwidth and DTR?
7. Two companies in different states wanted to transfer information. Which type of network will be
used to implement the same?
8. Two schools in the same city wanted to transfer e-learning information. Which type of network will
be used to implement the same?
9. Two teachers in the same school sitting in different labs wanted to transfer information. Which
type of network will be used to implement the same?
10. What do you mean by a transmission medium? Differentiate between guided and unguided
transmission media.
11. Define the term topology.
12. List any two advantages and any two disadvantages of Star topology.
13. How is Tree Topology different from Bus topology?
14. Identify the type of topology from the following.
a. Each node is connected with the help of a single cable.
b. Each node is connected with the help of independent cable with central switching.
15. Ms. Anjali discovered that the communication between her centre and the primary block of the
school is extremely slow and signals drop quite frequently. The distance between these two blocks is
140 meters.
a. Name the type of network.
b. Name the device which may be used for smooth communication.
16. ABC International School is planning to connect all computers, each spread over a distance of
50 meters. Suggest an economic cable type having high speed data transfer to connect these
computers.
17. Sahil wants to transfer data across two continents at very high speed. Write the name of the
transmission medium that can be used to do the same. Write the type of network also.
18. Mayank wants to transfer data within a city at very high speed. Write the name of the wired
transmission medium that he should use. Write the type of network also.
19. Mr. Akash wants to send/receive email through the internet. Which protocol will be used for this
purpose?
20. Answer the following questions in the context of a computer lab with 100 computers.
a. Which device is used to connect all computers inside the lab?
b. Which device is used to connect all computers to the internet using telephone wire?
21. Name the device that establishes an intelligent connection between a local network and external
network with completely different structures.
22. Name the network device that works like a bridge to establish connection between two networks
but it can also handle networks with different protocols.
23.Neha wants to upload and download files from/to a remote internal server. Write the name of the
relevant communication protocol, which will let her do the same.
24. Meha wants to upload hypertext documents on the internet. Write the name of protocol, which
will let her do the same.
25. This protocol is used for communication between two personal computers using a serial interface
and connected by a phone line. Write the name of the protocol.
26. This protocol is used to transfer email over the internet. What is the name of the protocol?
27. This protocol is used to implement remote login. What is the name of the protocol?
28. This protocol is used for chatting between two groups or between two individuals. Write the
name of the protocol.
29. This protocol is used to transfer voice using packet switched networks. Write the name of the
protocol.
30. Explain Remote Access Protocol.
31. Why do we need VoIP protocol?
32. Differentiate between FTP and HTTP.
33. Differentiate between VoIP and IRC.
34. Explain the three types of web architecture
35. Differentiate between IP address and MAC address
36.Differentiate between Worm and Virus
37.Explain the significance of the IT Act.
38. Explain the following terms: Patent Copyright Trademark
39. Differentiate between hacking and cracking
40. Rohan wants to prevent unauthorized access to/from his company's local area network. Write
the name of the system, which he should install to do the same.
41. When the user browses a website, the web server sends a text file to the web browser. What is
the name of this?
42. It is defined as a crime in which a computer and internet is used in an illegitimate way to harm
the user. What is the name of this crime?
43. A person who gains unauthorized access to a computer with the intention of causing damage.
What is the name of this crime?
 UNIT - 2
WEBSITE DEVELOPMENT USING HTML AND CSS

By the end of this Chapter, you will be able to:

 Use a text editor to author an HTML document.

 Be able to use basic tags to denote paragraphs, emphasis or special type.
 Create hyperlinks to other documents.
 Create an email link.
 Add images to your document.
 Use a table for layout.

What is Website?
A website is a collection of web pages which contains the information about the
particular organization or institution or any product. It contains the related content
that is identified by a common domain name and published on any one web server.
Few examples of such websites are bing.com,
wikipedia.org, google.com, amazon.com etc. A website can be opened using the
software known as Browser. Commonly used browsers are Google Chrome, Internet
Explorer, Mozilla Firefox etc.

Languages used for website development

The most common programming languages used to develop websites are:HTML
(HyperText Markup Language), JavaScript, Cascading Style Sheets and PHP:
Hypertext Preprocessor. Some of these can be used as an extension of the
existing languages but some can be used entirely separate from the other
languages to create a dynamic or static website.

Purpose
Websites are developed for a particular purpose, such as commerce, education,
media and entertainment, or social networking. It can be the work of an individual, a
business or other organization for the interest of public or any personal reasons. It
helps to communicate with the world anytime, anywhere irrespective of distance.
Today the world has become a global market for the businesses also.

Types of Websites: Static and dynamic website

Static website
A static website is stored on the web server in the format that has to be sent to a
client web browser. It is mainly coded in Hypertext Markup Language (HTML)
and Cascading Style Sheets (CSS) to control the appearance of the website. These
are non-interactive websites which are only used to display the same information to
all visitors. If any changes are to be made then website owner can do it.It is a
manual process to edit the text, photos and other content and may require basic
website design skills and software. After the changes again it is published on the
same domain. Website containing the basic information or a brochure website are
often come under this category as these websites contains the present pre-defined,
static information to the user.

Dynamic website

A dynamic website is one that changes or customizes itself frequently and

automatically. Server-side dynamic pages are generated "on the fly" by computer
code that produces the HTML (CSS are responsible for appearance and thus, are
static files). There are a wide range of software systems, such as CGI, Java
Servlets and Java Server Pages (JSP), Active Server
Pages and ColdFusion (CFML) that are available to generate dynamic web systems
and dynamic sites. Various web application frameworks and web template
systems are available for general-use programming
languages like Perl, PHP, Python and Ruby to make it faster and easier to create
complex dynamic websites.
A site can display the current state of a dialogue between users, monitor a changing
situation, or provide information in some way personalized to the requirements of the
individual user. Few examples of dynamic websites are News channel sites , a retail
website with lots of products allows a user to input a search request, e.g. for the
keyword Beatles.
A 2010-era trend in websites called "responsive design" has given the best of
viewing experience as it provides with a device based layout for users. These
websites change their layout according to the device or mobile platform thus giving a
rich user experience.[6]

Section-1 Basics about Html

1.1 HTML Basics This Chapter leads you to the basics of Hyper Text Mark up Language
(HTML). HTML is the building block for web pages. You will learn to use HTML to author
an HTML page to display in a web browser.

Prerequisites
You will need a text editor, such as Notepad and an Internet browser, such as Internet
Explorer or Netscape Navigator.
Q: What is Notepad and where do I get it?
A: Notepad is the default Windows text editor. On most Windows systems, click your Start
button and choose Programs then Accessories. Its icon is a little blue notebook. Mac Users:
SimpleText is the default text editor on the Mac. In OSX use TextEdit and change the
following preferences: Select (in the preferences window) Plain text instead of Rich text and
then select Ignore rich text commands in HTML files. This is very important because if you
don’t do this HTML codes probably won’t work. One thing you should avoid using is a word
processor (like Microsoft Word) for authoring your HTML documents.
What is an Html File?
The documents themselves are plain text files with special “tags” or codes that a web
browser uses to interpret and display information on your computer screen.

 HTML stands for Hyper Text Markup Language

 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have an htm or html file extension

Try It:
Open your text editor and type the following text:

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

1. Save the file as mypage.html.

2. Start your Internet browser.
3. Select Open (or Open Page)in the File menu of your browser. A dialog box
will appear.
4. Select Browse (or ChooseFile) and locate the html file you just created -
mypage.html - select it and click Open.
5. Now you should see an address in the dialog box, for example
C:\MyDocuments\
6. mypage.html.
7. Click OK, and the browser will display the page.

Example Explained

What you just made is a skeleton html document. This is the minimum required
information for a web document and all web documents should contain these basic
components.

The first tag in your html document is <html>. This tag tells your browser that this is
the start of an html document.

The last tag in your document is </html>. This tag tells your browser that this is the
end of the html document.
The text between the <head> tag and the </head> tag is header information.
Header information is not displayed in the browser window.
The text between the <title> tags is the title of your document.

The <title> tag is used to uniquely identify each document and is also displayed in
the title bar of the browser window.

The text between the <body> tags is the text that will be displayed in your browser.

The text between the <b> and </b> tags will be displayed in a bold font.
1.2 Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line
breaks.

Basic HTML Tags

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading
while <h6> defines the smallest.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6> This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading. A useful
heading attribute is “align”.

<h5 align=“left”>I can align headings </h5>

<h5 align=“center”>This is a cantered heading </h5>
<h5 align=“right”>This is a heading aligned to the right </h5>
Paragraphs

Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text.
You can use the align attribute with a paragraph tag as well.

<p align=“left”>This is a paragraph</p>

<p align=“center”>this is another paragraph</p>

Line Breaks

The <br> tag is used when you want to start a new line, but don’t want to start a new
paragraph. The <br> tag forces a line break wherever you place it. It is similar to
single spacing in a document.

Note:- The <br> tag has no closing tag.

Horizontal Rule

The <hr> element is used for horizontal rules that act as dividers between sections,
like this:

The horizontal rule does not have a closing tag. It takes attributes such as align and
width.

For instance:

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment
can be placed anywhere in the document and the browser will ignore everything
inside the brackets. You can use comments to write notes to yourself, or write a
helpful message to someone looking at your source code.
Note: - You don’t see the text between the tags <!-- and -->. If you look at the source
code, you would see the comment. To view the source code for this page, in your
browser window, select View and then select Source.

Other HTML Tags

There are logical styles that describe what the text should be and physical styles
which actually provide physical formatting. It is recommended to use the logical tags
and use style sheets to style the text in those tags.

Character tags like <strong> and <em> produce the same physical display as
<b>and <i> but are more uniformly supported across different browsers.

1.3 HTML Character Entities

Some characters have a special meaning in HTML, like the less than sign (<) that
defines the start of an HTML tag. If we want the browser to actually display these
characters we must insert character entities in place of the actual characters
themselves.
The Most Common Character Entities:

A character entity has three parts: an ampersand (&), an entity name or an entity
number, and finally a semicolon (;). The & means we are beginning a special
character, the; means ending a special character and the letters in between are sort
of an abbreviation for what it’s for. To display a less than sign in an HTML document
we must write: &lt; or&#60; the advantage of using a name instead of a number is
that a name is easier to remember. The disadvantage is that not all browsers support
the newest entity names, while the support for entity numbers is very good in almost
all browsers.

Note: Entities are case sensitive.

1.4 HTML Background

The <body> tag has two attributes where you can specify backgrounds. The
background can be a color or an image.

Bgcolor

The bgcolor attribute specifies a background-color for an HTML page. The value of
this attribute can be a hexadecimal number, an RGB value, or a color name:

<body bgcolor=“#000000”>

<body bgcolor=“rgb(0,0,0)”>

<body bgcolor=“black”>

The lines above all set the background-color to black.

Background

The background attribute can also specify a background-image for an HTML page.
The value of this attribute is the URL of the image you want to use. If the image is
smaller than the browser window, the image will repeat itself until it fills the entire
browser window.

<body background=“clouds.gif”>
<body background=“http://profdevtrain.austincc.edu/html/graphics/clouds.gif”>

The URL can be relative (as in the first line above) or absolute (as in the second line
above).

If you want to use a background image, you should keep in mind:

 Will the background image increase the loading time too much?
 Will the background image look good with other images on the page?
 Will the background image look good with the text colors on the page?
 Will the background image look good when it is repeated on the page?
 Will the background image take away the focus from the text?

Note: The bgcolor, background, and the text attributes in the <body> tag are
deprecated in the latest versions of HTML (HTML 5).

The World Wide Web Consortium (W3C) has removed these attributes from its
recommendations. Cascading Style sheets (CSS) should be used instead (to define
the layout and display properties of HTML elements).

Try It Out!

Open your text editor and type the following text:

<html>
<head>
<title>My First Webpage</title>
</head>

<body background=“http://profdevtrain.austincc.edu/html/graphics/clouds.gif”
bgcolor=“#EDDD9E”>

<h1 align=“center”>My First Webpage</h1>

<p>Welcome to my <strong>first</strong> webpage. I am writing this page using a

text editor and plain old html.</p>

<p>By learning html, I’ll be able to create webpages like a

<del>beginner</del>
pro....
<br> which I am of course.</p>

</body>
</html>

Save your page as mypage3.html and view it in your browser.

1.5 HTML Links

Webpages in a website can be linked with each other with the help of tags. HTML
uses the <a> anchor tag to create a link to another document or web page.

There are two types of linking in HTML- Internal and External.

Internal Linking

A webpage is linked within the same web page. It is done by using an absolute path or
relative path of a link. The internal link name is followed by the hash sign(#).By assigning an
id to refer section of the webpage, which is referred to as an internal link to the same page.

Syntax:
<a name= “#Text” ></a>
<a hreaf=”#Text”></a>

Try it!
 <html>

<head><title> My page </title></Head><body>

<H1><U><A name="#Top"> ADMISSSION ENQUIRY FORM </A></u></h1>

<Form method=Post action= "maoilto:[email protected]"><b>Name </b><Input type=Text

name="st_name"><br>

<b>Gender </b>

<Input type=Radio name="gender" value="Male"> Male

<Input type=Radio name="gender" value="Female"> Female <Br>

<b>E- mail </B><Input type=Text Name ="email"><br>

SELECT SUBJECTS: <BR>

<Input type=CHECKBOX value="Science"> Science <Input type=CHECKBOX value="Commerce"> Commerce

<Input type=CHECKBOX value="Arts"> Arts

<Br>

Comment<Br>

<TextAREA name="comment" Rows=5 cols=50></TEXTAREA><br>

<INPUT Type=Submit Value ="Send">

<INPUT Type=Reset Value ="Clear">

</Form>

<A href="#Top"> Top </A>

</body>

</html>

Note : In the above example highlighted text depicts the internal linking. Try the
above code and see the output in the browser window.

External Linking
The Anchor Tag and the “href” Attribute

An anchor can point to any resource on the Web: an HTML page, an image, a sound
file, a movie, etc.

The syntax of creating an anchor:

<a href=“url”>Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to tell
the address of the document or page we are linking to, and the words between the
open and close of the anchor tag will be displayed as a hyperlink.

The Target Attribute

With the target attribute, you can define where the linked document will be opened.
By default, the link will open in the current window. The code below will open the
document in a new browser window:

<a href=http://www.austincc.edu/ target=“_blank”>Visit ACC!</a>

Email Links

To create an email link, you will use mailto: plus your email address.

Here is a link to ACC’s Help Desk:

<a href=“mailto:[email protected]”>Email Help Desk</a>

To add a subject for the email message, you would add? subject= after the email
address.

For example:

<a href=“mailto:[email protected]?subject=Email Assistance”>Email Help

Desk</a>

1.6 HTML Images

The Image Tag and the “Src” Attribute

The <img> tag is an empty tag, which means that it contains attributes only and it
has no closing tag. To display an image on a page, you need to use the src attribute.
Src stands for “source”. The value of the src attribute is the URL of the image you
want to display on your page.

The syntax of defining an image:

<imgsrc= “ location of the image” height=<numeric value> width= <numeric value>

border = <numeric value> align= <left, right,….>
Image Dimensions

When you have an image, the browser usually figures out how big the image is all by
itself. If you put in the image dimensions in pixels however, the browser simply
reserves a space for the image, then loads the rest of the page. Once the entire
page is loaded it can go back and fill in the images. Without dimensions, when it runs
into an image, the browser has to pause loading the page, load the image, then
continue loading the page.

The chef image would then be:

<imgsrc=“graphics/chef.gif” width=“130” height=“101” alt=“Smiling Happy Chef”>

Image Alignment

You can set the alignment of an image also to make your webpage more
presentable.

There are five types of alignment which can be applied on the image are as follows:
 Left
 Right
 Top
 Bottom
 Middle

Note: By default, images are left aligned. The image with the top and bottom
alignment will be set at the top of the line or bottom of the line.

Few examples are given for your reference rest you can try it by changing the
alignment in the html code.

Open the file mypage2.html in your text editor and add code highlighted in bold:

Try It!
(An image with “middle” alignment.)
 <html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align="center">My First Web page</h1>
<p>Welcome to my first webpage. I am writing this page using a text editor
and plain
old html.</p>
<p>By learning html, I’ll be able to create web pages like a pro....<br>
which I am of course.
<!-- Who would have guessed how easy this would be :) -->
<imgsrc="C:\Users\Desktop
Desktop\graphics\chef.jpg"
align="middle" width=130 h
height=101 alt="Smiling Happy Chef">
<p align="center">This is my Chef</p>
</body>
</html>

OUTPUT:

Try It!

(An image with “bottom” alignment.)

 <html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align="center">My First Web page</h1>
<p>Welcome
>Welcome to my first webpage. I am writing this page using a text editor and plain
old html.</p>
<p>By learning html, I’ll be able to create web pages like a programmer<br>
which I am of course.
<!-- Who would have guessed how easy this would be :) -->
<imgsrc="C:\Users\IPWS\\Desktop\graphics\chef.jpg"
chef.jpg" align="bottom" width=130
height=101 alt="Smiling Happy Chef">
<p align="center"> This is my Chef. </p>
</body>
</html>

OUTPUT

You can try inserting images of different types such as PNG, JPEG, GIF, BMP etc.
with all the attributes of img tag.

1.7 Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr>
tag),and each row is divided into data cells (with the <td> tag). The letters td stands
fortable data, which is the content of a data cell. A data cell can contain text, images,
lists,paragraphs, forms, horizontal rules, tables, etc.

Tables and the Border Attribute

To display a table with borders, you will use the border attribute.

1.8 Inserting Audio and Video

There are various tag, which help us in enhancing the appearance of a web page. Using
<audio> and <video> tags, you will be able to incorporate Multimedia in your webpage and
can make your webpage more alive.

Inserting Audio

To insert an audio<AUDIO>tag is used in a web page.It can be used for any file format like .
MP3 e,.ogg, .wav etc.

Syntax:

<Audio controls src= “ filename ” ></Audio>

The attributes of <audio> tag are as follows:

Src : Specifies the URL of the audio file.

Controls : Display the controls on the web page.
Autoplay : Place the audio file automatically when the webpage is loaded.
Loop : Replays the audio file.
Try it!
<HTML>
<Head>
<Title> Adding audioclip </title>
</Head>
<Body>
This is my first musical web page.
<Audio controlssrc= “ C:\Users\Desktop\PPT WORK\InspirationalPop.mp3” >
Check your browser setting </Audio>
</Body>
</ HTML>

Inserting Video

To insert video in the HTML pages video tag is used it supports file formats like .MP4,
.webm, .ogg etc.

Syntax

<video controls src = “ filename “ width = height= autoplay></video>

The attributes of <video> Tag are as follows:

Src : Specifies the URL of the video file.

Controls : Displays the controls on the web page
Autoplay : The place the audio file automatically when the webpage is loaded
Height : Specifies the height of the video player displayed
Width : Specifies the width of the video player displayed

Try it!

<HTML>
<Head>
<Title> My first page </Title>
</Head>

<Body>
Check the video clip.
<video controls src = “ videofilename.mp4 “ width = 720 height= 540 autoplay>
please check your browser settings </video>
</Body>
</HTML>

Note:

If the browser does not support audio in video tag, then any text placed between
<audio></audio> and <video></video> tag will be displayed in the browser.
1.8 Frames

Frames allows multiple HTML documents to be displayed as independent Windows within

one browser window. It divides into multiple Windows in which each window displays the
separate HTML page or web page.

Syntax

<iframe src= “ “ height=200 width = 200 style= “ border- width: ;border- style:
, Border- color: “></iframe>

Example

<HTML>

<Head>

<Title> Frame page </title>

<Body>

<h1>WebPage Containing Three Frames </h1>

<iframe src="file:///C:/Users/Desktop/frame1.html" height= 400 width=400 ></iframe>

<iframe src="file:///C:/Users/Desktop/FORM1.HTML" height=400 width =400 style="border-

width:5px; border-style:solid, Border-color:green"></iframe>

<iframe src="file:///C:/Users/Desktop/frame1.html" border:none></iframe>

</Body>

</HTML>

Output:
1.9 Forms

It is a container element started by <FORM>tag and ended by</FORM>tag. It is

used to create a form on a web page.

Syntax:

<FORM NAME="FormName" ACTION = "URL" METHOD =

"method">

Attributes of FORM element are discussed below:

1. NAME -This specifies the name of the form. But this name will not be displayed on
the
form. As there can be more than one FORMs in an HTML document, a name is
required to differentiate one form from another. The NAME attribute is
optional if there is only one FORM on the web page.

NAME = "FormName"

2. ACTION - This specifies the URL where the form-data is sent when the form is
submitted.This URL is also called the destination of the form.

ACTION = "URL"

3. METHOD - This specifies how the form-data is submitted. Form-data can be

submitted
using the methods get or post. With METHOD = "get", the form-data is
submitted as URL variables, and with METHOD = "post", the form-data is
submitted as HTTP post.
METHOD = "method"

INPUT element - It is an empty element specified by <INPUT> tag. It is used to

provide an input field in a form where the user can enter the data. An input field may
be a text field, a checkbox, a radio button, a button, and more. INPUT element is
always used within the FORM element. Thus, INPUT element defines an object on
the FORM which can receive user input.

Syntax:

<INPUT TYPE = “FIELD TYPE” NAME = “FIELD NAME” VALUE = “FIELD TEXT”>
Attributes of INPUT element are discussed below:

Attribute:

TYPE

Use: The TYPE attribute determines the field type of input field to be provided in the
form.

Field type can be one of the following:

TEXT, PASSWORD, RADIO, CHECKBOX, SUBMIT, RESET, BUTTON,

IMAGE, HIDDEN, FILE.

Syntax:TYPE = "FieldType"

NAME

Use: Specifies the name of the field. This name does not appear on the FORM. It is
required for the identification/ differentiation as there can be more than one fields in a single
FORM.

Syntax: NAME = "FieldName"

VALUE

Use: Specifies the text to be displayed on the field.

Syntax: VALUE = "FieldText"

We will now discuss different field types (values of TYPE attribute) relevant to our syllabus.

1. FieldType: TEXT

Use: It provides a single line text input field where the user can enter text. Additional

Attributes:SIZE = "n" - Sets the visible size of the text field to n characters.
MAXLENGTH = "n" - Set the maximum number of characters that
can be input in the text field to n.
2. FieldType: PASSWORD

Use: It provides a single line text input field where the user can enter password.
A password field is different from a text field because a text field displays
whatever characters are entered by the user whereas a password field shows
one dot for each character input by the user. This is to prevent others from seeing the
password.

Additional Attributes: Same as those for TEXT field.

3. FieldType: RADIO

Use: It provides a radio button on the form. More than one radio buttons can have
 (and in general have) the same name. All the radio buttons that have the same name
constitute a radio group. Only one radio button of a group can be selected at one
time. That is, from a group of radio buttons, if the user selects a button, all the other
buttons in the set are deselected. When a form is submitted, selected radio button's
value (specified by the VALUE attribute) is submitted to the destination.

Additional Attributes:

CHECKED - Indicates that the radio button is selected, which can be deselected
when another choice is made. At one time, only one radio button in a radio group can
be specified as CHECKED.

4. FieldType: CHECKBOX

Use: It provides a check box on the form. With checkboxes, we can give the users a
list of items to choose from. The user can choose more than one items from the list.
We can make a group of checkboxes, by giving them the same name. When a form
is submitted, selected cheboxes' values (specified by the
VALUE attribute) are submitted to the destination.

Additional Attributes:

CHECKED - Indicates that the checkbox is to be displayed with a tick mark to show
selection. This attribute is optional.

5. FieldType: SUBMIT

Use: This provides a button on the form. When this button is clicked, the form is
submitted to the destination.

6. FieldType: RESET

Use: This provides a button on the form. When this button is clicked, the input fields
on the form are reset to their default state.

Example:

TRY IT!
 <html>

<head><title> My page </title></Head><body>

<H1><U>ADMISSSION ENQUIRY FORM </u></h1>

<Form method=Post action= "maoilto:[email protected]"><b>Name </b><Input

type=Text name="st_name"><br>

<b>Gender </b>

<Input type=Radio name="gender" value="Male"> Male

<Input type=Radio name="gender" value="Female"> Female <Br>

<b>E- mail </B><Input type=Text Name ="email"><br>

SELECT SUBJECTS: <BR>

<Input type=CHECKBOX value="Science"> Science <Input type=CHECKBOX

value="Commerce"> Commerce <Input type=CHECKBOX value="Arts"> Arts

<Br>

Comment<Br>

<TextAREA name="comment" Rows=5 cols=50></TEXTAREA><br>

<INPUT Type=Submit Value ="Send">

<INPUT Type=Reset Value ="Clear">

</Form>

</body>

</html>

Points to Remember:

Exercise

1: What are the pre requisites to learn the basics of HTML?

2: How do you define a HTML file?
3: What is the tag for making a comment?
4: What dose <cite> and <pre> tag mean?
5: What is the syntax to define background color in HTML?
6: Explain the procedure to view source code in Mozilla Firefox, Google Chrome
&Internet Explorer?
7: List out any three popular web browsers?
8: What do you mean by an anchor tag?
9: How do you insert an image and create a table in the HTML page?
10: What is the tag to insert a single line break?
11: What does W3C stand for?
12: Fill in the blanks:

(a) Word processors like ................. should be avoided.

(b) The ................. tells the web browser how to display the page
(c) ................. is the tag used for defining the Sample computer code
(d) Acronym for HTTP ................
(e) Acronym for HTML ................

Practical Work:
1. Create a website for “Tour and Travel” company.
2. Create a website on the topic – “Digital India”.
3. Create a website on famous Sports of the World.
Note: A website must contain at least 4-5 webpages.
Section-2: Basics About CSS

Cascading Style Sheets (CSS) describe how documents are presented on screens,
in print, or perhaps how they are pronounced. W3C has actively promoted the use of
style sheets on the Web since the Consortium was founded in 1994. Cascading
Style Sheets (CSS) provide easy and effective alternatives to specify various
attributes for the HTML tags. Using CSS, you can specify a number of style
properties for a given HTML element. Each property has a name and a value,
separated by a colon (:). Each property declaration is separated by a semi-colon (;).

2.1 Advantages of CSS

 CSS saves time – You can write CSS once and then reuse same sheet in
multipleHTML pages. You can define a style for each HTML element and
apply it to asmany Web pages as you want.

 Pages load faster – If you are using CSS, you do not need to write HTMLtag
attributes every time. Just write one CSS rule of a tag and apply to all the
occurrences of that tag. So less code means faster download times.

 Easy maintenance – To make a global change, simply change the style, and
all elements in all the web pages will be updated automatically.

 Superior styles to HTML – CSS has a much wider array of attributes than
HTML so you can give far better look to your HTML page in comparison of
HTML attributes.

 Multiple Device Compatibility – Style sheets allow content to be optimized

for more than one type of device. By using the same HTML document,
different versions of a website can be presented for handheld devices such as
PDAs and cell phones or for printing.

 Global web standards – Now HTML attributes are being deprecated and it is
being recommended to use CSS. So it’s a good idea to start using CSS in all
the HTML pages to make them compatible to future browsers.

Example First let’s consider an example of HTML document which makes use of
<font> tag and associated attributes to specify text color and font size:

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color=“green”size=“5”>Hello, world!</font></p>
</body>
</html>
We can re-write above example with the help of Style Sheet as follows:

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style=“color:green;font-size:24px;”>Hello, World!</p>
</body>
</html>

This will produce following result:

Hello, World!

You can use CSS in three ways in your HTML document:

 External Style Sheet – Define style sheet rules in a separate .css file and
then include that file in your HTML document using HTML <link> tag.

 Internal Style Sheet – Define style sheet rules in header section of the HTML
document using <style> tag.

 Inline Style Sheet – Define style sheet rules directly along with the HTML
elements using style attribute. Let’s see all the three cases one by one with
the help of suitable examples.

2.2 External Style Sheet

If you need to use your style sheet to various pages, then it’s always recommended
todefine a common style sheet in a separate file. A cascading style sheet file will
have extension as css and it will be included in HTML files using <link> tag.

Example
Consider we define a style sheet file style.css which has following rules:
 .red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}

Here we defined three CSS rules which will be applicable to three different classes
defined for the HTML tags. I suggest you should not bother about how these rules
arebeing defined because you will learn them while studying CSS.

<!DOCTYPE html>
<html>
<head>
<title>HTML External
CSS</title>
<link rel=“stylesheet”
type=“text/css”href=“/html/stml
/style.css”>
/head>
<body>
<p class=“red”>This is red</p>
<p class=“thick”>This is
thick</p>
<p class=“green”>This is
green<p>
<p class=“thick green”>This is
thick and green</p>
</body>
</html>

This will produce following result:

2.3 Internal Style Sheet

If you want to apply Style Sheet rules to a single document only then you can include
those rules in header section of the HTML document using <style> tag.
Rules defined in internal style sheet override the rules defined in an external CSS
file.
Example
Let’s re-write above example once again, but here we will write style sheet rules in
the same HTML document using <style> tag:

<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type=“text/css”>
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
</style>
</head>
<body>
<p class=“red”>This is red</p>
<p class=“thick”>This is thick</p>
<p class=“green”>This is green</p>
<p class=“thick green”>This is thick and green</p>
</body>
</html>

This will produce following result:

This is red

This is thick
This is green

This is thick and green

2.4 Inline Style Sheet

You can apply style sheet rules directly to any HTML element using style attribute of
the relevant tag. This should be done only when you are interested to make a
particular change in any HTML element only.

Rules defined inline with the element overrides the rules defined in an external CSS
fileas well as the rules defined in <style> element.

Example

Let’s re-write above example once again, but here we will write style sheet rules
alongwith the HTML elements using style attribute of those elements.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style=“color:red;”>This is red</p>
<p style=“font-size:20px;”>This is thick</p>
<p style=“color:green;”>This is green</p>
<p style=“color:green;font-size:20px;”>This is thick and green</p>
</body>
</html>

This will produce following result:

This is red
This is thick
This is green
This is thick and green

CSS Properties: border, box, font, margin, padding

CSS classes

CSS Syntax – Selectors

A CSS comprises of style rules that are interpreted by the browser and then applied
to the corresponding elements in your document. A style rule is made of three parts:
 Selector: A selector is an HTML tag at which style will be applied. This could
be any tag like <h1> or <table> etc.
  Property: A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could be color or
border etc.
 Value: Values are assigned to properties. For example, color property can
have value either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows:

selector { property: value }

Example: You can define a table border as follows:

table{ border :1px solid #C00; }

Here table is a selector and border are a property and given value 1px solid #C00 is
the value of that property. You can define selectors in various simple ways based on
your comfort. Let me put these selectors one by one.

The Type Selectors

This is the same selector we have seen above. Again one more example to give a
colorto all level 1 headings:

h1 {
color: #36CFFF;
}

The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply
matches the name of any element type :

{
color: #000000;
}

This rule renders the content of every element in our document in black.

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies inside
a particular element. As given in the following example, style rule will apply to <em>
element only when it lies inside <ul> tag.

ul em {
color: #000000;
}
The Class Selectors

You can define style rules based on the class attribute of the elements. All the
elements having that class will be formatted according to the defined rule.

.black {
color: #000000;
}

This rule renders the content in black for every element with class attribute set to
blackin our document. You can make it a bit more particular.

For example:

h1.black {
color: #000000;}

The ID Selectors
You can define style rules based on the id attribute of the elements. All the elements
having that id will be formatted according to the defined rule.

#black {
color: #000000;
}

The Child Selectors

You have seen descendant selectors. There is one more type of selectors which is
very similar to descendants but have different functionality. Consider the following
example:

body > p {
color: #000000;
}

This rule will render all the paragraphs in black if they are direct child of <body>
element.
Other paragraphs put inside other elements like <div> or <td> etc. would not have
any effect of this rule.

The Attribute Selectors

You can also apply styles to HTML elements with particular attributes. The style rule
below will match all input elements that has a type attribute with a value of text:

input[type=“text”]{
color: #000000;
}
The advantage to this method is that the <input type=“submit” /> element is un
affected, and the color is applied only to the desired text fields.

There are following rules applied to attribute selector.

 p[lang] - Selects all paragraph elements with a lang attribute.

 p[lang=“fr”] - Selects all paragraph elements whose lang attribute has a value
ofexactly “fr”.

 p[lang =“fr”] - Selects all paragraph elements whose lang attribute contains
the word“fr”.

 p[lang=“en”] - Selects all paragraph elements whose lang attribute contains

valuesthat are exactly

 “en”, or begin with “en-”.

Multiple Style Rules

You may need to define multiple style rules for a single element. You can define
these rules to combine multiple properties and corresponding values into a single
block as defined in the following example:

h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

Here all the properties and value pairs are separated by a semi colon (;). You can
keep them in a single line or multiple lines. For better readability we keep them into
separate lines.

Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a
comma as given in the following example:

h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
This define style rule will be applicable to h1, h2 and h3 element as well. The order
of the list is irrelevant. All the elements in the selector will have the corresponding
declaration sapplied to them.

CSS Rules Overriding

We have discussed four ways to include style sheet rules in a HTML document. Here
is the rule to override any Style Sheet Rule.

 Any inline style sheet takes highest priority. So, it will override any rule
defined in<style>...</style> tags or rules defined in any external style sheet
file.

 Any rule defined in <style>...</style>tags will override rules defined in any

external style sheet file.

 Any rule defined in external style sheet file takes lowest priority and rules
defined in this file will be applied only when above two rules are not
applicable.

CSS Comments

Many a times you may need to put additional comments in your style sheet blocks.
So, it is very easy to comment any part in style sheet. You simply put your comments
inside /*this is a comment in style sheet*/.

You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++
programming languages.

Example

/* This is an external style sheet file */

h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
/* end of style rules. */
CSS Colors - Hex Codes

A hexadecimal is a 6 digit representation of a color. The first two digits(RR)

represent a red value, the next two are represent a green value(GG), and the last
are represent the blue value(BB).

A hexadecimal value can be taken from any graphics software like Adobe
Photoshop, Jasc Paintshop Pro or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign #. Following are
the examples to use Hexadecimal notation.

CSS Colours - Short Hex Codes

This is a shorter form of the six

six-digit
digit notation. In this format, each digit is replicated to
arrive at an equivalent six-digit
digit value; For example: #6A7 becomes #66AA77.
A hexadecimal value can be taken from any graphics software like Adobe
Photoshop, Jasc Paintshop Pro or even using Advanced Paint Brush. Each
hexadecimal code will be preceded by a pound or hash sign #.

CSS Colours - RGB Values

This colourr value is specified using the RGB(( ) property. This property takes three
values, one each for red, green, and blue. The value can be an integer between 0
and 255 or a percentage.
Note: All the browsers do not support RGB() () property of color so it is recommended
not to use it. Following is the example to show few colors using RGB values.

Set the background image

Following is the example which demonstrates how to set the background image for
an element.

<table style=“background
style=“background-image:url(/https/www.scribd.com/images/pattern1.gif);”>
<tr><td>
This
Set thetable has background
background image set.
image position
</td></tr>
</table>is the example which demonstrates how to set the background image
Following
position 100 pixels away from the left side.

<table style=“background
style=“background-image:url(/https/www.scribd.com/images/pattern1.gif);
background-position:100px;”>
position:100px;”>
<tr><td>
Background image positioned 100 pixels away from the left.
</td></tr>
</table>
Set the background attachment

Background attachment determines whether a background image is fixed or scrolls

with the rest of the page.
Following is the example which demonstrates how to set the fixed background
image.

<p style=“background-image:url(/https/www.scribd.com/images/pattern1.gif);
background-attachment:scroll;”>
This parapgraph has scrolling background image.
</p>

Setting Fonts using CSS

This will teach you how to set fonts of a content available in an HTML element. You
can set following font properties of an element:
 The font-family property is used to change the face of a font.
 The font-style property is used to make a font italic or oblique.
 The font-variant property is used to create a small-caps effect.
 The font-weight property is used to increase or decrease how bold or light a
font appears.
 The font-size property is used to increase or decrease the size of a font.
 The font property is used as shorthand to specify a number of other font
properties.

Set the font family

Following is the example which demonstrates how to set the font family of an
element.
Possible value could be any font family name.

<p style=“font-family:georgia,garamond,serif;”>
This text is rendered in either georgia, garamond, or the default
serif font depending on which font you have at your system.
</p>

Set the font style

Following is the example which demonstrates how to set the font style of an element.
Possible values are normal, italic and oblique.

<p style=“font-style:italic;”>
This text will be rendered in italic style
</p>
Set the font variant

Following is the example which demonstrates how to set the font variant of an
element.

Possible values are normal and small-caps.

<p style=“font-variant:small-caps;”>
This text will be rendered as small caps
</p>

Set the font size

Following is the example which demonstrates how to set the font size of an element.
The font size property is used to control the size of fonts. Possible values could be
xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in
pixels or in %.

<p style=“font-size:20px;”>
This font size is 20 pixels
</p>
<p style=“font-size:small;”>
This font size is small
</p>
<p style=“font-size:large;”>
This font size is large
</p>

This will produce following result:

This font size is 20 pixels

This font size is small
This font size is large

Manipulating Text using CSS

This tutorial will teach you how to manipulate text using CSS properties. You can set
following text properties of an element:

 The color property is used to set the color of a text.

 The direction property is used to set the text direction.
 The letter-spacing property is used to add or subtract space between the
letters that make up a word.
 The word-spacing property is used to add or subtract space between the
words of a sentence.
  The text-align property is used to align the text of a document.
 The text-decoration property is used to underline, overline, and strikethrough
text.
 The text-transform property is used to capitalize text or convert text to
uppercase or lowercase letters.
 The white-space property is used to control the flow and formatting of text.
 the text-shadow property is used to set the text shadow around a text.

Set the Text Color

Following is the example which demonstrates how to set the text color. Possible
value could be any color name in any valid format.

<p style=“color:red;”>
This text will be written in red.
</p>

Set the text direction

Following is the example which demonstrates how to set the direction of a text.
Possible values are ltr or rtl.

<p style=“direction:rtl;”>
This text will be renedered from right to left </p>

Set the space between characters

Following is the example which demonstrates how to set the space between
characters. Possible values are normal or a number specifying space.

<p style=“letter-spacing:5px;”>
This text is having space between letters.
</p>

Set the text alignment

Following is the example which demonstrates how to align a text. Possible values
are left, right, center, justify.

<p style=“text-align:right;”>
This will be right aligned.
</p>
<p style=“text-align:center;”>
This will be center aligned.
</p>
<p style=“text-align:left;”>
This will be left aligned.
</p>
CSS – Images

Images are very important part of any Web Page. Though it is not recommended to
include lot of images but it is still important to use good images wherever it is
required.

CSS plays a good role to control image display. You can set following image
properties using CSS.

 The border property is used to set the width of an image border.

 The height property is used to set the height of an image.
 The width property is used to set the width of an image.
 The -moz-opacity
opacity property is used to set the opacity of an image.

The image border Property

The border property of an image is used to set the width of an image border. This
property can have a value in length or in %. A width of zero pixels means no border.
Here is the example:

<img style=“border:0px;” src=“/images/css.gif” />

<br />
<img style=“border:3px dashed red;” src=“/images/css.gif” />

This will produce following result:

 Points to Remember:

Exercise Question

1. Why do we use CSS? What are its basic advantages?

2. What are the ways in which you can use CSS in your HTML document?

3. What are inline style sheets?

4. How are internal style sheets used?

5. Does the use of CSS saves time?

6. How are external style sheets used?

7. State difference between inline, internal & external style sheets?

8. Why are universal and type selectors used?

9. What do we do when we have to apply style rule to a particular element only

when it lies inside a particular element?

10. Explain the id selector.

11.Can we define multiple style rules?

12. What are the rules to override any style sheet?

13. How are the color codes represented in a style sheet?

14. How do we select a background attachment?

15. Can we set the text direction? If yes then how?

16. Is RGB() property supported by all browsers?

6. Fill in the blanks:

(a) ____________ Defines style sheet rules in a separate .css file and then include

that file in your HTML document using HTML <link> tag.

(b) The ____________ property is used to create a small-caps effect

(c) A cascading style sheet file will have extension as __________ and it will be
included in HTML files using ____________ tag.

(d) Each property declaration is separated by a ______________ .

(e) The ________________ property is used to set the text shadow around a text.

(f) The text-indent property is used to indent the text of a paragraph

(g) The-moz-opacity property is used to set the ___________ of an image.

Practical Work:

1. Create a website on the topic – “Transforming Education on Digital Media”.

2. Create a website on “Heritage of India”.
3. Create a website on “Artificial Intelligence”.
Section-3: Publishing Your website or webpages
DOMAIN NAME SYSTEM
3.1 Introduction
The heart of how the Internet works is the Domain Name System (DNS), the way in
which computers can contact each other and do things such as exchange email or
display Web pages.

When Someone on (he/she Internet wants to contact a location—for example, to visit

a Web site—he or she will type in an address, such as www.education.com. The
Internet Protocol (IP) uses Internet address information and the DNS to deliver mail
and other information from computer to computer.

The Domain Name System (DNS) is the directory that maps domain names to IP
addresses. DNS is built around the hierarchical domain namespace that we dis-
cussed earlier. DNS is a distributed directory and serves as enabling infrastructure
for a single, global directory of domain names. This directory is built from
thousands of servers owned by thousands of organizations around the world.

3.2 DNS Services:

Host aliasing:

A host with complicated hostname can have one or more alias names. DNS can be
invoked by an application to obtain the canonical hostname for a supplied alias
hostname as well as the IP address of the host.

Mail server aliasing:

DNS can be invoked by a mail application to obtain the hostname for a supplied alias
hostname as well as the IP address of the host.

Load distribution i DNS is also used to perform load distribution among

replicated servers.
3.3 Types of Name Servers

Name spaces are of two types: Flat name spaces and Hierarchical Names. The
name assigned to machines must be carefully selected from a namespace with
complete control over the binding between the names and IPaddresses.

Flat name space:

The original set of machines on the Internet used flat namespaces, These
namespaces consisted of sequence of characters with no further structure. A name
is assigned to an address.

Hierarchical names:
The partitioning of a namespace must be defined in such a way that it: Supports
efficient name mapping and Guarantees autonomous control of name assignment.
Hierarchical namespaces provides a simple yet flexible naming structure. The
namespace is partitioned at the top level. Authority for names in each partition are
passed to each designated agent The names are designed in an inverted-tree
structure with the root at the top.

3.4 Hierarchy of Name Servers

Computers called name servers are responsible for keeping track of such changes
and translating them between IP address and domain addresses. Name servers also
work with the DNS to ensure that mail is delivered to the right person. They make
sure that when you type in a Web URL you are sent to the proper location. They are
responsible for properly routing all messages and traffic on the Internet.

• To distribute the information among many computers, DNS servers are

used.
Creates many domains as there are first level nodes.
• In zone, server is responsible and have some authority. The server makes
database called zone file and keeps all the information for every node under
that domain.
• A root sever is a server whose zone consists of the whole tree. A root
server
usually does not store any information about domains but delegates its
authority to other servers.
• Primary server: It stores a file about the zone for which it is an authority. It
is responsible for creating, maintaining and updating the zone file.
• Secondary server: It transfers the complete information about a zone from
another server and stores the files on its local disk. These servers neither
creates nor updates the zone files.
3.5 Domain Resolution Process

When a machine needs to resolve domain name into an IP address, it queries a

DNS server, looking to one of a few, usually local, servers for the answer The local
server may know the answer because the query regards a local machine or because
it regards a machine that the DNS server has recently looked up. If it does not, the
hierarchical structure of the name is used to arrive at an answer.
Suppose that a distant machine is looking for mww.education.com. The
machine contacts its local server, but that server does not know the answer. The
local
server contacts what is known as the root server for the top-level domain (TLD), in
this case .com. The root server docs not know' the mapping the
mww.education.com, butit does know' the addresses of every' DNS server for the
domains in its TLD. The rootServer refers the local server to the DNS server
handling www.education.com and the local server contacts the mww.education.com
DNS server, Since that server knowstheaddressformww.education.com, the address
is returned to the local server, cached, and sent to the original requestor. Of course,
domain namespaces can be more than three deepandso can the associated servers.
This process just goes on longer in those cases, but an answer is eventually
returned as long as the mapping exists and die servers are properly configured and
registered

Domain Registration Process

The Doman Name System (DNS) is used to map a name to a static IP address.
Computers use these to communicate with themselves using aa name. When a
computer requests a URL the DNS translates that name into the corresponding IP
address.
When you sign up for a Web site, one of the first things you ’il have to do is determine
a domain name for your site. Then, you register your domain name with n domain
registrar.

Domain registrars register your domain name and hook you up to the Internet by
making sure your domain name is added to a huge database of domain names that
are mapped to specific IP addresses.

The process takes place in the order as follows:

1. You visit one of the accredited registrars.

2. You use the registrar's site to check and see if the domain name you wish to use
is unclaimed. For example, if you wanted to start a Web site using the name
ebay.com, you’d find that someone is already using that domain name. Most
registrar sites maintain an easy-to-use search interface that allows you to check
if the domain you want Is in use, and helps you find alternative names If It Is
3. After you have successfully chosen a name, you submit It to the
ICANN through the registrar's site.
4. The registrar then usually’ 'parks" your site by assigning you an IP address on
one of its servers for a small tree. You can also provide an IP address, which
your hosting company should have given you when you signed up with them.
5. Have your credit card handy, because next you’ll be asked to pay for the
service provided by the registrar
6. The registrar then maps the domain name to either the IP address you
provided or the IP address on its server that it used to park your domain
name. The mapping is then is forwarded to ICANN and it goes into a massive
database containing all the world’s IP addresses and corresponding domain
names.

Some Web hosting companies actually take care of this process for you, so you
may be able to skip these steps. Some registrars also act as hosting services, and
will try to sell you a hosting plan. Keep in mind that you’re under no obligation to host
your site using the services of the registrar you use to register your site.

PUBLISHING THE WEBSITES

The Final phase of creating a web site is publishing your pages. To place your pages
on the web you need a web server. Commonly called hosts, web servers allow you
to transfer and store files including HTML documents, images and multimedia files.
Unless you have your own web server, you need to find a server to host your pages.

Some examples of webhost are:

http://www.godaddy.com/
http://www.1and1.com
http://www.virtualempre.com

But of course there are many more, Make sure you choose a webhost which
supports FTP, which makes it much easier to publish your pages from web builder.

 Page to publish

In this section of the publish window you can select which pages to publish.

 Entire website

Publishes all pages of the website (except the pages which have enabled ‘Don’t
publish this page’ in page properties)

 Select Page Only

Publish the select page, click ‘select’ to specify the page to be published. Note
that you can also select a folder.

 Select page and sub pages

Publish the select page and all of its subpages (if any).
The ‘FILES’ selection specifies which files will be published.

 Publish all files

All files of the selected page(s) will be published

 Publish HTML files only

Select this option if you do not want to upload images or other components along
with the HTML file.

 Publish changed files only

Select this option if you want to publish the files that were changed since the last
time you’ve published your web site.
What to do in case of publishing errors?

 Make sure your ftp address (host), username and password is valid.
 Use ‘Test connection’ to verify the specified data.
 Make sure you the remote folder is correct! Consult the documentation of your
host for this value!
 Use of ‘Explore’ button to browser to the remote folder.
 If the pages don’t show up on your website you’ve probably specified the
wrong remote folder.
 Does your firewall block the FTP connection of WYSIWYG Web Builder?
 Enable ‘Use passive mode for transfers’
 If the transfer takes a long time then you’ve probably used very large images.
More details.
 Increase the connection timeout to 120 seconds or longer (Menu(Menu->Tools-
>Options->publish)
 If you website doesn’t look to be updated, select ‘Refresh’ in your browser
multiple times!
 Enable the publish log in Menu
Menu->Tools->Options->Publish
>Publish and make
mak note of
the error message.
 For a list of all possible error codes and their descriptions go
here : http://support.microsoft.com/default.aspx?scid=kb;EN
http://support.microsoft.com/default.aspx?scid=kb;EN-US;193625
US;193625
 May be there is a temporary problem with your host? Check if you can
connect using a FTP client.
 99.99% of all publishing errors are the result of an invalid configuration,
please verify the specified Data!
 Points to Remember:

Exercise Questions
 Q. 1: What do you understand by website and webpage publishing?
 Q. 2: Explain webpage, website and webserver?
 Q. 3: In how many ways you can publish your web pages?
 Q. 4: How many types of files you can publish on webserver?
 Q. 5: State five errors which are commonly occur during publishing of any
website?

Further Readings
 Book-1 Kogent Learning Solutions, “HTML BLACK BOOK,” 4th Edition,
DreamtechPress, 2012
 Book-2 Elisabeth R, Eric F, “Eric f, “Head first HTML and CSS,” 2nd Edition,
O’REILLY ,2013
 Website 1: www.w3schools.com
 Website 2: www.thenewboston.com
 Website 3: www.godaddv.com
 Website 4: www.freeserver.com
 UNIT-3
MULTIMEDIA DESIGN – GIMP
SESSION 1: MULTIMEDIA DESIGN TOOLS

SESSION 2 : STARTING WITH GIMP

SESSION 3 : GIMP TOOL BOX

SESSION 4 : FILTERS

SESSION 5: WORKING WITH LAYERS

 UNIT-3 MULTIMEDIA DESIGN – GIMP

Session 1: Multimedia Design Tools

The term multimedia is a combination of two terms multi (meaning more than one) and media
(meaning a mode of transmitting information). Thus, multimedia deals with using more than one
concurrent medium, in an integrated manner. It may include the following forms of media:

● Text
● Graphics and Images
● Audio
● Video
● Animation
Multimedia design is an art that integrates multiple forms of media for designing various
applications such as video games, educational software, navigation systems, entertainment, and
hospital information systems. Multimedia Systems encompass computer and software systems
which could easily be used in an interactive manner. Multimedia development incorporates
rendering the input to multimedia design tools for processing to achieve the final product

Figure 3.1: Multimedia Development

Attractions in using Multimedia Technology:
● Yielding Simplicity and Ease of use
● Interactive Interface
● Better Understanding of the Content
● Cost Effectiveness
● Having Fun element
In this chapter, our focus will be on learning open source multimedia design software for
manipulating and enhancing multimedia features of images.

Open source multimedia design tools are gaining importance in today’s world as not only open
source software is freely available, its source code is also freely available, and we can develop
new features to enhance its capability.

Adobe Photoshop software has been used predominantly over the years for image editing.

But now various open source tools for image editing are available. We list below a few of them
and mention the operating environments that support them against their names in parentheses:

− GIMP (Windows, Linux, OSX)

− Fotor (Windows, OSX, Android, Online)
− Fooflexer (Online)
− Snapseed (Android, iOS)
− Paint.net (Windows)
− Autodesk Pixlr (Windows, OSX, iOS, Android, Online)
− Picasa (Google’s photo manager: Windows, OSX)

GIMP is multimedia software having a variety of powerful tools for image editing and
manipulation. We will take a tour of GIMP and discuss its important features in the following
sections.

GIMP as a Multimedia Tool for Image Manipulation

GIMP is an acronym for GNU Image Manipulation Program. It is an open source software suite to
create, edit, enhance and manipulate images. GIMP is a full software suite consisting of a variety
of painting tools (like brushes, pencil and cloning), image manipulators, built- in filters for
rendering effects (like blur, distort, colorize, and transform), layers dialogue to work in layers, etc.
It is designed to support various plugins for extensions and compatibility.

By default, the image is stored in .xcf image format.

The first version of the GIMP (x0.54) was written by Peter Mattis and Spencer Kimball, students at
Berkeley, back in 1996.Gimp 1.0, an enhanced version, was released in 1998 and an official
website was established for the tool usage. It had extensive functionality for image manipulation
from its earlier versions itself.

Gimp is extensible. Nowadays, prevailing Gimp 2 series (version 2.8) is under use for image
manipulation, with enhanced interfaces and design tools. The software suite is available for
download at http://www.gimp.org/. It is supported on operating systems such as UNIX/LINUX,
Windows, and MacOSX.
Few attractive features of GIMP
● Software suite of painting and drawing tools with various brushes, a pencil, an airbrush,
cloning, etc.
● Paint tools supporting high-quality anti-aliasing.
● Multiple Layers and channels for image manipulations.
● Transformation tools including rotate, scale, shear and flip.
● A procedural database for calling internal GIMP functions from external programs such as
Script-Fu and Python-Fu.
● Advanced scripting capabilities.
● Multiple undo or redo effects on images if sufficient disk space available.
● Support for various file formats, including GIF, JPEG, PNG, TIFF, TGA, PS, PDF, PCX, BMP,
XPM, and MPEG etc.
● A variety of Selection tools, including rectangle, ellipse, intelligent scissors etc.
● Plug-ins supporting easy addition of new file formats and filters.

Installing GIMP
Installing GIMP is similar to installing any other software package. In the case of Windows, we
download the installer and execute it. In Linux environment (platforms like Ubuntu or Debian), it
could simply be installed by running the following commands in the terminal window:

sudo apt- get update

sudo apt-get install gimp

Alternatively, GIMP is also available in Ubuntu software center in Ubuntu Unity.

Installation on Windows
1. Download the Installer: It is downloadable from http://www.gimp.org/downloads/.
2. Execute the Installer: The installer is usually saved in the Downloads folder. Run the
installer.
 Figure 3.2: Execute Installer

3. Select the Language for Installation: The “Language” is selected as “English” by default.

Figure 3.3: Setting up the Language

4. Start Installation: Click on install button to initiate the process.

Figure 3.4: Download Installer

5. Follow the Trailing Prompts for Installation: The sequences of prompts are executed.

Figure 3.5: Installation Progress

6. Finish Installation: GIMP will be launched just after the click on Finish button.

Figure 3.6: Finishing the Installation

Installation on Linux
1. Run the command apt-get on the terminal.

2. Continue with installation

3. The desired packages are unpacked

 The GIMP is also available in UBUNTU Software Center and is directly accessible

Session 2: STARTING WITH GIMP

GIMP may be launched in two ways:

i) clicking on a GIMP icon (GUI) or

ii) by typing gimp command on command line interface.

It detects and uses the system language by default and configures various directories and
options on start-up. The configuration information is stored in .gimp-version directory for
initialization, recovery or backup. It supports a variety of image file formats. GIMP startup
screen appears as follows:

Figure 3.7: Starting GIMP

1. Basic Image/File Handling: Opening, Creation, Cropping, Resizing and Saving Ima
Images

The first thing we are going to do is to open an image file in GIMP. For opening a file we need
to go to:

File Menu Open or press Ctrl + O (Figure 3.8).

Figure 3.8: Opening a file

Then a dialogue box with Open Image will be displayed. The folders are displayed on the left
hand side of the dialogue box and image fil1e to be opened, is selected. A preview will appear
on the right- hand side of the dialogue box (Figure 3.9)
 Figure 3.9: Open Image Dialogue

To search an image file manually, “Pencil” icon in the “Open Image” box is clicked and a user may
type the location of a file in the “Location” column and then opens the image file (Figure 3.10).

Figure 3.10: Open Images Manually

If an image is too big, such that it does not fit to file window, then window may be resized by
dragging the mouse. After resizing the window, “Zoom to Fit Window” may be chosen from the
“View” menu, and the image will be resized to fit the window (Figure 3.11).
Figure: 3.11 Zoom Settings

Figure 3.12: Resizing Images

Image could also be resized using “Scale Image” in Image menu (Figure 3.13)

Figure 6.13: Scaling Image

The image may be cropped using “crop” tool in Toolbar (Transform tools) or by going to the
“Image”” menu and choosing “Crop
“ to content.”

The creation of the new file is also one of the initial steps in GIMP which helps users to create a
new image file by setting up height and width properties.

The new image file could be created as follows:

File Menu New or by pressing Ctrl+N (Figure 3.14 a).

A dialogue box named “Create a New Image” gets popped up

 Figure : 3.14 (a)

The dialogue “Create a New Image” displays the default image size (Figure 3.14 b). A user can
alter the size either manually or through the up and down arrow keys. A user can also set the
type/nature of picture file size by clicking pixels.

“Template” could be used to pre-define

pre the picture size and the “Advanced Options” which
supports additional features like “Resolution, Color space, Fill with and Comment”.

After setting these features and finally we can click the Ok button to create a new image box.

Now the new file has been created. A sample new file created has been shown below
 Figure: 3.14(b)

Finally, the file is saved by choosing “Save” or “Save as” in “File” menu.

On clicking the “Save” button, modifications are done on the current image will be saved
whereas on clicking “Save as”, a dialogue box pops up to indicate , where a user wants to save
file, maybe with a different extension or on a different path (Figure 3.15).

Figure.3.15: Saving an Image

 GIMP Interface and Drawing Tools
GIMP is a powerful tool for image processing and its interface has the following main panels
docked with variety of functionalities or dialogue boxes (Figure 3.16):

i) The Toolbox: A comprehensive set of icons/buttons for selecting tools for image manipulation.
ii) Tool Options:: The docked window renders
renders options or features available for currently selected tool.
iii) An Image Manipulating Window: An image to be modified in GIMP; is opened in the image
manipulating window. Many images could be opened in parallel for processing.
ows multiple images to be stacked over each other in layers for manipulations.
iv) Layers Dialog: This allows
sub layers known as Channels. Mostly layers consist of RGB (Red,
Layers can be decomposed into sub-layers
Green, and Blue) channels.
Paths are arcs or curves, and the path tool is powerful for performing the selection or to paint on an
image in the desired area with the help of arc curves.
v) Brushes/Patterns/Gradients: The docked dialogue for selecting brushes, patterns, or gradients allows
us to colorize an image or fill it with some pattern. Brushes are pixmaps used for painting,
erasing, copying, smudging, lightening or darkening etc. Patterns are small images used forf filling
regions of original images or for changing the background of an image. Gradients are set of colors
arranged in linear ordering and control the way colors could be filled or modified within the
image.

Figure 3.16: GIMP Interface

 FIGURE : 3.17 : Patterns and Gradients

GIMP is flexible in arranging dialogues which are actually the windows containing options for a tool or
are dedicated to special purpose tasks.
The persistent dialogues (Tool Options, Layers/Channels, Brushes/ Patterns/ Gradients) are dockable.
non persistent dialogues such as an Image-
The docks are thus containers for persistent dialogues. The non-persistent Image
Window, Preferences dialogues, etc. are not the part of docks.
Session 3 : GIMP TOOL BOX
GIMP has an encircling tool suite, to perform a variety of image manipulations, selection and
enhancement operations.

FIGURE 3.18 : GIMP TOOLBOX PRESET

The tool presets are shown in Figure 3.18

The tools are organized into following main categories in GIMP:

a. Selection Tools

b. Paint Tools

c. Transform Tools

d. Color Tools

e. Others

The above-mentioned
mentioned tools are described as follows:

Selection Tool
i) Introduction
 Selection tools form an essential part of GIMP. Often a user wants to operate on a portion of
an image instead of using the whole image. Selection tools (Figure 3.19), support the
functionality of selecting portions/regions from the current layer of an image, for
manipulation.
nipulation. Once a selection is made, anything the user does will apply only to the
area that the selection covers. The selection tools may be accessed in different ways
via:
− Clicking tool icon in the Toolbox
− Tool Menu Bar (Tools Selection Tools Rectangle Select/or any other select)
− Shortcut keyboard key

The selection area is drawn with left click mouse button, stretching downwards.
The selection could be deleted by clicking anywhere outside the selection area.

Figure 3.19: GIMP Selection Tool

The selection tools are listed in Table below:

ICON TOOL NAME SHORTCUT DESCRIPTION

KEY
Rectangle R It selects square or rectangular regions

Ellipse E It selects circular or elliptical regions.

Free (Lasso) F It draws hand drawn region with free

free-form (polygon)
selections.
Foreground (none) It selects a region containing foreground objects.
 Fuzzy (Magic Wand) U It selects continuous regions on the basis of colors.

By Color Shift + O It selects all regions of similar color in an image

Scissors I It selects regions using shapes with intelligent edge

fitting.
Table 3.1

Amongst the above-listed

listed tools in Table , “Rectangle”,
“ Free Select
“Ellipse”, “Free Select”, “Foreground and
Scissors”” are area selection tools whereas ““Fuzzy Select” and “By By Color Select” are color
selection tools.

Tool Options
The most commonly associated features with selection tools are modes, antialiasing and feather
edges

Figure : 3.20 : ToolOptions

Mode governs the interaction of new selection with the already existing selection. Various modes
available with Selection tools are Replace, Add, Subtract, and Intersection
 Figure 3.21 Mode options

− Replace mode will cause existing selection is replaced by new selection.

− Add mode will cause new selection to be added to existing selection
− Subtract mode will remove the new selection from existing selection.
− Intersection mode will overlap the new selection with existing selection i.e. final selection
contains the area common to both the selections.

The behavior of selection tools could be altered, if a user presses and holds down the Ctrl, Shift,
and/or Alt keys. These keys and/or combinations of these keys are known as key modifiers that
could be associated with a mode.

Table 3.2 Key identifiers with Modes in Selection Tools

Antialiasing makes the edge boundaries of the selected image smoother. Various selection tools
create sharp selections with selected pixels inside the boundary and unselected pixels outside the
boundary.

An option on Feather Edges makes the boundary of selection blur, faded or fuzzy. It also
smoothens the sharp image selections with outside graduated ones like antialiasing. But it works
by setting the radial distance from the selection edge.
 Figure : 3.22: Antialiasing/ Feathering

Feathering edges of an image helps to integrate the image into the background or to tone down a
harsh outline of the image for merging it with the background. This feature is also useful in
cutting and pasting operations.

Using Selection Tools

The steps to execute selection tools on images are listed below:

Step 1 : Click “File” then “Open” to open an image from the computer drive.

Step 2 : Click on the selection tool icon in GIMP’s toolbox. Alternatively, the selection tool could
be chosen by selecting “Tools” from the program’s menu, and thenthen clicking the desired “Selection
tools”. The chosen tool is dragged over the current image to select the desired area.

Step 3 : Once the area has been selected, a boundary (rectangle/ellipse/marquee/ etc.) is visible
around the selected portion.

Step 4 : Selected portion is used for further image manipulations and other operations.

Rectangle Select
The rectangle is the most commonly used tool that creates a rectangular or square selection
select rectangular regions of the
frames with small squares in each corner around the image to select
active layer.
The steps for rectangular selection are listed below:

1. Select the tool, click on its tool icon or use the Keyboard shortcut “R”.

2. Draw the rectangle/square selection by placing the Rectangle Selection tool icon at the top left
corner of where you want to initiate your selection and then dragging over the area to be
covered.

3. When the tool is released the rectangular outline is replaced by a marquee i.e. the little dash
lines moves around the active selection.

4. Once drawn, the Target icon changes to the “Move” icon indicated by the four directional
arrows. The Move icon allows the selection to be moved anywhere.

5. If we click outside the marquee area, the selection will disappear

Figure: 3.23: Rectangle Selection

The selection will be constrained to a “square” if a user holds down the Shift key while drawing
the selection. It will draw from the center outwards if Alt Key is pressed while selection.

The selection boundary can be expanded or contracted through the corner are as indicated by
small rectangles/squares. Dragging the corner area upwards or outwards (diagonally) expands
the selection and dragging down or inwards (diagonally) contracts the selection.

An illustration of rectangle selection is shown in Figure 3.24. As the yoga figure in the image has
been selected, any action like manipulation/enhancement on the image will only apply to the
selected portion of the house.

For example, if we use a Brush tool or adjust colors, it would only affect
 Figure 3.24: Rectangle Tool

A few of the other options available with this tool are listed below:

Rounded Corners:: It is used to make the corners of the current selection, round. A slider appears
for adjusting the radius of the selection on enabling this option.

Expand from Center:: The point where the selection is started by clicking the mouse button is
used as the center of the image.

Fixed:: This enables the option for constraining the shape of image selection.

Aspect Ratio:: This enables a user to resize the selection by changing or inverting the default
aspect ratio of 1:1(square).

Width:: It fixes the width of the selected image.

Height:: It fixes the height of the selected image.

Size:: It fixes both width and height.

position by setting the horizontal and vertical coordinates.

Position:: It adjusts selected position

Highlight:: It enables the selected area to be emphasized. If the Highlight box is checked, the
image will darken except for the selection area. This enables us to see exactly what is selected.

Guides: It creates a compositional grid. It has a variety of guides to make selection easier in the
form of center lines, rules of thirds, the rule of fifths, golden lines, diagonal lines, no guides etc. it
is highly useful in cropping an image.
Auto Shrink: It intelligently makes an image to shrink to fit the nearest rectangular selected
shape available over the layers.

Sample Merged: It helps Auto Shrink to extract pixel information directly from the visible display
of an image.

Ellipse Select
The Ellipse Selection tool is used to select circular or elliptical regions by rendering circular or
elliptical boundary on an image.

It functions majorly like Rectangle Select but only the shape of selection is different. To select the
tool, we click either on its icon or press the keyboard shortcut “E”. We draw out the
elliptical/circular selection by placing the Ellipse Selection Tool icon at the top left corner of
where we need to begin (can be any corner) and drag over the area to be covered as shown in
Figure. 3.25 When the tool is released the elliptical/circular outline is replaced by the marquee.

Figure : 3.25

It has mainly the same options as those in Rectangle select discussed above in section.

Free Select
The Free Select (Lasso) tool uses mouse clicking and dragging in the image window to trace the
selection shape. The action is completed with the release of the mouse button and the selection
is shown by Marching Ants ((Figure 3.26).

It works by choosing tool icon for Free Select, or by using the Keyboard shortcut “F”.

It functions in two modes: Straight Line mode or Free Drawing mode as listed in Table
Straight Line Free Drawing
1. Click to create a starting control 1. Click to create a starting point,
point (represented by a yellow but keep the mouse click (left)
circle) and release the mouse button pressed to start drawing the
button. line. A yellow circle will appear
indicating the first starting control
point
2. Move the mouse downward 2. Keep the mouse button pressed and
along the image to be selected trace the path of selecting the portion
and the line follows the mouse of an image.
movement (Don’t press the
mouse click button down as by
doing this we will go into the
Free Drawing mode).
3. Click to set another point 3. Keep the mouse button pressed and
indicated by the yellow circle to trace the path of selecting the portion
change direction and move of an image.
further around the selection
4. The process is continued until 4. The line will turn into the selection
we return to the first point. boundary.
5. Click back on the first point. 5. Press ENTER key to complete the
selection at any time.
6. The line segments will turn into
the selection boundary
7. Press ENTER key to complete
the selection at any time.

Table 3.3: Steps for Free Selection

 Figure 3.26: Free Selections (Lasso)

The main advantage of Lasso is that it can be used to select arbitrarily number of complex
objects. The disadvantage is that it is difficult to use this tool for precision work as it is dependent
on mouse clicks (which cannot be released in between of any selection). The predominant
options available with this tool are antialiasing and feather edges.

Intelligent Scissors
Intelligent Scissors selects a part of an image automatically by high contrast or differences in
colors, with constant-valued color contours. It is inspired by the features of Lasso and path tools.
The region to be selected is surrounded by boundary created by joining the nodes or anchor
points clicked by mouse at the edges.

This tool works in the following manner.

1. Click and select Intelligent Scissors tool icon or use the Keyboard shortcut “I”.

2. Point and click at various points around the edge of the input image.

3. As the anchor points are marked on the edges with this point and click technique, the tool
automatically draws the selection line around the edges that it detects.

4. Press Enter outside the boundary.

5. The selection marquee is created.

The advantage that this tool has for detecting edges is that as we point and click, it automatically
redraws the selection line around the edges for tracing. Hence, we can edit the current selection
line by just adding or repositioning the control points.
Also, keeping the anchor points close will aid in more accurate boundary detection for an image.
This tool also supports the option Interactive boundary, besides antialiasing and feather edges.

Figure 3.27 : Selection using Intelligent Scissors

Foreground Select
It works on selection by extracting foreground from the current image. This tool works better
when the foreground and background are highly contrasting in color saturation. It is basically a
combination of two different tools:

Lasso tool: used to select a foreground area (similar to the Free Select tool)

Paintbrush tool: used to paint over selection to indicate the foreground color

The tool works as follows:

1. The lasso tool is used to draw around an area that user wants to select.

2. After selection, the image goes dark.

3. Then the paintbrush tool is used to paint a brushstroke over the foreground area so that the
tool can differentiate the foreground colors from the background colors.

4. Once it determines the boundary difference between foreground and background colors, a
“mask” i.e. a bluish marker is placed over the foreground area to mark it.

5. Pressing ENTER key converts the mask to a selection marquee.

The steps are indicative in Figure 3.28.

Besides mode, antialiasing and feather edges, it has the following tool option settings:

− Contiguous: To select a contiguous area of color strokes.

 − Interactive refinement: To handle settings for the brush
− Smoothing : To control the smoothness of selection
− Preview color : To do the background color selection.
− Color Sensitivity : To set the color sensitivity of the selected region.

Step1 : Step2: Step 3:

Step 4: Step 5:

Figure : 3.28 Foreground Select Tool

Fuzzy Select
Fuzzy Select is a color based tool. Fuzzy selection (also called ‘magic wand’) is used for selecting
areas in an image with the similar color component (Figure 3.29). The functionality of this tool is
based on examining the RGB color components of the pixels that it clicks on. It is very important
to pick the starting point correctly.

To make a selection with the Fuzzy Select tool,

1. We first have to click on an image at a point that is the color you want to select.

2. The pixels immediately surrounding the selected pixel and falling within the threshold of
similarity will be included in the selection.

3. The size of the selection could be adjusted by holding the mouse click button down and
dragging downwards or to the right-hand side to increase the size or dragging upwards or to the
left-hand side to decrease it.

This tool has the following additional option-suite:

Select transparent areas : To select transparent pixels within the set threshold.

Threshold : It determines the basic range of colors. Increasing the threshold (either by clicking on
the number in a box or by dragging the blue slider), increases the range of colors to be selected.
Most of the color variations in the image will be selected if a threshold is too high. The maximum
value is 255.

u Select by : To select the color component for calculating the similarity. It has following
available basic options:

− Composite : the default setting

− Red : focuses on the selection of red color.
− Green : focuses on the selection of green color.
− Blue : focuses on the selection of blue color.
− Hue : focuses on a specific color
− Saturation : focuses on the purity of colors
− Value : focuses on the light/dark values of colors

Figure 3.29 : Fuzzy Select

By Color Select
The selection by color also considers all the pixels with similar color component, but regardless of
where they are located in the image. The similar pixels automatically get selected, even if they
are trapped by other colors, unlike fuzzy tool. As illustrated in Figure 3.30, the blue
blu pixels are
selected in the whole image. It has the same tool options as that of fuzzy select.
 Figure 3.30: Color Selection Tool

PAINT TOOLS
A paint tool is a comprehensive suite consisting of 13 basic paint features as shown in Figure 3.31:

Figure 3.31 : Paint Tools

The paint tools could also be selected by clicking an icon in the toolbox or by selecting a tool from
the Paint Tool tab. Shortcut keys may also be used. The functionalities of these tools are listed in
Table Paint Tools . The Paint tools share the same basic brushes, and the same options for
choosing colors, either from the basic palette or from a gradient. The Paint tools support a variety
of modes for painting.

Table 3.4: Paint tools

Tool Icon Tool Name Shortcut Description

Key
BUCKET FILL SHIFT+B It fills an area with a selected color or
pattern.

GRADIENT TOOL G It fills an area with a gradient

PENCIL N It paints lines with hard -edges; that is,

the pixels are not anti-aliased

PAINTBRUSH P It paints lines with soft- or fuzzy edges;

that is, the pixels are anti-aliased
and/or feathered.
ERASER SHIFT+ E It erases pixels of an image from the
current layer
Airbrush A It is a paint tool with variable pressure.

Ink K It paints anti-aliased lines with a

simulation of a nib.
MY PAINT BRUSH Y It allows you to create
fuzzy brush strokes over existing
images or a blank virtual canvas.
Clone C It copies patterns from one part of an
image to another to make a clone
Heal H It hides image irregularities and
corrects the defects.
Perspective Clone It clones from an image source after
applying the perspective
transformation.
BLUR /SHARPEN SHIFT+U It blurs or sharpens an image.
 SMUDGE S It smears and sprays pixels in the
direction of a “push”.
DODGE/BURN SHIFT +D It lightens or darkens an image’s
shadows, mid tones, or highlights

Tool Options
The most common tool options available in paint tools are as follows:

- Mode : The Mode drop-down list provides various application modes such as
Dissolve, Hue, Behind, Soft Light, and Hard Light, supporting a variety of special
effects. The Mode option is suitable for tools that aid in adding color to the image:
the Pencil, Paintbrush, Airbrush, Ink, and Clone tools. The option is usually grayed out for
rest of the paint tools.
- Opacity : The Opacity option is responsible for setting the opacity of the brush stroke to
be applied and hence controls the strength for brush operations in paint tools. The tool
creates a transparent layer above the active layer and acts on that layer for operations.
- Brush : GIMP allows a user to use various kinds of brushes for all brush tools except the
Ink tool. The Pencil, Paintbrush, and Airbrush tools support the use of colors in brushes
and rest of the tools see intensity distribution by brushes.
- Scale : The Scale option is used to modify precisely the size of the brush.
- Brush Dynamics : It majorly considers three dynamics: pressure, velocity, and random to
map brush parameters.
- Rate : This option is applicable to the Airbrush, Convolve tool, and Smudge tool, for
rendering time-based effects.
- Size : If enabled, it increases the size of an area affected by the brush.
- Color : It supports higher gradient colors and is applicable to painting tools such as pencil,
paint brush, air brush.
- Fade Out : It causes a fade out over the specified distance of a stroke and behaves
equivalently to gradually reduce the opacity along the trajectory of the stroke.
- Apply Jitter : It controls the spacing in brush stroking to make lines continual or jittery on
shaking of brush strokes.
- Incremental : This is selected if a user does not want to enhance color strokes while
reducing opacity settings.
- Color from Gradient: This allows the usage of gradient color in brush strokes.
- Hard Edge : This places colors in a rough manner when it is applied to a selected portion
of an image.
 - Source : This determines the source of the image which needs to be copied for cloning.
- Alignment : This determines the relation between brush position and the source image
that needs to be cloned.

The varieties of brushes (for paint tool), with following setting attributes, are available in GIMP.

- Brush Size and Shape : Selecting brush shape and size.

- Spacing : By default, it is set to 20.0.
- Brush Editor : Editing the properties of customized brushes (Aspect Ratio, Angel, Radius
etc.)
- New Brush : Creates a new customized brush.
- Duplicate Brush : Create a duplicate of selected brush.
- Delete Brush : Deletes the selected brush.
- Refresh Brushes : Refreshes the view in brushes dialogue.

Key Modifiers
The Key Modifiers associated with Paint tools are:

Ctrl : The ctrl key has a special effect on every brush tool. It acts as “color picker” mode and sets
the foreground to the active layer’s color for the Pencil, Paintbrush, Airbrush, Ink Tool, and Eraser
tools. It switches between the reference point of copy and the actual image in the clone painting
tool. For the Convolve tool, the ctrl key toggles blur and sharpen mode and it toggles between
dodging and burning for the Dodge/Burn tool.

Shift : Shift key renders an effect of placing the tool into straight line mode especially with brush
tools. First the starting point is chosen and clicked, and then Shift key is pressed continuously to
create line segments.

Ctrl + shift : It renders the tool into constrained straight line mode to create perfect horizontal,
vertical or diagonal lines over the image objects. It can be used to constrain the angle between
two successive lines.

The steps to execute paint tools on images are listed below:

Step 1 : Click on the paint tool icon in GIMP’s toolbox. Alternatively, the paint tool could be
chosen by selecting “Tools” from the program’s menu, and then clicking the desired “Paint tool”.

Step 2 : To create a canvas, choose “File” and then “New” from the GIMP menu. One can also
paint over an existing image. Click “File” then “Open” to open an image from the computer drive.
Hold the left mouse button and drag the paint tool icon on the GIMP canvas. A small circle will
occur above your mouse cursor over the GIMP canvas to create strokes of tools like pencil, brush,
eraser, etc.

Step 3 : The color for your paint tool could be chosen by clicking on the color box, which is
located just under the tool icons on GIMP’s toolbox. The color is black by default but can be
changed by clicking any of the square color samples or by adjusting the gradient sliders.

Step 4 : The paint tool options could be adjusted to customize pencil, brush, eraser, etc. These
options appear on the lower half of the GIMP toolbox when the paint tool is selected. Slide the
“Opacity” slider to determine the translucency of the painting brush. One can adjust parameters
like size, aspect ratio and angle for various paint tools. Click on the icon next to “Brush” and
choose a brush shape and size that alters the shape of the stroke of paint tools on the canvas.
Several other options could be set according to the chosen paint tool. For example; “Apply Jitter”
is used to change the stroke of brushes from a continuous line to a broken-up, scattered line.

Figure 3.32: Setting up canvas for using Paint Tools in GIMP

A sample image is pictured in Figure 35. We will apply few of the paint tools on sample image and
the results are demonstrated in Figure 35 (a-d)

Sample Image for applying Paint Tools

 Figure : 3.33(a)

Figure 3.33 (b): Illustration of Bucket Tool

Figure 3.33(c) Illustration of Pencil Tool

Figure 3.33(d): Illustration of Eraser Tool

 Figure 3.33(e): Illustration of Dodge Tool

Smudging and Stamping for images

Smudge Tool

Smudge tool , is used for smearing color pixels on a selected layer. Smudging is used to soften
color transitions, make the image blurry, hide objects, and to create textures. smudge When a
smudge tool is applied on an image, it selects the available color and merges it with the other
colors present on the image.

Figure : 3.34 Smudge Tool in Toolbox

Tool Options The options available with Smudge tools are (Figure 3.34): Mode (disabled), Opacity,
Brush, Scale, Brush Dynamics, Rate, Fade out, Apply Jitter and Hard Edge

How to use the Tool To use smudge tool, firstly a brush type is chosen from the toolbox options
and then the mouse cursor is clicked and dragged over the selected image portion

Figure 3.35: After applying smudge tool

Clone Tool
Clone tool (Figure 3.36) is used for copying the pixels from selected portions of an image to a
destination area, the user wants to cover, or for reproducing the selected portions of an image. It
uses the current brush to copy from a source image. It has a variety of applications and the
famous one is to repair digital pictures or images by painting them with cloned pixels from the
selected area

Tool Options - The options available with Smudge tools are: Mode (disabled), Opacity, Brush,
Scale, Brush Dynamics, Rate, Fade out, Apply Jitter, Hard Edge, Source and Alignment

How to use the Tool

Cloning is done via following steps:

i) “Clone” tool from the toolbox menu is selected. Its icon is shaped like a traditional
stamp.
ii) One of the brush types is selected from brush Menus in GIMP.
iii) Ctrl key is pressed while using mouse to click and select the area of the source image
for pixel extraction.
 iv) The selected pixels are applied by left click of a mouse in the destination areas.
v) The process is repeated if necessary. For example select a sta
starr brush; Press the ctrl key
is over a red tile region of the HUT appearing in the image. The selected tile colour
pixels are stamped on the walls of HUT by left clicking of the mouse.

Stamping may occur across the layers as shown in Figure3.36 . The imag
image e of parrot could also be
cloned onto an image having a tree with the house. The brush size is set according to the size of a
selection of parrot. Ctrl key is pressed over the image of parrot and it is released with a left click
of the mouse, on the image having a tree (to clone parrot on the tree).

An interesting feature here is to explore and set up different opacity or transparency levels while
cloning. If we change the opacity level, the clone stamp also changes the brush stroke intensity
over the image.e. One cannot clone from a fully transparent source. If a user tries to clone from a
partially transparent source, the effect is weighted by the opacity of the source as shown in
Figure 3.3.

Assuming 100 % opacity and hard brush, as tool options:

1. Cloning
ing translucent black onto white produces gray
2. Cloning translucent white onto black produces gray
3. Cloning translucent black onto black produces black
4. Cloning translucent white onto white produces white
 Figure 3.36 cloning and Stamping

Transform Tools
Transform tools tend to modify the presentation of an image or a particular element in an image.
There are 9 such tools (Figure 3.37), each having a variety of features and tool options.

Figure 3.37 Transform tools in GIMP

The commonly used options available in transform tools are as follows in Table 3.5

Tool Icon and Shortcut Key Description

It is used to align or arrange layers and/or
other image objects.
It is used to move layers and selections.
It is used to crop the image.
It rotates the selected image.
It scales or adjusts the size of the selected
image or portion of the image
It shifts part of the image in some direction.
Changes the perspective view of the current
image.
It is a combination of scaling, rotating,
skewing, perspective
It is used for corrections of scaling
It flips between layers and image selections.
It deforms a selection with a cage.
It is a GEGL based brush-like tool which
replaces the old iWarp filter and works
directly on the image,
Table 3.5: GIMP Transform Tool

GIMP offers three buttons which let the user select portion of an image on which transform tool
will be applied.

⮚ If the first button is activated, then the tool works on the active layer. If no
selection exists in this layer, the whole layer will be transformed.

⮚ If the second button is activated, then the tool works on the selection
contour only (the whole layer contour if no selection).
⮚ If the third button is activated, the tool works on the path only.

Align tool
Relative To : It allows modification of the edges w.r.t. the left, right, center, top, bottom and
middle of the selected target by applying Selection option. The rest of the options are used to
align the layer, path, and channel.
Distribute : It distributes the left, right, center edges, top, bottom and middle edges of the
chosen target.

Offset : It sets the desired value to align the image.

MoveTool
Move : It allows the image to be transformed or moved.

Tool Toggle : It allows switching from one option to another.

Crop
Current layer only : It is utilized only for the current layer.

Allow Growing : It enables to expand beyond borders.

Expand from center : It makes the picked portion bigger.

Fixed : It may alter the predefined shape of the rectangle.

Position : It acts as the placement of the selection.

Size : It lists the length/size of the selection.

Highlight : It highlights the marked selection, by darkening everything that lies in the
background of the image.

Guides : It chooses the types of guides available within the marked portion.

Auto Shrink : It minimizes the size of the selection.

Rotate
Direction : It enables turning an image either in the Normal or Corrective manner.

1) Normal Rotates the image in the forward position.

2) Corrective Rotates the image in the opposite direction i.e. towards backward,
against the option set in the box.

Interpolation : It aids in curving the image and choosing the quality of transformation. It
takes samples from a grid of pixels from known image areas, and then fits the curve.

Clipping : It clips the transformed image to the original image.

 Preview : It helps a user to see the preview of an image. The subsidiary options available
are Outline, Image, and Grid. The Image and Grid can be used together in an image and
viewed or else just the outline/image option can be seen separately.

Opacity : It makes the background of an image to be unclear or vague when the image is
filled with color.

Grid lines : We set the Grid option in the preview to enable this option. This option lists
the Grids which are placed on the image while making changes.

15 Degrees : This is a default option to turn an image by 15 degrees

Using Crop Transformation

− Go to Transform Tools and select Crop Tool.
− Click the left mouse button on the image, the cursor turns into plus symbol and now
select the required portion of the image.
− Press Enter

You will observe the area not selected is removed and only selected area remains in the window.

Figure 3.38: Illustration of Crop Tool

Unified Transform Tool
Select the image to be skewed , scaled as shown in the figure3.39:

Figure 3.39 : Unified Transform Tool

Rotate Transform tool : illustration shown below:

Figure 3.40: illustration of Rotate Tool

An example of applying transformation with “Scale”, “Shear” etc. options is illustrated in Figure

Figure 3.41 : to Illustrate Scale Tool

Figure 3.42 : Illustration of Shear Tool

Change the perspective/View of an image

The Perspective of an image can be modified to either forward or backward direction. By default,
the direction is set to be the forward direction.

1. Select Perspective Tool from Transform Tools.

2. On clicking any portion of the image, the selection outline is displayed. A plus sign
appears. Click it and drag the outline to change the borders of the outline.
 3. After altering the outline, just click the Transform button in the “Perspective” box.
4. Image is transformed and new Perspective matrix is displayed.

Figure 3.43: Illustration of Perspective

Handle Transformation Tool

This tool allows you to apply moving, rotating, shearing, perspective and scaling corrections using
handles placed on canvas. There are four handles and one can use 1 to 4 handles. The effect
depends on the number of handles.

The tool acts on a selection (if there is no selection, on the whole layer). The active handle is
bigger than the others. When the mouse pointer is on a handle, it goes with a small icon that
represents the active action.

When you click and drag a handle, a transformation is applied, and the other handles stay at their
place:
 Figure 3.44: To illuistrate ‘Handle Tool’

The Cage Transformation Tool

It allows selecting an area of an image, just like a Free Select Lasso tool with the help of anch
anchor
cage like structure around the image and when it is closed,
points. The anchor points create a cage-like
one can use it to transform/deform an image by dragging the points in the desired shape of
deformation. The image appears in a deformed manner after pressing “Enter” key.

Figure 3.45: To Illustrate use of cage tool

Color Tools
The color tools are used to manipulate colors of images in several ways. They are listed in
Table 8

Figure 3.46 Color Tools

Color Menu:

Color Menu offers a number of options to change the colour settings of an image.

Color Balance

It modifies and maintains the color balance of the current image by adjusting color levels of cyan,
magenta, yellow and ranges of red, green and blue.

Color Temperature

It can be used to correct the bluish cast in overcast photos, or even (to some extent) the red cast
in photos taken under incandescent light with the camera set to daylight.

Hue – Chroma : It is used to adjust the Hue, Chrome and light

Figure 3.47 Hue-Saturation:
Saturation: It adjusts hue, saturation, and lightness of the current image.

Figure 3.48 to illustrate Hue Saturation

Saturation : is used to increase colour pixels in the image.

Exposure : It is used to edit the blackness and brightness of an image as shown below :
 Figure 3.49 to illustrate Exposure

Colorize Tool : The Colorize tool renders the active layer or selection into a greyscale image seen
through a colored glass.

Figure 3.50 to illustrate Colorize effect

Threshold : Threshold transforms the image into a black and white image.

Levels : It adjusts the intensity range w.r.t. the image in every channel.
Curves : It modifies the color, brightness, contrast or transparency of the image.

Posterize : It tends to reduce the number of colors.

Desaturate : It converts all color pixels to gray shades.

Dither : It is used to reduce the number of colours in the image by reducing the levels per
channels of colours.

Figure 3.51: Illustration of Dither Tool

Similarly, other options under Color Menu may be explore.

Colors of images could also be manipulated from Colors pallet. Some more options like Color to
Alpha that converts specific color to transparency, Maximize RGB (Reduces image to Red, Green
and Blue composition), Info, Map, and Filer Pack are also available in Colors Menu for changing
color composition.

Path tool for Drawing

It is used to create paths which can be edited and may be shifted anywhere in the file. The tool
options
ptions with path tool are listed in Figure 49.
 Figure 3.52: Path Tool

A step by step procedure to create a polygon using the path tool is as follows (Figure 6.50):

i) Set Design and Polygonal options in the toolbox.

ii) Draw the path lines for polygon shape with the rider.
iii) Use any of the two options available to create a path: Selection from path or Stroke path.
iv) Save the file.

Figure 3.53: Using Path Tool in GIMP

Other tools
The other miscellaneous tools in GIMP are listed as:

Color Picker: The Color Picker Tool is used to select a color from an image opened on the screen,
by clicking on the particular color of the image. Both the foreground and background color can be
selected by this tool.
Zoom : The Zoom Tool enables the user to expand or compress the entire portion or the selected
part of an image. A user can simply click the Plus & Minus button to increase and decrease the
image.

Measure : It calculates the distance, angle, height, and width of the selected portion of the
image. It is used to see the measurement information of the selected part of the image.

Text: It is used to create or edit text layer over images.

Creating and Editing Images Now that, we have studied the basics of the Tool Box, let’s take a
tour of Image Menu that forms part of GIMP interface.

Figure 3.54: Image Dialogue

Image menu supports various operations for image manipulations as listed in Figure 51. We may
create a new image or open an existing image for manipulation which has been discussed till
now.

Creating Images in GIMP Let’s explore how to create an image in GIMP. We create a sample
image of the rectangular window giving a view of moon and stars. For creating images, we need
to use File Menu and Edit Menu. A step by step procedure for creating a sample image is
illustrated below

i) Open File Tab

ii) Choose and click on “New” option.
iii) A new image dialog window will open. A user can click on “Create” tab if the source of
image creation is known, for example, clipboard, webpage, camera, buttons, and logos
iv) Let’s create an image by applying rectangular selection manually.

Figure 3.55: Rectangle tools to draw image

v) Draw a thick line around the selection using Edit Stroke Selection
 Figure 3.56: Using Stroke Style

vi) Use paint tool brushes to draw stars and circles effect

Figure 3.57: Drawing Stars in Selected Window with Paint tool in GIMP

Save the image after drawing stars and circles.

 Figure 3.58: Saving the created image in GIMP

vii) Save the created image.

viii) The image so created is saved in the desired folder and may be opened for further
processing.

The above-discussed procedure is one only one of different ways in which an image could be
created in GIMP. File Menu plays an important role for handling images such as opening an image
file, exporting images, setting page, saving a file, printing, and closing files.

Another sample for creating clouds in the sky is demonstrated below:

i) Open a new File to create an image

ii) Select a blue gradient to fill the background.
 Figure 3.59: Selecting and applying a gradient

iii) Use Dodge tool to draw the clouds and smudge tool may be used to give the little hazy
appearance.

Figure 3.60: Drawing Clouds in GIMP

Let’s now create a sample smiley face in GIMP

i) Create a new File
ii) Create a face outline by using “Eclipse” as a selection tool.
 Figure 3.61 Ellipse

iii) Stroke the eclipse boundary (Edit Stroke Selection).

iv) Make eyes and nose of smiley with a paint brush as shown below

Figure 3.62 Ellipse

v) Make mouth with path tool (Tools->
(Tools Path)
vi) Stroke the made path ( Edit Stroke Path)

Figure 3.63 Image of face

Editing Images
The commonly used functionalities related to image editing are cut, copy, paste, foreground,
background color, pattern, and stroke selection as shown in Figure3.64
 Figure 3.64: Image edit tools

Cut, Copy & Paste

● Open Gimp Image Window
● Select a portion in the image using rectangle/eclipse/free select
● Choose “Cut or Copy” option, to cut or copy the image
● Click Edit Paste [Paste simply pastes the image. The Paste Into option pastes the image
over the existing image and pasted image may be moved later. The Paste as option
renders four more options (New Image, New Layer, New Brush, and New Pattern), to
paste the image in various styles.]

Foreground Color
It fills the image with the default foreground color. A user may select any part of an image and fill
it with the foreground color by following the steps given below:

● Open Gimp Image Window

 ● Select a portion in the image using rectangle/eclipse/free select
● Edit Fill with FG color
● File save

Background Color
It fills the image with the default background color. A user may select any part of an image and fill
it with the background color.

● Open Gimp Image Window

● Select a portion in the image using rectangle/eclipse/free select
● Edit Fill with BG color
● File save

Fill with Pattern

It fills the image with any of the patterns available in GIMP as shown below in the figure:

Figure 3.65: Image Editing Patterns

A user may select any part of an image and fill it with the desired pattern by following the steps
given below:

● Open Gimp Image Window

● Select a portion in the image using rectangle/eclipse/free select
 ● Edit Fill with pattern
● File save

Stroke Selection
It aids in striking the selected portion of the image. The steps are as follows:

● Select a portion in the image using rectangle/eclipse/free select

● Edit Stroke selection and Save File.

The Antialiasing option softens the curved strokes drawn over an image and makes it smoother.

Figure 3.66: Stroke Style Dialog window

Stroke with Paint Tool

It aids in striking the selected portion of the image using the available paint tools.

The steps are as follows:

● Select a portion in the image using rectangle/eclipse/free select

● Edit Stroke with Paint tool
● Save File.
Preferences
Preferences tab in GIMP allows adjustment features like configuring keyboard shortcuts, enabling
previews, maintaining interfaces, calibrating monitors, editing window appearances, and doing
color management. It supports the following options:

i) Customize Environment: It enables a user to modify and set the amount of system
memory allocated for various purposes.
ii) User Interface: It enables a user to set the layer or channel previews and keyboard
shortcuts in GIMP.
iii) Change theme: It enables a user to select a theme which determines the appearance of
GIMP.
iv) Modify Help System: It helps a user to modify help feature of GIMP.
v) Customize Tool Options: It lets a user change the way the tools function in GIMP.
vi) Customize toolbox appearance: It enables a user to modify the appearance of the
Toolbox.
vii) Customize Default Image size: It enables a user to customize the default image size. The
user can alter the default screen size in the “Default New Image” dialog box.
viii) Configure Default Image Grid: It allows altering the default properties of GIMP grid. This
feature is enabled using View Show Grid from the image menu.
ix) Change Image Window: It enables a user to change and set features related to Mouse
Pointer, Space Bar, Zoom, and Resize effects of an image.
x) Set Display Mode: It enables a user to set the display modes for customizing the visible/
transparent portion of an image.
xi) Color Management: It enables a user to modify the features of the GIMPs Color Profile.
xii) Configure Input Devices: It enables a user to manage and control the input devices
connected to your computer system.
xiii) Configure Window Management: It allows a user to customize the appearance of various
windows in GIMP.
xiv) Folder Options: It enables a user to change and set new location/path for two main
folders utilized by GIMP to store the temporary files.
Session 4: FILTERS
Applying Filters
Gimp has various powerful graphical features and may render diversified effects or textures to
images.

A filter tool (Filters) in GIMP is one such special plug in feature that may modify the image
plug-in
appearance on the current layer by running
algorithms. These algorithms support activities like
inserting lightening effects on the image, distorting an
image etc. and generate a modified image.

There is a variety of effects within filters tool as

shown in Figure 3.67

A Step by Step Procedure for applying

Filters
The steps for filter application are as follows:

i) Open GIMP and load/create an image with

objects on which you want to apply a filter.
ii) Select a portion of the image (if we want to
apply the filter on a portion of the image).
iii) Click on Filters tab and choose any filter
tool. Adjust settings.
iv) See the preview and Click OK when
satisfied.
v) Export or save the image.
.

Various Filter Tools

A set of various filters that provide special effects for active
images is illustrated as follows.

Blur Filter It provides a set of filters to make a whole image or a part of an image blurry with
various parameter settings like defining magnitude or type of blurring.

Table 3.6 Blur Effects

 Blur Effect Purpose
Blur It softens the primary focus of an image and blurs the image a little. The
stronger blur effect could be achieved by repeatedly applying blur effect
on an image or by using Gaussian Blur
Gaussian Blur It is an effective blur tool that performs in relatively short span of time
by allowing a user to vary the dimensions and magnitude of blurring. It
considers the average of all pixel values occurring in defined area of
interest in an image. It supports two methods: IIR (infinite impulsive
response for photographic/scanned images), suitable for images having
a large radius or for non-computer generated images like photographs
and RLE (Run-length coding for computer generated images), suitable
for computer-generated images or those with large areas of constant
intensity, such as logos.
Motion Blur It creates motion effects in a particular direction with Linear, Radial or
Zoom movements which could be enhanced with length (1-256) and
angle (0-360) settings
Pixelize It is known as Abraham Lincoln Effect and converts an image into an
array of solid squares. The similar concept is used many times in identity
masking. Pixel width and height of the color blocks of an image could be
set by the user.
Selective It is used to enhance the depth of an image. It doesn’t consider all the
Gaussian Blur pixel values of an image rather it applies blur effect only if the
difference between current value and value of surrounding pixels is less
than some threshold delta i.e. it sets up a threshold to blur all the pixels
similar to each other. A good example of this kind of filter is to highlight
the foreground and making background blur so that the foreground is
enhanced and highlighted. It sets Blur radius (Blur intensity) and Max
Delta (the difference between the pixel value and the surrounding ones
in the range [0-255]).
Tileable It merges, blurs, and wraps the borders of an image making it appear
Gaussian Blur like a tiling concept. It reduces edge effects. Blur vertically or
horizontally options could be set, besides radius and type of blur
regions.

The three most commonly used Blur filters are illustrated below :

Gaussian Blur
 Figure 3.68 : Image before and after applying Gaussian Blur

Circular Blur Filter : It Blurs the image in a circular motion as shown below in the figure:

Figure 3.69 : Image before and after applying Circular Blur

Pixelize Blur Filter : It simplifies image into an array of solid coloured squares/rectangles.
squares/rectangle

Figure 3.70 : Before and after applying Pixelize blur

Enhance Filter

Figure 3.71 : Enhance Filter

It is used to remove image imperfections such as noise distortion (possibly caused due to dust
particles), inappropriate sharpness, and intermixed frames. Some of the Enhance filters are
discussed below :

Antialias : It smoothens the edges by removing artifacts from an image while converting it to a
comparatively lower resolution.

Deinterlace : It removes extra and undesired image information from interlaced image frames. It
does have an option for keeping odd and even fields of image interlacing.

Despeckle : It removes small defects such as noise particles from the current image area. Median
could be set to Adaptive which works by analyzing the histogram of the surrounding region of
selected image or ‘Recursive’ which renders repeated actions for an image enhancement. Radius
size could be set to remove imperfections. There also exists an option to set Black level and
White level for brighter and darker pixels of the image.

Destripe : It removes the vertical stripes in an image, caused by poor quality scanners. It works by
adding a pattern which interferes with the image to remove strips. The strength of the filter is set
using “Width” option, available with this filter.

NL (Non-Linear) Filter: It combines Despeckle, Sharpen, and Smooth enhancement functions to

improve the appearance of focus on the entire image, not on any particular selection.
Red Eye Removal : It performs red-eye corrections. It may set threshold parameter to eliminate
the amount of red eye color.

Sharpen (UnSharp Mask): It is useful for correction of sharpness in digitized images by

accentuating edges and any kind of noise. It allows a user to set sharpness for the image and
preview it. It sharpens the image without increasing noise. It allows a user to select where
sharpening is required and with what strength via Radius, Amount, and Threshold parameters.

Distorts Filter
These filters may transform the shape of an image in several ways. Following are the Distort filter
supports in GIMP. Click on Filters and then select option Distort to apply Distort Filters.Following
is the menu for Distort :

Figure 3.72 Distort Filter Menu

ApplyLens : It renders an elliptical lens over the image.

Emboss : It simulates embossing on the image. It sets azimuth (lighting component), elevation
and depth of an image using option settings.
Engrave : It produces an engraving effect, like one found on coins. The image is simulated with
black and white horizontal lines of varying height based on the value of underlying pixels.

Lens Distortion : It allows correcting distortion effect occurred due to the camera lens

Kaliedoscope : it makes the image look like a kaliedoscope.

Mosaic : It cuts the image into various squares or polygons tiles which are slightly raised and are
joined with each other, thus giving an appearance of mosaic. It allows option setting like Tile size,
Height, Direction, Color Variation etc.

Polar Coordinates: It gives a circular or a rectangular representation of the image with all the
possible polar coordinates and intermediates.

Ripples: It displaces pixel in ripple pattern. It has various options like Edges, Orientation, and
Wrap Type.

Shift: It shifts pixels rows horizontally or vertically.

Spherize : This filter creates a kind of bubble whose size is that of the image or selection, as if the
content was wrapped around a sphere.

Value Propagate: It works on color borders by spreading pixels that differ in a specified way from
their neighboring pixels and setting mode and propagate options.

Video Degradation : It simulates distortion produced by low-resolution monitors.

Waves,Whirl and Pinch, Wind : It distorts an image with waves, whirling and pinching and wind-
blow effects

Curve Bend: It is useful for changing the shape of any layer and usually simulates by setting up
the bending curve to distort an image. The distortion is applied gradually from an image or
selection border to the other in layers. Curve bending may be controlled by available option
settings. One can adjust the top of the layer by setting upper and bottom by clicking on lower.
Mirror will give a lower curve as the mirror image of the upper curve and Swap will exchange
lower and upper curves. Reset will flatten to the original image

Emboss(legacy): This filter stamps and carves the active layer or selection, giving it relief with
bumps and hollows. Bright areas are raised and dark ones are carved.

NewsPrint: It simulates Newspaper like appearance.

Pagecurl: It curls up the image corners.

 Original Image :

Figure 3.73(a)

Emboss Engrave Lens Distortion Kaleidoscope

Mosaic Polar Coordinates Ripple Shift

Spherize Value Propagate VIDEO DEGRADATION WAVES

WHIRL AND PINCH WIND NEWSPRINT PAGECURL

Figure: 3.73(b) Showing Distort Filters

Light and Shadow Filters
These filters render various kinds of illuminations or shadows on the current image.the Light and
shadow menu is shown below:

Figure 3.74 Lights and Shadow Filter Menu

Supernova: Supernova tries to create a flare with long lines of light that originate from the
center. The predominant settings available in this filter are color, the radius of the center, the
number of rays or spokes, and a random hue setting that generates a rainbow kind of effect in
the light ray.

Lens Flare & Gradient Flare: They simulate the sun like flares in images by putting a lens like
effects in gradients

Lighting Flare: Lighting Flare is a powerful tool for creating effects similar to of studio lighting.
One application of such tool is to put spot lights to emphasize certain parts of the image. The
basic settings consider both directional lights and point lights. Other settings include precise
positioning and glowing settings, intensity settings, and bump & environment map settings.

Sparkle : It creates a sparkle-like effect by using a sequence of tiny flare effects for highlighting
areas of the current image. This tool has options for adjusting the threshold, intensity, spike
length, points, and angle direction with hue, saturation, and transparency.
 drop shadow to the current selection or to the image if there's no
DropShadow : This filter adds a drop-shadow
active selection.

Long Shadow : It is used for creating long shadows in several visual styles.

Vignette: Vignetting (/vɪnˈjɛtɪɪŋ, viːnˈ-/; French: vignette)

gnette) is a reduction of an image's brightness
or saturation toward the periphery compared to the image center. It is used to easily and
effectively create vignettes.

Drop Shadow (legacy): if Drop Shadow does not works I a system then Drop Shadow Legacy
works perfectly.

Xach –Effect:: This filter adds a subtle translucent 3D effect to the selected region or alpha
channel.

The following image is taken as input to apply the succeeding filters.

Figure 3.75(a)

The basic Lighting filter effects are illustrated in Figure:

 Figure 3.75(b) Applying Bright Star and Classic Filter

Figure 3.75(c) Applying Default and Distant Sun Gradient Flare Filters

Figure 3.75(d) Applying various GFlare Gradient Flare Filters

Figure 3.75(e) Applying various options under Filters

Lighting and Shadow effect:
Increase Glow, Shine and Polish Effect, the image appears as shown below:

Figure 3.76 Applying Glow and Shine effects

Bump Mapping: Folowing figure show Linear Bump Mapping

Figure 3.76 Applying Bump Mapping

Following is the example of Environmental Mapping :

Figure 3.77 Applying Environmenta; Mapping

Supernova Filter : Following figure shows effects on image after applying Supernova Filter
(Figure 3.78)

Figure 3.78 Applying Supernova Filter

Sparkle Filter

Figure 3.79 Applying Sparkle Filter

Noise Filters
Noise filters add noisy pixels/disturbance to the current image. “HSV noise” creates disturbances
in hue, saturation or luminosity value of an image under consideration. “Hurl” as a Noise filter,
adds random pixels to the image, making it look disturbed. “Slur” makes a ragged edge to all of
the elements in an image by sliding the pixels downwards. “Pick” interchanges few of the pixels
with neighboring ones. RGB noise behav
behaves
es as “Hurl”, besides it also allows selecting pixel colors.
The “Spread” works by swapping pixel in one place with a randomly chosen pixel from another
source considering color transitions. The Figure below demonstrates the application of various
noise filters.

CIE Inch Noise Filter

Figure 3.80 Applying CIE Inch Noise Filter

HSV Noise Filter

Figure 3.81 : Applying HUE Noise Filter

HURL Noise Filter

Figure 3.82: Applying HURL Noise Filter

Slur Noise Filter

Figure 3.83: Applying Slur Noise Filter

Pick Noise Filter

Figure 3.84: Applying Pick Noise Filter

RGB Noise Filter

Figure 3.85: Applying RGB Noise Filter

Edge Detection Filters

detecting filters for searching boundaries between various colors of an
GIMP also renders edge-detecting
image based on gradient calculus methods.

One of the famous tools is Difference of Gaussians, which can detect salient details of a
photographed figure with an important feature of controlling edge thickness.

“Edge” detects edge boundaries. “Neon” simulates the glowing boundary on edges, “Laplace”
resolution edges and “Sobel” simulates direction dependent edge detection.
detects high-resolution

Difference of Gaussians Filter

er

Figure 3.85: Applying Difference of Gaussians Filter

EDGE Filter

Figure 3.86 : Applying Edge Filter

Neon Filter

Figure 3.87 : Applying Neon Filter

Sobel Filter

Figure 3.88 : Applying Sobel Filter

Image Gradient Filter

Figure 3.89 : Applying Image Gradient Filter

Generic Filters
Generic Filters are divided into three main categories:

i) Convolution matrix: It is meant for studying a pixel value of an image by working on

mathematical algorithms. A matrix of pixels corresponding to an existing image is
enhanced with an extra matrix (kernel matrix), for the effect to be emphasized in the
existing image. This filter multiplies each pixel of an existing image with kernel matrix
image value, to produce the resultant value.
ii) Distance Map Filters: Each pixel in the image is replaced with a gray value dependent on
the distance to the nearest obstacle pixel, generally a boundary pixel. Different methods
can be used to calculate the distance.
iii) GEGL graph Filters: it does a chain of operations, with a key=value
key=va pairs after each
operation name..
iv) Dilate Filter: It detects lighter areas of an image to widen and enhance them.
v) Erode Filter: It decreases the size of lighter areas in an image.

Combine Filter
It groups different images of the same size to a single image by: i) Depth Merge : It combines two
images by comparing and joining depth map of each image. It is best suitable for black, gray or
white scale images. ii) Filmstrip : It combines layers in the image into a single image that seems
like a 35mm film strip.
Artistic Filters
These filters enhance the image with impressionist work of art such as sketches, paintings,
making cartoons etc. Figure shows the options
available under Artistic filters:

- Apply Canvas : It renders canvas texture

to an image.
- Cartoon /cartoon (legacy
(legacy): It renders
cartoon version of an image. This filter has
a functionality to adjust the “Mask” and
“Percent” sliders in the Cartoon window to
modify the photo.
- Cubism: It converts ts an image to cubic art.
Cubic art is a form of modern painting
- Glass Tile : It renders a simulation of
distortion caused by glass tiles.
- Oilify:: It renders an oil painting effect via
smearing colors
- Photocopy:: It makes the image appear as
the output of a copier machine with
overdone edges.
- Simple Linear Iterative Clustering:
Clustering his
filter creates superpixels based on k- k
means clustering. Superpixels are small
cluster of pixels that share similar
properties. Superpixels simplifies images
with a great number of pixels making
them more easy to be treated in many
domains
- Softglow:: It renders an effect that makes a
photo softly blurred and overexposed.
This filter allows the user to alter the glow
radius (i.e. effect spreads), the brightness and sharpness (level of detailing in the image)
- Waterpixel:: Superpixels based on the
watershed transformation.
- Clothify:: It renders a cloth-like
cloth texture to an
image
- GimPressionist:: It performs artistic operations on an image.
 - image (i.e. it reduces image into few basic
Predator:: It renders a predator effect to an image
colors on a dark background).
- Van Gog(LIC):: It renders an effect based on the mathematical operation of Line Integral
Convolution.
- Weave:: It renders a knitted texture like of woven bucket.

Décor Filters
This filter provides borders to the selected image. The three main filters under this category are
as follows:

Add Bevel : It adds a bevel to the current image.

Add Border It adds borders to the current image.

Round Corners It makes corners of the current image smoother by curving them.

The two filters: Add Border and Round Coroners are illustrated in Figure:

Original Image :

Figure : 3.91 Applying Décor Filter

Under “Décor” there are various features filters like Coffee stain, Fuzzy Border, Old Photo,
Slide that you may like to explore/
MAP Filters
Map filters simulate 3D effects in an image by mapping the image into an object. It has the
collection of various filters listed as follows :

Figure 3.92: MAP Filter Menu

Bump Map: It renders an embossing effect.

Displace: It displaces pixels according to maps.

Fractal Trace: It transforms image with Mandelbrot fractal.

Illusion: It superimposes the altered copies of an image

Little Planet: This filter converts a panorama into a small planet. All images don't fit this filter.
The ideal image is a 360° x 180° image, also known as equirectangular image

Panorama Projection: This filter converts a 360° x 180° image, also known as equirectangular
image, into a panorama

Recursive Transform: This filter applies a transformation recursively. As in Unified Transform

tool, this filter displays a frame around the image with several kind of handles:

Paper Tile: It cuts and breaks the image into the paper tile-like structure
Tile Seamless: It makes an image seamlessly tileable.
Fractal Trace: This filter transforms the image with the Mandelbrot fractal: it maps the image to the
fractal.

Figure 3.92: Fractal Trace MAP Filter

Map Object: This filter maps a picture to an object (plane, sphere, box or cylinder)

Figure 3.93: MAP Object Filter

Tile: This filter makes several copies of the original image, in a same or reduced size, into a
bigger (new) image
 Figure 3.94: Applying Tile Filter

Render :
This class of filters behaves differently, as they may overwrite a current layer by applying the
effect from scratch. It is, therefore, safe to duplicate layer while working with these filters. It has
various filters as listed as follows:

Figure 3.94: Render Filter Menu

Fractals: It has three options

Flame: It creates cosmic recursive frames. With the Flame filter, you can create stunning,
randomly generated fractal patterns.

Figure 3.95: Applying Flame Filter

 Fractal Explorer : It creates fractals and multicolored pictures verging to chaos.

IFS Fractal : It is Iterated Function System to create organic shapes.

Noise: it has following options:

Cell Noise: Generates a cellular texture. Results don't depend on the image you opened.

Figure 3.96: Applying Cell Noise Filter

Perlin Noise: This filter generates a noise texture using the Perlin Noise algorithm. Results
don't depend on the image you opened.
Plasma : It generates colorful clouds which can be used for textures.

Simplex Noise : This filter generates a noise texture using the Simplex Noise algorithm. Results
don't depend on the image you opened.

Solid Noise : It adds random gray smoky cloud textures.

Difference Clouds : It adds Difference layer Mode in cloud-like areas.

Patterns : It renders various patterns to images from check-board, grid, jigsaw, maze, qbist, Sinus, CML
explorer and diffraction patterns.

Circuit : It superimposes image with traces of circuit boards like pattern..

Gfig : It renders geometric shapes and scales.

Lava : It fills the image with lava effects.

Line Nova: It uses foreground color to generate rays from the center, spreading in an outward direction.

Sphere Designer : It adds sphere like texture to the current image.

Spyrogimp : It adds Spiro-graph curves to the current image.

Web Filters
The web filters support the use of images in Web pages. They are mainly of three kinds:

i. “Image Map”, which runs a javascript engine and allows the user to quickly divide the
image and creates a hyperlink kind of area; where a user can click and reach the
various links,
ii. “Semi-Flatten” renders semitransparent levels with the background color.
iii. “Slice” generates tiled table of the current image for use in Web pages.

Animation
Animation filter renders a sequence of images, with timing information attached to each frame of
the image. The GIMP considers each layer in an image as an animation frame. It supports the
conversion of layered images to Indexed format and outputs as GIF files. It has the following
emphasizing effects:

Blend : It creates an intermediate layer to blend two or more image frames over the background.

Rippling : It applies Ripple effect to the current image to create a multi-layer effect.

Spinning Globe : It creates an animation via spinning sphere effect.

Waves: It creates an animation via an effect which appears as if the stone was thrown on the
image. One can choose the number of frames required for animation. The amplitude and
wavelength for the animation could be adjusted.

Optimize Difference & GIF: They help in reducing the size of animation via optimization (reducing
the size of layers by saving only the changes made with time in layers instead of saving again the
whole image).

When applying animation is finished, one will see a still image of the effect, in the image window.
But to view the animated effect, FILTERS/ANIMATION and PLAYBACK option may be selected.

The steps to make a sample wave animation in GIMP are listed below:

i) Open an image file in GIMP.

ii) Under the FILTERS menu, select ANIMATION and WAVES to open the waves control
panel. A user can choose a number of frames for the animation.
iii) Adjust the amplitude and wavelength for the animation which may change the nature
of the wave.
 iv) The program will begin rendering on click of an OK button. When it is finished a user
can see a still image of the effect (GIF).
v) To view the animation, choose FILTERS/ANIMATION and PLAYBACK
vi) The text could be added and its color, font and others factor could be adjusted.
vii) The image is now the way we want it, the text being in the proper place for the final
frame.
viii) SAVE AS from the FILE menu is used to save the animation. The animation is saved as
GIF animation and, therefore, selects GIF from the file type menu.
ix) The animated image could be exported for future references.

Alpha to Logo
This filter is useful in the creation of logos and also in adding special effects to alpha channels
that represent the degree of transparency of the color (majorly red, green and blue channels) in
an image. Alpha channels define transparent areas. The various effects in this filter are listed
below:

3D Outline : It outlines the non-transparent areas of the active layer and adds a drop shadow.

Alien Glow : It adds an eerie glow to the image.

Alien Neon: It adds psychedelic outlines to the image.

Basic I and II :They add gradient effect, drop shadow and highlighting effects.

Blended : It adds blended shadows, highlights, and backgrounds.

Bovination : It adds cow spots to the selected regions.

Chalk :It creates a Chalk drawing effect.

Chip Away: It creates a chip wood carving effect.

Chrome : It adds a simple chrome effect to the image.

Comic Book : It adds a comic book effect to the image.

Cool Metal : It adds a metallic effect to the image.

Frosty : It adds a frost effect to the image.

Glossy : It adds a glossy effect to the image.

Glowing Hot : It adds a glowing hot metal effect to the image.

Gradient Bevel : It adds a shiny look and bevel effect to the image.

Neon :It converts the image to the neon object.

Particle Trace : It adds a trace of particles effect to the image.

Textured : It fills the image with texture and shadows.

NOTE: Alpha to Logo filter needs to be explicitly imported for Gimp2.10.12. it is present in GIMP
2.8 in Filters Menu

This filter is very useful in adding effects to text in GIMP . The steps for adding effects to text are
as follows:

i) Use “File” from the menu bar to select “New” for creating a new document or “Open”
if the text is to be added to an existing image.
ii) Click “Tools” from the menu bar and then click “Text.”
iii) Left-click the canvas to type the text. It might be customized with Tool Options.
iv) “Filters” from the menu bar is clicked to select “Alpha to Logo.”
v) Select one of the preset effects.
vi) The selected effect is customized by adjusting the parameters on the Script-Fu
window. For example, when applying the “Alien Glow” effect, a user can adjust the
glow size and color while for the “Bovination” effect one can specify the spot density
and background color.
vii) Click “OK” to apply the selected effect to your text.

Session 5 : WORKING WITH LAYERS

Layers in GIMP allow a user to work on images placed onto a stack and are accessed in layer by
layer manner. Each layer could be imagined as clear glass sheet to place an image. If an image is
modified on the current layer, it would not affect the layers above and below the current layer.
The Layer Menu is displayed the figure below .

Layers at the top of the layer stack will appear in the foreground of the image whereas layers at
the bottom make up the background.
 Figure 3.97: Layer Menu Options in GIMP

Layer Dialogue has many options available to perform various functionalities. They are listed as
follows :

A. Adding a new layer: It allows the user to add a layer by naming the layer, setting up width and
height, and choosing whether it should be transparent, white, or black in the background.

B. Create New Layer Group: It creates a new layer group and adds it to an image.

C. Move the layer up: It simply moves the layer up in the stack of layers for processing.

D. Move layer down: It moves the layer down and the layer would be placed underneath the
background layer.

E. Duplicate the layer: It creates an identical layer by duplicating.

F. Anchor the layer: It merges the image on current layer to another image on the layer below
Gimp creates a “floating layer” and this layer contains what a user wants to copy to other layers.
Pressing the anchor option will make floating layer disappear, the contents of the floating layer
are transferred to the destination layer.
G. Delete the layer: It removes the currently selected layer.

Figure 3.98 : Layer window

The dialogue also has the following features:

Mode: It allows changing appearance (Normal, Dissolve,

Dissolve, Darken, Burn etc.) of the selected layer.

Opacity: It acts a slider to change the transparency of the selected layer.

Lock: A locked layer prevents modification of the Layer’s pixels. ‘Lock Alpha channel’ feature is to keep
nd confines editing to only opaque portions of the layer.
transparent regions intact and

Layers are important to make up an image composition if a bunch of different images from different files
are combined into one image. While creating an image composition in this manner, one could ccopy and
paste images from different files into his/her file but keep them on separate layers. An image on each
re colored, etc., without affecting the images on the other layers.
layer can be scaled, moved, enhanced, re-colored,

A simple example is shown below (Figur

(Figure 3.99).

1. We have an image of a tree (File Open Image).

2. Let’s try to put up a tree house on the tree.

3. We open the image of HUT in another layer by using File Open as Layers.

4. The Selection tool is used to isolate the HUT image pixels.

5. Select
ct option Copy from the Edit Menu.
6. The selection is pasted as a Layer into the tree image (Edit Paste As New Layer).

Figure 3.99 Pasting Hut on a tree

Creating a New Layer in GIMP

The New Layer could also be added by selecting from Layer Menu.

The steps
teps are as follows (Figure 6.78 aa-b):

i) Open GIMP.
ii) Launch a new image file
iii) Click Layer New Layer or press Shift+Ctrl+N to create a new layer in an image.
iv) The new layer window opens as follows :

Figure 3.100 : New Layer Dialog Window

v) Fill in the parameters like Layer name, Color, width, height, Fill Type etc as per your
requirement.
vi) Save the file.
Besides New Layer we have the following options available with Layers in GIMP:

Figure 3.101: Layer Menu Options in Layer Window

- Edit Layer Attributes: It allows the user to enter a new name for the layer.
- New Layer from visible: It creates a new layer comprising of all the elements of the
currently visible layers, merged into one layer.
 - Duplicate/Anchor/Delete Layer: These are similar functions to their icon counterparts.
- Merge Down: It merges the currently selected layer with the next visible layer below it.
- Layer Boundary Size: Every layer has its boundary and this option adjusts the layer
dimensions making it easier for you to demarcate selected and non-selected layers.
- Layer to Image Size: It resizes the layer boundary to the image size.
- Scale Layer: It changes the size of layer content.
- Auto crop: It removes empty borders from the image layer.
- Stack: It supports selecting previous, next, top and bottom layers.
- Add Layer Mask: It adds a layer mask to the selected layer to avoid destructive changes in
editing transparency. This option lets you choose the type of mask you want to apply on
the particular layer.
- Apply/Delete Layer Mask: Apply layer mask appends the changes done in the mask to the
current layer and Delete layer removes the mask.
- Show Layer Mask: It reflects the changes done in the applied mask.
- Edit Layer Mask: It allows switching between the layer and its applied mask by either
using it or by clicking on the preview.
- Mask to Selection: It replaces the selection with the mask layer.
- Add Alpha Channel: It adds transparency to the selected layer. It is a very handy tool for
creating quick animation with the GIMP.
- Alpha to Selection: An Alpha channel encodes information about how transpar ent a
selected layer is at each pixel. This option replaces the selection with layer’s alpha
channel.
- Merge Visible Layer: It merges all the active visible parts of a layer, in the image.
- Transform: It transforms an image on selected layer by applying rotation by 90 or 180
degrees (clockwise or counterclockwise) and flipping horizontally or vertically. It also
supports arbitrary rotation.

Experimenting with few of the GIMP Layer Options

Changing the Opacity level of images placed in layers (by scrolling and clicking mouse): It will
change the transparency level of images in layers.

For example: following is the layer with 100 % opacity

 Figure 3.102 : Layer with 100 % opacity

On changing the opacity to 50 percent the layer below the selected layer starts appearing as shown below:

Figure 3.103 : Layer with Opacity reduced to 50%

On changing the opacity level to zero the layers does not appear and the layer below the selected layer appears as
shown below :

Figure 3.104 : Layer with Opacity reduced to 0%

 Adding Text over an Image layer
Text tool under Tools Menu adds a new layer automatically. Text tool adds a new layer containing the
text you just added. The text could be modified with editing properties like Font, Style and Color.
The correct layer is to be chosen before text addition and editing.

GIMP Choose the layer Tools Text Write the desired text

Figure 3.105 : Layer with Text

Resizing Layer Boundary

Select Layer ->Layer Boundary-> Size

Figure 3.106 : Layer Boundary Size Window

 Scale Layer :
Select Scale Layer to set the Layer width and height.

Figure 3.107 : Scale Layer Dialog Window

Image Rotation :
transform rotate 1800.
Select the layer in menu bar->> select transform->

Figure 3.108 : Layer Transform Dialog Window

Layer Masking
Layer masks in GIMP offer an elegant way to edit specific portions of images placed in layers
within a GIMP document. It may produce more attractive outputs by refining selections. When a
layer mask is applied to an image over the layer, the mask makes par
parts
ts of the layer transparent so
that any layers below are shown through. This could prove to be an impressive way of combining
two or more images to produce a final image which combines selected portions of each of them.

Steps for layer masking are as foll

follows:

i) Right Click on the layer needed to be masked and Click on Add Layer Mask

Figure 3.109: Mask Layer Dialog Window

ii) A mask layer option is chosen and thumbnail will appear in right layers window with the
image.
iii) Now all the operations performed on the canvas will be on the mask.
iv) Operations like selection; paint etc. could be applied to the mask.
v) After operations, setting the transparency levels will generate an effect in which layer below
epending on transparency from black to light gray gradients.
the mask is visible depending

The steps to Add Alpha Channel to a sample image are given below and their use is
demonstrated in Figure

i) The default layer i.e. background layer opens up in the editor layers dialogue.
ii) Give this layer a color, say, sea blue.
iii) Add another layer and let us call it HotEarth. Paste an image of Hot Earth on this layer.
iv) Drag the background layer above the HotEarth. It may be observed that the Earth is
hidden in the background.
v) Right-click
click on the background layer and click on Add layer Mask.
vi) A window pops up with several options. Select white (full opacity).
vii) A thumbnail mask, indicated by a white box in front of the background layer in the layers
stack, is created.
viii) Select the rectangle tool and draw a rectangle via selection on the background layer.
ix) Change the color to black from foreground and background color option at the end of the
toolbox.
x) Select edit menu and click on fill with FG (foreground) color. This will show the se
selected
portion of the tree with full transparency.
xi) Repeat the steps with some dark shade of gray color, light shade of gray color, and light
shade of white color.

Note: Black will mean full transparency and white will mean full opacity. The colors lying in
between will act as translucent according to the shades.

Make a selection and select option ADD Layer Mask option form the pop up menu.

Figure 3.110(a) : Original Image

 Figure 3.110(b) : Layer added with blue colour as foreground

Make selections / settings as desired in the dialog window:

Figure 3.110(c) : Select elliptical area to show the background layer area

Fill the selection with black colour using the bucket tool. The selected area will become
low the current layer appears as shown below :
transparent and the layer below

Figure :3.110(d) Background image being masked

Result after making multiple selections with different shades.

 Figure 3.10(e) : Applying masking with various gradient levels

Alpha Channels
Alpha channels underder Layers Menu are used to signify transparency within an image and are
created automatically while creating a new layer in GIMP. The painted black areas within the
alpha channel indicate that transparency should appear at that part of the image. The creative
crea
use of alpha channels allows partial transparency or fading effects due to the inclusion of a
gradient design in the alpha channel.

The steps to Add Alpha Channel to a sample image are given below and their use is demonstrated
in Figure 3.111:

ault Background layer will appear in the layers dock with a default color white. Change its
1) Default
color to Yellow.

2) Add another layer from layer menu new layer

3) Let us name this layer as House and paste the image of some house

4) Using the selection tool and select a portion the house.

5) Go to Layer menu Transparency Color to Alpha

6) Select white (here white means transparency)

7) The selected portion will get a yellow color similar to the background.

8) Transparency tool has various other options like removing alpha channel which will remove
this yellow color and the house will revert to its normal color.
 Figure 3.111 Appl;ying Color to Alpha

Channels in GIMP are very similar to layers; however, each layer corresponds to a particular level
in the color model of the image (RGB, HSV or CMYK). Channels dialogues can be selected in any
combination, and appear as gray shaded, if currently active.

The purpose of ‘Channels’ is to process color channels (applied to images) and maintain selection
masks. And the ‘Path’ dialogue with layers and Channels is used to manage paths of images for
creation, deletion, saving, converting to or from selections etc.

GIMP is versatile image manipulation software packed with various attractive features, many of
which are explored in this chapter. It can be explored for other aspects too for image
manipulations and making images more attractive.

Points to Remember
● GIMP is an acronym for GNU Image Manipulation Program.
● It is a freely distributed, versatile image manipula tion software package with a
manipulation
customizable interface.
● It has support for multiple platforms including Windows and Linux.
● It supports various file formats including .gif, .jpeg, .png, .tiff etc.
● It is a full suite of painting tools including a variety of brushes, pencil etc.
brushes,
● It has selection tools (Rectangle, Eclipse, free lasso, fuzzy etc., for selecting portions of an
image.
● It has transformations tools like rotate, flip, scale and shear.
● It has support for high-quality
high antialiasing.
● It also supports a varietyety of Filters for image enhancement or modification in appearance.
 ● It has full Alpha Channel Support.
● It has the functionality of Layers and Channels.
● It has the functionality of masking of images.
● It also has Plug-ins for easy addition of new file formats, filters and scripting capabilities.

Exercises

What does GIMP stand for?

What is Gimp’s default graphics file format?

List five main components of GIMP environment.

What are Dockable Dialogues in GIMP?

Create a file in GIMP and demonstrate the purpose of paint tools and selection tools.

Open an image of human eyes with red eyes effect in GIMP and perform red-eye correction.

Draw i) a smiley face ii) a house with the help of GIMP.

Apply Comic Book effect to an image in GIMP.

List the steps for cloning in GIMP.

Open an image and change the background of an image in GIMP.

Implement the following features of GIMP on an image:

i) Resize-Crop
ii) Brightness/Contrast
iii) Colorize with Hue and Saturation
iv) Zoom
v) Add a border to an image
vi) Add text to an image.
vii) Rotate an image by 90 degrees

Animate a bouncing ball in GIMP.

Apply Alpha to Logo effects on your name.

Demonstrate working of Layers in GIMP.

What are the layer masks & channels in GIMP?

Use Gimp to Create a Logo of a Company “ABC”.

How a user can you make only the part of an image, transparent in GIMP?

What is the purpose of alpha channels in GIMP?

How can we create an outline around text in GIMP?

How do we merge an image from a file to the current image in GIMP?

List steps to perform masking of images in GIMP.

What is the purpose of stamp tool in GIMP?

List the possible steps to create a polygon in GIMP.

What is the purpose of Scale image in GIMP?

How can you change the brightness of an image in GIMP?

List the filters that may aid in blurring an image in GIMP.

 UNIT - 4
Introduction to Dynamic Websites Using JavaScript

Section-1: Introduction to JavaScript

Section-2: Data Types and Variables
Section-3: Operators
Section-4: Dialog Boxes
Section-5: Decision making using if and switch
Section-6: Looping Structure

Section-1: Introduction to JavaScript

1.1 JavaScript Basics
This section deals with the basics of JavaScript covering its Uses and limitations, its
role in Web Development, syntax, semantics, Programming Structure, creating
simple web pages, writing your first JavaScript and displaying in a web browser.

Objectives
After studying this section the students will be able to:
 Use a text editor such as notepad to publish an HTML document
 Recall the HTML concepts
 Learn the history, uses and limitations
 Role in Web Development
 Understand the JavaScript syntax and structures.
 Learn, how JavaScript programs are used in a web pages including the use of
event handlers and the document object Model (DOM
 insert JavaScript into a web page using various approaches including inline
code, internal scripts and external JavaScript files
 Write and use simple JavaScript programs, that reflect common applications
of JavaScript
History
JavaScript was developed in 1995 by Brendan Eich, at Netscape, and first released
with Netscape 2 early in 1996. it was initially called LiveScript, but was renamed
JavaScriptto capitalize the popularity of sun Microsystems’s Java language. the
basic purpose ofJavaScript language was to enable web authors to design
interactive sites. JavaScriptcan interact with HTML source code, enabling web
authors to modify their sites with dynamic contents. JavaScript is supported by a
number of software companies and is an open language that anyone can use
without purchasing a license. JavaScript language is interpreted and executed by the
browser.

What is JavaScript?
JavaScript is an interpreted computer programming language.
 it was originally implemented as a part of web browser so that client-side
scripts
could interact with the user, control the browser, communicate
asynchronously, and alter the contents of the document.
 It is tightly integrated with HTML code but executed by the JavaScript
Interpreter built into the browser.
 JavaScript contains a core set of objects such as array, date, Math, and a
core set of language elements like operators, control structures, and
statements.

Standards
In November 1996, Netscape announced JavaScript to European computer
Manufacturers association (ECMA) for consideration as on industry standard and
subsequent work resulted in the standardized version named ECMAScript. ECMA is
an international standard organization for information and communication system.
 In June 1997, ECMA International published the first edition of ECMA-262
specification.
 A year later, in June 1998, some modifications were made to adapt it to the
ISO/IEC-16262 standard, and the second edition was released.
  The third edition of ecMa-262 is the version most browsers are currently using
 Fourth edition of ECMAScript standard was not released and does not exist in
practice.
 Fifth edition of the ECMAScript standard was released in December 2009.
 The current edition of ECMAScript standard is 5.1 and it was released in June
2011.
This way, JavaScript has become one of the most popular programming language
on the web. JavaScript was formalized in the ECMAScript language standard and
primarily used as a part of web browsers (client-side JavaScript). this enables
programmer to access the computational objects within a host environment.
JavaScript gained widespread success instantly/quickly as a client-side scripting
language for web pages. Microsoft introduced JavaScript support in its own web
browser, internet explorer, inversion 3.0, released in August 1996.

Features
JavaScript can handle simple as well as complex tasks that makes it a robust
language. it is also a good language for web designers & learners who wish to learn
computer programming as it supports both Object Oriented and function-oriented
concepts and to use it, you just need a browser and a text editor. Some specific
features of JavaScript are discussed below.
1. Browser Support: all browsers accept JavaScript as a scripting language
and provide integrated support for it. For example, to access flash content,
you need to install flash and plug-in in your browser. But to use JavaScript,
you don’t have to use any plug-in at all.
2. Client and Server-Side Support: JavaScript can be used on client side as
well as on server side: JavaScript has access to Document Object Model
(DOM) of the browser. You can change the structure of web pages at a
runtime. Thus, JavaScript can be used to add different effects to web pages.
on the other hand, JavaScript can be used on the server side as well.
3. Functional Programming Language: in JavaScript, a function can be
assigned to variables just like any other data types. a function can accept
another function as a parameter and can also return a function. this provides
you the ability to code in functional programming style.
 4. Support for Objects: JavaScript is an object-oriented language. However,
the way JavaScript handles objects and inheritance is a bit different from the
conventional object-oriented programming languages like c++/ Java.
JavaScript supports most of the object-oriented concepts while being simple
to learn and use.
5. Run-Time Environment: JavaScript typically relies through upon a run-time
environment (e.g., in a web browser) to provide objects and methods by which
scripts can interact with the outside world. in fact, it relies upon the
environment to provide the ability to include/import scripts (e.g. HTML<script>
elements).
6. Vendor-specific extensions: JavaScript is officially managed by Mozilla
Foundation, and new language features are added periodically. however, only
some JavaScript engines support these new features.
7. Object based features Supported by JavaScript: JavaScript supports
various features of object-based languages and JavaScript is sometimes
referred as an object-based programming language

Limitations of Static Website

1. It can not be used while changes are being made by the developer so user
has to wait until changes are not finished.
2. It has limited functionality.
3. It can cost more to upgrade.
4. It cannot be scaled e.g. if you want add some data then it might be done using
separate page.
5. It is less attractive and interactive.

Advantages of JavaScript
1. JavaScript gives HTML designers a programming tool with a very simple
syntax. Sothat the designers can put small “snippets” of code into their HTML
pages.
2. JavaScript can put dynamic text into an HTML page.
3. JavaScript can react to events. For eg. a JavaScript can be set to execute
when
 something happens, like when a page has finished loading or when a user
clicks on an HTML element.
4. JavaScript can read and change the contents of an HTML element.
5. JavaScript can be used to validate data of the form before it is submitted to a
server. It saves the server from extra processing.
6. JavaScript can be used to create cookies. For example, a JavaScript can be
used to store and retrieve information from the visitor’s computer.
7. JavaScript is widely used for developing modern web applications with the
capabilities of desktop applications.
8. JavaScript supports the best practices for code organization, modularization,
and reuse.
9. Using JavaScript, you can divide your application into different layers of
responsibility.
10. JavaScript build efficient, self-describing hypermedia Application
Programming
interface (APIs) with node.js.
11. JavaScript can be used to test, integrate, and deploy software updates in
rapid
cycles.
12. JavaScript control resource access with user authentication and authorization.

Applications/Uses of JavaScript
1. Developing Multimedia Applications: the users can use JavaScript to add
multimedia elements. With JavaScript you can show, hide, change, resize
images and create images rollovers. you can create scrolling text across the
status bar, thus making multimedia applications more interactive.
2. Create Pages Dynamically: based on the user’s choice, JavaScript can
generate pages that are customized by the user.
3. Interact with the user: JavaScript can do some processing of forms and can
validate user input when the user submits the form.
4. JavaScript objects are similar to dictionaries: in JavaScript, objects are
just
a collection of name-value pairs. JavaScript objects are considered as a
 dictionary with string keys. The users can get and set the properties of an
object using either the familiar “.” (dot) operator, or the “()” operator, which is
typically used when dealing with a dictionary.
5. Extension: JavaScript can be extended for different purposes by
supplementing it with additional objects.
6. Client-Side JavaScript: It extends the core language by supplying objects to
control a browser (navigator or another web browser) and its document object
Model (DOM). For example, client-side extensions allow an application to
place elements on an HTML form and respond to the user events such as
mouse clicks, form input and page navigation.
7. Server-Side JavaScript: extends the core language by supplying objects
relevant to running JavaScript on a server. For example, server-side
extensions allow an application to communicate with a relational database,
which provide continuity of information from one invocation to another of the
application, or perform file manipulations on a server.

Why Choose JavaScript?

1. JavaScript is a simple scripting language invented specifically to use in web
browsers to make websites more dynamic.
2. HTML is capable of outputting more-or-less static pages. once you load them
up, the view doesn’t change much until you click a link to go to a new page.
Whereas, adding JavaScript to your code allows you to change how the
document looks, from changing text, to changing colours, to changing the
options available in a drop-down list and much more.
3. JavaScript is a client-side language, which means all the action occurs on the
client’s(user’s) side of things.
4. JavaScript operations are usually performed instantaneously. in fact,
JavaScript is often used to perform operations that would otherwise restrain
the server, like form input validation. this load distribution of work to the client-
side services speed up the process significantly.

Limitations of JavaScript
JavaScript has some limitations which are natural and unavoidable.
 1. JavaScript works in the browser and having less communication with the
webserver. For this reason, it cannot handle some server tasks if it is required
to do in the browser.
2. JavaScript has not any method or way to create the graphic or picture. It can
manipulate the existing pictures.
3. Core JavaScript works somewhat differently in different browsers.
4. JavaScript is not used to read or write the files on client machines.
5. It does not support inheritance, public, private and protected terms hence do
not follow the object-oriented concept completely.

1.2 JavaScript role in Web Development

HTML Language is used to create web documents or web pages. JavaScript is
embedded in the HTML code. It is required to inform the browser about JavaScript
code in the HTML code. One way to do this is uses the <script> and </script> tag
your document. A Complete web page can be visualized as three separate layers
which allows the designer to concentrate on particular part and programmer can
tweak the code in JavaScript application. Following is the brief discussion of these
layers:
1. Content: It contains the part which is seen by viewers and consist text, image
and links which enable the user to navigate through the different pages or
whole website. HTML tags are used to define the structure of the document to
display which is seen by browser as a tree-like structure. This document tree
defines the hierarchical logic of the document for the DOM to create the
dynamic contents.
2. Presentation: This layer describes how document will appear. For example
set the font color, background image, border and alignment etc, comes under
this layer. These activities can be done either by using the HTML tags in the
page or by using the cascading style sheet (CSS). Former is complicated if
we have to make the changes in many places in the page or pages while
same CSS can be used with the thousands of pages. A combination of CSS,
JavaScript and DOM is called DHTML (Dynamic HTML).
3. Behavior: This layer describes the action that can be performed by the page.
A user can interact with the web page by using the individual keystroke,
 moving, rolling or clicking the mouse, submitting form input etc. JavaScript
makes it easy by handling the events that happened on the web page and
show the response accordingly.

Following steps show how JavaScript works with the web page.
1. When user type address or URL on the browser then a request is transmitted
to the server.
2. Server accept the browser request and returns the page to the browser.
3. Browser render the page for HTML tags and display the contents.
4. If page contains the JavaScript code, which are surrounded by <script> and
</script> tag generally then JavaScript interpreter handle the code.
5. This code can handle user-initiated event like click on the button, rolling
mouse or form submitting etc.
6. It makes the webpage interactive by detecting what is happening on the page
and responds it.
7. It can dynamically change the look of web page or contents
8. It can read the cookies and validate them

1.3 Basic tools for JavaScript Web application

A biggest advantage of the JavaScript is that there is no need to purchase any tool
to develop the JavaScript application. These tools are freely available and can be
easily obtained.
Development Tools
 A simple text editor like window notepad is required to create the JavaScript
code.
 An advance text editor can be used alternatively which can provide line
numbering, search, replace etc. functionality.
 A HTML editor is another tool which can edit the HTML source code and add
the JavaScript code in the web page. An example of HTML editor is
Dreamweaver which has lots of features and drag and drop facilities to make
the task easy.
  Microsoft Visual Web Developer Express is a advance page editor which can
coloring the important JavaScript words and validate the code and load the
page into web browser to view the changes or contents.

Note: Although number of handy tools are available but it is advised for the
beginners that write the code by hand which helps you the fundamentals of
the language and then you can attempt advance logic by using other tools.

Web Browser
A browser is an application program with a graphical user interface for displaying
HTML files, used to navigate the World Wide Web which provides a way to
look at and interact with all the information on the World Wide Web. the two
most popular browsers are Microsoft internet explorer and Firefox. other major
browsers include google chrome, apple safari and opera.
JavaScript is integrated into the browsing environment, which can get information
about the browser and HTML pages, and can modify this information to, thus
changing how things are presented on your screen.

Enabling JavaScript in Browsers

All the modern browsers are available with built-in support for JavaScript. however,
sometimes you may need to enable or disable this support manually. here we
explain
the procedure of enabling and disabling the JavaScript support in different browser
such as internet explorer, Firefox, chrome, and opera.

Setting JavaScript in internet explorer

Following are the simple steps to turn on or turn off JavaScript in your internet
explorer:
1. Select tools → internet options from the menu.
2. Select Security tab from the dialog box.
3. Click the Custom level button.
4. Scroll down till you find Scripting option.
 5. Select Enable radio button under active scripting.
6. Finally click oKto disable JavaScript support in your internet explorer, you
need to select disable radio button under active scripting.

Setting JavaScript in Firefox

Here are the steps to turn on or turn off JavaScript in Firefox:
1. Open a new tab → type about: config in the address bar.
2. Then you will find the warning dialog. Select i’ll be careful, i promise!
3. Then you will find the list of configure options in the browser.
4. in the search bar, type JavaScript enabled.
5. Now, you will find an option to enable or disable JavaScript by right-
clicking on the value of that option → select toggle. If JavaScript enabled
is true; it converts to false by clicking toggle. If JavaScript is disabled; it
gets enabled by clicking toggle.

Setting JavaScript in Chrome

Here are the steps to turn on or off JavaScript in chrome:
1. click the chrome menu at the top right corner of your browser.
2. select Settings.
3. click Show advanced settings at the end of the page.
4. under the Privacy section, click the content settings button.
5. in the “JavaScript” section, select “do not allow any site to run JavaScript” or
“allow all sites to run JavaScript (recommended)”

1.4Basic Structure of JavaScript program

Client-side JavaScript code is embedded in HTML code between the either
<head></head> tag or <body></body> tag surrounded by <script></script> tag. If
code contains the object, functions definitions then it is preferred to add the code
between the <head></head> tag. If code have to placed one or multiple scripts in a
document then <body></body> tag is used.
Above block shows the basic structure of JavaScript code but it is not limited to this.

<!DOCTYPE>
<html>
<head><title></title></head>
<body >
<script type="text/javascript">
Add javascript code here
</script>
</body>
</html>

Example explained
1. The do type is the first tag in a HTML document. It describe the version of
markup language used in the page which in turn help the browser to render
the HTML code.
2. Then starting code is the HTML page.
3. <head> tag contains the title of the page, other information which is not
belongs to body tag. It can also contain the JavaScript code as well.
4. <body> tag contains the JavaScript code written between <script></script>
tag along with other codes. This tag separates the JavaScript code from other
HTML data.
5. Then <body> and <html> tags ends the HTML document respectively.

JavaScript Syntax
JavaScript syntax is the set of rules that define a structured JavaScript. Here are
sometips to remember when writing your first JavaScript program.

Case Sensitivity: JavaScript is case sensitive i.e., upper case letter and lower-case
letter has differentmeaning. For example, the word “alert” has a lower case “a”. so, if
we type the wordwith an uppercase “a” then JavaScript will show an error and the
alert box will not be displayed.
Whitespace & Semi Colon: JavaScript ignores spaces, tabs, and newlines that
appear in JavaScript programs. You can use spaces, tabs, and newlines freely in
your program and you are free to format and indent the programs in a neat and
consistent way that makes the code easy to read and understand. The following
code could be written without semicolons.

<script language=“javascript” type=“text/javascript”>

<!--
var1 = 10
var2 = 20
//-->
</script>

But when formatted in a single line as follows, you must use semicolons -

<script language=“javascript” type=“text/javascript”>

<!--
var1 = 10; var2 = 20;
//-->
</script>

Example explained
Whitespaces (usually spaces & tabs) are used for the better understanding & read
ability of the code to the user. Therefore, it is a good programming practice to leave
spaces and write code legibly. a semicolon is a line or statement terminator in
JavaScript. It is optional and you may skip to use semicolons in your program.
JavaScript will not show an error unless two statements are merged into a single
line.

Note: it is a good programming practice to use semicolons.

Comments
Comments, written by preceded with two forward slashes are used to improve the
readability of program and will be ignored by the interpreter. there are two kind of
comments in JavaScript: Single line and Multi line comments.
1. single line comment begins with two forward slashes // this is a single line
comment
2. Multiline comments begin with /* and ends with */
e.g., /* this is a multiline comment and may continue across multiple lines */
comments are ignored by the interpreter and are not executed. comments
play an important role in helping the programmer to understand complex logic
while writing JavaScript code.
Line Break
line breaks are ignored except when it is used within a statement.

JavaScript Code

 JavaScript code is typically embedded within the HTML. it is interpreted and

run bythe client’s browser.
 The <script> tag alerts a browser that JavaScript code is embedded with in
the
HTML. it is described below:

<script language = “Javascript”> // beginning of the script tag
// Javascript statements, functions, variables
statement-1; statement-2;
etc.
</script> // ending of the script tag

Note: // the comments in the above example, preceded with two forward slashes,
are used to improve the readability of program and will be ignored by the interpreter.

The write () and writeln() Methods

A HTML document which contains the script is termed as current document and
defines as a document object. When document object is referred in the document
then object name is appended with a dot and the name of the method which
manipulate the document object. Method names are generally following the
parentheses and hold the arguments. For example:
Documentobect.methodname(argument)
When output is generated in the document then two common methods named write()
and writeln() are used to display the text where it should be displayed. These
methods are used with the document object.

The write()Method
This method is used to write a string value to the page. Following code write the
“Hello JavaScript” in the body o HTML document.

<body>
<script type="text/javascript">
document.write("Hello JavaScript");
</script>
</body>

The writeln() Method

This method is same as the write() method with one exception that is adds a
JavaScript newline character (\n) at the end of the statement. However, it does not
affect the appearance of page. Following code shows the concept which print the
“Hello JavaScript” in two lines.

<body>
<script type="text/javascript">
document.writeln("Hello");
document.writeln(" JavaScript");
</script>
</body>

Scripting Language and Programming Language

JavaScript is client-side/server-side scripting language. Before you start writing the
JavaScript code you must understand the difference between the Scripting language
and Programming language.
  A scripting language does not require compilation before it is run where as
code written in programming language first compiled then it is run.
 A code in scripting language is interpreted as it is loaded in the client.
 Error won’t be caught before the script is run while in programming errors are
found when it is compiled.
 Errors in JavaScript are handled by browser.

1.5 Using internal and external JavaScript files

HTML <Script> Tag
<script> tags tells the browser about beginning and ending of the scripting language
in the HTML document. It is looks like as following:
<script>
JavaScript code here
</script>
In the above code <script> is an opening tag and </script> is closing tag. Some
browser assumes that scripting language will be JavaScript while others need to be
told which scripting language being used.

Following are some common attribute of <script> tag

src: It defines the address of the external file which can be absolute or relative URL
type: Define the MIME-type of the script.
charset: Define the character encoding of the external JavaScript file.

There are four different place in the HTML document where scripts can be used.
1. Body of the page: In this case when page is loaded in the browser then
output is displayed as the part of the HTML document.
2. Header of the page: In this case code is written in the form of function
(groups of JavaScript statement but treated as single unit) and referred in the
other script in the same page.
3. Within HTML tag: When JavaScript is used as a event handler (will be
discussed later) then it work with HTML elements.
4. As external file: In this case JavaScript code is written in another file having
.js extension. This file is included in a script tag by specifying the file name.
Form the above discussion first three types are treated as internal files whereas last
type is termed as external file. You will see the example of internal file in the
following section example.
In JavaScript scripts are also classified as inline, internal and external script.

Writing first Java Program

JavaScript is written in the same way as HTML, in a text-editor like notepad.
JavaScript
implementation is quite similar to CSS (cascading style sheets). the user can link itto
the outside files (with the file extension .js), or write blocks of code into their HTML
documents with the <script> tag.

Here, we consider a simple example with an embedded script. this will simply
display
a text Hello World on the screen.

<script type=“text/javascript”>
<!—
document.write(“<i>hello World!</i>”);
//My First JavaScript Program to print Hello World on the screen
</script>

When you place this in your code the text hello World will appear on the screen i.e.,
Hello World!the ‘script’ tag encloses any script code you want to use. the ‘type’
attribute is used toalert the browser to the type of script it is about to deal with, and
so helps it to interpretthe JavaScript code.consider another example:
 <html>
<head>
<title>My Javascript Page</title>
</head>
<body>
<script type=“text/javascript”>
document.write("Hello"); (“Welcome to my world!!!”);
</script>
</body>
</html>

output: Welcome to my world!!!

Example explained
How to save and run your first program in JavaScript

1. open any editor such as notepad and write the program

2. save the program with .html extension in a proper folder or subfolder on a drive
like
c:\Javascript\myprograms.
3. open the web browser like internet explorer or Mozilla Firefox
4. Open the file you have created and saved in step 2, and execute the program. For
eg. execute C:\JavaScript\firstprogram.html
Where C is the drive, JavaScript is the folder name and firstprogram.html is the
name of program which is saved in the JavaScript folder.

Using External JavaScript File

External scripts are supported by all browser. To use external script just specify the
filename in the <script> tag as shown below

<script language=”JavaScript” type=”text/javascript” src=”filename.js”>

</script>
You can create .js file using any text editor which contains one or more JavaScript
commands. Don’t use <script> tag in this file. Then add the this file in the HTML
document in the script tag as shown above.

Following are the steps to add the external file in the HTML document.
1. Open the notepad editor and type following commands
function disp() { document.write(“Hello JavaScript”);}
2. Save the file with the name demo.js in the same folder where HTML
document is saved in which this file will be embedded.
3. Now open the new file in the notepad editor and add the following code
<html>
<head>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
disp();
</body>
</html>

4. Save the file as msg.html in the same folder where .js file is saved.
5. Execute the msg.html in the browser.

Summary
JavaScript language has no concept of input or output. it is designed to run as a
scripting language in a host environment. it is up to the host environment to provide
mechanisms for communicating with the outside world. The most commonly used
host environment. is the browser. JavaScript interpreters can also be found in other
formats such as adobe acrobat, Photoshop, yahoo!’s Widget engine, and server-side
environments.
JavaScript programs manipulate values, and all these values belong to a type.
different JavaScript’s types include number, string, Boolean and objects. There is no
built-in i/o functionality in JavaScript. it is the runtime environment which provides i/o
functionality to the user. however, most runtime environments have a
console object that can be used to print output.

Section-1: exercise Questions

Perform the following activities in lab:
S.
activities
no.
Write a program with an write() and writeln() method to:
a) display the text “good Morning sir”. the JavaScript code must be in the
1. <head> tag.
b) display the text “i am learning JavaScript”. the JavaScript code must be
in an another file called “MyJavascript.js”
Write a program to display your name, school and class teacher with an
2.
writeln method.
3. Write a program to display which says “Welcome to the world of computing”
Write a program to display a message which says “Did you enjoy
4.
learning Javascript session?”
Write a program to display a message which says “Please give your
5.
feedback here”

Answer the following questions

Q.1: What is an editor?

Q.2: What do you understand by a web browser?
Q.3: What are the major types of browser available today?
Q.4: What is the advantage of using JavaScript over HTML?
Q.5: What are the steps needed to create and run a simple program using
JavaScript?
Q. 6: Which attribute of the <script> tag helps you include an external JavaScript
file?
Q. 7: What are the three ways in which JavaScript can be included?
Q. 8: JavaScript is “interpreted” - what does this imply?
Q. 9: explain the role of case sensitivity in JavaScript.
Q. 10: how to use multiple line comments in JavaScript.
Q. 11. Fill in the blanks
(a) A file which ends with .js is an ................................ .
(b) Js programs are included within ................................ & ................................
of a HTML document.
(c) generally HTML is preferred for creating ................................ while CSS is
preferred for ................................ and JavaScript is preferred for .................
...............
(d) JavaScript Syntax is a set of ............................. that define a structured
JavaScript.
(e) comments are used to ................................ in JavaScript program.

Further Readings
1. http://www.javascriptkit.com
2. https://developer.mozilla.org/en/docs/Javascript
3. http://www.dynamicdrive.com
Section-2: Data Types and Variables
This section deals with different Datatypes, creating variable, naming, types of
variables supported by JavaScript and how to use them.

2.1 Data Types

A data type is a classification of the type of data that a variable or an object can hold
data type is an important factor in all computer programming languages, including
Visual Basic, C#, C/C++ and JavaScript. JavaScript supports different data types.

Primitive Data Types

These types of data are called building blocks of a program. A single literal value is
assigned of type number, string characters. JavaScript supports three basic data
types:
1. Numeric: Numeric type has two type viz. Integer and floating point. Integer is
a whole number such as 145, -9 etc. It can be expressed in decimal base(10),
octal base (8), hexadecimal (16) of both positive and negative values. Floating
point are values with decimal value or fractional value. For example 12.3,
1.5e-2 are the floating point examples. numbers in JavaScript are double-
precision 64-bit format. the standard numeric operators are supported,
including addition, subtraction, modulus (or remainder) arithmetic and so forth.
2. String: Strings are collection of characters which are enclosed with either
single or double quotes. A starting and ending quotes of string value must be
matched. Single quotes can hide the double quotes or double quotes can hide
the single quotes. For example:
"This is a beautiful Scene"
' This is a beautiful Scene '
" This is a beautiful ‘Scene’ "
' This is a beautiful “Scene "'
A null string is a string which is empty. String also contains escape sequence
characters like ‘\n’, ‘\t’, ‘\b’, ‘\r’ etc.
A string can be concatenate using ‘+’ sign. For example, the expression 7 +
120results in 127, whereas “7” + 120 results in “7120”
 3. Boolean: This type of data contains only two value i.e. true or false or 0 or 1.
When these values are compared then true value is taken as 1 and false
value is taken as 0. A numeric comparison and equality operator is used for
comparison.

Composite Data Types

These types of data type are complex in nature which consist more than one
component. Object, arrays and functions are the example of composite data type.
Object contains properties and methods; array contains a sequential list of elements
and functions contains a collection of statements.

Null and Undefined Values

 A null keyword represents “no value”. It is not empty string or zero, Null value
is used to initialized the object to clear the value of a variable and memory
assigned to object becomes the free.
 When a variable is declared without assigning value then it contains the
‘undefined’ value which may cause the runtime error. Variables compared
with these values can be compared with identity operator.

2.2 Variables
 Variables can be thought of as named containers in the computer’s memory.
You can place data in these containers and refer to the value using the name.
 A variable consists of an identifier, a scope and a specific data typ
 An Identifier is the name of a variable.

Usefulness of Variable
 When code is written they can be used in place of unknown value.
 When script is written or updated then it saves the time
 Then clearer the purpose of code because you can give the meaningful name
which make the code easy to read.

Table: list of reserved keywords in JavaScript

break else new var
case final return void
catch for switch while
continue function this with
default if throw delete
in try do instance of
type of interface null undefined

Variable Naming Convention

JavaScript has some rules when we give the name to the variable. Following factor
must be consider while naming the variable.
1. Case Sensitivity: JavaScript variables are case sensitive. When name is
given to the variable then one must be careful to use same case in the
JavaScript otherwise JavaScript consider it as new variable and return the
error. For example numvalue, Numvalue, numValue NUMVALU are four
different variables.
2. Use Valid Characters: A variable must begin with underscore or letter only.
All other characters are invalid to start the variable name. Variable must not
contains blank spaces. For example, _numvalue, num2value, numvalue are
valid name while 2numvalue, _num value, num value are invalid name.
3. Avoid Reserved Words: Reserved words are the special words which has
specific meaning in JavaScript. These words can not be use as a variable
name. For example ‘while’ is a reserved keyword hence cannot be used as
variable name.

Variable Declaration and Initialization

 Variables in JavaScript can be defined using the keyword var.
 The equal to (=) sign is used to assign a value to a variable.
 Note that var is the keyword in JavaScript.
 Users can either, separately declare the variable and then assign values to it
or straight-away declare and initialize the variables.

Declare a new variable called numvalue, write the following:

var numvalue;
Note that the semicolon at the end of the line is not part of the variable name but
instead is used to indicate to JavaScript the end of a statement.

Examples of variables
var X; //defines a variable X, and by default no value is assigned to this
variable
var y = 100; //defines a variable Y and assigns the value of 100 to it
var customer // declare the variable using the var keyword
X = 10; // use the = operator to assign a value
var x = 10; //assigning a value to a variable declaring it
var y=5; //y is a variable that holds a value of 5
var sum = x + y ; // sum is a variable that stores the sum of variables x and y

Variable Scope
The scope of a variable refers to the area of a program in which it can be accessed.
Variables have two types of scopes -global scope and local scope.

The global scope: consider the example while handling the rate of sugar, we can
declare a variable Sugar Rate at global. It is fixed in the fair price shop by the
government and is same throughout the state in all the fair price shops. This is an
example of a variable named sugar rate being declared globally.

The local scope: in case of local scope the rate of sugar in different retails shops
will
be specific to the rating norms of each shop. This is an example of a local variable. It
is specific within the scope of each shop.

Concatenation of variables
To concatenate variables and strings together on the same line, the + sign is used.
Addition is performed when both of the operands are numbers. In expressions
involving numeric and string values with the + operator. For example, consider these
statements:
var temp = "The temperature is " + 100;
// returns "The temperature is 100"
var message = 20 + " days till New Year";
// returns "20 days till New Year"
But, if both operands are numbers, then addition is performed:
var a= 34;
Var b = 5;
var sum = a + b; // sum is 39

Declaring Constants
A constant is a special variable with a value that cannot be changed during program
execution. JavaScript declares constants with the const type and the name of the
constant is in uppercase by convention only. Many browsers support the JavaScript
constant variable. Following statements declare the PI and INTEREST constant
variable.
const PI = 3.14;
const INTEREST = 3;

Section-2: Exercise Questions

Perform the following activities in lab.
S.
activities
no.
1. Write a program to show the use of String data type
2. Write a program in JavaScript to swap two variable values
3. Write a program in JavaScript to swap three variables
4. Write a program to print the smiley face.

Answer the following questions:

Q.1: What is a variable?
Q.2: differentiate between local and global scope of a variable.
Q.3: What is a constant variable?
Q.4: What are the major primitive types?
Q.5: What are undeclared and undefined variables?
Q.6: What is a string?
Q.7: What are two of the benefits of using variables?
Q.8: What the factors to be considered when naming the variable
Q.9: Write any five valid variable names.
Q.10: Write any five invalid variable names.
Q.11: What is the difference between null and undefined values?
Q.12: What are composite data types?
Q.13: Fill in the blanks
(a) A variable __________ or __________ a value.
(b) To declare a variable, you use the __________ keyword.
(c) A variable name must begin with a(n) __________ or a(n) __________ character.
(d) A variable name must begin with a(n) __________ or a(n) __________
character..
(e) To denote an exponent in JavaScript, you use a letter __________ right after the
base
number and before the exponent.
(f) Plus sign is used to ............................ numbers and strings.

Further readings
1. http://www.javascriptkit.com
2. https://developer.mozilla.org/en/docs/Javascript
3. http://www.dynamicdrive.com

Section-3: Operators
3.1 Operators
An operator is a symbol that is used to perform an operation. in this section we
will learn how to use JavaScript operators.
Assignment Operators
Assignment operators help in assigning values to a variable. the following table
shows
how assignment operators work in JavaScript.here we consider two variables x and
y assuming x=90 and y=20. upon execution, theassignment operator will generate
the following results.
operator example Same as result
= x=y x=90
+= x+=y x=x+y x=110
-= x-=y x=x-y x=70
*= x*=y x=x*y x=1800
/= x/=y x=x/y x=4.5
%= x%=y x=x%y x=1

the equal to (=) sign is used to assign a value to a variable.

Arithmetic Operators
There are following arithmetic operators supported by JavaScript language: assume
variable a hold 10 and variable b holds 20 then:
operator description example
+ adds two operands a + b will give 30
- Subtracts second operand from the first a - b will give -10
* Multiply both operands a * b will give 200
/ divide numerator by denominator b / a will give 2
Modulus operator and remainder of after an integer
% b % a will give 0
division
++ increment operator, increases integer value by one a++ will give 11
decrement operator, decreases integer value by
-- a-- will give 9
one

Comparison Operators
There are following comparison operators supported by JavaScript language.
Assume variable a hold 10 and variable b holds 20 then
operator description example
checks if the values of two operands are equal or
(a == b) is not
== not,
true.
if yes then the condition becomes true.
checks if the values of two operands are equal or
!= not, (a != b) is true.
if values are not equal then condition becomes true.
 checks if the value of left operand is greater than
> the value of right operand, if yes then the condition (a > b) is not true.
becomes true.
checks if the value of left operand is less than the
< value of right operand, if yes then the condition (a < b) is true.
becomes true.
checks if the value of left operand is greater than or
(a >= b) is not
>= equal to the value of right operand, if yes then the
true.
condition becomes true.
checks if the value of left operand is less than or
equal
<= to the value of right operand, if yes then the (a <= b) is true.
condition
becomes true.

Logical Operators
There are following logical operators supported by JavaScript language. assume
variable a hold 10 and variable b holds 20 then:
operator description example
called logical and operator. if both the operands are
&& (a && b) is true.
non-zero then condition becomes true.
called logical or operator. if any of the two operands
|| (a || b) is true.
are non-zero then the condition becomes true.
called logical not operator. use to reverse the
! logical state of its operand. if a condition is true then ! (a && b) is false.
logical not operator will make it false.

Bitwise Operators
There are following bitwise operators supported by JavaScript language. assume
variable a hold 2 and variable b holds 3 then:

operator description example

& called bitwise and operator. it performs Boolean and (a & b) is 2.
 operation on each bit of its integer arguments.
called bitwise or operator. it performs Boolean or
| (a | b) is 3.
operation on each bit of its integer arguments.
called bitwise XOR operator. it performs Boolean
exclusive or operation on each bit of its integer
^ (a ^ b) is 1.
arguments. exclusive or means that either operand one
is true or operand two is true but not both.
called bitwise not operator. it is a is a unary operator
~ (~b) is -4.
and operates by reversing all bits in the operand.
called bitwise shift left operator. it shift all the bits
in its first operand to the left by the number of places
specified in the second operand. New bits are filled with
<< zeros. shifting a value left by one position is equivalent (a << 1) is 4.
to multiplying by 2, shifting two positions is equivalent
to
multiplying by 4 so on.
called bitwise shift right with sign operator. it shift all
the bits in its first operand to the right by the number of
places specified in the second operand. The bits filled
in
on the left depend on the sign bit of the original
operand, in order to preserve the sign of the result. If
>> (a >> 1) is 1
the first operand is positive, the result has zeros placed
in the high bits; if the first operand is negative, the
result has ones placed in the high bits. shifting a value
right one place is equivalent to dividing by 2 (discarding
the remainder), shifting right two places is equivalent to
integer division by 4, and soon.
called bitwise shift right with Zero operator. this
>>> operator is just like the >> operator, except that the bits (a >>> 1) is 1.
shifted in on the left are always zero,
Assignment Operators
There are following assignment operators supported by JavaScript language:
operator description example
simple assignment operator, assign values of c = a + b will assign
=
right side operands to the left side operand value of a + b to c
add and assignment operator, it adds the right
c += a is equivalent to
+= operand to the left operand and assign the result
c=c+a
to the left operand
subtract and assignment operator, it subtracts
c -= a is equivalent to
-= right operand from the left operand and assign
c=c-a
the result to the left operand
Multiply and assignment operator, it multiplies
the right operand with the left operand and c *= a is equivalent to
*=
assign c=c*a
the result to the left operand
divide and assignment operator, it divides the
left operand with the right operand and assign c /= a is equivalent to
/=
the c=c/a
result to the left operand
Modulus and assignment operator, it takes c %= a is equivalent
%= modulus using two operands and assign the to
result to the left operand c=c%a

Special Operator
Conditional operator (? :)
This operator first evaluates an expression for a true or false value and then execute
one of the two given statements depending upon the result of the evaluation.
operator description example
if condition is true? then value X : otherwise
?: conditional expression
value y
typeof operator
the typeof is a unary operator that is placed before a single operand, which can be of
any type. its value is a string indicating the data type of the operand.
the type of operator evaluates to “number”, “string”, or “Boolean” if its operand is a
number, string, or Boolean value and returns true or false based on the evaluation.
here is the list of return values for the type of operator:

Type String returned by type of

number “number”
string “string”
boolean “boolean”
object “object”
Function “function”
Undefined “undefined”
null “object”

Operator Precedence and Associativity

When an expression contains numbers of operators and operand and the order of
evaluations is ambiguous then operator precedence and associative rules comes in
the picture.

 Operator Precedence: It refers to the way in which the operator binds to its
operand. It determines the what operation is done first over the another. In
precedence operator’s hierarchy is formed and operator with highest
precedence stood at the top. Forexample, multiplication operator has the
higher precedence than addition so multiplication bind tightly than addition
with operand.

 Operator Associativity: It refers to the order in which an operator evaluates

its operand i.e. from left to right or right to left. When an expression has
operator with equal precedence then association normally is left to right.

For example, the expression 6 + 3 * 10 / 2 will be written as ( 6 +( ( 3 * 10) / 2 ) ) and

operator will be evaluated from left to right.
3.2 Numerical Calculation
JavaScript has mathematical capabilities like addition, subtraction, multiplication and
division. These operators perform the operation and return the result. For example,
in JavaScript calculate the total amount in a code.
var total amount;
total amount = 20+ 5 *7;
document. write (total amount);
1. First, you declare a variable, total amount, to hold the total cost.
2. In the second line, you have the code 20 + 5 * 7. This piece of code is known
as an expression. When you assign the variable total amount the value of this
expression, JavaScript automatically. Calculates the value of the expression
(55) and stores it in the variable.
3. Notice that the equals sign tells JavaScript to store the results of the
calculation in the total amount variable. This is called assigning the value of
the calculation to the variable, which is why the single equals sign (=) is called
the assignment operator.
4. Finally, you display the value of the variable in an document. Write() method.

The increment and decrement operators, are represented by two plus signs (++) and
two minus signs (--), respectively.
 Using the increment and decrement operators shortens this to
myVal++;
myVal -- ;
The result is the same — the value of myVal is increased or decreased by
one
 When the ++ and -- are used on their own, as they usually are, it makes no
difference where they are placed, but it is possible to use the ++ and --
operators in an expression along with other operators. For example:
myVar = myVal ++ - 30;
This code takes 30 away from myVal and then increments the variable myVal
by one before assigning the result to the variable myVar.
 If instead you place the ++ before and prefix it like this:
 myVar = ++ myVal - 30;
First, myVal is incremented by one, and then myVal has 30 subtracted from it.

Built-in Functions/Object for Numerical Calculation

isNaN((); This method checks whether passing argument is a number or
not. It returns true or false value as a result. For example
document.write( isNaN(4) ) // will return false.
document.write( isNaN(“4”) ) // will return false.
document.write( isNaN(“four”) ) // will return true.

valueOf(): This method return a number of a given variable. For

example
var x =345;
x.valueOf() // will return 345;
JavaScript Math object helps developer to perform the common
mathematical operations. Here are some common methods discussed
with example.
Math.round(x): It returns the rounded value of passing number to its
nearest integer. For example:
Math.round(6.7) //returns 7
Math.round(6.4) //returns 6
Math.pow(x,y): It returns the power of x based on y. For example:
Math.pow(3,4) //returns 81
Math.sqrt(x): It returns the square root of x. For example:
Maths.sqrt(81) //returns 9
Math.ceil(x): It returns the greater or equal to integer value of x.
Math.ceil(6.4) //returns 7
Math.ceil(4.1) //returns 5
Math.floor(x): It returns the less or equal to integer value of x.
Math.floor(6.4) //returns 6
Math.ceil(3.9) //returns 3

3.3 Basic String Operations

A major operation that can be performed is concatenation which can be performed
by placing + sign between two strings. This has been discussed in previous sections.
Some Common Methods for String Operation
Length(): It returns the length of a string including white space(s). For example
var str = "Hello javaScript";
document.write(str.length; // it returns the 16.

Search(): It returns the starting location of passing string otherwise returns -1.
var str = “This is my first script in JavaScript”
str.search(“script”); //returns 17

Substring(): It extract the substring by taking the starting and ending position as
argument. You can omit ending position then it will extract the string from starting
position to end of the string.
var str = “This is my first script in JavaScript”
str.substring(7,16) // returns “my first” as substring

3.4 Mixing Numbers and Strings

 A expression which is mixing of number and strings is generally requires
when we have to describe the meaning of displayed value to the user.
 If we have to display total marks and percentage of the student then we have
to specify which value is for the total marks and which value is for the
percentage.
 Mixing of number and string is easy. You have to join the string and numeric
value together by using + sign. It does not perform the calculation rather
concatenation the whole expression.
For example, following code
document.write (“Total Marks = “ + 450);
will display the “Total Marks = 450” message on the document.
3.5 Data Type Conversion
JavaScript automatically convert the data when two different types are used in the
expression and evaluate the expression. This act is called type conversion. There
are two ways in JavaScript to convert the type:

Implicit Type Conversion

This conversion is done by JavaScript automatically when expression is evaluated if
there are two different types are given which are not compatible to perform the
operation. Following are the implicit conversion examples:
 If one value is number and second is string with arithmetic operator given in
expression then it converts string to number and perform the arithmetic
operation. For example, 14 + “” returns the 14 as result, 30 * “5” returns the
150 as result.
 If both operands are string with arithmetic operator then both are converted to
number and result is produced. For example, “14” + “15” returns 29 as result
 If one value is null in arithmetic operations then it is converted to integer value
0. For example, null + 5 returns the 5 as result.
 If one value Boolean in arithmetic operation then it is converted to 0 or 1
according to the given value. For example, true + 5 returns 6 as result,
false+5 returns 5 as result.
 If value cannot be converted to other type then NaN (Not a Number) value is
returned.

Explicit Type Conversion

This type of conversion is done by developer by using the inbuilt method of type
conversions. Following sections discuss the different ways for explicit conversion.

Converting Number
Number(): This method is used to convert any type to number type.
For example,
 Number (“40”) convert string value “40” to 40.
  Number (null) convert null to 0
 Number (“”) convert empty string to 0
 Number(false) convert false to 0
 Number(“type”) it cannot be converted so return NaN

parseInt(): This method returns the integer value by accepting two argument.
 First argument is string having numeric value.
 Second argument is radix which specify the returning value presentation in a
specific number system.
 If radix is omitted then either it checks the beginning of string for radix. For
example, if string begins with “ox” then radix is 16 (Hexadecimal), if string
begins with “o” then radix is 8 (octal) otherwise radix is taken 10 (decimal).
For example:
parseInt (“10”) returns 10
parseInt (“40.33”) returns 40
parseInt (“19 Covid”) returns 19
parseInt (“Covid 19”) returns NaN
parseInt (“15”, 8) returns 13
parseInt (“0x16”) returns 22

parseFloat(): This method returns the integer value by accepting one string
argument. It parses the string for conversion for number. If number exists up to end
then it converts the number and return otherwise returns NaN. For example:
parseFloat(“23”) returns 23
parseFloat(“23.55”) returns 23.55
parseFloat( “23 yard”) returns 23
parseFloat( “yard 55”) returns NaN

eval():This method accept the JavaScript expression as an string argument. It then

evaluates the expression and return the result after execution. If no result is obtained
the it returns undefined as a result. For example:
eval (“ 8*4/2”) returns 16 as result
Converting String
String() method is used to convert any type to string value whereas possible by
accepting one argument.
 If argument is integer type then it converted to string. For example, string (40)
converted to “40”
 If argument is Boolean type then string(false) is converted to “false”.
 If argument is null then string(null) is converted to “null”.

Converting Boolean
Boolean() method convert any type to Boolean type which is supported.

 If passing value is integer then Boolean(25) returns true.

 If passing value is null then Boolean(null) returns false.
 If passing value is string then Boolean(“Hello”)) returns true.

Section-3: Exercise Questions

Perform the following activities in lab
.
S. no. Activities
1. Write a program to show the use of arithmetic operators in JavaScript.
Write a program in JavaScript to check if the value of two operands is equal
2.
or not.
3. Write a program in JavaScript to implement bitwise operators.
4. Write a program in JavaScript to implement and, or, not operators.
Write a JavaScript program to:
5. u add two numbers and display the sum.
u subtract two numbers and display the difference

Answer the following questions:

Q.1: What is an operator?
Q.2: What is anassociativity of operator?
Q.3: What is an precedence of operator
Q.4: What are the major types of operators supported by JavaScript?
Q.5: What will be the output of the following codes
2* 3
3 * -2
false * 5
true * 3
5 * "foo"
Infinity * 0
Infinity * Infinity

Q.6: What will be the output of the following codes

2-3
3-2
false - 5
true + 3
5 + "foo"

Q.7: What would be the result of 1+2+“3” in JavaScript?

Q.8: What is the difference in the outputs that you get when you use the following
operators =; == ; and ===.
Q.9: explain what you understand by Modulo operator.
Q.10: specify four types of operators that can be used in JavaScript.
Q.11: explain what a logical not operator does using some examples.
Q.12: What is conditional operator?
Q.13: Fill in the blanks
(a) if x = 24 and y = 3 then the output of x*=x/y is ............................ .
(b) if x = 25 and y =3 then the output of x+=y is ............................ .
(c) , ............................ and ............................ are all logical operators used in
JavaScript
(d) if x = 14 and y = 3 then the output of x mod y is ............................ .
(e) if x = 15 and y =3 then the output of x%y is ............................ .
(f) Plus sign is used to ............................ numbers and strings.
(g) When i want to display an alert which says ‘Welcome’ and then the name of
the student, i will have the use the ............................ operator.
Further Readings
1. http://www.javascriptkit.com
2. https://developer.mozilla.org/en/docs/Javascript
3. http://www.dynamicdrive.com

Section-4: Dialog Boxes

4.1Interacting with User
In the previous section we have discussed two methods, write() and writeln(), which
produces the output to the document object. A dynamic website needs interaction
with its user to work with. A user gives the input to the website using different way
like keyboard, mouse and gets the response. Dialog box are the easiest way using a
user can interact with the website. Dialog box can provide the information to the user
or ask him to input the value requires by program.
We have seen document object methods which are used to display the content on
the web page. In the same way Window is another object which has its own
methods. Window object uses dialog boxes to interact with the user. The dialog
boxes are created with three methods I.e. alert(), prompt() and confirm(). By default,
these methods do not need Window object in front of it. Window object is top level
object and there is no need to specify it while method is called.

4.2Alert() Dialog Box

 This dialog box is used to display the warning message to the user. When
user enter an incorrect information then developer use alert box to display the
warning or error to the user.
 It contains the small triangle icon, a customize message for user and ok
button.
 When this dialog box appears then all the execution is stooped and wait for
the user to press the ok button.
 It is also used for the debugging purpose to check whether program is
executing in the order desired by producing the output.
 Appearance of alert() box depends upon the browser to browser.
 It can display valid expression, string, variable value which are passed as a
argument to the alert() method.
Following example explain the uses of alert() method.
 <!DOCTYPE>
<html>
<head><title>Dialog Box</title></head>
<body>
<b>Example of alert method</b><br />
<h2>
<script type="text/javascript">
var x=10;
Var y =20;
document.write("Example of alert method ");
alert (x + y);
alert("Warning input carefully!");
</script>
</h2>
</body>
</html>

4.3Prompt() Dialog Box

It is the one of the ways to get the input from the user using dialog box. A program
generally need input for form input, personal information etc for further processing.
 Prompt() ask the user to input the value. It has two buttons i.e. ok and cancel
button.
 This method accepting two argument. First argument accepts the value in the
form of question which will be displayed on the dialog box about which input is
seeking from the user.
 Second argument is optional which has the default answer of the question. If
user does not input value then second argument value will be taken as the
answer. If user enter the value then second value is override if it is passed.
 When user enter the value then it presses the ok button to confirm his input.
 Prompt() method returns the value after clicking the ok button. It returns the
input value if it is entered otherwise it returns the null value if user click on the
cancel button.
Following example explain the uses of prompt() method.
 <!DOCTYPE>
<html>
<head>
<title>Example of prompt box</title>
</head>
<body>
<script type = "text/javascript">
var age=prompt("Tell me your age.", " 17");
if ( age == null){ // If user clicks the Cancel button
alert("Not input from user");
}
Else if(age < 18)
{
alert(“You are not so young now”);
}
else{
alert(age + " is adult stage");
}
</script>
</body></html>

4.4Confirm() Dialog Box

This method is used to get confirmation from the user about its action to be
completed. For example, if user want to delete something, cancel the order on online
websites etc., then a dialog box is appeared to ask the user about the confirmation
about it delete operations or cancel the order.
 Confirm method display the dialog box with question mark icon, question and
two buttons ok and cancel button.
 It returns the value based on the clicked button.
 It takes the one argument i.e. question to ask from the user.
 If user click the ok button then it returns the true value
 If user click on the cancel button then it returns the false value.
Following example explain the uses of confirm() method.

<!DOCTYPE>
<html>
<head>
<title> Example of confirm box </title>
</head>
<body>
<script type="text/javascript">
var ans =confirm("Are you really want to cancel the order?");
if (ans == true) {
alert("Order has been canceled!");
}
else{
alert("WOW! You have change the mind ");
}
</script>
</body>
</html>

Section-4: Exercise Questions

Perform the following activities in lab:

S. no. Activities
Create a JavaScript program that prompts the user for a phone number and
1.
thenasks the user for confirmation.
Write a program to ask user to input two values and then perform the
2.
arithmetic operation and display the result.
Write a program to calculate the simple interest by inputting the values from
3.
the user.
Write a program to display a confirmation box which says “Did you enjoy
4.
learning JavaScript session?”
Write a program to display a prompt box which says “Please give your
5.
feedback here”
Answer the following questions
Q.1: What is a dialog box?
Q.2: What is Window object?
Q.3: What is alert() method?
Q.4: What is prompt() method?
Q.5: What is confirm method()?
Q. 6: What happens when user click the cancel button of prompt dialog box?
Q. 7: What is the difference between confirm and alert method?
Q. 8: Why you don’t specify the name of the object with these methods.
Q. 9: When you would use the confirm() dialog box
Q. 10. Fill in the blanks
(a) A(n) __________ object is created for each window that appears on the screen.
(b) The __________ method pops up a message to the viewer, and the viewer has
to click anOK button to continue.
(cThe prompt() method is used to __________ the viewer to enter information.
(d) Second argument in prompt method is _____________

Further Readings
1. http://www.javascriptkit.com
2. https://developer.mozilla.org/en/docs/Javascript
3. http://www.dynamicdrive.com
Section-5: Decision Making using if and switch
5.1Block and Compound Statement
A statement in a code which states that something will happen with this line is called
the single statement. A simple expression, assigning value or check the condition
are the example of single statement.

When we want to execute the more than one statements in response of the condition
which is true then these types of statements are surrounded by curly braces. The
effect of wrapping which wrap the many statements as a single statement is called
the compound statement.

A block is a set of statements enclosed in braces as single statement. It is used with

the decision making or looping statements. If condition is true then whole block will
be executed otherwise whole block will be skipped.

The decision-making construct like if, else, switch executes the blocks once if
condition is true or skip the block. The looping construct repeatedly executes the
block until condition is false or loop is not terminated.

5.2 Control Structures in JavaScript

JavaScript has a similar set of control structures like the other languages such as c,
c++ and Java. conditional statements are supported by if and else described below:
Conditional Statements
 In JavaScript we have the following conditional statements as defected .in fig.
5.1:
 if (statement)specify a block of code to be executed, if the specified condition
is true
 else (statement) specify a block of code to be executed, if the same condition
isfalse
 else if (statement) specify a new condition to test, if the first condition is false
 switch (statement) specify many alternative blocks of code to be executed
 if (condition) {
note: if is used in lowercase, uppercase letters like IF or IF or if will generate a
Javascript error
block of code to be executed if the condition is true
}

Fig. 5.1
Example: Make a “happy day” greeting if the hour is less than 18:00:

<!DOCTYPE>
<html>
<head></head>
<body>
<p>Display Good Day! if the hour is less than 18:00: </p>
<script type="text/javascript">
var d = new Date();
var hr = d.getHours();
if (hr < 18) {
document.write("Good Day! ");
}
</script>
</body>
</html>
Output: display “happy day!” if the hour is less than 18:00:
happy day!
The else statement can be used to specify a block of code to be executed if the
same
condition is false.
syntax: else statement

if (condition) {
block of code to be executed if the condition is true
} else
{
block of code to be executed if the condition is false
}

Example: if the hour is less than 18, create a “good day” greeting, otherwise “good
evening”:

<!DOCTYPE>
<html>
<head></head>
<body>
<p>Display Good Day! if the hour is less than 18:00: otherwise Display Good
Eveening</p>
<script type="text/javascript">
var d = new Date();
var hr = d.getHours();
if (hr < 18) {
document.write("Good Day! ");
}
else
{
document.write("Good Evening! ");
}
</script>
</body>
Output: the above script will display “good day or good evening” depending upon
the current time of the day
The ‘else if’ Statement is used to specify a new condition if the first condition is false.
syntax:

if (condition1)
{
block of code to be executed if condition1 is true
} else if (condition2) {
block of code to be executed if the condition1 is false and condition2 is true
} else {
block of code to be executed if the condition1 is false and condition2 is false
}

Example: if time is less than 10:00, display a “good morning” greeting, if not, but
time is less than 20:00, display a “good day” greeting, otherwise a “good evening”:
greeting
 <!DOCTYPE>
<html>
<body>
<p>Display Greeting Hours Entered by User </p>
<script type="text/javascript">
var hr =prompt("Enter Hour", "23");
if (hr < 10) {
document.write("Good Morning! ");
}
else if (hr < 20) {
document.write("Good Day! ");
}
else {
document.write("Good Evening! ");
}
</script>
</body>
</html>

Output: Display “good morning or good day or good evening” depending upon the
current time of the day
Example: Calculate discount price base on total amount. If amount is less than
10000 then no discount. If amount is less than 20000 then discount is 5%. If amount
is less than 30000 then discount is 10%. If amount is more than 50000 then discount
is 15%.
 <!DOCTYPE>
<html>
<body>
<p>Calculate Discount Total Amount Entered by User </p>
<script type="text/javascript">
var tamt =prompt("Enter Total Amount", "0");

if (tamt == 0) {
document.write("Invalid Amount");
}
else if (tamt < 10000) {
document.write("No Discount");
}
else if ( tamt < 20000) {
disAmt = tamt - (tamt *.05);
document.write(" Total Amount after Discount = " + disAmt) ;
}
else if ( tamt < 30000) {
disAmt = tamt - (tamt *.1);
document.write(" Total Amount after Discount = " + disAmt) ;
}
else {
disAmt = tamt - (tamt *.15);
document.write(" Total Amount after Discount = " + disAmt) ;
}
</script>
</body>
</html>
The switch statement is used to select one of many blocks of the code to be
executed
in a program described below. the switch expression is evaluated once and the value
of the expression is compared with the values of each case. if there is a match
found,
then the associated block of code is executed otherwise default code block is
executed.
Syntax: switch statement (as defected in figure 3.2)

switch (expression){
case n:
code block
break;
case n:
code block
break;
default:
default code block}

Fig. 3.2
Example: Use the weekday number to calculate weekday name with the help of
getday() method.the getday() method returns the weekday as a number between 0
and 6. (Sunday=0,Monday=1, Tuesday=2 ..)
 <!DOCTYPE>
<html><body>
<p> Display Day of Week</p>
<script>
var d = new Date();
var n = d.getDay()
switch(n){
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";}
document.write("Today is "+ day);
</script>
</body>
</html>

Output: today is Sunday (from Sunday to Saturday each single day will be displayed
depending upon current day of the week.
Example: This example is same as the above but it asks the day from the user and
check for invalid day values as well. It also use the parseInt() method as well.

<!DOCTYPE>
<html><body>
<p> Display Day of Week Day Entered by User</p>
<script>
d =prompt ("Enter Number of the Day to Find name the Day of The Week");
da= parseInt(d);
switch(da){
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday"; }
document.write("Today is "+ day);
</script>
</body>
</html>
Section-5: Exercise Questions

Perform the following activities in lab.

S. no. Activities
Write a program to:
1. Determine if a student has passed in his exam or not. if the marks are
greater than 40 then he has a passed else he has a failed.
1.
2. Determine what grade he has obtained based on the marks obtained if
90-100 is a+; 80-90 is a ;70-80 is b+; 60-70 is b ; 50-60 is c; 40-50 is d
and below 40 is fail [hint : use the if-else if..-else]
Write a program using the switch statement to print the names of class
2. teacher of all grades from 1 to 10. hint: let the grade be a variable.
depending on its value, print the names of the class teacher.
if a student has an amount greater than rs 50 he uses an auto , else if he
has an amount between rs 20 to rs 50 he uses the shared auto else if he
3.
has between rs 5 to rs 20 he uses the public bus or else he walks to his
school. Write this using the if-else if -else condition
Write a JavaScript program where the program chooses a random integer
between 1 to 10, then the user is prompted to input a guess number. if the
4.
user input matches with the guess number, the program will display a
message“good Work” otherwise it will display “not matched”.
Write a JavaScript conditional statement to find the sign of product of three
numbers. Display an alert box with the specified sign such as:
5.
Sample Input numbers : 3, -7, 2
Output : the sign is: -
Write a JavaScript conditional statement to sort three numbers in
descending
6. order. display an alert box to show the result.
Sample Input numbers: 0, -1, 4
Output: 4, 0, -1
Write a JavaScript conditional statement to find the largest of five numbers.
display an alert box to show the result.
7.
Sample Input numbers : -5, -2, -6, 0, -1
Output: 0

Answer the following questions:

Q. 1: What is the use of a conditional operator? give some examples.
Q. 2: explain if the variables “name” and “name” similar.
Q. 3: Explain the rules to write an identifier.
Q. 4: What do you understand by the term local scope?
Q. 5: all students have to come to school by 9 A.M. Would this be declared as a local
scope or a global scope?
Q. 6: Will this be an acceptable string data type “yah i’m getting through’ this way”?
Q. 7: What is the purpose of the break statement?
Q. 8: What is the purpose of the switch statement? give some examples.
Q. 9: Write a JavaScript program that accepts inputs two integers and display the
largerone.
Q. 10: Fill in the blanks
(a) switch statements start with keyword.
(b) if none of the case values in the switch statement match then .............
is executed.
(c) ......................... , and are all conditional statements that can be used in
JavaScript
(d) ......................... should not be used as a variable name because it is
a reserved keyword in JavaScript.
(e) Js has two types of variable scope ..................... & ...................... .
(f) JavaScript variables are declared using ...................... as the keyword.
(g) you should not declare the same variable ...................... in the same scope

Further Readings
1. http://www.javascriptkit.com
2. https://developer.mozilla.org/en/docs/Javascript
3. http://www.dynamicdrive.com
Section-6: Looping Structure
6.1 Loops
Loops can be used to execute the same code over and over again, particularly
useful
when dealing with arrays as shown in figure 3.3. JavaScript supports different kinds
of
loops described below:
 for - loops through a block of code a number of times
 for/in - loops through the properties of an object
 while - loops through a block of code while a specified condition is true
 do/while - also loops through a block of code while a specified condition is true
For Loop
The for loop is best suited when you already know the number of times the
statements
should be executed. the loop executes until the condition becomes false.
Syntax:
for(initialization; condition; increment)
{//statements }

Fig. 6.1
When a for loop executes
1. The initializing expression is get executed and this expression usually initializes
one
or more loop variables.
2. The condition expression is evaluated. if the value of condition is true, the loop
statements are executed. if the value of condition is false, for loop terminates.
3. The increment expression executes and increments the value by the specified
step
value.
4. The statements execute, and control returns to step 2.
Example

<!DOCTYPE html>
<html>
<body>
<p> For loop Example</p>
<script>
for (i = 0; i < 5; i++) {
document.write("Hello Life! You are so Good" +"<br>"); }
</script>
</body>
</html>

Output:
Hello Life! You are so Good
Hello Life! You are so Good
Hello Life! You are so Good
Hello Life! You are so Good
Hello Life! You are so Good
Example explained
From the above example we can notice that statement 1 sets a variable before the
loopstarts (var i = 0). Statement 2 defines the condition for the loop to run (i must be
less than4). statement 3 increases a value (i++) each time the code block in the loop
has beenexecuted. in JavaScript, we normally use statement 1 to initiate the variable
used in theloop (i = 0). although, this is not always the case, JavaScript doesn’t care.
statement 1is optional. We can initiate many values in statement 1 (separated by
comma):
Example
for (i = 0, y=5; i <y; i++)
{
document.write("Hello Life! You are so Good" +"<br>");
}
Note: We can omit statement 1 when the values are set before the loop starts:
Example:
var i=0;
for (; i <5; i++)
{
document.write("Hello Life! You are so Good" +"<br>");
}
Statement 3 can be used for negative increment (i--), positive increment (i = i + 15),
oranything else.
Example:
for (i=5; i >0;i--)
{
document.write("Hello Life! You are so Good" +"<br>");

}
Statement 3 can also be omitted when we increment the values inside
the loop such as:

Example:
var i=0;
for (; i <5;)
{
document.write("Hello Life! You are so Good" +"<br>");
i++
}
For..in Loop
The for/in loop: the JavaScript for/in statement loops through the properties of an
object explain below.
Example

<!DOCTYPE html>
<html>
<body>
<p> For..in Loop Example></p>
<script>
var person = {fname:"Aman", lname:"Maan", age:35};
var text = "";
var x;
for (x in person) {
text += person[x] + " ";
}
document.write(text);
</script>
</body>
</html>

Output: Aman Maan 35

The while loop:

The While loop is another commonly used loop in JavaScript. the purpose of the
while loop is to execute a block of statements over and over again until the condition
fails. it is best suited in a scenario where we don’t know in advanced as to how many
times the loop will be executed as shown in figure 6.2.
 Fig. 6.2
Syntax for while loop

var i = 1;
while (i < 10) {
alert(i);
i = i + 1;
}
// At this point the value of i is 10

We can write the same program which was discussed in For Loop section with the
While loop. Major difference is For loop is easy to write with one line syntax whereas
in while loop the parts of loop are written separately.
Example: This is the same example of For Loop Section but executed with while
loop rather than for loop.
 <!DOCTYPE html>
<html>
<body>
<p>While loop Example</p>
<script>
var i=0;
while( i < 5)
{
document.write("Hello Life! You are so Good" +"<br>");
i++;
}
</script>
</body>
</html>

After the loop has finished, the code keeps on running from just after the closing
brace(“}”) of the loop’s block
Output:
Hello Life! You are so Good
Hello Life! You are so Good
Hello Life! You are so Good
Hello Life! You are so Good
Hello Life! You are so Good

Example: This example calculates the table up to 10. Table value is asked from the
user.
 <!DOCTYPE html>
<html>
<body>
<p> While loop Example</p>
<script>
var t = prompt("Enter Table to calculate up to 10");
x = parseInt(t);
var i=1;
while( i <= 10)
{
value = x *i
document.write( x +" * " + i + " = "+value +"<br>");
i++;
}
</script>
</body>
</html>

Output: Enter Table to calculate up to 10 : 19

19 * 1 = 19
19 * 2 = 38
19 * 3 = 57
19 * 4 = 76
19 * 5 = 95
19 * 6 = 114
19 * 7 = 133
19 * 8 = 152
19 * 9 = 171
19 * 10 = 190
do While loop

This is another kind of loop and different from the for loop and the while loop. this
loop will execute the statement at least once that is the statements inside the loopwill
always get executed at least once, even if the condition is false. the condition is
checked happens after the loop has been executed. the loop will continue to execute
orwill terminate according to on the condition as shown in figure 6.3.
do while syntax:

var i = 1;
do {
alert(i);
i = i + 1;
} while (i<10)
// At this point the value of i is 10

Fig. 6.3
Example: This example shows the difference between while an do-while. We use
the condition which Is false initially. If you use this condition in while loop it won’t be
executed but in do-while it will execute at least once.
Using While Loop

<!DOCTYPE html>
<html>
<body>
<p> Do-While loop Example</p>
<script>
var i=1;
while( i < 0)
{
document.write("Hello Life! You are so Good" +"<br>");
i++;}
</script>
</body></html>

Output:
No Output
Using Do-While Loop

<!DOCTYPE html>
<html>
<body>
<p> Do-While loop Example</p>
<script>
var i=1;
do
{
document.write("Hello Life! You are so Good" +"<br>");
i++;
}while( i < 0)
</script>
</body>
</html>
Output:
Hello Life! You are so Good

Example: This is the same example of For Loop Section but executed with while
loop rather than for loop.

<!DOCTYPE html>
<html>
<body>
<p> Do-While loop Example</p>
<script>
var i=0;
do
{
document.write("Hello Life! You are so Good" +"<br>");
i++;
}while( i < 5)
</script>
</body>
</html>

After the loop has finished, the code keeps on running from just after the closing
brace(“}”) of the loop’s block

output:
Hello Life! You are so Good
Hello Life! You are so Good
Hello Life! You are so Good
Hello Life! You are so Good
Hello Life! You are so Good

Example: Calculate the factorial of a value entered by the user.

 <!DOCTYPE html>
<html>
<body>
<p> Do-While loop Example</p>
<script>
var d = prompt ("Enter number to calculate factorial");
n = parseInt(d);
var f=1;
var i=1;
do
{
f = f* i;
i++;
} while( i <= n);
document.write("factorial of value " + n + " is " + f );
</script>
</body>
</html>

Try the given examples using different loops i.e. programs written in for loop
try these programs in while and do-while. In the same do with other loop
programs. You will get better idea.

Break and Continue

The break statement is very useful to break the loop in the middle of an execution.
the break statement can also be used to jump out of the loop. the break statement
breaks the loop and continues executing the code after the loop (if any) as shown in
figure 6.4
 Fig. 6.4
Consider a situation where you want to check if the word ‘JavaScript’ is present in
any of the given 10 sentences using a for loop. Suppose the computer finds it on the
3rd sentence, but keeps on running the loop unnecessarily till the end. by using the
break statement here, we can exit the loop and stop the unnecessary execution.
Example: This example shows the working of break statement

<!DOCTYPE html>
<html>
<body>
<p> For loop with break Example</p>
<script>
for (i = 0; i < 5; i++)
{
if( i==3)
break;
document.write("Hello Life! You are so Good" +"<br>");
}
</script>
</body>
</html>
Output: this loop will stop when i ==3 , with a break.
Hello Life! You are so Good
Hello Life! You are so Good
Hello Life! You are so Good
Continue statement skip the statement(s) below when condition is true which
enables the continue statement to be executed.
Example: This example shows the working of continue statement

<!DOCTYPE html>
<html>
<body>
<p> For loop Example</p>
<script>
for (i = 1; i <= 5; i++)
{
if( i==3)
continue
document.write("The number is " + i+ "<br>");
}
</script>
</body>
</html>

Output: this loop will skip the documents.write() statement when i ==3 set to true.
The number is 1
The number is 2
The number is 4
The number is 5

You can execute continue and break statement without if condition but it may cause
to diverse effect in the code because continue statement may fall the loop into
infinite loop if it is placed in a wrong in the code.

Example: This example shows how continue statement convert the while loop into
infinite loop.
 <!DOCTYPE html>
<html>
<body>
<p> While loop becones infinite loop Example</p>
<script>
var i=1;
while(i <= 5)
{
if( i==3)
continue
i++
document.write("The number is " + i+ "<br>");
}
</script>

Output: this loop will skip the i++ and documents.write() statement when i ==3 set
to true and becomes infinite
The number is 1
The number is 2

Section-6: Exercise Questions

Perform the following activities in lab.

S. no. Activities
Write a JavaScript program using for loop that will iterate from 0 to 15. For
each iteration, it will check if the current number is odd or even, and display
amessage on the screen.
Sample Output :
1. “0 is even”
“1 is odd”
“2 is even”
----------
----------
Write a JavaScript program which compute the average marks of the
following students.

Student name Marks

2.
Aditya 80
Akshat 77
Divyanshi88
Monika 95
 Aslam 68

Write a JavaScript program to find the Armstrong number of 3 digits.

note : an Armstrong number of three digits is an integer such that the sum
3.
of the cubes of its digits is equal to the number itself. For example, 371 is
an Armstrong number since 3**3 + 7**3 + 1**3 = 371.
Write a JavaScript program to design the following pattern, using a nested
for
loop.
*
4.
**
***
****
*****
Write a JavaScript program to calculate the factorial of a number.
in mathematics, the factorial of a non-negative integer n, denoted by n!, is
5.
the product of all positive integers less than or equal to n.
For example, 5! = 5 x 4 x 3 x 2 x 1 = 120
Write a JavaScript program to get the first n Fibonacci numbers.
6. note : the Fibonacci sequence is the series of numbers: 0, 1, 1, 2, 3, 5, 8, 13,
21, 34, . . each subsequent number is the sum of the previous two numbers.
Write a sorting program in JavaScript for ascending and descending orders.
7. sample input numbers: 34, 7, 23, 32, 5, 62
sample output: 5, 7, 23, 32, 34, 62 (ascending order)

Answer the following questions:

Q. 1: What is a loop?
Q. 2: What are the three main types of loop?
Q. 3: differentiate between do-while and while-do loop.
Q. 4: explain the purpose of loops in JavaScript.
Q. 5: explain the while and do-while loops and when to use each of them.
Q. 6: explain a real world situation where the break statement helps.
Q. 7: explain where the continue statement could help.
Q. 8: Write a JavaScript program to compute the greatest common divisor (GCD) of
two positive integers.
Q. 9: Write a JavaScript program to sum the multiples of 3 and 5 under 1000.
Q. 10: Fill in the blanks
(a) ...................... execute the same set of operations over and over again.
(b) the ...................... executes at least once irrespective of the condition.
(c) ...................... statement skips the loop execution for a particular iteration.
(d) ...................... the statement exits the loop and stops unnecessary execution
of the loop.
(e) difference between do-while loop and while loop is ...................... .

Further Readings
1. http://www.javascriptkit.com
2. https://developer.mozilla.org/en/docs/Javascript
3. http://www.dynamicdrive.com