12 Ict-X

Information
and Computer
Technology
ClassX
Central Board of Secondary Education

Shiksha Kendra 2, Community Centre, Preet Vihar, Delhi-110092 India
Information and Computer Technology Class X
Ist Edition : April 2014, CBSE India

Copy :
Price :
Paper used 80 gsm CBSE Watermark Maplitho Paper
No Part of this publication may be reproduced, stored in a

retrieval system or transmitted, in any form or any means,
electric, mechanical photocopying, recording or otherwise
without the prior permission of the publisher.
Published By : The Secretary, Central Board of Secondary Education

Shiksha Kendra 2, Community Centre
Preet Vihar, Delhi-110092
Design, Layout : Laser Tech Prints, 13/9 W.E.A., Karol Bagh

New Delhi-110005
Printed By :
U
Ug
U, U , U v- U U ,
U S U
, U U ,
U, , ,
U U S,
cU U U
U
U U
wU UcU U U
U U
U UU U w{ U, v~y~ mU ,
U U U
v. ( ) , v~|{ U w mU (x.v.v~||) - U S U S
w. ( ) , v~|{ U w mU (x.v.v~||) UcU S U S
y

zv . - U U U U U
() U U U Z, S, UcU U UcU U U;
() S UU UcU U U U Z NU U U U U;
() U , U U U U U U U;
() U U U U U UcU U;
() U U U U , U U U
U U, U S L U;
() UU S U UU U U U U U;
(U) U , , , U U, U U U U U
U;
() cU, U U U;
() U U U U U UU;
() U U U U U U UcU UU U U
U U U ;
v(U) - U U, UU U , S,
U U
v. (U ) , w mU S
THE CONSTITUTION OF INDIA
PREAMBLE
We the people of India, having solemnly resolved to constitute India into a 1Sovereign
Socialist Secular Democratic Republic and to secure to all its citizens:
Justice, social, economic and political;
Liberty of thought, expression, belief, faith and worship;
Equality of status and of opportunity; and to promote among them all
Fraternity assuring the dignity of the individual and the2 unity and integrity of the Nation;
In our constituent assembly this twenty-sixth day of November, 1949, to hereby
adopt, enact and give to ourselves this constitution.
1. S ubs, by the Constitution (Forty-Second Amendment) Act. 1976, sec. 2, for Sovereign Democratic Republic
(w.e.f.. 3.1.1977)
2. Subs, by the Constitution (Forty-Second Amendment) Act. 1976, sec. 2, for Unity of the Nation (w.e.f.. 3.1.1977)
Chapter IV A
Fundamental Duties
Article 51A
Fundamental Duties: It shall be the duty of every citizen of India:
(a) to abide by the Constitution and respect its ideals and institutions, the National Flag and the
National Anthem;
(b) to cherish and follow the noble ideals which inspired our national struggle for freedom;
(c) to uphold and protect the sovereignty, unity and integrity of India;
(d) to defend the country and render national service when called upon to do so;
(e) to promote harmony and the spirit of common brotherhood amongst all the people of India
transcending religious, linguistic and regional or sectional diversities; to renounce practices
derogatory to the dignity of women;
(f) to value and preserve the rich heritage of our composite culture;
(g) to protect and improve the natural environment including forests, lake, rivers, wild life and to
have compassion for living creatures;
(h) to develop the scientific temper, humanism and the spirit of inquiry and reform;
(i) to safeguard public property and to abjure violence;
(j) to strive towards excellence in all spheres of individual and collective activity so that the nation
constantly rises to higher levels of endeavour and achievement;
1(k) to provide opportunities for education to his/her child or, as the case may be, ward between age
of 6 and 14 years.
1. Subs, by the Constitution (Eighty-Sixth Amendment) Act. 2002.

Foreword
In the 21st century, an ability to work with information and communication technologies
is becoming as essential to education, life and workplace success as reading, writing and
arithmetic.
Information Communication Technology (ICT) has anextensivehorizon and includes all

the technologies used for communication of information. These includedevices such as
computers, internet and intranet, local and wide area networks (wired and wireless), voice
mail, e-mail,audio visual systems, compact discs and video discs, broadcast receiving systems
and telecommunication systems, media, printed media, virtual learning centers,instructional
software, education television, satellite communication, cable TV, conventional and interactive
radio used in teaching and learning.
In this century it has become mandatory that everyone must have a basic understanding of
ICT and must learn to make productive use of it, in-order to be good students and employable
workers.Hence it is necessary for teaching fraternity to make a conscious effort and devise
curriculum to impart valuable knowledge and skills required for computing and communications
devices i.e. software that operates them, applications that run on them and systems that are
built with them.
Be it e-learning, blended learning or distant learning ICT has completely penetrated in school
education and has brought a major transformation inteaching and learning process. It has
become an integral and indispensable part of modern education system.
Recognizing the potential value of ICT in education, CBSE wants to ensure proper integration
of ICT in schools and its use in pedagogy.
I am happy to release Information and communication Technology Book for Class X. I would
like to express my deep appreciation to the text book development team for their contribution.
Appreciation is also due to Dr. Sadhana Parashar, Prof. and Director (Academics, Research,
Training and Innovation) and Dr. KshipraVerma, Education Officer, CBSE in bringing out
this publication.
It is hoped that all students and teachers will benefit by making best use of this publication.
Their feedback will be highly appreciated for further improvement.
Vineet Joshi
Chairman
Acknowledgements
CBSE ADVISORS
Shri Vineet Joshi, Chairman, CBSE
Dr. Sadhana Parashar, Prof. & Director
(Academics, Research, Training and Innovation)
DEVELOPMENT TEAM
Ms. Anuradha Aggarwal, Lecturer, Sri Ram College of Commerce, Delhi University
Ms. Bhawana Garg, Tagore International, Vasant Vihar, Delhi
Ms. Kshipra Verma, Education Officer, CBSE, New Delhi.
Ms. Ritu Ranjan, Indrapastha International School, Paschim Vihar, New Delhi.
EDITORS
Ms. Anju Jhanji, DAV School, Gurgaon
Ms. Garima Gupta, DLDAV Public School, ND Block, Pitam Pura, New Delhi
Ms. Sutapa Sen, Consultant
MEMBER COORDINATOR
Ms. Kshipra Verma, Education Officer, CBSE, New Delhi.
Content
Foreword
Acknowledgement
Chapter 1: Computer and its Components 117

Introduction
Hardware and Software 2
Software 6
Computers Characteristics 8
Generations of Computers 8
Categories of Computers 9
Applications of Computers 11
Input Process Output (IPO) 11
COMPUTER PORTS AND CABLES 12
Chapter 2: Advanced GIMP 1838

Introduction 18
Review of GIMP Covered in Class IX 18
Tool box 19
Steps to use the Tools stated above used in GIMP are as follows 21
Layers 29
Masking 33
Chapter 3: Tables 3967

Introduction 39
Structure of <Table> tag 40
The TH or TD element 49
The CAPTION tag 52
Frames 54
Chapter 4: Forms 6880
Introduction 68
Method Attribute of Form 69
Input tag 70
Chapter 5: DHTML & CSS 81108

Introduction 81
DHTML 81
Cascading Style Sheets (CSS) 83
Font 86
COLOR Properties 93
Background Properties 101
Chapter 6: Network Security 109132

Introduction 109
Basic Terminology 110
Most attacks can be categorized as one of six broad classes 117
Cyber Crimes 119
Chapter 7: Project 133168

Sample Case Studies 134
Chapter 1
Computer and its Components
Learning Objectives
By the end of this chapter, learner will be able to:
List five computer applications which are used on the daily basis.
Identify the different Input / Output devices.
Describe the process of changing data from input to output (The IPO cycle).
Explain the connectivity of devices through different kinds of ports.
Differentiate between primary and secondary memory.
State the purpose of different softwares.
Tabulate the difference between different types of computers according to their size and
processing capabilities.
Introduction
The computer is just a dead collection of plastic, silicon and metal until you press the
Power button. One little burst of electricity and it starts a string of events that puts life
and power into the machine. But, even at this stage, the computer is unaware of the
potential that it holds within itself. The computer, today, is a fundamental part of the
information age.
Initially, computers were developed to perform mathematical operations, but later on, they
were used to store the result of those operations, which with the time leads to the storage
of other data or information.
As we are talking about data and information, now we will learn what data is and what
is called as information?
Data is a collection of unprocessed facts, figures, and symbols.
e.g. Ram, age, 32, years, old
Computer and its Components 1

Information is a processed form of data. It is organized, meaningful, and useful.
e.g. Ram is 32 years old. Or Rams age is 32 years.
A computer can be defined as an advanced electronic device that takes raw data as input
from the user. It uses a set of instructions (called program) to process the data and give
the result (output). The result can be used immediately or saved for future use.
1. Hardware and Software

In the process of converting data to information, a computer uses hardware and software.
At the simplest level, all computers consist of these two basic components; the hardware
and the software.
Hardware is any part of the computer that has a physical structure that can be seen and
touched, though some may be so tiny that they are invisible to the naked eye.
Software is the instruction set that tells the computer how to perform tasks. Software is
intangible i.e., that cannot be seen and touched, but its effect is clearly defined.
Input devices, output devices, a system unit, storage devices, and communication devices
are all components of computer hardware.
1.1 Hardware components are classified into following categories

I. Input Devices
Input devices are the devices that allow a user to enter data and instructions into a
computer such as keyboard, mouse, microphone, scanner, trackball, joystick, graphics
tablet and digital camera.
The various functions of input devices are:

They accept data and instructions from the user.
They convert these instructions and data from human readable form to machine
readable form.
They supply the converted instructions and data to the CPU for further
processing.
2 Information and Computer Technology

Mouse Keyboard Microphone Scanner
Trackball Joystick Graphics Tablet Digital Camera
II. Output Devices

Output devices are used to display the result or information to the user through monitor
or VDUs, LCDs, printers, plotters and speakers.
Functions of output devices can be summed up as follows:

It accepts the results produced by the computer which is in the coded form or machine
readable form.
It converts these coded results into human readable form.
It supplies the converted results to the user.
Monitor or VDU Printers Plotters Speaker
III. Storage devices

Storage devices are the devices which are used to retrieved from and saved to the data
and information such as hard drives, memory sticks (pen drives), compact discs, DVDs
and tape drives.

1. Floppy disks were developed in late 1960s. A floppy disk is made up
of a circular thin plastic jacket coated with magnetic material. Its outer
cover which is a hard plastic protects this plastic disk. It can hold 1.44
MB data. Nowadays, these disks are outdated.
2. Hard Disk is made up of a metal disk and coated with a
metal oxide used to store bulk of data. These disks can store
more information than floppy disks, up to tens or hundreds
of gigabytes.
Cover Mounting Holes

Base Casting (Cover not shown)
Spindle
Slider (and Head) Case Mounting Holes
Actuator Arm
Actuator Axis
Ribbon Cable (attaches
Actuator
heads to Logic Board)
SCSI Interface Connector
Jumper
Jumper Pins Platters
Power Connector
3. Compact Disk Read Only Memory or CD-ROM is a read only or read-write disk.
It can store large amount of data which can be distributed to large number of users.
It is inexpensive and fast, but its access time is longer than that of magnetic disk.
There are two types of CDs: CD-R and CD-RW.
CD-R stands for Compact Disk Recordable which can store 700
MB of data, but only once.
CD-RW stands for Compact Disk ReWriteable which can read,
write and erase data as many times.
4. DVD, short for Digital Versatile Disc, is an optical storage disc similar
to CD-ROM, as this is double sided with dual layer disc and can hold
4.7 GB of data.
5. Blue-Ray Disks are used to store more than 25 GB of data with a very high speed
in less amount of time. A single layer of BD can store 13 hours of video where as
double layer BD can store more than 20 hours of video.

6. USB stands for Universal Serial Bus. It is a portable memory device
which is used to store data that needs to be transferred to the other
device using USB port of the system.
7. Memory Card or flash memory card is a memory device. It is used as
an easy, fast and reliable medium to store and transfer data from one
device to the other. It is used in digital cameras, game consoles, mobile
phones etc.
1.2. CPU (Central Processing Unit)

The system unit is the box that protects the internal electronic components from damage.
It contains the central processing unit (CPU) and memory. The CPU interprets and
carries out the basic instructions that operate the computer. Memory is where data and
instructions are held.
The heart of the computer system is the processor unit. It consists of the Arithmetic and
Logic Unit (ALU) which executes most computer operations (arithmetic and logical)
and the Control Unit which acts as the nerve centre that sends control signal to all other
units.
The control unit and ALU are usually many times faster than other devices connected to a
computer system. This enables a single processor to control a number of external devices
such as video terminals, magnetic tapes, disk memories, sensors, displays and mechanical
controllers, since they are much slower than the processor.
1.3. Memory
There are two categories of memory, primary memory and secondary memory (or external
memory).
Primary Memory is very fast as data and programs must be in the primary memory for
execution. Random Access Memory (RAM) and Read Only Memory (ROM) are both
primary memory.
Random Access Memory refers to memory that can be selected and used randomly. The
information stored here disappears the very moment the machine is turned off. It is also
referred to as volatile memory.
Read Only Memory is permanently built into the computer at the time of production.
The information from this memory can only be read and it is not possible to write fresh

information into it. It permanently stores a set of instructions which instructs the computer
how to work. After we switch on the computer, it uses instructions stored here to carry
out a series of tasks automatically, before we can actually use the computer.
Secondary Memory or Auxiliary Memory: The content on the RAM is erased when
electric power is switched off. So, it becomes necessary to store this data for future use,
somewhere else. Since, primary storage is expensive too; we need a relatively cheaper
form of backup storage which can store vast quantities of information. Thus, Secondary
Memory devices become an important part of the computer.
1.3.1 Units of Memory

Memory, storage, files and folder sizes are all measured in bytes. Computers work in
the base 2 system, also called binary number system, using only the digits 0 and 1. A
single numeric value using either 0 or 1 is called a bit. A sequence of bits make a byte.
Usually eight bits make a byte (sometimes it could be sixteen, thirty two or even sixty
four). Bits are grouped into bytes to increase the efficiency of the computer. To describe
large capacities, the terms Kilobyte (KB), megabyte (MB), gigabyte (GB), terabyte (TB)
and Petabyte (PB) are used.
1 nibble = 4 bits 1 byte = 8 bits

1 KB = 1024 bytes 1 MB = 1024 KB
1 GB = 1024 MB 1 TB = 1024 GB
1 PB = 1024 TB
2. Software
A computer systems hardware must have software to function. There are two primary
types of softwares: Application software and Systems software.
Software
Application System
General Purpose Tailor made or Operating System Utility Software

Customised

2.1 Application software
It includes programs that direct the computer to carry out specific tasks. Often, multiple
programs are integrated to create an application. For example: To write error free
documents, Word Processors are used such as OpenOffice.org Writer, MS Word etc. For
calculations, Spreadsheets are used such as OpenOffice.org Spreadsheet, Ms Excel etc. For
making presentations, Presentation Softwares are used such as OpenOffice.org Impress,
MS PowerPoint etc. For designing images, Desktop publishing softwares are used such as
Gimp, Adobe Photoshop, Corel Draw, Picasa etc.
Whereas, at the same time, there are application softwares that are created to address
specific needs of a group of specialized users and are, therefore, known as tailored or
customized software to perform the required tasks in a specific manner. There are many
packaged softwares available, addressing specific needs of small or big groups of users.
You have a Tally or a QuickBooks to address a small businessmans accounting needs,
but it can also serve a large multinational company.
2.2 System software

System software includes the programs that enable the computers hardware to work with
and run the application software. System software is the interface between user and the
other programs and the computers hardware.
2.2.1 There are two categories of system software: operating systems and
system utilities.
The operating system, also referred to as the OS, is a computer program that manages all
the other programs on your computer, stores files in an organized manner, and coordinates
the use of the computer hardware such as the keyboard and mouse. The operating system
frees one from having to interact directly with the hardware other than clicking the
mouse button or pressing keys on the keyboard to complete tasks.
Utility software is a form of system software. It is used to analyze, configure, optimize or

maintain the computer. This software performs all the housekeeping functions.
The utility softwares are categorised into the following categories:

1. Text Editors facilitate the creation of flawless text documents. WordPad and Notepad
are the commonly used text editors.
2. Compression Utilities are used to compress the selected files. It helps to save the
space on the disk and to transfer heavy files on a network.

3. Disk Fragmentation utility helps the user to arrange used and free space on the hard
disk which in turn increases the processing speed of the disk.
4. Scan Disk utility checks for the problems on the hard disk such as bad sectors, viruses
etc.
5. Encryption or Decryption utility is used to hide the data for secured transmission.
At the source, data is encrypted and at the destination device, data is decrypted to
reveal the original message. Decryption requires a secret key or password.
3. Computers Characteristics
Speed: A computer computes problems much faster than a human being.
Accuracy: With the high computation speed, computers are able to produce accurate
results. If the input is valid, only then correct output will be produced as computers follows
GIGO i.e. Garbage In Garbage Out principle.
No IQ: It is programmed to carry out tasks and performs exactly as instructed, since it
has no intelligence of its own.
Diligence: It can carry out tasks over and over again with exactly the same result every
time, and it does so without tiring.
Data Storage: Using different kinds of storage devices, it can store huge quantities of data
over long periods of time.
No Heuristics: As computer is a dumb machine, thus it never ever learns from its past
experiences.
4. Generations of Computers
The first electronic computer was designed and built at the University of Pennsylvania
based on vacuum tube technology.
Computers have been divided into five generations according to the development of
technologies used to fabricate the processors, memories and I/O units.
I Generation (1945 55) Bulky, vacuum based and costly, used assembly language
which was translated to machine level language for execution. These computers
were used mainly for scientific calculations. Examples: ENIAC, EDSAC, EDVAC,
UNIVAC.

II Generation (1955 65) Smaller than vacuum based computers, but better
performance-wise, used transistors instead of vacuum tubes. High level languages
such as FORTRAN and COBOL were used. Punched cards continued to be used
during this period. Computers, then, were used increasingly in business, industry
and commercial organizations. Examples: IBM 7030, Honeywell 400.
III Generation (1965 75) Small Scale Integration and Medium Scale Integration
technology were implemented in CPU, I/O processors etc. Faster processors with
magnetic core memories that were later replaced by RAM and ROM. This is when
microprogramming was introduced as were operating system software. Database
management, multi-user application, online systems like closed loop process control,
airline reservation, interactive query systems, automatic industrial control, etc.
emerged during this period. Examples: System 360 Mainframe from IBM, PDP-8
Mini Computer from Digital Equipment Corporation.
IV Generation (1975 89) Microprocessors were introduced where complete

processors and large section of main memory could be implemented in a single
chip. CRT screen, laser & ink jet printers, scanners etc. were developed and so were
LAN and WANS. C and UNIX were used. Examples: Intels 8088,80286,80386,80486
.., Motorolas 68000, 68030, 68040, Apple II, CRAY I/2/X/MP etc.
V Generation: 1989 to present Computers use extensive parallel processing, multiple

pipelines, multiple processors etc. Portable notebook computers introduced. They
also started using object oriented languages such as JAVA. Quantum mechanism
and nanotechnology available here will radically change computers for all times.
Examples: IBM notebooks, Pentium PCs-Pentium 1/2/3/4/Dual core/Quad core. SUN
work stations, Origin 2000, PARAM 10000, IBM SP/2.
5. Categories of Computers
Computers are classified into many categories depending upon their size, functioning and
processing capabilities.
5.1 According to how it functions, computers can be classified into three

categories
Analog: According to the Merriam Webster Dictionary, computersin which continuously
variable physical quantities, such as electrical potential, fluid pressure, or mechanical
motion, are used to represent (analogously) the quantities in the problem to be solved
are called analog computers.

Digital: These computers deal with data in the form of numbers. They mainly operate by
counting and performing arithmetic & logical operations on numeric data. Such computers
are many problems oriented.
Hybrid: Digital computers could not deal with very large numbers and so, a computer
with characteristics of both analog and digital was created which was known as Hybrid
computer.
5.2 According to the size, computers are classified into the following
categories
Palmtop, better known as Personal Digital Assistants (PDAs), are small, lightweight and
tightly integrated computers which usually do not have keyboards but rely on touch screen
technology for user-input.
Laptops and Notebooks are portable computers. They include a battery that provides
electrical backup for a period of time.
Personal computer (PC) is small in size and is designed for general use by a single
person.
Desktop computer is typically set up in a permanent location and is a PC that is not portable.
A desktop computer is a PC built for high performance and heavy workload. It helps in
faster rendering of complex graphics, provides power for computer intensive applications
and memory for large tasks. They are more reliable and have less downtime.
Micro-computers came into being with the invention of the micro-processor. They are
not so expensive. The personal computer is a micro-computer.
Mini computers provide more power than micro computers in terms of speed and
storage capacity. They are also less expensive. Their performance is also lower than that
of mainframes.
Mainframe computers can also process data at very high speeds, but less than that of
super computers. Normally, they are used in banking, airlines and railways etc. for their
applications.

A supercomputer is the fastest type of computer. They are employed for specialized
applications that require large amounts of mathematical calculations. A supercomputer
channels all its power into executing a few programs at great speed, whereas a mainframe
uses its power to execute many programs at the same time. These computers are used
to solve problems involving quantum mechanical physics, weather forecasting, climate
research, molecular modelling such as computing the structures and properties of chemical
compounds, simulations, cryptanalysis, and many others.
6. Applications of Computers
Computers are used in almost all walks of life today. In medicine and health care, in
education and business, in the manufacturing and service industries, for science and
research; computers are the most important tool used by human beings.
7. Input Process Output (IPO)

Input-Process-Output cycle or IPO refers to the stages that a set of instructions undergo
to achieve the desired result. The computer is not a magic box where things get done
automatically. The information, through various input devices, is fed into the system to be
processed by the CPU. The information is then received as output in the desired format
and presented in human readable form.
Process (CPU)
Input Output
Memory
Diagram of a computer of IPO
e.g. To make a Cup of Tea:
Take Ingredients:
Water, Sugar, Tea Leaves, Boil all the ingredients in
Tea is ready to serve
Milk a bowl & filter it
Input Process Output

8. COMPUTER PORTS AND CABLES
8.1 PS/2 Ports
The PS/2 Ports are simple, 6-pin, low-speed serial connections
commonly used to connect a keyboard and mouse. If you select
to use a USB keyboard and mouse, you can disable the PS/2 ports
in the systems CMOS setup and free the PS/2 system resources
for other devices.
8.2 VGA Monitor Port

Video Graphics Array is used to connect the monitor to the
computer. VGA offers images at higher resolutions. The standard
VGA can produce as many as 256 colors at a time from a palette
of 262,144 colors. The original VGA, though, had to be at a
320x400 resolution to display this amount of color. At the standard
640x480 resolution, it was only capable of 16 colors at a time.
It uses color summing to translate color graphics into graphics
using 64 different shades of grey. This, in effect, simulates color
on a monochrome monitor. VGA requires a VGA monitor, or
one capable of accepting the analog output of a VGA card.
8.3 Parallel Port

Printers and other devices are said to be either parallel or serial.
Parallel means the device is capable of receiving more than one
bit at a time (that is, it receives several bits in parallel). Most
modern printers are parallel.
8.4 Ethernet Port

There is a built in Ethernet port on most computers to
connect it to a wired network. Ethernet ports are also
found on all popular broadband routers.

8.5 S-Video Port
Short for Super-Video, a technology for transmitting video
signals over a cable by dividing the video information into
two separate signals: one for color (chrominance), and the
other for brightness (luminance). When sent to a television,
this produces sharper images than composite video, where
the video information is transmitted as a single signal over
one wire. This is because televisions are designed to display
separate Luminance (Y) and Chrominance (C) signals. (The
terms Y/C video and S-Video are the same.)
Computer monitors, on the other hand, are designed for RGB signals. Most digital video
devices, such as digital cameras and game machines, produce video in RGB format.
Therefore, the images look best when output is on a computer monitor. When output is
on a television, however, they look better in S-Video format than in composite format.
To use S-Video, the device sending the signals must support S-Video output and the device
receiving the signals must have an S-Video input jack. Then, you need a special S-Video
cable to connect the two devices.
8.6 USB Port

Universal Serial Bus, a protocol for transferring data to and
from digital devices. Many digital cameras and memory
card readers connect to the USB port on a computer. USB
card readers are typically faster than cameras or readers
that connect to the serial port, but slower than those that
connect via FireWire which is an external bus standard that
supports data transfer rates of 12 Mbps. A single USB port
can be used to connect up to 127 peripheral devices, such
as mouse, modems, and keyboards. USB also supports Plug-and-Play installation and hot
plugging.
8.7 FireWire IEEE 1394 Port

FireWire is a cabling technology for transferring data to and
from digital devices at high speeds. Some professional digital
cameras and memory card readers connect to the computer
over FireWire. FireWire card readers are typically faster than

those that connect via USB. Also known as IEEE 1394, FireWire was invented by Apple
Computer, but is now commonly used with Windows-based PCs as well.
8.8 Mini Audio Jack

Audio connectors are used to affix cables to other audio
equipment, providing electronic signal transference and
grounding protection. Connectors may be plugs, jacks, or
combinations, and may have an integral switch. Plug type
audio connectors are a plug, or male, connector includes pins
that can be inserted into a socket. Jack type audio connectors
are a jack, or female, connector consists of sockets that are
aligned to mesh with a pin-type connector. Combination
plug and jack connectors are also available.
Summary
1. Data is a collection of unprocessed facts, figures and symbols.
2. Information is a data that is organised, meaningful and useful. It helps in decision making
processes.
3. Hardware refers to the components that can be seen or touched. It comprises of input devices,
output devices, system units, storage devices and a communication devices.
4. Software is a set of instructions that tells the computer to perform the task.
5. Primary memory helps in the fast execution of the program and it compromises of RAM
and ROM.
6. Secondary memory is also known as Auxiliary Memory. It helps to store the data permanently
using available storage devices such as Hard Disk, DVD, USB, etc.
7. Operating system is a computer program that manages all other programs stored on the
computer.
8. IPO refers to input-process-output cycle which is followed by the computer system to achieve
the desired result.
9. Most keyboards attach to the PC via PS/2 connector or USB port.
10. Pointing device such as mouse is connected to the PC via a serial port, PS/2 mouse port or
USB port.
11. The process of decoding data that has been encrypted into secret format is called
decryption.

Exercise
A. Multiple choice questions
1. The collection of unprocessed facts, figures and symbols is known as ____________.
(a) Information (b) Software
(c) Data and Information (d) None of the above
2. ______________ is the processed form of data which is organized meaningful and
useful.
(a) Information (b) Software
(c) Data (d) None of the above
3. Hardware is any part of the computer that has a physical structure that can be seen and
touched.
(a) True (b) False
(c) Not sure (d) None of the above
4. Components of computer hardware are ____________________________.
(a) Input devices and output devices (b) A system unit and storage devices
(c) Communication devices (d) All of the above
5. __________ devices accept data and instructions from the user.
(a) Output (b) Input
(c) Components of hardware (d) Storage
6. Which disk is made up of a circular thin plastic jacket coated with magnetic material?
(a) Hard Disk (b) Compact Disk
(c) DVD (d) Floppy Disk
7. ___________ disks are used to store more than 25 GB of data with a very high speed in
less amount of time.
(a) Digital Versatile (b) Compact
(c) Blue-Ray (d) None of the above
8. Random Access Memory and Read Only Memory are examples of _______________.
(a) Primary Memory (b) Secondary Memory
(c) Auxiliary Memory (d) Both primary and secondary memory
9. Which system uses only the digits 0 and 1?
(a) Bits (b) Binary number system
(c) Secondary number system (d) Nibbles
10. There are two primary types of softwares namely _________ and __________.
(a) General Purpose and tailor made
(b) Operating System and utility software
(c) Application Software and System Software
(d) None of the above

11. Gimp, Adobe Photoshop, Corel Draw, Picasa etc. are examples of _________ softwares.
Spreadsheets
(a) Word Processors (b) Desktop publishing
(c) Presentation
12. Which generation computers used high level languages such as FORTRAN and COBOL and
also used transistors instead of vacuum tubes?
(a) I Generation (b) II Generation
(c) III Generation (d) V Generation
13. IBM notebooks, Pentium PCs-Pentium 1/2/3/4/Dual core/Quad core, PARAM 10000 are
examples of which generation of computers?
(a) I Generation (b) IV Generation
(c) III Generation (d) V Generation
14. According to the functioning of computers, they are divided into three categories namely
_____, ________ and ________.
(a) Mainframe, Supercomputer and Mini computer
(b) Analog, Digital and Hybrid
(c) Palmtop, PC and Desktop
(d) Micro-computers, Digital and Hybrid
15. ___________ is a cabling technology for transferring data to and from digital devices at
high speeds.
(a) S-Video Port (b) FireWire
(c) Ethernet Port (d) PS/2 Port
16. ______________ is used to connect the monitor to the computer which offers images at
higher resolutions.
(a) USB Port (b) Video Graphics Array
(c) Parallel Port (d) None of the above
B. Answer the following questions:

1. Explain the following terms
(a) RAM (b) Nibble
(c) Digital Computers (d) Ethernet Port
2. Name any two utility softwares.
3. Why there is a need of Auxiliary Memory?
4. Differentiate the following
(a) Hardware vs Software
(b) RAM vs ROM
(c) Application Software vs System Software
(d) Digital vs Analog

5. Explain the functions of operating systems .
6. Explain in brief all the generations of computer .
7. Draw and explain IPO cycle .
8. Name any 4 application areas of computer .
9. How the computers are classified according to their processing capabilities .
10. Differentiate between Ethernet Port and USB .
C. Lab Session
1. State whether the following statements are true or false
(a) The input device receives data in machine readable form
(b) The Arithmetic and Logic Unit and the Central Processing Unit are part of the Control
Unit
(c) The plotter is an input device
(d) RAM and the ROM storage is effected by the presence of electricity.
2. Justify the statement Computers are used only to collect data for science and research
as either true or false.
3. Tanya is working on a project in her school. For the same, she wants to store multimedia
information in a portable storage device. Her information is subject to change as per her
needs. Which storage device would you recommend? Why?
4. Prem Das is an editor and is currently working in a popular News House group. His job
includes writing stories and articles for his newspaper. For writing his documents, he uses
WordPad and Notepad, but is facing problems with the formatting of the document. He
is also not able to check the grammatical errors. Which type of software should he be
using and why?
5. Mr. Shivank works in a multinational company. He often has to travel in and out of the
country in order to complete his tasks. He wants to buy a computer that is portable
and can be easily carried overseas. Which kind of computer should he buy to store his
important information and data?
6. Where do you store the set of instructions that gets the computer ready to receive
instructions? Discuss the different tasks performed by the OS.
7. Without prior knowledge, a user cannot interact with the computer. Do you agree with
this statement? Justify your answer.

Chapter 2
Advanced GIMP
Learning Objectives
After learning this chapter learner will be able to:-
State the purpose of using Gimp software.
List the features of Gimp.
Use advance tools of Gimp for editing the images.
Align different objects placed in a Layer.
Create image by merging two or three images using Layers.
View the images in different dimensions using Perspective tool.
Apply different effects on image using Masking option.
Introduction
GIMP is called multi-platform photo manipulation tool. Since, GIMP is free software,
it is covered by the General Public License [GPL]. The GPL provides the users with the
freedom to access and alter the source code. In this chapter, you will learn advance tools
of Gimp used to give different projections to the image to get the desired result.
1. Review of GIMP Covered in Class IX

GIMP is a GNU Image Manipulation Program. It is a powerful open source image editing
tool that provides retouching, authoring and composition of photos. It consists of the
features similar to the ones provided by the other available Photo Editing software. It is
freely downloadable software, which can be downloaded from www.gimp.org site.
GNU/Linux distributions include GIMP as a standard application. The GIMP is also

available for other operating systems such as Microsoft Windows or Apples Mac OS X
(Darwin).
1.1 Features of GIMP are:

It can be used as a simple paint program
It can be used as an expert quality photo retouching program.
It can be used as an online batch processing system.

It can be used as a mass production image producer to develop different models.
The advanced scripting interface allows everything from the simplest task to the
most complex image manipulation procedures to be easily scripted.
It can convert and save files to many file formats such as gif, jpeg, tiff.etc
It can load and save animations in a convenient frame as layer format.
Virtually unlimited images can be opened at one time.
GIMP works with numerous operating systems including Linux, Mac OS and
Microsoft Windows.
2. Tool box
The Basic tools were learnt in Class IX. Here we would learn some advanced tools.
2.1 Move Tool [M]

The Move Tool is used to move
layers, selections, paths or Rectangle Select tool Oval select tool
guides of both the objects and Lasso too Fuzzy select tool tool
the text. Select by color Scissors tool
Foreground select tool Paths tool

2.2 Align Tool [Q] Color picker tool Zoom tool
The Align tool is useful to align Measure too Move tool
the image layers with various image
Alignment too Crop tool
objects.
Rotate tool Scale tool
2.3 Scale Tool [Shift + T] Shear tool Rectangle Select tool

The Scale Tool is used to scale layers, Flip tool Cage transform
selections or paths (the Object). Text tool Bucket fill tool
Blend tool Pencil tool

2.4 Shear Tool [Shift + S]
Paintbrush tool Eraser tool
Shear tool is used to shift one selected
Airbrush tool Ink tool
part of an image, a layer, a selection
or a path to a direction and the other Clone tool Heal tool
part to the opposite direction. For Perspective tool Blur/sharpen tool

instance, a horizontal shearing will Smudge tool Dodge/Burn tool
shift the upper part to the right and
Foreground color Background color
the lower part to the left.
Advanced GIMP 19
2.5 Perspective Tool
The Perspective Tool is used to view the images in different dimensions, of the active
layer content.
2.6 Flip an Image

In a photo, if the face of a person is in the left side direction, this tools changes the direction
of the face to the right side. It creates the mirror image of the photo.
2.7 Rotate an Image

This tool is used to rotate an image in different directions i.e. from horizontal to vertical
and vice versa.
2.8 Blend Tool [L]

This tool is used to fill the selected area with a gradient blend of the foreground and
background colours by default. These colours can be modified to change the colour of
the gradient.
2.9 Blur/Sharpen Tool [Shift +U]

This tool is used to blur or sharpen the image using the current brush. Note that in
Sharpen mode, the tool increases the contrast where the brush is applied.
2.10 Smudge Tool [S]

The Smudge tool uses the current brush to smudge colours on the active layer or the
selection. It takes the colour and uses it to mix it with the next colour it meets.
2.11 Dodge/Burn Tool [Shift + D]

The Dodge tool uses the current brush to lighten the colors in your image.
The Burn tool uses the current brush to darken the colors in your image.
The mode will determine which types of pixels are affected.
2.12 Eraser Tool [Shift + E]

Eraser Tool works similar to a classic eraser. Simply select the tool and drag on the canvas
to erase things.

2.13 Pencil tool [N]
The Pencil Tool is used as the same way that you would use a real pencil to draw. Simply
select the tool and drag on the canvas to draw with the Pencil Tool.
2.14 Paintbrush tool [P]

The Paint Brush tool draws brush like strokes, as if you were painting. It lets you create
special effects. Unlike the Pencil Tool, the brush tool draws both a fill and outline.
3. S
teps to use the Tools stated above used in GIMP
are as follows
3.1 Move Tool [M]
The Move Tool is used to move layers, selections, paths or guides. It works also on
texts.
You can access the Move Tool in different ways:
From the image menu barToolsTransform ToolsMove
By clicking the tool icon:
By using the keyboard shortcutM.
The Move tool is automatically activated when you create a guide.
To use this tool simply click on the canvas and drag the selection to a desired location.
Note: Holding down the space bar changes the active tool to Move temporarily.
Layer
Selection
3.2 Move Tool Options Move
Path
Normally, tool options are displayed in a window attached Move:
Tool Toggle (Shift)
under the Toolbox as soon as you activate a tool. If they Pick a layer or guide
are not, you can access them from the image menu bar Move the active layer
through
Windows Dock able Windows Tool Options which

opens the option window of the selected tool.
Advanced GIMP 21
If Move is on Layer
Only the current Layer
will be moved.
If Move is on Selection
The selections outline will
be moved.
If Move is on Path - The

mouse pointer turns to a
Selected part of the Image is moved
small hand when it goes
over a visible path. Then you can move this path by click-and-dragging it (it will be the
active path while moving.
3.3 Align Tool

The Align tool is useful to align the image layers with various image objects. When this
tool is selected, the mouse pointer turns to a small hand. By clicking on an element of
a layer in the image, you choose the layer which will be moved (with Shift + click, you
can choose several layers to be aligned), this focalised layer has small squares in corners.
Various buttons in the dialog allow you to select how the layer will be moved. And you
can select the image object (other layer, selection, path...) the selected layer will be aligned
on. This object is called target.
You can activate the Align tool in several ways:

From the image-menu, through: Tools Transform Tools Align
Align
Align, By clicking on the tool icon: in the toolbox, By using Relative to:
First item
the Q keyboard shortcut.
3.4 Align Tool Options

Distribute
The options of Align Tool become active when a layer
is selected. When you click on one of these buttons, you align

the selected layer with left edge, horizontal middle, right edge, Offset:
top edge, vertical middle, or bottom of the target.
These options seem to differ from the Related to options only by the possibility to
set an offset. This offset is the distance which will separate the selected layer(s) from

the target once the alignment is performed.
Distribute add this offset to the left edges,
horizontal centres, right edges, top edges,
vertical centres, or bottoms of targets.
Images using different alignments

3.5 Scale Tool [Shift + T]
The Scale Image command enlarges or reduces the physical size of the image by changing
the number of pixels it contains. It changes the size of the contents of the image and resizes
the canvas accordingly.
You can access this command from the image menubar through Image Scale Image.
Image Layer Colors Tools Filters Windows Help
Duplicate Ctrl+D
Mode
Transform
Canvas Size...
Fit Canvas to Layers
Fit Canvas to Selection
Print Size...
Scale Image...
Crop to Selection
Autocrop Image
Step 1: Click on Image Scale Image

Zealous Crop
Merge Visible Layers... Ctrl+M

Flatten Image
Aligh Visible Layers...
Guides
Configure Grid...
Image Properties Atl+Return
Step 2: Set the width and height and click on scale
Scale Layer
Scale Layer
Earthi.jpg-20 ([Earth] (imported))
Layer Size
Width: 1940
Height: 1941 px
1940 1940 pixels
300 ppi
Quality
Interpolation: Cubic
Image after scaling

Help Reset Scale Cancel
Advanced GIMP 23
3.6 Shear Tool [Shift + S]
Shear tool is used to shift one part of an image, a layer, a selection or a path to a direction
and the other part to the opposite direction. For instance, a horizontal shearing will shift
the upper part to the right and the lower part to the left.
You can use the shear tool in several ways:

In the image-menu through:ToolsTransform ToolsShear,
By clicking the tool icon: in Toolbox,
Also by using theShift+Skey combination.
Before using Shear Tool After using Shear Tool
3.7 Perspective Tool

The Perspective Tool is used to change the dimensions of the active layer content, of
selection content or of a path.
You can use the Perspective tool in different ways:

By clicking the tool icon: in Toolbox, By using the Shift+Pkey combination.
Perspective
Perspective
horinajpg.115 (proeo) image
Transforamtion Matrix
1.00000 0.00000 0.00000
0.00000 1.00000 0.00000
0.00000 0.00000 1.00000
Help Reset Transform Cancel
After using Perspective

3.8 Flip an Image
When you need the person in the photo looking in the other direction, or you need to top
of the image to be the bottom like developing the Mirror image. Right click on the image
and follow the menus Tools Transform Tools Flip, or use the button on the toolbox.
IMP
ors Tools Filters Windows Help
Selection Tools
Paint Tools
Transform Tools Align Q
Color Tools Move M
Paths B
Crop Shift+C
Color Picker O
Rotate Shift+R
Zoom Z
Scale Shift+T
Measure Shift+M
Shear Shift+S
Text T
Perspective Shift+P
GEGL Operation...
Flip Shift+F
Toolbox Ctrl+B Cage Transform Shift+G
Default Colors D
Swap Colors X
Image before flipping Image after flipping
color, 1 layer) 640400 - GMP

3.9 Rotate an image Image Layer Colors Tools Filters Windows Help
This tool helps you to revolves the layer, paths and

Duplicate Ctrl+D
Mode
selected portion in the image. Transform Flip Horizontally
Canvas Size... Flip Vertically

Fit Canvas to Layers
Rotate 90 clockwise
It helps to spin an image in different directions.

Fit Canvas to Selection
Rotate 90 counter-clockwise
Print Size...
Rotate 180
Scale Image...
Steps to rotate an image are as follows:

Guillotine
Crop to Selection...
Autocrop Image
Right click on the image, and follow the menus

Zealous Crop
Merge Visible Layers... Ctrl+M
Image Transforms Rotate 90 degrees (or Flatten Image

Align Visible Layers...
270 depending on the orientation). Guides

Configure Grid...
Image Properties Alt+Return
Image before Rotating Image after Rotating
Advanced GIMP 25
3.10 Blend Tool [L]
The Blend tool creates a new color by gradually mixing multiple colours. This tool fills the
selected area with a gradient blend of the foreground and background colours. To make a
blend, drag the cursor in the direction you want the gradient to go, and release the mouse
button when you feel you have the right position and size of your blend. The softness of
the blend depends on how far you drag the cursor. The shorter the drag distance, the
sharper it will be.
There are different possibilities to activate the tool:

From the image-menu:ToolsPaint ToolsBlend.
By clicking the tool icon .
By clicking on theLkeyboard shortcut.
Step 1: Select the foreground and

background colour if you want to
blend two colours otherwise it will
take white & black colour as default.
Step 2: Fill the colour using bucket

tool
Step 3: Click on blend tool and select the area

till where you want to have blend effect.

3.11 Blur/Sharpen Tool [Shift +U]
Blur mode causes each pixel affected by the brush to be blended with neighbouring pixels,
thereby increasing the similarity of pixels inside the brushstroke area.
Sharpen mode causes each pixel to become more different from its neighbours, it increases
contrast inside the brushstroke area.

From the image-menu: Tools Paint tools Blur/Sharpen.
The Tool can also be selected by clicking the tool icon in the Toolbox.
By using the keyboard shortcut Shift+U. Tool Options
Tool Options
Blur/Sharpen
Mode: Normal
Holding down the Ctrl key toggles between Blur and Opacity
Sharpen modes; it reverses the setting shown in the Brush

2 Sinkel
Tool Options. Size 21.70
Aspect Ratio 0.00
1. Set convolve type to switch between blur\ Angle 0.00
sharpen. Dynamics
Untiltled
Dynamics Options
2. Set the rate Apply Jitter
Smooth Stroke
3. Click on the canvas area and keep on dragging Hard edge

Convolve Type (Ctrl)
the brush until the desired result is obtained. Blur

Sharpen
Rate 50.0
Blurring can be useful if some element of your image stands out too much, and you would
like to soften it. If you want to blur a whole layer, or a large part of one, you will probably
be better off using one of the Blur Filters.
Before Blurring the image After Blurring the image
Advanced GIMP 27
In Sharpen mode, the tool works by increasing the contrast where the brush is applied.
Over-application of the tool will produce noise.
Before Sharpening the image After Sharpening the image
3.12 Smudge Tool [S]

The Smudge tool uses the current brush to smudge colours on the active layer or a selection.
It takes color in passing and uses it to mix it to the next colours it meets, on a distance
you can set.
You can find the Smudge tool in various ways:

Through Tools Paint Tools Smudge. in the image menu, by clicking on the tool icon:
in Toolbox, Or by pressing the S key on keyboard.
Using Ctrl with Shift, you can constrain the angle between two successive lines to vary
by steps of 15.
Before smudging the image After smudging the image
3.13 Dodge/Burn Tool [Shift + D]

The Dodge tool uses the current brush to lighten the colours in your image.
The Burn tool uses the current brush to darken the colours in your image.
The mode will determine which types of pixels are affected.

From the image-menu: Tools Paint Tools Dodge / Burn.
The Tool can also be called by clicking the tool icon or by using the Shift+D keyboard
shortcut.
Before using the Dodge Tool After using the Dodge Tool
Before using the Burn Tool After using the Burn Tool
4. Layers
In GIMP terminology, each individual transparency is called a layer.Layer provides a
variety of effects that change the appearance of the image. It allows you to work with one
element of an image without disturbing the others. Layers are the transparent sheets one
on top of the other. You can see through transparent areas of a layer to the layers below.
A new image in Gimp has a single layer. You can add a number of additional layers to
add different elements in an image.
4.1 Adding a new layer:

To create a new layer follow the steps:
Layer menu select new layer.
Enter the information for a new layer; transparency is good for overlapping layers or
necessary for deleting portions of an image.
Advanced GIMP 29
Give the layer a name which will help you to identify it later, such as while changing the
background.
After all the information is set, click the OK button.
Layers - Brushes New Layer
Create a New Layer

Untitled-4659
Mode: Normal
Layer name: Layer
Opacity 100.0
Width: 640
Lock:
Height: 400 px
Layer
Layer Fill Type
Background Foreground color
Background color
White
Transparency
Help OK Cancel
4.2 Renaming a Layer

To rename a layer after it is created, highlight the layer, right click it and select edit layer
attributes, then type in a new name.
Layers
Mode: Normal
Opacity 100.0
Lock:
Layer
Edit Layer Attributes...
New Layer...
New from Visible
New Layer Group...
Duplicate Layer
Anchor Layer
Merge Down
Delete Layer
Layer Boundary Size...

Layer to Image Size
Scale Layer...
Add Layer Mask...

Apply Layer Mask
Delete Layer Mask
Show Layer Mask Layer Attributes

Edit Layer Mask
Edit Layer Attributes
Disable Layer Mask Layer-3([Untitles])
Mask to Selection
Layer name: Layer
Add Alpha Channel
Remove Alpha Channel
Alpha to Selection
Merge Visible Layers... Help OK Cancel

Flatten Image

4.3 Deleting a Layer
To delete a layer, select the layer and press the bin like looking button at the bottom of
layers tab.
4.4Merging a Layer
To merge a layer,
Step 1: Open both the images as layers.
[Untitled]-5.0 (RGB color, 1 layer) 640400 - GIMP *[Untitled]-5.0 (RGB color, 1 layer) 640400 - GIMP
File Edit Select View Image Layer Colors Tools Filters Windows Help File Edit Select View Image Layer Colors Tools Filters Windows Help
Toolbox Toolbox
Layers
Mode: Normal
Opacity 100.0
Lock:
earth.jpg
bridge.jpg
100% Background (2.6 MB) 100% earth.jpg (4.2) MB
Layers
Mode: Normal
Opacity 100.0
Lock:
Layer
Edit Layer Attributes...
New Layer...
New from Visible
New Layer Group...
Duplicate Layer
Step 2: Right-click the layer and select merge down or merge Anchor Layer
Merge Down
visible option available in the drop-down menu. The Merge down Delete Layer
option merges the selected layer with the layer right below it, Layer Boundary Size...
Layer to Image Size
whereas the Merge visible option merges all the visible layers. Scale Layer...
Add Layer Mask...

Apply Layer Mask
Delete Layer Mask
Show Layer Mask

Edit Layer Mask
Disable Layer Mask
Mask to Selection
Add Alpha Channel

Remove Alpha Channel
Alpha to Selection
Merge Visible Layers...

Flatten Image
Advanced GIMP 31
Step 3: Resultant image, after merging the two
layers.
4.5 Scaling a layer

The Scale Layer command resizes the layer and its contents. The image loses some of its
quality by being scaled. The command displays a dialog where you can set parameters
concerning the size of the layer and the image quality.
You can access this command from the image menubar through Layer Scale Layer.
or, 1 layer) 640400 - GIMP

Image Layer Colors Tools Filters Windows Help
New Layer... Shift+Ctrl+N
New from Visible
New Layer Group...
Duplicate Layer Shift+Ctrl+D
Anchor Layer Ctrl+H
Merge Down
Delete Layer
Scale Layer
Stack Scale Layer
Layer-3 ([Untitles])
Mask
Transparency Layer Size
Width: 640
Transform
Height: 400 px
Layer Boundary Size... 640 400 pixels

72 ppi
Layer to Image Size Quality

Interpolation: Cubic
Scale Layer...
Crop to Selection Help Reset Scale Cancel
Autocrop Layer
4.6 Duplicating a Layer

The Duplicate Layer command adds a new layer to the image which is identical copy of
the active layer. The name of the new layer is the same as the name of the original layer,
but with copy appended to it.

You can create a duplicate layer by clicking image menu Layer Duplicate Layer, or
from the local pop-up menu that you get by right-clicking on the Layer Dialog.
Layer Colors Tools Filters Windows Help Layers

New Layer... Shift+Ctrl+N
New from Visible
New Layer Group...
Mode: Normal
Duplicate Layer Shift+Ctrl+D
Anchor Layer Ctrl+H
Opacity 100.0
Merge Down
Delete Laeyr Lock:
Stack
feeldesain-ferrari-
Mask
Transparency
feeldesain-ferrari-
Transform
Layer Boundary Size...

Layer to Image Size
Scale Layer...
Crop to Selection
Autocrop Layer
A Copy of your previous layer will be automatically made in the Layers tab.
5. Masking
The Mask is GIMPs way of showing the full structure of the selection. Mask also provides
the ability to interact with the selection in new, and substantially ways.Masking layers
(similar to the fusion mask in Photoshop)which allows you to work on layers with great
ease. With this method it is easy to edit corners without touching the layer.
Step 1. Click the small outlined button at the lower left of the image window to toggle
Quickmask on and off. The button switches between Quickmask mode, and marching
ants mode.
You can also use Select Toggle

[nature] (imported)-3.0 (RGB color, 1 layer) 680306 GIMP
File Edit Select View Image Layer Colors Tools Filters Windows Help
All
Quickmask, or Shift + Q, to toggle

None
Invert
Float
between Quickmask and marching By Color

From Path
ants mode.
Selection Editor
Feather...
Sharpen
Shrink...
In Quickmask mode, the selection is

Grow...
Border...
Distort...
shown as a translucent screen overlying-

Rounded Rectangle...
Toggle Quick Mask Shift+Q

Save to Channel
the image, whose transparency at each To Path
pixel indicates the degree to which that

pixel is selected.
Advanced GIMP 33
By default the mask is shown in red, but you can change this if another mask colour is
more convenient.
5.1 Editing a mask

To edit a mask, go to the channels tab, select quickmask channel, right-click to open the
drop-down menu and selectEdit channel attributesand change the colour.
Step 1: Channels Step 2: Channel Attributes
Edit Channel Attributes

Quick Mask-4 ([nature]) (imported))
Red
Channel name: Qmask

Green
Blue
Fill opacity: 50.0
Quick Maks
Edit Channel Attributes...
Help OK Cancel
New Channel...
Raise Channel
Lower Channel Set the settings and press OK
Duplicate Channel
Delete Channel
Channel to Selection
Add to Selection
Subtract from Selection
Intersect with Selection
Step 3: Edit Channel Color Step 4:

H 206
S 100
V 100
R 0
G 144
B 255
A 50
HTML noptation: 0090ff
Current:
Old:
Help Reset OK Cancel
Before Masking Before Masking

Summary
1. GIMP is a GNU Image Manipulation Program is free and powerful open source image editing
tool that provides retouching of photos, authoring of photos and composition of photos.
2. The Align tool is useful to align the image layers with various image objects.
3. The Scale Tool is used to scale layers, selections or paths (the Object).
4. The Shear tool is used to shift one part of an image, a layer, a selection or a path to a direction
and the other part to the opposite direction.
5. The Perspective Tool is used to change the perspective of the active layer content, of selection
content or of a path.
6. The Flip tool is used to rotate the image in the other direction to create the image.
7. The Rotate tool is used to rotate layers within an image.
8. The Blend Toolis used to fill the selected area with a gradient blend of the foreground and
background colours.
9. The Sharpen tool is used to increase the contrast where the brush is applied.
10. The Blur tool is used to blur or softened the areas of an image where the brush is applied.
11. The Smudge tool uses the current brush to smudge colours on the active layer or a selection.
12. The Dodge tool uses the current brush to lightenthe colours in your image.
13. The Burn tool uses the current brush to darken the colours in your image.
14. The Eraser tool is used on the canvas to erase things.
15. The Pencil Tool is used to draw images on the canvas.
16. The Paint Brush tool lets you draws brush like strokes.
17. Layers are the transparent sheets one on top of the other.
18. Masking effect allows you to create merge effects in an image.
19. If some of your scanned photos do not look colourful enough, you can easily improve their
tonal range with the Auto button in the Levels tool (ColoursLevels). If there are any color
casts, you can correct them with the Curves tool (ColoursCurves).
20. Not all effects can be applied to all kinds of images. This is indicated by a grayed-out menu-
entry. You may need to change the image mode to RGB ImageModeRGB), add an alpha-
channel (LayerTransparencyAdd Alpha Channel) or flatten it (ImageFlatten Image).
21. Retouching tools are used for the arrangement of pixels. The following are the retouching
tools available in Gimp:
22. Brush & Pencil Tool
23. Eraser Tool
24. Blend Tool
25. Blur & Sharpen Tool
26. Smudge
27. Dodge & Burn Tool
Advanced GIMP 35
Exercise
1. _________ tool helps you to add a new layer to the image which is identical copy of the
active layer.
(a) Smudge Tool (b) Dodge Tool
(c) Perspective Tool (d) Duplicate Layer
2. By default the mask is shown in ______, but you can change this if another mask colour
is more convenient.
(a) Red (b) Blue
(c) Green (d) No colour
3. In _________ mode, the selection is shown as a translucent screen overlying -the image,
whose transparency at each pixel indicates the degree to which that pixel is selected.
(a) Default (b) Quickmask
(c) Marching ants (d) Normal
4. __________ are the transparent sheets one on top of the other.
(a) Masking (b) Tools
(c) Layers (d) None of the above
5. By default the extension of Gimp file is ______
(a) .XCf (b) .BMP
(c) .TIFF (d) .PNG
6. GPL stands for
(a) General Private license (b) Great Pioneer License
(c) General Public Limited (d) General Public License
7. The image loses some of its quality by being _______
(a) Scaled (b) Merging (c) Renaming (d) Masking
8. _______
(a) Adobe (b) Gimp (c) After Effects (d) Paint Shop Pro X5
9. In _______ mode, over-application of the tool will produce noise.
(a) Sharpen (b) Blur (c) Dodge (d) Smudging
10. ________ takes colour in passing and uses it to mix it to the next colours it meets.
(a) Sharpen (b) Blur (c) Dodge (d) Smudging

1. Name the application areas where Gimp can be used.
2. Mention all the features of Gimp.
3. What do you understand by General Public License (GPL)?

4. Which tool is used to align the objects placed on different layers? Explain all its
options.
5. Name the properties needs to be changed while scaling the image.
6. Which tool is used to lighten the pixels in an image?
7. Which tool is used to darken the colour pixels in an image?
8. Differentiate between Shear and Perspective tool.
9. What is the default background and foreground colour of image window?
10. How is blur tool different from smudge tool?
11. Name any four tools used for changing the pixel arrangement in an image.
12. What is the difference between Blur tool and Sharpen tool?
13. How is flipping an image different from rotating an image?
14. Write the steps to apply blend effect on an image?
15. What are Layers? What is the purpose of using Layers?
16. What is the need of merging the Layers?
C. Identify the tools used for the following purpose:

1. To resize the layer/image __________________
2. To move layers __________________
3. To align the layers with various objects __________________
4. To create the mirror image __________________
5. To draw free hand drawings __________________
6. To lighten the colour pixels of an image __________________
7. To give wet paint effect in an image __________________
8. To shift one part of an image/ a layer to a particular direction __________________
9. To apply different colours without effecting the original image __________________
10. To remove objects from the canvas __________________
D. Application Oriented Questions

1. Shivank has collected pictures of his favourite superhero and wants to make a collage of
the superhero in action. Suggest him the way to make collage.
2. Amishi wants to change the background of her class photograph with the school \ building.
Help her to do the same.
Advanced GIMP 37
3. Rudraksh has to send his photograph to the passport office for the processing of his
Passport but his photograph clicked by the photographer is very dark due to insufficient
light. Help him lighten the colour pixel of his photograph as per the requirement.
4. Geetanjali has got a project work in she has been given two images, where one image
depicts a girl walking on the grass and other one depicts an ocean. Now she has to
project as if the girl is walking on the water surface. Suggest her the way to accomplish
the task.
5. Avni wants to change her coloured photograph into white/black photograph along with
the borders and corners of the image without affecting the original image. Help her to
do the same.
6. Bhuvi is working on her social science project work. She wants to add the image of the
Minister but the image is not in the required direction. She needs the mirror image of
the photograph. Suggest her the tool to perform the task.
7. Mohit has got a hazy image. He wants to increase the contrast of the image. Suggest him
the tool to complete the task.
8. Vasu has inserted an image in a new file. He wants to duplicate the image on the same
layer. Suggest him the tool which will fulfil his requirement.
E. Lab Session
1. Collect the photographs of your family members and make a
collage of the same. Design a Birthday card for your friend.
(a) Add image of a flower and text to the card
(b) Fill the background with the texture format
2. Make abstract painting depicting

Independence Day. Scan the image of
any car and transform the image as
shown below.
3. Make a collage depicting the different seasons such as Rainy, Summer, Autumn, Winter.
Transform an image using perspective tool.

Chapter 3
Tables
Learning Objectives
Describes the various uses of the TABLE tag and its sub elements in HTML.
Recognize the different attributes of each tag for each of the TABLE elements.
Use the TABLE and its sub elements to create web layout.
Given a design use appropriate tabs from the TABLE group.
Use Frames in the HTML page to divide the browser into different sections.
Display data in a tabular form using table tag.
Introduction
The data on the webpage can be represented in tabular form. In HTML the format can
be defined using <TABLE > tag.
The <TABLE > tag arranges the data items on the web page in rows and columns. The
basic syntax of table tag along with the attributes is given as under:
The TABLE Element (<TABLE >) represents data in two or more dimensions.
<body>
<TABLE border =number
align= left/right/center
width= number%
bgcolor= NameOfColor
background= addressOfTheFile
bordercolor= #hexadecimalNumberOfColour>
<TR>
<TD> text 1</TD>
<TD> text 2</TD>
</TR>
</TABLE>
</body>
Tables 39
1. Structure of <Table> tag
The structure of table is formed using the Table tag.
The rows of the table are formed using the TR tag.
The data in the cells of the rows are inserted using either the TH tag or the TD tag. The
TH tag encloses the Header object and makes the data boldface and center aligned. The
TD keeps the data in regular font and left aligned by default. The TH and TD tags are
nested inside the TR tag and the TR tag in turn is nested within the TABLE tag.
1.1. The attributes of table tag are discussed below one by one
1.1.1. Border
This attribute is used to insert the lines on four sides of the table. The inside lines shows
the rows and columns of the table and the outside lines displays the dimensions of the
table. This attribute takes the value as a number starting from 1 to any number. The value
one displays one pixel line on inside and outside of the table. However, the value larger
than one only thickens the outer lines (giving a 3D effect) leaving the inside lines to one
pixel point. When this attribute is omitted, neither inside nor outside lines are visible. Let
us take the 3 cases one by one:
Case 1.1: The border attribute takes the value one, results in both inside and outside
border.
In the above code, the attribute border takes the value as one. This displays both the
inside and outside border of one point. The table row is formed using <TR> tag and the
<TD> tag helps in inserting the text thin bordered cell in the cells of the rows and
columns of the table. The code produces the output in figure 1.
<HMTL>
<HEAD><TITLE> </TITLE></HEAD>
<BODY>
<TABLE border = 1>
<TR>
<TD> thin bordered cell 1</TD>
</TR>
<TR>

</TR>
</TABLE>
</BODY>
</HTML>
Output produced by the above HTML code:
C:\Users\HP\Music
File Edit View Favorites Tools Help
thin bordered cell 1 thin bordered cell 2

thin bordered cell 3 thin bordered cell 4
Figure 1
Case 1.2: If the value is taken to be as high as 40, the outer border width changes.
The table tag uses the border attribute with the value 40. This increases the length and the
height of the entire table. The outside border thickens, giving the table a 3D effect. The
<TR> tag defines the rows of the table and the <TD> tag is used to insert thick bordered
cell in each of the cells of the two rows as shown in the output figure 2.
<HMTL>
<BODY>
<TABLE border = 40>
<TR>
<TD> thick bordered cell 1</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Tables 41
C:\Users\HP\Music C:\Users\HP\Music\D
thick bordered cell 1 thick bordered cell 2

thick bordered cell 3 thick bordered cell 4
Figure 2
Case 1.3: If the border attribute is omitted:

The output from the above code is shown in figure 3. The table is shown without the
inside and outside border. Also, note in the output that the data in the first row is bolder
than that in the second row. This is due to the use of <TH> element in the first row and
<TD> in the second row. The <TH> tag is meant to prepare the header of the table. Since
the text of header is bolder than the rest of the text, it makes the text bold but keeps the
font size similar to the rest of the text.
<HMTL>
<BODY>
<TABLE >
<TR>
<TH> no border cell 1</TH>
<TH> no border cell 2</TH>
</TR>
<TR>
<TD> no border cell 3</TD>
<TD> no border cell 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
The output from the above code is shown in figure 3. The table is shown without the
inside and outside border. Also, note in the output that the data in the first row is bolder

than that in the second row. This is due to the use of <TH> element in the first row and
<TD> in the second row. The <TH> tag is meant to prepare the header of the table. Since
the text of header is bolder than the rest of the text, it makes the text bold but keeps the
font size similar to the rest of the text.
C:\Users\HP\Music
no border cell 1 no border cell 2

no border cell 3 no border cell 4
Figure 3
1.1.2. Align
The align attribute helps in placing the table on the webpage. If you want to place it in
the center of the webpage, use the center value, for right side use right and for the left
side of the web page, the value left. If you omit this attribute in the <TABLE > tag, the
table will be placed at its default position which is usually left.
Case 2.1: The following code assigns the value center to the align attribute.
<HMTL>
<BODY>
<TABLE Border = 1 Align=Center>
<TR>
<TD> center aligned1</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Tables 43
The output from the above code positions the table in the center of the web page as
below:
C:\Users\HP\Music C:\Users\HP\Music\D...
center aligned1 center aligned2

center aligned3 center aligned4
Figure 4
1.1.3. Width
The width attribute helps in identifying the breadth of the table in comparison to the
webpage. It accepts the value as a number (in pixels) or in percentage (in proportion to
the width of the webpage). If you omit this attribute, the width of the table is set according
to the length of the characters inside the cells.
Case 3.1: Where, the width of the table is set to 30% of the web pages width.
<HMTL>
<BODY>
<TABLE border=1 width = 30%>
<TR>
<TH> width of table 30% </TH>
<TH> of width of the window </TH>
</TR>
<TR>
<TD> if the size of window is small </TD>
<TD> the width of table will be 30% of small size</TD>
</TR>
</TABLE>
</BODY>
</HTML>

The above code displays the breadth of the table to be 30% of the width of the webpage
as shown below:
C:\Users\HP\Music\Desktop\TABLE.html C:\Users\HP\Music\De...
Width of table of width of the

is 30% window.
If the size of the width of this
window is less table will be 30%
than 100% of small size.
Figure 5
Case 3.2: Where, the width of the table is set to 100% of the web pages width.
<HMTL>
<BODY>
<TABLE border=1 width = 100%>
<TR>
<TH>100% width of the table - cell 1</TH>
<TH>100% width of the table - cell 2</TH>
</TR>
<TR>
<TD> cell 3</TD>
<TD> cell 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
The code above displays the table with the breadth equal to the breadth of the webpage
as shown in the figure 6. The table occupies 100% of the width of the web page.
Suggested Sites HP Games - Top Games Get more Add-one islamic calender
100% width of the table - cell 1 100% width of the table - cell 2
cell 3 cell 4
Figure 6
Tables 45
1.1.4. Border color
The colour of the lines inside and outside the table can also be changed using the Border
Color attribute. It accepts the value as name of the colour. If you omit this attribute, the
colour of the table border is set to its default grey.
Case 4.1: Let us set the lines of table as red in the following code:
<HMTL>
<BODY>
<TABLE border=10 border color=red>
<TR>
<TD>border line thickness is set to 10</TD>
<TD>border colour is red</TD>
</TR>
<TR>
<TD>red as tomato</TD>
<TD>red as apple</TD>
</TR>
</TABLE>
</BODY>
</HTML>
The Microsoft Internet Explorer displays the output in figure 7. The table is shown with
red coloured border lines on both inside and outside the table. The outside line gets its
thickness from the border attribute which has the value equal to 10. This means the width
of the outside border is 10 pixels wide.
border line thickness is set to 10 border colour is red

red as tomato red as apple
Figure 7

1.1.5. Bgcolor
The background color of a table can be set using the attribute bgcolor. This attribute takes
the name of the colour or hexadecimal number as value.
Case 5.1:
<HMTL>
<BODY>
<TABLE border =1 bgcolor= pink>
<TR>
<TH>border line point 1</TH>
<TH> pink as lily </TH>
</TR>
<TR>
<TD> background colour of the table is pink </TD>
<TD> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
The above code gives a background colour to the table. Here the background is set to the
colour pink as shown in figure 8. The breadth of the table is set according to the contents
in the cells of the table. The last cell is formed and is empty because one character space
is assigned to this cell using the special character The special character provides
the result only when used in lowercase.
Note: If you want to set individual cells of the table with different background colour, the
attribute bgcolor can be used with either <TH> tag or <TD> tag.
C:\Users\HP\Music\Desktop\TABLE.html C:\Users\HP\Music\Deskto...
border line point 1 pink as lily
background colour of the table is pink
Figure 8
Tables 47
1.1.6. Background
If you want to place an image or a picture at the background of the table, you can do so
using the background attribute. This attribute takes the value as the address or the path
of the picture. The picture may be a bitmap or a graphic image. In the following code, the
image named yelloww.jpg is set as background to the entire table.
<HMTL>
<BODY>
<TABLE border =1 background=c:\yelloww.jpg>
<TR>
<TH>lily</TH>
<TH>rose</TH>
<TH>lotus</TH>
</TR>
<TR>
<TD>white, yellow</TD>
<TD>white, yellow</TD>
<TD>white, pink</TD>
</TR>
</TABLE>
</BODY>
</HTML>
The above code displays the output in figure 9. The background of the entire table is set
to the image named yelloww.jpg.
C:\Users\HP\Music\Desktop\TABLE.html C:\Users\HP\Music\Deskto...
lily
border line rose
point 1 lotuspink as lily
white, yellow
background colourwhite,
of theyellow
table white,
is pinkpink
Figure 9

Note: The image can set to individual cells as well by using the background attribute in the
<TH> and <TD> tag.
2. The TH or TD element
The TH element or <TH> tag helps in identifying a table header. Correspondingly, TD
element or <TD> tag identifies the table data cell. The text inserted using the TH element
is in boldface and centred by default. Compared to this, TD element or the <td> tag is
aligned to the left and the text is in regular font. The attributes used with <TD> or <TH>
tag are: Align, Colspan, No wrap, Rowspan, Valign.
The align attribute is similar to that of table, except that it align the text inside the cell
rather than the table. Valign takes the value top, middle, bottom to vertically align the
text inside a cell.
The Nowrap attribute does not allow the text to flow to the next line in the cell. If the
sentence is wider than the width of the cell, nowrap will show the sentence in one straight
line. Let us now discuss colspan and rowspan.
3.1. COLSPAN
The colspan attribute helps in merging the columns of a row. This attribute is not used
with table tag but with the <TH> or the <TD> tag.
Case Colspan: If you want to prepare the table where there are 4 rows and the all the
other rows except the first row are divided into two columns. In other words, the two
columns of the first row are merged into a row, use the following code:
C:\Users\HP\Music
File Edit View Favorites Tools
MERGEDROW
R2 1
R3 2
R4 3
Figure 10
Tables 49
<HMTL>
<BODY>
<TABLE border=2>
<TR>
<TH colspan=2>MERGEDROW</TH>
</TR>
<TR>
<TD>R2</TD>
<TD>1</TD>
</TR>
<TR>
<TD> R3</TD>
<TD>2</TD>
</TR>
<TR>
<TD>R4</TD>
<TD>3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Case No Colspan: If the row in the example above does not span across three columns,
the code will be:
<HMTL>
<BODY>
<TABLE border=2>
<TR>
<TH>MERGEDROW</TH>
</TR>
<TR>
<TD>R2</TD>
<TD>1</TD>
</TR>
<TR>

<TD>R3</TD>
<TD>2</TD>
</TR><TR>
<TD>R4</TD>
<TD>3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
This code produces the result shown in C:\Users\HP\Music

figure 11. The table shows the empty File Edit View Favorites Tools
cells, also referred to as Ghost Cells. Ghost cells
These empty cells do not give proper MERGEDROW
presentation to the table and its contents. R2 1
To display a header row followed by two R3 2
columns at the bottom, colspan is the R4 3
only option.
Figure 11
3.2. ROWSPAN
When the tables cells spans across more than one row, it is called ROWSPAN. If we want
to give the table a nice sidebar, this attribute is used. The rowspan appears as merged cells.
We use this attributes in the <TH> or <TD> tags. We have to assign a number for how
many rows we wish to span downwards.
Case Rowspan: Taking the similar example as above, we have the following code:
<TABLE border=1>
<TR>
<td rowspan=2> MERGEDCOLUMN </TD>
<TD>Col2Row1 </TD>
</TR>
<TR>
<TD>Col2Row2</TD>
</TR>
</TABLE>
Tables 51
The code here produces the output in figure
12. The output displays how rowspan merges
the two rows into one to form a sidebar. In
other words, this sidebar acts as a single row
that gets divided into two rows in the next
column of the table.
Figure 12
Case NoRowspan: In case you dont wish to use rowspan, then you might end up creating
a ghost cell as shown by the following code:
<TABLE border=1>
<TR> <TD> Col1Row1</TD>
<TD>Col2Row1 </TD>
</TR>
<TR> <TD>Col1Row2</TD>
</TR>
</TABLE>
The above code produces the output in figure 13:
The table does not give the clear picture

as to whether the ghost cell be used C:\Users\HP\Music
for some purpose, whether the last be File Edit View Favorites Tools
merged into the cell above it or cell
on its left. In order to get rid of such Col1Row1 Col2Row1
question and to better present data, we Col1Row1 Ghost cells
make use of the attribute provided by
HTML called Rowspan. Figure 13
3. The CAPTION tag

The <caption> tag is used to provide a text to the table so as to explain the contents of the
table. It is generally in bold, at center with respect to the table. However, the position of
the caption can be on either the top or the bottom of the table using the align attribute
as shown below:

TABLE BORDER = 1>
<CAPTION align=bottom>Table with caption</CAPTION>
<TR>
<TH> coordinates 1, 1 </TH>
<TH> 1, 2</TH>
</TR>
<TR>
<TD> 2, 1</TD>
<TD> coordinates 2, 2</TD>
</TR>
</TABLE>
Figure 14 displays the result of the code. The bottom of the table is captioned with Table
with caption.
C:\Users\HP\Music
coordinates 1, 1 1, 2
2, 1 coordinates 2, 2
Table with caption
Figure 14
Let us quickly revise the list of attributes used with TABLE, TH, TD elements, before
moving on to the next section on frames. The following table displays a list of function,
tags, attributes and values associated with <TABLE >, <TH> and <TD> element.
S.No. Description Tags and Attributes Values

1. Define Table <TABLE ></TABLE>
2. Table Border <TABLE BORDER=?>
</TABLE>
3. Desired Width <TABLE WIDTH=?> (in pixels)
4. Width Percent <TABLE WIDTH=%> (percentage of page)
5. Table Row <TR></TR>
6. Alignment <TR ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM>
7. Table Cell <TD></TD> (must appear within
table rows)
Tables 53
8. Table Header <TH></TH> (same as data, except
bold & centered)
9. Alignment <TH or TD
ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM>
10. No Linebreaks <TH or TD NOWRAP>
11. Desired Width <TH or TD WIDTH=?> (in pixels)
12. Width Percent <TH or TD WIDTH=%> (percentage of table)
13. Cell Color <TH or TD
BGCOLOR=#$$$$$$>
14. Columns to Span <TH or TD COLSPAN=?>
15. Rows to Span <TH or TD ROWSPAN=?>
16. Table Caption <CAPTION></CAPTION>
17. Alignment <CAPTION (above/below table)
ALIGN=TOP|BOTTOM>
4. Frames
A frame divides the screen into separate windows with both vertical and horizontal scroll
bars.. The windows so formed may appear to be sub-windows of the main window (the
webpage). This allows the user to access different pages of a website from one screen if
designed to do so. Frames are needed when you want to have menus on one side and the
contents or the operations on the other side. When the user clicks on one of the menu
items, the contents become visible on the other side.
A frame divides the webpage into different windows. It makes some structural changes
to the main window. Hence, it is not written inside the body element, but it forms its
own element, outside the head section of HTML document called the FRAMESET. A
FRAMESET element is the parent element that defines the characteristics of individual
frame pages. The basic syntax of FRAMESET element is:
<html>
<head> </head>
<FRAMESET cols= number%,number%
<frame src = address of HTML document>
<frame src = address of HTML document>
</FRAMESET>
</html>

The attributes used with the FRAMESET element are given in the table below:
Attributes Value accepted Description
Rows Number in percentage or Divides the main window horizontally
star (*) indicating the rest in proportion to main window
of the window
Cols Number in percentage or Divides the main window vertically in
star (*) indicating the rest proportion to main window
of the window
Border Number Increases the width of the outer border.
Frame border Number Used with netscape navigator to surround

the sub-window with a border. If value is
set to zero, no outer lines appear around
the frame.
Frame spacing Number If set to zero, it removes the ugly grey
lines appearing between the two frames,
otherwise it increases the width of the
grey line.
The FRAMESET element works in conjunction with the FRAME tag whose attributes are
discussed below:
S No Attributes Value Description

1 src Address of the To load the HTML webpage in the frame
(mandatory HTML document defined by FRAMESET element
attribute)
2 scrolling Yes/Auto/No Yes will insert both the scrolls irrespective of
the size of the sub-window.
Auto will insert the scrolls only when the
contents of the sub-window are not visible
No will not insert any scrolls even when all
the contents are not visible.
3 Noresize Noresize when used this attribute does not allow the user
to adjust the size of the frame in the webpage.
4. Name A noun Assign a name to the frame
Target The noun of name This attribute specifies the name of a frame
attribute where a document is to be opened.
Tables 55
If you want to make a webpage that uses two frames divided in columns, you should
follow these steps:
1. Create an HTML document with the FRAMESET element as shown below.
<FRAMESET cols=120,*>
<frame src=menu.html name=menu>
<frame src=main.html name=main>
</FRAMESET>
In the above code, the left side of the column is 120 pixels and the Star indicates
the rest of the screen. A star has been used because the screen size varies; it may be
640 pixels across, or 800 or 1024 pixels across. The src attribute opens the menu.
html document in left side frame and main.html gets opened in right side frame.
Both the frames are given a name through the name attribute. The names are used
by navigational frame which has been discussed later in the chapter.
2. Create a number of HTML documents (containing the body tag) that you would
like to load into the frames. (Atleast as many as the frames that are there in the
FRAMESET element of step 1 here you need to have two documents; menu.html
and main.html)
3. When a FRAMESET page is loaded, the browser automatically loads the HTML
documents designed in step2 as requested by each of the FRAME tag within the
FRAMESET.
The rest of the chapter discusses the different types of frames that you can design.
For example 1:
If you want to divide the webpage in equal sizes horizontally, and want to display a.html
in first and b.html in second, you will use the following code:
<html>
<head></head>
<FRAMESET rows= 50%,50%>
<frame src = a.html>
<frame src = b.html>
</FRAMESET>
</html>

For example 2:
If you want to divide the webpage in the form of a T, where there are two horizontal
sub-windows and the second sub-window (frame) is again divided into two columns, you
can use the following code:
<html><head></head>
<FRAMESET rows=20%,*>
<frame src=a.html>
<FRAMESET cols=30%,*>
<frame src=b.html>
<frame src=c.html>
</FRAMESET>
</FRAMESET>
</html>
For example 3:
If you want to divide the webpage in the form of an inverted T, where there are two
horizontal frames and the first frame is again divided into two columns, you can use the
following code:
<FRAMESET rows=16%,84%>
<FRAMESET cols=50%,50%>
<frame src=a.html name=topleft>
<frame src=b.html name=topright>
</FRAMESET>
<frame src=secondrow.html name=2row>
</FRAMESET>
The first FRAMESET divides the screen into two C:\Users\HP\Music\Doc C:\Users\HP\Music\D...
rows. Now since the control has come to the first

SOCIAL
row of the new screen, the second FRAMESET NETWORKING
SITES...
can divide it into two columns, open the two ASMALLWORLD
HTML documents, a.html and b.html, give them BLOGSTER
CARE2
a name and then move the control to the second
CLASSMATES
row of the new screen. Since now the control
is on the second screen, SRC can now open Enter Comments Here
secondrow.html as shown in figure 15.

Email Yourself

Figure 15
Tables 57
For example 4:
If you do not want to show the grey border dividing the frames and there is 50 pixels
space between the two frames, you can use the following code. The output of this code
is given below:
<html
<head>
</head>
<FRAMESET cols=120,* frameborder=0 framespacing=50>
<frame src =a.html>
<frame src =formbutton.html>
</FRAMESET>
</html>
SOCIAL Enter Comments Here

NETWORKING
SITES...
ASMALLWOR Email Yourself
BLOGSTER
CARE2
CLASSMATES
DAILYSTREN
Figure 16
For example 5:
If you want to insert scrolls in the frames when the contents of the frame are not visible,
use the value auto as shown below:
<html
<head>
</head>
<FRAMESET cols=120,* frameborder=0 framespacing=50>
<frame src =a.html scrolling=auto>
<frame src =formbutton.html scrolling=no>
</FRAMESET>
</html>

The difference between example 4 and example 5 is that the latter does not show horizontal
scroll bars in the right side frame
SOCIAL Enter Comments Here

NETWORK
SITES...
ASMALLWO Email Yourself
BLOGSTER
CARE2
CLASSMATE
DAILYSTRE
Figure 17
For example 6:
If you do not want the user to adjust the frame size in the webpage, use noresize attribute.
Since it takes the value noreisize, you can omit the value and simply write the attribute
as shown below:
<html>
<head></head>
<FRAMESET cols= 120,* frameborder= 0 framespacing = 0>
<frame src = a.html scrolling= no noresize>
<frame src = b.html scrolling = auto noresize>
</FRAMESET>
</html>
For example 7: Jumping from one section to another

If you want to navigate from one section to another in a frame then you may have to name
each section using anchor tag and use the name (S12) in src attribute of the <frame> tag
as shown below. Notice that the name of the HTML document is followed by hash symbol
(#). This symbol separates the name of the HTML file and the section within it.
Tables 59
<html>
<head></head>
<FRAMESET cols= 120,*>
<frame src = a.html>
<frame src = Jump.html#S12>
</FRAMESET>
</html>
Further, the HTML document named jump.html should contain a section with the name
S12. To implement this, we prepare the body of jump.html as under:
<html>
<head> </head>
<body>
<a name = S1> </a>
<h1> Section 1 </h1> This is section 1.
<a name = S12> </a>
</body>
</html>
Now when the first code is executed, it calls the HTML document i.e. jump.html. The
section number S12 of jump.html becomes visible the moment it gets loaded in the second
frame.

For example 8: Navigational frame
If you want to show the menu items as links on the first frame and display the content of
the click on the second frame, you need to prepare a navigational frame.
First divide the webpage into frames as done earlier. Also give a name to each frame as
shown below. Save this file as b.html.
<html>
<head></head>
<FRAMESET cols=30%,*>
<frame src =a.html name=menu>
<frame src =b.html name=content>
</FRAMESET>
</html>
Secondly, prepare a.html using the HTML code given below:
<html>
<head></head>
<body>
<font face=Felix Titling size=4 color=purple>
Social Networking Sites
<a href= http://www.asmallworld.net/ target= content>
<h4> ASmallWorld</h4></a>
<a href= http://www.blogster.com/ target= content>
<h4>Blogster</h4></a>
<a href= http://www.care2.com/ target= content> <h4>Care2</h4></a>
<a href= http://www.classmates.com/ target= content>
<h4>Classmates</h4></a>
<a href= http://www.dailystrength.org/ target= content>
<h4>DailyStrength</h4></a>
</font>
</body>
</html>
Tables 61
The output window of a.html is shown in figure 18
SOCIAL NETWORKING SITES...

ASMALLWOR
BLOGSTER
CARE2
CLASSMATES
DAILYSTRENGTH
Figure 18
When a user clicks on one of the social networking sites like A Small World or the
Class Mates, the webpage will get opened in the second frame on the right hand site
of b.html. It is this frame whose name is content and which is being called by target
attribute in anchor tag in a.html.
The figure 19 shows a navigational frame, which means that you can navigate from one
social networking site to another without changing the webpage or moving from one
window to another. By remaining in the existing window, you can switch from one site
to another, i.e. you can navigate from one social networking site to another. Just run the
HTML document (b.html), see the output in figure 19 and enjoy the fun
C:Users\HP\Music\Desktop\b.html C:Users\HP\Music\Desktop...
SOCIAL NETWORKING
SITES... classmatesTM
ASMALLWOR classmates is the best way to find old high
BLOGSTER browse the biggest collection of yearbooks
CARE2 I graduated in
CLASSMATES Alabama Illinois Montana Rhode Island
Alaska Indiana Nebraska South Carolina
DAILYSTRENGTH Arizona lowa Nevada south Dakota

Arkansas Kanasas New Hampshire Tennessee
California Kentucky New Jersey Texas
Colorado Louisiana New Mexico Utah
Connecticut Maine New York Vermont
Delaware Maryland North Carolina Virgnia
District of Columbia Massachusetts North Dakota Washington
Florida Ohio
Figure 19

Summary
1. The <TABLE > tag arranges the data items on the web page in rows and columns.
2. The TH tag encloses the Header object and makes the data boldface and center aligned.
3. The TD keeps the data in regular font and left aligned by default.
4. TR tag in turn is nested within the TABLE tag and is used to define rows in a table.
5. The colspan attribute helps in merging the columns of a row. This attribute is not used with
table tag but with the <TH> or the <TD> tag.
6. When the tables cells spans across more than one row, it is called ROWSPAN. If we want
to give the table a nice sidebar, this attribute is used. The rowspan appears as merged cells.
7. The <caption> tag is used to provide a text to the table so as to explain the contents of the
table. It is generally in bold, at center with respect to the table.
8. A frame divides the screen into separate windows with both vertical and horizontal scroll
bars.. The windows so formed may appear to be sub-windows of the main window (the
webpage).
9. A FRAMESET element is the parent element that defines the characteristics of individual
frame pages.
Exercise
1. <TR> belongs to Frameset tag.
(a) <Table> (b) <DIV>
(c) <Frameset> (d) <TD>
2. ______ tag is used to add columns to a table
(a) definition list (b) definition list term
(c) definition list description (d) none of the above
3. Which attribute is used to define cell contents to left ?
(a) VAlign (b) Align
(c) GAlign (d) HAlign
4. Tag to add a row to a table.
(a) TR (b) TD
(c) TH (d) TC
5. Which of the following is used to specify the beginning of a tables row?
(a) TROW (b) TABLER
(c) TR (d) ROW
Tables 63
6. In order to add border to a table, BORDER tag is specified in which tag
(a) THEAD (b) TBORDER
(c) TABLE (d) TR
7. Which of these tags are called table tags?
(a) <Thead><body ><tr> (b) <Table><tr><td>
(c) <Table><head><tfoot> (d) <Table><tr><tt>
8. ___________ tag is used to define the heading of a table
(a) TABLE (b) COLUMN
(c) HEADING (d) TITLE
9. Which HTML command is used to align the contents of the cell to right.
(a) <TR align= right-> (b) <TD align = right>
(c) <TD> align = right (d) All of the above
10. Which of the following statements is incorrect:
(a) < frame rows = 20% , 80 %> (b) < frame cols = 40% , 60 %>
(c) < frame rows = 60% , 60 %> (d) < frame rows = 60% , 40 %>

1. What attribute will be used on the CAPTION tag to put the table description at the bottom
of the table?
2. Write the code to display a ghost cell.
3. Name the tag that defines how to divide the window into frames.
4. Name the tag that is used to put HTML document into frames.
5. Where the text is displayed which is specified in the <caption> tag?
6. Which attribute will you use if you do not want frame windows to be resizable?
7. Differentiate between <TH> and <Caption> tags.
8. How <TD> and <TR> are different from each other?
9. What is the purpose of using Frames in HTML pages?
10. Discuss all the tags with their attributes to create a frame.
11. What does n stands for in the following tags?
(a) <Table border=n>
(b) <table bgcolor = n>
(c) <td bgcolor = n>
(d) <td width = n>
(e) <a href= n>

12. Which code snippet will display the following? Explain why
MERGEDROW
R2 1
R3 2
R4 3
Option A Option B
<TABLE border=2> <TABLE border=2>
<TR> <TR>
<TH>MERGEDROW</TH> <TH>MERGEDROW</
<TH> </TH> TH>
</TR> <TH>&nbsp</TH>
<TR> </TR>
<TD>R2</TD> <TR>
<TD>R2</TD>
<TD>1</TD>
<TD>1</TD>
</TR>
</TR>
<TR>
<TR>
<TD>R3</TD>
<TD>R3</TD>
<TD>2</TD>
<TD>2</TD>
</TR>
</TR>
<TR>
<TR>
<TD>R4</TD>
<TD>R4</TD>
<TD>3</TD>
<TD>3</TD>
</TR>
</TABLE> </TR>
</TABLE>
Tables 65
C. Lab Session
Task 1: Create a website with a header area and two columns below to contain the
navigation bar on the left and the content bar to the right. Given below is the task you
must complete with this unit
#00FFFF
30% 70%
#00CCCC #00EEEE
Create a folder to store all your project files in one place

Create your HTML page
Define the table and the required elements to display the image given here.
The 30% and 70% define the column widths
The hash code in each area define the colour code to be used
Task 2: Make the required changes to the original file to create the following display. Save
it as task2.html
My First Web Page

Main page
Photgraphs
70%
History
#00EEEE
More information about the TABLE element can be found at
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
Task 3: Now create the same kind of visual effect that you did with tables but use frames
instead. Save the document as task3.html

When displayed it should look like this.
xed
frameset
Computer
Services
Topics
Introduction
Help Desk
Seminars
Note: The Frameset and Frame are not supported in HTML5.
Task 4: Write the coding in HTML to create a Table as shown below:
STUDENT MARKSHEET
Roll Marks
Name
no. First Term Second Term Third Term
1 Arpit Kumar 140 160 175
2 Nilima Kapoor 190 180 116
3 Prerna Sharma 130 115 178
Hyperlink the names with the following files

1. Arpit Kumar: Arpit.ppt
2. Nilima Kapoor: Nilima.ppt
3. Prerna Sharma: Prerna.ppt
Tables 67
Chapter 4
Forms
Learning Objectives
After learning this chapter learner will be able to:-
State the purpose of the FORM tag.
List the attributes that can be used with the FORM tag to make web page more
interactive.
Learn to post the details filled in the form on the server.
Differentiate the working of different controls.
Understand the use of all the controls placed on the form.
Assign attributes to the <input> element to create the different FORM objects
Introduction
A form is an object that is used for collecting data from the user. We generally come
across such forms whenever we are creating a new account either in bank (manually) or
for an email id (computerized).
In HTML, a form is a window that consists of the elements of a form called the form
fields. These fields may be text field, text area, drop-down box, radio buttons, checkbox
and/or a command button. HTML forms are used to pass data to a server. A form can be
inserted in HTML documents using the HTML form element which acts as a container
for all the input elements. All the information collected by a form can be submitted to a
processing agent (a file containing a script made to process this information) thats usually
specified in the action attribute of the Form tag.
The basic syntax is of a form is:
<form method = get | post action = >

<input>
<input>
</form>
The above code contains both the start tag and the end tag of <form> to indicate the
beginning of form object and end of form object. The <input> tag inside the form tag

does not have an end tag. There can be as many <input> tags as form fields you want in
your web page.
1. Method Attribute of Form

The method attribute specifies how to send form-data (the form-data is sent to the page
specified in the action attribute). The form-data can be sent as URL variables (with
method=get) or as HTTP post transaction (with method=post).
1.1 GET method:

Appends form-data into the URL in name/value pairs
The length of a URL is limited (about 3000 characters)
Never use GET to send sensitive data! (will be visible in the URL)
Useful for form submissions where a user want to bookmark the result
GET is better for non-secure data, like query strings in Google
1.2 POST method:

Appends form-data inside the body of the HTTP request (data is not shown is in
URL)
It has no size limitations
Form submissions with POST cannot be bookmarked
Syntax
<form method=get|post action= address>
action=address
method=post or method=get
1.3 Attribute Values
Value Description
Get Default. Appends the form-data to the URL in name/value pairs:
URL?name=value&name=value
Post Sends the form-data as an HTTP post transaction
Forms 69
2. Input tag
The <input> tag collects the information from the user.
The attributes are:
Attribute Name Description

Name takes a string of characters as internal name of the field, to be
used as a reference later
Size takes the value of a number in quotes which is equal to the width
of the field.
Maxlength takes the value of a number in quotes which is equal to the
maximum number of characters that can be entered.
Type takes the value of the field. It can take the value as text or radio
or checkbox or submit.
2.1 TextBox Field

If the value of the type attribute is text i.e. <input type= Text>, the form will show a
textbox. This textbox accepts the input in one line.
Along with this the TextBox field accepts value, size, name, maxlength, align and tabindex
within the <input> tag.
Attributes of Text Field Description

Size It defines the width of the field. It contains no. of visible
characters.
Maxlength It defines the maximum length of the field. It contains
maximum no. of characters that can be entered in the
field.
Name It adds an internal name to the field so the program that
handles the form can identify the fields.
Value It defines what will appear in the box as the default value.
Align It defines how the text field will be aligned on the form.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT,
TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Tabindex It defines in which order the different fields should be
activated when the visitor clicks the tab key.

For Example:
Two textboxes whose internal name (computer can understand the internal name) is
Fname and Mname are created using the value text for the type attribute. The internal
name is different from the label.
HTML Code:
<form>
Fathers Name:
<input type=text size = 20 name=FName >
<br>
Mothers name:
<input type=text size = 20 name=MName>
</form>
The above code creates two textboxes, each of which is 20 characters wide. The two textboxes
are arranged vertically one below the other. The <br> tag does the work of Enter key.
Output:
Father name
mothers name
2.2 Text Area
Text areas are the fields that displays several text lines at a time. Textarea field is generally
used to prepare the body of the email or use it to take comment from the user. The
<textarea> tag has both start and the end tag indicating from where the textarea begins
and where the area where you were writing text ends.
Forms 71
The attributes are:
Attribute Name Description
Cols and Rows It takes the value as number. While cols indicate the length of the
textarea, the rows indicate the number of rows with text that will
be visible at a time.
Name It provides an internal name to the textarea field as understood by
the computer.
Tabindex It defines the order number of activation of this field when the
visitor clicks on the tab key.
Wrap It helps in flowing the text to the next row in a paragraph when the
text reaches the right hand border of the text area.
(i) It can take three types of values as discussed below:
(ii) If the text is not wrapped, i.e. its value is set to wrap off , it
will be placed in the first row of the text area. In such a case
if the sentence doesnt get completed at the right hand border
of the text area, the text after the border will not be visible.
(iii) The value Virtual recognizes the text with line breaks when
textarea is loaded on the web page.
(iv) Physical defines the format of the text. It will appear on the
webpage as inserted by the user.
For Example:
The following code displays the use of <textarea> tag.
<form method=post action=mailto:[email protected]>

<textarea rows=5 cols=30 wrap=physical name=comments>
Enter Comments Here
</textarea>
<input type=submit value=Email Yourself >
</form>
The above code produces the following output which displays a text area of 5 lines
visible at a time and 30 characters long with a word wrap facility where the text flows to
the next line if the active text area is smaller than 30 characters due to small size of the
webpage opened by the user.

Output:
email yourself
2.3. Radio Buttons

If the value of the type attribute is radio i.e. <input type= Radio>, the form will show
a radio button. This button is also called toggle button.
Radio button enables the selection of one of the options out of the many.
Attributes of Text Field Description

Name It adds an internal name to the field so the program that
handles the form can identify the fields. To group the radio
buttons so that only one could be selected at a time, same
name is given to all the buttons.
Value It defines what will be submitted if checked.
Align It defines how the text field will be aligned on the form.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT,
TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Tabindex It defines in which order the different fields should be activated
when the visitor clicks the tab key.
Checked This attribute can have value (e.g., checked=checked |
unchecked).
Forms 73
For Example:
<form>
What type of lighting you have in your room? <br>
Lightingtype:
<input type=radio name=Ltype value=tube>TubeLight
<input type=radio name=Ltype value=bulb>Bulb <br>
Lighting Size:
<input type=radio name=LSize value=Long>Long
<input type=radio name=LSize value=medium>Medium
<input type=radio name=LSize value=short>Short <br></form>
The above code produces the following output:
What type of lighting you have in your room?

Lightingtype: TubeLight Bulb
Lighting Size: Long Medium Short
The user is allowed to select one of the two from Lighting type i.e. either TubeLight or Bulb.
Similarly, the user can select any one of the three from Lighting Size i.e. Long, Medium
and Short. This is achieved by naming all options of a set the same. Here all light type
has the name Ltype while all light size is name LSize. This is where the id attribute comes
handy, especially if the value has to be used later on.
2.4. Checkboxes
If the value of the type attribute is checkbox i.e. <input type= Checkbox>, the form will
show a checkbox. As compared to radio button, a checkbox allows for multiple selections
of items.
The check boxs attributes namely, name, align, value and tabindex behave the same as a
radio buttons attributes.

Every checkbox does not get a different name, rather a collection of checkboxes get the
same name so as to refer to a group as shown in the following code.
For example:
All the checkboxes have the same name i.e. sweet, though the value for each one of them
is different.
<form>
I love to eat Chocolate:
<input type=checkbox name=sweet value=Chocolate>
<br>
I love to eat Ladoo:
<input type=checkbox name=sweet value=Ladoo>
<br>
I love to eat Cake:
<input type=checkbox name=sweet value=Cake>
</form>
The output of the above code is shown below:
I love to eat Chocolate:

I love to eat Ladoo:
I love to eat Cake:
2.5. Command Button

If the value of the type attribute is Submit i.e. <input type= submit | reset>, the form
will show a command button.
Submit buttons: When activated, a submit button submits a form. A form may
contain more than one submit button.
Reset buttons: When activated, a reset button resets all controls to their initial
values.
Forms 75
This command button will perform some action when the user clicks on it. The action is
defined by action attribute in <form> tag along with the method attribute as shown in
the following code:

</form>
The above code displays the following output:

File Edit View
Suggested Sites
Email Yourself
When the user click on the command button called Email Yourself , the action specified
in <form> tag is performed. It opens your email inbox in email.com.
2.6. Drop down Box

Drop down Box contains a list that prompts the user to select one item from the list. It is
created by using <select> and <option> tags. Both <Select> and <option> tag have start
and an end tag. A SELECT element must contain at least one OPTION element.
The attributes used are:

Attribute Description
Name It adds an internal name to the field so the program that handles the form
can identify the fields
Size It defines the number of items to be visible when user clicks on the drop
down box
Multiple It allows for multiple selections
Value It defines what will be submitted to the computer when an item is selected. If the value
attribute takes the string as CHO, then CHO will only be understood by the computer
when the item selected is Chocolate.
The <option> tag is used for creating a list inside a <select> tag as shown under:
<select>
<option>Chocolate</option>
<option>Ladoo</option>
<option>Cake</option>
</select>

Highlighting one item in the dropdown box
You can force an item to be selected by default by adding the selected in the <option>
tag as <option selected>.
For Example:
The following code displays the use of <select> and <option> tag to show the dropdown
box in the browser. The size attribute takes the value as number 4, specifying the
dropdown box to show 4 items at a time in the list box.

Taste of food
<select multiple name=taste size=4>
<option value=indian selected>Indian</option>
<option value=chinese >Chinese</option>
<option value=mexican >Mexican</option>
<option value=italian >Italian</option>
<option value=continental >Continental</option>
<option value=karim >Karims Special</option>
<option value=japanese >Japanese Sweets</option>
</select>
</form>
The following output will display 6 items in the dropdown box, which is already open and
where the first item is already selected.
Taste of food
Indian
Chinese
Mexican
Italian
Continental
Karims Special
Forms 77
Summary
1. A form is an object that is used for collecting data from the user.
2. A The method attribute specifies how to send form-data using URL variables (with
method=get) or as HTTP post transaction (with method=post).
3. A The <input> tag collects the information from the user.
4. A The textfield control accepts the input in one line.
5. A Text areas are the fields that displays several text lines at a time. The <textarea> tag has
both start and the end tag.
6. A Radio button enables the selection of one of the options out of the many.
7. A Checkbox allows for multiple selections of items.
8. A The command button placed on the form performs some action when the user clicks on it.
9. A Submit buttons: When activated, a submit button submits a form. A form may contain
more than one submit button.
10. Reset buttons: When activated, a reset button resets all controls to their initial values.
11. Drop down Box contains a list that prompts the user to select one item from the list. It is
created by using <select> and <option> tags.
Exercise
1. A _____ can be inserted in HTML document which can act as a container for all the input
elements.
(a) Text field (b) Teaxt area
(c) Form (d) Command Button
2. ________ method is used to sent form data as URL variables.
(a) get (b) set
(c) post (d) none of them
3. ________ method is used to sent form data as HTTP post.
(a) get (b) set
(c) post (d) none of them
4. What is the purpose of a web form
(a) An outdated feature still used to help the page load faster
(b) An useful way to send information from the user directly to the search engines
(c) A way to input data into a website or an application
(d) To enable the user to navigate the website with ease

5. Which element allows for the creation of groups of options in a select menu?
(a) <select> (b) <group>
(c) <option> (d) <optgroup>
6. Which of the option will be selected with the following code snippet?
<select>
<option selected value=Fiat>Fiat</option>
<option value=selected>Saab</option>
<option value=opel>selected</option>
<option value=audi>Audi</option>
</select>
(a) Fiat (b) Saab
(c) Selected (d) Audi

1. Why forms are used in web pages?
2. Explain all the attributes of Form tag.
3. Differentiate between Get & Post methods of Form tag.
4. How text field and text area controls are different from each other?
5. Explain the use of Radio buttons in HTML forms with the help of an suitable example.
6. Mention all the attributes of Check box. Justify how it is different from Radio button.
7. State the purpose of Submit and Reset button.
8. Which attributes are necessary to insert drop down list in a HTML page?
9. Sometimes it is better to use the text area element instead of an input element of type
text. Write a short note to explain when and why?
C. Lab Session
1. Write HTML code to generate the following form. Save it as task1.html
Name First Name Last Name
Gender Male
Age Below 25
Above 25
Hobbies Outdoor Games
Painting
Dancing
Music
Submit
Forms 79
2. Write HTML code to generate the following form. Save it as task2.html
Emergency Contact Info More Actions
First Name Emergency Contact Info
Last Name Name
Gender Male Relationship
Date of Birth Address

[dd-MMM-yyyy]
Medical Information
Hospital
preference City
Insurance
Company State -Select-
Policy Number Country -Select-
Physicians Home Phone

Name
Phone Number Work Phone
Allergies (If
any)
Submit Reset
3. Generate the output by using the following code:

<FORM action=http://prog/user method=post>
<P>
<LABEL for=firstname>First name: </LABEL>
<INPUT type=text id=fname><BR>
<LABEL for=lastname>Last name: </LABEL>
<INPUT type=text id=lname><BR>
<LABEL for=email>email: </LABEL>
<INPUT type=text id=mail><BR>
<INPUT type=radio name=Gender value=Male> Male<BR>
<INPUT type=radio name=Gender value=Female> Female<BR>
<INPUT type=submit value=Send> <INPUT type=reset>
</P>
</FORM>

Chapter 5
DHTML & CSS
Learning Objectives
Differentiate between HTML & DHTML
State the purpose of using CSS.
List different advantages and disadvantages of using CSS.
Understand the working of all the mentioned properties of CSS.
Create an interactive webpage using CSS.
Introduction
When we open any web page and sends it to the computer requesting it cannot get any
more data from the server unless a new request is made. So to overcome this drawback
we use Dynamic HTML (DHTML) which is combining HTML and a scripting language
that runs on the Clients browser to bring special effects to otherwise static pages.
1. DHTML
DHTML is the combination of HTML and JavaScript. DHTML is the combination of
several built-in browser features in fourth generation browsers that enable a web page to
be more dynamic.
DHTML is a combination of technologies used to create dynamic and interactive Web

sites.
HTML - For creating text and image links and other page elements.
CSS - Style Sheets for further formatting of text and html, plus other added features
such as positioning and layering content.
JavaScript - The programming language that allows you to accesses and dynamically
control the individual properties of both HTML and Style Sheets
Dynamic is defined as the ability of the browser to alter a web pages look and style after
the document has loaded.
DHTML is not a scripting language (like JavaScript), but merely a browser feature- or
enhancement- that gives your browser the ability to be dynamic.
DHTML & CSS 81

DHTML is a collection of features that together, enable your web page to be dynamic. It
is the ability of the browser to alter a web pages look and style after the document has
loaded.
With DHTML you can create:

Animation
Pop-up menus
Inclusion of Web page content from external data sources
Elements that can be dragged and dropped within the Web page
Features of DHTML:
DHTML makes documents dynamic. It allows the designer to control how the HTML
displays Web pages content.
Web page reacts and change with the actions of the visitor.
DHTML helps to exactly position any element in the window, and change that position
after the document has loaded.
It can hide and show content as needed.
DHTML allows any HTML element (any object on the screen that can be controlled
independently using JavaScript) in Internet Explorer to be manipulated at any time,
turning plain HTML into dynamic HTML.
With DHTML, changes occur entirely on the client-side (on the users browser).
Components of DHTML: Dynamic HTML includes the following components:

Conventional HTML
Scripts Small programs designed to manipulate Web pages.
Document Object Model (DOM) The road map through which you can locate any
element in an HTML document and use a scripting DHTML 3 language, such as
JavaScript, to change the elements properties.
Absolute Positioning The elements on the page are placed in a fixed location, as
opposed to relative positioning, in which an elements location is relative to particular
elements on the page.
Multimedia filters Multimedia features that create visual effects for text, images,
and other objects, without imposing long download times on the user.

2. Cascading Style Sheets (CSS)
In this chapter, we will discuss CSS in detail.
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and
formatting of a document written in a markup language. It is a way to provide style to
HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation
of that document.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors,
spacing) to Web documents.
The advantages of using CSS are:
It controls layout of many documents from one single style sheet.
It has more precise control of layout.
It applies different layouts to different media-types.
It has numerous advanced and sophisticated techniques to be applied on web pages.
The Limitations of CSS are: CSS is very limited in browser compatibility. When you
design a web page and you want it to display exactly as you like it. The problem with CSS
is that it displays webpages very differently in the different browsers.
Your webpage looks perfect in Mozilla may look different in Internet Explorer. This is a
big problem for your sites success.
2.1 Methods of applying CSS to an HTML document

There are three ways you can apply CSS to an HTML document. The First method is In-Line,
Second method is Internal and the Third method i.e. external which is most important.
Method 1: In-line (the attribute style)

One way to apply CSS to HTML is by using the HTML attribute style.
Example 1: To apply the red background color in a webpage, it can be applied in the
following manner.
<html>
<head>
<title>Example</title>
</head>
<body style=background-color: #FF0000;>
<p>The background is red.</p>
</body>
</html>
DHTML & CSS 83

The above code will produce the following output:
le:///C:Users/sony/Desktop/check .html Yahoo
The background is red.
Method 2: Internal (the tag style)

Another way is to include the CSS codes using the HTML tag <style>. For example like
this:
<html>
<head>
<style type=text/css>
body {background-color: #0000FF ;}
</style>
</head>
<body>
<p> The background is Blue.</p>
</body>
</html>
The above code will produce the following output:
le:///C:Users/sony/Desktop/check .html Yahoo
The background is blue.

Method 3: External (link to a style sheet)
The method to link html with style sheet is called external style sheet.
An external style sheet is a text file with the extension .css. Like other files, we can place
the style sheet on your web server or hard disk.
For example, save the style sheet with the name style.css and place it in a folder named
style.
www.html.net
default.htm
style
style.css
To create a link from the HTML document (default.htm) to the style sheet (style.css). The
following code will be inserted in the header section of the HTML code i.e. between the
<head> and </head> tags. HTML file.
<link rel=stylesheet type=text/css href=style/style.css />
The code will be as follows:

Default.htm
<html>
<head>
<title>My document</title>
<link rel=stylesheet type=text/css href=style.css />
</head>
<body>
<h1>My stylesheet Page</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
This link will display the layout from the CSS file in the browser when displaying the HTML file.
DHTML & CSS 85

Output of the above code will be as follows:
le:///C:Users/sony/Desktop/default.htm l Yahoo
My stylesheet page
One CSS file can be used to control the layout of many HTML documents. Using CSS,
the change can be made in a few seconds just by changing one code in the central style
sheet.
3. Font
3.1 Font Properties
FONT-FAMILY
FONT-STYLE
FONT-SIZE
FONT-VARIANT
FONT-WEIGHT
3.1.1 Font family [font-family]

The property font-family is used to apply prioritized list of fonts in a web page. If the
first font of the list is not installed on the computer then the next font of the list will be
displayed until a suitable font is found.
Fonts family is divided into two categories:

1. Family-name
e.g. be Arial, Times New Roman or Tahoma.
2. Generic family
Generic families can be described as groups of family-names with uniformed
appearances.

Example: sans-serif, which is a collection of fonts without feet.
Times New Roman These three font-families belong to the

Garamond genetic family serif. They are characterized
Georgia by all having feet.
Trebuchet These three font-families belong to the

Arial genetic family sans-serif. They are all
Verdana characterized by all having feet.
Courier These three font-families belong to the genetic

Courier New family monospace. They are all characterized
Andele Mono by all characters having a fixed width.
An example of a inserting list of fonts in a web page:

h1 {font-family: arial, comic sans-serif, Times New Roman;}
h2 {font-family: Times New Roman, verdana, serif;}
Code inserted in font.html:

<html >
<head>
<title>Example </title>
<link rel=stylesheet href=ex1.css type=text/css/>

</head>
<body>
<h1>Heading 1 in Arial</h1>
<h2>Heading 2 in Times New Roman</h2>
</body>
</html>
DHTML & CSS 87

Code inserted in ex1.css:
h1 {font-family: arial, comic sans-serif, Times New Roman;}
h2 {font-family: Times New Roman, verdana, serif;}
Output produced by the above code:

le:///C:Users/sony/Desktop/font.htm l Yahoo
Heading 1 in Arial
Heading 2 in Times New Roman
3.1.2 Font style

The property font-style defines the chosen font either in normal, italic or oblique. In the
example below, all headlines marked with <h2> will be shown in italics.
h1 {font-family: arial, verdana, sans-serif; font-style: oblique;}
h2 {font-family: Times New Roman, serif; font-style: italic;}

<html >
<head>

</head>
<body>
</body>
</html>

h1 {font-family: arial, comic sans-serif, Times New Roman; font-style: oblique;}
h2 {font-family: Times New Roman, verdana, serif; font-style: italic;}

Heading 1 in Arial
Heading 2 in Times New Roman
3.1.3 Font variant

This property is used to select normal or small-caps variants of a font. A small-caps font
display the smaller sized capitalized letters (upper case) instead of lower case letters.
Sans Book SC Sans Bold SC Serif Book SC Serif Bold SC

ABCABC ABCABC ABCABC ABCABC
If font-variant is set to small-caps and no small-caps font is available the browser will
most likely show the text in uppercase instead.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

<html >
<head>

</head>
<body>

</body>
</html>
DHTML & CSS 89

h1 {font-family: arial, comic sans-serif, Times New Roman; font-variant: small-caps;}
h2 {font-family: Times New Roman, verdana, serif; font-style: italic; font-variant: normal;}
HEADING 1 IN SMALL CAPS

Heading 2 in normal
3.1.4 Font weight

This property describes how bold or heavy a font should be presented. A font can either
be normal or bold. Some browsers supports the use of numbers between 100-900(in
hundreds) to describe the weight of a font.
p {font-family: arial, verdana, sans-serif; font-weight: normal;}

td {font-family: arial, verdana, sans-serif; font-weight: bold;}

<html >
<head>

</head>
<body>
<h1>Heading 1 in normal</h1>
<h2>Heading 2 in bold</h2>
</body>
</html>

{font-family: arial, verdana, sans-serif; font-weight: normal;}
{font-family: arial, verdana, sans-serif; font-weight: bold;}
Heading 1 in normal
Heading 2 in bold
3.1.5 Font size [font-size]

The font-size property is used to set the size of a font.
There are many different units (e.g. pixels and percentages) to describe font sizes. The
following example will illustrate the following effect of font size in a web page.

<html >
<head>
<link rel=stylesheet href=ex1.css type=text/css media=all />

</head>
<body>
<h1>Heading 1 30px</h1>
<h2>Heading 2 12pt</h2>
<h3>Heading 3 120%</h3>
<p> Heading 4 paragraph</p>
</body>
</html>
DHTML & CSS 91

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Heading 1 30px
Heading 2 12PT
Heading 3 120%
Heading 4 Paragraph
The units px and pt make the font size absolute, while % and em allow the user to
adjust the font size as he/she see fit. Some users suffer from poor vision or a monitor of
bad quality. To make your website readable for everybody, you should use adjustable units
such as % or em.
3.1.6 Combining [font] styles:

All the different font properties can be combined in one single property.
For example, to apply different font-properties for <p> tag following code can be used:
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif; }
The order of values for font properties is:
font-style | font-variant | font-weight | font-size | font-family

Example:
Display the content using all the font properties of font family.
Code to be inserted in Font.html

<html >
<head>
</head>
<body>
<p> This an example of combining all the Font properties.</p>
</body>
</html>
Code to be inserted in ex1.css

p { font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif; }
Output produced by the following above code:
This is an example of combining all the Font properties.
4. COLOR Properties
TEXT-INDENT
TEXT-ALIGN
TEXT-DECORATION
LETTER-SPACING
TEXT-TRANSFORM
DHTML & CSS 93

4.1 Text indention
The text-indent property allows you to add effects to text paragraphs by applying an indent
to the first line of the paragraph.
Example:
To apply 40px indentation to all text paragraphs marked with <p>, the following code
will be used:
Code to be inserted in font.html:

<html >
<head>
</head>
<body>
<p> This an example of Text Indentation.</p>
</body>
</html>

p{
text-indent: 60px;
}
Output produced by the above following code:
This is an examaple of Text Indentation

4.2 Text alignment
The text-align property gives the same effect as attribute align gives in old versions of
HTML. The text can either be aligned to the left, to the right or center of the screen. CSS
allows you to apply Justified alignment on text which is not available in HTML. The value
justify will stretch each line so that both the right and left margins are straight.
Example:
Display the text in table headings <th> aligned to the right while the table data <td> in
the centre of the browser window and normal text in paragraphs to be justified.
Code to be inserted in font.html

<html >
<head>
</head>
<body>
<h1>Text alignment</h1>
<h2>Text alignmen in table</h2>
<table border=1 width=100%>

<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<h2>Justified text in paragraphs</h2>

<p>The Internet is a global system of interconnected computer networks that use the
standard Internet protocol suite (TCP/IP) to serve several billion users worldwide. It is
DHTML & CSS 95

a network of networks that consists of millions of private, public, academic, business,
and government networks, of local to global scope, that are linked by a broad array of
electronic, wireless, and optical networking technologies. The Internet carries an extensive
range of information resources and services, such as the inter-linked hypertext documents
of the World Wide Web (WWW), the infrastructure to support email, and peer-to-peer
networks.
</p>
<p>The Internet has no centralized governance in either technological implementation

or policies for access and usage; each constituent network sets its own policies. Only the
overreaching definitions of the two principal name spaces in the Internet, the Internet
Protocol address space and the Domain Name System, are directed by a maintainer
organization, the Internet Corporation for Assigned Names and Numbers (ICANN). The
technical underpinning and standardization of the core protocols (IPv4 and IPv6) is an
activity of the Internet Engineering Task Force (IETF), a non-profit organization of loosely
affiliated international participants that anyone may associate with by contributing technical
expertise.</p>
</body>
</html>

th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}

le:///C:Users/sony/Desktop/font.htm l
Text alignment
Text alignment in table
Heading 1 Heading 2
Cell 1 Cell 2
Cell 3 Cell 4
Justified text in paragraphs
The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (TCP/IP) to serve several billion users worldwide. it is a network of
networks that consists of millions of private, public, academic, business and government networks, of local to global scope, that are linked by a broad array of electronic, wireless, and optical
new networking technologies. The Internet carries and extensive range of information resources and services, such as the inter-linked hypertext documents of the World Wide Web (WWW), the
infrastructure to support email, and peer-topeer networks.
The Internet has no centralized governance in eighter technological implementation or policies for access and usage; each constituent network sets its own policies. Only the
overreaching definitions of the two principla name spaces in the Internet, the Internet Protocol address space and the Domain name System, are directed by a maintainer organization, the
Internet Corporation for Assigned Names and Numbers (ICANN). The technical underpinning and standardization of the core protocols (IPv4 and IPv6) is an activity of the Internet
Engineering Task Force (IETF), a non-profit organization of loosely affiliated international participants that anyone may associate with by contributing technical expertise.
4.3 Text decoration

The text-decoration property makes it is possible to add different decorations or effects
to text. For example, you can underline the text, have a line through or above the text,
etc.
+In the following example, <h1> are underlined headlines, <h2> are headlines with a line
above the text and <h3> are headlines with a line though the text.

<html >
<head>
</head>
<body>
<h1>Text Underline</h1>
<h2>Text Overline</h2>
<h3> Text Line Through</h3>
</body>
</html>
DHTML & CSS 97

h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Output produced by the above following code:
Text Underline
Text Overline
Text Line Through
4.4 Letter space

This property is used to give the specified spacing between the text characters. The value
of the property is simply the desired width.
Example:
To give 3px spacing between the letters in a text paragraph <p> and 6px between letters
in headlines <h1> the following code will be used:

<html >
<head>
</head>
<body>

<h1>Example showing Letter Spacing</h1>
<p>The Internet is a global system of interconnected computer networks that use the
standard Internet protocol suite (TCP/IP) to serve several billion users worldwide. It is
a network of networks that consists of millions of private, public, academic, business,
and government networks, of local to global scope, that are linked by a broad array of
electronic, wireless, and optical networking technologies. The Internet carries an extensive
range of information resources and services, such as the inter-linked hypertext documents
of the World Wide Web (WWW), the infrastructure to support email, and peer-to-peer
networks.
</p>
</body>
</html>

h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Example showing Letter Spacing

The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (TCP/IP) to serve
several billion users worldwide. it is a network of networks that consists of millions of private, public, academic, business and
government networks, of local to global scope, that are linked by a broad array of electronic, wireless, and optical new networking
technologies. The Internet carries and extensive range of information resources and services, such as the inter-linked hypertext
documents of the World Wide Web (WWW), the infrastructure to support email, and peer-topeer networks.
4.5 Text transformation

The text-transform property controls the capitalization of a text. You can choose to
capitalize, use uppercase or lowercase regardless of how the original text is looks in the
HTML code.
DHTML & CSS 99

An example could be the word headline which can be presented to the user as
HEADLINE or Headline. There are four possible values for text-transform:
Capitalize : Capitalizes the first letter of each word. For example: information technology
will be Information Technology.
Uppercase : Converts all letters to uppercase. For example: information technology

will be INFORMATION TECHNOLOGY.
Lowercase : Converts all letters to lowercase. For example: INFORMATION

TECHNOLOGY will be information technology.
None : No transformations - the text is presented as it appears in the HTML code.
Example:
Display the heading in Capital letters and list items in uppercase.

<html >
<head>
</head>
<body>
<h1>Parts of Computer:</h1>
<ol>
<li> Visual Dispaly Unit</li>
<li> Keyboard </li>
<li> Mouse </li>
<li> Central Processing Unit </li>
<li> Printer </li>
</ol>
</body>
</html>

h1 {
text-transform: capitalize;
}

li {
text-transform: uppercase;
}
Parts of Computer:
1. VISUAL DISPLAY UNIT
2. KEYBOARD
3. MOUSE
4. CENTAL PROCESSING UNIT
5. PRINTER
5. Background Properties
FOREGROUND-COLOR
BACKGROUND-COLOR
BACKGROUND-IMAGE
BACKGROUND-REPEAT
5.1 Foreground color: the color property

The color property describes the foreground color of a text to be displayed in browser.
Example, display all headlines in a document to be green colour.
Code to be inserted in font.html:

<html >
<head>
</head>
<body>
<h1>Parts of Computer:</h1>
<ol>
<li> Visual Dispaly Unit</li>
<li> Keyboard </li>
<li> Mouse </li>
<li> Central Processing Unit </li>
DHTML & CSS 101

<li> Printer </li>
</ol>
</body>
</html>
Code to be inserted in ex1.css:

h1 {
color: #ff0000;
}
Parts of Computer:
1. VISUAL DISPLAY UNIT
2. KEYBOARD
3. MOUSE
4. CENTAL PROCESSING UNIT
5. PRINTER
Colors can be entered as hexadecimal values as in the example above (#ff0000), or you
can use the names of the colors (red) or rgb-values (rgb(255,0,0)).
5.2. background-color property

The background-color property describes the background color of browser window.
To change the background color of an entire page, the background-color property should
be applied to the <body> tag. You can also apply background colors to other elements
including headlines and text.
Example, apply different background colors to <body> and <h1> tags.

<html >
<head>
</head>
<body>
<h1> Example displaying foreground and background colour.</h1>
</body>
</html>

body {
background-color: #FFCC60;
}
h1 {
color: #990011;
background-color: #FC9004;
}
Notice that two properties have been applied to <h1> by dividing them by a semicolon.
Code produced by the following above code:
Example displaying foreground and background colour:
5.3 Background images [background-image]

The background-image property is used to insert a background image in a web page.
To insert the image of the butterfly as a background image for a web page, simply apply
the background-image property to <body> and specify the location of the image.

<html >
<head>
</head>
<body>
<h1> Inserting Image</h1>
</body>
</html>
DHTML & CSS 103

body {
background-image: url(earth.gif );
}
h1 {
color: #990000;
}
Output to be produced by the above following code:

le:///C:Users/sony/Desktop/font.html Yahoo
Inserting Image
Image will be inserted by giving the specified the location of the image as url(earth.gif ).
This means that the image is located in the same folder as the style sheet. You can also
refer to images in other folders using url(../images/earth.gif ) or even on the Internet
indicating the full address of the file: url(http://www.example.net/earth.gif ).
5.4 Repeat background image [background-repeat]

As you have seen in the example above, that by default the image of the earth was repeated
both horizontally and vertically to cover the entire screen. The background-repeat property
controls this behaviour.
The four different values for background-repeat are as follows:

Value Description
background-repeat: repeat-x The image is repeated horizontally
background-repeat: repeat-y The image is repeated vertically
background-repeat: repeat The image is repeated both horizontally and vertically
background-repeat: no-repeat The image is not repeated

For example, to avoid repetition of a background image the following code can be used:

<html >
<head>
</head>
<body>
<h1> Inserting Image</h1>
</body>
</html>

body {
background-image: url(earth.gif );
background-repeat: no-repeat;
}
h1 {
color: #990000;
}
Output to be produced by the following above code:
le:///C:Users/sony/Desktop/font.html Yahoo
No repeated Image
DHTML & CSS 105

Summary
1. DHTML is the combination of several built-in browser features in fourth generation browsers
that enable a web page to be more dynamic.
2. CSS - Style Sheets for further formatting of text and html, plus other added features such as
positioning and layering content.
3. JavaScript - The programming language that allows you to accesses and dynamically control
the individual properties of both HTML and Style Sheets.
4. There are three ways to apply CSS to an HTML document.
5. The property font-family is used to apply prioritized list of fonts in a web page.
6. The property font-style defines the chosen font either in normal, italic or oblique.
7. The Font-variant property is used to select normal or small-caps variants of a font.
8. The Font-weight property describes how bold or heavy a font should be presented. A font
can either be normal or bold.
9. The font-size property is used to set the size of a font.
10. The text-indent property allows you to add effects to text paragraphs by applying an indent
to the first line of the paragraph.
11. The text-align property gives the same effect as attribute align gives in old versions of HTML.
The text can either be aligned to the left, to the right or center of the screen.
12. The text-decoration property makes it is possible to add different decorations or effects
to text.
13. The Letter-spacing property is used to give the specified spacing between the text characters.
14. The text-transform property controls the capitalization of a text. You can choose to capitalize,
use uppercase or lowercase effects to be applied on text in the HTML code.
15. The color property describes the foreground color of a text to be displayed in browser.
16. The background-color property describes the background color of browser window.
17. The background-image property is used to insert a background image in a web page.
18. The background-repeat property avoids the repetition of the image set as a background for
the web page.
Exercise
1. Which property describes how bold or heavy a font should be presented?
(a) Font style (b) Font size
(c) Font weight (d) Font variant

2. The units ___ and ___ allow the user to adjust the font size according to him/her.
(a) # and me (b) % and em
(c) $ and es (d) All of the above
3. The ________________ makes it is possible to add different decorations or effects
to text.
(a) Text Align property (b) Text Indent property
(c) Letter spacing property (d) None of the above
4. DHTML is a combination of _________ and __________.
(a) DOM and CSS (b) CSS and Conventional HTML
(c) HTML and JavaScript (d) None of the above
5. __________________________ is a style sheet language used for describing the look and
formatting of a document written in a markup language.
(a) Document Object Model (DOM) (b) Multimedia filters
(c) Cascading Style Sheets (CSS) (d) DHTML
6. Which property is used to give the specified spacing between the text characters?
(a) Text Decoration (b) Letter Spacing
(c) Text Transform (d) None of the above
7. The units px and ___ make the font size absolute.
(a) pr (b) pn
(c) pz (d) pt
8. The _______________ repeats the image both horizontally and vertically to cover the
entire screen.
(a) Background Image property (b) Foreground Color property
(c) Background Color property (d) Background Repeat property
B. Fill in the blanks:

1. Font-family style differentiates between _______,__________ and ________ font faces.
2. The font-variant property refers to the ___________ variant of the font face.
3. CSS uses a numeric scale of multiples of ______ to _________.
4. The CSS specification also allows browser to render any ____ value as normal.
5. The text decoration has to rendered with _____________.
6. The _____________ property allows you to add effects to text paragraphs by applying
an indent to the first line of the paragraph.
7. Font variant property is used to select ___________ or ___________ variants of a font
8. The ______________ property describes the foreground color of a text to be displayed
in browser.
DHTML & CSS 107

9. The property font-style defines the chosen font either in _______, ______ or
_________.
10. The property _____________ is used to apply prioritized list of fonts in a web page.
11. The text-transform property controls the _____________ of a text.
12. The _______________ property describes the background color of browser window.
13. The ______________ property is used to insert a background image in a web page.
C. Answer the following questions:

1. Explain CSS with reference to DHTML
2. List some advantages and disadvantages of CSS.
3. What is the extension of a CSS file?
4. Explain how would we embedded Style in your HTML.
5. List down the various font-family property ? Give an example of each.
6. What do you mean by font-variant? Give example of each.
7. Explain font-weight?
8. Mention the properties of CSS used to insert Letter spacing in a line.
9. How many types of text alignments can be included in a CSS page.
10. How the text in a webpage can be capitalized using CSS properties?
11. Explain the CSS properties to set the foreground and background color of the
webpages.
12. Which property of CSS controls the repetition of image inserted in a web page as a
background?
D. Lab Session
1. Create a web page for a company name web@Creation using attributes such as Background
color along with other attribute.
2. Create a webpage for departmental store using all the listing tags with margin attributes
of CSS, where they sold following items:
(a) Furniture (b) Electronic Items (c) Home Appliances
(d) Computer Books (e) Cosmetics
3. Design a webpage where heading is placed from the left 40 using relative-position of CSS
having headings A B C D.
4. Write code to develop Webpage that is having some paragraph with the different size
unit.

Chapter 6
Network Security
Learning Objectives
Name the different kinds of software licensing available
Differentiate between freeware and open source software
State how the use of shareware software is different from that of freeware software
Differentiate between copyright and licensing
Define cyberethics, cybersafety and cybersecurity
State the purpose of cookies
Tabulate the different phases of cyber ethics evolution
List precautions that can be taken to ensure cyber safety
Identify the different kinds of threats to cyber security
State ethical behaviour to be followed as a cyber citizen
Identify the different categories of cyber crime
Introduction
The world created by technology is one of machines - computers, computer systems and
computer networks. Add to that the human component and one has a world of diverse
cultures and social practices that is often referred to as cyberspace.
Cyberspace is a man made world that is constantly evolving. It differs from the static
physical world as it has no boundaries, no geographical mass, and of course, no gravity. It is
limitless, constantly changing its shape, attributes and characteristics. It exists in a form of
bits and bytes; it is an information driven world. Government(s), hardware manufacturers
and software application providers act as gatekeepers of cyberspace.
This medium, which is dynamic, infinite and intangible has to be regulated to prevent
it from exploding. Regulating cyberspace means regulating both man and the machine.
There is ethics, safety and security involved.
Ethics represents personal choice. Its the set of acceptable behaviours in a given culture.
Its not just a list of rules but the code of conduct by which a society chooses to live. Safety
refers to safe practices and security is the additional tasks carried out to ensure safety.
Network Security 109

The first is a moral choice, the second a behavioural code and the third involves active
participation.
In cyberspace we have
Cyberethics exploring appropriate and ethical behaviours related to online
environments and digital media. It includes plagiarism, bullying, and hacking to
name a few.
Cybersafety defining how one operates on-line. It includes rules guiding how to keep
personal information safe and limited
Cybersecurity involving tasks undertaken on the computer to keep it secure from
people who wish to harm it or use data stored on it unlawfully. This includes installing
virus software and firewalls.
Before we study these in greater detail there are certain fundamental terminology and
concepts that must be understood.
1. Basic Terminology
1.1 Copyright and License
Copyright is about protecting original expression. Copyright
arises as soon as a work is created. A software copyright
protects all source code, written text materials, graphic
images/ designs, drawings, any linked sound, video files
or films.
A copyright owner has five exclusive rights:

Fix or store the information in a tangible form.
Reproduce the copyrighted material.
Sell, rent, lease, or otherwise distribute copies of the copyright work to the public.
Publicly perform and display the copyrighted material.
Prepare derivative works based on the copyrighted material.
License is the permission granted by the holder of a copyright to another to use an

original work. It states under what circumstances and to what extent the original work
can be used, changed or distributed. It may include a period of time, a geographical area,
renewal provisions, and other limitations. It does not pass on the copyright.

1.2 Software Licensing
A software license is a legal agreement about an
application. It is between the software producer and
the end-user and is an important part of the legally
binding contract between them (or rights owner)
and the end-user. This is to ensure recognition of the
rights of the owner on his creation. It specifies how
the application may be used and defines the rights of
both the producer and the user.
1.3 Open Source, Freeware and Shareware

Open-source software (OSS) is computer software with its source code made available. It is
very often developed in a public, collaborative manner. A license for open sources software
allows the end user to study, change and distribute the software for any purpose.
Some copyrighted software is made available for use, free of charge for an unlimited time.
These are called freeware. The copyright still remains with the producer / owner for any
future development.
Shareware are copyrighted software that can be shared for a limited on a trial basis with
the understanding that if the user decides to use it, he will pay for it.
1.4 Types of software licenses

Proprietary license where the copyright stays with the producer and the user is
granted the right to use the software
GNU General Public Licenses, which are agreements under which open source
software is usually licensed.It allows end users to change the source code, but the
changed code too, must also be made available under a GNU GPL license.
End User License Agreement (EULA) indicates the terms under which the end-
user may use the software.
Workstation licenses are licenses that permit the installation of an application on
a single computer. Before installing it on a different machine the software must be
removed from the first machine
Concurrent use licenses permit the installation of the software onto multiple
machines as long as the number of computers using the software at the same time
does not exceed the number of licenses purchased.

Site licenses permit the use of software on any computer at a specified site. Unlimited
site licenses allow the installation of the software on any number of computers as
long as those computers are located at the specified site.
Perpetual licenses come without an expiry date and allow the software to be used
indefinitely
Non-perpetual licenses lease the software for use for a specified period of time,
usually annually or sometimes bi-annually. Users are required to remove the
software from their computer if they cease paying the license fee.
License with Maintenance offer maintenance or software assurance along with
the original license fee.
1.5 Cyber Law

Cyber law is a new branch of law and is growing very fast. It establishes norms of accepted
human behaviour in cyberspace. There are three basic building blocks of cyber law.
Netizens who are the inhabitants of the internet and
use it as an extension of their physical world
Cyberspace which is a man made machine world
reshaping itself periodically.
Technology
Cyber law includes all the cases, written rules and government laws that affect persons
and institutions who
control the entry to cyberspace,
provide access to cyberspace,
create the hardware and software which unable people to
access cyberspace or
Use devices to go online and enter cyberspace.
Laws governing ecommerce, online contracts, copyright, trademark, business software
patenting, eTaxation, eGovernance and cyber crimes all fall within the meaning and scope
of cyber law.
1.6 Cookies
Cookies allow a visited website to store its own information about a user on the users
computer.

When a user uses a computer to visit a website, the website stores some basic information
about the visit on the hard disk of the computer. It records the users preferences while
using the site. This stored information is called a cookie.
1.7 Hackers and Crackers

Hackers are people with computer programming skills who use their knowledge to gain
unauthorized access to data in a system or computer.
Crackers modify or disable features of a software

application. They usually mean to harm the software,
the hardware using this software or the end user of the
software.
Both hackers and crackers can also work on the ethical side when they use their skills to
prevent cyber crime and help the law keepers.
1.8 Firewall
A firewall is a program or hardware device that
filters the information coming through an internet
connection to a network or computer system. If
incoming information does not pass the rules
stored in the firewall, it is not allowed through.
1.9 Cyber Ethics

The explosion of social networking and the common practice of sharing and posting of
information online have changed the way people communicate. Users must understand
their responsibilities for conducting themselves online. An important component of that
is Cyber Ethics. Cyber Ethics refers to the code of responsible behaviour on the Internet.
Basic Cyber ethics must be followed to be good cyber citizens.
Cyberethics began in some form in the 1940s. It examines the impact of not only the
internet or computing machines but also private computer networks and interconnected
communication technologies.

The evolution of cyber ethics can be categorized in four distinct phases.
Phase Time Period Technological features Associated issues
I 1950s - 1960s Stand alone machines Artificial intelligence
(Large mainframe Database privacy
computers)
II 1970s - 1980s Minicomputers roblems of Phase I
P
PCs Intellectual property
Privately owned Software piracy
computer networks Computer crime
Privacy and exchange of data
III 1990s Present I nternet Problems of Phase I and II
The World Wide Concerns about free speech
Web (www) Anonymity
Legal jurisdiction
Virtual communities
IV Present - Near C onvergence of Problems of Phase I, II and III
Future information and Concerns about artificial
communication electronic agents (bots) with
technologies decision making capabilities
Nano technology Biochip implants
research
Genetic and genomic
research
Cyber ethics must be practiced at every level of computer usefrom the novice user to an
information technology professional whose job requires significant use of online resources.
Those who use the internet must be follow ethical practices in every aspect of its use.
Anyone can communicate at anytime, with anyone, anywhere over the internet today.
This can have negative consequences. Anonymous posting to blogs, websites, and social
media can encourage bad behaviour as it does not identify the person who commits the
action.
With the widespread availability of mobile phones and internet

access, bullying and harassment can be conducted through
cyberspace. Developments in electronic media offer new
platform for bullies and allow cyber bullying. Cyber bullying

uses internet service or mobile technologies - such as e-mail, chat room discussion groups,
instant messaging, web pages or SMS (text messaging) - with the intention of harming
another person. The actions can range from cruel or embarrassing rumours to threats,
harassment, or stalking. The effects can be far-reaching and long lasting.
The same rules of right and wrong taught to a child while growing up needs to be applied
to cyber space! Do not do something in cyber space that you would consider wrong or
illegal in everyday life.
Do not use rude or offensive language.
Do not lie about people, send embarrassing pictures of them, or anything else to try
to hurt them (bullying).
Do not use someone elses password or break into his computer.
Do not copy information from the Internet and claim it as yours (plagiarism).
Obey copyright restrictions when downloading material.
Do not try to make someone elses computer unusable.
1.10 Cyber Safety

Identity theft is a growing problem and a very troubling one. The concept is rather
simple, though the process can be complex, and the consequences for the victim can be
quite severe. The idea is simply for one person to take on the identity of another. This is
usually attempted to make purchases; but identity theft can be done for other reasons,
such as obtaining credit cards in the victims name, or even a drivers licenses. If the
person responsible for the theft obtains a credit card in someone elses name, then he can
purchase products and the victim of this fraud is left with debts she was not aware of and
did not authorize.
One of the more common ways to accomplish identity theft is via a technique called
phishing, which is the process of trying to tempt the target to provide personal information
which can be used to perform illegal actions.
Another horrifying safety threat is stalking which involves harassing or threatening

behaviour that an individual engages in repeatedly. It could mean following a person,
appearing at a persons home or place of business, making harassing phone calls, leaving
written messages or objects, or vandalizing a persons property. Such behaviour should
be treated seriously.
Cyber-safety addresses the ability to act in a safe and responsible manner on the Internet
and other connected environments. These behaviours protect personal information and

reputation. They include safe practices to minimize danger from behaviour-based rather
than hardware/software-based problems.
In following cyber safety guidelines a user will recognize online risks, make informed
decisions, and take appropriate actions to protect himself while using technology, technology
systems, digital media and information technology. He would adhere to privacy and safety
guidelines, policies, and procedures.
Here are some cyber safety guidelines to follow.

Set secure passwords and dont share them with anyone. Avoid using common words,
phrases, or personal information and update regularly.
Restrict access and make personal information secure to prevent identity theft.
Be suspicious of unsolicited contact from individuals seeking internal organizational
data or personal information. Verify a requests authenticity by contacting the requesting
entity or company directly.
Immediately report any suspect data or security breaches to your supervisor and/or
authorities.
Limit the amount of personal information you post. Do not post information that
would make you vulnerable, such as your address or information about your schedule
or routine. If your friend posts information about you, make sure the information is
something that you are comfortable sharing with strangers.
Be wary of strangers and cautious of potentially misleading or false information.
Take advantage of privacy and security settings. Use site settings to limit the information
you share with the general public online.
Be suspicious of unknown links or requests sent through email or text message. Do
not click on unknown links or answer strange questions sent to your mobile device,
regardless of who the sender appears to be.
Download only trusted applications from reputable sources or marketplaces.
1.11. Cyber Security

The media gives a lot of attention to dramatic virus
attacks, hackers, and other interesting Internet
phenomena. In spite of daily horror stories, however,
many people lack an adequate understanding about the
reality of these threats.

External threat to any system is not just hackers or crackers, but also malware and denial
of service attacks. Malware includes viruses, worms, Trojan horses, and logic bombs. And
there is the issue of internal problems due to misbehaviour or simple ignorance.
2. M
ost attacks can be categorized as one of six
broad classes
Malware, software that has a mischievous purpose such as virus attacks, worms, adware,
Trojan horses, and spyware. This is the most prevalent danger to a system. Malware is
discussed in detail later in the lesson.
Security breaches that attempt to gain unauthorized access to a system including cracking
of passwords, changing privileges, breaking into a server.. in other words, hacking a
computer or a computer network.
Denial of service (DoS) attacks that are designed to prevent legitimate access to a
system.
Web attacks that attempts to breach a website. Two of the most common such attacks are
SQL injection and cross-site scripting.
Session hijacking, where an attacker attempts to take over a session.
DNS poisoning, which seeks to compromise a DNS server so that users can be redirected
to unsafe websites.
Malware
Malware is used to disrupt computer operation, gather sensitive information, or gain access
to private computer systems. It can appear in the form of code, scripts, active content, and
other software. Malware is a general term used to refer to a variety of forms of hostile or
intrusive software. Let us take a look at some of the important malwares available today.
Viruses: A computer virus is a program that replicates itself. A computer virus attaches
itself to a program or file to help it spread from one computer to another. Almost all viruses
are attached to an executable file, which means the virus may exist on a computer but it
actually cannot infect the computer unless one runs or opens the malicious program. It is
important to note that a virus cannot be spread without a human action, (such as running
an infected program) to keep it going.

Generally, a virus will also have some other unpleasant function, but the self-replication
and rapid spread are the distinguishing features of a virus. Often this growth, in and of
itself, can be a problem for an infected network. The infamous I Love You virus slowed
down many networks just by the volume of emails it generated.
Worms: A worm is similar to a virus and is considered to be a sub-class of a virus. It

spreads from computer to computer, as it has the capability to travel without any human
action. A worm takes advantage of file or information transport features on a system,
which is what allows it to travel unaided. Worms cause harm to the infected network,
whereas viruses corrupt or modify files on a targeted computer. In recent worm attacks
such as the much-talked-about Blaster Worm, the worm has been designed to tunnel into
a system and allow malicious users to control the computer remotely.
Adware: Adware refers to computer software that is provided usually for free but contains
advertisements. It automatically renders advertisements in order to generate revenue for
its author.
Trojan horses: A Trojan horse is a program that looks straightforward and safe but actually
has a malicious purpose. At first glance it will appear to be useful software but will actually
do damage once installed or run on a computer. It is often used to deliver a virus into the
system. One of the earliest and most widely known was Back Orifice.
Spyware: Spyware is simply software that literally spies on what is being done on a computer.
Spyware can be as simple as a cookie used by a website to record a few brief facts about a
visit to that website, or spyware could be of a more dangerous type such as a key logger,
a program that records every keystroke one makes on a keyboard.
The DOs and DONTs of network security

Pay close attention to website URLs. Pay attention to the URLs of websites you visit.
Keep operating system, browser, anti-virus and other critical software up to date.
Security updates and patches are available for free from major companies.
Turn off the option to automatically download attachments from your emails
Save and scan any attachments before opening them. If you have to open an attachment
before you can verify the source, take the following steps:
Be sure your anti-virus software is up to date.
Save the file to your computer or a disk.
Run an anti-virus scan using your computers software.

3. Cyber Crimes
Now that we are familiar with a number of network security concepts and vocabulary let
us take a look at where all this is leading. With enhanced technology, cyber crimes are
the norm today.
Cyber crime may be defined as any illegal act that involves a computer, computer system
or computer network. It is any illegal act for which knowledge of computer technology is
essential to execute, investigate, or implement.
3.1 Types of Cyber Crimes

Cyber crime can be categorized as given here.
General Intrusions
Hacking, spyware, phishing, pharming,
Sending computer viruses & worms to invade computers
Causing denial of service attacks
Creating bots, Trojan horses, zombie machines
Nuisances (usually non-violent activities)
Sending spam
Changing web page text and images
Redirecting websites
Personal Identity Theft (using someone elses name or credit)
Phishing for private information, passwords, code numbers
Making unauthorized purchases with stolen credit cards or ID
Destroying personal reputation
Damaging personal credit ratings
Theft of Intellectual Property (stealing ideas or creations of others)
Downloading copyrighted music & videos
Plagiarism, cheating
Software piracy
Physical or Mental Damage
Cyberbullying, harassment
Cyberstalking
Sexual exploitation of minors, child pornography

Terrorism
Stealing military and private industry secrets - espionage
Brainwashing and recruiting new followers
Building terrorist communications network
Some of these we have already talked about in the lesson. You could find out information
about the others from other sources. This is just an introduction to get you going.
General Intrusions
Case 1: Sending Computer Virus/Worm to invade computers
The ILOVEYOU virus comes in an e-mail note with I LOVE YOU in the subject line
and contains an attachment that, when opened, results in the message being re-sent to
everyone in the recipients Microsoft Outlook address book and, perhaps more seriously,
the loss of every JPEG, MP3, and certain other files on the recipients hard disk. Because
Microsoft Outlook is widely installed as the e-mail handler in corporate networks, the
ILOVEYOU virus can spread rapidly from user to user within a corporation. On May 4,
2000, the virus spread so quickly that e-mail had to be shut down in a number of major
enterprises such as the Ford Motor Company. The virus reached an estimated 45 million
users in a single day.
The attachment in the ILOVEYOU virus is a VBScript program that, when opened (for
example, by double-clicking on it with your mouse), finds the recipients Outlook address
book and re-sends the note to everyone in it. It then overwrites (and thus destroys) all files
of the following file types: JPEG, MP3, VPOS, JS, JSE, CSS, WSH, SCT and HTA. Users
who dont have a backup copy will have lost these files. (In March 1999, a virus named
Melissa virus also replicated itself by using Outlook address books, but was less harmful
in destroying user files.) The ILOVEYOU virus also resets the recipients Internet Explorer
start page in a way that may cause further trouble, resets certain Windows registry settings,
and also acts to spread itself through Internet Relay Chat (Internet Relay Chat).
The Creators Reomel Ramores and Onel de Guzman created this deadly virus on 5 May
2000 but were lucky to escape prosecution due to lack of rules for arresting people for
writing malicious code in Philippines ! The Damage-- 50 million infections reported
within 10 days.
Case 2: Malware/Trojans
A Trojan takes its name from the term Trojan Horse. It is a type of computer virus that
can be installed on your computer without you realising.

One variation of a Trojan installs a keystroke logger on your computer. This records the
words and numbers you type when you use your computer keyboard. If you login to your
online bank account, the keystroke logger will record your login information.
More sophisticated Trojans insert a pop-up page in front of your genuine online banking
page, and then try to trick you into making a payment to someone elses account.
Other types of malware are able to insert extra fields, not normally found on your online
banking website.
It is suggested that you should use virtual keyboard while doing net banking. Virtual
Keyboard is an online application to enter password with the help of a mouse.The Virtual
Keyboard is designed to protect your password from malicious Spyware and Trojan
Programs. Use of Virtual keyboard will reduce the risk of password theft.
Case 3: Stealing internet user name and password

Vivan and Arpit of a reputed Computer training Institute sent emails to different banks,
offices purportedly from reputed senders like Microsoft Support Team, VSNL helpdesk
etc with the subject line double your internet speed.
Actually they sent some sort of trojan sniffer in the guise of these executable files.
When recipients ran the file, a software called Dialup Security became resident in the
computer memory and started working whenever the user booted the computer. When
the user accessed the internet, the Trojan captured the username and password fields from
the dialup screen and sent a mail to the culprits in encrypted form.
Case 4: Email Fraud

Diploma Scam
Quick degree scams - Get your degree in 30 days! No studying required, Turn
your experience into a degree. They say they are accredited and the degree is legal and
meaningful. Thats part of the scam.
The existence of unaccredited, substandard, and/or fraudulent post-secondary education

(college, university, graduate schools) providers is a global phenomenon, as is the existence
of unrecognized and/or fraudulent accreditors. The credits and degrees awarded by these
unaccredited or sham diploma mills are not going to be recognized by legitimately
accredited institutions, official professional licensing authorities, recognition authorities
or reputable employers.

And when the scam is exposed that you purchased your degree; youll be out on the
street and no one will hire you. You may make the cover of a newspaper, exposed as the
worthless hack you are for attempting to buy your degree. You may make a list of people
who have purchased scam degrees, that were working on right now.
Personal Identity theft

Spamming, Redirecting websites & Phishing
Case 5: Phishing
One financial Institute registered a crime stating that some persons (perpetrators)
have perpetrated certain acts through misleading emails ostensibly emanating from a
National Banks email ID. Such acts have been perpetrated with an intent to defraud the
Customers.
The Investigation was carried out with help of those emails received by the customers of
that financial Institute and arrested the accused, the place of offence at Vijaywada was
searched for the evidence. There one Lap Top and Mobile Phone was seized which was
used for the commission of the crime
The arrested accused had used open source code email application software for sending
spam emails. He has down loaded the same software from net and then used it as it is.
He used only VSNL emails to spam the email to customers of financial Institute because
VSNL email service provider do not have spam box to block the unsolicited emails.
After spamming emails to financial Institute customers he got the response from around
120 customers of which 80 are genuine and others are not correct because it do not have
debit card details as required for e-banking.
The financial Institute customers those who have received his email felt that the email was
originated from the financial Institute bank. When they filled the confidential information
and submitted that time said information was directed to accused. This was possible because
the dynamic link was given in the first page (Home page) of the fake web site. The dynamic
link means when people click on the link provided in spamming email that time only
the link will be activated. The dynamic link was coded by handling the Internet Explorer
onclick() event and the information of the form will be submitted to the web server
(Where the fake web site is hosted). Then server will send he data to configured email
address and in this case email configured was to the accused email . So on submission of
the confidential information the information was directed to email ID accused email .The

all the information after fishing (user name, password, Transaction password, Debit card
Number and PIN, mothers maiden name) which he had received through Wi-Fi internet
connectivity of Reliance.com which was available on his Acer Lap Top.
This crime has been registered u/s U/Sec. 66 of IT Act, sec 419, 420, 465, 468, 471 of I.P.C
r/w Sections 51, 63 and 65 of Copyright Act, 1957 which attract the punishment of 3 years
imprisonment and fine up to 2 lacs rupees which accused never thought of.
How does phishing happen?

Phishers sets up a replica page of a known financial institution or a popular shopping
website
Bulk e-mails are sent to users asking for their personal data like account details,
passwords etc
When the user clicks on the link, the replica of the website will open. Or while the
user is online, a form will populate through an in-session pop-up
On updation, the data goes to phishers. Post which the user is redirected to the
genuine website
Phishers have refined their technology to launch sophisticated attacks and use advanced
social engineering techniques to dupe online banking users.
Case 6: Hacking
Mumbai police have arrested a hacker by name Kalpesh (name change) for hacking into a
financial website. Although the hacker couldnt break into the main server of the financial
institution, which was well secured by the financial institution. The accused person could
make some addition to the home page of the financial website and has added a string of
text to the news module of the home page of the website. Police were able to crack the
case by following the trace left by the hacker on the web server of the financial institution.
The financial institution has maintained a separate server for financial online transactions,
for which utmost security has been taken by the financial institution. The website was
hosted on a different server which comparatively had lesser security.
The hacker Kalpesh (name changed) is a 10th Pass youngster of 23 years old. He has done
computer courses like CCNA, MCSE etc. But he is a computer addict. He sits before the
computer for almost 16 to 20 times each day. He has mostly used the readymade hacking
tools, to hack into any website. He goes to a particular website on the web, which facilitates
him to see the entire directory structure of that website. Then using various techniques,
such as obtaining a password file, he gets into the administrators shoes and hacks the
website.

A case has been registered against the hacker under section 67 of Information Technology
Act 2000 and under various sections of Indian Penal Code.
Cyberstalking, cyberbullying, Sexual exploitation

Case 7: Cyber bullying
In April 2001 a person from New Delhi complained to the crime branch regarding the
website. Amazing.com, he claimed, carried vulgar remarks about his daughter and a few
of her classmates. During the inquiry, print-outs of the site were taken and proceedings
initiated.
After investigation a student of grade XI and classmate of the girl was arrested.
The juvenile board in Nov 2003 refused to discharge the boy accused of creating a website
with vulgar remarks about his classmate.
Case 8: Cyberstalking
There are a couple of reported cases, which speak of the position of the cyber stalking in
India. The recent being the case of A(name) who was recently arrested by the New Delhi
Police. He was talking an Indian lady, B(name) by illegally chatting on the Web site MIRC
using her name. He used obscene and obnoxious language, and distributed her residence
telephone number, inviting people to chat with her on the phone. As a result of which, B
kept getting obscene calls from everywhere, and people promptly talked dirty with her. In
a state of shock, she called the Delhi police and reported the matter. For once, the police
department did not waste time swinging into action, traced the culprit and slammed a
caseunder Section 509 of the Indian Penal Code for outraging the modesty of B (Indian
child, 2005).
Both kind of Stalkers Online & Offline have desire to control the victims life. Majority
of the stalkers are the dejected lovers or ex-lovers, who then want to harass the victim
because they failed to satisfy their secret desires. Most of the stalkers are men and
victim female.
How do they Operate
a. Collect all personal information about the victim such as name, family background,
Telephone Numbers of residence and work place, daily routine of the victim,
address of residence and place of work, date of birth etc. If the stalker is one of
the acquaintances of the victim he can easily get this information. If stalker is a
stranger to victim, he collects the information from the internet resources such

as various profiles, the victim may have filled in while opening the chat or e-mail
account or while signing an account with some website.
b. The stalker may post this information on any website related to relationship, posing
as if the victim is posting this information and invite the people to call the victim
on her telephone numbers to have services. Stalker even uses very filthy and obscene
language to invite the interested persons.
c. People of all kind from nook and corner of the World, who come across this
information, start calling the victim at her residence and/or work place, asking for
relationships.
d. Some stalkers subscribe the e-mail account of the victim to innumerable
pornographic sites, because of which victim starts receiving such kind of unsolicited
e-mails.
e. Some stalkers keep on sending repeated e-mails asking for various kinds of favors
or threaten the victim.
f. In online stalking the stalker can make third party to harass the victim.
g. Follow their victim from board to board. They hangout on the same BBs as their
victim, many times posting notes to the victim, making sure the victim is aware
that he/she is being followed. Many times they will flame their victim (becoming
argumentative, insulting) to get their attention.
h. Stalkers will almost always make contact with their victims through email. The
letters may be loving, threatening, or sexually explicit. He will many times use
multiple names when contacting the victim.
i. Contact victim via telephone. If the stalker is able to access the victims telephon, he
will many times make calls to the victim to threaten, harass, or intimidate them.
j. Track the victim to his/her home.
Case 9: Cyber Pornography

A student of a reputed public school was teased by all his classmates for having a
pockmarked face. Tired of the cruel jokes, he decided to get back at his tormentors. He
scanned photographs of his classmates and teachers, morphed them with nude photographs
and put them up on a website that he uploaded on to a free web hosting service. It was
only after the father of one of the class girls featured on the website objected and lodged
a complaint with the police that any action was taken.

Cyber pornography case the first case of this kind, the Delhi Police Cyber Crime Cell
registered a case under section 67 of the IT act, 2000.
Case 10: Social Networking

A 14-year-old girl received a Facebook friend request from an older man posing as a boy
of her age. She accepted it out of curiosity.
The girl was quickly smitten by the mans smooth online flattery. She didnt realise that he
was one of the growing number of sexual predators who had found a new way to exploit
the increasing obsession with social media.
They exchanged phone numbers, and his attention increased with rapid-fire texts. He
convinced her to meet in a mall, and she found him just as charming in person.
They agreed to meet again. After telling her mom she was going to visit a sick girlfriend,
she climbed into the mans minivan near her home.
The man, a 24-year-old drove her an hour to a town .There, he locked her in a small room
inside a house with at least five other girls aged 14 to 17.She came to know that she was
kidnapped. She somehow managed to escape ,but everyone does not get a chance.
Ways to protect yourself on social networking sites:

Limit who can see what you post.If you dont want random users to see your contact
information, you can limit the publication of that data. Just change your settings. You
can also block users from having any contact with you should the need arise.
One simple and quick setting (on Facebook) you can change to increase privacy is to
restrict the viewing of your profile only to users at your own college or to only your
friend list. Most social networking sites offer similar ways to restrict access to personal
information, but in all cases, the principle is the same: dont advertise to the world what
youre doing or where you live.
But dont forget that even if you limit who can see what you post, there are ways others
can get around it to view your profile anyway.
Limit what you post.Dont share things that would make you vulnerable to unwanted
contact (such as sharing your email address, physical address, or phone number) or to
stalking (such as information about your schedule or routine).

Also, if your friends or connections post such information about you, make sure the
combined information on their pages is not more than you would be comfortable with
strangers knowing.
Finally, its important to recognize that once you publish something online, it is available
to other people and to search engines.You cant retract it.
Even if you go back and remove the information from a site, its always possible that
someone has already seen it. And they may have saved a copy.
In addition, some search engines cache copies of Web pages so that they open faster;
these cached copies may be available a long time after a Web page has been deleted or
altered. Some Web browsers, also, maintain a cache of the Web pages a user has visited,
so the original version of your posting may be stored in someone elses machine.
The bottom line? Once something is out there, theres no guarantee you can take it
back.
Tracking Cyber Crimes

Case Study: Admission fraud
A girl Anita (name changed) came to cyber cell with a complaint. As per the complaint
she registered her self with an admission counsellor for admission in a foreign university.
After registration she received a call from a lady named Sameera (name changed)who was
working as counsellor with a reputed admission consultant firm in United Kingdom, for
the interview. Anita was very happy to hear that. Her interview was taken over telephone
and she was given provisional admission and letter was sent through email. Another day
Sameera called Anita and told her that she has been awarded scholarship and she has to
start a current account in either AXIS bank or HDFC bank with current account limit
upto Rs. 25,000/-. She agreed and did the same. After opening the account Anita supplied
the relevant details of account to Sameera, as she was told that the university will deposit
Rs. 1.90 lakh in her account and she will have to withdraw Rs. One Lakh and will have
to deposit the same in six different accounts and rest amount will be her scholarship
money. It happened the same way as told by Sameera. Anita checked her account and it
was showing credit of Rs.1.90 Lakh.

Next day Anita approached the bank to withdraw money and deposit the same in to six
different accounts but due to some technical reasons see could not withdraw the money
from her HDFC account having credit of Rs 1.90 lakh. Anita was in belief that she has
already received the amount hence deposited her own money in six different accounts
which were from Uttrakhand and Delhi. Next day Anita went again to the bank to withdraw
money but she was shocked to hear that her account has been blocked by Lucknow police
and an FIR has already been lodged at Lucknow police station against her and she is
the prime suspect. On receiving a complaint Cyber cell started enquiry from the emails
received by Anita. The full header analysis revealed ip address and the same was sent to
mobile operator which ended to a mobile number. The name and address attached to the
mobile number were found to be false which were supposed to be from Mumbai. Cyber
cell collected the login logs of the internet banking account of Mr Manish (name changed)
and found that money was hacked and transferred from Nigerian IP.
Subsequently Cyber cell registered a FIR under section 66 IT act , 420/34 IPC
Name and address of the mobile used by Sameera were in the name of Nigerian Franklin
(name changed). The address was not reachable as he shifted to new address. After that
cyber cell started analysing the logs of Sameera and identified the numbers to whom call
was made. Finally cyber cell had five numbers to be analyzed. After months of analysis
one suspect was traced. Cyber cell had the address of a suspect, the house was raided by
cyber cell at Delhi and seized 6 mobiles and a laptop but accused could not be caught.
LOC was issued against suspect. During investigations the culprits were identified to be
O. Addeda (name changed) and her lady co-partner. Mobiles and laptops involved in the
fraud were recovered from Addedas house but he escaped. After analysis of Addeda mobile
cyber cell found the person named EMMA to be the prime suspect providing bank details
to him. Documents seized also show his relation with him. Analysis of CDR revealed that
EMMA (name changed) is superior in hierarchy of internet job fraud.
Cybercell has arrested EMMA and his wife from their home. Several bank details, ATM/
DEBIT cards were recovered from him. At present EMMA is in CENTRAL JAIL and
is facing trial. His wife co-accused in the crime has been given bail due to last stage
of pregnancy. Court has issued permanent arrest warrants against the accused who are
absconding. Cyber cell is trying to identify the properties owned by the suspects so that
proceeds of the frauds can be recovered from them.

Summary
Cyberspace is a man made world that is constantly evolving. It differs from the static physical
world as it has no boundaries, no geographical mass, and of course, no gravity.
1. Cyber ethics exploring appropriate and ethical behaviours related to online environments
and digital media. It includes plagiarism, bullying, and hacking to name a few.
2. Cyber safety defining how one operates on-line. It includes rules guiding how to keep personal
information safe and limited.
3. Cyber security involving tasks undertaken on the computer to keep it secure from people
who wish to harm it or use data stored on it unlawfully. This includes installing virus software
and firewalls.
4. A software copyright protects all source code, written text materials, graphic images/ designs,
drawings, any linked sound, video files or films.
License is the permission granted by the holder of a copyright to another to use an original work.
It states under what circumstances and to what extent the original work can be used, changed
or distributed.
1. Open-source software (OSS) is computer software with its source code made available. It is
very often developed in a public, collaborative manner. A license for open sources software
allows the end user to study, change and distribute the software for any purpose.
2. Some copyrighted software is made available for use, free of charge for an unlimited time.
These are called freeware. The copyright still remains with the producer / owner for any
future development.
3. Shareware are copyrighted software that can be shared for a limited on a trial basis with the
understanding that if the user decides to use it, he will pay for it.
4. Cyber law is a new branch of law and is growing very fast. It establishes norms of accepted
human behaviour in cyberspace.
5. Cookies allow a visited website to store its own information about a user on the users
computer.
6. A firewall is a program or hardware device that filters the information coming through an
internet connection to a network or computer system.
Hackers are people with computer programming skills who use their knowledge to gain
unauthorized access to data in a system or computer.
Crackers modify or disable features of a software application. They usually mean to harm the
software, the hardware using this software or the end user of the software.

Exercise
1. Which of the following is not an external threat to a computer or a computer network

(a) Ignorance (b) Trojan horses
(c) Adware (d) Crackers
2. When a person is harrassed repeatedly by being followed, called or be written to he /
she is a target of
(a) Bullying (b) Identity theft
(c) Stalking (d) Phishing
3. With genetic and genomic research which of the following issues is of specific concern
(a) Anonymity (b) Intellectual property
(c) Software piracy (d) Concerns about biochip implants
4. Which of the following is a class of computer threat
(a) Phishing (b) DoS attacks
(c) Soliciting (d) Stalking
5. A lincense allows a user to use copyrighted material.
(a) True (b) False
6. It is a program or hardware device that filters the information coming through an internet
connection to a network or computer system.
(a) Anti virus (b) Firewall
(c) Cookies (d) Cyber safety
7. It allow a visited website to store its own information about a user on the users
computer.
(a) Spam (b) Malware
(c) Cookies (d) Adware
8. It is stealing ideas or creations of others.
(a) Plagiarism (b) Piracy
(c) Intellectual Property Rights (d) All of the above
9. Hacking a computer is always illegal and punishable by law.
(a) True (b) False
10. Exploring appropriate and ethical behaviours related to online environments and digital
media.
(a) Cyber ethics (b) Cyber safety
(c) Cyber security (d) Cyber law

(a) In some situations this statement is correct
(b) This statement is not true at all.
(c) In is not necessry to use license.
(d) All the above statements are not applicable.

1. Differentiate between a workstation license and a site license.
2. Write a short note on your understanding of cracking a software.
3. What are the categories of Cyber crime. Explain them.
4. Define the following terms:
(a) Spyware (b) Malware
(c) Virus (d) Worms
5. Read about ethical hacking and write a short note on your understanding of the topic.
6. Why cyber security should be taken care by the user while working on internet?
7. Discuss all the point which should be kept in mind while working on computers.
8. What is Deniel of Service attack? How it affects the systems performance?
9. What is the difference between Shareware and Freeware softwares?
10. Mention the list of the licenses used by the users.
11. What do you mean by open source softwares? How are they different from properitary
softwares?
12. In groups of 4-5 discuss how software cookies can be helpful to both the user of the
computer and the websites that created them. Document your understanding. It could
be a poster, a brochure, a poem or a skit.
13. What all do you ususally do while you are connected to the net? Make a list and then
plan all the security measures that you could take to safeguard yourself. Share this list
eith at least two of your peers and compare it to their lists.
C. Categorize the following under ethical / safety / security precaution

1. Do not share your password
2. Do not use foul language.
3. Immediately report any suspect data or security breaches to your supervisor and/or
authorities.
4. Install firewalls and antivirus softwares

5. Do not copy information from the Internet and claim it as yours (plagiarism).
6. Be wary of strangers and cautious of potentially misleading or false information.
7. Manage your computer settings to allow only data that comes from a known or safe place
8. Do not download copyrighted materials.
9. Download only trusted applications from reputable sources or marketplaces
10. Pay attention to the URLs of websites you visit
11. Do not use someone elses password or break into his computer.
12. Restrict access and make personal information secure to prevent identity theft.
D. State whether the following statements are true or false

1. Hacking a computer is always illegal and punishable by law.
3. Software can only be licensed for a specific period of time.
4. A firewall is a virtual wall that protects data on computers and computer networks.
5. Cyber law oversees only crimes that are committed by computers.
6. Crackers use physical tools to break into a computer and steal data.
7. Read about ethical hacking and write a short note on your understanding of the topic.
8. In groups of 4-5 discuss how software cookies can be helpful to both the user of the
computer and the websites that created them. Document your understanding. It could
be a poster, a brochure, a poem or a skit.
9. What all do you ususally do while you are connected to the net? Make a list and then
plan all the security measures that you could take to safeguard yourself. Share this list
eith at least two of your peers and compare it to their lists.

Chapter 7
Project
Once you have understood all the tags of HTML and the basics of GIMP, you are ready to
make web applications. The following specifications must be considered while developing
a web site:
1. Identify the problem.
2. Once you have analyzed the problem, you will have a clear idea about the web pages
to be created.
3. When designing your site, pay attention to layout, typography and images.
4. Always use standard Font styles in your web site so that all the browsers should
support them.
5. Site should exhibit strong design, user-friendly navigation, clear and consistent layout,
and professional appearance.
6. Your site should exhibit proper use of background and font colours.
7. Website must include at least one image , it can be a scanned photo, a digital
photograph, or a graphic/artwork created by you.
8. You may use other images, but they must not violate copyright laws.
9. All images must have alt tags, be well placed, and working correctly.
10. Each page must have an appropriate title.
11. Each page must have a consistent navigation menu containing functional links to all
other main pages
12. Visit every page and check to make sure all links work correctly.
13. Test your site behaviour across multiple browsers (e.g. Internet Explorer, Firefox,
Safari, etc.) and different operating systems (e.g. Windows, iOS).
After following all the instruction now you are ready to publish your website on web
server.
Project 133
Sample Case Studies
1. Create a website depicting different festivals of India. The Home page should have
links of allfestivals of India . It should also offer link to the other web pages and
each of these web pages should contain a link to home page and to the various html
pages required in your site. Your site should have feedback form .Use Gimp software
to give various effects to the images to be included in the website.
Festivals Of India
Home | ContactUs | Typesof Festivals | Feedback
Photo Gallery
Live the Moments ....

Some Famous Festivals:
Diwali
Dusshera
Holi
Eid
Christmas
Pongal
Oman
Raksha Bandhan
Janamashtmi
Navratri
Indian Festivals celebrated by varied cultures and through their special rituals add to the
Maha Shivartri
colours of Indian Heritage. Some festivals welcome the seasons of the year, the harvest, the Ram Navami
rains, or the full moon. Others celebrate religious occasions, the birthdays of divine beings
saints, and gurus (reversed teachers), or the advent of the New year. A number of these festivals
are common to most parts of India, however they are celebrated differently in different parts of
the country....
<html>
<head>
<title></title>
</head>
<body link = blue vlink = purple alink = blue border=1>
<table height = 50 width = 100% bgcolor = #F2AC28 cellpadding = 10><tr><td width=35%
height=50><img src = tiger.gif height = 50 width = 35% border = 2></td><td width =
90% height = 50 valign = middle><font face = trebuchet ms color = maroon size =
30><p align = right><i><u> Festivals Of India </u></i></font></td></tr></table>

<br>
<table width = 100% height = 35 bgcolor = #F2AC28><tr><td width = 100% height =
35 valign = middle><font face = trebuchet ms color = maroon size = 4><p align =
center> Home | <a href = 2nd page.htm>Contact Us </a>| Types of Festivals | <a href
= Feedback.htm>Feedback</a></font></td></tr></table>
<hr>
<table height = 70 width = 100% border = 3><tr><td><font face = trebuchet ms size =
3 color = maroon>Photo Gallery </font></td></tr><tr><td><marquee scrollamount =
8 behavior = scroll loop = 100>
<img src = map.jpg height = 100 width = 100>
<img src = festival.jpg height = 100 width = 100>
<img src = firecrackers.jpg height = 100 width = 100>
<img src = flag2.jpg height = 100 width = 100>
<img src = India.png height = 100 width = 100>
<img src = holi.jpg height = 100 width = 100>
<img src = diwali.jpg height = 100 width = 100>
<img src = kannada.jpg height = 100 width = 100>
<img src = joy.jpg height = 100 width = 100>
<img src = food.jpg height = 100 width = 100>
<img src = food1.gif height = 100 width = 100>
<img src = food2.jpg height = 100 width = 100>
</marquee></td></tr></table>
<table width = 100% height=20 cellpadding = 20><tr><td width = 65% bgcolor =

maroon><font face = trebuchet ms color = white size = 6 valign = middle ><p
align = center> Live the Moments .....</font></td>
<td width = 35% height = 50% bgcolor = #F2AC28 rowspan = 2>
<font face = trebuchet ms color = maroon size = 5>    <u>Some
Famous Festivals</u>:</font>
<ul><font face = trebuchet ms color = white size = 5><i>
<li><a href=Diwali.htm> Diwali</a>
<li><a href=Dusshera.htm> Dusshera</a>
<li><a href=Holi.htm> Holi</a>
Project 135
<li> Eid
<li> Christmas
<li> Pongal
<li> Oman
<li> Raksha Bandhan
<li> Janamashtmi
<li> Navratri
<li> Maha Shivratri
<li> Ram Navami
</i></font></ul></td></tr>
<tr><td height=50 valign=top><br><p align=center><img src = a.jpg height = 300
width = 300 border = 3>
<br>
<br>
<br>
<font face = trebuchet ms color = Blue size = 4><p align = justify><i>Indian Festivals
celebrated by varied cultures and
through their special rituals add to the colours of Indian Heritage. Some festivals welcome
the seasons of the year, the
harvest, the rains, or the full moon. Others celebrate religious occasions, the birthdays of
divine beings, saints, and
gurus (revered teachers), or the advent of the New Year. A number of these festivals are
common to most parts of India,
however they are celebrated differently in different parts of the country.....</i></font>
</td></tr>
</table>
<br>
<hr><hr><p align=center><font face = trebuchet ms size = 2 color = black>
Home | Privacy Policy | Terms of Service | Feedback <br>
2010 &copy Festivals Of India | All Rights Reserved
<p align =center><font face=monotype corsiva size=4>
<b><i><u>By ABC<br><br>
Roll No.:- 15</u></i></b>
</font>
</body>
</html>

2nd page.htm
file///C:Users/Savi/Desktop/Festivals%200%India/2nd%20page.htm
Festivals of India
Home | About Us | Types of Festivals | Feedback
Photo Gallery
Conctact Us at:
ABC Corporations
Connaught Place - 110085
And know the traditions of all Fesitvals and their Festivities
Home | Privacy Policy | Terms of Service | Feedback

2010@festivals of India | All right Reserved
By Nikhil Arora
Class Xa
Roll No. 12
<html><head><title></title></head>
<body link = blue vlink = purple alink = blue>
<table height = 100 width = 100% bgcolor = #F2AC28 cellpadding = 10><tr><td
width=35% height=100><img src = Diwali.jpg height = 100 width = 35% border =
2></td><td width = 90% height = 100 valign = middle><font face = trebuchet ms
color = maroon size = 30><p align = right><i>Festivals Of India</i></font></td></
tr></table>
<br>
<table width = 100% height = 35 bgcolor = #F2AC28><tr><td width = 100% height
= 35 valign = middle><font face = trebuchet ms color = maroon size = 4><p align
= center><a href = Main Page.htm> Home </a>| About Us | Types of Festivals | <a
href=Feedback.htm>Feedback</a></font></td></tr></table>
<table height = 100 width = 100% border = 3><tr><td><font face = trebuchet ms size
= 3 color = maroon>Photo Gallery </font></td></tr><tr><td><marquee scrollamount
= 8 behavior = scroll loop = 100>
<img src = map.jpg height = 100 width = 100>
<img src = festival.jpg height = 100 width = 100>
<img src = firecrackers.jpg height = 100 width = 100>
<img src = flag2.jpg height = 100 width = 100>
<img src = India.png height = 100 width = 100>
Project 137
<img src = holi.jpg height = 100 width = 100>
<img src = diwali.jpg height = 100 width = 100>
<img src = kannada.jpg height = 100 width = 100>
</marquee></td></tr></table>
<br>
<table width = 100%>
<tr>
<td width = 50%>
<align = left>
            &nbs
p;            &n
bsp;

<img src = t.jpg height = 200 width = 200 border = 3></td>
<td width = 50%>
<font face = trebuchet ms color = maroon size = 4><align = right>
Contact Us at: <br>
ABC Corporations <br>
Connaught Place - 110085 <br>
Phone No. - 12345678 <br>
And know the traditions of all Festivals and their Festivities
</font></td></tr>
</table>
<br>
<hr><p align=center><font face = trebuchet ms size = 2 color = black>
<b><i><u>By ABC<br>

Class X-B<br>
Roll No.:- 15</u></i></b>
</font>
</body>
</html>
Diwali.htm
file:///C:/Users/savi/Desktop/Festivals%20Of%India/diwali.htm
Diwali - The Holiest Hindu Festival

Home | About Us | Typesof Festivals | Feedback
Enjoy the Moment.... Diwali:
Deepavali or Diwali, popularly known as the festival of lights, is primarily a five day Hindu
festival which startes on Dhanteras, Celebrated on thirteenth lunar day of Krishna paksha
(dark fortninght) of the Hindu calendar month Ashwin and ends on Bhaubeej, celebreted on
second lunar day of Shukla paksha (bright fortnigh) of the Hindu calendar month Kartik. In the
Gregorian calendar, Diwali falls between mid-October and mid-Novermber. Diwali is an
official holiday in India, Nepal, Sri Lanka, Myanmar, Mauritius, Guyan, Trinidad & Tobago,
Suriname, Malaysia, Singapore and Fiji...
13:57
05-03-2013
<html>
<head>
<title></title>
</head>
<table height = 100 width = 100% bgcolor = Yellow cellpadding = 10><tr><td width=35%
height=100><img src = Diwali.jpg height = 100 width = 35% border = 2></td><td width
= 90% height = 100 valign = middle><font face = trebuchet ms color = maroon size
= 30><p align = right><i>Diwali - The Holiest Hindu Festival</i></font></td></tr></
table>
Project 139
<br>
<br>
<hr>
<table width = 100% cellpadding = 30><tr><td width = 65% bgcolor = maroon><font
face = trebuchet ms color = white size = 6 valign = middle ><p align = center>
Enjoy The Moments .....</font></td>
<td width = 35% height = 100% bgcolor = Pink rowspan = 2>
<font face = trebuchet ms color = maroon size = 5>    &nb
sp;   <u>Diwali</u>:</font>
<ul><font face = trebuchet ms color = white size = 4>
<li><img src=Diwali2.jpg height=250 width=300>
<br><br>
<li><img src=Diwali3.jpg height = 250 width = 300>
</font></ul></td></tr>
<tr><td height=100 valign=top><br><p align=center><img src = Diwali4.jpg height
= 300 width = 300 border = 3>
<br>
<br>
<font face = trebuchet ms color = Blue size = 4><p align = justify><i>Deepavali or
Diwali, popularly known as the festival of lights, is primarily a five day Hindu festival
which starts on Dhanteras, celebrated on thirteenth lunar day of Krishna paksha (dark
fortnight) of the Hindu calendar month Ashwin and ends on Bhaubeej, celebrated on
second lunar day of Shukla paksha (bright fortnight) of the Hindu calendar month Kartik.
In the Gregorian calendar, Diwali falls between mid-October and mid-November. Diwali
is an official holiday in India, Nepal, Sri Lanka, Myanmar, Mauritius, Guyana, Trinidad
& Tobago, Suriname, Malaysia, Singapore and Fiji..</i></font>
</td></tr>
</table>
<br>

<b><i><u>By ABC<br></u></i></b>
</font>
</body>
</html>
Diwali.htm
file:///C:/Users/savi/Desktop/Festivals%20Of%India/Dusshera.htm
Dussehra-Victory Over Evil!!!

Enjoy the Moments.... Dussehra:
Vijaydashami also known as Dashahara, Dussehra, Dashain (in Nepal), Navratri or

Durgotsav is one of the most important Hindu festivals celebreted in various forms, across
India, Nepal and Bangladesh. The name dussehra is derived from Sanskrit Dasahara
literally means removal of ten referring to Lord Ramas Victory over the ten-headed demon
king Ravana. the day also marks the victory of Goddess Durga over the demons Mahisasur.
the name Vijayadashami is also derived from the Sanskrit workds Vijayadashmi literally
meaning the victory on the dashmi
<html>
<head>
<title></title>
</head>
<table height = 100 width = 100% bgcolor = Grey cellpadding = 10><tr><td width=35%
height=100><img src = Dusshera 4.gif height = 100 width = 35% border = 2></td><td
width = 90% height = 100 valign = middle><font face = trebuchet ms color = maroon
size = 30><p align = right><i>Dussehra-Victory Over Evil!!!</i></font></td></tr></
table>
<br>
Project 141
<br>
<hr>
<table width = 100% cellpadding = 30><tr><td width = 65% bgcolor = Light Blue><font
face = trebuchet ms color = white size = 6 valign = middle ><p align = center>
<td width = 35% height = 100% bgcolor = #F2AC28 rowspan = 2>
<font face = trebuchet ms color = maroon size = 5>    &nb
sp;   <u>Dussehra</u>:</font>
<li><img src=Dusshera 2.jpg height=250 width=300>
<br><br>
<li><img src=Dusshera 3.jpg height = 250 width = 300>
<tr><td height=100 valign=top><br><p align=center><img src = Dusshera 1.jpg
height = 300 width = 300 border = 3>
<br>
<br>
<font face = trebuchet ms color = Blue size = 4><p align = justify><i>Vijayadashami
also known as Dashahara, Dussehra, Dashain (in Nepal), Navratri or Durgotsav is one of
the most important Hindu festivals celebrated in various forms, across India, Nepal and
Bangladesh.
The name Dussehra is derived from Sanskrit Dasha-hara literally means removal of ten
referring to Lord Ramas victory over the ten-headed demon king Ravana. The day also
marks the victory of Goddess Durga over the demons Mahishasur. The name Vijayadashami
is also derived from the Sanskrit words Vijaya-dashmi literally meaning the victory on
the dashmi</i></font>
</td></tr>
</table>
<br>

<b><i><u>By ABC<br></u></i></b>
</font>
</body>
</html>
Holi.htm
le:///C:/Users/savi/Desktop/Festiv als%20Of%India/Holi.htm
Holi - The Festival Of Colors

Holi:
Holi is a religious spring festival celebrated by Hindus, as a festival of colours. It is

primarily observed in India and Nepal. It is observed by the minority Hindus in
Bangladesh and Pakistan as well in countries with large Indic diaspora populations
following Hinduism, such a Suriname, Malaysia, Guyana, South Africa, Trinidad
and Tobago, the United Kingdom, the United States, Maurtius, and fiji. It is also
known as Phagwah and Festival of Colours, or as Doajatra in Odisha and Dol Jatra
or Basantotsav in West Bengal and Assam..
13:59
05-03-2013
<html>
<head>
<title></title>
</head>
<table height = 100 width = 100% bgcolor = Yellow cellpadding = 10><tr><td width=35%
height=100><img src = Holi 1.jpg height = 100 width = 35% border = 2></td><td width
= 90% height = 100 valign = middle><font face = trebuchet ms color = maroon size
= 30><p align = right><i>Holi - The Festival Of Colors</i></font></td></tr></table>
<br>
Project 143
<br>
<hr>
<table width = 100% cellpadding = 30><tr><td width = 65% bgcolor = maroon><font
face = trebuchet ms color = White size = 6 valign = middle ><p align = center>
<td width = 35% height = 100% bgcolor = Purple rowspan = 2>
<font face = trebuchet ms color = Black size = 5>
   <u>Holi</u>:</font>
<li><img src=Holi 2.jpg height=250 width=300>
<br><br>
<li><img src=Holi 3.jpg height = 250 width = 300>
<tr><td height=100 valign=top><br><p align=center><img src = Holi 4.jpg height
= 300 width = 300 border = 3>
<br>
<br>
<font face = trebuchet ms color = Blue size = 4><p align = justify><i>Holi is a
religious spring festival celebrated by Hindus, as a festival of colours. It is primarily observed
in India and Nepal. It is observed by the minority Hindus in Bangladesh and Pakistan
as well in countries with large Indic diaspora populations following Hinduism, such as
Suriname, Malaysia, Guyana, South Africa, Trinidad and Tobago, the United Kingdom, the
United States, Mauritius, and Fiji. It is also known as Phagwah and Festival of Colours,
or as Doajatra in Odisha and Dol Jatra or Basantotsav in West Bengal and Assam..</i></
font>
</td></tr>
</table>
<br>
<b><i><u>By ABC<br>

<br></u></i></b>
</font>
</body>
</html>
Please Give your valuable feedback about what you feel about my webpage!!!
Click here to go back to the main page!!!
First Name:
Last Name:
E-Mail Address:
Gender:
Male
Female
How would You Rate Our Website;
Excellent
Very Good
Good
Acceptable
Bad
submit
Feedback...

2010 Festivals Of India | All Rights Reserved
<html>
<head>
<title></title>
</head>
<body link = blue vlink = purple alink = blue background=jj.jpg>
<font face=Comic sans ms size =5 color=yellow>
<u>Please Give your valuable feedback about what you feel about my
webpage!!!<br><hr>
<font face=comic sans ms size=5><center>
<a href = Main Page.htm>Click here to go back to the main page!!!</a>
</center></font>
Project 145
<hr>
<table height=150 width=100%>
<td width= 60%>
<font face=Comic Sans MS size=4 color=yellow>
<ul type=disc>
<form>
First Name:        <input type=text
name=First Name><br>
Last Name:         <input type=text
name=Last Name><br>
E-Mail Address: <input type=text name=E-Mail Address><br><br><br>
<font face=Comic Sans MS size=4><u>Gender:</u></font><br><br><input type=radio
name=sex value=male>Male<br>
<input type=radio name=sex value=female>Female<br>
</form>
<br><br>
<u>How Would You Rate Our Website:</u><br>
<br><input type=radio name=Excellent value=>Excellent<br>
<input type=radio name=Very Good value=>Very Good<br>
<input type=radio name=Good value=>Good<br>
<input type=radio name=Acceptable value=>Acceptable<br>
<input type=radio name=Bad value=>Bad<br>
<center><br><br>
<form name=input action=html_form_action.asp method=get>
&nbsp&nbsp&nbsp&nbsp&nbsp<input type=submit value=Submit>
</form></center></font>
</ul>
</td>
<td width=40%>
<img src = v.png>
</td>
</table>
<hr><hr>
<p align=left><img src=fd.jpg>
<p align=center><font face = trebuchet ms size = 2 color = yellow>
2010 &copy Festivals Of India | All Rights Reserved<br>

</font>
</body>
</html>
2. Create a websiteon Global Warming- its effect & prevention. It should also offer link
to the other web pages and each of these webpages should contain a link to home page
and tothe various html pages required in your site. Your site should have feedback
form .Use Gimp software to prepare images for web which are to be included in the
website.
<html>
<head>
<title></title>
</head>
<body bgcolor=black>
Project 147
<center><table background=g.jpg height=100 width=100% border=1 cellpadding=10>
<tr><td align=center width=150><img src=d.jpg height=150 width=150></
td><td align=right valign=middle><font face=trebuchet ms color=maroon
size=7><b><i>GLOBAL WARMING</i></b></font></td></tr></table></center><br>
maroon><font face = trebuchet ms color = white size = 6 valign = middle ><p
align = center> Stop Polluting The Earth!!! </font></td>
#F2AC28><font face = trebuchet ms color = Maroon size = 4 valign = middle
><b>
<center>
<a href=Effects.htm> Effects</a> |
<a href=Preventions.htm>Preventions</a> |
<a href=Feedback.htm>Feedback</a></b></font>
</center>
</td></tr></table><table bgcolor=black>
<tr border=2 bordercolor=black><td height=50 valign=top><br><center>
<img src = b.jpg height = 300 width = 300>     &nbsp
;
<img src=a.jpg height=300 width=300>

<img src=c.jpg height=300 width=300 ></td></center></tr>
<br><hr>
<br><tr><td><hr>
<font face = calibri color = yellow size = 5>Global warming is the rise in the average
temperature of Earths atmosphere and oceans since the late 19th century and its projected
continuation. Since the early 20th century, Earths mean surface temperature has increased
by about 0.8 C (1.4 F), with about two-thirds of the increase occurring since 1980.
Warming of the climate system is unequivocal, and scientists are more than 90% certain
that it is primarily caused by increasing concentrations of greenhouse gases produced by
human activities such as the burning of fossil fuels and deforestation.These findings are
recognized by the national science academies of all major industrialized nations.</font>
</td></tr>
</table>
<br><hr><hr>
</body>
</html>

2010 Global Warming | All Rights Reserved
Click to Go Back!!!
<html>
<head>
<title></title>
</head>
<body link = blue vlink = purple alink = blue background=i.jpg>
<table height = 200 width = 100% background=g.jpg cellpadding = 60><tr><td width=35%
height=100></td><td width = 90% height = 100 valign = middle>
<font face = trebuchet ms color = maroon size = 7><center><i>Effects Of Global
Warming</i></font></td></tr></table></center>
<br>
<hr>
<br>
<tr>
<td width = 50%>
<align = left>
            &n
bsp;           &nbs
p;
<img src = h.png height = 350 width = 450 border = 3></td>
Project 149
<td width = 50%>
<font face = calibri color = white size = 5><b><align = right>
The effects of global warming are the ecological and social changes caused by the rise in
global temperatures. There is a scientific consensus that climate change is occurring, and
that human activities are the primary driver. Evidence of climate change includes the
instrumental temperature record, rising sea levels, and decreased snow cover in the Northern
Hemisphere. According to the Intergovernmental Panel on Climate Change (IPCC), most
of the observed increase in global average temperatures since the mid-20th century is very
likely due to the observed increase in human greenhouse gas concentrations.</b>
</font></td></tr>
</table>
<br>
2010 &copy Global Warming | All Rights Reserved
</font><br>
<font face=trebuchet ms size=3><a href=Main.htm><b>Click to Go Back!!!</b></
a></font>
</body>
</html>

Click to Go Back!!!

<html>
<head>
<title></title>
</head>
<body link = blue vlink = purple alink = blue background=i.jpg>
<table height = 200 width = 100% background=l.jpg cellpadding = 10><tr><td width=35%
height=100></td><td width = 100% height = 100 valign = middle>
<font face = trebuchet ms color = yellow size = 7><p align = center><i>Preventions
Of Global Warming</i></font></td></tr></table>
<br>
<hr>
<br>
<tr>
<td width = 50%>
<align = left>
            &n
bsp;           &nbs
p;
<img src = j.png height = 350 width = 450 border = 3></td>
<td width = 50%>
<font face = calibri color = white size = 5><b><align = right>
Everybody can help to prevent global warming by not wasting energy in their homes. CFL
bulbs, which use less energy and have a longer life, can significantly reduced the amount
of electricity used. Another thing that can help is reducing the use of heaters and air
conditioners. Some very simple things, like hitting the off switch on electronic equipment
and appliances when you are not using them, and trading in old energy hog appliances
for newer, more energy efficient ones can be a contribution in the effort to prevent global
warming. Alternative power sources, like home solar energy generators, are a good way
to make sure you are getting energy from means that are better for the Earth.</b>
</font></td></tr>
</table>
<br>
2010 &copy Global Warming | All Rights Reserved
</font><br><br>
Project 151
<font face=trebuchet ms size=3><a href=Main.htm><b>Click to Go Back!!!</b></
a></font>
</body>
</html>
Please Give your valuable feedback about what you feel about my webpage!!!
Click here to go back to the main page!!!
First Name:
Last Name:
E-Mail Address:
Gender:
Male
Female
Comments:
Submit
Feedback..

<html>
<head>
<title></title>
</head>
<body link = blue vlink = purple alink = blue background=m.jpg>
<u>Please Give your valuable feedback about what you feel about my
webpage!!!<br><hr>
<font face=comic sans ms size=5><center>
<a href = Main Page.htm>Click here to go back to the main page!!!</a>

</center></font>
<hr>
<td width= 60%>
<ul type=disc>
<form>
name=Last Name><br>
</form>
<br><br>
<h2>Comments:</h2><br>
<textarea rows=5 cols=50></textarea>
<center><br><br>
</ul>
</td>
<td width=40%>
<img src = v.png>
</td>
</table>
<hr><hr>
<p align=left><img src=fd.jpg>
<p align=center><font face = trebuchet ms size = 2 color = yellow>
2010 &copy Festivals Of India | All Rights Reserved<br>
</font>
</body>
</html>
Project 153
3. Create a website on London Games. It should have linksfor the description of various
games and each of these web pages should contain a link to home pagerequired in
your site. Result of the games should also be included in the site. Your site should have
feedback form .Use Gimp software to edit theimages to be included in the website.
<html>
<head>
<title>London Olympics 2012</title>
</head>
<body background =z.jpg>
<center><img src=5.png height=200></center>
</head>
<body>
<div id=navbar>
<ul>
<li><a href=mascot.htm>Mascots</a></li>

<li><a href=countries.htm>Performance of the countries</a></li>
<li><a href=venues.htm>Venues</a></li>

</ul>
</div>
<hr size=10 noshade>
<marquee behavior=scroll direction=left>
<img src = volley.jpg height=100 width=100 border=2>
<img src = hockey.jpeg height=100 width=100 border=2>
<img src = logo1.jpg height=100 width=100 border=2>
<img src = quite.jpeg height=100 width=100 border=2>
<img src = wall.jpeg height=100 width=100 border=2>
<img src = guy.jpeg height=100 width=100 border=2>
<img src = india.jpeg height=100 width=100 border=2>
<img src = mady.jpeg height=100 width=100 border=2>
<img src = joker.jpeg height=100 width=100 border=2>
<img src = parker.jpeg height=100 width=100 border=2>
<img src = index.jpeg height=100 width=100 border=2>
<img src = chase.png height=100 width=100 border=2>
<img src = english.jpeg height=100 width=100 border=2>s
</marquee>
<hr size=10 noshade>
<center><img src = r.jpeg height = 150 width = 150 border = 3>   <img
src=nd.jpg height = 150 width = 150 border = 3>
<b><font face=calibri color = #F2AC28 size= 5><center>The 2012 Summer Olympics,
officially the Games of the XXX Olympiad, and also more generally known as London 2012,
was a major international multi-sport event, celebrated in the tradition of the Olympic
Games, as governed by the International Olympic Committee (IOC), that took place in
London, United Kingdom, from 27 July to 12 August 2012.The first event, the group stages
in womens football, began two days earlier, on 25 July.
More than 10,000 athletes from 204 National Olympic Committees (NOCs) participated.</
font></center></u></b>
<br>
<hr><hr>
</font>
</body>
</html>
Project 155
<html>
<body background = z.jpg vlink=lightgreen>
<center><Font color = blue><h1>London Olympics Mascots</h1></font></center>
<center><img src = mascot.jpg><br><br><br>
<center>
<font color = yellow face=calibri size = 4 ><b>Wenlock and Mandeville are the official
mascots for the 2012 Summer Olympics and Paralympics being held in London, United
Kingdom.</b>
The mascots were unveiled on 19 May 2010; this marks the second time
(after Vancouvers Miga, Quatchi, Sumi and Mukmuk) that both Olympic and Paralympic
mascots were unveiled at the same time.
The mascots were created and designed by iris, a London-based creative agency.
Wenlock and Mandeville are animations depicting two drops of steel from a steelworks
in Bolton.They are named after the Shropshire town of Much Wenlock, which held a
forerunner of the current Olympic Games, and Stoke Mandeville Hospital,
a facility in Buckinghamshire that initially organised the Stoke Mandeville Games, the
precursor of the Paralympic Games.</center>
</center><br><br><br><center>
<a href=website.htm><b>Click here to go back</b></a>
</center>
</body>
</html>

<html><html>
<body background = z.jpg vlink=pink>
<center><img src = 1.jpg><br><br><br><br><b>
<font color = lightgreen face = calibri size=5><center>Each gold medal is made up of
92.5 percent silver and 1.34 percent gold, with the remainder copper.
The silver medal (which represents second place) is made up of 92.5 percent silver, with
the remainder copper.
The bronze medal is made up of 97 percent copper, 2.5 percent zinc and 0.5 percent
tin.
The value of the materials in the gold medal is about $644, the silver about $330, and the
bronze about $4.71 on the current market.</center>
<br><br><br><center>
<a href=website.htm><b>Click here to go back</a>
</center>
</body>
</html>
Project 157
<html>
<body vilnk =blue>
<img src = stadium.jpg height=100% width=100% border=3>
<font face = calibri size = 4>
<center><b><a href =website.htm>Click to go back</a></font>
</center>
</body>
</html>
3. Create a website on the topic Travel & Tourism of India.Your site should contain
links on the home page linked to the other web pages. Your site should have feedback
form Use Gimp software to give various effects to theimages to be included in the
website.

<html>
<head>
<title>Travel & Tourism</title>
</head>
<body background=bg.jpg>
<img src = 1.jpg width = 100% height = 325><br>
= center> Home | <a href = Goa.html>Goa </a>|<a href = Ladakh.html>Ladakh</
a>|<a href = Taj Mahal.htm>TajMahal</a>|<a href = Mumbai.htm>Mumbai </a>|<a
href = 2nd page.htm>Contact Us </a>|<a href = Feedback.htm>Feedback</a></font></
td></tr></table><br><hr><br>
<table>
<tr>
<td width=50%>
<center>
<imgsrc=4.jpg>
</center>
</td>
Project 159
<td align = left>
<font face = calibri size =5><b>
So youve wanted to see the country and didnt know where to start? We at travel&tourism.
com have listed out the most popular places to see in India.
Weve sifted through guidebooks, travel industry data, polls and reviews from travellers like
you to come up with the top destinations within India. Of course, India is a vast country
with many more amazing experiences and it would be impossible to capture them all in
such a short list.<br></b>
</font></td></tr></table><br>
<hr><hr>
</body>
</html>
Home | Contact Us | Feedback
Despite 3 Idiots-inspired-package-tourists crowding the spartan tourism infrastructure,

Ladakh still remains remarkably untouched - once you veer off the regular tourist ahunts.
Spectacularly jagged peaks enfold in this magical Buddhist ex-kingdom, with prayer flags
fluttering in the wind and plenty of adventures to keep the adrenalin junkie occupied.
<html>
<head>
<title>Ladakh</title>
</head>
<imgsrc = 1.jpg width = 100% height = 325>

center><a href =Main.html>Home</a> | <a href = 2nd page.htm>Contact Us </a>|<a
href = Feedback.htm>Feedback</a></font></td></tr></table>
<br><br>
<table>
<tr><td width=50%>
<img src=hills.jpg width=100%></td>
<td align = left><center>
<font face = calibri size =4>
<b>Despite 3 Idiots-inspired-package-tourists crowding the spartan tourism infrastructure,
Ladakh still remains remarkably untouched - once you veer off the regular tourist haunts.
Spectacularly jagged peaks enfold in this magical Buddhist ex-kingdom, with prayer flags
fluttering in the wind and plenty of adventures to keep the adrenalin junkie occupied.</
b>
</center>
</font>
</td></tr></table>
</body>
</html>
World class beaches; excellent cuisine; amazingly warm people; feni; Goan Port wine;
Portugues influence on culture and architecture; boutique guesthouses; markets; and above
all, living the local susegaad life. Goa has a unique fusion of cultures, lifestyles and
cuisines, while being one of the most easily accessible destinations from most Indian cities.
Project 161
<html>
<head>
<title>Goa</title>
</head>
center><a href=Main.html> Home</a> | <a href = 2nd page.htm>Contact Us </a>|<a
<br><br>
<table><tr>
<td width=50%>
<img src=island.jpg width=100%>
</td><td align = left>
<center>
<b>World class beaches; excellent cuisine; amazingly warm people; feni; Goan Port
wine; Portuguese influence on culture and architecture; boutique guesthouses; markets;
and above all, living the local Susegaad life.
Goa has a unique fusion of cultures, lifestyles and cuisines, while being one of the most
easily accessible destinations from most Indian cities.</b>
</center></font>
</td></tr></table>
</body></html>

The one sight that surpasses all hype... No words can describe the experience of taking in the
vision of this spectacular monument to love. So we wont even try. Just go.
<html>
<head>
<title>TajMahal</title>
</head>
<br><br>
<table>
<tr>
<td width=50%>
<img src=taj.jpg width=100%>
</td>
<td align= center>
<b>The one sight that surpasses all hype... No words can describe the experience of taking
in the vision of this spectacular monument to love. So we wont even try. Just go.</b>
Project 163
</font>
</td></tr></table>
</body>
</html>
You can lvoe it or hate it, but we can guarantee you wont feel indifferent about the
Maximum City. You may feel overwhelmed if you go for a short visit. but stay on only
slightly longer and Mumbai (Its still an effort to not call it Bombay) will make you its
own.
<html>
<head>
<title>Mumbai</title>
</head>
<br><br>
<table>
<tr>
<td width=50%>

<imgsrc=India gate.jpg width=100%>
</td>
<td>
<center>
<b>You can love it or hate it, but we can guarantee you wont feel indifferent about the
Maximum City. You may feel overwhelmed if you go for a short visit, but stay on only
slightly longer and Mumbai (its still an effort to not call it Bombay) will make you its
own.</b>
</center></font>
</td></tr></table>
</body></html>
Contact us at:
ABC Corporations
Connaught Place - 110089
Phone No.

<html>
<head><title></title></head>
<body link = blue vlink = purple alink = blue background=bg.jpg>
<imgsrc = 1.jpg width = 100%>
<br>
Project 165
= center><a href = Main.html> Home </a>| Travel & Tourism | <a href=Feedback.
htm>Feedback</a></font></td></tr></table>
<br>
<tr>
<td width = 50%>
<align = left>
            &nbs
p;            &n
bsp;

<imgsrc = 7.jpg height = 200 width = 200 border = 3></td>
<td width = 50%>
<font face = trebuchet ms color = maroon size = 4><align = right>
Contact Us at: <br>
ABC Corporations <br>
Connaught Place - 110085 <br>
Phone No. - 12345678 <br>
</font></td></tr>
</table>
<br>
2010 &copy Travel & Tourism | All Rights Reserved
</font>
</body>
</html>

Home
We strive to bring the best experience to consumers around the world through our innovative idea of building a website to help you know the best places in India.
We welcome your feedback on our website
First Name:
Last Name:
E-Mail Address:
Gender:
Male
Female
How Would You Rate Our Website:
Excellent
Very Good
Good
Acceptable
Bad
<html><head><title></title></head>
<body link = blue vlink = purple alink = blue background=10.jpg>
<a href = Main.html>Home</a><hr>
We strive to bring the best experience to consumers around the world through our
innovative idea of building a website to help you know the best places in India. We
welcome your feedback on our website.
</center></font>
<hr>
<td width= 60%>
<ul type=disc>
<form>
name=Last Name><br>
Project 167
</form>
<br><br>
<u>How Would You Rate Our Website:</u><br>
<br><input type=radio name=Excellent value=>Excellent<br>
<input type=radio name=Very Good value=>Very Good<br>
<input type=radio name=Good value=>Good<br>
<input type=radio name=Acceptable value=>Acceptable<br>
<input type=radio name=Bad value=>Bad<br>
<center><br><br>
</ul>
</td>
<td width=40%>
<imgsrc = v.png>
</td>
</table>
<hr><hr>
</font>
</body>
</html>

12 Ict-X

Uploaded by

Copyright:

Available Formats

12 Ict-X

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

12 Ict-X

Uploaded by

Copyright:

Available Formats

Information

Central Board of Secondary Education

Ist Edition : April 2014, CBSE India

No Part of this publication may be reproduced, stored in a

Published By : The Secretary, Central Board of Secondary Education

Design, Layout : Laser Tech Prints, 13/9 W.E.A., Karol Bagh

1. Subs, by the Constitution (Eighty-Sixth Amendment) Act. 2002.

Information Communication Technology (ICT) has anextensivehorizon and includes all

Chapter 1: Computer and its Components 117

Chapter 2: Advanced GIMP 1838

Chapter 3: Tables 3967

Chapter 5: DHTML & CSS 81108

Chapter 6: Network Security 109132

Chapter 7: Project 133168

Data is a collection of unprocessed facts, figures, and symbols.

e.g. Ram, age, 32, years, old

Computer and its Components 1

e.g. Ram is 32 years old. Or Rams age is 32 years.

1. Hardware and Software

1.1 Hardware components are classified into following categories

The various functions of input devices are:

2 Information and Computer Technology

Trackball Joystick Graphics Tablet Digital Camera

II. Output Devices

Functions of output devices can be summed up as follows:

Monitor or VDU Printers Plotters Speaker

III. Storage devices

Computer and its Components 3

Cover Mounting Holes

4 Information and Computer Technology

1.2. CPU (Central Processing Unit)

Computer and its Components 5

1.3.1 Units of Memory

1 nibble = 4 bits 1 byte = 8 bits

General Purpose Tailor made or Operating System Utility Software

6 Information and Computer Technology

2.2 System software

Utility software is a form of system software. It is used to analyze, configure, optimize or

The utility softwares are categorised into the following categories:

Computer and its Components 7

8 Information and Computer Technology

IV Generation (1975 89) Microprocessors were introduced where complete

V Generation: 1989 to present Computers use extensive parallel processing, multiple

5.1 According to how it functions, computers can be classified into three

Computer and its Components 9

10 Information and Computer Technology

7. Input Process Output (IPO)

Diagram of a computer of IPO

e.g. To make a Cup of Tea:

Input Process Output

Computer and its Components 11

8.2 VGA Monitor Port

8.3 Parallel Port

8.4 Ethernet Port

12 Information and Computer Technology

8.6 USB Port

8.7 FireWire IEEE 1394 Port

Computer and its Components 13

8.8 Mini Audio Jack

1. Subs, by the Constitution (Eighty-Sixth Amendment) Act. 2002.

1.1 Hardware components are classified into following categories

5.1 According to how it functions, computers can be classified into three