Scribd
Upload
61 views

CH - 6 - Creating - Website - Using - HTML 9TH

The document discusses HTML (Hypertext Markup Language), the code used to structure and present content on the web. It covers what HTML is, the basic structure of an HTML file with tags like <html>, <head>, <title>, and <body>. It also discusses different types of tags, attributes that provide more detail for tags, and ways to format text. The document provides examples of simple HTML code to create a basic web page and introduces some common tags for text styling and formatting pages.

Uploaded by

Cosine Music
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
61 views

CH - 6 - Creating - Website - Using - HTML 9TH

The document discusses HTML (Hypertext Markup Language), the code used to structure and present content on the web. It covers what HTML is, the basic structure of an HTML file with tags like <html>, <head>, <title>, and <body>. It also discusses different types of tags, attributes that provide more detail for tags, and ways to format text. The document provides examples of simple HTML code to create a basic web page and introduces some common tags for text styling and formatting pages.

Uploaded by

Cosine Music
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

6 Creating Web Sites

Using HTML

Learning Objectives
What is HTML?
  Adding Graphics/Images to Web page
 
About HTML Tags & Attributes
  Creating Marquee Text
 
Creating Ordered List
  Linking Web pages
 
Creating Unordered List
 

What is HTML?
HTML stands for Hyper Text Mark-up Language and is a 'secret code' that is used to create
the look and layout of all the documents on the web. Why do we call it the secret code?
Well, because everything on the web page is a result of hidden instructions called tags that
instruct the web browser how to display the text, images or color. Moreover, the web browser
doesn't display the tags on the web page but only what we write within tags is shown. This
is the reason enough to call it the secret code.

What is an HTML File?


• HTML file is a text file containing the markup tags.
• The markup tags instruct the web browser the
way a page would appear on the screen.
• HTML file must have a .htm or .html file extension.
• HTML file can be created using a simple text editor.
• HTML is not case sensitive which means you can
use either lowercase or uppercase letters.
• Output of the HTML file can be viewed through
any web browser software.

? Do You Know
• HTML was developed by scientist Tim Berners-Lee in 1990.
•  he standards for HTML are currently being developed by a World Wide Web Consortium
T
known as the W3C.

88 Brainy Gigabyte+ 8
HTML is a Standard Interface
It is important to understand that HTML is a standard interface. Specifically, these
recommendations have been published by an international consortium: the World Wide
Web Consortium (W3C), an organization in-charge of designing and maintaining the html
language. The official HTML specifications therefore describe not only the 'instructions' of
HTML, but also their implementation, i.e. their translation into computer programs to enable
the consultation of Web pages regardless of operating system or the architecture of the
computer.

Understanding HTML Tags


Tags are coded commands used to indicate the way your Web page should be displayed
on the browser. HTML Tags begin with a left-angle bracket (<) and end with a right-angled
bracket (>). The first word between
left angled bracket   <html>   right angled bracket
the angle brackets is the tag's
name i.e. element in the browser tag name
command.
An element(tag) may also be followed by attributes, which are the words describing properties
of the element and further instruct the browser specifically about that tag. Example: <font
size= “2”> (font is tag, size is its attribute and 2 is the value of the attribute).

About Attributes
An attribute is used to define the property or attribute
characteristics of an HTML tag and is placed inside the
<p align=“right“>
opening tag after tagname. A tag is the basic 'item'
and an attribute is some extra detail. Attributes are tag attribute name value/attribute
only contained in the opening HTML tags to the right property
of the element and are separated by a space and followed by an equal (=) sign. The value
that follows the equal sign is generally enclosed in quotes. Example: <font face= “Arial”
size=“2”>.

Container and Empty Tags


There are two types of tags:

Container Tag Empty Tag


Refers to a tag that contains an opening Refers to a tag that contains only an
as well as a closing tag. The container tag opening tag and does not need a closing
always wraps around text or graphics and tag. eg: <p> i.e. begins paragraph and
comes in a set i.e. with an opening and <br> break a line.
a closing tag: <html> opening tag, </
html> closing tag.
Creating Web Sites 89
The forward slash (/) in the tag tells the browser that the tag has ended and it is a closing
tag. On the other hand, the empty tag stands alone. The tag <br> is the one that adds a
line break. Empty tags need not be wrapped around and hence do not require a closing tag.
Therefore closing tags are optional in empty tags.
All HTML files should contain at least following four tags.
The HTML tag: The <html> tag is the most basic of all HTML tags and simply tells the
1. 
web browser that the page user is looking at is coded in HTML and user should interpret
it as such. <html> should be the first tag in your HTML document and the corresponding
closing tag, </html> should be the last. This opening <html> and closing </html> tag
informs the Web browser where the HTML document begins and ends.
2. The Head tag: The head tag can be used to give web browsers various types of
information, such as the page description and author name, as well as the page title. All
header information is included within the <head> and </head> tags. This tag is nested
within the HTML tag. The contents of the head tag are not displayed as a part of web
page on the browser.
3. The Title tag: The <title> tag allows you to set a short page heading and this is displayed
at the title bar of the web browser window. This tag is placed within the HEAD tag structure.
Between the <title> tags, you should write the title or name of your document.
The Body tag: All text within the HTML document body will be displayed by the web
4. 
browser for the visitor to see. Therefore it is important to put the body tags <body> and
</body> around all of the contents you want your web visitors to see. BODY comes after
the HEAD structure. Any text that you leave outside the <body> tags will not be displayed.

Creating a Simple Web Page


Step 1: Open Notepad.
Step 2: Type in the following text.

<html>
<head>
<title>My Page</title>
</head>
<body>
THIS IS MY FIRST WEB PAGE

</body>
</html>

Step 3: Save the file as 'mypage.htm'.


Step 4: Close the Notepad window.
90 Brainy Gigabyte+ 8
Step 5: Open the Internet browser. Select
'Open' or 'Open Page' in the File
menu of the browser window. A
dialog box will appear.
Step 6: Select ‘Browse’ and locate the
HTML file you just created i.e.
'mypage.htm'. Select it and click
'Open'.
Step 7: Click OK and the browser will
display the page.

Info
HTML tags are not case sensitive. It interprets both uppercase & lowercase letters as the same.

Knowing HTML 5
HTML 5 is the latest standard for HTML that was designed to replace both HTML 4 and XHTML. It
is specially designed to deliver rich content without the need of additional plug-ins. The current
version delivers everything from animation to graphics, music to movies and can also be used
to build complicated web applications. HTML 5 is designed to be used as cross-platform i.e.
you can use it on any platform such as personal computers, tablets, smart phones or even on
smart TV's.

Structure of an HTML 5 Document


The HTML 5 page follows the basic structure of the HTML document, where you must declare
the document type using <!Doctype html>. Then it reads the first tag i.e. <html>, which
eventually marks the beginning of an HTML 5 page.

<!Doctype html> The <!Doctype> declaration helps the browser to display a web page
correctly.
<html>
<head><title></title>
</head>
<body>
</body>
</html>

HTML Tags Covered in Brainy Gigabyte Plus Part 7


Tag Function
<html>…..</html> Encloses the entire HTML document.
<head>…</head> Encloses the title or linking etc. of the HTML document.
Creating Web Sites 91
<title>…</title> Displays the title of the document. This is used within <head> tag.
<body>….</body> Encloses the text, images or other objects to be displayed.
<hn>…</hn> Used to define page or paragraph heading. There are six levels.
<p> Begins paragraph, it leaves a line between paragraphs.
<br> A line break (this will move cursor to next line automatically)
<b>…</b> Boldface text
<u>…..</u> Underline Text
<I>……</I> Italicize Text
<font>…</font> Controls the appearance of the text.

Body Tag Attributes


Attribute Function

<body background = “image file name” > To set an image as the background for a
web page.
<body bgcolor="color name or code"> Specifies a background color for an
HTML page.
<body text="color name or code"> To control the text color in the body
of the web page.

Font Tag Attributes


Attribute Function
<font size= “number”> To set the font size from 1 to 7. (default is 3)
<font color= “color name/code”> To set the color of the text. (default is black)
<font face= “font name”> To specify the font family of the text. (default is Times
New Roman)

Table: Color Names with respective Hexadecimal Value


Color Name Hexadecimal Value Color Name Hexadecimal Value
Black #000000 Red #FF0000
White #FFFFFF Blue #0000FF
Yellow #FFFF00 Silver #C0C0C0

92 Brainy Gigabyte+ 8
Aqua (Cyan)  #00FFFF Magenta  #FF00FF
Green #008000 Gray #808080
Teal #008080 Purple #800080
Lime #00FF00 Olive #808000
Navy #000080

Info
Using Color Names
You can also use any one of 16 color names to specify background or font color. Besides black and
white, you can specify aqua, blue, gray, green, lime, magenta, maroon, purple, red, silver, olive,
yellow and teal in double quotes (" ") with the color attribute (color) and Font tag.

Example: Type the following in the Notepad window and observe the output in the
browser window.

<html>
<head>
<title>ABOUT LINUX</title>
</head>
<body background="penguin.jpg">
<h1 align="center"><font color="red"> WHAT
IS LINUX?</h1></font>
<font face="Comic Sans Ms" size = "4" color
= "blue">
<p>Linux is a free Unix-type operating
system for computer devices. The operating
system is what makes the hardware work
together with the software. Linux is
freely available for everyone.
<p>Like other operating systems, Linux has
a graphical interface and types of software Info
you are accustomed to using on MS-Windows,
such as MS-Office, have Linux equivalents. It is recommended to use GIF (Graphic
</font> Interchange Format) and JPEG (Joint
</body> Photographic Expert Group) image files
</html> for the background.

Creating Lists
The best way to communicate your information to others is to make a list of the available
information. HTML supports unnumbered and numbered lists.
Creating Web Sites 93
HTML broadly defines three types of lists:
1. 
Ordered List: It is also known as numbered list or sequential list.
2. Unordered List: Represents data in bulleted form. It is called bulleted list.
3. Definition List: Displays terms with corresponding definitions.

Definition
What is list?
Lists are used to group related pieces of information together, so that they are clearly associated
with each other and easy to read.

Ordered List
An ordered list is also called as numbered list where text is displayed in a sequence. The <ol>
(ordered list) tag defines a sequentially numbered list of items. It is used in conjunction with
the <li> tag (list item) that is used to tag individual list items in the list.
Example: To create a list with numbers.

<html>
<head><title> Internet Safety</title></
head>
<body>
<H1><font color="red"> INTERNET SAFETY
TIPS</h1></font>
<hrsize=3 color ="blue">
<ol><font face= “ Harlow Solid”>
<b>
<li> Don’t give out personal information
without your parents’ permission.
<li>Don’t share your password with anyone.
<li>Don’t agree to meet an online friend unless you have your parents’ permission.
<li>Don’t buy anything online without talking to your parents.
<li> Be careful and sure before you open an email attachment or download software.
</b></font>
</ol>
</body>
</html>

Type Attribute with <Ol> Tag


In ordered list, browser automatically starts the sequence with Arabic numerals as 1. We
can use the Type attribute in order to change the numbering style. In the <ol> tag, add the
94 Brainy Gigabyte+ 8
attribute TYPE = ?, replace ? with a value. Given below is a table for Type values used while
numbering an ordered list.

Value Style Sample


A Capital Letters A,B,C,D
a Lowercase Letters a,b,c,d
I Capital Roman Numerals I,II,III,IV,V
i Lowercase Roman Numerals i,ii,iii,iv,v
1 Arabic Numerals 1,2,3,4,5

Example: To use the type attribute with <OL> tag.

<html>
<head><title> Operating Systems</title></head>
<body>
<h1><font color="red" align="center"> TYPES OF OPERATING
SYSTEMS</h1></font>
<h3><font color="green">PROPRIETARY OS</h3></font>
<ol type ="a">
<li>MS-WINDOWS
<li>MAC OS X
</ol>
<h3><font color="blue"> OPEN SOURCE
OS</h3></font>
<ol type ="I">
<li>LINUX
<li>UBUNTU
<li>ReactOS
</ol>
</body>
</html>

Unordered List
The unordered list is a list of items in which each one is preceded by a 'bullet' (a distinctive
character; typically, a small black circle). The <ul> (unordered List) tag defines a bulleted list of
items. The <li> (list items) tag is nested inside the UL tag and defines each item within the list.

Type Attribute with <UL> Tag


In unordered list, browser automatically adds a solid circle as bullet with each <UL> tag item.
But we can change the bullet style by using Type attribute. The attribute may have either
Creating Web Sites 95
disc, circle or square shapes e.g. <ul type = “square”> Try each of these values with type
attribute.
Example: To make a bulleted list.

<html>
<head><title> Windows 10 </title></head>
<body>
<h1 align ="center"><font color="red" >ABOUT WINDOWS 10
</h1></font>
<ul type = square>
<font size= "5" face= “Arial” color =
“blue”>
<li> Start menu is back with start
button which was missing in Windows 8.
<li> Start menu has new look with live
tiles.
<li> Microsoft Edge replaces Internet
Explorer as default web browser.
<li>It supports Android applications.
</font>
</ul>
</body>
</html>

Adding Graphics to Web Page


What would a Web page look like without graphics? Pretty boring! In the early days the
Web was just like plain pages with
only text, in those days the Web's
main purpose was to exchange
information. By adding graphics,
you can enhance the look of web
pages. Two image file formats have
been developed to keep files small
in memory size with a high level of
picture quality.
• .gif files: graphic interchange
format
• .jpeg/jpg files: joint
photographic experts group

96 Brainy Gigabyte+ 8
The gif format pictures have transparent background and are good when you are working
with colored backgrounds. On the other hand jpg format pictures do not have transparent
backgrounds.

Image <IMG> Tag


To place an image in a Web page you will need to use the image tag, img stand for 'image'.
It instructs the browser that a picture will be placed on the web page with or without text.
There are two important things to remember about the image tag:
1. It's an empty tag (this means there's no closing tag but only a beginning tag).
2. It requires attributes to be effective just like the <font> tag.

SRC Attribute
This attribute signifies the image source and instructs the browser from where to get the
image. SRC stands for source. It is always recommended that when you place any image on
a Web page, your image file should be in the same directory where your HTML document is
saved.
<img src="filename.gif">

Align Attribute
By default the bottom of an image is aligned with the text. You can align images to the top
,middle, left or right of a paragraph using the align attribute with <img> tag.
<img src="computer.jpg"align="right">

Height & Width Attribute


We can also make sure that everything on our page appears as quickly as possible and at the
right place by specifying each image's width and height. By stating height and width of the
image, browser will leave the right amount of space for that image and return for the actual
image file later. If you do not specify the size, the browser will stretch it or reduce it to fit.
<img src="tree.jpg" width="200" height="150">
Example: Create the following web page using <image> tag with its attributes.

<html>
<head><title> Mobile Devices </title></head>
<body>
<h1 align =“center"><font color=“blue" >WHAT IS A MOBILE DEVICE?
</h1></font>
<img src= “tablets.jpg" align= “right" width= “150” height= “150” >
<font face="comic sans ms" size="4">

Creating Web Sites 97


<P>
A mobile device is basically any handheld
computer. It is designed to be extremely
portable, often fitting in the palm of
your hand or in your pocket. Some mobile
devices are more powerful and they allow
you to do many of the same things you
can do with a desktop or laptop computer.
These include tablet computers, e-readers
and smart phones.</font>
</body>
</html>

Marquee Text
The HTML <marquee> tag is used for scrolling a piece of text or image from right to left, left
to right, top to bottom or bottom to top when displayed on the browser.

Attribute Value Description


behavior scroll /slide/ alternate Defines the type of scrolling.
bgcolor color code or name Defines the background color of the scrolling text.
direction up/ down/ left/ right Defines the direction of scrolling the content.
height pixels or % Defines the height of marquee.

Example:

<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee
</marquee>
<marquee direction="up">The direction of
text will be from bottom to top.</marquee>
</body>
</html>

Linking Web Pages


You will probably have more than one page in your website. And, most likely you should
make a homepage and then create links to all the other pages of your website. By using
98 Brainy Gigabyte+ 8
hyperlink, all the web pages can be linked with each other. Through hyperlinks you can
link other types of files like, sound, video etc. These links allow us to connect documents
together in innovative ways.

<a> anchor tag


HTML uses the <a> (anchor) tag to create a link to another document. With this, one can
make clickable links between pages. But <a> tag by itself does not do anything. While
creating links to other pages or location, <a> tag includes the full Internet address or file
name of the other pages. For this we use <a href > tag.
The syntax for creating an anchor: <a href="url/filename.htm">Text to be displayed</a>
Same as using text, we can use an image as a hyperlink.
Syntax: <a href= “filename”<imgsrc=”image file name”>text</a>
Example: Linking web pages.

ubuntu.htm features.htm
<html> <html>
<head><title> Ubuntu </title></head> <head><title> Ubuntu </title></head>
<body> <body>
<h1 align ="center"><font color="blue"> <h1 align ="center"><font color="blue">
KNOWING UBUNTU</h1></font> FEATURES OF UBUNTU</h1></font>
<img src= "ubuntu.jpg" align= "right" <ol>
width="100" height="100"> <li> Easy to install.
<font face="comic sans ms" size="4"> <li> Minimun disk and memory space
Ubuntu is a Linux based open source required.
operating system. Its desktop looks <li>Supports all social networking
similar to MS- Windows.</font> services.
<p>Features of Ubuntu <a href="features. </body>
htm">CLICK</a>
</html>
</body>
</html>

Creating Web Sites 99


How To Send The Link Back?
If you want to send the link back from features.htm to the ubuntu.htm. Use the following
command in the features.htm
<a href= “../ubuntu.htm” > Return to the Home Page</a>
Here the (..) double dots indicate to go back to the previous/folder page.

Alink And Vlink Attributes


Alink is used to set the color for the active links(links that are currently being clicked on) in
a web page and vlink attribute is
used to set the color for the visited Info
link in a web page. Both these are • The color of a hyperlink is blue by default.
the attributes of the <body> tag. • By default alink is red color and vlink is purple color.

Example:
<html>
<head><title> Ubuntu </title></head>
<body alink="red" vlink= "blue">
<h1 align ="center"><font color="blue">
KNOWING UBUNTU</h1></font>
<img src= "ubuntu.gif" align= "right"
width="100" height="100">
<font face="comic sans ms" size="4">
Ubuntu is a Linux based open source
operating system. Its desktop looks
similar to MS- Windows.</font>
<p>Features of Ubuntu <a href="features.
htm">CLICK</a>
</body>
</html>

Now You Know


• HTML documents are created in Notepad and display the output in any web browser
program.
• HTML consists of text or image interspersed with special coded commands called tags.
• An Attribute defines a property for a particular tag and it has a value.
• Paragraphs in HTML are defined with the <p> tag.
• The 'align' attribute is used to place paragraphs or images to right, left or center with respect
to margin.

100 Brainy Gigabyte+ 8


• Ordered list is defined with the <oL> tag and Unordered list is defined with the <ul> tag.
• Each item in the list begins with the <li> tag.
• Color can be defined by using color name or by using respective hexadecimal value.
• Graphics can be inserted into a web page using the <img> tag.
• The most widely used graphic formats are GIF and JPEG.
• <img> stands for 'image’ that instructs the browser where an image will go on the page.
• <marquee> tag is used for scrolling text or image from right to left, left to right, top to bottom,
or bottom to top.
• Web pages can be linked with other web pages by using <a>(anchor)tag.
• href stands for hypertext reference and is an attribute of <a> tag.

Computer Lab Activity


ACTIVITY 1: C
 reate an ‘ONLINE SHOPPING TUTOR’ web site by linking following pages with Home
page.

mainpage.htm advantages.htm

homepage.htm
disadvantages.htm tips.htm
homepage.htm

<html>
<head>
<title>E-Shopping</title>
</head>
<body>

Creating Web Sites 101


<h2 align="center"><font color="blue"> WELCOME TO
THE WORLD OF E-SHOPPING</font></h2>
<hr color="red">
<marquee direction ="left" bgcolor="yellow">This site is created by students of
class VIII</marquee>
<img src="onlineshop.jpg" align="right" width="150" height="150">
<ol type=”1”>
<font size=4><b>
<li> WHAT IS E-SHOPPING <a
href="mainpage.htm">CLICK</a>
<li> ADVANTAGES OF E-SHOPPING <a
href="advantages.htm">CLICK</a>
<li> DISAVANTAGES OF E-SHOPPING<a
href="disadvantages.htm">CLICK</a>
<li>TIPS FOR SAFE E-SHOPPING<a
href="tips.htm">CLICK</a>
</ol>
</body>

</html>

mainpage.htm
<html>
<head>
<title>E-Shopping </title>
</head>
<body>
<h1 align="center"><font color="blue">
What is E-Shopping</font></h1>
<hr color="green">
<img src="eshop.jpg" align="left"
width="100" height="100">
<p><font face="Comic Sans MS"
color="red">
E-shopping/Online Shopping is a form
of electronic commerce which allows
consumers to directly buy goods or services from a seller over the Internet using a
web browser.</font>
<p><b>Home Page<a href="homepage.htm">CLICK</a>
</body>
</html>

102 Brainy Gigabyte+ 8


advantages.htm

<html>
<head>
<title>E-Shopping </title></head>
<body>
<h1 align="center"><font color="red">
ADVANTAGES OF E-SHOPPING</font></h1>
<hr color="blue">
<img src="eshoping.jpg" align="right"
width="200" height="200">
<ul>
<li>Saves time
<li>24/7 Availability
<li>Comparison of Prices and Products
<li>Easier to find discounts
<li>Save Fuel and Energy
</ul>
<p><b>Home Page<a href="homepage.htm">CLICK</a>
</body></html>

disadvantages.htm

<html>
<head>
<title>E-Shopping </title></head>
<body>
<h1 align="center"><font color="green">
DISADVANTAGES OF E-SHOPPING</font></h1>
<hr color="red">
<img src="shopping.jpg" align="right"
width="200" height="200">
<ul>
<li>Long Delivery Period
<li>High Shipping Cost
<li>Returning policies are not clear
</ul>
<p><b>Home Page<a href="homepage.htm">CLICK</a>
</body></html>

Creating Web Sites 103


tips.htm

<html>
<head>
<title>E-Shopping </title></head>
<body>
<h1 align="center"><font color="red"> TIPS FOR
SAFE E-SHOPPING</font></h1>
<hr color="blue">
<img src="eshop.jpg" align="right" width="200"
height="200">
<ol>
<li>Use Familiar Websites
<li>Never ever, ever buy anything online using
your credit card from a site that doesn't have SSL (secure sockets layer) encryption
installed.
<li>Always use OTP(One time password) option while using credit or debit cards.
<li>Regularly check your electronic statements of your credit card, debit card and
bank accounts.
</ol>
<p><b>Home Page<a href="homepage.htm">CLICK</a>
</body></html>

Observe the output and answer the following questions briefly.


a) What do you understand by the term ‘Home Page’?
____________________________________________________________________________________
b) Name the tag used to display the images on the browser window.
____________________________________________________________________________________
c) What will happen if the image file is not located in the folder where your html file is stored?
____________________________________________________________________________________
d) What will happen if the extension name of the image file name is missing?
____________________________________________________________________________________
e) Explain the purpose of using ‘align’ attribute with <img> tag.
____________________________________________________________________________________
f) What is the default alignment of any image on the browser window?
____________________________________________________________________________________
g) Write the syntax of the tag used to link web pages.
____________________________________________________________________________________
h) Can we use images to create hyperlinks, if yes, then explain how?
____________________________________________________________________________________
104 Brainy Gigabyte+ 8
Assessment Sheet
A. Tick () the correct option for the following statements.
1. The secret code language used to create the web pages for the web browser.

a) html b) attributes c) web codes

2. They instruct the web browser the way in which the web page is to be presented.

a) fonts b) tags c) attributes

3. The file extension name which HTML document must have.

a) .htm b) .html c) any of them

4. It defines the properties of the tag.

a) attribute b) styles c) font

5. The tag that is used to give specifications of the size, color and style of the text in a web page.

a) <body> b) <head> c) <font>

6. HTML tags always begin with this type of brackets.

a) left angled bracket b) right angled bracket c) left curly bracket

7. The <li> tag means one of these.

a) long integer b) less items c) list item

8. The format of the picture file that has transparent background.

a) gif b) jpg c) bmp

9. The list that defines sequentially numbered list of items.

a) unordered list b) ordered list c) definition list


10. The attribute used to change the shape of bullets in unordered list.

a) change b) shape c) type d) style

11. The tag that supports the 'align' attribute.

a) <p> b) <hr> c) <img> d) all of them

12. In the ordered list the sequence begins with these automatically in the browser.

a) Capital letter b) Arabic numbers c) Roman numbers

13. The most widely used graphic formats for the web pages.

a) gif & jpeg b) bmp & jpeg c) wmf & bmp


Creating Web Sites 105
B. Write the name of HTML tags with their respective attributes for the following jobs.
<body bgcolor="color name or code">, <img src =”filename” align = “center”>, <body
Help background = “image file name” >, <ul type = "disc">, < ol type = “i” >
Box <a href= “filename.htm”>text</a>, <p align= “center” >

1. To start a new paragraph and align it to the center. __________________

2. To set an image as web page background. __________________

3. To specify background color of the web page. __________________

4. To create a bulleted list with disc shape. __________________

5. To create a numbered list starting with lowercase roman numerals. __________________

6. To insert a graphic into the web page and align it to the right. __________________

7. To link one web page to another web page. __________________

C. Give one word answer for the following statements.


Help Box White, W3C, Tim Berners-Lee, Anchor, Solid Circle, Type

1. He is known as the 'father of web'. ______________

2. The organization responsible for designing and maintaining the HTML language. ______________

3. Full form of the <a> tag. ______________

4. The default background color of the web page. ______________

5. The default bullet type for the <ul> tag. ______________

6. The attribute used to change the styles of bullets in an unordered list. ______________

D. State whether the following statements are True or False. Rewrite the false statements correctly.
1. HTML documents are case sensitive.

_______________________________________________________________________________

2. Web browsers only accept the hexadecimal color codes.

_______________________________________________________________________________

3. There are four types of lists in HTML.

_______________________________________________________________________________

4. It is recommended to place the image used in the page and web document file in different folders.

_______________________________________________________________________________

106 Brainy Gigabyte+ 8


5. Bulleted list is created by using <OL> tag.

_______________________________________________________________________________

E. Write the full forms for the following abbreviations.


1. src _______________________________________________________________________

2. img _______________________________________________________________________

3. href _______________________________________________________________________

4. html _______________________________________________________________________

5. gif _______________________________________________________________________

6. jpeg _______________________________________________________________________

7. W3C _______________________________________________________________________

F. Correct the following html codes.


1. <h1 size=2 align=”centre” > This is my first web page<h3> _______________________________

2. < img src=”picture1”> _______________________________

3. <body backimage=”computer.jpg”> _______________________________

4. <a href="exitpage">Click to Exit<\a> _______________________________

G. Answer the following questions.


1. Explain the meaning of HTML with its features.
_______________________________________________________________________________

_______________________________________________________________________________

2. What are HTML tags?

_______________________________________________________________________________

_______________________________________________________________________________

3. What are attributes in HTML? Explain with examples.

_______________________________________________________________________________

_______________________________________________________________________________

4. What are the steps involved in creating a simple HTML document?

_______________________________________________________________________________

_______________________________________________________________________________

Creating Web Sites 107


5. What is ordered list and how is it different from the unordered list?

_______________________________________________________________________________

_______________________________________________________________________________

Application Based Questions


1 Anmo,l a student of class VIII wants to create the web page(as shown) related to the indoor and
outdoor activities. Help him to write the HTML code.
__________________________________

__________________________________

__________________________________

__________________________________

__________________________________

__________________________________

__________________________________

2 Chirag is developing a home page for his school web site. Read the following statements and suggest
him the correct options.

a) He needs to display the school building image in the center of the page.

______________________________________________________________________________

b) He wants to create horizontal rule of red color with thickness of 4 below the school name.

______________________________________________________________________________

c) What is the correct HTML tag for a new paragraph, he is confused with <p> or <br> tag?

______________________________________________________________________________

d) He needs to display facilities available in the school in a bulleted form.

______________________________________________________________________________

e) Which tag he should you use to create a hyperlink from home page to another page?

______________________________________________________________________________

108 Brainy Gigabyte+ 8

You might also like