Lab Assignments:

HTML:
Problem statement-1 : Create your resume page as per the format shown in the figure. Add a work
experience section too

Problem statement-2 : Create a web page to display a list as shown in the figure:

Problem statement-3 : Create a web page to display tables as shown in the figures below.

3.1:
Create a link for all user names. Eg, clicking on Suresh Dasari should take the control to Suresh Dasari’s
resume and so on. The resume must have a “Back” link that will bring control back to this page that has the
table

3.2:

Problem statement-4 :Create a Web page on any particular topic. Be sure to bring images in like the
sample web page below.

Problem statement-5.1 : Create web page as shown in the figure below. Use table for neat effect
Problem statement-5.2 : Create web pages as shown in the figures below. Use table for neat effect. For
the drumbeat assignment, change the color, size and face of fonts for all headings

5.2.1:

5.2.2:

5.2.3:
Problem statement-5.3: Create 2 HTML5 web pages that looks like figures below:
Problem statement-6.1 : Use the resume HTML you created in assignment-1.
Divide into 4 different files – Personal Details, Academic Qualifications, skills and Work Experience. Now divide a
HTML page into three frames as upper, left and right (main) frames. Write a Heading in the upper frame with a
marquee and put the bio‐data sections as links in the left frame and on clicking each link in the section, the
respective detail information should be displayed into the right main frame.

Problem statement-6.1 : For all the HTML assignments done so far, create a frame like you see above.
Left pane should contain links for all assignments done and right pane should show output of each
assignment

CSS
1. Refer to problem statement-1 in HTML. Use CSS to give styling to the entire page.
2. Refer to problem statement-2 in HTML. Use CSS to highlight the first item in every list to green
(lightgreen)
3. Refer to problem statement 4 in HTML assignment. Apply a border to the topic heading
4. Write a HTML page that has a small paragraph. Highlight a small portion of the para in blue and
underline using a class and embedded CSS. Eg:

Lab Assignments:
Javascript:

Day-2 : JS fundamentals and DOM

1. Create a web page that displays the current date in the format specified as in example below. Also as
per current time, suitable greeting should be printed.
Today is Monday, 24 April 2000, Welcome, and Good Afternoon to You.
Number of days left till end of year : <display>

2. Accept and store names of 6 employees into array and display in sorted order of names.

3. Write a Javascript program that accepts a number in the range 1 to 50 from the user. It then
compares the number against a single dimension array of five integer elements ranging in value from
1 to 50. The program displays the message BINGO once the given input is found in the array.
 4. Create a custom object for rectangle and triangle. Individual objects should be able to store
dimension, and have methods to print area and perimeter. Display dimensions, area and perimeter
of rectangle and triangle objects.

5. An array contains a set of 5 words. Write Javascript to reverse each word and arrange the resulting
words in alphabetical order. Make use of functions

6. Create an array that holds 4 employee objects and displays each emp detail in a table. Emp details
could be emp id, emp name and salary. Use for each loop to inspect all properties of each object

Day-3

7. Create a HTML form that accepts radius and displays the area and circumference of a circle. Make
use of Math object

8. Create the HTML form given below. Use JS to manipulate strings

 1st radio button : search the given sub string (second text box) in main string (first text box)
 2nd & 3rd radio button: convert one of the strings to upper/lower case
 4th radio button : trim spaces around first string
 5th radio button : concatenate strings in first and 2nd text boxes
 6th radio button : do as shown

9. Problem statement-2 : Payment calculator

Use web page created in HTML 5.2.2. Calculate Payment Information based on Loan Information.
Validate Loan information textfields for numbers and Payment Information textfields should be
uneditable. The other constraints are as follows :
 Amount of Loan should not be more than 15 lakhs.
 Repayment period should be between 7 yrs to 15 yrs.

10. Create a Login.html page that accepts username and password. Following are the validations
required:
 Both fields are mandatory
 Username must be between 6 to 10 characters, all alphabetic.
  Password should be greater than 8 characters, must contain a # and atleast one digit.

11. Create a HTML page that accepts order details:

Following are validations required:

 All fields are mandatory
 Cust name must be greater than 5 characters.
 Billing date must be lesser than shipping date

If all goes well, display as follows; On clicking the display button, all form information must be saved into
an Order object. The details of this object must be displayed in a new window in a neat tabular
fashion(hint : use window.open())

12. Create a HTML page that will display the following form and on clicking the button, the details will be
listed as shown. Also create an object with all details from form, show them in new window thru the
newly created object
Problem statement-3 : Use the HTML page created in above Problem.

The following requirements must be met:

 Name: Required, only alphabets allowed, maximum length is 10.
 Lucky number: Required, must be of 4 digits.
 All other fields are mandatory
 Display appropriate messages in case of invalid data.

XML
Write the XML coding to describe following
Problem-1 : Payroll department has decided to use XML files as a rich data source, so the existing EMP
table has to be converted into XML data source i.e. XML file need to be created for EMP table representing
entire data

EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO

7369 SMITH CLERK 7902 17-DEC-80 1100 200 20

7499 ALLEN SALESMAN 7698 20-FEB-81 1600 24820 30

7521 WARD SALESMAN 7698 22-FEB-81 1375 19700 30

7566 JONES MANAGER 7839 02-APR-81 3175 20

7654 MARTIN SALESMAN 7698 28-SEP-81 1375 20600 30

7698 BLAKE MANAGER 7839 01-MAY-81 2850 30

 Problem-2 : Write the XML coding to describe following. The following table describes the employee
details. The employee details should be stored inside the root element “Employees”. Let the Designation
element have attribute “level” to specify the designation. Similarly, let Grade element have an attribute
“rank” to specify the grade level

Ecode Ename Doj Totol Department Desig Sal Grade

Exp
Fname Lname Unit loc 1 2 3 4 5 a b c d

1111 Seema Dalvi 09/08/97 12 3d Mumbai * 21000 *

222 Bharati Mantri 12/01/99 5 4a Pune * 12000 *

1. Write an internal DTD for the assignment above.

2. Create an external DTD for the data given above

Problem-3)

1. Write a DTD for the following XML Document :

<movies>
<movie type="comedy" rating="A3" review="6" year="1987">
<title>Raising Arizona</title>
<writer>Ethan Coen</writer>
<writer>Joel Coen</writer>
<producer>Ethan Coen</producer>
<director>Joel Coen</director>
<actor>Nicolas Cage</actor>
<actor>Holly Hunter</actor>
<actor>John Goodman</actor>
<comments>A classic love story</comments>
</movie>
<movie type="comedy" rating="B2" review="6" year="1998">
<title>Midnight Run</title>
<writer>Georger Gallo</writer>
<producer>Martin Brest</producer>
<director>Martin Breast</director>
<actor>Robert De Niro</actor>
<actor>Charlse Grodin</actor>
<comments>A road comedy</comments>
</movie>
<movie type="thriller" rating="A3" review="6" year="1987">
<title>Face OFF</title>
<writer>Georger Gallo</writer>
<producer>Martin Brest</producer>
<director>Martin Breast</director>
<actor>Nicolas Cage</actor>
<actor>John Travera</actor>
<comments>A science Thriller</comments>
</movie>
</movies>

Problem-4
Create a valid XML files for following DTD

<!DOCTYPE NEWSPAPER [
<!ELEMENT NEWSPAPER (ARTICLE+)>
<!ELEMENT ARTICLE (HEADLINE,BYLINE,LEAD,BODY,NOTES)>
<!ELEMENT HEADLINE (#PCDATA)>
<!ELEMENT BYLINE (#PCDATA)>
<!ELEMENT LEAD (#PCDATA)>
<!ELEMENT BODY (#PCDATA)>
<!ELEMENT NOTES (#PCDATA)>
<!ATTLIST ARTICLE AUTHOR CDATA #REQUIRED>
<!ATTLIST ARTICLE EDITOR CDATA #IMPLIED>
<!ATTLIST ARTICLE DATE CDATA #IMPLIED>
<!ATTLIST ARTICLE EDITION CDATA #IMPLIED>
<!ENTITY NEWSPAPER "Vervet Logic Times">
<!ENTITY PUBLISHER "Vervet Logic Press">
<!ENTITY COPYRIGHT "Copyright 1998 Vervet Logic Press">
]>

Problem-5 Consider an XML page representing a departmental store bill:

Header info: Name of customer

Date
Bill No.
Bill Details
Consider a purchase of the following items:
Name Qty Rate Amount
Apples 1 24
Lux Soap 4 15
Room freshner 1 200

Calculate the total amount thru javascript and assign it to the total amount label at bottom.

PHP assignments:
1. Create a PHP script that will display table of 6 (6 * 1 = 6…)

2. Create a PHP script that will display the square of all numbers between 1 to 20. Use function to do
the calculation

3. Write a PHP prg that will print star(*) in the form of triangle.

4. Write a php function that takes variable number of parameters and returns the sum of all these
parameters. Use built in PHP functions (refer to PPT) for the functions. Don’t use the 3 dot concept

5. Create a PHP script that will find the day of the week (Sun-Sat). Based on the day, it must display
appropriate message. Eg ‘Today is Monday’, ‘Thank god its Friday’ etc. Use switch case statements
6. Write a PHP program that will reverse a given string and check if string is a palindrome.

7. Write a PHP program that will store username and password for 5 users in an associative array.
Iterate thru the array and display in a tabular format

8. Create a html form that accepts 2 numbers. Submit to php which will add the numbers and display
result. In PHP, write a function that will do actual addition

9. Create a html form that takes three strings and passes these parameters to php. PHP script must
display all parameters in a ordered list:

10. Create a html form that will take two strings. Submit the strings to server and check if smaller
string is available in larger string. Return the index position of the string to browser

11. Write a HTML page that contains a text field and a submit button. Accept temperature in
Fahrenheit and use php to convert to Celsius
celsius = (fahrenheit - 32) * 5 / 9

12. Develop a web application as follows:

 Design simpleInt.html to capture Principal Amount, No of years and rate of Interest
 SimpleInt.php will receive these numbers and should generate response with simple
interest value to user

13. Create a login.html page that accepts username and password. Do client side validations using
javascript. Submit to php script on server. PHP must maintain an associative array with 5 entries.
Validate the entered username and password against these entries and give appropriate output. If
possible, send a success.html or failure.html for success/failure of validation. Explore the header()
function

14. Create an ajax application. In HTML, accept 3 numbers from user and using ajax, make a call to
PHP. Php script will find average of these 3 numbers and return the result through AJAX to the
HTML page. Explore and use $_SERVER['QUERY_STRING'] of PHP for this assignment

15. Create a simple ajax application which will allow user to enter a number in a text box in an HTML
page. As soon as user tries to tab out, a table of that number must be displayed. The table must be
generated using PHP
16. Create a HTML page as seen below:

After submitting form, retrieve all form elements and put into a csv file
 17. Develop a web page which accepts various inputs from user as shown in the figure. When user clicks
the “Find” button, the page must obtain connectivity to database and return result in a tabular
format as shown in figures below. The user details are stored in database

18. Redo the login application you did earlier. Now validate the entered username and password
against a Users table in database

19. Create a simple Contact Manager app which will allow user to add new contacts. The list of
contacts will be displayed and user will be able to delete existing contacts.

20. Create a PHP page that displays all Order information from database as a table. The orderId field in
table must have links that takes user to another view that display all Items for this order.

Following is the one possible screenshot of the end application.

21. Matrimony Application : Develop a web application for an online matrimonial system that allows user
to register and search for bride and groom. A person who is looking for bride or groom can use this web
application. User will have to first register himself. User can login and search for bride or groom by
passing gender and age.
Below are the requirements for the application:

1. The system is a Web-based application. When any user accesses the website, following Home page
(login) will appear.

a. If user is existing user, he can login by passing username and password. It will authenticate user
at server side. If user is valid, welcome page will display.
b. If username/password is invalid, take user back to Login screen with appropriate error message
(username invalid or password is invalid)
c. If user is new then user will click on “new user click here” hyperlink. Register.jsp page will
display.

2. Register.jsp page:

 While adding details, validate for the following:

 All fields are mandatory.
 Password must be at least 6 characters
 Username should be unique
 Email should be valid
 Age and contact number can have only numbers
If all fields contain valid data, record will be inserted in user table and Welcome.jsp page will display.

3. Welcome.jsp page:

This page has different links for the user:

 View profile : Go to profile.jsp page for display user’s profile

 Search for better half : Go to search.jsp page for searching

4. Profile.jsp page:

5. Search.jsp page:

Search page will allow user to search for better half.

6. Result.jsp page:

Result page will search all the record from database those are satisfying condition passed by search page
like gender and age.

Bootstrap Lab Assignments

1. Create a dynamic layout containing blog posts. It must have a header that spans across the width of the
whole website.
Then we have a three-column layout containing blog posts, when viewed on a desktop. In a tablet, the posts
are contained in a two-column layout instead of three. The same website when viewed on mobile devices
must display all posts in a single column.
2. Create a simple vertical form in bootstrap:

3. Create a navbar as shown:

Clicking on Topics, should show this screen:

4. Create the following webpage using navbar, jumbotron, buttons, glyphicons, grids etc