Scribd
Upload
3K views

Class 10 Lab Practical File

The document contains an HTML practical file with programs demonstrating various HTML tags and their attributes. It includes programs for basic tags like headings, paragraphs, lists and tables. It also includes programs for form tags, images, links and other advanced tags. The file is a submission for a computer applications lab practical.

Uploaded by

bhattjishambhu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3K views

Class 10 Lab Practical File

The document contains an HTML practical file with programs demonstrating various HTML tags and their attributes. It includes programs for basic tags like headings, paragraphs, lists and tables. It also includes programs for form tags, images, links and other advanced tags. The file is a submission for a computer applications lab practical.

Uploaded by

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

RAINBOW ACADEMY

SENIOR SECONDARY SCHOOL

COMPUTER APPLICATIONS
LAB
PRACTICAL FILE

Submitted To: Submitted By:


Mr. Ashwani Kumar Yadav Ajay Gunwant
PGT Computer Science Class X A
Roll No.:____________
INDEX
S.No. Program Page No.
1. WriteanHTMLprogramfor firstwebpage. 1
2. WriteanHTMLprogramto demonstrate the use of bodytag&its attributes. 2
3. WriteanHTMLprogram to demonstrate the use ofheading tags. 3
4. WriteanHTMLprogramto demonstrate the use ofparagraphtag&its attributes. 4
5. WriteanHTMLprogramto demonstrate the use ofunorderedlist &its attributes. 5
6. WriteanHTMLprogramto demonstrate the use oforderedlist&its attributes. 6
7. WriteanHTMLprogramto demonstrate the use ofdescription/definitionlist&its 7
attributes
8. WriteanHTMLprogramto demonstrate the use ofnestedlist. 8
9. WriteanHTMLprogramto demonstrate the use offonttag&its attributes. 9
10. WriteanHTMLprogramto demonstrate the use ofsuperscript& subscript. 10
11. WriteanHTMLprogramto demonstrate the use ofimagetag,audiotag&videotag. 11
12. WriteanHTMLprogramto demonstrate the use ofanchortagwithits attributes. 12
13. WriteanHTMLprogramto demonstrate the use offormtagwithcombobox, 13
textbox,password,radiobuttons,checkbox,list&button.
14. WriteanHTMLprogramto demonstrate the use oftabletagwithattributes. 14
15. WriteanHTMLprogramto demonstrate the use ofcolspanattribute in table tag. 15
16. WriteanHTMLprogramto demonstrate the use ofrowspanattribute, table caption in 16
table tag.
17. WriteanHTMLprogramto demonstrate the use ofbothcolspan&rowspanattributes in 17-18
table tag.
18. WriteanHTMLprogramto demonstrate the use ofiframetag&its attributes. 19
19. WriteanHTMLprogramto demonstrate the use ofinline,internal&externalCSS. 20
20. WriteanHTMLprogramto demonstrate the use ofCSSstylesheet. 21-23
1. WriteanHTMLprogram(firstwebpage) forthefollowingimageoutput:

HTML CODE: (1.html)


<html>
<head>
<title>start</title>
</head>
<body>
helloworld!
<br>
thisismyfirstwebpage.
</body>
</html>
2. WriteanHTMLprogram(bodytag&attributes)forthefollowingimageoutput:

HTML CODE:(2.html)
<html>
<head>
<title>tagsintroduction</title>
</head>
<body text="maroon" bgcolor="darksalmon" link="blue" alink="white" vlink="green">
<!--comment:changebackground="2.jpg"bgcolor="#e8c2fc"-->
<ahref="https://www.google.com"target="_blank">Clickhere</a>tovisitgoogle.
</body>
</html>
3. WriteanHTMLprogram(headings)for theimageoutput:

HTML CODE: (3.html)


<html>
<head>
<title>tagsforheading,br,hr</title>
</head>
<body>
textyahoo
<hr>
<!--headings-->
<h6>headingyahoo</h6><!--smallest-->
<br><hr>
<h5>headingyahoo</h5>
<br><hr>
<h4>headingyahoo</h4>
<br><hr>
<h3>headingyahoo</h3>
<br><hr>
<h2>headingyahoo</h2>
<br><hr>
<h1>headingyahoo</h1><!--largest-->
</body>
</html>
4. WriteanHTMLprogram(paragraphtag;ptag&attributes)for theimageoutput:

HTML CODE:(4.html)
<html>
<head>
<title>tag for p</title>
</head>
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi aspernatur atque magnam, incidunt
minima est hic nam earum quasi END!</p>
<p align="center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolore consequatur in
ipsum pariatur quia eius, obcaecati est, officia END!</p>
<p align="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolore consequatur in ipsum pariatur quia
eius, obcaecati est, officia END!
</p>
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolore consequatur in ipsum pariatur quia
eius, obcaecati est, officia END!
</p>
</body>
</html>
5. WriteanHTMLprogram(unorderedlist;ul tag&attributes)forthefollowingimageoutput:

HTML CODE:(5.html)
<html>
<head>
<title>tagsforb,i,u,ul,li</title>
</head>
<body>
<b><i><u>typesofmatterare:</u></i></b>
<!--unorderedlist/bulletedlist-->
<ultype="square"><!--othervalues:disc,circle-->
<li>solid</li>
<li>liquid</li>
<li>gas</li>
</ul>
</body>
</html>
6. WriteanHTMLprogram(orderedlist,oltag&attributes)forthefollowingimageoutput:

HTML CODE:(6.html)
<html>
<head>
<title>tagforol,li</title>
</head>
<body>
<b><i><u>typesofmatterare:</u></i></b>
<!--orderedlist/numberedlist -->
<oltype="A">
<li>solid</li>
<li>liquid</li>
<li>gas</li>
</ol>
<olstart="97"><!--startattributeworksonlyondecimallist-->
<li>solid</li>
<li>liquid</li>
<li>gas</li>
</ol>
</body>
</html>
7. WriteanHTMLprogram(description/definitionlist;dltag&attributes)forthefollowingimageoutput:

HTML CODE:(7.html)
<html>
<head>
<title>tagsfordl,dt,dd</title>
</head>
<body>
<!--description/definitionlist-->
<dl>
<dt>UNITI:PLANT LIFE</dt>
<dd>Ch1:Photosynthesis</dd>
<dd>Ch2:Respiration</dd>
</dl>
<dl>
<dt>UNITII:ANIMALLIFE</dt>
<dd>Ch1:Digestion</dd>
<dd>Ch2:Kingdoms</dd>
</dl>
</body>
</html>
8. WriteanHTMLprogram(nestedlist)forthefollowingimageoutput:

HTML CODE: (8.html)


<html>
<head>
<title>nestedlist</title>
</head>
<body>
belowisanestedlist:
<ol>
<li>examplesofsolidare</li>
<oltype="a">
<li>rock</li>
<li>paper</li>
</ol>
<li>examplesofliquidare</li>
<oltype="a">
<li>oil</li>
<li>water</li>
</ol>
<li>examplesofgasare</li>
<oltype="a">
<li>oxygen</li>
<li>nitrogen</li>
</ol>
</ol>
</body>
</html>
9. WriteanHTMLprogram(fonttag&attributes) forthefollowingimageoutput:

HTML CODE:(9.html)
<html>
<head>
<title>fonttag</title>
</head>
<body>
Loremipsumdolorsitamet,consecteturadipisicingelit.Repellatveniamadipiscieosmolestiasmaximeenim,repellend
uspraesentium officiaabnisi.
<br>
<fontface="algerian"size="4"color="red"><!--size:1-7-->
Loremipsumdolorsitamet,consecteturadipisicingelit.Cupiditatedistinctiovoluptatibus,quamveritatisidquitempori
busaspernatur possimus!Sed, quos.
</font>
</body>
</html>
10. WriteanHTMLprogram(superscript& subscript;sup&subtags)forthefollowingimageoutput:

HTML CODE:(10.html)
<html>
<head>
<title>tagsforsupsub</title>
</head>
<body>
base<sup>thisissuperscipt</sup>
<br><hr>
base<sub>thisissubscript</sub>
</body>
</html>
11. WriteanHTMLprogram(imagetag,audiotag&videotag)forthefollowingimageoutput:

HTML CODE:(11.html)
<html>
<head>
<title>image,audio,video</title>
</head>
<body>
<h3>eg of an image</h3>
<img src="logo.png" alt="google logo" height="70" width="70">
<hr>
<h3>eg of an audio input</h3>
<audio controls src="audio.mp3"></audio>
<hr>
<h3>eg of a video input</h3>
<video controls src="My video.mp4" height="200" width="400"></video>
</body>
</html>
12. WriteanHTMLprogram(anchortag;atagwithattributes;‘mailto:’) forthefollowingimageoutput:

HTML CODE:(12.html)
<html>
<head>
<title>anchor tags</title>
</head>
<body text="maroon" bgcolor="#e8c2fc">
<h3>eg of text hyperlink</h3>
<a href="https://www.google.com" target="_blank">click here</a> to visit google.
<hr><br>
<h3>eg of image hyperlink</h3>
<a href="https://www.google.com"><img src="logo.png" alt="google logo" height="250"
width="250"></a>
<hr><br>
<h3>usage of 'mailto' in 'href' attribute</h3>
<a href="mailto:[email protected]" target="_blank">click here</a> to send an e-mail.
</body>
</html>
13. WriteanHTMLprogram(formtagwithcombobox, textbox,password,radiobuttons,checkbox,list&button
forthefollowingimageoutput:

HTML CODE:(13.html)
<html>
<head>
<title>form tag </title>
</head>
<body text="navy" align="center"><!--align attribute-->
<img src="school logo.png" width="70" height="70" alt="Rainbow Academy Logo">
<h2> RAINBOW ACADEMY SENIOR SECONDARY SCHOOL </h2><hr>
<!-- combo box aka form-->
<form>
<label> Email/Phone </label><br>
<!--textbox -->
<input type="textbox" placeholder="Enter Email ID/ Phone No."><br>
<!--password --><label>Password </label><br>
<input type="password" placeholder="Enter Password"><br><label>Account Type:</label>
<!--radio button -->
<input type="radio" name="account" value="Admin" /> Admin
<input type="radio" name="account" value="Guest" /> Guest <br><br><label>Session:</label>
<!--dropdown list-->
<select name= "Session">
<option value="2021-22"> 2021-22 </option>
<option value="2020-21"> 2020-21 </option>
<option value="2019-20"> 2019-20 </option>
<option value="2018-19"> 2018-19 </option>
</select><br><br>
<!--checkbox -->
<input type="checkbox" name="Remember me" value="Remember" /> Remember me
<br><br>
<!--buttons-->
<input type="submit" name="log in" value="Log In" />
<input type="reset" name="sign up" value="Clear All" /><br>
</form>
</body>
</html>
14. WriteanHTMLprogram(tabletagwithattributes)forthefollowingimageoutput:

HTML CODE: (14.html)


<html>
<head>
<title>simpletable</title>
</head>
<body>
<!--table-->
<tableborder="1"cellpadding="8"cellspacing="2">
<tr><!--headerrow-->
<th>header1</th><!--columnheader-->
<th>header2</th><!--columnheader-->
</tr>
<tr><!--firstdatarow-->
<td>RASSS</td><!--tabledata-->
<td>RAINBOW ACADEMY</td>
</tr>
<tr><!--seconddatarow -->
<td>SENIOR SCONDARY</td>
<td>SCHOOL</td>
</tr>
</table>
</body>
</html>
15. WriteanHTMLprogram(colspanattribute)forthefollowingimageoutput:

HTML CODE:(15.html)
<html>
<head>
<title>table with colspan</title>
<style>
.th,table,td{
border:solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<table cellpadding="8" cellspacing="2">
<!--first row -->
<tr>
<th colspan="2">Today's match between</th>
</tr>
<!--second row -->
<tr>
<td>Australia</td>
<td>England</td>
</tr>
<!--third row -->
<tr>
<th colspan="2">Tommorrow's match between</th>
</tr>
<!--fourth row -->
<tr>
<td>India</td>
<td>Pakistan</td>
</tr>
</table>
</body>
</html>
16. WriteanHTMLprogram(rowspanattribute, table caption)forthefollowingimageoutput:

HTML CODE:(16.html)
<html>
<head>
<title>table with rowspan</title>
<style>
.th,table,td,th{
border:solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<center>
<table cellpadding="8" colspacing="2">
<caption>Bus Route Chart</caption>
<!--first row -->
<tr>
<th rowspan=2>Bus Route: 1</th><!--col 1-->
<td>Girls: 24</td><!--col 2 -->
</tr>
<!--second row -->
<tr>
<td>Boys: 14</td><!--col 2 -->
</tr>
<!--third row -->
<tr>
<th rowspan=2>Bus Route: 2</th><!--col 1-->
<td>Girls: 46</td><!--col 2 -->
</tr>
<!--fourth row -->
<tr>
<td>Boys: Nil</td><!--col 2-->
</tr>
</table>
</center>
</body>
</html>
17. WriteanHTMLprogram(bothcolspan&rowspanattributes)forthefollowingimageoutput:
HTML CODE:(17.html)
<html>
<head>
<title>table with rowspan</title>
<style>
.th,table,td,th{
border:solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<center>
<table cellpadding="8" colspacing="2">
<caption>Type of Progamming Languages</caption>
<!--first row -->
<tr>
<th colspan="3">Types of Programming Languages</th>
</tr>
<!--row 2-->
<tr>
<td rowspan="2">1</td>
<td rowspan="2" align="center">Programming Language</td>
<td>C</td>
</tr>
<!--row 3-->
<tr>
<td>C++</td>
</tr>
<!--row 4-->
<tr>
<td rowspan="2">2</td>
<td rowspan="2" align="center">Markup Language</td>
<td>HTML</td>
</tr>
<!--row 5-->
<tr>
<td>XML</td>
</tr>
<!--row 6-->
<tr>
<td rowspan="2">3</td>
<td rowspan="2" align="center">Scripting Language</td>
<td>javascript</td>
</tr>
<!--row 7-->
<tr>
<td>perl</td>
</tr>
</table>
</center>
</body>
</html>
18. WriteanHTMLprogram(iframetag&attributes) forthefollowingimageoutput:

HTML CODE:(18.html)
<html>
<head>
<title>frames</title>
</head>
<body>
<b><i>This webpage has two frames for two separate html docs</i></b>
<br><br>
<!--frame1-->
<iframe src="17.html" height="310" width="300" frameborder="2"></iframe>
<!--frame2-->
<iframe src="16.html" height="310" width="300" frameborder="2"></iframe>
</body>
</html>
19. WriteanHTMLprogramwithinline,internal&externalCSSstylesheet forthefollowingimageoutput:

HTML CODE: (19.html)


<html>
<head>
<title>amazing css (basics)</title>
<!-- internal style sheet method-->
<style>
#block2{
background-color: blue; color: white;
}
</style>
<!--external style sheet method-->
<link rel="stylesheet" href="style1.css" type="text/css">
</head>
<body>
<!--block for inline style sheet method-->
<div id="block1" style="background-color: red; color: white">
<h3>block1 h3</h3>
</div>
<!--block for internal style sheet method-->
<div id="block2">
<h2>block2 h2</h2>
</div>
<!--block for external style sheet method-->
<div id="block3">
<h1>block3 h1</h1>
</div>
</body>
</html>

External CSS(Style1.css):
/* use '#' for <div id>*/ #block3{
background-color: green; color: white;
}
/* don't use '#' for tags*/ h1{
border: 4px grey solid;
}
/* to apply same property to multiple tags*/ h1, h2, h3{
text-align: center;
}
20. WriteanHTMLprogramwithCSSstylesheetthefollowingimageoutput:
HTML CODE: (20.html)
<html>
<head>
<title>Demo css (project)</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<!-- -->
<div id="container">
<div id="header">
<h1>HTML Introduction</h1>
</div>
<div id="content">
<div id="borders">
<h3 align="center">Borders Used</h3><!--align attribute-->
<ul>
<li>header: red </li><li>container: blue</li><li>notice: green </li>
<li>main: pink </li><li>footer-border: white </li><li>footer-outline: black</li>
</ul>
</div>
<div id="main">
<h2 align="center">Main content area</h2>
<hr width=70%>
<b><i>Check other html Examples using links below:</i></b><br>
<ul>
<li>
<a href="11.html" target="_blank">HTML Example for image, audio input & video input</a>
</li>
<li>
<a href="13.html" target="_blank">HTML Example for Login Form</a>
</li>
<li>
<a href="17.html" target="_blank">HTML Example for Table with colspan & rowspan</a>
</li>
<li>
<a href="19.html" target="_blank">HTML Example for Inline, Internal & External CSS</a>
</li>
</ul>
<p>The HyperText Markup Language or HTML is the standard markup language for documents
designed to be displayed in a web browser. It can be assisted by technologies such as Cascading
Style Sheets (CSS) and scripting languages such as JavaScript.</p>
<p>Web browsers receive HTML documents from a web server or from local storage and render
the documents into multimedia web pages. HTML describes the structure of a web page
semantically and originally included cues for the appearance of the document.</p>
<p>HTML elements are the building blocks of HTML pages. With HTML constructs, images and
other objects such as interactive forms may be embedded into the rendered page. HTML provides a
means to create structured documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written
using angle brackets. Tags such as Image and Input directly introduce content into the page. Other
tags such as Paragraph surround and provide information about document text and may include
other tags as sub-elements. Browsers do not display the HTML tags but use them to interpret the
content of the page.</p>
</div>
</div>
<div id="footer">
copyright &copy; 2022 RAINBOW ACADEMY
</div>
</div>
</body>
</html>
External CSS(Style2.css):
/*CSS RULES TO DESIGN TAGS & DIVS*/
body{
background-color: #eeeeee; /*property: value*/ font-family: calibri, arial, sans-serif;
}
/*only div is written with '#' symbol*/ #header{
border: 2px red solid; background-color: #66ccff; color: white;
text-align: center; padding: 10px;
}
#container{
border: 2px blue solid; background-color: white; width: 810px;
margin: 0 auto 0 auto;
}
#content{
padding: 10px; /*applies to all 4 directions*/
}
#borders{
border: 2px green solid; width: 180px;
float: left;
}
#main{
border: 2px pink solid; width: 595px;
float: right; padding-left: 5px;
}
#footer{
border: 2px white solid;
border-style:dashed; /*other values: dotted, double etc.*/ outline: 2px black solid;
clear:both;
background-color: #999999; color: white;
text-align: center; padding: 10px;
}
h1,h2,h3{
margin: 0;
}

You might also like