- Click below to download Unit 1 programs in pdf file: -
DYNAMIC HTML & Advance Technology- PRACTICALS
UNIT 1
<!-- 1. Write HTML program which contains cascaded style sheet for p, h2, h3, body and
font attribute -->
<html>
<head>
<style>
body {background-color: powderblue;}
h2 {color: blue;}
h3 {color: orange;}
p {color: red;}
font {font-weight: bold;}
</style>
</head>
<body>
<h2>This is a heading h2</h2>
<h3>This is a heading h3</h3>
<p>This is a paragraph.</p>
<font>This is a font attribute.</font>
</body>
</html>
<!-- 2.Write HTML program which contains external style sheet with
user defined Classes. -->
<!-- Save this code in separate file with .css extension
P.myfile
{
color : green;
border: solid red;
}
-->
<HTML>
<HEAD>
<LINK href="myfile.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="myfile">This paragraph should have special green text.
</BODY>
</HTML>
<!-- 3.Write HTML program which contains cascaded style sheet with
border attributes of style sheet -->
<!-- Save this code in separate file with .css extension
P.border
{
border-style: dashed;
}
-->
<HTML>
<HEAD>
<LINK href="border.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="border">This paragraph have border dashed around the text.</P>
</BODY>
</HTML>
<!-- 4.Write HTML program which contains cascaded style sheet with
margin attributes of style sheet -->
<!-- Save this code in separate file with .css extension
p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
-->
<HTML>
<HEAD>
<LINK href="margin.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P><b>See the margin of this paragraph.</b></P>
</BODY>
</HTML>
<!-- 5.Write HTML program which contains external style sheet with
background attributes of style sheet. -->
<!-- Save this code in separate file with .css extension
body
{
margin-left: 25px;
font-size: 25px;
font-family: Comic Sans MS;
color: white;
background-color: purple;
background-image: url("BCA4GU.jpg");
background-size: 900px;
background-position: left center;
background-repeat: no-repeat;
}
-->
<HTML>
<HEAD>
<LINK href="background.css" rel="stylesheet" type="text/css"> <! type here your .css file name>
</HEAD>
<BODY>
<P><b>Background attributes of style sheet</b></P>
</BODY>
</HTML>
0 Comments