AIM:
To write the required CSS codes and to embed
them in HTML codes to display the webpage.
ALGORITHM:
Step 1
: Open the notepad.
Step 2 : Create the HTML header and give the
title as “My CSS Webpage”.
Step 3 : Create a link in the header to the
CSS file that is stored externally.
Step 4 : Specify the style type as “text/css”.
Step 5 : Create the divisions in body of HTML
as header, middle, left, right and footer using “div”.
Step 6 : Save the HTML file.
Step 7 : Create a CSS file.
Step 8 : Specify the properties like
background color, top, left, height, image of header, middle, left,
right and footer of the Webpage
to be created.
Step 9 : Save it as “mystyle.css”.
Step10: Run the HTML file to get the output.
PROGRAM:
Mystyle.html
<html>
<head>
<title>My CSS Web Page</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style type="text/css">
//cut and paste coding from mystyle.css to here……
</style>
</head>
<body>
<div class="header"> </div>
<div class="left">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Academics</a></li>
<li><a href="#">Facilities</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="middle">
<p> JNN Institute of Engineering stands tall in sylvan surroundings of serene atmosphere with an ambition of providing good quality technical education coupled with discipline for the rural folk. This technical institution is housed in a sprawling campus of 45 acres on the Chennai-Periyapalayam Highway. It imparts training for students to make them competent, motivated engineers and managers. The institute encourages growth, cultivates vision, freedom of thought and further inculcates human values and concern for the environment and society. This institution has been promoted by The Alamelu Ammaal Educational Trust in 2008 to cherish the memory of the chairman's mother Smt.Alamelu Ammaal. It is located just 25 kms away from the city of Chennai and it is well connected by road and railways. It is approved by the All India Council for Technical Education, New Delhi and affiliated to Anna University of Technology, Chennai.</p>
</div>
<div class="right"><img src="Images/Add.jpg"/> </div>
<div class="footer" > <div style="text-align:left;color:white;"> ©Copyright 2014 </div> <div style="float:right;color:white;"> Powered by IT 3rd Year Students <br/>9445509911 </div> </div>
</body>
</html>
<html>
<head>
<title>My CSS Web Page</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style type="text/css">
//cut and paste coding from mystyle.css to here……
</style>
</head>
<body>
<div class="header"> </div>
<div class="left">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Academics</a></li>
<li><a href="#">Facilities</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="middle">
<p> JNN Institute of Engineering stands tall in sylvan surroundings of serene atmosphere with an ambition of providing good quality technical education coupled with discipline for the rural folk. This technical institution is housed in a sprawling campus of 45 acres on the Chennai-Periyapalayam Highway. It imparts training for students to make them competent, motivated engineers and managers. The institute encourages growth, cultivates vision, freedom of thought and further inculcates human values and concern for the environment and society. This institution has been promoted by The Alamelu Ammaal Educational Trust in 2008 to cherish the memory of the chairman's mother Smt.Alamelu Ammaal. It is located just 25 kms away from the city of Chennai and it is well connected by road and railways. It is approved by the All India Council for Technical Education, New Delhi and affiliated to Anna University of Technology, Chennai.</p>
</div>
<div class="right"><img src="Images/Add.jpg"/> </div>
<div class="footer" > <div style="text-align:left;color:white;"> ©Copyright 2014 </div> <div style="float:right;color:white;"> Powered by IT 3rd Year Students <br/>9445509911 </div> </div>
</body>
</html>
MYSTYLE.css
.header
{
position:absolute;
top:0%;
left:0%;
background-image:url(Images/Logo.jpg);
height:20%;
width:100%;
}
.footer
{
position:absolute;
top:90%;
left:0%;
background-color:green;
height:10%;
width:100%;
}
.left
{
position:absolute;
top:20%;
left:0%;
background-color:red;
height:70%;
width:20%;
}
.middle
{
position:absolute;
top:20%;
left:20%;
background-color:grey;
color:blue;
height:70%;
width:65%;
}
.right
{
position:absolute;
top:20%;
left:80%;
background-color:pink;
height:70%;
width:15%;
}
li
{
//background-color:white;
margin:40px;
padding:10px;
list-style-type:none;
//list-style-image:url(Images/tiny.jpg);
}
a:link
{
text-decoration:none;
color:blue;
padding:10px;
//background-color:white;
}
a:visited
{
text-decoration:none;
color:green;
background-color:yellow;
}
a:hover
{
text-decoration:none;
color:white;
background-color:black;
}
a:active
{
text-decoration:none;
color:black;
background-color:white;
}
RESULT:
Thus CSS codes to embed them in HTML to display
the webpage has been written and output is verified successfully.
No comments:
Post a Comment