Nov 1, 2019

HTML lab work Exercises: 15

15) Design a webpage to show the use of External Style Sheets.


HTML22.html

<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
<link rel="stylesheet" href="CSScommon.css">
</head>
<body>
<div>
<header><h1>DEPT. OF COMPUTER APPLICATION</H1>
<H1>MAR DIONYSIUS COLLEGE, PAZHANJI</h1></header>

<img src="COMPUTER.jpg" alt="description" width="2000" height="300" class="center">


<p align="justify"><strong>
                           Computer Application is one of the thrust areas in Science and
                           technology. In appreciation of its growing importance in business
                           and the industrial scenario,the University established a Department 
                           of Computer Applications to facilitate research and human resources
                           development in the subject. The Department offers Bachelors' programme
                           in Computer Applications (B.C.A)</strong></p>

<p align="center"><b>List of nearby Colleges</b>

<table margin:auto>
<tr>
  <td rowspan="2">Name of College</td>
  <td Colspan="3">Address</td>
  <td rowspan="2">Contact No.</td>
 </tr>

<tr>
  <td>Post</td>
  <td>City</td>
  <td>PIN</td> 
 </tr>

<tr>
  <td>MD College</td>
  <td>Pazhanji</td>
  <td>Aruvai</td>
  <td>680542</td>
  <td>04885276797</td>
 </tr>

<tr>
  <td>St. Mary's College</td>
  <td>Thrissur</td>
  <td>Thrissur</td>
  <td>680001</td>
  <td>04885275869</td>
 </tr>

<tr>
  <td>LF College</td>
  <td>Guruvayur</td>
  <td>Mammiyur</td>
  <td>680503</td>
  <td>04885279767</td>
 </tr>

<tr>
  <td>ICA College</td>
  <td>Vadakkekad</td>
  <td>Althara</td>
  <td>680542</td>
  <td>04885225544</td>
 </tr>

 </table>


<br>
<footer>
BCA, Dept. of Computer Application
</footer>
</div>
</body>
</html>



CSScommom.css


<style type="text/css">

body{
    background-color:#e8e8e8;
    color:#000000;
    }

header{
    background-color:yellow;
      }

h1    {
    color: magenta;
    font-family:Verdana;
    font-size:32px;
    text-align:center;
      }

h2
     {
    font-family:Arial;
    font-size:20px;
    clear:both;
     }

p    {
    font-family:Arial;
    line-height:200%;
     }

img  {
    border:2px solid;
    margin:20px;
    padding:4px;
    max-width:50%;
    display: block;
        margin-left: auto;
        margin-right: auto;
     }

ul   {
    float:left;
     }


table, th, td {
    margin:auto;
    class: center;
    border: 1px solid #E80C30;
    text-align: left;
        padding: 8px;
       }

tr:nth-child(even)
    {
     background-color: #f2f2f2
        }

th {
    background-color: #4CAF50;
    color: white;
   }


footer {
         background-color:#E80C30;
         color:white; clear:both;
         text-align:center;
       }

div {
         background-color:#D4D6D9;
    margin:6px; padding:4px;
    }

</style>


Output Screenshot




HTML lab work Exercises: 14

14) Design a website to show the use of the following input controls
       i. Checkbox,
       ii. Radio button.


<!DOCTYPE html>
<html>
  <head>
    <title>Volunteer Sign up form</title>
    <center><img src="image.jpg" alt="college" width="25%"></center>
     
  </head>
  <body bgcolor="cyan">
        <h1><center>Volunteer Signup</center></h1>
       
        <p>The HELP Group is seeking volunteers to serve our community. Fill in the information below to indicate how you would like to become involved.</p>
        <form action="frm.php">
            <label for="name">Name</label><br>
            <input id="name" type="text" name="name" required/><br>
            <label for="eaddress">Email Address</label><br>
            <input id="eaddress" type="text"   name="eaddress" required/><br>
            <label for="phone">Phone</label><br>
            <input id="phone" type="tel"   name="phone" required/><br>
            <label for="street">Street</label><br>
            <input id="street" type="text"   name="street" required/><br>
            <label for="city">City<span>*</span></label><br>
            <input id="city" type="text"   name="city" required/><br>
            <label for="state">State<span>*</span></label><br>
            <input id="state" type="text"   name="state" required/><br>
            <label for="zip">Zip<span>*</span></label><br>
            <input id="zip" type="text"   name="zip" required/><br>
        
     <label>Include my contact information on lists distributed to other attendees.</label><br>
              <input type="radio" value="none" id="radio_1" name="info"/>
              <label for="radio_1" class="radio"><span>Yes</span></label>
              <input  type="radio" value="none" id="radio_2" name="info"/>
              <label for="radio_2" class="radio"><span>No</span></label>
          <p>Meal Preference</p>
          <select>
            <option selected value="" disabled selected></option>
            <option value="v">Vegetarian</option>
            <option value="n">Nonveg.</option>
          </select><br><br>
            <label>Days Attending </label><br>
                <input type="checkbox" value="none" id="radio_3" name="day"/>
                <label for="radio_3" class="radio"><span>Sunday</span></label>
            
                <input  type="checkbox" value="none" id="radio_4" name="day"/>
                <label for="radio_4" class="radio"><span>Monday</span></label>
           
                <input  type="checkbox" value="none" id="radio_5" name="day"/>
                <label for="radio_5" class="radio"><span>Tuesday</span></label>
            
                <input  type="checkbox" value="none" id="radio_6" name="day"/>
                <label for="radio_6" class="radio"><span>Wednesday</span></label>
            
                <input  type="checkbox" value="none" id="radio_7" name="day"/>
                <label for="radio_7" class="radio"><span>Thursday</span></label>
             
                <input  type="checkbox" value="none" id="radio_8" name="day"/>
                <label for="radio_8" class="radio"><span>Friday</span></label>
           
                <input  type="checkbox" value="none" id="radio_9" name="day"/>
                <label for="radio_9" class="radio"><span>Saturday</span></label><br><br>
            
            <label>Activities Attending</label><br>
           
                <input type="radio" value="none" id="radio_10" name="activity"/>
                <label for="radio_10" class="radio"><span>CEO luncheon</span></label>
           
                <input  type="radio" value="none" id="radio_11" name="activity"/>
                <label for="radio_11" class="radio"><span>Finance seminar</span></label>
            
                <input  type="radio" value="none" id="radio_12" name="activity"/>
                <label for="radio_12" class="radio"><span>Leadership seminar</span></label>
             
                <input  type="radio" value="none" id="radio_13" name="activity"/>
                <label for="radio_13" class="radio"><span>Marketing workshop</span></label>
           
                <input  type="radio" value="none" id="radio_14" name="activity"/>
                <label for="radio_14" class="radio"><span>Teamwork seminar</span></label><br><br>
            
          <label for="visit">Special Requirements</label><br>
          <textarea id="visit" rows="3"></textarea><br><br>
      
          <label>Did you attend last years conference?</label>
          <div class="question-answer">
          
              <input type="radio" value="none" id="radio_15" name="contact"/>
              <label for="radio_15" class="radio"><span>Yes</span></label>
         
              <input  type="radio" value="none" id="radio_16" name="contact"/>
              <label for="radio_16" class="radio"><span>No</span></label><br><br>
 <input type="submit" value="Submit">
       </form>
  
  </body>
</html>



Output Screenshot 


 

HTML lab work Exercises: 13

 13) Create an HTML page to show the use of floating Frame



<!DOCTYPE html>
<html>

   <head>
      <title>HTML Iframes</title>
   </head>
   
   <body>
           
      <center><iframe src = "http:\\www.uoc.ac.in" width = "555" height = "200">
         Sorry your browser does not support inline frames.
      </iframe>
<br>
      <iframe width="560" height="315" src="http:\\mdcollege.edu.in/" frameborder="5" allowfullscreen></iframe>
      </center>
   </body>
   
</html>


Output Screenshot


 

HTML lab work Exercises: 12

12) Create an HTML page to show the use of Inline Frame.


<!DOCTYPE html>
<html>

   <head>
      <title>HTML Iframes</title>
   </head>
   
   <body>
    <h1 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h1>
    <h2 align="center"><font color = "green">PAZHANJI</font></h2>
     
      <IFRAME NAME="float1" SRC="http:\\mdcollege.edu.in" WIDTH=350 HEIGHT=200 ALIGN=LEFT></IFRAME>
    

<p align="justify"><strong>
Computer Application is one of the thrust areas in Science and technology.
In appreciation of its growing importance in business and the industrial
scenario,the University established a Department of Computer Applications
to facilitate research and human resources development in the subject.
The Department offers Bachelors' programme in Computer Applications
(B.C.A)</strong></p>

</body>
   
</html>


Output Screenshot


 

HTML lab work Exercises: 11

11) Create an HTML page to show the use of Navigation Frame.


 index.html

<!DOCTYPE html>
<html>
<head><title>Welcome</title></head>
<frameset rows="227,*">
<frame name="top" src="top.html">
<frameset cols="150,*">
<frame name="left" src="nav.html">
<frame name="main">
<body>index</body>
</html>


top.html

<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
</head>

<body>
<h1 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h1>
<h2 align="center"><font color = "green">PAZHANJI</font></h2>
<h1 align="center"><font color = "blue">Department of Computer Applications</font></h1>
<center><img src="department.jpg" alt="description" width="20%"></center>

<p     align="justify"><strong>Computer Application is one of the thrust areas in Science and
                           technology. In appreciation of its growing importance in business
                           and the industrial scenario,the University established a Department 
                           of Computer Applications to facilitate research and human resources
                           development in the subject. The Department offers Bachelors' programme
                           in Computer Applications (B.C.A)</strong></p>

</body>
</html>


nav.html

 <!DOCTYPE html>
<html>
<head><title>nav</title></head>
<body>
<table border="0" width="70%">
<tr><td>Useful Links</td></tr>
<tr><td><li><a href="http://mdcollege.edu.in/" target="main">College</a></li></td></tr>
<tr><td><li><a href="https://www.uoc.ac.in/" target="main">University</a></li></td></tr>
<tr><td><li><a href="https://mooc.org/" target="main">MOOC</a></li></td></tr>
</table>
<br/>
<br/>
</body>
</html>


Output Screenshot




 

HTML lab work Exercises: 10

10) HTML pages with Tables
      i. Use Tables to layout HTML pages
      ii. Use <span> and <div> tags to provide a layout to the above page instead of table
          layout
      iii. Use Frames to divide the page contents into different parts
      iv. Embed Audio and Video into your HTML webpage



tablelayout.html

<html>
   
<table width="100%" height="100%" border="1" cellpadding="5">
    <tr>
         <th colspan="2" bgcolor="Khaki">
        <header ><h1>MAR DIONYSIUS COLLEGE</h1>
                 <h2>PAZHANJI</h1></header></h2>
     </th>
         </tr>
         <tr>
         <td valign="top" width="20%" bgcolor="LightBlue"><left><h2>Links</h2>
        <ul>
            <li>
                <a href="http://14.139.185.6/website/Syll/#">BCA Syllabus</a>
            </li>

            <li>    <a href="http://mdcollege.edu.in/">College Website</a>

            </li>

            <li>
                <a href="http://www.universityofcalicut.info/index.php?option=com_frontpage&Itemid=1">Calicut University Website</a>
            </li>
          
        </ul></left>
    </td>
         <td valign="top" bgcolor="YellowGreen">
        <img src="COMPUTER.jpg" alt="description" width="100%" height="300" class="center">
        <p align="justify"><strong>Computer Application is one of the thrust areas in Science and
                           technology. In appreciation of its growing importance in business
                           and the industrial scenario,the University established a Department 
                           of Computer Applications to facilitate research and human resources
                           development in the subject. The Department offers Bachelors' programme
                           in Computer Applications (B.C.A)</strong></p></td>
         </tr>
         <tr>
         <td colspan="2" height="10%" bgcolor="Pink"><center>&copy; BCA, Dept. of Computer Application</center></td>
         </tr>
</table>
</html>


Divlayout.html


<!DOCTYPE html>

<html>

<head>

<title>HTML Layouts using DIV, SPAN</title>

</head>


<body>


<div style = "width:100%;background-color:#b5dcb3;">

<h1><center>MAR DIONYSIUS COLLEGE</center></h1>
<h2><center>PAZHANJI</center></h2>


<div style = "background-color:LightBlue;float:left;width:20%;height:500px;">

<b>Left Menu</b>
<br><a href="http://mdcollege.edu.in/">College Website</a>
<br><a href="http://www.universityofcalicut.info/index.php?option=com_frontpage&Itemid=1">Calicut University Website</a>
</div>

<div style = "background-color:#eee;float:left;width:60%;height:500px;" >

<p><img src="COMPUTER.jpg" alt="description" width="100%" height="300" class="center"></p>

<video width="320" height="140" controls>
  <source src="nature.webm" type="video/mp4">
 
  Your browser does not support the video tag.
</video>
</div>

<div style = "background-color:#aaa; float:right;width:20%;height:500px;">

<b>Right Menu</b>
<br><a href="http://14.139.185.6/website/Syll/#">BCA Syllabus</a>

</div>


<div style = "background-color:#b5dcb3; clear:both">
<center>&copy; BCA, Dept. of Computer Application
</center>
</div>
</div>
</body>


</html>



Output Screenshot




HTML lab work Exercises: 9

9) Create a hyperlink to show the information and syllabus of B.Sc. Computer Science. When
    click on the links each page should display the objective of respective course, Lesson plan,
    Course duration etc.
    (Purpose: - Introduce anchor tag to create links between pages. One can able to transfer the   
    control  to next page, previous page or to a specific page like Home page.)



HTML09.html
 
<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
</head>

<body>
<h1 align="center"><font color = "green">DEPT. OF COMPUTER APPLICATION</font></h1>
<h2 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h2>
<h2 align="center"><font color = "green">PAZHANJI</font></h2>

<center><img src="COMPUTER.jpg" alt="description" width="30%"></center>

<h2><u>B.C.A Practical Examinations</u></h2>

<li>SEM. II
<ul>
<li><a href="Page01.html">Programming Laboratory I:HTML and Programming in C</a>
</ul>
</li>

<li>SEM. IV
<ul>
<li><a href="Page02.html">Programming Laboratory II:Data Structures and RDBMS</a>
</ul>
</li>

<li>SEM. VI
<ul>
<li><a href="Page03.html">Programming Laboratory III:Java and PHP Programming</a>
<li><a href="Page04.html">Programming Laboratory IV:Android and Linux shell Programming</a>
<li><u>B.C.A Industrial Visit and Project Work</u></li>
<ul>
<li><a href="Page05.html">Industrial Visit & Project Work (Industrial Visit- 1 Credit,Project Work- 2 Credit)</a>
</ul>
</li>

</body>
</html>


Page01.html

<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
</head>

<body>
<h1 align="center"><font color = "green">DEPT. OF COMPUTER APPLICATION</font></h1>
<h2 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h2>
<h2 align="center"><font color = "green">PAZHANJI</font></h2>

<center><img src="COMPUTER.jpg" alt="description" width="30%"></center>

<h2><u>SEMESTER II</u></h2>
<h2>Programming Laboratory I: Lab Exam of 1st & 2nd Semester - HTML and Programming in C</h2>
<li>Course Number: 11</li>
<li>Number of Credits: 4<br></li>
<li>Course Evaluation: Internal – 20 Marks + External – 80 Marks</li>

<h2>Objective</h2>
<li>To make the students learn web designing</li>
<li>To make the students learn programming environments.</li>
<li>To practice procedural programming concepts.</li>
<li>To make the students equipped to solve mathematical or scientific problems using C</li>

<p>

<center><a href="HTML09.html">Home page<a href="Page02.html">Next page</a></center>

</body>
</html>



Page02.html

<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
</head>

<body>
<h1 align="center"><font color = "green">DEPT. OF COMPUTER APPLICATION</font></h1>
<h2 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h2>
<h2 align="center"><font color = "green">PAZHANJI</font></h2>

<center><img src="COMPUTER.jpg" alt="description" width="30%"></center>

<h2><u>SEMESTER IV</u></h2>

<h2>Programming Laboratory II: Lab Exam of 3rd and 4th Semester - Data Structures and RDBMS</h2>
<li>Course Number: 22</li>
<li>Number of Credits: 4</li>
<li>Course Evaluation: Internal – 20 Marks + External – 80 Marks</li>


<h2>Objective</h2>
<li>To make the students equipped to solve mathematical or scientific problems using C</li>
<li>To learn how to implement various data structures.</li>
<li>To provide opportunity to students to use data structures to solve real life problems.</li>

<p>Include any 20 Data structure Lab questions and 15 DBMS Lab questions in the record book.</p>
<center><a href="Page01.html">Previous page<a href="Page03.html">Next page<a href="HTML09.html">Home page</a></center>

</body>
</html>


Page03.html

<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
</head>

<body>

<h1 align="center"><font color = "green">DEPT. OF COMPUTER APPLICATION</font></h1>
<h2 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h2>
<h2 align="center"><font color = "green">PAZHANJI</font></h2>

<center><img src="COMPUTER.jpg" alt="description" width="30%"></center>

<h2><u>SEMESTER VI</u></h2>
<h2>Programming Laboratory III: Lab Exam of 5th Semester Java and PHP Programming</h2>
<li>Course Number: 33</li>
<li>Number of Credits: 4</li>
<li>Course Evaluation: Internal – 20 Marks + External – 80 Marks</li>

<h2>Objective</h2>
<li>To practice Java programming.</li>
<li>To practice client side and server side scripting.</li>
<li>To practice PHP Programming.</li>
<li>To practice developing dynamic websites.</li>
<li>To practice how to interact with databases through PHP.</li>

<p>Include any 20 Java Programming Lab questions and 20
PHP Programming Lab questions in the record book.</p>

<center><a href="Page04.html">Previous page <a href="Page04.html">Next page</a><a href="HTML09.html">Home page</a></center>

</body>
</html>


Page04.html

<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
</head>

<body>
<h1 align="center"><font color = "green">DEPT. OF COMPUTER APPLICATION</font></h1>
<h2 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h2>
<h2 align="center"><font color = "green">PAZHANJI</font></h2>

<center><img src="COMPUTER.jpg" alt="description" width="30%"></center>

<h2><u>SEMESTER VI</u></h2>

<h2>Programming Laboratory IV: Programming Laboratory IV: Lab Exam of Android and Linux Shell Programming</h2>
<li>Course Number: 34</li>
<li>Number of Credits: 4</li>
<li>Course Evaluation: Internal – 20 Marks + External – 80 Marks</li>
<h2>Objective</h2>
<li>To practice Android programming.</li>
<li>To practice user interface applications.</li>
<li>To develop mobile application.</li>
<li>To practice shell programming.</li>

<p>Include any 15 Android Programming Lab questions and 15 Shell Programming
Lab questions in the record book.</p>

<center><a href="Page03.html">Previous page<a href="Page05.html">Next page<a href="HTML09.html">Home page</a></center>

</body>
</html>


Page05.html


<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
</head>

<body>
<h1 align="center"><font color = "green">DEPT. OF COMPUTER APPLICATION</font></h1>
<h2 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h2>
<h2 align="center"><font color = "green">PAZHANJI</font></h2>

<center><img src="COMPUTER.jpg" alt="description" width="30%"></center>

<h2><u>SEMESTER VI</u></h2>

<h2>Project Work</h2>
<li>Course Number: 36</li>
<li>Contact Hours per Week: 4 (0T + 2L in V Sem + 2L in VI Sem)</li>
<li>Number of Credits: 2</li>
<li>Number of Contact Hours: 64 Hrs.</li>
<li>Course Evaluation: Internal – 20 Marks + External – 80 Marks</li>

<h2>Objective</h2>
<li>To provide practical knowledge on software development process</li>

<p>For internal evaluation, the progress of the student shall be systematically assessed through two or
three stages of evaluation at periodic intervals.
A bonafied project report shall be submitted in hard bound complete in all aspects.</p>

<h2>Industrial Visitk</h2>

<li>Number of Credits: 1</li>
<li>Course Evaluation: External – 10 Marks</li>

<h2>Guide Lines:</h2>
<p>• Minimum one day visit to National research Institutes, Laboratories, places of scientific
Importance or Software Companies.
OR
• One week Industrial Training / internship at any software firms/ Research Labs
• The Industrial visit should be done in fifth or sixth semester.
• A 10 – 20 page Industrial visit / Training report have to be submitted with certificate from
industry / institute, sufficient photos and analysis along with Project for evaluation in the sixth
semester.<p>

<center><a href="Page03.html">Previous page <a href="HTML09.html">Home page</a></center>

</div>
</body>
</html>



Output Screenshot








 

HTML lab work Exercises: 8

8) Create HTML pages using Hyper Links
    i. File Link
    ii. Single Page Link


HTML08.html

<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
</head>
<body>
<h1 align="center"><font color = "green">DEPT. OF COMPUTER APPLICATION</font></h1>
<h2 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h2>
<h2 align="center"><font color = "green">PAZHANJI</font></h2>

<center><img src="COMPUTER.jpg" alt="description" width="30%"></center>

<p align="justify"><strong>Computer Application is one of the thrust areas in Science and
                           technology. In appreciation of its growing importance in business
                           and the industrial scenario,the University established a Department 
                           of Computer Applications to facilitate research and human resources
                           development in the subject. The Department offers Bachelors' programme
                           in Computer Applications (B.C.A)</strong></p>

</div>

<h2>Links</h2>
<ul>
<li><a href="html.docx">HTML Notes
</a></li>(this link should take you to the HTML notes MS Word file)<li>
<a href="HTML01.html">College webpage
</a></li>(this link should take you to the College web page)
</ul>

</body>
</html>

HTML01.html 

<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
</head>

<body>
<h1 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h1>
<h2 align="center"><font color = "green">PAZHANJI</font></h2>

<center><img src="COLLEGE.jpg" alt="college" width="75%"></center>

<h2><u>At a Glance</u></h2>

<p ALIGN="JUSTIFY">
<i>    Mar Dionysius College is at Pazhanji- a small village with a beautiful and serene land scape,
    6 kms away from Kunnamkulam municipal town and 14 kms away from the Guruvayoor railway station.
    The village prides itself with unique cultural tradition.</i>
</P>

<P ALIGN="JUSTIFY">
    M. D college, Pazhanji in Thrissur District affiliated to the University of Calicut was formally
    inaugurated on 16th December 1982; under the Educational Agency of H.H.Moran Mar Baselios Marthoma
    Mathews I, Catholicos of the East and Malankara Metropolitan, representing the Malankara Orthodox
    Syrian Church. The college is established in memory of the Late His Grace Pulikkottil Joseph Mar Dionysius Metropolitan,
    founder of the Orthodox Theological Seminary , Kottayam.
</p>

<h1 align="center"><font color = "blue">Department of Computer Applications</font></h1>

<center><img src="department.jpg" alt="description"></center>

<p     align="justify"><strong>Computer Application is one of the thrust areas in Science and
                           technology. In appreciation of its growing importance in business
                           and the industrial scenario,the University established a Department 
                           of Computer Applications to facilitate research and human resources
                           development in the subject. The Department offers Bachelors' programme
                           in Computer Applications (B.C.A)</strong></p>

</body>
</html>

Output Screenshot

 



HTML lab work Exercises: 7

7) Design a page to display the B.Sc. Computer Science syllabus by using List tag.
    (Purpose: - Introduce list tag to display data in ordered or unordered format as main, sub main,
    sub-sub main, etc by using nos. or special types of bullets.)


<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
</head>
<body>
<h1 align="center"><font color = "green">DEPT. OF COMPUTER APPLICATION</font></h1>
<h2 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h2>
<h2 align="center"><font color = "green">PAZHANJI</font></h2>

<center><img src="COMPUTER.jpg" alt="description" width="30%"></center>

<p align="center"><strong>DEGREE OF BACHELOR OF COMPUTER APPLICATION (B. C. A) (CHOICE BASED CREDIT AND SEMESTER SYSTEM)
UNDER THE FACULTY OF SCIENCE</strong></p>

<h2><p align="center">B.C.A SYLLABUS FOR THE STUDENTS ADMITTED FROM THE ACADEMIC YEAR 2019 ONWARDS</p></h2>


  <h3><b><i>Semester I</b></h3>
  <ol>
       <li>Common course
    <ul>
        <li>English Course</li>   
        <ul>
            <li>Course I</li>  
                   <li>Course II</li>
            </ul>
           <li>Additional Language Course I</li>
    </ul>
        </li>
    <li>Computer Fundamentals & HTML</li>
    <li>Mathematical Foundation of Computer Applications</li>
    <li>Discrete Mathematics</li>
  </ol>

<h3><b><i>Semester II</b></h3>
  <ol>
    <li>Common course
    <ul>
        <li>English Course</li>   
        <ul>
                  <li>Course III</li>
                  <li>Course IV</li>
        </ul>
           <li>Additional Language Course II</li>
    </ul>
    <li>Problem Solving using C</li>
    <li>Programming Laboratory I:
        <ul>
        <li>Lab Exam of 1st& 2nd Sem.HTML & Programming in C</li>
        </ul>
    </li>
    <li>Financial & Management Accounting</li>
    <li>Operations Research</li>
  </ol>

<h3><b><i>Semester III</b></h3>
  <ol>
       <li>Python Programming</li>
    <li>Data Communication and Optical Fibres</li>
    <li>Data Structures using C</li>   
    <li>Computer Oriented Numerical and Statistical Methods</li>
    <li>Theory of Computation</li>
  </ol>

<h3><b><i>Semester IV</b></h3>
  <ol>
    <li>Microprocessors Architecture and Programming</li>
    <li>Sensors and Transducers</li>
    <li>Database Management System and RDBMS</li>
    <li>Programming Laboratory II:
        <ul>
        <li>Data Structures and RDBMS</li>
        </ul>
    </li>
    <li>E-Commerce</li>
    <li>Computer Graphics</li>
  </ol>

<h3><b><i>Semester V</b></h3>
  <ol>
    <li>Computer Organization and Architecture</li>
    <li>Java Programming</li>
    <li>Web Programming Using PHP</li>
    <li>Principles of Software Engineering</li>
    <li>Open Course</li>
    <li>Industrial Visit Project Work</li>
  </ol>


<h3><b><i>Semester VI</b></h3>
  <ol>
     <li>Android Programming</li>
    <li>Operating Systems</li>
    <li>Computer Networks</li>
    <li>Programming Laboratory III:
        <ul>
        <li>Java and PHP Programming</li>
        </ul>
    </li>
    <li>Programming Laboratory IV:
        <ul>
        <li>Android and Linux shell Programming</li>
        </ul>
    </li>
    <li>Elective Course</li>
    <li>Industrial Visit & Project Work (Industrial Visit- 1 Credit, Project Work- 2 Credit)</li>
  </ol>

</body>
</html>


Output Screenshot

 

HTML lab work Exercises: 6

6) Design web pages which display the product images and its information with it. The products
    are computer, printers and laptop. The information displayed of product should be
    configuration/ technical details, price etc.
    (Purpose: - Study image tag. Display image in tabular form along with the other text information.)


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body    {
    background-color:#e8e8e8;
    color:#000000;
    }

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}


div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>
<header><h1 align="center"><font color="green">COMPUTER PERIPHERALS</font></h1></header>
<div class="gallery">
  <a target="_parent" href="MONITOR.jpg">
    <img src="MONITOR.jpg" alt="MNTR" width="300" height="200">
  </a>
<div class="desc">Monitors, commonly called as Visual Display Unit (VDU), are the main output device of a computer.
                    It forms images from tiny dots, called pixels that are arranged in a rectangular form. The sharpness
                    of the image depends upon the number of pixels.
</div>
</div>

<div class="gallery">
  <a target="_parent" href="KEYBOARD.jpg">
    <img src="KEYBOARD.jpg" alt="KBD" width="300" height="200">
  </a>
<div class="desc">Keyboard is the most common and very popular input device which helps to input data to the computer.
                    The layout of the keyboard is like that of traditional typewriter, although there are some additional
                    keys provided for performing additional functions.
</div>
</div>

<div class="gallery">
  <a target="_parent" href="MOUSE.jpg">
    <img src="MOUSE.jpg" alt="MSE" width="600" height="400">
  </a>
<div class="desc">Mouse is the most popular pointing device. It is a very famous cursor-control device having a small
                    palm size box with a round ball at its base, which senses the movement of the mouse and sends
                    corresponding signals to the CPU when the mouse buttons are pressed.
</div>
</div>

<div class="gallery">
  <a target="_parent" href="JOYSTICK.jpg">
    <img src="JOYSTICK.jpg" alt="JST" width="300" height="200">
  </a>
  <div class="desc">Joystick is also a pointing device, which is used to move the cursor position on a monitor screen.
                    It is a stick having a spherical ball at its both lower and upper ends. The lower spherical ball
                    moves in a socket. The joystick can be moved in all four directions.
</div>
</div>

<div class="gallery">
  <a target="_parent" href="LASER_PRINTER.jpg">
    <img src="LASER_PRINTER.jpg" alt="LSRPNTR" width="300" height="200">
  </a>
  <div class="desc">These are non-impact page printers. They use laser lights to produce the dots needed to form the
                    characters to be printed on a page.
</div>
</div>

<div class="gallery">
  <a target="_parent" href="GRAPHIC_TABLET.jpg">
    <img src="GRAPHIC_TABLET.jpg" alt="GPHTBLT" width="300" height="200">
  </a>
  <div class="desc">Digitizer is an input device which converts analog information into digital form. Digitizer can
                    convert a signal from the television or camera into a series of numbers that could be stored in
                    a computer. They can be used by the computer to create a picture of whatever the camera had been
                    pointed at.
</div>
</div>

</body>
</html>


Output Screenshot

 

HTML lab work Exercises: 5

 5) Create a webpage to create a photo Album. When the user clicks on the Image and Video Link
     it should open the corresponding album.


<!DOCTYPE html>
<html>
<head>
<style type="text/css">

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}


div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>
<div>
<header><h1 align="center"><font color="green">PHOTO GALLERY</font></h1></header>
</div>
<div class="gallery">
  <a target="_parent" href="01.jpg">
    <img src="01.jpg" alt="5Terre" width="300" height="200">
  </a>

</div>

<div class="gallery">
  <a target="_parent" href="02.jpg">
    <img src="02.jpg" alt="Forest" width="600" height="400">
  </a>
 
</div>

<div class="gallery">
  <a target="_parent" href="03.jpg">
    <img src="03.jpg" alt="Northern Lights" width="600" height="400">
  </a>

</div>


<div class="gallery">
  <a target="_parent" href="04.jpg">
    <img src="04.jpg" alt="Mountains" width="600" height="400">
  </a>

</div>
<div class="gallery">
  <a target="_parent" href="05.jpg">
    <img src="05.jpg" alt="Mountains" width="600" height="400">
  </a>
 
</div>
<div class="gallery">
  <a target="_parent" href="06.jpg">
    <img src="06.jpg" alt="Mountains" width="600" height="400">
  </a>

</div>
<div class="gallery">
  <a target="_parent" href="07.jpg">
    <img src="07.jpg" alt="Mountains" width="600" height="400">
  </a>

</div>

<center><video width="320" height="240" controls>
  <source src="nature.webm" type="video/mp4">
  Your browser does not support the video tag.
</video></center>

</p>
</body>
</html>







Output Screenshot


HTML lab work Exercises: 4

4) Design a page to display the information in table format. Display the list of colleges offering
    B.Sc. Computer Science along with the details College Name, Address, Contact no. Address
    column will consist of sub columns as House Name, Post, City and pin code.
    (Purpose: - Introduction of table tags along with the sub columns and other supportive tags
    like caption, cell spacing, cell padding etc.)


<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
</head>
<body>

<h1 align="center"><font color = "green">DEPT. OF COMPUTER APPLICATION</font></h1>
<h2 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h2>
<h2 align="center"><font color = "green">PAZHANJI</font></h2>

<center><img src="COMPUTER.jpg" alt="description" width="30%"></center>

<p align="justify"><strong></b>
                           Computer Application is one of the thrust areas in Science and
                           technology. In appreciation of its growing importance in business
                           and the industrial scenario,the University established a Department 
                           of Computer Applications to facilitate research and human resources
                           development in the subject. The Department offers Bachelors' programme
                           in Computer Applications (B.C.A)</strong></p>

<table border="1" style="margin: auto;" cellpadding="10"; cellspacing="5">
 <caption><b>List of colleges offering B.C.A Programme</b></caption>
<tr>
  <th rowspan="2">Name of College</td>
  <th Colspan="3">Address</td>
  <th rowspan="2">Contact No.</td>
 </tr>

<tr>
  <th>Post</td>
  <th>City</td>
  <th>PIN</td> 
 </tr>

<tr>
  <td>MD College</td>
  <td>Pazhanji</td>
  <td>Aruvai</td>
  <td>680542</td>
  <td>04885276797</td>
 </tr>

<tr>
  <td>St. Mary's College</td>
  <td>Thrissur</td>
  <td>Thrissur</td>
  <td>680001</td>
  <td>04885275869</td>
 </tr>

<tr>
  <td>LF College</td>
  <td>Guruvayur</td>
  <td>Mammiyur</td>
  <td>680503</td>
  <td>04885279767</td>
 </tr>

<tr>
  <td>ICA College</td>
  <td>Vadakkekad</td>
  <td>Althara</td>
  <td>680542</td>
  <td>04885225544</td>
 </tr>

 </table>

<br>

</body>
</html>

Output screenshot





HTML lab work Exercises: 3

3) Use the above webpage to
     a) Create links on the words e.g. “Wi-Fi” and “LAN” to link them to Wikipedia pages.
     b) Insert an image and create a link such that clicking on the image takes the user to another page.
     c) Change the background color of the page. At the bottom create a link to take the user to the top
         of the page.

<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
</head>
<body>

<h1 align="center"><font color = "green">DEPT. OF COMPUTER APPLICATION</font></h1>
<h2 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h2>
<h2 align="center"><font color = "green">PAZHANJI</font></h2>

<a href = "http://mdcollege.edu.in//" target = "_self">
<center><img src = "logo.png" alt = "MD College"></a></center>

<center><img src="COMPUTER.jpg" alt="description" width="30%"></center>


<p align="justify"><strong>Computer Application is one of the thrust areas in Science and
                           technology. In appreciation of its growing importance in business
                           and the industrial scenario,the University established a Department 
                           of Computer Applications to facilitate research and human resources
                           development in the subject. The Department offers Bachelors' programme
                           in Computer Applications (B.C.A)</strong></p>


<h2><u>Department Facilities</u></h2>

 <dl>
  <dt><b><i><font-family:Calibri>Software Lab</b></dt>
  <dd><p>- The department has a well equipped software lab. The software lab has state of the art blade and rack servers based on Intel Xeon quad
    core dual processor with RAID capability.</p>
  </dd>

  <dt><b>Video and Image Processing Lab</b></dt>
  <dd><p>- The department has an advanced video and image processing lab with high end Xeon based graphic workstations with K5200 NVIDIA graphics card,
    Sony HXR-MC2500 movie cameras.</p>
  </dd>

  <dt><b><a href="https://en.wikipedia.org/wiki/Wi-Fi" style="text-decoration: none">Wi-Fi facility</a></b><dt>
  <dd><p>- Computer Centre has installed WLAN on 802.11b/g to allow accessing InflibNet resources <a href="https://en.wikipedia.org/wiki/Local_area_network"
       style="text-decoration: none"><b>(LAN)</b></a> through the Wireless communication.
       WLAN employs mobile network access through the Wireless Access Points. Only authorized users can access the college network as well as
       Internet Services.</p>
  </dd>

  <dt><b>Database Lab </b></dt>
  <dd><p>- The department has a database lab with a high end Dual Xeon processor based IBM server running oracle 11g and more than 30 desktop clients.
    This lab was funded by AICTE.</p>
  </dd>

  <dt><b>Department Library</b></dt>
  <dd><p>- The department also has a very good library that would cater for the needs of the students and faculty of the department. The library has
    over 2000 books which include the text books prescribed in the syllabus, reference books, journals and periodicals. The library has lending
    as well as reference facilities.</i></p>
  </dd>

 </dl>

<h2>Links</h2>
<ul>
<li><a href="http://14.139.185.6/website/syllabus/syl106.pdf">Syllabus</a></li>(this link should take you to the BCA Syllabus 2017)
<li><a href="http://www.universityofcalicut.info/index.php?option=com_frontpage&Itemid=1">Calicut University Website
</a></li>(this link should take you to Calicut University Home page)
<li><a href="#top">Back to top</a>
</a></li>(this link should take you to Top of Home page)
</ul>

<br>
</body>
</html>

Output screenshot

 


HTML lab work Exercises: 2

2) (a) Create a webpage with HTML describing your department. Use paragraphs and list tags.
    (b) Apply various colors to suitably distinguish keywords. Also apply font styling like italics,
     underline and two other fonts to words you find appropriate. Also use header tags.


<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
</head>
<body>

<h1 align="center"><font color = "green">DEPT. OF COMPUTER APPLICATION</font></h1>
<h2 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h2>
<h2 align="center"><font color = "green">PAZHANJI</font></h2>

<center><img src="COMPUTER.jpg" alt="description" width="30%"></center>

<p align="justify"><strong>Computer Application is one of the thrust areas in Science and
                           technology. In appreciation of its growing importance in business
                           and the industrial scenario,the University established a Department
                           of Computer Applications to facilitate research and human resources
                           development in the subject. The Department offers Bachelors' programme
                           in Computer Applications (B.C.A)</strong></p>

<h2><u>Department Facilities</u></h2>

 <dl>
  <dt><b><i><font-family:Calibri><font color = "Blue">Software Lab</font></b></dt>
  <dd><p>- The department has a well equipped software lab. The software lab has state of the art blade and rack servers based on Intel Xeon quad
    core dual processor with RAID capability.</p></dd>

  <dt><b><font color = "Red">Video and Image Processing Lab</font></b></dt>
  <dd><p>- The department has an advanced video and image processing lab with high end Xeon based graphic workstations with K5200 NVIDIA graphics card,
    Sony HXR-MC2500 movie cameras.</p></dd>

  <dt><b><font color = "Green">Microprocessor Lab</font></b><dt>
  <dd><p>- The department has an advanced microprocessor lab with Intel Atom processor based Edison kits, Arduino kits and servo motors in addition
    to microprocessor kits.</p></dd>

  <dt><b><font color = "Brown">Database Lab</font></b></dt>
  <dd><p>- The department has a database lab with a high end Dual Xeon processor based IBM server running oracle 11g and more than 30 desktop clients.
    This lab was funded by AICTE.</p></dd>

  <dt><b><font color = "Magenta">Department Library</font></b></dt>
  <dd><p>- The department also has a very good library that would cater for the needs of the students and faculty of the department. The library has
    over 2000 books which include the text books prescribed in the syllabus, reference books, journals and periodicals. The library has lending
    as well as reference facilities.</i></p></dd>

</dl>
</body>
</html>

Output screenshot




HTML lab work Exercises: 1

1) Design a web page to display the information of the Computer Science department of your college
    by using basic page tags. Display the information in the form of paragraphs/sentences. Also, use
    effects to highlight the information like bold, italic or underline.

<!DOCTYPE html>
<html>
<head>
<title>BCA</title>
</head>

<body>
<h1 align="center"><font color = "green">MAR DIONYSIUS COLLEGE</font></h1>
<h2 align="center"><font color = "green">PAZHANJI</font></h2>

<center><img src="COLLEGE.jpg" alt="college" width="75%"></center>

<h2><u>At a Glance</u></h2>

<p ALIGN="JUSTIFY">
<i>    Mar Dionysius College is at Pazhanji- a small village with a beautiful and serene land scape,
    6 kms away from Kunnamkulam municipal town and 14 kms away from the Guruvayoor railway station.
    The village prides itself with unique cultural tradition.</i>
</P>

<P ALIGN="JUSTIFY">
    M. D college, Pazhanji in Thrissur District affiliated to the University of Calicut was formally
    inaugurated on 16th December 1982; under the Educational Agency of H.H.Moran Mar Baselios Marthoma
    Mathews I, Catholicos of the East and Malankara Metropolitan, representing the Malankara Orthodox
    Syrian Church. The college is established in memory of the Late His Grace Pulikkottil Joseph Mar Dionysius Metropolitan,
    founder of the Orthodox Theological Seminary , Kottayam.
</p>

<h1 align="center"><font color = "blue">Department of Computer Applications</font></h1>

<center><img src="department.jpg" alt="description"></center>

<p     align="justify"><strong>Computer Application is one of the thrust areas in Science and
                           technology. In appreciation of its growing importance in business
                           and the industrial scenario,the University established a Department 
                           of Computer Applications to facilitate research and human resources
                           development in the subject. The Department offers Bachelors' programme
                           in Computer Applications (B.C.A)</strong></p>

</body>
</html>

Output screenshot