Syllabus

Web Technology Lab			Semester	5
Course Code		BCSL504	CIE Marks	50
Teaching Hours/Week (L:T:P: S)		0:0:2:0	SEE Marks	50
Credits		01	Exam Hours	100
Examination type (SEE)		Practical
Course objectives: ● Learn HTML 5 elements and their use. ● Use of CSS for enhanced user interface presentation. ● Gain knowledge of JavaScript, AJAX and jQuery for dynamic presentation. ● Use of PHP to build Web applications. ● Design and develop Websites and Web applications.
Sl.NO	Experiments
1	Develop the HTML page named as “Myfirstwebpage.html”. 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 (<b>, <u>, <sub>, <sup>, etc)
2	Develop the HTML page named as “Table.html” 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. b) Provide various colour options to the cells (Highlight the lab hours and elective hours with different colours.) c) Provide colour options for rows.
3	Develop an external style sheet named as “style.css” 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 “registration.html” 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 “newpaper.html” 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 crypto.createHash() 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.
Programming Assignment (5 marks): Construct a Website (multiple Web pages) containing ‘Resume’ and Bio -data by using relevant HTML elements and appropriate styling for presentation with CSS/jQuery/JavaScript. Host the Website on a cloud platform.
Programming Assignment (5 marks): Build a Web application with HTML, CSS, JavaScript, jQuery and PHP for online application/registration form. Form should accept the information and print/display on a browser with formatting/styling upon submission (Button click) on success. Host the application on a cloud platform.
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.
Assessment Details (both CIE and SEE) The weightage of Continuous Internal Evaluation (CIE) is 50% and for Semester End Exam (SEE) is 50%. The minimum passing mark for the CIE is 40% of the maximum marks (20 marks out of 50) and for the SEE minimum passing mark is 35% of the maximum marks (18 out of 50 marks). A student shall be deemed to have satisfied the academic requirements and earned the credits allotted to each subject/ course if the student secures a minimum of 40% (40 marks out of 100) in the sum total of the CIE (Continuous Internal Evaluation) and SEE (Semester End Examination) taken together Continuous Internal Evaluation (CIE): CIE marks for the practical course are 50 Marks. The split-up of CIE marks for record/ journal and test are in the ratio 60:40.  ● Each experiment is to be evaluated for conduction with an observation sheet and record write-up. Rubrics for the evaluation of the journal/write-up for hardware/software experiments are designed by the faculty who is handling the laboratory session and are made known to students at the beginning of the practical session. ● Record should contain all the specified experiments in the syllabus and each experiment write-up will be evaluated for 10 marks. ● Total marks scored by the students are scaled down to 30 marks (60% of maximum marks). ● Weightage to be given for neatness and submission of record/write-up on time. ● Department shall conduct a test of 100 marks after the completion of all the experiments listed in the syllabus. ● In a test, test write-up, conduction of experiment, acceptable result, and procedural knowledge will carry a weightage of 60% and the rest 40% for viva-voce. ● The suitable rubrics can be designed to evaluate each student’s performance and learning ability. ● The marks scored shall be scaled down to 20 marks (40% of the maximum marks).  The Sum of scaled-down marks scored in the report write-up/journal and marks of a test is the total CIE marks scored by the student.
Semester End Evaluation (SEE):  ● SEE marks for the practical course are 50 Marks. ● SEE shall be conducted jointly by the two examiners of the same institute, examiners are appointed by the Head of the Institute. ● The examination schedule and names of examiners are informed to the university before the conduction of the examination. These practical examinations are to be conducted between the schedule mentioned in the academic calendar of the University. ● All laboratory experiments are to be included for practical examination. ● (Rubrics) Breakup of marks and the instructions printed on the cover page of the answer script to be strictly adhered to by the examiners. OR based on the course requirement evaluation rubrics shall be decided jointly by examiners. ● Students can pick one question (experiment) from the questions lot prepared by the examiners jointly. ● Evaluation of test write-up/ conduction procedure and result/viva will be conducted jointly by examiners.  General rubrics suggested for SEE are mentioned here, writeup-20%, Conduction procedure and result in -60%, Viva-voce 20% of maximum marks. SEE for practical shall be evaluated for 100 marks and scored marks shall be scaled down to 50 marks (however, based on course type, rubrics shall be decided by the examiners) Change of experiment is allowed only once and 15% of Marks allotted to the procedure part are to be made zero.  The minimum duration of SEE is 02 hours
Suggested Learning Resources:  Books: 1. Randy Connolly and Ricardo Hoar, Fundamentals of Web Development, 3rd edition, Pearson, 2021 2. Robert W Sebesta, Programming the World Wide Web, 8th Edition, Pearson Education, 2020.  Web Links: ● https://www.w3schools.com/html/default.asp ● https://www.w3schools.com/css/default.asp ● https://www.w3schools.com/js/js_examples.asp ● https://www.geeksforgeeks.org/javascript-examples/ ● https://www.w3schools.com/php/default.asp ● https://www.w3schools.com/jquery/default.asp ● https://www.w3schools.com/js/js_ajax_intro.asp ● https://www.geeksforgeeks.org/jquery-tutorial/