SES

Computer Book
For Class 5th
Copyright

Title of the Book : SES Computer Book

© SES publishers
All rights reserved.

No part of this book may be copied, reproduced, distributed, or transmitted in any form or by
any means—electronic, mechanical, photocopying, recording, or otherwise—without prior
written permission from the author/publisher, except for brief excerpts used in reviews or
academic purposes.

This book is intended for educational use only. Any unauthorized commercial use, modification,
or distribution of its contents is strictly prohibited. Legal action may be taken against individuals
or organizations that violate these terms.

For permissions, inquiries, or collaboration requests, please contact:

[email protected]
 About the Authors
This book has been created with dedication and passion to help students build a strong foundation
in computers. Our goal is to empower young learners with the knowledge and skills they need to
become future computer geniuses, web developers, data analysts, seo expert, search
optimization, detail marketing expert and IT professionals that this organization aims it
students to become

Under the guidance and leadership of:

🔹 Mr. Mubashir Ali Khan – Director of Seerat Educational System
🔹 Mr. Sheraz Ahmed- HOD computer studies

This book has been carefully designed and developed by our team of educators:
📌 Ms. Sana Ahmed
📌 Ms. Hafsa Mughal
📌 Ms. Mehbooba

Together, we have created this book to export the new learning to the world of technology by
developing and empowering their skills of operation system such as windows to make them
iterated and better user of computer. We believe that with the right guidance and resources, every
student has the potential to achieve excellence, expertise and self-severalty in the field of
computers.

For further query, contact us at:

[email protected]

🌐 https://seerat.education/
Contents
Unit 1 : Recall Book of Class 3 and 4 ............................................. 12
Lesson 1: Recall Book of Class 3 ........................................................................12
History of Computer ............................................................................................12
Types of Computers ............................................................................................................................ 12
Parts and Functioning of a Computer ................................................................................................. 13
What is an Operating System? ............................................................................................................ 14
Why Do We Use Windows? ............................................................................................................... 14
Turning On and Shutting Down the Computer ................................................................................... 15
Exploring the Desktop ........................................................................................................................ 15
Using the Mouse ................................................................................................................................. 16
Using the Keyboard ............................................................................................................................ 16
The Start Menu ................................................................................................................................... 16
The Taskbar ........................................................................................................................................ 17
The Notification Area ......................................................................................................................... 17
Switching Between Programs ............................................................................................................. 17
Working with Files and Folders: ..........................................................................18
File ...................................................................................................................................................... 18
Folder .................................................................................................................................................. 18
Creating a Folder................................................................................................................................. 18
Renaming Files and Folders................................................................................................................ 19
Deleting Files and Folders .................................................................................................................. 19
Restoring Files from the Recycle Bin ................................................................................................. 19
Moving and Copying Files.................................................................................................................. 20
Using Cut, Copy, and Paste ................................................................................................................ 20
Using File Explorer ............................................................................................................................. 20
Searching for Files .............................................................................................................................. 20
Basic Applications in Windows: ..........................................................................21
Opening and Closing Applications ..................................................................................................... 21
Using Notepad for Typing .................................................................................................................. 21
Saving a File in Notepad ..................................................................................................................... 21
Drawing in Paint ................................................................................................................................. 21
 Coloring a Picture in Paint .................................................................................................................. 21
Erasing Mistakes in Paint.................................................................................................................... 21
Using Calculator ................................................................................................................................. 21
Adjusting the Computer’s Volume ..................................................................................................... 22
Changing the Desktop Background .................................................................................................... 22
Taking a Screenshot ............................................................................................................................ 22
Customizing Windows .........................................................................................23
Changing the Screen Saver ................................................................................................................. 23
Adjusting the Brightness of the Screen ............................................................................................... 23
Changing the Date and Time .............................................................................................................. 23
Changing the Mouse Pointer ............................................................................................................... 23
Pinning and Unpinning Apps to the Taskbar ...................................................................................... 24
Creating a Shortcut on the Desktop .................................................................................................... 24
Using the Start Menu to Search for Apps ........................................................................................... 24
Managing Computer Settings...............................................................................25
Changing the Keyboard Language ...................................................................................................... 25
Using the Recycle Bin......................................................................................................................... 25
Emptying the Recycle Bin .................................................................................................................. 25

Lesson 2: Recalling Class 4th topics................................................. 26

Excel, Word, and PowerPoint ..............................................................................26
What are Word, Excel, and PowerPoint? .............................................................. 26
Cool Features of All Three Programs ................................................................................................. 26
Safe Browsing ..................................................................................................27
What is the Internet? .................................................................................... 27
How to Stay Safe Online? ................................................................................................................. 27

Understanding Numbers and Text in Excel ........................................................ 28

Creating and Formatting Tables ........................................................................ 28

Fun Coding with Code.org ....................................................................................................... 29
 Unit 2: Mastering Excel – Learning Data Basics .............................. 30
Lesson 1: Excel ....................................................................................................30
Lesson 2: Working with Data: Formatting, Sorting, and Filtering in Excel .......31
Lesson 3: Using Tables in Excel – Formatting Data for Better Analysis ............35
Lesson 4: Using SUM, AVERAGE, Percentage, MIN, and MAX in Excel .......36
Lesson 5: Creating Charts in Excel – Bar and Pie Charts for Visualizing Data..38

Unit 3: Power BI ................................................................................ 39

Chapter 1: Introduction to Power BI ....................................................................39
Chapter 2: Exploring the Power BI Interface ......................................................40
Chapter 3: Understanding Different Types of Charts ..........................................41
Chapter 4: Importing Excel Data into Power BI..................................................42
Chapter 5: Basic Data Cleaning Tools .................................................................43
Chapter 6: Creating Simple Charts in Power BI ..................................................44
Chapter 7: Understanding Filters in Power BI .....................................................44
Chapter 8: Creating Basic Reports .......................................................................45
Chapter 9: Creating a Simple Dashboard.............................................................46

Unit 4: Tableau .................................................................................. 47

Chapter 1: Introduction to Tableau ......................................................................47
Chapter 2 : Exploring the Tableau Interface ........................................................47
Chapter 3: Understanding Different Types of Visualizations .............................48
Chapter 4: Importing and Creating Bar Charts ....................................................49
Chapter 5: Basic Sorting & Filtering Data ...........................................................49
Chapter 6: Using Drag-and-Drop Features for Visualization ..............................50
Chapter 7: Understanding Data Relationships .....................................................50
Chapter 8: Applying Color Formatting ................................................................51
Chapter 9: Creating an Interactive Dashboard .....................................................51
Chapter 10: Comparing Tableau and Power BI ...................................................52
Ease of Use ......................................................................................................................................... 52
2. Data Visualization ........................................................................................................................... 52
3. Performance & Speed ..................................................................................................................... 52
4. Integration with Other Tools ........................................................................................................... 52
5. Cost & Pricing................................................................................................................................. 52
6. AI & Data Processing ..................................................................................................................... 52
7. Deployment & Cloud Options ........................................................................................................ 53
8. Community & Support .................................................................................................................... 53

Unit 5: Web Development Basics – HTML, CSS, and JavaScript ... 54

Lesson 1: HTML ..................................................................................................54
Introduction to HTML ........................................................................................................................ 54
What Are HTML Tags? ...................................................................................................................... 54
1. Headings in HTML ......................................................................................................................... 55
1. <h1> - The Biggest Heading ........................................................................................................... 56
2. <h2> - Subtopics ............................................................................................................................. 56
3. <h3> - Smaller Sections .................................................................................................................. 56
4. <h4> - Even Smaller Sections......................................................................................................... 56
5. <h5> - Tiny Sections....................................................................................................................... 56
6. <h6> - The Smallest Heading ......................................................................................................... 56
Understanding the Code ...................................................................................................................... 58
Key Points to Remember .................................................................................................................... 58
 Every HTML file starts with <!DOCTYPE html>. .................................................................... 58
 Save the file with a .html extension. ........................................................................................... 58
 Open it in a browser to view the webpage. ................................................................................. 58
What Are Lists in HTML? .................................................................................................................. 58
1. Unordered Lists (<ul>) ................................................................................................................... 59
1. Basic Image Tag ............................................................................................................................. 60
Working with Tables – Structuring Data in HTML ............................................................................ 64
1. Basic Table Structure ...................................................................................................................... 64
Building Forms in HTML – Text Boxes, Buttons, and Checkboxes .................................................. 67
 Why Are Forms Important? ................................................................................................................ 70

Unit 6: Introduction to CSS – Making Web Pages Look Good ..........................70

What is CSS?........................................................................................................70
How to Use CSS?................................................................................................................................ 70
Changing Colors and Backgrounds in CSS .........................................................73
Changing Text Color ............................................................................................73
Example: ............................................................................................................................................. 73
Adding Background Images.................................................................................74
Font Styles, Sizes, Google Fonts, and Text Alignment in CSS ...........................75
Font Selection is Important ..................................................................................75
Generic Font Families ..........................................................................................76
3. Using Google Fonts..........................................................................................76
Steps to Use Google Fonts: ................................................................................................................. 76
Example: ............................................................................................................................................. 76
1. Changing Font Style.........................................................................................77
Example: ............................................................................................................................................. 77
2. Changing Font Size ..........................................................................................78
Example: ............................................................................................................................................. 78
4. Aligning Text ...................................................................................................78
Example: ............................................................................................................................................. 78
Why Use These? ..................................................................................................79
Using Borders and Spacing – Adjusting Margins and Padding in CSS ..............79
1. Adding Borders ................................................................................................79
Example: ............................................................................................................................................. 79
Different Border Styles: ...................................................................................................................... 80
2. Understanding Margins and Padding ...............................................................80
What is Margin? .................................................................................................................................. 80
What is Padding? ................................................................................................................................ 80
Example: ............................................................................................................................................. 80
Shorter Way to Write It:...................................................................................................................... 81
Why Use Borders, Margins, and Padding? ..........................................................81
Styling Links and Buttons – Changing Colors and Hover Effects...................................................... 81
Adding Simple Animations – Basic CSS Transitions ......................................................................... 82

Unit 7: JavaScript .................................................................................................84

Introduction to JavaScript ....................................................................................84
JavaScript Basics – What is JavaScript? ............................................................................................. 84
What is JavaScript? ............................................................................................................................. 84
Key Features of JavaScript ................................................................................................................. 84
How JavaScript Works........................................................................................................................ 84
Writing Your First JavaScript Alert Box .............................................................84
JavaScript First Code – Writing Your First JavaScript Alert Box ...................................................... 84
JavaScript Events .................................................................................................85
JavaScript Variables............................................................................................................................ 85
Declaring Variables in JavaScript ....................................................................................................... 85
Data Types in JavaScript..................................................................................................................... 85
Why Are Variables Important? ........................................................................................................... 86
JavaScript Variables .............................................................................................86
JavaScript Conditions ......................................................................................................................... 86
If-Else Statements ............................................................................................................................... 86
 Comparison Operators ................................................................................................................ 87
Logical Operators................................................................................................................................ 88
Why Are Conditions Important? ......................................................................................................... 89
JavaScript Conditions – .......................................................................................89
Making Decisions ............................................................................................................................... 89
If-Else Statements – Making Choices ................................................................................................. 89
Comparison Operators – Comparing Values ...................................................................................... 90
Logical Operators – Combining Conditions ....................................................................................... 91
JavaScript Interactions – Talking to the User ..................................................................................... 92
Why Are These Features Important? .................................................................................................. 92
JavaScript Interactions .........................................................................................93
Talking to the User.............................................................................................................................. 93
 1️⃣ Using Alerts – Showing Messages................................................................................................... 93
2️⃣ Using Prompts – Asking for User Input........................................................................................... 93
3️⃣ Using Basic Arithmetic in JavaScript .............................................................................................. 94
4️⃣ Taking Numbers from the User ....................................................................................................... 94
5️⃣ Using Confirm Boxes – Getting Yes/No Answers .......................................................................... 95
Why Are JavaScript Interactions Important? ...................................................................................... 96
JavaScript Forms ..................................................................................................96
Getting User Input & Validating Forms ............................................................................................. 96
1️⃣ Getting User Input from Forms ........................................................................................................ 96
2️⃣ Validating Forms – Checking User Input ........................................................................................ 97
3️⃣ Preventing Empty Form Submission ............................................................................................... 98
4️⃣ Checking Password Strength ........................................................................................................... 99
5️⃣ Submitting Forms with JavaScript ................................................................................................. 100
Why Is Form Validation Important? ................................................................................................. 101
JavaScript Quiz ..................................................................................................101
Creating a Simple Quiz Using Conditionals ..................................................................................... 101
1️⃣ Creating a Simple Quiz .................................................................................................................. 101
2️⃣ Making a Multiple-Choice Quiz .................................................................................................... 102
3️⃣ Scoring the Quiz ............................................................................................................................ 104
4️⃣ Using a Confirm Box for Quiz Restart .......................................................................................... 105
Why Are JavaScript Quizzes Useful? ............................................................................................... 105
JavaScript Functions – Reusing Code ............................................................................................... 105
JavaScript Recap – Hands-On Practice ............................................................................................. 106
JavaScript Functions ..........................................................................................106
Writing and Calling Functions .......................................................................................................... 106

1️⃣ What is a Function? .........................................................................................106

2️⃣ Calling a Function ...........................................................................................107
3️⃣ Functions with Parameters ..............................................................................107
4️⃣ Functions with Multiple Parameters ...............................................................108
5️⃣ Returning a Value from a Function ................................................................108
6️⃣ Function Expressions ......................................................................................109
7️⃣ Arrow Functions (Shorter Syntax) ..................................................................109
8️⃣ Using Functions in Events ..............................................................................110
9️⃣ Function Recap – Why Use Functions? ..........................................................110
JavaScript Recap ................................................................................................110
Review and Hands-On Practice ........................................................................................................ 110

1️⃣ JavaScript Basics – What is JavaScript? .........................................................111

2️⃣ Writing Your First JavaScript Code ...............................................................111
3️⃣ JavaScript Variables – Storing Data ...............................................................112
4️⃣ JavaScript Conditions – Making Decisions ....................................................113
5️⃣ JavaScript Interactions – Asking the User for Input .......................................113
6️⃣ JavaScript Arithmetic – Doing Math ..............................................................113
7️⃣ JavaScript Forms – Getting and Validating User Input ..................................114
8️⃣ JavaScript Quiz – Using Conditions for Questions ........................................115
9️⃣ JavaScript Functions – Writing and Calling Functions ..................................115
Hands-On Practice – Let's Write Some JavaScript! ..........................................116
🎯 JavaScript Recap Summary ..........................................................................117
Unit 1 : Recall Book of Class 3 and 4
Lesson 1: Recall Book of Class 3
History of Computer
 A computer is a smart machine that helps us write, play games, and solve problems.
 In ancient times, people used stones and sticks to count. Later, they invented the Abacus
to do simple math.
 Charles Babbage is called the "Father of the Computer." He designed the first
computer.
 Early computers were big and slow. Today, computers are small and fast, used in
homes, schools, and offices.

Types of Computers

 Desktop Computer – A large computer that stays on a table.

 Laptop – A small, portable computer with a built-in screen and keyboard.
 Tablet – A touch-screen computer smaller than a laptop.
 Smartphone – A phone that works like a mini-computer.
 Supercomputer – A powerful computer used by scientists to solve complex problems.
Parts and Functioning of a Computer

A computer has different parts, each with a special job:

1. Monitor (Output Device): Displays images, videos, and text.

2. Keyboard (Input Device): Used to type letters, numbers, and symbols.
3. Mouse (Input Device): Helps move the pointer and select items on the screen.
4. CPU (Processing Unit): The brain of the computer that processes information.
5. Speakers (Output Device): Produce sound for music, videos, and games.
6. Printer (Output Device): Prints text and pictures on paper.
7. Scanner (Input Device): Copies pictures or documents into the computer.
8. Microphone (Input Device): Records voice and helps in online communication.
9. Webcam (Input Device): Captures pictures and is used for video calls.

All these parts work together to take input, process information, and give output to make the
computer useful.
Introduction to Windows - Chapter Summary
What is an Operating System?

An operating system is important software that makes a computer work. It helps the computer do
things like show pictures, play videos, and open programs. Windows is a popular operating
system that helps us open apps, find files, and print documents.

Why Do We Use Windows?

Windows is easy to use and helps us do many things on the computer, like typing, drawing, or
playing music. It shows icons (small pictures) on the screen that help us find programs and files.
With Windows, it’s simple to use the computer for different tasks.
Turning On and Shutting Down the Computer

Turning the computer on and off properly is important for the computer to work well. To turn on
the computer, press the power button, and wait for Windows to load. To shut down, click the
Start Menu, select Power, and choose Shut Down.

Exploring the Desktop

The desktop is the first screen you see when the computer starts. It has important things like
icons, a taskbar, and a background. The icons are small pictures that help you open programs and
files. The taskbar shows open programs, and the background is the picture behind everything on
the screen.
Using the Mouse

The mouse is used to point, click, and open things on the computer. It has two buttons: the left
button and the right button. Left-click selects items, double-click opens programs, and right-click
shows extra options.

Using the Keyboard

The keyboard is used to type letters, numbers, and symbols. To type properly, sit correctly, place
your fingers on the home row keys, and practice typing without looking at the keyboard. The
more you practice, the faster you will type.

The Start Menu

The Start Menu is where you can find and open programs and files
quickly. It’s at the bottom left of the screen. You can click on the Start
button, then choose programs like Calculator, and close them when
you’re done.
The Taskbar

The taskbar is at the bottom of the screen and shows which programs are open. You can switch
between programs by clicking their icons in the taskbar. It also has the Start button to open the
Start Menu.

The Notification Area

The notification area is at the bottom right corner of the screen. It shows icons for important
things like the time, Wi-Fi, and volume. You can click on these icons to check Wi-Fi status or
adjust the volume.

Switching Between Programs

Windows makes it easy to use more than one program at the same time. You can switch between
programs by pressing Alt + Tab or by clicking on the program icon in the taskbar. This helps
you work on multiple tasks without closing programs.

+
Working with Files and Folders:
File

 A file is a collection of data stored on your computer (e.g., text,

images, videos).
 To identify a file, use File Explorer and look for file types, such as:
o Text files (.txt)
o Image files (.jpg)
o Video files (.mp4)

Folder

 A folder is a container for organizing files.

 Common folders include Documents, Downloads, and Pictures.
 Folders help keep everything organized and easy to find.

Creating a Folder

 Open File Explorer, go to Documents, right-click, and select New > Folder.
 Name the folder (e.g., "My Files") and press Enter.
 Creating folders helps organize files and keeps your computer neat.
Renaming Files and Folders

 Right-click on a file or folder, choose Rename, type the new name,

and press Enter.
 Renaming helps with file organization and makes files easier to
find.

Deleting Files and Folders

 Select a file, press Delete or right-click and select Delete.

 Deleted files go to the Recycle Bin, where they can be restored
if needed.
 Deleting unneeded files helps keep the computer organized.

Restoring Files from the Recycle Bin

 Open the Recycle Bin, find the deleted file, right-click, and select Restore.
 Restoring helps recover accidentally deleted files.
Moving and Copying Files

 Use Cut to move files and Copy to create duplicates.

 Paste the file in the desired folder.
 These actions help organize files by placing them where needed or
creating backups.

Using Cut, Copy, and Paste

 Use keyboard shortcuts: Ctrl + C (Copy), Ctrl + X (Cut), and Ctrl + V

(Paste).
 These tools save time and help organize files efficiently.

Using File Explorer

 File Explorer helps navigate and organize files.

 Use the Back and Forward buttons to move through folders easily.
 File Explorer is essential for managing files and folders on your computer.

Searching for Files

 Use the search box in File Explorer to find files quickly by typing the file name.
 The search feature saves time when looking for files across multiple folders.
Basic Applications in Windows:
Opening and Closing Applications

 Applications are programs that help you do different tasks, like writing or
drawing.
 To open an app: Click the Start Menu, find the app, and click it.
 To close an app: Click the X button at the top right of the app window.

Using Notepad for Typing

 Notepad is a simple app for typing short notes.

 To use Notepad: Open it from the Start Menu, type your text, and click
the X to close.
 Don’t save when asked, as it's just practice.

Saving a File in Notepad

 Saving a file ensures you don’t lose your work.

 To save: Open Notepad, type, click File > Save As, name the file, and click Save.

Drawing in Paint

 MS Paint is a fun app for drawing and creativity.

 To use Paint: Open it from the Start Menu, select a tool, and draw.
 Close without saving after practice.

Coloring a Picture in Paint

 The Fill Tool in Paint helps you color shapes.

 To color: Draw a shape, select the Fill Tool, pick a color, and fill the shape.

Erasing Mistakes in Paint

 The Eraser Tool removes parts of your drawing.

 To use it: Select the Eraser Tool, click on the mistake, and erase.

Using Calculator

 The Calculator helps solve math problems.

 To use it: Open the app, type a problem (e.g., 5 + 3), and press =.
Adjusting the Computer’s Volume

 The volume control lets you adjust sound levels.

 To adjust: Click the speaker icon, move the slider up to increase, or down to decrease.

Changing the Desktop Background

 The background is the picture or color on your desktop.

 To change: Right-click on the desktop, click Personalize, and choose a
new background.

Taking a Screenshot

 Screenshots capture an image of your screen.

 To take one: Use the Print Screen (PrtScn) key, paste it in Paint, and save the file.
 You can also use Windows + Shift + S or the Snipping Tool for more options.
Customizing Windows
Changing the Screen Saver

 What is a Screen Saver?

A moving picture or animation that appears after some
time of inactivity on the computer.
 Why Use a Screen Saver?
To make the screen look interesting, save energy, and
protect the screen from damage.
 How to Change the Screen Saver?
Follow two methods: through the right-click on the
Desktop or by searching "Screen Saver" in the taskbar
search. Set the wait time and apply the changes.

Adjusting the Brightness of the Screen

 Why Adjust the Brightness?

To reduce eye strain and make the screen comfortable to
view.
 How to Adjust the Brightness?
Either use the notification area slider or search for
"Brightness level" in the taskbar. Alternatively, use keyboard
shortcuts (F1/F2 or Fn+F1/F2).

Changing the Date and Time

 Why is Date and Time Important?

To track time, events, and ensure file dates are correct.
 How to Change the Date and Time?
Click on the clock in the bottom-right corner, then adjust the date/time settings. You can
also search for "Date and Time settings" in the taskbar.

Changing the Mouse Pointer

 What is a Mouse Pointer?

The small arrow or symbol that helps in navigation.
 How to Change the Mouse Pointer?
Search for "Mouse Pointer" in the taskbar, select a pointer
style, and apply the changes.
Pinning and Unpinning Apps to the Taskbar

 What is the Taskbar?

A bar that shows open apps and helps you open them quickly.
 How to Pin an App to the Taskbar?
Right-click an app from the Start Menu and select "Pin to taskbar."
 How to Unpin an App from the Taskbar?
Right-click the pinned app and choose "Unpin from taskbar."

Creating a Shortcut on the Desktop

 What is a Shortcut?
A quick way to access apps, files, or folders.
 How to Create a Shortcut?
Right-click on the Desktop, select "New > Shortcut," choose the item, name the shortcut,
and finish.

Using the Start Menu to Search for Apps

 What is the Start Menu?

A menu for finding apps, settings, and files.
 How to Search for an App?
Click the Start Menu, type the app's name, and click the result to open it.
Managing Computer Settings
Changing the Keyboard Language

 What is Changing the Keyboard Language?

Switching between languages to type in different scripts.
 Why is it Important?
It makes typing in different languages easier.
 Steps to Change the Keyboard Language:
Open the Start Menu, go to Settings > Time & Language > Language & Region, add the
language, and use Windows + Spacebar to switch languages.

Using the Recycle Bin

 What is the Recycle Bin?

A temporary place for deleted files.
 Why is it Important?
It allows you to restore deleted files if needed.
 Steps to Use the Recycle Bin:
Delete files by right-clicking and selecting "Delete." Open the Recycle Bin to view
deleted files, right-click and choose "Restore" to recover a file.

Emptying the Recycle Bin

 What is Emptying the Recycle Bin?

It permanently deletes files.
 Why is it Important?
To free up space on the computer and remove unnecessary files.
 Steps to Empty the Recycle Bin:
Open the Recycle Bin, click "Empty Recycle Bin," and confirm the deletion.
Lesson 2: Recalling Class 4th topics
Excel, Word, and PowerPoint
Basic Functions of Word, Excel, and PowerPoint
What are Word, Excel, and PowerPoint?

MS Word, MS Excel, and MS PowerPoint are three amazing programs that help us in school,
offices, and daily tasks. They make work easier and more fun!

MS Word – Your digital notebook!

 Write stories, letters, and notes.

 Change text color, size, and style.
 Add pictures and tables to make your work look great!

MS Excel – The magic calculator!

 Make tables and organize numbers.

 Do simple math like addition and subtraction.
 Create colorful charts to understand data.

MS PowerPoint – The creative storyteller!

 Make amazing slideshows.

 Add pictures, animations, and fun designs.
 Present your ideas in an exciting way!

Cool Features of All Three Programs

✅ Copy, paste, and cut text or data easily.

✅ Change fonts, colors, and sizes to make your work look cool!
✅ Save and print your work to use anytime
Safe Browsing
What is the Internet?
The Internet is like a giant web that connects computers and
people all over the world! It helps us:
✅ Find information
✅ Talk to friends and family
✅ Watch videos and play games
✅ Learn new things

How to Stay Safe Online?

🛡 Use safe websites – Look for https:// before clicking!

🤫 Keep personal info private – Never share your address, phone number, or passwords.
🚫 Don't download unknown files – They might harm your computer!
⚠ Watch out for scams – If something looks too good to be true, it probably is!
Numbers, Text, and Tables
Understanding Numbers and Text in Excel
Excel helps us work with numbers and text in a smart way!

✅ Numbers – Used for counting, adding, and calculating. (e.g., 5, 100, 250)
✅ Text – Used to label and describe data. (e.g., "Name", "Total Marks")

Creating and Formatting Tables

Tables make information clear and easy to read!

Why Use Tables?

 They help organize data neatly.

 Everything looks arranged and structured.

How to Make Tables Look Great?

 Use colors to highlight important data.

 Make text bold to show headings.
 Adjust column and row sizes for better visibility.
Fun Coding with Code.org
What is Coding? Coding is like giving your computer a special set of instructions to make it do
cool things, like play games or show pictures!

Why is Coding Important?

 It helps you think like a problem solver.

 It makes your brain sharper and better at solving tricky stuff.
 With coding, you can create your own games, apps, and even websites!

Fun Activities on Code.org

 Try fun, easy challenges that help you learn step by step!
 Use cool drag-and-drop tools to make your own mini programs.
Unit 2: Mastering Excel – Learning
Data Basics
Lesson 1: Excel
What is Excel?
Microsoft Excel is a computer program that helps us store, organize, and calculate numbers
in a table. It is like a big digital notebook with rows and columns where we can write numbers,
words, and formulas to solve problems easily.
Why Do We Use Excel?

We use Excel because it helps us:

1. Make Tables: We can arrange information in rows and columns neatly.
2. Do Calculations: It can add, subtract, multiply, and divide numbers
automatically.
3. Create Charts: It turns numbers into colorful charts and graphs to
understand them better.
4. Organize Data: We can keep lists like class schedules, marks, or pocket money records.
5. Save Time: Instead of doing math by hand, Excel does it quickly!
Lesson 2: Working with Data: Formatting, Sorting, and
Filtering in Excel

Find & Replace in Excel

Sometimes, we need to quickly find words or numbers in a large Excel sheet. The Find & Select
feature helps us locate and replace data easily.
1. Finding Data in Excel
Steps to Find a Word or
Number:
1. Press Ctrl + F to
open the Find box.
2. Type the word or
number you want to
find.
3. Click Find Next to
move to the next
matching result.

2. Replacing Data in Excel

Steps to Replace a Word
or Number:
1. Press Ctrl + H to
open the Replace
box.
2. Type the
word/number you
want to change in
"Find what".
3. Type the new
word/number in
"Replace with".
4. Click Replace (to change one) or Replace All (to change all).
Data Validation in Excel

Data Validation helps us control what can be entered in a cell. For example, we can allow
only numbers between 1 and 100 or
only dates.
 Steps to Apply Data Validation:
1. Select the cell(s) where you
want to set rules.
2. Click on the "Data" tab.
3. Click "Data Validation".
4. Choose the type of data
allowed (e.g., Whole Number,
Date, List).

5. Click OK.
Example: Allow only numbers from 1 to 100:
o Select a cell, go to Data Validation, choose
Whole Number, and set the range 1 to 100.
Format Cells in Excel

Formatting helps make data look neat and easy to

read.
1. Changing Number Format:
o Select the cells.
o Press Ctrl + 1 to open the Format Cells
menu.
o Choose a format (Number, Date, Currency,
etc.).
2. Changing Font and Color:
o Use the "Home" tab to change font style, size, and color.

o Bold: Ctrl + B

o Italic: Ctrl + I

o Underline: Ctrl + U

Wrap Text in Excel

Sometimes, text is too long to fit in a cell. Wrap Text makes the text appear in multiple lines
inside the same cell.
Steps to Wrap Text:
1. Select the cell(s).
2. Click on the "Home" tab.
3. Click "Wrap Text".
Shortcut Key: Press Alt + H + W to wrap text.

Merge Cells in Excel

Merging combines two or more cells into one. It is useful for creating headers.
Steps to Merge Cells:
1. Select the cells you want to merge.
2. Click on the "Home" tab.
3. Click "Merge & Center".
Shortcut Key: Press Alt + H + M + C to
merge and center.

Sorting Data (Arranging in Order)

Sorting helps us arrange data in ascending (A-Z, 1-100) or descending (Z-A, 100-1) order.
Steps to Sort Data:
1. Select the column you want
to sort.
2. Click on the "Data" tab.
3. Click "Sort A to Z" for
ascending order or "Sort Z
to A" for descending order.
Shortcut Key: Press Alt + D + S to
open the Sort menu.

Filtering Data (Showing Only What

You Need)

Filtering allows us to display only specific data while hiding the rest.
Steps to Filter Data:
1. Click anywhere inside your data.
2. Go to the "Data" tab.
3. Click "Filter" (A small arrow
appears in each column header).
4. Click the arrow and select what
you want to see.
Shortcut Key: Press Ctrl + Shift + L to
turn filters on or off.
Lesson 3: Using Tables in Excel – Formatting Data for
Better Analysis

Tables in Excel help us organize and format data neatly, making it easier to read and analyze.
When we convert data into a table, we can quickly sort, filter, and apply different styles.
1. Creating a Table in Excel
Steps to Create a Table:
1. Select the data range (including
column headers).
2. Press Ctrl + T to create a table.
3. A dialog box will appear; make
sure "My table has headers" is
checked.
4. Click OK, and the table will be created with a default style.

2. Formatting a Table
Once the table is created, we can format it to make it look better.
1. Changing Table Style:
o Click anywhere in the table.
o Go to the "Table Design" tab.
o Select a style from the Table
Styles gallery.
2. Adding or Removing Rows and
Columns:
o Right-click a row/column and
choose "Insert" to add or
"Delete" to remove it.
3. Changing Text Alignment:
o Select the cells and use the "Align Left," "Center," or "Align Right" buttons in the
Home tab.
Lesson 4: Using SUM, AVERAGE, Percentage, MIN, and
MAX in Excel

Excel has built-in functions that help us calculate numbers quickly. These functions start with an
equal sign (=) followed by the function name and
parentheses ().
1. SUM (Adding Numbers)
The SUM function adds a group of numbers.
Steps to use SUM:
1. Click on a cell where you want the answer.
2. Type =SUM (A1:A5) and press Enter.
This adds all numbers from A1 to A5.
Shortcut Key: Press Alt + = to quickly insert the SUM
function.

2. AVERAGE (Finding the Mean)

The AVERAGE function finds the average (mean) of a group
of numbers.
Steps to use AVERAGE:
1. Click on a cell where you want the answer.
2. Type =AVERAGE (A1:A5) and press Enter.
This calculates the average of numbers in A1 to A5.
3. PERCENTAGE (%):
To find the percentage of a number:
1. Use the formula: =Part/Total * 100
Example: =50/200 * 100 gives 25%.
2. After typing the formula, press Enter.
Shortcut Key: You can also select the cell and click on the
Percentage (%) button in the toolbar.

4. MIN (Finding the Smallest Number)

The MIN function finds the smallest number in a group.
Steps to use MIN:
1. Click on a cell where you want the answer.
2. Type =MIN(A1:A5) and press Enter.
This finds the smallest number in A1 to A5.

5. MAX (Finding the Largest Number)

The MAX function finds the largest number in a group.
Steps to use MAX:
1. Click on a cell where you want the answer.
2. Type =MAX(A1:A5) and press Enter.
This finds the largest number in A1 to A5.
Why Use These Functions?
 They save time by calculating quickly.
 They reduce mistakes in calculations.
 They help in analyzing numbers easily.
Lesson 5: Creating Charts in Excel – Bar and Pie Charts for
Visualizing Data

Charts help us see data in a clear and colorful way. Instead of looking at numbers in a table,
we can create bar charts and pie charts to understand the information better.
1. Bar Chart (Comparing Data)
A bar chart is used to compare different values. For example, it can show the marks of students
in different subjects.
Steps to Create a Bar Chart:
1. Select the data you want to include in the chart.
2. Click on the "Insert" tab.
3. Click on "Bar Chart" and choose a style.
4. The chart will appear on the sheet. You can move or resize it.
Shortcut Key: Press Alt + N + C to insert a bar chart.
2. Pie Chart (Showing Parts of a Whole)
A pie chart is useful when we want to show percentages or how different
parts make up a whole. For example, it can show how students' marks
contribute to the total score.
Steps to Create a Pie Chart:
1. Select the data (values and labels).
2. Click on the "Insert" tab.
3. Click on "Pie Chart" and choose a style.
4. The pie chart will appear, showing how each part relates to the
total.
Shortcut Key: Press Alt + N + Q to insert a pie chart.
Why Use Charts?
 Helps understand numbers easily.
 Makes reports look professional.
 Saves time when analyzing data.
Unit 3: Power BI

Chapter 1: Introduction to Power BI

What is Power BI? Why Do We Use It?
Power BI is a tool that helps us turn data into information that’s easy
to understand. You can use it to create colorful charts, graphs, and
reports to show information in a fun way. People use Power BI to help
them make better decisions by looking at data in a simple way.
Chapter 2: Exploring the Power BI Interface
Power BI Interface – Exploring the Power BI Interface
When you open Power BI, you'll see different areas on the screen.

 The Main Area is where you can create your charts and reports.
 On the Right Side, you’ll find tools to add data.
 At the top, you’ll see different options like File, Home, and View. These options help you
save your work or choose how you want to look at your data.
Chapter 3: Understanding Different Types of Charts
Power BI Charts

Understanding Different Types of Charts

Charts are pictures that help us understand data better. In Power BI, you can use many types of
charts like:

 Bar Charts – Great for comparing different items.

 Pie Charts – Show parts of a whole.

 Line Charts – Show changes over time, like the growth of a plant.
Chapter 4: Importing Excel Data into Power BI
Power BI Data Import – Importing Excel Data into Power BI
You can add data to Power BI from an Excel file.
Here’s how:

1. Click on “Get Data.”

2. Choose “Excel” and find your file.

3. Select the data you want to bring in

and press "open."

Now your data is in Power BI!

Chapter 5: Basic Data Cleaning Tools
Power BI Data Cleaning – Basic Data Cleaning Tools
Sometimes, the data might not look right. Power BI helps clean the data by:

 Removing empty spaces: Make sure your data doesn’t have empty rows or columns.
 Fixing mistakes: Change numbers or words that are wrong.
 Filtering data: Remove any unneeded information.
Chapter 6: Creating Simple Charts in Power BI
Power BI Visualization – Creating Simple Charts in Power BI
Creating charts in Power BI is easy!

 Select the data you want.

 Choose the type of chart you like.
 Watch Power BI turn your numbers into colorful visuals!

Chapter 7: Understanding Filters in Power BI

Power BI Filtering – Understanding Filters in Power BI
A filter helps you see only the information you want. For example, if you have a list of sales, and
you only want to see sales from January, you can use a filter to show just that.
Here’s how:

1. Click on the "Filter" option.

2. Choose the data you want to filter. Sorting & Arranging Data
Chapter 8: Creating Basic Reports
Power BI Data Sorting – Sorting & Arranging Data
Sorting is like organizing your data. You can sort numbers from smallest to largest or arrange
names in ABC order. This makes it easier to find what you need.
Click on a column header (like numbers or names), then select how you want to sort.

Power BI Reports – Creating Basic Reports

Reports are a collection of charts and tables that tell a story with data. You can:

 Add different charts to the report.

 Arrange them nicely to tell your story.
 Save the report and share it with others.
Chapter 9: Creating a Simple Dashboard
Power BI Dashboard – Creating a Simple Dashboard
A dashboard is a page where you can see all your charts and reports together.
To create a dashboard:

1. Choose the charts you made.

2. Arrange them in a way that makes sense.
3. Save it, and now you have a dashboard!

Chapter Summary
In this chapter, we learned how to use Power BI to organize and show data in a simple way. We
explored how to import data, clean it, create charts, use filters, and make reports and dashboards.
Power BI helps us turn numbers into clear and colorful visuals that are easy to understand!
Unit 4: Tableau
Chapter 1: Introduction to Tableau
What is Tableau? How Do Businesses Use It?
Tableau is a tool that helps you create amazing charts and reports with your
data. It turns numbers into pictures so people can understand them better.
Businesses use Tableau to look at sales, track customer information, and make
decisions using simple and colorful visualizations.

Chapter 2 : Exploring the Tableau Interface

Tableau Interface – Exploring the Tableau Interface
When you open Tableau, you’ll see different sections:

 The Main Area is where you make your charts.

 The Data Pane on the left shows your data.
 At the top, you have buttons and options like File, Data, and Worksheet, which help you
manage your work.
Chapter 3: Understanding Different Types of Visualizations
Tableau Charts – Understanding Different Types of Visualizations
Tableau lets you create many types of charts, including:

 Bar Charts – To compare different things, like sales in different months.

 Pie Charts – To show parts of a whole.

 Line Charts – To see how things change over time, like the number of customers visiting
a store.
Chapter 4: Importing and Creating Bar Charts
Tableau Data Import – Importing and Creating Bar Charts
You can bring your data into Tableau from different sources.
Here’s how to make a bar chart:

1. Import your data into Tableau.

2. Drag your data into the workspace.
3. Choose the "Bar Chart" option to compare different numbers, like sales for each month.

Chapter 5: Basic Sorting & Filtering Data

Tableau Sorting & Filtering – Basic Sorting & Filtering Data
Sorting helps you organize data. You can sort items in order, like from smallest to largest.
Filtering helps you show only the data you need. For example, you can filter to show only sales
from last month.

To do this, use the options on the side to sort or filter your data.
Chapter 6: Using Drag-and-Drop Features for Visualization
Tableau Drag & Drop – Using Drag-and-Drop Features for Visualization
Tableau makes it easy to create charts by just dragging and dropping.

1. Drag a data field (like sales) into the workspace.

2. Drop it where you want to make your chart, and Tableau will do the rest.

Chapter 7: Understanding Data Relationships

Tableau Data Relationships – Understanding Data Relationships
Sometimes, data comes from different sources, and Tableau helps you connect them.
For example, you can connect sales data to customer data to see which customers bought what.
This helps businesses understand how things are connected!
Chapter 8: Applying Color Formatting
Tableau Formatting – Applying Color Formatting
Color helps make charts more interesting and easy to
understand.
In Tableau, you can change colors to show differences in data.
For example, use green for high sales and red for low sales.

Chapter 9: Creating an Interactive Dashboard

Tableau Dashboards – Creating an Interactive Dashboard
A dashboard is a collection of charts and information on one screen.
To create a dashboard:

1. Add your charts and tables.

2. Arrange them to tell a story.
3. Make it interactive by allowing people to click and explore different parts of the data.
Chapter 10: Comparing Tableau and Power BI
Tableau vs Power BI – Comparing Tableau and Power BI
Tableau and Power BI are both tools that help people make charts
and reports, but they are different in some ways:

Ease of Use

 Tableau: Has a steeper learning curve but offers advanced

customization. Best for users with some experience in data visualization.
 Power BI: Easier to use, especially for beginners, as it integrates well with Microsoft
Excel and other Office tools.

2. Data Visualization

 Tableau: Specializes in high-quality, interactive, and complex visualizations. Ideal for

deep analytics and storytelling with data.
 Power BI: Provides clean and simple charts that are easy to create. Best for quick
business reports rather than highly customized visuals.

3. Performance & Speed

 Tableau: Handles large datasets efficiently, making it a strong choice for big data
analytics.
 Power BI: Works well for moderate-sized datasets, but performance may slow down
with very large data.

4. Integration with Other Tools

 Tableau: Connects with a wide variety of databases, cloud services, and data sources, but
requires extra setup for Microsoft tools.
 Power BI: Seamlessly integrates with Microsoft products like Excel, Azure, and
SharePoint, making it a great choice for businesses using Microsoft tools.

5. Cost & Pricing

 Tableau: Generally more expensive, with licensing fees for individuals and businesses.
 Power BI: More affordable, especially for small businesses and individuals using the
free version.

6. AI & Data Processing

  Tableau: Uses AI-powered insights and advanced analytics but requires some manual
setup.
 Power BI: Has built-in AI features (like Power BI Insights) that automatically generate
trends and summaries.

7. Deployment & Cloud Options

 Tableau: Can be used on desktop, cloud, or server with flexible deployment options.
 Power BI: Works best on Microsoft’s cloud (Azure) but also offers desktop and web
versions.

8. Community & Support

 Tableau: Strong user community with many forums, training courses, and events.
 Power BI: Large support network, especially for Microsoft users, with strong
documentation and forums.

Chapter Summary
In this chapter, we learned about Tableau, a powerful tool that helps you turn data into colorful
charts and reports. We explored how to import data, create bar charts, use sorting and filtering,
apply color formatting, and create interactive dashboards. Tableau helps businesses make
important decisions by showing data in an easy-to-understand way!
Unit 5: Web Development Basics – HTML,
CSS, and JavaScript

Lesson 1: HTML
What is HTML? – Basics of Web Pages and Structure

Introduction to HTML

HTML stands for HyperText Markup Language. It is the basic language used to create web
pages. Every website you see on the internet is made using HTML.
An HTML page has different parts, just like a book has a cover, title, and content.

Why Do We Use HTML?

 It helps us build web pages.
 It tells the browser how to display text, images, and links.
 It provides the structure for a webpage.

What Are HTML Tags?

HTML uses tags to tell the web browser how to display content. Tags are written inside angle
brackets < >. Most tags have an opening tag and a closing tag, like this
Its output is:

 <p> is the opening tag.

 </p> is the closing tag.
 The text inside the tags is displayed on the webpage.

1. Headings in HTML

Headings make text bigger and bolder to show important topics. HTML has six heading tags,
from <h1> (largest) to <h6> (smallest).

Example:

The output looks like this:

Use of Headings:
1. <h1> - The Biggest Heading
 This is the main title of the page.
 It tells what the page is about.
 There should only be one <h1> on a page.

2. <h2> - Subtopics
 This is a smaller heading than <h1>.
 It is used for important sections under the main title.

3. <h3> - Smaller Sections

 This is a bit smaller than <h2>.
 It is used for sub-sections inside <h2>.

4. <h4> - Even Smaller Sections

 This is smaller than <h3>.
 It can be used for more details under <h3>.

5. <h5> - Tiny Sections

 This is smaller than <h4>.
 It is used when we need extra details inside <h4>.

6. <h6> - The Smallest Heading

 This is the smallest heading in HTML.
 It is used for very small sections or notes.

2. Paragraphs in HTML
The <p> tag is used to write paragraphs.
Example:
Why Use Paragraphs?
 They organize text neatly.
 They make content easier to read.
Key Points to Remember
 HTML uses tags to format text.
 Headings make text bold and large.
 Paragraphs organize text into readable sections.
Now that we know what HTML is and how tags work, let’s create our first web page!
Steps to Create a Web Page
1. Open a Text Editor (such as VS Code).
2. Type the following HTML code:

It outcome:
 3. Save the file with the extension .html (e.g., mywebpage.html).
4. Open the file in a web browser (Chrome, Edge, or Firefox) to see your page.

Understanding the Code

 <!DOCTYPE html> – Defines the document as an HTML page.

 <html> – The root element of the page.
 <head> – Contains page information (like the title).
 <title> – Sets the title of the webpage (seen on the browser tab).
 <body> – Contains everything displayed on the webpage.
 <h1> – A heading.
 <p> – A paragraph.

Key Points to Remember

 Every HTML file starts with <!DOCTYPE html>.

 Save the file with a .html extension.
 Open it in a browser to view the webpage.

What Are Lists in HTML?

Lists help us organize information in a structured way. HTML has two main types of lists:
 1. Ordered Lists (Numbered)
2. Unordered Lists (Bulleted)

1. Unordered Lists (<ul>)

An unordered list displays items with bullets (•, ◦, ▪).

Example:

Output:
 Apple
 Banana
 Orange

2. Ordered Lists (<ol>)

An ordered list displays items in a numbered format (1️, 2️, 3️…).
Example:
Output:
1. Wake up
2. Brush your teeth
3. Have breakfast
Key Points to Remember
 Use <ol> for ordered lists (when sequence matters).
 Use <ul> for unordered lists (when order doesn’t matter).
 Each item in the list is written inside <li> (List Item) tags.

1. Basic Image Tag

Images make web pages more attractive and informative. In HTML, we use the <img> tag to
add images. It is a self-closing tag, which means it does not need a closing tag.

Syntex:
  src (source) tells the browser where the image is located.
 The image file should be saved in the same folder as your HTML file, or you can use a
full URL.

Example:

2. Using the alt Attribute (Alternative Text)

The alt (alternative text) attribute is used when an image cannot be seen. If the image doesn’t
load, the alt text will show instead.

Example:
If the image does not load, the text "A beautiful red flower" will appear instead.

Creating Links in HTML – Internal and External Links (Anchor Tags)

Links help users navigate between web pages. In HTML, we use the <a> (anchor) tag to create
links.

1. Basic Link Structure

The <a> tag creates a hyperlink, and the href attribute defines the link's destination.

Syntax:

The output is shown like link:

Example:

The output is:

This will create a clickable link "Visit Google", which opens Google when clicked.

2. Internal Links (Linking to Your Own Web Pages)

Internal links connect pages within the same website.

This will link to the about.html page in the same folder.

Key Points to Remember

 Use <a> with href to create links.

 Internal links navigate within the website.
 External links open other websites.

Working with Tables – Structuring Data in HTML

Tables help us organize and display data in a structured way on a web page. In HTML, we use
the <table> tag to create tables.

1. Basic Table Structure

A table in HTML is made of rows (<tr>) and columns (cells) (<td>).

Example:
The outcome is:

This creates a table with two rows and two columns.

2. Adding Table Headers

We use the <th> tag to add bold headings at the top of the table.

Example:

The outcome with header looks like this:

This will make "Fruit" and "Color" bold as headers.

3. Adding Borders to a Table

By default, tables do not have borders. We can add a border using the border attribute or CSS.

Example:

The output with borders :

This will add borders around the table and cells.

Key Points to Remember

 Use <table> to create a table.

 Use <tr> for rows and <td> for data cells.
 Use <th> for table headers.
 Use border="1" to add borders.

Building Forms in HTML – Text Boxes, Buttons, and Checkboxes

What is a Form in HTML?

A form in HTML is used to collect information from users. Forms are used in sign-up pages,
login pages, and contact forms where users can enter details like their name, email, or
password.

Basic Structure of an HTML Form

A form is created using the <form> tag. Inside this tag, we add different elements like text boxes,
buttons, and checkboxes to collect user input.

1. Text Boxes – Entering Information

Text boxes allow users to type information, such as their name or email.

Example:
The output of these lines:

Explanation:

 <label> adds a description for the text box.

 <input type="text"> creates a box where users can type their name.

2. Buttons – Submitting or Resetting a Form

Buttons allow users to submit or clear a form.

Example:

The buttons look like this:

Explanation:

 <input type="submit"> sends the form data.

 <input type="reset"> clears all entered data.

3. Checkboxes – Selecting Multiple Options

Checkboxes allow users to select multiple choices, like their favorite hobbies.

Example:

The checkboxes looks like this:

Explanation:
  Each <input type="checkbox"> creates a tick box.
 Users can select multiple options.

Why Are Forms Important?

 Forms help websites collect information from users.

 They are used for sign-ups, logins, and surveys.
 Forms make websites interactive and useful.

Unit 6: Introduction to CSS – Making Web Pages Look

Good
What is CSS?
CSS stands for Cascading Style Sheets. It is used to change the look of a web page. With CSS,
we can:

 Change text color and size

 Add background colors
 Change fonts
 Make a web page look beautiful and organized

CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.

How to Use CSS?

There are three ways to add CSS to a web page:

1. Inline CSS (Inside the Tag)

This means adding CSS directly inside an HTML tag using the style attribute.

The output is :
2. Internal CSS (Inside the <style> Tag)

This means writing CSS inside the <style> tag in the <head> section.

The output is:

3. External CSS (Using a Separate File)

We can also write CSS in a separate file and link it to the HTML page.

HTML File

CSS File (style.css)

Key Points to Remember:

 CSS helps change the appearance of a web page.

  It can change colors, fonts, and backgrounds.
 There are three ways to use CSS: Inline, Internal, and External.

Changing Colors and Backgrounds in CSS

CSS helps us make web pages colorful and attractive by changing text colors, background
colors, and more.

Changing Text Color

We can change the color of text using the color property in CSS.

Example:

Outcome:

Changing Background Color

We can change the background color of a webpage or a specific element using the background-
color property.

Example:

Outcome:
Adding Background Images
We can also use an image as the background of a webpage.

Steps:

1. Save an image in the same folder as your HTML file.

2. Use the background-image property like this:

3. Replace "background.jpg" with the actual image name.

4. Save and open the file in a browser.

Outcome:
Steps:

1. Open VS Code
2. Save the file and open it in a browser.

Summary

 color changes text color.

 background-color changes the background color.
 background-image adds an image as a background.
 Using CSS classes helps keep styles organized.

Font Styles, Sizes, Google Fonts, and Text Alignment in CSS

CSS helps us change the way text looks on a web page. We can change the font style, size, use
different fonts (including Google Fonts), and align text properly.

When we make a website, we want the text to look nice and be easy to read. CSS helps us
change the style, size, and alignment of the text. Let’s learn how!

Font Selection is Important

Choosing the right font has a huge impact on how the readers experience a website.
The right font can create a strong identity for your brand.

Using a font that is easy to read is important. The font adds value to your text. It is also important to
choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality
and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and
minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width. They create a mechanical
look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

3. Using Google Fonts

Google Fonts gives us cool and free fonts to use on our website.

Steps to Use Google Fonts:

1. Go to Google Fonts.
2. Choose a font you like (e.g., Poppins).
3. Click "Select", then copy the link.
4. Paste the link in your HTML <head> section.
5. Use the font in CSS like this:

Example:
Outcome:

1. The text will use the Poppins font.

2. If Poppins is not available, it will use a normal sans-serif font.

1. Changing Font Style

A font style changes how the text looks. Here are some common styles:

 Normal (default text)

 Italic (slanted text)
 Bold (thick and dark text)

Example:

Outcome:

The text inside <p> will be bold and italic.

2. Changing Font Size
We can make the text big or small using font-size.

Example:

Outcome:

The <h1> text is big (40px).

The <p> text is smaller (20px).

4. Aligning Text
We can move text left, right, center, or justify (equal on both sides).

Example:
Outcome:

 <h1> text is centered.

 <p> text is justified, so both sides are even.

Why Use These?

 Fonts make a website beautiful.
 Font sizes help make text easy to read.
 Google Fonts give us more choices.
 Text alignment makes the page organized.

Using Borders and Spacing – Adjusting Margins and

Padding in CSS
When designing a webpage, we need to control the space around elements to make the page
look neat and well-organized. In CSS, we use borders, margins, and padding to do this. Let's
learn how!

1. Adding Borders
A border is a line around an element, like a box around a paragraph or an image.

Example:
Outcome:

 The text inside <p> will have a black border.

 The text will have extra space inside the border because of padding.

Different Border Styles:

You can change the style of the border:

2. Understanding Margins and Padding

What is Margin?

Margin is the space outside an element. It pushes the element away from others.

What is Padding?

Padding is the space inside an element, between the text and the border.

Example:
Shorter Way to Write It:

Instead of writing all four sides separately, you can write:

Why Use Borders, Margins, and Padding?

 Borders help create visible boxes around elements.
 Margins add space between elements to prevent crowding.
 Padding makes sure text doesn’t touch the border.

Styling Links and Buttons – Changing Colors and Hover Effects

 Links (<a>) can change color when hovered or clicked.

 Buttons can have different colors, borders, and sizes.
 The :hover effect makes links and buttons change when the mouse moves over them.

Example – Changing Link Colors on Hover:

Example – Button Changing on Hover:

Links and buttons should be easy to see and click. Hover effects make websites look more
interactive.

Adding Simple Animations – Basic CSS Transitions

 Transitions make changes smooth instead of instant.

 They work with color, size, position, and more.
 You need a starting style and a hover effect to see the animation.

Example – Smooth Background Color Change:

Example – Growing Box on Hover:

Transitions help elements change smoothly, making a website feel more natural and easy to use.

Responsive Design in CSS – Making Web Pages Look Good on Any Device

 Websites should look good on computers, tablets, and phones.

 max-width: 100% makes images fit inside smaller screens.
 media queries allow different styles for different screen sizes.

Example – Making Text Size Change on Small Screens:

Unit 7: JavaScript
Introduction to JavaScript
JavaScript Basics – What is JavaScript?

What is JavaScript?

JavaScript is a high-level, interpreted programming language used to make websites dynamic

and interactive. It allows developers to add behavior to web pages, making them respond to user
actions like clicks, typing, or scrolling.

Key Features of JavaScript

✅ Client-Side Execution – Runs directly in the browser without needing a separate program.
✅ Event-Driven – Responds to user actions such as clicks, key presses, and form submissions.
✅ Lightweight & Fast – Executes quickly without needing compilation.
✅ Versatile – Used for web development, mobile apps, game development.

How JavaScript Works

JavaScript runs inside web browsers like Chrome, Firefox, and Edge. It works alongside
HTML and CSS but has its own special capabilities:

 Manipulating Web Page Content – Change text, images, and layouts dynamically.
 Handling User Input – Validate forms, display alerts, or take user responses.
 Creating Animations – Move objects, fade images, or slide menus.
 Fetching Data – Communicate with servers to load new content without reloading the
page.

Writing Your First JavaScript Alert Box

JavaScript First Code – Writing Your First JavaScript Alert Box

Let's start coding! The first JavaScript program is an alert box that pops up on the screen.

Example: Displaying an alert message

Outcome:

When the page loads, a pop-up appears with the message "Hello! Welcome to JavaScript."

JavaScript Events
JavaScript Variables

In JavaScript, variables are used to store data, such as numbers, text, or objects. Variables act
like labeled boxes where we can store information and use it later in our program.

Declaring Variables in JavaScript

JavaScript provides three ways to declare variables:

1. var – The old way of declaring variables (not recommended for modern coding).
2. let – A flexible way to declare variables (preferred in most cases).
3. const – Used for values that should not change.

💡 Example: Declaring Variables

Key Differences:

 var is outdated and can cause unexpected errors.

 let allows you to change values later.
 const is for fixed values that cannot be reassigned.

Data Types in JavaScript

JavaScript has different types of data that can be stored in variables:

Data Type Example Description

String "Hello, World!" Text enclosed in quotes.
 Whole numbers and
Number 25, 3.14
decimals.
Represents Yes/No or
Boolean true, false
On/Off.
Array ["Apple", "Banana", "Mango"] A collection of values.
Object {name: "Ali", age: 10} A collection of properties.

Example: Using Different Data Types

What happens?

 age stores a number.

 isStudent holds a true/false value.
 fruits is a list of items.
 person holds multiple details in one variable.

Why Are Variables Important?

✅ Store and reuse values in a program.

✅ Make calculations and decisions based on data.
✅ Allow users to input and manipulate information

JavaScript Variables
JavaScript Conditions

In JavaScript, conditions help us make decisions in a program. They allow the computer to run
different code based on certain conditions, just like we make decisions in real life.

If-Else Statements
The if-else statement is used to execute different actions depending on whether a condition is true
or false.

Example: If-Else Statement

What happens?

 If age is 18 or more, it prints "You can vote!"

 If age is less than 18, it prints "You cannot vote yet."
 Comparison Operators
 Comparison operators are used to compare values. They help in making decisions in if-
else statements.

Operator Meaning Example Result

== Equal to 5 == "5" ✅ true
Strictly equal (checks
=== 5 === "5" ❌ false
value & type)
!= Not equal 10 != 5 ✅ true
> Greater than 10 > 5 ✅ true
< Less than 5 < 10 ✅ true
>= Greater than or equal 10 >= 10 ✅ true
<= Less than or equal 5 <= 10 ✅ true

Example: Using Comparison Operators

Outcome:

 If marks is 50 or more, it prints "You passed!"

 Otherwise, it prints "You failed!"

Logical Operators

Logical operators are used to combine multiple conditions.

Operator Meaning Example Result

AND (Both
&& conditions must be (5 > 3 && 10 > 5) ✅ true
true)
OR (At least one
` ` condition must be
true)
NOT (Reverses the
!
result)
!(5 > 3) ❌ false

Example: Using Logical Operators

Outcome:

 If both username and password match, it prints "Login successful!"

 Otherwise, it prints "Incorrect username or password."

Why Are Conditions Important?

 Help programs make decisions (like logging in, passing/failing exams, etc.).
 Control program flow (run different code based on conditions).
 Make websites interactive (show/hide content, validate forms, etc.).

JavaScript Conditions –
Making Decisions

Conditions help JavaScript make decisions. They let the computer choose what to do based on
certain rules.

If-Else Statements – Making Choices

The if-else statement helps decide what happens when a condition is true or false.

💡 Example: Checking if a number is greater than 10

 📌
What happens?

 If the number is greater than 10, it shows "The number is big!"

 Otherwise, it shows "The number is small!"

Comparison Operators – Comparing Values

Comparison operators help check conditions.

Operator Meaning Example Result

== Equal to 5 == "5" ✅ true
Strictly equal (checks
===
value & type)
5 === "5" ❌ false
!= Not equal 10 != 5 ✅ true
> Greater than 10 > 5 ✅ true
< Less than 5 < 10 ✅ true
>= Greater than or equal 10 >= 10 ✅ true
<= Less than or equal 5 <= 10 ✅ true

💡 Example: Checking if two numbers are equal

 }

📌 What happens?

 Because == only checks value, it shows "They are equal!"

 If we used ===, it would show "They are not equal!" because x is a number, and y is a
string.

Logical Operators – Combining Conditions

Logical operators let us check multiple conditions together.

Operator Meaning Example Result

AND (Both
&& conditions must be (5 > 3 && 10 > 5) ✅ true
true)
OR (At least one condition must
` `
be true)
NOT (Reverses the
!
result)
!(5 > 3) ❌ false
💡 Example: Checking Age for Voting

📌 What happens?

 If age is between 18 and 60, it says "You can vote!"

 Otherwise, it says "You cannot vote."

JavaScript Interactions – Talking to the User

JavaScript can ask for input and show messages to users.

💡 Example: Asking for the user’s name

📌
What happens?

 A box appears asking "What is your name?"

 After typing a name, it displays "Hello, [name]!"

Why Are These Features Important?

✅ Conditions help make decisions in programs.
✅ Comparisons let us check values in a program.
✅ Logical operators help us combine multiple conditions.
✅ User interactions make websites interactive and fun!

JavaScript Interactions
Talking to the User

JavaScript allows websites to interact with users by asking questions, taking input, and showing
messages. We can use alerts, prompts, and basic arithmetic to make our web pages more
interactive.

1⃣ Using Alerts – Showing Messages

The alert() function displays a message box on the screen.

💡 Example: Showing a Welcome Message

📌
What happens?

 A message box appears with "Welcome to our website!"

 The user must click OK to continue.

2⃣ Using Prompts – Asking for User Input

The prompt() function asks the user a question and lets them enter a response.

💡 Example: Asking for the User’s Name

What happens?

 A box appears asking "What is your name?"

 After entering a name, it displays "Hello, [name]!"

3⃣ Using Basic Arithmetic in JavaScript

JavaScript can do math operations like addition, subtraction, multiplication, and division.

Operator Operation Example Result

+ Addition 5+3 8
- Subtraction 10 - 4 6
* Multiplication 6*2 12
/ Division 8/2 4

💡 Example: Simple Math with JavaScript

📌
What happens?

 The program adds 10 + 5 and shows "The sum is: 15"

4⃣ Taking Numbers from the User

We can use prompt() to get numbers from the user and perform calculations.

💡 Example: Adding Two Numbers

📌
What happens?

 The user enters two numbers.

 JavaScript adds them and shows the result.
 Number () converts the input into a number.

5⃣ Using Confirm Boxes – Getting Yes/No Answers

The confirm () function asks the user a Yes/No question and returns true or false.

💡 Example: Confirming an Action

 📌
What happens?

 A box appears with "OK" (Yes) and "Cancel" (No).

 If the user clicks OK, it says "You chose to continue!"
 If they click Cancel, it says "You canceled the action."

Why Are JavaScript Interactions Important?

✅ Alerts give messages to users.

✅ Prompts take input from users.
✅ Arithmetic calculates values in a program.
✅ Confirm boxes ask Yes/No questions.

JavaScript Forms
Getting User Input & Validating Forms

Forms allow users to enter data, such as names, emails, and passwords. JavaScript helps collect,
check, and process this data.

1⃣ Getting User Input from Forms

We use the document.getElementById() method to get values from input fields in an HTML form.

💡 Example: Getting User Input

🔹 HTML (Form with a Name Field and Button)
🔹 JavaScript (Getting the Input Value)

📌
What happens?

 The user types their name.

 Clicking Submit displays "Hello, [name]!" on the page.

2⃣ Validating Forms – Checking User Input

Validation ensures the user enters correct information (e.g., email format, required fields).

🔹 HTML (Form with Email Field)

🔹
JavaScript (Checking Email Format)
 📌
What happens?

 If the email has "@" and ".", it says "Valid email!"

 Otherwise, it says "Invalid email. Try again."

3⃣ Preventing Empty Form Submission

Sometimes users forget to fill out a form. We can prevent this with JavaScript.

💡 Example: Checking if a Field is Empty

🔹 HTML
🔹 JavaScript

📌
What happens?

 If the field is empty, it shows "Username cannot be empty!"

 If the user enters a name, it says "Welcome, [username]!"

4⃣ Checking Password Strength

A strong password should be at least 6 characters long.

💡 Example: Validating Password Length

🔹 HTML
🔹 JavaScript

What happens?

 If the password is less than 6 characters, it shows "Password too short!"

 Otherwise, it says "Password is strong!"

5⃣ Submitting Forms with JavaScript

Forms can be submitted using the submit() method.

🔹 HTML

🔹
JavaScript
 📌
What happens?

 If the field is empty, the form does not submit.

 If filled, it says "Form submitted!"

Why Is Form Validation Important?

✅ Prevents empty fields (e.g., "Name required!")

✅ Checks correct formats (e.g., email must contain "@")
✅ Improves security (e.g., strong passwords)
✅ Ensures correct data entry

JavaScript Quiz
Creating a Simple Quiz Using Conditionals

A quiz in JavaScript allows users to answer questions and get feedback. We can use if-else
statements to check answers and display results.

1⃣ Creating a Simple Quiz

We can create a quiz question where the user selects an answer and gets instant feedback.
🔹 HTML (Quiz Question and Button)

🔹
JavaScript (Checking the Answer)

📌
What happens?

 The user types an answer.

 If they enter "Paris", they get a ✅ Correct! message.
 Otherwise, it says ❌ Incorrect!

2⃣ Making a Multiple-Choice Quiz

We can use radio buttons for a multiple-choice question.

🔹 HTML (Multiple-Choice Question)

🔹
JavaScript (Checking the Answer)

📌
What happens?

 The user selects an option and clicks Submit.

 If they select "4", they get ✅ Correct!
 Otherwise, they get ❌ Incorrect!
3⃣ Scoring the Quiz

We can ask multiple questions and calculate a score.

🔹 HTML (Two Questions Quiz)

🔹
JavaScript (Checking and Scoring Answers)

📌
What happens?

 The user answers two questions.

 If both answers are correct, they get 2 out of 2!
  If one is wrong, they get 1 out of 2.

4⃣ Using a Confirm Box for Quiz Restart

After finishing a quiz, we can ask if the user wants to play again.

🔹 JavaScript (Restarting the Quiz)

📌
What happens?

 A confirm box appears with "OK" and "Cancel."

 If the user clicks OK, the quiz restarts.
 If they click Cancel, they stay on the page.

Why Are JavaScript Quizzes Useful?

✅ Fun & Interactive – Users can test their knowledge.

✅ Instant Feedback – Shows correct/incorrect answers.
✅ Good for Learning – Helps with practice and revision.

JavaScript Functions – Reusing Code

Functions help us reuse code without writing it again.

💡 Example: A function that says hello

javascript
CopyEdit
function sayHello() {
 alert("Hello, welcome to JavaScript!");
}

📌 What happens?

 Calling sayHello() shows an alert with "Hello, welcome to JavaScript!"

JavaScript Recap – Hands-On Practice

✔ We learned how JavaScript makes websites interactive.

✔ We explored variables, conditions, and user input.
✔ We created a quiz and learned how functions save time.

JavaScript Functions
Writing and Calling Functions

Functions in JavaScript help us organize code and reuse it whenever needed. Instead of writing
the same code again and again, we can put it inside a function and call it when required.

1️⃣ What is a Function?

A function is a block of code that does something when called.

💡 Example: A Simple Function

📌
What happens?

 The function sayHello() contains an alert message.

 It doesn’t run until we call it.
2️⃣ Calling a Function
To use a function, we need to call it by writing its name followed by parentheses ().

💡 Example: Calling the Function

📌
What happens?

 The function runs and displays the alert.

3️⃣ Functions with Parameters

A parameter allows us to pass values into a function.

💡 Example: Function with a Parameter

📌
What happens?

 The function takes a name and says Hello, [name]!

 If we call greetUser("Ali"), it shows "Hello, Ali!"
 If we call greetUser("Sara"), it shows "Hello, Sara!"
4️⃣ Functions with Multiple Parameters
We can use multiple parameters by separating them with commas ,.

💡 Example: Adding Two Numbers

📌
What happens?

 The function addNumbers() takes two numbers and adds them.

 It shows "The sum is 8" when we call addNumbers(5, 3).

5️⃣ Returning a Value from a Function

Sometimes, we want a function to return a value instead of showing an alert.

💡 Example: Function with Return Value

📌
What happens?

 The function multiplies two numbers and returns the result.

 multiplyNumbers(4, 6) returns 24, which is stored in result.
  The alert shows "The result is: 24".

6️⃣ Function Expressions

Instead of using function functionName(), we can store a function inside a variable.

💡 Example: Function as a Variable

📌
What happens?

 The function is stored in square.

 Calling square(5) returns 25.

7️⃣ Arrow Functions (Shorter Syntax)

JavaScript provides a shorter way to write functions using =>.

💡 Example: Arrow Function

📌
What happens?

 cube(3) returns 27.

 Arrow functions are short and easy to read.
8️⃣ Using Functions in Events
Functions are useful when handling button clicks and other user actions.

💡 Example: Function for a Button Click

📌
What happens?

 Clicking the button calls the function, showing an alert.

9️⃣ Function Recap – Why Use Functions?

✅ Reusable – Write once, use many times.
✅ Organized Code – Makes the program easy to read.
✅ Saves Time – No need to repeat the same code.
✅ Better Debugging – Fixes are easier when using functions

JavaScript Recap
Review and Hands-On Practice

In this unit, we will review everything we have learned about JavaScript and practice writing
code to strengthen our understanding. Let’s go over the key concepts one by one! 🚀
1️⃣ JavaScript Basics – What is JavaScript?
✅ JavaScript makes websites interactive.
✅ It works with HTML (structure) and CSS (design).
✅ We use JavaScript for buttons, alerts, animations, and more.

💡 Example: Adding an Alert

📌
What happens?

 A popup message appears when the page loads.

2️⃣ Writing Your First JavaScript Code

✅ JavaScript is added inside an HTML file using <script> tags.
✅ It can also be placed in an external file (script.js).

💡 Example: JavaScript Inside HTML

 📌
What happens?

 Clicking the button calls the function and shows an alert.

3️⃣ JavaScript Variables – Storing Data

✅ Variables store values like numbers, text, or booleans.
✅ We use var, let, or const to declare variables.

💡 Example: Using Variables

📌
What happens?

 The alert says "Hello, Ali!" because name = "Ali".

4️⃣ JavaScript Conditions – Making Decisions
✅ The if statement checks a condition and runs different code based on the result.

💡 Example: Checking a Number

📌
What happens?

 If age is 18 or more, it says "You can vote!"

 Otherwise, it says "You are too young to vote."

5️⃣ JavaScript Interactions – Asking the User for Input

✅ JavaScript can interact with users using prompt and alert.

💡 Example: Asking for a Name

📌
What happens?

 A popup asks for your name.

 After entering your name, it greets you.

6️⃣ JavaScript Arithmetic – Doing Math

✅ JavaScript can do basic math like addition, subtraction, multiplication, and division.

💡 Example: Adding Two Numbers

📌 What happens?

 It calculates 5 + 3 = 8 and shows the sum.

7️⃣ JavaScript Forms – Getting and Validating User Input

✅ Forms collect user input. JavaScript can check if the input is correct.

💡 Example: Validating a Form

📌
What happens?
  If the user leaves the input empty, it asks them to enter a name.
 Otherwise, it greets them.

8️⃣ JavaScript Quiz – Using Conditions for Questions

✅ We can create a quiz using if statements.

💡 Example: Simple Quiz

📌
What happens?

 If the answer is 8, it says "Correct!".

 Otherwise, it says "Wrong answer."

9️⃣ JavaScript Functions – Writing and Calling Functions

✅ Functions group code so we can use it many times.

💡 Example: Function to Greet Users

 📌
What happens?

 Calling greet("Ali") says "Hello, Ali!".

 Calling greet("Sara") says "Hello, Sara!".

Hands-On Practice – Let's Write Some JavaScript!

💡 Task 1: Create a Simple Counter
Write JavaScript that increases and decreases a number when buttons are clicked.
 📌
What happens?

 Clicking Increase adds 1 to the number.

 Clicking Decrease subtracts 1.

🎯 JavaScript Recap Summary

✅ JavaScript makes web pages interactive.
✅ Variables store data like numbers or text.
✅ Conditions (if-else) help JavaScript make decisions.
✅ Functions help organize and reuse code.
✅ Forms collect user input and validate it.
✅ Events (like clicks) allow JavaScript to respond to user actions.