Professional Documents
Culture Documents
and Computer
Technology
Class IX
AUTHORISED
AUTHORISED
Mr. Siva Nagaraju
Mr.
SIVA NAGARAJU
Foreword
Acknowledgement
Chapter 1: Basics of Internet
123
Introduction
Web Servers
Web Site
Webpage
6
11
1 Tool Bar
12
Blogs
14
URL
17
2438
Introduction
24
24
Chat
27
Video Conferencing
28
E-Learning
30
E-Reservation
31
E-Shopping
32
Social Networking
33
E groups
34
3957
39
39
41
Starting GIMP
43
47
50
51
1 Layers
54
5869
Introduction
58
Overview of HTML
58
60
60
61
Chapter 5: HTML II
7095
Introduction
70
Image
75
LINKING
81
96108
Introduction
96
Viruses
96
Worms
97
Trojan horses
98
Spyware
98
Malware
99
Spams
99
100
100
101
Chapter 7: Project
Sample Case Studies
109-130
110
Chapter 1
Basics of Internet
Learning Objectives
By the end of this chapter, learner will be able to:
Define the Internet.
List the features of WWW.
Differentiate between the Internet and WWW.
Understand the working of Search Engines.
List different types of servers with their purpose.
Understand the different components of a Website.
Appreciate the use of different protocols.
State the advantages & disadvantages of creating Blogging.
Introduction
Today we live in a world of technology, where internet spins a web of interconnectivity
around the globe. Through internet more than fifty million people in countries around the
world have been connected. Internet was evolved in 1969, under the project named
ARPANET(Advanced Research Projects Agency Network) to connect computers at
different universities and U.S. defence. Soon after the people from different backgrounds
such as engineers, scientists, students and researchers started using the network for
exchanging information and messages.
In 1990s the internetworking of ARPANET,
NSFnet and other private networks resulted into
Internet. Therefore, Internet is a global network
of computer networks. It comprises of millions of
computing devices that carry and transfer volumes
of information from one device to the other.
Desktop computers, mainframes, GPS units, cell
phones, car alarms, video game consoles, are
connected to the Net.
1.2 Definition
The World Wide Web (WWW) is an internet based service, which uses common set of
rules known as Protocols, to distribute documents across the Internet in a standard way.
The World Wide Web, or Web is a part of the Internet. The Web is viewed through
web browser softwares such as Google Chrome, Internet Explorer, Mozilla Firefox etc.
Using browsers one can access the digital libraries containing innumerable articles,
journals, e-books, news, tutorials stored in the form of web pages on computers around
the world called Web Servers. Today thousands of web pages/websites are added to the
WWW every hour.
or Firefox, to access Web documents called Web pages that are linked to each other via
hyperlinks. Web documents also contain graphics, sounds, text and video.
2. Web Servers
2.1 What is a Server?
A server is a computer that provides data to other computers. The entire structure of the
Internet is based upon a client-server model.
Web server helps to deliver web content that can be accessed through the Internet. The
most common use of web servers is to host websites, as the internet is not only used to
Basics of Internet
fetch the information but there are other uses such as gaming, data storage or running
business applications.
The primary job of a web server is to deliver web pages to clients. The communication
between the client node and server node takes place using the Hypertext Transfer
Protocol (HTTP). The delivered web pages include images, style sheets and scripts in
addition to text content.
Cloud Computing is distributed computing over a network, and has the ability to run
a program or application on many connected computers at the same time.
It is used, where various computing concepts that involve a large number of computers
are connected via real-time communication network such as the Internet.
Various services provided by the Web server are:
1. Cost Efficient: Web server is the most cost efficient method to use, maintain and
upgrade. Traditional desktop software costs companies a lot in terms of finance. On
the other hand, it is available at much cheaper rates. Besides, there are many onetime-payment, pay-as-you-go and other scalable options available, which makes it
very reasonable for the company.
2. Resource Sharing: Web Server has the capability to store unlimited information
such as Google Drives, Cloud computing etc. The space where the data can be
stored is shared by the other users at the same time like hard disk can be shared on
physical network as LAN.
3. Data Sharing: With the help of web servers one can easily access the information
from anywhere, where there is an Internet connection using Google docs such as
Documents, Excel sheets, Drawings, Powerpoint presentations etc.
4. Backup and Recovery: As all the data now a days is stored on web servers,
backing it up and restoring the same is relatively much easier than storing the same
on a physical device. Hence, the entire process of backup and recovery much
simpler than other traditional methods of data storage.
Basics of Internet
3. File Transfer Protocol (FTP) Server: FTP uses separate control and data
connections between the client and the server. FTP users may authenticate
themselves in the form of a username and password, but can connect anonymously
if the server is configured to allow it. For secure transmission username and
password must be encrypted using FTP and SSL.
4. Database Server: A database server is a computer program that provides database
services to other computer programs or computers using client-server model.
Database management systems frequently provide database server functionality, and
some DBMSs (e.g., MySQL) depend on the client-server model for database access.
Such a server is accessed either through a front end running on the users
computer where the request is made or the back end where the request is served
such as data analysis and storage.
5. Domain Name System (DNS) Server: A name server is a computer server that
hosts a network service for providing responses to queries. It maps a numeric
identification or addressing component. This service is performed by the server in
response to a network service protocol request.
The primary function of these DNS servers is the translation (resolution) of humanmemorable domain names and hostnames into the corresponding numeric Internet Protocol
(IP) addresses. The secondary function of DNS is to recognize a name space of the Internet,
used to identify and locate computer systems and resources on the Internet.
3. Web Site
3.1 Definition
The collection of web pages on the World Wide Web that is accessed by its own Internet
address is called a Web site. Thus, a Web site is a collection of related Web pages. Each Web
site contains a home page and contains other additional pages. Each Web site is owned and
updated by an individual, company, or an organization. Web is a dynamically moving and
changing entity, today web sites generally change on a daily or even hourly basis.
6
Some of the web portals are AOL, iGoogle, Yahoo and even more.
A website refers to a location or a domain name hosted on a server which is accessible
via internet. It is a collection of web pages, images, videos which are addressed relative
to a Uniform Resource Locator (URL). Websites provide content from independent
resources to specific audience. The content of the website is generally focused & contains
the material needed to be accessed.
3. Heading of the site: Headings in a website play a crucial role as they not only
present a clear structure of the web page to the audience and help the search engines
to retrieve the required information.
4. Effective Colour Contrast: As the websites are used to retrieve the information
related to specific purpose or topic. It is very important to take care of the
presentation of the contents of the sites. So that, website visitors must not have any
difficulty in reading a web page. As some times when we pick a colour scheme for
our website we forget that there are people with poor vision and colour deficiencies.
professional. Your site reflects your company, your products and your services.
Screen Resolution: As we know that websites are displayed on the screen of electronic
devices and every device has different resolution. Today, the average web surfer uses a
resolution of 1024 x 768 pixels. However, you need to make sure that your website
looks good at this setting and must work nicely for other resolutions too.
Basics of Internet
Colour Scheme & Text Formatting: To make the website presentable appropriate
colour scheme must be used. Always use 2 or 3 primary colours that reflect the purpose
of your site. Add contrast colours in your site, which helps the user to easily read the
text. Use fonts that are easy to read and available on most of todays computer systems.
Keep the standard font size for paragraph text i.e. between 10 and 12 pts.
Insert Meaningful Graphics: Graphics are important, as they provide the site a
legible and interactive appearance. However, dont use too many images and that
too with a high resolution. First, whenever user will try to download the website it
will take too long to download and secondly, too many images with less text, lose
the interest of the customer.
Simplicity: Keep your site simple and allow for adequate white space. Dont overload
your site with complex design, animation, or other effects to impress your viewers.
Relevant Content: Include relevant information along with style, to help the
Bar in your website. Place all the menu items at the top of your site, or above the
fold on either side. Include Site Maps in your site to reduce the number of top level
navigation items. Every component of your site should work quickly and correctly.
Broken or poorly constructed components will frustrate the visitors. All the
hyperlinks, contact forms, should be placed appropriately.
Minimal Scroll: While surfing the sites for information users do not like scrolling
the page instead they need to see all the information on one screen. Even the Search
Engines will reward you for this behaviour.
Consistent Layout: Always use a consistent layout in the whole website which will
being used by the users. Create a website which should be platform independent.
Free Web hosts: Most people want to go for free Web hosting. On one hand it is free but
on the other hand, you dont always get much space, due to low bandwidth.
Search a Web Hosting Provider: These are the links to other sites for finding a good
host for your site.
Step 2: Domain Name
You can plan your website in two ways: using a domain name and without using a
domain name. You can put up a site on free hosting or even paid hosting plans. A domain
name provides extra branding for your site and makes it easier for people to remember
the URL.
Step 3: Plan Your Website
After deciding the domain and your URL, you can start planning your site. You need to
decide the audience aimed at.
Select the type of site: Most websites are either news/information, product, or reference
sites. Each has a different focus. A site must have formal language, where as a personal
site can use slang and an informal tone.
Step 4: Build Your Website Page by Page
For building a website you need to work on one page at a time. To build your site you
should be familiar with the key elements of the site as discussed above.
Step 5: Publish Your Website
After the completion of the design now it is the time to publish your website on web. You
can do this either with the tools using your hosting service or with FTP clients. Knowing
which you can use depends upon your hosting provider.
Step 6: Promote Your Website
There are many ways to promote a website such as web search engine, word of mouth,
email, and advertising. You build your Web content so that it ranks well in commonly
used search engines. This can be difficult, but it is inexpensive and can result in good
results if you work at it.
Step 7: Maintain Your Website
Maintenance is the last step of constructing a site which helps in keeping your site updated
with the latest trends of market. In order to keep your site going well and looking good,
Basics of Internet
you need to test your site frequently. And you should also work on content development
on a regular basis.
Notepad++
PageBreeze
Firebug
Bluefish Editor
10
Brackets
KompoZer
OpenBEXI
GIMP
BlueGriffon
4. Webpage
4.1 Definition
A Web page also known as Electronic Page, is a part of the World Wide Web. It is just
like a page in a book. The basic unit of every Web site or document on the Web is a Web
page containing the information.
Basics of Internet
11
A Web page can contain an article, or a single paragraph, photographs, and it is usually a
combination of text and graphics.
5. Web Browser
A browser is a software that lets you view web pages, graphics and the online content.
Browser software is specifically designed to convert HTML and XML into readable
documents.
The most popular web browsers are: Google Chrome, Firefox, Internet Explorer, Safari,
Opera and UC Browser.
Back
Forward
The Tool Bar is much like the Menu Bar stretching from left to right across the top
of your screen just under the Address Bar
12
Back button
Back history
Forward button :
This button will only be available once you have used the Back
button at least once. It helps to take you to the page you just left
when you clicked on the Back button.
Forward history :
That brings up a list of the sites you have visited and then used
the Back button to return.
Stop
Refresh
: Gives the most recent version of the page that we are on.
Home
Search
Favourites
History
5.2 SSL
The Secure Sockets Layer (SSL) is a protocol, uses Hypertext Transfer Protocol (HTTP)
and Transport Control Protocol (TCP) for managing the security of a message
transmission on the Internet. The sockets term refers to the sockets method of passing
data back and forth between a client and a server program in a network or between
program layers in the same computer. SSL uses the public-and-private key encryption
system, which also includes the use of a digital certificate.
c.
Safari
e. Maxthon
Basics of Internet
d.
Opera
f.
Internet Explorer
13
g.
Netscape
Navigator
h.
Avant Browser
i.
YouTube
Browser
j.
UC Browser
6. Blogs
6.1 Definition
A blog, short for web log is a modern online writers column. A blog is a web site like
any other, but it is intended to offer personal opinions of people on their hobbies,
interests, commentaries, photo blogs, etc.
Initially, blogs started out as online personal diaries, but in a technology-driven world,
now they have also been taken up by businesses as an informal method of communicating
with customers and clients.
Blogs can also be used for commercial purposes, too. Absolutely anyone can start a blog,
but some people make reasonable incomes by selling advertising on their blog pages.
Social network companies also realise how popular blogs are and many offer free blog
space (e.g. MySpace).
Another feature of popularising a blog is the ability of visitors to add comments to the
stories.
There are two ways of starting your own blog:
1. Free blog hosting: You do not need a server to start your own blog. There are
plenty of free, open source blogging software you can install. For example
WordPress and Moveable Type.
2. Paid blogging: Another way is when a company provides you a limited amount of
space or a column on their website and the blogger has to pay for the same till the
time he is using the available space.
Personal blog
By far the most popular among all types of blogs is the personal blog, after all, blogging
started off as a way of giving words to your thoughts. A typical blogger may be keen on
posting stories about his interests.
News and views
These days, we find a number of news and television companies having professional
journalists who post stories and views about the latest events. Visitors can comment their
opinions as well. BBC is a popular example of the same.
Company blogs
Many companies run blogs to let their customers and clients know about the new
products coming up or progress being made on some project.
Micro-blogs
This is a new type of blog where you post very short comments that others can follow
and a powerful way for professionals to keep in touch with each other. Twitter is the best
example.
6.3 Bloggers
Those days are now a thing of the past when journalists had only pens and papers or
specific websites to write on because now they have websites and blogs on which they
can express their views. A person who writes a blog is simply known as a blogger.
Associating this to social networking websites allows you to get viewers and readers who
would then promote these amongst other people.
A good blogger should keep a few things in mind:
Write unique but meaningful content. Try keeping the language simple and concise
and incorporate some surprise elements. Find a topic that would intrigue your
readers or an issue that people are looking out for more information. Remember to
BE ORIGINAL. This will increase the credibility.
Basics of Internet
15
Dont make it boring. Avoid clichs. Keep your writing informal, if possible funny
or quirky and create a perfect balance between keeping the mood light and
professional enough to suggest you are serious about your matter.
Knowing your topic is good but not enough. You need to express it in a right way
and communicate properly to your readers. Write crisp, short, active sentences with
powerful verbs. Ensure that your content is error-free, proofread and edit your work
meticulously and only when you are satisfied with it, hit the publish button.
The title is the crux of any content. Your best quality content will hold no meaning
if the title itself is not catchy. The first thing readers notice is the headline. You have
to tempt them to open the link and leave satisfied but still wanting to know more
about other blogs. This eventually increases traffic to your site!
Advantages of Blogging:
1. We can work on blog anytime and anywhere in the world, all you need is your
laptop or a desktop computer and wireless internet services.
2. You are your own employee. When blogging, you can blog any time you want to
whenever you think of something that is relevant to your blog.
3. As a blogger, you are flexible and can choose to write about anything in the world
as long as it benefits you and befits your opinions and thought process.
4. Very quick and easy to set up, do not need much technical knowledge.
5. Easy and quick to update or add new posts. People can leave comments on your
blog and you can comment on other persons blogs, too.
Disadvantages of Blogging:
1. You need to be patient because you dont start earning in a single day. Readership
takes time to develop within people.
2. Blogging is time-consuming. You need to be disciplined. Finding time to write
regular updates can become a chore.
3. You need to be very active as a blogger so that people can read your blog posts. If,
for example, you fall ill, you wont be able to blog and this would result in losing
followers.
4. As you know the public to everyone, you need to put a check on your language.
5. There are many very dull blogs around. You may have to look at many before you
find some worth reading.
16
7. URL
7.1 Definition
URLs, or uniform resource locators, are the web browser addresses of internet pages
and files. It is the way to locate a file or document on the Internet. The URL specifies the
address of a file and every file on the Internet has a unique address. It works with IP
addresses to give a name, location to web pages. Web software, such as your browser,
use the URL to retrieve a file from the computer on which it resides.
Format of a URL:
Protocol://site address/path/filename
Every URL has three parts to address a page or file:
1. Protocol which ends with a //:
2. Host computer which ends with web extensions such as .com,.org etc.
3. Filename or page name which displays the related information.
Example:
http://www.banks.com/login/password.htm
The above URL consist of:
Protocol
: http
: www
Domain name
: banks
Domain type
: com
Path
: /login
File name
: password.html
Basics of Internet
17
In above URL specifies an image file hardware.gif located in the images directory, under
domain name www.developers.com.
If we want to include the image file hardware.gif stored in the images directory of www.
developers.com domain on this page.
Using an Absolute URL in an <img> tag is as follows:
<img src= http://www.developers.com/images/hardware.gif width=... height=... />
A Relative URL is targeted to a file or directory in relation to the present file or
directory. If the web site has several sections and the files and web pages for each section
have been segregated into different directories. This helps in keeping things organized
and uncluttered on the web site. The relative URLs are shorter than absolute URLs and
hence the file size of the web page would reduce, if you use the former.
For example:
If we want to include the image file hardware.gif stored in the images directory of
www.developers.com domain on this page using an absolute URL.
The <img> tag for this image display will be as follows:
Using a Relative URL in an <IMG> tag
<img src=../images/hardware.gif width=... height=... />
7.3 Protocols
Definition
When we have to communicate with anyone, then we need to follow the same language,
so that communication can be done in an effective manner. In the same way ,whenever
there is need to exchange data or information among different or same type of networks
on internet, they need to follow same set of rules.
The Internet is based on many layers of information, where each layer is dedicated to a
different kind of documentation. These different layers are called Protocols. A protocol
is a set of rules that governs the communication between computers on a network. They
exist at several levels in a telecommunication connection.
The most popular protocols used on internet are the World Wide Web, FTP, Telnet,
Gopherspace, instant messaging, and email.
18
Basics of Internet
19
connection is established, the client can choose to send and/or receive files. To connect
to an FTP server, a client requires a username and password as set on the server. Many
FTP servers use a username as anonymous. Using FTP, you can also update (delete,
rename, move, and copy) files at a server. You need to logon to an FTP server.
However, publicly available files are easily accessed using anonymous FTP.
FTP using TCP/IP, works in the same way as HTTP used for transferring Web
pages from a server to a users browser. FTP sites are heavily used and require
several attempts before connecting.
To use your web browser to connect to an FTP site, where you normally enter a
URL as follows:
ftp://username@ftp.site name/
Summary
The World Wide Web (WWW) is an internet based service, which uses common set of rules
known as Protocols, to distribute documents across the Internet in a standard way.
The Internet is a massive network of networks. It connects millions of computers together
globally, forming a network in which any computer can communicate with any other
computer as long as they are both connected to the Internet.
Search engines are the programs which are needed to extract the information from the
internet.
A search engine works in the following order: Web crawling, Indexing, Searching
A web server commonly known as HTTP server or application server is a program that
serves content using the HTTP protocol.
A Web page can contain an article, or a single paragraph, photographs, and it is usually a
combination of text and graphics.
A browser is a software that lets you view web pages, graphics and the online content.
The Secure Sockets Layer (SSL) is a protocol, uses Hypertext Transfer Protocol (HTTP)
and Transport Control Protocol (TCP) for managing the security of a message transmission
on the Internet.
A blog is a web site like any other, but it is intended to offer personal opinions of people on
their hobbies, interests, commentaries, photo blogs, etc.
URLs, or uniform resource locators, are the web browser addresses of internet pages and
files. It is the way to locate a file or document on the Internet.
There are two types of URL: Absolute and Relative.
A protocol is a set of rules that governs the communication between computers on a network.
20
21
8. ______________ protocol defines how messages are formatted and transmitted, and
what actions Web servers and browsers should take in response to various commands.
(a) FTP
(b) TCP/IP
(c) HTTP
(d) SMTP
9. URLs are of two types:
(a) Absolute & Relative
(c) Absolute & Dynamic
10. DNS is an acronym for ______________.
(a) Domain Name Security
(c) Document Name System
(e) Protocol
(f) Blog
(g) TCP/IP
(h) HTTP
22
16. People nowadays are pursuing blogging as their career. But, still there are many who
refuse to go for the same. Discuss your views on the topic.
17. Briefly explain the elements of a website.
C. Lab Session
Q.1. List the URLs of all the commercial and non-commercial websites and find out their
domain names, servers and protocols.
Q.2. Name all the websites related to e-commerce.
Q.3. Create your e-group on a social networking site and share your opinions and views
on environment.
Q.4. Name all the personal types of blogging sites.
Q.5. List all the popular search engines in the market.
Q.6. Write the names of all the newsgroups that you can join on internet.
Q.7. Make a list of IP addresses of a few of your favourite sites using any search engine of your
choice.
Q.8. Make a collage depicting all the logos of web browsers and list their comparative
features.
Q.9. Identify the category of these sites and complete the table.
Website
Category
www.olx.in
www.facebook.com
www.icicibank.com
www.irctc.co.in
www.merriam-webster.com
Basics of Internet
23
Chapter 2
Web Services
Learning Objectives
By the end of this chapter, learner will be able to:
List various web services.
Define email.
Understanding of protocol used in email services
Define chatting, video conferencing.
Understanding of E learning, E shopping
Define social networking.
Introduction
Everyone is using internet irrespective of their background & interest. The types of
services available on net are as diverse as the interest of the people .Web Services mean
the services provided by World Wide Web. The World Wide Web provides services like
chatting, emailing, video conferencing, e-learning, e-shopping, e-reservation, e-groups
and social networking. These services may mean different things to different people but
in simple words, they are the ways to communicate and here the communication takes
place between two electronic devices.
When two persons are talking to each other, we say they are chatting. Likewise when two
computers (or two electronic devices) exchange data and information, we say two
computers are e-chatting. They communicate with each other with the help of technology
and programming standards used on Internet.
Let us discuss the services provided by World Wide Web in detail in the following
sections.
Web Services
25
Access Protocol). The Simple message transfer protocol (SMTP) enables the actual
sending of messages. The Post Office Protocol and IAMP allows the users to retrieve
information instantly.
When we want to send a message using e-mail service, there are three important things
that are to be kept in mind. The first is the body of the message. The second is the address
of the person(s) to whom you want to send the message. The third is the fields associated
to e-mail message. Let us discuss them in detail.
Search Mail
INBOX CONTACTS
Search Web
Cancel
Compose
Inbox(16)
Drafts
Sent
Spam (1)
Trash
To
CC
Hide CC
BCC
Hide BCC
Subject
FOLDERS
MESSENGER
APPLICATIONS
Message Body
The body of the message may consist of words, number, attachments, special
characters or anything you want to insert in the letter.
E-mail Address
Let us look at the following example(s) to understand the e-mail address and
its components.
Example:
editor@cbse.co.in
editor@cbse.com
An e-mail address consists of four parts:
1. The username
2. The symbol
3. The hostname
4. The top level domain
26
1 The username, here editor which refers to the mailbox. The username is the name
given by the user (the recipient) as per his/her choice, while preparing an e-mail
address for him / her. While deciding a username, the recipient has to follow the
naming conventions like use of underscore ( _ ) or a dot ( . ) as a separator between
two words, minimum or maximum number of character to be maintained etc.
2. The symbol, here @. This symbol is pronounced as at the rate and this remains
same in every email address.
3. The hostname, here cbse. The hostname is also called the domain name. The
domain name is the name of mail server whose representation appears in the client
computer when he/she opens his/her inbox. This domain name is important to lead
the message to the address of the mail server. The address is a unique IP address for
easy identification on the Internet.
4. The top-level domain (TLD). The top-level domain may again get divided into two
portions. Here com or co refers to commercial sites (the first portion) and
in refers to India (the second portion). Thus, co.in together refers to
commercial sites registered and residing in India.
2. Chat
The word chat as it literally means in English is communication between
two or more people. The electronic chat is the communication between two
or more individuals using their computers. Chat is only feasible when
Web Services
27
both the users are on Internet at the same time. The communication occurs through typed
text messages. Usually, this talking is the exchange of typed-in messages requiring
one site as the repository for the messages (or chat site) and a group of users who take
part from anywhere on the Internet.
The group chats can be ongoing or scheduled for a particular time and duration. Most
chats are focused on a particular topic of interest and some involve guest experts or
famous people who talk to anyone joining the chat. Alternatively two users can chat
when they are using the Internet and the platform at the same time.
Several browser interfaces provide the chat facility these days such as Instant messaging,
Windows, Skype and ICQ. With the invent of 3G technology not only text data but video
data can also be streamlined at the same time
3. Video Conferencing
The video conferencing is a conference between two or more people sitting at various
remote locations around the world. They can talk to each other when they are connected
to each other using Internet. Thus, they are able to transmit both the video and audio data.
In video conferencing, several computer networks relay the information through the
Internet. Each of the end user has a camera known as Webcam as well microphone to
capture the video data and the voice data in real time and this is transmitted over Internet.
The participants can view each other over their monitors as well as hear the voice data
over speakers of their laptop or desktop computers. These days equipment such as smart
phones and tablets has the capability of capturing the video data as well voice data.
Therefore, it is possible to conduct video conferencing from any part of the world not
necessarily connected to Internet through wires.
28
2. Increased productivity: The people meet in the virtual world where the discussions
takes place instantly without meeting each other and the decisions about a problem
are thus made faster. This leads to increased productivity.
3. Going Green: Since conferencing between people is possible even without
travelling from one place to another through video conferencing, a lot of petrol or
fuel is saved. One can therefore say, that it is an eco-friendly initiative.
But there are some disadvantages of video conferencing as well:
1. Technical issues- Since the video conferencing depends heavily on the availability
of a high speed internet connection, the technical issues of such types can delay the
discussions among the participants sitting in different locations.
2. Lack of personal contact- All types of discussions cannot be handled through video
conferencing. Discussion between an employer and prospective employee or the
assessment of a candidate is possible most of the time through the personal
interview i.e. face to face interaction. It is difficult to judge a person through the
video or a virtual interview.
Web Services
29
4. E-Learning
As computer and usage of Internet has made the life of the
business people easy, companies from across the world have
started to consider the fact that information and knowledge can
be imparted to people using technology. E-Learning is one such
method in this direction.
The E-Learning is a method of providing guidance and/or delivering information to
students of university or the employees of companies. Several universities and companies
design the courses that can be reviewed using laptop, desktops or other smart devices.
These programs are developed in such a way that the individuals dont need to come to a
classroom but can review all the data from any place convenient to them. It can be their
home or their office.
Such courses are designed in such a way that people can progress slowly or at a pace,
they can manage. These courses help an individual to assess their knowledge online. This
is done using the built in evaluation tools like quizzes or multiple choice questions.
These courses are sometimes, stored in a directory or a server, from where the students
can access and copy them on the compact disc or other data storage device. In either case,
the program is developed in such a way that the student needs minimal interaction with a
human tutor to understand the information being shared.
The biggest advantage of E-learning is that it helps to provide information to a large group of
individuals who cannot attend an institution. It also reduces the need for one to go to a
specific place to learn or to share information. The E- Learning provides an opportunity to
the student to complete the course at their speed. Several product development companies
develop programs for E-learning the business in schools and universities. Today even a
young child from an elementary school knows how to use a smart device, a device that helps
in interactive learning. The universities from across the globe keep offering the on-line
courses. This is possible through e-learning. The e-learning may even provide the students a
the platform to share their thoughts and have live or online discussions for clarifications.
4. Students can study anywhere; they only need access to a computer and Internet
connection
5. Self-paced learning modules allow students to work at their own speed
6. Flexibility to join discussions in the bulletin board threaded discussion areas at any
hour, or visit with classmates and instructors remotely in chat rooms
7. E-Learning can accommodate different learning styles and facilitate learning
through a variety of activities
8. Develops knowledge of the Internet and computer skills that will help learners in
their career
Disadvantages of online or computer-based learning
1. Learners with low motivation or bad study habits may fall behind
2. Without the routine structures of a traditional class, students may get lost or
confused about course activities and deadlines
3. Students may feel isolated from the instructor and classmates
4. Instructor may not always be available when students are studying or need help
5. Slow Internet connections or old computers may make accessing course materials
frustrating
6. Managing computer files and online learning software can sometimes seem complex
for students with beginner level computer skills
7. Lab work is difficult to simulate in a virtual classroom
5. E-Reservation
E-Reservation System is an online reservation system that enables hotels, resorts,
property owners, operators, theater operators and transport companies to maximize
revenues without having to put human booking agents.
This system works with the Web and the Internet helps provide an access to a user/
customer to book a ticket, room etc. without ever having to go to the booking office.
Since such systems are internally integrated with the database of the companies, the
booking system helps to monitor access to the client as long as there is availability of the
seats/ rooms etc. The diagram below shows the process of e-reservation in case of a hotel
room booking.
Web Services
31
6. E-Shopping
On-line shopping is the purchase of products and services over the
Internet using a desktop or laptop of other smart device. With the
access of Internet everywhere On-line shopping is gaining
popularity as it is convenient to fast paced life style of the people
these days. More and more business firms are offering these
opportunities because it also helps them to reduce the infrastructure
costs setting up stores, hiring sales employees and merchandising.
Products such as clothes, shoes, groceries, books and larger products as furniture
and home dcor are offered through online shopping.
Benefits of E-Shopping:
1. Reduces time for customers as they can do a search from the comfort of their home
and compare prices
2. Reduces major infrastructure cost to the businesses
3. Helps move products faster as the products move from manufacturer to the
customer skipping unnecessary storage.
4. Businesses benefit from immediate funds availability and mostly customers pay for
the product through e-payment online.
Disadvantages of E shopping:
1. Customers are not able to touch and feel the products
2. Businesses have to manage the logistics of delivering products just-in-time
3. The access of this shopping depends entirely on availability of Internet. This limits a
large population who does not know to use the technology i.e. the remote areas.
4. Businesses have to continually protect against fraud and returning of the products
sold.
32
There are several e-shopping portals available worldwide. Some of them are local to a
specific region or country. Some portals provide with a global access. The examples of
such portals are e-bay, amazon etc. In India there are other established e-shopping portals
such as Home Shop 18, Naaptol .com, Yebhi.com etc
The most important interface component of E-Shopping portal are:
1. Customer website interface
2. Order management and inventory control.
3. Shipment Interface with various logistics organizations
4. Payment gateway for financial interface for payment processing
5. Customer service and support with live agents for complaints and help
E-Shopping has not only changed the way consumers are shopping for the products but
has also changed how the product moves from manufacturers to the end user. In the
typical store-shopping model, the product moved from manufacturer to wholesalers to
several intermediaries and finally to stores where customer may buy it. This model had
several layers of transportations built in leading to costs. In the e-shopping model, the EShopping portal manages just-in-time inventory where product is obtained from
manufacturer after the customer orders it from the website. This product is then shipped
directly from the warehouse of the shopping portal provider to customer. This eliminates
the intermediary and hence saves the cost of middleman.
6. Social Networking
Web Services
33
Social Networking is a platform that helps people to connect with others and build a
social relation. The last 15 years has seen a splurge of social networking sites where
people can search / choose to make friends, post pictures and photos, comment on each
others activities. Social networking has opened the doors where people can connect and
share their lives and the activities by them without being close geographically. People can
connect from anywhere in the world with the internet connection. They can become the
member of one or other available social networking site.
Social networking site allows a user to share ideas, activities, events, and interests among
the people. The individuals can also have the control of the content they share and the
person with whom they are or want to communicate with. An individual can share text
information, photos, data files or even videos. Many people now a days use social
networking sites to market their business and thus reach the potential customer. Using an
account of these sites they can showcase their product and services that the people
interested can follow and review.
7. E groups
E groups are a list of emails, users that can share information among each other. A single
administrator can maintain that group and hence provide the entire set of users to
communicate between each other. You can think of the administrator as a person who is
controlling the E Group. For example most of the companies these days have an E Group
structure where all employees can send email to each other, share files and access folders
on their servers or view each others calendar. The important fact is that only the users
within the group have the access and any user who is not in the group will not get the
permission to access.
The administrator of the group has the control on what level of access can the different
users have. Mostly all users can send an email to each other, but some users may have
access to all the files that the organization stores while others only to a specific folder.
Summary
Web Services mean the services provided by World Wide Web. The World Wide Web
provides services like chatting, emailing, video conferencing, e-learning, e-shopping, ereservation, e-groups and social networking.
E-mail or Email is simply the short form of electronic mail. It is a system of receiving,
sending, and storing electronic messages.
34
There are three types of protocols used by e-mail service. One is Simple message transfer
protocol (SMTP), second is Post Office Protocol and third is IMAP (Internet Message
Access Protocol).
The word chat as it literally means in English is communication between two or more
people. The electronic chat is the communication between two or more individuals using
their computers
In video conferencing, several computer networks relay the information through the
Internet. Each of the end user has a camera known as Webcam as well microphone to
capture the video data and the voice data in real time.
The E-Learning is a method of providing guidance and/or delivering information to students
of university or the employees of companies..
E-Reservation System is an online reservation system that enables hotels, resorts, property
owners, operators, theater operators and transport companies to maximize revenues without
having to put human booking agents.
On-line shopping is the purchase of products and services over the Internet using a desktop
or laptop of other smart device.
Social Networking is a platform that helps people to connect with others and build a social
relation.
Social networking site allows a user to share ideas, activities, events, and interests among
the people.
E groups are a list of emails, users that can share information among each other.
(b) Tablet
(d) All of the above
Web Services
35
guidance
SMTP
lower
at the rate
e-mail
Higher
E groups
3. Different protocols are needed so that different computers using different types of
software can send or receive the information.
4. The body of the e-mail message may consist of words, number, attachments, special
characters or anything you want to insert in the letter.
5. The domain name is the name of mail server whose representation appears in the client
computer when he/she opens his/her inbox.
6. The address in Cc: field is not visible to the recipients of the To: and the Bcc: fields.
7. In an e-shopping there are a number of middlemen.
8. It is difficult to judge a person through the video or a virtual interview.
Video conferencing
E-Shopping
E-Reservation
E-Learning
Web Services
37
F. Lab Session
1. Make a list of different email addresses that you or your friends use and identify
different Host names.
2. Search Internet for different e-learning programs that are available. List down the
benefits derived by you. Which e-learning program is used by your school and find out
the information derived by them.
3. Identify the local TV programs that are using Video conferencing. Can you make a list of
advantages while watching the program? Also list what were the disadvantages of video
conferencing that you notice.
4. Make a reservation of a ticket online and make a list of all the steps needed.
5. List all social media sites you are using. Identify what benefits you feel by their use. Also
identify the restrictions these websites put on you as a user.
6. Create an account in facebook. How can you use the gaming facility on the facebook.
38
Chapter 3
Introduction to GIMP
Learning Objectives
After learning this chapter, learner will be able to:
State the purpose of Image Editing software.
List the features of Gimp.
Install Gimp Software from the provided link.
Change the size of an image.
Prepare the images for web.
Crop the parts of the images.
Understand the concept of Layers.
As you have worked with so many photo editing software such as Microsoft Paint,
Drawing of Open Office.org etc. Now, in this chapter you will learn how to work with
the images using GIMP software which is free and open source.
39
almost all major formats with some useful features including email facility, 150+
transitional effects, high-quality magnifier, scanning facility and image annotation.
(c) Serif PhotoPlus X4: The Serif PhotoPlus X4 offers a wide variety of features for
image editing in a very user-friendly environment. This tool offers photos organizer,
scrapbooking, greeting cards, and web galleries.
(d) Photo Impression 6.5: This tool provides the image-editing facility in a very simple
way. It automatically organizes all of your photos and lets you to print them effectively.
(e) PhotoStudio 6: The PhotoStudio 6 allows you to add animated text and stamping
facility on high-bit depth images. This tool also lets you to work with layers for
image editing purpose. You can easily transform your raw photos into good ones by
using this tool because of its ease and simple navigation.
(f) Picasa: Picasa is the kind of application that the built in editor is more than robust
enough for most casual users and includes basic color correction, cropping, and a
variety of special effectsthe majority of which manage to avoid being cheesy.
Picasa isnt a tool for deep and detailed editing but it is extremely easy to use for the
kind of quick crop and quick editing, most digital camera owners need.
(g) Paint.net: The interface of Paint.net is easy to pick up and an unlimited undo
function helps in correcting your learning, curve shapes, a snap making etc...
Paint.net is favourite among Windows users looking for a powerful image editor.
(h) Photo! Editor: Photo! Editor is powerful multifunctional software offering a
complete set of image editing tools. It contains everything a digital camera owner
might need to correct or enhance their photos. You will enjoy the ultimate
convenience and professional approach provided by each of the tools.
(i) Inkscape: The Inkscape is the open source image editing tool with standard features
making it the best alternative of the Adobe Photoshop. It allows the vector based
controls just like the Adobe Illustrator with powerful features. Most prominent
features of Inkscape are node-editing, bitmap tracing, direct XML editing, and alpha
blending. These features make the Inkscape a very powerful and free image editing
tool.
(j) Corel PaintShop Photo Pro X3: The Corel Paint Shop Photo Pro allows you to
adjust and clean-up your photos using the integrated photo organizer with advanced
enhancement tools. With the smooth interface and fast speed Corel Paint Shop
Photo Pro X3 makes it very easy for you to edit and organize your photos.
40
3. GIMP
3.1 Introduction
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. It is
free and consists of many similar features provided by the Photoshop. Its available for
free for download distribution software that allows you to create image composition and
image authoring.
Introduction to GIMP
41
as layer format.
Virtually unlimited images can be opened at one time.
GIMP works with
Note
It is also available as a
part of Ubuntu no root
package from the Google
Play store on Android.
42
VERSION
DATE
Subscribes to Updates
STATUS
DOWNLOADS
RATING
SourceForge
About
Create a Project
Site Status
Software Directory
gimp-2.8.4-setup.exe
7.4/73.3 MB, 2 mins left
Expansions
Tagged Image File format
X Window System
Joint Photographic Experts Group
X Pixmap
Graphics Interchange Format
Portable Network Graphics
Photoshop Document
Portable PixMap
Bitmap
Personal Computer Exchange
4. Starting GIMP
4.1. Open Gimp Software
Tip: GIMP was originally releasedas the general Image Manipulation Program,
Spencer Kimball and Peter Mattis. Development of GIMP began in 1995 as project
at the University Of California, Berkeley.
Introduction to GIMP
43
Lenovo
Documents
Pictures
Notepad
Music
Control Panel
Change skin
Nero Burning ROM12
Music
Pictures
Computer
Control Panel
Default Programs
Microsoft FrontPage
Mozilla Firefox
Back
All Programs
|Search programs and files
Computer
GIMP 2
Calculator
Documents
AVG PC TuneUP
Lenovo
Adobe Help
Adobe ImageReady 7.0
Adobe Photoshop 7.0
Shut down
Shut down
File Edit Select View Image Layer Colors Tools Filter s Windows Help
Layers - Brushes
Mode: Normal
Opacity
100.0
Lock:
GIMP Startup
Starting Extensions
extension.script-fu
44
lte r
2. Hardness 050 (51 10)
New...
Create
File
Tools Filters Windows Help
Ctrl+N
Open...
Open as Layers...
or
width
Open Location...
Ctrl+O
Ctrl+Alt+O
Open Recent
Save
Save As...
Ctrl+S
Save a Copy...
Shift+Ctrl+S
Select
Template
Type the
height and
width
Template:
Template:
640480
Image Size
Image Size
800600
Width:
Width:
640
Height:
400
1024768
Height:
16001200
px
A3 (300ppi)
640400 pixels
72 ppi, RGB color
Advanced Options
Help
Reset
A4 (300ppi)
Advanc
A5 (300ppi)
A6 (300ppi)
Help
B4 (300ppi)
B5 (300ppi)
Cancel
B5-Japan (300ppi)
US-Letter (300ppi)
US-Legal (300ppi)
Toilet Paper (US,
300ppi) CD cover
(300ppi) Floppy label
Web banner common 46860
Web banner huge 72890
PAL - 720576
NTSC - 720486
5. Press OK.
A new blank image file is created. Now, you can use the tools and create your own
drawings.
[Untitled]-43.0 (RGB color, 1 layer) 640480 GIMP
File Edit Select View Image Layer Colors Tools Filter s Windows Help
Layers - FG/BG
Mode: Normal
Toolbox
Opacity
100.0
Lock
Background
Brushes
FG/BG Color
You can
drop
dockable
700.0, 85.0
Introduction to GIMP
45
New...
Ctrl+N
Create
Open...
Ctrl+O
Open as Layers...
Ctrl+Alt+O
Open Location...
Open Recent
Save
Ctrl+S
Save As...
Save a Copy...
Shift+Ctrl+S
Preview
Evolution of technology_1_0001.xcf
Recently Used
371.0 KB Friday
37.7 KB 7/30/2012
Evolution of technology_1_0001.jpg
Lenovo
Desktop
Windows7_OS (C:)
DVD RW Drive (D:)
Lenovo_Recovery (Q:)
Evolution of t...y_1_0001.xcf
379.9 kB
Documents
Pictures
All Images
Open
Cancel
File Edit Select View Image Layer Colors Tools Filters Windows Help
Layers - FG/BG
Mode Normal
Opacity
Toolbox
10
Lock
Evolution
Brushes
FG/BG Color
You can
drop
dockabl
px
100%
46
1. FILE SAVE/SAVE AS
Create
Open...
Open as Layers...
Image Layer
Ctrl+N
Ctrl+O
Ctrl+Alt+O
Open Location...
Open Recent
Save
Save As...
Ctrl+S
Shift+Ctrl+S
Save a Copy...
Revert
Export to
Toolbox
Canvas
You can
drag
dockable
dialogs
here
429.0, 619.5 px
Status Bar
Toolbox
Ruler
Introduction to GIMP
47
you can change to other units. One of the most important uses of rulers is
to create guides. If you click on a ruler the guidelines will be created,
which helps you to position things accurately.
Status bar The Status Bar is placed at the `bottom of the image. Most of the time, by
default, it shows which part of the image is currently active, and the
amount of system memory that the image is consuming. The status area
displays, what operation is being performed, and its state of progress.
Canvas The most important part of the image window is of course the image display or
canvas. It occupies the central area of the window surrounded by a
yellow dotted line showing the image boundary against a neutral grey
background. You can change the zoom level of the image display in a
variety of ways, including the Zoom setting described below.
[E]
The Oval Selection tool is used to select circular and elliptical regions from an image,
with high-quality anti-aliasing if you want it.
5.2.3 Lasso Tool
[F]
The Free Selection tool, or Lasso, lets you select a drawing it free-hand with the pointer,
while holding down the left mouse button. When you release the mouse button, the
selection is closed by connecting the current pointer location to the start location with a
straight line.
5.2.4 Fuzzy Selection (Magic Wand) Tool
[U]
The Fuzzy Select (Magic Wand) tool helps you to select areas of the current layer or
image based on colour similarity. The Wand is a good tool for selecting objects with
sharp edges.
48
Select by color
Scissors tool
Paths tool
Zoom tool
Measure too
Move tool
Alignment too
Crop tool
Rotate tool
Scale tool
Shear tool
Rectangle Select
Flip tool
Text tool
Blend tool
Pencil tool
Paintbrush tool
Eraser tool
Airbrush tool
Clone tool
Ink tool
Heal tool
Perspective tool
Blur/sharpen tool
Smudge tool
Dodge/Burn tool
Foreground color
Background color
49
[T]
The Text tool places text into an image. You can write your text directly on the canvas.
As you type your text, it appears on the canvas in a rectangular frame.
5.2.7 Eraser Tool
[Shift + E]
The Eraser is used to remove areas of colour from the current layer or from a selection of
this layer. If the Eraser is used on something that does not support transparency, then
erasing will show the background colour as displayed in the Colour Area of the Toolbox
5.2.8 Bucket Fill Tool
[Shift + B]
This tool fills a selection with the current foreground colour. If you Ctrl + click and use
the Bucket tool, it will use the background colour instead.
5.2.9 Colour Area
This area shows GIMPs basic palette consisting of two colours; the foreground and the
background which are used for painting, filling, and many other operations. Clicking on
either of the colour displays brings up a Colour Editor dialog, which permits you to
change it.
File Menu
50
Ctrl+O
Ctrl+Alt+O
Save
Save As...
Save a Copy...
Revert
Ctrl+S
Shift+Ctrl+S
Export to
Export...
Create Template...
Ctrl+E
Shift+Ctrl+E
Page Setup
Print...
Ctrl+N
Ctrl+P
Properties
Close
Close all
Quit
Ctrl+W
Shift+Ctrl+W
Ctrl+Q
Edit Menu
Stroke Path...
Preferences
Input Devices
Keyboard Shortcuts
Modules
Units
Ctrl+D
Mode
Transform
Canvas Size...
Fit Canvas to Layers
Fit Canvas to Selection
Print Size...
Scale Image...
Crop to Selection
Autocrop Image
Zealous Crop
File Menu
Ctrl+M
Flatten Image
Align Visible Layers...
Guides
Configure Grid...
Image Properties
Alt+Return
51
size for viewing. So, if your image is really big it will display it zoomed out until it
fits nicely on the canvas
Set the Resolution of image
Set the Interpolation Quality
Click on Scale to confirm.
File
Edit
Select
View
Image
Layer
Colors
Tools
Filter s
Duplicate
Help
Windows
Ctrl+D
Mode
Transform
Scale Image
Canvas Size...
Scale Image
[Untititled]-3
Image Size
Print Size...
Width:
Scale Image...
640
Height:
400
Crop to Selection
px
640400 pixels
Autocrop Image
Zealous Crop
Merge Visible Layers...
Ctrl+M
Flatten Image
Align Visible Layers...
X resolution:
72.000
Y resolution:
72.000
pixels/m
Quality
Interpolation: Cubic
Guides
Help
Configure Grid...
Image Properties
Reset
Scale
Cancel
Alt+Return
Ctrl+N
Ctrl+O
Ctrl+Alt+O
Open Locations...
Advanced Options
Open Recent
Save
Save As...
Save a Copy...
Revert
100
Optimize
Ctrl+S
Shift+Ctrl+S
Smoothing:
Progressive
0.00
Subsampling:
Save thumbnail
DCT method:
Integer
Export As...
Create Template...
Shift+Ctrl+E
Comment
Page Setup
Print...
Ctrl+P
Properties
Close View
Close all
Quit
Ctrl+W
Shift+Ctrl+W
Ctrl+Q
Help
Export
Cancel
or right click on
This will change the cursor and allow you to click and drag a rectangular shape.
Always click on the approximate upper left corner and drag to the lower right corner.
Tools Filter s Windows
Help
Selection Tools
Paint Tools
Transform Tools
Color Tools
Paths
Color Picker
Zoom
Measure
Text
Original Image
Cropping an Image
Introduction to GIMP
Shift+M
T
Align
Move
Crop
Shift+C
Rotate
Shift+R
Scale
Shift+T
Shear
Shift+S
Perspective
Shift+P
Cropped Image
Cropped Image
53
8.1 Layers
Layers are wonderful tools, especially to create collages or to delete various portions of an
image. In GIMP, the layers are virtually stacked up on top of each other; the lower layers
will show through resulting in a composite image that can be exported as a flat file such as a
JPEG or PNG. The separate elements of the composite image can be kept on separate layers;
return to the layered file and easily edit it before saving a new flattened file.
Summary
Image editing encompasses the processes of altering images
The GIMP 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.
The Rectangle Selection tool is designed to select rectangular regions of the active layer.
Canvas is the part of the image window where the image is displayed.
The Oval Selection tool is used to select circular and elliptical regions from an image.
The Lasso tool allows you to select a drawing with the free-hand.
The Fuzzy Select tool helps you to select areas of the current layer or image based on colour
similarity.
The Text tool places text into an image.
The Eraser tool is used to remove areas of colour from the current layer or from a selection
of this layer.
The Bucket Fill tool fills a selection with the current foreground colour.
The Colour area shows GIMPs basic palette, consisting of two colours, the Foreground and
Background, used for painting, filling, and many other operations.
Cropping is used to select a specified area which you want to focus and removes the
unwanted parts or everything outside the selected area of a picture.
Layers are transparent sheets stacked one on top of the other. You can see through
transparent areas of a layer to the layers below.
54
(b) Proprietary
(d) Both (a) & (b)
2. The ________ tool allows you to select a drawing with the free-hand.
(a) Fuzzy Selection
(b) Lasso
(c) Text
d. Bucket Fill
3. The Fuzzy Select (Magic Wand) tool helps you to select areas of the _______.
(a) Canvas
(b) All the layers
c. Current Layer
(d) Image with different colours
4. Shift+ C is the shortcut to _______ the image.
(a) Duplicate
(b) Delete
(c) Copy
(d) Crop
5. To prepare the images for the web means
(a) Reducing the size of an image
(c) Crop the image
(b) Text
(d) Bucket Fill
Introduction to GIMP
55
(b)
(c)
(d)
56
E. Lab Session
1. Take your family picture, scan it and change the background colour and clothes colour
using paint tools and layouts.
2. Design your Birthday party invitation using appropriate tools.
3. Import an image file of your choice. Change the foreground and the background color,
use a text tool to give a heading to your file. Select the text tool and type your name in
blue color. Select a portion of the picture and then change the direction. Save the file.
4. Make a collage on heritage of India
5. Design digital poster on Global Warming.
Introduction to GIMP
57
Chapter 4
Introduction to HTML
Learning Objectives
By the end of this chapter, learner will be able to:
Understanding of basic structure of HTML
Learning of various container and empty tags
Learn various html tags and their syntax.
Understanding of formatting elements of HTML
Introduction
HTML refers to Hypertext Markup Language. There is a special kind of text used by web
browsers that represents the data. This data may be in the form of letters, images, audios
or videos. This special text is given emphasis, which some people may say, it is marked
up through a link to the other documents. Thus a page formed using the special text is
called a document or a webpage. A webpage can get opened in a web browser. The web
browser accesses the web page from the web server (a place which holds most of the
webpages). A web server may be placed anywhere in the world. This means that a web
browser can access a webserver only if it connects to internet (network of networks
across globe). The HTML was founded by the group called World Wide Web
Consortium in 1990.
1. Overview of HTML
1.1. Who Invented HTML
HTML was invented in November 1990 by a scientist called Tim Berneses-Lee. The
purpose was to make it easier for scientists at different university to gain access to each
others research documents.
A Web Browser
For example: When you want to begin with writing source code using HTML, you write
the start tag as <HTML> and when you have completely written in the HTML document
and want to end it, you write the end tag as </HTML> i.e. insert a forward slash followed
by HTML in angled brackets.
The characteristics or the features of a tag are defined by an attribute. An attribute is used
inside a tag. An attribute always takes a value to help the browser perform the specific task in
a particular direction. There may be more than one attribute used inside a tag.
An element is a combination of a start tag, the text(we also use text to insert graphics)
and the end tag.
For example:
<body> element begins with start tag, followed by text and ends with end tag.</body>
In simple words, one can equate an element to a block, a tag to an instruction and an
attribute to an extension to a instruction.
Container of Tags: One set of tags may contain another set of tags. This is called nesting
of tags. The second block of tags is always contained in first block as shown below:
<TAG1> <TAG2></TAG2> </TAG1>
<TAG1> and </TAG1> is the first block of tags. <TAG2> and </TAG2> is the second
block of tags.
Introduction to HTML
59
First section
Second section
</HTML>
The basic structure of the HTML document is divided into two sections namely, the head
and the body. The browser enters the first section after executing the start tag of HTML
(telling the browser to begin interpreting the HTML commands) and start tag of HEAD.
The first section helps in changing the heading on the title bar of the HTML document
(the webpage). The starting of the heading is shown after the start tag of TITLE and the
end is shown by </TITLE>. The end tag of HEAD i.e. </HEAD> tells the browser that
the end of first section has come.
The second section begins with the start tag of BODY. The data on the webpage is
displayed through the tags used in this section. The end tag of BODY i.e. </BODY> tells
the browser that no more data is to be inserted on the webpage and the end of the web
document has come. After the completion of this section, the slash HTML or the end tag
of HTML tells the browser to stop looking for HTML commands. This implies that any
tag used after the end tag of HTML will not be interpreted by the browser and so no
action will be performed.
Please Note: All the sentences containing any number of whitespaces written inside a tag
within the body element will appear as written in the HTML code. Any whitespace
inserted outside the tag within the body element will be interpreted as null, void or
amounting to nothing by the browser. That is, such whitespaces outside the tag will not
appear anywhere on the webpage.
give a name and an extension to the file. The extension in this file will be .html or .htm.
(e.g. basic.htm or firstHTMLDocument.html). This will turn the file into a webpage.
In order to modify the webpage, either open the web page and click on Viewsource or
open the webpage with notepad.
<BODY></BODY>
The second section of the webpage begins with the <BODY> tag. This defines the visible
section of the document. It has a number of attributes which controls the overall appearance
of the document. The attributes that are used with this tag are listed below in the table:
Attribute of the <body> tag Description
BGCOLOR
BACKGROUND
TEXT
LINK
ALINK
VLINK
Introduction to HTML
61
C:\Users\HP\Music\Desktop...
Close Tab (Ctrl+W)
02:26
06-03-2013
We can see from the output that the size of the font keeps decreasing as one increases the
number in the heading tag.
62
Description
Sets the text to the name of the font used as its value.
Decides the scale of the text. It can range between -7 and
+7.
Changes the color of the text written inside the container
tag.
The following example will help you understand the use of FONT tag.
<font face=Book Antiqua>This is in Antiqua typeface</font>
<font color=#ff0000>Red</font>
<font color=#00ff00>Green</font>
<font color=#0000ff>Blue</font>
Introduction to HTML
63
C:\Users\HP\Music\Desktop...
Nest
In the above code, the align attribute takes the value center. The output of the above code
is:
C:\Users\HP\Music\Desktop\tables.html
C:\Users\HP\Music\Desktop...
64
With the P tag, we can begin a paragraph. The end of paragraph arises when the
browser sees the forward slash followed by P.
</p>
</font>
</center>
C:\Users\HP\Music\Desktop...
02:45
06-03-2013
Please note: In the above output, the line that separates the font tag with the paragraph
tag has been placed on the webpage using <hr> tag. The <hr> tag is an empty tag, similar
to <br>.
4.1.5. Bold, italics and underline
There are other tag that help in changing the style of the font. They make the text
boldface, italics and underlined. They are shown in the table below:
Tags
<B>, </B>
<I>, </I>
<U>, </U>
Meaning
Bold text
Italic text
Underlined text
For Example
The following code uses tag <I> in combination with header tag <H1>.
<H1><I>Heading Tag H1 is used with the Italics Tag</I></H1> <B><I>Both
the boldface and italics tags are used as nested tags</I></B>
Introduction to HTML
65
C:\Users\HP\Music\Desktop...
02:32
06-03-2013
4.1.6 The following table gives a list of tag used in the chapter, with
their example and the output:
S. No. Start tag
1
<h3>
<font
</font>
face=Arial>
66
Output
Use H1 or H2 or H3
etc. for headings It
automatically adds a
paragraph break after
the heading.
You can change the
actual font used to
some extent within
your text. In this
instance, the browser
will attempt to use
Verdana if the
computer has it;
if not, Arial; if
not, Helvetica; if
not, a generic sansserif font; if not,
it will ignore the
instruction.
6
7
8
<center>
<b>
<i>
Output
Increases font size
by the amount of the
number. You can also
use negative numbers.
You can change the
font color within
your text.
Right aligned
paragraph.
You can use the p
tag as a container to
align text to the right
Centers the text
This is for bold text
This is for italic text
Summary
1. The World Wide Web Consortium has given a set of standards while building the HTML
language.
2. The basic structure of the HTML document is divided into two sections namely, the head
and the body.
3. A container tag has both the start and the end tag.
4. HR is another empty tag. This tag is used to insert a horizontal rule on the web page.
5. Heading tag is used to display the heading or the main topic on the web page. This tag
varies from H1 to H6.
6. A paragraph can be written on the web document using the <p> tag. There
7. Bold, Italic and Underline are those tags that help in changing the style of the font.
Introduction to HTML
67
68
E. Answer the following questions:Q.1. What is font tag? Name the various attributes of font tag.
Q.2. Difference between <br> and <hr> tag.
Q.3. Differentiate between LINK, ALINK and VLINK.
Q.4. Explain heading tag with the help of a suitable example.
Q.5. Difference between container tag and empty tag.
Q.6. Write down the basic structure of HTML document.
Q.7. How do you create a comment tag?
Q.8. Name and explain any 2 attributes of body tag.
Q.9. Name the tools required to create a html document.
Q.10. Write a short note on HTML.
F. Lab Session
Create a HTML document to print your name 5 times in 5 different fonts.
Write a HTML document to display the name of school in bold and italic both.
Create a HTML document containing three paragraphs with different alignments.
Create HTML document containing different heading tags.
Introduction to HTML
69
Chapter 5
HTML II
Learning Objectives
By the end of this chapter, learner will be able to:
Differentiate the different types of lists created in HMTL.
Display the data using Lists tag available in HTML.
Link web pages using <A> tag.
Insert audio & Video in a web page to make it more interactive.
Insert images in a web page.
State the purpose of Inline & external images.
Use images and Email addresses as hyperlinks.
Introduction
As we have already discussed in previous chapter about HTML. Hypertext Markup
Language is used by web browsers that represents the data. In this chapter, we will cover
advance formatting tags of HTML such as Lists, inserting images, videos, music and
creating links between two or more webpages.
1. HTML Lists
Lists provide the information in a structured and easy to read format. The data
item on the webpage can catalogued or indexed. The index that is formed using
numbers like 1,2,3,or symbols like , b, is called a List in HTML. These lists
help in formatting the data and put them in a particular order. There are three
types of lists that you can use in HTML. They are:
UL - creates an unordered or bulleted list
OL - creates an ordered or numbered list
DL - creates a definition or glossary list
The first two are very similar in structure, while definition lists have a unique setup. To
create either kind, first specify the start of a list and then identify each line item in the list
1.1 Unordered List <ul> .</ul>
It classifies the data items that have equal importance i.e. none of the data items are ranked.
They are identified by a symbol. It may be a square, a circle or a disc. The
70
attribute TYPE helps in using the symbols to create a list. This attribute takes the value as
the name of the symbol.
<ul type=square>
<ul type=disc>
<ul type=circle>
This is a container tag. It has both the opening and the closing tag. However the closing
tag is optional. The listing is created under it using the <li> tag. Again <li> tag is a
container tag. The data item to be listed is input between the opening <li> and the closing
</li> tag as shown in the following example:
For Example1:
<body>
<ul>
<li>apples </li>
<li>oranges</li>
<li>guava </li>
</ul>
</body>
In the above code the data item comprises of the fruits that have equal importance to the
user. They are listed using unordered list. When you do not use the attribute named type,
the default symbol is used i.e. disc. The output of the above code is:
C:\Users\HP\Music\Desktop\tables.html
C:Users\HP\Music\Desktop...
apples
oranges
guava
17:53
06-03-2013
HTML II
71
If you want to change the symbol to circle, use the following code:
For Example2:
<body>
<ul type =circle>
<li>apples </li>
<li>oranges</li>
<li>guava </li>
</ul>
</body>
apples
oranges
guava
Description
Changes the symbol used with the list. It takes the value as the
symbol itself i.e. it can be a or A or I or i or 1.
Begins the list with value specified. It takes the value of the
symbol from where to begin the list
For example 3:
<body>
<ol>
<li>Get up in the morning</li>
<li>Brush your teeth</li>
<li>Take the bath</li>
<li>Eat the breakfast</li> <li>Get
ready to go to school</li> </ol>
</body>
72
The above code produces the following output. Notice that the symbol used to create
the list is number. Thus number becomes the default symbol.
C:\Users\HP\Music\Desktop\tables.html
1.
2.
3.
4.
5.
The start attribute allows you to further customize an ordered list by setting a new
starting digit for the ordered list element as can be seen in the following example:
For example 4:
<body>
<ol start=4 >
<li>Get up in the morning</li>
<li>Brush your teeth</li>
<li>Take the bath</li>
<li>Eat the breakfast</li> <li>Get
ready to go to school</li> </ol>
</body>
The above code produces the following output. Notice that the list begins from number
4 and the sequence is maintained after it.
C:\Users\HP\Music\Desktop\tables.html
4.
5.
6.
7.
8.
The type attribute changes the symbol as shown in the following example.
HTML II
73
For example 5:
<body>
<ol type = a>
<li>Get up in the morning</li>
<li>Brush your teeth</li>
<li>Take the bath</li>
<li>Eat the breakfast</li> <li>Get
ready to go to school</li> </ol>
</body>
The output of the above code is given below. Notice that the symbol has changed
from default number to the alphabet.
C:\Users\HP\Music\Desktop\tables.html
a.
b.
c.
d.
e.
Clairvoyance
French work for ability to see events in the future.
Esprit de corps
French work for feeling fo pride and loyalty.
74
For example 6:
<dl>
<dt>clairvoyance</dt>
<dd>French word for ability to see events in the
future.</dd> <dt><b>Esprit de corps</b></dt>
<dd>French word for feeling of pride and
loyalty.</dd> </dt>
</dl>
The above code produces the following output. The opening <dl> tag starts the definition
list. The container <dt> tag opens the definition terms like Clairvoyance and Esprit de
corps. While the first word is in regular font, the second word is in boldface because
another container tag <b> is nested inside <dt> tag. The meaning of the definition term is
provided by <dd> definition description. Notice that the container tag <dd> presents the
definition description below definition term slightly right tabbed as shown in the output
window.
2. Image
2.1 Meaning of Image
An image add a flair to a webpage. The image in a web page is a drawing painted through
paintbrush or a photograph taken through a digital camera or a clipart. There are 2 types
of types of images. They are i) inline image ii) external image. The inline image is shown
when the webpage is opened in the browser. On the other hand, the external image is
shown only when demanded by the user by clicking on a link.
HTML II
75
2.2.1 SRC
The address or the path to the image is taken as value by SRC attribute. Let us discuss the
cases of different addresses that can be accepted by SRC attribute.
Case1
If you have saved Flower.jpg in Documents folder, then the address would be:
C:\My documents\My Pictures\Flower.jpg
Case2
If you have saved Flower.jpg in the same folder as the HTML document, then the
address would be: Flower.jpg
Case3
If Flower.jpg is not in your computer but is saved in folder images of the Web
server of yahoo, then the address would be:
http://www.yahoo.com/images/flower.jpg
2.2.2 Width and Height
The width and the height attribute defines the boundaries of image. The value can be an
absolute number (recognized as pixels) or in percentage (in proportion to the size of web
window).
For example7:
An image of height 150 pixels and width 200 pixels is inserted on webpage as:
<img src=flower.jpg width=200 height=150>
The output of the above code is as under. It displays an image of two white flowers on
the web page.
Note
The image is made of pixels. When you
increase the size of the image, the resolution of
the image gets decreased. This makes the image
less clearer to view. The width and height arent
strictly necessary but help to speed the display
of your Web page.
76
2.2.3 ALT
When the image does not get download (due to heavy traffic or unsupportive browser),
the user may expect a description of the image. The alt attribute is used for such
purposes as shown here:
For example 8:
<img src=flower.jpg width=200 height=150 alt=Two White Roses>
2.2.4. Longdesc
If the description is too long, you can even attach an html file, in another attribute called
longdesc. This attribute is complementary to alt attribute as shown:
For example 9:
<img src=flower.jpg width=200 height=150 alt=White Roses longdesc=abc.html>
2.2.5 Align
You can use the align attribute to place the image on left or right side of the webpage.
If the align attribute is set to left, the image floats to the left margin. If it is set to right,
the image floats to the right margin.
For example 10:
<p>
<img src=flower.jpg alt=White Roses width=32 height=21 align=left> The image
will be flowed to the left side of the webpage and this text will therefore be placed on right
side. </p>
In the above code the paragraph tag <p> helps in forming the paragraph to be displayed
along with the image on the webpage. Alt attributes describes the image when the
image cannot be displayed by the browser. Height and width attribute decides the
area of the image on the web page and the align attribute defines the position of the
image on the web page. Since the image is set to the left side, the text flows towards the
right side as seen in the output below:
The Image will be flowed to the ldft side of the webpage and this text will
therefore be places on right side.
HTML II
77
Note
The external image can be
inserted on the webpage using
an anchor tag which may be
learnt from the later section of
the chapter.
3. When you want to see the larger size of the inline image.
The above code displays an audio player (of the dimensions as specified in the code) on
one corner of the web page as shown in the output. The songs begin to play, the moment
the webpage gets opened. However, the user can stop or pause the song whenever he so
desires. If you want to place the audio player in the center, you can use the center element
since it does not have another attribute to place it in center of the window.
C:\Users\HP\Music\Desktop\audio.html
File
78
C:\Users\HP\Music\Desktop\audio.html
File
C:\Users\HP\Music\Desktop...
Play
HTML II
79
C:\Users\HP\Music\Desktop...
Play
Use the following code to insert the video movie in the webpage, you can use the
preload attribute with embed tag as shown below:
80
C:\Users\HP\Music\Desktop...
Play
3. LINKING
You can add more than one page in your website. These additional pages are linked to the
home page via a text or a picture. This linking is done using an anchor element in HTML.
HTML II
81
The attributes of anchor tag are href, name and target. Let us discuss them:
1. HREF: The meaning of href is hypertext reference. This attribute is mandatory in anchor
tag. The href attribute takes the value as the address of the supporting document. Both the
relative and the absolute links can act as values to the href attribute.
To link to a page on another Web site you need to give the full web address. Such type of
link is absolute as it specifies both the protocol name i.e. http and the hostname i.e.
www.w3.org.
The relative link can only link to a page from the same site. If you were linking to a page
in the same folder, the href would be just page1.html as shown below:.
<a href=page1.html>
2. TARGET: The target attribute helps in opening a web page. The value _blank
opens the webpage in a new browser window. The value _top opens the linked
webpage in the currently active browser window.
For example 14
If you want to open the webpage in a new window, following code is to be used.
<a href=http://www.google.com target=_blank>Search Engine</a>
If you want to open the linked webpage in the same browser window as the current
one, following code is to be used:
<html>
<body>
<p>Open the webpage in a the current window</p>
<a href=http:// www.google.com / target=_top> Want to Google! </a>
</body>
</html>
82
The above code will open the webpage of google on clicking the link Want to Google
in the same browser window as the existing window. It will not open a new window to
load the webpage of google.com
3. NAME: NAME attribute gives a name to the anchor tag. This attribute takes the value as
text string. This helps in linking to a specific section within the webpage that has been
named.
can
another anchor
If the link is to a named anchor in the same webpage then you dont need the file name of
the webpage, just the hash mark and the name of the anchor.
For example 17:
To link to the salessection in our existing webpage, the following code is to be used:
<A href=#salessection>Sales</A>
Please Note:
The named anchor itself doesnt have a hash mark
A link to the named anchor always has a hash mark.
<A name=salessection>
<A href=#salessection>
HTML II
83
When the user would click on the link E-mail to myself!, the mailbox of gmail will get
opened with the address myself@gmail.com after the field To .
The attribute src in <img> tag takes the value of the address to the image whereas, href
attribute takes the value of the address of the HTML document that will be loaded when
you click on the image.
For example 19:
You want to open the website of Facebook when somebody click on the image that is
called Facebook.jpg, then the code would be:
<a href= https://www.facebook.com/>
<img src= facebook.jpg>
</a>
In the above code, the link attribute in the <body> tag is a standard link. It is a text link
that has not been clicked by the user, yet. It appears in its standard color i.e. blue whose
hexadecimal code is 0000FF.
The vlink attribute in the <body> tag is a visited link. It is a text link that has been
clicked by user at least once. The standard colour of this link is purple whose
hexadecimal code is 800080.
84
The alink attribute in the <body> tag is an active link. It is a text link that may change its
colour when the user brings the mouse over it. The standard colour of this link is red
whose hexadecimal code is FF0000.
For example 20:
If you want to set the colour of the link to red, alink to green and vlink to pink as against
their standard colours, use the following code:
<BODY link=red alink=green vlink=pink>
Note
The hexadecimal code of
the colour can be seen
from the website: http://
html-color-codes.info/
Summary
Lists provide the information in a structured and easy to read format. There are three types
of lists : OL,UL & DL.
UL tag classifies the data items that have equal importance i.e. none of the data items are
ranked. They are identified by a symbol. It may be a square, a circle or a disc.
OL tag classifies the data items that do not have equal importance. The data items in a list
are represented using numbers, the roman letter or alphabets. The default symbol is number.
Definition lists (<dl>) are the list elements that have an array of tags. The other tags used
with this are <dt> to define the definition term and the <dd> for the definition of the list
item.
The image in a web page is a drawing painted through paintbrush or a photograph taken
through a digital camera or a clipart. There are 2 types of types of images: i) inline image
ii) external image.
The <embed> tag defines a container for external (non-HTML) content. They are sound
effects, the video clips and moving pictures.
An <a> (anchor) tag is used to create a hyperlink in a webpage. An anchor element consists
of three parts : (1) href (mandatory), target (optional), name (optional), (2) the text or the
image to be hyperlinked and (3) the end tag </a>.
An e-mail link can be created in a web page using mailto: attribute.
HTML II
85
5. To wrap the text to the next line, the tag used for
(a) <BR>
(b) <P>
(c) <I>
(d) <LI>
E. Lab Session
1. Shivank wants to make a list of vegetables in a web page. He has typed all vegetables
name without any formatting. Suggest the type of list for his web page?
2. Write an HTML document to print name of your friends in an unordered format.
3. Create an unordered list of your hobbies.
4. Nehas parents wants to create a web page as an invitation for his Graduation Party and
send this to all his friends. Can you help them in designing this invitation using the details
given below:
(a) Title as Party.
(b) Web page color as Yellow
(c) Pic1.jpg as an image in the center of the page.
(d) lets Rock as the heading below the image in red color
(e) With 2 lines break place the text of size 12 and color BLUE
HTML II
87
5. Create a website for Travel & Tourism company, which should include 3-4 webpages.
6. Create a homepage for your school website that includes the following:
(a) Title
(b) Image of school building
(c) List of school activities
(d) Video of School infrastructure
(e) Photo gallery
Suppose we want to create the following website showing the various features of city Delhi,
then we need a homepage (first page that gets loaded) and the additional pages that are linked
to the homepage. The following figure shows the homepage prepared by the basic tags studies
in the syllabus. This homepage is called webpage.html.
C:\Users\HP\Music\Desktop\HTML Project-1\webpage.html
My City Delhi
This is my homepage. This page describes about the Delhi City.
Delhi is the capital of India, the country with many traditions and diversifications in cloth
habits and culture, yet it is united and still rising higher in terms of name and technol
While Connaught place and India Gate are place in center of Delhi,
Lotus Temple, shows the way to Southern part of Delhi also called New Delhi,
The Red Fort shows the way to the Northern part of Delhi. called the Old Delhi.
All the images except the first image (map of Delhi) are hyperlinks. That is, when the user places
the cursor above the image, the image will display its name. On clicking the first image of
Connaught place the file, Connaught.html gets loaded in a different window.Similarly, Lotus.
html gets opened when the user clicks on image of lotus temple, redfort.html is loaded when
the image redfort.jpg is clicked and Indiagate.html gets loaded in a different window when user
clicks of Indiagate.jpg.
In order to prepare individual HTML files, insert the image using IMG tag and then type the text
for each in paragraph tag. The individual HTML files are given below. While Connaught. html is:
88
C:\Users\HP\Music\Desktop\HTML Project-1\CONNAUGHT.HTML
CONNAUGHT PLACE
Connaught Place, also
called as CP, is located
at the heart of New Delhi.
It was built in the same
year as India gate i.e.
1931. It depicts the style
of British architecture
which was very planned
and well structured.
In the memory of late
Prime Minister, Mr.
Rajiv Gandhi, the Delhi
government renamed it
Rajiv Chowk.
Connaught place happens
to be the commercial hub
of Delhi. People living in
Delhi and outside Delhi
love to come to CP for
shopping and
entertainment. Be it
RED FORT
The Red fort also know as Lal Qila is a 17th century fort constructed by the Mughal
emperor, Shah Jahan city of Delhi, India that served as the residence of the Mughal
emperor, Shah Jahan city of Delhi, India that served as the residence ofthe Mughal
Emperors. The fort was the place for Mughal emperor Shah Jahans new capital,
Shahajahanabad, the seventh city in the Delhi site. He moved his capital here from Agra in
a move designed to bring prestige to his reign.
It served as the capital of the Mughals until 1857, when Mughal emperor Bahadur Shah Zafar was exiled by the British
Indian government.
The Red Fort derives its name from the extensive use of red sandstone on the massive walls that surround the fort.
Every year on 15 August, the Independence day of India from the British Prime Minister hoists the national flag at the Red
Fort, followed by a nationally broadcast speech.
The Red Fort is one of the most popular tourist destinations in Old Delhi, attracting thousands of visitors every year. Today a
sound and light show describing Mughal history is a tourist attraction in the evenings.
It also happens to be the largest monument in Old Delhi.
22:38 1303-2013
LOTUS TEMPLE
Lotus Temple, is located in New Delhi, India. It is a Bahai House of Worship completed in
1986. It is noted for its flowerlike shape.
It is one of the attractions in the city. The Lotus Temple has won numerous architectural awards. Inspired by the lotus
flower, the design for the House of Worship in New Delhi is composed of 27 free-
standing marble clad petals arranged in clusters of three to form nine sides. The nine doors of the
Lotus Temple open onto a cental hall.
It is capable of holding up to 2.500 people.
22:39 1303-2013
HTML II
89
INDIA GATE
The India Gate is the national monument of India. Situated in the heart of New Delhi, it
was designed by Sir Edwin Lutyens.
It was built in 1931. It was originally known as the All India War Memorial, it is a prominent
landmark in Delhi and commemorates of 90.000 soldiers of the Britihs Indian Army who lost
their lives in World War I and the Third Anglo-Afghan War.
It is composed of red and pale sandstone and granite. Today, India Gate is the site of the
Indian Armys Tomb of the Unknown Soldier, known as Amar Jawan Jyoti. the meaning of
Amar Jawan Jyoti is the flame of the immortal soldier
The India Gate is the famous picnic spot for families living in Delhi.
Children enjoy playing and swimming in the Childrens park which is
just a few footsteps from the India Gate. you can see many families
enjoying in the grounds around the India Gate.
This project consists of a homepage and 4 linked pages, for sake of simplicity. The homepage
has most of the images, the hyperlinks and the bulletted list, the use of empty tags like <br>
and <hr>.
The additional pages may not contain the mixture of many tags if the project is small (as in the
present case). For your convenience the the code of individual HTML documents are also
provided:
Connaught.html
<html>
<head>
<title>About
Connaught
Place</title>
</head>
<body Text=darkblue>
<h1
align=center> CONNAUGHT PLACE </h1>
<font face=arial>
<img src=connaughtnight.jpg
align=left>
<p><b>Connaught Place</b>, also called as <b>CP</b>, is located at
heart of New Delhi.
It was built in the same year as India gate i.e. <b>1931</b>.
It depicts the style of British architecture which was very
planned and
well structured.
<p>In the
memory of late Prime
Minister, Mr. Rajiv Gandhi,
the Delhi Government renamed it <b>Rajiv Chowk</b>. </p>
<p>
90
the
Lotus.html
<html>
<head>
<title>Lotus Temple</title>
</head>
<body bgcolor=lightblue>
<h1 align=center> LOTUS TEMPLE </h1>
<font face=arial>
<img src=lotus.jpg align=left>
<p><b>Lotus Temple</b>,
is located in New Delhi, India.
It is a Bahi House of Worship completed in 1986. It is noted for its
flowerlike shape.
<p>It is one of the
attractions in the city.
The Lotus Temple has won numerous architectural awards.
<p>
Inspired by the lotus flower, the design for the House of Worship in New
Delhi is composed of 27 free-standing marble clad petals arranged in
clusters of three to form nine sides.
The nine doors of the
Lotus Temple open onto a central hall.
<img src=ariallotus.jpg align=right alt=Arial view of Lotus Temple>
<p>It is capable of holding up to 2,500 people.
</body>
</html>
HTML II
91
Redfort.html
<html>
<head>
<title>
Red Fort</title>
</head>
<body bgcolor=pink text=Brown>
<img src=redfort.jpg align=left>
<h1 align=center> RED FORT </h1>
<font face=arial size=4>
<p>The Red Fort also known as LalQila is a 17th century
fort constructed by the Mughal emperor, Shah Jahan
city of Delhi, India
that served as the residence of the Mughal Emperors.
The fort was the palace for Mughal Emperor Shah Jahans
new
capital,
92
Indiagate.html
<html>
<head>
<title>
India Gate
</title>
</head>
<body>
<img src=indiagate.jpg align=right>
<h1 align=center> INDIA GATE</h1>
<font face=Comic Sans MS color=DarkBlue>
<p>The India Gate is the national monument of India.
Situated in the heart of New Delhi,
it was designed by Sir Edwin Lutyens.
<p>It was built in 1931.
It was originally known as the All India War Memorial,
it is a prominent landmark in Delhi and commemorates the 90,000 soldiers
of the British
Indian Army who lost their lives in World War I
and the Third Anglo-Afghan War.
<p>It is composed of red and pale sandstone and granite.
Today, India Gate is the
site of the Indian Armys Tomb
of the Unknown Soldier, known as Amar JawanJyoti.
The meaning of Amar JawanJyoti is the flame of the immortal soldier.
<hr>
<img src=indiagateatnight.jpg width=40%
height=50% align=left>
<p>The India Gate is the famous picnic spot for families living in
Delhi.
Children enjoy playing and swinging in the <a href=chidrenpark.html
target=_blank>Childrens park
</a>which is just a few footsteps from the India Gate.
You can see many families enjoying in the grounds
around the India
Gate.
</body>
</html>
HTML II
93
94
<ul>
<li>Akshardham Temple</li>
<li>Lotus Temple</li>
<li>Iskon Temple </li>
<li>Birla Mandir</li>
<li>Rajghat</li>
<li>India Gate</li>
<li>RastrapatiBhawan</li>
Notice in the homepage, there is use of unordered list. This is to show the various features
of Delhi.
C:\Users\HP\Music\Desktop\HTML Project-1\wepage.html
File Edit View Favorites Tools Help
Monuments in Delhi
Akshardham Temple
Lotus Temple
Iskon Tempe
Birla Mandir
Rajghat
India Gate
Rastrapati Bhawan
Infrastructure in Delhi
Delhi Metro Rail
Airport
Hotels
Museums in Delhi
International Dolls Museum
National Museum
National Railway Museum
HTML II
95
Chapter 6
Introduction
With the wide spread use of internet, networks and computers have
become increasingly susceptible to threats. These threats destroy data
as well the programs that computers use. The objective of these threats
is to destroy the data and to steal the vital information stored in
computers. This information is used by the attackers for their benefit.
We occasionally hear about the data theft from credit card
companies or banks, which lead to major financial losses. Also sometimes individual
users are fooled in to giving their personal and sensitive information such as passwords or
bank data leading to financial loss. This chapter shows various threats that computers and
networks face.
1. Viruses
A computer virus is a program usually hidden within another simple program. It produces
copies of itself and inserts them into other programs or files, in turn destroying the data
and performing other malicious actions. Computer viruses are never naturally occurring;
they are always man-made. Once created and released, however, their spread does not
96
remain directly under our control. While developing the viruses, programmers have
specific target in mind such as data theft or destruction of software, which runs the
computers. The virus can be transferred hidden in files, programs or even in disks. The
viruses can be of different kind but a common virus is macro virus, which is discussed in
detail here.
Macro viruses can corrupt data, create new files, move text, flash colors, insert pictures,
send files across the Internet, and format hard drives. Macro viruses are increasingly used
as transport mechanisms to drop off even nastier bugs. Macro viruses modify registries,
forward copies of it through emails, look for passwords, copy documents, and infect other
programs. Macro viruses can do a lot of different damage in a lot of different ways.
Example of macro Virus is Wazzo, W97M etc.
2. Worms
Worms are very similar to viruses in the manner that they are computer programs that
replicate copies of themselves (usually to other computer systems via network
connections). Viruses often, but not always, contain some functionality that will interfere
with the normal use of a computer or a program. Unlike viruses, however, worms exist as
separate entities; they do not attach themselves to other files or programs. Because of
their similarity to viruses, worms are also often referred to as viruses. Some examples of
the worst Worms that impacted the web are as follows:
1. Jerusalem is one of the earliest worms that spread in 1987. It is also one of the most
commonly known viruses. It used to delete files that were executed on each Friday
the 13th. It was first detected in the city of Jerusalem.
Security Threats and Safety Measures
97
3. Trojan horses
A Trojan horse is a program that claims to rid your computer of viruses but instead
introduces viruses into the system. Since they look like sincere programs they are referred
as Trojan like the Trojan horse of Greek mythology. The Trojan program does not attach
itself to the files like a virus nor replicate itself like a worm but it does provide
unauthorized access to users computer.
They are mostly spread through internet downloads and online gaming programs. They
mostly affect the targeted computers. The trojan program prompts you to do the normal
functions such as inputting your email address or profile name. You do so, not knowing
that, you have provided access to the malicious software. This software is capable of
taking over the functionality of your computer. An infected computer will begin to
operate slowly and will exhibit pop-ups from time to time. Eventually the computer will
cease to operate, or crash.
The best way to avoid the Trojans is to adopt safe download practices. If you are not sure of
the website safety, then it is probably best not to download any program from that source.
An example of the Trojan horse was I love you which infected several computers in
USA and Asia, completely damaging the data of millions of computers
4. Spyware
A Spyware as the name suggest is a program used to spy on the computer system. This
program will try to get all the confidential and sensitive information such as your bank
98
account numbers, passwords etc. Then this confidential data is misused to access users
accounts. Spyware can also change the configuration of your computer, generally without
obtaining your consent first.
There are a number of ways Spyware or other unwanted software can get on to computer.
A common trick is to covertly install the software during the installation of other software
that is being downloaded such as music or video or a file-sharing program.
Once installed, the Spyware monitors user activity on the Internet and transmits that
information in the background to someone else. Spyware can also gather information
about e-mail addresses and even passwords and credit card numbers.
SpyWare sends information back to the spy wares home base via the users Internet
connection, thus it eats users internet bandwidth. SpyWare applications running in the
background can lead to system crashes or general system instability as they use memory
and system resources of the users computer.
SpyWare have the ability to monitor keystrokes, scan files on the hard drive, snoop other
applications, such as chat programs or word processors. It also installs other SpyWare
programs, read cookies, change the default home page on the Web browser. While doing
so, it consistently relays this information back to the SpyWare author who will either sell
the information to another party or use it for advertising/marketing purposes.
Some of the common Spywares are CoolWebSearch, Internet optimizer and Zango
5. Malware
Malware is short for malicious software. Malware is any kind of unwanted software
that is installed without your adequate consent. The intent of the malware is to damage
the data or functionality of the computer or network. In fact all the threats mentioned
above such as virus, Trojans etc are examples of Malware.
6. Spams
The term spam refers to unsolicited commercial email (UCE) or unsolicited bulk email
(UBE). It is flooding the Internet with many copies of the same message, in an attempt to
force the message on people who would not otherwise choose to receive it. It is also
referred as junk email. Unsolicited email mostly contains advertisements for services or
products. However most of the spams are from marketers or user who are trying to
deceive the users. The most commonly seen spam includes the following:
Security Threats and Safety Measures
99
Spam emails is not only unwanted, it clogs your email accounts and uses unnecessary
server space. This creates burden on servers in the businesses. Since Internet is a public
platform, it is never possible to completely stop the Spam email. However precaution can
be taken while looking at an unknown email addresses. Most of the email hosts can
identify such users and help filter them.
Spam costs the sender very little to send -- most of the costs are paid for by the recipient
or the carriers rather than by the sender. It is because of these additional costs that most
of the hosts are very keen that users use spam filters as well as report spams so they can
be stopped.
themselves to rob you directly. Originally hackers were the gifted programmers who gain
access to the systems or network to show case the security loopholes to the
administrators. Later the term cracker was coined for such activist who had intentions of
doing malicious activities. Crackers have an end goal of destroying data and network for
personal monetary gains.
computer. This guarantees that once the data on your computer gets corrupted due to a
threat, you can reload the data again on your computer once it has been rectified. These
days you have external hard drives which can back up data. Also most of the smart
devices are also used to back up the data.
Before we discuss in detail how to use the security tools, here are some of the guiding
principles to use the computers securely.
1. Using Security software such as Norton antivirus, Symantec etc.
2. Never share passwords
3. Beware of email attachments form unknown sources
4. Do not randomly download material from websites which has not been checked for
security
5. Never propagate hoax or chain emails
6. Always logout your laptop or computer
7. Restrict remote access
8. Frequently back up important data and files
9. Use encryption or sites that use encrypted data
There are several security tools available which help us protect against all sorts of threats
mentioned above. In brief, the tools are available for antispam, antivirus, firewalls,
encryption tools, password managers and cleanup tools.
101
They ended up having to get their phone lines cut off and regretted that they had revealed
their contact details in the first place. The brothers are still in business in Pakistan as internet
service providers in their company called Brain Limited.
Introduces or causes to be introduced any viruses or contaminant in that case, suit filed under
Chapter IX of IT Act i.e. Section 43 as a Civil Wrongs under IT Act
Worms
Case 1: The 1988 Internet Worm was the first major worldwide computer security incident
where malware (software that is malicious) propagated throughout the internet. This worm
infected Unix servers, taking advantage of different types of vulnerability in installed code
such as Sendmail and finger. The lessons from that incident are still valid and, surprisingly
perhaps, the vulnerabilities identified that allowed the worm to cause such problems are still
present in some modern software.
The perpetrator of the 1988 Internet worm (Robert Morris, a graduate student at Cornell
University) meant no harm but was experimenting with what was possible. He is now a
respected computer science researcher. Security authorities no longer accept such an excuse
so you should not attempt any such security experiments.
Case 2: Probably the worlds most famous worm was the Internet worm let loose on the
Internet by Robert Morris sometime in 1988. The Internet was, then, still in its developing
years and this worm, which affected thousands of computers, almost brought its
development to a complete halt. It took a team of experts almost three days to get rid of the
worm and in the meantime many of the computers had to be disconnected from the network.
102
Trojan horses
Case 1: Hacker sentenced to 21 months jail in TKBot Trojan horse case, Sophos reports
An American hacker has been sent to jail after using a Trojan horse to break into innocent
internet users computers.
Raymond Paul Steigerwalt, from Indiana, has been sentenced to 21 months in jail for his
involvement in an international hacking gang which broke into computers around the world,
including PCs at the United States Department of Defense, with a Trojan horse.
Steigerwalt, 21, was a member of the international Thr34t-Krew hacking gang which
launched a Trojan horse designed to break into internet-connected computers.
TheTroj/TKBot-A Trojan horse (also known as the TKWorm) exploited a vulnerability that is
found on some Microsoft IIS web servers.
At least two computers belonging to the Department of Defense were infected and damaged
by the malicious code. Between October 2002 and 7 March 2003, Steigerwalt and other
members of the Thr34t-Krew gang were able to remotely control infected computers without
the knowledge of the computers owners.
Steigerwalt, who pleaded guilty to the charges, has been ordered to pay $12,000 to the
Department of Defense for damage caused by the Trojan horse
Case 2: A young lady reporter was working on an article about online relationships. The article
focused on how people can easily find friendship and even love on the Internet. During the
course of her research she made a lot of online friends. One of these friends managed to
infect her computer with a Trojan.
This young lady stayed in a small one bedroom apartment and her computer was located in
one corner of her bedroom. Unknown to her, the Trojan would activate her web camera and
microphone even when the Internet was switched off. An year later she realized that
hundreds of her pictures were posted on pornographic sites around the world!
Spyware
Loverspy Spyware Creator Now Most Wanted Internet Criminal on FBIs List
Carlos Enrique Perez-Melara, an ex-student of certain San Diego-situated college, was lately listed on Federal
Bureau of Investigations (FBI) list of Internet criminals, who were most wanted, because he had created
Loverspy one notorious spyware also called Email PI, published theverge.com dated November 7, 2013.
Perez-Melara, aged 33, had developed the malware valuing $89 such that it would catch a person who acted
deceitfully while pretending to love. It dispatched one e-greeting card to the suspected deceiver which if viewed
would plant one especially harmful Trojan capable of seizing e-mail ids, keystrokes, IM (instant messages) as well
as movie from the victims web-based camera. Following the Trojans planting, the contaminated PC fully came
under the control of the hacker.
103
Spams
Sanford Wallace, 43, also known as Spamford Wallace and David Frederix, was arrested in
Las Vegas on Thursday. Wallace is accused of hacking into 500,000 accounts to harvest friend
lists between November 2008 and March 2009. He allegedly used the compromised lists to
make more than 27 million unsolicited postings on Facebook walls that appeared to come
from friends.
If targets clicked on links within the messages, they were presented with a website designed
to fool them into handing over their full name, email address and password, prosecutors said.
Finally they would be redirected to affiliate websites that would allegedly pay Wallace
substantial revenue for traffic.
The scheme relied on vulnerabilities that Wallace discovered in Facebooks spam filters,
according to the indictment.
To accomplish his scheme, Wallace first tested his spamming capabilities between two
Facebook accounts, it said.
*He+ used a fake Facebook account of David Frederix and his legitimate Sanford
Masterwb Wallace account to test variations of spam messages in order to evade Facebooks
filtering mechanisms.
Once Wallace evaded Facebooks spam filters he employed an automatic scripting process to
sign into a compromised Facebook users account, retrieve a list of all the users friends, and
then post a spam message to each of the users friends Facebook walls.
Wallace is now indicted on a total of 11 charges of fraud, intentional damage to a protected
computer, and criminal contempt.
The contempt charges relate to an earlier civil case brought against Wallace by Facebook
itself.
A federal judge awarded the dominant social network $711m in damages in October 2009. The
firm did not expect Wallace to pay, but the judge also ordered him not to log in to Facebook.
According to Thursdays indictment he wilfully and knowingly breached that order.
Wallace, who first gained notoriety as a spammer in the 1990s and also lost a civil case
brought against him by MySpace in 2008, was released on $100,000 bail. He faces up to three
years in jail and a $250,000 fine for each of the six fraud charges and up to 10 years in jail for
each of the three charges of intentional damage to a protected computer.
Facebook welcomed the arrest.
We applaud the efforts of the US Attorneys Office and the FBI to bring spammers to justice,
Two years ago, Facebook sued Wallace and a federal court ordered him to pay a $711 million
judgment for sending unwanted messages and wall posts to people on Facebook. Now
Wallace also faces serious jail time for this illegal conduct.
104
As part of an international law enforcement operation, the CBI has registered two cases
against suspected operators of hacking websites. Similar operations are being conducted in
Romania, China and the US. It is suspected that the number of email accounts hacked may be
much larger once the data is collected and the accused are interrogated, a CBI officer said.
The hackers clientele included jilted lovers and corporate entities. After registering the
cases, the CBI carried out searches in two locations in Mumbai and one each in Pune and
Ghaziabad for violations of various sections of the IT Act and section 379 of the IPC.
Sections applicable in hacking
Hacking is punishable under section 66 read with section 43 of the Information Technology
Act, 2000.
Punishment/Fine
The person can be punished with up to three years imprisonment or fine up to Rs5 lakh or
both.
***Name of hacker Hidden purposefully
105
Summary
A computer virus is a program usually hidden within another simple program.
Macro viruses created with the intention of fooling the user can deceive them in sharing
confidential information.
Worms are very similar to viruses in the manner that they are computer programs that
replicate copies of themselves.
A Trojan horse is a program that claims to rid your computer of viruses but instead
introduces viruses into the system.
A Spyware is a program used to spy on the computer system to get all the confidential and
sensitive information such as your bank account numbers, passwords etc.
Malware is any kind of unwanted software that is installed without your adequate consent.
Spam emails is not only unwanted, it clogs your email accounts and uses unnecessary server
space. It is also referred as junk email.
Hackers were the gifted programmers who gain access to the systems or network to show
case the security loop holes to the administrators.
Cracker was coined for such activist who had intentions of doing malicious activities.
106
(b) Worm
(d) None of the above
107
Q.2. You have very important data on your computer. How will you ensure that this data
remains safe?
Q.3. Differentiate between virus, worms and Trojan horses.
Q.4. How is a hacker different from a cracker?
D. Lab Session
Search the internet for various new viruses and worms that surfaced in last year.
Research various email spams that are sent out these days. How many of these have you
seen which are related to banks? Please visit bank websites and identify if they have
messages about spams.
Make a list of security tools available for your computer by researching on the internet
and t ell what all threats they protect you from.
Make a list of different anti-virus programs available today, along with their pricing and
protection features.
Scan your system to find out different security threats infecting your computer.
Do a survey and find out how many people are comfortable making payments online. If
they are not, find reasons for the same. Also suggest them the ways to make online
payments safe.
108
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.
Projects
109
Introduction
Tom and Jerry is an American series of theatrical animated cartoon films created by William Hanna and Joseph Barbera for
Metro-Goldwyn-Mayer, centering on a never-ending rivalry between a cat (Tom) and a mouse (Jerry) whose chases and
battles often cartoon studio in Hollywood between 1940 and 1957, when the animation unit was closed. the original series is
notable for having won the Academy Award for Animated Short Film seven times, tying it with Walt Disneys silly
Symphonies as the theatrical animated series with the most Oscars. A longtime television staple, Tom and Jerry has a
worldwide audience that consists of children, teenagers and adults, and has also been recognized as one of the most famous
and lingest-lived rivalries in American cinema.
<html>
<head>
<title>:::Tom $
Jerry:::</title> </head>
<body bgcolor=#7aafef alink=green vlink=white link=red> <center><embed
src=audio.mp3 autostart=true height=1 width=1 ></center></ embed>
font face=trebuchet ms size=8 color=black><i>Tom $ Jerry</i></font> <center><font
face=trebuchet ms size=4 color=white><a href=1.htm >Home</a> | Tom | Jerry |
About Us | <a href=3.htm >Video</a> | <a href=2.htm>Contact Us</
a></font></center>
<font face=tr ebuchet ms size=4 color=black><h2>Introduction</h2>
Tom and Jerry is an American series of theatrical animated cartoon films created by William
Hanna and Joseph Barbera for Metro-Goldwyn-Mayer, entering on a never-ending rivalry
between a cat (Tom) and a mouse (Jerry) whose chases and battles often involved comic
violence. Hanna and Barbera ultimately wrote and directed one hundred and fourteen Tom
and Jerry shorts at the MGM cartoon studio in Hollywood between 1940 and 1957,
110
when the animation unit was closed. The original series is notable for having won the
Academy Award for Animated Short Film seven times, tying it with Walt Disneys Silly
Symphonies as the theatrical animated series with the most Oscars. A longtime television
staple, Tom and Jerry has a worldwide audience that consists of children, teenagers and
adults, and has also been recognized as one of the most famous and
longest-lived rivalries in American cinema.
<img src=5.jpg height=180>
<img src=1.jpg height=100 width=100> <img src=2.jpg height=100
width=100> <img src=3.jpg height=100 width=100> <img src=4.jpg
height=100 width=100> <img src=5.jpg height=100 width=100> <img
src=1.jpg height=100 width=100> <img src=2.jpg height=100
width=100> <img src=3.jpgheight=100 width=100> <img src=4.jpg
height=100 width=100> <img src=5.jpg height=100 width=100> <img
src=4.jpg height=100 width=100> <img src=5.jpg height=100 width=100> <hr
= 2><center><font face=trebuchet ms size=2 color=black>Copyrights Tom &
Jerry<br>All Rights Reserved<br>Owned By IP
WORLD</center></font> </body>
</html>
<html>
<head>
<title>:::Tom $
Jerry:::</title> </head>
<body alink=white vlink=white link=white bgcolor=#7aafef>
Projects
111
Contact US
<html>
<head>
<title>:::Tom $
Jerry:::</title> </head>
<body alink=white vlink=white link=white bgcolor=#7aafef>
<img src=1.jpg height=200 ></td><td align=right valign=bottom><font
face=trebuchet ms size=8 color=black><i>Tom $ Jerry</i></font>
<center><font face=trebuchet ms size=4 color=white><a href=1.htm>Home</ a> |
Tom | Jerry | About Us | <a href=3.htm>Video</a> | <a href=2.htm>Contact
Us</a></font></center></td></tr></table><center><br><br><br><br><center><font
face=trebuchet ms size=4 color=#000000><b>Contact Us<br><br>IPWS Paschim
Vihar ©</b></font><br><br>
<center><hr = 2><font face=trebuchet ms size=2 color=black>Copyrights Tom &
Jerry<br>All Rights Reserved </center></font>
112
</body>
</html>
<html>
<body bgcolor=#800000 link=#800000 alink=#000000
vlink=#800000> <img src=main.jpg height=160 width=250>
<font face=Calligraph421 BT color=000000 size=7><b><i>
<img src=9.jpg height=50 width=80> The Legendary Kishor Kumar
<img src=10.jpg height=50 width=80>
<br><br>
<font face=trebuchet ms size=5
color=#ffffff> <h2>Introduction</h2></font>
Projects
113
</font>
<img src=1.jpg height=250
width=350> <br>
<img src=2.jpg height=200 width=350>
<font face=Calligraph421 BT color=#ffffff size=4.5>
After Ashok Kumar became a big star in Hindi films, the Ganguly family used to visit
Bombay regularly. Kishore Kumars first film as an actor was Shikari (1946), in which
Ashok Kumar played the lead role. Music director Khemchand Prakash gave Kishore
Kumar a chance to sing Marne ki duayen kyon mangu for the film Ziddi (1948). After
this, Kishore Kumar got many other assignments, but he was not very serious about a
film career. In 1949, he decided to settle in Mumbai.Kishore Kumar played hero in the
Bombay Talkies film Andolan (1951), directed by Phani Majumdar. Although Kishore
Kumar got some assignments as an actor with help of his brother, he was more interested
in becoming a singer.
</font>
<br><marquee height=135 width=100% bgcolor=#FCAC28 scrollamount=20><img
src=1.jpg height=130 width=130><img src=7.jpg height=130 width=130><img src=2. jpg
height=130 width=130><img src=3.jpg height=130 width=130><img src=4.jpg height=130
width=130><img src=5.jpg height=130 width=130><img src=6.jpg height=130
width=130></marquee><table bgcolor=#ffcf28 width=100%><tr><td align=center>
<center><font face=calibri size=4 color=#fcac28><a href=1.html >Home</a>|<a href=2.
html >Videos</a>|<a href=3.html >Contact Us</a></center></font></td></tr></table>
</body>
</html>
114
<html>
<head>
<title>Kishore
Kumar::Videos</title> </head>
<body bgcolor=#800000 link=#fcac28 alink=white vlink=#fcac28>
<img src=main.jpg height=180 width=250 align= right><font face=Calligraph421 BT
color=#ffffff size=7><b><i><img src=9.jpg height=50 width=80> The Legendary Kishor
Kumar<img src=10.jpg height=50 width=80><b><i></font><br><br><br><br><center>
<embed src=Video1.mp4 height=300 width=350></center><center><embed src=Video2.
mp4 height=300 width=350></center>
<br>
<center>
<font face=calibri size=4 color=#800000><a href=1.html >Home</a>|<a href=2.html
>Videos</a>|<a href=3.html >Contact
Us</a></font></center> <br>
<br>
</body>
</html>
Contact Us
Phone No - 2521350, 2341083
Copyright @ All rights reserved
Owned by ABC WORLD, New Delhi
Copyright@Olidk Mayaal Codiek
kd (reserved by ABC World)
Projects
115
<html>
<head>
<title>::KishorKumar::-Contact
Us</title> </head>
<body bgcolor=#800000 link=white alink=white vlink=white>
<center><font face=bahaus 93 size=6 color=white><b>Contact Us</b></font><font
face=bahaus 93 size=5 color=white><br>Phone No = 25261350, 42341083
<br>Copyright © All rights reserved<br>Owned by ABC WORLD, New Delhi</
center><br><hr size=10 width=100% color=#fcac28><center><font face=trebuchet ms
size=2 color=#ff0000><b>Copyright © Old Singers Collection<br>Owned by ABC
WORLD</b></font></center>
</body>
</html>
3. Create a Website for the food point displaying information about nutritious food
items. The Home page should consist of the information of the food items available
in the food point. 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. Use Gimp software to give various effects to the images to be
included in the website.
Eating Paradise
Home Videos Contact Us
Introduction
Food is any substance consumed to provide nutritional support for the body. It is usually of plant or animal origin, and cont ains
essential nutrients, such as carbohydrates, fats, proteins, vitamins, or minerals. The substance is ingested by an organism and
assimilated by the organisms cells in an effort to produce energy, maintain life, or stimulate growth. Historically, people secured
food through two methods: hunting and gathering, and agriculture. Today, most of the food energy consumed by the world
population is supplied by the food industry.
The term health food si generally is used to describe foods that are cnsidered to be bene cial to health, beyond a normal healthy
diet required for human nutrition. However, the term is not precisely de ned by national regulatory agencies such as the U.S.
Food and Drug Administration. Health food is sometiems used as an umbrella term encompassing natural foods, organic foods,
whole foods, and sometimes dietary supplements. Such products are sold inhealth food stores or in the health/organic sections
of supermakets
CopyrightSG & EV
116
<html>
<head>
<title>::Healthy
Food::</title> </head>
Projects
117
Eating Paradise
Home Videos Contact Us
<html>
<head>
<title>::Healthy Food::Videos</title> </head>
<body bgcolor=#abe764 link=white alink=white vlink=white>
<table width=100%><tr><td align=left valign=bottom><img src=16.jpg height=150
width=400></td><td align=right valign=bottom><font face=Calligraph421 BT size=12
color=#001e16>Eating Paradise</td></font></tr></table><br><table bgcolor=#001e16
height=80 width=100%><tr><td><font face=calibri size=4 color=#001e16><center><a
href=1.html>Home</a>|<a
href=2.html>Videos</a>|<a
href=3.html>Contact
Us</
a></center></font></td></tr></table><br><br><br><br><table
width=100%><tr
align=center><td align=center valign=middle width=100%><center><embed src=food. mp4
height=300
width=350></center></td></tr></table><br><hr
size=10
width=100%
color=#fcac28><center><font face=trebuchet ms size=2 color=#ff0000><b>Copyright
© Health Department<br></b></font></center>
</body>
</html>
118
Eating Paradise
Contact Us
Copyright @ All rights reserved
Owned by ABC Food Co.
Copyright@Health Department
<html>
<head>
<title>::Healthy Food::Contact Us</title> </head>
<body bgcolor=#abe764 link=white alink=white vlink=white>
<img src=16.jpg height=150 width=400 align=right ><font face=Calligraph421 BT
size=12 color=#001e16>Eating Paradise</font>
<br>
<font face=calibri size=4 color=#001e16><center><a href=1.html>Home</a>|<a
href=2. html>Videos</a>|<a href=3.html>Contact Us</a></center></font>
<br><br><br><br><center><font face=bahaus 93 size=6 color=#000000><b>Contact
Us</b></font>c <font face=bahaus 93 size=4 color=black><br>Copyright © All
rights reserved<br>Owned by ABC Food Co.</center><br><hr size=10 width=100%
color=#fcac28><center><font face=trebuchet ms size=2 color=#ff0000><b>Copyright
© Health Department </b></font></center>
</body>
</html>
4. Create a website depicting different festivals of India. The Home page should have
links of all festivals 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. Use Gimp software to give various effects to the images
to be included in the website.
Projects
119
Festivals Of India
Home | ContactUs | Typesof Festivals | Feedback
Photo Gallery
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 (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>
<img src = r.gif height = 50 width = 35% border = 2><font face = trebuchet ms color
= maroon size = 30><p align = right><i><u> Festivals Of India </u></i></font>
<br>
<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>
<hr>
<font face = trebuchet ms size = 3 color = maroon>Photo Gallery </font>
<marquee scrollamount = 8 behavior = scroll loop =
100> <img src = b.jpg height = 100 width = 100>
<img src = c.jpg height = 100 width = 100>
<img src = e.jpg height = 100 width = 100>
<img src = f.jpg height = 100 width = 100>
<img src = g.png height = 100 width = 100>
120
<br><p align=center><img src = a.jpg height = 250 width = 250 border = 3>
Projects
121
<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>
<br>
</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
<html><head><title></title></head>
<body link = blue vlink = purple alink = blue>
<img src = u.jpg height = 100 width = 35% border = 2>
</marquee></td></tr></table>
<br>
&nbs
p; &n
bsp;
Projects
123
file:///C:/Users/savi/Desktop/Festivals%20Of%India/diwali.htm
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 midNovermber. 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>
<body link = blue vlink = purple alink = blue>
<table height = 100 width = 100% bgcolor = Yellow cellpadding = 10><tr><td
width=35% height=100><img src = Diwali 3.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>
<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
124
= center><a href = Main Page.htm> Home </a>| About Us | Types of Festivals | <a
href=Feedback.htm>Feedback</a></font></td></tr></table>
<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></tr>
</table>
<br>
</body>
</html>
Projects
125
<html><head><title></title></head>
<body link = blue vlink = purple alink = blue>
<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>
<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>
<br>
126
<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> Enjoy The Moments .....</font></td>
<td width = 35% height = 100% bgcolor = #F2AC28 rowspan = 2>
<font
face
=
trebuchet
ms
color
=
maroon
size
5> &nb sp; <u>Dussehra</u>:</font>
</body>
</html>
Projects
127