(R-20)
CS/IT263 Web Technologies Lab L P C
0 3 1.5
Course Objectives:
The main objectives of this course are to:
1. To develop an ability to design and implement static and dynamic website.
2. To introduce concepts of designing dynamic web pages using HTML, CSS and JavaScript.
3. Analyze and create XML documents and XML Schema.
4. To familiarize with Java Servlet, JSP programming and master database access using JSP
and JDBC.
Course Outcomes:
After successful completion of the course, the students are able to
1. Create static webpages using front-end technologies.
2. Implement client-side pages by using HTML DoM.
3. Validate the XML data using XML Technologies.
4. Design server side applications with web Components.
LAB CYCLE –I
HTML & CSS
1. a. Create a web page having the background in green and title “My First Page”.
b. Create a web page of pink colour and display a moving message in red colour.
c. Design a web page containing text, in form of paragraphs giving suitable heading style
2. a. Create a web page which displays WELCOME text using heading tags(h1 to h6)
b. Create a web page which displays WELCOME text using <b> tag
c. Create a web page which displays h2o and x2+y2 using <sup> tag and <sub> tag
3. a. Create a web page to show different attributes of Font tag.
b. Create a web page to show different attributes: italics, bold, underline.
c. Design a web page having background colour yellow and giving text colour red
4. a. Create a web page using href attribute of anchor tag & the attribute: alink, vlink etc.
b. Create links on the words e.g. Wi-Fi and LAN‖ to link them to Wikipedia pages.
c. Create a web page with appropriate content and insert an image towards the left hand side of the
page. When user clicks on the image, it should open another Web page.
5. a. Create a web page, showing an ordered list of the names of five of your friends.
b. Create a web page containing a nested list showing the content page of any book
B.Tech/CSE/2020-2021 Page82
(R-20)
c. Create a web page, showing an unordered list of names of five of your friends
6. a. Create a table to show your class timetable using rowspan and colspan attributes.
b. Use tables to provide layout to your HTML page describing your college infrastructure.
c. Create a web page in the following table fields
7. a. Develop a web page having two frames that divide the Web page into two equal rows.
b. Develop a web page having two frames that divide the Web page into two equal rows and then
divide the second row into two equal columns.
c. Develop a web page having frames as described in the above web page and then fill each frame
with a different background colour .
8. Design the following static web pages required for an online book store web site.
a. HOME PAGE: The static home page must contain three frames.
b. LOGIN PAGE
c. CATOLOGUE PAGE: The catalogue page should contain the details of all the books available in the
web site in a table.
d. REGISTRATION PAGE
9. a. Create your bio-data form on a web page using all input types
b. Create a web page having radio buttons labeled as name of colours. Clicking on each radio button
should change the colour of the Web page
c. Embed Audio and Video into your web page
10. Create a webpage which displays the class time table and apply the following effects on the table:
a. For the table header apply blue as the background colour and white for the colour of the text in
the table header.
b. Display days in a week (Mon, Tue etc...) in bold format with the first letter in the day name in
uppercase.
c. Display lunch slightly in bigger font other than the remaining text.
11. a. Create a web page containing two images, where one image overlaps another image by using the
z-index CSS property.
b. Demonstrate the usage of CSS Inheritance and Specificity with an example.
12. a. Create a div element with a width and height of 500px. Create a diagonal linear gradient using the
colors of the rainbow—Red, Orange, Yellow, Green, Blue, Indigo, Violet. (Linear Gradient)
b. Create a div element with a width and height of 500px. Create a radial gradient with three colors.
Start the gradient in the bottom-left corner with the colors changing as they move along the gradient
line to the right. (Radial Gradient)
B.Tech/CSE/2020-2021 Page83
(R-20)
c. Create an infinite animation of an element moving in a square pattern. (Animation)
LAB CYCLE –II
JAVA SCRIPT
1. Write a java scripts to
a) Find the given year is leap year or not
b) Compute the biggest of three numbers
c) Perform the arithmetic operations using switch statement
2. Write a java script to
a) Calculate the sum of the digits of a give number
b) Reverse of a given number
c) Print the first 10 natural numbers except 5
3. Write a java script to
a) Functions (GCD, reverse, random numbers)
b) Recursive function (factorial, Fibonacci, power)
c) Random Image generator
4. Write a javascript program to validate USER LOGIN page.
5. Write a java script to
a) Sort the array element using bubble sort technique
b) Search a given element in the given set of given elements using binary search technique.
c) Compute i) addition of two matrices ii) multiplication of two matrices
6. Write a java script to
a) Implement string operations using String object
b) Implement the mathematical operations using Math object
c) Display Greeting messages using Date object
7. Demonstrate event model
a) Form events (onchange, onfocus ,onblur)
b) Mouse events (onclick,onmouese down,onmouese up,onmouese move, onmouese over)
B.Tech/CSE/2020-2021 Page84
(R-20)
LAB CYCLE –III
XML, Servlet & JSP
1. Write a valid XML document using DTD
2. Write a servlet program to validate a user
3. Write a web application using servlet and JDBC.
4. Write a JSP program on Implicit objects .
5. Write a JSP program on Action tags.
B.Tech/CSE/2020-2021 Page85
