ICSE_Tekie_G6_Coding_AY24_Final by Uolo

About the Book This coding book is supplementary to the main “Mel n Conji” content book. This book represents a 21st-century approach to learning coding concepts and developing computational thinking and problem-solving skills. To prepare students for the digital age, the curriculum is interwoven with well-thought-out concept graduation with real-life examples and practice problems.

Special Features • Illustrative approach: Concepts in coding and computer science are delivered through pictorial representations and learner-friendly approaches. • Learning through real-life examples: Age-appropriate examples that enable learners to relate to the concept and learn about the unknown from the known. • Extensive practice: Multiple practice scenarios to reinforce learnings. • Coding challenges: Includes projects through which learners can demonstrate their learning outcomes in coding and computer science.

About Uolo Uolo partners with K-12 schools to bring technology-based learning programs. We believe pedagogy and technology must come together to deliver scalable learning experiences that generate measurable outcomes. Uolo is trusted by over 10,000 schools across India, South East Asia, and the Middle East.

Singapore

Gurugram

CS_CB_Coding_ICSE_Grade6_Cover.indd All Pages

Bengaluru

hello@uolo.com �199

NEP 2020 based

ICSE compliant

Technology powered

06/12/23 7:15 PM

ICSE Computer Science

Computer Science

Scratch 3.0 III Web Development I

ICSE_6.indb 1

12/5/2023 4:25:15 PM

ICSE_6.indb 2

12/5/2023 4:25:15 PM

Contents Scratch 3.0 1

Introduction to Scratch 3.0

Coding

Scratch 3.0

Starting Scratch 3.0 Adding a Sprite

Duplicating a Sprite Adding Backdrops

2 Control and Sensing Blocks

Understanding Control and Sensing Blocks Control Blocks

Sensing Blocks 3 Using Variable and Mathematical Blocks in Scratch

Variable and Mathematical Blocks 4 Using Comparison Blocks and Random Blocks in Scratch

Comparison Blocks Random Block

Web Development 5 Introduction to HTML

HTML

Web Browsers

Basic Structure of an HTML Document Structure of an HTML Document Basic Terminologies in HTML Types of Tags

iii

ICSE_6.indb 3

iii

12/5/2023 4:25:15 PM

6 Creating a Web Page

Structure of an HTML Document Creating an HTML Document

Basic HTML Coding Conventions More HTML Tags

7 Cascading Style Sheets

Introduction to CSS

CSS Colour Properties CSS Font Properties

CSS Border Property

ICSE_6.indb 4

12/5/2023 4:25:15 PM

Introduction to Scratch 3.0

1 Coding

Coding is the process of creating sets of instructions that a computer can understand and execute. Coding is a way to tell a computer what to do. Coding involves writing specific commands in a programming language to tell a computer how to perform tasks, solve problems, or run applications. Coding is used to develop software, websites, mobile apps, and other digital technologies.

Did You Know? Computer programmers sometimes use secret codes to leave messages for each other. It is like having a secret club! They call it ‘Easter eggs’.

Block-based Coding Block-based coding makes it easier for kids to learn to program because it is like putting together a fun and colourful jigsaw puzzle! Instead of typing complicated words and numbers, you use colourful blocks with pictures on them to create programs. Each block represents a different action or command, and you snap the blocks together like puzzle pieces to make the computer do what you want. Scratch, Tynker, and LightBot are a few examples of block-based coding languages that help us learn and practice our coding skills.

Discuss Do you and your friends have a secret language that you people talk in? or Codes? Why did you make it and how do you use it?

ICSE_6.indb 1

12/5/2023 4:25:16 PM

Do It Yourself 1A Fill in the blanks. 1 Coding is used to develop 2 In

and other digital technologies.

, you use colourful blocks with pictures on them to create programs.

3 Scratch is an example of a

coding language.

Scratch 3.0 Scratch 3.0 is an application program that lets you create your own games, stories, and animations. It is a free platform where you can show your creative skills.

You can make characters move, jump, and talk, and you can even make your own interactive stories or games. Scratch 3.0 is all about using your creativity and imagination to make programs on a computer, and the best part is that you can share your creations with your friends and see what they make too! Creating a story-based Scratch project for solving mathematical expressions is an easy way to learn Scratch 3.0.

Project: Creating Robo Calculator • Use Scratch’s block-based coding to create interactive math challenges. • Incorporate sprites and backgrounds to represent characters and settings in the story. • Use variables to keep track of the Robo Calculator’s progress and scores. • Create interactive maths expression solvers where Robo Calculator can input his answers. 2

ICSE_6.indb 2

12/5/2023 4:25:16 PM

Did You Know? Scratch was originally developed by the Lifelong Kindergarten Group at the MIT Media Lab to help kids learn to code in a fun and creative way.

Think and Tell What are the other platforms you know of that assist in block-based coding?

Starting Scratch 3.0 Here are the steps to get started with Scratch: 1

Open a web browser like Google Chrome or Microsoft Edge.

2 Go to the Scratch website by typing www.scratch.mit.edu in the address bar and then pressing Enter. 3 Click the Start Creating button on the Scratch website to begin creating your projects.

The Scratch interface appears.

Chapter 1 • Introduction to Scratch 3.0

ICSE_6.indb 3

12/5/2023 4:25:16 PM

Components of Scratch 9 10 1 2 6 7

1 Menu and Title Bar: Here, you will discover menu options for project management and Scratch environment control.

Settings

It provides options for Language and Colour Mode settings.

File

It has options like New, Load from your computer, and Save to your computer.

Edit

In the Edit icon, you can enable Turbo Mode, which significantly speeds up the execution of your Scratch project, making your code run faster, which is useful for complex or timesensitive scripts.

Tabs: Used for switching between Code, Costume, and Sounds, with stage resizing icons.

3 Block Panel: Contains various categories of coding blocks like Motion, Looks, Sound, etc. for controlling sprite actions, colour-coded for ease. 4 Block Palette: Offers diverse coding blocks; drag and drop to create scripts and bring ideas to life in Scratch. 5 Coding Area: Where you assemble coding blocks to create scripts and make your sprites perform actions. It is also known as the script area. 6

Stage: The area where sprites interact and display the results of your code.

7 Sprite: Characters or objects in your project that you can program to move, talk, and interact. 8 Backdrop: Various backgrounds for the stage to set the project’s setting, customisable and importable.

ICSE_6.indb 4

12/5/2023 4:25:16 PM

Go Button: The green flag button runs your project, bringing your code to life.

Stop Button: The red circle button stops or pauses your project when it is running.

11 Sprites Pane: Located under the stage, it contains details about sprites, including name, size, and location. Here, you can edit, upload, or change sprites.

Do It Yourself 1B Match the following. A

B Sprites Pane

Coding Area

Sprite

Block Panel

Go Button

Adding a Sprite The main character that performs all the action in your project is known as a Sprite. The default sprite in Scratch is a Cat. You can change or add more sprites to your project per your choice. Before adding a new sprite you can delete the existing sprite by clicking on delete button in the sprites pane. Follow the given steps to add a sprite in your project: 1

Click on the Choose a Sprite button.

Chapter 1 • Introduction to Scratch 3.0

ICSE_6.indb 5

12/5/2023 4:25:16 PM

Select Choose a Sprite. Upload Sprite Surprise Paint Choose a Sprite Choose a Sprite button.

3 The Choose a Sprite dialog box appears. Click on the desired sprite. The sprite appears on the stage.

If you want to draw your own sprite or upload an already drawn sprite, Scratch provides Paint and Upload Sprite options to do so. In our case, we have selected the Robot sprite.

Changing Costume Changing costumes allows you to give your sprite a different look, steps for changing costumes in Scratch are: 1

Click on the sprite you want to change the costume for in the Sprites pane.

Click on the Costumes tab.

ICSE_6.indb 6

12/5/2023 4:25:17 PM

3 You will see the following screen. Choose from the available costumes on the left to change the costume.

You can also paint a new costume to draw your own sprite.

Animating a Sprite Now, to animate your sprite in Scratch: 1

Click on the Events category.

Drag the when clicked block.

Click on the Looks category.

Chapter 1 • Introduction to Scratch 3.0

ICSE_6.indb 7

12/5/2023 4:25:17 PM

Drag the next costume block and snap it below the when clicked block.

5 Click on the green button. The sprite changes its costume on every click.

Think and Tell While you design your costume for your sprite, in your opinion, what colours look the best on your sprite?

Do It Yourself 1C Fill in the blanks. 1

is the main character that performs all the tasks in your project.

To make our sprite change its costume, we drag the

To see a library full of various characters and pictures, we must click

In order to change a costume, we first must choose a

The

and

block from the Looks category. . .

blocks are used to animate the costume change of a sprite.

ICSE_6.indb 8

12/5/2023 4:25:17 PM

Duplicating a Costume You can make your sprite wear the same costume twice. To duplicate a costume in Scratch for a sprite, follow the given steps: 1 Click on the sprite you want to duplicate a costume for in the Sprites pane. 2

Click the Costumes tab.

Click the costume to select it.

4 Right-click the selected costume. A context menu appears. 5 In this menu, click duplicate, and a copy of the costume is created. Scratch gives the duplicated costume with the same name as the sprite along with the suffix 2, 3, or so on. For example, we have duplicated robot-b and so, the duplicated costume’s name will be robot-b2. You can switch between costumes using the switch costume to block. You need to specify the names of the costume in this block.

Do It Yourself 1D Explain the functions of the blocks. 1

Chapter 1 • Introduction to Scratch 3.0

ICSE_6.indb 9

12/5/2023 4:25:18 PM

Duplicating a Sprite Steps to duplicate a sprite in Scratch are as follows: 1

In the Sprites pane, click the sprite you want to duplicate.

Right-click the sprite, which opens a menu.

Select the duplicate option to create a copy of the selected sprite.

4 The duplicated sprite will appear with the same name as the sprite along with the suffix 2, 3, or so on. For example, on duplicating the Robot sprite, the name will be Robot2, Robot3, and so on. To duplicate a sprite using code: 1

Drag the when clicked block from the Events category.

Click the Control category.

Drag the create clone of myself block in the script area.

4 Click on the green button. The duplicated sprite will overlap the existing sprite. You can change the location by dragging the sprite.

ICSE_6.indb 10

12/5/2023 4:25:18 PM

Adding Backdrops You can add backgrounds, also known as backdrops, to your project to create various settings or scenes for your sprites to interact with. Here’s how you can add a background: 1

Click on the Choose a Backdrop button in the bottom right corner of the interface.

Select Choose a Backdrop.

Upload Backdrop Surprise Paint 2 1 3 The Choose a Backdrop dialog box opens. You can scroll through the library to find a backdrop you like.

Chapter 1 • Introduction to Scratch 3.0

ICSE_6.indb 11

12/5/2023 4:25:19 PM

lick the backdrop you want to use from the library. The selected backdrop C replaces the current backdrop on the stage.

5 If you have a custom backdrop you want to use, click the Upload Backdrop option to import your image as a backdrop. 6 You can also customise and edit backdrops. Click a backdrop in the library to select it, and then use the backdrop editing tools to make changes, add details, or draw your own background.

Backdrop Editing Tools

Changing Backdrops If you want to change the background while your project is running, you can use special code blocks to do it. 1

Drag the when clicked block from the Events category.

2 Drag the next backdrop from the Looks category and snap it below the when clicked block.

ICSE_6.indb 12

12/5/2023 4:25:19 PM

Chapter Checkup A

Fill in the Blanks. backdrops library

Hints

stop sign

To duplicate your costume, you must select your 1 2

sprites pane

sprite

In case you want to add more backdrops, you will get them from the

uses colourful blocks with pictures on them to create programs.

is represented as a red circle that allows you to stop or pause your project if it is running.

is under the stage; it has all details about the sprite.

Who Am I? 1

Scratch

I’m also known as programming; I give instructions to the computer that it

executes.

I’m the area in the Scratch window that contains various categories of blocks.

I’m a category of blocks that contains the when clicked block.

I’m free software that allows you to design your own digital world.

I’m the area in the Scratch window where you can code.

Explain the Function of the Icon. 1

Chapter 1 • Introduction to Scratch 3.0

ICSE_6.indb 13

12/5/2023 4:25:20 PM

Write T for True and F for False. 1

The block panel is where you can find a wide range of coding blocks to use in your scripts.

To change a costume, first go to the Code tab.

You just need to click the Paint option to create your own backdrop.

You can assemble and connect the coding blocks to create scripts in the coding area.

You cannot customise a sprite according to your choice.

Answer the Following. 1

What is Scratch 3.0?

What is the Sprite Pane?

Which option is used to add a sprite to a project?

ICSE_6.indb 14

12/5/2023 4:25:20 PM

What is the Coding area?

Write the steps to duplicate a costume in Scratch 3.0?

Apply Your Learning. 1

Draw a panda in the Scratch paint editor and use it as a sprite. Also, assign a suitable name to your sprite.

Shreya wants to add her school’s playground photo as the background in a Scratch project. Help her upload the

background by writing the steps.

Meenal has made an amazing design in Scratch but doesn’t know how to duplicate a costume. What should she

do?

Tanu is making a project in Scratch for her school’s annual day function in which she needs to add the same

sprite five times. How can she do this?

Seema has created a project in Scratch for the birthday of her son in which she wants to display some photos

one by one as the background. Which two blocks should she use to do so?

Chapter 1 • Introduction to Scratch 3.0

ICSE_6.indb 15

12/5/2023 4:25:20 PM

Control and Sensing Blocks

Understanding Control and Sensing Blocks Scratch is an event-driven programming language. This means that actions are triggered by events, such as clicking a sprite or pressing a key, making it easy to create interactive animations and games. In this chapter, we are diving into the exciting world of Scratch, a special computer language that helps us think and solve puzzles. We will understand how to use control and sensing blocks.

Project: Using Ask and Answer Block The Robo Calculator asks a simple question on the stage and waits for the response given by the user. If the user gives the correct answer, Robo Calculator provides positive feedback; otherwise, it provides encouragement to try again.

Did You Know? Scratch is free to use and open source, making it accessible to anyone with an internet connection. This encourages

Project Setup

inclusivity and learning for all.

Open Scratch and then continue with your project. In the previous chapter, we had set up the ‘Robo’ sprite and the backdrop to ‘Xy-grid-30px’, as shown in the figure below:

ICSE0602.indd 16

12/6/2023 4:25:06 PM

Control Blocks The blocks from the Control category are also called conditional blocks. They allow a program to perform a test based on a given condition and then take actions based on the result of that test. Let us see the usage of some of the blocks from the Control category, as explained in the table below: if-then

This block is used to check the given condition. If the condition is true, the blocks inside the if-then block are executed; if it is false, the blocks are not executed.

if-then-else

This block is an extension of the if-then block. If the given condition is true, then the blocks inside the if-then section are executed. If the condition is false, then the blocks inside the else part are executed.

repeat

The repeat block in the Control category repeats all the blocks inside it the number of times specified in the repeat block.

forever

The forever block repeats the actions forever, never stopping until you click the red Stop button on the screen to end your program.

repeat until

The repeat until block repeats the actions specified by the blocks inside it until a given condition is true. When the condition becomes false, the loop execution stops.

wait

This block is used to wait for n number of seconds, where n is any integer.

wait until

The wait until block pauses the script until the specified condition is true.

stop all

This block stops all the running scripts.

Did You Know?

Scratch can be used on various platforms, including web browsers, Windows, macOS, and Linux, making it versatile and widely compatible.

Chapter 2 • Control and Sensing Blocks

ICSE_6.indb 17

12/5/2023 4:25:21 PM

Do It Yourself 2A Fill in the blanks. 1

In Scratch programming, the if-then block is used for making decisions based on a

2 To create a loop that repeats an action a certain number of times, you can use the

. block.

Sensing Blocks The Sensing blocks are used to sense conditions in the environment, such as the background colour or the sprite touching status. For example, you can use the touching color block to check if a sprite is touching a specific colour on the stage. These blocks are cyan in colour and are used to detect various factors in a project. In Scratch, there are several categories of Sensing blocks that allow you to gather information about the environment and user input. Let us look at the usage of some of the Sensing blocks in the following table: touching color ?

Determines if a sprite is touching a specific colour on the stage.

touching

Checks if a sprite is currently touching another sprite or a colour.

ask and wait

Displays a message or a question for the user and waits for their input.

answer

Retrieves the response given by the user to a previous ask and wait block.

key pressed?

Determines if a specific key on the keyboard is currently being pressed.

reset timer

Resets the timer to zero, which can be used to measure the elapsed time.

timer

Provides the time in seconds since the project started or since the reset timer block was used.

Working of the Project The Robo Calculator asks some questions through the ask and wait block. It then checks the answer given by the user through the answer block and then the answer is displayed. Follow the given steps and create a script to make the Robo Calculator check whether the answer to the question is correct. These steps can be performed using Control blocks in Scratch. 1

Drag this when clicked block from the Events category to the Coding area.

ICSE_6.indb 18

12/5/2023 4:25:21 PM

2 Add the ask and wait block from the Sensing category below the when clicked block to ask the question, as shown below.

3 Now, type the question you want to ask inside the ask and wait block. After that, drag the if… then… else block from the Control category to decide whether the response given by the user is correct or not.

Replace “Hello” with “Addition of 23 + 50 is ?” for the answer.

4 Drag the equal to comparison block from the Operators category to the condition area of the if… then… else block.

Chapter 2 • Control and Sensing Blocks

ICSE_6.indb 19

12/5/2023 4:25:21 PM

5 Drag the answer block from the Sensing category to the left box of the equal to block.

6 Click the green flag button to test the script. When you click the green flag button, the Robo sprite asks the question and then waits for the answer from the user, as shown in the figure below.

7 Click the Looks category and then drag the say for 2 seconds block for the true condition of the if... then... else block, as shown in the figure below.

ICSE_6.indb 20

12/5/2023 4:25:21 PM

8 This step helps ensure that the Robo Calculator displays the result when it provides the correct answer, as shown in the figure below:

Showing the answer when condition is true.

9 Click the green flag button and check whether the script is working perfectly or not, as shown in the figure below.

10 Now, Add one more say for 2 seconds block from the Looks category for the false condition under the else part, as shown in the figure below.

Showing the answer when condition is false.

Chapter 2 • Control and Sensing Blocks

ICSE_6.indb 21

12/5/2023 4:25:22 PM

Run the script and verify the conditions for the asked question.

12 If you want to repeat the process multiple times, you can use Control blocks to create loops, as per the requirement. It also requires some variables to store values and make the game dynamic. A sample code for the same is shown in the figure below:

For repetition of the same process multiple times, use the “repeat” block.

ICSE_6.indb 22

12/5/2023 4:25:23 PM

Do It Yourself 2B Look at the following code and fill in the blanks.

1 In the above Scratch code, the wait () seconds block is a part of the

category, and it allows the program

2 The say (Hello!) for (1) seconds block in the Looks category displays a

that includes the word ‘Hello’.

Coding Challenge Create a game in Scratch with the name ‘Colour Match’. Objective: The player must click a sprite that matches a specific colour. Instructions: 1

Create two sprites: a ‘Colour Matcher’ sprite and a ‘Colour Target’ sprite.

Create a script for the ‘Colour Matcher’ sprite to change its costume to a random colour when clicked using a

3 4

Sensing block.

Create a script for the ‘Colour Target’ sprite to change its costume to a specific colour using a Sensing block. Use Conditional blocks to check if the ‘Colour Matcher’ sprite costume matches the ‘Colour Target’ sprite

costume.

If they match, display a message saying ‘You Win!’, using a say block.

If they do not match, display a message saying ‘Try Again’, using a say block.

Allow the player to click the ‘Colour Matcher’ sprite again to start a new round with a new random colour.

Chapter 2 • Control and Sensing Blocks

ICSE_6.indb 23

12/5/2023 4:25:23 PM

Chapter Checkup A

Fill in the Blanks. user’s response

Hints

decisions

Control blocks in Scratch are primarily used to make

T he

When using a wait until <condition> block, the program will

The if-then block is used to specify which action is taken if a certain

condition

pause

sensing

in your program.

blocks allow you to check how a sprite is interacting with the stage or other sprites. until the specified condition is true. is met.

The ask () and wait block is a combination of a sensing block and a stack block. The ask () and wait block first asks

a question to the user and then waits for the

Tick () the Correct Option. 1

Which blocks in Scratch are used for making decisions in your program? a

Which sensing block in Scratch is used to check if a sprite is touching a specific colour? a

What is the purpose of the if-else block in Scratch? a It is used to create loops.

b It is used to repeat actions.

c It is used to make decisions based

d It is used to change the background.

on a condition. 4 Which block in Scratch is used to wait for a certain condition to be met before continuing with the program? a

ICSE_6.indb 24

12/5/2023 4:25:23 PM

5 In Scratch, how do you check if a sprite is touching the edge of the stage? a Use the edge detection block.

b Use the touching edge block.

c Use the edge sensing block.

d Use the stage edge block.

Who Am I? 1 I’m a block in Scratch that allows you to ask a question to the user and then wait for their response before proceeding with the program.

2 I’m used in Scratch to check if a specific condition is true or false and then make decisions based on the result. 3 I’m a block in Scratch that waits for a certain period of time before allowing the program to continue. 4 I’m a block in Scratch used to check if a sprite is touching a specific colour or object. 5 I’m a type of block in Scratch that helps you create loops and repeat actions. D

Write T for True and F for False. 1 A condition is applied to put a check on a problem. 2 You cannot perform mathematical operations in Scratch. 3 Sensing blocks in Scratch are used to detect conditions associated with sprites and the stage. 4 The ask and wait block in Scratch allows you to ask a question on the screen and stores the keyboard input in the answer block.

5 The control blocks allow you to execute various sets of codes based on whether a specified

condition is true or false, while the sensing blocks are used to detect and respond to changes.

Answer the Following. 1

What is the purpose of Control (Conditional) blocks in Scratch?

Chapter 2 • Control and Sensing Blocks

ICSE_6.indb 25

12/5/2023 4:25:23 PM

2 How do Sensing blocks in Scratch help you detect user interactions? Name two Sensing blocks commonly used in Scratch projects.

3 Explain the difference between the if and if-else Control blocks in Scratch. 4 How can you use Sensing blocks to create interactive games in Scratch? 5 What is the role of the ask and wait block in the Sensing category? F

Apply Your Learning. 1 Create a Scratch project where a character moves left when the ‘A’ key is pressed and right when the ‘D’ key is pressed. Which Sensing block should you use, and how will you implement this?

2 In a Scratch game, you want to make an enemy sprite disappear when your player sprite touches it. Describe the Conditional blocks and logic you would use to achieve this.

ICSE_6.indb 26

12/5/2023 4:25:24 PM

3 Build a simple quiz game in Scratch where the program asks a question using the ‘ask and wait’ block and responds differently based on whether the user’s answer is correct or not.

4 Create an animation in Scratch in which a sprite changes its costume when the mouse pointer is hovering over it. Which Sensing and Control blocks would you use for this task?

5 Design a Scratch project that simulates a traffic light with three different colours (red, yellow, and green) using Control blocks. How would you make the lights change automatically with appropriate timing?

Chapter 2 • Control and Sensing Blocks

ICSE_6.indb 27

12/5/2023 4:25:24 PM

Using Variable and Mathematical Blocks in Scratch

Variable and Mathematical Blocks Scratch is a free block-based programming language developed by Massachusetts Institute of Technology (MIT). This language allows you to create interactive stories, animations, games, music, and art, and share your creations on the web. In the previous chapter, you have learnt about various conditional and sensing blocks. Let us learn about variables and mathematical blocks in this chapter. Project: Solving Maths Puzzles Robo Calculator must solve various mathematical expressions, including addition, subtraction, multiplication, and division to progress in the story.

Variable Blocks

Robo Calculator

Computers cannot assign themselves a value like we do, but we can code them to store a value using Variable blocks. Variable blocks are the blocks that help a computer to store a value that can be changed throughout a project. Variables can be used to store numbers and text. In Scratch, a variable can contain two types of values: numeric and textual or string. Numeric Variable

It is used to store numbers.

Did You Know? String Variable

It is used to store text.

The first ever Scratch project is ‘Weekend’.

Adding a Variable To make Robo Calculator add a variable, we can just add the variable block. Steps to make Robo Calculator add a variable are: 1

Open Scratch.

ICSE_6.indb 28

12/5/2023 4:25:24 PM

2 Drag the when clicked block from the Events category to the script area. 3 Drag the ask and wait block from the Sensing category below the when clicked block. 4 Set the text in the ask and wait block to ‘What is the first number?’. 5

Select the Variables category.

Click the Make a Variable button.

The New Variable dialog box appears. Assign a name to the new variable.

Click OK. The variable is added to the list.

Now, we know how to add a variable, so let us explore how to set a variable value.

Setting Variable Value To make Robo Calculator set a variable value, we can just add the set variable to 0 block. To make Robo Calculator set a variable value:

Chapter 3 • Using Variable and Mathematical Blocks in Scratch

ICSE_6.indb 29

12/5/2023 4:25:24 PM

Drag the set variable to block from the Variables category to the script area.

2 The variable drop-down menu lists all the variables, and you can then select the variable you want to set the value of.

ICSE_6.indb 30

12/5/2023 4:25:24 PM

Type the value you want to set the variable to. The value can be a number or text.

Click here to change the value

Changing the Variable Value To make Robo Calculator change a variable value, we can just edit the set variable to 0 block. To make Robo Calculator change a variable value: 1

Drag the change variable by block from the Variables category to the script area.

Chapter 3 • Using Variable and Mathematical Blocks in Scratch

ICSE_6.indb 31

12/5/2023 4:25:24 PM

Select the variable whose value you want to change in the change variable by block.

Type the new value by which you want to change the variable value.

Click here to change the value

Similarly, create two more variables named ‘number 2’ and ‘result’.

Mathematical Blocks Mathematical blocks help a computer to perform mathematical operations. These blocks are found under the Operators block category.

ICSE_6.indb 32

12/5/2023 4:25:25 PM

The four most commonly used mathematical blocks are: Block

Name

Description

Addition

It is used to add two numbers.

Subtraction

It is used to subtract a number from another number.

Multiplication

It is used to multiply two numbers.

Division

It is used to divide a number by another number.

Discuss The major differences between the Division and Multiplication blocks.

Adding Two Given Numbers Instead of changing the variable value, we used the answer block to set the value of the number 1 variable. To make Robo Calculator add two numbers: 1 Drag the answer block from the Sensing category to the value area of the set variable to block, to set the value of the number 1 variable. 2 Again, drag the ask and wait block to the previous block. 3 Set the What is the second number? text to the ask and wait block. 4 Drag the set variable to block in the code and then select the number 2 variable from its drop-down menu. 5 Drag the answer block to the value area of the set variable to block, to set the value of the number 2 variable. 6 Again, drag the set variable to block in the code and then select the result variable from its drop-down menu. 7 Click the Operators category. 8 Drag the addition block to inside the set variable to block, to set the value of the result variable.

Chapter 3 • Using Variable and Mathematical Blocks in Scratch

ICSE_6.indb 33

12/5/2023 4:25:25 PM

9 Drag the number 1 and number 2 variables from the Variables category to the left and right boxes of the addition block.

Click the green flag to run Robo Calculator.

Click here to run

Subtracting a Number from Another Number Similar to making Robo Calculator add two numbers, we can also make Robo Calculator subtract a number from another number. We can just add the subtraction operator block. Steps to make Robo Calculator subtract a number from another number are: 1 Drag the subtraction block from the Operators category to inside the set variable to block.

ICSE_6.indb 34

12/5/2023 4:25:25 PM

2 Drag the number 1 and number 2 variables from the Variables category to the subtraction block.

Click the green flag to run Robo Calculator.

Click here to run

Multiplying Two Numbers Similar to making Robo Calculator add two numbers, we can also use it to multiply two numbers. We can just add the multiplication block. Steps to make Robo Calculator multiply two numbers are: 1 Drag the multiplication block from the Operators category to inside the set variable to block.

Chapter 3 • Using Variable and Mathematical Blocks in Scratch

ICSE_6.indb 35

12/5/2023 4:25:26 PM

2 Drag the number 1 and number 2 variables from the Variables category to inside the multiplication block.

Click the green flag to run Robo Calculator.

Click here to run

Dividing Two Numbers Similar to making Robo Calculator add two numbers, we can also make it divide a number from another number. We can just add the division block. Steps to make Robo Calculator divide a number from another number are: 1 Drag the division block from the Operators category to inside the set variable to block.

ICSE_6.indb 36

12/5/2023 4:25:26 PM

2 Drag the number 1 and number 2 variables from the Variables category and place them inside the division block.

3 Click the green flag to run Robo Calculator.

Click here to run

Do It Yourself 3A Complete the following length-finder game project.

Steps for making this length finder game are: 1 Drag the

from the

category to the script.

Chapter 3 • Using Variable and Mathematical Blocks in Scratch

ICSE_6.indb 37

12/5/2023 4:25:26 PM

2 Drag the

from the

3 Drag the

block from the Sensing category to ask ‘Give me one word to find its length’ and then wait.

4 Add the

block from the Variables category to set the word to answer.

category and then initialise both x and y with 0.

5 Drag the set word length block from the 6

Drag the

category and then put the length of the block inside it.

block from the Sensing category to place it inside the

block.

Chapter Checkup A

Fill in the Blanks. four

Hints

variables

Variable blocks are blocks that help a computer to

In Scratch, there are mainly

Mathematical blocks are present in the

Make a Variable button that is present in the

The Addition block is used to

store

add

operators

a value.

types of mathematical blocks. category. category. two numbers.

Tick () the Correct Option. 1

Which mathematical block is used to divide two numbers?

Which block is used to store a value?

a Mathematical block

b Ask block

c Variable block

d Addition block

In Scratch, how many types of variables are there?

a Three

b Four

c Two

d One

ICSE_6.indb 38

12/5/2023 4:25:27 PM

The subtraction block is present in the

category.

a Sensing

b Operators

c Motion

d Variables

In which category is the change variable by block present?

a Variables

b Sensing

c Operators

d Not present

Who Am I? Who Am I?

What I Do? I’m used to store text. I’m used to divide two numbers. I’m used to add two numbers. I’m used to store numbers.

Write T for True and F for False. 1

A variable is changeable at any time.

The subtraction block subtracts a number from another number.

The multiplication block adds two numbers together.

The division block divides a number by another number.

The variable block is used to store operators.

Answer the Following. 1

What are variable blocks?

How many types of variables can be created in Scratch?

Chapter 3 • Using Variable and Mathematical Blocks in Scratch

ICSE_6.indb 39

12/5/2023 4:25:27 PM

What are mathematical blocks?

How many types of mathematical blocks are there in Scratch?

What is the addition block used for?

Apply Your Learning. 1 Describe the use of the following block.

2 What is the purpose of using the block given below? 3

What is the purpose of using the block given below?

ICSE_6.indb 40

12/5/2023 4:25:27 PM

Observe the script and write down what it will do.

Chapter 3 • Using Variable and Mathematical Blocks in Scratch

ICSE_6.indb 41

12/5/2023 4:25:27 PM

Using Comparison Blocks and Random Blocks in Scratch

Comparison Blocks Computers cannot make comparisons like we do. But we can code them to make comparisons using Comparison blocks. Comparison blocks are the blocks that help a computer make comparisons, depending on the statements or equations it checks.

In Scratch, we have three comparison blocks in the Operators category: Blocks

Name

Did You Know? The first version of Scratch was implemented in ‘Squeak’.

Description

Equal

It returns true when the two numbers are equal; it returns false when they are not equal.

Greater than

It returns true when the first number is greater than the second; otherwise, it returns false.

Less than

It returns true when the first number is less than the second; otherwise, it returns false.

Check Whether the Given Numbers Are Equal or Not To make Robo Calculator check whether the given numbers are equal or not, we can just add the equal block. Steps to make the Robo calculator check the given numbers are equal or not: 1 Similar to the project created in the previous chapter, create three variables named number 1, number 2, and compare. 2

Drag and drop the when clicked block on the script area.

3 Display the appropriate messages to take the value of the number 1 and number 2 variables using the ask block. 4

Set the values of the number 1 and number 2 variables, using the answer block.

Again, drag and drop the ask and wait block.

6 Set the text Do you want to check whether the given numbers are equal or not? in the ask and wait block. 7 Drag and drop the set variable to block from the Variables category and select the compare variable from its drop-down menu.

ICSE_6.indb 42

12/5/2023 4:25:27 PM

8 Drag and drop the answer block to the value area of the set compare to block. 9

Click the Control category.

10 Drag and drop the if… then… else block under the set compare to block.

11 Click the Operators category. 12 Drag and join the equal block inside the if… then… else block.

Chapter 4 • Using Comparison Blocks and Random Blocks in Scratch

ICSE_6.indb 43

12/5/2023 4:25:28 PM

13 Drag the number 1 and number 2 variables from the Variables category to inside the equal operator.

14 Click the Looks category. 15 Drag the say block and put it between the white space of the if… then… else block. 16 In the say block, type the message: Hurray! Given Numbers are equal. Similarly, put the say block after the else and type the message: Oops! Given Numbers are not equal.

ICSE_6.indb 44

12/5/2023 4:25:29 PM

Now, click the green flag to run your Robo Calculator.

Click here to run

Hurray! Given Numbers are equal

Check Whether the First Number is Less Than the Second Number or Not To make Robo Calculator check whether the first number is less than the second number or not, we can just add the less than operator. Steps to make Robo Calculator check if the first number is less than the second number or not are: 1 Drag and join the if… then… else block from the Control category under the set compare to answer block.

Chapter 4 • Using Comparison Blocks and Random Blocks in Scratch

ICSE_6.indb 45

12/5/2023 4:25:29 PM

2 Drag and join the less than block from the Operators category inside the if… then… else block.

3 Drag number 1 and number 2 variables from the Variables category to inside the less than operator.

Click the Looks category.

ICSE_6.indb 46

12/5/2023 4:25:29 PM

Drag the say block and put it between the white space of the if… then block.

Double-click the say block to type the message: Number 1 is less than Number 2.

7 Similarly, put the say block after the else and double-click it to type the message: Number 1 is not less than Number 2.

Now, click the green flag to run your Robo Calculator.

Click here to run

Chapter 4 • Using Comparison Blocks and Random Blocks in Scratch

ICSE_6.indb 47

12/5/2023 4:25:29 PM

Check Whether the First Number is Greater Than the Second Number or Not To make Robo Calculator check whether the first number is greater than the second number or not, we can just add the greater than block. Steps to make Robo calculator check if the first number is greater than the second number or not are: 1 Drag and join the if… then… else block from the Control category to under the set compare to answer block.

Drag the greater than from the Operators category to join it inside the if… then block.

ICSE_6.indb 48

12/5/2023 4:25:30 PM

3 Drag the number 1 and number 2 variables from the Variables category to inside the greater than operator.

Click the Looks category.

5 Drag the say block to between the white space of if… then block. 6 Double-click the say block to type the message: Number 1 is greater than Number 2. 7 Similarly, put the say block after the else block and double-click it to type the message: Number 1 is not greater than Number 2.

Chapter 4 • Using Comparison Blocks and Random Blocks in Scratch

ICSE_6.indb 49

12/5/2023 4:25:31 PM

Now, click the green flag to run your Robo Calculator.

Click here to run

Random Block The Random block is a block that helps a computer pick a random number between two numbers that you have chosen.

Using a Random Block to Add Numbers To make Robo Calculator use a random block, we can just add the pick random operator. Steps to make the Robo calculator use a random block are: 1

Click the Events category.

Drag the when clicked block to the script area.

ICSE_6.indb 50

12/5/2023 4:25:31 PM

Click the Motion category.

Drag the go to x:0, y:0 block to the script area.

5 Drag and drop the say block two times from the Looks category and then fill the first block with the text Welcome to the Robo Calculator and the second one with the text I will generate the random numbers and ask you to add them together.

Drag the set variable to the block from the Variable category.

Chapter 4 • Using Comparison Blocks and Random Blocks in Scratch

ICSE_6.indb 51

12/5/2023 4:25:31 PM

Set the text add in the set variable to block.

8 Drag the two more set variable to blocks from the Variables category to the script area. 9 Select the number 1 and number 2 from the drop-down menu of both set variable to blocks, respectively.

10 Drag the two pick random 0 to 0 blocks from the Operators category to the value area of the set variable to blocks.

ICSE_6.indb 52

12/5/2023 4:25:31 PM

Set the limit from 1 to 9999.

12 Drag the say block from the Looks category and then fill it with the text What is the sum of number 1 and number 2?

Chapter 4 • Using Comparison Blocks and Random Blocks in Scratch

ICSE_6.indb 53

12/5/2023 4:25:31 PM

13 Drag the wait 1 seconds block from the Control category to under the say block.

14 Fill the wait block with 5 seconds. 15 Drag the ask and wait block from the Sensing category and fill it with the text ‘Your answer’.

ICSE_6.indb 54

12/5/2023 4:25:32 PM

Drag the set answer to block from the Variables category.

Put the addition operator block from the Operators block inside the set answer to block.

18 Drag the number 1 and number 2 variables from the Variables category and then put them inside the addition operator block.

19 Drag the say block from the Looks category and then fill it with: Hurray! You have given the correct answer.

Chapter 4 • Using Comparison Blocks and Random Blocks in Scratch

ICSE0604.indd 55

12/6/2023 4:26:09 PM

20 Now, click the green flag to run your Robo Calculator.

Coding Challenge Help Dino avoid obstacles to achieve a high score.

Click here to run

Do It Yourself 4A Complete the following Clicker Game Project.

Steps for making this clicker game are: 1 Drag the

block from the

category to the script area.

Add the

block from the

category.

Drag the

block from the Motion category to move the balloon in a random direction.

Add the

block for the 2 seconds block from the Control category.

Drag the

block from the

Add the

block from the Sound category to make the sound when the sprite gets clicked.

7 Now, add the sprite.

category to add in the script.

block from the Variables category to change the score by 1 whenever the player clicks the

ICSE_6.indb 56

12/5/2023 4:25:32 PM

Discuss How do the sound blocks make your project feel different?

Chapter Checkup A

Fill in the Blanks. compare

Hints

operators

random numbers

1 A Random block helps a computer to pick

equal, less than, greater than

between two numbers that you have chosen.

2 In Scratch, we have three comparison blocks in the operator category: .

Comparison blocks are used to

A random block is present in the

and

values or numbers. category.

Tick () the Correct Option. 1

In Scratch, what type of blocks are used to show the equal operator?

d None of these

Which operator is used to show that number 1 is bigger than number 2?

a addition

b less than

c greater than

d pick random

Random numbers can be used in script from the

category.

a Sensing

b Motion

c Operators

d Variables

Comparison blocks help a computer

two numbers.

a sense

b compare

c add

d multiply

In Scratch, how many types of comparison blocks are there?

a five

b six

c three

d eight

Chapter 4 • Using Comparison Blocks and Random Blocks in Scratch

ICSE_6.indb 57

12/5/2023 4:25:33 PM

Who Am I? Who Am I?

What I Do? I return true when the first number is greater than the second; otherwise, I return false when it is not.

I am a block that picks a random number between two numbers that you have chosen.

I return true when the first number is less than the second; otherwise, I return false when it is not.

I return true when the two numbers are equal; otherwise, I return false when they are not. D

Write T for True and F for False. 1

Comparison blocks can be used to generate random numbers.

A pick random block always returns the same number.

Comparison blocks can be used to compare two values or expressions.

Random blocks can be used to make Scratch projects more fun and engaging.

Answer the Following. 1

What are Comparison blocks?

What is a random block?

What are the different types of Comparison blocks?

What is the greater than operator used for?

What is the equal operator used for?

ICSE_6.indb 58

12/5/2023 4:25:33 PM

Apply Your Learning. 1

Observe the script and write down what it will do.

What is the purpose of using the following block in the script?

What is the purpose of using the block in the script?

Describe the role of the block given below.

5 Create a game in which the player controls a snake that needs to catch randomly moving pieces of food. When the snake captures the food, the player’s score should increase. The objective of the game is to maximise the score by guiding the snake to catch as much food as possible. Chapter 4 • Using Comparison Blocks and Random Blocks in Scratch

ICSE_6.indb 59

12/5/2023 4:25:33 PM

Introduction to HTML

The internet has become an inseparable part of our daily lives. We use the internet to visit various websites using a mobile phone, a laptop, or a computer. Have you ever thought how these websites are created? Websites are a collection of many web pages. We use various computer languages or technologies to create these web pages. HTML is one of the technologies that is used to create web pages of a website. This chapter will introduce you to HTML.

HTML HTML stands for HyperText Markup Language. It helps you to display colourful text, images, and attractive backgrounds to your web page.

</>

Did You Know? HTML was designed and released by Tim BernersLee in the year 1993.

Advantages of HTML Some advantages of HTML are:

• Easy to learn and use: HTML is a simple and easy language to learn. HTML can create web pages that run on any device (computers, mobiles, and • Platform-independent: tablets).

• Helps to add graphics: HTML helps add video, image, and audio files to web pages. This feature enhances the experience for website visitors.

• Helps to create hyperlinks: Using HTML, you can link various web pages with each other. It allows users to click text or images and navigate to various websites.

Disadvantages of HTML Some disadvantages of HTML are:

• Lack of interactivity: It cannot be used to create dynamic web pages with features such as user input and forms. However, you can enhance this capability with the use of Cascading Style Sheets, or CSS.

ICSE_6.indb 60

12/5/2023 4:25:33 PM

Security concerns: HTML pages are vulnerable to security risks, such as SQL Injection and Cross-Site • Scripting.

Version dependence: New versions of HTML are regularly released as the language changes constantly. •

This implies that websites built using earlier HTML versions might not function properly with more recent browsers.

Do It Yourself 5A Write A for Advantage and D for Disadvantage. 1

Platform-independent

Security concerns

Easy to learn and use

Used to create hyperlinks

Lack of interactivity

Web Browsers A web browser is a software application that processes HTML and other web technologies to display web pages to users. When a user types any website address in the address bar of a web browser, the browser sends a request to the server asking for the HTML code of the specific web page. The browser then processes the HTML markup and displays the required web page. Some examples of web browsers are:

Google Chrome Google Chrome

Mozilla MozillaFirefox Firefox

Microsoft MicrosoftEdge Edge

Think and Tell What type of websites do you want to create using HTML?

Basic Structure of an HTML Document HTML documents contain two sections: Header section: It contains information about HTML documents, such as page title, HTML, and meta tags. Body section: It contains all the visible elements that will be displayed on the web page.

Chapter 5 • Introduction to HTML

ICSE_6.indb 61

Did You Know? A URL is a website address. A URL is a group of letters and numbers that instructs your web browser where to look for the page you want to view.

12/5/2023 4:25:33 PM

Designing Web Pages in HTML Basic steps for designing a web page in HTML are: 1 Open an editor: There are many editors that can be used to write HTML code such as Notepad, Notepad++, and TextEdit. You can use any of these to write your HTML code. 2 Write HTML code: Use the basics of HTML to write the code for your web page. There are many tags in HTML to help you add colourful text, images, and audio, in your web page. 3 Save file: After writing the complete HTML code, save the file as ‘file_name.html’, using the Save as option. 4 Open a browser and check the web page: Test the result of the HTML code by opening the HTML file using a web browser such as Microsoft Edge or Google Chrome.

Do It Yourself 5B Match the following.

Microsoft Edge

Google Chrome

Mozilla Firefox

Microsoft Edge Google Chrome

Google Chrome

Mozilla Firefox

Microsoft Edge Mozilla Firefox

Mozilla Firefox

Microsoft Edge

Structure of an HTML Document To create an HTML document, you need to know about a few essential elements. These elements are fundamental to creating a basic HTML document structure. Let us learn about them. <!Doctype html>: The <!DOCTYPE html> declaration is part of HTML5 and is used to indicate that you are using the HTML5 standard. It is not a tag in HTML; however, it is an important component of the HTML document. <html>: The <html> tag is the root element of an HTML document. This tag contains all other HTML elements and is the starting point for creating an HTML page. You can see this tag at the beginning of an HTML document. <head>: The <head> tag contains metadata (data about data) and other information about the HTML document. <title>: The <title> tag is written inside the <head> tag and is used to define the title of the HTML document, which appears in the browser title bar or tab. <body>: The <body> tag contains the main content of the web page, including text, images, links, and other elements visible to the user. Everything that you want to display on the web page such as headings, paragraphs, and lists is included in the <body> element.

ICSE_6.indb 62

12/5/2023 4:25:34 PM

Here is an example of how these elements are used: <!Doctype html> <html> <head> <title>My Web Page</title> </head> <body> … … </body> </html> Note that the <html> element encloses the whole document, the <head> element contains metadata, the <title> sets the page title, and the <body> element holds the visible content.

Basic Terminologies in HTML Before you start writing your HTML code, you need to know about a few terms that you can use in your HTML code. Let us look at these one by one.

Tags A tag is a keyword that tells the browser how to display a piece of text or content. Tags are written in pairs, with an opening tag and a closing tag. The opening tag starts with < and ends with >, while the closing tag includes </ followed by the tag name and then >. Example: <p>, </p> <b>, </b>, <br>, etc., are the tags in HTML.

Elements An element is a building block of an HTML. This element is defined by a start tag, some content, and an end tag. The content of the element can be text, other HTML elements, or a combination of both. Example: <title>…</title> is an element in an HTML document.

Attributes HTML attributes are the modifiers of HTML elements. They are the keywords that hold extra information about an element or a tag. An attribute is always placed in the opening tag of an element, and it provides additional styling (an attribute) to the element. Syntax: <tag attribute=”value”> …content of tag… </tag> Example: <font color= ‘’red’’> This is my first HTML document. </font> Now, let us learn more about the tags, their types, and some examples of the tags that are used to create an HTML document.

Chapter 5 • Introduction to HTML

ICSE_6.indb 63

12/5/2023 4:25:34 PM

Types of Tags There are mainly two types of tags in HTML: Container tags and Empty tags. Container Tags: These tags consist of an opening tag as well as a closing tag. This start tag and end tag pair are known as the ON and OFF tags and are used to open and close the document. Syntax: <tag_name>.......</tag_name> Example: <B> tag is a container tag in HTML. Empty Tags: An empty tag is a tag without a closing tag. Syntax: <tag_name> Example: <img> tag is an empty tag in HTML.

Basic Tags in HTML The following are some tags used in HTML: Paragraph: The <p> tag in HTML is used to define a paragraph of text. This tag is one of the text formatting tags in HTML and is used for structuring and formatting text content on a web page. Syntax: <p>…</p> Example: Code

Output

<p>This is a paragraph</p>

This is a paragraph

Heading tags: These tags are used to create headings. The headings are used to arrange the contents of a web page so that the users can easily read and understand the content flow on the web page. There are six heading tags in HTML, <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> for various levels of headings. Syntax: <hn>…</hn>, where n can be any number from 1 to 6 Example: Code

Output

<h1>Heading 1</h1>

Heading 1

Bold: This tag is used to highlight an important text. The bold text is typically displayed in a darker font. Syntax: <b>…</b> Example: Code

Output

This text is bold.

ICSE_6.indb 64

12/5/2023 4:25:34 PM

Italic: The italic tag is used to highlight specific words or phrases. The italic element is displayed as a slanted font. Syntax: <i>…</i> Example: Code

Output

<p><i>This text is italic</i></p>

This text is italic

Underline: This tag is used to indicate that the text between the opening and closing tags should be displayed with an underline. Syntax: <u>…</u> Example: Code

Output

<p>This is <u> important </u></p>

This is important

Line break: This tag is used to insert a new line into the text. The line break tag is also known as the <br> tag. Syntax: <br> Example: Code

Output

A Poem

<p>Be not afraid of greatness.<br> Some are born great,<br> some achieve greatness,<br> and others have greatness thrust upon them.</p>

Be not afraid of greatness. Some are born great, some achieve greatness, and others have greatness thrust upon them.

Horizontal Line: This tag is used to insert a horizontal line on a web page. The horizontal line element is used to create divisions on a web page. Syntax: <hr> Example: Code

Output

<p>A normal horizontal line:</p>

A normal horizontal line:

<hr> <p>A horizontal line with a height of 10 pixels:</p>

A horizontal line with a height of 10 pixels:

Chapter 5 • Introduction to HTML

ICSE_6.indb 65

12/5/2023 4:25:34 PM

Now, let us create a web page, using all the tags learnt in the chapter. Code

Output

<!DOCTYPE html>

Welcome to My Web Page

Introduction

This is a simple web page to demonstrate HTML tags.

</head> <body>

Let us do text formatting.

<h1>Welcome to My Web Page</h1>

This is bold text.

<h2>Introduction</h2>

This is underlined text.

<p>This is a simple web page to demonstrate HTML tags.</p> <h2>Let us do text formatting.</h2> <p>This is <b>bold</b> text.</p> <p>This is <u>underlined</u> text.</p> <p>This is <i>italic</i> text.</p>

This is italic text.

Line Breaks and Horizontal Rule This is a line of text. This is on a new line.

<h2>Line Breaks and Horizontal Rule</h2> <p>This is a line of text.<br>This is on a new line.</p> <hr> </body> </html>

Discuss

What is the difference between tags and elements?

Do It Yourself 5C Match the tags with their meanings. Tag

Meaning

Italics

Horizontal rule

Underline

Line break

Bold

ICSE_6.indb 66

12/5/2023 4:25:34 PM

Chapter Checkup A

Fill in the Blanks. Hints

Text paragraph

Microsoft Edge

element

Tags are special lines or words of code in HTML, enclosed in

Attributes provide extra information about HTML

Some examples of web browsers are Mozilla Firefox, Google Chrome, and

The

The <p> tag is used for

angular brackets

<body>

. . .

tag contains the main content of the web page. .

Tick () the Correct Option. 1

What is HTML?

a A programming language

b A markup language

d A framework

A style sheet

Which of the following is a valid HTML tag?

a <p>

b <h1>

d All of these

<br>

3 What is the purpose of the <hr> tag? a To create a paragraph

b To create a division

d None of these

To create a link

What is an attribute?

a Starting point for creating an HTML page

b A piece of text that appears outside a tag

d None of these

Additional information that can be added to a tag

What is an element?

a A combination of a start tag, some content, and an end tag

b A piece of text that appears inside a tag

d None of these

A piece of text that appears outside a tag

Chapter 5 • Introduction to HTML

ICSE_6.indb 67

12/5/2023 4:25:34 PM

Who Am I? 1

I’m used to view web pages.

I’m a tag used to add a horizontal line in HTML.

I’m used to provide data about an HTML element.

I’m a markup language.

I’m a tag used to display the text in italic.

Write T for True and F for False. 1

HTML is a markup language for creating web pages.

Browsers such as Chrome and Firefox are used to display web pages.

HTML document is written using special syntax within square brackets.

The <b> tag is used to create line breaks in an HTML document.

The closing tag should have a closing bracket at the end.

Answer the Following. 1

What is HTML? Write its features.

What is a web browser?

Name the structural elements of HTML.

Differentiate between container tags and empty tags.

ICSE_6.indb 68

12/5/2023 4:25:34 PM

Write the basic structure of an HTML document.

Apply Your Learning. 1 Shreya wants to underline text in the HTML code. What does she need to do?

2 Ekansh is wondering about the features of HTML. What will you tell him?

3 Anmol wants to divide his web page into several sections. Which tag can he use to do so?

4 Tanya wants to display each line of text in her web page as a new line. Which tag should she use to do so?

5 You are asked to create a web page on the topic ‘Renewable Energy Resources’. What basic tags will you make use of to make the web page visually appealing?

Chapter 5 • Introduction to HTML

ICSE_6.indb 69

12/5/2023 4:25:35 PM

61 Creating a Web Page HTML stands for HyperText Markup Language, and it is used to design web pages and web applications using a markup language. In the previous chapter, you learnt about the basic structure of an HTML document. Now, let us look at each part of an HTML document in detail.

Structure of an HTML Document HTML uses specified tags and attributes to instruct browsers on how to display text, which includes format, style, font size, and pictures to display. An HTML document is divided into two parts: Head part: The title and metadata of a web document are contained in the head part. Body part: The content you want to display on a web page is contained in the body part.

Did You Know? HTML is a not a case-sensitive language. For example, HTML tags can be written in both small and capital, which means both <html> and <HTML> are same.

A Document Type Declaration (DTD) should come before the HTML element in your web pages to ensure HTML compatibility. Many web publishing tools automatically include DTD and fundamental tags when you generate a new web page. The basic structure of an HTML document consists of 5 elements. Let us understand each element in detail. <!DOCTYPE html>

The <!DOCTYPE html> tag is referred to as the document type declaration (DTD). Technically, <!DOCTYPE > is • neither a tag nor an element.

This tag informs the browser about the document type. • This tag is an empty element that does not have a closing tag and must not contain any content. • <html>Tag

The <html> tag informs the browser that this is an HTML document. • The <html> tag requires the beginning and ending tags. •

<head>Tag

The head of an HTML document is a section of the document whose content is not displayed in the browser • when the page loads.

It contains the ‘behind the scenes’ elements for a web page. •

ICSE_6.indb 70

12/5/2023 4:25:35 PM

It contains information about the HTML document. • The head section of an HTML document contains the title of a web page, with the help of the <title> tag. • <title>Tag

When you visit a website, the title is shown at the top of your browser and contains the title of the active web page. The <title> tag provides a suitable title for the entire HTML document.

When a web page is saved as a favourite or a bookmark, it appears at the top of the browser window and • provides the page with a suitable name.

A strong page title on a website ensures a higher position in search results. As a result, we must always • include appropriate keyword phrases.

The <title> element must be positioned between the <head> and </head> tags. • There can only be one title element per document. • <body>Tag

The primary content of an HTML document •

that displays on the browser is specified by the <body> tag. Headings, text, paragraphs, images, tables, links, videos, etc., can all be included in a <body> tag.

The <body> tag must appear immediately • following the <head> tag.

All HTML documents must have this tag, •

which should be used only once overall in a document.

Creating an HTML Document

Did You Know? Did you know that the concept of optimising website page titles with appropriate keywords is often referred to as “SEO” (Search Engine Optimization)? SEO is like a digital treasure hunt, where website owners and content creators strategically choose and place keywords to improve their website’s visibility on search engines.

You can create an HTML document using any text editor, such as Notepad or WordPad. To start writing an HTML document on Notepad: 1 Open Notepad on your computer. An untitled Notepad file appears. 2 Type the HTML code in the Notepad file, as shown.

Chapter 6 • Creating a Web Page

ICSE_6.indb 71

12/5/2023 4:25:35 PM

3 If you are using the Tekie platform, then you can type the code in the code editor window. 4 After typing this code, save the file. 5 Select File > Save.

6 The Save As dialog box appears.

7 Select the location where you want to save the file, for example, Desktop. 8 Type the file name as ‘myfile.html’. Note that the HTML files are saved with the ‘.html’ extension. 9 Click Save. Your HTML file is saved on the desktop.

ICSE_6.indb 72

12/5/2023 4:25:35 PM

Viewing an HTML Document Using a Web Browser You can view your HTML file using a web browser, using the following steps: 1 Go to the desktop. 2 Locate your file on the desktop and double-click it. 3 The file opens in the default browser, as shown:

Basic HTML Coding Conventions While writing HTML documents, you should follow the given coding conventions:

• Always declare the document type as the first line in your document. • Use either small or capital letters for element names because mixing capital and small letters may be confusing and difficult to debug.

• Close all HTML tags, wherever required. In HTML, if you do not provide a closing tag with some of the basic

tags (for example, the <p> element), you will not get any error. However, it is strongly recommended to close all the HTML elements.

• Try to keep your code lines short. • Do not add blank lines, spaces, or indentations without a reason. For readability, add two spaces for indentation.

• Never skip the <title> element. • You can use comments in the HTML code to make it readable and to debug it easily. An HTML comment can be given as follows:

• Always save the HTML documents with the ‘.html’ extension.

Chapter 6 • Creating a Web Page

ICSE_6.indb 73

12/5/2023 4:25:35 PM

Do It Yourself 6A 1 Write an HTML code to display content on the topic ‘Climate Change’ on a web page using the basic tags that you have

learnt, and then save the file by assigning it a suitable name. Try to open the file in a web browser of your choice.

2 Match the following.

Column A

Column B

Defines the primary content of a web page

Head

Viewing a web page Contains the title and metadata of a web page

Body

Web browser

More HTML Tags You have learnt about some basic tags in the previous chapter. Now, let us learn about some more HTML tags. <em> Tag: This tag is used to emphasise text and is typically displayed in italics. Syntax:

<em>Block of text</em> Code

Output

<p>This transformation is called <em>metamorphosis</em>. <br> It is like a magical change!</p>

This transformation is called metamorphosis. It is like a magical change!

<strong> Tag: This tag is used to represent strongly emphasised text and is typically displayed in bold. Syntax:

<strong>Block of text</strong> Code

Output

<p>A <strong>butterfly</strong> is a beautiful insect.</p>

A butterfly is a beautiful insect.

<sub> Tag: This tag is used to represent text as a subscript. A subscript is the text that is below the baseline of the surrounding text. For example, 2 in H2O is a subscript. Syntax: <sub>Block of text</sub> Code

Output

<p>The journey begins as a tiny <sub>egg</sub> attached to a leaf.</p>

The journey begins as a tiny egg attached to a leaf.

<sup> Tag: This tag is used to represent text as a superscript. A superscript is the text that is above the baseline of the surrounding text. For example, 2 in E = mc2 is a superscript.

Syntax:

<sup>Block of text</sup>

ICSE_6.indb 74

12/5/2023 4:25:35 PM

Code

Output

<p>Finally, the pupa emerges as a fully grown <sup>adult</sup> butterfly.</p>

Finally, the pupa emerges as a fully grown adult butterfly.

<section> Tag: This tag is used to define the grouping of content in a document. This tag makes the content more organised and meaningful, which then helps understand the content in a better way. Syntax:

<section>Block of text</section> Code

Output

<section> <h3>What is a Butterfly?</h3> <p>A butterfly is a beautiful insect <br> known for its vibrant colours and delicate wings.</p> </section> <section> <h3>How it starts?</h3> <p>But did you know that a butterfly goes through<br> several stages in its life?</p> </section>

What is a Butterfly?

A butterfly is a beautiful insect known for its vibrant colours and delicate wings.

How it starts?

But did you know that a butterfly goes through serveral stages in its life?

<article> Tag: This tag is used to represent a self-contained composition, such as a blog post or a news article. Syntax:

<article>Block of text</article> Code

Output

<article> <h3>Metamorphosis</h3> <p>This transformation is called <em>metamorphosis</em>.<br> It is like a magical change!</p> </article>

Metamorphosis This transformation is called metamorphosis. It is like a magical change!

Let us combine all these snippets of code and develop our project. Code <!DOCTYPE html> <html> <head> <title>The Life Cycle of a Butterfly</title> </head> <body> <h1>Discover the Life Cycle of a Butterfly</h1> <section>

Chapter 6 • Creating a Web Page

ICSE_6.indb 75

12/5/2023 4:25:35 PM

Code <h2>Introduction</h2> <article> <h3>What is a Butterfly?</h3> <p>A <strong>butterfly</strong> is a beautiful insect known for its vibrant colours and delicate wings. But did you know that a butterfly goes through several stages in its life? </p> </article> <article> <h3>Stages of a Butterfly</h3> <p>A butterfly’s life consists of four main stages:</p> <p><strong>Egg:</strong> The journey begins as a tiny <sub>egg</sub> attached to a leaf.</p> <p><strong>Larva:</strong> The egg hatches into a <strong>larva</strong>, also known as a caterpillar.</p> <p><strong>Pupa:</strong> The caterpillar transforms into a <strong>pupa</strong>, enclosed in a chrysalis.</p> <p><strong>Adult:</strong> Finally, the pupa emerges as a fully grown <sup>adult</sup> butterfly.</p> </article> <article> <h3>Metamorphosis</h3> <p>This transformation is called <em>metamorphosis</em>. It is like a magical change!</p> </article> </section> </body> </html> Output

Discover the Life Cycle of a Butterfly Introduction What is a Butterfly?

A butterfly is a beautiful insect known for its vibrant colours and delicate wings. But did you know that a butterfly goes through several things in its life? Stage of a Butterfly

A butterfly’s life consists of four main stages:

Egg: The journey begins as a tiny egg attached to a leaf.

Larva: The egg hatches into a larva, also known as a caterpillar.

Pupa: The caterpillar transforms into a pupa, enclosed in a chrysalis. Adult: Finally, the pupa emerges as a fully grown adult butterfly Metamorphosis

This transformation is called metamorphosis. It is like a magical change!

ICSE_6.indb 76

12/5/2023 4:25:35 PM

Coding Challenge Create an HTML web page on the topic: Our Solar System. The web page should contain information about our solar system, the Sun, the Earth, and the other planets. Use the tags that you have learnt so far. Arrange the information on the web page beautifully.

Chapter Checkup A

Fill in the Blanks. subscript

Hints 1

An HTML program is saved using the

The tags in HTML are not

case-sensitive

<HTML>

extension. .

is the root tag of an HTML document.

.html

The

tag is used to represent strongly emphasised text. is the text that appears below the baseline of the surrounding text.

Tick () the Correct Option. 1

HTML stands for:

a HighText Machine Language

b HyperText and links Markup Language

d None of these

HyperText Markup Language

The correct sequence of HTML tags for starting a web page is:

a Head, Title, HTML, body

b HTML, Body, Title, Head

d HTML, Head, Title, Body

HTML, Head, Title, Body

Which of the following tags is used for representing text as a superscript?

a <h3> b <sub> c 4

Which tag is used to define grouping of content in a document?

a </p> b <strong> c

Chapter 6 • Creating a Web Page

ICSE_6.indb 77

12/5/2023 4:25:36 PM

Which tag is used to emphasise text and display text in italics?

a <h2> b <p> c C

Who Am I? 1

A document that is typically written in HTML and then translated by a web browser.

I am not a tag, but I inform the browser about the document type.

The part of the web page that contains the content to be displayed.

A tag referred to as the document type declaration, or DTD.

A tag that provides a suitable title for an HTML document.

Write T for True and F for False. 1

The <article> tag is used to represent a self-contained composition, such as a blog post or a news article.

It is mandatory to close all the tags in HTML, even if they are empty tags.

3 The head of an HTML document is a section of the document whose content is not displayed in the browser when the page loads.

The comments in the HTML code make it readable and easy to debug.

The <title> tag contains all the information and other visible content on a page.

Answer the Following. 1

Describe the two main parts of an HTML document.

What is the basic structure of an HTML document?

What is the purpose of the <title> tag?

ICSE_6.indb 78

12/5/2023 4:25:36 PM

Differentiate between the <em> tag and the <strong> tag.

Differentiate between the <sub> tag and the <sup> tag.

Apply Your Learning. 1 Create an HTML page containing your name, father’s name, mother’s name, school name, postal address, and contact number. Each piece of information should appear in a separate section.

Create an HTML document to display the daily news of your school in various fields.

3 Create an HTML page with the title as ‘Formulae in Maths’. The page should contain the area of a circle, square, rectangle, and a triangle.

4 Create an HTML page to display information about the eastern states of India, often known as ‘the Seven Sisters’. The title of the page should be ‘Eastern States of India’.

5 Create a web page showing information about your favourite sports persons. Separate each section of the web page sport-wise and then display the information.

Chapter 6 • Creating a Web Page

ICSE_6.indb 79

12/5/2023 4:25:36 PM

Cascading Style Sheets

Introduction to CSS Cascading Style Sheets (CSS) is a language used to incorporate styles like background colour, font colour, a font size in web pages. CSS is mainly used to enhance the look of web pages by applying various formatting styles to the elements or the entire web page. It allows us to apply a style to a specific element of a web page, an entire web page, or all the web pages of a website. It makes it easy to add or change the look and feel of web pages without re-creating them. The main purpose of CSS is to separate the styles from the structure of web pages.

Did You Know? On October 10, 1994, Håkon Wium Lie proposed CSS at CERN.

Syntax of CSS CSS consists of style rules. Style rules are made up of selectors, properties, and values. All style rules are enclosed within curly brackets {}. The syntax for using CSS is as follows: selector{property: value;} where,

a selector is any HTML element to which you want to apply a style, like <p>. Always remember that an • HTML element is written without angle brackets while creating CSS style rules.

a property is like an HTML attribute, like colour, which adds additional features to an element. • a value is similar to an attribute’s value assigned to a CSS property. Every CSS property has a value •

associated with it. The colon (:) sign is used to assign a value to a property. When using multiple properties in a style rule, each property-value pair is separated by a semicolon (;) sign.

Let us now create a CSS style rule to change the font size and font color of the <p> element. p{font-size: 14px; color: blue} In the preceding CSS rule, p is an HTML element, font-size and color are the CSS properties, and 14px and blue are the values assigned to these properties.

ICSE_6.indb 80

12/5/2023 4:25:36 PM

Methods to Use CSS There are three methods to use CSS in an HTML document: inline, internal, and external. Inline CSS The purpose of inline CSS is to apply CSS style rules only to a particular element in an HTML document. The style attribute is used within the opening tag of the element to which you want to apply CSS. In this method, there is no need to use curly brackets. For example: Code

Output

I am a paragraph.

I am a paragraph. </p>

Internal CSS If you want to apply CSS style rules to multiple elements or an entire web page, then the internal CSS method is used. The <style> and </style> tags of HTML are used for this purpose. You should use the <style> tag within the <head> and </head> tags. It improves the loading process of the web page. However, you can use the <style> tag anywhere on a web page. For example: Code

Output

<html>

I am a paragraph.

<head>

</head> <style>

p {font-size: 20px; color: green;} </style> <body>

<p> I am a paragraph. </p> </body> </html>

External CSS The external CSS method allows you to apply style rules to multiple web pages of a website. In this method, the CSS style rules are written in a separate file, and this file is saved with the .css extension. You need to add the reference to this CSS file to the web page, using the <link> tag. The <link> tag can be written in the <head> section of the web page. For example: <link rel=”stylesheet” href = “style.css”> The rel attribute of the <link> tag is used to specify that the linked document is a stylesheet. For this purpose, a stylesheet value is assigned to this attribute. The href attribute is used to specify the Uniform Resource Locator (URL) of the CSS file. Ensure that the CSS file is saved at the same location where you had saved the HTML file. Otherwise, you need to provide the complete path of the CSS file.

Chapter 7 • Cascading Style Sheets

ICSE_6.indb 81

12/5/2023 4:25:36 PM

Write the following code in the editor and save the file by assigning it the name “style.css”. p{font-size: 20px; color: green;} Let us create an HTML web page containing the <link> tag: Code

Output

<html>

I am a paragraph.

<head>

<p> I am a paragraph. </p> </body> </html>

Discuss

Which method of adding CSS to an HTML document is better in your point of view?

Do It Yourself 7A 1

Write T for True or F for False. a

CSS stands for Cascading Style Selector.

CSS is used to define the structure of a web page.

The colon (:) sign is used to assign a value to a property.

Identify the mistake in the following code and rewrite it correctly. <link href=”stylesheet” rel = “style.css”>

CSS Colour Properties CSS provides two colour properties: color and background-color. color: It applies colour to the text of an element. This property takes the name of the colour as a value. For example: color: red background-color: It applies a colour to the background of an HTML document. background-color: green You can also provide the hexadecimal code of the colour instead of the colour name. The # symbol is used in the beginning of hexadecimal code. Hexadecimal codes are made up of six characters (0–9 and A–F), and they represent the intensity of red, green, and blue (RGB) components of a colour.

ICSE_6.indb 82

12/5/2023 4:25:36 PM

In the 6-digit code, the first 2 digits are used for the red colour, the next two digits are used for the green colour, and the last 2 digits are used for the blue colour. For example, the following hexadecimal code represents the black colour, as all the values are 0: #000000—black The following table contains both types of codes for some colours: Colour Name

6-digits Hexadecimal Code

Black

#000000

White

#ffffff

Red

#ff0000

Blue

#0000ff

Green

#00ff00

Yellow

#ffff00

Did You Know? Hexadecimal codes can be of 3-digits if both the digits of red, green, and blue are the same. For example, #556677 can be written as #567 #ffaabb can be written as #fab.

CSS Font Properties CSS font properties are used to format text on web pages. Some of the font properties are as follows: Property

Description

font-family

It applies various font styles to the text according to the specific font family, like Arial and Comic Sans MS.

font-size

It sets the size of the text in pixels, points, percentage, or em. For example: 20px or 20pt 20%

1.5em font-weight

It specifies the thickness of characters. This property takes any one value from the normal, bold, bolder, and lighter values.

text-align

It aligns the text. This property takes any value from the left, right, justify, or center values.

text-decoration

It sets the decoration of text. This property takes any value from the underline, overline, or line-through values.

line-height

It maintains the spacing between the lines. This property takes the value in pixels, points, percentage, or em.

Chapter 7 • Cascading Style Sheets

ICSE_6.indb 83

12/5/2023 4:25:36 PM

Example: Code

Output

I am a paragraph.

font-family: comic sans ms; font-size: 25px;

font-weight: bolder; text-align: right;

text-decoration: underline; line-height: 1.5 em; }

CSS Border Property The border property allows you to add a border around an HTML element. It is a shorthand property that allows you to set the width, style, and colour of all four borders (top, right, bottom, and left). The syntax of the border property is: div { border: border-width border-style border-color; } For example, the following code sets a 5-pixel solid black border around all sides of the <div> element. div { border: 5px solid #333333; } You can also specify border-width, border-style, and border-colour properties individually. For example: Code div {

border-width: 5px;

Output This is div

border-style: solid

border-color: #333333 }

You can also provide various border styles, like dotted, double, dashed, and solid, to an element. Some 3-dimensional border styles are groove, ridge, inset, and outset. Let us create a web page using some of the properties you have learnt so far. Code <html> <head> <title>English Word Meanings</title> <style> body { font-family: comic sans ms;

ICSE_6.indb 84

12/5/2023 4:25:36 PM

Code }

line-height: 1.6;

h1 {

text-align: center; color: #0066cc;

}

h2 { }

color: #009933;

</style>

</head> <body>

<h1>Word Meanings</h1> <h2>Word: Curious</h2>

<p>Meaning: Eager to know or learn something.</p>

<p>Example: The students were curious about the new lesson.</p> <h2>Word 2: Magnificent</h2>

<p>Meaning: Extremely beautiful, elaborate, or impressive.</p>

<p>Example: The castle had a magnificent view of the mountains.</p> <h2>Word 3: Ponder</h2>

<p>Meaning: To think about something carefully and thoroughly.</p>

<p>Example: She sat by the window, pondering the mysteries of the universe.</p>

</body> </html>

Output

Word Meanings Word: Curious Meaning: Eager to know or learn something. Example: The students were curious about the new lesson.

Word 2: Magnificent Meaning: Extremely beautiful, elaborate, or impressive. Example: The castle had a magnificent view of the mountains.

Word 3: Ponder Meaning: To think about something carefully and thoroughly. Example: She sat by window, pondering over the mysteries of the universe. Chapter 7 • Cascading Style Sheets

ICSE_6.indb 85

12/5/2023 4:25:36 PM

Do It Yourself 7B Match the CSS property with its possible value. CSS Property

Value

background-colour

14pt

font-size

red

text-align

double

text-decoration

justify

border-style

overline

Chapter Checkup A

Fill in the Blanks. .css

Hints 1

style

font-weight

The main purpose of CSS is to separate the styles from the

structure

of the web pages.

rules are made up of selectors, properties, and values.

CSS file is saved with the

extension.

The

property of CSS specifies the thickness of characters.

The

symbol is used at the beginning of hexadecimal code.

Tick () the Correct Option. 1

Which of the following brackets is used to enclose style rules with a selector?

a {} 2

d <>

b Outline

Internal

d External

b four characters

two characters

d eight characters

Real

d Rose

What does R stand for in RGB?

a Rich 5

()

Hexadecimal codes are made up of:

a six characters 4

Which of the following is not a method of using CSS in an HTML document?

a Inline 3

b []

The

a font-family

b Red

property sets the size of the text in pixels, points, percentage, or em. b font-size

font-weight

d text-align

ICSE_6.indb 86

12/5/2023 4:25:37 PM

Who Am I? 1

I’m a sign used to assign a value to a CSS property.

I’m a method used to add CSS to an HTML file to apply the style to a single element.

I’m a CSS property that is used to apply colour to the text of an element.

I’m one of the font properties used to maintain spacing between lines.

I’m the method of applying CSS in which the style rules are defined in a separate file.

Write T for True and F for False. 1

A property is like an HTML attribute.

The purpose of inline CSS is to apply CSS style rules only to a particular element in an HTML document.

The rel attribute is used to specify the Uniform Resource Locator (URL) of the CSS file.

The border property allows you to add a border around an HTML element.

You cannot save the CSS style in a separate file.

Answer the Following. 1

What is CSS?

What does CSS consist of? Mention the syntax of CSS.

Write the CSS style rule to set the font colour of the <H1> tag.

Mention the various values of the border-style property.

Chapter 7 • Cascading Style Sheets

ICSE_6.indb 87

12/5/2023 4:25:37 PM

Name the three methods of using CSS style sheets.

Apply Your Learning. 1 Create a web page to display the text within the <div> tag. The background colour of the <div> should be red, and the font family should be Arial.

2 Sangeeta has created a website with 20 web pages. After creating the website, she realised that the look and feel of the website were not up to the mark. She decided to change the look and feel of all web pages. Suggest her the best method to quickly apply CSS to all the web pages.

3 Romi wants to align the text on to the right edge on a web page. Which CSS property should she use to do so?

4 Create a .css file and specify the properties of the <font> element in it. Use the external method to use this file in the HTML code.

5 Sharvi wants to create an HTML document and apply the border property to it. Which CSS property should she use to do so?

ICSE_6.indb 88

12/5/2023 4:25:37 PM

Singapore

Gurugram

CS_CB_Coding_ICSE_Grade6_Cover.indd All Pages

Bengaluru

hello@uolo.com �199

NEP 2020 based

ICSE compliant

Technology powered

06/12/23 7:15 PM