Web Technologies Practical Exam-Mohammad Afzal - 03511402020

Practical Exam
Web Technologies
Practical-1
Aim:Create a Registration Form using input types ,text area,labels etc.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
</head>
<body>
<img src="ipuregistration.PNG" width="1000" align="right">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<center>
<h1 align="center"><ins>Registration Form</ins></h1>
<form action="backend.php">
<label for="Name">Name:</label>
<input type="text" id="Name" maxlength="20" autofocus required>
<br>
<br>
<label for="Gender">Gender:</label>
MOHAMMAD AFZAL
03511402020
<label for="Male">Male</label>
<input type="radio" id="Male" name="Gender" required>
<label for="Female">Female</label>
<input type="radio" id="Female" name="Gender" required>
<label for="Transgender">Transgender</label>
<input type="radio" id="Transgender" name="Gender" required>
<br>
<br>
<label for="Eligibility">Are You 18+?</label>
<input type="checkbox" id="Eligibility" checked>
<br>
<br>
<label for="Age">Age (Between 18-25):</label>
<input type="number" min="18" max="25">
<br>
<br>
<label for="Id">Id:</label>
<select id="Id">
<option>Aadhar Card</option>
<option>PAN Card</option>
<option>Driving License</option>
</select>
<br>
<br>
<label for="InputId">Enter Id:</label>
<input type="text" id="InputId">
<br>
<br>
<label for="Mobile">Mobile Number :</label>
<input type="tel" id="Mobile">
<br>
MOHAMMAD AFZAL
03511402020
<br>
<label for="Email">Email Id</label>
<input type="email" id="Email">
<br>
<br>
<label for="DOB">Date of Birth(DOB):</label>
<input type="Date" id="DOB" required>
<br>
<br>
<label for="Fathers Name">Fathers Name:</label>
<input type="text" id="FName" required>
<br>
<br>
<label for="Mothers Name">Mothers Name:</label>
<input type="text" id="MName" required>
<br>
<br>
<fieldset>
<legend>Intermediate Examination</legend>
<label for="ISchoolName">School Name:</label>
<input type="Text" name="ISchoolName" id="ISchoolName">
<br>
<br>
<label for="IEducation Board">Board:</label>
<select id="IEducation Board">
<optgroup label="Private Board">
<option>CBSE</option>
<option>ICSE</option>
<option>ISC</option>
</optgroup>
<optgroup label="State Board">
MOHAMMAD AFZAL
03511402020
<option>UP Board</option>
<option>MP Board</option>
<option>Delhi Board</option>
<option>Punjab Board</option>
<option>Haryana Board</option>
</optgroup>
</select>
<br>
<br>
<label for="IRollNo">RollNo:</label>
<input type="text" name="IRollNo" id="IRollNo" maxlength=15 required>
<br>
<br>
<label for="IGrade">Percentage:</label>
<input type="text" name="IGrade" id="IGrade" required>
<br>
<br>
<label for="Stream">Stream:</label>
<input TYPE="TEXT" name="Stream" id="Stream" maxlength="20">
</fieldset>
<br>
<br>
<fieldset>
<legend>HighSchool Examination</legend>
<label for="HSchoolName">School Name:</label>
<input type="Text" name="HSchoolName" id="HSchoolName">
<br>
<br>
<label for="HEducation Board">Board:</label>
<select id="HEducation Board">
<optgroup label="Private Board">
MOHAMMAD AFZAL
03511402020
<option>CBSE</option>
<option>ICSE</option>
<option>ISC</option>
</optgroup>
<optgroup label="State Board">
<option>UP Board</option>
<option>MP Board</option>
<option>Delhi Board</option>
<option>Punjab Board</option>
<option>Haryana Board</option>
</optgroup>
</select>
<br>
<br>
<label for="HRollNo">RollNo:</label>
<input type="text" name="MRollNo" id="HRollNo" maxlength=15 required>
<br>
<br>
<label for="HGrade">Percentage:</label>
<input type="text" name="HGrade" id="HGrade" required>
<br>
<br>
<label for="Subject">Subjects:</label>
<input TYPE="TEXT" name="Subject" id="Subject" maxlength="100" required>
</fieldset>
<br>
<br>
<label for="About">Write About Yourself</label>
<textarea rows="5" cols="20" maxlength="300" id="About">
</textarea>
<br>
MOHAMMAD AFZAL
03511402020
<br>
<fieldset>
<legend>Upload Documents</legend>
<label for="Upload Marksheet">Upload Intermediate Marksheet:</label>
<input type="file" id="Upload Marksheet" required>
<br>
<br>
<label for="Upload Marksheet">Upload HighSchool Marksheet:</label>
<br>
<br>
<label for="Upload Marksheet">Upload Photo:</label>
<br>
<br>
<label for="Upload Marksheet">Upload Signature:</label>
</fieldset>
<br>
<br>
<label for="Password">Create Password :</label>
<input type="password" name="Password" id="Password" required>
<br>
<br>
<label for="Confirm Password">Confirm Password:</label>
<input type="password" name="Confirm Password" id="Confirm Password" required>
<br>
<br>
<label for="submit" ></label>
<button type="submit" id="submit" title="Submit"><img src="arrow.png" width="50"
vspace="10"></button>
<label for="reset" ></label>
MOHAMMAD AFZAL
03511402020
<input type="reset" name="reset" id="reset">
</form>
</center>
</body>
</html>
Output:
MOHAMMAD AFZAL
03511402020
MOHAMMAD AFZAL
03511402020
Practical-2
Aim: Write program to calculate the sum of two numbers using Javascript.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ques_17</title>
<style>
body{
background-color: rgb(255, 38, 0);
}
#btn{
width:200px;
height:50px;
cursor:pointer;
font-size:20px;
}
#btn:hover{
}
</style>
</head>
<body>
<center>
<h1 style="text-decoration:underline">Finding Sum</h1>
<label for="num1">Enter first number:</label>
MOHAMMAD AFZAL
03511402020
<input type="text" id="num1" name="num1" >
<br>
<br>
<label for="num2">Enter second number:</label>
<input type="text" id="num2" name="num2" >
</p>
<button id="btn" onclick="myFunction()">Click to Find Sum</button>
<p id="demo" style="font-size:30px;"></p>
<script>
function myFunction() {
var y = parseInt(document.getElementById("num1").value);
var z = parseInt(document.getElementById("num2").value);
var x = y + z;
document.getElementById("demo").innerHTML = "Sum =" + x;
}
</script>
</center>
</body>
</html>
Output:
MOHAMMAD AFZAL
03511402020
Practical-3
Aim : Create a HTML Page using basic Text Formatting Tags.
Code:
<html>
<head>
<title>Text Formatting Tags</title>
</head>
<body>
<b>This is bold tag</b>
<hr>
<i>This is italic tag</i>
<hr>
<strong>This is strong tag</strong>
<hr>
<small>This is small tag</small>
<hr>
<em>This is emphasis tag</em>
<hr>
<p>This is delete <del> new </del> tag</p>
<hr>
<p><ins>This is insert line tag </ins></p>
MOHAMMAD AFZAL
03511402020
<hr>
<p>This is subscript Tag</p>
H<sub>2</sub>+O=H<sub>2</sub>O
<hr>
<p>This is superscript Tag</p>
ax<sup>3</sup>+bx<sup>2</sup>cx+d=0</body>
</html>
Output:
MOHAMMAD AFZAL
03511402020
Practical-4
Aim: Write program in JavaScript print Number Pattern using for loop.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ques_20</title>
</head>
<body>
<h1 style="text-align:center;font-size:30px;font-family:'Times New Roman', Times,
serif;text-decoration:underline;">Printing Number Pattern</h1>
<script>
for(var a=1;a<=10;a++)
{
for(var b=1 ; b<=a;b++)
{
document.write(b);
}
MOHAMMAD AFZAL
03511402020
document.write("<br/>");
}
</script>
</body>
</html>
Output:
Practical -5
MOHAMMAD AFZAL
03511402020
Aim: Create a webpage for Train Timing Schedule.
Code:
<html>
<body>
<h1 style="text-align:center;text-decoration:underline">Train Timing Schedule</h1>
<center>
<table border=2>
<tr>
<td rowspan=2 style="background-color:grey">
<h1>Train Name</h1>
</td>
<h1>Starting place</h1>
</td>
<h1>Destination Place</h1>
</td>
<h1>Fare</h1>
</td>
<td colspan=2 style="background-color:grey">
<h1>
<center>Time</center>
</h1>
</td>
</tr>
<tr>
<td>Arrival</td>
<td>Departure</td>
MOHAMMAD AFZAL
03511402020
</tr>
<tr>
<td>kamayani exp</td>
<td>Dadar_varanasi</td>
<td>1500 km.</td>
<td>5000 Rs.</td>
<td>12:00pm<br>28-08-2010</td>
<td>2:00pm<br>30-08-2010</td>
</tr>
<tr>
<td>Dacken exp</td>
<td>Mumbai_pune</td>
<td>300 km.</td>
<td>50 Rs.</td>
<td>3:00pm</td>
<td>7:00pm</td>
</tr>
<tr>
<td>Lonawala exp</td>
<td>pune_lonawala</td>
<td>150 km.</td>
<td>25 Rs.</td>
<td>12:00pm</td>
<td>1:30pm</td>
</tr>
<tr>
<td>CHANAY exp</td>
<td>Dadar_chanay</td>
<td>1500 km.</td>
<td>5000 Rs.</td>
<td>12:00pm<br>28-08-2010</td>
MOHAMMAD AFZAL
03511402020
<td>2:00pm<br>30-08-2010</td>
</tr>
<tr>
<td>kamayani exp</td>
<td>Varanasi_dadar</td>
<td>1500 km.</td>
<td>5000 Rs.</td>
<td>12:00pm<br>28-08-2010</td>
<td>2:00pm<br>30-08-2010</td>
</tr>
<tr>
<td>Pawan exp</td>
<td>Dadar_patna</td>
<td>1500 km.</td>
<td>5000 Rs.</td>
<td>12:00pm<br>28-08-2010</td>
<td>2:00pm<br>30-08-2010</td>
</tr>
</table>
</center>
</body>
</html>
Output:
MOHAMMAD AFZAL
03511402020
MOHAMMAD AFZAL
03511402020

Web Technologies Practical Exam-Mohammad Afzal - 03511402020

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technologies Practical Exam-Mohammad Afzal - 03511402020

Uploaded by

Copyright:

Available Formats

Practical Exam

Aim:Create a Registration Form using input types ,text area,labels etc.

<title>Text Formatting Tags</title>

<b>This is bold tag</b>

<i>This is italic tag</i>

<strong>This is strong tag</strong>

<small>This is small tag</small>

<em>This is emphasis tag</em>

<p>This is delete <del> new </del> tag</p>

<p><ins>This is insert line tag </ins></p>

<p>This is subscript Tag</p>

<p>This is superscript Tag</p>

You might also like