DHTML Unit 1 programs
!..........DHTML Unit-1(CSS) program............!
NOTE: ALL THE PROGRAMS DONE BY SHAKSHI SHAH.........!
ANS)
<!DOCTYPE html>
<html>
<head>
<title>UNIT 1 - prg 1</title>
<style>
p
{
background-color:yellow;
}
h2
{
color:red; //this will change font color to red...
}
h3
{
font-size:45%; //to change font size
}
</style>
</head>
<body>
<p>This is p tag</p>
<h2>This is h2 tag</h2>
<h3>This is h3 tag</h3>
</body>
</html>
2)Write HTML program which contains external style sheet with user-defined Classes.
ANS)
HTML CODING :
<!doctype html>
<html>
<head>
<title>Unit 1 - prg 2</title>
<link rel="stylesheet" href="css1.css" type="text/css">
</head>
<body>
<p class="one"> This is P tag you can use any tag.</p>
<h1 class="two">This is H1 tag with class two.</h1>
</body>
</html>
CSS CODING (External file) :
.one //this is class one to change p tag bgcolor.
{
background-color:pink;
}
.two // this is class two to change font color of h2 tag
{
color:blue;
}
3) Write HTML program which contains cascaded style sheet with border attributes of style sheet.
ANS)
<!DOCTYPE html>
<html>
<head>
<title>UNIT 1 - prg 3</title>
<style>
#right
{
border-right:5px solid;
}
#down
{
border-bottom:5px solid;
}
#dot
{
border:5px dotted;
}
#dash
{
border:5px dashed;
}
</style>
</head>
<body>
<span id="right"> This tag have right side border. </span>
<br><!-- .. br tag is optional --><br>
<p id="down"> This tag have down side border </p>
<br>
<p id="dot"> This tag have dotted border </p>
<br>
<p id="dash"> This tag have dotted border </p>
</body>
</html>
4) Write HTML program which contains cascaded style sheet with margin attributes of style sheet.
ANS)
<!doctype html>
<html>
<head>
<title>Unit 1 - prg 4</title>
<style>
h1
{
margin:100px 200px;
}
p
{
margin-left:100px;
}
</style>
</head>
<body>
<p> This is P tag with 100px left side margin</p>
<h1>This is H1 tag with 100px up-down and 200px right-left margin</h1>
</body>
</html>
5) Write HTML program which contains external style sheet with background attributes of style sheet.
ANS)
HTML CODING :
<!doctype html>
<html>
<head>
<title>UNIT 1 - prg 5</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<h1>Body has image 1.png as background using css</h1>
</body>
</html>
CSS CODING (externel file) :
h1
{
background-color:yellow;
}
body
{
background-image:url("1.png");
background-attachment:scroll; //to scroll image
background-repeat:no repeat; //to stop repeatation of image
background-position: right top; // to set position off image
}
👍👍
ReplyDelete