Capital University of Science and

Technology, Islamabad

LAB MANUAL
V1.0 Summer 2024

Application of ICT
(CSG1611)

1
 Capital University of Science & Technology, Islamabad
Department of Computer Science
Faculty of Computing
Lab Course Development Team

Supervision and Coordination

Dr. Abdul Basit Siddiqui
Professor
Faculty of Computing

Lab Designers
Ms. Samra Naseer
Associate Lecturer
Faculty of Computing

2
Table of Contents
1. Introduction to MS Word
2. Introduction to MS Power Point
3. Designing with Canva: A Beginner’s Guide to Creating Stunning Visuals
4. Introduction to MS Excel
5. Data Analysis and visualization in MS Excel
6. Introduction to DrawIo
7. Introduction to Python
8. Data Analysis through Python
9. Mid-Term Exam
10. Getting Started with MS Access: Tables and Forms
11. Using MS Access: Queries and Reports
12. Getting Started with Packet Tracer: Visualizing Network Designs and Simulations
13. Introduction to HTML
14. Transform Your Web Design with Style (CSS)
15. Dreamweaver Basics: Crafting Your First Website with Ease
16. Final Term Exam

3
Capital University of Science & Technology, Islamabad
Department of Computer Science,
Faculty of Computing

Week 01. Lab 1: Introduction to MS Word

4
 Lab 1: Introduction to Microsoft Word

1. Introduction
Microsoft Word is an essential tool in the world of Information and Communication Technology (ICT). It
is a word processing application that allows users to create, edit, and format documents with ease and
efficiency. Whether you are drafting a letter, composing a report, or designing a resume, MS Word
provides a comprehensive set of features to help you produce professional-looking documents.

In this lab, you will explore the fundamental functions of Microsoft Word, including text formatting,
document layout, and the use of templates. Understanding these features will not only enhance your
document creation skills but also enable you to communicate ideas effectively in both academic and
professional settings.

Throughout the lab, you will engage in hands-on activities that will familiarize you with the core
functionalities of MS Word. By the end of this lab, you will be equipped with the knowledge and skills to
create well-structured, visually appealing documents that meet a variety of communication needs.
2. Activity Time boxing
Table 1.1: Activity Time Boxing
Task No. Activity Name Activity time Total Time
3 Quiz 25 min 25 min
7.2 Setting-up Microsoft Word 5 min 5 min
7.3 Walkthrough Tasks 2-3 min 60 min
8 Practice tasks 30 min 60 min

3. Quiz [Expected time = 25 minutes]

4. Objective
• Use of templates to prepare reports
• Learning about writing styles
• Acquiring knowledge about References tab and its different options
• Getting working knowledge about inserting figures and tables in a document

5
5. Concept Map
As mentioned in the introduction in this lab you will learn about insert, references and view tabs and also
the different options within these tabs. Insert tab is useful to represent your ideas in graphical and tabular
form. It can also be used to add mathematical equations and geometrical symbols. You can add Table of
contents in your document by using reference tab. View tab provides you the ability to view the document
in different layout.

6. Homework before Lab

6.1 MS Office Installation
Copy the MS office setup from the \\172.16.0.2\softwares$\Office2019 1910 12130.20272 x64\Setup. Try
to install it at home. Open MS word from the start menu and try to do the following task. For opening MS
word, you can also refer to section 6 of this document.
1

Figure 1. 1

Click on the Help tab to go to Microsoft Office Help as shown in Figure 1. 1. The Office Help is really
good. After opening the help try to search the shortcut key for following tasks in MS Word.
• Create a new document of the same type as the current or most recent document
• Open a document
• Close a document
• Save a document

7. Procedure & Tools [Expected time = 5 min]

7.1 Tools
• Desktop Computer
• Microsoft Windows operating system, XP or any latest Edition
• Microsoft Word
• Microsoft PowerPoint
7.2 Setting-up Microsoft Word 2007
1. Click on start menu > type “word” > select “open” as shown in Figure 1. 2.

6
 Figure 1. 2: Start Menu to open MS Word

7.2.1 Walk Through Task for MS Word [Expected time = 30

minutes]
This section is designed such a way that you can complete the following tasks independently. However, if
there is any ambiguity you can refer it to the lab instructor.

Templates
Templates are a collection of styles and formatting settings, and they can save you a ton of time when
creating a new document. You can find templates for almost any type of document, from flyers to
resumes, and birthday cards to banners. You can also create your own templates to save yourself from
having to remake documents from scratch.
Go to File menu and click ‘New’. Select template you want to use or search for the required templates as
shown in Figure 1. 3.

7
 Figure 1. 3: Insert Template

Search ‘Project status report ‘and select one as shown in Figure 1. 4.

Figure 1. 4

8
 Click “create” as shown in Figure 1. 5.

Figure 1. 5

Insert Cover Page:

Pages group is in the far left of the insert tab. You can insert from the three categories for pages which
are; Cover Page, Blank Page, and Page Break as shown in Figure 1. 6. These features are useful if you are
creating a professional or long document.

Figure 1. 6: Pages Group

Cover Page is the title page of the document. Word provides a number of preformed cover pages to give
your document a professional look.

Cover page Exercise: Creating a Cover Page

1. Click the Insert tab to make it the active tab as shown in Figure 1. 7.

9
 Figure 1. 7

2. To open the Built-in Cover Page Gallery, click the down arrow to the right of Cover Page in the
Pages group on the Insert tab as shown in Figure 1. 8.

Figure 1. 8: Insert Cover Page

3. Scroll down and click the desired cover for the document from the Cover Page Gallery. Use the scroll bar
or scroll arrow to see all the cover page choices.
4. A Cover page will be added to your document.

Style Group

Figure 1. 9: Style Group

The fourth group on the Home ribbon is the Style group as shown in Figure 1. 9. Styles are a collection of
formatting options that you can apply to text. When you use styles to format your document, you can
quickly and easily apply a set of formatting choices consistently throughout your document.

10
 A style is a set of formatting characteristics, such as font name, size, color, paragraph alignment and
spacing. Some styles even include borders and shading. For example, instead of taking three separate
steps to format your heading as 16-point, bold, Cambria, you can achieve the same result in one step by
applying the built-in Heading 1 style. You do not need to remember the characteristics of the Heading 1
style. For each heading in your document, you just click in the heading (you don’t even need to select all
the text), and then click Heading 1 in the gallery of styles.

Tables

Figure 1: Table

Word provides tables option for placing data in a more formal way.
1. Click on table in insert tab. (Figure 1. 7)
2. To add Rows and Columns, select top to bottom for rows & left to right for columns (Figure 1. 10)
3. Click to apply when happy with the selection.
4. Click on the box to enter text.
5. Observe the new tab opened "Table Tools". You can use this tool to apply further formatting to your
created table.

Figure 1. 10: Insert Table

11
Illustrations
Using Illustrations, you can add pictures of all types and styles to your document as shown in Figure 1. 11.

Figure 1. 11: Illustrations

Picture
The first selection in Illustrations is Insert a picture from a file. When you click on this a window will open
to browse to a photograph or other picture you have saved on your computer as shown in Figure 1. 12.

Figure 1. 12: Pictures

Smart Art
Smart Art allows you to add different graphs in your document as shown in Figure 1. 13.

Figure 1. 13: Smart Art

Insert Caption
Click “References” tab to make it active as shown in Figure 1. 14.

12
 Figure 1. 14: References

Select a picture and click “Insert Caption”. Add a suitable caption for text and then click OK as shown in
Figure 1. 15.

Figure 1. 15: Insert Caption

Table of Contents
While writing long documents consisting of several main and sub headings it becomes a difficult task to
read and find relevant text. Microsoft Word helps deal with issue by assembling a table of contents (TOC)
for you, listing headings each with appropriate page number. It also takes care of counting pages, and
even updates the TOC for you if the document’s page numbers change. When you create a TOC, Word
searches your document for headings to include, recognizing them by the Styles applied.

Figure 1. 16: Table of Contents

13
 Exercise: How to add Table of Contents
1. Apply heading styles to your chosen headings.
2. Move the insertion point to the place where you want the Table of Contents to appear.
3. Click the References tab on the Ribbon and then click the Table of Contents button found in the Table of
Contents group as shown in Figure 1. 16.
4. Click the Table of Contents style you want to use as shown in Figure 1. 17.
5. To customize your TOC, click the Table of Contents button and select Insert Table of Contents Field.
6. Click the Update Table button in the Table of Contents group of the References tab.
7. Click OK to update the table.
8. Save your file after you update the tables.
9. To delete a TOC, select the entire table and press Delete.

Figure 1. 17: Insert Table of Contents

14
 Figure 1. 18: Table of Contents

Table of Figures
Exercise: How to add Table of Figures:
1. Apply caption to your figures.
2. Move the insertion point to the place where you want the Table of figures to appear.
3. Click the References tab on the Ribbon and go to Captions section as shown in Figure 1. 19 .

Figure 1. 19

4. Click on ‘Insert table of figure’. A table of figures dialog box will appear as shown in Figure 1. 20.

15
 Figure 1. 20

5. Choose your desired style and click ‘OK’. Table of figures will be created as shown in Figure 1. 21.

8. Practice Tasks
8.1. Practice Task 1
Access the electronic bill template shared in \\fs\Lectures$.Replace the placeholder text with
fictional data, such as customer name, address, bill amount, and billing date. Ensure that all
elements, such as tables, logos, and payment details, are accurately replicated. Apply appropriate
formatting, including borders, shading, and alignment, to match the original template. Save the
completed bill as a Word document.
8.2. Practice Task 2
Create a Word document on the topic of your choice using templates. The document should
contain the following features.
• It should contain table of contents.
• It should have page numbers on each page in the footer.
• Document must have a Title page with your name and registration number on it.
• Document must have tables and figures in it with proper captioning.
• It should contain a table of figures
9. Evaluation criteria
The evaluation criteria for this lab will be based on the completion of the following tasks. Each task is
assigned the marks percentage which will be evaluated by the instructor in the lab whether the student has
finished the complete/partial task(s).

10.Further Reading
10.1. Books
Word 2016 For Professionals Dummies By Dan Gookin
Capital University of Science & Technology Islamabad
Department of Computer Science
Faculty of Computing

Week 02. Lab 2: Introduction to MS PowerPoint

1
 Lab 2: Introduction to MS PowerPoint
1. Introduction
Microsoft PowerPoint is a powerful presentation software that is part of the Microsoft Office Suite. It
enables users to create dynamic and engaging presentations that combine text, images, graphics,
animations, and multimedia elements. PowerPoint is widely used in educational, business, and
professional settings to effectively communicate information and ideas to an audience.

In this lab, you will learn the basic features of Microsoft PowerPoint, including slide creation, text
formatting, and the integration of multimedia components. You will also explore how to design visually
appealing slides, organize content logically, and deliver a compelling presentation.
By the end of this lab, you will have a solid understanding of how to use PowerPoint to create
presentations that are not only informative but also engaging and memorable. These skills will be
invaluable in both academic and professional environments, where effective communication is key to
success.

In this lab you will learn the basic working of Microsoft PowerPoint. Like MS Word, MS PowerPoint is a
part of Microsoft Office Suite and there are several features that you may find like MS Word. Microsoft
PowerPoint is a software product used to perform computer-based presentations. Microsoft PowerPoint is
a part of Microsoft Office package that creates and plays presentations. There are several features that you
may find like MS Word. We will, however, concentrate only on those features that are specific to MS
PowerPoint.

2. Activity Time boxing

Table 1.1: Activity Time Boxing
Task No. Activity Name Activity time Total Time
3 Quiz 25 min 25 min
7.2 Setting-up Microsoft PowerPoint 5 min 5 min
7.3 Walkthrough Tasks 2-3 min 60 min
8 Practice tasks 30 min 60 min

3. Quiz [Expected time = 25 minutes]

4. Objective
• To create the first presentation
• Formatting Text boxes
• Basic Slide design and layout
• Inserting multimedia such as graphics, animation and sound in the presentation
• To Manage Slide Show

2
 5. Concept Map
A PowerPoint presentation is a good way to convey pieces of information, usually in the form of an
outline, to a large audience. Generally, PowerPoint presentations are appealing to users because they are
easy to create and edit and generally small enough to fit onto a CD or a USB You may think about
various scenarios in which a presentation is made in a lecture hall while teaching the students, marketing a
product to sell, explaining a new scientific concept, etc.

Difference between a document and a presentation

You may recall various font and font size that you have practiced during the MS Word Lab. As
presentations are projected to a group of people, font sizes are larger than for print documents (typical
font sizes are 12 to 36 points). The large font sizes limit the content of an individual slide, so the content
for each slide should be carefully selected. Points are often made with abbreviated, incomplete sentences.
Complete paragraphs are even rarer. A single slide often makes a single point. Separate slides are required
to integrate the single points made on other slides.

Following are a few advantages of using PowerPoint for presentations.

• PowerPoint will help students to present their assignments and projects
• PowerPoint in the lecture halls is an effective way of presenting teaching material to students.
• PowerPoint can be used to create interactive presentations containing text, art, animation, and
audio and video elements

6. Homework before Lab

7. Procedure & Tools [Expected time = 5 min]

7.1 Tools
• Desktop Computer
• Microsoft Windows operating system, XP or any latest Edition
• Microsoft PowerPoint

7.2 Setting-up Microsoft PowerPoint

1. Click on start menu > type “Powerpoint” > select “open” as shown in Figure 1. 2.

3
 Figure 1. 2: Start Menu to open MS PowerPoint

Figure 2. 21: Table of Figures

7.2.1 Walk through Task for MS PowerPoint [Expected time = 30 minutes]

Home ribbon
Click on “Home” tab to make it active as shown in Figure 1. 21.

Figure 1. 22: Home Ribbon

4
 Slides
Slides section allows you to add slides, manipulate it and change its layout etc.
New Slide:
1. Click on home ribbon
2. Click on new slide button
3. New slide will be shown in your presentation
Layout:
Different slide layouts are used to manage the arrangement of content on the side.
Click the layout you want. The layout appears in the drop-down pane of the PowerPoint window as shown
in Figure 1. 23.

Figure 1. 23: Layouts

1. Make two of the slides as tile slide, third and fourth one as size and content layout and last one should be
blank.
2. Write your name and registration number on first title slide.
3. On second slide write topic as "Computers "

4. Search text from internet and add some points about computers in the successive two slides and last slide
should be having pictures of computers.
5. Output of above steps in shown in Figure 1. 24.

5
 Figure 1. 24: Output of sample slides

Themes
Applying theme to your slides:
• A theme is a set of colors, fonts, and special effects. Themes provide attractive backgrounds for your
PowerPoint slides.
• To apply a theme to all of the slides in your presentation:
– Choose the Design tab.
– Select the theme you want to apply as shown in Figure 1. 25.

Figure 1. 25: Themes

To apply a theme to selected slides

Click the Slides tab, located on the left side of the window.
1. Hold down the Ctrl key and then click to select the slides to which you want to apply a theme.
2. Choose the Design tab as shown in figure.
3. Click the More buttons in the Themes group.
4. Right-click the theme you want to apply. A menu appears.
5. Click Apply to Selected Slides
Change fonts to Arial, colors to origin and add Metro effects in Design Tab.
Background:
You can add a dramatic effect to your theme by applying a background.
1. Choose the Design tab.
2. Click the Format Background button.
3. Click the background you want as shown in Figure 1. 26.

6
 Figure 1. 26: Changing background of theme

Animations:
Animations allows you to add different animation styles to your slides. These styles can be applied to
slides and the text in slides as well as shown in Figure 1. 27.

Figure 1. 27: Animations

Preview:
This button previews the animated slides being set by using slide transitions of the presentation.
Animations:
Animations control how objects move onto, off of, and around your slides. Transitions control how your
presentation moves from one slide to the next
Custom Animation:
You can animate the objects on your PowerPoint slides. PowerPoint provides four types of animations as
shown in Figure 1. 28.

7
 Figure 1. 28: Custom Animations

• Entrance
An Entrance animation determines the manner in which an object appears on a slide; for example, an
object can move onto a slide.

• Emphasis
An Emphasis animation does something to draw attention to an object; for example, the object can become
larger.

• Exit
An Exit animation determines the manner in which an object leaves a slide; for example, an object can
move off a slide.

• Motion Paths.
A Motion Paths animation determines how an object moves around a slide; for example, an object can
move from left to right.

To choose an effect:
1. Select the object you want to animate.
2. Choose the Animations tab.
3. Click the Add Animation button. The Animation pane appears.
5. Choose the type of effect you want. A submenu appears.

6. Click the effect you want. PowerPoint applies the effect.

8
To modify an effect:
• Click the down arrow next to the Start field on the Custom Animations pane and then select the
start method you want as shown in Figure 1. 29.
• Click the down arrow next to the Property field on the Custom Animations pane and then select
the property you want. The Property field might be labelled Direction, Size, or some other
property.
• Click the down arrow next to the duration field on the Timings pane and then select the speed you
want to apply to your animation.

o Apply animations on text and images on all slides.

o Choose Text animation from emphasis on all headings and Diamond from entrance for all
other text bullet by bullet.

Figure 1. 29: Applying Animation on start method

To preview the animation, click the Play button on the Custom Animations pane.

Explore all of them yourself and animate your text and slides. Slideshow should display presentation in
effective manner with animations on each slide.

Transition Sound
This button allows you to add some sound during slid transitions of your presentation. You can
select various sounds from this option.
• In the pane that contains the Outline and Slides tabs, click the Slides tab.
• Select slide thumbnail of the slide that you want to add a sound to.
o In the animation pane, select the item you want to add sound to and click on the
drop- down button, and then do one of the following:
• On the Transitions tab, in the Timing group, click the arrow next to Sound, and then do one of
the following:

9
1. To add a sound from the list, select the sound that you want.
2. To add a sound not found on the list, select Other Sound, locate the sound file that you want to add, and
then click OK.

Figure 1.30: Transition sound

Select transition sound for the presentation that must not be annoying for the audience.
Transition Speed
It sets the speed of the slide transition to be slow, medium or fast.

Figure 1.31: Managing Slides Transition

1.All slides should advance one by one at mouse click or keyboard keys.

Apply To all
This button applies all settings being chosen on all slides in the presentation.
Advance Slide
To advance the slides to the next one, set the duration of the transition between the previous slide and the
current slide. For performing this task, do the following:

On the Transitions tab, in the Timing group, type or select the speed that you want: Mouse click
To advance the slide when you click the mouse, on the Transitions tab, in the Timing group, select the
On Mouse Click check box. Automatically After

To advance the slide after a specified time, on the Transitions tab, in the Timing group, in the After box,
enter the number of seconds that you want.
Slide Zoom-in/Zoom-out
To zoom in on a particular slide while playing the slideshow press Ctrl and +.
To zoom out, press Ctrl and -.
Adding a Scrollbar in a slide
Scrollbars are used when the content on a slide is very large and all that content must be present in
the same slide.
To add scrollbar to a slide, follow the following steps:
• Click the "File" tab on the ribbon. Click "Options" to open the PowerPoint Options dialog box.
• Click "Customize Ribbon" and click the check box next to "Developer." Click "OK."

10
 • Click the "Developer" tab and click the "Text Box" button in the Controls group as shown in
Figure 1. 30.

Figure 1. 30

• Click and drag over your slide to add the text box.
• Right-click the text box and click "Properties" to open its
Properties dialog box.
• Type or copy and paste the text box's contents into the Value
box.
• Click the drop-down box next to "ScrollBars" and select
"2 - frmScrollBarsVertical" as shown in Figure 1. 31.
• Click the drop-down box next to "WordWrap" and select
"True" as shown in Figure 1. 31.
• Click the drop-down box next to "MultiLine" and select
"True" as shown in Figure 1. 31.
• Press "F5" to preview the presentation with the scrollbar.

8. Practice Tasks
This section will provide practice exercises which you need to finish
during the lab. You need to finish the tasks in the required time.
When you finish them, put these tasks into your lab designated
Folder announced by lab instructor.

Figure 1. 31: Properties

11
8.1 Practice Task 1 [Expected Time 30 min]
• Create a PowerPoint presentation of 8-10 slides. The Topic of presentation will be “Computers and
their use” and create a presentation with following features applied to them:
• Adapt Calibri style for text
• Use blue and black color schemes for text
• Use bullets and numberings to list down the types of computers.
• Apply slide animation (shape plus) and text animations (motion paths in all directions) and slides
should be change as per set time of 1 sec.

9. Evaluation criteria
The evaluation criteria for this lab will be based on the completion of the following tasks. Each task is
assigned the marks percentage which will be evaluated by the instructor in the lab whether the student has
finished the complete/partial task(s).

Table 1.2: Evaluation of the Lab

Sr. No. Task No Description Marks
1 3 Quiz 40
2 5 Home task 20
3 7.3 Walkthrough Tasks 10
4 8.1 to Practice tasks and Testing 30
8.2

10. Further Reading

10.1 Books
Word 2016 For Professionals Dummies By Dan Gookin
Capital University of Science & Technology Islamabad
Department of Computer Science
Faculty of Computing

Week 03. Lab 3: Designing with Canva: A Beginner’s Guide to

Creating Stunning Visuals

1
Lab 3: Designing with Canva: A Beginner’s Guide
to Creating Stunning Visuals
1. Introduction
Canva is an intuitive online platform for creating professional-quality visual content. Whether you need to
design social media posts, presentations, flyers, or any other visual materials, Canva offers a wide range
of customizable templates, graphics, and tools. In this lab, you will be introduced to the basics of Canva
and learn how to create visually appealing designs, tailored to different purposes.

2. Activity Time Boxing

Table 1.1: Activity Time Boxing
ask No. Activity Name Activity time Total Time
3 Quiz 25 min 25 min
7.2 Setting-up Microsoft Canva 10 min 10 min
7.3 Walkthrough Tasks 2-3 min 55 min
8 Practice tasks 30 min 60 min

3. Quiz [Expected time = 25 minutes]

4. Objective
By the end of this lab, students will be able to:
• Understand the basic functions of Canva and its interface.
• Create simple yet effective visual designs using Canva templates.
• Design a professional presentation using pre-designed templates.
• Apply fundamental design principles like color, typography, and layout.
• Export designs in various formats (JPEG, PNG, PDF) for different platforms.

5. Concept Map
Canva is a powerful online design tool that simplifies the creation of professional-quality visuals,
with a strong emphasis on presentation design. Whether you're creating a business proposal or an
academic slideshow, Canva offers a range of pre-designed presentation templates that can be easily
customized. The platform provides tools to modify text, incorporate images, and apply design
principles such as color schemes, typography, and layout to make your presentations visually
appealing. Canva's user-friendly interface ensures that even beginners can create impactful slides
without needing advanced design skills. Additionally, the ability to export presentations in various
formats, such as PDF or PowerPoint, adds versatility for both digital and print use, making Canva an
essential tool for crafting polished presentations.

Beyond presentations, Canva excels in creating a wide array of visual designs like posters, flyers, and
business cards. Its drag-and-drop functionality makes it easy to design eye-catching posters for
events, informational flyers for promotions, or personalized business cards that leave a lasting
impression. With thousands of customizable templates, users can apply the same design principles—
 color, typography, and layout—to maintain consistency and professionalism across all visual content.
Whether you're working on a quick social media post or a detailed marketing campaign, Canva
provides the flexibility to design for different platforms and purposes, ensuring that your visual
communication is always top-notch.

6. Homework before Lab

• Explore Canva’s official beginner’s guide [available on the Canva website] and get familiar with
its features.
• Create an account on Canva (if not already done) and explore the available templates. Try
customizing a basic design on your own.
7. Procedure & Tools [Expected time = 5 min]

7.1 Tools
• Software: Canva (accessible through a web browser).
• Required Materials: A laptop/PC with internet access, and a Canva account (free or pro
version).
7.2 Setting-up Microsoft PowerPoint
• Step 1: Open a browser and navigate to www.canva.com.

Figure 3.1

• Step 2: Log in or create a new account (free version is sufficient for this lab).
 Figure 3.2

• Step 3: Familiarize yourself with the interface: observe the side panels for templates, design
elements, text, and upload sections.

Figure 3.3

7.2.1 Walk through Task for MS PowerPoint [Expected time = 30 minutes]

Exploring Canva’s Interface
• Open Canva and explore the dashboard.
• Navigate through various template categories (e.g., social media, presentations, posters).
• Select a Presentation template for customization.
 Figure 3.4

• Select a 5-slide presentation template.

Figure 3.5

• Modify the title slide by changing the background, font, and title text.
 Figure 3.6

• Add text to the body slides with bullet points or headings.

Figure 3.7

• Customize the color scheme using Canva’s color palette tool.

• Access the Color Palette Tool: Click on any element (text, shapes, backgrounds) in your design,
then select the color square in the toolbar to open Canva’s color palette tool, which displays a
range of preset colors.
• Choose and Apply Colors: Use the palette to select colors that match your brand or theme, or
input specific hex codes for precise shades. Apply these colors to different elements to create a
cohesive and visually appealing design.
 Figure 1.8

• Add relevant images and icons to visually enhance your slides.

o Choose Files and select import files. Then choose your required images.

Figure 3.9

• The images displayed in the gallery below can be selected and placed as needed, with options to
apply layering and other effects.
• Select Images from the Gallery: Browse through the gallery of available images in Canva and
choose the ones you want to use for your design. Click on an image to insert it into your project.
• Positioning Images: Once inserted, you can click and drag the images to place them wherever
needed on your canvas, adjusting their size and orientation to fit your layout.
• Apply Layering Effects: Use layering options to arrange images on top of or behind other
elements. Right-click on an image to access the "Send to Back" or "Bring to Front" options for
optimal positioning.
• Enhance with Effects: Select an image and explore the toolbar to apply various effects, such as
filters, transparency adjustments, or cropping, to enhance its visual appeal and integrate it
seamlessly into your design.
 Figure 3.10

• Use the elements feature to insert shapes, charts, or diagrams to present data visually.
• Insert Shapes: Navigate to the "Elements" tab, find your desired shapes (like rectangles or
circles), and click to add them to your slide. Customize their size and color using the toolbar.
• Add Charts: In the Elements section, select the "Charts" option to choose from various chart
types (bar, line, pie). Click to insert and then input your data in the provided table to visualize it.
• Include Diagrams: Look for the "Diagrams" category within the Elements tab. Choose a
diagram that suits your needs (such as flowcharts or timelines) and customize the text and colors
as needed.
• Arrange and Align: After inserting your shapes, charts, and diagrams, adjust their placement for
clarity and visual appeal. Use alignment tools to ensure everything is spaced and arranged neatly
on the slide.

Figure 3.11

Poster Design
• Select a Poster Template:
o Open Canva and log in to your account.
o In the search bar at the top, type "Poster" and hit Enter.
o Browse through the available poster templates and select one that fits your event or theme.
 Click on the template to open it in the editor.

Figure 3.12

• Modify the Title, Date, and Text:

o Click on the title text box in the template to edit the event name. Replace it with your own
event’s title.
o Similarly, modify any additional text fields such as the date, location, or event details. Simply
click on the text boxes and type in your information.
o Adjust text alignment, boldness, or color by using the text options available in the toolbar at
the top of the editor.

Figure 3.13

• Change the Background Color:

o On the left panel, click on the "Background" tab to view background options.
o Select a solid color, gradient, or image background to fit your event's theme.
o To use a custom color, click on the color box in the toolbar and pick your desired color from
the palette or use a specific color code.
• Add Shapes and Icons:
o Click on the "Elements" tab on the left panel to browse Canva’s library of shapes, lines, and
icons.
o Drag and drop shapes (such as circles, rectangles) or icons (like event-related symbols) onto
your poster.
o Resize or rotate the shapes by dragging the corners of the element and adjust their color using
 the color palette in the toolbar.
• Use the Text Tool to Adjust Fonts and Text Sizes:
o Select the Text tab from the left panel and choose from pre-made text templates or add a new
text box.
o Customize the fonts by selecting your desired font type from the toolbar. Canva offers a wide
selection of fonts to match your event’s tone and theme.
o Adjust the size, color, and spacing of the text using the toolbar options for clarity and visual
appeal.

8. Practice Tasks
This section will provide practice exercises which you need to finish during the lab. You need to finish
the tasks in the required time. When you finish them, put these tasks into your lab designated Folder
announced by lab instructor.

8.1 Practice Task 1

Using Canva, customize a poster template for a fictional event of your choice. Describe the event,
including its title, date, time, and location. What design elements (such as colors, images, and
typography) did you choose to enhance the poster's visual appeal and effectively communicate the event
details?

8.2 Practice Task 2

Using the provided paragraph on Computer Hacking, create a presentation with a minimum of 7 slides.
Your slides should cover the key points mentioned in the paragraph, organize the content logically, and
use visuals or bullet points to make the presentation engaging and easy to follow.
Provided Paragraph
Computer hacking means getting into computer systems or networks without permission. Hackers can
have different goals. Black Hat Hackers are criminals who cause harm or steal information. White Hat
Hackers work legally to help protect systems. Gray Hat Hackers fall in between; they might break rules
without causing harm. Hackers use various methods to break into systems. Phishing tricks people into
giving away sensitive information by pretending to be someone trustworthy. Malware, like viruses and
ransomware, is software designed to damage or access systems illegally. SQL Injection takes advantage
of weaknesses in a database to get or change data. Denial of Service (DoS) attacks overwhelm a system
with too much traffic, making it unavailable.
There have been several major hacking incidents. In 2011, hackers stole personal information from 77
million accounts on Sony's PlayStation Network. In 2017, the Equifax data breach exposed the personal
data of 147 million people. The WannaCry ransomware attack in 2017 affected 200,000 computers in 150
countries, causing widespread issues.
Hacking can have serious effects. It can lead to financial losses from repairing damage, paying
ransoms, or dealing with legal issues. Companies may lose trust and damage their reputation. People can
suffer from identity theft and privacy violations. Systems might also face interruptions, affecting their
availability and services.
To prevent hacking, it's important to take some steps. Regularly updating software helps protect against
new threats. Using strong passwords and multi-factor authentication makes it harder for hackers to gain
access. Training employees to recognize phishing attempts and follow security practices is crucial. Also,
protecting networks with firewalls, anti-malware programs, and intrusion detection systems is essential.
In conclusion, hacking is a serious risk for both people and organizations. Knowing about common
hacking methods and using preventive measures can help reduce these risks. Staying alert and using good
security practices are key to keeping data safe and secure.
9. Evaluation criteria
The evaluation criteria for this lab will be based on the completion of the following tasks. Each task is
assigned the marks percentage which will be evaluated by the instructor in the lab whether the student has
finished the complete/partial task(s).

Table 1.2: Evaluation of the Lab

Sr. No. Task No Description Marks
1 3 Quiz 40
2 5 Home task 20
3 7.3 Walkthrough Tasks 10
4 8.1 to Practice tasks and Testing 30
8.2

10. Further Reading

https://www.canva.com/learn/a-step-by-step-guide-to-designing-from-scratch/
Capital University of Science & Technology, Islamabad
Department of Computer Science
Faculty of Computing

Week 04. Lab 4: Introduction to MS Excel

1
 Lab 4: Introduction to MS Excel
1. Introduction
In this lab you will learn the basic working of Microsoft Excel. Like MS Word and MS PowerPoint, MS
Excel is a part of Microsoft Office Suite and there are several features that you may find similar to MS
Word and MS PowerPoint. We will however, concentrate only on those features that are specific to MS
Excel.

MS Excel is an incredibly powerful tool for getting meaning out of vast amounts of data. But it also
works really well for simple calculations and tracking almost any kind of information. Microsoft Excel can
be used to create and manage business transactions that deal with accounting. The task you can complete
with Excel ranges from preparing a simple family budget, preparing a purchase order, create an elaborate
3-D chart, or managing a complex accounting ledger for a medium size business.

2. Activity Time boxing

Table 2.1: Activity Time Boxing
Task No. Activity Name Activity time Total Time

3 Quiz 15 min 30 min

5.1 Understanding of Spreadsheet 10 min 10 min

6.2 Setting-up MS Excel 5 min 5 min

6.3 Walkthrough Tasks 10 min each 90 min
7 Practice tasks 10 min 30 min

3. Quiz [30 minutes]

4. Objectives of the lab
• Using MS Excel Menu and Toolbar
• Understanding different pointer shapes
• Understanding the gird, rows, columns and cells.
• Sorting the data in rows or columns
• Performing calculations on the data in MS Excel
• Using multiple Spreadsheets
• Copy, Paste and Cut your data
• Saving and printing worksheets
• Using MS Excel Help

2
 5. Concept Map

What is a Spreadsheet?
Suppose you would like to maintain personal finance register also known as check register that will keep
track of the expenditures that you have been making during the current semester. Another scenario can be
the budget management of a small house. You may be interested in question such as how much money
has been spent on electricity bills and telephone bills. How much saving has been made? You may
imagine a book that keeps record of all transaction/ expenditures and income. Such a book can be called a
manual or paper spreadsheet. A sample is shown in the figure 1. In this case you may have to save data
that can be numerical or alphanumeric (involving letters or numbers).

Spreadsheet is a tool that is used to organize data, such as a check register. Spreadsheets have been used
for many, many years in business to keep track of expenses and other calculations.

Electronic Spreadsheet: Microsoft Excel is an example of spreadsheet application program that can be
used for storing, organizing and manipulating data. The key benefit to using a spreadsheet program is that
you can make changes easily, including correcting spelling or values, adding, deleting and formatting. It
consists of a grid made from columns and rows similar to what you have seen in your
Mathematics notebooks in school days. This grid environment makes number
manipulation very
easy

As always with computer programs, there is more than one way to go about these things. The instructions
here are intended to be an easy introduction to the use of Excel. This lab manual includes a subset of
Microsoft Excel features

6. Homework Task before Lab Figure 1: Example Spread Sheet

It is assumed that the user is both familiar and comfortable with the following prior to working with
Microsoft Excel:
• Using the mouse and the left-click feature
• Basic navigation through Microsoft Windows
• Basic typing and keyboard commands
• Familiarity with Microsoft Word
• Task
Open MS office suite help by clicking the Help tab in the MS Excel window as shown in Figure 2. 1.

Figure 2. 1 : Help

3
 The following window will appear as shown in Figure 2. 2. This is an online MS office help that retrieves
the information you request from the Internet. You are supposed to retrieve information related to
viewing and printing MS Excel documents using MS Excel online help system.

Figure 2. 2: Help Window

7. Procedure and Tools

• Desktop Computer
• Microsoft Windows XP operating system
• Microsoft Excel 2016
Microsoft Excel is an electronic spreadsheet. You can use it to organize your data into rows and columns.
You can also use it to perform mathematical calculations quickly. Before you start working in Microsoft
Excel, you need to open it. You can open Microsoft Excel by clicking on the Start button and typing excel
in search box as shown in Figure 2. 3.

4
 Figure 2. 3: Start Menu
A screen similar to Figure 2. 4 will appear.

Columns

Rows

Figure 2. 4: Excel Layout

5
• Excel Layout
Please refer to Figure 2. 4 to observe the layout of MS Excel. On the top you will find a ribbon similar to
MS Word and PowerPoint that we have discussed in previous lab. The different thing you will notice is the
rectangular boxes on the screen divided with the help of rows and columns

Rows are identified by Numbers as shown in the leftmost columns whereas Columns are identified by
Alphabets as shown in the topmost row.

If you want to select a particular cell, you will have to identify its address. The selected cell in the
Figure 2. 4, for example, is A1. A being the first column and 1 being the first row.

• Walkthrough Tasks [Expected time =

20 min]

• Home
In this section we will go through step by step through each section of the Insert tab just like we did on
the Home Tab in the previous lab. Below is a Snapshot of the insert tab in excel ribbon (Figure 2. 5). Later
each section is explained individually in detail and practice exercises.

Figure 2. 5: Home Tab Ribbon

Clipboard
This section of Home Tab is covered in Lab 1.
Font
This section of Home Tab is covered in Lab 1.
Alignment
In this section we would cover Merge and Center tab as shown in Figure 2. 6.

Figure 2. 6: Alignment

For performing merge and center, you need to first select the cells that you want to merge. The selection of
cells is shown in Figure 2. 8.

6
 Figure 2. 7: Selection of Cells

Once selection of cells is done, click on Merge and center command. When you would click the
command, the cells would be merged as shown in Figure 2. 8.

Figure 2. 8: Merge and Center

Number
In this section you can add various things with the number for example, you can add the currency,
percentage sign, comma, decimal values after the number etc. Figure 2. 9 shows the number section with
different options displayed.
.

Figure 2. 9: Number Section

If you want to add currency to the number, click the drop-down list of dollar sign. When you click the
dollar sign various currency options are displayed e.g., dollar sign, euro sign, pounds sign etc. All these
signs are shown in Figure 2. 10.

Figure 2. 10: Adding Currency

7
 You can use a few clicks to adjust the row height and column width according to your desire. Click on
“Format” in the cell section of the ribbon and a menu similar to Figure 2. 11 will appear below.

Figure 2. 11: Cell Format Menu

You can adjust the row height by clicking “Auto fit row height”. This will adjust the height of all the cells
in a row according to the font size of the data you have inserted. We will be doing our tasks on the
following example data
• Copy and paste this data into a newly created Excel File.
Table 2.2: Sample data for practice tasks
Product Cost Price Sale Price Shipping Cost
Toothpaste 20 25 10
Shampoo 110 120 20
Soap 20 30 10
Mouthwash 49 50 15

• Now Left align the Product column while apply right alignment for the rest of the columns
• Merge Cost Price and Sale Price in the new column “Price” and use Sale price value for it.

8
• Click on Auto row height and column width to adjust the height and width of the columns of your data.
• As the Column Price is a number and can be counted as currency, modify setting of new column
“Cost Price” and add American dollar USD$ ad its currency.
• In the end you will have something similar to the Figure 2. 12.

Figure 2. 12: Output of the First 6 Steps

• Note that Cost Price is now merged in two columns B and C instead of one column.
• Now select the column for Cost Price and select Unmerge in the menu appearing after clicking the arrow
with the merge button.
• After Unmerging you will notice that cost price has been reduced to one column. Now right click on the
empty column and delete to remove the empty column. As result you will have something similar to the
Figure 2. 13.

Figure 2. 13: Output of steps 8 and 9

Note that Cost price is not placed in the only Column B instead of both B and C as in the previous figure.
Operations and Formulas

• Each cell of excel has a letter column and a number row.

• Numbers are entered in cells by typing them and pressing enter.
• Formulas and equations are entered in cell starting with =
• Common formulas are:
=SUM(X:Y) Add all cells from cell X to cell Y
=AVERAGE(X:Y) Calculate the average (mean) of cells X to Y
=COUNT(X:Y) Count how many filled cells are between cells X and Y
=MIN(X:Y) Calculate mininum how many filled cells are between cells X and Y
=MAX(X:Y) Calculate maximum how many filled cells are between cells X and Y
=VAR(X:Y) Calculate the sample variance of cells X to cells Y
=STDEV(X:Y) Calculates the sample standard deviation of cells X to Y
**Note: the (X:Y) of each formula can be filled out by clicking and dragging to highlight the
cells you want to use.
• Text can be entered by typing and pressing enter. If the text would be considered a number or
formula, it can be entered by typing ‘ first.
• Cells can be copied and moved using the copy command (Control+C), the cut command
(Control+X) and the paste command (Control+P).
• Copied formulas will automatically change their cells unless “$” is used. For example:

=$A5 The column A will not change when copied

=A$5 The row 5 will not change when copied
=$A$5 The column A will not change and the row 5 will not change when copied.

• Cells can be formatted to change the look of the text, the size of the cell, borders and colour fill.
• Saving excel files to a USB drive is a good idea.

Note: Some versions of Excel do not accept the compatibility functions VAR and STDEV. In
these cases, you can use =VAR.S(X.Y) and =STDEV.S(X.Y).

A) Cells
An excel spreadsheet is made up of cells. The columns are given letters, and the rows are given
numbers. If you click your mouse on the 5th row of column C, for example, you will highlight
and be able to type in CELL C5.
 Advanced Skill – Fill Handle
When any cell or cells in excel is selected, there is a square in the bottom right corner of the
cell(s) called the “fill handle”. By clicking and dragging this small square, excel will attempt to
fill in all the empty cells highlighted.

➢ If you start by selecting a pattern of numbers, excel will continue the pattern:

➢
➢ If you start by selecting a formula, excel will copy the formula:

1. Practice Task [Expected Time 30 min]

• Copy or download the following list of prices and quantities:

• Create a new row at the top and insert the title “Bob Econ’s Farmer’s Market”.
• Create a new column on the far left. In CELL A9 enter the text “AVERAGE” and in cell A10
enter the text “TOTAL”.
• Calculate the average prices and quantities and the total quantities. After entering the formulas
for apples, copy and paste those formulas for oranges.
• In G2 insert the text “Laspeyres Price Index. 100=2020.” In G3 to I3 insert the text, Numerator,
Denominator, and Price Index.

• The LPI formula is listed above. Since the denominator (bottom of the division sign) never
changes, we can calculate that first in row 6 by entering =C$6*D$6+E$6*F$6. The $’s make
sure that the row number never changes as we copy the denominator formula for all years; we
always refer to 2020 (the base year).
• The numerator can be calculated in row 6 by entering =C6*D$6+E6*F$6. The $’s make sure that
the row number never changes as we copy the numerator formula for all years; we always refer to
the base year (2020) quantity.
• After copying your numerator and denominator formulas to cover all years, calculate the price
index in row 6 as simply =G6/H6*100, then copy to fill in the entire price index.
• Next, we can calculate growth in fruit prices, or fruit inflation. In column J, enter the title “Fruit
Inflation (%)” in the appropriate cell. Remember that the formula for growth is:

1. Evaluation criteria
The evaluation criteria for this lab will be based on the completion of the following tasks. Each task is
assigned the marks percentage which will be evaluated by the instructor in the lab whether the student has
finished the complete/partial task(s).
 Table 1.2: Evaluation of the Lab
Sr. No. Task No Description Marks
1 3 Quiz 40
2 5 Home task 20
3 7.3 Walkthrough Tasks 10
4 8.1 to Practice tasks and Testing 30
8.2
Capital University of Science & Technology, Islamabad
Department of Computer Science
Faculty of Computing

Week 05. Lab 5: Data Analysis and visualization using

Excel
 Week 05. Lab 5: Data Analysis and visualization using Excel

1. Introduction
In today’s data-driven world, the ability to analyze and visualize data effectively is essential for informed
decision-making across various fields. Data analysis involves inspecting, cleaning, and transforming data
to uncover meaningful insights, while visualization helps communicate these insights clearly and
compellingly. Microsoft Excel, a powerful and widely-used tool, provides numerous features for data
manipulation, such as sorting, filtering, and applying formulas, alongside robust visualization options like
charts and graphs. In this lab, you will learn fundamental data analysis techniques using Excel, enabling
you to transform raw data into actionable information. By the end of the session, you will be equipped
with practical skills to analyze datasets and create visual representations that enhance understanding and
facilitate effective communication of your findings.
2. Activity Time Boxing
Table 2.1: Activity Time Boxing
Task No. Activity Name Activity time Total Time

3 Quiz 15 min 30 min

5.1 Understanding of Spreadsheet 10 min 10 min

6.2 Setting-up MS Excel 5 min 5 min

6.3 Walkthrough Tasks 10 min each 90 min
7 Practice tasks 10 min 30 min

3. Quiz [25 minutes]

4. Objectives
• Learn to use Excel functions for data manipulation (e.g., sorting, filtering, and formulas).
• Create various visualizations (charts, graphs) to represent data effectively.
• Analyze and interpret data to draw meaningful conclusions.
5. Concept Map
• Data Analysis Techniques → Sorting, Filtering, Functions (SUM, AVERAGE, COUNT)
• Visualization Tools → Charts (Bar, Line, Pie), Conditional Formatting, PivotTables
• Interpretation → Drawing conclusions from visual data representation
6. Homework Before Lab
7. Procedure and Tools
• Microsoft Excel
• Sample Dataset (provided by the instructor)
7.2 Walk-through Tasks
7.2.1 Insert Tab [Expected time = 20 min]
Insert Tab can be used if you want to add graphics or link your document with another document. Insert
tab in ribbon provides different options for inserting useful information to your excel sheet. The ribbon is
shown in Figure 2. 14.
 Figure 2. 14: Insert Tab in Ribbon

Charts
Charts allow you to present information contained in the worksheet in a graphic format. Excel offers
many types of charts including: Column, Line, Pie, Bar, Area, Scatter and more. To view the charts
available, click the Insert Tab on the Ribbon.
Creating a Chart:
– Select the cells that contain the data you want to use in the chart. In our example we can select the
shipping cost column to be used as chart data
– Click the Insert tab on the Ribbon
– Click the type of Chart you want to create. There are different chart types as show in
Figure 2. 15.

Figure 2. 15: Chart Tool

– Click the Column chart button and then select the 2d chart
– A bar chart will appear showing the shipping cost as chart as shown in Figure 2. 16.
– You can observe the costs at the Y-axis and as there are four items so you can see 4 bars at X-axis
– This chart has four components and you can right click on them separately to see the advance options
available.

Shipping Cost
25

20

15

Shipping Cost
10

0
1 2 3 4
Figure 2. 16: Resulting Chart
 Figure 2. 17: Modifying chart data

Modifying a Chart:
– Once you have created a chart you can do several things to modify the chart.
– Move the chart
To change the data included in the chart:
▪ Right click the Chart
▪ Click the Select Data button on the Design tab as shown in Figure 2. 17.
▪ You can see the data selected in the “Chart data Range” box.
▪ =Sheet1!$C$6:$C$10 tells us that we are using the data from sheet1 and our data starts from C6 and it
goes till C10. The $ signs in the middle tell us that it is address of the cell and not the data inserted by
user.

To reverse which data are displayed in the rows and columns, Figure 2. 18 shows how to achieve this task.
– Click the Chart
– Click the Switch Row/Column button on the Design tab

Figure 2. 18: Reverse Rows and Columns Data

 Chart Tools
The Chart Tools appear on the Ribbon when you click on the chart. The tools are located on three tabs:
– Design
– Layout
– Format
Design Tab
Within the Design tab you can control the chart type, layout, styles, and location. This tab is shown in
Figure 2. 19.

Figure 2. 19: Design Tab

1. Select the chart that you have drawn and now apply different chart layout to see the differences.
2. Apply the different colors available in the ribbon such as green or orange.
3. Try moving the chart with the help of the Move chart button in the end and move it to another sheet of this
Excel File.

Format Tab
Within the Format tab you can modify shape styles, word styles and size of the chart. Format tab is
shown in Figure 2. 20.

Figure 2. 20: Format Tab

7.2.2 Page Layout

Page layout ribbon is shown in Figure 2. 21. This ribbon contains different options related to page setup.
All these options have been covered in lab of Microsoft Word.
 Figure 2. 21: Page Layout Tab
1. Select the chart and apply different format type to see what effect it makes on your chart style and color.

7.2.3 Formulas [Expected time = 25 min]

A formula is a set of mathematical instructions that can be used in Excel to perform calculations. Formals
are started in the formula box starting with an = sign. A sample formula is shown in Figure 2. 22.
Figure 2. 22: Formula Example

The formula ribbon is shown in Figure 2. 23. This ribbon gives you different options for applying
formulas. The first section represents Function library. Function library contains different formulas from
various categories.

Figure 2. 23: Formulas Tab

Figure 2. 24: Data for Sum Formula

Creating Basic Formula

To create a basic formula in Excel we need the data on which we need to apply the formula. Data is
represented in Figure 2. 24.

To create a basic formula, you need to do the following:

– Select the cell for the formula
– Type “=” (the equal sign) and the formula
– The formula is of sum which would sum the values.
– “:” is used to specify the range of the cell on which you want to apply the formula
– Click Enter
Creating a basic formula is shown in Figure 2. 25.

Figure 2. 25: Sum Formula

When you click enter you would get the result as shown in Figure 2. 26 the highlighted column
represents the result after applying the formula.

Figure 2. 26: Result of Sum Formula

Figure 2. 28: Applying sum function

 Function Library

Figure 2. 30: Function Library

If-else Formula
If-else is an important formula in Microsoft Excel. There are always situations in which you need to
decide what you want to do when a particular stage is reached. Suppose you want to apply 5% of tax on
all those products whose price is greater than 5000 rupees. To do such a task in Microsoft Excel, you need
IF-ELSE formula. Before you apply IF-ELSE formula you need the data again on which you apply the
IF-ELSE formula. To apply the IF formula the data is given in Figure 2. 31.

Figure 2. 31: Sample Data

Now we want to know whether the products are expensive or cheap. To do so we would apply the IF
formula. The condition for expensive is greater than or equal to 50. If the product’s price is greater than or
equal to 50 then it is expensive otherwise it is cheap.
To apply IF formula, you need to do the following:
– Select the cell where you want to apply the formula
– Put = (equal sign) in that cell
– Then write the if formula as shown in Figure 2. 32.

Figure 2. 32: IF formula

When you apply the formula shown in Figure 2. 32, you will get the result shown in Figure 2. 33.
 Figure 2. 33: IF formula Result

Percentage Formula
There are some situations where you need to find some percent of a particular number, marks, price or the
percentage of salary to incremented annually for employees. For all such tasks you need a percentage
formula. We would apply a percentage formula for finding out how much sales tax to be applied on the
products price. To do so we need the data i.e., prices of products. Figure 2. 34 shows sample data for
products

Figure 2. 34: Data for Percentage Formula

We need to find 2% sales tax on product’s prices. To do so you need to do the following:
– Select the cell where you want to apply the formula
– Put = (equal sign) in that cell
– Apply the percentage formula as shown in Figure 2. 35.

Figure 2. 35: Percentage Formula

When you would apply the formula, you would get the required sales tax as shown in Figure 2. 36. Sales
tax is shown in Highlighted column.
 Figure 2. 36: Sales tax after percentage formula
CountIf Formula
The COUNTIF function in Excel is used to count the number of cells within a range that meet a single
condition or criterion. It’s a powerful tool for analyzing data based on specific criteria.
COUNTIF(range, criteria)
• range: The range of cells that you want to apply the criteria to.
• criteria: The condition that must be met for a cell to be counted.

DatedIF FORMULA

The DATEDIF function in Excel calculates the difference between two dates in days, months, or years. Its syntax
is =DATEDIF(start_date, end_date, unit) with units like “Y” for years, “M” for months, and “D” for days.
7.2.4 Data Tab [Expected time = 25 min]
In Excel you need to play around data to achieve the desired goals. Therefore, the Data tab has very
importance. In this tab you are given with various options that you can apply on the data in the Excel
Sheet. We will not be covering everything from this ribbon shown in Figure 2. 37. We look at Sorting and
filtering and how to get the external data from other sources.

Figure 2. 37: Data Tab

Sort & Filter

Sorting and Filtering allow you to manipulate data in a worksheet based on given set of criteria. You can
sort the data in ascending and descending order. There are two types of sorts in Microsoft Excel i.e., Basic
Sorts and Custom Sorts.
Basic Sort
To execute a basic descending or ascending sort based on one column perform the following steps:
• Highlight the cells that will be sorted
• Click the Sort & Filter button on the Home tab

• Click the Sort Ascending (A-Z) button or Sort Descending (Z-A) button These steps are shown in Figure.
 To sort on the basis of more than one column:
– Click the Sort & Filter button on the Home tab
– Choose which column you want to sort by first
– Click Add Level
– Choose the next column you want to sort
– Click OK

This process is represented in following figures.

Figure 2. 39: Custom Sort

Figure 2. 40: Custom Sort column selection

Get and Transform Data
This section of Data tab gives you the option of importing data from other sources. As you can see in
Figure 2. 41 various sources have been shown from where you can get the data. The data sources are
Access, Web, and Text etc.

Figure 2. 41: Get and Transform Data

Data from File

Suppose you have created some data and that data is stored in some other file. You need that data in your
Excel sheet. To get the data from the file click on “From File” option given in the Get Data section.
When you click the option a dialog box would appear asking you to choose your data location. This
dialog box is shown in Figure 2. 42.

Figure 2. 42: Data from file

Click on New source button. When you click on this button, a wizard would appear which would ask you
to choose the type of data. This wizard is shown in Figure 2. 43.
 Figure 2. 43: Selecting Data Source Wizard

8. Practice Tasks [Expected time = 30 min]

You are given the sheet below in Table 1. You are supposed to create an Excel spreadsheet and fill in the
data and then complete the tasks given below. The data is given in the table. Copy this data into a newly
created Excel sheet.
Table 2.3.: Sample data for Practice Tasks
S. No S. Name 1st Term (50) 2nd Term (50) Obt. Marks Total Marks %age Grade
1 Huma 20 25 100
2 Awais 22 12 100
3 Ali 33 25 100
4 Musab 21 33 100
5 Musawar 32 22 100
6 Mariam 25 32 100
7 Sumbal 32 34 100
8 Hammad 22 22 100
9 Naveed 26 20 100
10 Ashraf 28 18 100
• Calculate the obtained marks for the two terms
• After calculating the marks find the percentage.
• Then apply the if formula and calculate the grades according to the MAJU scheme as given in the
following table
Table 2.4: Grading Scheme for Practice Tasks
Grade Marks
A >= 90
A- >85 && <90
B+ >80 && <=85
B >75 && <=80
B- >71 && <=75
C+ >65 && <=71
C >61 && <=65
C- >56 && <= 60
D+ >52 && <=56
D >50 && <=52
F <50
• Sort the grades in ascending order
• Plot the data into a bar chart that shows the relationship between 1st term, 2nd term and total obtained
marks. A sample is shown below in the Figure 2. 44.
• Also Count the Total number of Grade A, A-, B+ etc grades attained and plot the attained data into a
graph.

Figure 2. 44: Expected Outcome of Task 8.5

Practice Task 2 [Expected Time=30 min]
• Analyze the provided dataset to extract meaningful insights and present them using tables and graphs.
Download the dataset from the \\fs\Lectures$.Perform the specified analyses and generate the
required tables and graphs. Use appropriate Formulas and techniques to ensure accurate and clear
presentation of your findings.
• Tasks:
o The second column contains dates. Determine how many years have passed since each attack
occurred.
o According to column “Number of Strikes”, differentiate and label the areas as follows:
▪ "Dangerous" if the number of strikes is less than 2.
▪ "More Dangerous" if the number of strikes is greater than 2 but less than 4.
▪ "Extremely Dangerous" if the number of strikes is 4 or more.
o Create a separate table to calculate the number of attacks in the following regions and
generate a graph illustrating the total number of attacks in these regions.
▪ Balochistan
▪ FATA
▪ KPK
o Check the number of attacks related to the following areas, Sort these areas based on the
number of attacks from highest to lowest and create a graph illustrating the total number of
attacks in these areas.
▪ South Waziristan
▪ North Waziristan
▪ Bajaur Agency
▪ Bannu
▪ Khyber
▪ Kurram Agency
▪ Khyber Agency
o Create a New column Named “Temperature in Fahrenheit” and the temperature data in the
dataset is given in Celsius. Convert this data to Fahrenheit using the formula: F=9/5*C+32.
o Submit the completed assignment in \\fs\Assignments$ ->Samra Naseer ->Lab 4 ->
Assignment
Ensure that your graphs are properly labeled and include titles, axes labels, and legends where necessary.
Pay attention to data accuracy and cleanliness; handle any missing or inconsistent data appropriately.
Provide clear explanations and interpretations for each part of the analysis

9. Evaluation Criteria
The evaluation criteria for this lab will be based on the completion of the following tasks. Each task is
assigned the marks percentage which will be evaluated by the instructor in the lab whether the student
has finished the complete/partial task(s)
Table 2.5: Evaluation of the Lab
Sr. No Task No. Task Description Grade

1 5.1 Homework 20
2 6.1 Understanding Excel Layout 5
3 6.2 Walkthrough Tasks 5
4 8 Practice Tasks 30
5 Quiz 40
Week 7, 8. Lab 7 and 8: Data Visualization through Python
 Data visualization

Learning Objective
Topic covered in this lab.
• How to import dataset in Kaggale
• How to use pandas libraires
• How to visualize data using pandas libraires
1. Introduction:

Certainly! Pandas is a powerful and widely used open-source data manipulation and analysis
library for Python. It provides data structures and functions designed to make working with
structured data quick, easy, and intuitive.

2. Key Features

1. DataFrame: Pandas introduces a DataFrame object, which is a two-dimensional tabular, mutable

data structure with labeled axes (rows and columns).

2. Data Input and Output: Pandas has robust capabilities for reading and writing data from different
file formats such as CSV, Excel, SQL, JSON, and more.

3. Data Selection and Manipulation: Pandas allows for easy data selection, slicing, filtering, and
manipulation using various methods like indexing, boolean indexing, and merging of datasets.

4. Data Aggregation and Grouping: Pandas provides functionality for grouping data, aggregating
results, and performing operations on groups of data.

5. Handling Missing Data: It offers methods to identify and handle missing or NaN values within
datasets.
 6. Time Series Analysis: Pandas has dedicated support for working with time series data, making it
a popular choice for financial and economic data analysis.

7. Data Visualization: While not a primary focus, Pandas provides basic plotting and visualization
tools for quick data exploration.

Overall, Pandas is widely used in data science, machine learning, financial analysis, and other
domains where data manipulation and analysis are an essential part of the workflow. Its ease of
use and extensive capabilities make it a popular choice for data handling in Python.
3. Reading and Writing Data

• Reading and Writing CSV Files:

- `pandas.read_csv`: Read data from a CSV file into a DataFrame.
- `DataFrame.to_csv`: Write DataFrame to a CSV file.

• Reading and Writing Excel Files:

- `pandas.read_excel`: Read data from an Excel file into a DataFrame.
- `DataFrame.to_excel`: Write DataFrame to an Excel file.

• Reading and Writing JSON Files:

- `pandas.read_json`: Read data from a JSON file into a DataFrame.
- `DataFrame.to_json`: Write DataFrame to a JSON file.

• Reading and Writing SQL Database:

- `pandas.read_sql`: Read data from a SQL database into a DataFrame.
- `DataFrame.to_sql`: Write DataFrame to a SQL database.

• Reading and Writing HTML:

- `pandas.read_html`: Read HTML tables into a list of DataFrame objects.
- `DataFrame.to_html`: Render a DataFrame as an HTML table.

• 6. Reading and Writing Parquet Files:

- `pandas.read_parquet`: Read data from a Parquet file into a DataFrame.
- `DataFrame.to_parquet`: Write DataFrame to a Parquet file.
 • Reading and Writing Feather Files:
- `pandas.read_feather`: Read data from a Feather binary file into a DataFrame.
- `DataFrame.to_feather`: Write DataFrame to a Feather binary file.

These capabilities make `pandas` a versatile library for working with data from various sources, including
flat files, databases, and web-based data formats. The functions provide a consistent and easy-to-use
interface for data input and output, making data manipulation and analysis more accessible and efficient.

4. Import Csv file through Kaggle

• Open the data set in the Kaggle.

• Top right creates new Notebook.

Create New Notebook

• On right side clik the input dataset and copy the pate and place it into pd.read.csv
df = pd.read_csv('/kaggle/input/tastetrios-exploring-ingredient-combinations/TasteTrios - Sheet1.csv')
 5. Panda’s functions Data Exploration:
• `Head`: Return the first n rows of the DataFrame.
• `Tail`: Return the last n rows of the DataFrame.
• `Info`: Print a concise summary of the DataFrame, including the index dtype and
column dtypes, non-null values, and memory usage.
Data Selection and Indexing
• `loc`: Access a group of rows and columns by label(s) or a boolean array.
• `iloc`: Purely integer-location based indexing for selection by position.
• `at`: Access a single value for a row/column label pair.
• `iat`: Access a single value for a row/column pair by integer position.

Data Manipulation and Analysis

• `merge`: Merge DataFrames using a database-style join.
• `concat`: Concatenate pandas objects along a particular axis.
• `groupby`: Group DataFrame using a mapper or by a Series of columns.
• `pivot_table`: Create a spreadsheet-style pivot table as a DataFrame.
Data Visualization:
• `plot`: Make plots of Series or DataFrame.
• `hist`: Draw histogram of the input Series.
• `boxplot`: Make a box plot from DataFrame columns.

Lab Task
Open your excel data set in Kaggle analyze you data using pandas libraries.
Capital University of Science & Technology Islamabad
Department of Computer Science
Faculty of Computing

Week 05 Lab 05: Getting Started with MS Access: Tables

and Forms
 Getting Started with MS Access: Tables and Forms

1. Introduction
Microsoft Access is a powerful database management system that allows users to store, organize, and
manage data efficiently. At the heart of any Access database are tables, which function like spreadsheets,
holding information in rows and columns. Each table consists of records (the rows) and fields (the
columns), allowing you to categorize and retrieve data easily. Understanding how to create and
manipulate tables is essential for anyone looking to manage large amounts of information, as it sets the
foundation for effective data organization and retrieval.

Forms in MS Access serve as user-friendly interfaces for interacting with the data stored in your tables.
They provide a way to enter, edit, and view information in a more visual format, making it easier to
manage data without directly interacting with the table. By using forms, you can create customized
layouts that streamline data entry and enhance user experience. In this lab, you will learn how to create
tables to structure your data and design forms that simplify data entry, empowering you to manage and
analyze information efficiently.

2. Activity Time Boxing

3.
Table 1.1: Activity Time Boxing
Task No. Activity Name Activity time Total Time
3 Quiz 25 min 30 min
7.2 Setting-up Microsoft Access 5 min 5 min
7.3 Walkthrough Tasks 2-3 min 55 min
8 Practice tasks 30 min 60 min

4. Quiz [30 minutes]

5. Objectives
• Understand Database Structure
• Create and Manage Tables
• Design User-Friendly Forms

6. Concept Map
MS Access Objects
MS Access uses “objects" to help the user list and organize information, as well as prepare specially
designed reports. When you create a database, Access offers you Tables, Queries,
Forms, Reports, Macros, and Modules. Databases in Access are composed of many objects but the
following are the major objects:
• Tables
• Forms
• Queries
Figure 1.1 Blank database
 • Reports

Tables:

Table is an object that is used to define and store data. When you create a new table, Access asks you to
define fields which is also known as column headings.
• Each field must have a unique name, and data type.
• Tables contain fields or columns that store different kinds of data, such as a name or an address, and
records or rows that collect all the information about a particular instance of the subject, such as all the
information about a customer or employee etc.
• You can define a primary key, one or more fields that have a unique value for each record, and one or more
indexes on each table to help retrieve your data more quickly.

Form:
Form is an object in a desktop database designed primarily for data input or display or for control of
application execution. You use forms to customize the presentation of data that your application extracts
from queries or tables.
• Forms are used for entering, modifying, and viewing records.
• The reason forms are used so often is that they are an easy way to guide people toward entering data
correctly.
• When you enter information into a form in Access, the data goes exactly where the database designer wants
it to go in one or more related tables.

7. Walk-through Tasks

To create a database , we first need to open MS Access and you will see the following screen in which
different Access database are displayed.

Figure 1.1 Blank database

Setting up tables.
Access will create a new blank database and will open up the table which is also completely blank.

Figure 1.3 Create New table.

8. Data types

Each field in a table has properties, and the most important one is the data type, which shows what kind of
data it can hold in MS Access.

Type of Data
Description Size

Text or combinations of text and numbers,

Up to 255
Short Text including numbers that do not require
characters.
calculating (e.g. phone numbers).

Lengthy text or combinations of text and Up to 63, 999

Long Text
numbers. characters.

1, 2, 4, or 8 bytes
Numeric data used in mathematical
Number (16 bytes if set to
calculations.
Replication ID).

Date and time values for the years 100 through

Date/Time 8 bytes.
9999.

Currency values and numeric data used in

 mathematical calculations involving data with
Currency 8 bytes.
one to four decimal places.

A unique sequential (incremented by 1)

4 bytes (16 bytes if
number or random number assigned by
AutoNumber set to Replication
Microsoft Access whenever a new record is
ID).
added to a table.

Yes and No values and fields that contain only

Yes/No 1 bit.
one of two values (Yes/No, True/False, or
On/Off).

Table 1.1 Data types

• Open Table Design View: In the new database window, click on the "Table Design" option from the "Create" tab.
• Define Fields:
o In the design view, you will see a grid to define your fields.
o Enter the field names in the first column (e.g., "ID," "Name," "Age," "Email").
o In the second column, select the data type for each field from the dropdown menu (e.g., Number, Short Text,
Date/Time).
• Set Field Properties:
o Click on each field to set properties in the "Field Properties" pane below.
o Set properties like "Field Size," "Default Value," and "Required" as needed.
• Set Primary Key (if applicable):
o To set a field as the primary key, right-click on the field (e.g., "ID") and select "Primary Key." This field
must contain unique values.
• Save the Table:
o Click on the "Save" icon (disk icon) or press Ctrl + S.
o Name your table (e.g., "Students") and click "OK."
• Close the Table:
o Close the design view by clicking on the "X" button on the table tab.
• Open the Table for Data Entry:
o Double-click on your newly created table in the navigation pane to open it.
o You can now enter data into the fields you defined.
• Save Your Data:
o After entering data, click on the "Save" icon again to save your changes.

2. Form
Create a Form
The wizard allows us to pick the fields from one or
more (related) tables and queries, set a layout, and
automatically saves the result.
1. Select Employee Table.
2. From the Create Tab, in the Forms
group,click the Form Wizard.
3. Use the double arrow to bring over all the
fields from the employee table, then use
the single arrow to exclude the Dept ID.
4. Choose the Justified layout.
This layout will try to fit fields on
the same row whenever possible.
 Columnar – Single Form

 Tabular – Multiple Items

 Datasheet – Table view

5. Title the Form Employees Justified.

Access looks at the field size property to decide

the size of the text box. If you look in the table,
you'll see the field size for the names is set to 255.
 Command Buttons
1.Click the Command Button option in the controls listed on the Design tab.
Click on the Form where you want the button to appear. Remember you are dropping the top left corner of the button to be.
This should launch a Command Button Wizard.
2. Create three buttons.
 Go to Next Record
 Go to Previous Record
 Close Form
Command Button Wizard
Step 1: What do you want to happen?
Record Navigation – Moving between or
searching for records
Record Operations – Adding,
deleting, duplicating records
Form Operation –Close Forms, Open
Forms (this is how we make menus, open
Form buttons!), Filter Forms
Report Operations – Print Reports, Preview
Reports, Email Reports
Application – Exit Access
Miscellaneous – Run Queries and Macros

Step 2: How do you want the button to look?

Text – You can put text on the buttons. If you
want a Hot Key option, like the Back and
Next button in this wizard, put an & in front of
the letter you want.
Picture – The wizard will offer you common
images used with the action you chose. You
can click on the Show All Pictures button to
see all the images in the button library. You
can put any BMP image on a button, use the
Browse button to find your picture.

Step 3: Select name and click finish

Report Wizard
1. Select Patients table

2. From the Create tab choose Report

Wizard.
  Choose all the fields (next)
 No Grouping (next)
 No Sorting (next)
 Layout: Columnar, Portrait,
Adjustingfield widths
 Title: Patients Columnar

3. Repeat steps 1 and 2 for Layout: Tabular

4. Repeat steps 1 and 2 for Layout: Justified.

 Justified looks bad because of the
field sizes.
Report Layout Columnar

Report Layout Tabular

Report Layout Justified
 Field Sizes Matter
Remember when you go through the instant
Form/Report tools or wizards Access looks at the
Field Size property to determine how big the text
boxes need to be. We can continually readjust the
text boxes every time we use these tools, or we
can make sure our field sizes are more
appropriate.
1. Close all database objects (tables, Forms,
Reports…).
2. Open the Patients table in Design view.
3. Change the field sizes:
 Pt Med Rec 10
 Pt Last Name 50
 Pt First Name 50
 Pt Address 255
 Pt City 50
 Pt State 2
 Pt Zip 15

4. Close and Save the table, confirm it is OK if data is lost.

5. Repeat the Report Wizard using the Justified layout.
6. Save as Patients Justified 2.

Page 11
 Report Sections
1. Select Patients table
2. From the Create tab choose Report Wizard.
 Choose all the fields (next)
 No Grouping (next)
 No Sorting (next)
 Layout: Tabular, Landscape, Adjusting field widths
 Title: Patients
3. Set Zoom to four pages
4. Report Sections
 Report Header, "Patients" ‐ first page only
 Page Header/Footer, "Med Rec, Last Name, First Name..." on every page
 Detail, each line of data every record

The Design view of the Report shows the

four sections within the Report.
Right‐click on the Report to go to the
Design view.

Page 12
Add a Report Footer
1. In the Design of the Report, stretch the Report Footer section. If you cannot drag the resize area,
use the Section properties.
2. Right‐click inside the Report Footer section and choose a fill color.
3. Preview the Report to see where the Report footer will appear.
 Last page, after the last Record Detail, before the Page Footer.
4. From the Controls on the Design tab, choose the Label. Click to turn the tool on, and click where
you'd like the box to appear.

5. Type "Created by [your name]"

6. Use the Format text tools on the Home or Format tab to adjust fonts, sizes and colors.
7. Preview the Report.
8. Close and Save the Report. The wizard already saved it, so you won't have to name the Report.

Page 13
 Create a Report in Design view
1. From the Create Tab, in the Reports group, click the Report Design.
2. Open the property sheet.
3. Click in the Grid of the Detail Section to see the Section properties.
 Change the Height property to 2"
4. Click outside the grid to see the Report properties.
 Change the Record Source property to Patients
5. Open the field list with the Add Existing Fields button on the Design tab.
6. Double‐click on Pt Med Rec in the Field List.
7. Go to the Print Preview to see the result.
 0.25" margin + 0.25" Page header
+ 2.00" for each record (Detail)
 This would work for a columnar Report.

Set up a Tabular Report

1. In the Design view, move the Pt Med Rec label and text box as high as
you can in the detail section
 Or set property Top to 0"
2. Reduce the height of the Detail section as far as it will go
 Or set property height to 0". It can't be zero because there are
objects in the way, but it will make it as small as possible.
3. Go to the Print Preview to see the result.

4. Adjust the spacing in the detail section so the data isn't so tight.
 You can eyeball this, but I would select the field, press the down
arrow key on my keyboard four times, press the up arrow 2 times.
This stretches out the detail section and re‐centers my field within
the given space.
5. Move the label to the Page Header.
 The label is attached to the text box, to sever their connection use
Cut. Cut the label from the detail section, paste in the Page Header
section.
 Use your align and size tools to make the Report organized.
6. Make a matching Last Name column.
7. Go to the Print Preview to see the result.
8. Close and Save as Patients Draft 1.

Page 14
 Quick Filter
1. Open the Report Patients in Report view.
 Notice the Sorting tools are disabled, but the filters are working.
2. Right‐click on Waldo in the City Column. Choose Equals Waldo.
3. Click the Toggle filter button on the Home tab.
 Filters are temporary. If you close the Report and reopen it, all the data will return.

Sort Order
1. Go to the Design view of the Report.
2. From the Design tab or from the
right‐click menu , open the
Sorting and Grouping Options
 Depending on where you find
the tool it has slightly different
names: Group & Sort; Sorting
and Grouping; Group, Sort,
and Total.
3. ‐ Sort by City "with Z on top".
4. ‐ Sort by Last Name "With A on top".
5. ‐ Close and Don't Save.

Quick Sort in Layout View

1. Open the Patients Report in Layout view.
2. If needed, open the Group & Sort pane.
3. Right‐click on a city and choose Sort Z to A.
4. Right‐click on a last name and choose Sort A to Z.
 This replaces the City sort, only one sort level this way.
2. Save!!

8. Practice Tasks [Evaluation Task=30 min]

1. Based on above schema, create the above schema in MS Access. Insert 10 records into the
student’s table. Insert 4 records into the instructor table. Insert 4 records into the Course table.
Insert 2 records into the Department table.
2. Develop a user-friendly form for each of the tables (Students, Instructor, Course, and
Department).
• The forms should allow users to insert, update, and delete records. Ensure that the forms
are designed to minimize data entry errors.
• Test the forms by inserting at least one new record in each table using the forms you have
created.
3. The report should be neatly formatted and include only the relevant information. Ensure that the
data displayed is accurate and reflects the current state of the database. Create a report that
displays the following information:
a. Student Name
b. Student Email
c. Instructor Name (associated with the student's course)
d. Department Name (associated with the student's course).
Capital University of Science & Technology, Islamabad
Department of Computer Science,
Faculty of Computing

Week 13. Lab 13: Introduction to HTML

 Lab 13. Introduction to HTML

1. Introduction
HTML, or HyperText Markup Language, is like the building blocks for making web pages! Imagine
you're creating a storybook; just like you need pages, words, and pictures to tell a story, web pages need
HTML to show text, images, and links. HTML helps organize everything on a website, making it easy to
read and fun to explore. Each part of the web page has its own special tag, like a label that tells the
computer what it is. For example, a tag might say, "This is a title!" or "Here’s a picture!"
In this lab, you’ll get to play with HTML by creating your very own web page! You’ll learn how to
write simple tags to add titles, paragraphs, and images, just like putting together. By the end of our time
together, you’ll be able to make a basic web page all by yourself, showing off your creativity and ideas.
This is your first step into the exciting world of web design, where you can create anything you dream of!
2. Activity Time Boxing
ask No. Activity Name Activity time Total Time
3 Quiz 25 min 30 min
7.2 Setting-up 5 min 5 min
7.3 Walkthrough Tasks 2-3 min 55 min
8 Practice tasks 30 min 60 min

3. Quiz [30 minutes]

4. Learning objective
Topic covered in this lab.
• Understand the basic structure of an HTML document.
• Learn to use essential HTML tags (headings, paragraphs, lists, links, images).
o Create a simple web page using HTML.
5. Homework Before Lab
• Read about the basic structure of HTML documents.
• Research different HTML tags and their uses.
6. Concept Map
HTML, which stands for Hypertext Markup Language, is the standard markup language used to create
and design web pages. It is the backbone of most websites, providing the structure and content for the web
pages you see on the internet. HTML is not a programming language; instead, it is a markup language that
uses tags to define elements within a document.
7. Procedure and Tools:
• Tools Needed:
• Text Editor (e.g., Notepad, Sublime Text)
• Web Browser (e.g., Chrome, Firefox)
• Setting Up:
▪ Open your text editor and create a new HTML file.
▪ Familiarize yourself with saving files in .html format.
 7.1. Walk-through Tasks
Here are some key concepts to understand about HTML:

Extension of HTML file

HTML files typically have a file extension of ".html". This extension is used to identify and differentiate
HTML files from other types of files. For example:
HTML Document Structure

• <!DOCTYPE html>: This declaration defines the document type and version of HTML being used (in this
case, HTML5).
• <html>: The root element that wraps all the content on the page.
• <head>: Contains meta-information about the HTML document, such as the title.
• <title>: Sets the title of the HTML document (displayed on the browser tab).
• <body>: Contains the main content of the HTML document.

HTML Tags:

Tags are used to define HTML elements. They are enclosed in angle brackets (<>). Tags
often come in pairs, with an opening tag and a closing tag. The content is placed between the opening and
closing tags.
Example

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>
Common HTML Elements

• <h1>, <h2>, ..., <h6>: Headings of different levels.

• <p>: Paragraph.
• <a>: Anchor, used for creating hyperlinks.
• <img>: Image.
• <ul>, <ol>, <li>: Unordered list, ordered list, list item.
• <div>: Division, used for grouping content.
• <span>: Inline container.
• <br>: Line break.
• <hr>: Horizontal rule.

HTML Attributes
HTML tags can have attributes that provide additional information about the element. Attributes are
included in the opening tag and are usually in name/value pairs.

Example:

<a href="https://www.example.com">Visit Example.com</a>

<img src="image.jpg" alt="Description">

Practice Tasks
• Develop a simple web page about a chosen topic, incorporating various HTML elements.
• Design a CV.
Lab Task
Open w3schools.com and implement all tags.
 Lab 14: Introduction to CSS
1. Introduction
CSS, or Cascading Style Sheets, is like the magic paintbrush for your web pages! While HTML helps
us build the structure of a website, CSS is what makes it look beautiful and colorful. Imagine you
have a plain drawing, and you want to make it bright and eye-catching. That’s what CSS does—it lets
you choose colors, fonts, and layouts, making everything more fun to look at! With CSS, you can
change the size of text, add backgrounds, and even create cool effects that make your web page pop.
In this lab, you’ll learn how to use CSS to add style to your HTML creations. You’ll discover how to
pick colors, change fonts, and organize your web page to make it unique. By the end of our session,
you’ll be able to take your simple web page and turn it into a colorful masterpiece that reflects your
personality and ideas. Get ready to unleash your creativity and see how exciting web design can be
with CSS!

2. Activity Time boxing

Table 1: Activity Time Boxing
Task No. Activity Name Activity time Total Time
6.2 Quiz 20mins 20mins

6.3 Walkthrough Tasks 30mins 60mins

7 Practice tasks 20 to 30mins for each task 50mins
8 Evaluation Task 40mins for all assigned task 40mins

3. Quiz [20
minutes]
4. Objectives
• Understand how to link CSS to HTML documents.
• Learn to use basic CSS properties for styling (color, font, layout).
• Apply CSS to enhance the appearance of a web page.
5. Concept Map:
• CSS Basics → Selectors, Properties, Values
• Styling Techniques → Color, Font, Margin, Padding, Layout
6. Homework Before Lab:
• Read about the basics of CSS and its syntax.
• Explore different CSS properties and their effects.
7. Procedure and Tools:
• Tools Needed:
o Text Editor (e.g., Notepad, Sublime Text)
o Web Browser (e.g., Chrome, Firefox)
• Setting Up:
o Create a CSS file and link it to your HTML document.
o Familiarize yourself with writing CSS rules.
 7.1 Walk-Through Tasks:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Begin Tag End Tag Summary

<p></p>Separates two blocks of text by denoting a paragraph break. To justify a paragraph,

use ALIGN="left, right, justify, or indent"

inside the tag.

<b></b> Changes text between tags to a bold font

<strong></strong> Logically strengthens the text between the

tags

<i></i>Changes text between tags to an italic font

<u></u> Underlines text between the tags

<ul></ul> Defines an unordered list consisting of one

or more <LI> elements

<ol></ol> Defines an ordered list in which each of

one or more <LI> elements are automatically numbered

<li></li>Defines a list item.

<hr></hr>Produces a divider between sections of text

<table></table> Defines a series of rows and columns to

format the placement of text and images on the page

<tr></tr> Defines a row of a table.

 <td></td> Defines a data cell. The data cell contains
the actual text or image that is to be displayed in a table cell
<center></center> Centers the text vertically between the
left and right margins
<A></A> Defines text as a hypertext link. The A
element must have either the HREF or NAME attribute defined inside it.
<A HREF="http://url here/">Text to display</A>
<A NAME="destination tag">Text to display</A>

<BQ></BQ> Defines a separated multi-line set of text to be rendered as quoted text.

<imgsrc="..."> Specifies an image file that is to be displayed. The '...' must be replaced
with the path and filename of the image.
Additional parameters include: ALIGN="alignment option for image" ALT="description of image"
WIDTH="width of image" HEIGHT="height of image"
BORDER="value to specify width of border 0 indicates no border"
<blink></blink> Causes the text between the tags to blink.
This tag is rarely considered professional by web developers and therefore should be used very sparingly

7.2 Styling HTML with CSS

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:

• Inline - by using the style attribute in HTML elements

• Internal - by using a <style> element in the <head> section
• External - by using an external CSS file

The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use
inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.
7.3 Inline CSS
An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style
attribute of an HTML element.
This example sets the text color of the <h1> element to blue:

<h1 style="color:blue;">This is a Blue Heading</h1>

7.4 Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;} h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
7.5 External CSS
An external style sheet is used to define the style for many HTML pages.

With an external style sheet, you can change the look of an entire web site, by changing one file!
To use an external style sheet, add a link to it in the <head> section of the HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
7.6 CSS Fonts
The CSS color property defines the text color to be used. The CSS font-family property defines the font to
be used. The CSS font-size property defines the text size to be used.
<!DOCTYPE html>
<html>
<head>
<style> h1 {
color: blue;
font-family: verdana; font-size: 300%;
}
p{
color: red;
font-family: courier; font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

8. Practice Tasks
8.1 Task 01
Will be given by Lab instructor.
.
9. Evaluation Criteria
The evaluation criteria for this lab will be based on the completion of the following tasks. Each task is
assigned the marks percentage which will be evaluated by the instructor in the lab whether the student has
finished the complete/partial task(s).
Table 2: Evaluation of the Lab

Sr. No Task No. Task Description Grade

1 7 Practice task 30
2 - Unseen Task 20

PracticeTask Confirmatio Comments

T1
T2
T3

10. Evaluation Task (Unseen) [Expected time = 60 mins]

The lab instructor will give you unseen task depending upon the progress of the class.
11. Evaluation Criteria
The evaluation criteria for this lab will be based on the completion of the following tasks. Each task is
assigned the marks percentage which will be evaluated by the instructor in the lab whether the student has
finished the complete/partial task(s).
Table 3: Evaluation of the Lab
Sr. No. TaskNo Description Marks

1 6 ProceduresandTools 0
2 7.1 Practicetask1withTesting 5
3 7.2 Practicetask2withTesting 5
4 7.3 Practicetask3withTesting 5
5 8 EvaluationTasks(Unseen) 80
6 GoodProgrammingPractices 5

TotalMarks 100
12. Further Reading
HTML W3 Tutorial
• http://www.w3schools.com/html/ HTML code Tutorial
• http://www.htmlcodetutorial.com/