CHANDIGARH UNIVERSITY Institute of Distance and Online Learning Course Development Committee Prof. (Dr.) R.S.Bawa Pro Chancellor, Chandigarh University, Gharuan, Punjab Advisors Prof. (Dr.) Bharat Bhushan, Director – IGNOU Prof. (Dr.) Majulika Srivastava, Director – CIQA, IGNOU Programme Coordinators & Editing Team Master of Business Administration (MBA) Bachelor of Business Administration (BBA) Coordinator – Dr. Rupali Arora Coordinator – Dr. Simran Jewandah Master of Computer Applications (MCA) Bachelor of Computer Applications (BCA) Coordinator – Dr. Raju Kumar Coordinator – Dr. Manisha Malhotra Master of Commerce (M.Com.) Bachelor of Commerce (B.Com.) Coordinator – Dr. Aman Jindal Coordinator – Dr. Minakshi Garg Master of Arts (Psychology) Bachelor of Science (Travel &Tourism Management) Coordinator – Dr. Samerjeet Kaur Coordinator – Dr. Shikha Sharma Master of Arts (English) Bachelor of Arts (General) Coordinator – Dr. Ashita Chadha Coordinator – Ms. Neeraj Gohlan Academic and Administrative Management Prof. (Dr.) R. M. Bhagat Prof. (Dr.) S.S. Sehgal Executive Director – Sciences Registrar Prof. (Dr.) Manaswini Acharya Prof. (Dr.) Gurpreet Singh Executive Director – Liberal Arts Director – IDOL © No part of this publication should be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording and/or otherwise without the prior written permission of the authors and the publisher. SLM SPECIALLY PREPARED FOR CU IDOL STUDENTS Printed and Published by: TeamLease Edtech Limited www.teamleaseedtech.com CONTACT NO:- 01133002345 For: CHANDIGARH UNIVERSITY Institute of Distance and Online Learning
Web Development Practical Course Code: BCA126 Credit: 1 Course Objectives: • To provide a comprehensive introduction to computer graphics techniques, focusing on 3D modelling, image synthesis & rendering. • To carry out computer graphics and to evaluate software and hardware for that use. The course is a foundation for a master´s thesis within computer graphics. PRACTICAL UNIT 1: 1 WAP to Demonstrate anchor control. Solution: Syntax: <ahref=\"URL\">Text Here</a> Program: <html> <body> <a href=\"https://www.google.com/\" >Click here</a> </body> </html> Output: Click here 2. WAP to Create form to submit user records.
Solution: a. Form- The <form> tag is used to create an HTML form. Program: <form> <label>Username: <input type=\"text\"></label> <label>Password: <input type=\"password\"></label> <input type=\"submit\" value=\"Submit\"> </form> Output: b. Input- An input element can be of type text field, password field, checkbox, radio button, submit button, reset button, file select box. Text-Text fields are one line areas that allow the user to input text. Program: <form> <label for=\"username\">Username:</label> <input type=\"text\" name=\"username\" id=\"username\"> </form> Output: Passwords Field: Password fields are similar to text fields. The only difference is; characters in a password field are masked, i.e. they are shown as asterisks or dots. Program: <form> <label for=\"user-pwd\">Password:</label> <input type=\"password\" name=\"user-password\" id=\"user-pwd\"> </form> Output:
Radio Buttons: Radio buttons are used to let the user select exactly one option from a pre-defined set of options. Program: <form> <input type=\"radio\" name=\"gender\" id=\"male\"> <label for=\"male\">Male</label> <input type=\"radio\" name=\"gender\" id=\"female\"> <label for=\"female\">Female</label> </form> Output: Checkbox: Checkboxes allows the user to select one or more option from a pre-defined set of options. Program: <form> <input type=\"checkbox\" name=\"sports\" id=\"soccer\"> <label for=\"soccer\">Soccer</label> <input type=\"checkbox\" name=\"sports\" id=\"cricket\"> <label for=\"cricket\">Cricket</label> <input type=\"checkbox\" name=\"sports\" id=\"baseball\"> <label for=\"baseball\">Baseball</label> </form> Output: Textarea: Textarea is a multiple-line text input control that allows a user to enter more than one line of text. Program: <form> <label for=\"address\">Address:</label> <textarea rows=\"3\" cols=\"30\" name=\"address\" id=\"address\"></textarea> </form>
Output: 3. WAP to Demonstrate Images Map. Solution: The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags. Program: <html><body> <h2>Image Maps</h2> <p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p> <imgsrc=\"Laptop.jpg\" alt=\"Laptop\" usemap=\"#workmap\"> <map name=\"workmap\"> <area shape=\"rect\" coords=\"34,44,270,350\" alt=\"Computer\" href=\"computer.htm\"> <area shape=\"rect\" coords=\"290,172,333,250\" alt=\"Phone\" href=\"phone.htm\"> <area shape=\"circle\" coords=\"337,300,44\" alt=\"Coffee\" href=\"coffee.htm\"> </map> Output:
PRACTICAL UNIT 2: 1. WAP to Demonstrate user of Video Controls and Audio Controls. Solution: Video Controls: A <video> element with browser default controls: Program: <html> <body> <h1>video</h1> <video width=\"320\" height=\"240\" controls> <source src=\"movie.mp4\" type=\"video/mp4\"> <source src=\"movie.ogg\" type=\"video/ogg\"> Your browser does not support the video tag. </video> </body> </html> Output: Audio Control: The <audio> tag is used to embed sound content in a document, such as music or other audio streams. Program: <html> <body> <h1>The audio element</h1> <p>Click on the play button to play a sound:</p>
<audio controls> <source src=\"horse.ogg\" type=\"audio/ogg\"> <source src=\"horse.mp3\" type=\"audio/mpeg\"> Your browser does not support the audio element. </audio> </body> </html> Output: 2. WAP to Demonstrate External and internal style sheets. Solution: External Style Sheets: An external style sheet is used to define the style for many HTML pages. Program: <html> <head> <link rel=\"stylesheet\" href=\"styles.css\"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Output: Internal Style Sheets:
An internal CSS is used to define a style for a single HTML page. Program: <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Output: 3. WAP to Demonstrate frames. Solution: A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns. Program: <html> <head> <title>Example of HTML Frames using row attribute</title> </head> <frameset rows = \"20%, 60%, 20%\"> <frame name = \"top\" src = \"C:/Users/dharam/Desktop/attr1.png\" /> <frame name = \"main\" src = \"C:/Users/dharam/Desktop/gradient3.png\" /> <frame name = \"bottom\" src = \"C:/Users/dharam/Desktop/col_last.png\" />
<noframes> <body>The browser you are working does not support frames.</body> </noframes> </frameset> </html> Output:
PRACTICAL UNIT 3: 1. Design a webpage using HTML and External Style sheets. Solution: External Style Sheets: An external style sheet is used to define the style for many HTML pages. Program: <html> <head> <link rel=\"stylesheet\" href=\"styles.css\"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Output: 2. Internal Style Sheets: An internal CSS is used to define a style for a single HTML page. Program: <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head>
<body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Output: 3. WAP to Demonstrate Table Tag. Solution: An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements. Practical: <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h1>Table with Borders</h1> <table> <tr> <th>Icecream</th> <th>Amount</th> </tr> <tr> <td>ButterScotch</td> <td>$10</td> </tr> <tr> <td>Chocolate</td>
<td>$8</td> </tr> </table> </body> </html> Output: 4. WAP to Demonstrate Dialog Boxes in java script Solution: Alert Dialog Box: An alert dialog box is mostly used to give a warning message to the users Program: <html> <head> <script type = \"text/javascript\"> <!-- function Warn() { alert (\"This is a warning message!\"); document.write (\"This is a warning message!\"); } //--> </script> </head> <body> <p>Click the following button to see the result: </p> <form> <input type = \"button\" value = \"Click Me\" onclick = \"Warn();\" /> </form> </body> </html> OutPut:
Confirm Box: A confirm box is often used if you want the user to verify or accept something. Program: <html> <body> <h2>JavaScript Confirm Box</h2> <button onclick=\"myFunction()\">Try it</button> <p id=\"demo\"></p> <script> function myFunction() { var txt; if (confirm(\"Press a button!\")) { txt = \"You pressed OK!\"; } else { txt = \"You pressed Cancel!\"; } document.getElementById(\"demo\").innerHTML = txt; } </script> </body> </html> Output: Prompt Box: A prompt box is often used if you want the user to input a value before entering a page. Program: <html> <body>
<h2>JavaScript Prompt</h2> <button onclick=\"myFunction()\">Try it</button> <p id=\"demo\"></p> <script> function myFunction() { var txt; var person = prompt(\"Please enter your name:\", \"Harry Potter\"); if (person == null || person == \"\") { txt = \"User cancelled the prompt.\"; } else { txt = \"Hello \" + person + \"! How are you today?\"; } document.getElementById(\"demo\").innerHTML = txt; } </script> </body> </html> Output: 5. WAP to Demonstrate Cookies in JavaScript.
Solution: Cookies are data, stored in small text files, on your computer. Program: In the example to follow, we will create a cookie that stores the name of a visitor. The first time a visitor arrives to the web page, he/she will be asked to fill in his/her name. The name is then stored in a cookie. The next time the visitor arrives at the same page, he/she will get a welcome message. For the example we will create 3 JavaScript functions: • A function to set a cookie value • A function to get a cookie value • A function to check a cookie value <html> <head> <script> function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = \"expires=\" + d.toGMTString(); document.cookie = cname + \"=\" + cvalue + \";\" + expires + \";path=/\"; } function getCookie(cname) { var name = cname + \"=\"; vardecodedCookie = decodeURIComponent(document.cookie); varca = decodedCookie.split(';'); for(var i = 0; i <ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return \"\"; } function checkCookie() { var user=getCookie(\"username\"); if (user != \"\") { alert(\"Welcome again \" + user); } else { user = prompt(\"Please enter your name:\",\"\"); if (user != \"\" && user != null) {
setCookie(\"username\", user, 30); } } } </script> </head> <body onload=\"checkCookie()\"></body> </html> Output:
Search
Read the Text Version
- 1 - 18
Pages:
