New Gateway to Computer Science 9

2. Fill in the blanks with suitable words.
a. ………………….. is an art of drawing pictures on computer screens with the help
of various computer graphics programs.
b. Bitmap graphics are also called …………..files; essentially contain an exact
pixel-by-pixel map of an image.
c. …………………. is a common format for digital camera photographs and the
primary format for full-colour images shared on the web.
d. …………….. files are used to display limited (indexed) colour graphics on the
Web.
e. …………… supports most colour modes and can save images with alpha channels.
f. Photoshop PDF files can even be opened by users with the free ……………….
software.
g. A pixel is also known as a ……………...
h. …………….. is the sharpness and clarity of an image or picture.
i. The …………….tool removes common red eye problems in a photo resulting
from camera flash.
j. The ……………..divides an image or layout into smaller sections (slices) which
can be exported and optimized separately.
3. State whether the given statements are true or false.
a. Vector graphics files format are particularly useful for storing line-based elements.
b. Metafiles can contain both bitmap and vector data in a single file.
c. The BMP format allows for use of millions of colorus as well as providing the
ability to have transparent backgrounds.
d. The Photoshop format (PSD) is the default file format.
e. A pixel is the smallest unit of a digital image or graphic that can be displayed and
represented on a digital display device.
f. The Move Tool is used to move layers, selections and guides within a Photoshop
document.
g. The Smudge Tool in Photoshop smudges and smears the areas you paint over.
h. Type tool is used to apply more lightness on the image.
i. Eraser tool is used to remove certain areas or parts of the image.
j. Select tool is used to enlarge the size of the image.
4. Write appropriate technical terms for the followings.
a. It is one of the most effective and commonly used ways to communicate the
processed information to the user.
b. It measures the total number of pixels along an image’s width and height.
c. This tool in Photoshop selects a single row of pixels in the image from left to
right.
d. The tool displays the colour values for the selected (sampled) area in an image.

100 New Gateway to Computer Science Book -9

e. The tool that is used to fill colours horizontally.

f. The tool which is used for free selection on the image as required.

g. The tool that allows you to copy one area of image onto another area of an image.

h. The tool which is used to select a larger area of image having similar colour, pixel
and groups together.

i. The tool that can be used to clone areas from an image and blend the pixels from
the sampled area seamlessly with the target area.

j. The tool that allows you to attach text-based notes to your Photoshop document.

5. Write the full form of the followings.

JPEG, PNG, GIF, TIFF, PSD, PDF, EPS, INDD, RAW,

6. Answer the following questions.

a. What is graphics software? Name some popular graphics softwares.

b. What are the various uses of graphics software?

c. What are the types of graphics format? Define them in short.

d. List out any ten tools that are used in Photoshop.

e. Write down the steps to create a new image canvas.

f. Explain any two popular graphics formats.

g. What is pixel and resolution?

h. Define resampling and resizing.

i. Name any five tools belonging to the move and selection tools.

j. Name any five tools belonging to the drawing and type tools.

k. Write down the uses of the given tools.

1.Gradient tool 2. Blur tool 3. Red eye tool 4. Clone stamp tool

5. Dodge tool 6. Magic eraser tool 7. Line tool 8. Rotate view tool

9. Zoom tool 10. Slice select tool 11. Artboard tool 12. Hand tool

Practical Work

Open Photoshop program and do the given activities.

Task 1: Insert an image, change its size and resolution and save it under your name.

Task 2: Insert an image of an animal and crop the body parts and display only the head
parts.

Task 3: Insert an image and use blur tool on the image and save it.

Task 4: Insert an image and use an eraser tool to erase its some parts.

Task 5: Create a new canvas with a gradient tool.

Task 6: Insert your school picture in Photoshop program, use the type tool and insert
your school name and location. Save the image under your school name.

Task 7: Insert an image and use hand tool, zoom tool, brush tool, pencil tool, clone
stamp tool, burn tool, sharpen tool and rectangle tool then observe the effect
of each of them.

New Gateway to Computer Science Book -9 101

Internet and Web
Technology

Unit

3

This unit covers the following topics:

Lesson 7 :An introduction to Internet Technology
Lesson 8: Working with HTML
Lesson 9: Working with CSS

102 New Gateway to Computer Science Book -9

Lesson An Introduction to Internet
Technology
7

Inside the Lesson

 Introduction to web browser, search engine, web server, web site, web page,
uploading and downloading, URL, DNS, home page,
 Components of WWW
 Internet of things
 Cloud computing

The Internet is a network of networks that allows computers on different kind
networks to interact with each other. The internet technology refers to the devices,
software, hardware and transmission protocols used to connect computers
together in order to receive or send data from one computer to another within a
small network. Internet can be defined as an information super highway, from
where we can access the information over the web. It is a world-wide global
system of interconnected computer networks. Internet uses the standard Internet Protocol
that is called Transmission Control Protocol (TCP/IP).

The networking of computer has its origin at the US Department of Defence
Advanced Research Projects Agency (DARPA). During 1970’s DARPA developed the
ARPANET as a Wide Area Network. In 1980’s many Internet applications like electronic
mail, newsgroup, file transfer facility and remote login were developed.

Components of WWW

World Wide Web is a large scale, online store of information. It is a system of creating,
organizing, and linking documents. The information stored on it as the collection of
documents that are interconneced with each other through the web links. The interconnected
documents may be located on one or more than one computer or worldwide.The WWW
uses the following components.

New Gateway to Computer Science Book -9 103

Web Browser

Browser is a software program that helps to present and
explore content on the World Wide Web. The process of
using browser to view information on the internet is known
as browsing or surfing. Web browser is also called an
Internet browser. It is also referred to as the user interface
of the web. With the help of browser we can visit websites
and do activities within them like login, view link from one
site to another, visit one page from another, print, send and receive email, among many
other activities. The most popular web browser software is Internet Explorer, Google’s
Chrome, Mozilla Firefox, Apple’s Safari, and Opera. There are two types of browser they
are graphical browser and text-based browser.

Graphical Browser: These types of browsers provide a graphical user interface where
the user can jump from one web page to another web page by clicking on the hyperlink on
a web page. Internet explorer, Chrome, Opera, Firefox, etc. are the examples of graphical
browsers.

Text Browser: These types of browsers are used on computers that do not support
graphics. The Lynx is the best example of text browser.

Search Engine

Search engines are used to search information and multiple resources on the
internet with the help of web browsers. Search engine is a service of internet
that allows the users to search the information and resources via the World Wide Web
(WWW). A user needs to enter the keywords or key phrases into a search engine and
receives a list of Web content results in the form of websites, images, videos or other data.
There are many different search engines available on the Internet, each with their own
abilities and features. The most popular and well-known search engine is Google. Other
popular search engines are AOL, Ask.com, Bing, and Yahoo.

Web Server

The main job of a web server is to display the website
content. Web server is a program that uses hypertext
transfer protocol to serve the files that form Web pages to
the users. Web server is a computer that runs websites. Web
server is a computer program that distributes web pages.
The basic objective of the web server is to store, process
and deliver web pages to the users. This intercommunication is
done using Hypertext Transfer Protocol (HTTP). These web pages are mostly static

104 New Gateway to Computer Science Book -9

content that includes HTML documents, images, style sheets, etc. Web server also
supports SMTP (Simple Mail transfer Protocol) and FTP (File Transfer Protocol) protocol
for emailing, file transfer and storage.

Let’s Review

 The Internet is a network of networks that allows computers on different kind
networks to interact with each other.
 The information stored on www is the collection of documents that are
interconnected with each other through the web links.
 The process of using browser to view information on the internet is known as
browsing or surfing.
 The default web browser may be different according the operating system that is
used.
 Search engine is a service of internet that allows the users to search the information
and resources through the World Wide Web (WWW).
 Web server is a computer that runs websites. Web server is a computer program
that distributes web pages.

Web Site

AWeb site is a collection of World Wide Web (WWW)
files such as text, graphics, images, audio and videos.
The first website was built at CERN by Tim Berners-
Lee and launched on August 6, 1991.Web sites are
the virtual location on WWW, which has several
webpages and data files accessible through a browser.
Each website has its own unique web address which
can be viewed through an internet connection. To view a website, we must have web
browsers like Internet Explorer. You can open a website by entering the URL in the
address bar. For example, typing “https://www.shubharambhapublication.com” opens the
home page of Shubharambha Publication. If you don’t know the URL of the website you
want to visit, you can use a search engine to find the website on the Internet.

Web Page

A web page is a document commonly written in HTML (Hypertext Mark-up
Language) that is accessible through the Internet or other networks using an
Internet browser. A web page is accessed by entering a URL address and may contain text,
graphics, and hyperlinks to other web pages and files. The information page that you read
is an example of a web page.

New Gateway to Computer Science Book -9 105

Uploading and Downloading

Uploading is the process of sending web pages, images and files onto a web server.To
make a file visible to everyone on the internet, we have to upload it. Downloading is
the process of getting web pages, images and files from a web server.When users are
copying file to their computer, they are downloading it. Uploading something means to
send data from an individual user’s computer to another computer, network or website.
Downloading something means to transfer data from a website or network and saving it
on computers or mobile devices.

Uniform Resource Locator (URL)

Uniform Resource Locator is a special form of individual address of a certain resource on
the Internet. It can refer to the website, some particular document, or an image. The Internet
user just needs to insert this code into the location bar to find the website, document,
folder, or image. A URL is also a specific type of Uniform Resource Identifier (URI). Let’s
discuss the sections of URL for example http://www.shubharambhapublication.com.

 http:// :“http” means HyperText Transfer Protocol. It allows the browser to identify
what protocol it is going to utilize to retrieve data described in the domain.

 After the http is the colon (:) and 2 forward slashes (//) that segregate the
protocol from the remaining sections of the URL.

 www: www means World Wide Web. It is used to identify the content. This
section of the URL is optional.

 shubharambhapublication.com: It is the domain name for the website. The
latter part (.com) of the domain is called the domain suffix. It is used to classify
the category or location of the website. If the domain suffix “.com” that is commercial
website and if the domain is“.org” that is organizational website.

106 New Gateway to Computer Science Book -9

Home Page

A home page is the initial or main web page of a website or a browser. The initial page
of a website is sometimes called main page. A website may have multiple home pages,
although most of them have only one.

Domain Name Server (DNS)

DNS is an Internet service that translates domain names into IP addresses because domain
names are alphabetic and they are easier to remember. A DNS server is a type of name
server that manages, maintains and processes internet domain names and their associated
records. In other words, a DNS server is the primarycomponent that implements the
DNS protocol and provisions domain name resolution services to web hosts and clients on
an IP-based network. A DNS server stores a database of different domain names, network
names, Internet hosts, DNS records and other related data. The most basic function of a
DNS server is to translate a domain name into its respective IP address.

IoT (Internet of Things)

The internet of things, or IoT, is a system of interrelated computing devices, mechanical
and digital machines that are provided with unique identifiers and it has the ability to
transfer data over a network. The term Internet of Things generally refers to scenarios
where network connectivity and computing capability extends to generate, exchange and
consume data with minimal human intervention.

Cloud Computing

Cloud computing is the delivery of different services through the Internet. These
resources include tools and applications like data storage, servers, databases, networking,
and software. Using cloud computing, users are able to access software and applications
from anywhere. The computer programs are being hosted by an outside party and reside
in the cloud. This means that users do not have to worry about things such as storage
and power. Cloud computing can be both public and private. Public cloud services
provide their services over the Internet for a fee. Private cloud services only provide
services to a certain number of people. These services are a system of networks that
supply hosted services. There is also a hybrid option, which combines elements of both
the public and private services. Cloud computing is still a new service but is being used
by a number of different organizations. Cloud computing services provide users with a
series of functions including:
 Email
 Storage, backup, and data retrieval
 Creating and testing apps
 Analysing data
 Audio and video streaming
 Delivering software on demand

New Gateway to Computer Science Book -9 107

Cloud Storage

Cloud storage is a way to save data securely online, so it can be accessed anytime from
any location and easily shared with those who are providing permission. Cloud storage
also offers a way to back up data to facilitate recovery.

Let’s Review
 A web site is a collection of World Wide Web (WWW) files such as text, graphics,
images, audio and videos.
 Web page is accessed by entering a URL address and may contain text, graphics,
and hyperlinks to other web pages and files.
 A URL is also a specific type of Uniform Resource Identifier (URI).
 Uploading is the process of sending web pages, images and files onto a web
server.
 Downloading is the process of getting web pages, images and files from a web
server.
 A home page is the initial or main web page of a website or a browser.
 DNS is an Internet service that translates domain names into IP addresses
because domain names are alphabetic and they are easier to remember.
 Cloud computing is the delivery of different services through the Internet.

Expand your knowledge

 Mark Elliot Zuckerberg is a CEO of facebook company. He was born on May
14, 1984 AD.
 YouTube was created by three PayPal enployees Chad Hurley, Steve Chen and
Jawed Karim as a video-sharing website.
 The "www.youtube.com" was activated on Monday, Feb.14, 2005 AD.
 The first YouTube video, " Me at the zoo", was uploaded on April 23, 2005 AD.
 Viber, a instant messaging software was developed in December 2, 2010 AD.
 The Google company was officially lunched in 1988 AD. by Larry Page and
Sergey Brin.

108 New Gateway to Computer Science Book -9

Assignment

1. Select the correct answer from the given options.

a. Which of the following is a web browser?

i. Opera ii. Firefox iii. Chrome iv. All of the above

b. Which of the following is a search engine?

i. Google ii. Internet explorer iii. Opera iv. None of them

c. A software program that helps to present and explore content on the World Wide
Web.

i. Browser ii. Web site iii. Search engine iv. Home page

d. Which of the following is a service of internet that allows the users to search the
information and resources.

i. Search engine ii. Browser iii. E-Mail iv. Social media

e. Which of the following is the most basic function of a DNS server?

i. To translate a domain name into its respective IP address.

ii. To connect the internet

iii. To browse the web sites

iv. None of the above

2. Fill in the blanks with suitable words.

a. The Internet is a ………………… that allows computers on different kind
networks to interact with each other.

b. The process of using browser to view information on the internet is known as
browsing or ………….

c. ……………….. is a computer that runs websites. Web server is a computer
program that distributes web pages.

d. A Web site is the ollection of …………………… files such as text, graphics,
images, audio and videos.

e. A ………………… is also a specific type of Uniform Resource Identifier (URI).

f. ………… is the process of getting web pages, images and files from a web server.

g. DNS is an Internet service that translates domain names into …………………...

h. Cloud computing is the delivery of different services through the …………………

New Gateway to Computer Science Book -9 109

3. State whether the given statements are true or false.

a. The information stored on www is the collection of documents that are
interconnected with each other through the web links.

b. The default web browser may be different according the operating system that is
used.

c. Web browser is a service of internet that allows the users to search the information
and resources via the World Wide Web (WWW).

d. Web page is accessed by entering a URL address and may contain text, graphics,
and hyperlinks to other web pages and files.

e. Downloading is the process of sending web pages, images and files onto a web
server.

f. A file page is the initial or main web page of a website or a browser.

4. Write appropriate technical terms for the followings.

a. A software program that helps to present and explore content on the World Wide
Web.

b. It is a large scale, online store of information.

c. The browsers that provide a graphical user interface where the user can jump
from one web page to another web page by clicking on the hyperlink on a web
page.

d. A service of internet that allows the users to search the information and resources
via the World Wide Web (WWW).

e. The virtual location on WWW, which has several webpages and data files
accessible through a browser.

5. Write the full form of the followings.

TCP / IP , DNS , DARPA, ARPANET, FTP , HTTP, WWW, HTML, URL

6. Match the following.

Google.com Main page

Home page Web browser

Opera Collection of web pages

WWW Search engine

110 New Gateway to Computer Science Book -9

7. Answer the following questions.
a. What is internet? Write its uses.
b. List out the components of www.
c. What is a web browser? Write with examples.
d. Write down the types of web browser and define graphical browser.
e. What is a search engine? What is the use of search engine? Write with examples.
f. What is the use of web server? Define web site.
g. What do you mean by uploading and downloading?
h. Define URL and Home page.
i. Explain the domain name server.
j. What is cloud computing? Define cloud storage.
k. What are the services provided by the cloud computing?
Project Work
Search the given terms through Google search engine and prepare a shot note .
Uploading and Downloading, Cloud Storage, Mobile Computing

New Gateway to Computer Science Book -9 111

Lesson

8 Working with HTML

Inside the Lesson

 Introduction to HTML and its features
 Understanding tag and elements of HTML
 Creating and saving HTML document
 Structure of HTML
 Working with HTML tags

HTML stands for Hypertext Transfer protocol. Hypertext is text which contains links
to other text. It was first developed by Tim Berners-Lee in 1990 AD. It is used to create
electronic documents that are displayed on the World Wide Web. Every web page you
see on the Internet is written using one version of HTML code or another. HTML code
ensures the proper formatting of text and images so that internet browser displays them
as they are intended to look. Without HTML, a browser would not know how to display
text as elements, load images or other elements.

Features of HTML

 HTML is a document layout and hyperlink specification language.
 HTML tells the browser how to display the contents of a hypertext document.
 HTML is a language that supports multimedia and new page layout features even it
has its some limitations.
 HTML provides a small mark-up tag that helps to work with various font formatting
activities.
 HTML is a page-layout and hyperlink specification language.

HTML Tag

A tag is a coded HTML command that indicates how the part of web pages should
be displayed. HTML tags are the hidden keywords within a web page which
define how the web browser displays the content. Most of the HTML tags have

112 New Gateway to Computer Science Book -9

two parts, an opening and a closing part. For example, <html> is the opening tag
and </html> is the closing tag. The closing tag has the same text as the
opening tag, but has an additional forward-slash ( / ) character. Each HTML
file must have the essential tags for it to be valid, so that the web browsers can
understand it and display it correctly. The rest of the HTML file can contain as little or as
many tags as you want to display your content.

Elements of HTML

An HTML element is an individual component of the HTML document. It
represents semantics, or meaning. For example, the title element represents the title of the
document. Most HTML elements are written with a start tag and an end tag. The start tag
is called opening tag and the end tag is called closing tag.

HTML Tag Attributes

HTML tag attributes allow you to customise a tag, and are defined within the opening tag,
for example: <img src=”image1.jpg”> or <p align=”center”> ... </p>

Attributes are often assigned a value using the equals sign, such as border=”0” or
width= ”50%”, but there are some that only need to be declared in the tag like this:
<hr noshade>. Most attributes are optional for most tags, and are only used when
you want to change something about the default way a tag is displayed by the browser.
However, some tags such as the <img> tag has required attributes such as src and alt
which are needed in order for the browser to display the web page properly.

Creating and Saving the HTML File 113

 Open the computer system and open notepad text editor.
 Type some HTML tag as below.
<!DOCTYPE html>
<html>
<head>
<title> Sample HTML document </title>
</head>
<body>
<p> we are learning HTML! <p>
</body>
</html>

New Gateway to Computer Science Book -9

 Now save the file on your desktop or desired location with the extension as
"learing.html".
 Now you can open the file in a browser.
 Navigate to your file then double click on it.

 Browser will open your document.

Let’s Review

 HTML is used to create electronic documents that are displayed on the World
Wide Web.
 HTML tells the browser how to display the contents of a hypertext document.
 A tag is a coded HTML command that indicates how part of web pages should be
displayed.
 Each HTML file must have the essential tags for it to be valid, so that web
browsers can understand it and display it correctly.
 An HTML element is an individual component of the HTML document.
 HTML tag attributes allows you to customise a tag, and are defined within the
opening tag.

Structure of HTML

A basic HTML page is a document that typically has the file extension .html, though

HTML frequently appears

in the content of other file <!DOCTYPE html>
types as well. All HTML <html>
<head>
documents follow the same
<title>Page Title</title>
basic structure so that the </head>
browser that renders the file <body>
knows what to do. The
basic structure of an HTML <h1>Homepage Headline</h1>
document consists of 5 <p>This is a paragraph.</p>
elements: </body>

1. <!DOCTYPE>

2. <html>

3. <head>

4. <title>

5. <body>

114 New Gateway to Computer Science Book -9

<!DOCTYPE>: The first line of code, <!DOCTYPE html>, is called a doctype
declaration and tells the browser which version of HTML the page is written in. There are
a number of different doctype declarations that correspond to various versions of HTML.

<HTML>: The <html> element wraps around all of the other code and content in
our document. This element, known as the HTML root element, always contains one
<head> element and one <body> element.

<HEAD>: HEAD element is a container that can include a number of HTML elements
that are not visible parts of the page rendered by the browser.

<TITLE>:The <title> element is the only element that is required to be contained
within the <head> tags. The content within this element is displayed as the page title in
the tab of the browser and is also what search engines use to identify the title of a page.

<BODY>: There can only be one <body> element in an HTML document because this
element is the container that holds the content of the document.

Understanding Different HTML Tags

A tag is a command in a web page that tells the browser to do something. Tags are enclosed
in less than (<) and greater than (>) signs.

<HTML>: It is a container element that identifies the document as an HTML document.
It is also called root element.To create the html element, we can use an opening <html>
tag followed by a closing </html> tag. Everything else in the web page goes between
these starting and ending tags.The general structure is given below.

<HTML>

-------------- Document area
---------------

----------------
</HTML>

<HEAD> : The head element contains information about the web page. There are many
elements that you can put inside the head element, such as title , link, meta, script, etc. The
general structure is given below.

<head>

<title> Learning Computer is Fun. </title>

</head>

New Gateway to Computer Science Book -9 115

<TITLE>: The title element contains the title of the page. The title is displayed in the
browser’s title bar as well as in bookmarks, search engine results, and many other places.
The title should describe the page’s content briefly and accurately. The general structure
is given below.
<title> Learning Computer is Fun. </title>
<body> The body element appears after the head element in the page. It should contain
all the content of your web page such as text, images, and so on. All web pages have one
single body element. The general structure is given below.
<body>
(page content goes here....)

</body>

Sample l
<!DOCTYPE html>
<html>
<head>
<title> We are working with HTML. </title>
</head>
<body>
The content of the document goes here!
</body>
</html>

Document Formatting in HTML

Font Element

<font> : The <font> tag is used to change the format of the text on the web page. The
most important attributes are as follows:
 face: This indicates the type of font. The default font is Times New Roman. There are
other so many fonts like Verdana, Helvetica, Preeti, Arial, etc.
 size: This indicates the size of the text. The default text size in HTML document
is 3. It is used to set the absolute or relative value ranging from 1 to 7.
 color: This indicates the color of the text. Either the color name or the
six-characer color code (RGB value) may be used to specify color.
Syntax: <font size =“value” color = “color name” face
=“font name”> ……………</font>

116 New Gateway to Computer Science Book -9

Sample 2
<!DOCTYPE html>
<html>
<head>
<title> Title of the document</title>
</head>
<body>
<p>
<font size= ”2” color= ”#1c87c9”>Blue text</font></><p>
<font size=”3” color=”red”>Red text, font size increased.
</font></p>
<p> <font face=”arial” color=”#8ebf42”> Green text, typeface
changed.
</font></p>
</body></html>

Font style elements
<b> : The <b> tag will bold the text inside the tag.
Syntax: <b> ……………</b>
<i>: The <i> tag will italicize the text inside the tag.
Syntax: <i> ……………</i>
<u>: The <u> tag will underline the text inside the tag.
Syntax: <u> ……………</u>
<sup> : The <sup> tag converts the text into superscript.
Syntax: ^{……………}
<sub>: The <sub> tag converts the text into subscript.
Syntax: _{……………}
<big>:The <big> tag is used to display the text in a larger font as compared to rest

of the text.
Syntax: <big> ……………</big>
<small>: The <small> tag is used to display the text in a smaller font as compared

to the rest of the text.
Syntax: <small> ……………</small>
<br>: The <br> tag indicates a line break. This tag is most often used by itself,
without a corresponding closing tag.

Syntax: <br>

New Gateway to Computer Science Book -9 117

<p>: The <p> tag indicates a new paragraph. It is same as the <br> tag. This tag is
most often used by itself, without a corresponding closing tag.

Syntax: <p>

Sample 3
<!DOCTYPE html>
<html>
<head>
<title> working with font formatting element </title>
</head>
<body>
We are discussing html font formatting elements. <br><p>
<b> Making the text bold. </b><br>
<i> Making the text italic. </i><br>
<u> Inserting underline to the text </u><br><p>
I know the algebra formula a² + 2ab +
b²<br>
I can use science formula like H₂ SO ₄<br>
<P>
<big> This text is large </big><br>
<small> This text is small </small><br>
</body>
</html>

Let’s Review
 The basic structure of an HTML document consists of 5 elements. They are
<!DOCTYPE>, <html>, <head>, <title> and <body>.
 The first line of code, <!DOCTYPE html>, is called a doctype declaration
and tells the browser which version of HTML the page is written in.
 A tag is a command in a web page that tells the browser to do something.
 To create the html element, we can use an opening <html> tag followed by
a closing </html> tag.
 The body element appears after the head element in the page.
 The <font> tag is used to change the format of the text on the web page.
 The most important font attributes are font face, size and color.

118 New Gateway to Computer Science Book -9

Header Tags
HTML has six levels of heading tags. The header tags are written with in <hn> …</hn>,
where n is the level of the heading and can take the values from 1 to 6. We can write it
as <h1> which is the largest heading size, and <h6> which is the smallest heading size.
Syntax: <hn align = “align ion”> ……………</hn>
In the above syntax “align position” specifies the alignment of the heading to the left,
right or center.

Sample 4
<!DOCTYPE html>
<html>
<head>
<title> working with heading element </title>
</head>
<body>
<h1 align=”center”>This is h1 (largest) heading text.</
h1>
<h2 align=”left”>This is h2 text.</h2>
<h3 align=”right”>This is h3 text.</h3>
<h4> This is h4 text.</h4>
<h5> This is h5 text.</h5>
<h6> This is h6 text.</h6>
</Body> </HTML>

Paragraph Alignment Tags

The paragraph alignment uses <p> ……………</p> to indicate the paragraph. <P>
indicates the start of a new paragraph. It has the align attribute where align indicates the
alignment of the paragraph. We can apply three types of alignments such as left, center
and right.

Syntax: <P align = “align position”> ……………</P>

We can use it as given below.

<P ALIGN=LEFT>This is aligned left. This is the default.</P>

<P ALIGN=CENTER>This is aligned center.</P>

<P ALIGN=RIGHT>This is aligned right.</P>

New Gateway to Computer Science Book -9 119

Sample 5

<!DOCTYPE html>
<html>
<head>
<title> working with heading element </title>
</head>
<body>
<P ALIGN=LEFT>This is aligned left. This is the default.
</P>
<P ALIGN=CENTER>This is aligned center. </P>
<P ALIGN=RIGHT>This is aligned right. </P>
</Body> </HTML>

Working with Body Background Colour
The <body bgcolor> attribute assigns a background color for an HTML document.
To add a background color to a webpage you can use the <body bgcolor="######">
attribute where "######" specifies a color for the HTML document to display.
All major browsers support the <body bgcolor> attributes.

Syntax: <body bgcolor="color name" or "color RGB value">

Example: <body bgcolor="#af0000"> , where "#af0000" is the value for the red
colour. Instead of this we can also write as <body bgcolor="red">. Here, the
color value can be either a color name (like, red, blue, green) or a hexa value like,
#af0000.

Sample 6
<!DOCTYPE html>
<html>
<head>
<title> Background colour sample page</title>
</head>
<body bgcolor=”#af0000”>
<h1> This webpage has red colored background.</h1>
</body> </html>

120 New Gateway to Computer Science Book -9

Working Horizontal Line

The <hr> tag in HTML stands for horizontal line and is used to insert a horizontal line or a
thematic break in an HTML page to separate document sections. The <hr> tag is an empty
tag and it does not require an end tag. It is also used to separate content in an HTML page.
The table given below describes the <hr> tag attributes:

Attribute Value Description
Align • left Used to specify the alignment of the horizontal rule.
• centre
• right

noshade noshade Used to specify the bar without shading effect.

size pixels Used to specify the height of the horizontal rule.

width pixels Used to specify the width of the horizontal rule.

Syntax: <HR align = “align position” noshade color = “color name” size =
“pixel” width = “pixel”>

Example: HR align = “Center” noshade color = “red” size = “5” width = “25%”>

Sample 7

<!DOCTYPE html>
<html>

<head>
<title> HTML hr tag</title>
</head>
<body>
<p>There is a horizontal rule below this
paragraph.</p>

<hr>
<p>This is a horizontal rule above this
paragraph.</p>
</body>
</html>

New Gateway to Computer Science Book -9 121

Sample 8

<!DOCTYPE html>
<html>

<head>
<title> HR tag with attributes</title>
</head>
<body>
<p> Normal horizontal line.</p>
<hr>
<p> Horizontal line with height of 30 pixels</p>
<hr size=”30”>
<p> Horizontal line with height of 30 pixels and
noshade.</p>
<hr size=”30”noshade>
</body>
</html>

Working with Marquee

Marquee is a scrolling text displayed either horizontally across or vertically down on the
webpage depending on its settings. This can be done with the help of <marquee>………</
marquee> tag. It is one of the important tags introduced in HTML to support such
scrollable texts and images within a web page. The different attributes of <marquee> tag
are listed below.

Syntax: <MARQUEE behavior = "behavior name" direction = "direction way" bgcolor
="color name or value" scrolldelay = "scrolling time"> ……………………</marquee>

Example: <MARQUEE behavior = "slide" direction = "left" bgcolor ="red" scrolldelay
= "5"> ……………………</marquee>

Attribute Description
width
It provides the width or breadth of a marquee. For example
height width="10" or width="20%".

It provides the height or length of a marquee. For example height="20"
or height="30%".

122 New Gateway to Computer Science Book -9

direction This specifies the direction in which marquee should scroll. This can
be a value like up, down, left or right.
scrolldelay
scrollamount It provides a feature whose value will be used for delaying among
behavior each jump.
loop
bgcolor It provides a value for speeding the marquee feature.

vspace It provides the scrolling type in a marquee. That scrolling can be
like: sliding, scrolling or alternate.
hspace
This specifies how many times to loop.

It provides a background color where the value will be either the
name of the color or the value.

It provides a vertical space and its value can be like: vspace="20" or
vspace="30%"

It provides a horizontal space and its value can be like: vspace="20"
or vspace="30%"

Let’s Review

 HTML has six levels of heading tags. The header tags are written within <hn>
…….. </hn>.

 The paragraph alignment uses <p align> ……………</p> to indicate the
paragraph alignment.

 The <hr> tag in HTML stands for horizontal line and is used to insert a
horizontal line or a thematic break in an HTML page to divide or separate
document sections.

 Marquee is a scrolling piece of text displayed either horizontally across or
vertically down on the webpage depending on its settings.

Sample 9
<!DOCTYPE html>
<html>
<head>
<title> Learning marquee Tag</title>
</head>
<body>
<marquee> Sample of marquee text.</marquee>
</body>
</html>

New Gateway to Computer Science Book -9 123

Sample 10
<!DOCTYPE html>
<html>
<head>
<title> Learning marquee Tag</title>
</head>
<body>
<marquee width=”40%”>This example will take 40% width
</marquee>
</body> </html>

Sample 11
<!DOCTYPE html>
<html>
<head>
<title> Marquee Tag</title>
</head>
<body>
<marquee direction=”right”> This text will scroll from
left to right</marquee>
</body> </html>

Sample 12
<!DOCTYPE html>
<html>
<head>
<title> HTML marquee Tag</title>
</head>
<body>
<marquee direction=”up”>This text will scroll from bottom
to up </marquee>
</body> </html>

124 New Gateway to Computer Science Book -9

Sample 13

<!DOCTYPE html>
<html>
<head>
<title> HTML marquee Tag </title>
</head>
<body>
<marquee> This text will scroll from right to left
</marquee>
<marquee direction=”up”> This text will scroll from
bottom to top</marquee>
<marquee direction=”down”width=”250”height=”200”behavior=
”alternate” style=”border:solid”>
<marquee behavior=”alternate”>
This text will bounce
</marquee>
</marquee>
</body> </html>

List Element

HTML has several ways for specifying lists of information. List elements are used to
present a list of information in a well-formed and semantic way. There are three different
types of lists in HTML and each one has a specific purpose and meaning.

 Unordered List: It is used to group a set of related items without any particular
order. An unordered list is created by using the <ul> tag, and each list item starts
with the <li> tag.

 Ordered List: It is used to group a set of related items, in a specific order. <ol> tag
can be used for ordered list. This will use different schemes of numbers to list the
items.

 Definition List : The definition list created using <dl> tag. The <dl> tag is used
in conjunction with <dt> which defines the item in the list, and <dd> which
describes the item in the list. Definition list displays elements in definition form
like in dictionary. The <dl>, <dt> and <dd> tags are used to define description
list.

New Gateway to Computer Science Book -9 125

 <dl> tag defines the description list.
 <dt> tag defines data term.
 <dd> tag defines data definition (description).
Note: Inside a list item you can put text, line breaks, images, links, etc. You can also place
an entire list inside a list item to create a nested list.

Unordered List:

Syntax: <ul type="disc|circle|square">

Attribute Values

Value Description
disc default filled circle
circle an unfilled circle
square
a filled square

Sample 14

<!DOCTYPE html>
<html>
<head>
<title> HTML unordered list </title>
</head>
<body>
<ul type=”circle”>
<li> Dhading Bensi, Headquater of Dhading</li>
<li> Bidhur, Headquater of Nuwakoat</li>
<li> Bensisahar, Headquater of Lamjung</li>
<li> Hetauda, Headquater of Makawanpur</li>
</ul>
</BODY>
</HTML>

126 New Gateway to Computer Science Book -9

Ordered List:
Syntax: <ol type="1|a|A|i|I">

Value Description
1 Default decimal numbers like 1, 2, 3, 4 .......
a Alphabetically ordered list, lowercase like a, b, c, d ........
A Alphabetically ordered list, uppercase like A, B, C, D .....
i Roman numbers, lowercase like i, ii, iii, iv ..............
I Roman numbers, uppercase like I, II, III, IV .............

Sample 15
<!DOCTYPE html>
<html>
<head>
<title> HTML ordered list </title>
</head>
<body>
<ol type=”a”>
<li> Dhading Bensi, Headquater of Dhading</li>
<li> Bidhur, Headquater of Nuwakoat</li>
<li> Bensisahar, Headquater of Lamjung</li>
<li> Hetauda, Headquater of Makawanpur</li>
</Ol>
</BODY>
</HTML>

New Gateway to Computer Science Book -9 127

Definition List:

Sample 16

<!DOCTYPE html>
<html>
<head>
<title> HTML Definition list </title>
</head>
<body> <dl>
<dt> Dhading Bensi</dt>
<dd> The headquater of Dhading District</dd>
<dt> Bensisahar</dt>
<dd> The headquater of Lamjung District</dd>
<dt> Rampur, Palpa</dt>
<dd> The historical place of Palpa District</dd>
<dt> Illam</dt>
<dd> The place popular for tea garden</dd>
</dl> </body></HTML>

Sample 17
<!DOCTYPE html>
<html>
<body>
<ol>
<li> Computer Science </li>
<li> Environment Science </li>
<li> Optional Mathematics </li>
</ol>
<ol start=”10”>
<li> Computer Science </li>
<li> Environment Science</li>
<li> Optional Mathematics </li>
</ol>
</body> </html>

128 New Gateway to Computer Science Book -9

Sample 18

<!DOCTYPE html>
<html>
<body>
<dl>
<dt> HTML</dt>
<dd> It stands for Hyper Text Mark-up Language</dd>
<dt> WAN</dt>
<dd> It stands for Wide Area Network</dd>
<dt> MAN</dt>
<dd> It stands for Metro Area Network</dd>
<dt> SIM</dt>
<dd> It stands for Subscriber Identification Module
</dd>
</dl>
</body>
</html>

Hyperlink and Anchors

A hyperlink is an element in an HTML document that links to either another portion
of the document or to another document. On webpages, hyperlinks are usually colored
purple or blue and are sometimes underlined.We can also define hyperlinks as they are
special elements linked to another location, either in the same page, the same website or
an entirely different domain.

In HTML a hyperlink is created with the tag <a>, specifying the destination on the href
attribute. Therefore the text or elements before the closing tag </a> will be linked.

Anchor text is a type of hyperlink represented by plain text. Anchor text is very important
in search engine optimization. It is used to define the beginning and end of a hypertext
link. There are three anchor attributes you need to know to create functional hyperlinks.
These attributes are href, target, and download.

Syntax: <a href=”url name”>link text</a>

New Gateway to Computer Science Book -9 129

Sample 19

<!DOCTYPE html>
<html>
<body>
<h1>
Working with links
</h1>
<p>
<a href=”https://www.shubharambhapublication.com/html/”>
Visit our official website
</a>
</p>
</body>
</html>

In the above tag the href attribute specifies the destination address (https://www.
shubharambhapublication.com/html/) of the link. The link text is the visible part
(Visit our official website). Clicking on the link text will send you to the specified address

Let’s Review

 List elements are used to present a list of information in a well-formed and semantic
way.
 There are three different types of lists in HTML they are Unordered list,
Ordered list and Definition list
 The definition list is created using <dl> tag.
 A hyperlink is an element in an HTML document that links to either another
portion of the document or to another document.
 We can also define hyperlinks as they are special elements linked to another
location, either in the same page, the same website or an entirely different domain.
 In HTML a hyperlink is created with the tag <a>, specifying the destination on
the href attribute.
 Anchor text is a type of hyperlink represented by plain text.
 Anchor text is used to define the beginning and end of a hypertext link.

130 New Gateway to Computer Science Book -9

Creating Links.

Sample 20

Create a sample link with in various pages as given below.

Task 1: Design Home page as below and Task 2: Design Notice page as below
save it under file name home and save it under file name notice.

Home Page Notice Page
Welcome to our home page Welcome to our notice page
Click here for notice Back to home page
Click here for result Click here for result
Click here for admission Click here for admission

Task 3: Design result page as below and Task 4: Design admission page as below
save it under file name result. and save it under file name admission.

Result Page Admission Page
Welcome to our result page Welcome to our admission page
Back to home page Back to home page
Click here for notice Click here for notice
Click here for admission Click here for result

HTML code for home page HTML code for notice page

<!DOCTYPE html> <!DOCTYPE html>

<html> <body> <html> <body>

<Font color = “red”><b><h1> <Font color = “red”><b><h1>

<P align=center> Home Page <P align=center> Notice Page
</p></font></b></h1><br> </p></font></b></h1><br>

<h2> Welcome to our home <h2> Welcome to our Notice
page </h2><br> page </h2><br>

<A href = “notice.html”> <A href = “home.html”> Back
Click here for notice to home page </a><br>

</a><br> <A href = “result.html”>
Click here for result
<A href = “result.html”>
Click here for result </a><br>

</a><br> <A href = “admission.html”>
Click here for admission
<A href = “admission.html”>
Click here for admission </a><br> </body> </html>

</a><br> </body> </html>

New Gateway to Computer Science Book -9 131

HTML code for result page HTML code for admission page

<!DOCTYPE html> <!DOCTYPE html>

<html> <body> <html> <body>

<Font color = “red”><b><h1> <Font color = “red”><b><h1>

<P align=center> Result <P align=center> Admission
Page </p></font></b></h1> Page </p></font></b></h1>
<br> <br>

<h2> Welcome to our Result <h2> Welcome to our
page </h2><br> Admission page </h2><br>

<A href = “home.html”> Back <A href = “home.html”> Back
to home page </a><br> to home page </a><br>

<A href = “notice.html”> <A href = “notice.html”>
Click here for notice </a> Click here for notice </a>
<br> <br>

<A href = “admission.html”> <A href = “result.html”>
Click here for admission </ Click here for result</a>
a><br> <br> </body> </html>

</body> </html>

Working with Images in HTML

Images can be easily inserted at any section in an HTML page. We can insert image in the
web page by using <img> tag. The <img> tag is an empty tag, which means it can contain
only a list of attributes and it has no closing tag. We should use the <img> tag inside
<body>…</body> tag. Following is the simple syntax to use this tag.

Syntax: <img src = “Image URL” ... attributes-list/> In this syntax the src attribute is
used to add the image source.

Attributes

Attribute Description
align It specifies the alignment of an image according to surrounding
elements.
alt It specifies an alternate text for an image.
border It specifies the width of the border around an image.
height It specifies the height of an image.
src It specifies the URL of an image.
vspace It specifies the whitespace on top and bottom of an image.
width It specifies the width of an image.

132 New Gateway to Computer Science Book -9

Sample 21

<!DOCTYPE html>
<html>
<head>
<title> Inserting image Tag</title>
</head>
<body>
<img src=”tiger.png” alt=”Name of wild animal”
width=”200” height=”180”>
</body>
</html>

Working with Table

An HTML table consists of a collection of rows and columns. The intersection of a row
and a column is called a cell. A single row contains one cell for each column. The <table>
element in HTML is used for displaying tabular data. It allows arranging data like text,
images, links, other tables, etc. into rows and columns of cells.The HTML tables are
created using the <table> tag in which the <tr> tag is used to create table rows and <td>
tag is used to create data cells. The elements under <td> are regular and left aligned by
default.

Table Attributes

Attribute Description
align It specifies the alignment of a table according to surrounding text.
bgcolor It specifies the background color for a table.
border It specifies whether or not the table is being used for layout purposes.
cellpadding It specifies the space between the cell wall and the cell content.
cellspacing It specifies the space between cells.
frame It specifies which parts of the outside borders should be visible.
rules It specifies which parts of the inside borders should be visible.
summary It specifies a summary of the content of a table.
width It specifies the width of a table.
Height It specifies the height of a table.

New Gateway to Computer Science Book -9 133

Sample 22
<!DOCTYPE html>
<html> <head>
<title> Working with HTML Tables</title>
</head> <body>
<table border = “2”>
<tr>
<td> Student ID</td>
<td> Student Name </td>
</tr> <tr>
<td> 0441</td>
<td> Divyanshi Adhikari</td>
</tr> </table> </body> </HTML>

In the above code, the border is an attribute of <table> tag and it is used to put a border
across all the cells. If you do not need a border, you can use border = “0”.

Table Heading

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag,
which is used to represent actual data cell. The headings, which are defined in <th> tag
are centered and bold by default.

Sample 23
<!DOCTYPE html>
<html> <head>
<title> Table Header in HTML </title></head>
<body>
<table border = “1”>
<tr>
<th> Name</th>
<th> Salary</th>
</tr> <tr>
<td> Ram Malakar</td>
<td>20,000</td>
</tr> <tr>
<td> Kripa Duwadi</td>
<td>35,000</td>
</tr> </table> </body> </html>

134 New Gateway to Computer Science Book -9

Cellpadding and Cellspacing

Cellpadding and cellspacing helps to adjust the white space in your table cells. The
cellspacing attribute defines space between table cells, while cellpadding represents the
distance between cell borders and the content within a cell.

Sample 24
<html>
<head>
<title> HTML Table </title>
</head>
<body>
<table border = “1” cellpadding = “5” cellspacing = “5”>
<tr>
<th> Name</th>
<th> Salary</th>
</tr>
<tr>
<td> Ram Malakar</td>
<td> 20,000</td>
</tr>
<tr>
<td> Kripa Dubadi</td>
<td> 30,000</td>
</tr>
</table>
</body>
</html>

New Gateway to Computer Science Book -9 135

Colspan and Rowspan

You can use colspan attribute to merge two or more columns into a single column.
In a similar way, you can use rowspan if you want to merge two or more rows.

Sample 25
<!DOCTYPE html>
<html>
<head>
<title> HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = “1”>
<tr>
<th> Address</th>
<th> Name</th>
<th> Age</th>
</tr>
<tr>
<td rowspan = “2”> Dhading Bensi</td>
<td> Prayusha Nepal </td>
<td> 10 Years </td>
</tr>
<tr>
<td> Prem Nath Adhikari</td>
<td> 84 Years </td>
</tr>
<tr>
<td colspan = “3”>Birtamoad Jhapa</td>
</tr>
</table>
</body>
</html>

136 New Gateway to Computer Science Book -9

Table Backgrounds

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

Sample 26

<!DOCTYPE html>
<html> <head>
<title> HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = “1” bordercolor = “RED” bgcolor =
“Pink”><tr>
<th> Address</th>
<th> Name</th>
<th> Age</th>
</tr> <tr>
<td rowspan = “2”> Dhading Bensi</td>
<td> Prayusha Nepal </td>
<td> 10 Years </td>
</tr>
<tr>
<td> Prem Nath Adhikari</td>
<td> 84 Years </td>
</tr> <tr>
<td colspan = “3”>Birtamoad Jhapa</td>
</tr>
</table>
</body>
</html>

New Gateway to Computer Science Book -9 137

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.

Sample 27

<!DOCTYPE html>
<html> <head>
<title> Table Width and Height</title>
</head>
<body>
<table border = “2” width = “550” height = “200”>
<tr>
<td> Name of District</td>
<td> Capital City </td>
</tr>
<tr>
<td> Gorkha</td>
<td> Gorkha Bazaar</td>
</tr>
</table> </body> </html>

Let’s Review
 The <img> tag is an empty tag, which means it can contain only a list of attributes
and it has no closing tag.
 We should use the <img> tag inside <body>…</body> tag.
 The src attribute is used to add the image source
 An HTML table consists of a collection of rows and columns.
 The intersection of a row and a column is called a "cell".
 The <table> element in HTML is used for displaying tabular data.
 Table heading can be defined using <th> tag.
 Cellpadding and cellspacing help to adjust the white space in your table cells.
 We can use colspan attribute to merge two or more columns into a single column.
 We use rowspan if we want to merge two or more rows.
 We can set a table width and height using width and height attributes.

138 New Gateway to Computer Science Book -9

Working with Forms

The <form> element defines a form and attributes that determine the behavior of the form.
Each time you want to create an HTML form, you must start it by using this element,
putting all the contents inside.

There are various form elements available like text fields, text area fields,
drop-down menus, radio buttons, checkboxes, etc.The HTML <form> tag is used to create
form. The syntax is given below.

Syntax <form action = “Script URL” method = “GET|POST”> form elements like input,
textarea etc. </form>

Forms Elements

Text Input Controls: There are three types of text inputs used on forms. Let’s discuss
them below with some sample example.

Single Line Text Input Controls: It is used for items that require only one line of user
input, such as search boxes or names. Here is a basic example of a single-line text input
used to take first name and last name.

Sample 28

<!DOCTYPE html>
<html>
<head>
<title> Text Input Control</title>
</head>
<body>
<form>

First name: <input type=”text”name=”first_name”/>
<br>

Last name: <input type=”text”name=”last_name”/>
</form>
</body>
</html>

Password Input Controls: It is also a single-line text inputs but it masks the character as
soon as a user enters it.

New Gateway to Computer Science Book -9 139

Sample 29

<!DOCTYPE html>
<html>
<head>
<title> Password Input Control</title>
</head>
<body>
<form>

User ID : <input type=”text”name=”user_id”/>
<br>

Password: <input type=”password”name=”password”/>
</form>
</body>
</html>

Multi Line Text Input Controls : It is used when the user is required to give
details that may be longer than a single sentence.

Sample 30
<!DOCTYPE html>
<html>
<head>
<title> Multiple-Line Input Control</title>
</head>
<body>
<form>
Description :<br/>
<textarea rows=”5”cols=”50”name=”description”>

Enter description here...
</textarea>
</form>
</body>
</html>

140 New Gateway to Computer Science Book -9

Checkbox Control

Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox.

Sample 31
<!DOCTYPE html>
<html>
<head>
<title> Checkbox Control</title>
</head>
<body>
<form>
<input type=”checkbox”name=”maths”value=”on”> Maths
<input type=”checkbox”name=”physics”value=”on”> Physics
</form> </body>
</html>

Radio Button Control

Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but the type attribute is set to radio.

Sample 32
<!DOCTYPE html>
<html>
<head>
<title> Radio Button Control</title>
</head>
<body>
<form>
<input type=”radio”name=”subject”value=”maths”> Maths
<input type=”radio”name=”subject”value=”physics”> Physics
</form> </body>
</html>

New Gateway to Computer Science Book -9 141

Select Box Control

A select box is also called a drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more options.

Sample 33

‑<!DOCTYPE html>
<html>
<head>
<title> Select Box Control</title>
</head>
<body>
<form>
<select name = “dropdown”>
<option value = “SEE subject list of Nepal” selected>
SEE subject list of Nepal</option>
<option value = “Comp. English”>Comp. English</option>
<option value = “Comp. Nepali”>Comp. Nepali</option>
<option value = “Comp. Social Studies”>Comp. Social
Studies</option>
<option value = “Comp. Mathematics”>Comp.
Mathematics</option>
<option value = “Comp. Science”>Comp.Science</
option>
<option value = “Optional Computer Science”>
Optional Computer Science</option>
<option value = “Optional Mathematics”>Optional
Mathematics</option>
<option value = “Optional Population”>Optional
Population</option>
<option value = “Optional Science”>Optional Science
</option>
<option value = “Optional Environment Science”>
Optional Environment Science</option>
</select> </form>
</body> </html>

142 New Gateway to Computer Science Book -9

Sample 34

<!DOCTYPE html>
<html>
<head>
<title> Select Box Control</title>
</head>
<body>
<form>
<select name = “dropdown”>
<option value = “SEE subject list of Nepal” selected>
SEE subject list of Nepal</option>
<option value = “Comp. English”>Comp. English</option>
<option value = “Comp. Nepali”>Comp. Nepali</option>
<option value = “Comp. Social Studies”>Comp. Social
Studies</option>
<option value = “Comp. Mathematics”>Comp.
Mathematics</option>
<option value = “Comp. Science”>Comp.Science</
option>
<option value = “Optional Computer Science”>
Optional Computer Science</option>
<option value = “Optional Mathematics”>Optional
Mathematics</option>
<option value = “Optional Population”>Optional
Population</option>
<option value = “Optional Science”>Optional Science
</option>
<option value = “Optional Environment Science”>
Optional Environment Science</option>
</select>
</form>
</body>
</html>

New Gateway to Computer Science Book -9 143

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to use
a file upload box. It is also known as a file select box. This is created using the
<input> element but the type attribute is set to file.

Sample 35
<!DOCTYPE html>
<html> <head>
<title> File Upload Box</title>
</head>
<body>
<form>
<input type=”file”name=”fileupload”accept=”image/*”/>
</form> </body>
</html>

Button Controls

There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input> tag by setting its type attribute to button.

Sample 36
<!DOCTYPE html>
<html> <head>
<title> File Upload Box</title>
</head>
<body>
<form>
<input type=”submit”name=”submit”value=”Submit”/>
<input type=”reset”name=”reset”value=”Reset”/>
<input type=”button”name=”ok”value=”OK”/>
</form> </body>
</html>

144 New Gateway to Computer Science Book -9

Let’s Review

 The <form> element defines a form and attributes that determine the behavior of
the form.
 There are various form elements available like text fields, text area fields,
drop-down menus, radio buttons, checkboxes, etc.
 There are three types of text inputs used in forms they are single-line text
input controls, password input controls and multi-line text input controls
 Checkboxes are used when more than one option is required to be selected.
 Radio buttons are used when out of many options, just one option is required
to be selected.
 A select box is also called a drop down box which provides option to list down
various options in the form of drop down list, from where a user can select one or
more options.
 If you want to allow a user to upload a file to your web site, you will need
to use a file upload box which is also known as a file select box.

Expand your knowledge

 HTML 1.0 was released in 1993 AD.
 HTML 4.0 which is widely used and was a successful version of HTML before
HTML 5.0.
 Tim Berners Lee was the inventor of the web.
 Tim Berners Lee developed first web broswer in 1990 AD.
 Opera is a freewere web browser released on April 10, 1995 AD.

Assignment

1. Select the correct answer from the given options.

a. Which of the tags is used to start html tagging?

i. <BODY> ii. <HEAD> iii. <HTML> iv. <!DOCTYPE>

b. Which of the following is used in enclosed HTML tags?

i. < and > ii. ^ and ^ iii. % and % iv. None of them



New Gateway to Computer Science Book -9 145

c. Which of the following element contains the information about the web page?

i. <BODY> ii. <HEAD> iii. <HTML> iv. <!DOCTYPE>

d. Which of the following tag is suitable to make the text superscript?

i. <SUB> ii. <SUP> iii. <SPU> iv. <SPT>

e. How many levels of heading tags are there in HTML?

i. Five ii. Seven iii. Four iv. Six

f. Which of the following hexa colour values is correct for red colour?

i. “#af0000” ii. “#af1100” iii. “#af1110” iv. “#afg100”

g. Which of the following is the element of list element?

i. Unordered List ii. Ordered List iii. Definition list iv. All of them

h. Which tag is used for hyperlink?

i. <IMG SRC> ii. <A HREF> iii. <MARGIN> iv. <MARQUEE>

2. Fill in the blanks with suitable words.

a. HTML stands for …………………. which contains links to other text.

b. A basic HTML page is a document that typically has the file extension ……………

c. The …………….. tag is used to change the format of the text on the web page.

d. The <p> tag indicates a ……………………..

e. The ……………. tag is an empty tag and it does not require an end tag.

f. ……………. elements are used to present a list of information in a well-formed and
semantic way.

g. On webpages, …..........…are usually coloured purple or blue and are sometimes
underlined.

h. ………………. text is a type of hyperlink represented by plain text.

i. Cellpadding and …………… helps to adjust the white space in your table cells.

j. ……………. are used when out of many options, just one option is required to be
selected.

3. State whether the given statements are true or false:

a. HTML was first developed by Tim Berners-Lee in 1920 AD.

b. HTML elements are written with a start tag which is also called an opening tag.

c. A tag is a command in a web page that tells the browser to do something. Tags are
inclosed in less than (<) and greater than (>) signs.

d. The <BODY> element contains information about the web page.

e. HTML has ten levels of heading tags.

f. The <hr> tag in HTML stands for horizontal line and is used to insert a horizontal
line or a thematic break in an HTML page.

146 New Gateway to Computer Science Book -9

g. Marquee is a scrolling piece of text displayed either horizontally across or
vertically down on the webpage depending on its settings.

h. A hyperlink is an element in an HTML document that links to either another
portion of the document or to another document.

i. In HTML a hyperlink is created with the tag <IMG SRC>.

j. We can insert an image in the web page by using <img> tag. The <img> tag is an
empty tag.

4. Write appropriate technical terms for the followings.

a. It is a coded HTML command that indicates how parts of web pages should be
displayed.

b. The element is the only element that is required to be contained within the <head>
tags.

c. The tag that is used to change the format of the text on the web page.

d. This attribute is used to assign a background colour for an HTML document.

e. A scrolling piece of text displayed either horizontally across or vertically down on
the webpage.

f. These elements are used to present a list of information in a well-formed and
semantic way.

g. This tag is used to insert image in HTML.

h. The <table> element in HTML is used for displaying tabular data.

5. Match the following.

<HR> Movable text

<IMG SRC> Inserting table

< A HREF> Horizontal line

<TABLE> Inserting image

<MARQUEE> Hyperlink tag

6. Write down the function of following HTML tags.

a. <SUB> b. <U> c. <IMG SRC> d. <MARQUEE> e. <HR>

f. <FONT SIZE> g. <FORM> h. <A HREF> i. <TABLE> j. <TD>

7. Write down the HTML tag for the following tasks.

a. To make the text bold, Italic and insert underline.

b. To insert the image and change its size.

c. To change the font size using heading tag.

d. To change the font colour red, and face “Preeti”.

New Gateway to Computer Science Book -9 147

e. To change the paragraph.
f. To make a table with 3 rows and 3 columns.
g. To make the text movable from up to down and scroll.
h. To create a radio button and check box.
8. Answer the following questions.
a. What is HTML? Write down the features of HTML.
b. What is HTML tag?
c. What is the use of tag attribute?
d. Write down the structure of HTML.
e. Explain the HTML document elements.
f. What is a font element? Write its attributes.
g. What is a header tag? Write down the syntax for the header tag.
h. Which tag is used to insert horizontal line in HTML tag.
i. Define marquee with its attributes.
j. What is a hyperlink and an anchor text?
k. What are the various font elements? Explain in short.
Practical Work
Do the given task and show it to your teacher.
Task 1: Insert any three images in your page with their name.
Task 2: Type any three line texts. Make first line bold, second line italic and third line
underline.

Task 3: Type a text and apply it heading 1 and change colour as red with colour
value.

Task 4: Design a table as below.

Name Address Subject
Ramesh Maharjan Bhaktapur Computer
Shilpa Adhikari Chitwan OPT. Maths
Sunil Surkheti Palpa Geography
Madan Tharu Dang Population

Task 5: Create any four pages and create a link within the pages.

Task 6: Change the background colour of the page as green.

Task 7: Create password input control, check box control and radio button control
in your page.

Task 8: Create a file upload box in HTML.

148 New Gateway to Computer Science Book -9

Lesson

9 Working With CSS

Inside the Lesson

 Introduction to CSS
 Understanding CSS syntax
 CSS measuring unit
 Working with CSS colour
 Working with CSS background
 CSS font style
 CSS text and image
 CSS links and tables
 CSS border and margin
 CSS scrollbars

CSS stands for Cascading Style Sheets. It is a language that describes the style of an
HTML document like how HTML elements are to be displayed on screen. It can control
the layout of multiple web pages all at once. The external stylesheets are stored in CSS
files.

CSS Syntax

CSS is a set of rules that can be used to define what each of those elements will look. The
rules specify the display properties. A CSS comprises of style rules that are interpreted
by the browser and then applied to the corresponding elements in your document. CSS
rules can control many properties, called declarations, of an element. CSS declarations
are always contained in curly braces ({}) and each declaration will end in a semi-colon(;).
Each element is chosen in CSS by the ‘selector’ and defined in the ‘declaration’ by a
‘property’ and a ‘value.’

A CSS rule set contains a selector and a declaration block as given below. Let’s discuss
it in detail.

New Gateway to Computer Science Book -9 149