Ex No: 2 COLLEGE WEBSITE
Aim: To design a website for your polytechnic college which list out the courses offered with general information about the college using table. Provide different color for different section within the webpage.
Algorithm
Step1: Create a folder “Ex2” to place all the HTML files and Image files.
Step2: Create two HTML files “index.html”, “course.html” and “ex2sty.css”.
Step3: Create “index.html” page with the necessary HTML tags and use “style” attribute in the “ex2sty.css” file to provide design to HTML elements.
Step4: Use <table> tag to provide information about the college.
Step5: Create “course.html” page with necessary information and provide links for moving within the page.
HTML Tag Description
<header> Specify title and heading
<article> Represent an article
<section> Specify the content of a section
<img> Display an image on the webpage
<nav> Define set of navigation links
<a> Specify a link to another web page
<table> Display data in table format
<ul> Display data in unordered list format
<p> Define a paragraph
<h> Define header text
CSS Property Description
background-color Specify background color
text-align Align text in an element
border Specify border property
border-radius Specify rounded corner radius
border-collapse Combine multiple border into single border
width, height Specify width and height value
text-decoration Specify underline, overline and strikethrough
text-indent Specify space for first line text
Source Code

index.html


<!DOCTYPE html>
<html>
 <head>
   <title>My College</title>
   <link rel="stylesheet" href="ex2sty.css">
 </head>
 <body>
   <header>
     <h1>Welcome TNGPT</h1>
   </header>
   <nav>
     <a href = "#">Home</a> |
     <a href = "course.html">Courses</a>
   </nav>
   <article>
   <section>
     <table>
       <tr>
         <td><h3>About the College</h3></td>
         <td><p class="para">Tamilnadu Government Polytechnic College is a premier technical institute in the Southern Region of India.</p>
         </td>
       </tr>
       <tr>
         <td><h3>Mission</h3></td>
         <td><p class="para">Our Mission is to produce disciplined Quality Technocrats.</p>
         </td>
       </tr>
       <tr>
         <td><h3>Library</h3></td>
         <td><p class="para"> A well established and spacious Library with multiple collection of books is housed in the polytechnic college.</p>
         </td>
       </tr>
     </table>
   </section>
   </article>
  <footer>
    Developed by K Anbarasan
  </footer>
 </body>
</html>

course.html


<!DOCTYPE html>
<html>
 <head>
   <title>My College</title>
   <link rel="stylesheet" href="ex2sty.css">	
 </head>
 <body>
  <header>
    <h1>Welcome TNGPT</h1>
  </header>
  <nav>
    <a href = "index.html">Home</a> |
	<a href = "#">Courses</a>
  </nav>
  <article>
    <div id="home">
	  <h2>Courses Offered</h1>
	  <ul>
	    <li><a href="#DCE">Diploma in Civil</a></li>
		<li><a href="#DCOE">Diploma in Computer</a></li>
		<li><a href="#DEEE">Diploma in Electrical and Electronincs</a></li>
		<li><a href="#DME">Diploma in Mechanical Engineering</a></li>
		<li><a href="#DPT">Diploma in Plastic & Polymer Technology</a></li>
	  </ul>
	</div>
	<section id="DCE">
	  <h2>Diploma in Civil Engineering</h1>
	  <p class="para"> This course enables students learn about 
	  various construciton techniques<a href="#home"><img src="homeico.png"><img></a></p>				
	</section>
	<section id="DCOE">
	  <h2>Diploma in Computer Engineering</h1>
	  <p class="para"> This course enables students learn about 
	  various Computer Programming Lanugages<a href="#home"><img src="homeico.png"><img></a></p>
	</section>
	<section id="DEEE">
	  <h2>Diploma in Electrical and Electronincs</h1>
	  <p class="para"> This course enables students learn about 
	  Electrical devices<a href="#home"><img src="homeico.png"><img></a></p>
	</section>
	<section id="DME">
	  <h2>Diploma in Mechanical Engineering</h1>
	  <p class="para"> This course enables students learn about 
	  mechanical devices<a href="#home"><img src="homeico.png"><img></a></p>
	</section>
	<section id="DPT">
	  <h2>Diploma in Plastic & Polymer Technology</h1>
	  <p class="para"> This course enables students lean about 
	  chemicals and plastic<a href="#home"><img src="homeico.png"><img></a></p>
	</section>
  </article>
  <footer>
	Developed by K Anbarasan
  </footer>
 </body>
</html>

ex1sty.css


header {
  text-align:center;
  height: 100px;
  background-color: rgba(75, 0, 130,0.5);
  padding: 10px;
  border-radius: 10px 10px 0px 0px;
}
nav{
  background-color: rgba(75, 0, 130,0.5);
  text-align:left;
  font-size:15px;
}
footer {
  text-align:center;
  font-size: 12px;
  height: 50px;
  line-height: 50px;
  background-color: rgba(75, 0, 130,0.5);
  padding: 10px;
  border-radius: 10px;		
}
article{
  width: auto;
  border: 2px solid gray;
  padding: 10px;
  border-radius: 10px;
  margin:5px;
}
a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: black;
}
img{
  float: right;
}
section{
  border-radius: 10px;
  padding: 10px;
  margin: 5px;
}
.para{
  text-indent: 40px;
}
#DCE{
  background-color: khaki;
}
#DCOE{
  background-color: greenyellow;
}
#DEEE{
  background-color: Lavender;
}
#DME{
  background-color: LightGrey;
}
#DPT{
  background-color: Pink;
}
Result: Thus a webpage is design for the polytechnic college which list out the courses offered with general information about the college using table. Also providing different color for different section within the webpage.