Scribd
Upload
47 views35 pages

Webtech TW

The document contains 6 programming problems related to HTML tags. It provides the problem statements, objectives and code snippets for programs on ordered and unordered lists, hyperlinks and images, timetables using tables, frames, and forms. The output for each problem is also displayed.

Uploaded by

bhavana vashishtha
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
47 views35 pages

Webtech TW

The document contains 6 programming problems related to HTML tags. It provides the problem statements, objectives and code snippets for programs on ordered and unordered lists, hyperlinks and images, timetables using tables, frames, and forms. The output for each problem is also displayed.

Uploaded by

bhavana vashishtha
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/ 35

Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 1: A Program to illustrate Order List and Unordered List in a proper way.
Objective :
Code:
<html>
<head>
</head>
<body>
<h1>Order List and Unordered List </h1>
<h2>Ordered List</h2>
<h3>Example 1:</h3>
<ol type="1">
<li>BCA</li>
<li>BSC IT</li>
</ol>
<h3>Example 2:</h3>
<ol type="A">
<li>ladyfinger</li>
<li>patato</li>
</ol>
<h2>Unordered List</h2>
<h3>Example 1:</h3>
<ul>
<li>hellow</li>
<li>hii</li>
</ul>
<h3>Example 2:</h3>
<ul type="circle">
<li>Flipkart</li>
<li>myntra</li>
</ul>
</body>
</html>

Output:-
Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 2: A Program to illustrate Img tag, and Hyper Link tag in a proper way
and make clickable image .
Objective:
Code:

<html>
<head>
<title>Clickable Image Example</title>
</head>
<body>
<h1>Clickable Image</h1>
<a href="Fdperfil_.png" target="_blank">
<img src="Fdperfil_.png" alt="Example Image" width="300" height="200">
</a>
</body>
</html>

Output:-
Click the image
Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 3: A Program to illustrate current semester time table using table tag
Objective:
Code:
<html>
<head><title>Time Table</title>
<style>table { width: 80%; border-collapse: collapse; margin: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
</style>
</head>
<body>
<h2><p style="text-align: center;">B.Sc. IT 5th , LAB 6</p></h2>
<table border ="2" cellspacing = "0">
<tr>
<th>Time →<br>Days ↓</th>
<th>8:00AM-8:55AM</th><th>8:55AM-9:50AM</th>
<th>10:10AM-11:05AM</th><th>11:05AM-12:00AM</th>
<th>12:00AM-12:55AM</th><th>1:10AM-2:05AM</th>
<th>2:05AM-3:00AM</th><th>3:10AM-4:05AM</th>
<th>4:05AM-5:00AM</th><th>5:00AM-5:55AM</th>
</tr>
<tr>
<th style="text-align: center;">Monday</th><td></td> <td></td> <td></td>
<td style="text-align: center;">TBI 501 <br>(CR-7)</td>
<td colspan="2" style="text-align: center;">C# LAB <br>(PARAM SECOND)</td>
<td style="text-align: center;">TBI 503 <br>(CR-11)</td>
<td style="text-align: center;">LIB</td> <td></td><td></td>
</tr>
<tr>
<th style="text-align: center;">Tuesday</th>
<td></td> <td></td> <td></td><td></td>
<td style="text-align: center;">TBI 502 <br> (CR-7)</td>
<td style="text-align: center;">TBI 504 <br>(CR-1/LT-3)</td>
<td colspan="2" style="text-align: center;">WEB TECH LAB <br>(LAB 6)</td>
<td></td><td></td>
</tr>
<tr>
<th style="text-align: center;">Wednesday</th>
<td></td> <td></td> <td></td><td></td>
<td style="text-align: center;">TBI 502 <br> (CR-7)</td>
<td style="text-align: center;">TBI 504 <br>(CR-1/LT-3)</td>
<td style="text-align: center;">TBI 503 <br>(CR-7)</td>
<td style="text-align: center;">TBI 505</td><td></td><td></td>
</tr>
<tr>
<th style="text-align: center;">Thursday</th><td></td> <td></td> <td></td>
<td style="text-align: center;">TBI 501 <br>(CR-7)</td>
Vashu Vashishtha BSC-IT(5 sem) 53

<td style="text-align: center;">TBI 502 <br>(CR-7)</td>


<td style="text-align: center;">TBI 504 <br>(CR-1/LT-3)</td>
<td style="text-align: center;">TBI 503</td> <td></td>
<td></td><td></td>
</tr>
<tr>
<th style="text-align: center;">Friday</th><td></td> <td></td> <td></td>
<td style="text-align: center;">TBI 501 <br>(CR-7)</td>
<td style="text-align: center;">TBI 502 <br>(CR-7)</td>
<td style="text-align: center;">TBI 505 <br>(LT-4/CR-7)</td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<th style="text-align: center;">Saturday</th><td></td> <td></td>
<td></td><td></td> <td></td><td><td><td></td><td></td><td></td>
</tr>
</table>
<br>
<table border="2" cellspacing="0" style="margin-left: 150px;">
<tr>
<th>TB1 501</th> <td>Programming with C# .NET</td> <td>Mr. Suhaib</td>
</tr>
<tr>
<th>TB1 502</th> <td>Web Technology</td> <td>Mr. Harendra Singh Negi</td>
</tr>
<tr>
<th>TB1 503</th> <td>Fundamental of Artifical Intelligence</td>
<td>Mrs. Vandana Rawat</td>
</tr>
<tr>
<th>TB1 504</th><td>ELECTIVE - II<br> a) Cloud Computing <br>
b) Soft Computing</td>
<td>Mr. Yogesh Lohumi <br> Mr. J.S. Bhatt</td>
</tr>
<tr>
<th>TB1 505</th><td>Career Skills - III</td><td>Dr. Gopal Krishna Dwivedi</td>
</tr>
<tr>
<th>PB1 501</th><td>Programming with C# .NET Lab</td><td>Mr. Suhaib</td>
</tr>
<tr>
<th>PB1 502</th><td>Web Technology Lab</td>
<td>Mr. Harendra Singh Rawat</td></tr>
</table>
<p style="text-align: center;"><b>C.C:</b>Mr. Harendra Singh Rawat</p>
</body>
</html>
Vashu Vashishtha BSC-IT(5 sem) 53

Output:-
Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 4 : A Program to illustrate frameset by dividing the screen according to


your requirement and display a complete webpage in a proper format
Objective :
Code:
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="25%,*,*">
<frame src="first.html" name="topFrame">
<frame src="second.html" name="middleFrame">
<frame src="third.html" name="bottomFrame">
</frameset>
</html>

TOP
<html>
<head><title>Top</title></head>
<body bgcolor="#f2f2f2">
<h1 style="text-align: center;"><font color="green"><u>Computer
Application<u></font></h1>
<p> TOP FRAME</p>
<br>
<table width="100%">
<tr>
<th><a href="rightframe.html" target="rframe">Home</a></th>
<th><a href="about.html" target="rframe">About</a></th>
<th><a href="Timetable.html" target="rframe">TimeTable</a></th>
<th><a href="System.html" target="rframe" >System</a></th>
</tr>
</table>
</body>
</html>

MIDDLE
<html>
<head><title>MIDDLE</title></head>
<body bgcolor="red">
<p><u>MIDDLE FRAME </u></p>
<table border="0" height="70%" width="100%">
<tr><th><a href="BCA.html" target="rframe">BCA</a></th></tr>
<tr><th><a href=B.Sc(CS).html" target="rframe">B.Sc(CS)</a></th></tr>
<tr><th><a href=B.Sc(IT).html" target="rframe">B.Sc(IT)</a></th></tr>
<table>
</body>
</html>
Vashu Vashishtha BSC-IT(5 sem) 53

BOTTOM
<html>
<head><title>bottom</title></head>
<body bgcolor="blue">
<p style="color: white;"><u>BOTTOM FRAME</u></p>
<font color="White"><p>Copyright-All Right Reserved</p>
<p>Design by : Vashu vashishtha</p>
</body>
</html>

Output:-

Problem Statement 5: A Program to illustrate graphic era university enquiry form using form
tag and input controls .
Objective :

Code :
<html>
<head>
<title>Graphic Era University Enquiry Form</title>
</head>
<body>
<h1 style="text-align: center;">Graphic Era University Enquiry Form</h1>
<form>
<fieldset>
<legend style="text-align: center;"> Enquiry Form </legend>
<table>
Vashu Vashishtha BSC-IT(5 sem) 53

<tr>
<th> Name </th>
<td> <input type ="text" Placeholder="Enter your name "> </td>
</tr>
<tr>
<th> Email </th>
<td> <input type ="text" Placeholder="Enter your Email "> </td>
</tr>
<tr>
<th> Password</th>
<td> <input type ="password" Placeholder="Enter your password" required> </td>
</tr>
<tr>
<th> Phone Number </th>
<td> <input type ="tel" Placeholder="Enter your phone number "> </td>
</tr>
<tr>
<th>Select Gender</th>
<td>
<form>
<input type="radio" name="Gender" value="Male">Male
<input type="radio" name="Gender" value="Female">Female
<input type="radio" name="Gender" value="Other">Other
</form>
</td>
</tr>
<tr>
<th> Select Hobbies </th>
<td>
<form>
<input type="checkbox" name="Hobbies" value="Programming">Programming
<input type="checkbox" name="Hobbies" value="3D Modelling">3D Modelling
<input type="checkbox" name="Hobbies" value="Web Design ">Web Design
<input type="checkbox" name="Hobbies" value="computer games">computer games
</form>
</td>
</tr>
<tr>
<th> Program of interest </th>
<td>
<select required >
<option >select</option>
<option >BCA</option>
<option >MCA</option>
<option >BSC.IT</option>
<option >BSC.CS</option>
</select>
Vashu Vashishtha BSC-IT(5 sem) 53

</td>
</tr>
<tr>
<th>Your Message:</th>
<td><textarea id="message" name="message" rows="10" cols="50"
required></textarea></td>
</tr>
<tr>
<td><input type="submit" value="Login"></td>
<td><input type="Reset" value="clear"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

Output:-
Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 6: A Program to design your previous semester mark sheet.


Vashu Vashishtha BSC-IT(5 sem) 53

Objective :

Code:

<htmll>
<head>
<title>
MarkSheet
</title>
<style>
td,th{
text-align: center;
}
</style>
</head>
<body>
<p style="float: left; margin-left: 270px;"></p>
<h1 style="margin-left: 600px;">Graphic Era (Deemed to be) University</h1>
<h4 style="margin-left: 650px;">Bell Road, Clement Town Dehradun, Uttarakhand India -
248002</h4>
<h4 style="margin-left: 800px;">www.geu.ac.in</h4><br><br>
<h3 style="margin-left: 700px;">STATEMENT OF MARKS(PROVISIONAL)</h3>
<h3 style="margin-left: 540px;">B.SC - INFORMATION TECHNOLOGY - III SEMESTER
EXAMINATION (2022-23)</h3><br>
<p style="margin-left: 350px;"><b>Name of Student:</b> Vashu Vashishtha<b
style="margin-left: 550px;">Enrolment No:</b> GE-21220758</p>
<p style="margin-left: 350px;"><b> Father's Name :</b> Kapileshawer sharma<b
style="margin-left: 520px;">Roll No:</b> 2200758</p>
<table border="1" cellspacing="0" style="margin-left: 340px;">
<tr><th></th>
<th colspan="2">SUBJECT</th><th>CREDITS</th>
<th colspan="2">MID<br>SEMESTER<br>EXAM</th>
<th colspan="2">SESSIONAL<br>MARKS</th>
<th colspan="2">END<br>SEMESTER<br>EXAM</th>
<th>TOTAL<br>MARKS<br>OBTAINED</th>
<th>GRADE</th><th>GRADE<br>POINT</th> </tr>
<tr><th></th><th>CODE</th><th>NAME</th><th></th>
<th>Max.</th><th>Obt</th><th>Max.</th><th>Obt</th>
<th>Max.</th><th>Obt</th><th></th><th></th>
<th></th></tr>
<tr><th rowspan="6">Theory</th><td>TB1 401</td>
<td>Data Analytics using python programming</td>
<td>3</td><td>25</td><td>19</td><td>25</td>
<td>21</td><td>50</td><td>33</td><td>73</td>
<td>A</td><td>8</td></tr>
<tr><td>TB1 402</td>
<td>DataWare Housing and Mining</td>
Vashu Vashishtha BSC-IT(5 sem) 53

<td>3</td><td>25</td><td>15</td><td>25</td>
<td>19</td><td>50</td><td>19</td><td>53</td>
<td>B</td><td>6</td></tr>
<tr><td>TB1 403</td>
<td>Cryptography</td>
<td>3</td><td>25</td><td>13</td><td>25</td>
<td>22</td><td>50</td><td>16</td><td>51</td>
<td>B</td><td>6</td></tr>
<tr><td>TB1 404</td>
<td>Android Programming</td>
<td>4</td><td>25</td><td>14</td><td>25</td>
<td>18</td><td>50</td><td>22</td><td>54</td>
<td>B</td><td>6</td></tr>
<tr><td>TB1 405</td><td>Project Management and Information System</td>
<td>3</td><td>25</td><td>18</td><td>25</td>
<td>22</td><td>50</td><td>33</td><td>73</td>
<td>A</td><td>8</td></tr>
<tr><td>TB1 406</td><td>Career Skills - I</td>
<td>2</td><td>25</td><td>08</td><td>25</td>
<td>17</td><td>50</td><td>41</td><td>66</td>
<td>A</td><td>8</td></tr>
<tr><th rowspan="4">Practical</th><td>PB1 301</td>
<td>Database Analytics and python Lab</td><td>2</td>
<td>25</td><td>16</td><td>25</td><td>21</td>
<td>50</td><td>32</td><td>69</td><td>A</td>
<td>8</td></tr>
<tr><td>PB1 302</td><td>Android Programming Lab</td>
<td>2</td><td>25</td><td>15</td><td>25</td>
<td>21</td><td>50</td><td>22</td><td>58</td>
<td>B+</td><td>7</td></tr>
<tr><td>SB1 301</td><td>Seminar</td>
<td>1</td><td>-</td><td>-</td><td>-</td>
<td>-</td><td>100</td><td>50</td><td>50</td>
<td>B</td><td>6</td></tr>
<tr><td>GP 301</td><td>General Proficiency</td>
<td>1</td><td>-</td><td>-</td><td>-</td>
<td>-</td><td>100</td><td>88</td><td>88</td>
<td>O</td><td>10</td></tr></table><br><br>
<p style="margin-left: 350px;"><b>Result:</b> Pass</p>
<p style="margin-left: 350px;"><b>Total No. of Credits registered:</b> 25</p>
<p style="margin-left: 1000px;"> *25110130300179*</p>
<p style="margin-left: 350px;"><b>Total No. of Credits earned:</b> 25</p>
<p style="margin-left: 350px;"><b>SGPA:</b> 6.96</p>
<p style="margin-left: 350px;"><b>CGPA:</b></p>
<p style="margin-left: 700px;"><b>INSTRUCTION</b></p>
<p style="margin-left: 350px;">1. This is internet generated document and cannot be
used for any legal purpose.
Vashu Vashishtha BSC-IT(5 sem) 53

<br>2. Original Marks Sheet will be issued only once. For issue of Duplicate marks Sheet,
the University office may be contacted.
<br>3. The Candidate will be declared pass by securing at least 40% marks by taking into
account Mid Term Exam along with Sessional & End Term Marks in aggregate of each theory
paper. However, in practical, it is mandatory to obtain at least 40% marks in Mid Term & End
Term exam separately.
<br>4. Candidate will be declared pass in a semester if he/she passes in all theory and
practical subjects.
<br>5. (i) A Candidate may be awarded grace marks up to a maximum of 10 marks
without any restriction.</p>
</body>
</html>

Output:-

Problem statement 7: A Program to implement pseudo elements in HTML ?


Objective:

Code:
<html>
<head>
<style>
body{
text-align: center;
Vashu Vashishtha BSC-IT(5 sem) 53

}
h1::first-letter {

font-size: 2cm;
color: red;
text-shadow: 5px 8px 9px green;
}
h1{
color: blue;
}
h2::first-line {

font-size: 1cm;
color: red;
text-shadow: 5px 8px 9px green;
}
h3::after {

content:"*****";
color:red;
}
</style>
</head>
<body>
<h2> This is an example of ::first-letter pseudo-element. </h2>
<h1> Welcome students </h1>
<h3> Welcome to my page </h3>
</body>
</html>

Output:-
Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 8: A Program to implement following CSS properties in HTML


Vashu Vashishtha BSC-IT(5 sem) 53

a. CSS Background
b. CSS Padding
c. Word wrap
d. White Space
Objective:
Code:
<html>
<head>
<title>CSS Properties Example</title>
<style>
.background-example {
background-color: blue;
color: white;
padding: 20px;
}
.padding-example {
padding: 20px;
border: 2px solid blue;
}
.word-wrap-example {
width: 100px;
word-wrap: break-word;
border: 2px solid blue;
}
.white-space-example {
white-space: pre;
border: 2px solid blue;
}
</style>
</head>
<body>
<h1>CSS Background Example</h1>
<div class="background-example">
This is a div with a background color. </div>
<h1>CSS Padding Example</h1>
<div class="padding-example">
This is a div with padding. </div>
<h1>Word Wrap Example</h1>
<div class="word-wrap-example">
Thisisaverylongwordthatneedstobebrokenintomultiplelines. </div>
<h1>White Space Example</h1>
<div class="white-space-example">
This is an example with extra spaces. </div>
</body>
</html>

Output:
Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 9: A Program to implement display property using external css.


Vashu Vashishtha BSC-IT(5 sem) 53

Objective:

Code:
Html code:-

<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Display Property Example</title>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</body>
</html>

Css code:-

body {
font-family: Arial, sans-serif;
}

.box {
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
margin: 10px;
display: inline-block;
}

Output:-

Problem statement 10: A Program to implement float and visibility property using internal
css.
Vashu Vashishtha BSC-IT(5 sem) 53

Objective:

Code:
<html>
<head>
<title>Float and Visibility Example</title>
<style>
.a {
width: 100%;
overflow: hidden;
}
.b {
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
margin: 10px;
float: left;
visibility: visible;
}
.c {
visibility: hidden;
}
</style>
</head>
<body>
<div class="a">
<div class="b">Box 1</div>
<div class="b">Box 2</div>
<div class="c">Box 3 (hidden)</div>
</div>
</body>
</html>

Output:-

Problem statement 11: A Program to design 8 paragraphs with different border style.
Objective:
Vashu Vashishtha BSC-IT(5 sem) 53

Code:
<html>
<head>
<title>Paragraphs with Different Border Styles</title>
<style>
.border-1 {
border: 2px solid #3498db;
padding: 10px;
}
.border-2 {
border: 2px dashed #e74c3c;
padding: 10px;
}
.border-3 {
border: 2px dotted #2ecc71;
padding: 10px;
}
.border-4 {
border: 2px double #f39c12;
padding: 10px;
}
.border-5 {
border: 2px groove #9b59b6;
padding: 10px;
}
.border-6 {
border: 2px ridge #34495e;
padding: 10px;
}
.border-7 {
border: 2px inset #c0392b;
padding: 10px;
}
.border-8 {
border: 2px outset #ecf0f1;
padding: 10px;
}
</style>
</head>
<body>
<p class="border-1">Paragraph 1</p>
<p class="border-2">Paragraph 2</p>
<p class="border-3">Paragraph 3</p>
<p class="border-4">Paragraph 4</p>
<p class="border-5">Paragraph 5</p>
<p class="border-6">Paragraph 6</p>
Vashu Vashishtha BSC-IT(5 sem) 53

<p class="border-7">Paragraph 7</p>


<p class="border-8">Paragraph 8</p>
</body>
</html>

Output:-

Problem statement 12: Develop a XML application to get details of Students name, course,
roll number, DOB, and Mobile number
Vashu Vashishtha BSC-IT(5 sem) 53

Objective:

Code:

<students>
<student>
<name>Vashu Vashishtha</name>
<course>BSC IT</course>
<roll_number>53</roll_number>
<dob>8-02-2002</dob>
<mobile_number>6377074337</mobile_number>
</student>

<student>
<name>abc</name>
<course>Btech</course>
<roll_number>01</roll_number>
<dob>1-01-2002</dob>
<mobile_number>9876543210</mobile_number>
</student>

</students>

Output:-
Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 13: Develop a XML File to get details of employee name, salary and
designation using internal and external DTD
Objective:

Code:

<employees>
<employee>
<name>Vashu Vashishtha</name>
<salary>500000</salary>
<designation>Software Engineer</designation>
</employee>
<employee>
<name>aashi goyal</name>
<salary>60000</salary>
<designation>Project Manager</designation>
</employee>
<employee>
<name>charvi mittall</name>
<salary>80000</salary>
<designation>Graphic Designer </designation>
</employee>
</employees>

Output:-
Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 14: Write a JavaScript code to check number is prime or not and input is
taken by HTML text field.
Objective:

Code:
Vashu Vashishtha BSC-IT(5 sem) 53

<html>
<head>
<title>Prime Number Checker</title>
<script>
function checkPrime() {
const numberInput = document.getElementById('a');
const number = parseInt(numberInput.value);
const resultText = document.getElementById('b');
if (isPrime(number)) {
resultText.textContent='Prime';
}else{
resultText.textContent='Not Prime';
}
}

function isPrime(num) {
for (let i = 2; i < num; i++) {
if (num % i === 0) {
return false;
}
}
return num > 1;
}
</script>
</head>
<body>
<h2>Prime Number Checker</h2>
Enter a number:<input type="text" id="a">
<button onclick="checkPrime()">Check Prime</button>
<p id="b"></p>
</body>
</html>

Output:-
Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 15: Write a JavaScript code to copy one text field value into another text
Field
Objective:
Vashu Vashishtha BSC-IT(5 sem) 53

Code:
<html>
<head>
<script>
function copy(a){
a.Field2.value=a.Field1.value;
}
</script>
<body>
<form>
<b>First Text:</b><input type="text" name="Field1">
<br><br>
<b>Second Text:</b><input type="text" name="Field2">
<br><br>
<input type="button" value="copy" onclick="copy(this.form)">
</form>
</body>
</head>
</html>

Output:-
Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 16: Write a JavaScript code to validate whether username and password
is correct or not and also validate that no field should left bank.
Objective:

Code:
<html>
<head>
<title>
TASK
</title>
<script>
function validation(){
var name=document.getElementById("username").value;
var Password=document.getElementById("username").value;
if(name==""){
alert("Enter your name Properly....!!");
return false;
}
if(Password=="" || Password.length<=5){
alert("Enter your Password Properly....!!");
alert("password will minimum 5 character....!!");
return false;
}
}
</script>
</head>
<body>
<form>
Enter your Name : <input type="text" placeholder="Enter your Name"
id="username"><br><br>
Enter your Password : <input type="password" placeholder="Enter your Password"
id="Password"><br><br>
<input type="submit" name="submit" onclick="validation()">&nbsp; &nbsp;
<input type="reset" value="Clear">
</form>
</body>
</html>
Vashu Vashishtha BSC-IT(5 sem) 53

Output:-
Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 17: Write a JavaScript code to change size of image.


Objective:

Code:
<html>
<head>
<script>
function MAX(){
var a = document.getElementById("ab");
a.style.height="300px";
a.style.width="300px";
}
function MIN(){
var a = document.getElementById("ab");
a.style.height="100px";
a.style.width="100px";
}
</script>
</head>
<body>
<img src="Fdperfil_.png" id="ab" height="200px" width="200px">
<br> <br> <br>
<input type="button" value="MAX" onclick="MAX()">
<input type="button" value="MIN" onclick="MIN()">
</body>
</html>

Output:-
Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 18: Write a JavaScript to change the color of a paragraph.


Objective:

Code:
<html>
<head>
<script>
function change(){
var ab = document.getElementById("a");
ab.style.color="red";
}
</script>
</head>
<body>
<p id="a">Vashu Vashishtha</p>
<input type="button" value="change" onclick="change()">
</body>
</html>

Output:-
Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 19: Write a PHP code to save student id, name, and contact number.
Objective:

Code:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "student_detail";
$conn = new mysqli($servername, $username, $password, $database); if ($conn-
>connect_error)
{die("Connection failed: " . $conn->connect_error);
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$studentId = $_POST['student_id'];
$studentName = $_POST['name_']; $contactNumber = $_POST['phone_no']; if
(empty($studentId) || empty($studentName) || empty($contactNumber)) { echo "All fields
are required.";
} else {
$sqlInsert = "INSERT INTO student (student_id, name_, phone_no) VALUES
(?, ?, ?)";
$stmt = $conn->prepare($sqlInsert);
$stmt->bind_param("ssi", $studentId, $studentName, $contactNumber); if
($stmt->execute()) { echo "Student information saved successfully.";
} else {echo "Error saving student information: " . $stmt->error;}
$stmt->close();}}
$conn->close();?>

<html><head><title> </title>
</head>
<body>
<form action="" method="post">
<p>Student ID =
<input type="text" name="student_id" placeholder="Enter student ID">
</p>
<p>Name =
<input type="text" name="name_" placeholder="Enter your name">
</p>
<p>Phone No. =
<input type="tel" name="phone_no" placeholder="Enter phone no">
</p>
<input type="submit" name="save" value="Submit">
</form>
</body>
</html>
Vashu Vashishtha BSC-IT(5 sem) 53
Vashu Vashishtha BSC-IT(5 sem) 53

Problem statement 20: Write a PHP code to update student contact number if
student id=1001.
Objective:

Code:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "student_detail";
$conn = new mysqli($servername, $username, $password, $database);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
} if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$studentIdToUpdate = 1001;
$newContactNumber = $_POST['new_contact_no'];
if (empty($newContactNumber)) {
echo "New contact number is required.";
} else {
$sqlUpdate = "UPDATE student SET phone_no = ? WHERE student_id = ?";
$stmt = $conn->prepare($sqlUpdate);
$stmt->bind_param("si", $newContactNumber, $studentIdToUpdate);
if ($stmt->execute()) {
echo "Contact number updated successfully.";
} else { echo "Error updating contact number: " . $stmt->error;
}
$stmt->close();}}
$conn->close();?>

<html><head><title> </title></head>
<body>
<form action="" method="post">
<p>New Contact No. =
<input type="tel" name="new_contact_no" placeholder="Enter new contact number"></p>
<input type="submit" name="update" value="Update Contact Number">
</form></body>
</html>
Vashu Vashishtha BSC-IT(5 sem) 53

Output:-

You might also like