Tutorial-Server side Web Programming(CS310)

 

1. Create a web page as the home page for the Department of Statistics and Computer Science.

   

   • You may use your own creative ideas to create the web page
   • Use an External Cascading Style Sheet to apply the style properties.
   • When the user move the mouse pointer over a menu option it should be emphasized with different styles. (use: hover element).
   • Insert images of the University Logo and the department into your web page.
   • In the area for News
     •   Should display the Headings of the latest news regarding the academic
       work of the department as hyperlinks.
     • When click on the hyperlinks should open a page with more details of the
       particular news.
2. Create a Web page which contains a map which shows the separation of provinces of Sri Lanka. When the user clicks on a particular region of a province on the map some
   details of that province should be visible.
   Hint: use HTML Image Maps. i.e. Map element and Image element with the usemap attribute.
3. Use JavaScript to create a web page that gets five numbers from the user and prints them in ascending or descending order in the same page. The user should also be given the option to choose the sorting method, ascending or descending.
4. Design the following simple calculator using JavaScript. You should avoid invalid user inputs to the program.
5. Using any graphics software, create a menu bar as follows. Include it in a web page
   and provide links to programs, courses, faculty, research and department of Computer
   Science and Engineering using image maps.
6. Create a web page that users can input their Date of Birth in the format given below.
   • Validate the input using JavaScript. You should consider all possible inputs that can be invalid for a Date of Birth. 
   • When the entered value is invalid and valid it should be displayed to the user
     as shown below.

Hint: Use innerText property to display the message.

Answer-Server side Web Programming tute1-Q1

Answer for Question 1:
<html>
<head>
    <title>Home Page</title>
        <style>
          .gray{background-color:#CCCCCC;font-weight:bold;}
          .white {color: #FFFFFF;}
          table{border:#000000; border-style:groove;}
          .style1 {font-size: 12px; font-weight:bold;}
        </style>
</head>
<body>
    <table border='1' width="100%">
        <tr>
           <td  width="75%" height="69" colspan="3">
            <h1 align="center" style="vertical-align:middle">UNIVERSITY OF PERADENIYA</h1>   
           </td>
           <td width="25%" bgcolor="#CCCCCC" >
             <span class="white"><a href="directory.html" class="white">Directory</a>|<a href="contact.html" class="white">Contact Us</a>|<a href="serch.html" class="white">Search</a></span> </td>
        </tr>
        <tr>
           <td colspan="4">
             <strong>Faculty of Science           </strong></td>
        </tr>
        <tr>
           <td colspan="4">
             <strong>Department of Statistics &amp; Computer Science </strong></td>
        </tr>
        <tr >
           <td width="15%" bgcolor="#FFFFFF">
            <span class="gray">Naviagation</span><br>
            <a href=".html">Home</a><br>
            <a href=".html">Staff</a><br>
            <a href=".html">Student</a><br>
            <a href=".html">Publication</a><br>
            <a href=".html">Research</a><br>
            <a href=".html">Awards</a><br>
            <span class="gray">Courses</span><br>
            <a href=".html">Computer Science</a><br>
            <a href=".html">Statistics</a><br>
            <span class="gray">Online</span><br>
            <a href=".html">Course Materials</a><br>
            <a href=".html">Notices</a><br>
            <a href=".html">Forums</a><br>
            <a href=".html">FAQ</a><br>
            <a href=".html">Problem Reporting</a><br>
            <span class="gray">Services</span><br>
            <a href=".html">SSDAS</a><br>
            <span class="gray">Other</span><br>
            <a href=".html">Contact</a><br>           </td>
           <td ><img src="home.jpg" width="100%" height="100%"></td>
           <td width="35%" colspan="2" valign="top" >
                <span class="gray">news</span></td>
        </tr>
        <tr>
           <td colspan="2"><p><strong>University of Peradeniya</strong></p>
           <p>&nbsp;</p>
           <p>&nbsp;</p></td>
           <td rowspan="2" colspan="2" valign="top"><p class="style1">Department of Statistics &amp; Computer Science<br>
           University of Peradeniya<br>Peradeniya<br>
           Sri Lanka </p>
           </td>
        </tr>
        <tr >
           <td height="54" colspan="2"><strong class="style1">Copyright&copy;,Department Of Statistics &amp; Computer Science,University of Peradeniya.All rights reserved.</strong></td>
        </tr>
    </table>
</body>
</html>
OUTPUT:

UNIVERSITY OF PERADENIYA			Directory|Contact Us|Search
Faculty of Science
Department of Statistics & Computer Science
Navigation Home Staff Student Publication Research Awards Courses Computer Science Statistics Online Course Materials Notices Forums FAQ Problem Reporting Services SSDAS Other Contact		news
University of Peradeniya		Department of Statistics & Computer Science University of Peradeniya Peradeniya Sri Lanka
Copyright©,Department Of Statistics & Computer Science,University of Peradeniya.All rights reserved.

ORIGINAL OUTPUT: