WD Cie2

Enrollment.
no:202203103520099
Practical 1
Aim:Use the following tags with their attributes as mentioned to create the HTML page:
html,head,title,body,bgcolor,text,font,color,p,tt,em,b,i,u,pre,sub,sup,h1 to
h6,align,he,size,img,src,alt,width,height.
Input:
<html>
<head>
<title>html web page</title>
</head>
<body style="background-color:tomato">
<h1>HTML Document Structure</h1>
<p style="color:blue">HTML Document Structure</p>
<tt>tt tag BPKM</tt><em>EM tagCGPIT</em><b>Uka Tarsadia University
(UTU)</b><i>CGPIT</i><u>Computer.Information Technology</u>
<pre>CGPIT UTU
Using pre tag CGPIT
UTU
</pre>x<sup>2</sup><br>
<img src="file:///D:/images/photo/Image__95592_avengers-endgame_8387_1080x1920.jpg"
alt="network is slow" width="220" height="350"><br>x<sub>2</sub>
</body>
<div align="right"><b>All headers CGPIT</b></div>
<body>
<h1>CGPIT</h1>
<h2>CGPIT</h2>
<h3>CGPIT</h3>
<h4>CGPIT</h4>
<h5>CGPIT</h5>
<h6>CGPIT</h6>
</body>
<hr><font size="6">CGPIT Using font tag</font>
</html>
Output:
Web Designing(IT4014)
Enrollment.no:202203103520099
Practical 2
Aim:Introduce HTML and its basic tags and write a HTML code to display the given list and
hyperlink using following tags and attributes: Li,ol,ul,dl,type,a,href,target
Input:
<html>
<head>
<title>practical2</title>
</head>
<body>
<p><b>HTML List:Ordered,Unordered & Definition List</b></p>
<hr><p>Following is the List of proposed Student activities like:</p>
<ol>
<li>Develop programs related with unit vice topics in Computer laboratory.</li>
<li>Develop any module of to be useful in real life application.</li>
<li>Multimedia presentation of module developed by students.</li>
</ol><hr>
<p>List of Software/Learning Websites</p>
<ul>
<li><u>ASPTutorial-W3Schools</u></li>
<ol type="I">
<li><a href="https://www.w3schools.com/asp/default.asp"
target="_blank">www.w3schools.com/asp</a></li>
<li><a href="https://www.tutorialspoint.com/asp.net/index.htm"
target="_blank">www.tutorialspoint.com/asp</a></li>
</ol>
<li><u>Classic ASP Tutorials & Articles- Web Wiz</u></li>
<a href="https://www.webwiz.net/kb/" target="_blank">www.webwiz.co.uk-knowledgebase</a>
<li><u>HTML TUtorial-W3schools</u></li>
<a href="https://www.w3schools.com/html/default.asp"
target="_blank">www.w3schools.com/html</a>
<li><u>CSS Tutorial</u></li>
<a href="https://www.csstutorial.net/" target="_blank">www.csstutorial.net</a>
<li><u>VBScript Tutorial - Tutorials Point</u></li>
<ul>
<li><a href="https://www.w3schools.com/asp/default.asp"
target="_blank">www.w3schools.com/asp</a></li>
<li><a href="https://www.tutorialspoint.com/asp.net/index.htm"
target="_blank">www.tutorialspoint.com/asp</a></li>
</ul>
</ul><hr>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>XML</dt>
<dd>eXtensible Markup Language</dd>
</dl>
</body>
</html>
Output:
Practical 3
Aim:Write a HTML code to display the given table using following tags and attributes:
table, tr, td, border, th, colspan, rowspan, cellpadding, cellspacing, vspace, hspace,
caption
Input:
<html>
<head>
<title>sohail(Time Table)</title>
<style>
table{ border: 2px solid black;}
th,td{ border: 1px solid black;}
</style>
</head>
<body><hr>
<h3 align="center"><b>Chhotubhai Gopalbhai patel Institute of Technology</b></h3><hr>
<h3 align="center"><b>Department of Computer Engineering/AI&DS(2022-2023)</b></h3><hr>
<h4 align="center"><b>Time Table for:B.Tech(Semester:4)(Div C)(F-002)</b></h4><hr>
<table align="center">
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td>8:30am to 9:30am</td>
<td>DM</td>
<td>Python</td>
<td>DM</td>
<td>OS</td>
<td>OS</td>
<td>Python(T)</td>
</tr>
<tr>
<td>9:30am to 10:30am</td>
<td>MSD</td>
<td>OS</td>
<td>Python</td>
<td>ME</td>
<td>Os</td>
<td>DM(T)</td>
</tr>
<tr>
<td>10:30am to 10:45am</td>
<td colspan="6", align="center">Break</td>

</tr>
<tr>
<td>10:45am to 11:45am</td>
<td>DM</td>
<td rowspan="2">B1:OS Lab 7,8<br> B2: Python Lab 12,13</td>
<td rowspan="2">B1:WD Lab 15,16<br> B2: MSD Lab 9,10</td>
<td>MSD</td>
<td rowspan="2">B1:MSD Lab 9,10 <br>B2: MSD Lab 23,24</td>
<td>MSD(T)</td>
</tr>
<tr>
<td>11:45am to 12:45pm</td>
<td></td>
<td></td>
<td>OS(T)</td>
</tr>
<tr>
<td>12:45am to 1:30pm</td>
<td colspan="6", align="center">Break</td>
</tr>
<tr>
<td>1:30pm to 2:30pm</td>
<td>Python</td>
<td>MSD</td>
<td>CPI</td>
<td rowspan="2">B1:Python Lab 9,10 <br> B2: OS Lab 5,6</td>
<td>DM</td>
<td></td>
</tr>
<tr>
<td>2:30pm to 3:30pm</td>
<td></td>
<td>MSD</td>
<td>CPI</td>
<td>Python</td>
<td></td>
</tr>
</table>
</body>
</html>
Output:
Practical 4
Aim: Write a HTML code to display the given form using following tags and attributes:
form, input, text, password, text area, select, checkbox, radio, file, value, selected, placeholder,
button, submit, reset, action, method, name, id.
Input:
<html>
<title>form</title>
<head>
<h1 style="color:red">Employee Registration Form</h1>
</head>
<body>
<form>
<input type="radio" id="Mr" name="gender" value="Mr">
<label for="Mr">Mr.</label>
<input type="radio" id="Mrs" name="gender" value="Mrs">
<label for="Mrs">Mrs.</label>
<input type="radio" id="Ms" name="gender" value="Ms">
<label for="Ms">Ms.</label><br>
<div text-align:"left">
<label for="fname">First name</label>
</div>
<input type="text" id="fname" name="fname" placeholder="Enter your first name"><br>
<label for="lname">Last name </label>
</div>
<input type="text" id="lname" name="lname" placeholder="Enter your last name"><br>
<div text-align:"left"
<label for="maddress1">Mail Address1</label>
</div>
<input type="text" id="maddress1" name="maddress1" placeholder="Enter your Address"><br>
<label for="maddress2">Mail Address2</label>
</div>
<input type="text" id="maddress2" name="maddress2" placeholder="Enter your Address"><br>
<label for="City">City</label>
</div>
<input type="text" id="City" name="City" placeholder="Enter your City"><br>
<label for="State">State</label>
</div>
<select name="State" id="State">
<option value="Gujarat">Gujarat</option>
<option value="rajasthan">rajasthan</option>
<option value="maharashtra">maharashtra</option>
<option value="Assam">Assam</option>
<option value="haryana">haryana</option>
<option value="manipur">manipur</option>
</select><br>
<label for="Zip">Zip</label>
</div>
<input type="text" id="zip" name="zip" placeholder="Enter your Zipcode"><br>
<form action="/action_page.php">
<label for="upload file">upload file</label>
</div>
<input type="file" id="myFile" name="filename">
</form>
<label for="E-mail">E-mail</label>
</div>
<input type="text" id="E-mail" name="E-mail" placeholder="@gmail.com"><br>

<div>
<label for="phone">Mobile</label>
</div>
<input type="tel" id="phone" name="phone" placeholder="+91" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"
required><br><br>
<label for="Language known">Language known</label>
</div>
<input type="checkbox" id="language" name="language" value="Gujarati">
<label for="language">Gujarati</label><br>
<input type="checkbox" id="language2" name="language2" value="English">
<label for="language2"> English</label><br>
<input type="checkbox" id="language3" name="language3" value="Hindi">
<label for="language3">Hindi</label><br>
<input type="checkbox" id="language4" name="language4" value="Urdu">
<label for="language4">Urdu</label><br>
<label for="add">Additional Information</label>
</div>
<textarea id="add" name="add" rows="4" cols="50">Optional</textarea>
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="reset">
</form>
</body>
</html>
Output:
Practical 5
Aim: Write a code to implement the given properties and selectors using all three types of CSS -
internal, external and inline: id, class, pseudo-class selectors, background color, background images,
manipulating text, text decoration, text indentation, text case, font, border and boxes, marging,
padding, list, positioning, z-index, float.
Divide a web page using frameset and div tag: three equal horizontal partitions and three equal vertical
partitions
Input:
<html>
<head>
<link rel="stylesheet" href="pra5.css"/>
<style>
tr:hover {background-color: rgb(148, 63, 228);}
td:hover{background-color: aqua;}
tr:nth-child(even){background-color: chocolate}
tr:nth-child(odd){background-color:cornsilk}
th,td { text-align: center; padding: 10px;}
table {border-collapse: collapse;}
body { background-image: url("CGPIT.png");
background-repeat: no-repeat;}
</style>
</head>
<body>

<h1 align="center" style="color:blue; small {font-variant: small-caps; }
font-weight: bold; font-size: 30px; font-style: initial;"> TIME TABLE</h1>
<table style="border: 7px solid black;" border="10" cellspacing="0" align="center" >
<tr style="color: papayawhip;">
<td align="center" height="50"
width="100" style="background-color: darkslategrey;">
<b><br>Time</br></b></div>
</td>
width="150" ><div id="myDiv" >
<b><br>Monday</b></div>
</td>
<td align="center" height=""
><div id="myDiv" >
<b><br>Tuesday</b></div>
</td>
><div id="myDiv" >
<b><br>Wednesday</b></div>
</td>
><div id="myDiv" >
<b><br>Thurasday</b></div>
</td>
><div id="myDiv" >
<b><br>Friday</b></div>
</td>
width="150"><div id="myDiv" >
<b><br>Saturday</b></div>
</td>
</tr>
<tr>
<td align="center" colspan><div id="time">8:30AM-9:30AM</div></td>
<td align="center" rowspan><div id="DM" >DM<br>(VP)</br></div></td>
<td align="center" rowspan><div id="py" >Python<br>(KBM)</br></div></td>
<td align="center" rowspan><div id="DM" >DM<br>(VP)</br></div></td>
<td align="center" rowspan><div id="OS" >OS<br>(BKP)</br></div></td>
<td align="center" rowspan><div id="OS" >OS<br>(DPD)</br></div></td>
<td align="center" rowspan="2"><div id="me">ME<br>JD Hall</br><br>(SN)</br></div></td>
</tr>
<tr>
<td align="center" rowspan><div id="msd">MSD<br>(MRS)</br></div></td>
<td align="center" rowspan><div id="py" >Python<br>(FAK)</br></div</td>
<td align="center" rowspan><div class="blank">-</div></td>
<td align="center" rowspan><div id="py" >Python<br>(FAK)</br></div></td>
</tr>
<tr>
<td align="center" colspan><div id="time">10:30AM-10:45PM</div></td>
<td align="center" colspan="6"></div></td>
</tr>
<tr>
<td align="center" rowspan><div id="DM" >DM<br>(CAN)</br></div></td>
<td align="center" rowspan="2"><div
id="lab">B1:OS(BKP)(L:7,8)<br>B2:Python(FAK)(L:12,13)</br></div></td>
id="lab">B1:WD(ARK)(L:15,16)<br>B2:MSD(SNP)(L:9,10)</br></div></td>
id="lab">B1:MSD(MRS)(L:9,10)<br>B2:WD(ARK)(L:23,24)</br></div></td>
<td align="center" rowspan><div id="msd">MSD(T)<br>(MRS)</br></div></td>
</tr>
<tr>
<td align="center" colspan><div id="time">11:45AM-12:45PM</div></td>
<td align="center" rowspan><div id="OS" >OS<br>(DPD)</br></div></td>
<td align="center" rowspan><div id="OS" >OS(T)<br>(BKP)</br></div></td>

</tr>
<tr>
<td align="center" colspan><div id="time">12:45PM-1:30PM</div></td>
<td align="center" colspan="6"></td>
</tr>
<tr>
<td align="center" rowspan><div id="py" >Python<br>(KBM)</br></div></td>
<td align="center" rowspan><div id="OS" >OS<br>(BKP)</br></div></td>
<td align="center" rowspan><div id="cpi">CPI<br>(URP)</br></div></td>
id="lab">B1:Python(FAK)(L:9,10)<br>B2:OS(DPD)(L:5,6)</br></div></td>
<td align="center" rowspan><div id="DM" >DM<br>(CAN)</br></div></td>
<td align="center" rowspan><div id="py" >Python(T)<br>(KBM)</br></div></td>
</tr>
<tr>
<td align="center" rowspan><div id="msd">MSD<br>(CHD)</br></div></td>
<td align="center" rowspan><div id="cpi">CPI<br>(URP)</br></div></td>
<td align="center" rowspan><div id="DM" >DM(T)<br>(VP)</br></div></td>
</tr>
</table><br>
<table style="border: 7px solid black;" border="10" cellspacing="0" align="center"></br>
<tr>
width="100" rowspan=2 style="background-color: darkred; color: antiquewhite;"><br>
<b>Subject Faculties</b></br>
</td>
width="140" style="padding-top: 30px; padding-bottom: 30px;"><div id="DM" class="tech" >
<b><br>DM:Discrete Mathematics</b></div>
</td>
width="140"><div id="OS" class="tech">
<b><br>FOS: Fundamentals of Operating Systems</b></div>
</td>
width="140"><div id="msd" class="tech">
<b><br>MSD:Microprocessor based on system Design</b></div>
</td>
width="140"><div id="py" class="tech">
<b><br>Python:Programming with Python</b></div>
</td>
width="140"><div id="me" class="tech">

<b><br>ME:Management and Enterpreneurship</b></div>
</td>
width="140"><div id="lab" class="tech">
<b><br>WD:Web Designing</b></div>
</td>
width="140"><div id="cpi" class="tech">
<b><br>CPI:Creativity,Problem solving and Innovation</b></div>
</td>
</tr>
<tr>
<td align="center"><div class="tech">CAN:Chandni Naik<br>VP:Viral Panchal</div></br></td>
<td align="center"><div class="tech">DPD:Dipak Dabhi<br>BKP:Bhavesh Patel</div></br></td>
<td align="center"><div class="tech">MRS:Mithila Sompura<br>CHD:Chintan
Desai</div></br></td>
<td align="center"><div class="tech">KBM:Kinjal Mistree<br>FAK:Fenil
Khatiwala</div></br></td>
<td align="center"><div class="tech">SN:Sudhakkar Nakka</div><br></br></td>
<td align="center"><div class="tech">ARH:Dr.Ankit Kharwar<br>CAN:Chandni
Naik</div></br></td>
<td align="center"><div class="tech">URP:Urvin Patel</div><br></br></td>
</tr>
</table>
</body>
</html>
Pra5.css
body {background-color: lightblue; background-image: url("cgpit.jpeg"); background-size: 150px;
background-repeat: no-repeat; margin: 50px;
background-position: left top; margin-left: 100px; background-attachment: fixed;}
#myDiv {background-color: darkred; color: blanchedalmond; font-size: large; padding: 15px;}
Output:
Practical 7
Aim:a) Write a JavaScript code to perform the following tasks:
1) Take input from prompt box and calculate factorial of the number using while loop
2) Display the result of factorial using alert box
3) Sort the array in descending order using for loop
b) Create a simple calculator for addition, multiplication and division using switch case
Input:
<html>
</head>
<body>
<script type="text/javascript">
var input = prompt("Enter the number to get factorial of: ");
var result = input;
for(var i=1;i < input;i++){
result = i * result;
}
document.write("The factorial no. is "+result);
</script>
</body>
</html>
Output:
b)
Input:
<html>
<head>
<script>
var n = parseInt(prompt("Enter the number to get factorial of: "));
var i=1;
while(n>=1)
{
i=i*n;
n--;
}
alert(i);
console.log(i);
document.getElementById("sohail").innerHTML="sohail";
</script>
</head>
<body>
<label id="sohail">khan</label>
</body>
</html>
Output:
c)
input:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function sortArray(arr) {
let length = arr.length;
for (let j = 0; j < length - 1; j++) {
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
j = -1;
}
}
return arr;
}
let arr = [25, 12, 2, 58, 72, 74, 79, 35];
document.write("Original array:[" + (arr).join(",") + "]<br>");
arr = sortArray(arr);
document.write("Sorted Array:[" + arr.join(",") + "]<br>");
</script>
</head>
<body>
</body>
</html>
Output:
Practical 8
Aim: Write a code using JavaScript for validation of form to perform the given tasks:
a) No input type must be blank or unselected
b) Text input like name must not have numbers
c) Text input like phone must not have alphabets
d) Text input like zip must be of length six
e) Email entered must be of given pattern
f) Mail Address 1 must be different from Mail address 2
Input:
<html>
<head>
<title> Practical - 4 </title>
<link rel="stylesheet" href="style.css">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-image: url("icon.jpg");
background-size: 462px;
background-size: 1300px;
backdrop-filter: blur(5px);
}
.form {
margin: 10px 250px;
padding: 10px;
border: 2px solid black;
}
td {
padding-top: 10px;
}
.sub {
transition-duration: 0.4s;
color: blue;
background-color: white;
border: 2px solid blue;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.sub:hover {
color: white;
background-color: rgb(59, 59, 221);
}
.reset {
margin-left: 20px;
cursor: pointer;
transition-duration: 0.4s;
color: grey;
border: 2px solid gray;
padding: 10px 20px;
border-radius: 5px;
}
.reset:hover {
color: white;
background-color: grey;
}
.title {
color: rgb(209, 19, 19);
}
.states {
padding: 5px 5px;
border-radius: 5px;
}
</style>
<script>
function validateForm() {
let Fname = document.forms["myForm"]["fname"].value;
if (Fname == "") {
alert("Enter the Firstname Properly");
return false;
}
let Lname = document.forms["myForm"]["lname"].value;
if (Lname == "") {
alert("Enter the Lastname Properly");
return false;
}
let zip = document.forms["myForm"]["fzip"].value;
if (zip.format != "/^\d{6}(-\d{4})?$/") {
alert("Enter valid Zipcode");
}
else
return false;
/*
let mail = document.forms["myForm"]["fmail"].value;
if (mail.format = "/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;") {
alert("Enter E-mail Address");
return ;
}
*/
let phone = document.forms["myForm"]["fphone"].value;
if (phone.length != 10) {
alert("Phone number should be of 10 digits");
return false;
}
}
</script>
</head>
<body align="center">
<table align="center">
<form name="myForm" action="Prompt.html" onsubmit="return validateForm()">
<h2 class="title"> <img src="reg. logo.png" height="50px" width="60px" alt="img"> Employee
Registration Form
</h2>
<tr>
<td></td>
<td>
<input name="mr" id="gender" type="radio" value="Mr.">Mr.
<input name="ms" id="gender" type="radio" value="Ms.">Ms.
<input name="mrs" id="gender" type="radio" value="Mrs.">Mrs.
</td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="fname" placeholder="First Name"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lname"placeholder="Last Name"></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea name="address" rows="4" cols="20" placeholder="Address"></textarea></td>
</tr>
<tr>
<td>City:</td>
<td>
<input type="text" placeholder="City">
</td>
</tr>
<tr>
<td>State:</td>
<td>
<select class="states">
<option value="">Select State</option>
<option value="gujarat"> Gujarat </option>
<option value="punjab"> Punjab </option>
<option value="maharastra"> Maharastra </option>
<option value="rajasthan"> Rajastan </option>
</select>
</td>
</tr>
<tr>
<td>Zip:</td>
<td><input type="number" placeholder="Enter your zip code" name="fzip"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" placeholder="Enter your email" name="fmail"></td>
</tr>
<tr>
<td>Mobile:</td>
<td><input type="number" placeholder="Enter your mobile no." name="fphone"></td>
</tr>
<tr>
<td>Language known:</td>
<td>
<input type="checkbox" value="gujarati">Gujarati<br>
<input type="checkbox" value="hindi">Hindi<br>
<input type="checkbox" value="english">English<br>
<input type="checkbox" value="marathi">Marathi
</td>
</tr>
<tr>
<td>Additional Information:</td>
<td><textarea rows="2" cols="20" placeholder="Optional"></textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="submit" class="sub">
<button class="reset" type="reset">Reset</button>
</td>
</tr>
</form>
</table>
</body>
</html>
Output:

WD Cie2

Uploaded by

Copyright:

Available Formats

WD Cie2

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

WD Cie2

Uploaded by

Copyright:

Available Formats

Enrollment.

<td colspan="6", align="center">Break</td>

<input type="text" id="fname" name="fname" placeholder="Enter your first name"><br>

<input type="text" id="lname" name="lname" placeholder="Enter your last name"><br>

<input type="text" id="maddress1" name="maddress1" placeholder="Enter your Address"><br>

<input type="text" id="maddress2" name="maddress2" placeholder="Enter your Address"><br>

<input type="text" id="City" name="City" placeholder="Enter your City"><br>

<input type="text" id="E-mail" name="E-mail" placeholder="@gmail.com"><br>

<td align="center" rowspan><div id="OS" >OS(T)<br>(BKP)</br></div></td>

width="140"><div id="me" class="tech">

You might also like