STEM Wonders GRADE 8

5. Define TCRT5000 and explain its working?

Label the diagram!

97

End of Section - 04 ROBOTICS

Label the diagram!

98

0 5S e ct i o n

ELECTRONICS

Students will learn :

1. Introduction to Circuits 9. DIY Elementary Kit

2. Resistor 10. Lighting up the LED

3. LED – Light Emitting Diode 11. Let’s make the Buzzing sound

4. Buzzer 12. NAND Gate

5. Capacitor 13. NOR Gate

6. 555 Timer IC 14. Buzz Game

7. Battery 15. Blinking LED using 555 Time

8. Slide Switch

05 Electronics STEM Wonders

5.1 Introduction to Circuits

Electricity can only flow in a closed circuit with no gaps. The passage of electrical
charge through materials is known as current electricity.
A power supply is required for every entire circuit. The power source could be
either the mains or a battery.
Wires must be connected to both the positive and negative ends of the power
source for a circuit to be complete.
A battery, a bulb, and wires can be used to create a simple circuit.

5.2 Resistor

The resistor resists the current to flow in
an electronic circuit. This is the electronic
component that limits the flow of electrons
through a circuit. By connecting a resistor
with the LED, we can allow voltages to drop
against the LED to avoid damaging it.

Why RESISTOR is so colorful?

Bands of color are used to represent the Fig 5.1
resistance value. In electronics, components
and wires are coded with colors to identify
their value and function.

What do the colors on resistors mean?

The first two bands always denote the first two digits of the resistance value in
ohms. The third band represents the multiplier. The Multiplier means the number
of 0s multiplied by the first two digits of the resistances. For example: If the
color is Brown which represents 1, that means the first two digits are multiplied
by 10.

100

05 Electronics STEM Wonders

The fourth color band signifies tolerance.
Tolerance is defined as the percentage of error in the resistor’s resistance.

Fig 5.2

5.3 LED – Light Emitting Diode

A light-emitting diode (LED) is a semiconductor device that emits light when
an electric current flows through it. When current passes through an LED, the
electrons recombine with holes emitting light in the process. LEDs allow the current
to flow in the forward direction and block the current in the reverse direction.
Light-emitting diode (LED) is a widely used standard source of light in electrical
equipment. It has a wide range of applications ranging from your mobile phone to
large advertising billboards. They mostly find applications in devices that show the
time and display different types of data.

Fig 5.4- A LED Symbol Fig 5.3- A LED

101

05 Electronics STEM Wonders

What is LED? 5.4 Buzzer

Tiny electronic component that glows A buzzer or beeper is an audio
vividly if wired up correctly. The polarity signaling device, which may be
of an LED can be determined just by mechanical, electromechanical, or
looking at it keenly. LED has two legs; piezoelectric (piezo for short).
one of them is always shorter in length. Typical uses of buzzers and beepers
The shorter leg serves as the negative include alarm devices, timers, and
terminal, and the longer leg of the LED confirmation of user input such as a
serves as the positive terminal. mouse click or keystroke.

Fig 5.5- Buzzer What is
Buzzer?

A Buzzer is an electrical device that
produce a buzzing sound. It is typically
used in alarm devices, timers or
confirming the user input such as;
mouse click or keystroke.

Fig 5.6- Buzzer Symbol

102

05 Electronics STEM Wonders

5.5 Capacitor

The capacitor, also known as the condenser, is a device that stores electricity in the
electrical field between two conductors. These conductors have equal but opposite
electric charges. Intentional capacitors are made from thin conducting plates, usually
made of metal.

Fig 5.7 - Buzzer Symbol Physics of the
Capacitor?

Two plates or electrodes are typical designs.
Each plate stores an opposing charge. These
plates are conductive and separated by a
dielectric or insulator. The charge can be
stored on the plate’s surface at the border
with the dielectric. Each plate holds an equal
and opposite charge. The total charges on
the device are always zero.

Fig 5.8 Physics of Capacitor

Uses of Capacitors

Capacitors store charge, but they are put to various uses in electrical circuits.
They can be used as timing devices (because it takes a certain, predictable amount
of time to charge them), as filters (circuits that let only certain signals flow), for
smoothing the voltage in circuits, for tuning (in radios and TVs), and several other
purposes. Large supercapacitors can also be used instead of batteries.

5.6 555 Timer IC

The 555 was a common IC or integrated circuit that was introduced in 1972 by Hans

Camenzind. It is very popular with hobbyists. You can find it in many electronics

shops that sell components.

The basic 555 timers were named after the three 5k resistors that are internally

connected and used to generate voltages. The 555 timers can produce stable

square waves which are frequently required to control electronic circuits. You can

adjust 103

05 Electronics STEM Wonders

frequency, or the number of pulses per sec- Fig 5.9 555 Timer Pinout
onds by using different voltages. You can also
generate different types of waves, such as
alternate or flip-flop. Timers are used to con-
trol the time that something turns on/off.
The 555 timer IC can be used in a variety
timer, pulse generator and oscillator
applications. It can be used as a time delay,
oscillator or flip-flop element. Electronic
projects include the 555 timer IC.

5.7 Battery

Batteries power flashlights, radios, cell phones,

handheld games, and a variety of other devices.

A battery is a type of storage device that holds

energy until it is needed. The energy is stored in

the battery by chemicals. When a battery is used,

chemical energy is converted into electric energy.

A battery contains two pieces of metal in a liquid Fig 5.10 Cross-Sectional
Diagram Of Battery

or paste. Electrodes are the metal parts. An electrolyte is a chemical mixture in

the form of a liquid or paste. Each electrode has a point, known as a terminal, that

protrudes from the battery.

A battery’s terminals must be connected by an outside wire in order for it to func-

tion. The electrolyte’s chemicals then cause electrons to flow from one electrode to

the other. An electric current is a flow of electrons. The electric current that flows

through the wire is what powers flashlights and other electrical devices.

5.8 Slide Switch

A sliding switch is a mechanical device that allows for control of the current flow in
a circuit. It can slide from the off (off) to the on (on) positions and stays there until
it is actuated to a new state. The best use of a slide switch is to control current
flow in small projects.

104

05 Electronics STEM Wonders

There are many types of terminals for slide switches.

These include wire leads, solder terminals and screw

terminals.

There are two types of internal design for slide

switches. The most popular design uses metal slide

that contact the flat metal parts of the switch. The Fig 5.11 Pinout Of Slide Switch

slider moves and causes the contacts of the metal slide to slide from one set to

the next, activating the switch. The second design uses an aluminium seesaw. The

slider is equipped with a spring that pushes on either side of the metal seesaw.

Slide switches can be used as maintained-contact switches. Maintained-contact

switch remain in one state until they are actuated into another state. Then, they

return to that state until it is acted upon again.

5.9 DIY Elementary Kit

5.9.1 Introduction

DIY Elementary Kit is a grade-centric electronic circuit development board
designed for school-going students. The kit includes different electronic hardware
such as; LEDs, Buzzer, Light sensor, transistor, and many more for a better
understanding of how they work. It’s a plug-and-play kit; for example, to turn ON
the LED connections are made using female jumper wires. After performing the
desired tasks simply just unplug the jumper wires and work on a different circuit.

Fig 5.12 DIY Elementary Kit 105

05 Electronics STEM Wonders

5.9.2 How to make the connections

Fig 5.13

These pins are extended positive supply This is the power terminal. This is the
& these pins are also internally connect- Here you can connect your slide switch;
ed in horizontal manner. battery. you
can turn ON &
These pins are vertically connected These pins are extended Turn OFF the
and its internally connected with negative supply & these board power
the left terminal of the LED. pins are internally connect- supply using
ed in horizontal manner this switch.

5.10 Lighting up the LED

5.10.1 Introduction

An LED (Light Emitting Diode) emits light when an electric current passes
through it. The simplest circuit to power an LED is a voltage source with a
resistor and an LED in series.

106

05 Electronics STEM Wonders

5.10.2 Components Required

1. 9V Battery
2. 220Ω Resistor
3. LED
4. Jumper Wire

5.10.3 Connection Diagram

• Take one jumper wire and insert the Fig 5.14-Basic LED Circuit
firstpin of wire to the positive
connector and another pin of wire to the
first connector of the 220Ω resistor.
(Red Wire)

• Take another wire and connect 1st pin Fig 5.15-LED Circuit System
of wire with the 2nd connector of 220Ω
resistor and 2nd pin of wire with the 1st
connector (Anode) of Red LED.
(Golden Wire)

• Now take another wire and connect 1st pin of wire with the 2nd connector
(Cathode) of Red LED and another pin with the Negative connector. (Black Wire)

Fig 5.16-LED Circuit System

107

05 Electronics STEM Wonders

5.11 Let’s make the Buzzing sound

5.11.1 Introduction

Buzzers are electric-sounding devices that generate sounds. Typically powered by
DC voltage, they can be categorized as Piezo buzzers and magnetic buzzers. They
come in different designs and uses as well, and based on that, they can produce
different sounds!

Fig 5.17- Buzzer

5.11.2 Components Required

1. 9V Battery
2. Buzzer
3. Jumper Wire

Fig 5.18- Buzzer Circuit Diagram

5.11.3 Connection Diagram

• Take one jumper wire and insert the first pin of wire to the positive connector
and another pin of wire to the first connector of the Buzzer. (Red Wire)
• Now take another wire and connect 1st pin of wire with the 2nd connector of
Buzzer and another pin with the Negative connector. (Black Wire)

Fig 5.19- Buzzer Connection Diagram

108

05 Electronics STEM Wonders

5.12 NAND Gate

5.12.1 Introduction

Boolean algebra NAND operation is a combination of a

digital logic AND gate and a NOT gate connected in series.

The output of Y is False (0) (LOW) is when either any inputs

(A or B) are True (1). When both inputs are 1 (ON) then Fig 5.20 Symbol Of NAND Gate
output will be “False”, (0) (LOW).

5.12.2 Components Required

1. 9V Battery

2. 220Ω Resistor

3. LED

4. 2 x Slide Switches

5. Jumper Wires Fig 5.22 Circuit Diagram Of NAND Gate

5.12.3 Connection Diagram Fig 5.21 Truth Table
Of NAND Gate

> Take one jumper wire and insert the first pin of

wire to the positive connector and another pin of

wire to the first connector of 220 Ω Resistor.

(Red Wire)

> Take another wire and connect 1st pin of

wire with the 2nd connector of 220 Ω Resis-
Fig 5.23

tor and 2nd pin of wire with the 2nd connector of SWITCH1. (Purple Wire)

> Now take another wire and connect 1st pin of wire with the 2nd connector of

220 Ω Resistor and 2nd pin of wire with the 1st connector (ANODE) of RED LED.

(Yellow Wire)

> Similarly take another wire and connect 1st pin of wire with the 2nd connector

(CATHODE) of RED LED and 2nd pin of wire with the Negative Connector. (Black

Wire)

> Now take another wire and connect 1st pin of wire with the 1st connector of

SWITCH1 and 2nd pin of wire with the 2nd connector SWITCH2 (Light Yellow

Wire)

> Finally take another wire and connect 1st pin of wire with the 1st connector

SWITCH2 and another pin with the Negative connector. (Green Wire) 109

05 Electronics STEM Wonders

5.13 NOR Gate

5.13.1 Introduction

Boolean algebra NOR operation is a combination of OR
gate and a NOT gate connected in series. The output
Y is only “True (1)” (HIGH). If both inputs are false
(LOW), otherwise the output will be False (LOW).

5.13.2 Components Required Fig 5.24 Symbol Of NOR Gate

1. 9V Battery

2. 220Ω Resistor

3. LED

4. 2 x Slide Switches

5. Jumper Wires Fig 5.26 NOR circuit Diagram

Fig 5.24 Truth Table Of AND Gate

5.13.3 Connection Diagram

> Take one jumper wire and insert the first pin of wire to the positive connector

and another pin of wire to the first connector of

the SWITCH1. (Red Wire)

> Take another wire and connect 1st pin of wire

with the 2nd connector of 220 Ω Resistor and

2nd pin of wire with the 1st connector (ANODE) of

RED LED. (Yellow Wire) Fig 5.27 NOR Connection Diagram

> Similarly take another wire and connect 1st pin of

wire with the 2nd connector (CATHODE) of RED

LED and 2nd pin of wire with the Negative Connector. (Black Wire)

> Now take another wire and connect 1st pin of wire with the 1st connector of

SWITCH1 and 2nd pin of wire with the 1st connector of SWITCH2. (Light Yellow

Wire)

> Similarly take another wire and connect 1st pin of wire with the 2nd connector

of SWITCH1 and 2nd pin of wire with the 2nd connector of SWITCH2. (Light Blue

Wire)

110

05 Electronics STEM Wonders

> Now take another wire and connect 1st pin of wire with the 1st connector of

SWITCH1 and 2nd pin of wire with the Positive connector. (Purple Wire)

> Finally take another wire and connect 1st pin of wire with the 2nd connector of

SWITCH2 and another pin with the Negative connector. (Green Wire)

5.14 Buzz Game

5.14.1 Introduction

Buzz wire is a steady hand game that is well known to Fig 5.28 BUZZ Game
many as a table top
amusement. Buzz wire is a challenging and competitive
game where you are playing the number of touches
against time. The player has to get the right balance
between speed and skill in order to obtain a successful
score.

5.14.2 Components Required

1. 9V Battery
2. 220Ω Resistor
3. LED
4. Buzzer
5. Jumper Wires

5.14.3 Connection Diagram Fig 5.28 BUZZ Game Circuit Diagram

> Take one jumper wire and insert the first pin of

wire to the positive connector and another pin of

wire to the first connector of the 220Ω resistor.

(Red Wire)

> Take another wire and connect 1st pin of wire with

the 2nd connector of 220Ω resistor and 2nd pin of

wire with the 1st connector (Anode) of LED. (Yellow

Wire) Fig 5.29 BUZZ Game Connection Diagram

> Now take another wire and connect 1st pin of wire with the 1st connector of

220Ω resistor and another pin with the 2nd connector (+) of Buzzer. (Green wire)

111

05 Electronics STEM Wonders

> Take another wire and connect 1st pin of wire with the 2nd connector

(CATHODE) of RED LED and 2nd pin of wire with the 1st connector of Buzzer.

(Light Blue Wire)

> Now take another wire and connect 1st pin of wire with the 2nd connector of

2nd connector (CATHODE) of RED LED and another pin with the 1st connector of
left Loop Block. (Gray Wire)

> Now take a copper wire and connect its one end with 2nd connector of Left

Loop Block and other end with the right loop block.

> Now take a HOOK wire and connect its end with the Right-side Hook Block.

(Black Wire)

5.15 Blinking LED using 555 Timer

5.15.1 Introduction 5.15.2 Components Required

555 timer IC is used to create time dif- 1. 9V Battery
ference in various applications. The Blink- 2. 1kΩ Resistor
ing LED circuit uses a 555 timer in as- 3. 100kΩ Resistor
table mode, which generates a continuous 4. 555 Timer IC
output in the form of a square wave at pin 5. 2 x LED
3. This waveform will turn one LED ON 6. Capacitor
and OFF. And the other LED OFF and ON. 7. Jumper Wires
The duration of ON/ OFF depends on the
time cycle of the square wave.

5.15.3 Connection Diagram Fig 5.30 LED Blinking Circuit Diagram

> Take one jumper wire and insert the first pin of wire to the positive connector
and another pin of wire to the 1st connector of the 1kΩ Resistor. (Red Wire)
> Now take another jumper wire and insert the first pin of wire to the 2nd con-
nector of 1kΩ Resistor and another pin of wire to the 1st connector of the 470kΩ
Resistor. (Light Blue Wire)

112

05 Electronics STEM Wonders

> Take one jumper wire and insert the first pin of wire to the positive connector and

another pin of wire to the 1st connector of the 1kΩ Resistor. (Red Wire)

> Now take another jumper wire and insert

the first pin of wire to the 2nd connector of

1kΩ Resistor and another pin of wire to the

1st connector of the 470kΩ Resistor. (Light

Blue Wire)

> Take another wire and connect 1st pin of

wire with the 2nd connector of 1kΩ resistor

and 2nd pin of wire with the 7th connector Fig 5.30 LED Blinking Connection Diagram
(Discharge) of 555 Timer. (Blue Wire)

> Take another wire and connect 1st pin of wire with the 2nd connector of 470kΩ

resistor and 2nd pin of wire with the 2nd connector (+) of capacitor. (Green Wire)

> Take another wire and connect 1st pin of wire with the 2nd connector of 470kΩ

resistor and 2nd pin of wire with the 2nd connector (TRIG) of 555 Timer. (Gray

Wire)

> Now take another wire and connect 1st pin of wire with the 2nd connector of

220Ω resistor and 2nd pin of wire with the 3rd connector (OUT) of the 555 Timer.

(Golden Wire)

> Now take another wire and connect 1st pin of wire with the 1st connector of

220Ω resistor and 2nd pin of wire with the 1st connector (Anode) of the RED LED.

(Light Red Wire)

> Similarly take another wire and connect 1st pin of wire with the 2nd connector

(CATHODE) of RED LED and 2nd pin of wire with the Negative supply connector.

(Black Wire)

> Now take another wire and connect 1st pin of wire with the 2nd connector

(CATHODE) of Green LED and 2nd pin of wire with the 3rd connector (OUT) of the

555 Timer. (Yellow Wire)

> Now take another wire and connect 1st pin of wire with the 1st connector of an-

other 220Ω resistor and 2nd pin of wire with the 1st connector (Anode) of the

Green LED. (Off-White Wire)

> Similarly take another wire and connect 1st pin of wire with the 2nd connector of

220Ω resistor and 2nd pin of wire with the Negative supply connector. (Gray Wire)

> Now take another wire and connect 1st pin of wire with the 2nd connector (TRIG)

of 555 Timer and 2nd pin of wire with the 6th connector (THRESHOLD) of the 555

Timer. (Orange Wire) 113

05 Electronics STEM Wonders

> Similarly take another wire and connect 1st pin of wire with the 4th pin (RESET)
of 555 Timer and another pin of wire with the Negative Connector. (Green Wire)
> Finally take another wire and connect 1st pin of wire with the 1st connector of
Capacitor and 2nd pin of wire with the Negative supply connector. (Light Blue Wire)

End of Section - 05 ELECTRONICS

Choose the right one!

1) A resistor with color bands: red-red-red-gold, has the value:
a. 22k Ω 5%
b. 2k2Ω 5%
c. 220Ω 5%
d. 22Ω ohm 5%

2) Connecting a lead from the negative to the positive of a battery will produce:
a. A high resistance circuit
b. A short circuit
c. A low current path
d. An open circuit

3) ____ are universal gates
a. NOT
b. NAND & NOR
c. AND
d. NOT,AND & OR

4) ___ are basic gates
a. NOT
b. NAND
c. AND
d. NOT, AND & OR

114

End of Section - 05 ELECTRONICS

5) Based on which of the following component used in 555 timer, the IC 555 is
labeled?
a. Resistors
b. Capacitors
c. Crystals
d. All of the Above

Answer the following!

1) What are the advantages of resistors?

1) What are the advantages of resistors?

1) What are the advantages of resistors?

1) What are the advantages of resistors?

1) What are the advantages of resistors?

115

0 6S e ct i o n

Building A

Website

Students will learn :

1. Introduction to CSS
2. HTML – A brief Introduction
3. HTML v/s CSS
4. Types of CSS
5. Visual Studio Code
6. CSS Selectors
7. Colors
8. Fonts
9. Borders

06 Building A Website STEM Wonders

6.1 Introduction to CSS

6.1.1 What is CSS?

CSS – Cascading Style Sheets. CSS is used to add style to HTML Webpages. CSS can
style Webpages, including design, layout, and variations in display for different devices
like Desktop PC, Tablets, or Smart Phones. Using CSS, a Webpage or Website will appear
different on a PC and a Smart Phone. CSS can control Web Layouts of several Webpages
at once.
The main reason behind the invention of CSS was HTML. HMTL or HyperText Markup
Language don’t have tags for formatting a Webpage.

6.1.2 CSS Syntax Declaration Declaration

Selector

h1 {color: blue; font-size: 12px;}

Property Value Property Value

Let’s look for a sample CSS code. 6.2 HTML – A brief Introduction
p{
HTML is the abbreviation for HyperText Markup
color: red; Language. HMTL application includes creating and
text-align: center; structuring Webpages. HTML consists of different
} Elements; these elements display a webpage’s con-
tent over a web browser. Any online browser, such
as Google Chrome, Mozilla Firefox, or Safari, can
display HTML code. HTML is not a programming
language. HTML is the worldwide standard for Web
designing.
There are different versions for HTML like HTML3,
HTML4, HTML5, and many more. We will be prac-
ticing HTML5.
We have different HTML editing software, such
as Notepad, Notepad++, Adobe Dreamweaver, and
Visual Studio Code. These can also be used for
coding a CSS sheet.
We will follow Visual Studio Code in this book.

117

06 Building A Website STEM Wonders

6.2.1 Webpage Structure – HTML

A Webpage is divided into multiple elements. Some Webpages use all the elements, some
only use a limited number of elements.
Before looking at the basic Webpage Structure let us look at a simple HTML document.

<!DOCTYPE html> <h1>H1 Heading</h1>
<html> <p>Paragraph Tag.</p>

<head> </body>
<title>Page Title</title> </html>

</head>
<body>

Now let us see the Webpage structure.

<!DOCTYPE html>

<html>
<head>

</head>
<body>

CONTENT

</head>
</html>

118

06 Building A Website STEM Wonders

6.2.2 HTML Structure Tags

To write code for a Webpage there are different tags in HTML that are used. Every tag
has a different function. All tags start with “<”, and end with a “>”. Every tag has a
unique name. For example, <body> is the tag for defining the body of the Webpage.
Most of the tags have a starting as well as an ending tag. For example, to start the body
of a Webpage we use <body>, and to end the body we use the </body> tag. Everything
inside these tags will be considered as a body of the Webpage. Note that the ending tag
contains a “/” before the tag name.
How to use tags: <tag name>Content…</tag name>
For example, there are six different tags for headings from <h1> to <h6>. <h1> being the
biggest, <p> tag is to define a Paragraph, <img> is used to embed Images on Webpages,
and many more.

6.3 HTML v/s CSS

HTML CSS

HTML is a Markup Language. CSS is Style Sheet Language.
HTML is used to define the structure of
a Webpage. CSS is used for styling Web documents
HMTL has tags. Content is placed inside like Webpages.
these tags. CSS consists of selectors and
declaration blocks.
HTML has only one type. CSS has three different types.
1. Inline
HTML cannot be used inside a CSS 2. Internal
sheet. 3. External
CSS can be used inside an HTML
document.

6.4 Types of CSS

There are three different types of ways to insert a CSS sheet.
1. External CSS
2. Internal CSS
3. Inline CSS

119

06 Building A Website STEM Wonders

6.4.1 External CSS

This type or method includes a dedicated external file only for styling. This way we can
change an entire Webpage or Website just by changing a single file. The Webpage must
include the link for this external CSS file placed inside the <head> tag. It is good
practice to create a CSS sheet file in the same folder containing all the .html files.
Look for a sample code below to link CSS sheet in an HTML document.

<!DOCTYPE html>
<html>

<head>
<title>First Webpage</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>

</head>
<body>

<h1>The first heading.</h1>
<p>The first paragraph.</p>
</body>
</html>

Consider the following example of External CSS code.
body{

background-color: red;
}

h1{
color: blue;
margin: 10px;

}

p{
color: yellow;
margin: 5px;

}

6.4.3 Inline CSS
This type is used to apply style to a single
HTML element. To apply Inline CSS, add the
style attribute to the applicable
element. We can use all the CSS
properties in this method. See example
below.
<!DOCTYPE html>
<html>
<head>
<title>First Webpage</title>
</head>
<body style=”background-color: red;”>
<h1 style=”color: blue; margin: 10px;”>The first heading.</h1>
<p style=”color: yellow; margin: 5px;”>The first paragraph.</
p>
</body>
</html>

120

06 Building A Website STEM Wonders

6.4.3 Inline CSS <!DOCTYPE html>
<html>
This method includes the CSS styling
inside the HTML document. This type is <head>
usually used for a single HTML Webpage. <title>First Webpage</title>
Internal CSS is placed inside the <style> <style>
HTML tag. <style> tag is placed inside body{
the <head> tag. background-color: red;
Consider the following example for Inline }
CSS. h1{
color: blue;
6.5 Visual Studio Code margin: 10px;
}
p{
color: yellow;
margin: 5px;
}
</style>

</head>
<body>

<h1>The first heading.</h1>
<p>The first paragraph.</p>
</body>
</html>

Visual Studio Code is a code source-code editor
developed by Microsoft. It is commonly known as VS Code. We can use VS Code on
Windows, Linux, and macOS. VS Code is free software used by many professional coders
around the globe.

6.5.1 How to install Visual Studio Code

1. Search “visual studio code download” on “Google.com”. (Fig 6.1)
2. Click on the link shown in Fig 6.2.
3. Choose the Operating System you are currently using. We will follow Windows. Click
Windows. (Fig 6.3)
4. After the downloading is completed, double-click the file.
5. Software installation wizard will open. Select “I accept the agreement”, then click
Next. (Fig 64. )
6. On the Select Destination Location window, click Next. (Fig 6.5)
7. On the Select Start Menu Folder window click Next. (Fig 6.6)
8. On the Select Additional Tasks window, select “Create a desktop icon”, then click
Next. See Fig 6.7. Make sure “Add to PATH (require shell restart)” is selected.
9. On the Ready to Install window click Install. (Fig 6.8)
10. Now wait for the installation to be finished.
11. After the installation is finished. Click Finish. (Fig 6.10)

12. After clicking Finish, the software will launch. (Fig 6.11)

121

06 Building A Website STEM Wonders

Fig 6.1

Fig 6.2 Fig 64.
Fig 6.3

Fig 6.5 Fig 6.6

122

06 Building A Website STEM Wonders

Fig 6.7

Fig 6.8 Fig 6.10
Fig 6.9

123

06 Building A Website STEM Wonders

12. After clicking Finish, the software will launch. (Fig 6.11)

Fig 6.11

How to style a Webpage in Visual

1. Open VS Code and click Open Folder. Open the folder
which has all the HTML files. (Fig 6.12 - 6.14)

2. After opening the desired folder, click add New File. Now
type the file as “style.css”, then press Enter . (Fig 6.15)

Fig 6.12

Fig 6.14

Fig 6.15

3. After pressing Enter the file will open in the Fig 6.13
Editor Groups. Start styling your first Webpage. (Fig 6.16)

Fig 6.16

124

06 Building A Website STEM Wonders

6.6 CSS Selectors

There are different types of selectors available in CSS. We will be discussing a few of
them. Let us list all the types of selectors we will be discussing in this book.
1. Type Selector,
2. ID Selector,
3. Class Selector,
4. Universal Selector.

6.6.1 Type Selector

The Type Selector selects HTML elements based on the given element name. This Selec-
tor is also known as Element Selector.
Let’s consider the following scenario. Suppose on a given HTML Webpage we need to
style all the <p> tags. We need to center-align all the text inside the <p> tag and
change the color.

HTML Code CSS Code
p{
<!DOCTYPE html>
<html> text-align: center;
color: blue;
<head> }
<title>First Webpage</title>
<link rel=”stylesheet” type=”text/css”

href=”style.css”>
</head>
<body>
<p>The first paragraph.</p>
</body>

</html>

Let us now look at the output of the discussed code. (Fig 6.17)

Fig 6.17

All the paragraphs can be styled using the Element Selector. We can style any HTML tag
in this way.

125

06 Building A Website STEM Wonders

6.6.2 ID Selector

We can give a unique id to an HTML element. This id can be used by the ID Selector.
This selector selects an HTML element by using the id attribute of the given element. To
select an element with a unique id, type a hash (#) character before the id name.
Consider the following example.

HTML Code CSS Code

<!DOCTYPE html> #para1{
<html> text-align: left;
color: blue;
<head>
<title>First Webpage</title> }

<link rel=”stylesheet” type=”text/css” #para2{
href=”style.css”> text-align: center;
color: brown;
</head>
<body> }

<p id=”para1”>The first paragraph.</p>
<p id=”para2”>The second paragraph.<p>
</body>
</html>

For output see Fig 6.18.

Fig 6.18

6.6.3 Class Selector

Just like the ID attribute, we can give a class to any HTML element. An HTML element
can be selected by using the class by the Class Selector. To select an element by its
class, write a period “.” followed by the class name.

126

06 Building A Website STEM Wonders

Let’s do it!

Write down the difference between the ID and Class attribute of an HTML document.
Let us consider the following example of Class Selector.

HTML Code CSS Code

<!DOCTYPE html> .text{
<html> text-align: center;
color: blue;
<head>
<title>First Webpage</title> }
<link rel=”stylesheet” type=”text/css”

href=”style.css”>
</head>
<body>
<h1 class=”text”>First Heading!</h1>
<p class=”text”>The first paragraph.<p>
</body>

</html>

All elements with the class “text” are now center-aligned with a blue color. Let’s see the
output in Fig 6.19.
Note: We use more than one class for any HMTL tag.

Fig 6.19

6.6.4 Universal Selector

To select all the elements on an HTML Webpage Universal Selector is used. To use this
selector, type the wildcard character “*” before the CSS code. See the following
example below. See Fig 6.20 for output.

127

06 Building A Website STEM Wonders

HTML Code CSS Code

<!DOCTYPE html> *{ text-align: center;
<html>
<head>
<title>First Webpage</title> color: blue;
}
<link rel=”stylesheet” type=”text/css” href=”-
style.css”>
</head>
<body>
<h1 class=”text”>First Heading!</h1>
<p class=”text”>The first paragraph.<p>
</body>

</html>

Fig 6.20

6.7 Colors

Colors can be defined using pre-defined color names. There are 140 standard color names
in CSS. Colors can also be defined using RGB, HSL, HEX, RGBA, and HSLA values. We
will be using standard color names in this book. We can change the color of the text,
background, border, etc. Let’s look at the following example. For the output in Fig 6.21.

Fig 6.21

HTML Code CSS Code
h1{
<!DOCTYPE html>
<html> text-align: center;
color: red;
<head> background-color: azure;
<title>First Webpage</title> }
<link rel=”stylesheet” type=”text/css” p{
text-align: center;
href=”style.css”> color: gray;
</head> background-color: beige;
<body> }
<h1>The First Heading.</h1>
<p>The second paragraph.<p>
</body>

</html>
128

06 Building A Website STEM Wonders

6.7.1 Color Values

Following are the value of color in RGB, HSL, HEX, RGBA, and HSLA respectively. Values
are for the color in the box.

rgb(47, 82, 143)

hsl(219, 46%, 494. %)

#4472c4
rgba(47, 82, 143, 0.5)

hsla(219, 46%, 494. %, 0.5)

Note: RGBA and HSLA are used to change the transparency of the color. In the current
example, the color is 50% transparent.

Let’s do it!

Create a Webpage with a Heading and a Paragraph. Change the color and background
color for both elements. Use standard names, rgb, and hex values.

6.8 Fonts

Selecting the right font for your Webpage or Website is important! Let’s dive in and find
out how many fonts-related options we have in CSS.

6.8.1 Generic Font Family

129

06 Building A Website STEM Wonders

1. Serif Font Family Font Examples
2. Sans-serif
3. Monospace Serif

4. Cursive Sans-serif
5. Fantasy Monospace
CSS has a property to change the font of any
HTML element. The property name is font-fam-
ily. General practice is to first provide the font Cursive
you want, and end with a generic family. This Fantasy

practice is to avoid errors when the desired font
is not available. The browser will pick any font from the generic family. Let’s change the
font of a heading and a paragraph on a Webpage.

HTML Code CSS Code
<!DOCTYPE html> h1{
<html>
font family: Arial, Helvetica, sans-serif;;
<head> color: red;
<title>First Webpage</title> }
<link rel=”stylesheet” type=”text/css” p{
font family: ’Times New Roman’, Times,serif;
href=”style.css”> color: blue;
</head> }
<body>
<h1>The First Heading.</h1>
<p>The second paragraph.<p>
</body>

</html>
See Fig 6.22 to preview the output.

Fig 6.22

130

06 Building A Website STEM Wonders

6.8.2 Web Safe Fonts

These are the fonts that are installed universally on all Web browsers and devices. Let’s
see some best web-safe fonts.
• Arial (sans-serif) • Times New Roman (serif)
• Verdana (sans-serif) • Georgia (serif)
• Helvetica (sans-serif) • Garamond (serif)
• Tahoma (sans-serif) • Courier New (monospace)
• Trebuchet (sans-serif) • Brush Script MT (cursive)

6.8.3 Font Size

To change the font size font-size property is used. The size is fixed or relative. Relative
size changes depending on the device, screen size, or surrounding elements. It’s a good
practice to use relative size when using Webpage on different devices for better compat-
ibility. There are different units to measure font size.
• Pixel “px”
• Em (1em = 16px)
• Percentage
• Viewport Width “vw”
Note: Viewport Width is responsive to font size. The text size will change depending on
the size of the Web browser window. 1vw = 1% of the viewport width.

Let’s see an example that includes all four units of measure.

HTML Code CSS Code

<!DOCTYPE html> h1{
font-size: 30px;
<html> font-family: Arial, Helvetica, sans-serif;
<head> color: red;
<title>First Webpage</title> }
<link rel=”stylesheet” type=”text/css” #para1{
font-size: 1.5em;
href=”style.css”> font-family: ‘Times New Roman’, Times, serif;
</head> color: blue;
<body> }
<p id=”para1”>The first paragraph.</p> #para2{
<p id=”para2”>The second paragraph.<p>
<p id=”para3”>The third paragraph.<p>
</body> font-size: 150%;
font-family: ‘Times New Roman’, Times, serif;
</html> color: black;

}
#para3{
font-size: 2vw;
font-family: ‘Times New Roman’, Times, serif;
color: purple;

} 131

06 Building A Website STEM Wonders

The output is shown in Fig 6.23.

Fig 6.23

6.9 Borders

The border properties allow us to specify the style, width, and color of an element’s
border. There are different combinations and styles to set a border for any element. Let’s
consider the following example.

HTML Code CSS Code
<!DOCTYPE html> h1{
<html>
font-family: Arial, Helvetica, sans-serif;
<head> color: red;
<title>First Webpage</title> border-style: double;
<link rel=”stylesheet” type=”text/css” border-color: black;
border-width: 3px;
href=”style.css”> }
</head>
<body>
<h1>The First Heading.</h1>
</body>

</html>
See Fig 6.24 for output.

Fig 6.24

Let’s do it!

Create a Webpage and upload an image of your favorite personality. Create
and style a border around the image.

132

06 Building A Website STEM Wonders

6.9.1 Border Sides

We can style or edit individual sides of the border for any HTML element. In CSS, there
are also properties for specifying each of the borders (top, right, bottom, and left). Let’s
look at a sample code.

HTML Code CSS Code
<!DOCTYPE html> h1{
<html>
border-top-style: dotted;
<head> border-right-style: solid;
<title>First Webpage</title> border-bottom-style: dotted;
<link rel=”stylesheet” type=”text/css” border-left-style: solid;
}
href=”style.css”>
</head>
<body>
<h1>The First Heading.</h1>
</body>

</html>

See Fig 6.24 for output.

Fig 6.25

133

End of Section - 01 MS Access

Choose the right one!

1. If you want to define the style for a unique element, then which CSS selector will
you use?
a. ID.
b. Text.
c. Class.
d. Name.
2. ___________ selects the HTML element by name.
a. Element Selector.
b. Class Selector.
c. Universal Selector.
d. Group Selector.
3. The CSS property used to control the element’s font size is _______.
a. text-style.
b. text-size.
c. font-size.
d. None of the above.
4. In CSS, styling elements can be done by?
a. Id.
b. Class.
c. Tag.

d. All of the aAbonve.swer the following!

1. Describe what is CSS and its syntax?

134

06 Building A Website STEM Wonders

2. Write the difference between HTML and CSS?

HTML Code CSS Code

3. Write down the types of CSS? Also, provide examples for each type.

135

06 Building A Website STEM Wonders

4. What is the usage of a Class selector? Also, provide an example.

5. Describe how you can change the color using different values? Also, describe
how to change the transparency of the color?

136

06 Building A Website STEM Wonders

Project!

Create a Webpage on your favorite sport. Include content such as
facts, history, images, events, etc. Also, write about your favorite
player. Furthermore, style your Webpage so that it looks appealing.

137

0 7S e ct i o n PYTHON

Introduction

To Python

Students will learn :

1. What is Programming?
2. How to write programs?
3. What is a programming language?
4. Introduction to Python
5. Algorithm
6. Flowchart
7. More Python!
8. User input
9. How to design a program

Introduction To Python STEM Wonders

7.1 What is Programming?

You are now familiar with the computer hardware and software, i.e., the electronic
components and the program that allows the electronics to function. Now let us see what
is a computer program.
A computer program is a set of instructions or commands stored as a file on the
computer’s storage. The computer reads this set of instructions whenever the program
file is executed. The computer then performs the tasks or carries out the commands in
the program.

7.2 How to write programs?

The computer only understands 0s and 1s – the
language of computers. It is impossible to write
programs in this language, therefore, programmers Do You Know?

write programs in different programming languages,
such as C++, JavaScript, Python, and many more.
Later using different tools these programs are
converted into the computer language of 0s and 1s.

Programmer - A person that writes codes
in different programming languages.

7.3 What is a programming language?

A programming language is the computer
language used by programmers and developers to
write and develop different programs and
software. A programming language uses words from
the English language. Every programming language has
its syntax, rules, and structure. You will be learning
Python in this chapter.

139

Introduction To Python STEM Wonders

C++ JavaScript

#include <iostream> document.write (‘Hello, World!’);
int main() {
std::cout << “Hello World!”; Python
return 0;
} print(‘Hello, World!’);

7.4 Introduction to Python

Python is one of the most popular programming languages. It was
created by Guido van Rossum in the year 1991. It was designed with
code readability in mind. Python’s syntax allows programmers to
describe their ideas in fewer lines of code.
Python is a programming language that enables you to work faster and
more efficiently with computers.
There are two versions of Python – Python2 and Python3. Both the
versions are
different from each other. You will be learning Python3 in this chapter.

7.4.1 Features of Python

> Python is a cross-platform programming language, i.e., it can work on Windows, Linux,
macOS, Raspberry Pi, etc.
> Python has a very simple syntax as compared to other programming languages. The
syntax is very similar to the English language.
> Python is a free and open-source programming language even for commercial
purposes.’
> Python is an interpreter language – its code is executed line-by-line instead of
compiling the whole code first.
> Portable – The same code of Python can run on different machines. A Python code
written on a Windows platform can run on macOS without any changes.

140

Introduction To Python STEM Wonders

7.4.2 Environment Setting

There are different environments available for python, the most popular ones are Py-
Charm, Jupyter Notebook, Spyder, and many more. You can either install one of these
environments or use VS Code. In this chapter, you will use PyCharm. To install PyCharm
follow the steps.

1. Go to Google.com and search “PyCharm download”. (Fig 7.1)
2. Click on the link shown in Fig 7.2.
3. Choose your platform and then click free
“Download”. (Fig 7.3) Fig 7.1

Fig 7.2

Fig 7.3 Fig 74.

4. Now choose where to save the download file and wait for it to download.
5. Click on the downloaded file. (Fig 74. )
6. On the installation window click “next”. (Fig 7.5)
7. Select the installation folder and then click “next” (Fig 7.6)

Fig 7.6 Fig 7.5
Fig 7.7
8. Select all options in Fig 7.7, then click “next”.
9. Now click “Install”. (Fig 7.8)
10. Now wait for the installation to finish.
11. Select “I want to manually reboot later”, then click
“Finish”. (Fig 7.9)

Fig 7.9 Fig 7.8

141

Introduction To Python STEM Wonders

12. Now save your work and reboot the computer. The PyCharm icon will appear on the
desktop. Double-click the icon to launch the software.
13. Accept the agreement after the launch.
14. To start coding, create a new project.
(Fig 7.10)
15. Select where you want to save the project. Also,
rename the project. (Fig 7.11)
Fig 7.10

16. Click “Create”. Fig 7.10

17. Erase everything in “main.py” and start coding.
18. To run the code, right-click and select “Run ‘main’”
or you can press Ctrl+Shift+F10. (Fig 7.11). The output
will be shown below in the terminal window.
19. To run Python code, you must first download and
install Python.
20. Go to Google.com and search Fig 7.11

“Python download”. (Fig 7.12)
21. Click the link shown in Fig 7.13.
22. Select your platform and click “Download Python 3.10.5”. (Fig 7.14) Fig 7.12

23. Choose the download location and wait for
the file to download.
24. Click the downloaded file. (Fig 7.15)
25. Select “Add Python 3.10 to PATH”. Then
click “Install Now”. (Fig 7.16) Fig 7.13

26. Wait for the installation to finish and then click “Close”.

Fig 7.14

Fig 7.15

Fig 7.16

142

Introduction To Python STEM Wonders

7.4.3 Syntax

Let us look at the basic Python syntax.

> Python uses indentation (tab space) to identify blocks of code.
if 3 > 2:

print(“Three is greater than two!”)

> Python will give an error if there is no indentation.
if 3 > 2:

print(“Three is greater than two!”)

> The number of spaces is up to you.
if 3 > 2:
print(“Three is greater than two!”)
if 3 > 2:

print(“Three is greater than two!”)

> You have to use the same number of spaces in the same block of code.
if 3 > 2:
print(“There is greater than two!”)

print(“Five is greater than two!”)

7.4.4 Variables and Datatypes

Unlike other programming languages, Python does not have a command for declaring
variables. A variable will be created as soon as you assign a value to it.
 

Code Output

a=1 1
b = ‘TechTree’ TechTree
print(a)
print(b)

In the above example variable, “a” has a value of 1, whereas, “b” has a value of “TechTree”.
Note: Variable a has a number as the value, whereas, b has a string value. To print these
values simply pass the variables in the print () function.

143

Introduction To Python STEM Wonders

Following are the data types available in Python3.

Data Type Key wo rd

Text Type: str
Numeric Types:
Sequence Types: int, float, complex
Mapping Type:
Set Types: list, tuple, range
Boolean Type: Mapping Type:
Binary Types: dict
None Type: bool

bytes, bytearray, memoryview

None Type

The most commonly used data types are str, int, and float. To declare int just assign a
number value to a variable. int will hold only whole numbers. To declare a float value, assign
a decimal number to a variable. A string is simply a collection of characters or letters, to
assign a string simply type the sentence in single or double inverted commas (‘ ’ or “ “).

7.4.4 Operators

Arithmetic Operator

To perform the mathematical operations an Arithmetic Operator is used. There are sev-
eral Arithmetic Operators in Python. Let’s have a look at all the Arithmetic Operators
available.
Operator Name E xa m p l e

+ Addition x+y

- Subtraction x - y

* Multiplication x * y

/ Division x/y

% Modulus x%y

** Exponentiation x ** 2

** Floor Division x // y

The first four operators are the most commonly used. Let’s see some examples of these
operators.

144

Introduction To Python STEM Wonders

Code Output

a=1 3
b=2 8
c=a+b 15
print(c)
5.0
a = 10
b=2
c=a-b
print(c)
a=5
b=3
c=a*b
print(c)
a = 10
b=2
c=a/b
print(c)

Note: when you divide two integers the answer will be a float.

Let’s do it!

Enter the marks of English, Mathematics, and Science. Find the total and the percentage.

Assignment Operators
These operators are used to assign values to variables. Let’s have a look at some common
assignment operators.

Operator Name E xa m p l e

= x=5 x=5
+= x+=5 x = x+5
-= x-=5 x = x-5
*= x*=5 x = x*5

/= x/=5 x = x/5
%= x%=5 x = x%5

Let’s consider the following example of the assignment operator.

145

Introduction To Python STEM Wonders

Code Output

a=2 4
a=a+2 4
print(a)
b=2
b += 2

Note: “a = a +2” and “b +=2” have the same output.

Comparison Operator
Comparison operators are used when we need to compare two or more values. Let’s learn
some commonly used comparison operators.

Operator Name E xa m p l e

== Equal x == y
!= Not equal x != y
> Greater than x>y
< Less than x<y
>= Greater than and equal to x >= y
x <= y
<= Less than and equal to

Let’s consider the following example.

Code Output

a=2 True
b=4 False
c=a>b
d=a<b
print(c)
print(d)

Note: When the comparison statement is correct the output will be true, otherwise it will
be false.

Let’s do it!

1. Create a variable and assign a value to it. Then add 500 using the assignment operator.
2. Print the table of two using the assignment operators.
3. Enter the marks of three students, and find out who scored the highest using the
comparison operator.

146