BCA III - Web Tech Lab Exercises
BCA III - Web Tech Lab Exercises
Lab Exercises: 1
Design a web page to display the information of Computer Applications department of Jain 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.
Purpose: - This exercise introduces the basic HTML document format and basic page designing tags for
static page. (Use tags for paragraph, font, color, line break, bold, italic, underline, subscript, superscript,
etc.)
Lab Exercises: 2
Design a page to display the BCA syllabus of three years 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.
Lab Exercises: 3
I. (a) Create a table to show your class time-table.
(b) Use tables to provide layout to your HTML page describing your college infrastructure.
(c) Use <span> and <div> tags to provide a layout to the above page instead of a table layout.
(d) Use frames such that page is divided into 3 frames 20% on left to show contents of pages, 60% in
center to show body of page, remaining on right to show remarks.
(e) Embed Audio and Video into your HTML web page.
Lab Exercises: 4
Create a hyperlink to show the information and syllabus of management and engineering BCA. When click
on the links each page should display the objective of respective course, fees, duration and year wise and
semester wise.
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.
Lab Exercises: 5
Design a page to display the information in table format. Display the list of BCA colleges along with the
details Collage Name, BCA stream, Address, Contact no. Address column will consist of sub columns as
area, colony, 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.
Lab Exercises: 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.
Lab Exercises: 7
Design web pages to display the information about Jain College and BCA stream. Divide the page into
three frames. The top frame should display the title of the college, left frame shout display the streams of
BCA i.e. Honours and Subsidiaries and the right frame display the details of selected BCA stream like fees,
syllabus etc.
Purpose: - Study frame tag which allow to divide the screen into no of sections.
Lab Exercises: 8
Design web pages to accept the student information. Student should enter the details like first name, last
name, middle name, city up to 25 characters, and address up to 50 characters. Show the combo box to
select the qualification, option button for gender selection. Display the information accepted in a
formatted form.
Purpose: - Study form tag which allow to design the formatted screen to accept the information from the
user.
Lab Exercises: 9
Design CSS style sheet to define settings for heading, body, table and links.
Purpose: - Study CSS style sheet facility. This allows setting the default settings for all the pages.
Lab Exercises: 10
I. (a) Apply in-line CSS to change colors of certain text portion, bold, underline and italics certain words in
your HTML web page. Also change background color of each paragraph using in-line CSS.
(b) Write all the above styling in CSS in different file (.css) and link it to your webpage such that changes
made in CSS file are immediately reflected on the page. Group paragraphs into single class and add styling
information to the class in CSS.
(c) Create a simple form to submit user input like his name, age, address and favorite subject, movie and
singer.
(d) Add few form elements such as radio buttons, check boxes and password field. Add a submit button
at last.
Lab Exercises: 11
Design a form and validate the data entered by the user.
Lab Exercises: 12
I. (a) Create a form similar to the one in previous experiment. Put validation checks on values entered by
the user using JavaScript (such as age should be a value between 1 and 150).
(b) Write a JavaScript program to display information box as soon as page loads.
(c) Write a JavaScript program to change background color after 5 seconds of page load.
(d) Write a JavaScript program to dynamically bold, italic and underline words and phrases based on user
actions.
(e) Write a JavaScript program to display a hidden div (e.g. showing stats of a player when user clicks on
his name).