Scribd
Upload
4 views45 pages

SDC Rec

The document is a laboratory record for a student named Mateti Rithvika, detailing practical work in a Skill Development Course for the Computer Science and Engineering department. It includes a certificate section, an index of experiments, and HTML program examples demonstrating various web development concepts. The document outlines specific tasks such as creating forms, implementing CSS, and developing a time-table using HTML.

Uploaded by

shanthabai584
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views45 pages

SDC Rec

The document is a laboratory record for a student named Mateti Rithvika, detailing practical work in a Skill Development Course for the Computer Science and Engineering department. It includes a certificate section, an index of experiments, and HTML program examples demonstrating various web development concepts. The document outlines specific tasks such as creating forms, implementing CSS, and developing a time-table using HTML.

Uploaded by

shanthabai584
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 45

1

1
2

6 Laboratory Record
7

9
10
Name :: MATETI RITHVIKA
Roll No :: 23P81A0538
Subject : Skill Development Course
Department : Computer Science and
Engineering
Academic : 2024-25 Semester : IV
Year
11

12

2
3

CERTIFICATE

This is to certify that the bonafide record of practical work


done in the ____________________________________ laboratory by
Mr./Mrs. _____________________________
__________ of B. Tech./
M. Tech _______ year
_______ Semester HT.No. ____________
during the year
_____________.

Signature of the Faculty Head of the


Member Department

Signature of the External


Examiner
4
5
14 INDEX
Sl. Pag
No Name of the experiment e Date
No
17-01-
1 Write an HTML program using basic html tags. 1
2025

24-01-
2 Write an HTML program to display time-table of your class. 3
2025
Write an HTML program to demonstrate different Cascading 31-01-
3 Style Sheet (inline, internal & external) CSS. 5
2025

07-02-
4 Write an HTML program to create a login page with CSS. 7
2025
Write an HTML program to create a form described as
below:
• a text box to read name and roll number of a student
• a select button for the options (like 2-CSE-A, 2-CSE-B, 2-
14-02-
5 CSE-C) 9
2025
• a radio button for willingness to participate in an
event(ready, not-ready, may-be-later)
• a check box to specify various events (solodance, group-
dance, flash-mob
Write an HTML program to demonstrate internal & external 21-02-
6 java script. 11
2025
Write an HTML program to create a login-form with
28-02-
7 validations by using java script and display alert messages 14
2025
accordingly.
Write HTML program(s) with necessary hyperlinks to
perform the below tasks: • sign-in form
07-03-
8 • sign-up form 18
2025
• forgot-password

Write a HTML program to create a responsive login-form 21-03-


9 with boot-strap framework. 24
2025
Write a HTML program to demonstrate responsive web-page 28-09-
10 with different html tags. 27
2025
Write a Java program to perform the CRUD operations
04-04-
11 (Create, Read, Update & Delete) on a tables using JDBC 28
2025
Connectivity
Screen shots of Real Time Research Project – (you PS/RTP 11-04-
12 32
title) 2025
15

6
7

16
17 1 Write an HTML program using basic html tags

18 <!-- file-name form-with-tags.html -->


19 <html lang="en">
20 <head>
21 <meta charset="utf-8">
22 <meta name="viewport" content="width=device-width, initial-scale=1">
23 <title>23P81A0516-HTML-Form-Tags</title>
24 </head>
25 <body>
26 A form with different HTML tags
27 <form class='form' method='post' action='#'>
28 <table border=1>
29 <tr>
30 <td> Name : </td>
31 <td> <input type='text' id='name' placeholder='Full Name'> </td>
32 </tr>
33 <tr>
34 <td> Roll Number : </td>
35 <td> <input type='text' id='rno' placeholder='HTNO'> </td>
36 </tr>
37 <tr>
38 <td> Section : </td>
39 <td> <select name='section'>
40 <option>2-CSE-A</option>
41 <option>2-CSE-B</option>
42 <option>2-CSE-C</option>
43 </select>
44 </td>
45 </tr>
46 <tr>
47 <td> Willingness : </td>
48 <td><input type='radio' name='willing' value=1> Ready
49 <input type='radio' name='willing' value=3> Not-Ready
50 <input type='radio' name='willing' value=3> May-be-later
51 </td>
52 </tr>
53 <tr>
54 <td> Interested in : </td>
55 <td> <input type='checkbox' name='sd'> Solo-Dance
56 <input type='checkbox' name='gd'> Group-Dance
57 <input type='checkbox' name='fm'> Flash-Mob
58 </td>
59 </tr>
60 <tr>
61 <td colspan=3>
62 <hr>
63 <input type='submit' value='submit'>
64 <input type='reset' value='reset'>
65 </td>
66 </tr>
67 <tfoot>
68 <tr><td colspan=9>created by 23P81A0516</td></tr>
69 </tfoot>
70 </table>

8
9

71 </form>
72 </body>
73 </html>

74 Page | 1

10
11

75
76

12
13

1
2
3
4
5 2. HTML program demonstrates inline, internal and external cascading style
6 sheet
7
8 <!-- 2html-tags-with-css.html -->
9 <html lang="en">
10 <head>
11 <meta charset="utf-8">
12 <meta name="viewport" content="width=device-width, initialscale=1">
13 <title> HTML-CSS </title>
14 <!-- internal styles-->
15 <style>
16 #p1{color:red}
17
.c1{font-size:13pt}
18
19 .c2{color:blue}
20 </style>
21 <!-- external styles -->
22 <link rel=’stylesheet’ href='2ext-style.css'>
23 </head>
24 <body>
25 <p id='p1'> text in a paragraph-1 with id-attribute which
26 is unique per element.<br>
27 'id'-attribute is having more priority than a 'class' attribute
28 </p>
29 <p class='c1 c2'>
30 text in another paragraph-2 specifying with 'class' attribute.<br>
31 a class is an attribute we can use to assign a name to<br> one or
32 more elements so they can share common styles or behavior.
33 </p>
34 <p style="text-decoration: line-through;">
35 This text is strike out. (inline-style-sheet)</p>
36 <p id='p4'> External style is applied to
37 this paragraph
38 </p>
39 Enter text here <input type='text' class='c1' value='created by
40 23P81A0516'>
41 </body>
</html>
<!-- the content of ext-style.css is:
#p4{
color:green;
14
15

77 .

16
17
3. Write an HTML program to display the time tale of your class

<!-- file-name 3 time-table.html -->


<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>23P81A0516-HTML-Time-Table</title>
<style>
table{border-collapse:collapse}
th{padding:5px} td{text-align:center;}
</style>
12 </head>
34 <body>
56
<center>
78
<table border=1>
9
<thead>
10
<tr>
11
12 <td colspan=9>Time Table of 2-CSE-A </td>
13 </tr>
14 </thead>
15 <tr>
16 <th> Day/Time </th>
17 <th>9:30-10:20</th>
18 <th>10:20-11:10</th>
19 <th>11:10-12:00</th>
20 <th>12:00-12:50</th>
21 <th>12:50-1:30 </th>
22 <th>1:20-2:20</th>
23
<th>2:20-3:10</th>
24
25 <th>3:10-4:00</th>
26 </tr>
27 <tr>
28 <th> Monday </th>
29 <td>BEFA</td>
30 <td colspan=2>OS</td>
31 <td>SE</td>
32 <th rowspan=7> L<br>U<br>N<br>C<br>H </th>
33 <td>OS</td>
34 <td>RTP</td>
35 <td>Library</td>
36
</tr>
37
38 <tr>
39 <th> Tuesday </th>
40 <td>DM</td>
41 <td colspan=3>CP</td>
42 <td>SE</td>
43 <td>BEFA</td>
44 <td>RTP</td>
45 </tr>
46 <tr>
47 <th> Wednesday </th>
48 <td colspan=2>OS</td>
49
<td>BEFA</td>
50
<td>DM</td>
51
52 18
19

55 <td>BEFA</td>
56 <td colspan=2>RTP</td>
57 </tr>
58 <tr>
59 <th> Thursday </th>
60 <td>OS</td>
61 <td>DBMS</td>
62 <td colspan=2>CP</td>
63 <td colspan=2>COI</td>
64 <td>Sports</td>
65 </tr>
66 <tr>
67 <th> Friday </th>
68 <td>SE</td>
69 <td>DM</td>
70 <td colspan=2>DBMS</td>
71 <td>DM</td>
72 <td colspan=2>SDC</td>
73 </tr>
74 <tr>
75 <th> Saturday </th>
76 <td colspan=2>DBMS</td>
77 <td>SE</td>
78 <td>DM</td>
79 <td>BEFA</td>
80 <td>COI</td>
81 <td>SDC</td>
82 </tr>
83 <tfoot>
84 <tr>
85 <td colspan=9 style="text-align: right;">created by 23P81A0516</td>
86 </tr>
87 </tfoot>
88 </table>
89 <center>
90 </body>
91 </html>
92

20 6
21

93

94 Page |

22
23

12
34
56
78
9
10
11
12
13
14
15
16
17
18
19 4 Write an HTML program to create a login page with CSS
20
21 <!-- 4 login-form-with-css.html -->
22 <html lang="en">
23 <head>
24
<meta charset="utf-8">
25
26 <meta name="viewport" content="width=device-width, initial-scale=1">
27 <title>23P81A0516-login-form-css</title>
28 <style>
29 #style2{text-align:center;}
30 td{padding:5px;} #uname{color:red}
31 input[type=submit]{font-size:20px}
32 </style>
33 </head>
34 <body>
35 <form class='form' method='post' action='#'>
36 <table border=0>
37 <tr>
38 <td> User Name : </td>
39 <td> <input type='text' id='uname'> </td>
40 </tr>
41 <tr>
<td> Password : </td>
<td> <input type='password' id='pwd'> </td>
</tr>
<tr>
<td colspan=3 id='style2' >
<input type='submit' value='submit'>
<input type='reset' value='reset'> <br>
Forgot password? <a href='forgotpwd.html'> click here </a>
</td>
</tr>
<tfoot>
<tr>
<td colspan=9 style="text-align: right;">created by 23P81A0516</td>
</tr>

24
25

95
96

26 Page | 9
27

5 Write an HTML program to create a form described as below:


• a text box to read name and roll number of a student
• a select button for the options (like 2-CSE-A, 2-CSE-B, 2-CSE-C)
• a radio button for willingness to participate in an event(ready, not-ready, may-be-later)
• a check box to specify various events (solodance, group-dance, flash-mob
<!-- file-name 5form-with-css.html -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>23P81A0516-HTML-Form-css</title>
<style>
#center{text-align:center;}
12 td{padding:5px; border:none}
34 #uname{color:red}
5 input[type=submit, type=button]{font-size:15px}
6 </style>
78 </head>
9 <body>
10 A form with different HTML tags using CSS
11 <form class='form' method='post' action='#'>
12 <table border=1>
13
<tr>
14
<td> Name </td>
15
16 <td> : <input type='text' id='name' placeholder='Full Name'> </td>
17 </tr>
18 <tr>
19 <td> Roll Number </td>
20 <td> : <input type='text' id='rno' placeholder='HTNO'> </td>
21 </tr>
22 <tr>
23 <td> Section </td>
24 <td> : <select name='section'>
25 <option>2-CSE-A</option>
26 <option>2-CSE-B</option>
27 <option>2-CSE-C</option>
28 </select>
29 </td>
30 </tr>
31
<tr>
32
<td> Willingness </td>
33
34 <td> : <input type='radio' name='willing'> Ready
35 <input type='radio' name='willing'> Not-Ready
36 <input type='radio' name='willing'> May-be-later
37 </td>
38 </tr>
39 <tr>
40 <td> Interested in </td>
41 <td> : <input type='checkbox' name='sd'> Solo-Dance
42 <input type='checkbox' name='gd'> Group-Dance
43 <input type='checkbox' name='fm'> Flash-Mob
44 </td>
28
29

97 <td colspan=3 id='center' >


98 <hr>
99 <input type='submit' value='submit'>
100 <input type='reset' value='reset'> <br>
101 </td>
102 </tr>
103 <tfoot>
104 <tr>
105 <td colspan=9 style="text-align: right;">created by
106 23P81A0516</td>
107 </tr>
108 </tfoot>
109 </table>
110 </form>
111 </body>
112 </html>
113
114

115

30 Page | 11
31

12
34
56
78
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 6 Write an HTML program to demonstrate internal & external java script
24
25 <!-- file-name 6js-internal-external.html -->
26 <html lang="en">
27 <head>
28 <meta charset="utf-8">
29 <meta name="viewport" content="width=device-width, initial-scale=1">
30 <title>23P81A0516-internal-external-js</title>
31 <script type='text/javascript' src='externaljs.js'> </script>
</head>
32
<script type='text/javascript'>
alert("this alert message is displayed at the time of loading the
page"); </script>
<body>
A HTML program to demonstrate java script (internal & external)
<br>
Internal script:<br>
An alert message printed when the page loads<br><br>
External script:<br>
When the button is clicked, a confirm message is displayed<br>
<input type='submit' value='confirm msg' onClick='confirmMsg()'>
</body>
</html>

/* file name: externaljs.js */ function


confirmMsg(){
var a = confirm("Are you sure?");
if(a==true)
alert("User Accepted");
else
alert("User Canceled");
}

32
33

116
117 Figure: Q6A – When the page is loaded
118
119
120

121
122
123 Figure: Q6B – After closing the alert window
124
125

34 Page | 13
35

126
127 Figure: Q6C – When confim msg button is clicked
128
129
130

131
132 Figure: Q6D – Confirm message button’s choice is OK
133
134

135
136 Figure: Q6E – Confirm message button’s choice is Cancel
137
138

36
37

7 Write an HTML program to create a login-form with validations by using java script and
display alert messages accordingly.

<!-- 7login-form-with-css-js.html -->


<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>23P81A0516-login-page-validations</title>
<style>
#center{text-align:center;}
td{padding:5px; border:none}
</style>
<script type='text/javascript' src='validateLogin.js'> </script>
</head>
<body>
Login form with validations (using Java Script)
<form class='form'>
<table border=1>
<tr>
<td> User Name <td> :
<td> <input type='text' id='uname' placeholder='enter the user
name'> </tr>
<tr>
<td> Password <td> :
<td> <input type='password' id='pwd' placeholder='enter the password'>
</tr>
1 <tr>
23 <td colspan=3 id='center' > <hr>
45 <button type='button' onclick='validateUsernamePassword()'> Submit
67 </button>
89
<input type='reset' value='reset'> <br>
10
Forgot password? <a href='forgotpwd.html'> click here </a>
11 12 </tr>
13 <tfoot>
14 15
<tr><td colspan=3 style="text-align: right;"> <hr>
16 17
18 19 <small>created by 23P81A0516</small></td></tr>
20 21 </tfoot>
22 23 </table>
24 25 </form>
26 </body>
27 28 </html>
29 30
31 32 //7validateLogin.js
33 34 function validateUsernamePassword() {
35 let username = document.getElementById('uname').value;
36 37 username = username.trim(); //remove spaces before and after username
38
39 40
let msg = '', cnt = 0 if
(username.length == 0)
41 42 msg += ++cnt + '. username should not be null\n'; if

38 Page | 15
39

139 msg += ++cnt + '. username should start with alphabet\n';


140 let password = document.getElementById('pwd').value.trim(); let
141 hasUpperCase = false, hasDigit = false, hasSpecialChar = false;
142 const specialChars = "!@#$%^&*"; if (password.length == 0)
143 msg += cnt + '. password should not be null\n';
144 if (password.length < 8)
145 msg += ++cnt + '. password should have minimum 8 characters\n';
146 for (let char of password) {
147 if (char >= 'A' && char <= 'Z') hasUpperCase = true;
148 if (char >= '0' && char <= '9') hasDigit = true; if
149 (specialChars.includes(char)) hasSpecialChar = true;
150 }
151 if (!(hasUpperCase))
152 msg += ++cnt + '. should have 1-upper case letter\n';
153 if (!(hasDigit))
154 msg += ++cnt + '. should have 1-digit\n';
155 if (!(hasSpecialChar))
156 msg += ++cnt + '. should have 1-special character';
157 if(msg.length==0){
158 alert('The form has been validated successfully with username=' +
159 username + 'and password=' + password); return true;
160 }
161 else{ alert(m
162 sg); return
163 false;
164 }

165 }
166 Figure: Q7A – landing page
167
168
169

40
41

54

42 Page | 17
43

Figure: Q7B – User name is empty

Figure: Q7C – User name is entered as ‘23P81A0516’


and the password is NULL

44
45

56
57 Figure: Q7C – User name = ‘23P81A0516’
58 and the password = ‘23P81A0516’
59
60

61
62 Figure: Q7D – User name = ‘a23P81A0516’
63 and the password = ‘@23P81A0516’
64

46 Page | 19
47

8 Write HTML program(s) with necessary hyperlinks to perform the below tasks:
• sign-in form
• sign-up form
• forgot-password

<!-- 8signin.html -->


<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>23P81A0516-KeshavParv2K25-Login</title>
<style>
#style2{text-align:center;}
12 td{padding:5px;} #uname{color:red}
34 input{font-size:20px}
56 .container{ border: 2px solid black; /* border to the
7 div content*/ display:inline-block; /* area to occupy the
89 div content */ display: table; /* div to be placed in center
10 */ margin-right: auto; margin-left: auto;
11 text-align: center; /*center the text*/
12 }
13 </style>
14 </head>
15 <body>
16
<div class='container'>
17
<h4>Keshav Memorial College of Engineering</h4>
18
19 <h5>KeshavParv2K25 Event Login Page</h5> <hr>
20 <form class='form' method='post' action='#'>
21 <table border=0>
22 <tr>
23 <td> User Name : </td>
24 <td> <input type='text' id='uname'> </td>
25 </tr>
26 <tr>
27 <td> Password : </td>
28 <td> <input type='password' id='pwd'> </td>
29 </tr>
30
<tr>
31
32 <td colspan=3 id='style2' >
33 <button type='button'>Submit</button>
34 <input type='reset' value='reset'> <br>
35 Forgot password? <a href='8forgotpwd.html'> click here </a> </br>
36 New user? <a href='8signup.html'> SignUp here </a>
37 </td>
38 </tr>
39 </table>
40 </form>
41 </div>
42 </body>

48
49

65
66 Figure: Q8A – Sign-in form
67

50 Page | 21
51

12
34
5 <!-- 8signup.html -->
67 <html lang="en">
89 <head>
10 <meta charset="utf-8">
11 <meta name="viewport" content="width=device-width, initial-scale=1">
12 <title> 23P81A0516-KeshavParv2K25-Registration</title>
13 <style>
14
15 #style2{text-align:center;}
td{padding:5px;} #uname{color:red}
16
input{font-size:20px}
17
.container{ border: 2px solid black; /* border to the
18
div content*/ display:inline-block; /* area to occupy the
19
div content */ display: table; /* div to be placed in center
20
*/ margin-right: auto; margin-left: auto;
21
text-align: center; /*center the text*/
22
23 }
24 </style>
25 </head>
26 <body>
27 <div class='container'>
28 <h4>Keshav Memorial College of Engineering</h4>
29 <h5>KeshavParv2K25 Event Registration Page</h5> <hr>
30 <form class='form' method='post' action='#'>
31 <table border=0>
32 <tr>
33 <td> User Name : </td>
34
<td> <input type='text' id='uname'> </td>
35
</tr>
36
37 <tr>
38 <td> Password : </td>
39 <td> <input type='password' id='pwd'> </td>
40 </tr>
41 <tr>
42 <td> E-mail : </td>
43 <td> <input type='text' id='email'> </td>
44 </tr>
45 <tr>
46 <td colspan=3 id='style2' >
47 <button type='button'>Register</button>
48
<input type='reset' value='reset'> <br>
49
50 Already registered? <a href='8signin.html'> click here </a>
</td>
51 </tr>
</table>
</form>
</div>
</body>
</html>
52
53

68
69 Figure: Q8B – Signup form
70

54 Page | 23
55

1
2
3 <!-- 8forgotpwd.html -->
4 <html lang="en">
5 <head>
6 <meta charset="utf-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <title>23P81A0516-KeshavParv2K25-forgotpwd</title>
9 <style>
10 #style2{text-align:center;}
td{padding:5px;}
11
#uname{color:red} input{font-
12 size:20px}
13 .container{ border: 2px solid black; /* border to the
14 div content*/ display:inline-block; /* area to occupy
15 the div content */ display: table; /* div to be placed in
16 center */ margin-right: auto; margin-left: auto;
17 text-align: center; /*center the text*/
18 }
</style>
19
</head>
20
<body>
21
<div class='container'>
22
<h4>Keshav Memorial College of Engineering</h4>
23 <h5>KeshavParv2K25 Event<br>(forgot password)</h5><hr>
24 <form class='form' method='post' action='#'>
25 <table border=0>
26 <tr>
27 <td> User Name : </td>
28 <td> <input type='text' id='uname'> </td>
29 </tr>
30 <tr>
31 <td> E-mail : </td>
32 <td> <input type='text' id='email'> </td>
33 </tr>
34 <tr>
35 <td colspan=3 id='style2' >
36 <button type='button'>Submit</button>
37 <input type='reset' value='reset'> <br>
New user? <a href='8signup.html'> SignUp here </a>
38
</td>
39
</tr>
40
</table>
41
</form>
42 </div>
43 </body>
44 </html>
45

56
57

71
72 Figure: Q8C – Forgot password

58 Page | 25
59

12 9 Write a HTML program to create a responsive login-form with boot-strap framework


34
56 <!-- 8bootstrap-login.html -->
78 <html lang="en">
9 <head>
10 <meta charset="utf-8">
11 <meta name="viewport" content="width=device-width, initial-scale=1">
12 <link href = "BootStrap_3_3_7/css/bootstrap.min.css" rel="stylesheet"
13 media="screen">
14 <link rel="stylesheet"
15 href="BootStrap_3_3_7/ajax/libs/fontawesome/4.7.0/css/font-
16 awesome.min.css">
17 <script src =
18 "BootStrap_3_3_7/ajax/libs/jquery/jquery.min.js"></script>
19 <script src = "BootStrap_3_3_7/js/bootstrap.min.js"></script>
20 <title>23P81A0516-Bootstrap-Login</title>
21 </head>
22 <body>
23 <div class="container">
24
<div class="row">
25
26 <div class="col-sm-12 jumbotron text-center">
27 Keshav Memorial College of Engineering
28 </div>
29 </div>
30 <div class="col-sm-12 card">
31 <div class="card-body text-center"
32 <h5>KeshavParv2K25 Event Login Page</h5> <hr>
33 <div class="form">
34 <div class="row">
35 <div class="col-xs-12 col-sm-4 col-md-5 col-lg-6">
36 <label>User name</label>
37
</div>
38
39 <div class="col-xs-12 col-sm-8 col-md-7 col-lg-6">
40 <input type="text" id="uname" placeholder="username">
41 </div>
42 </div>
43 <div class="row">
44 <div class="col-xs-12 col-sm-4 col-md-5 col-lg-6">
45 <label>Password</label>
46 </div>
47 <div class="col-xs-12 col-sm-8 col-md-7 col-lg-6">
48 <input type="password" id="pwd" placeholder="password">
49 </div>
50
</div>
51
<div class="row">
52
<div class="col-xs-12 col-sm-5">
53
<input type="submit" value="Submit">
</div>
<div class="col-xs-12 col-sm-7">
<input type="reset" value="Reset">
</div>

60
61

</div>
<div class="row">
<div class="col-xs-12">
<label>New user? <a href="bootstrap-signup.html">Sign-Up
here</a></label>

Page | 24

73 </div>
74 </div>
75 </div>
76 </div>
77 </div>
78 </div>
79 </body>
80 </html>
81

82

83 Figure: Q9A – View in Samsung Galaxy A51/71 with 914 x 412 resolution

62 Page | 27
63

84
85 Figure: Q9B – View in Samsung Galaxy A51/71 with 412 x 914 resolution
86

64 Page | 28
65

87 10 Write a HTML program to demonstrate responsive web-page with different html


88 tags

89 <!-- 10example.html -->


90 <html lang="en">
91 <head>
92 <meta charset="utf-8">
93 <meta name="viewport" content="width=device-width, initial-scale=1">
94 <link href = "BootStrap_3_3_7/css/bootstrap.min.css" rel="stylesheet"
95 media="screen">
96 <link rel="stylesheet"
97 href="BootStrap_3_3_7/ajax/libs/fontawesome/4.7.0/css/font-
98 awesome.min.css">
99 <script src = "BootStrap_3_3_7/ajax/libs/jquery/jquery.min.js">
100 </script>
101 <script src = "BootStrap_3_3_7/js/bootstrap.min.js"> </script>
102 <title>23P81A0516-Responsive page with different tags</title>
103 </head>
104 <body>
105 <div class="container">
106 <h1>Hello KMCE</h1>
107 <i class='fa fa-thumbs-up'> </i>
108 <div class="table-responsive">
109 <table class='table table-striped'>
110 <tr><th>sno<th>name<th>subject</tr>
111 <tr><td>1<td>kmce-1<td>Artificial Intelligence</tr>
112 <tr><td>2<td>kmce-2<td>CyberSecurity</tr>
113 </table>
114 </div>
115 </div>
116 </body>
117 </html>
118

119

66 Page | 29
67

1
2
3
4
5
6
7 11 to perform the CRUD (Create, Read, Update & Delete) operations on a
8 tables using JDBC Connectivity
9 //file name: DatabaseCRUD.java
10 //javac -cp mysql-connector-j-9.3.0.jar; DatabaseCRUD.java
11 //java -cp mysql-connector-j-9.3.0.jar; DatabaseCRUD
12 //before run the above command, mysql should be installed
13 //either xampp server / mysql-server
14 //and a database ('test') should be existed
15 import java.sql.*; import
16 java.util.Scanner;
17 Write a Java program
18 class DatabaseCRUD {
19 private static final String DB_URL =
20 "jdbc:mysql://localhost:3306/test"; private
21 static final String DB_USER = "root"; private
22 static final String DB_PASSWORD = ""; private
23 static Connection con;
24 private static Scanner scanner = new Scanner(System.in);
25 public static void main(String[] args) { try {
26 Class.forName("com.mysql.cj.jdbc.Driver"); // For MySQL
27 // Class.forName("oracle.jdbc.driver.OracleDriver"); // For Oracle
28 con = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD);
29 System.out.println("Connected to database.");
30 while (true) {
31 System.out.println("\n--- CrUD Menu ---");
32 System.out.println("1. Create User");
33 System.out.println("2. Read Users");
34 System.out.println("3. Update User");
35 System.out.println("4. Delete User");
36
System.out.println("5. Exit");
37 System.out.print("Choose option: ");
38 int choice = Integer.parseInt(scanner.nextLine());
39 switch (choice) { case 1: createUser();
40 break; case 2: readUsers(); break;
41 case 3: updateUser(); break; case 4:
42 deleteUser(); break; case 5:
43 con.close();
44
System.out.println("Connection closed. Exiting...");
45 return; default:
46 System.out.println("Invalid choice.");
47
}

68 Page | 30
69

54
55
56
57
58
59
60
61
62
63 e.printStackTrace();
64 } }
65 private static void createUser() throws SQLException {
66 System.out.print("Enter name: ");
67 String name = scanner.nextLine();
68 System.out.print("Enter email: ");
69 String email = scanner.nextLine();
70 String sql = "INSERT INTO users (name, email) VALUES (?, ?)";
71
PreparedStatement stmt = con.prepareStatement(sql);
72 stmt.setString(1, name); stmt.setString(2, email);
73 int rows = stmt.executeUpdate();
74 if (rows > 0) {
75 System.out.println("User added successfully.");
76 }
77
stmt.close();
78
79 }
80 private static void readUsers() throws SQLException {
81 String sql = "SELECT * FROM users";
82 Statement stmt = con.createStatement();
83 ResultSet rs = stmt.executeQuery(sql); System.out.println("\
84 n--- Users ---");
85 while (rs.next()) {
86 System.out.printf("ID: %d, Name: %s, Email: %s%n",
87 rs.getInt("id"), rs.getString("name"), rs.getString("email"));
88 }
89 rs.close();
90 stmt.close();
91 }
92 private static void updateUser() throws SQLException {
93 System.out.print("Enter user ID to update: "); int id
94 = Integer.parseInt(scanner.nextLine());
95 System.out.print("Enter new name: ");
96 String name = scanner.nextLine();
97 System.out.print("Enter new email: ");
98 String email = scanner.nextLine();
99 String sql = "UPDATE users SET name = ?, email = ? WHERE id = ?";
100 PreparedStatement stmt = con.prepareStatement(sql);
101 stmt.setString(1, name); stmt.setString(2, email);
102 stmt.setInt(3, id); int rows =
103 stmt.executeUpdate(); if (rows > 0) {
104 System.out.println("User updated successfully.");
105 } else {
106 System.out.println("User not found.");
107 }
108 stmt.close();
}

70 Page | 31
71

120 int id = Integer.parseInt(scanner.nextLine());


121 String sql = "DELETE FROM users WHERE id = ?";
122 PreparedStatement stmt = con.prepareStatement(sql);
123 stmt.setInt(1, id); int rows =
124 stmt.executeUpdate();
125 if (rows > 0) {
126 System.out.println("User deleted successfully.");
127 } else {
128 System.out.println("User not found.");
129 }
130 stmt.close();
131 }
132 }
133

134
135
136

72 Page | 32
73

137
138
139 12 Screen shots of Real Time Research Project –
140 (Title)
141

74 Page | 33
75

142

143

144
145

76 Page | 34
77

146 Calculator.html
147 <!DOCTYPE html>
148 <html lang="en">
149 <head>
150 <meta charset="UTF-8">
151 <title>Simple Calculator</title>
152 <style>
153 body {
154 font-family: Arial, sans-serif;
155 background: #f4f4f4;
156 display: flex;
157 justify-content: center;
158 align-items: center;
159 height: 100vh;
160 }
161 .calculator {
162 background: white;
163 padding: 20px;
164 border-radius: 10px;
165 box-shadow: 0px 0px 10px #ccc;
166 width: 300px;
167 }
168 input[type="number"] {
169 width: 100%;
170 padding: 10px;
171 margin-bottom: 15px;
172 font-size: 1rem;
173 }
174 select, button {
175 width: 100%;
176 padding: 10px;
177 margin-bottom: 15px;
178 font-size: 1rem;
179 }
180 #result {
181 font-weight: bold;
182 font-size: 1.2rem;
183 text-align: center;
184 }
185 </style>
186 </head>
187 <body>
188
189 <div class="calculator">
190 <h2>Simple Calculator</h2>
191 <input type="number" id="num1" placeholder="Enter first number">
192 <input type="number" id="num2" placeholder="Enter second number">
193
194 <select id="operator">
195 <option value="+">Addition (+)</option>
196 <option value="-">Subtraction (-)</option>
197 <option value="*">Multiplication (*)</option>

78 Page | 35
79

198 <option value="/">Division (/)</option>


199 </select>
200
201 <button onclick="calculate()">Calculate</button>
202
203 <div id="result">Result: </div>
204 </div>
205
206 <script>
207 function calculate() {
208 const n1 = parseFloat(document.getElementById('num1').value);
209 const n2 = parseFloat(document.getElementById('num2').value);
210 const op = document.getElementById('operator').value;
211 let res = '';
212
213 if (isNaN(n1) || isNaN(n2)) {
214 res = 'Please enter valid numbers.';
215 } else {
216 switch(op) {
217 case '+': res = n1 + n2; break;
218 case '-': res = n1 - n2; break;
219 case '*': res = n1 * n2; break;
220 case '/':
221 if (n2 === 0) {
222 res = 'Cannot divide by zero.';
223 } else {
224 res = n1 / n2;
225 }
226 break;
227 default: res = 'Invalid operation';
228 }
229 }
230 document.getElementById('result').innerText = 'Result: ' + res;
231 }
232 </script>
233 </body>
234 </html>
235
236
237

80 Page | 36
81

238

82 Page | 37
83

239
240 Bootstrap-online-shopping.html
241 <!DOCTYPE html>
242 <html lang="en">
243 <head>
244 <meta charset="UTF-8">
245 <meta name="viewport"
246 content="width=device-width, initial-
247 scale=1">
248 <title>Online Shopping</title>
249 <link
250 href="https://cdn.jsdelivr.net/npm/bootstra
251 [email protected]/dist/css/bootstrap.min.css"
252 rel="stylesheet">
253 <style>
254 .product-card {
255 transition: transform 0.3s ease;
256 }
257 .product-card:hover {
258 transform: scale(1.05);
259 }
260 </style>
261 </head>
262 <body>
263 <!-- Navbar -->
264 <nav class="navbar navbar-expand-lg navbar-
265 dark bg-dark">
266 <div class="container-fluid">
267 <a class="navbar-brand"
268 href="#">ShopOnline</a>
269 <button class="navbar-toggler"
270 type="button" data-bs-toggle="collapse"
271 data-bs
272 target="#navbarNav">
273 <span
274 class="navbar-toggler-icon"></span>
275 </button>
276 <div class="collapse navbar-collapse
277 justify-content-end" id="navbarNav">
278 <ul class="navbar-nav">
279 <li class="nav-item">
280 <a class="nav-link active"
281 href="#">Home</a>
282 </li>
283 <li class="nav-item">
284 <a class="nav-link"
285 href="#">Products</a>
286 </li>
287 <li class="nav-item">
288 <a class="nav-link"
289 href="#">Cart</a>
290 </li>

84 Page | 38
85

291 </ul>
292 </div>
293 </div>
294 </nav>
295
296 <!-- Hero Banner -->
297 <div class="container-fluid bg-light p-5
298 text-center">
299 <h1>Welcome to ShopOnline</h1>
300 <p class="lead">Your one-stop shop for
301 everything!</p>
302 </div>
303
304 <!-- Product Grid -->
305 <div class="container py-4">
306 <div class="row row-cols-1 row-cols-md-3
307 g-4">
308 <!-- Product 1 -->
309 <div class="col">
310 <div class="card h-100 product-card">
311 <img
312 src="https://via.placeholder.com/300x200"
313 class="card-img-top" alt="Product 1">
314 <div class="card-body">
315 <h5 class="card-title">Product
316 Name 1</h5>
317 <p class="card-text">₹499</p>
318 <button class="btn btn-primary w-
319 100">Add to Cart</button>
320 </div>
321 </div>
322 </div>
323 <!-- Product 2 -->
324 <div class="col">
325 <div class="card h-100 product-card">
326 <img
327 src="https://via.placeholder.com/300x200"
328 class="card-img-top" alt="Product 2">
329 <div class="card-body">
330 <h5 class="card-title">Product
331 Name 2</h5>
332 <p class="card-text">₹799</p>
333 <button class="btn btn-primary w-
334 100">Add to Cart</button>
335 </div>
336 </div>
337 </div>
338 <!-- Product 3 -->
339 <div class="col">
340 <div class="card h-100 product-card">

86 Page | 39
87

341 <img
342 src="https://via.placeholder.com/300x200"
343 class="card-img-top" alt="Product 3">
344 <div class="card-body">
345 <h5 class="card-title">Product Name 3</h5>
346 <p class="card-text">₹1,299</p>
347 <button class="btn btn-primary w-100">Add
348 to Cart</button>
349 </div>
350 </div>
351 </div>
352 <!-- More products can be added similarly
353 -->
354 </div>
355 </div>
356 <!-- Footer -->
357 <footer class="bg-dark text-light text-
358 center p-3">
359 &copy; 2025 ShopOnline. All rights
360 reserved.
361 </footer>
362 <script
363 src="https://cdn.jsdelivr.net/npm/bootstrap
364 @5.3.3/dist/js/bootstrap.bundle.min.js"></
365 script>
366 </body>
367 </html>
368

88 Page | 40
89

369
370
371

90 Page | 41

You might also like