Ex No: 1 COLLEGE WEBSITE
Aim: To design a single page website for your polytechnic college containing description of 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 “Ex1” to place all the HTML files and Image files.
Step2: Create two HTML files “index.html” and “ex1sty.css”.
Step3: Create “index.html” page with the necessary HTML tags and use “style” attribute in the “ex1sty.css” file to provide design to HTML elements.
Step4: Use <table> tag to provide information about the college.
Step5: Use <section> tag to provide infomation about each course.
HTML Tag Description
<header> Specify title and heading
<article> Represent an article
<section> Specify the content of a section
<footer> Specify footer content for the 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
width, height Specify width and height value
Source Code

index.html


<!DOCTYPE html>
<html>
  <head>
    <title>My College</title>
    <link rel="stylesheet" href="ex1sty.css">    
  </head>
  <body>
    <header>
      <h1>Welcome TNGPT</h1>
    </header>
    <article>
      <section>
        <table>
          <tr>
            <td><h3>About the College</h3></td>
            <td>
              <p >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 >Our Mission is to produce disciplined Quality Technocrats.</p>
            </td>
          </tr>
          <tr>
            <td><h3>Library</h3></td>
            <td>
              <p > A well established and spacious Library 
              with multiple collection of books is housed in the
              polytechnic college.
              </p>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <h3>Courses Offered</h3>
              <p >
                <ul>
                  <li>Diploma in Civil</li>
                  <li>Diploma in Computer</li>
                  <li>Diploma in Wed Designing</li>
                  <li>Diploma in Electrical and Electronincs</li>
                  <li>Diploma in Mechanical Engineering</li>
                  <li>Diploma in Plastic & Polymer Technology</li>
                </ul>
              </p>
            </td>
          </tr>
        </table>
      </section>
            
      <section class = "dce">
        <h2>Diploma in Civil Engineering</h2>
        <p > This course enables students learn about various construciton techniques</p>                
      </section>
      <section class = "dcoe">
        <h2>Diploma in Computer Engineering</h2>
        <p > This course enables students learn about various Computer Programming Lanugages</p>
      </section>
      <section class = "dweb">
        <h2>Diploma in Web Designing</h2>
        <p > This course enables students learn about various Concepts that helps them to develop websites</p>
      </section>
      <section class="deee">
        <h2>Diploma in Electrical and Electronincs</h2>
        <p > This course enables students learn about Electrical devices</p>
      </section>
      <section class="dme">
        <h2>Diploma in Mechanical Engineering</h2>
        <p > This course enables students learn about mechanical devices</p>
      </section>
      <section class="dpt">
        <h2>Diploma in Plastic & Polymer Technology</h2>
        <p > This course enables students lean about chemicals and plastic</p>
      </section>
    </article>
    <footer>
      Developed by K Anbarasan
    </footer>
  </body>
</html>

ex1sty.css


header {
	text-align:center;
	height: 100px;
	background-color: tan;
	padding: 10px; 
	border-radius: 10px 10px 0px 0px;
}
article{ 
	border: 2px solid gray;
	border-radius: 10px;
	margin: 5px;
}
section{
	border-radius: 10px;
	padding: 10px;
	margin: 5px;
}
footer {
	text-align:center;
	font-size: 12px;
	height: 50px;
	line-height: 50px;
	background-color: tan;
	padding: 10px; 
	border-radius: 10px;		
}

.dce{
	background-color: khaki;
}
.dcoe{
	background-color: greenyellow;
}
.dweb{
	background-color: Lavender;
}
.deee{
	background-color: orange;
}
.dme{
	background-color: LightGrey;
}
.dpt{
	background-color: Pink;
}
Result: Thus a Single page website 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.