Scribd
Upload
357 views

HTML Practical File - Chapter 8 Short Answer Type Questions

The document contains sample HTML code for various questions related to HTML tags and properties. It includes code snippets to format text, add links and tables. Questions cover topics like formatting paragraphs, displaying special characters, creating titled pages with different colors, fonts and alignments. Long questions provide code to create multi-page websites with navigation between pages.

Uploaded by

Vikas Shukla
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
357 views

HTML Practical File - Chapter 8 Short Answer Type Questions

The document contains sample HTML code for various questions related to HTML tags and properties. It includes code snippets to format text, add links and tables. Questions cover topics like formatting paragraphs, displaying special characters, creating titled pages with different colors, fonts and alignments. Long questions provide code to create multi-page websites with navigation between pages.

Uploaded by

Vikas Shukla
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

HTML PRACTICAL FILE - Chapter 8

Short Answer Type Questions


Q.1. write a HTML code to display a paragraph in red color in size 4 but its first letter should be of size 7
and of blue color.

Ans. <HTML>

<HEAD>

<TITLE> base font </TITLE>

</HEAD>

<BODY>

<FONT> Size = 7 color=”blue”> U </FONT>

<FONT> size = 4 color = “red”> sing the largest font </FONT>

</BODY>

</HTML>

Q.2. write a HTML code to display special characters.

Ans. <HTML

<HEAD>

<TITLE> secial characters </TITLE>

</HEAD>

<BODY>

<P> &lt; and &lt; and &gt; &amp; are special characters that are displayed

Using escape sequence. </P>

</BODY>

</HTML>

Long Answer Type Questions


Q.1. write down the HTML code to generate a page in the format and style shown below:

(A) title of the page is MAHARAJA: home.’

(B) background colour of the page is YELLOW’.

(C) link colour of the page should be GREEN’ and visited link colour be BLUE’.
(D) all font face in the page are ARIAL and BLACK except the heading !!MAHARAJA!!, which is in COURIER
face and of RED colour.

(E) pages linked with:

Indian dishes: vegetarian dishes as Indian.html internally named VEG non vegetarian dishes as
Indian.html internally named NONVEG

Continental dishes: vegetarian dishes as continental.html internally named VEG non vegetarian
disesascontinental. Html internally named NONVEG

(F) use ordered and unordered lists, wherever required.

(G) the horizontal rule before the bottom message of size “5” with NOSHADE attribute. Note: you can
assume any other attributes which are not otherwise mentioned above to produce a similar output.

Ans. <HTML>

<HEAD>

<TITLE> MAHARAJA: home </TITLE> </HEAD>

<BODY BGCOLOR = “YELLOW “LINK=”GREEN” VLINK = “BLUE”>

<FONT FACE=”COURIER” STYLE=”BOLD” COLOR=”RED” SIZE=”40’><P ALIGN = “CENTER”>


!!MAHARAJA!!</P> </FONT>

<FONT> FACE=”ARIAI’. STYLE= BOLD”

COLOR = “BLACK” SIZE = “5” <PALIGN=”ALIGN CENTER”> (a restaurant) </P> <BR> <ul type=”disc”> <LI>
India dishes </LI> <OL TYPE = “1”> <li>

<A HREF = “Indian. Html.# veg”> vegetarian dishes </A> </LI> <A HREF = INDIAN. Html#NONVEG”> non
vegetarian dishes</A>

>LI> </OL> <LI> continental dishes </li>

<OL type =”1”> <LI> <A HREF=”continental.

Html# VEG”> vegetarian dises</A>

<LI><LI> <A HREF=” continental.

A> </LI></OL> </UL> </FONT>

<HR NOSHADE SIZE = “5” <P

ALIGN=”CENTER”><font size”5”></font> </p> </body></HTML>

Q.2. write the HTML code for the following web page as seen on the internet explorer. The details are
given below: note the following points while generating the web page.

(A) title is oswaal publications.


(B) text color is red and visited link colour is pink.

(C) maximum size will be use for heading oswaal publications”.

(D) size of test of text is 7 and the title “computer, history and maths” will be in ordered list.

(E) there are two horizontal lines in the web page.

(F) their colour is black and thickness is 10 pixels. They are not shaded.

(G) the list items are hyperlinks and the linked files are:

S. No. Hyperlink text Linked file


1. Computer Naqvi.html
2. History Saif.html
3. Maths Maths.html
Ans. <HTML>

<HEAD> <TITLE> oswaal publications

</title> </head>

<body text = “red” vlink = “pink”> <center>

<H1> oswaal publication </H1>

<HR size = “10” color = “black”> <H4> India’s leading publications house </H4>

<HR size “10” color = “black”> </center>

<font size = “7”>

<OL type = “a”> <B> available questions bank </B>

<LI> <a href = “Naqvi.html”> computer </A>

</LI <LI>

<A href = “saif.html”> history </A> </LI> <LI>

<A href = “maths.html”> maths </A> </LI> </OL>

<BR> <BR> <BR> <center> design by <BR> M.saif Naqvi </center> </font> </body>

</HTML>

Q.3. consider the following points while writing the code. Background of the page is “pink”, link colour is
green, active link colour is blue and visited link colour is red. Title of the page is “social networking”
heading of the page is maroon image used is “SN.jpg” 1st paragraph colour is purple and size is 5 second
paragraph colour is black and size is 5. Caption of table is blue table border is blue and of size 2. The 4
links are one.html,two.html,three.html and [email protected].

Ans. <HTML> <HEAD> <TITLE> social networking </TITLE> </HEAD>


<BODY BGCOLOR = “pink” link = “green” alink = “bule” vlink = “red”>

<CENTER><H1> <FONT COLOR z=” maroon”> what is social networking?</font> </H1> </center> <IMG
SRC = “SN.jpg” ALIGN = “right” HEIGHT = 125 width = 250> <font color = “purple” size = 5>

Social networking is the grouping of individuals into specific groups like small rural communities or a
neighbourhood subdivision, if you will. Although social networking is possible in person, especially in
schools or in the workplace, it is most popular online.

</FONT> </P> <FONT COLOR = “black” size = 5> when it comes to online social networking, websites are
commonly used. These websites are known as social sites. </FONT><P> <CENTER><TABLE BORDER = 2
BORDERCOLOR = “blue” CELLSPACING = 5 > <FONT COLOR = “BULE”>

<CAPTION> list of major social networking websites </CAPTION> <TR> NAME </TH><TH> description /
focus </TH></TR> <TR> <TD> advogato </TD><TD> free and open source software developers </TD>
</TR> <TR> <TD> ANoblii </TD> <TD> books </TD> </TR>

<TR>

<TD> avatars united </TD> <TD> online games </TD> </TR> </TABLE> </CENTER>

<BR>

<UL><LI> <A> HREF = “one.html”> social networking and websites </A> <LI>

<A HREF = “two.html”> starting your own network </A> <LI> <A HREF= mailto:[email protected]”> us </A>
</UL>

</BODY>

</HTML>

Q.4. create a simple web page using HTML giving user of carbohydrates along with their source. Set the
following properties in the web page:

Background colour should be yellow

Paragraph text should be in green and justified. Font size should be large and font should be comic sans
MS.

Space between the lines should be 8.

Heading level one should be centre-aligned, blue colored, in uppercase, and in arial font.

Ans. <!DOCTYPE html>

<html>

<head>

<title> carbohydrates </title>


<style type = “text/css”>

Body {background-color: yellow}

P {color: green; text-align; justify; text-height: 8; font-family:” comic sans Ms;” font-size: large}

H1 {text-align: center; color; blue; text-transform: uppercase; font-family arial}

</style>

</head>

<body>

<!-use of carbohydrates. This is a comment->

<h1> carbohydrates </h1>

<hr>

<p> carbohydrates provide energy to the body. Some of the sources of carbohydrates are rich, fruits,
bread, corn, honey, and whole grains. </p>

</body>

</html>

Q.5. create two linked pages providing information on the structure of an atom. You should be able to
move from one page to another and back. The following details should be present on both the pages
respectively.

Page1: this page should give details about the structure of atom, as proposed by the scientist J. J.
Thomson. The name J. J. Thomson should be hyperlinked to the second page

Page2. This page should give details about J.J. Thomson.

Ans. let us create the first page detailing the structure of an atom and providing a hyperlink to the
second page. We have named this web page as atom html.

Atom.html

<!DOCTYPE html>

<html>

<head>

<title> structure of atom/</title>

</head>

<body>
<h2> the structure of an atom </h2>

Structure of atom, as proposed by the scientist <A href = Thomson. Html> J.J Thomson. </A>

<p> <A model for the structure of an atom. He proposed that: </p>

<ul>

<li> an atom consists of a positively charged sphere and the electrons are embedded in it, </li>

<li> the negative and positive charges are equal in magnitude, </li>

</ul>

<p> so, the atom as a whole is electrically neutral, </p>

</body>

</html>

The following is the HTML code for the second page, which gets displayed on clicking the hyperlink in
the page atom html. This page is named as Thomson html, as given is the code for atom html.

Thomson. Html

<!DOCTYPE html>

<html>

<head>

<title> J.J. Thomson </title>

</dead>

<body>

<h2> J.J. Thomson </h2>

<p> J.J. Thomson, a British

Physicist, was born in Cheetham hill. A suburd of Manchester, in December 1856. He. Was awarded
the noble prize in physics in 1906 for his work on the discovery of electrons. </p>

</body>

</html>

Q.6. create a web page to demonstrate how to create a link within the same page.

Ans. <!DOCTYPE html>

<html>
<body>

<h2> <a id = “top”> laws of motion </a> </h2> <br>

<h2> first law of motion </h2>

<p> an object continues to be in a state of rest or of uniform motion along a straight line unless acted
upon by an unbalanced force.</p>

<br> <br>

<h2> second law of motion </h2> <br> <br> <p> the rate of change of momentum of an object is
proportional to the applied unbalanced force in the direction of force. </p> <br> <br>

<P> to every action, there is an equal and opposite reaction and they act on two different bodies. </p>
<br> <br>

<a href=”top”> go to top</a>

</body> </html>

Q.7. write HTML code to illustrate all features of tables.

Ans.HTML Code:

<html>

<body>

<TABLE BORDER = “1” CELLPADDIN = “2”>

<CAPTION ALIGN = “Top”>

<b> specification table with hours and marks

<CAPTION>

<TR>

<TH ROWSPAN = “2”> Unit no. </TH>

<TH colspan = “4”> distribution of theory marks </TH>

/TR>

<TR>

<TD> R level /TD>

<TD> U level </TD>

<TD> A level </TD>

<TD> total marks </TD>


</TR>

<TR>

<TD> align = “center”> I </TD>

<TD> mathematics </TD>

<TD> align = “center”> 2<</TD>

<TD> align = “center”>4</TD>

<TD> align = “center”>4</TD>

<TD> align = “center”>0</TD>

<TD> align = “center”>8</TD>

</TR>

<TR>

<TD> align = “center”>II</TD>

<TD> align = “center”>science</TD>

<TD> align = “center”>6</TD>

<TD> align = “center”>0/TD>

<TD> align = “center”>2</TD>

<TD> align = “center”>6</TD>

<TD> align = “center”>8</TD>

</TR>

<TR>

<TD> align = “center”>III</TD>

<TD> align = “center”>English</TD>

<TD> align = “center”>6</TD>

<TD> align = “center”>4</TD>

<TD> align = “center”>8</TD>

<TD> align = “center”>0</TD>

<TD> align = “center”>12</TD>

</TR>

<TR>
<TD> align = “center”>IV</TD>

<TD> align = “center”>social science</TD>

<TD> align = “center”>8</TD>

<TD> align = “center”>2</TD>

<TD> align = “center”>4</TD>

<TD> align = “center”>8</TD>

<TD> align = “center”>14</TD>

</TR>

<TR>

<TD> align = “center”>V</TD>

<TD> align = “center”>languages</TD>

<TD> align = “center”>10</TD>

<TD> align = “center”>4</TD>

<TD> align = “center”>4</TD>

<TD> align = “center”>6</TD>

<TD> align = “center”>14</TD>

</TR>

<TR>

<TD> align = “center”>VI</TD>

<TD> align = “center”>computer applications </TD>

<TD> align = “center”>10</TD>

<TD> align = “center”>4</TD>

<TD> align = “center”>4</TD>

<TD> align = “center”>6</TD>

<TD> align = “center”>14</TD>

</TR>

<TR>

<TD> align = “center”>total</TD>

<TD> align = “center”>42</TD>


<TD> align = “center”>18</TD>

<TD> align = “center”>26</TD>

<TD> align = “center”>26</TD>

<TD> align = “center”>70</TD>

</TR>

</TABLE>

</body>

</html>

Output:

Specification table with Hours and Marks

Unit Unit Title Teaching Distribution Of Marks


No. Hours theory

I Mathematics 2 4 4 0 8
II Science 6 0 2 6 8
III English 6 4 8 0 12
IV Social 8 2 4 8 14
science
V Languages 10 4 4 6 14
VI Computer 10 4 4 6 14
applications
Total 42 18 26 26 70

Q.8. create a static web page which defines all text formatting tags of HTML in tabular format code

Ans. <html>

<body>

<center>

<table border = 1>

<caption align = “top”><font size = “+2” color = “red”> text formatting tags</font></caption>

<tr>

<th> HTML tag </th>

<th> output </th>

</tr>

cbsepractice.in
<tr>

<td> normal text </td>

<td> hello world </td>

</tr>

<tr>

<td> font & its attributes </td>

<td> <font size = “+2” color = “#REGGBB”>

Hell world

</font></td>

</tr>

<tr>

<td>&lt; B& gt;</td>

<td> <B> bold </B></td>

</tr>

<tr>

<td>&lt; B& gt;</td>

<td> <I> italic </I></td>

</tr>

<tr>

<td>&lt; U& gt;</td>

<td> <U> underline </U></td>

</tr>

<tr>

<td>&lt; EM& gt;</td>

<td> <EM> emphasis </EM></td>

</tr>

<tr>

<td>&lt; STRONG& gt;</td>

<td> <STORNG> STRONG </STRONG></td>


</tr>

<tr>

<td>&lt; TELETYPE& gt;</td>

<td> <TT> TELETYPE </TT></td>

</tr>

<tr>

<td>&lt; CITE& gt;</td>

<td> <CITE> CITATION </CITE></td>

</tr>

<tr>

<td>&lt; STRIKE& gt;</td>

<td> <STRIKE> strike-through text</STRIKE></td>

</tr>

<tr>

<td>&lt; BIG& gt;</td>

<td> <BIG> text in a big font </BIG></td>

</tr>

<tr>

<td>&lt; SMALL& gt;</td>

<td> <SMALL> text in a small </SMALL></td>

</tr>

<tr>

<td>&lt; SUB& gt;</td>

<td> <SUB> b </SUB></td>

</tr>

<tr>

<td>&lt; SUP& gt;</td>

<td> <SUP> b </SUP></td>

</tr>
</table>

</body>

</html>

Output:

Text formatting tags

HTML tag output


Normal text Hello world
Font & its attributes Hello world
<B> Bold
<I> Italic
<U> Underline
<EM> Emphasis
<STRONG> Strong
<TELETYPE> Teletype
<CITE> Citation
<STRIKE> Strike-trough text
<BIG> Text in a big font
<SMALL> Text in a small font
<SUB> ab
<SUP> ab

Q.9. create employee registration webpage using HTML form object code:

Ans. <html>

<body>

<center>

<BR>

<font size = “+3” color = “red”> employee registration form </font>

<form method = “post” action = “prac.html”>

<table>

<tr>

<td></td>

<td> <input type = radio name = initial checked> Mr.

<input type = radio name = initial> Mrs.

<input type = radio name = initial> Ms.</td>


</tr><tr>

<td> first name </td>

<td> <input type = text name = fn placeholder = “first name”></td>

</tr><tr>

<td> last name </td>

<td> <input type = text name = in placeholder = “last name”></td>

</tr><tr>

<td> mail address 1</td>

<td> <input type = text name = add1></td>

</tr><tr>

<td> mail address2</td>

<td> <input type = text name = add2></td>

</tr>city<tr>

<td> <input type = text name = ct></td>

</tr><tr>

<td> state </td>

<td><select name = state>

<option value = “Tamilnadu” selected> TamilNadu

<option value = “Maharashtra” > Maharashtra

<option value = “Karnataka”> Karnataka

<option value = “Delhi”> Delhi

</select>

</td>

</tr><tr>

<td> zip</td>

<td> <input type = text name = zp></td>

</tr> <tr>

<td> upload photo </td>

<td> <input type = file name = photo> </td>


</tr> <tr>

<td>E-Mail </td>

<td> <input type = text name = email size = 30></td>

</tr> <tr>

<td> mobile </td>

<td> <input type = text name = mob placeholder = “+91”></td>

</tr> <tr>

<td> languages known </td>

<td> <input type = checkbox name = lk value = Tamil

Checked>Tamil</td>

Computer applications 2020

</tr><tr>

<td> </td>

<td> <input type = checkbox name = lk value = Hindi checked>Hindi</td>

</tr><tr>

<td></td>

<td> <input type = checkbox name = lk value = English checked>English </td>

</tr><tr>

<td></td>

<td><input type = checkbox name = lk value = Marathi>Marathi </td>

</tr><tr>

<td> additional information </td>

<td> <textarea name = add rows = 3 cols = 20 placeholder = “optional” wrap><textrarea></td>

</tr><tr>

<td></td>

<td> <input type = submit value = submit> &nbsp; <input type = reset value = reset> </td>

</table>

</form>

</body>
</html>

Q.10. apply style sheet in web page. [inline, embedded and linked] code

Ans. ext.css

Hr

{Color:sienna;}

{margin-left:20px;}

Body

{background-image: url(“sheet.jpg”);}

Stylesheet.html

<html>

<head>

<link rel = “stylesheet” type = “text/css” href = “ ext.css”>

<style>

H1

{background color:#6495ed;}

{background color:#e0ffff;}

Div

{background color:#b0c4de;}

</style>

</head>

<body>

<h2> internal, external & inline style! </h1>

</div>

<p style = “color : red; margin-left : 20px;”> hell world.</p>

</body>

<html>

Download other chapter's solutions

You might also like