You are on page 1of 24

WEB TECHNOLOGY Lab Programs and Viva Questions

1. Write a HTML program illustrating text formatting.

TextFormatting.html

<html><head> <title> Text Tags </title>

</head> <body> <center>

<h1 align="center">To illustrate text formatting tags </h1> <hr color="red">

<P> <marquee behavior="alternate"> This is an alternate Marquee text </marquee>

<p> This is <i> italized </i> </p>

<p> This is <u> underlined </u> </p>

<p> This is <b> bold </b> </p>

<p> This is <em> emphasized </em> </p>

<p>This is <Strong> Strong Text </strong> </p>

<p> This is <s> striked text </s> </p>

<p> This is <code> computer code </code> </p>

<p> This is <sup> superscript </sup> code </p>

<p> This is <sub> subscript </sub> code </p>

<p> This is <big> big text </big> </p>

<p> This is <small> small text </small> </p>

</center>

</body>

</html>

Output:

Page 139
WEB TECHNOLOGY Lab Programs and Viva Questions
2. Prepare a sample code to illustrate links between different sections of the page.

<html>
<title>Intra document linking</title>
<body>
<h1>Table of contents</h1>
<ol>
<li><a href=#intro>Introduction</a>
<li><a href=#desc>Description</a>
<li><a href=#code>Code</a>
<li><a href=#con>Conclusion</a>
</ol>
<br><br><br><br><br><br><br><br><br>
<h1><a name=intro>Introduction</a></h1>
This is the introduction part. It tells about links and how to create intra links with in the document.
This is part of html.Html means hyper text markup language.
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><h1><a name=desc>Description</a></h1>
This is the description part. It tells about links and how to create intra links with in the document. This
is part of html.Html means hyper text markup language.
<br><br><br><br><br><br><br><br><br>
<h1><a name=code>Codes</a></h1>
This is the codes part.It tells about links and how to create intra links with in the document. This is
part of html.Html means hyper text markup language.
<br><br><br><br><br><br><br><br><br>
<h1><a name=con>Conclusion</a></h1>
This is the conclusion part. It tells about links and how to create intra links with in the document. This
is part of html.Html means hyper text markup language.
</body>
</html>
OUTPUT:

Page 140
WEB TECHNOLOGY Lab Programs and Viva Questions
3. Create a simple HTML program to illustrate three types of lists.

list.html

<html> <head> <title> Three Types of List </title>


</head>
<body>
<hr color="red">
<h3 align="center"> To illustrate unorder list tags </h3>
<hr color="red">
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<hr color="green">

<h3 align="center"> To illustrate ordered list tags </h3>

<hr color="green">
<ol><li>Coffee</li>
<li> Tea
<ol type= "a">
<li> Black tea</li>
<li>Green tea</li>
<ol type= "i" >
<li> China</li>
<li>Africa
</li>
</ol>
</ol>
<li>
Milk
</li>
</ol>

<hr color="blue">

Page 141
WEB TECHNOLOGY Lab Programs and Viva Questions
<h3 align="center"> To illustrate A Definition List </h3>

<hr color="blue">

<dl>
<dt>Amaravathi
</dt>
<dd>
-Capital City of Andhra Pradesh
</dd>
<dt>Kurnool</dt>
<dd>-Old Capital city of Andhra Pradesh
</dd>
</dl>
</body>
</html>

OUTPUT:

Page 142
WEB TECHNOLOGY Lab Programs and Viva Questions
4. CREATE NESTED TABLE TO STORE YOUR CURRICULUM VITAE.

cv.html:
<html> <head> <title> Table tag </title> </head>
<body>
<center>
<h4>Bio-Data Form </h4>
<table border="2" cellpadding="3" cellspacing="3">
<tr>
<th colspan=2>Name</th><td colspan=2>Ayaan Shaik</tr>

<tr> <th colspan=2>Date of Birth</th><td colspan=2>18-03-1989</tr>

<tr> <th colspan=2>Gender </th><td colspan=2>Male</tr>


<tr> <td rowspan=3>Address <td>H.No:<td colspan=2>41-648A</tr>
<tr><td>Street:<td colspan=2>Near II Town Polic station, Kothapeta</tr>
<tr><td>Village/Town:<td colspan=2>kurnool</tr>
</tr>
<tr> <td colspan=2 rowspan=2>Telephone numbers<td>Landline<td>Mobile
<tr><td>08518-230094<td>99999 24365

<tr> <td colspan=4 align='center'>Educational Qulaifications</tr>


<tr><th>Class<th>Place of Study<th>Period of Study <th>Percentage
<tr><td>10th <td>St.Jospeh's,kurnool<td>2003-2004<td>82.75
<tr><td>intermediate <td>Osmania College<td>2004-2006<td>87.50
<tr><td>Degree (BCom(CA)) <td>Nandanam Degree College<td>2006-2009<td>82.75

</table>
</center>
</body>
</html>

Output:

Page 143
WEB TECHNOLOGY Lab Programs and Viva Questions
5. Create a help file as follows:

Main.html:
<html> <frameset rows="20%,80%">
<frame src="title.html" name=f1>
<frameset cols="30%,70%">
<frame src="contents.html" name=f2>
<frame src="" name=f3>
</frameset></frameset>
</html>

title.html:
<html> <body bgcolor="yellow"><font face="Old English Text MT" size=20>
<Marquee><u>Internet Technology Terms</u></marquee>
</body>
</html>

contents.html:
<html> <body bgcolor="orange"><font face="Matura MT Script Capitals" size="12">
<a href="www.html" target=f3> WWW or WEB </a><br><br>
<a href="browser.html" target=f3> WEB BROWSER </a><br><br>
<a href=" webcommerce.html" target=f3>WEB COMMERCE</a>
<a href=" ethernet.html" target=f3>ETHERNET</a>

</body>
</html>

www.html
<html> <body><font face="Matura MT Script Capitals" size=15>

<p> The world wide web is known as WWW or W3 or Web. The world wide web is an architectural
frame work for accessing linked documents and repository of information spread all over the Internet.
The WWW has a unique combination of flexibility, portability and user-friendly features that
distinguish it from other services provided by the Internet. The main reason for its popularity is the

Page 144
WEB TECHNOLOGY Lab Programs and Viva Questions
use of a concept called hypertext. Hypertext is a new way of information storage and retrieval, which
enables authors to structure information in novel ways. An effectively designed hypertext document
can help users rapidly locate the desired type of information from the vast amount of information on
the Internet. Hypertext documents enable this by using a series of links. A link is a special type of item
in a hypertext document, which connects the document to another document that provides more
information about the linked item.

<p>Hypertext documents on the Internet are known as Web pages. Web pages are created by using a
special language called hypertext markup language (HTML). HTML is becoming a de-facto industrial
standard for creating Web pages.

<p>The WWW uses the client-server model, and an Internet protocol called hypertext transport
protocol (HTTP) for interaction between the computers on the Internet. Any computer on the
Internet, which uses the HTTP protocol is called a Web server and any computer, which can access
that server is called a Web client.

</body> </html>

browser.html
<html> <body><font face="Matura MT Script Capitals" size=15>

<p> An internet browser, also known as a web browser or simply a browser, is a software program
that you use to access the internet and view web pages on your computer. You can think of your
browser as your gateway to the internet. If you want to enter online sweepstakes, for example, you
must first open the giveaways' websites in your internet browser.

The main purpose of an internet browser is to translate, or render, the code that websites are
designed in into the text, graphics, and other features of the web pages that we are all used to seeing
today.

</body></html>>

webcommerce.html:
<html> <body><font face="Matura MT Script Capitals" size=15>
<p> E-commerce is a transaction of buying or selling online. Electronic commerce draws on
technologies such as mobile commerce, electronic funds transfer, supply chain management, Internet
marketing, online transaction processing, electronic data interchange (EDI), inventory management
systems, and automated data collection systems. Modern electronic commerce typically uses the
World Wide Web for at least one part of the transaction's life cycle although it may also use other
technologies such as e-mail. Typical e-commerce transactions include the purchase of online books
(such as Amazon) and music purchases (music download in the form of digital distribution such as
iTunes Store), and to a less extent, customized/personalized online liquor store inventory services.[1]
There are three areas of e-commerce: online retail, electric markets, and online auctions
</body></html>

ethernet.html:
<html> <body><font face="Matura MT Script Capitals" size=15>
<p>

Ethernet is the most widely installed local area network (LAN) technology. Ethernet is a link layer
protocol in the TCP/IP stack, describing how networked devices can format data for transmission to

Page 145
WEB TECHNOLOGY Lab Programs and Viva Questions
other network devices on the same network segment, and how to put that data out on the network
connection. It touches both Layer 1 (the physical layer) and Layer 2  (the data link layer) on the OSI
network protocol model. Ethernet defines two units of transmission, packet and frame. The frame
includes not just the "payload" of data being transmitted but also addressing information identifying
the physical "Media Access Control" (MAC) addresses of both sender and receiver, VLAN tagging and
quality of service information, and error-correction information to detect problems in transmission.
Each frame is wrapped in a packet, which affixes several bytes of information used in establishing the
connection and marking where the frame starts.

</body></html>

OUTPUT:

Page 146
WEB TECHNOLOGY Lab Programs and Viva Questions
6. Illustrate the procedure of creating different types stylesheets.

cas.css

a:link{color:black;}

a:visited{color:pink;}

a:active{color:red;}

a:hover{color:green;}

.right {text-align:center;text-decoration:underline;font-weight:bold;color:blue;font-family:comic sans


ms;font-size:30; }

.image {text-align:left;font-family:"monotype corsiva";

font-weight:10;}

.image1 {background-image:url("C:\Documents and Settings\AllUsers\My Documents\My Pictures\


master_basha.jpg");

background-attachment:fixed;background-repeat:no-repeat;width:150;height:150; }

table { align:center;border:10;border-style:ridge;border-color:yellow;}

ABC.html
<html>
<head>
<link rel="stylesheet" href="cas.css" type="text/css">
<style>
.xlink{ text-decoration:none;font-weight:bold;cursor:crosshair;}
.ylink{text-decoration:underline;font-weight:bold;cursor:help;}
</style>
</head>
<body class="image">
<p style="text-align:right;">
<a href="registration.html" class="xlink"> RegLink</a>&nbsp;&nbsp;
<a href="topframe.html" class="ylink"> Help Link</a></p><p class="right">MASTER MAHABOOB
BASHA</p>
<div style="position:relative;font-size:90px;z-index:5;color:purple;">DEPARTMENT</div>

<div style="position:relative;font-size:50px;z-index:1;top:-70;left:5;color:blue;">CS</div>
<div style="position:relative;font-size:90px;z-index:1;color:purple;">MASTER KING</div>
<div style="position:relative;font-size:50px;z-index:5;top:-70;left:5;color:blue;">CS</div><table
align="center" class="image1"><tr><td> Fruits</td><td> Mango</td></tr>
</table></body></html>

Output:

Page 147
WEB TECHNOLOGY Lab Programs and Viva Questions

7. Write a script to find the factorial of a given number using functions.

Fact.html
<html> <head> <script type="text/javascript">
function factorial(f,n)
{
l=1;
for(i=1;i<=n;i++)
l=l*i;
f.p.value=l;
Page 148
WEB TECHNOLOGY Lab Programs and Viva Questions
}
</script> </head>
<form>
number:<input type="text" name="t"></br>
<input type="button" value="submit" onClick="factorial(this.form,t.value)"></br>
result:<input type="text" name="p"></br> </form> </html>

Output:

8. Write a script to print Fibonacci series using recursive functions.

<html> <head> <title> fibonacci.html </title> </head>


<body style="background-color:green"> <!-- it is advised to not use inline styling -->
<h3 style="text-align:center; color:white"> Program to generate the Fibonacci Series </h3>
<script type="text/javascript">

var limit = prompt("Enter the limit 'n' to generate the fibonacci series:", " ");
var f1=0;
var f2=1;

document.write("The limit entered to generate the fibonacci series is: ",limit, "<br/>");
document.write("The fibonacci series : ");
document.write("",f1," ");
document.write("",f2," ");

var i,f3;
for(i=2; i<limit; i++)
{
f3=f1+f2;
document.write("",f3," ");
f1=f2;
f2=f3;
}
</script></body></html>

Output:

Page 149
WEB TECHNOLOGY Lab Programs and Viva Questions

Page 150
WEB TECHNOLOGY Lab Programs and Viva Questions

9. Write a script to wish the user ―Good Morning‖ at different hours of the day.

Prog9.html

<html> <header> <title>My test page </title> </header>

<body>

<h1>Adjusting Your Message Based on the Time of Day:</h1>

<h2>********************</h2>

Welcome to my page. I just wanted to say:

<script language="JavaScript">

var myDate = new Date();

/* hour is before noon */

if ( myDate.getHours() < 12 )

document.write("Good Morning!");

else /* Hour is from noon to 5pm (actually to 5:59 pm) */

if ( myDate.getHours() >= 12 && myDate.getHours() <= 17 )

Page 151
WEB TECHNOLOGY Lab Programs and Viva Questions
{

document.write("Good Afternoon!");

else /* the hour is after 5pm, so it is between 6pm and midnight */

if ( myDate.getHours() > 17 && myDate.getHours() <= 24 )

document.write("Good Evening!");

else /* the hour is not between 0 and 24, so something is wrong */

document.write("I'm not sure what time it is!");

/* remove the following in your live script. It is for testing */

document.write("<br /><br /> The hour is: ")

document.write( myDate.getHours() );

</script>

<h2>********************</h2>

</body>

</html>

Output

Page 152
WEB TECHNOLOGY Lab Programs and Viva Questions

Page 153
WEB TECHNOLOGY Lab Programs and Viva Questions
HTML VIVA QUESTIONS AND ANSWERS
1. What is HTML ?
HTML means Hyper Text Mark-up Language. The global publishing format of the Internet is HTML
2. Who developed HTML ?
Tim Berners – Lee
3. What are web browsers ? Give some examples
Web browsers are softwares which displays HTML documents. Eg: Internet Explorer, Fire Fox, Google Chrome,
Netscape Navigator
4. What is W3C ?
Worlod Wide Web Consortium (W#C) is a group of organizations and individuals which creates standards for web
page
5. What is Hyper Text ?
Hyper text adds diversions to a piece of text
6. What is MIME ?
Multipurpose internet Mail Extensions
7. What is tag ?
A tag is a format name surrounded by angle brackets.
8. What is the structure of HTML document ?
A html document consists two sections. Head & Body. Head consists control information and body consists content
of the page
9. What is the purpose of <title> tag ?
The content of <title> tag is displayed at the top of the browser window and mostly it is indexed by a search engines
10. What is <p> tag ?
Paragraph tag which is used to create a block
11. How can you align paragraphs ?
By using align attribute which takes values as left, right, center. Default is left
12. What are Heading tags ?
Html has 6 levels of headings <h1> to <h6>. Largest heading is <h1> and smallest is <h6>
13. What is <hr> tag ?
Horizontal ruler tag which places a horizontal line across the screen
14. What is <basefont> tag ?
The <basefont> tag defines the font face, size and colour to be used in the HTMl document and may be included in
the head section
15. What is the purpose of <font> tag ?
By using <font> tag we can change the face, size and colour of any piece of text
16. What is <b> tag ?
Bold tag, used to make text in bold face
17. What is <i> tag ?
Italig tag, use to make a portion of text in Italics
18. What is <tt> tag ?
Type writer Text tag, which renders a text using a monospaced font
19. What is <sub> & <sup> ?
<sub> is subscript tag, renders text as subscript
<sup> is superscript tag, renders text as superscript
20. What is <br> ?
Break tag, which forces a line break
21. What is <pre> tag ?
Pre-formatted tag, which dosnt convert line breaks, tabs and multiple white spaces into a single space
22. What are escape sequence characters ?
Escape sequence chartacters starts with & and ends with ; which are used to display the control sequence characters
(&lt; for < and &gt; for >)

Page 154
WEB TECHNOLOGY Lab Programs and Viva Questions
23. What is hyperlink ?
Hyperlinks are clickable text or images which renders a new page
24. How can you create hyperlinks ?
Anchor tag (<a>)is used to create hyperlinks
25. What is the mandatory attribute of <a> tag ?
Href(hypertext reference) is the compulsory attribute of anchor tag which takes value as the URL of another page
26. What is URL ?
Uniform Resource Locator
27. How many types of lists are there ?
HTML provides 3 types of lists
1) Unordered list(bulleted list)
2) Ordered list(Numbered list)
3) Definition list
28. What is unordered list ?
The basic unordered list has a bullet in front of each list item, An unordered list is created using <ul> tag
29. What are the attributes of <ul> tag ?
<ul> tag consists one attribute that is type which takes value as disc, square and circle
30. What is <li> tag ?
<li> is list item tag. The ordered and unordered lists are made up of set of <li>’s
31. What is an ordered list ?
An ordered list has a number instead of a bullert in front of each list item. It is created using <ol> tag
32. What attributes are used in <ol> tag ?
Type and start are attributes that are used with <ol>tag. Type takes value as 1 or a or A or i or I. Start takes a number
as it value
33. What is definition list ?
Element in the definition lists are either items being defined or their definitions. It is created using <dl> tag
34. What is <dt> tag ?
Definition term tag mark items whose definitions will be provided by the next <dd>
35. What is <dd> tag ?
Definitions of <dt>’s are enclosed within these tags and it is called data definition tag
36. How can you include images as a background of a web page ?
By using background attribute of <body> tag. Which takes value as URL
37. How can you include inline images in a web page ?
By using <img> tag
38. What is the mandatory attribute of <img> tag ?
“src” (source) which takes value as URL
39. What are the other attributes of <img> tag ?
Width, height, align, usemap, lowsrc
40. What is lowsrc attribute of <img> tag ?
Gives the URL of low-resolution image
41. What is the purpose of usemap attribute if <img> tag ?
To create clientside image maps
42. What is an Image map ?
Image map is a large image which provides different hyperlinks by clicking different areas on that image
43. How many types of Image map programs are there ?
Two. Client-side and serve-side
44. How can you create client-side image map ?
By using usemap attribute of <img> and <map> tag
45. What is the required attribute if <map> tag ?
“name” attribute whose value will be identical to that of the value given to the “usempa” attribute of <img> tag.
46. What tags can be includes in between the starting and ending tags of <map> tag ?
<area> tag

Page 155
WEB TECHNOLOGY Lab Programs and Viva Questions
47. What are the required attributes of <area> tag ?
Shape – takes value as either circle or rect or polu or default
Href – it is the destination of the link
Cords- each shape is defined by coordinates
48. What is a table in web page ?
Tables in HTML allow to organize information in a row and colums format
49. How can you create tables ?
By using <table>,<tr>,<td>,<th> tags
50. What is cellpadding ?
Sets the spacing between cell walls and cell contents. Takes value as pixel value
51. What is cellspacing ?
Gives the distance between cells
52. What is colspan ?
Indicates how many cell columns of the table this cell should span
53. What is rowspan ?
Indicates how many rows of the table this cell should span
54. In which tag we use colspan and rowspan attributes
<td> tag
55. How can you include multimedia objects in a web page ?
By using <object> tag
56. What are the attributes of <object> tag ?
Classid, height, width
57. How can you send command line arguments to an object ?
Bu using <parm> (parameter) tag
58. What are the required attributes of <param> tag ?
Name and value
59. What are applets ?
Applets are small java applications
60. How can you include applets in HTML document?
By using <applet> tag
61. What are the required attributes of <applet> tag ?
Code, width and height
62. What are frames ?
Frames give us the ability to split browser window into vertical or horizontal or both sections so that we load
different pages in different sections
63. How can you create frames ?
By using <frameset> and <frame> tags
64. What are the attributes of <frameset> tag ?
“cols” and “rows” which sets the number of columns or rows in the frameset. They take value either in pixel value or
percentage
65. What are the attributes of the <frame> tag ?
“name” and “src”. “name” sets a name to a frame and “src” specifies the url of the frame document
66. What is <iframe>
Inline frame. It is used to embed within a document the content of other document.
67. What attributes we use in <iframe> tag ?
“name” and “src”. “name” sets a name to a frame and “src” specifies the “url” of the frame document
68. What is a form ?
Forms are used to add an element of interactivity to a web site. They are usually used to send information back to
the server.
69. How can you create a form ?
By using <form> tag
70. What are the attributes of a <form> tag ?
“action” and “method”. “action” attribute specifies the URL of the CGI script that will be used to process the data
and “method” attribute takes value as “get” or “post”

Page 156
WEB TECHNOLOGY Lab Programs and Viva Questions
71. What is “get” and what is “post” ?
When get is used data is included as part of the URL and when “post” is used it encodes the data within the body of
the message. “post” is used to sent large amount of data.
72. What is a “CGI” script ?
Common Gateway Interface Script.
73. Name some common “CGI” scripting languages ?
Perl, PHP and python
74. How can you include HTML control or input widgets in a form ?
By using <input> tag.
75. What are the attributes of <input> tag ?
“type”, “name”.
76. What values can we assign to a type attribute ?
Text, password, checkbox, radio, submit, rest, button, image
77. What is <select> tag ?
This tag encloses a set of options.
78. What tags can we include in between the starting and ending tags of <select> tag ?
<option> tag. It specifies a list item in the list of a select control
79. What is <textarea> tag ?
It create a text area into which the user can enter large text.
80. What are the attributes of <textarea> tag ?
Rows, cols and readonly. Rows specifies the number of rows in the control and cols specifies the number of columns.
Readonly is a standalone attribute and it indicates the content may not be modified
81. What tags can we include in head section of a HTML document ?
<title>, <base>,<link>,<meta>
82. What is the purpose of <base> tag and what are its attributes ?
This tag is used to enforce the relative li9nks. Attributes are “href” which holds and “URL”
83. What is the use of <link> tag ?
It is used to allow other documents to be linked in the current document. It is mainly used to include external style
sheets.
84. What is <meta> tag ?
Any information which describes the whole document should be included using this tag.
85. What is a CSS ?
Cascading Style Sheet. Which is a set of formatting instructions that can be applied to a piece of text
rride.
86. How many types of CSS are there ?
3. Inline, Internal and External
87. What is the meaning of cascading ?
This means that the styles can be override. Inline styles can be override by internal and internal can be override by
external
88. What are Inline styles ?
An Inline style allows you to change the behaviour of an individual HTML tag.
89. How can you create and Inline style ?
By including style attribute to a tag.
90. What are Internal styles ?
Internal styles can be used to define a tag properties that are applied globally through out a document
91. How can you create Internal styles ?
By using <style> tag in head section. The declaration has the name of the element which is being changed and then
definition placed inside the braces
92. What are external style sheets or including style sheets ?
External style sheets are stored separately in a file and can be applied to any number of documents
93. How can you include an external style sheet in a document ?
By using <link> tag in the head section.

Page 157
WEB TECHNOLOGY Lab Programs and Viva Questions
94. What is a style rule ?

A style rule has two parts; a selector and a set of declarations. Selector is a link between the rule and the HTML tag.
The declaration has two parts. A property and a value and they are separated by colon and the declaration ends with
a semicolon
95. What are style classes ?

A style class is a new style that we can apply various elements. These are called named styles.
96. What is an anonymous class ?

By creating anonymous class we can apply a piece of formatting to different elements.


97. What is a <div> tag ?

By using <div> tag we can create a block of elements so that we can format all the elements at one place
98. What are layers ?

Layers lets us to use images as backgrounds and to place further images and text over them.
99. How can you create layers ?

By using z-index property in the style attribute of a tag.


100. How can you position a division in a page ?

By using position property in the style attribute of a <div> tag

Program - 1 output

Page 158
WEB TECHNOLOGY Lab Programs and Viva Questions
Program - 2 output

Program - 3 output

Program - 4 output

Program - 5 output
Page 159
WEB TECHNOLOGY Lab Programs and Viva Questions

Program - 6 output

Program - 8 output

Page 160
WEB TECHNOLOGY Lab Programs and Viva Questions

Page 161
WEB TECHNOLOGY Lab Programs and Viva Questions
Program - 7 output

Program - 9 output

Page 162

You might also like