MYSORE COLLEGE OF ENGINEERING & MANAGEMENT, MYSURU
(Affiliated to VTU, Belagavi, Approved by AICTE, New Delhi & Govt. Of Karnataka)
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING
Lesson Plan - ODD Semester [Academic Year: 2024-25]
Semester: 5th No. of Hours: 24
Subject Name: Web Technology Lab Subject Code: BCSL504
Faculty Name: Prof. Janaki Reddy D
HR. Plan Date Topic Actual Mode of
Date delivery
1. Develop the HTML page named as “[Link]”.
Add the following tags with relevant content.
1. Set the title of the page as “My First Web Page”
2. Within the body use the following tags:
a) Moving text = “Basic HTML Tags”
b) Different heading tags (h1 to h6)
c) Paragraph
d) Horizontal line
e) Line Break
f) Block Quote
g) Pre tag
h) Different Logical Style.
2. Develop the HTML page named as “[Link]” to display
your class time table.
a) Provide the title as Time Table with table header and table
footer, row-span and col-span etc. Chalk
b) Provide various colour options to the cells (Highlight the lab and talk
hours and elective hours with different colours.)
c) Provide colour options for rows.
3. Develop an external style sheet named as “[Link]” and
provide different styles for h2, h3, hr, p, div, span, time, img &
a tags. Apply different CSS selectors for tags and demonstrate
the significance of each.
4. Develop HTML page named as “[Link]” having
variety of HTML input elements with background colors, table
for alignment & provide font colors & size using CSS styles.
5. Develop HTML page named as “[Link]” having
variety of HTML semantic elements with background colors,
text-colors & size for figure, table, aside, section, article,
header, footer… etc.
6. Apply HTML, CSS and JavaScript to design a simple
calculator to perform the following operations: sum, product,
difference, remainder, quotient, power, square-root and square.
7. Develop JavaScript program (with HTML/CSS) for: a)
Converting JSON text to JavaScript Object b) Convert JSON
results into a date c) Converting From JSON To CSV and CSV
to JSON d) Create hash from string using [Link]()
method
8. a. Develop a PHP program (with HTML/CSS) to keep track of
the number of visitors visiting the web page and to display this
count of visitors, with relevant headings.
b. Develop a PHP program (with HTML/CSS) to sort the
student records which are stored in the database using selection
sort.
9. Develop jQuery script (with HTML/CSS) for:
a. Appends the content at the end of the existing paragraph and
list. b. Change the state of the element with CSS style using
animate() method
c. Change the color of any div that is animated.
10. Develop a JavaScript program with Ajax (with HTML/CSS)
for:
a. Use ajax() method (without Jquery) to add the text content
from the text file by sending ajax request.
b. Use ajax() method (with Jquery) to add the text content from
the text file by sending ajax request.
c. Illustrate the use of getJSON() method in jQuery
d. Illustrate the use of parseJSON() method to display JSON
values.
Course outcomes (Course Skill Set): At the end of the course, the student will be able to:
● Design the experiment for the given problem using HTML, Javascript and CSS.
● Develop the solution for the given real-world problem using jQuery, Ajax and PHP.
● Analyze the results and produce substantial written documentation.
Reference Books:
1. Larry L. Peterson and Bruce S. Davie: Computer Networks – A Systems Approach, 4th Edition, Elsevier,
2019.
2. Nader F. Mir: Computer and Communication Networks, 2nd Edition, Pearson Education, 2015.
3. William Stallings, Data and Computer Communication 10th Edition, Pearson Education, Inc., 2014.
Faculty Signature HOD Signature
