INSTRUCTIONS TO STUDENTS

1. Students should be regular and come prepared for the lab practice.2. In case a student misses a class, it is his/her responsibility to complete that missed experiment(s).3. Students should bring the observation book, lab journal and lab manual. Prescribed textbook and class notes can be kept ready for reference if required.4.They should implement the given experiment individually.5. While conducting the experiments students should see that their programs would meet the following criteria:

•

Programs should be interactive with appropriate prompt messages, error messages if any, and descriptive messages for outputs.

•

Programs should perform input validation (Data type, range error, etc.) and give appropriate error messages and suggest corrective actions.

•

Comments should be used to give the statement of the problem and every function should indicate the purpose of the function, inputs and outputs

•

Statements within the program should be properly indented

•

Use meaningful names for variables and functions.

•

Make use of Constants and type definitions wherever needed.6. Once the experiment(s) get executed, they should show the program and results to the instructors and copy the same in their observation book.7.Questions for lab tests and exam need not necessarily be limited to the questions in the manual, but could involve some variations and / or combinations of the questions.

Guidelines for Instructors:

1. Students should be informed in the beginning itself that questions in the practical examination will not necessarily be limited to the questions from the manual, but could involve some variations and/or combinations of the questions mentioned in the manual.2. A group of questions of similar complexity are grouped for a lab. The instructor can choose any arbitrary set of 3 to 5 questions from the manual for that week so as to avoid students copying from previous batches and also enables the instructor to assess the student.3. The phrase ‘Numbers’ can be assumed to be Bytes or Words suitably.

LAB-1

اســم الطالـب(Name) :...... الرقم الجامعي(Ac. No.) : ......

Date:

Lab exercise (guiding student)

1) Introduction to web page and HTML (Hyper Text Markup Language)

2) Write HTML document to illustrate the uses of the following tags with all attributes.

Lab practice (assignment for student):

Make the following in the web page:

LAB-2

اســم الطالـب(Name) :...... الرقم الجامعي(Ac. No.) : ......

Date:

Lab exercise (guiding student)

1) Introduction to web page and HTML (Hyper Text Markup Language)

2) Write HTML document to illustrate the uses of the following tags with all attributes.

Lab practice (assignment for student):

Make the following in the web page:

LAB-3

اســم الطالـب(Name) :...... الرقم الجامعي(Ac. No.): ......

Date:

Lab exercise (guiding student)

1) Write HTML document to create a given table structure using all thetable related tags to include the following features:

  • Different colors and background Images
  • Spanning of rows and columns
  • Cell spacing and padding.

Lab practice (assignment for student)

1) Write HTML document to create a given table structure using all the table related tags to include the following features:

LAB-4

اســم الطالـب(Name) :...... الرقم الجامعي(Ac. No.): ......

Date:

Lab exercise (guiding student)

1) Write HTML document to create a given table structure using all thetable related tags to include the following features:

  • Different colors and background Images
  • Spanning of rows and columns
  • Cell spacing and padding.

Lab practice (assignment for student)

1) Write HTML document to create a given table structure using all the table related tags to include the following features:

LAB-5

اســم الطالـب(Name) :...... الرقم الجامعي(Ac. No.) : ......

Date:

Lab exercise (guiding student)

1) Design an HTML page including the following form given below.

  • Practice of HTML Radio button, check boxes.
  • HTML Font color size.
  • HTML Submit button.
  • HTML Frame.
  • HTML Form, Email Submit Reset button.

Lab practice (assignment for student)

1) Design an HTML document to create a given structure using all the tags which are plasticized above.

On the Page BELOW (Turn the page…) design the HTML page with all the tags.

LAB-6

اســم الطالـب(Name) :...... الرقم الجامعي(Ac. No.) : ......

Date:

Lab exercise (guiding student)

1) Design an HTML page including the following Java Script given below.

  • Comment using Java Script.
  • Use of If, while in Java Script.
  • Display Date Time Function in Java Script.
  • On Click any button activate a function written in Java Script
  • Use of external JS.
  • Switch Case using Java Script.
  • Using Alert Function in JS
  • Using for loop in java Script.
  • Write a paragraph using java Script.

Lab practice (assignment for student)

1) Use the following criteria to design an HTML document to create a given structure using all the commands in Java Script, which is given above.

LAB-7

اســم الطالـب(Name) :...... الرقم الجامعي(Ac. No.) : ......

Date:

Lab exercise (guiding student)

See the Java Script given below and apply the functionality for a page not allow null entry also.

Q. Write a Java Script to Print the ODD numbers.

Lab practice (assignment for student)

1) Use the following criteria to design an HTML document to create a given structure using all the commands in Java Script, which is given above.

LAB-8

اســم الطالـب(Name) :...... الرقم الجامعي(Ac. No.) : ......

Date:

Lab exercise (guiding student)

Current lab:

Lab exercise (guiding student)

After applying all (CSS, Java Script and HTML form submitting tags on the pages, design a 6 pages website.

  1. Login page
  2. Home page
  3. About Us page
  4. Contact us page
  5. News Page
  6. Site view

Practice:

  1. Practice with the below picture.

LAB-9

اســم الطالـب(Name) :...... الرقم الجامعي(Ac. No.) : ......

Date:

Lab exercise (guiding student)

Last Lab:

1) Advance Experiments on Cascade Style Sheet (CSS).

  • HTML page designed with CSS classes
  • Change the color of the link on every stage
  • Set the navigation bar through CSS
  • 3D object through CSS (Advance)

Current Lab:

Lab exercise (guiding student)Revision of all the labs

1) Apply the technology (HTML, CSS, and Java Script) to make the following page

Back ground color: Yellow, Font-size: 12, Font: Times New Roman

Apply the user validation also

LAB-10

اســم الطالـب(Name) :...... الرقم الجامعي(Ac. No.) : ......

Date:

Lab exercise (guiding student)

Current lab:

Lab exercise (guiding student)

Create the following html pages by help of tags buttons and apply the following

CSS- for giving the color of the pages

Java script- for giving the additional funtionality to the pages.

  1. Login page
  2. Home page
  3. About Us page
  4. Contact us page
  5. News Page
  6. Site view

Practice:

Do the practice with the same picture as given below

LAB-11

اســم الطالـب(Name) :...... الرقم الجامعي(Ac. No.) : ......

Date:

Lab exercise (guiding student)

Current lab:

Lab exercise (guiding student)

Create the following html pages by help of tags buttons and apply the following

Q1. Design the HTML page as given below.

A. / B.
When submit button clicked it should navigate the page to “testpage.html”. / Design the HTML page as given below.

LAB-12

اســم الطالـب(Name) :...... الرقم الجامعي(Ac. No.) : ......

Date:

Lab exercise (guiding student)

Current lab:

Lab exercise (guiding student)

Create the following html pageswith CSS and Java Script by help of tags buttons and apply the following given below.

Basics forms tags with advanced input tags.

  1. Create text fields
  2. Create password field
  3. Checkboxes
  4. Radio buttons
  5. Simple drop-down list
  6. Drop-down list with a pre-selected value
  7. Text area (a multi-line text input field)
  8. Create a button
  9. Draw a border around form-data
  10. Form with text fields and a submit button
  11. Form with checkboxes and a submit button
  12. Form with radio buttons and a submit button
  13. Send e-mail from a form

LAB-13

اســم الطالـب(Name) :...... الرقم الجامعي(Ac. No.) : ......

Date:

Lab exercise (guiding student)

Lab exercise (guiding student)

Tasks:

  • Revision of All the Previous Labs

Basics forms tags with advanced input tags and formatting tags.

Create text fields, Create password field, Checkboxes, Radio buttons, Simple drop-down list, Drop-down list with a pre-selected value, Text area (a multi-line text input field), Create a button, Draw a border around form-data, Form with text fields and a submit button, Form with checkboxes and a submit button, Form with radio buttons and a submit button, Send e-mail from a form.

Apply the following java script in the Code. (Also FOR Loop In Java Script: Various examples)

LAB-14

اســم الطالـب(Name) :...... الرقم الجامعي(Ac. No.) : ......

Date:

Lab exercise (guiding student)

Lab exercise (guiding student)

Tasks:

  • Revision of All the Previous Labs
  • Doubt Clearing Session

Basics forms tags with advanced input tags and formatting tags.

Create text fields, Create password field, Checkboxes, Radio buttons, Simple drop-down list, Drop-down list with a pre-selected value, Text area (a multi-line text input field), Create a button, Draw a border around form-data, Form with text fields and a submit button, Form with checkboxes and a submit button, Form with radio buttons and a submit button, Send e-mail from a form.

Apply the following java script in the Code. (Also FOR Loop In Java Script: Various examples)

<body>
<p id="demo"</p>
<script>
x = 6; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x; // Display x in the element
var x; // Declare x
</script>
</body> /

Faculty

Gulrez Alam Khan

Signature……………………………………………