Yr 8 Computing Booklet 2023-24
Yr 8 Computing Booklet 2023-24
Computing Booklet
2023-2024
Term 2 and Term 3
Table of contents
Section 1 Theory
1 Problem solving tools: Advanced 1
1.1 Introduction 1
1.2 Algorithm and Pseudocode 1
1.3 Flowchart 3
1.4 Decision Making in a Flowchart 5
2 Data Representation 10
2.1 Different types of number system 10
2.2 Bits and Bytes 12
2.3 Decimal to Binary and vice versa 12
2.4 Binary to Octal and vice versa 13
2.5 Binary to Hexadecimal and vice versa 14
2.6 Digital System 15
2.7 Logic Gates 15
3 Hardware 21
3.1 MICR 21
3.2 Magnetic stripe card 21
3.3 OMR 22
3.4 OCR 22
3.5 Smart Card 23
Section 2 Practical
4 Introduction to Python 26
4.1 Key Features and Characteristics of Python 26
4.2 How to download Python 3.8? 27
4.3 Python Variables 29
4.4 Python Comments 29
4.5 Arithmetic Operators 30
4.6 Logical and relational operators 31
4.7 IF Statement in Python 32
5 Introduction to HTML 36
5.1 Introduction 36
5.2 Basic Structure of HTML 37
5.3 Container and Empty tags 38
5.4 Table and Image tags 39
6 Introduction to GIMP 45
6.1 Introduction 45
6.2 How to download GIMP? 45
6.3 Removing plain background 47
6.4 Non-standard Background elimination 50
6.5 Healing Tool 52
6.6 Cloning Tool 53
UNIT 1
Problem Solving Tools: Advanced
1.1: Introduction
Algorithms provide a systematic approach to problem-solving, pseudocode offers a human-
readable description of an algorithm's logic, and flowcharts provide a visual representation of the
algorithm's structure. Together, these tools aid in the design, communication, and
implementation of effective solutions to a wide range of problems.
1.2: Algorithm
An algorithm is a sequence of finite instructions, often used for calculation and data processing.
Sample Problem 1
Ahmed has bought 20 apples. He must distribute it to his 5 friends. Using algorithm help him to solve this
problem?
Sample Problem 2
Ruba has bought 10 pens, 27 rulers, 12 erasers and 45 markers. Using pseudocode find out how many
things she bought altogether?
2
Sample Problem 3
In a supermarket there was an offer of a cake which was Dhs.50/- only instead of Dhs.75/- Fazil bought
the cake and cut it into 25 pieces. He gave 10 pieces to his friend and 5 pieces to the nannies. Using
pseudocode find out how many were left?
1.3: Flowchart
Flowchart is a directional symbol for traffic. Specific shapes used to create a visual representation of a
program. It shows a connection. Words that flow with a chart.
A Flowchart defines a logical flow of data in pictorial form and integration of programming steps for
solving a given problem.
Flowcharts use different symbols to represent various elements in a process. These symbols help visually
depict the flow of control, decision points, inputs, outputs, and processing steps in an algorithm or
system. Here are some common flowchart symbols and their uses:
3
Sample Problem 1
Draw a flowchart to calculate the sum of three input numbers and display the result.
Sample Problem 2
Draw a flowchart to calculate the area of a circle and display the result. Use the formula: A=πr2 where Pi
is approximately equal to 3.14.
Sample Problem 3
Draw a flowchart to calculate the average of three input quizzes. If the average is greater than 50, print
‘pass’ otherwise print ‘fail’.
4
Sample Problem 4
Draw a flowchart to calculate the average of three input quizzes. If the average is greater than 50, print
‘pass’ otherwise print ‘fail’.
5
Sample Problem 5
Draw a flowchart to check whether any exam is there tomorrow or not?
Sample Problem 6
Create a flowchart for the problem: Input a student marks and check whether the marks is greater than
25 or not. If marks>25, student is pass else fail.
6
Activity Time
Task 1:
1. What are the name and the use of the following symbols?
2. Define a Flowchart.
Task 2:
1. What does the following algorithm represent?
IF x > 10 THEN
OUTPUT "Greater than 10"
ELSE
OUTPUT "Less than or equal to 10"
END IF
a) Loop
b) Sequence
c) Selection
d) None of the above
Task 3:
Answer the following:
1. Imagine you have a set of tasks, each with a start time, end time, and associated duration. Design an
algorithm to schedule these tasks to minimize the overlap and ensure efficient use of resources.
………………………………………………………………………………………………………………………………………………………………….………
7
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
3. Explain how the data in a flowchart could become stuck in an infinite loop.
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
8
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
Hot Question
Elaborate how you make decisions in your daily lives and compare your decision-making process to
the flowcharting techniques you've learned. Identify similarities and differences and discuss how
flowcharting can be a useful tool for organizing decision-making processes.
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………
Useful Resources:
https://pediaa.com/difference-between-algorithm-and-pseudocode/#Pseudocode
https://www.geeksforgeeks.org/difference-between-algorithm-pseudocode-and-program/
https://www.smartdraw.com/flowchart/flowchart-maker.htm
https://dyclassroom.com/flowchart/exercise-1
https://www.cimt.org.uk/projects/mepres/book8/bk8i1/bk8_1i2.htm
https://edrawmax.wondershare.com/flowchart/if-else-in-flowchart.html
9
UNIT 2
Data Representation
Introduction
Data representation in computing refers to the method used to represent information in a
form suitable for processing by a computer. Computers use binary digits, or bits (0s and 1s), as
the fundamental unit of data. Data representation involves encoding various types of
information, such as numbers, text, images, and more, into a binary format that can be
understood and manipulated by a computer.
Ther are different types of number system. The list is given below:
Binary number system
Decimal number system
Octal number system
Hexadecimal number system
The binary number system is a base-2 numeral system that uses only two digits, 0 and 1, to
represent all numeric values. It is the fundamental number system used in computers and
digital systems because electronic devices inherently work with two states, typically
represented as on/off or high/low voltage.
Applications: Computers use binary internally for data representation and processing. Binary is
used in digital communication, coding theory, and various branches of computer science.
The decimal number system, also known as base-10, is the standard system for denoting
integer and non-integer numbers. It uses ten digits from 0 to 9 to represent values. Each digit's
position in a number has a place value, and the overall value of a number is the sum of the
products of each digit and its place value.
Applications: The decimal system is widely used in everyday life for counting, arithmetic, and
monetary transactions. It is used in various fields, including finance, science, and engineering.
The hexadecimal number system is a base-16 numeral system. It uses 16 distinct symbols, most
commonly the symbols 0-9 to represent values 0 to 9, and A-F (or a-f) to represent values 10 to
15. Here are the symbols used in hexadecimal and their corresponding decimal values: 0, 1, 2,
3, 4, 5, 6, 7, 8, 9, A (or a), B (or b), C (or c), D (or d), E (or e), F (or f). The hexadecimal system is
widely used in computing because it represents a convenient way to express binary numbers in
a more human-readable format. Since each hexadecimal digit represents four binary digits
(bits), it's particularly useful in representing binary-coded values in a concise manner.
11
2.2: Bits and Bytes
Bits and bytes are fundamental units of digital information storage and processing in
computing.
Bit (Binary Digit):
A bit is the smallest unit of data in computing.
It can have one of two possible values: 0 or 1.
The term "bit" is a contraction of "binary digit."
Bits are used to represent the most basic form of information, such as the state of a switch
(on/off) in digital circuits.
Byte:
A byte consists of 8 bits.
It is the basic addressable unit of memory in many computer architectures.
Bytes are used to represent characters, numbers, and other data types in computing.
Byte is often abbreviated as "B."
a) Divide the Decimal Number by 2; the remainder is the LSB of Binary Number.
b) If the quotation is zero, the conversion is complete; else repeat step (a) using the
quotation as the Decimal Number. The new remainder is the next most significant bit of
the Binary Number.
Example 1: Convert the decimal number 610 into its binary equivalent.
Example 2: Convert the decimal number 2610 into its binary equivalent.
12
Binary to Decimal Conversion
The Process: Weighted Multiplication
a) Multiply each bit of the Binary Number by it corresponding bit-weighting factor (i.e. Bit-
0→20=1; Bit-1→21=2; Bit-2→22=4; etc.).
b) Sum up all the products in step (a) to get the Decimal Number.
Example 1: Convert the decimal number 01102 into its decimal equivalent.
Example 2: Convert the binary number 100102 into its decimal equivalent.
(1010)2
1 2
(1010) = (12) 13
2 8
2.5: Binary to Hexadecimal conversion
Method:
14
Example: Convert (2A5)16 into binary.
Boolean Algebra
Study of mathematical operations performed on certain variables called binary variables that
can have only two values: 1 or 0.
AND Gate:
An AND gate accepts two input signals. If the two input values for an AND gate are both 1, the
output is 1; otherwise, the output is 0.
15
OR Gate:
If the two input values are both 0, the output value is 0; otherwise, the output is 1.
16
Activity Time
Task 1:
Convert the following decimal to its binary equivalent:
1. 1310 =?
2. 2210 =?
3. 4310 =?
4. 15810 =?
Task 2:
Convert the following binary to its decimal equivalent:
1. 0110 2 =?
2. 11010 2 =?
3. 0110101 2 =?
4. 11010011 2 =?
Task 3:
Convert the following octal to its binary equivalent:
1. (65)8 =?
2. (70)8 =?
3. (37)8 =?
4. (21)8 =?
Task 4:
Convert the following binary to its octal equivalent:
1. (1011)2 =?
2. (0010)2 =?
3. (11111)2 =?
4. (1000)2 =?
Task 5:
Convert the following binary to its hexadecimal equivalent:
a. (01101110)2=?
b. (0011010) 2=?
c. (11001100) 2=?
d. (11110000) 2=?
Task 6:
Convert the following hexadecimal to its binary equivalent:
a. (6E)16
b. (1A) 16
c. (CC) 16
d. (F0) 16
17
e. (2AC) 16
Task 7
Answer the following questions.
1. Differentiate between OR gate and AND gate.
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………………….
2. Identify logic gates circuit suppliers and exporters in UAE and how they are improving the market.
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
18
5. Draw the circuit for the following Boolean algebraic expressions.
a) (x+y) x
b) (x+y)
19
Useful Resources:
https://www.cuemath.com/numbers/decimal-to-binary/
https://www.splashlearn.com/math-vocabulary/hexadecimal-to-binary
https://www.youtube.com/watch?v=WkScocdUtbE
https://www.prepbytes.com/blog/general/number-system-in-computer/
https://study.com/academy/lesson/what-is-a-byte-definition-measurements.html
https://www.tutorialspoint.com/computer_logical_organization/logic_gates.htm
20
UNIT 3
Hardware
Introduction
Direct Data Entry (DDE) devices are tools or systems that allow users to input data directly into a
computer or information system. These devices are used to streamline data entry processes by
eliminating the need for manual transcription or processing of information.
Advantages
MICR readers can read the characters on the cheque accurately.
Input of data from the cheque is done faster into the computer and hence saves time.
Disadvantages
The special characters printed using magnetic ink is expensive.
Characters printed in ordinary ink are not detected by MICR reader.
Advantage
Data recorded on the magnetic stripe is in electronic form and can be input directly into a
21
computer.
Disadvantage
Data recorded on the magnetic stripe can be copied and edited and this gives a chance to commit
identity theft and fraud.
Advantage
Input into the computer is faster and less expensive as there is no need to type in the data.
Disadvantage
Pencil marks made on the form must be very clear to be recognized by the OMR reader.
Advantage
Text printed on the paper can be scanned and converted into electronic form and edited.
22
Disadvantage
The handwritten characters must be clear, or they may not be properly recognized.
Advantage
Data recorded on the chip can be updated during transactions is more secure than the data
recorded on a magnetic stripe.
Disadvantage
Data recorded on the chip can be affected by electromagnetic radiation from TVs and computers.
Smart Cards
23
Activity Time
Task 1:
Task 2:
Answer the following:
1. How do smart card work?
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………….………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
24
Useful Resources:
https://www.techtarget.com/searchsecurity/definition/smart-card
https://www.securetechalliance.org/smart-cards-intro-primer/
https://www.ynvisible.com/news-inspiration/what-is-smart-card
https://www.plugandplaytechcenter.com/resources/smart-card-technology/
https://learnlearn.uk/igcseict/direct-entry-devices/
https://www.ictlounge.com/html/direct_input_devices.htm
https://igcseictnowcom.wordpress.com/direct-data-entry-devices/
25
UNIT 4
Introduction to Python
Introduction
Python is a versatile and widely used high-level programming language known for its simplicity and
readability. It was created by Guido van Rossum and first released in 1991. Since then, it has become
one of the most popular programming languages in the world, used extensively in various domains
such as web development, data science, artificial intelligence, scientific computing, automation, and
more.
Interpreted and Interactive: Python is an interpreted language, which means that code is executed line
by line, making it suitable for rapid development and testing. It also provides an interactive mode,
allowing developers to experiment with code snippets and see immediate results.
High-Level Language: Python abstracts many low-level details, such as memory management and
hardware dependencies, allowing developers to focus on solving problems rather than worrying about
implementation details.
Dynamic Typing: Python is dynamically typed, meaning you don't need to declare the type of variables
explicitly. This makes the language more flexible and allows for rapid prototyping and development.
Extensive Standard Library: Python comes with a comprehensive standard library that provides
support for many common programming tasks, such as file I/O, networking, database access, and
more. This reduces the need for external dependencies and makes it easy to build powerful
applications with minimal effort.
Community and Ecosystem: Python has a vibrant and active community of developers who contribute
to its ecosystem by creating libraries, frameworks, and tools for various purposes. This vast ecosystem
makes it easy to find solutions to almost any problem you might encounter and accelerates the
development process.
Cross-Platform Compatibility: Python is available on all major operating systems (Windows, macOS,
Linux) without any modifications, making it an excellent choice for building applications that need to
26
run on different platforms.
Support for Multiple Programming Paradigms: Python supports multiple programming paradigms,
including procedural, object-oriented, and functional programming, allowing developers to choose the
best approach for their projects.
Overall, Python's simplicity, versatility, and extensive ecosystem make it a popular choice for a wide
range of applications, from simple scripting tasks to complex enterprise-level software development.
Whether you're a beginner or an experienced developer, Python offers a powerful and enjoyable
programming experience.
Step 4: The setup will start automatically. If the computer asks for
administrative privileges, click YES to grant.
27
Launching the IDLE:
To launch the IDE, go to Start-->All Programs—
>Python and open IDLE python as shown.
Step 2:
In the new screen that appears, you can write your
code.
a=5
b=6
c=a+b
print(c)
Step 3:
Before being able to see the output of your code,
you will have to save your code on hard disk.
Python programs are saved as *.py files.
Step 4:
To see the output of your code, click Run-->
Run Module
Step 5:
You will see the output of
your code in another
screen.
28
4.3: Python Variables
Variables are used to store data values. They act as placeholders or containers that can hold various
types of data, such as numbers, strings, lists, dictionaries, or other objects. Variables provide a way to
reference and manipulate data within a program.
Examples:
x=5 # Assigning integer value 5 to variable x
y = "Hello, world!" # Assigning string value "Hello, world!" to variable y
Python Strings
Strings are sequences of characters, which can be letters, numbers, symbols, or whitespace,
enclosed within either single quotes (') or double quotes ("). Strings are immutable, meaning once
they are created, their values cannot be changed.
For example:
my_string = 'Hello, world!' # Using single quotes
another_string = "Python is awesome!" # Using double quotes
29
Output
For example:
x=4
y=7
print(x+y)
print(x-y)
30
print(x*y)
print(x/y)
print(x%y)
print(x**y)
print(x//y)
For example:
31
For example:
For example:
x=5
if x > 0:
print("x is positive")
else:
print("x is negative")
Example 1: Write a python program to find the greater number for the given 2 numbers.
a=25
b=45
If(a>b):
print(“a is greater than b”)
else:
print(“b is greater than a”)
Example 2: Write a python program to check whether the given number is even or odd.
32
Activity Time
Task 1
a. Calculate the sum of any three variables.
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
b. Find the subtraction of any two variables.
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
c. Assign “Hi, at present I am using python!”, to any three variable and print as one sentence.
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
d. If x=1, y=2, z=3. Then x = x+2,y=y+3 and z=z+4. What will be the output of x, y and z.
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
Task 2:
Answer the following questions:
33
1. Write a python program to check whether a student is passed or failed.
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
2. How to write a python code to check whether two numbers are equal or not?
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
Hot Question
How is memory managed in Python?
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
34
How can you combine multiple conditions using logical operators (and, or, not) in an if statement?
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
Useful resources:
https://www.youtube.com/watch?v=Y8Tko2YC5hA
https://www.youtube.com/watch?v=s3Ejdx6cIho
https://www.w3schools.com/python/default.asp
https://www.w3schools.com/python/exercise.asp?filename=exercise_variables1
https://www.w3resource.com/python-exercises/
https://www.geeksforgeeks.org/python-exercises-practice-questions-and-solutions/
https://www.practicepython.org/
35
UNIT 5
Introduction to HTML
5.1: Introduction
HTML, which stands for Hypertext Markup Language, is the standard markup language for creating web
pages and web applications. It forms the backbone of the World Wide Web, allowing content to be
structured and formatted for display on browsers.
HTML is not a programming language but rather a markup language. It is used to define the structure
and layout of web documents by employing a system of tags and attributes. These tags tell the browser
how to display the content, whether it's text, images, links, or multimedia.
Key Concepts:
Tags: HTML documents are made up of HTML tags, which are enclosed in angle brackets <>. Tags
typically come in pairs: an opening tag and a closing tag, with content nested in between. For example,
<p> is the opening tag for a paragraph, and </p> is the closing tag.
Elements: Elements are comprised of tags, content, and attributes. They define the structure and
semantics of a document's content. For instance, <h1> is an element representing a top-level heading,
and <img> is an element used for embedding images.
Attributes: Attributes provide additional information about an element and are specified within the
opening tag. Attributes typically come in name-value pairs and modify the behavior or appearance of
the element. For example, the src attribute in the <img> tag specifies the image source.
HTML is often combined with CSS (Cascading Style Sheets) and JavaScript to create visually appealing
and interactive web experiences. CSS is used for styling HTML elements, while JavaScript adds dynamic
behavior and interactivity to web pages. In summary, HTML is the foundation of web development,
providing the structure and content for web pages, and serving as the building blocks for creating
engaging online experiences.
36
In Save As dialog box choose the location to save the document.
Enter the file name with extension.htm or .html and click Save.
<!DOCTYPE> Declaration: This declaration informs the browser about the version of HTML being used in
the document. It is not an HTML tag, but rather an instruction to the browser.
<html> Element: The <html> element is the root element of an HTML document. It encapsulates all the
content on the webpage. Inside the <html> element, you'll find the <head> and <body> sections.
<head> Section: The <head> section contains page title, character encoding, links to external
stylesheets, scripts, and other important information that isn't directly visible on the webpage.
<body> Section: The <body> section contains the visible content of the webpage, including text, images,
links, videos, and any other elements that users interact with or see when they visit the page.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
WYSIWYG editors
WYSIWYG stands for What You See Is What You Get.
WYSIWYG editors allows you to create web pages without knowing how to write HTML.
Google Web Designer and Adobe Dreamweaver are two popular WYSIWYG HTML editors.
Advantages:
Websites can be created quickly.
Knowledge of HTML tags or commands is not required.
37
5.3: Container and Empty tags
Container Tags: Container tags, also known as paired tags or dual tags, are HTML elements that have
both an opening tag and a closing tag. These tags enclose content, creating a distinct block or section
within the document. Common container tags include <p>, <h1>, and so on.
For example:
<p>This is a paragraph inside an element. </p>
Empty Tags: Empty tags, also known as self-closing tags or void elements, are HTML elements that do
not have a closing tag because they do not contain any content. These tags typically represent
standalone elements or placeholders within the document. Common empty tags include <img>, <br>
and <hr>.
For example:
<img src="example.jpg" alt="Example Image">
Heading Tags
Heading tags in HTML are used to define headings or titles within a document, providing structure and
hierarchy to the content. HTML offers six levels of headings, ranging from <h1> (the most important) to
<h6> (the least important). These tags help in organizing content and improving accessibility, as they
indicate the relative importance of different sections within the document.
For example:
<HTML>
<HEAD>
<TITLE>My First </TITLE>
</HEAD>
<BODY>
<h1>This is my first webpage. </h1>
<h2>This is my first webpage. </h2>
<h3>This is my first webpage. </h3>
<h4>This is my first webpage. </h4>
<h5> <center>This is my first webpage. </center> </h5>
<h6>This is my first webpage. </h6>
</BODY>
</HTML>
38
5.4: Table tag
The <table> tag in HTML is used to create tables, which are grids made up of rows and columns. Tables
are commonly used for displaying tabular data in a structured format.
Basic Structure:
The <table> tag is the container for the entire table. Inside the <table> tag, you define rows using the
<tr> (table row) tag. Within each row, you define cells using the <td> (table data) tag for regular data
cells or <th> (table header) tag for header cells.
For example:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Table Attributes:
The <table> tag supports various attributes to control the appearance and behavior of the table:
border: Specifies the width of the border around the table and its cells (deprecated in HTML5).
width: Sets the width of the table.
cellpadding: Specifies the amount of space between the cell content and the cell border.
cellspacing: Specifies the amount of space between cells.
For example:
<table border="1" width="100%" cellpadding="5" cellspacing="0">
<!-- Table content -->
</table>
<img> Tag
The <img> tag in HTML is used to insert images into a web page. It is an empty tag, meaning it doesn't
have a closing tag and is self-contained. The <img> tag requires a mandatory attribute src, which
specifies the source (URL) of the image to be displayed.
width and height: These attributes specify the width and height of the image, respectively. They can be
used to adjust the size of the image on the webpage. It's good practice to include these attributes to
ensure that the page layout doesn't shift while the image is loading.
alt: The alt attribute provides alternative text for the image. It's essential for accessibility purposes and
is displayed in case the image fails to load or for users who rely on screen readers. The text should
describe the content or function of the image.
For example:
<img src="image.jpg" alt="Description of the image" width="200" height="150">
39
Activity Time
Task 1:
1. Create a webpage on the topic “How was your day today?”.
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
40
Task 2:
You are going to design a simple webpage of ICT.
Save your file as ict with your name in your folder.
Give the heading Information and Communication Technology
Properties are:
First level heading, center and underlined.
Give a yellow background color.
Copy the following paragraph:
ICT, or information and communications technology is the infrastructure and components that
enable modern computing. Although there is no single, universal definition of ICT, the term is
generally accepted to mean all devices, networking components, applications and systems that
combined allow people and organizations i.e., businesses, nonprofit agencies, governments, and
criminal enterprises to interact in the digital world.
Properties are:
Use line breaks after every line.
Make the words bold that start with letter ‘C’.
At the end, type:
Prepared By: Your Name & Grade make the text italic.
Finally save it again and open your web page.
Task 3:
Anum has to create a short note on e-waste and display it on a web page.
She has to set the following properties of the web page:
Add a background color orange.
Set the heading with style h1 E-waste and center aligned.
Set the heading with style h2 What is E-waste?
Set the heading with style h3 Treatment of E-waste and right aligned.
Set the heading with style h4 Harmful effects of E-waste.
Set the heading with style h5 Effects of E-waste on environment.
Set the heading with style h6 Disposal of E-waste and right aligned.
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
41
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
Task 4:
A webpage is given below. Create it as shown. Add any background color of your choice. Save it as
uae.html in your folder.
42
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
Task 5:
Create an HTML file named student_grades.html.
Inside the HTML file, build a table with the following structure:
Table Headers: "Student Name", "Math", "Science", "History"
Table Rows: Include at least three rows of student data.
Each row should contain the student's name and their grades in Math, Science, and History.
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
43
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
44
UNIT 6
Introduction to GIMP
6.1: Introduction
GIMP (GNU Image Manipulation Program) is a free and open-source image editor tool. It is a cross-
platform tool available for different operating systems such as GNU/Linux, macOS, Windows, etc.
It is a useful tool for various image manipulation tasks such as photo editing, image composition, image
construction, logo designing, painting, and many more. It is capable of being used as a simple paint tool,
an advanced photo editing tool, a mass production image renderer, or an image format converter tool.
One of the other reasons for its popularity is that it is a free tool while other editing tools such as
photoshop are paid.
45
Step 3:
Once GIMP is installed successfully, Goto windows select GIMP 2.10.34 as shown below,
Step 6:
Once selected, GIMP will be opened as below.
46
Lets start !!!
Main windows
Step 1:
insert an image
File New Fix the width & height of an image.
(or)
Drag and drop your image in the GIMP main widow.
Step 2:
47
Move tool - Used to move the images to a specific location.
Unified Transform Tool – Used to change the size and perspective of an image.
48
Step 3:
Step 4
Step 5
Once selected, click delete to remove the background.
Now the image will be without background show below.
49
Step 6
Select None to remove the dotted line on the image.
Step 7
Selectmove tool (Now only the image can be moved anywhere on the screen)
Step 8
Step 9
To save an image:
File Export as filename .png
Step 10
50
Select Free select Tool.
Step 2
Step 3
Select the zoom tool and zoom the image to crop.
To zoom out press hyphen in the keyboard (-)
Step 4
Select free select tool trace it on the image.
Step 5
From select menuclick invert press delete.(The background image will be deleted)
Step 6
51
6.5: Healing Tool:
In GIMP (GNU Image Manipulation Program), the Healing Tool is a part of theretouching and
image editing toolkit. Specifically, GIMP has a tool called the "Heal Tool" or "Healing Tool,"
which is used for retouching imperfections in images.
Here are some common uses of the Healing Tool in GIMP:
- Erasing Wrinkles and Fine Lines.
- Removing Blemishes and Acne.
- Restoring Old or Damaged Photograph.
- Enhancing Landscape Images.
- Fixing Uneven Skin Tones.
Here's a basic outline of how to use the Healing Tool in GIMP:
` Step 1
Insert the image as explained above.
Step 2
Create a duplicate layer of the image.
Step 3
Select Healing tool from the toolbox and adjust the brush size based on the area you want to
retouch.
Step 4
Ctrl + Click on a clean area to sample pixels.
52
Step 5
Now you can see a source and another cursor on the screen.
Step 6
Paint over the imperfections or blemishes to apply the healing effect.
You will get a clear image as below.
Remember to use the Healing Tool judiciously, as excessive retouching can result in an
unnatural or overly manipulated appearance. It's often a good practice to work non-
destructively by creating a new layer or duplicating the image before applying extensive
retouching.
In GIMP (GNU Image Manipulation Program), the Clone Tool is used for cloning or
duplicating parts of an image. This tool allows you to copy pixels from one area of the image
and paint them onto another area, creating a seamless blend.
Step 2
Select the Clone Tool.
In the toolbox, look for the Clone Tool icon. It typically looks like a rubber stamp.
You can also press the C key to select the Clone Tool.
Step 3
Before you start cloning, adjust the tool options in the tool options dialog.
Common options include:
- Brush Size: Adjust the size of the brush for cloning.
- Hardness: Controls the softness or hardness of the brush edge.
- Opacity: Determines the transparency of the cloned pixels.
Step 4
To set the source for cloning, Ctrl + Click on the area you want to clone from.
This action selects the source point.
Step 5
Move the cursor to the area where you want to apply the cloned pixels and start painting.
As you paint, you'll see the cloned pixels from the source area being applied to the destination area.
Adjust and Refine:
You can release the mouse button and Ctrl + Click on a new source point if needed.Continue adjusting
and refining until you achieve the desired result.
Step 6
Once you are satisfied with the cloning, save your work.
54
Activity Time
Task 1
1. Take any images with plain background and try to remove them.
2. Select an image with a group of people as the background and remove them using
fussy tool.
3. Download the images of a desert area and try to include trees in it , using clone tool.
Task 2
Differentiate between healing tool and clone tool.
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………………
Useful Resources:
https://robertsj.github.io/me400_notes/lectures/Algorithms_Flowcharts_and_Pse
udocode.htmlhttps://www.youtube.com/watch?v=hEgO047GxaQ
https://dyclassroom.com/flowchart/exercise-1
https://www.youtube.com/watch?v=I2wURDqiXdM
https://www.youtube.com/watch?v=Y8Tko2YC5hA
https://www.tutorialspoint.com/computer_fundamentals/pdf/computer_num
ber_system.pdfhttps://www.instructables.com/id/Convert-Negative-Numbers-
to-Binary/ https://www.mathworksheets4kids.com/convert-decimal-
binary.php https://thegimptutorials.com/
55
56