IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Practical - 2
• Write a program to make table using HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table border="5" cellspacing="0" align="left">
<tr>
<td colspan="10" align="center" height="60"
width="500">
<br>
<b>Indus Institute of Technology & Engineering <br>
(Constituent Institute under Indus University)<br>
Rancharda, Via Thaltej , Ahmedabad -382115<br>TIME
TABLE</b></br></td>
<tr height="30" width="100">
<td ><b>Course</b></td>
<td colspan="2" ><b>B.Tech</b></td>
<td colspan="4" ></td>
<td colspan="3" ><b>V</b></td>
</tr>
<tr height="30" width="100">
<td colspan="3" ><b>Department: CE</b></td>
<td colspan="4" ></td>
<td colspan="3" ><b>CE-B</b></td>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
</tr>
<tr height="50" width="100">
<td colspan="2" ><b>Room No:</b></td>
<td height="50" ><b>LH-30(3rd Floor)</b></td>
<td colspan="4"></td>
<td colspan="3" ><b>04.07.2022</b></td>
</tr>
<tr align="center" height="30" width="100">
<td rowspan="3" ><b>Day of WEEK</b></td>
<td ><b>Period 1</b></td>
<td ><b> Period 2 </b></td>
<td ><b> Period 3 </b></td>
<td ><b> Period 4 </b></td>
<td ></td>
<td ><b>Period 5 </b></td>
<td ><b>Period 6 </b></td>
<td ><b>Period 7 </b></td>
<td ><b>Period 8 </b></td>
</tr>
<tr align="center" height="30" width="100">
<td><b>09:00</b></td>
<td><b>09:55</b></td>
<td><b>10:50</b></td>
<td><b>11:45</b></td>
<td><b>12:40</b></td>
<td><b>01:20</b></td>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<td><b>02:15</b></td>
<td><b>03:10</b></td>
<td><b>04:05</b></td>
</tr>
<tr align="center" height="30" width="100">
<td><b>09:55</b></td>
<td><b>10:50</b></td>
<td><b>11:45</b></td>
<td><b>12:40</b></td>
<td><b>01:20</b></td>
<td><b>02:15</b></td>
<td><b>03:10</b></td>
<td><b>04:05</b></td>
<td><b>05:00</b></td>
</tr>
<tr align="center" height="30" width="100">
<td>Mon</td>
<td >DAA-SM</td>
<td >MI-AV</td>
<td >PSC-BT</td>
<td >WT-JP</td>
<td rowspan="5"><h2>L<br>U<br>N<br>C<br>H</h2></td>
<td >CN-IR</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<tr align="center" height="30" width="100">
<td >Tue</td>
<td colspan="2" > B1:CN-IR <br> B2:DAA-SJ</td>
<td colspan="2" > B1:PSC-BT <br> B2:MI-AV</td>
<td >WT-JP</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr align="center" height="30" width="100">
<td >Wed</td>
<td colspan="2" > B1:WT-JP <br> B2:CN-IR</td>
<td >WT-JP</td>
<td >MI-AV</td>
<td >CN-IR</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr align="center" height="30" width="100">
<td >Thu</td>
<td >PSC-BT</td>
<td >DAA-SM</td>
<td colspan="2" >B1:MI-AV <br> B2:WT-JP</td>
<td >CN-IR</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr align="center" height="30" width="100">
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<td >Fri</td>
<td >PSC-BT</td>
<td >DAA-SM</td>
<td colspan="2" > B1:DAA-SJ <br> B2:PSC-BT</td>
<td >MI-AV</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
<br><br><br>
<table border="5" cellspacing="0" align='center'
height="60" width="500">
<tr align="center">
<td colspan="4" ><b>Allocation of Subjects </b> </td>
</tr>
<tr align="center">
<td><b>Subject Code</b></td>
<td><b>Name of the Subject</b></td>
<td><b>Faculty code</b></td>
<td><b>Name of faculty</b></td>
</tr>
<tr>
<td>CE0516</td>
<td>Design and Analysis of Algorithms</td>
<td>SM </td>
<td>Mr. Sanjay Makwana</td>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
</tr>
<tr>
<td>CE0517</td>
<td>Micro processing and Interfacing</td>
<td>AV</td>
<td>Mr.Abhishek Vaghela</td>
</tr>
<tr>
<td>CE0518</td>
<td>Computer Networks</td>
<td>IR </td>
<td>Mr. Indrajeet Rajput</td>
</tr>
<tr>
<td>CE0525</td>
<td>Programming for Scientific Computing (Python)</td>
<td>BT </td>
<td>Ms. Bhumi Trivedi</td>
</tr>
<tr>
<td>CE0522 </td>
<td>Web Technology </td>
<td>JP </td>
<td>Mr.Jignesh Patel</td>
</tr>
<tr align="center" height="30" width="100">
<td></td>
<td></td>
<td></td>
<td></td>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
</tr>
</table>
<pre>
Ms.Zalak Trivedi
Ms.Divyani Tirthyani
Ms.Bhumi Trivedi
Dr.Seema Mahajan
<b>Time Table
Coordinatiors</b> <b>HOD-CE</b>
</pre>
</body>
</html>
Output :
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Practical - 3
Aim: Write a program to make resume using HTML.
<!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, initialscale=
1.0">
<title>Resume</title>
</head>
<body>
<center>
<h1><u>Resume</u></h1>
<h3><u>IU2041050078_Krish Patel - B.Tech</u></h3>
</center>
<table border=1 cellspacing=0 cellpadding=10 width=50%
style="margin-left:25%;">
<tr colspan="2">
<td><b>Address : </b><br> B-204 Pratham
Lakeview,Science City, Ahmedabad, Gujarat - 380060 </td>
<td><b>Contact</b> : <br>9586037770<br>
<b>Social Media : </b>
<a href="https://[Log in to view URL]"><img
src="https://[Log in to view URL]
linkedin_circle_logo.png" alt="Linkedin icon"width=30
height=30></img></a>
<a href="https://[Log in to view URL]"><img src="https://cdnicons-
png.flaticon.com/512/174/174855.png" alt="Insta icon"
width=30 height=30> <a
href="https://[Log in to view URL]"></img></a>
</td>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
</tr>
</table>
<div style="margin-left:25%; font-size:1.25rem">
<h3><u>Objective</u></h3> I want to be a python
developer
<h3><u>Education Qualification</u></h3>
<table border=1 cellspacing=0 cellpadding=8
width="75%">
<tr style="text-align:center;">
<th><u>Degree</u></th>
<th><u>Passing Year</u></th>
<th><u>University/Board</u></th>
<th><u>Percentage/CGPA</u></th>
</tr>
<tr style="text-align:center;">
<td>SSC</td>
<td>2018</td>
<td>Gujarat Board</td>
<td>82%</td>
</tr>
<tr style="text-align:center;">
<td>HSC</td>
<td>2020</td>
<td>Gujarat Board</td>
<td>49%</td>
</tr>
<tr style="text-align:center;">
<td>B.Tech</td>
<td>2024</td>
<td>Deemed/Private</td>
<td>9.54</td>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
</tr>
</table>
</div>
<center>
<h2><u>Improvement For Self Learning Process</u></h2>
</center>
<div style="margin-left:25%; font-size:1.25rem">
<h4><u>Paper
Publication/Presentation(National/International)</u></h4>
<p>&#9655; NULL</p>
<h4><u>Certificate Courses</u></h4>
<p>&#9655; Ongoing</p>
<h4><u>Workshop/Training
Activity/Webinar(FDP,STTP,Workshop)</u></h4>
<p>&#9655; Attended Udamy course on <b>Python
Devlopment</b></p>
<p>&#9655; Completed internship from Praxware
Technologies on <b>Python </b></p>
<p>&#9655; Attended Indus University course on
<b>Python</b></p>
<h4><u>Achievements</u></h4>
<li>Stock Market Enthusiastic</li>
<li>Olympiad Silver Medal</li>
<h4><u>Interested Area</u></h4>
<p>Cyber Security, Data Science, Financial Markets</p>
</div>
<div style="margin-left:25%; font-size:1.25rem">
<h2><u>Experience</u></h2>
<h3><u>Job Profile</u></h3>
<table> <tr>
<th colspan="6">Intern at Praxware Technologies</th>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<th width="380px"></th>
<th colspan="3">[June - 2022 to Still
Continue]</th>
</tr>
</table>
<h4 style="margin-left:2%"><u>Job
Responsibility</u></h4>
<ul style="margin: left 4px;">
<li>Python Developer Intern</li>
</ul>
<h3>Personal Details:</h3>
<ul style="list-style-type:none">
<li><b>Date of Birth :</b> 29<sup>th</sup> June
2003</li>
<li><b>Gender :</b> Male</li>
<li><b>Marital Status :</b> Single</li>
<li><b>Languages Known :</b> Hindi , English ,
Gujarati</li>
<li><b>Hobbies :</b> Reading, Digital Games</li>
<li><b>Alternate contact :</b> 9586037770 </li>
<li><b>Blood group :</b> O<sup>+</sup></li>
<li><b>Nationality :</b> Indian</li>
<li><b> Religion:</b> Hindu</li
</ul>
<ul style="list-style-type:none">
<li>Yours Sincerely, <br> <b>Krish Patel</b></li>
</ul>
</div>
</body>
</html>
</html>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Output :
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Practical - 4
Aim: Write a program to make registration form using HTML.
<html>
<head>
<body style="background-color: rgb(231, 228, 228)">
<font color="black">
<title>Student Registration Form</title>
</head>
<body>
<h3><center>STUDENT REGISTRATION FORM</center></h3>
<table align="center" cellpadding = "10">
<!----- First Name ------------------------------------------------------>
<tr>
<td>FIRST NAME</td>
<td><input type="text" name="First_Name" maxlength="30"/>
(max 30 characters a-z and A-Z)
</td>
</tr>
<!----- Last Name ------------------------------------------------------->
<tr>
<td>LAST NAME</td>
<td><input type="text" name="Last_Name" maxlength="30"/>
(max 30 characters a-z and A-Z)
</td>
</tr>
<!----- Date Of Birth --------------------------------------------------->
<tr>
<td>DATE OF BIRTH</td>
<td>
<select name="Birthday_day" id="Birthday_Day">
<option value="-1">Day:</option>
<option value="1">1</option>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="Birthday_Month" name="Birthday_Month">
<option value="-1">Month:</option>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<option value="January">Jan</option>
<option value="February">Feb</option>
<option value="March">Mar</option>
<option value="April">Apr</option>
<option value="May">May</option>
<option value="June">Jun</option>
<option value="July">Jul</option>
<option value="August">Aug</option>
<option value="September">Sep</option>
<option value="October">Oct</option>
<option value="November">Nov</option>
<option value="December">Dec</option>
</select>
<select name="Birthday_Year" id="Birthday_Year">
<option value="-1">Year:</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
</select>
</td>
</tr>
<!----- Email Id -------------------------------------------------------->
<tr>
<td>EMAIL ID</td>
<td><input type="text" name="Email_Id" maxlength="100" /></td>
</tr>
<!----- Mobile Number ----------------------------------------------------
------>
<tr>
<td>MOBILE NUMBER</td>
<td>
<input type="text" name="Mobile_Number" maxlength="10" />
(10 digit number)
</td>
</tr>
<!----- Gender ---------------------------------------------------------->
<tr>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<td>GENDER</td>
<td>
Male <input type="radio" name="Gender" value="Male" />
Female <input type="radio" name="Gender" value="Female" />
</td>
</tr>
<!----- Address -------------------------------------------------------->
<tr>
<td>ADDRESS <br /><br /><br /></td>
<td><textarea name="Address" rows="4" cols="30"></textarea></td>
</tr>
<!----- City --------------------------------------------------------->
<tr>
<td>CITY</td>
<td><input type="text" name="City" maxlength="30" />
(max 30 characters a-z and A-Z)
</td>
</tr>
<!----- Pin Code ---------------------------------------------------------
->
<tr>
<td>PIN CODE</td>
<td><input type="text" name="Pin_Code" maxlength="6" />
(6 digit number)
</td>
</tr>
<!----- State ---------------------------------------------------------->
<tr>
<td>STATE</td>
<td><input type="text" name="State" maxlength="30" />
(max 30 characters a-z and A-Z)
</td>
</tr>
<!----- Country --------------------------------------------------------->
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<tr>
<td>COUNTRY</td>
<td><input type="text" name="Country" value="India" readonly="readonly"
/></td>
</tr>
<!----- Hobbies --------------------------------------------------------->
<tr>
<td>HOBBIES <br /><br /><br /></td>
<td>
Drawing
<input type="checkbox" name="Hobby_Drawing" value="Drawing" />
Singing
<input type="checkbox" name="Hobby_Singing" value="Singing" />
Dancing
<input type="checkbox" name="Hobby_Dancing" value="Dancing" />
Sketching
<input type="checkbox" name="Hobby_Cooking" value="Cooking" />
<br />
Others
<input type="checkbox" name="Hobby_Other" value="Other">
<input type="text" name="Other_Hobby" maxlength="30" />
</td>
</tr>
<!----- Qualification---------------------------------------------------->
<tr>
<td>QUALIFICATION <br /><br /><br /><br /><br /><br /><br /></td>
<td>
<table>
<tr>
<td align="center"><b>Sl.No.</b></td>
<td align="center"><b>Examination</b></td>
<td align="center"><b>Board</b></td>
<td align="center"><b>Percentage</b></td>
<td align="center"><b>Year of Passing</b></td>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
</tr>
<tr>
<td>1</td>
<td>Class X</td>
<td><input type="text" name="ClassX_Board" maxlength="30" /></td>
<td><input type="text" name="ClassX_Percentage" maxlength="30" /></td>
<td><input type="text" name="ClassX_YrOfPassing" maxlength="30" /></td>
</tr>
<tr>
<td>2</td>
<td>Class XII</td>
<td><input type="text" name="ClassXII_Board" maxlength="30" /></td>
<td><input type="text" name="ClassXII_Percentage" maxlength="30" /></td>
<td><input type="text" name="ClassXII_YrOfPassing" maxlength="30" /></td>
</tr>
<tr>
<td>3</td>
<td>Graduation</td>
<td><input type="text" name="Graduation_Board" maxlength="30" /></td>
<td><input type="text" name="Graduation_Percentage" maxlength="30" /></td>
<td><input type="text" name="Graduation_YrOfPassing" maxlength="30"
/></td>
</tr>
<tr>
<td>4</td>
<td>Masters</td>
<td><input type="text" name="Masters_Board" maxlength="30" /></td>
<td><input type="text" name="Masters_Percentage" maxlength="30" /></td>
<td><input type="text" name="Masters_YrOfPassing" maxlength="30" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td align="center">(10 char max)</td>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<td align="center">(upto 2 decimal)</td>
</tr>
</table>
</td>
</tr>
<!----- Course ---------------------------------------------------------->
<tr>
<td>COURSES<br />APPLIED FOR</td>
<td>
BCA
<input type="radio" name="Course_BCA" value="BCA">
B.Com
<input type="radio" name="Course_BCom" value="B.Com">
B.Sc
<input type="radio" name="Course_BSc" value="B.Sc">
B.A
<input type="radio" name="Course_BA" value="B.A">
</td>
</tr>
<!----- Submit and Reset -------------------------------------------------
>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Output :
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Practical - 5
Aim: Write a program to apply color to HTML web page using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#lun{
background-color: #70ff03;
color: white;
}
.daa{
background-color: #8e66e5;
color: white;
}
.mi{
background-color: #58d68d;
color: black;
}
.cn{
background-color: yellow;
color: black;
}
.pn{
background-color: #03d1ff;
color: whitesmoke;
}
.wt{
background-color: #e39ffb;
color: black;
}
#lab1{
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
background-image:linear-gradient(yellow, #8e66e5) ;
color: black;
}
#lab2{
background-image: linear-gradient(#03d1ff,#58d68d);
}
#lab3{
background-image: linear-gradient(#e39ffb,yellow);
}
#lab4{
background-image: linear-gradient(#58d68d,#e39ffb);
}
#lab5{
background-image: linear-gradient( #8e66e5,#03d1ff);
color: white;
}
</style>
</head>
<body>
<table border="4" cellspacing="0" align="left">
<tr>
<td colspan="10" align="center" height="60"
width="500">
<br>
<b>Indus Institute of Technology & Engineering <br>
(Constituent Institute under Indus University)<br>
Rancharda, Via Thaltej , Ahmedabad -382115<br>TIME
TABLE</b></br></td>
<tr height="30" width="100">
<td ><b>Course</b></td>
<td colspan="2" ><b>B.Tech</b></td>
<td colspan="4" ></td>
<td colspan="3" ><b>V</b></td>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
</tr>
<tr height="30" width="100">
<td colspan="3" ><b>Department: CE</b></td>
<td colspan="4" ></td>
<td colspan="3" ><b>CE-B</b></td>
</tr>
<tr height="50" width="100">
<td colspan="2" ><b>Room No:</b></td>
<td height="50" ><b>LH-30(3rd Floor)</b></td>
<td colspan="4"></td>
<td colspan="3" ><b>04.07.2022</b></td>
</tr>
<tr align="center" height="30" width="100">
<td rowspan="3" ><b>Day of WEEK</b></td>
<td ><b>Period 1</b></td>
<td ><b> Period 2 </b></td>
<td ><b> Period 3 </b></td>
<td ><b> Period 4 </b></td>
<td ></td>
<td ><b>Period 5 </b></td>
<td ><b>Period 6 </b></td>
<td ><b>Period 7 </b></td>
<td ><b>Period 8 </b></td>
</tr>
<tr align="center" height="30" width="100">
<td><b>09:00</b></td>
<td><b>09:55</b></td>
<td><b>10:50</b></td>
<td><b>11:45</b></td>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<td><b>12:40</b></td>
<td><b>01:20</b></td>
<td><b>02:15</b></td>
<td><b>03:10</b></td>
<td><b>04:05</b></td>
</tr>
<tr align="center" height="30" width="100">
<td><b>09:55</b></td>
<td><b>10:50</b></td>
<td><b>11:45</b></td>
<td><b>12:40</b></td>
<td><b>01:20</b></td>
<td><b>02:15</b></td>
<td><b>03:10</b></td>
<td><b>04:05</b></td>
<td><b>05:00</b></td>
</tr>
<tr align="center" height="30" width="100">
<td>Mon</td>
<td class="daa">DAA-SM</td>
<td class="mi">MI-AV</td>
<td class="pn">PSC-BT</td>
<td class="wt">WT-JP</td>
<td rowspan="5" id="lun"><h2>L<br>U<br>N<br>C<br>H</h2></td>
<td class="cn">CN-IR</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr align="center" height="30" width="100">
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<td >Tue</td>
<td colspan="2" id="lab1"> B1:CN-IR <br> B2:DAA-SJ</td>
<td colspan="2" id="lab2"> B1:PSC-BT <br> B2:MI-AV</td>
<td class="wt">WT-JP</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr align="center" height="30" width="100">
<td >Wed</td>
<td colspan="2" id="lab3"> B1:WT-JP <br> B2:CN-IR</td>
<td class="wt">WT-JP</td>
<td class="mi">MI-AV</td>
<td class="cn">CN-IR</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr align="center" height="30" width="100">
<td >Thu</td>
<td class="pn">PSC-BT</td>
<td class="daa">DAA-SM</td>
<td colspan="2" id="lab4">B1:MI-AV <br> B2:WT-JP</td>
<td class="cn">CN-IR</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr align="center" height="30" width="100">
<td >Fri</td>
<td class="pn">PSC-BT</td>
<td class="daa">DAA-SM</td>
<td colspan="2" id="lab5"> B1:DAA-SJ <br> B2:PSC-BT</td>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<td class="mi">MI-AV</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
<br><br><br>
<table border="5" cellspacing="0" align='right' height="60"
width="500">
<tr align="center">
<td colspan="4" ><b>Allocation of Subjects </b> </td>
</tr>
<tr align="center">
<td><b>Subject Code</b></td>
<td><b>Name of the Subject</b></td>
<td><b>Faculty code</b></td>
<td><b>Name of faculty</b></td>
</tr>
<tr class="daa">
<td>CE0516</td>
<td>Design and Analysis of Algorithms</td>
<td>SM </td>
<td>Mr. Sanjay Makwana</td>
</tr>
<tr class="mi" class="mi">
<td>CE0517</td>
<td>Micro processing and Interfacing</td>
<td>AV</td>
<td>Mr.Abhishek Vaghela</td>
</tr>
<tr class="cn">
<td>CE0518</td>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<td>Computer Networks</td>
<td>IR </td>
<td>Mr. Indrajeet Rajput</td>
</tr>
<tr class="pn">
<td>CE0525</td>
<td>Programming for Scientific Computing (Python)</td>
<td>BT </td>
<td>Ms. Bhumi Trivedi</td>
</tr>
<tr class="wt">
<td>CE0522 </td>
<td>Web Technology </td>
<td>JP </td>
<td>Mr.Jignesh Patel</td>
</tr>
<tr align="center" height="30" width="100">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div style="width: 100%">
<p align="center" >Ms.Zalak Trivedi <br> Ms.Divyani Tirthyani
<br>Ms.Bhumi Trivedi <br><b>Time Table Coordinatiors</b></p>
<p align="center"> Dr.Seema Mahajan <br> <b>HOD-CE</b></p>
</div>
</body>
</html>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Output :
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Practical - 6
Aim : Write a program to create menu bar using CSS.
<html>
<head>
<title>Drop down Menu Example</title>
<link rel="stylesheet" type="text/css"
href="https://[Log in to view URL]
6.1.2/css/all.min.css">
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif,'Calibri', 'Gill Sans', 'Gill Sans MT','Trebuchet MS';
font-weight:500;
font-size: 15px;
}
.menu-bar{
text-align: center;
}
.menu-bar .fa{
margin-left: 10px;
}
.menu-bar li:hover .fa{
transform: rotateZ(180deg);
}
.menu-bar ul{
display: flex;
list-style: none;
color: black;
}
.menu-bar ul li{
width: 150px;
margin: 15px;
padding: 5px;
}
.menu-bar ul li a{
text-decoration: none;
color: black;
}
.menu-bar ul li:hover{
background-color: rgb(201, 196, 196);
}
.abt-menu{
display: none;
}
.menu-bar ul li:hover .abt-menu{
display: block;
position: absolute;
background-color: rgb(234, 233, 233);
margin-top: 15px;
margin-left: -5px;
}
.menu-bar ul li:hover .abt-menu ul{
display: block;
}
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
.menu-bar ul li:hover .abt-menu ul li{
margin: 0;
width: 500px;
height: 50px;
padding: 10px;
border-bottom: 1px solid #fff;
border-radius: 0;
/* background: transparent; */
text-align: left;
}
.menu-bar ul li:hover .abt-menu ul li:hover{
background-color: rgb(201, 196, 196);
}
</style>
</head>
<body>
<div class="logo"><center><img
src='https://[Log in to view URL]'
alt="Indus logo"></center></img>
<div class="menu-bar">
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="aboutus"><a href="#">About Us<i class="fa fa-caret-down"></i></a>
<div class="abt-menu">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Governance</a></li>
<li><a href="#">Awards and Recognition</a></li>
<li><a href="#">Committies</a></li>
</ul>
</div>
</li>
<li class="services"><a href="#">Admission<i class="fa fa-caret-down"></i></a>
<div class="abt-menu">
<ul>
<li><a href="#">Admission</a></li>
<li><a href="#">Undergraduate</a></li>
<li><a href="#">Postgraduate</a></li>
<li><a href="#">Ph.D</a></li>
<li><a href="#">Certificate Course in Clinical Research</a></li>
<li><a href="#">Certificate Course on Industrial Sickness The Insolvency and
Bankruptcy Code 2016</a></li>
<li><a href="#">Certificate Course on Internet of Things</a></li>
</ul>
</div>
</li>
<li class="Campus"><a href="#">Campus<i class="fa fa-caret-down"></i></a>
<div class="abt-menu">
<ul>
<li><a href="#">Campus Life</a></li>
<li><a href="#">Facilities</a></li>
</ul>
</div>
</li>
<li class="Institue"><a href="#">Institue<i class="fa fa-caret-down"></i></a>
<div class="abt-menu">
<ul>
<li><a href="#">IITE - Indus Institute of Technology & Engineering</a></li>
<li><a href="#">IAS - Indus Architecture School</a></li>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<li><a href="#">IDS - Indus Design School</a></li>
<li><a href="#">IIICT - Indus Institute of Information & Communication
Technology</a></li>
<li><a href="#">IIMS - Indus Institute of Management Studies</a></li>
<li><a href="#">IISHLS - Indus Institute of Sciences Humanities & Liberal
Studies</a></li>
<li><a href="#">IISS - Indus Institute of Special Studies</a></li>
<li><a href="#">IIL - Indus Institute of Law</a></li>
<li><a href="#">IIATE - Indus Institute of Aviation Technology and
Engineering</a></li>
</ul>
</div>
</li>
<li class="Alumni"><a href="#">Alumni Association<i class="fa fa-caretdown"></
i></a>
<div class="abt-menu">
<ul>
<li><a href="#">Alumni Overview</a></li>
</ul>
</div>
</li>
<li class="Students"><a href="#">Students<i class="fa fa-caret-down"></i></a>
<div class="abt-menu">
<ul>
<li><a href="#">Student Overview</a></li>
<li><a href="#">Convocation</a></li>
<li><a href="#">Student Code of Conduct</a></li>
<li><a href="#">Student Services</a></li>
</ul>
</div>
</li>
<li class="Faculities"><a href="#">Faculities</a></li>
<li class="Placement"><a href="#">Placement</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>
Output :
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Practical - 7
Aim : Write a program to make simple calculator using Javascript.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-tofit=
no">
<title>Calculator</title>
</head>
<style>
#firstnumber{
margin-bottom:20px;
}
div{
margin: 10% 30% 20% 40%;
}
#add{
background-color:rgba(255, 0, 0, 0.637);
padding:5px 10px;
margin-right :10px;
font-size: 20px;
text-decoration: bold;
}
#sub{
background-color:blue;
padding:5px 10px;
margin-right :10px;
font-size: 20px;
text-decoration: bold;
}
#mul{
background-color:rgba(0, 128, 0, 0.693);
padding:5px 10px;
margin-right :10px;
font-size: 20px;
text-decoration: bold;
}
#div{
background-color:red;
padding:5px 10px;
margin-right :10px;
font-size: 20px;
text-decoration: bold;
}
#mod{
background-color:rgba(0, 255, 221, 0.745);
padding:5px 10px;
margin-right :10px;
font-size: 20px;
text-decoration: bold;
}
</style>
<body>
<div>
<h1 class="title">CALCULATOR</h3>
<form action="">
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<label for="">First Number</label>
<input type="number" id="firstnumber">
<br>
<label for="">Second Number</label>
<input type="number" id="secondnumber"">
</form>
<br>
<button onclick="add (this)" id="add">+</button>
<button onclick="subtract (this)" id="sub">-</button>
<button onclick="divide (this)" id="mul">/</button>
<button onclick="multiply (this)" id="div">*</button>
<button onclick="modulo (this)" id="mod">%</button>
<br>
<h2 id="answer"></h2>
</div>
</body>
<script>
const add = () =>{
const firstnumber = document.getElementById('firstnumber').value
const secondnumber = document.getElementById('secondnumber').value
const addition = Number(firstnumber) + Number(secondnumber)
document.getElementById('answer').innerHTML = `Addition is : ${addition}`;
}
const subtract = () =>{
const firstnumber = document.getElementById('firstnumber').value
const secondnumber = document.getElementById('secondnumber').value
const subtract = Number(firstnumber) - (secondnumber)
document.getElementById('answer').innerHTML = `Subraction is : ${subtract}`
}
const multiply = () =>{
const firstnumber = document.getElementById('firstnumber').value
const secondnumber = document.getElementById('secondnumber').value
const multiply = Number(firstnumber) * Number(secondnumber)
document.getElementById('answer').innerHTML = `Multiplication is :
${multiply}`
}
const divide = () =>{
const firstnumber = document.getElementById('firstnumber').value
const secondnumber = document.getElementById('secondnumber').value
const divide = Number(firstnumber) / Number(secondnumber)
document.getElementById('answer').innerHTML = `Division is : ${divide}`
}
const modulo = () =>{
const firstnumber = document.getElementById('firstnumber').value
const secondnumber = document.getElementById('secondnumber').value
const modulo = Number(firstnumber) % Number(secondnumber)
document.getElementById('answer').innerHTML = `Modulus is : ${modulo}`;
}
</script>
</html>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Output :
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Practical - 8
Aim : Write a program to do Validation in registration form using Java script.
<!DOCTYPE html>
<html>
<head>
<title>Reg Form</title>
<style type="text/css"> body{
font-family: Calibri;
}
input[type="text"] { width: 250px;
}
input[type="submit"], input[type="reset"] { width: 77px;
height: 27px;
position: relative;left: 180px;
}
form{
text-align: center; font-family: Calibri; font-size: 20px;
border: 3px solid black; width: 600px;
margin: 20px auto;
}
td {
padding: 10px;
}
td:first-child {
text-align: right; font-weight: bold;
}
td:last-child {
text-align: left;
</style>
<script>
function validate() {
var fname = document.reg_form.fname; var lname = document.reg_form.lname; var
address = document.reg_form.address; var gender = document.reg_form.gender;
var email = document.reg_form.email;
var mobile = document.reg_form.mobile; var course = document.reg_form.course;
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
if (fname.value.length <= 0) { alert("Name is required"); fname.focus();
return false;
}
if (lname.value.length <= 0) { alert("Last Name is required"); lname.focus();
return false;
}
if (address.value.length <= 0) { alert("Address is required");
address.focus();
return false;
}
if (gender.value.length <= 0) { alert("Gender is required"); gender.focus();
return false;
}
if (email.value.length <= 0) { alert("Email Id is required"); email.focus();
return false;
}
if (mobile.value.length <= 0) { alert("Mobile number is required");
mobile.focus();
return false;
}
if (course.value == "select course") { alert("Course is required");
course.focus();
return false;
}
return false;
}
</script>
</head>
<body>
<center><h1>Form Validation using HTML,CSS,JavaScript</h1></center>
<hr>
<form method="" action="" name="reg_form" onsubmit="return validate()">
<h2>Registration Form</h2>
<table>
<tr>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<td><label>First Name: </label></td>
<td>
<input type="text" name="fname" placeholder="First
Name">
</td>
</tr>
<tr>
<td><label>Last Name: </label></td>
<td>
<input type="text" name="lname" placeholder="Last
Name">
</td>
</tr>
<tr>
<td><label>Address: </label></td>
<td>
<input type="textarea" size="50" name="address" placeholder="Address">
</td>
</tr>
<tr>
<td><label>Gender: </label></td>
<td>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="femele">Female
</td>
</tr>
<tr>
<td><label>Email Id: </label></td>
<td>
<input type="text" name="email" placeholder="example@gmail.com">
</td>
</tr>
<tr>
<td><label>Mobile: </label></td>
<td>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<input type="number" name="mobile">
</td>
</tr>
<tr>
<td><label>Course: </label></td>
<td>
<select name="course">
<option value="select course">select course</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JAVASCRIPT</option>
<option value="Java">JAVA</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Output:
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Practical - 9
Aim : Write a program to make use of javascript animation code.
<html>
<head>
<style>
#p1
{
width: 100%;
border: 3px blue solid;
height: 50px
}
#p2
{
width: 10px;
height: 50px;
background-color: aqua;
}
</style>
<script>
var s;
var l=0;
function f1()
{
s=setInterval("f3()",100);
}
function f2()
{
clearInterval(s);
}
function f3()
{
l=l+10;
document.getElementById("p3").innerHTML=Math.round((l/1366)*100)+"%";
document.getElementById("p2").style.width=l+"px";
if(l>1366)
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
{
clearInterval(s);
}
}
</script>
</head>
<body>
<div id="p1"> <div id="p2"><p style="display: inline; z-index: 5;margin-left:
600" id="p3">j </p></div></div>
<button onclick="f1()">start</button>
<button onclick="f2()">stop</button>
</body>
</html>
Output:
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Practical - 10
Aim : Write a program to store username and password in cookies and display records
in next page.
<html>
<head>
<title>Login Page</title>
<script>
function WriteCookie() {
if (document.myform.customer.value == "" && document.myform.pass.value == "" )
{
alert("Enter your Username and Password: ");
return;
}
cookievalue = escape(document.myform.customer.value);
cookievalue1 = escape(document.myform.pass.value);
document.cookie = "name=" + cookievalue;
document.cookie = "password=" + cookievalue1;
document.write("Username : " + cookievalue);
document.write("<br>Password : " + cookievalue1);
}
</script>
</head>
<body>
<center>
<form name="myform" action="">
Enter Usename: <input type="text" name="customer" />
<br><br>
Enter Password: <input type="password" name="pass" />
<input type="button" value="Submit" onclick="WriteCookie()" />
</form>
</center>
</body>
</html>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Output:
First Page
Next Page
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Practical - 11
Aim : Write a program store username and password in session and display records in
next page.
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<script>
function dofirst() {
var button = document.getElementById("button");
button.addEventListener("click", savecrap, false);
}
function savecrap() {
var p1 = document.getElementById("p1").value;
var p2 = document.getElementById("p2").value;
sessionStorage.setItem(p1, p2);
display(p1);
}
function display(p1) {
var box = document.getElementById("box");
var p2 = sessionStorage.getItem(p1);
box.innerHTML = "Username: " + p1 + "<br/> Password :" + p2;
}
window.addEventListener("load", dofirst, false);
</script>
</head>
<body>
<form>
Enter Username: <input type="text" id="p1">
<br><br>
Enter Password: <input type="password" id="p2">
<br><br>
<input type="button" id="button" value="Submit">
<br><br>
<div id="box">
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Session Storage is empty!!
</div>
</body>
</html>
Output:
First Page
Next Page
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Practical - 12
Aim : Write code to insert registration form data into database.
Student_info.html
<!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>Registration Form</title>
</head>
<body>
<center>
<h1>Storing Form data in Database</h1>
<form action="insert.php" method="post">
<p>
<label for="firstName">First Name:</label>
<input type="text" name="first_name" id="firstName">
</p>
<p>
<label for="lastName">Last Name:</label>
<input type="text" name="last_name" id="lastName">
</p>
<p>
<label for="Gender">Gender:</label>
<input type="text" name="gender" id="Gender">
</p>
<p>
<label for="Address">Address:</label>
<input type="text" name="address" id="Address">
</p>
<p>
<label for="emailAddress">Email Address:</label>
<input type="text" name="email" id="emailAddress">
</p>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<input type="submit" value="Submit">
</form>
</center>
</body>
</html>
Insert.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "student";
$conn = mysqli_connect($servername, $username, $password, $database);
if($conn === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
$first_name = $_REQUEST['first_name'];
$last_name = $_REQUEST['last_name'];
$gender = $_REQUEST['gender'];
$address = $_REQUEST['address'];
$email = $_REQUEST['email'];
$sql = "INSERT INTO studentdata VALUES ('$first_name',
'$last_name','$gender','$address','$email')";
if(mysqli_query($conn, $sql)){
echo "<h3>Data Stored Successfully!!</h3>";
echo nl2br("\n$first_name\n $last_name\n "
. "$gender\n $address\n $email");
} else{
echo "ERROR: Hush! Sorry $sql. "
. mysqli_error($conn);
}
mysqli_close($conn);
?>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Output:
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Practical - 13
Aim : Write a php code to display student record from student information table in
ascending order.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "student";
$connection = mysqli_connect($servername, $username, $password, $database);
$query = "SELECT * FROM `studentinfo` ORDER BY `EnrllNo` ASC;";
$final = mysqli_query($connection, $query);
$Sno = 1;
if (mysqli_num_rows($final) > 0) {
while($i = mysqli_fetch_assoc($final)) {
echo $Sno . ". <br>Enrollement Number: " . $i["EnrllNo"] . "<br>Name: " .
$i["Name"] . "<br>Subject: " . $i["Subject"] . "<br>Marks: " . $i["Marks"]
."<br><br>";
$Sno++ ;
}
} else {
echo "No results";
}
mysqli_close($connection)
?>
Output:
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Practical - 14
Aim : Write a code to upload user passpost size photo and sign and validate it by php it
must be a jpg or png file only.
<!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>Image</title>
<style>
body {
background-color: lightblue;
}
.file-input {
background-color: white;
}
#btn-submit {
padding: 10px 40px;
background: #586e75;
border: #485c61 1px solid;
color: white;
border-radius: 2px;
}
</style>
</head>
<body>
<h2>Please upload your passport size Image</h2>
<form id="frm-image-upload" action="index.php" name='img' method="post"
enctype="multipart/form-data">
<div class="form-row">
<div>Choose Image file:
<input type="file" class="file-input" name="file-input">
</div>
</div>
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
<br> <hr>
<div class="button-row">
<input type="submit" id="btn-submit" name="upload" value="Upload">
</div>
</form>
<?php if(!empty($response)) { ?>
<div class="response <?php echo $response['type']; ?>">
<?php echo $response["message"]; ?>
</div>
<?php }?>
</body>
</html>
index.php
<?php
if (isset($_POST["upload"])) {
$fileinfo = @getimagesize($_FILES["file-input"]["tmp_name"]);
$width = $fileinfo[0];
$height = $fileinfo[1];
$allowed_image_extension = array(
"png",
"jpg"
);
$file_extension = pathinfo($_FILES["file-input"]["name"], PATHINFO_EXTENSION);
if (! file_exists($_FILES["file-input"]["tmp_name"])) {
$response = array(
"type" => "error",
"message" => "Choose image file to upload."
);
}
else if (! in_array($file_extension, $allowed_image_extension)) {
$response = array(
"type" => "error",
"message" => "Upload valid images. Only PNG and JPG are allowed."
);
}
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
else if (($_FILES["file-input"]["size"] > 2000000)) {
$response = array(
"type" => "error",
"message" => "Image size exceeds 2MB"
);
}
else if ($width > "300" || $height > "200") {
$response = array(
"type" => "error",
"message" => "Image dimension should be within 300X200"
);
} else {
$target = "image/" . basename($_FILES["file-input"]["name"]);
if (move_uploaded_file($_FILES["file-input"]["tmp_name"], $target)) {
$response = array(
"type" => "success",
"message" => "Image uploaded successfully."
);
} else {
$response = array(
"type" => "error",
"message" => "Problem in uploading image files."
);
}
}
}
?>
Output:
IU2041050078 Web Technology Krish Patel
IU2041050078 Web Technology Krish Patel
Practical - 15
Aim : Write an angular js code to take fname, mname and lname in three different
textbox and display full name in paragraph.
<!DOCTYPE html>
<html lang="en">
<html ng-app>
<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>Angular Form</title>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="FName" placeholder="Enter your Name">
<label>Middle Name:</label>
<input type="text" ng-model="mName" placeholder="Enter your middle Name">
<label>Last Name:</label>
<input type="text" ng-model="lName" placeholder="Enter your last name">
<hr>
<h1>Hello, {{FName}} {{mName}} {{lName}}</h1>
</div>
<script
src="https://[Log in to view URL]"></s
cript>
</body>
</html>
Output:

Embed on website

To embed this program on your website, copy the following code and paste it into your website's HTML: