Scribd
Upload
59 views

Practical File

The document contains code snippets from 11 HTML programs about various HTML tags and their usage. The programs cover tags such as body, heading, paragraph, horizontal rule, font, ordered list, unordered list, subscript, superscript and nested lists. For each tag, the code provides examples to demonstrate how to use the tag and any associated attributes.

Uploaded by

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

Practical File

The document contains code snippets from 11 HTML programs about various HTML tags and their usage. The programs cover tags such as body, heading, paragraph, horizontal rule, font, ordered list, unordered list, subscript, superscript and nested lists. For each tag, the code provides examples to demonstrate how to use the tag and any associated attributes.

Uploaded by

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

PRACTICAL FILE

COMPUTER
APPLICATIONS
BY PRIYANSHU
CLASS X - B

PROGRAM 1:
ATTRIBUTES OF BODY TAG
OUTPUT:

CODE:
<!--THIS HTML PAGE TELLS ABOUT ATTRIBUTES OF BODY TAG-->
<html>
<head><title>ATTRIBUTES OF BODY TAG</title></head>
<body background="download.jfif" topmargin=60 leftmargin=60>
<center><H1><B><U><font face="Impact" size=7
color="white">ATTRIBUTES OF BODY
TAG</h1></B></U></center></font>
<HR WIDTH=1200 SIZE=10 COLOR=GREY>
<font face="calibri" color="white" SIZE=6><B><BR><P>
THE MAJOR ATTRIBUTES OF BODY TAG ARE:-</FONT>
<UL TYPE=SQUARE><font face="calibri" color="A4A4A4" SIZE=6>
<LI>Alink-It defines the color of the active link in a document.</LI>
<LI>background-It determines the background image for the document.</LI>
<LI>bgcolor-It determines the background color of the content.</LI>
<LI>vlink-It determines the color of the visited link. </LI>
<LI>text-It determines the color of the text in the document.</LI>
<LI>Lestmargin-the margin to the blank are left from the edge of page.</LI>
<LI>Topmargin-it is used to set the topmargin of the page.</LI>
</b> </ul> </font>
</body> </html>

PROGRAM 2:
HEADING TAG

OUTPUT:

CODE:
<!--THIS HTML PAGE TELLS ABOUT HEADING TAG-->
<html>
<head><title>HEADING TAG</title></head>
<body background="download.jfif" topmargin=60 leftmargin=60>
<center><H1><B><U><font face="Consolas" color="white">HEADING
TAG</h1></B></U></center></font>
<HR WIDTH=1200 SIZE=10 COLOR=GREY>
<font face="calibri" color="white" SIZE=5><B><BR><P>
HTML HAS 6 LEVELS OF HEADINGS. NUMBERED 1 THROUGH 6,
WITH ONE BEING THE LARGEST. HEADINGS ARE TYPICALLY
DISPLAYED IN LARGER OR BOLDER FONTS THAN NORMAL BODY
TEXT.<BR><P>LEVELS OF HEADINGS ARE:-
<OL TYPE=A>
<LI><H1>LEVEL 1 HEADING</H1></LI>
<LI><H2>LEVEL 2 HEADING</H2></LI>
<LI><H3>LEVEL 3 HEADING</H3></LI>
<LI><H4>LEVEL 4 HEADING</H4></LI>
<LI><H5>LEVEL 5 HEADING</H5></LI>
<LI><H6>LEVEL 6 HEADING</H6></LI>
</OL></B></FONT></BODY></HTML>

PROGRAM 3:
P AND BR TAG
OUTPUT:

CODE:
<!--THIS HTML PAGE TELLS ABOUT P AND BR TAG-->
<html> <head><title>P AND BR TAG</title></head>

<body background="download.jfif" topmargin=60 leftmargin=60>

<center><H1><B><U><font face="Impact" size=7 color="white">P AND BR


TAG</h1></B></U></center></font>

<HR WIDTH=1200 SIZE=10 COLOR=GREY>

<font face="calibri" color="white" SIZE=6><B><BR><P>

THE MAJOR DIFFERENCES BETWEEN P TAG AND BR TAG ARE:-</B>

<center><table border="1" style="color:white" width=500>

<tr style="font-size:30px;font-family:calibri">

<th>P tag</th> <th>BR tag</th></tr>

<tr style="font-size:25px;font-family:calibri"><TD>It stands for


<I><B>PARAGRAPH</B></I>.</TD>

<TD>It stands for <I><B>LINE BREAK</i></b>.</TD> </tr>

<tr style="font-size:25px;font-family:calibri">

<td>It is used for changing paragraphs and starting a new paragraph just after
it.</td>

<td>It is used for breaking line and moving to the same line in the same
paragraph.</td></tr></table></center><p>

<UL><LI>EXAMPLE OF BR TAG IS:<BR>

THIS IS 1st LINE.<BR> THIS 2nd LINE AFTER BR TAG.</LI>

<P><LI>EXAMPLE OF PARAGRAPH TAG IS:<br> THIS IS A


PARAGRAPH.<P>

THIS IS ANOTHER PARAGRAPH AFTER P TAG


USED.</LI></BODY></HTML>

PROGRAM 4:
PHYSICAL TAGS B, U AND I

OUTPUT:
CODE:
<!--THIS HTML PAGE TELLS ABOUT PHYSICAL TAGS (B,U,I)-->

<html>

<head><title>PHYSICAL TAGS (B,U,I)</title></head>

<body background="download.jfif" topmargin=60 leftmargin=60>

<center><H1><B><U><font face="Consolas" color="white">PHYSICAL TAGS


(B,U,I)</h1></B></U></center></font>

<HR WIDTH=1200 SIZE=10 COLOR=GREY>

<font face="CONSOLAS" color="white" SIZE=5><B><BR><P>

Physical Tags are used in HTML to provide actual physical formatting to the text.
<P></B>

TYPES OF PHYSICAL TAGS ARE:-

<OL><LI>BOLD-IT SHOWS CHARACTERS IN <FONT


COLOR=GREY><B>BOLD</B></FONT>.</LI>

<LI>ITALICS-IT SHOWS CHARACTERS IN <FONT


COLOR=GREY><I>ITALICS</I></FONT>.</LI>

<LI>UNDERLINE- IT <FONT
COLOR=GREY><U>UNDERLINES</U></FONT> THE CHARACTERS.</LI>

</OL>

</BODY>

</HTML>
PROGRAM 5:
HR TAG

OUTPUT:
CODE:
<!--THIS HTML PAGE TELLS ABOUT HR TAG (B,U,I)-->
<html><head><title>HR TAG</title></head>
<body background="download.jfif" topmargin=60 leftmargin=60>
<center><H1><B><U><font face="Consolas" color="white">HR
TAG</h1></B></U></center></font>
<HR WIDTH=1200 SIZE=10 COLOR=GREY>
<font face="CONSOLAS" color="white" SIZE=5><B><BR><P>
The hr tag in HTML stands for horizontal rule and is used to insert a
horizontal rule or a thematic break in an HTML page to divide or separate
document sections.
The hr tag is an empty tag, and it does not require an end tag.<P>
FOR EXAMPLE:<p>There is a horizontal rule below this paragraph.</p>
<!--HTML hr tag is used here--> <hr>
<p>This is a horizontal rule above this paragraph.</p>
<P>ATTRIBUTES OF HR TAG ARE:-<BR>
Align -<font face="CONSOLAS" color="GREY" SIZE=5>Used to specify
the alignment of the horizontal rule.<br></FONT>
Noshade -<font face="CONSOLAS" color="GREY" SIZE=5>Used to
specify the bar without shading effect.<br></FONT>
Size -<font face="CONSOLAS" color="GREY" SIZE=5>Used to specify the
height of the horizontal rule.<br></FONT>
Width -<font face="CONSOLAS" color="GREY" SIZE=5>Used to specify
the width of the horizontal
rule.<br></FONT></BODY></HTML>

PROGRAM 6:
FONT TAG

OUTPUT:
CODE:
<!--THIS HTML PAGE TELLS ABOUT FONT TAG-->
<html>
<head><title>FONT TAG</title></head>
<body background="download.jfif" topmargin=60 leftmargin=60>
<center><H1><B><U><font face="Impact" size=7 color="white">FONT
TAG</h1></B></U></center></font>
<HR WIDTH=1200 SIZE=10 COLOR=GREY>
<font face="Consolas" color="white" SIZE=6><B><BR><P>
The <font> tag plays an important role in the web page to create an attractive
and readable web page. The font tag is used to change the color, size, and
style of a text. <P>
<FONT COLOR="A4A4A4"> The font tag has basically three attributes
which are given below:
<OL> <LI>SIZE</LI> <LI>FACE</LI> <LI>COLOR</LI> </OL> FOR
EXAMPLE:<BR><UL>
<!--HTML font face tag starts here--> <font face = "Times New Roman" size
= "6">
<LI>THIS IS THE USAGE OF FONT TAG.</font><br> <font face =
"Verdana" size = "6">
<LI>THIS IS THE USAGE OF FONT TAG.</font><br> <font face =
"Comic sans MS" size =" 6">
<LI>THIS IS THE USAGE OF FONT TAG.</font><br> <font face =
"WildWest" size = "6">
<LI>THIS IS THE USAGE OF FONT TAG.</font><br> <font face =
"Bedrock" size = "6">
<LI>THIS IS THE USAGE OF FONT TAG.</font><br>
<!--HTML font face tag ends here--> </UL>
</BODY> </HTML>

PROGRAM 7:
FONT TAG

OUTPUT:
CODE:
<!--THIS HTML PAGE TELLS ABOUT BASEFONT TAG-->
<html>
<head><title>BASEFONT TAG</title></head>
<body background="download.jfif" topmargin=60 leftmargin=60>
<basefont face="Impact" size=7 color="white">
<font face="Impact" size=6 color="white">
<center><H1><B><U>BASEFONT TAG</h1></B></U></center></font>
<HR WIDTH=1200 SIZE=10 COLOR=GREY>
<font face="Consolas" color="white" SIZE=6><B><BR><P>
The HTML basefont tag defines the default font-family, font-size and color
for the text in the HTML document.
<P><FONT COLOR="A4A4A4">
The basefont tag has basically three attributes which are given below:
<OL> <LI>SIZE</LI>
<LI>FACE</LI>
<LI>COLOR</LI> </OL>
</body>
</html>

PROGRAM 8:
FONT TAG

OUTPUT:
CODE:
<!--THIS HTML PAGE TELLS ABOUT ORDERED LIST-->
<html>
<head><title>ORDERED LIST</title></head>
<body background="download.jfif" topmargin=60 leftmargin=60>
<center><H1><B><U><font face="Impact" size=7
color="white">ORDERED LIST</h1></B></U></center></font>
<HR WIDTH=1200 SIZE=10 COLOR=GREY>
<font face="Consolas" color="white" SIZE=6><B><BR><P>
The HTML ol tag defines an ordered list. An ordered list can be numerical or
alphabetical.<BR>
The attribute of ordered list is "type". It defines the type of alphabet or
number a list has to be started.
<P> AN EXAMPLE OF ORDERED LIST IS:<br>
<!--THE HTML TAG STARTS FROM HERE-->
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li> </ol>
<!--THE HTML TAG ENDS FROM HERE-->
</body> </html>

PROGRAM 9:
FONT TAG

OUTPUT:
CODE:
<!--THIS HTML PAGE TELLS ABOUT UNORDERED LIST-->
<html>
<head><title>UNORDERED LIST</title></head>
<body background="download.jfif" topmargin=60 leftmargin=60>
<center><H1><B><U><font face="Impact" size=7
color="white">UNORDERED LIST</h1></B></U></center></font>
<HR WIDTH=1200 SIZE=10 COLOR=GREY>
<font face="Consolas" color="white" SIZE=6><B><BR><P>
The HTML ul tag defines an unordered (bulleted) list.<P>
The attribute of unordered list is "style". It defines the bullet type.
<P>AN EXAMPLE OF UNORDERED LIST IS:<BR>
<!--THE HTML TAG STARTS HERE-->
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<!--THE HTML TAG ENDS HERE-->
</BODY> </HTML>

PROGRAM 10:
FONT TAG

OUTPUT:
CODE:
<!--THIS HTML PAGE TELLS SUB AND SUP TAG-->
<html>
<head><title>SUB AND SUP TAG</title></head>
<body background="download.jfif" topmargin=60 leftmargin=60>
<center><H1><B><U><font face="Consolas" color="white">SUB AND
SUP TAG</h1></B></U></center></font>
<HR WIDTH=1200 SIZE=10 COLOR=GREY>
<font face="CONSOLAS" color="white" SIZE=5><B><BR><P>
Subscript: The sub tag is used to add a subscript text to the HTML document.
The sub tag defines the 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 to be written as H2O.<P>
<font face="CONSOLAS" color="A4A4A4" SIZE=5>
Superscript: The sup tag is used to add a superscript text to the HTML
document. The sup tag defines the superscript text. Superscript text appears
half a
character above the normal line and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes.<P></FONT>
FOR EXAMPLE:<BR>
<p>Testing <sub>subscript text</sub></p>
<p>Testing <sup>superscript text</sup></p>
</BODY> </HTML>

PROGRAM 11:
FONT TAG

OUTPUT:
CODE:
<!--THIS HTML PAGE TELLS ABOUT NESTED LIST-->
<html>
<head><title>NESTED LIST</title></head>
<body background="download.jfif" topmargin=60 leftmargin=60>
<center><B><U><font face="Consolas" color="white" SIZE=7>NESTED
LIST</B></U></center></font>
<HR WIDTH=1200 SIZE=10 COLOR=GREY>
<font face="Consolas" color="white" SIZE=6><B><BR><P>
A nested list or a sublist is a list within a list.
<P>FOR EXAMPLE:<BR>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</BODY> </HTML>

PROGRAM 12:
FONT TAG
OUTPUT:

CODE:
<!--THIS HTML PAGE TELLS ABOUT DEFINITION LIST-->
<html>
<head><title>DEFINITION LIST</title></head>
<body background="download.jfif" topmargin=60 leftmargin=60>
<center><B><U><font face="Consolas" color="white"
SIZE=7>DEFINITION LIST</B></U></center></font>
<HR WIDTH=1200 SIZE=10 COLOR=GREY>
<font face="Consolas" color="white" SIZE=6><B><BR><P>
A definition list is a list of terms and corresponding definitions
<P>FOR EXAMPLE:<BR>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</BODY>
</HTML>

PROGRAM 13:
FONT TAG
OUTPUT:

CODE:
<!--THIS HTML PAGE TELLS IMG TAG-->
<html>
<head><title>IMG TAG</title></head>
<body background="download.jfif" topmargin=60 leftmargin=60>
<center><H1><B><U><font face="Consolas" color="white">IMG
TAG</h1></B></U></center></font>
<HR WIDTH=1200 SIZE=10 COLOR=GREY>
<font face="CONSOLAS" color="white" SIZE=5><B><BR><P>
The img tag is used to embed an image in an HTML page. Images are not
technically inserted into a web page; images are linked to web pages. The
img tag creates a
holding space for the referenced image.<p>
FOR EXAMPLE:
<BR><center><IMG SRC="IMAGE.jpg"></center>
</body>
</html>

PROGRAM 14:
FONT TAG
OUTPUT:

CODE:
<!--THIS HTML PAGE TELLS TABLE:ROWSPAN, COLSPAN-->
<html>
<head><title>TABLE:ROWSPAN, COLSPAN</title></head>
<body background="download.jfif" topmargin=60 leftmargin=60>
<center><H1><B><U><font face="Consolas"
color="white">TABLE:ROWSPAN,
COLSPAN</h1></B></U></center></font>
<HR WIDTH=1200 SIZE=10 COLOR=GREY>
<font face="CONSOLAS" color="white" SIZE=5><B><BR><P>
The rowspan attribute specifies the number of rows a cell should span. FOR
EXAMPLE:</p>
</FONT><BR><BR><CENTER>
<table BORDERCOLOR=WHITE style="color:white" width=500>
<tr style="font-size:30px;font-family:calibri">
<th></th><th></th>
<th>Bob</th>
<th>Alice</th>
</tr>
<tr style="font-size:30px;font-family:calibri">
<th rowspan="2">Favorite</th>
<th>Color</th>
<td>Blue</td>
<td>Purple</td>
</tr>
<tr style="font-size:30px;font-family:calibri">
<th>Flavor</th>
<td>Banana</td>
<td>Chocolate</td>
</tr>
<tr style="font-size:30px;font-family:calibri">
<th rowspan="2">Least Favorite</th>
<th>Color</th>
<td>Yellow</td>
<td>Pink</td>
</tr>
<tr style="font-size:30px;font-family:calibri">
<th>Flavor</th>
<td>Mint</td>
<td>Walnut</td>
</tr>
</table></CENTER>
<font face="CONSOLAS" color="white" SIZE=5><B><br>
<P>Colspan allows a single table cell to span the width of more than one cell
or column.FOR EXAMPLE:<CENTER>
<table BORDERCOLOR=WHITE width=600 style=color:white>
<BR>Life Expectancy By Current Age
<tr style="font-size:30px;font-family:calibri">
<th colspan="2">65</th>
<th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr style="font-size:30px;font-family:calibri;">
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr style="font-size:30px;font-family:calibri">
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
</body>
</html>

PROGRAM 15:
FONT TAG

OUTPUT:
CODE:
<!--THIS HTML PAGE TELLS TABLE:CELLPADDING,
CELLSPACING-->
<html>
<head><title>TABLE:CELLPADDING, CELLSPACING</title></head>
<body background="download.jfif" topmargin=60 leftmargin=60>
<center><H1><B><U><font face="Consolas"
color="white">TABLE:CELLPADDING,
CELLSPACING</h1></B></U></center></font>
<HR WIDTH=1200 SIZE=10 COLOR=GREY>
<font face="CONSOLAS" color="white" SIZE=5><B><BR><P>
Cell padding is the space between cell borders and the content within a cell.
FOR EXAMPLE:<CENTER>
<table border="1" cellpadding="15">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table></P><P>
The HTML <table> cellspacing Attribute is used to specify the space
between the cells. The cellspacing attribute is set in terms of pixels.FOR
EXAMPLE:<br>
<CENTER><table border="1" cellspacing="15">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</body>
</html>

THAN

You might also like