Class 10 Lab Practical File

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">

<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>

<h6>headingyahoo</h6>
<br><hr>
<h5>headingyahoo</h5>
<br><hr>
<br><hr>
<br><hr>
<br><hr>
<h1>headingyahoo</h1>
</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>

<ultype="square">
<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>

<oltype="A">
<li>solid</li>
<li>liquid</li>
<li>gas</li>
</ol>
<olstart="97">
<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>

<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">
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:replytosheikh@gmail.com" 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">
<img src="school logo.png" width="70" height="70" alt="Rainbow Academy Logo">
<h2> RAINBOW ACADEMY SENIOR SECONDARY SCHOOL </h2><hr>

<form>
<label> Email/Phone </label><br>

<input type="textbox" placeholder="Enter Email ID/ Phone No."><br>
<label>Password </label><br>
<input type="password" placeholder="Enter Password"><br><label>Account Type:</label>

<input type="radio" name="account" value="Admin" /> Admin
<input type="radio" name="account" value="Guest" /> Guest <br><br><label>Session:</label>

<select name= "Session">
<option value="2021-22"> 2021-22 </option>
</select><br><br>

<input type="checkbox" name="Remember me" value="Remember" /> Remember me
<br><br>

<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>

<tableborder="1"cellpadding="8"cellspacing="2">
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>RASSS</td>
<td>RAINBOW ACADEMY</td>
</tr>
<tr>
<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">

<tr>
<th colspan="2">Today's match between</th>
</tr>

<tr>
<td>Australia</td>
<td>England</td>
</tr>

<tr>
<th colspan="2">Tommorrow's match between</th>
</tr>

<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;
}
</style>
</head>
<body>
<center>
<table cellpadding="8" colspacing="2">
<caption>Bus Route Chart</caption>

<tr>
<th rowspan=2>Bus Route: 1</th>
<td>Girls: 24</td>
</tr>

<tr>
<td>Boys: 14</td>
</tr>

<tr>
<th rowspan=2>Bus Route: 2</th>
<td>Girls: 46</td>
</tr>

<tr>
<td>Boys: Nil</td>
</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;
}
</style>
</head>
<body>
<center>
<table cellpadding="8" colspacing="2">
<caption>Type of Progamming Languages</caption>

<tr>
<th colspan="3">Types of Programming Languages</th>
</tr>

<tr>
<td rowspan="2">1</td>
<td rowspan="2" align="center">Programming Language</td>
<td>C</td>
</tr>

<tr>
<td>C++</td>
</tr>

<tr>
<td rowspan="2" align="center">Markup Language</td>
<td>HTML</td>
</tr>

<tr>
<td>XML</td>
</tr>

<tr>
<td rowspan="2" align="center">Scripting Language</td>
<td>javascript</td>
</tr>

<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>

<iframe src="17.html" height="310" width="300" frameborder="2"></iframe>

<iframe src="16.html" height="310" width="300" frameborder="2"></iframe>
</body>
</html>
19. WriteanHTMLprogramwithinline,internal&externalCSSstylesheet forthefollowingimageoutput:

<html>
<head>
<title>amazing css (basics)</title>

<style>
#block2{
background-color: blue; color: white;
}
</style>

<link rel="stylesheet" href="style1.css" type="text/css">
</head>
<body>

<div id="block1" style="background-color: red; color: white">
<h3>block1 h3</h3>
</div>

<div id="block2">
<h2>block2 h2</h2>
</div>

<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>
<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>
<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 © 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;
}

Class 10 Lab Practical File

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Class 10 Lab Practical File

Uploaded by

Copyright:

Available Formats

RAINBOW ACADEMY

SENIOR SECONDARY SCHOOL

Submitted To: Submitted By:

HTML CODE: (1.html)

HTML CODE: (3.html)

HTML CODE: (8.html)

HTML CODE: (14.html)

HTML CODE: (19.html)

You might also like