WEB PROGRAMMING
LANGUAGES
LAB MANUAL
Spring 2021
Name: _________Fatima ilyas Alam
Reg No: _______13084
Marks Obtained ________ /35
Signature__________________________
Lab-Task-1:
Using HTML tags, you are required to design following table. The code must be written on
Notepad. VS and other supporting editors are not allowed:\
Day & Date Time Script Price
Byco AGP TPLT PPL
10:00am 50 60 70 80
Wednesday 10th March 2021 11:00am 51 59 67 89
12:00pm 55 56 66 89
10:00am 55 56 66 89
11:00am 51 59 67 89
Thursday 11th March 2021
12:00pm 56 65 65 88
1:00pm 60 70 70 90
CODING:
</title>
<body>
<h1> WPL CLASS ACTIVITY (01)</h1>
<table border="2" cellspacing ="3" cellpadding="10">
<tr>
<th rowspan="3">Day</th>
<th rowspan="3">TIME</th>
<th colspan="5">Script Price</th>
<tr>
<tr>
<td>TOTAL</td>
<td>PSO</td>
<td>SHELL</td>
<td>CALTEX</td>
<tr>
<tr>
<td rowspan="5"> SATURDAY</td>
<td>10am</td>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
<tr>
<tr>
<td>11am</td>
<td>50</td>
<td>60</td>
<td>70</td>
<td>80</td>
<tr>
<tr>
<td>12pm</td>
<td>90</td>
<td>100</td>
<td>110</td>
<td>120</td>
<tr>
<tr>
<td rowspan="5"> SUNDAY</td>
<td>10am</td>
<td>130</td>
<td>140</td>
<td>150</td>
<td>160</td>
<tr>
<tr>
<td>11am</td>
<td>170</td>
<td>180</td>
<td>190</td>
<td>200</td>
<tr>
<tr>
<td>12pm</td>
<td>210</td>
<td>220</td>
<td>230</td>
<td>240</td>
</table>
</body>
Results:
Lab-Task-2:
Create your resume on a Web Page. Your resume should include your personal info,
educational info, and expertise.
Create the page using external CSS-based. The resume page must be attractive.
CODING:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet"
href="https://www.dropbox.com/s/trsldt0me90jzs8/resume.css"/>
<title></title>
</head>
<body>
<div id="header">
<p id="name">Fatima Ilyas Alam</p>
<a href="[email protected]" target="_blank"><p
id="email">[email protected]</p></a>
<p id="contact">+91 75036 10708</p>
</div>
<div class="left">
</div>
<div class="right">
<h3>CV Highlights</h3>
<p>
<ul>
<li>Currently going through CS253 – Web Application Engineering and CS61A –
Structure & Interpretation of Computer Programs</li>
<li>Learnt basic Python, JavaScript, HTML, CSS on Codecademy.com.</li>
<li>An independent, dedicated, efficient person. These attributes are proved through
the series of courses I have taken or I am taking as of now independently through online
platforms.</li>
<li>Good Communication Skills, Presentation Skills, attitude towards leadership,
authorisation and delegation, conflict resolution and negotiation and a very good team
worker.</li></ul>
<h3>Educational Qualifications</h3>
<table>
<tr id="heading">
<td>Qualification</td>
<td>Board</td>
<td>Percentage / Grades</td>
<td>Year</td>
</tr>
<tr>
<td>S.S.C</td>
<td>karachi board</td>
<td>75.57%</td>
<td>2014</td>
</tr>
<tr>
<td>H.S.C (Science Stream)</td>
<td>Women collage 11-F north Karachi </td>
<td>72.40%</td>
<td>2016</td>
</tr>
</table>
<h3>Independent Courses</h3>
<p>
<ul>
<li>
<span id="course-name">HTML & CSS for Beginners – Web Fundamentals</span> –
Codecademy.com</li>
<li>
<span id="course-name">Python – Fundamentals and Dynamic Programming </span>
- Codecademy.com</li>
<li>
<span id="course-name">JavaScript – Programming Basics, JS Apps and Build Games
</span> - Codecademy.com</li>
<li>
<span id="course-name">CS101: Introduction to Computer Science - Building a Web
Crawler</span> - Udacity.com</li>
<li>
<span id="course-name">CS50x – Introduction to Computer Science I</span> –
edX.org & Harvard University</li>
<li>
<span id="course-name">Calculus One</span> - Ohio State University &
Coursera.org</li>
<li>
<span id="course-name">Introduction to Finance</span> - Coursera.org & University
of Michigan</li>
</ul>
<h3>Technical Skills</h3>
<p>
<ul>
<li>
<span id="course-name">Operating Systems:</span> DOS, Windows 98, Windows
2000, Windows XP, Windows NT, Windows Server 2003, Windows Vista, Windows 7,
Macintosh Computers (OS X), Linux (Ubuntu, Fedora)</li>
<li>
<span id="course-name">Application Software:</span> Office 97-2003; Office XP,
Office 2007, Office for Mac 2011, iWork ’09, Sage Accounting Software, Sage 50 (Accounting
Software), Excel 2003/2007 for Financial Modelling spreadsheets.</li>
<li>
<span id="course-name">Programming Skills:</span>HTML, CSS, Python,
JavaScript, learning C and C++</li></ul>
</p>
<h3>Personal Information:</h3>
<p>
<ul>
<li>
A young, determined hard and smart working person. I believe in task based roles and
complete ownership of work.
<li>
<span id="course-name">Languages Known:</span>English, urdu , Gujarati and
Sindhi</li>
<li>
<span id="course-name">Hobbies:</span>I love reading IT related books /
magazines, playing Circket, swimming, listening music, surfing Internet, self-learning through e-
courses.</li> </ul>
</p>
<h3>Other Information</h3>
<p>
<ul>
<li>
<span id="course-name">Expected Salary:</span>As per company standards</li>
<li>
<span id="course-name">Area of Interest:</span>Software Development,
Programming, Start-ups, Coding, App Development, Technical Support, Support Engineer,
Customer Happiness, Client service, Investment Banking, Corporate Finance, Hedge Funds,
Mergers & Acquisitions, Analyst, Equity Research, Business Analysis</li>
<li>
<span id="course-name">Joining Date:</span>Immediate</li></ul>
</p>
<h3>Declaration</h3>
<p>
I hereby declare that the details furnished above are true and correct to the best of my
knowledge and belief.</p>
</div>
<div id="footer"></div>
</body>
</html>
Result:
Lab-Task-3:
You are required to design an HTML Webpage for ABC Tours. This single page should
contain appropriate CSS and Jquery. For example, the tour packages will be displayed only
when the user presses the package name. Moreover, at the start of this page, the popup will
appear and let us that what discount ABC tours are offering if they booked any package
before 24th March 2021.
CODING:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-3.6.0.js"></script>
<script src="JavaScript.js"></script>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<div class="amazing" >
<br />
<br />
<br />
<br />
<input type="button" id="btn1" class="button" value="Package1" />
<input type="button" id="btn2" class="button" value="Package2" />
<input type="button" id="btn3" class="button" value="Package3" />
<br />
<br />
<div class="col-lg-2">
<div class="amazing123" style="background-color:cadetblue; height:600px;
width:400px; margin-left:auto; margin-right:auto">
<div style="margin-left:auto; margin-right:auto">
<ul id="div1" >
<li id="div1">ACCOMODATION</li>
<br />
<li id="div1">BEVERAGES</li>
<br />
<li id="div1">PICK AND DROP</li>
</ul>
<ul id="div2">
<br />
<li id="div2">QAWALI NIGHT</li>
<br />
<li id="div2">BONN FIRE</li>
<br />
<li id="div2">TIKKA PARTY</li>
</ul>
<ul id="div3">
<br />
<li id="div3">SWIMMING</li>
<br />
<li id="div3">HIKING</li>
<br />
<li id="div3">SKY DIVING</li>
<br />
<li id="div3">JET SKI</li>
<br />
<li id="div3">PARAGLIDING</li>
<br />
<li id="div3">DINNER</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Lab-Task-4:
Create a Website page to collect personal information from the user such as (Name, Father
Name, Address, Cell No, CNIC, Last Qualification, Last School/college/university name, and
email address). The last school/college/university name must be obtained using combobox). The
data must store in a DB table (if possible then add local db)
The inserted data must be displayed using gridview in the same web page as well as it allows to
update or delete of any record via a primary key of your choice.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>JavaScript Form Validation using a sample registration form</title>
<meta name="keywords" content="example, JavaScript Form Validation, Sample registration
form" />
<meta name="description" content="This document is an example of JavaScript Form Validation
using a sample registration form. " />
<link rel='stylesheet' href='js-form-validation.css' type='text/css' />
<script src="sample-registration-form-validation.js"></script>
</head>
<body onload="document.registration.userid.focus();">
<h1>Registration Form</h1>
Use tab keys to move from one input field to the next.
<form name='registration' onSubmit="return formValidation();">
<ul>
<li><label for="userid">User id:</label></li>
<li><input type="text" name="userid" size="12" /></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="passid" size="12" /></li>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="address">Address:</label></li>
<li><input type="text" name="address" size="50" /></li>
<li><label for="country">Country:</label></li>
<li><select name="country">
<option selected="" value="Default">(Please select a country)</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select></li>
<li><label for="zip">ZIP Code:</label></li>
<li><input type="text" name="zip" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label id="gender">Sex:</label></li>
<li><input type="radio" name="msex" value="Male" /><span>Male</span></li>
<li><input type="radio" name="fsex" value="Female" /><span>Female</span></li>
<li><label>Language:</label></li>
<li><input type="checkbox" name="en" value="en" checked /><span>English</span></li>
<li><input type="checkbox" name="nonen" value="noen" /><span>Non English</span></li>
<li><label for="desc">About:</label></li>
<li><textarea name="desc" id="desc"></textarea></li>
<li><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form>
</body>
</html>
Class-Activity:
You are required to add one more button in the last Lab task i.e. Show Desired Data, upon
giving the particular name and by pressing this button, the information displaying in
another gridview only for desired data.
Complete and upload the ASP.Net Code pasted on Notepad/Word file. Do not upload the
entire folder of the project.
protected void Button1_Click(object sender, EventArgs e)
SqlConnection con = new SqlConnection(@"Data
Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\DataBase1.mdf; Integrated Security =
True");
con.Open();
SqlCommand cmd = con.CreateCommand();
cmd.CommandType = CommandType.Text;
cmd.CommandText = "select * from std where id='"+TextBox12.Text+"'";
cmd.ExecuteNonQuery();
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
SearchGridView.DataSource = dt;
con.Close();
TextBox12.Text = "";
Lab-Activity:
You are required to collect CV information from the user using master pages. You can input
Name, Father Name, Academic qualification and etc. (the total field must be 10 at-least).
Apply theme at run time but must ensure that upon selection the theme must be replaced and
applied on all the texts and their sizes and etc.
<center><font size=4><b>CV</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="Karachi">Karachi</option>
<option value="Lahore">Lahore</option>
<option value="Islamabad">Islamabad</option>
<option value="Multan">Multan</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="MBA">MBA</option>
<option value="CSS">CSS</option>
<option value="M.COM">M.COM</option>
<option value="ACCA">ACCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="PUNJAB">PUNJAB</option>
<option value="Balochistan">Balochistan</option>
<option value="Khyber Pakhtunkhwa">Khyber Pakhtunkhwa</option>
<option value="SINDH">SINDH</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="ISLAMABAD">ISLAMABAD</option>
<option value="MULTAN">MULTAN</option>
<option value="Islamabad">Islamabad</option>
<option value="KARACHI">KARACHI</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
Lab-Task-5:
List down difference between the following.
Static Website:
Static websites usually come with a fixed number of pages that have a specific layout. When the
page runs on a browser, the content is literally static and doesn’t change in response to user
actions. A static website is usually created with HTML and CSS in simple text editors like
Notepad.
If you need a website smaller than three pages, opting for a static website is the proper choice.
Building it doesn’t take as much time or effort as in the case of dynamic websites. If the pages of
your website must look different, the HTML code can easily be duplicated on each of these
pages, containing the necessary changes.
Even though the website will display the same thing with no intricate navigation details, static
websites don’t need to feature just plain text. In fact, you can use various multimedia elements
and videos. An HTML website can look beautiful, but the page’s source code won’t change, no
matter what actions a user takes on it.
Dynamic Website:
Compared to static websites, which are purely informational, a dynamic website is more
functional. It allows users to interact with the information that is listed on the page. Of course,
that requires utilizing more than just HTML code.
Static websites use only client-side HTML and CSS code while dynamic websites rely on both
client-side and server-side scripting languages such as JavaScript, PHP, or ASP. When a user
accesses a dynamic website, the site can be changed through code that is run in the browser
and/or on the server. The end result is the same as that on a static website: an HTML page
displayed on the web browser.
To generate dynamic content, such websites use a combination of server-side and client-side
scripting. Client-side scripting refers to code that is executed by the browser, usually with
JavaScript. Meanwhile, server-side scripting refers to code that is executed by the server (before
the content is sent to the user’s browser).
Client Side and Server Side Language:
