Scribd
Upload
39 views

HTML Lab Programs-1 PDF

Html

Uploaded by

sivagamer222
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
39 views

HTML Lab Programs-1 PDF

Html

Uploaded by

sivagamer222
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

III BSC FIFTH SEMESTER

COMPUTER SCIENCE

Web Interface Designing


Technologies

Lab Programs
Experiment -1:

AIM: Create an HTML document with the following formatting options:


(a)Bold, (b) Italics, (c) Underline, (d) Headings (Using H1 to H6 heading styles),
(e) Font (Type, Size and Color), (f) Background (Colored background/Image in
background), (g) Paragraph, (h) Line Break, (i) Horizontal Rule, (j) Pre tag

Source Code:

<html>

<head>

<title> Program illustrating text format </title>

</head>

<body bgcolor="yellow">

<center>

<font size="20" color="red" face="Calibri"><u><b> S.V Degree College</b></u></br>

<font size="6" color="red" face="Georgian"><b> Balaji Nagar, Kadapa</b>

</center>

<hr color="cyan">

<h1 align="right"><font size="5" color="red"> Web site: </font>

<font size="5" color="lime"> www.svpgcollege.com </font><br>

<font size="5" color="red"> Email : &nbsp &nbsp </font>

<font size="5" color="lime">S.V.college@edu.in &nbsp &nbsp </font>

</h1>

<center>

<font size="20" color="green" face="palatinate"><u><b>Computer Science Faculty for

U.G</b></u> </font>

</center>

<center>

<br>

<font size="5" color="black"><b><u>Name:</u></b>


&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp

&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp

&nbsp

<b>&nbsp &nbsp &nbsp &nbsp <u>Designation</u> </b>

</font>

<br>

<font size="5" color="lime">Dr.C.Nageswara Raju <font size="2" color="black">

<sub>MSc(Physics), MSC, M.Tech </sub></font>

&nbsp &nbsp &nbsp

<b> &nbsp &nbsp &nbsp &nbsp Head of the Department </b>

</font>

<br>

<font size="5" color="lime">P.Nagabushan <font size="2" color="black"><sub> MCA

</sub></font>

&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp

&nbsp

<b> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbspLecture </b>

</font>

<br>

<font size="5" color="lime">Shesgiri <font size="2" color="black"><sub> MCA,


M.Tech</sub>

</font>

&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp

&nbsp
<b> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbspLecture </b>

</font>

<br>

<font size="5" color="lime">S.Ajay Kumar <font size="2" color="black"><sub>


MCA</sub>

</font>

&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp

&nbsp

<b> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbspLecture </b>

</font>

<br>

</body>

</html>

Output:-

Experiment-2:-

Aim: Create an HTML document which consists of:

(a)Ordered List (b) Unordered List (c) Nested List (d) Image
Source Code:
<html>
<head>
<title> List of colleges </title>
</head>
<body>
<font size=8 color=orange><center> Yogi Vemana University </center></font>
<font size=5 color=orange><center>Vemanapuram, Kadapa</center></font>
<hr size=5 width=1000 noshade>
<h3><u> Affiliated Colleges</u></h3>
<ol>
<li><b> Sahithya Degree & PG College </b></li>
<ul>
<li> Bachelor of Science </li>
<ol>
<li>Bzc</li>
</ol>
<li> Bachelor of Computer Science </li>
<ol>
<li> MScs </li>
<li> MPCs </li>
</ol>
<li> Bachelor of Commerce </li>
<ol>
<li> BCOM-C.A </li>
</ol>
<li> Master of Commerce </li>
</ul>
<br>
<li><b> Sri Venkateshwara Degree & PG College </b></li>
<ul>
<li> Bachelor of Science </li>
<ol>
<li>Bzc</li>
<li>Mpc</li>
</ol>
<li> Bachelor of Computer Science </li>
<ol>
<li> MScs </li>
<li> MPCs </li>
</ol>
<li> Bachelor of Commerce </li>
<ol>
<li>Bcom - General </li>
<li> BCOM-C.A </li>
</ol>
<li> Bachelor of Arts </li>
<ol>
<li> BA-HEP</li>
<li> BA-Telugu </li>
</ol>
<li> Master of Commerce </li>
<li> Master of Mathematics </li>
<li> Master of Computer Science </li>
</ul>
<br>

<li><b> Sri Hari Degree & PG College</b></li>


<ul>
<li> Bachelor of Science </li>
<ol>
<li>Bzc</li>
<li>Mpc</li>
</ol>
<li> Bachelor of Computer Science </li>
<ol>
<li> MScs </li>
<li> MPCs </li>
</ol>
<li> Bachelor of Commerce </li>
<ol>
<li>Bcom - General </li>
<li> BCOM-C.A </li>
<li> BBA </li>
</ol>
<li> Bachelor of Arts </li>
<ol>
<li> BA-HEP</li>
<li> BA-Telugu </li>
<li> BA-Computers </li>
</ol>
<li> Master of Commerce </li>
<li> Master of Mathematics </li>
<li> Master of Computer Science </li>
</ul>
<br>

<li><b> Govt. Women’s College </b></li>


<ul>
<li> Bachelor of Science </li>
<ol>
<li>Bzc</li>
<li>Mpc</li>
</ol>
<li> Bachelor of Computer Science </li>
<ol>
<li> MScs </li>
<li> MPCs </li>
</ol>
<li> Bachelor of Commerce </li>
<ol>
<li>Bcom - General </li>
<li> BCOM-C.A </li>
</ol>
<li> Bachelor of Arts </li>
<ol>
<li> BA-HEP</li>
<li> BA-Telugu </li>
<li> BA-Computers </li>
</ol>
<li> Master of Commerce </li>
<li> Master of Mathematics </li>
<li> Master of Computer Science </li>
<li> Master of Arts in English </li>
<li> Master of psychology </li>
<li> Master of Organic Chemistry </li>
</ul>
<br>

<li><b> Govt. Arts college for men </b></li>


<ul>
<li> Bachelor of Science </li>
<ol>
<li>Bzc</li>
<li>Mpc</li>
</ol>
<li> Bachelor of Computer Science </li>
<ol>
<li> MScs </li>
<li> MPCs </li>
</ol>
<li> Bachelor of Commerce </li>
<ol>
<li>Bcom - General </li>
<li> BCOM-C.A </li>
</ol>
<li> Bachelor of Arts </li>
<ol>
<li> BA-HEP</li>
<li> BA-Telugu </li>
<li> BA-Computers </li>
</ol>
<li> Master of Commerce </li>
<li> Master of Mathematics </li>
<li> Master of Computer Science </li>
<li> Master of Arts in English </li>
<li> Master of psychology </li>
<li> Master of Organic Chemistry </li>
</ul>
</ol>
</body>
</html>

Output:
Experiment-3:-
Aim: Create a Table with four rows and five columns. Place an image in one column.

Source code:

<html>
<head><title>Person Table</title></head>
<body><h1>"Person Table"</h1>
<table border="3" align="center">
<tr>
<th>Sno</th>
<th>Name</th>
<th>Address</th>
<th>Gender</th>
<th>Image</th>
</tr>
<tr>
<td>1</td>
<td>Jack Austin</td>
<td>France</td>
<td>M</td>
<td><img src="https://cdn.pixabay.com/photo/2015/05/02/11/54/justin-timberlake-
749860__340.jpg"
alt=" " height=100 width=100/></td></tr>
<td>2</td>
<td>John Doe</td>
<td>United States</td>
<td>M</td>
<td height=100 width=100>
<img src="https://cdn.pixabay.com/photo/2015/05/02/11/54/justin-timberlake-
749860__340.jpg"
alt=" " height=100 width=100/></td></tr>
<tr>
<td>3</td>
<td>Smith</td>
<td>France</td>
<td>M</td>
<td>
<img src="https://cdn.pixabay.com/photo/2015/05/02/11/54/justin-timberlake-
749860__340.jpg"
alt=" " height=100 width=100/></td></tr>
<tr>
<td>4</td>
<td>Jessy</td>
<td>India</td>
<td>F</td>
<td>
<img src="https://cdn.pixabay.com/photo/2016/11/29/20/22/girl-1871104__340.jpg"
alt=" " height=100 width=100/></td></tr>
</table>
</body>
</html>

Output:

Experiment – 4:

Aim: Using “table” tag, align the images as follows:

Source Code:

<html>
<head>
<title> Using table tag</title>
</head>
<body>
<center>
<table width="800" height="500" align="center">
<tr>
<td width="250">&nbsp;&nbsp;
<img src="C:\Users\HP\Desktop\2021 Bcom CA\imge\first.jpg" height="150" width="220">
</img>
</td>
<td width="250">&nbsp;&nbsp;
<img src="C:\Users\HP\Desktop\2021 Bcom CA\imge\second.jpg" height="250"
width="220">
</img>
</td>
<td width="300">&nbsp;&nbsp;
<img src="C:\Users\HP\Desktop\2021 Bcom CA\imge\third.jpg" height="150"
width="220">
</img>
</td>
<td width="300">&nbsp;&nbsp;
<img src="C:\Users\HP\Desktop\2021 Bcom CA\imge\fourth.jpg" height="150"
width="220">
</img>
</td>
</tr>
<tr>
<td>&nbsp;&nbsp;
<img src="C:\Users\HP\Desktop\2021 Bcom CA\imge\fifth.jpg" height="150" width="220">
</img>
</td>
<td colspan="2">
<font size="7"> buy <b> "Tweeties"</b> On_line</font>
</td>
<td>
<img src="C:\Users\HP\Desktop\2021 Bcom CA\imge\sixth.jpg" height="150"
width="220">
</img>
</td>
</tr>
<tr>
<td width="250">&nbsp;&nbsp;
<img src="C:\Users\HP\Desktop\2021 Bcom CA\imge\seventh.jpg" height="150"
width="220">
</img>
</td>
<td width="250">&nbsp;&nbsp;
<img src="C:\Users\HP\Desktop\2021 Bcom CA\imge\eight.jpg" height="150"
width="220">
</img>
</td>
<td width="300">&nbsp;&nbsp;
<img src="C:\Users\HP\Desktop\2021 Bcom CA\imge\nine.jpg" height="150" width="220">
</img>
</td>
<td width="300">&nbsp;&nbsp;
<img src="C:\Users\HP\Desktop\2021 Bcom CA\imge\ten.jpg" height="150" width="220">
</img>
</td>
</tr>
</table>
</center>
</body>
</html>

Output:

Experiment-5:

Aim: Create a menu form using html.

Source code:

<html>
<head>
</head>
<body>
<p> Menu</p>
<label> select cars</label>
<select>
<option value = “BMW”> BMW
</option>
<option value = “Mercedes”> Mercedes
</option>
<option value = “Audi”>Audi
</option>
<option value = “Skoda”> Skoda
</option>
</select>
</form>
</body>
<html>

Output:

Experiment-6:

Aim : Create a form using HTML which has the following types of controls: a)Text Box b)
Option/radio buttons c) Check box
d) Rest and Submit buttons.

Source Code :

<html>
<head><title> Customer Profile Entry Form</title>
</head>
<body>
<p align="center">
<font face=verdana size=7>CUSTOMER PROFILE ENTRY FORM</font>
</p>
<hr><hr><br>
<form method=post>
<table align="center">
<tr>
<td><font face=vyshnav size=2><b>Name
<td><input type=text size=35 name=name>
<tr><td><font face=vyshnav size=2><b>Address
<td><textarea rows=4 cols=30 name=address></textarea>
<tr><td><font face=vyshnav size=2><b>City
<td><input type=text size=35 name=city>
<tr><td><font face=vyshnav size=2><b>State
<td><input type=text size=35 name=State>
<tr><td><font face=vyshnav size=2><b>Postal Code
<td><input type=text size=35 name=postalcode>
<tr><td><font face=vyshnav size=2><b>Country
<td><input type=text size=35 name=country>
<tr><td><font face=vyshnav size=2><b>Phone
<td><input type=text size=35 name=phone>
<tr><td>&nbsp;<td>&nbsp;
<tr><td><font face=vyshnav size=2><b>E-mail
<td><input type=text size=35 name=email>
<tr><td><font face=vyshnav size=2><b>Date of Arrival
<td><input type=text size=35 name=arrival>
<tr><td><font face=vyshnav size=2><b>No. of Rooms
<td><input type=text size=35 name=no. of rooms>
<tr><td><font face=vyshnav size=2><b>No. of Persons
<td><input type=text size=35 name=no. of persons>
<tr><td><font face=vyshnav size=2><b>Name of the Hotel
<td><input type=checkbox value="Hotel Bhimas Paradise">Hotel Bhimas Paradise <br>
<input type=checkbox value="Hotel Bhimas">Hotel Bhimas
<tr><td><font face=vyshnav size=2><b>Types of Rooms
<td>
<input type=checkbox value="Double A/C Suite">Double A/C Suite <br>
<input type=checkbox value="Double Non A/C Suite">Double Non A/C Suite <br>
<input type=checkbox value="Single A/C">Single A/C <br>
<input type=checkbox value="Single Non A/C">Single Non A/C <br>
<tr><td><font face=vyshnav size=2><b>Mode of Payment
<td>
<select>
<option selected>Cash
<option>Cheque
<option>Credit Card
<option>Debit Card
<option>UPI
</select>
<tr><td><font face=vyshnav size=2><b>Remarks
<td>
<textarea rows=2 cols=20 name=remarks></textarea>
<tr>
<td><input type=submit value="submit">
<td><input type=reset value="Reset">
</table>
</form>
</body></html>

Output:
Experiment-7:

Aim : Embed a calendar object in your web page.

Source Code:

<html>
<head>
<style>
*{box-sizing:border-box;}
ul{list-style-type:none;}
body{font-family:verdana,sans-serif;}
.month{
padding:70px 25px;
width=100%;
background:#1abc9c;
text-align:center;
}
.month ul{
margin:0;
padding:0;
}
.month ul li{
color:white;
font-size;20px;
text-transform:uppercase;
letter-spacing:3px;
}
.month.prev{
float:left;
padding-top:10px;
}
.month.next{
float:right;
padding-top:10px;
}
.weekdays{
padding:10px 0;
background-color:#ddd;
margin:0;
}
.weekdays li{
display:inline-block;
width:13.6%
color:#666;
text-align:center;
}
.days{
padding:10px 0;
background:#eee;
margin:0;
}
.days li{
list-style-type:none;
display:inline-block;
width:13.6%;
text-align:center;
margin-bottom:5px;
font-size:12px;
color;#777;
}
.days li .active{
padding:5px;
background:#1abc9c;
color:white !important
}
@media screen and(max-width:720px){
.weekdays li, .days li{width 13.1%;}
}
@media screen and(max-width:420px){
.weekdays li, .days li{width 12.5%;}
.days li .active{padding:2px;}
}
@media screen and(max-width:290px){
.weekdays li, .days li{width 12.2%;}
}
</style>
</head>
</body>
<h1 align="center"> CSS Calender </h1>
<div class="month">
<ul>
<li class="prev"> &#10094;
August &#10095; </li>
<span style="font-size:20px">2021</span> </li>
</li>
</ul>
</div>
<ul class ="weekdays">
<li>mon </li>
<li>tue</li>
<li>wed</li>
<li>thu</li>
<li>fri</li>
<li>sat</li>
<li>sun</li>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li>11</li> <li>12</li> <li>13</li> <li>14</li>
<li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li>
<li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li>
<li>25</li> <li>26</li> <li>27</li> <li>28</li> <li>29</li> <li>30</li> <li>31</li>
</ul>
</body>
</html>

Output :

Experiment-8:
Aim : Create an applet that accepts two numbers and perform all the arithmetic operations on
them.

Source Code :

<html>
<head>
<title>Simple calcularer using javascript </title>
<basefont size="5" face="airal">
<script language="javascript">
function add()
{
document.form1.result.value=parseInt(document.form1.first.value)+parseInt(document.form
1.second.value
);
}
function sub()
{
document.form1.result.value=parseInt(document.form1.first.value)-
parseInt(document.form1.second.value);
}
function mul()
{
document.form1.result.value=parseInt(document.form1.first.value)*parseInt(document.form1
.second.value
);
}
function div()
{
document.form1.result.value=parseInt(document.form1.first.value)/parseInt(document.form1.
second.value
);
}
</script>
</head>
<body bgcolor="#skyblue">
<form name="form1">
<h1 align="center">Simple Calculator</h1>
<table cellpadding="10" cellspacing="0" border="3" bordercolor="#red" align="center">
<tr><td> first number
<td><input type="text" size="30" name="first">
</tr>
<tr><td> second number
<td><input type="text" size="30" name="second">
</tr>
<tr><td> result
<td><input type="text" size="30" name="result">
</tr>
<tr><td>
<input type="button" value="+" name="xx" onClick="add()">
<input type="button" value="-" name="yy" onClick="sub()">
<input type="button" value="*" name="zz" onClick="mul()">
<input type="button" value="/" name="ww" onClick="div()">
<input type="reset" value="clear">
</tr>
</table>
</form>
</body>
</html>

Output :

Experiment-9:

Aim :Create nested table to store your curriculum.

Source Code :

<html>

<head>

<tittle>PERSONAL INFORMATION</tittle>

</head>

<body>

<h1 align="center"> CURRICULUM VITAE </h1>

<hr>

<table align="center" border="5" width="70%">


<tr><td>Name

<td colspan="3"> D.NAGA VYSHNAV

</tr>

<tr><td>Father Name

<td colspan="3"> D.NAGA VYSHNAV

</tr>

<tr>

<td>Gender

<td colspan="3">Male

</tr>

<tr><td>Date of Birth

<td colspan="3">18-Feb-2002

</tr>

<tr><td>Nationality

<td colspan="3">Indian

</tr>

<tr><td rowspan="5">Address</tr>

<tr><td colspan="2">Street/town:Neelapuram</tr>

<tr><td colspan="2">District:YSR District</tr>

<tr><td colspan="2">State:Andhra Pradesh</tr>

<tr><td colspan="2">PhoneNo:8688716108</tr>

<tr><th colspan="3">Educational Qualifications</tr>

<tr align="center">

<th>Degree

<th>University/Institute

<th>Month&Year
</tr>

<tr>

<td>Degree

<td>Yogi Vemana University

<td>2022

</tr>

<tr>

<td>Intermediate

<td>Board of Intermediate Education

<td>Sri CHAITANYA jr college,kadapa

</tr>

<tr>

<td>SSC

<td>Board of Secondary Education

<td>Keshava Reddy School,kadapa

</tr>

</table>

</body>

</html>

OUTPUT :
Experiment-10:

Aim: Create a form that accepts the information from the subscriber of a mailing system.

Source Code:

<html>

<body bgcolor=”black” text=red>

<form name=frm>

<center>

<font size=5 face=”Maiandra GD” color=purple>

***CREATION OF E-MAIL ID***

</font>

<hr color=pint>

<table style=”FONT-SIZE:12px; FONT-WEIGHT:blod; FONT-FAMILY:Tahoma;


color=”#ffffcc” cellpadding=5>

<tr><td>*First Name:<td><input name=t1></td>

<tr><td>*middle Name:<td><input name=t2></td>


<tr><td>*last Name:<td><input name=t3></td>

<tr><td>*Gender:<td><input type=”radio” name=radio1> male <input type=”radio name


=radio1>female</td>

<tr><td>*E-Mail ID:<td><input name=t4>&nbsp;@yahoo.com

<tr><td>*Password:<td><input name=p1 type =Password></td>

<tr><td>*Re-Type Password:<td><input name=p2 type=Password></td>

<tr><td>*select content:

<td><select style=”WIDTH:150px”>

<option selected> India</option>

<option>USA</option>

<option>switzerland</option>

<option>canada</option>

</select></td>

<tr>

<td>*Zipcode:

<td><input name=t5></td>

<tr>

<td>*Date of Birth:

<td>

<select>

<option selected> January</option>

<option > February</option>

<option >March</option>

<option >April </option>

<option > May</option>

<option > June</option>

<option > July</option>


<option > August</option>

<option >September</option>

<option > October</option>

<option > November</option>

<option >December</option>

</select>(mm) &nbsp;

<select>

<option selected>1</option><option >2</option>

<option >3</option><option >4</option>

<option >5</option><option >6</option>

<option >7</option><option >8</option>

<option >9</option><option >10</option>

<option >11</option><option >12</option>

<option >13</option><option >14</option>

<option >15</option><option >16</option>

<option >17</option><option >18</option>

<option >19</option><option >20</option>

<option >21</option><option >22</option>

<option >23</option><option >24</option>

<option >25</option><option >26</option>

<option >27</option><option >28</option>

<option >29</option><option >30</option>

<option>31</option>

</select>(dd)&nbsp;

<select>

<option selected>1982</option>

<option >1983</option>
<option >1984</option>

<option >1985</option>

<option >1986</option>

<option >1987</option>

<option >1988</option>

<option >1989</option>

<option >1990</option>

<option >1991</option>

<option >1992</option>

<option >1993</option>

<option >1994</option>

<option >1995</option>

<option >1996</option>

<option >1997</option>

<option >1998</option>

<option >1999</option>

<option >2000</option>

<option >2001</option>

<option >2002</option>

<option >2003</option>

<option >2004</option>

<option >2005</option>

<option >2006</option>

<option >2007</option>

<option >2008</option>

<option >2009</option>

<option >2010</option>
</select>(yyyy)

<tr><td rowspan=3>*Hobbies

<tr><Td><p><input type=checkbox>Reading Books <input type=checkbox>chatting


</p></td></tr>

<tr><td><input type=checkbox>playing cricket<input


type=checkbox>watchingTV<td></td></tr>

<tr><Td>*Address:<td><textarea cols=18 id=txt1 rows=3></textarea></td>

<tr align=middle><td colspan=2><input=button value=submit name=c1></td>

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

Output:

Experiment-11:

Aim : Design the page as follows …..


Source Code:

<html>

<head><title> Tables</title></head>

<body>

<h1 align = center> BatMobile</h1>

<table border = 1 align = center>

<tr><th>Special Equipment <th colspan = 2 align = center> Specificatins/Performance


Data</tr>

<tr><td>Retractable protective armor<th> Engine Type <td> Jet Turbine</tr>

<tr><td>Weapons System<th>Thrust<td> 150lbs @103% ROS </tr>

<tr><td> Instruments-Aircraft w/on-broad


computer<th>Torque<td>1750lbs/ft@98.7%ROS</tr>

<tr><td> rowspan=9 align=center><img src="images.jpeg" width="150"


height="100"></img><th>0 to 60 MPH><td>3.7 sec</tr>

<tr><th> Top Speed<td> Unknown</tr>

<tr><th> Breake Rating<td> Excellent</tr>

<tr><th>Wheel Base<td>141.0 in.</tr>

<tr><th> Leangth <td>260.7 in.</tr>

<tr><th> Width <td>94.4 in. </tr>


<tr><th> Wheels<td> Cate Alloy, 15X6.5</tr>

<tr><th> Fuel Requirement <td> high cost 97% Special </tr>

</table>

</body>

</html>

Output :-

Experiment--12:

Aim:- To create a help file using frames in html


Source Code :

// open the notepad, type the below code and save as “frames.html”
<html>
<head><title>S.V.Arts College</title>
<frameset cols="20%,80%">
<frame src="a.html">
<frame src="b.html" name="right">
</frameset></head></html>

// open the notepad, type the below code and save as “a.html”
<html><body>
<h3><i>Courses Offered:</i></h3>
<h4><i><ul type="*">
<li><a href="BSC.html" target="right">B.Sc Courses</a><br><br>
<li><a href="BCOM.html" target="right">B.Com Courses</a><br><br>
<li><a href="PG.html" target="right">P.G Coursrs</a>
</ul></li></h4>
</body></html>

// open the notepad, type the below code and save as “b.html”
<html>
<body>
<h1 style="font-family:Arial Black;">
<center>S.V.ARTS COLLEGE</center>
</h1>
<hr><hr>
<br><br><br><br><br><br><br><br>
<center>
<img src="https://cdn.pixabay.com/photo/2015/07/31/11/45/library-869061__340.jpg"
width=500 height=300 border=5></img>
</center></body></html>

// open the notepad, type the below code and save as“bsc.html”

<html><body><h3><i>B.Sc Courses:</i></h3>
<hr>
<h4><i><ul type="*">
<li>B.Sc Biotechnology<br><br>
<li>B.Sc MSCS<br><br>
<li>B.Sc MECS
</ul>
<a href="b.html">Back To Home</a>
</i></h4></body></html>

// open the notepad, type the below code and save as “bcom.html”
<html>
<body>
<h3><i>B.Com Courses:</i></h3>
<hr>
<h4><i><ul type="*">
<li>B.Com Computer Science<br><br>
<li>B.Com General<br><br>
</ul>
<a href="b.html">Back To Home</a>
</i></h4></body></html>

Output:-
Experiment -13 :-
Aim :- To including different types of Style sheets

Source Code :-

// open the notepad, type the below code and save as “style1.html”

<html><head>
<title>style sheets</title>
<link rel="stylesheet" href="mystyle1.css">
<style type="text/css">
h1
{
font-family:"Times New Roman";
font-size:36px;
color:maroon;
}
h3
{
font-family:"Times New Roman";
font-size:36px;
background:#ffffff;
color:maroon;
text-align:center;
text-decoration:underline;
}
.p
{
font-family:arial,verdana,sans-serif;
font-size:20px;
background:#ffffff;
color:red;
}
p.style1
{
font-familly:arial,verdana,sans-serif;
font-size:16px;
background:#ffffff;
color:navy;
}
</style>
</head>
<body>
<h3>Different types of style sheets</h3>
<h1>This is an example for Internal style sheet</h1>
<p>This is a Normal paragraph</p>
<p class=style1>This is a paragraph with Arial font and 16px size</p>
<p style="color:#009900; font-size:50px;font-style:italic;text-align:center;">This is a
example for inline style sheet</p>
<h1 class=main>This is an example for External style sheet</h2>
</body></html>
mystyle1.css

body {
background-color:powderblue;
}
.main {
text-align:center;
}

Output :-

Experiment-14 :-
Aim :- To creating a static webpage in html

Source Code:-

//open the notepad, type the below codeand save as “home.html”

//open the notepad, type the below codeand save as “head.html”

//open the notepad, type the below codeand save as “dept.html”


//open the notepad, type the below codeand save as “desc.html”

Output :-
Experiment-15:

Aim:- Write a html program to layers of information in web page.

Source Code:

<html>
<title>Layer Effect Example</title>
</head>
<body>
LAYER 1 ON TOP :
<div style="position:relative;
font-size:50px;
z-index:2;">
LAYER 1
</div>
<div style="position:relative;
top:-50;
left:5;
color:gray;
font-size:80px;
z-index:1;">
LAYER 2
</div>
LAYER 2 ON TOP :
<div style="position:relative;
font-size:50px;
z-index:4;">
LAYER 2
</div>
<div style="position:relative;
top:-50;
left:5;
color:gray;
font-size:80px;
z-index:3;">
LAYER 1
</div>
</body></html>

Output:

You might also like