Green-Computer-Book-8

14 Introduction to Internet

and E-mail

The concept of Internet

originated in 1969 and

has undergone several Bank & Insurance
Servers
technological and Weather Servers Agro-universities &
Research Institutions
infrastructural changes.

The origin of Internet Government Services Internet
devised from the concept

of Advanced Research Commodity Exchange

Project Agency Network Village Knowledge Mobile/Land line
(ARPANET). ARPANET Centers Networks

was developed by United Trust & Not for Profit
States Department of Organizations

Defense. The basic Super Markets
purpose of ARPANET was
Farmers

to provide communication among the various bodies of government. Initially,

there were only four nodes, formally called Hosts. In 1972, the ARPANET

spread over the globe with 23 nodes located at different countries and thus

became known as Internet.

By the time, with invention of new technologies such as transmission control
protocol Internet protocols, DNS, WWW, browsers, scripting languages, etc.,
Internet provided a medium to publish and access information over the web.

The Internet is a global system of interconnected computer networks that
use the standard Internet protocol suit (TCP/IP) to serve billions of users
worldwide. We can use it to connect people, communities, and countries
around the world. It is a network of networks that consists of millions of
public private, academic, business, and government networks of local to
global scope. The Internet carries an extensive range of information resources
and services such as the interlinked hypertext documents of the World Wide
Web (WWW) and the infrastructure to support email.

GREEN Computer Book-8 151

You can think about the More to know

Internet as a physical World Wide Web was created by Timothy
Berners Lee in 1989 at CERN in Geneva. World
collection of routers Wide Web came into existence as a proposal
by him, to allow researchers to work together
and circuits as a set of effectively and efficiently at CERN. Eventually it
became World Wide Web.
shared resources or even

as an attitude about

interconnecting and

intercommunication.

Characteristics of Internet:

• Internet is a global system of interconnected computers on the networks.

• Internet uses the standard known as TCP/IP protocol.

• Every computer in the Internet is identified by a unique IP address.

• IP Address is a unique set of numbers (such as 110.22.33.114) which
identifies a computer ’s location.

• A special computer DNS (Domain Name Server) is used to give name to
the IP Address so that a user can locate a computer by a name.

• The Internet is accessible to every user all over the world.

Things we need to connect Internet

Modem: More to know

A modem relays A modem changes a computer’s digital signals
information between the into analog signals and analog signals into digital
computer and Internet. signals. Both the sending and receiving ends of
communication channel must have a modem for
Telephone Line: data transmission.

The information we send and receive over Internet travels through telephone
cables.

ISDN Line:

ISDN stands for Integrated Services Digital Network. Information that travels
through the ISDN is two to four times faster than any modem available. Many
telephone companies offer ISDN lines to connect to the Internet.

152 GREEN Computer Book-8

Internet Service Provider :

Internet service provider abbreviated as ISTP's are the companies that provide
you service in terms of Internet connection to connect to the Internet. You will
buy space on a Web Server from any Internet Service Provider. This space will
be used to host your Web site.

Web Browser:

A web browser is a software application that allows you to access websites and
view web pages, once you are connected to the net. Microsoft Internet Explorer
and Mozilla Firefox are the commonly used web browsers. At the top of web
browser is an address line. Here you can type the address of the location on the
Internet that you want to visit. For example to access the National Geographic
site, you can type http://www.nationalgeographic.com.

Internet Based Services:

Some of the basic services available to Internet users are:

Email:

A fast, easy, and inexpensive way to send and receive electronic mails with
other Internet users around the world.

Telnet:

Allows a user to log into a remote computer as though it were a local system.

FTP:

Allows a user to transfer virtually every kind of file that can be stored on a
computer from one Internet-connected computer to another.

Usenet news:

A distributed bulletin board that offers a combination of news and discussion
service on thousands of topics.

Internet Relay Chat( IRC):

Allows the people from all over the world to communicate in real time.

GREEN Computer Book-8 153

Internet Telephony:

Internet telephone is also known as Voice Over the Internet Protocal (VOIP).
VOIP allows the Internet users to talk across the Internet to any PC equipped
to receive the call.

World Wide Web (WWW):

WWW is the important service of the Internet.
It was created in 1990 by European Particle
physics Laboratory in Geneva Switzerland to
exchange and share data through the Internet
using a protocol known as Hypertext Transfer
Protocol (HTTP). A hypertext document is a
specially encoded file that uses hypertext markup language (HTML). The
World Wide Web is the universe of network-accessible information, an
embodiment of human knowledge. In simple terms, the World Wide Web is
a way of exchanging information between computers on the Internet, tying
them together into a vast collection of interactive multimedia resources.

Terms used in Internet

Transmission Control Protocol / Internet Protocol (TCP/IP)

TCP/IP corresponds to the Transport Layer of OSI Model. TCP is a reliable
and connection oriented protocol. Internet Protocol is connectionless and
unreliable protocol. In order to make it reliable, it must be paired with reliable
protocol such as TCP at the transport layer. TCP offers connection oriented
end-to-end packet delivery. TCP ensures reliability by sequencing bytes with
a forwarding acknowledgement number that indicates to the destination the
next byte the source expects to receive.

Hyper Text Transfer Protocol(HTTP)

HTTP specifies the protocol which the computer will use to get information
from the site. This protocol is called Hyper Text Transfer Protocol. Computer
protocol is a set of rules that enables computers to connect with one another to
exchange and share resources.

URL

It means Uniform Resource Locator. URL provides the location of the browser.

154 GREEN Computer Book-8

Hyperlinks

Hyperlink is a graphic or a piece of text in an Internet document that connects
readers to another webpage, or another portion of a document.

Web server

Web server is a computer that is connected to the Internet and stores all the
web sites to be available to everyone.

Web pages and Home pages

Web page is a collection of text, images, graphics, videos and animations
arranged in a systematic way and provides the information about a subject.
The very first page which we get while visiting the website is known as home
page. All the links are provided from the home page to other pages.

Web site

A Web site is a related collection of World Wide Web (WWW) files that includes
a beginning file called a home page. A company or an individual tells you how
to get to their Web site by giving you the address of their home page. From
the home page, you can get to all the other pages on their site. For example,
the Web site for IBM has the home page address of http://www.ibm.com. (The
home page address actually includes a specific file name like index.html but,
as in IBM's case, when a standard default name is set up, users don't have to
enter the file name.) IBM's home page address leads to thousands of pages.

Email

Email is a service which
allows us to send a message
in an electronic mode over the
Internet. It offers an efficient,
inexpensive and real time mean
of distributing information
among people. There are
several popular web-mail sites
such as Gmail, Yahoo! Mail
and Hotmail.

E-Mail Address

Each user of email is assigned
a unique name for the email account. This name is known as E-mail address.
Different users can send and receive messages according to the e-mail address.

GREEN Computer Book-8 155

For example, [email protected] is an e-mail address where alok is a username and
gmail.com is a domain name.

E-mail Message Components

An E-mail message comprises of different
components: E-mail Header, Greeting,
Text, and Signature. These components
are described in the diagram alongside:

E-mail Header

The first five lines of an E-mail message
is called E-mail header. The header part
comprises of the following fields:

From: The From field indicates the
sender’s address i.e. who sends the
e-mail.

Date: The Date field indicates the
date when the e-mail is sent.

To: To field indicates the recipient’s address i.e. to whom the e-mail is
sent.

Subject: The Subject field indicates the purpose of e-mail. It should be
precise and to the point.

CC: CC stands for Carbon Copy. It includes those recipient addresses
whom we want to keep informed but not exactly the intended recipient.

BCC: BCC stands for Black Carbon Copy. It is used when we do not

want one or more of the recipients to know that someone else was copied

on the message. More to know

Greeting: Greeting is the opening You're done! To send the message,
of the actual message. Eg. Hi Sir click the Send button. It will zip

or Hi Guys, etc. through the Internet to your

recipients.

156 GREEN Computer Book-8

Text: It represents the actual content of the message.

Signature: This is the
final part of an e-mail
message. It includes Name
of Sender, Address, and
Contact Number.

To attach a file to the message,
click the Attach File button
on the toolbar (located just
below the menu bar). Locate
the file, select it, and then
click Open. The file now
appears in the Attach box in
the message header.

Reading E-mail messages

To read a message, click
in the message list. The
contents of the message
might appear below the
message list in the preview
pane. If so, double-click it
in the message list to read
the message in a separate
window. Click the inbox to
see your e-Mail messages

To reply to a message, click
the Reply button.

1. Type the email address
of the receiver and the
subject of your message.

2. Type your message in the Message box.

3. Click on 'Send' button.

You will be displayed a message of your e-mail sent successfully.

GREEN Computer Book-8 157

E-mail Protocol

Email protocol is a method by which a communication channel is established
between two computers and email is transferred between them. The email
server stores the mail and lets the receiving computer access it and download it
if needed. Some of the email protocol are: POP3 (Post Office Protocol 3), IMAP
(Internet Message Access Protocol), SMPT (Simple Mall Transfer Protocol).

How to Search Your Information

Internet is one of the biggest

libraries in the word. It

can provide any piece of

information. Search engine

helps you to search a piece

of information. When you

are looking for a site whose

address you don’t know, you You can type your keyword or phrase

can search for it using a search to search.

engine. A search engine will

scan through thousands of websites and web pages on the Internet and collect

and organize the information it thinks is most relevant to you. It is a tool that

searches documents for specific keyword, phrase, data, etc. via WWW.

Some of the most popular search engines are:
• Google www.google.com
• Yahoo www.yahoo.com
• Bing www.bing.com

Steps to Search information
• Open any Search Engine in a Web browser.

• Type the text in the Search box that you want to search.

• Press Enter Key or click on Google search button. Now you can see the
related websites and contents

• Choose an appropriate website or content from the list and open it.

• You can open multiple websites: click right mouse button on the website or
content and choose New Tab.

158 GREEN Computer Book-8

POINTS TO REMEMBER

1. The Internet, acronym of International network is a global system of
interconnected computers that use the standard (TCP/IP) to serve
billions of users worldwide.

2. E-mail, chat and other messenger services on the Internet provide us a
better way of communication.

3. Search engines like Google help us to find information on our desired
topic and subject.

4. Each user of email is assigned a unique name for the email account.
5. WWW is one of the most popular services on the Internet. The contents

stored on World Wide Web are accessed through web browsers.
6. Web page is a collection of text, images, graphics, videos and animations

arranged in a systematic way and provides the information about a
subject.
7. Each web page on the Internet is accessed by means of an address; this
unique address is called URL.
8. The organization which provides Internet access services locally is
called ISP.
9. E-mail is the service to send and receive messages to and from our
friends, relatives, colleagues and business related persons.
10. Hyperlink is a graphic or a piece of text in an Internet document that
connects readers to another webpage, or another portion of a document.
11. A web browser is a software application that allows you to access
websites and view web pages, once you are connected to the net.
12. If you don't want your friend of Address box to know that you have sent
the same message to other friends then type his/her address in Bcc
box.

Exercise

1. Answer the following questions.

a. What is the Internet?
b. List any four major application areas of Internet.
c. What is an e-mail? Write any two protocol of e-mail.
d What is a web browser? Give an example.
e. What are the things required to connect Internet at home?

GREEN Computer Book-8 159

2. Fill in the blanks with the correct words by choosing from the box:

a. ........................... is a network of networks Mozila Firefox
around the world. Google Chrome
Index or Home page
b. A collection of related web pages is called Internet
a........................... Website
User name
c. Each website has a main page called the
...........................

d. ........................... and ........................... are the
popular web browsers.

e. The name of the person in an e-mail address is
called ...........................

3. Give the full forms of:
WWW, E-MAIL, BCC, POP, CC, ISP, URL, HTTP, TCP/IP, IMAP, SMTP

4. State whether the following statements are TRUE or FALSE:
a. Internet connects all private, business, school, governmental computer
networks into one.
b. We can't get information on different topics on the Internet.
c. There are more advantages of the Internet compared to disadvantages.
d. Google Chrome is one of the web browsers.
e. http://www.gmail.com is the name of ISP.
f. Your computer may get infected with virus if you use unnecessary
Internet sites.
g. You cannot attach pictures and other documents to your e-mail.

5. Write technical term for the following statements.
a. It is the world’s biggest library.

b. It is like Google to help us to find information on our desired topic
and subject.

c. It is a software application that allows you to access websites and
view web pages, once you are connected to the net.

d. It is a service which allows us to send messages in electronic mode
over the Internet.

e. It provides the location of the browser.

f. It is a collection of text, images, graphics, videos and animations arranged
in systematic way and provides the information about a subject.

6. Write short notes: c. HTTP d. Webserver e. Hyperlink
a. Website b. TCP/IP

160 GREEN Computer Book-8

15 Hyper Text Markup

Language(HTML)

HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages of a website.

Hypertext refers to the way in which Web pages HTML documents are linked
together. Thus, the links available on a webpage are called Hypertext.

As its name suggests, HTML is a Markup Language which means you use
HTML to simply "mark up" a text document with tags that tell a Web browser
how to structure it to display.

Originally, HTML was developed with the intent of defining the structure
of documents like headings, paragraphs, lists, and so forth to facilitate the
sharing of scientific information between researchers. Now, HTML is being
widely used to format web pages with the help of different tags available in
HTML language.

HTML was developed by Berners-Lee, a researcher at CERN, an international
scientific organization based in Geneva, Switzerland in 1990 for presenting
information on the Internet. There are different versions of HTML available.
HTML, HTML+, HTML 5 are some of them.

Tags and Elements

HTML Tags are the instructions which are used to create HTML document that
can be opened by the browsers and by other agents worldwide if uploaded in
WWW. They are also termed as Elements. A tag begins with a ‘<’ and ends with
‘>’ which are known as angular brackets and looks like this <tag>.

These tags are not case sensitive; you can use either upper case or lower case
when typing the identifier for a tag. Tag consists of three parts:

• Element

GREEN Computer Book-8 161

• Attribute

• Value

Attributes

Attributes are the additional instructions that further define the behavior of
the element.

They enhance the text by providing a wide range of formatting for better
look and layout while opened by the browsers. A tag name is followed by the
attributes with values in them.

They should be enclosed within the angular brackets.

Ex <BODY BGCOLOR="#FFFFAA" TEXT="black">

Tag Name Attribute Name Attribute value

In this example, BGCOLOR and TEXT are the attributes of BODY element.
"#FFFFAA" and "black" are the values for BGCOLOR and TEXT attribute
respectively.
Now, let's review some parts of the lesson that we had learnt in our previous
grade.

Tags are of two types.

1. Container tags

These tags are also called paired tags. They include Start tag and End tag. The
End tag is preceded by (/) slash sign inside the angular brackets.
Example:
a. <HTML>
……….
</HTML>
b. <BODY>
………..

</BODY>

162 GREEN Computer Book-8

2. Empty tags

Empty tags are complete in themselves. They have only Start tag.

For Example: <HR> for inserting a horizontal line.

<BR> for a line break.

The first thing you’ll notice about the code is that every html command or
‘tag’ is actually a pair of tags, an opening tag and a closing tag preceded by a
forward slash. However, there are certain exceptions to this rule. Many tags
also include attributes, in the form attribute = "Value" which add options to that
particular tag. Tags may be either in uppercase or lowercase. Tags must also
be properly nested, failing which, you will encounter unexpected problems.

HTML Components
Every HTML document should look basically as follows:

<html>

<head>

<title>This is document title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>Document content goes here.....</p>

</body>

</html>

HTML Tags
HTML is a markup language that makes use of various tags to format the
content. These tags are enclosed within angle braces <Tag Name>. Except
few tags, most of the tags have their corresponding closing tags. For example
<html> has its closing tag </html> and <body> tag has its closing tag </body>
tag etc.

GREEN Computer Book-8 163

Tag Description

<html> This tag encloses the complete HTML document and mainly
comprises of document header which is represented by
<head>...</head> and document body which is represented
by <body>...</body> tags.

<head> This tag represents the document's header which can keep
other HTML tags like <title>, <link>, etc.

<title> The <title> tag is used inside the <head> tag to mention the
document title.

<body> This tag represents the document's body which keeps other
HTML tags like <h1>, <div>, <p>, etc.

<h1> This tag represents the heading.

<p> This tag represents a paragraph.

BODY Tag
The BODY of the document contains the actual information. All the contents
that are to appear in the web page should be put in between <BODY> and </
BODY> tags. There may be only one BODY statement in the document.

We’ll now create a simple "Start" page in order to illustrate the fundamentals
of HTML.

Try typing the following codes into your HTML editor. You can simply open
Notepad text editor and type the following codes of HTML.

<HTML>

<HEAD>

<TITLE> This is first HTML Page</TITLE>

</HEAD>

<BODY>

This is my first page see the description of body

</BODY>

</HTML>

164 GREEN Computer Book-8

Attributes of <BODY> tag Functions
Attributes Changes the colour of the body background.
BGCOLOR = " " Sets a picture as body background.
BACKGROUND = " " Sets the top margin of a page.
TOPMARGIN = " " Sets the bottom margin of a page.
BOTTOMMARGIN = " " Sets the left margin of a page.
LEFTMARGIN = " "

<html>
<head>
<title>HTML Attributes and Colors by Nam e</title>
</head>
<body text="blue" bgcolor="green" background="pic1.jpg” >
<p>Use different color names for body and see the result.</p>
</body>
</html>
Where,
• Background sets background image. Image file name is pic1.jpg.
• Bgcolor sets background color.
• Text sets text color.

W3C Standard 16 Colors

Here is a list of W3C Standard 16 Colors names with their hex code and it is
recommended to use them.

Example:

Black #000000 Gray #808080 Silver#C0C0C0 White #FFFFFF
Yellow #FFFF00 Lime # 00FF00 Aqua #00FFFF Fuchsia #FF00FF
Red #FF0000 Green #008000 Blue #0000FF Purple #800080
Maroon #800000 Olive #808000 Navy #000080 Teal #008080

GREEN Computer Book-8 165

HTML Document Structure

A typical HTML document will have the following structure:
Document declaration tag

<html>
<head>

Document header related tags
</head>
<body>

Document body related tags
</body>
</html>

Creating and Saving HTML Document

An HTML document can be created in any plain text editor like Notepad or
Textpad. After the completion of the document, you need to save it with .htm
or .html as an extension after the file name. You need to use a browser to view
the HTML documents.

<html>
<head>
<title>The title is Search Engine </title>
166 GREEN Computer Book-8

</head>

<body>

<h1>This is a heading</h1>

<p>Internet is one of the biggest libraries in the world. It can provide any
piece of information.

Search engine helps you to search a piece of information. When you are
looking for a site whose address you don’t know, you can search for it using
a search engine.

A search engine will scan through thousands of websites and web pages on
the Internet and collect and organize the information it thinks is most relevant
to you. It is a tool that searches documents for specific keyword, phrase, data
etc. via WWW.</p>

</body>

</html>

How to view a web page:

• Open the Internet Explorer or any other browser.
• Click on the file menu and choose Open command. The Open dialog box

appears on the screen.
• Click on the browser button
• Select a web page that you want to view on the browser. For example,

test1.html.
• Click on Open button. The open dialog box reappears with the path of the

file that is to be opened.
• Click on ok button.

GREEN Computer Book-8 167

• Then you can see the following webpage.
168 GREEN Computer Book-8

Viewing the Source Codes

You can view the source codes of the opened web page.

• Click on the view menu of the browser and select the source button. OR,

• Right click on any part of the web page and select the View Source option.

The source code of HTML document appears on the Notepad program. Now, you can
change or modify the content and save it.

Paragraph

On a web page, text flows continuously across the page regardless of carriage
returns or white spaces in the html code. Thus, paragraphs and line breaks
need to be explicitly specified in html.
The <P> tag is used to indicate the beginning of a new paragraph. It doesn't
need to be closed with a </P> tag. So, it is also an empty tag.
Example:
This is the last line of paragraph 1. <P>
This is the first line of paragraph 2 <P>
The <p> tag may also be used to align the blocks of text with the align attribute,
which takes the values left, center and right.
Example:
1. <P ALIGN = "LEFT">
The text of the paragraph is aligned to the left.
2. <P ALIGN = "CENTER">
The text of the paragraph is aligned to the center.
3. <P ALIGN = "RIGHT">
The text of the paragraph is aligned to the right.

<CENTER> TAG

<CENTER> </CENTER> tag aligns all elements between the opening and
closing tags in the center of the page.

GREEN Computer Book-8 169

Example:
<CENTER>
This text is aligned in the center.
</CENTER>

Line breaks

Creating line breaks is an important elements that can make the words on
the screen make sense and convey information more clearly. If you want a
sentence to begin on a new line then you could use the line break using <BR>
tag.
Solved example:

<HTML>
<HEAD>
<TITLE>Using BR</TITLE>
</HEAD>
<BODY>
The line breaks here <BR> another line starts <BR> another <BR> another.
</BODY>
</HTML>
In the browser the document appears as :

170 GREEN Computer Book-8

Heading Tags

Any document starts with a heading. You can use different sizes for your
headings. HTML also has six levels of headings, which use the elements <h1>,
<h2>, <h3>, <h4>, <h5>, and <h6>.
While displaying any heading, browser adds one line before and one line after
that heading.
Example

<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
This will produce the following result:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

GREEN Computer Book-8 171

<HR> tag

A horizontal rule is a dividing line placed across the page of the document.
The <HR> tag is used to insert a horizontal line in a web document. Like the
paragraph and the line break elements, the horizontal rule is an empty element.
You can include the attributes WIDTH in percentage, ALIGN as left, center or
right and SIZE in number as 1, 2, etc.
Solved Example:

<HTML>
<HEAD>
<TITLE>Horizontal Rule</TITLE>
</HEAD>
<BODY>
A horizontal rule looks like <P>
<HR size=8px color="red">
This.
</BODY>
</HTML>
Here’s how it would look on your screen when browsed.

The exact appearance of a horizontal rule is dependent on the implementation
by your browser. In every browser, however, the <HR> tag will generate a
separating line of some sort.
If you use a word processor, you must be familiar with the ability to make text
bold, italicized, or underlined; these are just three of the ten options available
to indicate how text can appear in HTML and XHTML.

172 GREEN Computer Book-8

Bold Text

Anything that appears within <b>...</b> element, is displayed in bold as shown
below:
Example

<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a bold typeface.

Italic Text

Anything that appears within <i>...</i> element is displayed in italicized as
shown below:
Example

<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a italicized typeface.

GREEN Computer Book-8 173

Underlined Text

Anything that appears within <u>...</u> element, is displayed with underlined
as shown below:
Example

<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a underlined typeface.

Strike Text

Anything that appears within <strike>...</strike> element is displayed with a
strikethrough, which is a thin line through the text as shown below:
Example

<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</
p>
</body>
</html>
This will produce the following result:
The following word uses a strikethrough typeface.

174 GREEN Computer Book-8

Superscript Text

The content of a ^... element is written in superscript; the font size
used is the same size as the characters surrounding it but is displayed half a
character's height above the other characters.
Example

<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a ^superscript typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a superscript typeface.

GREEN Computer Book-8 175

Subscript Text

The content of a _... element is written in subscript; the font size
used is the same as the characters surrounding it, but is displayed half a
character's height beneath the other characters.
Example

<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a _subscript typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a subscript typeface.

Inserted Text

Anything that appears within <ins>...</ins> element is displayed as inserted
text.
Example

<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
This will produce the following result:
I want to drink cola wine.

176 GREEN Computer Book-8

<FONT> Tag

Fonts play very important role in making a website more user-friendly and
increasing content readability. Font face and color depends entirely on the
computer and browser that is being used to view your page but you can use
HTML <font> tag to add style, size, and color to the text on your website. You
can use a <basefont> tag to set all of your text to the same size, face, and color.

The font tag is having three attributes called size, color, and face to customize
your fonts. To change any of the font attributes at any time within your
webpage, simply use the <font> tag. The text that follows will remain changed
until you close with the </font> tag. You can change one or all of the font
attributes within one <font> tag.

Attributes of <FONT> tag

Attributes Functions

FACE = " " Sets the font style of text.

SIZE = " " Sets the font size of text

COLOR = " " Sets the font colour of text.

Set Font Size

You can set content font size using the size attribute. The range of accepted
values is from 1smallest to 7largest. The default size of a font is 3.
Example

<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size="1">Font size="1"</font><br />
<font size="2">Font size="2"</font><br />
<font size="3">Font size="3"</font><br />
<font size="4">Font size="4"</font><br />
<font size="5">Font size="5"</font><br />
<font size="6">Font size="6"</font><br />

GREEN Computer Book-8 177

<font size="7">Font size="7"</font>
</body>
</html>
This will produce following result:
Font size="1"

Font size="2"

Font size="3"

Font size="4"

Font size="5"

Font size="6"

Font size="7"

Relative Font Size

You can specify how many sizes larger or how many sizes smaller than the
preset font size should be. You can specify it like <font size="+n"> or <font
size="-n">.
Example

<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size="-1">Font size="-1"</font><br />
<font size="+1">Font size="+1"</font><br />
<font size="+2">Font size="+2"</font><br />
<font size="+3">Font size="+3"</font><br />
<font size="+4">Font size="+4"</font>

178 GREEN Computer Book-8

</body>
</html>
This will produce following result:
Font size="-1"

Font size="+1"

Font size="+2"

Font size="+3"

Font size="+4"

Setting Font Face

You can set font face using the face attribute but be aware that if the user
viewing the page doesn't have the font installed, they will not be able to see
it. Instead user will see the default font face applicable to the user's computer.

Example

<html>
<head>

<title>Font Face</title>

</head>
<body>

<font face="Times New Rom an" size="5">Tim es New Rom an</font><br />

<font face="Verdana" size="5">Verdana</font><br />

<font face="Comic sans MS" size="5">Com ic Sans MS</font><br />

<font face="WildWest" size="5">WildWest</font><br />

<font face="Bedrock" size="5">Bedrock</font><br />

</body>
</html>

This will produce the following result:

Times New Roman

Verdana

GREEN Computer Book-8 179

Comic Sans MS
WildWest
Bedrock

Setting Font Color

You can set any font color you like using the color attribute. You can specify
the color that you want by either the color name or hexadecimal code for that
color.
Example

<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color="#FF00FF">This text is in pink</font><br />
<font color="red">This text is red</font>
</body>
</html>
This will produce the following result:
This text is in pink
This text is red

The <basefont> Element:

The <basefont> element is supposed to set a default font size, color, and typeface
for any parts of the document that are not otherwise contained within a <font>
tag. You can use the <font> elements to override the <basefont> settings.
The <basefont> tag also takes color, size and face attributes and it will support
relative font setting by giving size a value of +1 for a size larger or -2 for two
sizes smaller.

180 GREEN Computer Book-8

Example
<html>

<head>
<title>Setting Base font Color</title>
</head>
<body>
<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the &lt;basefont&gt; Element</h2>
<p><font size="+2" color="darkgray">
This is darkgray text with two sizes larger
</font></p>
<p><font face="courier" size="-1" color="#000000">
It is a courier font, a size smaller and black in color.
</font></p>
</body>
</html>
This will produce the following result:
This is the page's default font.
Example of the <basefont> Element

This is darkgray text with two sizes larger

Lists

HTML has several types of lists that allow you to display groups of information
in different ways. There are three separate types of lists generally used in
HTML. They are:
1. Unordered List (<UL></UL>)
2. Ordered List (<OL> <OL>)
3. Description List (<DL></DL>)

GREEN Computer Book-8 181

1. Unordered List

An unordered list can be termed as bulleted list. It is used for those items
in which the ordering is not specific. The type of bullets "Circle", "Disc" and
"Square" are used as the values for TYPE attribute of <UL> tag. The item list is
defined by <LI> tag. It is used in between <UL> and </UL> tag.

The type Attribute
You can use type attribute for <ul> tag to specify the type of bullet you like. By
default it is a disc.

Following are the possible options:

<ul type="square">

<ul type="disc">

<ul type="circle">

Example1:

<HTML>
<HEAD> <TITLE>UNORDERED LIST</TITLE></HEAD>
<BODY>
<H3>This is an unordered list</H3>
<FONT size=10 face="Arial">
<UL TYPE= "circle">
<LI> unordered list element 1
<LI> unordered list element 2
<LI> unordered list element 3
</UL>
</FONT>
</BODY>
</HTML>

Example 2

Following is an example where we used <ul type="square">

<html>

<head>

<title>HTML Unordered List</title>

</head>

182 GREEN Computer Book-8

<body>
<ul type="square">
<li>Banana</li>
<li>Papaya</li>
<li>Apple</li>
<li>Mango</li>
</ul>

</body>
</html>
This will produce the following result:
• Banana
• Papaya
• Apple
• Mango
Example 3
Following is an example where we used <ul type="disc"> :
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>

<ul type="disc">
<li>Banana</li>
<li>Papaya</li>
<li>Apple</li>
<li>Mango</li>
</ul>
</body>
</html>

GREEN Computer Book-8 183

This will produce the following result:
• Banana
• Papaya
• Apple
• Mango

2. Ordered List

An ordered list is also called a numbered list. The list is ordered by a numbering
scheme using Arabic numbers, letters or Roman numerals. The list items are
enclosed in between <OL> and </OL>. The types of numbering are "A", "a", "i",
"I" and "1". The type "A" gives numbering as A, B, C, D … for the list items.
The type "a" gives numbering as a, b, c, d…. to the list items. The "i" gives
numbering as i, ii, iii, iv …. to the list items. The type "I" gives numbering as I,
II, III, IV …. to the list items. The type "1" gives numbering as 1, 2, 3, 4 ….. to
the list items. The typical syntax of a list is to have a tag for the beginning and
then an <LI> or list tag, for each list element. Let’s learn to create a few lists.

The type Attribute
You can use type attribute for <ol> tag to specify the type of numbering you
like. By default, it is a number. Following are the possible options:

<ol type="1"> - Default-Case Num erals.
<ol type="I"> - Upper-Case Num erals.
<ol type="i"> - Lower-Case Num erals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.

Solved Example1:

<HTML>

<HEAD> <TITLE>ORDERED LIST</TITLE></HEAD>

<BODY>

<u>This is an ordered list </u>

<OL type="i">

<LI> ordered list element 1

<LI> ordered list element 2

<LI> ordered list element 3

184 GREEN Computer Book-8

<LI> ordered list element 3
</OL>
</BODY>
</HTML>

Example
Following is an example where we used <ol type="1">

<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>

<ol type="1">
<li>Onion</li>
<li>Chilly</li>
<li>Potato</li>
<li>Carrot</li>
</ol>
</body>
</htm l>
This will produce the following result:
1. Onion
2. Chilly
3. Potato
4. Carrot
Example
Following is an example where we used <ol type="I">
<html>
<head>

GREEN Computer Book-8 185

<title>HTML Ordered List</title>

</head>

<body>

<ol type="I"> This will produce following result:
<li>Onion</li> I. Onion
<li>Chilly</li> II. Chilly
<li>Potato</li> III. Potato
<li>Carrot</li> IV. Carrot
</ol>

</body>

</html>

Example

Following is an example where we used <ol type="A">

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body> This will produce the following result:
<ol type="A"> A. Beetroot
<li>Beetroot</li> B. Ginger
<li>Ginger</li> C. Potato
<li>Potato</li> D. Radish
<li>Radish</li>

</ol>

</body>

</html>

186 GREEN Computer Book-8

Example

Following is an example where we used <ol type="a">

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<ol type="a"> This will produce the following result:

<li>Onion</li> a. Onion

<li>Chilly</li> b. Chilly

<li>Potato</li> c. Potato

<li>Carrot</li> d. Carrot

</ol>

</body>

</html>

The start Attribute
You can use start attribute for <ol> tag to specify the starting point of numbering
you need.
Following are the possible options:

<ol type="1" start="4"> - Numerals start with 4.
<ol type="I" start="4"> - Numerals start with IV.
<ol type="i" start="4"> - Numerals start with iv.
<ol type="a" start="4"> - Letters start with d.
<ol type="A" start="4"> - Letters start with D.
Example
Following is an example where we used <ol type="i" start="4" >
<html>
<head>
<title>HTML Ordered List</title>

GREEN Computer Book-8 187

</head> This will produce following result:
<body> iv. Onion
v. Chilly
<ol type="i" start="4"> vi. Potato
<li>Onion</li> vii. Carrot
<li>Chilly</li>
<li>Potato</li>
<li>Carrot</li>
</ol>
</body>
</html>

3. Description Lists

There are also description lists in which a word and their associated definitions
are paired together, as in a glossary, each with its own tag. Thus each entry into
a description list has two elements: the description term, which uses a <DT>
tag, and the description definition, which uses a <DD> tag. Usually browsers
depict the description title and the description definition on separate lines,
allowing the full width of the display for the description title.

A description list would look like as given below:

Solved Example:

<HTML>

<HEAD> <TITLE>DESCRIPTION LIST</TITLE></HEAD>

<BODY>

<B><U>This is a Description list.</B></U>

<DL>

<DT> First Prize

<DD> Toshiba laptop with i7 processor

<DT> second Prize

<DD> iphone

<DT> Third Prize

<DD> ipods

188 GREEN Computer Book-8

</DL>
</BODY>
</BODY>
</HTML>

Inserting Images in HTML Document

In a web page images can be inserted in order to make the page more attractive
and informative. Outline image and Background image are the two types of
images in HTML document. The commonly used images are GIF (Graphic
Interchange Format) and JPEG (Joint Photographic Expert Group). You can
insert any image in your web page by using <img> tag. Following is the simple
syntax to use this tag.

<img src="Image URL" ... attributes-list/>

Attributes of <IMG> tag

Attributes Functions

SRC = " " Sets the path of a picture.

ALIGN = " " Sets the alignment for a picture to left, right or center.

BORDER = " " Sets the border of a picture.

HEIGHT = " " Sets height of a picture.

WIDTH = " " Sets width of a picture.

ALT = " " Displays text in case image is not displayed by the
user.

The <img> tag is an empty tag, which means that it can contain only list of
attributes and it has no closing tag.

GREEN Computer Book-8 189

Example
To try following example, let's keep our HTML file testimage.html and image
file pic.jpg in the same directory:

<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="/html/images/pic.jpg" alt="Test Image" />
</body>
</html>

You can use PNG, JPEG or GIF image file based on your comfort but make
sure you specify correct image file name in src attribute. Image name is always
case sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for
an image, if the image cannot be displayed.

Set Image Location

Usually we keep all our the images in a separate directory. So let's keep HTML
file test.htm in our home directory and create a subdirectory images inside the
home directory where we will keep our image test.png.

190 GREEN Computer Book-8

Example
Assuming our image location is "/html/image/test.png", try the following
example:

<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Im age Insert</p>
<img src="/html/images/test.png" alt="Test Image" />
</body>
</html>

Set Image Width/Height

You can set image width and height based on your requirement using width
and height attributes. You can specify width and height of the image in terms
of either pixels or percentage of its actual size.
Example

<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting Image width and height</p>
<img src="/html/images/test.png" alt="Test Image" width="150"
height="100"/>
</body>
</html>

Set Image Border

By default image will have a border around it. You can specify border thickness
in terms of pixels using border attribute. A thickness of 0 means, no border
around the picture.

GREEN Computer Book-8 191

Example
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting Image Border</p>
<img src="/html/images/test.png" alt="Test Image" border="3"/>
</body>
</html>

Set Image Alignment

By default image will align at the left side of the page, but you can use align
attribute to set it in the center or right.
Example

<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting Image Alignment</p>
<img src="/html/images/test.png" alt="Test Image" border="3"
align="right"/>
</body>
</html>

Links

Links or hyperlinks are the most important part of the World Wide Web. A
link is a reference, either to another part of the same document or another
document signified by the <A> and </A> tags. There are three different kinds
of links.
1. Links within a page (Internal links)

192 GREEN Computer Book-8

2. Links to other web pages of the same Web site (Local hyperlinks)
3. Links to pages of different Web sites (Global hyperlinks)

Anchor <A> tag

Anchors are text elements which act as markers in HTML file to specify the
beginning and end of a hypermedia link. They have several optional values
which specify either the start or destination of a link or both.

Attributes of <A> tag

Attributes Functions

NAME = " " Specifies name of the section to be linked within the same
web page.

HREF = " " Specifies the path of webpage file.

TITLE = " " Displays message on a link while mouse over.

a. NAME

If you want to jump to a specific section within a web page then you have to
create an anchor with NAME attribute. It allows the anchor to be the destination
of a link. NAME acts as identifier for the anchor. You can use several named
anchors in one document, which allow readers to jump directly to their area of
interest, in the same page.

Linking Documents

Following is the simple syntax to use <a> tag.
<a href="Document URL" ... attributes-list>Link Text</a>
Example
Let's try the following example which links http://www.tutorialspoint.com at
your page:

<html>
<head>
<title>Hyperlink Exam ple</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.tourismnepal.com " target="_self">Chitwan National
Park </a>

GREEN Computer Book-8 193

</body>
</html>

This will produce the following result, where you can click on the link generated
Chitwan National Park to reach to the home page of Chitwan National Park.

Click following link

Chitwan National Park

The target Attribute

We have used target attribute in our previous examples. This attribute is
used to specify the location where linked document is opened. Following are
possible options:

Option Description

_blank Opens the linked document in a new window or tab.

_self Opens the linked document in the same frame.

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

targetframe Opens the linked document in a named targetframe.

Try following example to understand basic difference in few options given for
target attribute.

Example
<html>

<head>
<title>Hyperlink Exam ple</title>
<base href="http://www.tourismnepal.com /">
</head>
<body>
<p>Click any of the following links</p>
<a href="/html/index.htm " target="_blank"> New page</a> |

<a href="/html/index.htm " target="_self">Home page</a> |
<a href="/html/index.htm " target="_parent">Open in Parent</a> |

<a href="/html/index.htm " target="_top">Opens in Body</a>
</body>
</html>

194 GREEN Computer Book-8

This will produce the following result, where you can click on different links to
understand the difference between various options given for target attribute.
Click any of the following links
New page | Home page | Opens in Parent | Opens in Body

Tables

Table is the best tool for organizing data in rows and columns. In HTML a
table comprises three basic elements. They are table itself, the table rows and
the table columns. So, while working with tables, there are four tags you need
to bear into your memory.
1. <TABLE> …………….. </TABLE>
This tag is the main tag used to create a table.
2. <TH> </TH>
This tag is used to define the table heading.
3. <TR> </TR>
This tag is used to define a horizontal row.
4. <TD> </TD>
Each row may be further divided into cells. The tag is used to define cells (or
columns) in a row. The <TD> tags always appear within <TR> tags, which in
turn are always sandwiched between the <TABLE> and </TABLE> tags.
So let’s create a simple table with two rows and three columns:

GREEN Computer Book-8 195

Tables Backgrounds

You can set table background using one of the following two ways:
bgcolor attribute - You can set background color for whole table or just for one
cell.
background attribute - You can set background image for whole table or just
for one cell.
You can also set border color also using bordercolor attribute.
Example

Try it and observe the output

196 GREEN Computer Book-8

Table Height and Width

You can set a table width and height using width and height attributes. You
can specify table width or height in terms of pixels or in terms of percentage
of available screen area.
Example

<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Colum n 1</td>
<td>Row 1, Colum n 2</td>
</tr>
<tr>
<td>Row 2, Colum n 1</td>
<td>Row 2, Colum n 2</td>
</tr>
</table>
</body>
</html>

GREEN Computer Book-8 197

Table Caption

The caption tag will serve as a title or explanation for the table and it shows
up at the top of the table. This tag is deprecated in newer version of HTML/
XHTML.

Example

Marquee

An HTML marquee is a scrolling piece of text displayed either horizontally
across or vertically down depending on the settings. This is created by using
HTML <marquees> tag.

Syntax

A simple syntax to use HTML <marquee> tag is as follows:
<marquee attribute_name="attribute_value"....more attributes>
Text or image to be scrolled
</marquee>

The <marquee> Tag Attributes

Following is the list of important attributes which can be used with <marquee>
tag.

Attribute Description

width This specifies the width of the marquee. This can be a value
like 10 or 20%, etc.

198 GREEN Computer Book-8

height This specifies the height of the marquee. This can be a value
like 10 or 20%, etc.

direction This specifies the direction in which marquee should scroll.
This can be a value like up, down, left or right.

behavior This specifies the type of scrolling of the marquee. This can
have a value like scroll, slide and alternate.

Scrolldelay This specifies how long to delay between each jump. This will
have a value like 10, etc.

Scrollamount This specifies the speed of marquee text. This can have a value
like 10, etc.

loop This specifies how many times to loop. The default value is
INFINITE, which means that the marquee loops endlessly.

bgcolor This specifies background color in terms of color name or
color hex value.

hspace This specifies horizontal space around the marquee. This can
be a value like 10 or 20%, etc.

vspace This specifies vertical space around the marquee. This can be
a value like 10 or 0%, etc.

Observer the output of the following:
Example1:

<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee> I Love My Country Nepal </marquee>
</body>
</html

GREEN Computer Book-8 199

Example2:
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body bgcolor =”yellow” >
<marquee width="50%">This example will take only 50% width</marquee>
</body>
</html>

Example3: left to right</
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction="right">This text will scroll from
marquee>
</body>
</html>

Example4: bottom to up</
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction="up">This text will scroll from
marquee>
</body>
</html>

200 GREEN Computer Book-8