Lab Manual — Programs
Web Technology Lab · BCSL504 · 2022 scheme
Program 1
Develop the HTML page named Myfirstwebpage.html. Add the following tags with relevant content: Set the title of the page as "My First Web Page" Within the body use the following tags: Moving text = "Basic HTML Tags" Heading tags (<h1> to <h6>) Paragraph (<p>) Horizontal line (<hr>) Line Break (<br>) Block Quote (<blockquote>) Preformatted Text (<pre>) Logical Style (<strong>, <em>)
Program 2
Develop the HTML page named Table.html to display your class time table. Provide the title as Time Table with Table Header, Table Footer, Rowspan and Colspan. Highlight Lab Hours and Elective Hours using different colors. Apply different colors to table rows.
Program 3
Develop an external style sheet named style.css and provide different styles for h2, h3, hr, p, div, span, time, img and a tags. Apply different CSS selectors for tags and demonstrate the significance of each.
Program 4
Develop an HTML page named registration.html having a variety of HTML input elements with background colors, table for alignment, and provide font colors and font size using CSS styles.
Program 5
Develop an HTML page named newspaper.html having a variety of HTML semantic elements with background colors, text colors and font sizes for header, article, section, aside, figure, table, footer, etc.
Program 6
Apply HTML, CSS and JavaScript to design a Simple Calculator to perform the following operations: Sum (+) Difference (-) Product (*) Quotient (/) Remainder (%) Power Square Root Square
Program 6
Apply HTML, CSS and JavaScript to design a Simple Calculator to perform the following operations: Sum (+) Difference (-) Product (*) Quotient (/) Remainder (%) Power Square Root Square
Program 7
Develop a JavaScript program (with HTML/CSS) for the following: a) Converting JSON text to a JavaScript Object. b) Converting JSON date values into JavaScript Date objects. c) Converting JSON data to CSV format and CSV data to JSON format. d) Creating a hash from a string using the crypto.createHash() method (or SHA-256 hashing using the Web Crypto API in the browser).
Program 8a
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.
Program 8b
Develop a PHP program (with HTML/CSS) to sort the student records which are stored in the database using Selection Sort.
Program 9
Develop a jQuery script (with HTML/CSS) for the following: 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.
Program 10
Develop a JavaScript program with AJAX (with HTML/CSS) for the following: a) Use ajax() method (without jQuery) to add the text content from a text file by sending an AJAX request. b) Use ajax() method (with jQuery) to add the text content from a text file by sending an AJAX request. c) Illustrate the use of getJSON() method in jQuery. d) Illustrate the use of parseJSON() method to display JSON values.