Tekie_G6_Coding_CBSE_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

CS_CB_Coding_Grade6_Cover.indd All Pages

Gurugram

Bengaluru

hello@uolo.com �199

NEP 2020 based

NCF compliant

Technology powered

03/12/23 8:01 PM

Computer Science Computer Science

Python I Web Development I

CB_Grade 6.indb 1

12/1/2023 6:37:29 PM

CB_Grade 6.indb 2

12/1/2023 6:37:29 PM

Contents Python 1

Introduction to Python

What Is Programming? Python

Data Types Variables

2 Using Operators in Python

Operators

Algorithms Flowcharts

Writing a Python Program

Using Math Library in Python 3 Conditional Statements in Python

Control Statements

Conditional Statements Solved Examples

Web Development 4 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

CB_Grade 6.indb 3

12/1/2023 6:37:29 PM

5 Creating a Web Page

Structure of an HTML Document Creating an HTML Document

Basic HTML Coding Conventions More HTML Tags

6 Cascading Style Sheets

Introduction to CSS

CSS Colour Properties CSS Font Properties

CSS Border Property

CB_Grade 6.indb 4

12/1/2023 6:37:29 PM

Introduction to Python

What Is Programming? Programming is the process of giving instructions to tell a computer to perform a specific task. But instead of giving the instructions verbally, you write them down in a structured manner in a language that a computer can understand. This language is called a programming language. A programming language has its own vocabulary and syntax or rules just like we have in English, Hindi, and other languages.

Python Python is a high-level programming language that is easy to learn and simple to use. It is a powerful language used for general-purpose programming. It was created by Guido van Rossum and first released in 1991.

Features of Python Let’s learn about some of the features of Python. 1 Easy to code: The language used to write Python codes is similar to the English language, making it easy for programmers to write and understand code. 2 Cross-platform compatibility: Python can be used on various operating systems, including Windows, macOS, and Linux. 3 Open-source language: An open-source language is the one which can be easily improved and distributed by anyone. Python is available for download and use at no cost. 4 GUI application creation: Python also supports the creation of Graphical User Interface (GUI) applications.

Did You Know? Python is named after a famous British comedy group called Monty Python.

5 Interactive execution modes: Python offers script and interactive modes for running programs. The code can be interactively tested and debugged in the interactive mode. In this mode, only one statement is executed, whereas the script mode allows you to execute a set of statements at a time. 6 Interpreted language: Python is an interpreted programming language, which means that the code is executed line by line. This can make it easier to identify and correct errors as they occur as you do not need to wait for the entire program to be compiled before running it. 7 Dynamic typing: Python defines data type dynamically for the objects according to the value assigned. Also, it supports dynamic data type checking.

CB_Grade 6.indb 1

12/1/2023 6:37:29 PM

Applications of Python Python is a versatile programming language with a wide range of applications across various domains. Some of the key applications of Python are:

• Programming and coding: Python is a versatile programming language used to create software, games, and applications.

• Web development: Python is used to build web applications and websites.

• Data analysis: Python helps analyse data for making decisions in various fields, including science and business.

• Artificial intelligence: Python helps create computer programs that can chat with you, recognise your voice, etc., making computers smarter.

• Scientific research: Scientists use Python to process and analyse data in research, from studying diseases to exploring space.

Syntax Programming languages have their own set of rules for writing. These rules called syntax tell us how to define structure and organise code in a programming language. Python too has its own rules. One important rule in Python is that it is case-sensitive. This means that ‘num’, ‘Num’, and ‘nUm’ have different meanings.

Think and Tell Will a syntax error stop a program from running?

CB_Grade 6.indb 2

12/1/2023 6:37:30 PM

Built-in Functions A function is a block of code used to perform a specific task. Built-in functions are the functions that are already defined in Python. You can use them as many times as you want without defining them again. In Python, there are numerous built-in functions readily available. These functions help simplify and accelerate the development of programs. One such built-in function is the input () function. The input () Function The input () function of Python is used to read input from a user. Syntax: input (prompt) The prompt is a message that is displayed on the screen to instruct the user on what input is expected. The input () function always returns a string value (text) even if you entered a number as input. Example: Code

Output

name = input(‘Enter your name:’)

Enter your name: Neha

In this example, a user is prompted with ‘Enter your name:’, and the user’s input is ‘Neha’. Let us now learn about another built-in function of Python: the print () function. The print() Function The print() function helps you to see the results of your code and understand how it is working. Syntax: print(prompt) The prompt is a message or value that you display on the screen. Example: Code

Output

print (‘Hello World!’)

Hello World!

Data Types A data type specifies the type of value a variable can contain. A data type also determines how data is stored in memory. For example, a student’s name should be stored as a string value because a string data type is used to represent text or a sequence of characters. A student’s age should be stored as an integer as the value of age must be a whole number. Also, the student’s weight should be stored as a floating-point number because the weight may have a decimal part. Data types in Python are: 1 int: Positive or negative whole numbers (without any fractions or decimals). Example: 30, 180, 89, etc. 2 float: Any real number with decimal points. Example: 6.3, 9.5, 320.0, etc.

Chapter 1 • Introduction to Python

CB_Grade 6.indb 3

12/1/2023 6:37:30 PM

3 string: A string value is a collection of one or more characters put in a single or double quotes. Example: ‘Python’, ‘hello’, ‘1495’, etc.

Variables A variable is a reference name given to a location in a computer’s memory. The names given to the variables are known as identifiers. Variables allow you to store a value on that location and refer to it as needed. Variables are dynamic, meaning their values can be changed as the program runs.

Creating a Variable

• In Python, variables are declared and initialised by assigning a value to a variable. Syntax: variable_name = value Example: Code

Output

number = 5

5 Stars

word = “Stars”

print(number, word)

• You can also assign a single value to multiple variables at the same time. Syntax: var1 = var2 = value Example: Code

Output

number1 = number2 = 10

number 1 = 10

print(“number 1 =”, number1) print(“number 2 =”, number2)

number 2 = 10

• You can also initialise multiple values to multiple variables in one line. Syntax: var1, var2 = value1, value2 Example: Code

Output

number, word = 5, “Stars”

5 Stars

print(number, word)

Rules for Naming a Variable There are certain rules to name a variable. Let us learn about these rules. 1 Spaces are not allowed when naming variables. You can instead use an underscore (_) symbol. 2 A variable name can contain only alphanumeric characters (all the letters of the alphabet and numbers) and underscores (_). 3 Variable names cannot contain any special character or symbol. For example, v@lue is an invalid name for a variable.

CB_Grade 6.indb 4

12/1/2023 6:37:30 PM

4 A variable name must start with a letter or an underscore (_) symbol. This name cannot start with a number. Examples of valid names for a variable: My_variable_1 _my_variable2 Examples of invalid names for a variable: 1myvariable 2_myvariable 5 Variable names are case sensitive. For example, value, Value, and VALUE are three different variables. Example: Code

Output

my_variable = 10

My_Variable = 20

MY_VARIABLE = 30 print(my_variable)

20 30

print(My_Variable)

print(MY_VARIABLE)

Dynamic Typing Dynamic typing in Python means that you can assign a value to a variable, and the variable automatically takes the data type of that assigned value at runtime. In other words, you do not have to specify the data type of a variable when you declare it; Python figures it out for you based on the value assigned to it. The type() Function In Python, we use the type() function to check the dynamic data type assigned to a variable. It is a built-in function that returns the type of an object. The object can be a variable, a value, or an expression. Syntax: type(object_name) Example: Code

Output

text1 = input (“Enter your name:”)

Enter your name: Grisha

num1 = input (“Enter your age:”) print(type(text1))

print(type(num1))

Enter your age: 10 <class ‘str’> <class ‘str’>

The input() function always returns a string value, even if it takes a number, string, or any other value as input. And, as you have assigned user input to the two variables, both the variables are of the string type.

Chapter 1 • Introduction to Python

CB_Grade 6.indb 5

12/1/2023 6:37:30 PM

Example: Code

Output

x=5 y = “Hello” z = 3.14 result = x + 2.5 print(type(x)) print(type(y)) print(type(z)) print(type(result))

In this example, we use the type() function to check the data types of the variables x, y, and z, as well as the result of an expression. The dynamic data typing in Python makes the variables change their data type based on the assigned value.

Do It Yourself 1A 1

What will be the output of the given code?

Code

Output

a = 10 print(type(a)) b = 4.2 print(type(b)) c=a+b print(type(c)) 2

What is the full form of GUI?

Chapter Checkup A

Fill in the Blanks. Hints

type()

string

Python was created by

In Python, we use the

The names given to the variables are known as

The input() function always returns a

identifiers

syntax

Guido van Rossum

. function to check the dynamic data type assigned to a variable. . value.

are the rules that tell us how to define structure, format, and organisation of code in a 5 programming language.

CB_Grade 6.indb 6

12/1/2023 6:37:31 PM

Tick () the Correct Option. 1

The language used to write Python codes is similar to the

a Chinese 2

b German

b float

b 1_color

a print() A

b input()

string

d All of these

&color

d color 1

type()

d output()

b Variable

Function

d Syntax

Write T for True and F for False. 1

Python is a low-level programming language.

Python offers the script and interactive modes for running programs.

Python helps create computer programs that can chat with you, recognise your voice, etc.

Any real number with decimal points has the string data type.

A variable name can start with a number.

Answer the Following. 1

Define a prompt.

State any two features of Python.

Differentiate between the int and float data types.

Explain dynamic typing.

Chapter 1 • Introduction to Python

CB_Grade 6.indb 7

is a reference name given to a location in the computer’s memory.

a Data type

d French

function helps you see the results of your code.

English

Which of the following is a valid variable name?

a Color_1

Which of the following is a data type in Python?

a int 3

language.

12/1/2023 6:37:31 PM

What are the applications of Python in the field of AI?

Apply Your Learning. 1 What will be the output of the following program?

x = input (‘Enter your name:’)

z = input (‘Enter your contact number:’)

y = input (‘Enter your height:’)

print(type(x)) print(type(y)) print(type(z))

fruit = ‘apple’

Fruit = ‘orange’

print(fruit)

name, grade = ‘Namit’, 6

print(name, grade)

2 Rohan wants to declare a variable in his program, but he is unaware of the rules for naming a variable. Help him by mentioning all the rules you have learnt.

3 Shivam is creating a Python program. He has heard that Python has built-in functions to simplify and speed up the development of programs. Name any two built-in functions that he can use.

4 What will be the data type of the values that these variables hold? a num1 = 10

b var1 = ‘How are you?’

CB_Grade 6.indb 8

12/1/2023 6:37:31 PM

value_of_pi = 3.14

d average = 35.9

5 Find the errors in the following statements: a 123var1=10

b Name1=Seema

Hello=input(Enter your name)

d type(python)

Chapter 1 • Introduction to Python

CB_Grade 6.indb 9

12/1/2023 6:37:31 PM

Using Operators in Python

21 Operators

Python is a language in which you can perform various operations. To perform these operations, operators and operands are required. An operator is a symbol that is used to perform operations on variables or on values. The values or variables are called operands. The combination of operands and operators is called an expression.

Operators

x + y = z

In the adjoining picture, x, y, and z are operands. The ‘+’ and ‘=’ symbols are called operators. The combination of x, y, z, ‘+’, and ‘=’ is called an expression.

Operands

Operand

Types of Operators The Python language supports the following types of operators:

• Arithmetic operators • Assignment operators • Relational/Comparison operators • Logical operators

Let us discuss all the operators one by one. Arithmetic Operators These operators are used with numeric values to perform common mathematical operations. Arithmetic operators supported by Python are listed in the following table. For the examples given below, consider the values x = 100 and y = 3. Operator

Name

Description

Example

Output

Addition

Adds two operands

x+y

103

−

Subtraction

Subtracts the value of one operand from the other

x−y

Multiplication

Multiplies two operands

x*y

300

Division

Displays the quotient when the first operand is divided by the second

x/y

33.3333…

CB_Grade 6.indb 10

12/1/2023 6:37:31 PM

Operator

Name

Description

Example

Output

Floor Division

Divides the operand on the left by the operand on the right and returns the quotient by removing the decimal part. Sometimes, it is also called integer division

x // y

Modulus (Remainder)

Displays the remainder when the first operand is divided by the second

x%y

Exponentiation (Power)

Raises the first operand to the power of the second

x ** y

1000000

Assignment Operators Assignment operators are used to assign values to variables. The following table summarises the various assignment operators: Operator

Description

Example

Same As

Assigns the right-hand side value to the left-hand side variable.

x = 11

Adds the right operand to the left operand and then assigns the result to the left operand.

x += 11

x = x + 11

−=

Subtracts the right operand from the left operand and then assigns the result to the left operand.

x −= 11

x = x − 11

Multiplies the right operand with the left operand and then assigns the result to the left operand.

x *= 11

x = x * 11

Divides the left operand with the right operand and then assigns the result to the left operand.

x /= 11

x = x / 11

Calculates the modulus using two operands and then assigns the result to the left operand.

x %= 11

x = x % 11

//=

Performs floor division on operators and then assigns the value to the left operand.

x //= 11

x = x // 11

**=

Performs exponential calculation on operators and then assigns the value to the left operand.

x **= 11

x = x ** 11

Relational/Comparison Operators These operators are used to compare two values. The comparison operators are also known as Relational Operators. The following table summarises the various types of relational operators used in Python. Consider the values x = 100 and y = 3 for the examples in the following table: Operator

Description

Example

Output

Returns true if the left-hand side value is equal to the right-hand side value; otherwise, it returns false.

x==y

False

Returns true if the left-hand side value is not equal to the righthand side value; otherwise, it returns false.

x != y

True

Chapter 2 • Using Operators in Python

CB_Grade 6.indb 11

12/1/2023 6:37:32 PM

Operator

Description

Example

Output

Returns true if the left-hand side value is greater than the right-hand side value; otherwise, it returns false.

x>y

True

Returns true if the left-hand side value is smaller than the right-hand side value; otherwise, it returns false.

x<y

False

Returns true if the left-hand side value is greater than or equal to the right-hand side value; otherwise, it returns false.

x >= y

True

Returns true if the left-hand side value is smaller than or equal to the right-hand side value; otherwise, it returns false.

x <= y

False

Logical Operators These operators are used to combine conditional statements. Logical operators evaluate to True or False based on the operands on their either side. There are three logical operators in Python, as summarised in the following table. Consider the value x = 2 for the examples given below: Operator

Description

Example

Output

And

Returns true if the statements on the left-hand side as well as the right-hand side are true.

x < 5 and x < 10

True

Returns true if any one of the statements is true.

x < 5 or x < 1

True

Not

Reverses the result and returns false if the result is true.

not(x < 5 and x < 10)

False

Operator Precedence If there are more than one operator in an expression, then we need to follow operator precedence to evaluate the expression. Operator precedence describes the order in which operations are to be performed on the operand. You need to follow the PEMDAS rule for evaluating the mathematical expressions. The PEMDAS rule is as follows:

• P—Parentheses • E—Exponentiation • M—Multiplication (Multiplication and division have the same precedence.) • D—Division • A—Addition (Addition and subtraction have the same precedence.) • S—Subtraction

The following table describes the precedence level of the operators from the highest to the lowest: Precedence Level

Operator

Explanation

Exponentiation

1 (highest) 3

()

−a, +a

Parentheses

Negative, positive argument

CB_Grade 6.indb 12

12/1/2023 6:37:32 PM

Precedence Level

Operator

Explanation

+, −

Addition, subtraction

*, /, //, %, @

<, <=, >, >=, ==, !=

not

and

Multiplication, division, floor division, modulus, at Less than, less than or equal, greater, greater or equal, equal, not equal Boolean Not

Boolean And Boolean Or

Let us evaluate the following expression to understand operator precedence. Evaluate: 16 / 4 + (8 + 3) Solution: Step 1: 16 / 4 + (8 + 3) Step 2: 16 / 4 + 11 Step 3: 4 + 11 Step 4: 15 Observe in this example that the order of precedence is changed using parentheses (), as it has higher precedence than the division operator. Therefore, the addition operation ‘+’ is performed prior to the division operation as ‘+’ is within the parentheses.

Did You Know? Python gives more precedence to arithmetic operators than comparison operators. Within comparison operators, every operator has the same precedence order.

Do It Yourself 2A What will be the output of the following expressions? 1

(10 + 15 /5 * 8 // 2)

(10 > 6 + 3 − 1)

100 / 10 * 10

5 − 2 + 3

Algorithms Any problem can be solved if a specific sequence of steps is followed. An algorithm can be defined as a logical, step-by-step procedure for solving a problem. You need to provide a set of inputs to the algorithm, and the algorithm provides you the output. Let us understand using an example. You follow a certain routine in the morning to get ready for school. Let us look at the steps that you follow: 1 Wake up at your scheduled time. 2

Brush your teeth and take a bath.

Chapter 2 • Using Operators in Python

CB_Grade 6.indb 13

12/1/2023 6:37:32 PM

3 Eat breakfast.

While writing an algorithm, there are rules that you must follow:

Time to wake up

Time to get ready

1 Start with a clear goal.

4 Leave for school.

Rules for Writing an Algorithm

2 Use a simple and precise language. 3 Break tasks into smaller steps. 4 Provide clear and logical instructions. 5 Ensure that you get a tangible output at the end.

Breakfast time

Let us now write an algorithm for calculating the sum of two numbers.

Time to leave for school

1 Start 2 Input the first number, say num1 3 Input the second number, say num2 4 Use another variable to store the sum, say sum 5

Initialise sum to 0, i.e., sum = 0

6 Calculate sum: sum = num1 + num2 7 Display sum 8 Stop

Flowcharts A flowchart is a graphical or visual representation of an algorithm that uses various symbols, shapes, and arrows to show a process or program. A flowchart helps a user readily understand a problem. The primary goal of using a flowchart is to evaluate various ways to solve a problem.

Symbols Used for a Flowchart A flowchart consists of a number of standard symbols. The following symbols indicate various elements of a flowchart: Name of the Symbol

Shape of the Symbol

Purpose of the Symbol

Terminal Box—Start/End

It is used at the beginning and end of a flowchart.

Input/Output

It is used to provide input and output information.

CB_Grade 6.indb 14

12/1/2023 6:37:32 PM

Name of the Symbol

Shape of the Symbol

Purpose of the Symbol

Process

It is used for processing and calculating statements.

Decision

It is used when a condition is applied in the process.

Arrow

It represents the direction of the process.

Example: Write an algorithm to convert temperature value from Fahrenheit (°F) to Celsius (°C) and draw a flowchart for the same. Algorithm:

Flowchart:

Step 1: Start

Start

Step 2: Read temperature in Fahrenheit, say F Step 3: Apply the formula to calculate the value in Celsius, i.e., C=5/9*(F−32) Step 4: Display the value of C

Read F C=5/9*(F – 32)

Step 5: Stop Print C End

Do It Yourself 2B Write algorithms and draw flowcharts for the following: 1

To calculate the average of three numbers.

To create a calculator for addition, subtraction, multiplication, and division.

To calculate the simple interest on a given principal, rate of interest, and time.

To calculate the area and circumference of a circle.

To calculate the perimeter of a rectangle.

Chapter 2 • Using Operators in Python

CB_Grade 6.indb 15

12/1/2023 6:37:33 PM

Writing a Python Program When you communicate with your friends, you use a language. Every language has a grammar that you need to follow to make proper sentences. Similarly, in the Python language, you need to follow certain rules for writing programs. These rules are called syntax. Syntax is like the grammar rules for writing code in a programming language. In the previous chapter, you learnt about input() and print() functions. Let us create some programs using these functions and see how they work. 1 Write a Python program to display Hello World on the screen. Code

Output

print(“Hello World”)

Hello World

Let us analyse the code: The print() function is used to print the statement given inside the double quotes, that is, the string ‘Hello World’ is displayed in the output area. 2

Write a Python program to get a string input from the user and display it. Code

Output

str = input(“Enter any string:”)

Enter any string: Ritu Singh

print(str)

Ritu Singh

Let us analyse the code: Line 1: The input() function is used to take input from the user. On the output screen, the message ‘Enter any string:’ is displayed, and the console waits for the user to enter any string. The value entered is stored in the variable ‘str’. Line 2: The print() function is used to display the value stored in the variable ‘str’ on the output screen. 3

Write a Python program to add two numbers. Code

Output

val1 = 100.99

The sum of given numbers is: 177.14

val2 = 76.15

sum = float(val1) + float(val2)

print(“The sum of given numbers is:”, sum) Let us analyse the code: Line 1 and 2: Two variables val1 and val2 are assigned the values 100.99 and 76.15, respectively. Line 2: The two numbers are added, and their sum is stored in the sum variable. Line 3: The print() function displays the statement, “The sum of given number is:” along with the value of the sum.

CB_Grade 6.indb 16

12/1/2023 6:37:33 PM

Do It Yourself 2C 1

Write a Python program to convert Celsius to Fahrenheit.

Write a Python program to convert metres into centimetres.

Write a Python program to calculate the area of a square.

Write a Python program to input your name and age and display them.

Using Math Library in Python In the previous section, you have learnt about the basic arithmetic operators. Apart from using these arithmetic operators, there are various mathematical operations for which Python has many built-in methods. These methods or functions are stored in a library known as the math library of Python. Let us learn some of these functions.

Built-in Math Functions The min() and max() functions: The min() and max() functions can be used to find the lowest or highest value. Code

Output

x = min(5, 10, 25)

y = max(5, 10, 25) print(x)

print(y)

The abs() function: The abs() function returns the absolute (positive) value of a specified number. Code

Output

x = abs(−7.25)

7.25

print(x)

The pow() function: The pow(x, y) function returns the value of x raised to the power of y (xy). Code

Output

x = pow(4, 3)

print(x)

Chapter 2 • Using Operators in Python

CB_Grade 6.indb 17

12/1/2023 6:37:33 PM

The sqrt() function: The sqrt() function returns the square root of a given number. Code

Output

x = sqrt(81)

print(x)

Do It Yourself 2D 1

Write a Python program to find the minimum of five given numbers.

Write a Python program to find 6 raised to the power of 3.

Chapter Checkup A

Fill in the Blanks. Hints

pow(x, y)

The

is a logical step-by-step procedure for solving a problem.

is a symbol that performs mathematical operations on variables or on values.

Operator

algorithm

logical

precedence

describes the order in which operations are performed. operators are used to combine conditional statements.

4 5

operator

The

function returns the value of x to the power of y (xy).

Tick () the Correct Option. 1

Which is the correct operator for calculating the power(xy)?

a X^y 2

b X**y

X^^y

d x*y

d #

Which of these is the floor division operator?

a /

b //

CB_Grade 6.indb 18

12/1/2023 6:37:33 PM

What is the order of precedence of operators in Python?

ii Parentheses

Exponential

iii Multiplication

iv Division

vi Subtraction

Addition

a i, ii, iii, iv, v, vi

b ii, i, iii, iv, v, vi

d i, ii, iii, iv, vi, v

i, ii, iv, iii, v, vi

What is the answer of this expression: 22 % 3?

a 7 5

d 5

Which of the following has the highest precedence in an expression?

a Exponential C

b 1

b Addition

Multiplication

d Parentheses

Who Am I? 1

I’m a set of rules to be followed for writing Python programs.

I’m a built-in Math function that returns the square root of a number.

I’m at the highest precedence of arithmetic operators.

I’m the operator which compares two values.

I’m the arithmetic operator which returns the remainder of two values.

Write T for True and F for False. 1

The expression 2 ** 3 ** 2 is equivalent to 2 ** (3 ** 2).

Operands (values) operate on operators and return a result.

The value of the expression 100/25 is 0.

4 A flowchart is a graphical or visual representation of an algorithm that uses various symbols, shapes, and arrows to show a process or program. 5

Python gives arithmetic operators more precedence than comparison operators.

Chapter 2 • Using Operators in Python

CB_Grade 6.indb 19

12/1/2023 6:37:33 PM

Answer the Following. 1

What is the difference between the * and ** operators in Python?

What do you mean by an assignment statement?

What is the order in which operations are evaluated? Write the order of precedence.

Give an example each of the min() and max() functions.

Explain the concept of floor division.

Apply Your Learning. 1

What will be the output of the following? 100 + 200 / 10 − 3 * 10

Write a Python program to convert the distance entered in metres to kilometres.

Write a Python program to calculate your body mass index (BMI).

Write an algorithm for making a vegetable sandwich.

Draw a flowchart for showing the progress of a plant’s growth.

CB_Grade 6.indb 20

12/1/2023 6:37:33 PM

Conditional Statements in Python

Control Statements Control statements in the Python programming language are used to manage the sequence of execution within a program. It allows you to make decisions, repeat actions, and control the overall flow of your code. These statements will ensure that a program will move smoothly and purposefully. Here are the main types of control statements in Python:

• Sequential Statements • Conditional Statements • Iterative Statements or Loops

Until now, you have learnt only to write programs using sequential statements. Let us now learn about conditional statements.

Conditional Statements Using conditional expressions, we may tell a computer to look for a specific condition and to take action if the condition occurs. These statements enable you to execute various sections of code, based on whether a given condition is true or false. For example: If it rains, I will stay at home.

Types of Conditional Statements In Python, there are three types of conditional statements that allow us to make decisions in our programs. These include the:

• if Statement • if...else Statement • if-elif-else Statement The if Statement

The ‘if’ statement is used to evaluate a condition and execute a code block if the condition evaluates to true. Otherwise, the code block will be skipped. You should use the if keyword to write an “if statement”. Syntax: if condition: # Statement to execute if condition is true

CB_Grade 6.indb 21

12/1/2023 6:37:34 PM

Example: Code

Output

num = 10 if num > 9: print(“number is greater than 9”)

number is greater than 9

In the above program, a variable num is assigned a value 10. The condition in the if statement checks whether the value of num variable is greater than 9 or not. If it is greater than 9, then the statement that follows the if statement is executed and the message “number is greater than 9” is displayed. Otherwise, the control comes out of the program. Indentation in Python Indentation refers to the space at the beginning of a code line. In Python, indentation is used to define blocks of code. It is a fixed number of spaces added at the beginning of each line of code. It is used to define the hierarchy and structure of the code. The statements at the same level of indentation are considered to be a part of the same block. Consider the following if statement:

Think and Tell

(_____)statement

What happens if there is no indentation in a Python program?

if condition: Indentation Example: Code

Output

num1 = 50 num2 = 100 if num1<num2: print(“num1 is less than num2”)

File “demo_if_error.py”, line 4 print(“x is greater than y”) ^ IndentationError: expected an indented block

Observe in the above code, line3 and line 4 are at the same indentation level, but line 4 must be a part of the ‘if’ statement; therefore, there must be some indentation before ‘line 4’: The corrected code is as follows: Code

Output

num1 = 50 num2 = 100 if num1<num2: print(“num1 is less than num2”)

num1 is less than num2

The if…else Statement In the previous section, you learnt that output is displayed only in the case when the condition results to be true. In case the condition evaluates to be false, then there will be no output. What if you want to display a message even in case the condition evaluates to be false? In Python, you can use the if…else statement for this purpose. Using the if...else statement, the block of code after the if statement is executed if the condition is true, and the block of code after the else statement is executed if the condition is false.

CB_Grade 6.indb 22

12/1/2023 6:37:34 PM

Syntax: if condition: #Statements to be executed if condition becomes True else: #Statements to be executed if condition becomes False

Discuss

What is the role of the else statement in conditional statements?

Example: Code

Output

num = 7 if num > 9: print(“number is greater than 9”) else: print(“number is not greater than 9”)

number is not greater than 9

Explanation: 1 In this program, the variable num is assigned a value 7. 2 The condition given in the if statement checks whether the value of num variable is greater than 9 or not. 3 If it is greater than 9, then the statement that follows the if statement is executed and the message “number is greater than 9” is displayed. 4 Otherwise, the statement following the else part is executed and the message “number is not greater than 9” is displayed. if-elif-else Statement The if-elif-else statement is an extension of the if...else statement. The if-elif-else statement allows you to check multiple conditions in a program. Python checks each condition until any one of them is true. Syntax: if condition1:

Statement1 elif condition2: Statement2 elif condition 3: .. .. else:

Did You Know? Python allows you to chain multiple comparisons together, making complex conditions more readable. For example, if 1 <= x <= 10.

Final_Statement Explanation:

• If condition1 becomes true, then the statement1 is executed, and the rest of the statements is ignored. • Otherwise, the interpreter moves on to condition2. if it becomes true, then it executes Statement2. • This process continues until a true condition is found. Otherwise, the ‘else’ statement is executed if none of the conditions are true.

Chapter 3 • Conditional Statements in Python

CB_Grade 6.indb 23

12/1/2023 6:37:34 PM

Example: Code

Output

num1 = 50 num2 = 100 if num1 > num2: print(“num1 is greater than num2”) elif num1 == num2: print(“Numbers are equal”) else: print(“num1 is less than num2”)

num1 is less than num2

1 In this program, the values of num1 and num2 are 50 and 100, respectively. 2 The condition with the if statement is checked. In this case, the condition evaluates to false. 3 The control will move on to the elif part. 4 The condition num1 == num2 is checked, which is also false. 5 So, the control moves to the else part directly and the statement “num1 is less than num2” is executed and hence displayed in the output.

Solved Examples Example 1 Write code in Python to check if an integer is positive or negative. Code

Output

number = 15

Given number is positive

if number > 0:

print(“Given number is positive”)

else:

print(“Given number is negative”)

Example 2 Write code in Python to check whether a given number is divisible by 5 or not. Code

Output

number = 50

Given number is divisible by 5

if number % 5 == 0:

print(“Given number is divisible by 5”)

else:

print(“Given number is not divisible by 5”)

CB_Grade 6.indb 24

12/1/2023 6:37:34 PM

Example 3 Write code in Python to compute the average of 3 subjects. Input the marks from the student. Code

Output

subject1 = float(input(“Enter marks for subject 1: “)) subject2 = float(input(“Enter marks for subject 2: “)) subject3 = float(input(“Enter marks for subject 3: “)) total_marks = subject1 + subject2 + subject3 average = total_marks / 3 print(“Average is:”, average)

Enter marks for subject 1: 68 Enter marks for subject 2: 52 Enter marks for subject 3: 72 Average is: 64.0

Coding Challenge

Write a Python program to check the marks of a student and print the remark accordingly. You can refer to the following criteria:

Marks in the range 91 to 100

Excellent

81 to 90

Very Good

61 to 70

Average

71 to 80

Good

51 to 60

Fair

41 to 50

Try Again

Chapter Checkup A

Fill in the Blanks. Hints

none of the conditions

hierarchy and structure

any one

Indentation in Python is used to define

The ‘if-elif-else’ statement allows you to check multiple conditions until

The ‘if’ statement is used to evaluate a condition, and if the condition is true, a specified

The ‘else’ part of the ‘if...else’ statement is executed if

code block

of code. condition is true.

is true.

Tick () the Correct Option. 1

What is the purpose of the ‘else’ part in an ‘if...else’ statement?

a To execute when the condition is true

b To handle exceptions

d To terminate the program

To execute when the condition is false

Chapter 3 • Conditional Statements in Python

CB_Grade 6.indb 25

is executed.

12/1/2023 6:37:34 PM

Which control statement is used to check multiple conditions until one of them is true?

a if Statement b for Loop c 3

while Loop d if-elif-else Statement

In Python, which keyword is used to define an ‘if’ statement?

a when b then c 4

if d condition

What is the output of the given code?

a=5

if b > a:

b = 20

print(“b is greater than a”)

a b is greater than a c 5

b a is greater than b

indentation error d None of these

What is the output of the given code? x = 15

if x > 10:

print(“Above 10”)

else:

print(“Below 10”)

a Above 10 b Below 10 c C

Error d None of these

Who Am I? 1

I’m a Python control statement used to evaluate a condition and execute a code block if the condition is true.

I’m used to check multiple conditions in Python.

I’m a Python control statement used to evaluate a condition and execute a code block if the condition is false.

Write T for True and F for False. 1

Indentation is optional in Python.

2 The ‘if-elif-else’ statement allows you to check multiple conditions, but only one block of code is executed. 3

Indentation refers to the space at the beginning of a code line.

In an ‘if... else’ statement, both the ‘if’ and ‘else’ blocks are executed if the condition is true.

CB_Grade 6.indb 26

12/1/2023 6:37:34 PM

Answer the Following. 1

What are control statements? How many types of control statements are there in Python?

What do you mean by conditional statements? How many types of conditional statements are used in Python?

Explain the purpose of indentation in Python code.

Differentiate between the ‘if’ statement and the ‘if... else’ statement in Python.

How does the ‘if-elif-else’ statement work in Python?

Apply Your Learning. 1

Write a Python program that checks if a given number is even or odd and prints an appropriate message.

Write a Python program that prints the absolute value of a given number after checking its sign.

3 Write a Python program that determines whether a given year is a leap year or not and prints the result. [Hint: If a year’s value is divisible by 4, then it is a leap year.]

4 Write a program to input the age of a person and check whether they are eligible for the driving licence or not. A person is eligible to have a driving licence if he is above 18 years of age.

5 Write a Python program to check whether it is possible to make a triangle or not. A triangle is possible if the sum of all its angles is equal to 180 degrees.

Chapter 3 • Conditional Statements in Python

CB_Grade 6.indb 27

12/1/2023 6:37:35 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. • Platform-independent: HTML can create web pages that run on any device (computers, mobiles, and 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.

CB_Grade 6.indb 28

12/1/2023 6:37:35 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 4A 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 4 • Introduction to HTML

CB_Grade 6.indb 29

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/1/2023 6:37:35 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 4B 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.

CB_Grade 6.indb 30

12/1/2023 6:37:36 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 4 • Introduction to HTML

CB_Grade 6.indb 31

12/1/2023 6:37:36 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.

CB_Grade 6.indb 32

12/1/2023 6:37:36 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 4 • Introduction to HTML

CB_Grade 6.indb 33

12/1/2023 6:37:36 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 4C Match the tags with their meanings. Tag

Meaning

Italics

Horizontal rule

Underline

Line break

Bold

CB_Grade 6.indb 34

12/1/2023 6:37:36 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 4 • Introduction to HTML

CB_Grade 6.indb 35

12/1/2023 6:37:36 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.

CB_Grade 6.indb 36

12/1/2023 6:37:36 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 4 • Introduction to HTML

CB_Grade 6.indb 37

12/1/2023 6:37:37 PM

51 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. 38

CO24CB0605_P1.indd 38

12/6/2023 4:35:04 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 5 • Creating a Web Page

CB_Grade 6.indb 39

12/1/2023 6:37:37 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.

CB_Grade 6.indb 40

12/1/2023 6:37:37 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 5 • Creating a Web Page

CB_Grade 6.indb 41

12/1/2023 6:37:37 PM

Do It Yourself 5A 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>

CB_Grade 6.indb 42

12/1/2023 6:37:37 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 5 • Creating a Web Page

CB_Grade 6.indb 43

12/1/2023 6:37:37 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!

CB_Grade 6.indb 44

12/1/2023 6:37:37 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 5 • Creating a Web Page

CB_Grade 6.indb 45

12/1/2023 6:37:38 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?

CB_Grade 6.indb 46

12/1/2023 6:37:38 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 5 • Creating a Web Page

CB_Grade 6.indb 47

12/1/2023 6:37:38 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.

CB_Grade 6.indb 48

12/1/2023 6:37:38 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 6 • Cascading Style Sheets

CB_Grade 6.indb 49

12/1/2023 6:37:38 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 6A 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.

CB_Grade 6.indb 50

12/1/2023 6:37:38 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 6 • Cascading Style Sheets

CB_Grade 6.indb 51

12/1/2023 6:37:38 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;

CB_Grade 6.indb 52

12/1/2023 6:37:38 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 6 • Cascading Style Sheets

CB_Grade 6.indb 53

12/1/2023 6:37:38 PM

Do It Yourself 6B 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

CB_Grade 6.indb 54

12/1/2023 6:37:39 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 6 • Cascading Style Sheets

CB_Grade 6.indb 55

12/1/2023 6:37:39 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.

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.

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

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.

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

CO24CB0606_P1.indd 56

12/6/2023 4:38:07 PM

Singapore

CS_CB_Coding_Grade6_Cover.indd All Pages

Gurugram

Bengaluru

hello@uolo.com �199

NEP 2020 based

NCF compliant

Technology powered

03/12/23 8:01 PM