GURU GOBIND SINGH
INDRAPRASTHA UNIVERSITY
Course-BCA(1st year)
Semester 1
Web Technology Lab
Subject Code- BCA 175
Lab File
Submitted to: Ms. Sarita Nehra
(Assistant Professor)
Submitted by:Twinkle Sharma
(Student 1st Semester)
INSTITUTE OF INNOVATION IN TECHNOLOGY
& MANAGEMENT
INDEX
Sno.
1.
5.
6.
Problem Statement
Make following five different web
pages:
i. Formatting Styles and Headings:
Include Bold, italics, Underline,
Strike, Subscript, superscript and
all six type of headings
ii. Font Styles and Image tag
iii. Marquee: Move text, image and
hyperlink
iv. Other tags: br, hr, pre, p Include
following specifications:
● In all these web pages only
mention about use, attributes apply
them.
● Insert a background image on
home page
● Make all the topics as hyperlinks
and go to some other page for
description
● Insert a marquee showing HTML
Tutorial as moving text.
● Use different font style for
different topics
● On every page, make a hyperlink
for going back to home page and
internal link also
Create an unordered list nested inside
ordered list and apply the following :
● Insert an image of Main item on top
right corner of web page.
● Display heading as a marquee.
Page Date Signature
No.
● Use different font styles and colors
for different ordered list items.
● Insert horizontal line after each
ordered item.
7.
Design a table with row span and
column span and make use of attributes
colspan, rowspan, width, height,
cellpadding, cellspacing etc.
8.
Design following frame:
Main Menu
Topic1
Topic 2
Topic 3
9.
10.
Explanation
----------------------------------View Example
Example
Make an image map showing the usage
of shape, coords, href attributes in map
definition. Link each hotspot to their
respective details. All the web pages
should be designed with proper
background color, images, font styles
and headings.
Design Student registration form for
admission in college.
11.
Create a webpage and show the usage
of inline and internal style sheet and
external style sheet?
12.
Create a webpage containing a
background image and apply all the
background styling attributes?
13.
Create a web page showing the usage of
font styling attributes.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
Create a web page and apply all Text
styling attributes use Id and class
selector.
Create a webpage and implement all list
styling attributes.
Create a Webpage with three equal
columns.
Create a webpage containing bootstrap
table.
Create a webpage containing various
types of images.
Create a webpage containing various
types of buttons.
Create a webpage containing various,
typography classes.
Create a webpage containing to display
the heading using. Jumbotron
Write a program to show the usage of
inbuilt functions and dialog boxes.
Write a program to show the usage of
alert box and confirm box.
Write a program to implement event
handling using onclick, onmouseover
and onmouseout events.
Write a program to show the usage of
all the date, math and string object
functions.
WAP to display the bookstore details in
XML with CSS and internal DTD.
WAP to format the Teacher details in
XML with CSS using external DTD.
Design the registration form for a web
site and when the user clicks on submit
button the login form should be
appeared on the screen.
PROGRAM 1-5
Make following five different web pages:
i) Formatting Styles and Headings: Include Bold, italics,
Underline, Strike, Subscript, superscript and all six type of
headings
ii) Font Styles and Image tag
iii) Marquee: Move text, image and hyperlink
iv) Other tags: br, hr, pre, p Include following specifications:
● In all these web pages only mention about use, attributes
apply them.
● Insert a background image on home page
● Make all the topics as hyperlinks and go to some other page
for description
● Insert a marquee showing HTML Tutorial as moving text.
● Use different font style for different topics
• On every page, make a hyperlink for going back to home page
and internal link also.
INPUT CODE:- HOME PAGE
<!DOCTYPE html>
<html>
<head>
<title>HTML TAGS</title>
<style>
h1{
font-size:50px;
font-family:"lucida calligraphy";
}
a{
font-size: 25px;
text-decoration: none;
font-family: Georgia, 'Times New
Roman', Times, serif;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<h1><center>HTML TAGS</center></h1>
<br>
<br>
<a href="format.html">Formatting Styles and
Headings</a>
<br>
<br>
<a href="Font_image.html">Font styles</a>
<br>
<br>
<a href="marque.html">Marquee Tag</a>
<br>
<br>
<a href="other_tags.html">Other Tags</a><br>
</body>
</html>
OUTPUT CODE:-
INPUT CODE:- FORMATING STYLES AND HEADING
<!DOCTYPE html>
<html lang="en">
<head>
<title>Format</title>
<style>
h1{
color:red;
text-decoration: red dashed underline;
font-size: 40px;
}
a{
font-size :35px;
font-family: Cambria, Cochin, Georgia,
Times, 'Times New Roman', serif;
color:crimson;
}
#one{
color:blue;
font-family: 'Franklin Gothic Medium',
'Arial Narrow', Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Formatting Style and Headings</h1>
<a href="bold.html">Bold Tag</a><br>
<br>
<a href="italics.html">Italics Tag</a><br>
<br>
<a href="underline.html">Underline Tag</a><br>
<br>
<a href="strike.html">Strike Tag</a><br>
<br>
<a href="head.html">Heading Tag</a><br>
<br>
<a href="subscript.html">Subscript Tag</a><br>
<br>
<a href="superscript.html">SuperScript
Tag</a><br>
<br>
<br>
<a href="index.html" id="one">GO TO HOME
PAGE</a>
</body>
</html>
OUTPUT CODE:-
I.UNDER FORMATTING STYLES AND HEADING
PAGE
1) BOLD TAG
2) ITALICS TAG
3) UNDERLINE TAG
4) STRIKE TAG
5) HEADING TAG
6) SUBSCRIPT TAG
7) SUPERSCRIPT TAG
1) BOLD TAG
INPUT CODE:<!DOCTYPE html>
<html>
<head>
<title>BOLD Tag</title>
<style>
b{
color:crimson;
font-size: 40px;
}
#two{
color:black;
font-size:35px;
}
a{
font-size: 30px;
}
</style>
</head>
<body>
<b>BOLD Tag</b>
<p><font style="font-family:cursive"
size="5">
The &lt;b&gt; HTML element defines bold
text, without any extra importance.</font></p>
<p><font size="6">For example:
<b id="two"> this text is written in bold
using &lt;b&gt; tag</b></font> </p>
<br>
<a href="format.html">BACK</a>
</body>
</html>
OUTPUT
:-
2) ITALICS TAG
INPUT CODE:<!DOCTYPE html>
<html>
<head>
<title>Italics Tag</title>
<style>
i{
font-size: 40px;
color:crimson
}
p{
font-size:25px;
font-family:'Lucida Sans', 'Lucida Sans
Regular', 'Lucida Grande', 'Lucida Sans Unicode',
Geneva, Verdana, sans-serif ;
}
#four{
color:black;
font-size:30px;
font-family:Cambria, Cochin, Georgia, Times,
'Times New Roman', serif
}
a{
font-size:30px;
}
</style>
</head>
<body>
<i>Italics Tag</i>
<p>The &lt;i&gt; HTML element represents a range
of text that is set off from the normal text for
some reason, such as idiomatic text, technical
terms, taxonomical designations, among others. </p>
<p id="three">For example:
<i id="four">this text is written in
italics.</i>
</p>
<a href="format.html">BACK</a>
</body>
</html>
OUTPUT
:-
3) UNDERLINE TAG
INPUT CODE:<!DOCTYPE html>
<html lang="en">
<head>
<title>Underline Tag</title>
<style>
#one{
font-size: 40px;
color:crimson;
}
p{
font-size:25px;
font-family: Cambria, Cochin, Georgia, Times,
'Times New Roman', serif;
}
a{
font-size:30px;
}
</style>
</head>
<body>
<u id="one">Underline Tag</u>
<p>The &lt;u&gt; HTML element represents a
span of inline text which should be rendered in a
way that indicates that it has a non-textual
annotation. This is rendered by default as a
simple solid underline, but may be altered using
CSS.</p>
<p>for example:
<u>this text is written in underline</u>
</p>
<a href="format.html">BACK</a>
</body>
<html>
OUTPUT :-
4)STRIKE TAG
INPUT CODE:<!DOCTYPE html>
<html lang="en">
<head>
<title>STRIKE TAG</title>
<style>
#one{
font-size: 40px;
color:crimson;
}
p{
font-size:30px;
font-family:Cambria, Cochin, Georgia,
Times, 'Times New Roman', serif;
}
strike{
font-size:30px;
}
a{
font-size:30px;
}
</style>
</head>
<body>
<P id="one">Strike Tag</P>
<p>This tag defines a strike or line through
Text. This tag creates a cut line in the text
</p>
<strike>this is text is written in strike
</strike>
<BR>
<BR>
<a href="format.html">BACK</a>
</body>
</html>
OUTPUT
:
5) HEADING TAG
INPUT CODE:<!DOCTYPE html>
<html>
<head>
<title>Heading Tag</title>
<style>
#one{
color:crimson;
font-size:40px;
}
p{
font-size:25px;
}
a{
font-size:30px;
}
</style>
</head>
<body>
<h1 id="one">HEADING TAG</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>these h1 to h6 tags are used to define HTML
headings. h1 defines the most important heading. h6
defines the least important heading.<br>
Note: Only use one per page - this should
represent the main heading/subject for the whole
page.</p>
<BR>
<a href="format.html">BACK</a>
</body>
</html>
OUTPUT :-
6) SUBCRIPT TAG
INPUT CODE:
<!DOCTYPE html>
<html>
<head>
<title>SubScript Tag</title>
<style>
#one{
font-size:40px;
color:crimson;
}
p{
font-size:30px;
}
a{
font-size:30px;
}
</style>
</head>
<body>
<h1 id="one">Subscript Tag</h1>
<p>The &lt;sub&gt; tag defines subscript text.
Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller
font. Subscript text can be used for chemical
formulas, like H2O.</p>
<p>for example:-</p>
<p>H<sub>2</sub>O</p>
<br>
<a href="format.html">BACK</a>
</body>
</html>
OUTPUT:-
6) SUPERSCRIPT TAG
INPUT CODE:<!DOCTYPE html>
<html>
<head>
<title>Superscript Tag</title>
<style>
h1{
color:crimson;
font-size:40px;
}
p{
font-size:30px;
}
a{
font-size:30px;
}
</style>
</head>
<body>
<h1>Supscript Tag</h1>
<p>The &lt;sup&gt; tag defines subscript text.
A superscript is a text that appears half above the
normal baseline and is rendered in smaller-sized
text.
Example:
<p>5<sup>th</sup></p>
<p>2<sup>3</sup>= 8</p>
<br>
<br>
<a href="format.html">BACK</a>
</body>
</html>
OUTPUT:
II.UNDER FONT STYLE AND IMAGE TAG
INPUT CODE:<!DOCTYPE html>
<html>
<head>
<title>Font Styles</title>
<style>
h1{
text-align: center;
}
a{
font-size:30px;
color:darkmagenta
}
th{
font-size: 25px;
}
td{
font-size:25px
}
.center{
display:block;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<h1><u>Font Styles</u></h1>
<table border="3" align="center"
cellpadding="8">
<tr>
<th>Tag/Attributes</th>
<th>Example</th>
</tr>
<tr>
<td >&lt;font color = red&gt;</td>
<td><font color="red">This is red
text.</font></td>
</tr>
<tr>
<td >&lt;font size = "6"&gt;</td>
<td><font size="6">This is large
text.</font></td>
</tr>
<tr>
<td >&lt;font face = "arial"&gt;</td>
<td><font face="arial">This is arial
font.</font></td>
</tr>
</table>
<br>
<h1><u>Image Tag</u></h1>
<br>
<img src="image.jpg" alt="sample image"
height="300px" class="center">
<br>
<p><font size="6">Image Tag is used to insert
image.</font></p>
<br>
<a href="index.html">Go to home page</a>
</body>
</html>
OUTPUT:
III. UNDER MARQUEE TAG
1) MOVING TEXT
2) MOVING IMAGE
3) MOVING LINK
INPUT CODE:<!DOCTYPE html>
<html>
<head>
<title>Marquee Tag</title>
<style>
h1{
font-size:40px;
color:crimson;
}
a{
font-size:30px;
}
</style>
</head>
<body>
<marquee><h1>HTML TUTORIALS</h1></marquee><br>
<marquee><a
href="http://wikipedia.com">Wikipedia</a></marque
e><br>
<marquee><img src="bird.jpg" alt="sample
image" width="200px"></marquee><br>
<a href="index.html"> GO TO HOME PAGE</a>
</body>
</html>
OUTPUT :-
IV. UNDER PREFORMATTED TAGS
1) LINE BREAK TAG
2) HORIZONTAL LINE TAG
3) PARAGRAPH TAG
4) PREFORMATTED TAG
INPUT CODE:<!DOCTYPE html>
<html>
<head>
<title>Other Tags</title>
<style>
h1{
font-size:40px;
color:crimson;
}
h2{
font-size:30px;
}
p{
font-size:25px;
}
a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>Other Tags</h1>
<h2>Line Break Tag</h2>
<p>for example:</p>
<p>The future <br>
belongs to those<br>
who believe of their<br>
dreams.</p>
<h2>Horizontal Line</h2>
<hr size="5" color="black">
<br>
<h2>Paragraph Tag</h2>
<p> this is a sample paragraph that contains
a lot of lines.
this is sample paragraph that contains a
lot of lines. </p>
<h2>Preformatted Tag</h2>
<pre>
Text in a pre element is
displayed in a fixed width and font,
and it preserves
both
spaces and line breaks.
</pre>
<a href="index.html">GO TO HOME PAGE</a>
</body>
</html>
OUTPUT:-
PROGRAM 6
Create an unordered list nested inside ordered list and apply
the following :
● Insert an image of Main item on top right corner of web
page.
● Display heading as a marquee.
● Use different font styles and colors for different ordered list
items.
● Insert horizontal line after each ordered item.
INPUT CODE:<!DOCTYPE html>
<html lang="en">
<head>
<title>lists</title>
<style>
h1{
font-size: 40px;
color: darkblue;
}
li{
font-size: 30px;
}
</style>
</head>
<body>
<img src="newitem.jpg" alt="item image"
style="position: absolute; top: 10px; right: 10px;
width: 100px; height: 100px;">
<marquee><h1>NESTED LIST</h1></marquee>
<ol type="I">
<li style="color: cornflowerblue;">Ordered List
Item 1</li>
<ul>
<li style="color: brown;">Unordered
SubItem A</li>
<li style="color:blueviolet">Unordered
SubItem B</li>
</ul>
<hr size="4" color="black">
<li style="color:darkcyan">Ordered List Item
2</li>
<ul>
<li style="color:rgb(255, 111,
0)">Unordered SubItem A</li>
<li style="color:darkgreen"> Unordered
SubItem B</li>
</ul>
<hr size="4" color="magenta">
<li style="color:darkred">Ordered List Item 3</li>
<ul>
<li style="color:darkslategrey">Unordered
SubItem A</li>
<li style="color:darkgoldenrod">Unordered
Sub Item B</li>
</ul>
</ol>
</body>
</html>
OUTPUT:-
PROGRAM 7
Design a table with row span and column span and
make use of attributes colspan, rowspan, width,
height, cellpadding, cellspacing etc.
INPUT CODE:<!DOCTYPE html>
<html>
<head>
<title>Table Q3</title>
<style>
table,th,td{
border:solid black;
border-width: 3px;
}
</style>
</head>
<body>
<table border="2" cellpadding="5">
<tr>
<th>Days</th>
<th>10-11 am</th>
<th>11-12 noon</th>
<th rowspan="4"><pre> <font size="5">
B
R
E
A
K
</font></pre></th>
<th>1-2 pm</th>
<th>2-3 pm</th>
</tr>
<tr>
<td>Monday</td>
<td>BCA 101</td>
<td>BCA 103</td>
<td>BCA 103</td>
<td>BCA 107</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2">BCA 175(175)</td>
<td>BCA 103</td>
<td>BCA 107</td>
</tr>
<tr>
<td>Wednesday</td>
<td>BCA 101</td>
<td>BCA 101</td>
<td colspan="2">BCA 10175(Lab)</td>
</tr>
</table>
</body>
</html>
OUTPUT
PROGRAM 8
Design the following frames:Explanation
----------------------------------View Example
Example
Main Menu
Topic1
Topic 2
Topic 3
INPUT CODE:• Main Menu page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1{
font-size:50px;
}
p{
font-size: 40px;
}
</style>
</head>
<body>
<br>
<br>
<h1>Main Menu</h1>
<p><u>Topic 1</u></p>
<p><u>Topic 2</u></p>
<p><u>Topic 3</u></p>
</body>
</html>
INPUT CODE:
• Explanation Page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
p{
font-size: 40px;
}
</style>
</head>
<body>
<br>
<p>Explanation</p>
<p>--------------------</p>
<p>--------------------</p>
<p><u>View Example</u></p>
</body>
</html>
INPUT CODE:• Example Page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
p{
font-size: 40px;
text-align: center;
}
</style>
</head>
<body>
<p>Example</p>
</body>
</html>
INPUT CODE:• FRAMES
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initialscale=1.0">
<title>Document</title>
</head>
<frameset rows="100%">
<frameset cols="50%,50%">
<frame src="menu.html">
<frameset rows="70%,30%">
<frame src="explain.html">
<frame src="example.html">
</frameset>
</frameset>
</frameset>
</html>
OUTPUT:-
PROGRAM 9
Make an image map showing the usage of shape,
coords, href attributes in map definition. Link each
hotspot to their respective details. All the web pages
should be designed with proper background color,
images, font styles and headings.
INPUT CODE:<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Map</title>
</head>
<body>
<img src="map.jpg" usemap="#work">
<map name="work">
<area shape="circle"
coords="93,87,57"
href="https://web.whatsapp.com/" >
<area shape="rect"
coords="31,204,152,327"
href="https://www.facebook.com/">
<area shape="poly"
coords="225,217,239,229,250,237,266,242,277,2
42,276,230,287,217,298,213,308,213,316,218,33
5,214,328,237,324,261,313,285,303,298,275,313
,245,315,220,304,252,291,231,274,240,273,227,
265,221,249,233,249,224,238,221,227,241,280"
href="http://www.twitter.com/">
<area shape="rect"
coords="218,44,343,129"
href="https://www.youtube.com/">
</map>
</body>
</html>
IMAGE USED:
OUTPUT:1) When clicked on Whatsapp Logo
Whatsapp Webpage opens.
2) When clicked on Youtube logo
Youtube web page opens.
3) When clicked on twitter logo.
Twitter web page opens.
4) When clicked on facebook logo
Facebook web page opens.
PROGRAM 10
Design student registration form for admission in
college.
INPUT CODE:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
h1{
color:white;
text-align:center;
font-size: 40px;
text-decoration: underline;
}
body{
background-color:crimson;
}
label{
font-size: 25px;
color:white;
}
</style>
</head>
<body>
<h1>STUDENT REGISTRATION FORM</h1>
<form>
<label> Firstname: </label>
<input type="text" name="firstname"
size="15"/> <br>
<BR>
<label> Middlename: </label>
<input type="text" name="middlename"
size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname"
size="15"/> <br> <br>
<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
<br> <br>
<label>
Gender :
<br>
<input type="radio" name="Gender"/>
Male <br>
<input type="radio" name="Gender"/>
Female <br>
<input type="radio" name="Gender"/>
Other
</label>
<br> <br>
<label>
Phone Number:
<input type="text" name="country code"
value="+91" size="2"/>
<input type="text" name="phone"
size="10"/> <br> <br>
</label>
<label>
Address :
<br>
<textarea cols="80" rows="5"
value="address">
</textarea>
</label>
<br> <br>
<label>
Email:
<input type="email" id="email"
name="email"/> <br>
</label>
<br> <br>
<label>
Password:
<input type="Password" id="pass"
name="pass"> <br>
</label>
<br>
<input type="button" value="Submit">
<input type="Reset">
</form>
</body>
</html>
OUTPUT:
PROGRAM 11
Create a webpage and show the usage of inline and
internal style sheet and external style sheet.
INPUT CODE: Q7.html
<!DOCTYPE html>
<html>
<head>
<title>Q6</title>
<link rel="stylesheet" href="style.css">
<style>
.head{
color:blueviolet;
font-size: 50px;
}
</style>
</head>
<body>
<h1 style="color:blue ;font-size:50px ;">this
is inline css</h1>
<br>
<hr style="height: 4px; backgroundcolor:black; ">
<br>
<h1 class="head" >this is internal css</h1>
<br>
<hr style="height: 4px; backgroundcolor:black; ">
<h1 id="head1">this is external css</h1>
</body>
</html>
Style.css file
#head1{
font-size:50px;
color:green;
}
OUTPUT:
PROGRAM 12
Create a webpage containing a background image
and apply all the background styling attributes?
INPUT:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Q8</title>
<style>
body{
backgroundimage:url('https://wallpapers.com/images/hd/beautif
ul-background-1ph3pbdwxwxil625.jpg');
background-position:150px 90px ;
background-repeat: no-repeat;
background-size:750px;
background-origin: padding-box;
}
</style>
</head>
<body>
<h1 style="color:crimson;font-size:40px;"> this is
background image </h1>
</body>
</html>
OUTPUT:
PROGRAM 13
Create a web page showing the usage of font styling
attributes.
INPUT:
<!DOCTYPE html>
<html>
<head>
<title>Font Styling</title>
<style>
body{
background-color: #FCF5ED;
}
.normal{
font-style:normal;
font-size: 50px;
color:#1F1717
}
.italic{ font-style: italic;
font-size:50px;
color:#CE5A67
}
.oblique{ font-style: oblique;
font-size:50px;
color:#363062
}
</style></head>
<body>
<p class="normal">This is Normal Font Styling</p>
<p class="italic">This is italic Font Styling</p>
<p class="oblique">This is oblique Font
Styling</p>
</body>
</html>
OUTPUT:
PROGRAM 14
Create a web page and apply all Text styling attributes
use Id and class selector.
INPUT:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Q10</title>
<style>
body{
background-color:#FDF0F0;
margin: 30px;
font-size: 40px;
line-height: 60px;
color:#132043
}
.text-color {
color:#190482
}
#text-decoration {
text-decoration: underline;
}
.text-transformation {
text-transform: capitalize;
}
.text-direction {
direction:rtl;
}
#text-shadow{
text-shadow:2px 2px rgb(255, 0, 0);
}
</style>
</head>
<body>
<div class="text-color">
This will change the text color
</div>
<div id="text-decoration">
This will provide underline in text
</div>
<div class="text-transformation">
This will change the lowercase alphabets into
capitalize alphabets
</div>
<div class="text-direction">
This will change the direction of text
</div>
<div id="text-shadow">
This will change the text shadow color
</div>
</body>
</html>
OUTPUT:
PROGRAM 15
Create a webpage and implement all list styling attributes.
INPUT:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devicewidth, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color:#FCE09B;
}
#OL{
color:#610C9F; font-weight:bold;
font-size:30px
}
#ol{
font-size:25px;
color:#DA0C81
}
#ul{ font-size:25px;
color:#D80032
}
#ol1{
font-size:25px;
color:#3D0C11
}
</style>
</head>
<body>
<h1 style="color:green;fontsize:45px;">CATEGORIES OF COMPUTER</h1>
<ol type="I" id="OL">
<li>By how they process data:</li>
<ol type="a" id="ol">
<li>Digital</li>
<li>Hybrid</li>
</ol>
<br>
<li>By size:</li>
<ul type="disc" id="ul">
<li>Microcomputers</li>
<li>Minicomputers</li>
<li>MainFrames</li>
</ul>
<br>
<li>By purpose:</li>
<ol type="i" id="ol1">
<li>General Purpose</li>
<li>Special Purpose</li>
</ol>
</ol>
</ol>
</body>
</html>
OUTPUT:
PROGRAM 16
Create a Webpage with three equal columns.
INPUT:
<!DOCTYPE html>
<html>
<head>
<title>Three Equal Columns</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5
.2/css/bootstrap.min.css">
</head>
<body>
<h1><center>THREE EQUAL
COLUMNS</center></h1>
<BR>
<div class="container">
<div class="row">
<div class="col-4">
<h3>Column 1</h3>
<p>This is the content of the first
column.</p>
</div>
<div class="col-4">
<h3>Column 2</h3>
<p>This is the content of the
second column.</p>
</div>
<div class="col-4">
<h3>Column 3</h3>
<p>This is the content of the third
column.</p>
</div>
</div>
</div>
</body>
</html>
OUTPUT:
PROGRAM 17
Create a webpage containing bootstrap table.
INPUT:
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dis
t/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwyk
c2MPK8M2HN" crossorigin="anonymous">
<title>Q17</title>
</head>
<body>
<h2 style="text-align:center"><Caption>TableEmployee</Caption></h2>
<table class="table table-striped table-bordered ">
<thead>
<th>Serial No.</th>
<th> Employee Name</th>
<th> Salary</th>
<th>City</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shaili Dashora</td>
<td>50,000</td>
<td>Bangalore</td>
</tr>
<tr>
<td>2</td>
<td>Sourabh Somani</td>
<td>1,20,000</td>
<td>Delhi</td>
</tr>
<tr>
<td>3</td>
<td>Milan</td>
<td>40,000</td>
<td>Udaipur</td>
</tr>
<tr>
<td>4</td>
<td>Kumkum</td>
<td>30,000</td>
<td>Bangalore</td>
</tr>
</tbody>
</table>
</body>
</html>
OUTPUT:
PROGRAM 18
Create a webpage containing various types of images.
INPUT :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Q18</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dis
t/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwyk
c2MPK8M2HN" crossorigin="anonymous">
<style>
body{
background-color:bisque
}
</style>
</head>
<body>
<h1 style="text-align: center;">Types Of
Images</h1>
<br>
<div class="Container">
<h2>1. Rounded Corners</h2>
<img src="koala.jpg" class="rounded"
alt="koala" width="300">
<br>
<br>
<h2>2. Circle</h2>
<img src="fruits.jpg" class="roundedcircle" alt="fruits" width="300">
<br>
<br>
<h2>3. Thumbnail</h2>
<img src="butterfly.jpg" class="imgthumbnail" alt="butterfly" width="300">
</div>
</body>
</html>
OUTPUT:
PROGRAM 19
Create a webpage containing various types of
buttons.
INPUT:<!DOCTYPE html>
<html lang="en">
<head>
<title>Q19</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dis
t/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Types Of Buttons</h2>
<br>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btnprimary">Primary</button>
<button type="button" class="btn btnsecondary">Secondary</button>
<button type="button" class="btn btnsuccess">Success</button>
<button type="button" class="btn btninfo">Info</button>
<button type="button" class="btn btnwarning">Warning</button>
<button type="button" class="btn btndanger">Danger</button>
<button type="button" class="btn btndark">Dark</button>
<button type="button" class="btn btnlight">Light</button>
<button type="button" class="btn btnlink">Link</button>
</div>
</body>
</html>
OUTPUT:
PROGRAM 20
Create a webpage containing various, typography
classes.
INPUT:
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dis
t/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwyk
c2MPK8M2HN" crossorigin="anonymous">
<title>Q20</title>
</head>
<body>
<div class="container">
<h1><b>TYPOGRAPHY CLASSES</b></h1>
<br>
<h2>I. <u>HTML Headings</u></h2>
<div class="container">
<h1>h1.heading 1 </h1>
<h2>h2.heading 2 </h2>
<h3>h3.heading 3 </h3>
<h4>h4.heading 4</h4>
<h5>h5.heading 5</h5>
<h6>h6.heading 6</h6>
</div>
<br>
<h2>II. <u>Text Alignment</u></h2>
<div class="container">
<p class="text-start">Left aligned text</p>
<p class="text-center">Center align text</p>
<p class="text-end">Right aligned text</p>
</div>
<br>
<h2>III. <u>Highlighted text</u></h2>
<div class="container">
<p>Use the mark element to <mark>highlight</mark>
text.</p>
</div>
<br>
<h2>IV. <u>Text Transform</u> </h2>
<div class="container">
<p class="text-lowercase">The quick brown fox jumps
over the lazy dog.</p>
<p class="text-uppercase">The quick brown fox jumps
over the lazy dog.</p>
<p class="text-capitalize">The quick brown fox jumps
over the lazy dog.</p>
</div>
</body>
</html>
OUTPUT:
PROGRAM 21
Create a webpage containing to display the heading
using Jumbotron.
INPUT:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/
css/bootstrap.min.css">
<title>Q21</title>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Heading</h1>
<p>This is a section heading</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
</html
PROGRAM 22
Write a program to show the usage of inbuilt
functions and dialog boxes.
INPUT:<!DOCTYPE html>
<html lang="en">
<head>
<title>Q22</title>
<style>
h1{
color:darkblue;
}
p{
color:darkgreen;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Function in javascript</h1>
<p>Enter 2 numbers to add:</p>
<button onclick="enterNumbers()">Enter
Numbers</button>
<br>
<br>
<Script>
var num1, num2;
function enterNumbers() {
num1 = parseInt(prompt("Enter number
1:"));
num2 = parseInt(prompt("Enter number
2:"));
add();
}
function add() {
if (!isNaN(num1) && !isNaN(num2)) {
var result = num1 + num2;
alert("The sum is: " + result);
} else {
alert("Please enter valid numbers.");
}
}
</Script>
</body>
</html
OUTPUT:-
PROGRAM 23:
Write a program to show the usage of alert box and
confirm box.
INPUT :<!DOCTYPE html>
<html lang="en">
<head>
<title>Q23</title>
</head>
<body>
<h1>Alert and Confirm Box example</h1>
<button onclick="showAlert()">Show Alert
Box</button>
<button onclick="showConfirm()">Show Confirm
Box</button>
<script>
function showAlert(){
alert("This is an alert box!");
}
function showConfirm(){
var result=confirm("Do you want
to proceed?");
if (result){
alert("You clicked OK!");
}
else{
alert("You clicked Cancel");
}
}
</script>
</body>
</html>
OUTPUT:
PROGRAM 24
Write a program to implement event handling using
onclick, onmouseover and onmouseout events.
INPUT:
