Department of Computer Science

Lab Manual

GER-111 APP. OF INFO &

COMMUNICATION
TECHNOLOGIES (LAB)
Instructor’s Name:

Student’s Name: ______________________________

Roll No.: ______________ Batch: ________________
Semester: ______________ Year: _________________
Department: __________________________________

1|Page
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

Department of Computer Science

Lab Manual

GER-111 APP. OF INFO &

COMMUNICATION
TECHNOLOGIES (LAB)
Prepared By:

Reviewed / Approved By:

_____________________

2|Page
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

Contents
Lab Manual.............................................................................................................................................1
Lab Manual.............................................................................................................................................2
CONTENTS............................................................................................................................................9
Psychomotor Rubrics for Software based Lab......................................................................................10
Psychomotor Rubrics Assessment Software based Lab........................................................................11
Affective Domain Rubrics Assessment.................................................................................................12
Open Ended Lab Assessment Rubrics..................................................................................................13
Open Ended Lab Assessment Rubrics..................................................................................................14
Final Lab Assessment...........................................................................................................................15
Lab Session 1: Essential MS Word Formatting....................................................................................16
Objective:..........................................................................................................................................16
Required Equipment / tools:.............................................................................................................16
1. Introduction:..................................................................................................................................16
2. Procedure:.....................................................................................................................................16
2.1 Creating and Applying Custom Styles.............................................................................16
2.2 Using Section Breaks.......................................................................................................17
2.3 Managing Long Documents............................................................................................18
2.4. Inserting a Table of Contents (TOC)..............................................................................19
2.5. Applying Cross-References............................................................................................20
2.6. Finalizing and Saving the Document..............................................................................21
3. Observation...................................................................................................................................21
4. Class Tasks:...................................................................................................................................21
5. Home Tasks:..................................................................................................................................21
6. Discussion and analysis of results:...............................................................................................22
7. Conclusion....................................................................................................................................22
Lab Session 2: Introduction to Macros and VBA.................................................................................23
Objective:..........................................................................................................................................23
1. Introduction:..................................................................................................................................23
2. Procedure......................................................................................................................................23
2.1 Setting Up Your Environment..........................................................................................23
2.2 Recording a Basic Macro.................................................................................................26
3|Page
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

2.3 Running and Editing a Macro..........................................................................................27

2.4 Automating Formatting Tasks..........................................................................................28
3. Observation...................................................................................................................................29
4. Class Tasks:...................................................................................................................................29
5. Home Tasks:..................................................................................................................................29
6. Discussion and analysis of results:...............................................................................................29
7. Conclusion....................................................................................................................................30
Lab Session 3: Advanced Formulas and Functions in Excel................................................................31
Objective:..........................................................................................................................................31
1. Introduction:..................................................................................................................................31
1.1 Array Formulas................................................................................................................31
1.2 Logical Functions (IF, AND, OR)...................................................................................31
1.3 Lookup Functions (VLOOKUP, HLOOKUP, XLOOKUP)............................................32
1.4 Dynamic Formulas (OFFSET, INDEX, MATCH)..........................................................32
2. Procedure:.....................................................................................................................................33
2.1 Array Formulas................................................................................................................33
2.2 Logical Functions (IF, AND, OR)...................................................................................35
2.3 Lookup Functions (VLOOKUP, HLOOKUP, XLOOKUP)............................................39
2.4. Dynamic Formulas (INDEX, MATCH, OFFSET).........................................................43
3. Observation...................................................................................................................................47
4. Class Tasks:...................................................................................................................................47
5. Home Tasks:..................................................................................................................................47
6. Discussion and analysis of results:...............................................................................................48
7. Conclusion....................................................................................................................................48
Lab Session 4: Data Analysis with PivotTables and Pivot Charts........................................................49
Objective:..........................................................................................................................................49
1. Introduction:..................................................................................................................................49
1.1 File Properties: (How to manipulate the file properties).................................................49
1.2 Data Understanding.........................................................................................................50
1.3 Data Cleansing.................................................................................................................51
1.4 Data Validation................................................................................................................53
1.5 Enabling Power Pivot Add-Ins........................................................................................54
4|Page
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

2. Observation...................................................................................................................................59
3. Class Tasks....................................................................................................................................59
4. Home Task....................................................................................................................................60
5. Discussion and analysis of results:...............................................................................................60
6. Conclusion....................................................................................................................................60
Lab Session 5: Microsoft Excel Using Macros And VBA...................................................................62
Objective:..........................................................................................................................................62
1.1 Introduction:................................................................................................................................62
2.1 Procedure:...................................................................................................................................62
2.1.1 Enable Developer Option in Excel...............................................................................62
2.1.2 VBA Editor Interface....................................................................................................63
2.1.4 Assigning a Macro to a Command Button....................................................................65
2.1.5 Create a Message Box...................................................................................................66
2.1.6 Create an Input Box......................................................................................................67
2.1.7 Variables, Constant, and Operators in VBA.................................................................68
3. Observation...................................................................................................................................70
4. Class Tasks:...................................................................................................................................70
5. Home Task:...................................................................................................................................70
6. Discussion and analysis of results:...............................................................................................70
7. Conclusion....................................................................................................................................70
Lab Session 6: Advanced Presentation Design and Animation............................................................71
Objective:..........................................................................................................................................71
1.1 Introduction to PowerPoint.........................................................................................................71
1.1.1 Using Slide Masters for Consistent Formatting............................................................72
1.1.2 Applying Advanced Animations...................................................................................74
1.1.3 Creating Custom Transitions........................................................................................75
1.1.4 Embedding Media (Videos, Audio)..............................................................................76
1.1.5 Using Hyperlinks to Create Non-Linear Navigation....................................................77
2. Observation...................................................................................................................................77
3. Class Tasks....................................................................................................................................77
4. Home Tasks...................................................................................................................................78
5. Discussion and analysis of results:...............................................................................................78
5|Page
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

6. Conclusion....................................................................................................................................78
Lab Session 7: Open-Ended Lab...........................................................................................................79
Title:..................................................................................................................................................79
Objective:..........................................................................................................................................79
Motivation:........................................................................................................................................79
Concept:............................................................................................................................................79
Problem Statement:...........................................................................................................................79
Design / Ways & Means:..................................................................................................................79
Analysis & Reporting /Answer:........................................................................................................79
Lab Activity:.....................................................................................................................................79
Deliverables:.....................................................................................................................................79
Lab Session 7: Interactive Presentations with Action Buttons and Hyperlinks....................................80
Objective:..........................................................................................................................................80
Required Equipment / tools:.............................................................................................................80
1. Introduction:..................................................................................................................................80
2. Procedure:.....................................................................................................................................80
2.1 Inserting Action Buttons..................................................................................................80
3. Using Hyperlinks:.........................................................................................................................82
4. Observation...................................................................................................................................82
5. Class Task:....................................................................................................................................83
6. Home Task:...................................................................................................................................83
7. Discussion and analysis of results:...............................................................................................83
8. Conclusion....................................................................................................................................83
Lab Session 8: Introduction to Computer Programming with C – Basic Concepts and Problem
Solving..................................................................................................................................................84
Objective:..........................................................................................................................................84
Required Equipment / tools:.............................................................................................................84
1. Introduction:..................................................................................................................................84
2. Procedure:.....................................................................................................................................84
2.1 Ensure your IDE and compiler are properly set up.........................................................84
2.2 Open the IDE and create a new C project........................................................................84
2.3 Follow the instructor's walkthrough to understand the basic C program structure:........84
6|Page
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

3. Observation...................................................................................................................................85
4. Class Task:....................................................................................................................................85
5. Home Task:...................................................................................................................................87
6. Discussion and analysis of results:...............................................................................................87
7. Conclusion....................................................................................................................................87
Lab Session 9: Flow Chart and Pseudo Code.......................................................................................88
Objective:..........................................................................................................................................88
Required Equipment / tools:.............................................................................................................88
1. Introduction:..................................................................................................................................88
2. Procedure for Writing Pseudo Code.............................................................................................88
2.2. Procedure for Creating Flowcharts.................................................................................88
3. Observation...................................................................................................................................94
4. Class Task:....................................................................................................................................94
5. Home Task:...................................................................................................................................95
6. Discussion and analysis of results:...............................................................................................95
7. Conclusion....................................................................................................................................95
Lab Session 10: Database Management and Querying in MS Access..................................................96
Objective:..........................................................................................................................................96
1. Introduction:..................................................................................................................................96
2. Procedure:.....................................................................................................................................96
2.1 Database:..........................................................................................................................96
2.2 Table:................................................................................................................................96
2.3 Forms:............................................................................................................................107
2.4 Reports:..........................................................................................................................109
2.5 Macros:..........................................................................................................................110
3. Observation.................................................................................................................................111
4. Class Tasks:.................................................................................................................................111
5. Home Tasks:................................................................................................................................111
6. Discussion and analysis of results:..............................................................................................112
7. Conclusion..................................................................................................................................112
Lab Session 11: Introduction to Web Development............................................................................113
Objective:........................................................................................................................................113
7|Page
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

1 Introduction:.................................................................................................................................113
Task 1: Create an HTML page with the following:.............................................................117
Task 2: Create a webpage that:............................................................................................117
Lab Session 12: Web Page Development using HTML and CSS.......................................................119
Objective:........................................................................................................................................119
1. Introduction:................................................................................................................................119
2. Procedure....................................................................................................................................119
3. Observation.................................................................................................................................120
Task #1............................................................................................................................................121
Task #2:...........................................................................................................................................121
Task #3:...........................................................................................................................................122
4. Home Tak....................................................................................................................................123
Task #1: Add a Styled Button.........................................................................................................123
Home Task #2: Responsive Design................................................................................................123
Home Task #3: Form Creation........................................................................................................124
5. Discussion and analysis of results:.............................................................................................124
6. Conclusion..................................................................................................................................124

CONTENTS
Lab Date List of Experiment Total Signature Page #
No. Marks

1.
Basic Document Formatting and Styles

8|Page
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

2. Using Macros and Automation in Word

3. Basic Formulas and Functions in Excel

4. PivotTables and PivotChart in Excel

5.
Excel Macros and VBA Automation
6.
Advanced Presentation Design and Animation
7. Open Ended Lab/Project Assigned 10

8.
Mid Term Examination 25

9. Interactive Presentations with Action Buttons

and Hyperlinks
10. Basic Programming Concepts

11. Flow Chart and Pseudo Code understandings

12. Database Management and Querying in MS

Access
13. Introduction to Web Development.

14. Basic Web Page Development using HTML and

CSS
15. Revision / Open Ended Lab/Project
Assessment
16 Open Ended Lab/Project Assessment

40
Final Examination

Psychomotor Rubrics for Software based Lab

Course Name (Course Code): ____________________________________________

Semester: ___________________________________________________________

9|Page
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

Criteria Exceeds Meets Developing Unsatisfactory

Expectations Expectations (50%-69%) (<50%)
(>=90%) (70%-89%)
Software Skills Ability to use Ability to use Ability to use Unable to use the
software with its software with its software with software
standard and standard and its
advanced features advanced standard
without assistance features with features with
minimal assistance
assistance
Programming Ability to Ability to Ability to Unable to
/ Simulation program/ simulate program/ program/ program/simulat
the lab tasks with simulate the lab simulate lab e
simplification tasks without tasks with
errors errors
Ability to achieve Ability to achieve Ability to Unable to achieve
Results all the desired all the desired achieve most of the desired results
results with results the
alternate ways desired results
with errors
Laboratory All sections of the All sections of Few sections of All sections of the
Manual report are very the report are the report report
well written and technically contain contain multiple
technically accurate. technical errors. technical errors.
accurate.

Psychomotor Rubrics Assessment Software based Lab

Course Name (Course Code): ____________________________________________

Semester: ___________________________________________________________
Lab # Score Allocation

10 | P a g e
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

Software Skills Programming/ Experimental Results Laboratory Manual Total

Marks (3) Simulation Marks (3) Marks (2) Marks (3)
Marks (2)
1

10

11

12

13

14

Total Marks 140 Total Obtained marks

Overall Score: ___________out of 14 Examined by: ___________________________

(Obtained Score / 140) x 14 (Name and Signature of lab instructor)

Affective Domain Rubrics Assessment

Course Name (Course Code): ________________________________________________________

Semester: _________________________________________________________

CATEGORY Excellent (100% - 85%) Good (84% - 75%) Fair (74% - 60%) Poor (Less than

11 | P a g e
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

60%)
Speaks clearly and Speaks clearly and Often mumbles or
Speaks clearly and distinctly most of the distinctly most of the cannot be understood
Speaks Clearly distinctly all the time, and time, but is confused for time, but seems and clearly lacks
confidently. a brief period of time, not confident about what confidence in
however, recovers. has been delivered. delivering
Shows lack of confidence. the content
Points:
Student is completely Student seems pretty The student is somewhat Student does not
Preparedness prepared and has obviously prepared but might have prepared, but it is clear seem at all prepared
rehearsed. needed a couple more that rehearsal was to present.
rehearsals. lacking.
Points
Student calmly listens to Student calmly listens to Student shows anxiety Student shows
Answer back the questions and responds the questions, responds while listening to the anxiety while
to the question confidently confidently but some of questions, and gives some listening to the
and correctly the responses are correct responses, but questions, and most
incorrect. some of the responses are of the responses are
incorrect. incorrect.

Points:
Stands up straight, looks Stands up straight and Sometimes stands up
Posture, Eye relaxed and confident. establishes eye contact straight and establishes Lazy and informal
Contact & Establishes eye contact with everyone in the eye contact. Volume is posture. Does not
Speaking Volume with everyone in the room room during the loud enough to be heard look at people during
during the presentation. presentation. by the audience, but the
Volume is loud enough to Volume is loud enough many sentences spoken presentation. Volume
be heard by all members in to be heard by the are not clear. is also too soft to be
the audience throughout the audience, but is heard by the
presentation. sometimes not audience.
audible.
Points:

Overall Score: ___________out of 14 Examined by: ___________________________

(Name and Signature of lab instructor)

Open Ended Lab Assessment Rubrics

Course Name (Course Code): ________________________________________________________

Semester: ________________________________________________________

12 | P a g e
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

Criteria and Scales

Excellent (10-8) Good Average (4- Poor (1-
(7-5) 2) 0)
Criterion 1: Understanding the Problem: How well the problem statement is understood by the student
Understands the problem clearly Adequately understands Inadequately defines Fails to define the problem
and clearly identifies the the problem and the problem and adequately and does not
underlying issues. identifies the identifies the underlying identify the underlying
underlying issues. issues. issues.
Criterion 2: Research: The amount of research that is used in solving the problem
Contains all the information Good research, leading Mediocre research which No apparent research
needed for solving the problem to a successful solution may or may not lead to an
adequate solution

Criterion 3: Class Diagram: The completeness of the class diagram

Class diagram with Class diagram withClass diagram with No Class diagram
complete notations incomplete notations improper naming
convention and notations
Criterion 4: Code: How complete and accurate the code is along with the assumptions
Complete Code according to the Incomplete Code Incomplete Code Wrong code and naming
class diagram of the given case according to the class according to the class conventions
with clear assumptions diagram of the given diagram of the given case
case with clear with unclear assumptions
assumptions
Criterion 5: Report: How thorough and well organized is the solution
All the necessary information Good information Mediocre information No report provided
clearly organized for easy use in organized well that which may or may not
solving the problem could lead to a good lead
solution to a solution

13 | P a g e
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

Open Ended Lab Assessment Rubrics

Course Name (Course Code): ________________________________________________________

Semester: ________________________________________________________

Criteria and Scales

Excellent Good Average (4-2) Poor (1-0) Total Marks
(10-8) (7-5) 10
Criterion 1: Understanding the Problem: How well the problem statement is understood by the student

(10-8) (7-5)% (4-2)% (1-0)%

Criterion 2: Research: The amount of research that is used in solving the problem

(10-8) (7-5)% (4-2)% (1-0)%

Criterion 3: Class Diagram: The completeness of the class diagram

(10-8) (7-5)% (4-2)% (1-0)%

Criterion 4: Code: How complete and accurate the code is along with the assumptions

(10-8) (7-5)% (4-2)% (1-0)%

Criterion 5: Report: How thorough and well organized is the solution

(10-8) (7-5)% (4-2)% (1-0)%

Total (____/5)

Total marks obtained: ____________________

Name and Signature of lab instructor: _____________________

14
 FACULTY OF ENGINEERING SCIENCES AND TECHNOLOGY

Final Lab Assessment

Assessment Tool CLO-1 (35) CLO-2 (35) CLO-3 (30)

Lab Manual

Subject Project / Viva

Lab Exam / Viva

Score Obtained

Total Score: ________ out of 100

Examined by:

(Name and Signature of concerned lab instructor)

15
App. Of info & communication Technologies (lab) Lab Session
01
Iqra University Department of Computer Science
Lab Session 1: Essential MS Word Formatting
Objective:
Gain proficiency in Word formatting, covering styles, section breaks, document management,
TOCs, and cross-references.

Required Equipment / tools:

1. A computer with Microsoft Word installed (any version with advanced formatting features).
2. A sample document to apply formatting techniques.

1. Introduction:
In this lab, you will learn to apply advanced formatting techniques in Microsoft Word. These
skills are essential for creating professional-looking documents, especially for long reports,
theses, and research papers. The lab will guide you through using custom styles, managing
section breaks, creating a table of contents, and applying cross-references for easier navigation.

2. Procedure:
Follow the steps given below to complete each task.

2.1 Creating and Applying Custom Styles

1. Open a new blank document in Microsoft Word.

Figure 1.2.1.1

16
App. Of info & communication Technologies (lab) Lab Session
01
Iqra University Department of Computer Science
2. Create a custom style for the title of the document:
 Go to the Home tab → open the Styles Pane → click New Style.

Figure 1.2.1.2

 Set the style name as "Lab Title" and format it with 24pt Times New Roman, Blue
colour.

Figure 1.2.1.3

3. Apply this style to the title of your document.

4. Create another custom style for section headers (e.g., “Lab Section Header”) with 16pt Bold,
Underlined text, with Blue color and apply it to each section heading.

Figure 1.2.1.4

17
App. Of info & communication Technologies (lab) Lab Session
01
Iqra University Department of Computer Science
2.2 Using Section Breaks

1. Add at least three sections to your document: Introduction, Method, and Results.
2. Insert section breaks between these sections:

 Go to the Layout tab → click on Breaks → choose Next Page under Section Breaks.

Figure 1.2.2.1

3. Verify that each section begins on a new page.

2.3 Managing Long Documents

1. Open the Navigation Pane by going to the View tab → check the box for Navigation
Pane.

Figure 1.2.3.1

2. Apply Heading 1 style to all section headers (Introduction, Method, Results).

3. Use the Navigation Pane to scroll through the sections of your document.
4. You can click on any of the section headers in the Navigation Pane to quickly jump to
that section of your document. This is particularly useful in long documents, as it allows
you to easily navigate between sections without scrolling manually.

18
App. Of info & communication Technologies (lab) Lab Session
01
Iqra University Department of Computer Science

Figure 1.2.3.2

2.4. Inserting a Table of Contents (TOC)

1. Place your cursor at the beginning of your document.

2. Insert a Table of Contents:

 Go to the References tab → click on Table of Contents → select an automatic

TOC format.

19

Fig 1.2.4.1
App. Of info & communication Technologies (lab) Lab Session
01
Iqra University Department of Computer Science

The TOC should reflect all your headings.

1. Add more sections and update the TOC by right-clicking on it → select Update Field.

Fig 1.2.4.2

2.5. Applying Cross-References

1. Insert a reference to the “Results” section within the “Introduction” section.

 Go to the References tab → click on Cross-reference.

Fig 1.2.5.1

 Choose Heading under Reference Type and select Page number under Insert
reference to.

2. This will link the Introduction to the Results section, showing the page number
dynamically.

20
App. Of info & communication Technologies (lab) Lab Session
01
Iqra University Department of Computer Science

Figure 1.2.5.2

2.6. Finalizing and Saving the Document

3. Review the document for correct formatting (styles, section breaks, TOC, cross-
references).
4. Save the document as Lab1_YourName.docx.

Figure 1.2.6.1
Class Tasks:
3. Observation

4. Class Tasks:
1. Design and apply a custom style for bullet points that includes a specific font and color
scheme to enhance document readability.
2. Create a multi-part document with at least four sections and use section breaks to change
the layout (e.g., landscape orientation for one section).
3. Use the Navigation Pane to organize your document by applying different heading levels
(Heading 1, Heading 2) to create a clear hierarchy of information.
21
App. Of info & communication Technologies (lab) Lab Session
01
Iqra University Department of Computer Science
5. Home Tasks:
1. Create a Table of Contents that automatically updates when you add or remove sections, and
customize its appearance using different styles.
2. Add at least two cross-references within your document that link to figures or tables,
ensuring they dynamically update when the document changes.
3. Perform a final review of your document for spelling and grammar, apply consistent
formatting, and save it in both .docx and .pdf formats.

6. Discussion and analysis of results:

7. Conclusion

22
App. Of info & communication Technologies (lab) Lab Session
02
Iqra University Department of Computer Science
Lab Session 2: Introduction to Macros and VBA
Objective:
The objective of this lab is to familiarize students with the process of creating and using macros
in Microsoft Word to automate repetitive tasks. Introduction to Visual Basic for Applications
(VBA) for more advanced automation.

1. Introduction:

What is a Macro?

A macro is a series of commands and actions that are recorded and can be executed later to
automate tasks. This is especially useful when repetitive tasks need to be done in documents,
such as formatting, applying styles, or inserting frequently used text.

Why Use Macros?

 Save time on repetitive tasks.

 Ensure consistency in formatting and document structure.
 Automate complex tasks with a single click.

2. Procedure

2.1 Setting Up Your Environment

Before you can start recording macros, ensure that your Word environment is set up to display
the Developer tab.

Steps:

1. Open Microsoft Word.

2. Go to the File menu and select Options.
3. In the Word Options dialog, click on Customize Ribbon.
4. Check the box next to Developer under the "Main Tabs" section.
5. Click OK. The Developer tab will now appear in your Word ribbon.

23
App. Of info & communication Technologies (lab) Lab Session
02
Iqra University Department of Computer Science
1) Open Microsoft Word Go to the File menu.

Figure 2.2.1.1

2) Select Options.

Figure 2.2.1.2

3) In the Word Options dialog, click on Customize Ribbon.

24
App. Of info & communication Technologies (lab) Lab Session
02
Iqra University Department of Computer Science

Figure 2.2.1.3

4) Check the box next to Developer under the "Main Tabs" section. Click OK. The Developer
tab will now appear in your Word ribbon.

Figure 2.2.1.4

25
App. Of info & communication Technologies (lab) Lab Session
02
Iqra University Department of Computer Science
2.2 Recording a Basic Macro

In this section, you will learn how to record a simple macro to automate a repetitive task, such as
applying bold and italics to a section of text.

Steps:

1. Go to the Developer tab and click on Record Macro.

Figure 2.2.2.1

2. In the Record Macro dialog box:

o Name the macro something meaningful, e.g., "BoldAndItalic".

Figure 2.2.2.2

o Assign a keyboard shortcut or save it as a button for easy access.

Figure 2.2.2.3

26
App. Of info & communication Technologies (lab) Lab Session
02
Iqra University Department of Computer Science
3. Select the document area where you want to apply formatting.

Figure 2.2.2.4

4. Apply the bold and italic formatting using the toolbar.

5. Click Stop Recording on the Developer tab.

Figure 2.2.2.5

You’ve now created a macro that automates bold and italic formatting!

2.3 Running and Editing a Macro

After recording a macro, you can run it anytime and even edit it for refinement.

Running the Macro:

1. To run the macro, press the keyboard shortcut you assigned or click the button in the
toolbar.
2. Watch the automation in action.

Editing the Macro:

1. Go to the Developer tab and click on Macros.

2. Select your macro and click Edit.

27
App. Of info & communication Technologies (lab) Lab Session
02
Iqra University Department of Computer Science

Figure 2.2.3.1

3. The VBA editor will open, displaying the VBA code for your macro. You can manually
edit the code here to adjust or extend the macro’s functionality.

2.4 Automating Formatting Tasks

Macros are especially useful for automating document formatting. Let’s create a macro that
automates the following:

1. Sets the font to Arial, size 12.

2. Applies bold to headings.
3. Aligns text to justify.

Steps:

1. Record a new macro following the previous steps.

2. Select some text and apply Arial, size 12 font.
3. Apply bold formatting to the selected text.
4. Justify the text alignment by going to the Home tab and clicking Justify.
5. Stop the recording.

This macro can now be used to quickly format new sections of text in any Word document.

28
App. Of info & communication Technologies (lab) Lab Session
02
Iqra University Department of Computer Science
3. Observation

4. Class Tasks:

1. Create a macro that automates the generation of a Table of Contents (TOC) in a Word
document.
2. You are required to create a macro that Create a macro that automates the formatting of
text by applying predefined styles throughout a Word document.
3. automates the insertion of a standardized header, footer, and page numbers in a Word
document.

5. Home Tasks:
You are required to create a macro that automates the insertion of a custom footer in a Word
document. The macro should perform the following tasks:

1. Add a footer that includes the document title aligned to the left and the current date
aligned to the right.
2. Create a macro that automates the insertion of a horizontal line as a paragraph separator
in a Word document.
3. Create a macro that automates the Insertion of Repeated Content (e.g., Signature, Legal
Disclaimer) in Microsoft Word.

6. Discussion and analysis of results:

29
App. Of info & communication Technologies (lab) Lab Session
02
Iqra University Department of Computer Science

7. Conclusion

30
App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

Lab Session 3: Advanced Formulas and Functions in

Excel
Objective:
Master advanced Excel by using array formulas, logical functions, lookups, and dynamic
formulas to streamline data analysis and improve decision-making.

Required Equipment / tools:

1. Microsoft Excel

1. Introduction:

In today's data-driven world, mastering advanced Excel formulas is essential for analyzing
complex data and making informed decisions. This guide defines key concepts and provides
real-world examples of their applications.

1.1 Array Formulas

Definition: Array formulas can perform multiple calculations on one or more items in an
array. They allow users to execute complex calculations that regular formulas cannot handle
alone.

Example: Imagine a sales team wants to calculate the total sales for multiple products across
different regions. Instead of summing individual products' sales one by one, an array formula can
sum all relevant sales data in one step. For instance, using {=SUM(A1:A10*B1:B10)} can calculate
the total sales by multiplying the number of units sold by their prices in two columns, returning a
single total.

Figure 3.1.1.1

1.2 Logical Functions (IF, AND, OR)

Definition: Logical functions evaluate conditions and return results based on true or false
outcomes.

Example: A marketing manager wants to classify customers based on their purchase history. If
a customer spent over $500, they should be labeled as a "Premium Customer"; otherwise, they
are labeled as "Standard Customer." An IF function can be written as:

31
App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

Figure 3.1.2.1

Figure 3.1.2.2

Using AND, the manager could also check if a customer meets multiple criteria. For instance:

This allows for nuanced classifications based on several conditions.

1.3 Lookup Functions (VLOOKUP, HLOOKUP, XLOOKUP)

Definition: Lookup functions search for specific data within a table and return corresponding
values.

Example: A human resources manager needs to find the salary of an employee based on their
ID. Using VLOOKUP, they can quickly retrieve this information:

Figure 3.1.3.1

Here, D2 contains the employee ID, and the function looks for it in the range A2, returning the
corresponding salary from the third column. XLOOKUP, a newer function, simplifies this by
allowing for both vertical and horizontal lookups, making it more versatile and user-friendly.

1.4 Dynamic Formulas (OFFSET, INDEX, MATCH)

Definition: Dynamic formulas provide advanced techniques for referencing data flexibly,
enabling more complex analyses.

Example: A financial analyst wants to find the sales figure for a specific month from a
dynamic range of data. Instead of hardcoding cell references, they can use INDEX and MATCH
together:

Figure 3.1.4.1

32
App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

This formula searches for "March" in column A and retrieves the corresponding sales data from
column B. OFFSET can also be useful for creating dynamic charts where the data range changes
based on the user's selection.

2. Procedure:

2.1 Array Formulas

How to Create an Array Formula:

1. Input Data:
Assume you have a list of products in Column A, quantities sold in Column B, and prices
in Column C.

Figure 3.2.1.1

2. Create the Array Formula:

To calculate total sales using an array formula, click on a cell (e.g., D1) and enter:

Figure 3.2.1.2

3. Explanation of the Formula:

 B2: This range includes the Quantity of products. The values in this range are the
quantities for Product A, Product B, and Product C.

1. B2: 10 (Quantity of Product A)

2. B3: 20 (Quantity of Product B)
3. B4: 5 (Quantity of Product C)

 C2: This range includes the Price of products. The values in this range are the prices
for Product A, Product B, and Product C.

1. C2: $5 (Price of Product A)

2. C3: $15 (Price of Product B)
3. C4: $10 (Price of Product C)

33
 App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

 B2*C2: This part of the formula performs element-wise multiplication between the
two ranges:

1. Product A: 10 (Quantity) * $5 (Price) = $50

2. Product B: 20 (Quantity) * $15 (Price) = $300
3. Product C: 5 (Quantity) * $10 (Price) = $50

 SUM: The SUM function adds the results of the multiplications:

$50 (Product A) + $300 (Product B) + $50 (Product C) = $400.

Key Points:

1. B2 represents the quantities of the products.

2. C2 represents the prices of the products.
3. The formula multiplies each corresponding quantity by its respective price.
4. The SUM function then totals the results of these multiplications, giving the final total sales
value.

Final Calculation:

1. Product A: 10 * $5 = $50
2. Product B: 20 * $15 = $300
3. Product C: 5 * $10 = $50
Total Sales = $400

This formula gives the total sales by multiplying the quantities and prices and summing the
results.

1. Confirm as an Array Formula:

Instead of pressing Enter, press Ctrl + Shift + Enter. Excel will display the formula enclosed in
curly braces {} indicating it's an array formula.
2. Expected Result:
The result will be the total sales, calculated as:

1. Product A: 10 * $5 = $50
2. Product B: 20 * $15 = $300
3. Product C: 5 * $10 = $50
4. Total Sales = $50 + $300 + $50 = $400
3. Final Table:

34
 App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

2.2 Logical Functions (IF, AND, OR) Figure 3.2.1.3

2.2.1 Using the IF Function:
1. Scenario:
Classifying customers based on their spending.

2. Input Data:

Figure 3.2.2.1.1

3. Create the IF Formula:

In Column C, enter:

Figure 3.2.2.1.2

1. Explanation of the Formula:

1. B2>500: This is the cell that contains the spending amount for the first customer (John,
$600). The formula checks if the value in this cell is greater than 500.
2. "Premium Active Customer": If the condition (B2 > 500) is true, it will return this
value, classifying John as a Premium Active Customer.
3. "Standard Customer": If the condition is false (if the spend is $500 or less), it will
return this value, classifying the customer as a Standard Customer.

5. Drag the Formula:

Drag the fill handle down to apply the formula to other cells.

6. Expected Result:

35
 App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

Figure 3.2.2.1.3

1. John: Since his spend is $600 (which is greater than $500), the formula will classify him as a
Premium Active Customer.
2. Sarah: Since her spend is $300 (which is less than $500), the formula will classify her as a
Standard Customer.

7. Final Table:

Figure 3.2.2.1.4

2.2.2 Combining IF with AND:

1. Scenario:
Classifying customers based on spending and activity status.
2. Input Data Update:

Figure 3.2.2.2.1

3. Create the Combined Formula:

Figure 3.2.2.2.2

36
 App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

4. Explanation of the Formula:

1. AND(B2 > 500, C2 = "Active"):

1. B2 > 500: This checks whether the value in B2 (the spending amount) is greater than 500.
2. C2 = "Active": This checks whether the value in C2 (the status) is equal to "Active".
3. The AND function ensures that both conditions must be true. If B2 is greater than 500
AND C2 is "Active", the AND function will return TRUE.

2. "Premium Active Customer":

1. This is the result returned if both conditions in the AND function are true. If the
customer’s spending is greater than 500 and their status is "Active", the formula will
classify them as a Premium Active Customer.

3. "Standard Customer":

1. This is the result returned if either of the conditions is false. If the customer’s spending is
500 or less, or their status is anything other than "Active", they will be classified as a
Standard Customer.

How the Formula Works:

1. B2 refers to the customer’s spend, and C2 refers to their status.

2. The AND function checks if both:
1. The spend is greater than 500, and
2. The customer is active.

If both conditions are true, the formula returns "Premium Active Customer".

If one or both conditions are false, the formula returns "Standard Customer".

5. Expected Result:

Figure 3.2.2.2.3

1. For John:
1. Spend = $600 (greater than 500, so condition is TRUE).
2. Status = "Active" (so condition is TRUE).
37
 App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

3. Since both conditions are true, John is classified as a Premium Active Customer.
2. For Sarah:
1. Spend = $300 (less than 500, so condition is FALSE).
2. Status = "Inactive" (so condition is FALSE).
3. Since one or both conditions are false, Sarah is classified as a Standard Customer.

6. Final Table:

Figure 3.2.2.2.4

2.2.3 Combining IF with OR:

Note:

Same as AND just a keyword AND will be replaced by OR.

1. Create the Combined Formula:

Figure 3.2.2.3.1

2. Explanation of the Formula:

1. OR (B2 > 500, C2 = "Active"):

1. B2 > 500: This checks if the value in B2 (spending amount) is greater than 500.
2. C2 = "Active": This checks if the value in C2 (status) is equal to "Active".
3. The OR function evaluates these two conditions. Only one of the conditions needs to
be true for the whole function to return TRUE.
2. "Premium Customer":
1. If either of the conditions in the OR function is true, the formula will return "Premium
Customer".
2. This means that if the customer spends more than 500 or their status is "Active", they
will be classified as a Premium Customer.
3. "Standard Customer":

38
 App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

1. If both conditions are false (i.e., the spend is less than or equal to 500 and the status is
not "Active"), the formula will return "Standard Customer".

How the Formula Works:

1. B2 refers to the spending amount, and C2 refers to the customer’s status.

2. The OR function checks if either:
1. The spend is greater than 500, or
2. The status is "Active".

If either condition is true, the formula returns "Premium Customer".

If both conditions are false, the formula returns "Standard Customer".

2.3 Lookup Functions (VLOOKUP, HLOOKUP, XLOOKUP)

2.3.1 Using VLOOKUP:

1. Scenario:

Finding employee salaries by ID.

2. Input Data:

Create a table in Excel with the following headings and data:

Figure 3.2.3.1.1

3. Input Employee ID:

In cell D2, enter the employee ID you want to look up. For example, enter 101.

39
 App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

Figure 3.2.3.1.2

4. Create the VLOOKUP Formula:

In another cell (e.g., E2), enter the following formula:

Figure 3.2.3.1.3

5. Explanation of the Formula:

1. D2: This is the cell where the employee ID (e.g., 101) is entered.
2. A2: This range includes your data (from A2 to C3). Adjust to A2, if you have more
employees.
3. 3: This indicates that you want to return the value from the third column in the specified
range (the Salary column).
4. FALSE: This specifies that you want an exact match.

6. Expected Result:

If everything is set up correctly, when you enter 101 in D2, the formula in E2 will return
$50,000.

Figure 3.2.3.1.4

7. Final Table:

40
App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

Figure 3.2.3.1.5

2.3.2 Using HLOOKUP:

Note:
For HLOOKUP, the data needs to be arranged in rows instead of columns.

Create the HLOOKUP Formula:

In cell E2, enter the following HLOOKUP formula:

Figure 3.2.3.2.1

1. Explanation of the Formula:

1. D2: This is the cell where the employee ID is entered (e.g., 101).
2. A1: This range includes your data (from A1 to C3). Adjust to A1, if you have more
employees.
3. 3: This indicates that you want to return the value from the third row in the specified
range (the Salary row).
4. FALSE: This specifies that you want an exact match.

Expected Result:
If everything is set up correctly, when you enter 101 in D2, the formula in E2 will return
$50,000.

Figure 3.2.3.2.2

41
 App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

Final Table:

Figure 3.2.3.2.3

Note:
In both examples, the VLOOKUP and HLOOKUP formulas allow you to look up data from your
table using an Employee ID, either vertically (VLOOKUP) or horizontally (HLOOK

2.3.3 Using XLOOKUP:

Note:

XLOOKUP is more flexible than VLOOKUP and HLOOKUP, allowing you to search in both
directions (vertical or horizontal) without needing to specify column numbers.

Create the XLOOKUP Formula:

In another cell (e.g., E2), enter the following formula:

Figure 3.2.3.3.1

1. Explanation of the Formula:

1. D2: This is the cell where the employee ID (e.g., 101) is entered.
2. A2: This is the range where the Employee IDs are located.
3. C3: This is the range that contains the salaries (the values you want to return).
4. "Not Found": This is the message that will be returned if the employee ID does not
exist in the table.

Expected Result:
42
 App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

If everything is set up correctly, when you enter 101 in D2, the formula in E2 will return
$50,000.

Figure 3.2.3.3.2

Final Table:

Figure 3.2.3.3.3

Advantages of XLOOKUP over VLOOKUP and HLOOKUP:

1. No need to specify column numbers: In VLOOKUP, you have to manually count and
specify which column you want to return data from. With XLOOKUP, you directly define the
lookup and return columns.
2. Works in both directions: XLOOKUP can look up data vertically (like VLOOKUP) or
horizontally (like HLOOKUP), but you don’t need two different functions for that.
3. Default for missing values: XLOOKUP allows you to specify what to return if a match is
not found (e.g., "Not Found"). This is an additional feature that neither VLOOKUP nor
HLOOKUP natively supports.

With XLOOKUP, you can perform more robust and versatile lookups with less setup and
hassle.

2.4. Dynamic Formulas (INDEX, MATCH, OFFSET)

2.4.1 Using INDEX and MATCH:

1. Scenario:
Finding sales figures for specific months.
43
App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

2. Input Data:

Figure 3.2.4.1.1

3. Create the INDEX and MATCH Formula:

To find sales for March, use:

Figure 3.2.4.1.2
1. Explanation of the Formula:

1. MATCH("March", A2, 0):

1. "March": This is the lookup value, meaning the formula will search for the
word "March" in the range A2
2. A2: This is the range where the formula looks for "March" (the month
names).
3. 0: This tells the formula to find an exact match for "March".
4. The MATCH function returns the position of "March" within the range. In
this case, "March" is in the third position (since it is the third row in the
range A2).

2. INDEX(B2, MATCH("March", A2, 0)):

1. B2: This is the range where the formula will retrieve the value (in this case,
the "Sales" column).
2. The INDEX function uses the position returned by MATCH to look up the
corresponding value from B2.
3. Since "March" is in the third position, INDEX retrieves the value from the
third row of the range B2, which is $250.

How It Works:

1. MATCH finds the position of "March" in the range A2 (3rd position).

2. INDEX then uses this position to retrieve the corresponding value from B2 (the
sales for March), which is $250.

44
App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

4. Expected Result:

Figure 3.2.4.1.3

5. Final Table:

To find sales for March, use:

Figure 3.2.4.1.4

2.4.2 Using OFFSET:

1. Scenario:
You have a table showing quarterly sales for different products. You want to use the
OFFSET function to display the sales data for the last quarter (Q4) in a separate column.
2. Input Data:

45
App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

Figure 3.2.4.2.1

3. Create the OFFSET Formula:

To retrieve the sales for Q4 using the OFFSET function, you can use the following
formula in the "Sales for Q4" column (e.g., in cell F2):

Figure 3.2.4.2.2

4. Explanation of the Formula:

1. B2: This is the starting reference point, which is the Q1 Sales for Product A.
2. 0: This indicates there is no vertical offset. It stays in the same row (Row 2).
3. 3: This specifies a horizontal offset of 3 columns to the right from the starting
reference (B2).
Moving 3 columns to the right takes you to E2, which contains the Q4 sales
for Product A.
4. Default Height and Width:
Since you did not specify height and width, OFFSET defaults to returning a
single cell reference. Therefore, it retrieves the value from E2.

4. Expected Result:

Figure 3.2.4.2.3

1. For Product A, the formula retrieves $550 for Q4 sales.

2. For Product B, it retrieves $450.
3. For Product C, it retrieves $750.

46
App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

5. Final Table:

Figure 3.2.4.2.4

3. Observation

4. Class Tasks:
1. Product Profitability Analysis: You have a dataset containing product names, cost
prices, and selling prices. Use logical functions ( IF, AND) to determine whether each product is
profitable (selling price greater than cost price) and categorize them as "Profitable" or "Not
Profitable." Present your results and discuss how such analysis can aid in product management
decisions.
2. Inventory Management: In a provided inventory sheet, use the INDEX and MATCH
functions to find the quantity of a specific item based on its name and the store location. Discuss
with your classmates how this approach differs from using VLOOKUP and why it may be more
advantageous in certain scenarios.

47
App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

3. Sales Forecasting: Based on historical sales data, create an array formula that
calculates the average sales for the last three months for a selected product. Use this
information to forecast sales for the next month. Share your methodology with the class
and discuss the implications of using array formulas for forecasting in business contexts.

5. Home Tasks:
1. Customer Lookup Table: You manage a customer database that includes customer IDs,
names, and email addresses. Using VLOOKUP (or XLOOKUP if available), create a
formula that retrieves a customer’s email address based on their customer ID. Test your
formula with various customer IDs to ensure its accuracy.
2. Dynamic Charting: You have a sales dataset for multiple products over the past year.
Using OFFSET and COUNTA, create a dynamic range for a chart that updates
automatically when new sales data is added. Explain how this dynamic range can help in
presenting data effectively.
3. Employee Performance Review: You have a dataset containing employee names, their
sales figures for the year, and a rating scale from 1 to 5. Using IF, OR, and AND
functions, create a formula that assigns an overall performance category of
"Outstanding," "Satisfactory," or "Needs Improvement" based on the following criteria:

 Outstanding: Sales greater than $50,000 and a rating of 4 or 5

 Satisfactory: Sales between $20,000 and $50,000 or a rating of 3
 Needs Improvement: Sales below $20,000 and a rating of 1 or 2

6. Discussion and analysis of results:

48
App. Of info & communication Technologies (lab) Lab Session
03
Iqra University Department of Computer Science

7. Conclusion

49
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

Lab Session 4: Data Analysis with PivotTables and Pivot

Charts
Objective:
The objective of this lab is to teach students how to prepare and clean data using Excel, enabling
accurate analysis. It focuses on utilizing Excel’s data cleansing tools, such as removing duplicates
and correcting errors, to ensure data quality. Additionally, students will learn to create Pivot Tables
and Pivot Charts, which are essential for summarizing large datasets and visualizing business
insights. By the end of the lab, students will be able to organize data, build reports, and generate
insights efficiently using Excel’s powerful features.
1. Introduction:
1.1 File Properties: (How to manipulate the file properties)
To manipulate file properties in Excel, follow these steps based on the image you've provided:
1. Open the Excel Workbook: Start by opening the Excel file whose properties you want to
change.
2. Access the Info Menu:
 Click on the File tab in the top-left corner of Excel.
 Select Info from the menu on the left.

3. Edit the Properties:

 In the Properties section, you can rename the file by typing in the new name in the field.
 To change the Author, click on the current name (e.g., "Clara Siegel") and choose
Remove Person by right-clicking on the name.
 After removing the previous author, you can type in the new Data Owner or your name as
the new author.
4. Save the File: Once you've made the changes, save the Excel file with the updated
properties.

This method allows you to update file metadata such as the title, author, and other properties related
to the document, ensuring the information reflects the current user or organization.

50
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

Figure 4.1.1: Manipulating the file properties

1.2 Data Understanding

1. Data understanding is the process of thoroughly exploring and analyzing a dataset.

2. It helps gain insights into the data's structure, quality, and meaning.

3. This step involves identifying data types, missing values, outliers, and potential errors.

4. It also assesses the relevance of the data to the specific problem being analyzed.

5. Ensures that the data is suitable for analysis by evaluating its accuracy and completeness.

6. Data understanding forms the foundation for effective data preparation and modeling in
analytical processes.

Figure 4.1.2.1: Understating the type of data

51
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

1.2.1 Create an Excel Table

Figure 4.1.2.1.1: Creating an excel using raw dataset

1.2.2 Rename the Table

Figure 4.1.2.2.1: Renaming the Table

1.3 Data Cleansing

1. Data cleansing involves detecting and correcting errors or inconsistencies in a dataset.

2. It includes removing duplicates, handling missing values, and fixing incorrect data.

3. Standardizing formats ensures consistency across the dataset.

4. The goal is to make the data reliable and accurate for analysis or decision-making.
52
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

5. Proper data cleansing helps avoid misleading results and improves the effectiveness of data-
driven processes.

1.3.1 Check the Data Type

Figure 4.1.3.1.1: Check the all data type.

1.3.2 Find Errors with Go-To Special Constants

“Go-To Special" in Excel is a tool that quickly locates specific types of data, like cells with
comments, formulas, or empty cells. It helps you easily find and work with the information you need
in a large dataset.

Figure 4.1.3.2.1: Using Go-To Special tool to find missing values.

53
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

1.3.3 Change Text to Column

Figure 4.1.3.3.1: Change text to column

Figure 4.1.3.3.2: Change text to column (cont.)

1.4 Data Validation

Data validation ensures that the data entered into a spreadsheet meets specific criteria, such as
allowing only numbers, dates, or predefined values. It helps maintain accuracy by preventing invalid
or incorrect data entries.

54
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

Figure 4.1.4.1: Performing data validation on columns.

Figure 4.1.4.2: Perform data validation on other worksheet.

1.5 Enabling Power Pivot Add-Ins

Power Pivot is an advanced Excel feature that allows you to create data models, establish
relationships between large datasets, and perform complex calculations for in-depth analysis. It
enhances Excel’s capabilities for managing and analyzing big data efficiently.
How to Add Power Pivot in Microsoft Excel?
1. Choose the File tab.

2. On the bottom left side of the window, choose Options.

3. Excel Options pop-up window will be opened. Choose Add-ins tab

55
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

4. Under the tab, go to Manage, choose COM Add-ins.

5. Click the “Go…” button.

56
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

Figur4.1.5.1: Adding power pivot to MS Excel.

1.5.1 Power Pivot: Data Modeling - Relationship

In Excel, Data Modeling-Relation is used to connect different tables by defining relationships
between them, typically through common fields. This allows for more efficient data analysis across
multiple datasets without duplicating information.

57
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

Figure 4.1.5.1.1: Data modelling creating relationship between tables

Figure 4.1.5.1.2: Data modelling creating relationship diagram.

1.5.2 Power Pivot: Calculate Gross Sale

1. Step 1: Choose PowerPivot tab.

2. Step 2: Choose Manage button.

3. Step 3: Key in formula for Gross Sale.

4. Step 4: Rename New Column to Gross Sale

5. Gross Sale = financial[Units Sold]*financial[Sale Price]

Key in Formula:
Gross Sale = financial[Units Sold]*financial[Sale Price]

Figure 4.1.5.2.1: Calculating the gross sale.

58
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

1.5.3 Power Pivot: Building Pivot Tables

In Excel, Pivot Tables in Excel are used to summarize, analyze, and organize large datasets, allowing
you to quickly extract meaningful insights. They help in easily grouping, filtering, and calculating
data without altering the original dataset.

Figure 4.1.5.3.1: Building Pivot Table.

1.5.4 Power Pivot: Building Pivot Charts

Pivot Charts in Excel are used to visually represent the data from Pivot Tables, making it easier to
analyze trends, patterns, and comparisons. They provide interactive and dynamic charts that
automatically update as the underlying data changes.

Figure 4.1.5.4.1: Building Pivot Table.

59
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

1.5.5 Power Pivot: Slicer

A slicer in Excel Power Pivot is a visual tool used to filter data in Pivot Tables or Pivot Charts. It
allows users to easily interact with and filter multiple data fields, making reports more dynamic and
easier to analyze.

Figure 4.1.5.5.1: Adding slicer.

2. Observation

3. Class Tasks

1. Data Cleansing and Preparation:

Clean the given financial dataset by removing duplicates, checking for missing values, and
correcting data types. Use the "Go To Special" tool to find errors and ensure all columns
contain valid data.
2. Creating and Renaming Excel Tables:

60
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

Convert the financial data into a structured table using the Excel table function. Rename the
table to "Financial" and ensure all columns are appropriately formatted.
3. Sorting and Filtering Data:

Apply sorting and filtering to identify the top 5 products by profit and sales volume. Use
filters to focus on specific segments, countries, or products as required.
4. Home Task

1. Building a Pivot Table:

Create a pivot table to display the total profit by product category. Then, extend the table to
show yearly sales and profits. Summarize the data to identify the top-performing product
categories.
Solution:

Total Profit by Product Category (Basic Pivot Table):

 Rows: Product Category

 Values: Sum of Profit (total profit for each product category)

Yearly Sales and Profits:

 Rows: Product Category

 Columns: Year (from a date field in your dataset)
 Values: Sum of Sales and Sum of Profit (total sales and profits for each category by year)

Summary:

 Comparing total sales and profits across product categories.

 Ranking categories by profit or sales.
 Identifying growth trends across years.

Example Data Structure:

Let's assume your data is in a table format with the following columns:

 Product Category
 Sales
 Profit
 Date

61
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

2. Creating a Pivot Chart:

Using the pivot table created in Task 4, generate a pivot chart that visualizes yearly sales and
profit trends. Add slicers to filter the data by product category or region.

Solution:
Steps to Create the Pivot Chart and Add Slicers:

1. Create the Pivot Table (if not already done):

 Make sure your pivot table includes:

 Rows: Product Category
 Columns: Year
 Values: Sum of Sales, Sum of Profit

2. Create the Pivot Chart:

 Highlight the pivot table.

 In Excel or Google Sheets:
 Go to the Insert tab.
 Select Pivot Chart (Excel) or Chart (Google Sheets).
 Choose a Combo Chart (with one axis for sales and another for profits).
 In Excel, select Combo Chart and choose "Clustered Column" for sales and "Line" for profits.
 In Google Sheets, select a chart type that can handle multiple data series (e.g., a Combo Chart or
Line Chart).

3. Customize the Chart:

 Label the axes: one for Sales (left axis) and one for Profit (right axis).
 Add data labels or markers to make trends more visible.
 Title the chart (e.g., "Yearly Sales and Profit Trends by Product Category").

 Add Slicers (to filter by product category or region):

62
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

4. Interactive Filtering:

 In Excel, use the slicers to filter by product category or region. The pivot table and chart will
automatically update based on your selections.
 In Google Sheets, use dropdowns or filters to change the data in the pivot table, which will reflect in
the chart.

Example Pivot Chart:

 X-axis: Year (e.g., 2022, 2023)

 Y-axis (left): Sales
 Y-axis (right): Profit
 Legend: Product Category (each product category could be a different color)

3. Calculating Gross Sales:

Use the Power Pivot add-in to create a calculated field for Gross Sales by multiplying "Units
Sold" with "Sale Price" from the dataset. Incorporate this calculation into a pivot table or
chart to visualize the Gross Sales by country.

5. Discussion and analysis of results:

6. Conclusion

63
App. Of info & communication Technologies (lab) Lab Session 04
Iqra University Department of Computer Science

64
App. Of info & communication Technologies (lab) Lab Session 05
Iqra University Department of Computer Science

Lab Session 5: Microsoft Excel Using Macros And VBA

Objective:
This lab aims to automate repetitive tasks in Microsoft Excel using Macros and VBA. It covers
modifying, and running Macros, as well as developing custom VBA scripts to automate tasks,
manipulate data, and enhance productivity by reducing manual effort in data processing and
reporting.
Required Equipment / tools:
1. A computer with Microsoft Excel installed (any version with advanced
formatting features).
2. Text editor (such as Notepad++) for writing and editing VBA scripts (optional
but helpful)

1.1 Introduction:
VBA is a high-level programming language built into Microsoft Office, enabling task automation,
custom functions, and extended capabilities in Excel, Word, and Access. When a macro is recorded,
VBA generates editable code for further customization. It enhances efficiency, simplifies repetitive
tasks, and streamlines workflows, making it a valuable tool for boosting productivity across
industries.
2.1 Procedure:
Follow the steps given below to complete each task.
2.1.1 Enable Developer Option in Excel
It hides the Developer tab on the ribbon by default. To customize the ribbon, follow the steps
mentioned below:

 Right-click on the ribbon (anywhere) and click on the Customize the Ribbon option.

Figure 5.2.1.1.1

 Go to Customize the Ribbon and select the Developer checkbox.

65
App. Of info & communication Technologies (lab) Lab Session 05
Iqra University Department of Computer Science

Figure 5.2.1.1.2

2.1.2 VBA Editor Interface

 You can open the VBA interface by using the ALT + F11 keyboard shortcut, or you can go to the
Developer tab and click on Visual Basic.

Figure 5.2.1.2.1
2.1.3
Create an Excel Macro using a Command Button

66
App. Of info & communication Technologies (lab) Lab Session 05
Iqra University Department of Computer Science

 Create a Command Button

 Now that you have enabled the developer tab and have some familiarity with the VBA editor,
let’s start creating a macro by using a command button.
 To place a command button on your worksheet, follow these steps:

 Go the Developer tab > Insert > ActiveX Controls > Command button.

Figure 5.2.1.3.1

 Drag the command button on your worksheet.

Figure 5.2.1.3.2

67
App. Of info & communication Technologies (lab) Lab Session 05
Iqra University Department of Computer Science

2.1.4 Assigning a Macro to a Command Button

 To assign a macro to the command button, follow these steps:

 Right-click on the command buttons and select View Code.

Figure 5.2.1.4.1

 Add the following lines of code shown below.

Figure 5.2.1.4.2
Fig 5.4.1

 Close the VBA editor and click on the command button on the worksheet. Make sure to deselect
the design mode.
68
App. Of info & communication Technologies (lab) Lab Session 05
Iqra University Department of Computer Science

Figure 5.2.1.4.3

2.1.5 Create a Message Box

 The MsgBox is a dialog box in Excel that will prompt a message on your worksheet. To create a
MsgBox, add the following lines of code to the command button.

Figure 5.2.1.5.1

 Now, when you click on the button, you will get the following message.

69
App. Of info & communication Technologies (lab) Lab Session 05
Iqra University Department of Computer Science

Figure 5.2.1.5.2

2.1.6 Create an Input Box

 The InputBox function prompts the user to enter the values and returns the information entered in
the dialog box.

 Syntax:

 InputBox(prompt[,title][,default][,xpos][,ypos][,helpfile,context])

 To add the InputBox to your command button, execute the following steps:

 Declare the variable name and keep the type variant. A variant variable can hold any type of
value.

 Add the following code to show the input box.

Figure 5.2.1.6.1

 Now when you click on the command button, you will get a prompt asking for a value.

70
App. Of info & communication Technologies (lab) Lab Session 05
Iqra University Department of Computer Science

Figure 5.2.1.6.2
Fig 5.6.1

 Enter your input and click OK. It will enter your input on cell A1.

2.1.7 Variables, Constant, and Operators in VBA

2.1.7.1 Variables
Variables are the data types that are used to hold a value. We can change the variables during the
execution of the program.

Syntax: Dim <<variable_name>> As <<variable_type>>

We can divide the VBA data types into two categories:

 Numeric Data Types: Numeric data types consist of byte, integer, long, single, double, currency,
and decimal.

 Non-Numeric Data Types: Non-numeric data types consist of string, date, boolean, object, and
variant.

71
App. Of info & communication Technologies (lab) Lab Session 05
Iqra University Department of Computer Science

Figure 5.2.1.7.1.1
Fig 5.7

2.1.7.2 Constants

 Constants are fixed values that cannot be changed during the execution of the program.

 Syntax:

 Const <<constant_name>> As <<constant_type>> = <<constant_value>>

 Example:

Figure 5.2.1.7.2.1

 When you click on the command button, you will get the following output:

Figure 5.2.1.7.2.2

72
App. Of info & communication Technologies (lab) Lab Session 05
Iqra University Department of Computer Science

3. Observation

4. Class Tasks:
1. Write VBA Script to Automatically Calculate the Sum of a Column
2. Macro to Copy and Paste Data
3. Create a basic UserForm that collects a user’s input and displays it in a worksheet.

5. Home Task:
1. Write a VBA Script to Autofill a Series of Numbers
2. Create a VBA script that displays a message box with a custom message.
3. Automate the process of inserting the current date and time in a specific cell.

6. Discussion and analysis of results:

7. Conclusion

73
App. Of info & communication Technologies (lab) Lab Session 06
Iqra University Department of Computer Science

Lab Session 6: Advanced Presentation Design and

Animation
Objective:
This lab aims to equip participants with skills to create polished, engaging presentations featuring
interactive and dynamic elements. Through hands-on exercises, they will enhance their presentation
abilities to a professional level.
1.1 Introduction to PowerPoint
Microsoft PowerPoint is a set of inter related desk top applications, servers and services, collectively
refers to as an office suit for the micro soft windows and MAC OSX operating systems.

PowerPoint is an application for making graphical presentations thus adding a visual aspect to our
data, enhancing its concept, and leading to easier communication. The software offers various
features like Customising colour schemes, adding graphics, images, and animation.
Start PowerPoint From Click on start ->programs->MS office ->PowerPoint

Figure 6.1.1.1

74
App. Of info & communication Technologies (lab) Lab Session 06
Iqra University Department of Computer Science

1.1.1 Using Slide Masters for Consistent Formatting.

Step 1: Open PowerPoint and create a new presentation.

Figure 6.1.1.1.1

Step 2: Go to the View tab and select Slide Master. This opens the Slide Master view.

Figure 6.2: View of Master Slider Figure 6.1.1.1.2

Step 3: In the left pane Customize your master slide by setting the background, fonts, colours, and
placeholders. Use the Format Background option for background designs.

75
App. Of info & communication Technologies (lab) Lab Session 06
Iqra University Department of Computer Science

Figure 6.3: left pane Customize Figure 6.1.1.1.3

To customize individual layouts, select a layout slide below the master slide and make any necessary
adjustments.
Step 4: Exit Slide Master view by clicking Close Master View in the ribbon.

Figure 6.1.1.1.4

76
App. Of info & communication Technologies (lab) Lab Session 06
Iqra University Department of Computer Science

1.1.2 Applying Advanced Animations

Step 1: Select the object (text, image, shape) you want to animate Go to the Animations tab.

Figure 6.1.1.2.1

Step 2: Adjust timing and sequence by dragging animations in the Animation Pane or by using the
Start dropdown (e.g., On Click, With Previous, After Previous).

Figure 6.1.1.2.2

For complex animations, select Effect Options to customize the direction or behaviours of the
animation.

77
App. Of info & communication Technologies (lab) Lab Session 06
Iqra University Department of Computer Science

1.1.3 Creating Custom Transitions

Step 1: Select the slide you want to apply a transition Choose a transition effect from the available
options.

Figure 6.6: Transitions Figure 6.1.1.3.1

Step 2: Adjust the duration of the transition by changing the time in the Duration box If desired,
check the box for On Mouse Click or set it to advance automatically after a specified time. Use the
Apply to All button to apply the same transition to all slides if needed.

Figure 6.7: Transition Timing Figure 6.1.1.3.2

78
App. Of info & communication Technologies (lab) Lab Session 06
Iqra University Department of Computer Science

1.1.4 Embedding Media (Videos, Audio)

Step 1: Embedding media like videos and audio in PowerPoint is a great way to enhance your
presentations. For video and audio click on the Insert tab, then select Video and choose Video on My
PC.

Figure 6.8: Embedding Media Figure 6.1.1.4.1

Step 2: Adjust playback options by selecting the media and going to the Playback tab. Here you can
choose to start automatically loop or hide during the show Resize and position the media on the slide
as needed.

Figure 6.9: playback options Figure 6.1.1.4.2

79
App. Of info & communication Technologies (lab) Lab Session 06
Iqra University Department of Computer Science

1.1.5 Using Hyperlinks to Create Non-Linear Navigation.

Step 1: Creating non-linear navigation with hyperlinks allows users to interact with your
presentation or document in a more dynamic way.
Select the object (text or image) you want to hyperlink Right-click on the object and select Link (or
click the Insert tab and then Link).

Figure 6.10: hyperlinks Figure 6.1.1.5.1

To link to another slide, select "Place in This Document" in the dialog box, choose the desired slide,
and click OK. For external links, enter the URL and confirm.

2. Observation

3. Class Tasks
1. Create a Slide Master for a Cohesive Theme
2. Design a Slide Master to ensure consistent formatting across your presentation.
3. Apply advanced animations to enhance the visual appeal of a specific slide.
4. Build an interactive presentation using hyperlinks for non-linear navigation.

80
App. Of info & communication Technologies (lab) Lab Session 06
Iqra University Department of Computer Science

4. Home Tasks
1. Personalize a PowerPoint theme by incorporating a logo, custom colors, and fonts to match a
company’s or organization's branding guidelines.
2. Create an interactive quiz using hyperlinks, buttons, and multimedia to engage the audience.
3. Visualize data effectively by inserting charts and graphs and customizing their appearance

5. Discussion and analysis of results:

6. Conclusion

81
App. Of info & communication Technologies (lab) Lab Session 07
Iqra University Department of Computer Science

Open-Ended Lab

Assessment of Open Ended Lab

Mapped GAs Bloom Taxonomy
GA 5 A2
GA 2 C3
Title:
Objective:

Motivation:

Concept:

Problem Statement:

Design / Ways & Means:

Students are required to follow the design constraints set out for the implementation of OEL:
 Introduction and Requirements
 Data Structure Selection
 Basic Implementation
 Performance Testing and Analysis
 Optimization and Advanced Features
 Extensions and Creativity

Analysis & Reporting /Answer:

Lab Activity:

Deliverables:

 Background/Theory
 Procedure / Methodology
 Data Collection (If required)
 Flowchart / Block diagram
 Analysis
 Results
 Discussion on Results
 Concluding Remarks
 Reference

82
App. Of info & communication Technologies (lab) Lab Session 07
Iqra University Department of Computer Science

Lab Session 7: Interactive Presentations with Action Buttons

and Hyperlinks
Objective:
Develop proficiency in creating interactive presentations using action buttons and hyperlinks,
focusing on the design of visually engaging slides, effective implementation of action buttons for
seamless navigation, creation of hyperlinks for accessing additional resources, and application of
triggered animations to enhance audience engagement.

Required Equipment / tools:

1. A computer with Microsoft PowerPoint installed.
2. A sample presentation to apply action buttons and hyperlinks.

1. Introduction:
In this lab, you will learn to create interactive presentations using action buttons and hyperlinks.
These skills are essential for making engaging and dynamic presentations that capture your
audience's attention. The lab will guide you through designing visually appealing slides,
implementing action buttons for easy navigation, creating hyperlinks to external resources, and
applying triggered animations to enhance interactivity.

2. Procedure:
Follow the steps given below to complete each task.
2.1 Inserting Action Buttons

1. Open a new blank Presentation in Microsoft PowerPoint.

Figure 7.2.1.1

2. Create a few slides and add some content

83
App. Of info & communication Technologies (lab) Lab Session 07
Iqra University Department of Computer Science

3. Insert Action Buttons from shapes into your presentation.

o Go to Insert Tab and click on Shapes.

Figure 7.2.1.1.2

Figure 7.2.1.2

o In the bottom of the list, you will find a section of action buttons.

4. Select anyone you want and add it anywhere in the ppt you want to add it.

5. After drawing it, another pop-up screen will open on your screen to choose the action you want
that certain action button to perform

Figure 7.2.1.3

84
App. Of info & communication Technologies (lab) Lab Session 07
Iqra University Department of Computer Science

6. Choose your desired settings. If you want to select any specific slide from your PPT. You can
Choose Slide… option which will help you select any specific slide you want to move to using
Action Button.

Figure 7.2.1.4
7. Open in view mode or run ppt to test the action buttons.

3. Using Hyperlinks:

1. You can these Interactive actions to any element you want.

2. Select that element and follow the steps:

a. Go to Insert > Actions

Figure 7.3.1
b. Follow the previous Steps.
3. Run the ppt and verify that the hyperlinks are properly working.

4. Observation

85
App. Of info & communication Technologies (lab) Lab Session 07
Iqra University Department of Computer Science

5. Class Task:
1. Create a title slide that includes your presentation title, your name, and the date. Use at least
one image or graphic to enhance the design.
2. Create a three-slide presentation. Insert action buttons to navigate between these slides (e.g.,
"Next," "Back," and "Home"). Test the buttons in presentation mode
3. Select an image or text on any slide and add a hyperlink to a relevant external resource (e.g.,
a website or article). Ensure that the hyperlink opens in a new tab when clicked

6. Home Task:
1. On one of your slides, apply at least two triggered animations (e.g., an object that appears
when another object is clicked). Make sure to test the animations in presentation mode.
2. Add a new slide titled "Quiz" with a question and at least three answer options. Use action
buttons to link each answer to a slide that indicates whether the answer is correct or incorrect.
3. Review your entire presentation for design consistency, functionality of interactive elements,
and overall flow. Save your final presentation and prepare to present it.

7. Discussion and analysis of results:

8. Conclusion

86
App. Of info & communication Technologies (lab) Lab Session 08
Iqra University Department of Computer Science

Lab Session 8: Introduction to Computer Programming

with C – Basic Concepts and Problem Solving
Objective:
To familiarize students with basic C programming concepts. To enable students to write simple
programs using variables, operators, and control structures. To practice debugging and compiling
code using an Integrated Development Environment (IDE).

Required Equipment / tools:

1. A computer with a C compiler installed (e.g., GCC or Turbo C).
2. Integrated Development Environment (IDE) like Code: Blocks or Dev-C++.
3. A text editor (optional) such as Notepad++.
4. Lab handout for reference.

1. Introduction:
In this lab, students will learn to write simple C programs, understand basic syntax, and use control
structures. The lab will focus on: Writing programs using variables and operators. Using conditional
statements (if-else) to solve problems. Understanding loops for iterative tasks. By the end of this lab,
students will have hands-on experience in creating and running their first C programs.

2. Procedure:
Follow the steps given below to complete each task

2.1 Ensure your IDE and compiler are properly set up.
2.2 Open the IDE and create a new C project.
2.3 Follow the instructor's walkthrough to understand the basic C program structure:

 Header files (#include directive)

 main() function
 Printing output using printf()
 Declaring variables and taking input using scanf().

87
App. Of info & communication Technologies (lab) Lab Session 08
Iqra University Department of Computer Science

3. Observation

4. Class Task:

1 Create a simple program to take input from the user and display a message.

Steps:

1. Write a C program that:

o Declares a variable of type int.
o Takes input from the user for that variable.
o Prints the entered value back to the screen.

1. #include <stdio.h>
2.
3. int main() {
4. int num;
5. printf("Enter an integer: ");
6. scanf("%d", &num);
7. printf("You entered: %d\n", num);
8. return 0;
9. }
Expected Outcome: The program should display the entered integer.

2 Write a program to perform basic arithmetic operations.

Steps:

1. Declare two integer variables.

2. Take input for these variables.
3. Perform addition, subtraction, multiplication, and division, and print the results.

88
App. Of info & communication Technologies (lab) Lab Session 08
Iqra University Department of Computer Science

1. #include <stdio.h>
2.
3. int main() {
4. int a, b;
5. printf("Enter two integers: ");
6. scanf("%d %d", &a, &b);
7. printf("Sum: %d\n", a + b);
8. printf("Difference: %d\n", a - b);
9. printf("Product: %d\n", a * b);
10. printf("Quotient: %d\n", a / b);
11. return 0;
12. }
Expected Outcome: The program should display the results of all operations.

3 Write a program to check whether a number is even or odd.

Steps:

1. Take an integer as input.

2. Use an if-else statement to check if the number is divisible by 2.
3. Print "Even" if true, otherwise print "Odd".

1. #include <stdio.h>
2.
3. int main() {
4. int num;
5. printf("Enter a number: ");
6. scanf("%d", &num);
7. if (num % 2 == 0) {
8. printf("Even\n");
9. } else {
10. printf("Odd\n");
11. }
12. return 0;
13. }
Expected Outcome: The program should correctly classify numbers as even or odd.

89
App. Of info & communication Technologies (lab) Lab Session 08
Iqra University Department of Computer Science

5. Home Task:

1. Write a program to calculate the area of a circle.

Hint: Use the formula Area = π * r * r. Take π as 3.14159.

2. Write a program to take three integers as input and print the largest number using nested if-
else.

3. Write a program to display the multiplication table of a number entered by the user.

6. Discussion and analysis of results:

7. Conclusion

90
App. Of info & communication Technologies (lab) Lab Session 09
Iqra University Department of Computer Science

Lab Session 9: Flow Chart and Pseudo Code

Objective:

The goal of this lab is to help students develop problem-solving skills using flowcharts and
pseudo code. By the end of the lab, students will be able design structured flowcharts for
basic and intermediate problems, write pseudo code to represent algorithms clearly, correlate
flowcharts and pseudo code with program logic.

Required Equipment / tools:

1. Microsoft Visio flowchart tool.

2. Notepad or MS Word for writing pseudo code.

1. Introduction:

Flowcharts and pseudo code are key tools for designing and understanding algorithms. Flow
Chart is a graphical representation of an algorithm using symbols to depict processes,
decisions, and data flow. Flowcharts use symbols like ovals (start/end), rectangles (process),
diamonds (decision), and arrows (flow) to represent program logic visually. Pseudo code
complements this by providing a high-level, plain-English description of program logic
without strict syntax.

2. Procedure for Writing Pseudo Code

1. Understand the Problem:

 Read the problem to identify inputs, expected outputs, and the operations
needed.

2. Break the Problem into Steps:

 Divide the problem into smaller tasks and identify necessary conditions or
loops.

3. Write the Pseudo Code:

 Use simple, plain language to describe each step.
 Include key elements:
 Input: Define inputs.
 Process: Describe actions.
 Decision: Include conditions (if-else).
 Loop: Use loops for repetition.

2.2. Procedure for Creating Flowcharts

1. Understand the Problem:

 Review the problem statement and identify key inputs, outputs, and
operations.
91
App. Of info & communication Technologies (lab) Lab Session 09
Iqra University Department of Computer Science
 Break the problem into distinct steps or decisions.

2. Choose Appropriate Flowchart Symbols:

 Use standard flowchart symbols:
 Oval: Start/End
 Rectangle: Process or action
 Parallelogram: Input/Output
 Diamond: Decision (Yes/No)
 Arrows: Show the flow of control

3. Design the Flowchart:

 Start with the Start symbol (Oval).
 Add steps sequentially, connecting them with arrows.
 Include decision points (Diamonds) where necessary, and follow the true/false
path.
 Add input/output symbols (Parallelograms) to represent data being entered or
displayed.
 End with the End symbol (Oval).

Examples:
2.3. Pseudo code & flowchart for adding two numbers.
Pseudo code:

Figure 9.2.3.1

92
App. Of info & communication Technologies (lab) Lab Session 09
Iqra University Department of Computer Science
Flowchart:

Figure 9.2.3.2

2.4. Pseudo code & flowchart for subtracting two numbers.

Pseudo code:

Figure 9.2.4.1

93
App. Of info & communication Technologies (lab) Lab Session 09
Iqra University Department of Computer Science

Flowchart:

Figure 9.2.4.2

2.5. Write a pseudo-code and draw a flowchart to convert a temperature from Celsius to
Fahrenheit using the formula:

Pseudocode:

Figure 9.2.5.1

94
App. Of info & communication Technologies (lab) Lab Session 09
Iqra University Department of Computer Science
Flowchart:

Figure 9.2.5.2

2.6. Write a pseudo-code and draw a flowchart to calculate and display the area of a triangle
using the formula:

Pseudocode:

Figure 9.2.6.1

95
App. Of info & communication Technologies (lab) Lab Session 09
Iqra University Department of Computer Science
Flowchart:

Figure 9.2.6.2

2.7. Write a pseudo-code and draw a flowchart to calculate and display the area of a
rectangle using the formula Area=length×width.
Pseudocode:

Figure 9.2.7.1

96
App. Of info & communication Technologies (lab) Lab Session 09
Iqra University Department of Computer Science
Flowchart:

Figure 9.2.7.2

3. Observation

4. Class Task:
1. Write a pseudo-code and draw a flowchart to multiply two numbers and display the
result.
2. Write a pseudo-code and draw a flowchart to convert a temperature from Fahrenheit
to Celsius using the formula C =9/5×(F−32) and display the result.
3. Write a pseudo-code and draw a flowchart to calculate the area of a triangle given its
three sides (a, b, c) using the formulas:

97
App. Of info & communication Technologies (lab) Lab Session 09
Iqra University Department of Computer Science

5. Home Task:
1. Write a pseudo-code and draw a flowchart to calculate and display the area of a circle
using the formula Area=πr2.
2. Write a pseudo-code and draw a flowchart to check if a given number is even or odd
and display the result.
3. Write a pseudo-code and draw a flowchart to find and display the largest of three
given numbers.

6. Discussion and analysis of results:

7. Conclusion

98
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science

Lab Session 10: Database Management and Querying

in MS Access
Objective:
The goal is to develop skills in managing relational databases using Microsoft Access,
focusing on advanced queries and data manipulation for informed decision-making.
1. Introduction:
This lab provides a broad overview of Access and introduces general database terminology. It
focuses on understanding databases from an end-user perspective, their structure, and usage.
2. Procedure:

2.1 Database:
A database is a collection of related information and are designed to allow easy extraction
and use of the stored data. There are five main things (objects) you will find in an Access
database: tables,
queries, forms, reports, and macros.
2.2 Table:
A table in Microsoft Access organizes related data into fields (columns) and records (rows).
Multiple tables can be stored in a single database.

Table is an object which stores

data in Row & Column format
to store data.
¥ A Table is usually related
to other tables in the database
file.
¥ Each column must have
Unique name

99
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science

¥ We can also define

Primary Key in a table.
2.2.1 Data types in Table:
Microsoft Access supports various data types for tables, including Short Text, Long Text,
Number, Date/Time, Currency, AutoNumber, Yes/No, OLE Object (for linking files like
Word or Excel), Hyperlink, and Attachment. A key element in table design is setting a
primary key, which uniquely identifies each record, such as using a Vehicle Identification
Number (VIN). Every table must have a primary key to ensure record uniqueness.

Figure 13.2.2.1.1

2.2.2 How to create a Table?

To create a table in Microsoft Access 2013 or 2016:

1. Click CREATE from the Ribbon

2. Click Table

100
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science
Here’s what that button looks like on the Ribbon:

You can add new fields in several ways. You can click on the Click to Add text and assign a
data type for the new field (Access requires that you assign each field a data type)

To rename a field, right click on the field name and select Rename Field. You can also change
the data type of any field by using the Data Type option in the Ribbon (from the FIELDS
tab).

2.2.3 Queries
Queries enable you to extract data from your database tables and allow us to answer
questions we have about the data. Queries answer a question by selecting, sorting and
filtering data based on search criteria.
Action Queries:
1. Select queries are used to determine which records and fields are displayed and their
sort order, but they do not change the contents of the fields in the table.
Access also lets you create Action queries, which change existing data or add new data to
tables. You can use the following types of Action queries:

Figure 13.2.2.3.1
1. An Append query adds the data in records in the current table to another table.
2. An Update query changes the data in the table in ways that you specify.
3. The Make Table query creates a new table that holds the data that is the result of the
query.
4. The Delete query deletes records that you specify.

Append Query:
You can use an Append Query to retrieve data from one or more tables and add that data to
another table. Let us create a new table in which we will add data from
the tblEmployees table. This will be temporary table for demo purpose. Let us call
it TempEmployees and this contains the fields as shown in the following screenshot.

Figure 13.2.2.3.2

Figure 13.2.2.3.3

101
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science

Figure 13.2.2.3.4

In the Tables tab, on the Show Table dialog box, double-click on the tblEmployees table and
then close the dialog box. Double-click on the field you want to be displayed.

Figure 13.2.2.3.5

Let us run your query to display the data first.

Figure 13.2.2.3.6

Now let us go back to Query design and select the Append button. This will display the
following dialog box.

102
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science
Figure 13.2.2.3.7

Select the table name from the drop-down list and click Ok.

Figure 13.2.2.3.8

In the Query grid, you can see that in the Append To row all the field are selected by default
except Address1. This because that Address1 field is not available in
the TempEmployee table. So, we need to select the field from the drop-down list.

Figure 13.2.2.3.9

Let us look into the Address field.

103
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science

Figure 13.2.2.3.10

Let us now run your query and you will see the following confirmation message.

Figure 13.2.2.3.11

Click Yes to confirm your action.

Figure 13.2.2.3.12

When you open the TempEmployee table, you will see all the data is added from the
tblEmployees to the TempEmployee table.

2.2.4 Update Query

An Update Query allows you to modify data in your tables by specifying criteria for which
rows should be updated. It also gives you the option to review the changes before executing
the update. To create an Update Query, go to the Create tab and click on Query Design.

104
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science

Figure 13.2.2.4.1

Figure 13.2.2.4.2

On the Design tab, in the Query Type group, click Update and double-click on the field in
which you want to update the value. Let us say we want to update the FirstName of “Rex” to
“Max”.

Figure 13.2.2.4.3

In the Update row of the Design grid, enter the updated value and in Criteria row add the
original value which you want to be updated and run the query. This will display the
confirmation message.

105
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science

Figure 13.2.2.4.4

Click Yes and go to Datasheet View and you will see the first record — FirstName is updated
to “Max” now.

Figure 13.2.2.4.5

2.2.5 Delete Query

You can use a delete query to delete data from your tables, and you can use a delete query to
enter criteria to specify which rows should be deleted. A Delete Query provides you an
opportunity to review the rows that will be deleted before you perform the deletion. Let us go
to the Create tab again and click Query Design.

Figure 13.2.2.5.1

In the Tables tab on the Show Table dialog box, double-click the tblEmployees table and
then close the dialog box.

106
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science

Figure 13.2.2.5.2

On the Design tab, in the Query Type group, click Delete and double-click on
the EmployeeID.

Figure 13.2.2.5.3

In the Criteria row of the Design Grid, type 11. Here we want to delete an employee whose
Employee ID is 11.

Figure 13.2.2.5.4

Let us now run the query. This query will display the confirmation message.

107
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science

Figure 13.2.2.5.5

Click Yes and go to your Datasheet View and you will see that the specified employee record
is deleted now.

Figure 13.2.2.5.6

2.2.6 Make a table Query:

You can use a make-table query to create a new table from data that is stored in other tables.
Let us go to the Create tab again and click Query Design.

Figure 13.2.2.6.1

In the Tables tab, on the Show Table dialog box, double-click the tblEmployees table and
then close the dialog box.

108
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science

Figure 13.2.2.6.2

Select all those fields which you want to copy to another table.

Figure 13.2.2.6.3

In the Query Type, select the Make Table option button.

Figure
Fig. 13.2.2.6.4
8.2.4.4

109
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science
You will see the following dialog box. Enter the name of the new table you want to create and
click OK.

Figure 13.2.2.6.5

Click Yes and you will see a new table created in the navigation pane.

Figure 13.2.2.6.6

Warning: Action queries in Access are fast and irreversible, so always back up your tables to
avoid data loss. Unlike select queries.

110
 App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science
2.3 Forms:
Forms in Access are user-friendly tools based on tables or queries, used for entering, editing,
and viewing data, as well as creating a menu system for the database. Since forms are often
the main interface for end users, it's important to design them well. The Form Wizard helps
create forms efficiently. Once created, forms can be viewed in Form View, Layout View, or
Design View.
How to create a form?
You have the option of creating a blank form from scratch, using the Form Wizard, or having
Access automatically create a form from a table or query. From Create tab, go to Forms,
different types of forms can be seen. Click Form Design. Once form is created, it can be seen
in navigation pane. Another way of creating form is go to navigation pane, click the table that
contains the data you want to see on your form. On Create tab, in Forms group, click Form.

Figure 13.2.3.1

Close the left navigation pane (using the « icon) so that there's more room to display the form.

2.3.1 Design View:

Design View provides a more detailed view of the form's structure than Layout View.

Figure
Fig.13.2.3.1.1
8.3.2

111
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science
2.3.2 Layout View:

Layout View provides a more visual layout for editing the form. It bears a close resemblance
to the actual form that the user will see. Layout View allows you to edit the form properties
while it has real data.

Figure 13.2.3.2.1

2.3.3 Form View:

Form View is how the user will see the form. You can't edit the form's properties, but you can
use the form just as a user would.

Figure 13.2.3.3.1
Figure 8.3.4

Change form design and adjust settings. Explore multiple controls from control tab. Also,
fields from existing table can be added from Add existing fields by double clicking on it.

112
 App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science
2.4 Reports:
Reports in Access use data from tables or queries to create a professionally formatted output,
allowing users to summarize, sort, group, and display data.
Reports contain several sections:
How to create a Report?
Go to create tab in Ribbon, different types of reports can be seen, click Report wizard. Add
fields you want to add by clicking single arrow, Click next.

Figure 13.2.4.1
Figure 8.4.1

Select the layout of report. Table based layout is preferred.

Figure 13.2.4.2

You can see Report view is generated, but it is slightly mismanaged.

Report
header
Page
header

Detail
Section
Figure 13.2.4.3

Close Print view and open it via design view to edit it. Resize fields and labels by selecting
them and then dragging the edges until they are the size you want. Move a field by selecting
it and drag it to new location. Right click a filed and use the commands on shortcut menu to
merge or splits cells, delete or select fields and perform other formatting task.

113
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science

Figure 13.2.4.4
Figure 8.4.4

Final Report can be seen through Report view.

Figure 13.2.4.5

2.5 Macros:
Macros in Microsoft Access are small programs that automate tasks, making the database
more functional and user-friendly. Instead of manually executing a series of commands, a
macro stores these actions and performs them automatically. You can create macros to open
tables, forms, or reports, display messages, or manipulate windows (e.g., minimize,
maximize). In short, macros can execute any command or combination of commands to
streamline database usage.
How to create a Macro?
From the Create tab on the ribbon, tap to the Macro. This will open a blank macro, which is
ready to use.

Figure
Figure 8.5.1
13.2.5.1

From the combo box, select OpenForm. Or else you can make double tap on the OpenForm
from action catalog present on the right side of the screen.

114
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science

Figure 13.2.4.2

From the form Name combo box, choose Set view to form & window mode to normal.
Select Form Name (table name you want to create form of that table) from combo box.

Figure 13.2.4.3

3. Observation

4. Class Tasks:
1. Design a user-friendly data entry form for the "Customers" table. Include fields for
customer name, address, and contact information, with navigation buttons for easy
record management.
2. Use an Append Query to add new product information from a temporary table to the
"Products" table. This can streamline bulk data updates.
3. Create a macro that opens the customer data entry form with one click.

5. Home Tasks:
1. Make a simple form for entering new customer names and emails into the
"Customers" table.
2. Create a report that lists all customer names and emails from the "Customers" table.
115
App. Of info & communication Technologies (lab) Lab Session 10
Iqra University Department of Computer Science
3. Create an Update Query to increase the price of all products in the "Products" table by
10%. This helps maintain accurate pricing.

6. Discussion and analysis of results:

7. Conclusion

116
App. Of info & communication Technologies (lab) Lab Session 11
Iqra University Department of Computer Science

Lab Session 11: Introduction to Web Development

Objective:

The objective of this lab is to introduce students to the basics of web development, focusing
on the foundational language of web design: HTML (HyperText Markup Language). By the
end of this session, students will be able to:

 Understand the structure of a web page.

 Create a simple HTML document using essential tags.
 Understand the role of HTML in web development.
 Gain hands-on experience in designing a basic web page layout.

Required Tool
 A computer with a text editor (e.g., Visual Studio Code, Sublime Text, or Notepad++)
installed.
 A web browser (e.g., Google Chrome, Firefox, or Edge).
 Internet connection (optional for additional resources).
 Lab handout with HTML and CSS examples.

1 Introduction:
Web development is the process of creating websites and web applications that can be
accessed over the internet. The foundation of every web page starts with HTML, a markup
language used to define the structure and content of a web page.

The word Web Development is made up of two words, that is:

Web: It refers to websites, web pages or anything that works over the internet.
Development: It refers to building the application from scratch.
Web Development can be classified into two ways:
1. Frontend Development
2. Backend Development
1.1 Frontend Development
The part of a website where the user interacts directly is termed as front end. It is also
referred to as the ‘client side’ of the application. Front-end development involves the visual
and interactive aspects of a website—the parts users directly interact with. It includes
creating layouts, designs, and responsive features.

Key Technologies in Front-End Development:

HTML (HyperText Markup Language): Structures content on the web.

CSS (Cascading Style Sheets): Styles the content with colors, layouts, and designs.
JavaScript: Adds interactivity, such as animations, dropdown menus, or form validation.
Frameworks/Libraries: Tools like React, Angular, and Vue.js help streamline front-end
development.

1.1.2 Back-End Development

117
App. Of info & communication Technologies (lab) Lab Session 11
Iqra University Department of Computer Science
Back-end development focuses on the server-side logic and database management—the
parts of a website users don't see. It ensures that the website functions as expected by
managing data and enabling communication between the server and front-end.

Key Technologies in Back-End Development:

1. Server-Side Languages: Examples include Python, PHP, Java, Ruby, and Node.js.
2. Databases: Tools like MySQL, MongoDB, and PostgreSQL store and manage data.
3. APIs (Application Programming Interfaces): Connect the front-end and back-end
to exchange data.
4. Web Servers: Software like Apache and Nginx hosts the back-end applications.

2. Procedure

Introduction to Basic HTML

HTML (HyperText Markup Language) is the standard markup language used to create and
structure content on the web. It defines the structure of web pages using elements represented
by tags.

Figure 10.2.1.1

118
App. Of info & communication Technologies (lab) Lab Session 11
Iqra University Department of Computer Science
<!DOCTYPE html> – This is the document type declaration, not a tag. It declares that
the document is an HTML5 document.
<html> – This is called the HTML root element. All other elements are contained within
it.
<head> – The head tag contains the “behind the scenes” elements for a webpage.
Elements within the head aren’t visible on the front end of a webpage. Typical elements
inside the <head> include:
<title>: Defines the title displayed on the browser tab.
<meta>: Provides information like the character set or viewport settings.
<link>: Links external stylesheets or resources.
<style>: Embeds internal CSS styles.
<script>: Embeds JavaScript for functionality.
<title> – The title is what is displayed on the top of your browser when you visit a
website and contains the title of the webpage that you are viewing.
<h2> – The <h2> tag is a second-level heading tag.
<p>– The <p> tag represents a paragraph of text.
<body> – The body tag is used to enclose all the visible content of a webpage. In other
words, the body content is what the browser will show on the front end

Step 1: Setting Up the Environment

1. Install a code editor such as VS Code, Sublime Text, or use a browser-based editor
like Code Pen.
2. Open your editor and create a new file named index.html.

Step 2: Writing Your First HTML Document

1. Start with a basic HTML template

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to Web Development!</h1>
<p>This is my first web page created using HTML.</p>
</body>
</html>
2. Save the file with .html extension and open it in a web browser to view your first web
page.

119
App. Of info & communication Technologies (lab) Lab Session 11
Iqra University Department of Computer Science

3. Observation

4. Lab Tasks
Task 1: Create a Simple Webpage Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Welcome to My Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>

Task 2 Add Lists to a Webpage

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>My Favorites</title>
</head>
<body>
<h2>My Favorite Fruits</h2>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ol>
<h2>My Hobbies</h2>
<ul>
<li>Reading</li>

120
App. Of info & communication Technologies (lab) Lab Session 11
Iqra University Department of Computer Science
<li>Painting</li>
<li>Cycling</li>
</ul>
</body>
</html>
Task 3: Add Links and Images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Links and Images</title>
</head>
<body>
<h2>My Favorite Website</h2>
<p>Visit <a href="https://www.google.com" target="_blank">Google</a>
for all your search needs!</p>

<h2>My Favorite Image</h2>

<img src="https://via.placeholder.com/150" alt="Placeholder Image">
<p>This is a sample placeholder image.</p>
</body>
</html>

5. Home Tasks
Task 1: Create an HTML page with the following:

 A title that says "About Me."

 A heading with your name.
 A paragraph introducing yourself, including your favorite color and hobby.
 A second heading that says "Contact Info."
 A paragraph with your email address.

Task 2: Create a webpage that:

 Displays an ordered list of at least five grocery items.

 Displays an unordered list of household items.

Task 3: Create a webpage that displays a list of your top three favorite websites with
clickable links. Each link should:

 Open in a new tab.

 Include a brief description of the website below the link.

6. Discussion and Analysis of Results

121
App. Of info & communication Technologies (lab) Lab Session 11
Iqra University Department of Computer Science

7. Conclusion

122
App. Of info & communication Technologies (lab) Lab Session 12
Iqra University Department of Computer Science

Lab Session 12: Web Page Development using HTML

and CSS

Objective:

• To understand the structure and basic elements of a web page using HTML and CSS.
• To learn how to create a static web page layout.
• To implement basic styling using inline, internal, and external CSS.

Required Tool
 A computer with a text editor (e.g., Visual Studio Code, Sublime Text, or Notepad++)
installed.
 A web browser (e.g., Google Chrome, Firefox, or Edge).
 Internet connection (optional for additional resources).
 Lab handout with HTML and CSS examples.

1. Introduction:

Web development is the process of building websites and applications. In this lab, students
will:

1. Learn the structure of an HTML document.

2. Use HTML to create a basic web page with headings, paragraphs, images, and links.
3. Apply CSS to style the web page.

By the end of this lab, students will have created their first static web page and styled it using
CSS.

2. Procedure

a) Setting Up the Environment:

 Open the text editor of your choice (e.g., Visual Studio Code).
 Create a folder named MyFirstWebsite on your computer. This folder will serve as
the workspace for the lab.
 Inside this folder, create two files:
o index.html for the HTML content.
o styles.css for external CSS styling.

123
App. Of info & communication Technologies (lab) Lab Session 12
Iqra University Department of Computer Science

b) Writing the Basic HTML Structure:

 Begin with the boilerplate HTML code in the index.html fil

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>My First Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Web page content goes here -->
</body>
</html>

c) Linking the CSS File:

 Add the <link> element inside the <head> section of the HTML document to link the
external CSS file (styles.css).

3. Observation

124
App. Of info & communication Technologies (lab) Lab Session 12
Iqra University Department of Computer Science

Task #1
Create a webpage that displays your name in the center of the page using HTML and CSS.
Style the text to be blue and in a larger font size.

Steps:

1. Open index.html and write the basic HTML boilerplate.

Html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Simple Webpage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="center-text">Your Name</h1>
</body>
</html>
css code
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

.center-text {
color: blue;
font-size: 2em;
font-family: Arial, sans-serif;
}

2. Save the file and open it in a browser to view the output.

Task #2:

Create a webpage with a Profile Section that includes your name and a short bio. Use CSS to
style the text:

 The name should be bold and green.

 The bio should be italic and gray.

Steps:

Html code

125
App. Of info & communication Technologies (lab) Lab Session 12
Iqra University Department of Computer Science
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Profile Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="profile">
<h1 class="name">Your Name</h1>
<p class="bio">This is a short bio about yourself.</p>
</div>
</body>

</html>
style.css code
.name {
color: green;
font-weight: bold;
text-align: center;
}

.bio {
color: gray;
font-style: italic;
text-align: center;
margin-top: 10px;
}

1. Save the file and refresh the browser.

Task #3:

Build a simple navigation bar with links to Home, About, and Contact. Use CSS to style
the navigation bar:

 Links should have a hover effect that changes their color to orange.
 The navigation bar should have a background color.

Steps:

1. Link the styles.css file to the HTML document:

Html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Navigation Bar</title>
<link rel="stylesheet" href="style.css">

126
App. Of info & communication Technologies (lab) Lab Session 12
Iqra University Department of Computer Science
</head>
<body>
<nav class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
style.css code
.navbar {
background-color: #333;
padding: 10px;
text-align: center;
}

.navbar a {
color: white;
margin: 0 15px;
text-decoration: none;
font-size: 1.2em;
}

.navbar a:hover {
color: orange;
}

2. Save both files and refresh the browser.

4. Home Tak
Task #1: Add a Styled Button

Objective: Create a button labeled "Click Me!" and style it using CSS:

 The button should have a background color, rounded corners, and a hover effect that
changes the background color.

Home Task #2: Responsive Design

Objective: Make the web page responsive using a media query in the styles.css file.
Steps:

1. Add a media query to change the background color for smaller screens.

1. @media (max-width: 600px) {

2. body {
3. background-color: #e6f7ff;
4. }
5. }
6.

127
App. Of info & communication Technologies (lab) Lab Session 12
Iqra University Department of Computer Science

Home Task #3: Form Creation

Objective: Create a registration form using HTML and CSS with the following fields:

 Name (text input)

 Email (email input)
 Password (password input)
 Gender (radio buttons: Male, Female, Other)
 Submit Button

Style the form using CSS to:

 Center it on the page.

 Set the width to 300px.
 Add padding, a light gray background, and rounded corners to the form.
 Change the button's background color to blue with white text, and add a hover effect
that changes the background color to green

5. Discussion and analysis of results:

6. Conclusion

128
App. Of info & communication Technologies (lab) Lab Session 12
Iqra University Department of Computer Science
.

129