CS_Java I + Web Development II_G7_ICSE_AY24 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_Grade7_Cover.indd All Pages

Bengaluru

hello@uolo.com `xxx

NEP 2020 based

ICSE compliant

Technology powered

06/11/23 4:28 PM

ICSE Computer Science

Computer Science

Java I Web Development II

CODE_ORG CODING BOOKLET_LO_ED_FM_P1.indd 1

11/6/2023 8:15:39 PM

Contents Java 1

Introduction to Java

Introduction to Programming Introduction to Java Variables

Data Types Operators

Web Development 2 Introduction to Web Development

HTML

Basic Structure of an HTML Document Basic HTML Terminologies CSS

3 Images and Hyperlinks in HTML

Adding Images Styling Images Flexbox

Hyperlinks 4 Lists and Tables in HTML

Adding Lists Styling Lists Tables

C024_Co70.indb 2

11/6/2023 7:20:16 PM

Introduction to Java

Introduction to Programming Hello, students! You are probably aware that a computer is an electronic machine. It is an incredibly versatile machine that plays a crucial role in various fields, including education, medicine, business, and more. However, a computer cannot operate on its own. It requires specific instructions to perform tasks. These instructions are not typically in human-readable languages, such as English, Japanese, or French. To make a computer function, we use a special language known as a programming language to communicate with it. Programming languages allow us to write instructions for a computer, and a collection of these instructions is called a program. The process of writing programs for computers in a particular programming language is called programming.

Types of Programming Languages Programming languages have also evolved over time, just like computers. With the development of computer technologies, programming languages have also developed over a period of time. They have now become machine-independent and easy to use by the programmers. The main types of programming languages are: Low-level languages: As the computers are electronic machines, their working depends on electrical signals. These signals are coded into 0s and 1s, which are called binary digits or bits. The programs that are written using bits are called low-level language programs, and the language is called a low-level programming language or machine language. High-level languages: It is difficult for human beings to write or understand a program written in machine language. So, for the convenience of programmers, other programming languages were developed, using which they can write programs in an easy way. These languages are called high-level languages. Examples of high-levellanguages are C, C++, Java, and Python. In this book, you will learn about Java. Let’s get started.

Introduction to Java Java is a versatile and widely used programming language. It is known for its simplicity, flexibility, and platform independence, which means that Java programs can run on any device or platform that has a Java Virtual Machine (JVM). Java is often used for building Android mobile applications, web servers, scientific applications, and more. Java is a high-level programming language. Being high-level means that it is designed to be human-readable and understandable, which makes it easier for programmers to write code without the need to understand the intricate details of the computer’s hardware.

Did You Know? Java was developed by James Gosling and his team at Sun Microsystems in the mid-1990s.

C024_Co70.indb 1

11/6/2023 7:20:17 PM

Basic Structure of a Program in Java When you learn any language, you need to follow certain rules called grammar. In programming as well, you need to follow the grammar rules, known as syntax, to write the programs. Let us look at the following program: This code provides the basic structure to write a Java program. public class ClassName { public static void main(String[] args) {

//statement;

} } Explanation: 1

public class ClassName {}

public class: In Java, every program must have at least one class. The public keyword indicates that this class is accessible from any other class. ClassName: This is the name of the class. In Java, class names should start with an uppercase or a capital letter by convention. { }: Curly braces define the scope of the class. All the code for the class goes inside these braces. 2

public static void main(String[] args) { }

public static void main(String[] args) { }: This line defines the main() method. In Java, the main() method is the entry point of any Java application. When you run a Java program, the code inside the main method is executed. String[] args: The value args[] is an array of strings. It allows you to pass arguments to your Java program when you run it from the command line. For example, you can pass numbers and text as arguments. 3 //: This indicates a single-line comment in Java. Comments are ignored by the compiler and are used to describe the code for a developer’s understanding. 4

statement: In a Java program, this is where you would write the logic to perform specific tasks.

Note: All the programs and examples given in this chapter must be placed inside the main() function.

Variables In Java, variables are containers used to store data values. Variables have a data type, such as int (for integers), double (for floating-point numbers), or String (for text), which defines the type of data they can hold.

Declaring Variables To create a variable in Java, you need to declare it with a data type and a name. Here is the basic syntax: Data_type variableName = value;

C024_Co70.indb 2

11/6/2023 7:20:17 PM

Here,

• “Data_type” specifies the type of data the variable can hold (e.g., int, double, String).

• “variableName” is the name given to the variable. • “value” is the initial value you assign to the variable. This value is optional. The process of assigning an initial value to a variable is known as initialisation.

Did You Know? You can change the value of a variable after it is declared. Just assign a new value using the variable name. For example, age=15;

Rules for Naming a Variable There are certain rules you need to follow while naming a variable. Some of these rules are: 1 Special symbols like %, &, *, etc. cannot be used in variable names except underscore (_) and dollar ($). 2 A variable name must start with a letter or the underscore character. 3 As Java is a case-sensitive language, variable names are also case-sensitive.

Did You Know? Java keywords are the reserved words that have a special meaning for the language. For example, int, double, etc.

4 A variable name can have numbers within it but cannot begin with a number. 5

A Java keyword cannot be used as a variable name.

Some examples of valid and invalid variable names are given below: Variable Name

Validity

1num = 100

Invalid

num_1 = 430

Valid

_num2 = 250

Valid

NUM = 45, num=45, Num=45

Valid

greeting%message

Invalid

greeting_message

Valid

Hello Java = “Hello”

Invalid

Data Types In Java, data types are like categories that define what kind of data a variable can hold. Data types help computers understand how to interpret and manipulate data in a program.

Numbers In Java, a number data type is used to store numeric values. Numbers can be integers (whole numbers without decimal points) or floating-point numbers (numbers with decimal points). These data types are essential for performing mathematical operations and representing various quantities in programs. Chapter 1 • Introduction to Java

C024_Co70.indb 3

11/6/2023 7:20:17 PM

• Integers (int): Integers are whole numbers without decimal points. They can be positive or negative, like 1, -5, or 100.

int age = 14;

int population = 1000000;

// Declaring an integer variable named ‘age’ with a value of 14.

// Declaring an integer variable named ‘population’ with a value of 1000000.

• Floating-point Numbers (float/double): Floating-point numbers have decimal points, such as 3.14, -0.5, or 2.718. The data types float and double represent these types, with double allowing more decimal places and being more precise. float pi = 3.14f;

double pi = 3.14;

// ‘f’ is added to indicate the float value.

// Declaring a double variable named ‘pi’ with a value 3.14.

Strings Strings are sequences of characters. They can include letters, numbers, and symbols, forming words, sentences, or any textual data. To declare a string variable, the “String” keyword is used, followed by the variable name. Syntax: String greeting;

String name = “Harman”;

// Declaration without initialisation // Declaration with initialisation

Do It Yourself 1A Match the data types with data they can contain: Column A

Column B

float

77.5

int

String

“Double” 458

Operators Operators are predefined symbols that perform operations on one or more values. These values are knows as operands. The combination of operators and operands is known as an expression. Java supports the following types of operators:

• Arithmetic • Assignment • Comparison • Logical

operands c = a + b; Expression operators

Let us have a look at all the operators one by one.

Arithmetic Operators Arithmetic operators are used with numerical values to perform common mathematical operations. Consider int x=10, y=3.

C024_Co70.indb 4

11/6/2023 7:20:17 PM

Operator

Name

Example

Output

Addition

x+y

Subtraction

x-y

Multiplication

x*y

Division

x/y

3.0

Modulus (Remainder)

x%y

Example 1: Code

Output

public class ArithmeticOperations {

Sum: 13

public static void main(String[] args) { int x = 10; int y = 3; int sum = x + y; int difference = x - y;

Difference: 7 Product: 30 Division: 3.0 Modulus: 1

int product = x * y; double division = x / y; int modulus = x % y; System.out.println(“Sum: “ + sum); System.out.println(“Difference: “ + difference); System.out.println(“Product: “ + product); System.out.println(“Division: “ + division); System.out.println(“Modulus: “ + modulus); } } Precedence of Arithmetic Operators in Java Operator precedence describes the order in which operations are performed. The precedence of arithmetic operators in Java is as follows:

• B – Brackets • E – Exponentiation • M – Multiplication (Multiplication and division have the same precedence.) • D – Division • A – Addition (Addition and subtraction have the same precedence.) • S – Subtraction

Chapter 1 • Introduction to Java

C024_Co70.indb 5

11/6/2023 7:20:17 PM

Assignment Operators Assignment operators are used to assign values to variables: Operator

Example

Same As

x = 15

x += 13

x = x + 13

x -= 13

x = x - 13

x *= 13

x = x * 13

x /= 13

x = x / 13

x %= 13

x = x % 13

Example 2: Code

Output

public class RectangleArea {

The area of the rectangle is: 50.0

public static void main(String[] args) { double length = 10.0; double width = 5.0; double area = length * width; System.out.println(“The area of the rectangle is: “ + area); } }

Relational Operators Relational operators, also known as comparison operators, are used to compare two values. They are used to establish a relationship between two values. Consider int x=10, y=3. Operator

Name

Example

Output

Equals to

x == y

False

Not equals to

x != y

True

Greater than

x>y

True

Less than

x<y

False

Greater than or equal to

x >= y

True

Less than or equal to

x <= y

False

Logical Operators Logical operators are used to combine conditional statements. In a program, if you want to check multiple conditions, then you can use logical operators.

C024_Co70.indb 6

11/6/2023 7:20:17 PM

Operator

Description

Example

Output

and

Returns True, if both the statements are true.

x < 5 and x < 10

false

Returns True, if one of the statements is true.

x < 5 or x<4

false

not

Reverse the result, returns False, if the result is true.

not (x < 5 and x < 10)

Think and Tell Can you use the logical operators with string values as well?

true

Do It Yourself 1B What will be the output of the following expressions: 1

10+15/5*6//2

10>5+3-1

11*4/2-4+5%2

Chapter Checkup A

Fill in the Blanks. human-readable

Hints

class

mathematical

program

int

1 Programming languages allow us to write instructions for a computer, and a collection of these instructions is called a

High-level programming languages are designed to be

and understandable for programmers.

In Java, every program must have at least one

The data type used to store a whole number without a decimal point is

Arithmetic operators are used with numerical values to perform common

operations.

Tick () the Correct Option.

Which of the following are called binary bits?

a 0s and 1s

b A-Z

c 1-9

d & and %

Chapter 1 • Introduction to Java

C024_Co70.indb 7

11/6/2023 7:20:17 PM

What is the entry point of any Java application?

a First line of the code

b main() method

c Class declaration

d Comments

Which of the following is a valid variable name in Java?

a 1num

b num_1

c _num 2

d hello%world

Which data type is used to store whole numbers without decimal points in Java?

a float

b double

c int

d String

What do arithmetic operators in Java perform?

a Logical operations

b Mathematical operations

c Text operations

d Assignment operations

Who Am I? 1

I’m a programming language known for platform independence and flexibility.

I’m a type of programming language that uses 0s and 1s.

I’m the type of operators used to assign values to variables.

I’m a data type used to store numeric values with decimal points.

I’m used to combine conditional statements in Java.

Write T for True and F for False. 1

Java programs can only run on devices with a Java Virtual Machine (JVM).

Low-level languages use binary digits or bits for programming.

Variable names in Java are not case-sensitive.

C024_Co70.indb 8

11/6/2023 7:20:17 PM

Strings in Java are used to store numeric values.

Assignment operators in Java are used to compare two values.

Answer the Following. 1 What is the purpose of a programming language, and why can’t computers understand human-readable languages like English or French?

Describe the basic structure of a Java program, including the significance of the main() method.

Explain the rules for naming variables in Java and provide an example of a valid and an invalid variable name.

Differentiate between high-level and low-level programming languages.

What are data types, and how do they help in programming?

Apply Your Learning. 1 Write a simple Java program that declares an integer variable and initialises it with a value. Print the value on the output screen.

2 Create a Java program to calculate the sum of two numbers and display the result. 3 Create a Java program that calculates the area of a square with side 5. 4

Create a Java program to calculate the amount using the given principal amount, rate of interest, and time.

Create a Java program to calculate the circumference and area of a circle. [Hint: Declare the value of pi = 3.14.]

Chapter 1 • Introduction to Java

C024_Co70.indb 9

11/6/2023 7:20:18 PM

Introduction to Web Development

Web development is the process of designing, building, and maintaining web applications that work on the internet. Imagine you need to make a cardboard house for your school competition project. Before you begin making the project, you need to plan for it. You need to decide how many rooms your cardboard house will have and how they will be arranged. You also need to find out what materials you will need to build it. Once you have your plan ready, you can start building the house by putting together the various parts like walls, roof, and windows. Web development is similar to building a cardboard house; but instead of using cardboard and tapes, you would be using code. When you build a website, you use code to tell the computer how to display the various parts of the website, such as the text, images, and videos.

Did You Know? The first website, CERN, was created in 1989 and is still alive today.

Web development involves multiple tasks, such as:

• Designing the layout and appearance of the website • Writing the code that makes the website work • Adding content to the website, such as text, images, and videos

There are three main types of programming languages used in web development: HTML (HyperText Markup Language): HTML is the markup language used for creating websites. It is also used to structure the content of a website. For example, HTML tags can be used to tell the computer whether a piece of text is a heading, a paragraph, or a list. CSS (Cascading Style Sheets): CSS is used to style the content of a website. For example, CSS can be used to change the font size, colour, and alignment of text. JavaScript: JavaScript is a programming language that can be used to add interactivity to a website. For example, JavaScript can be used to create menus, animations, and games.

HTML HTML stands for ‘HyperText Markup Language’. It is used to develop web applications. It tells a web browser how to display content on a website. In HTML, ‘Hypertext’ means the text that is more than static text. It can be interactive and linked to other pages or resources.

C024_Co70.indb 10

11/6/2023 7:20:18 PM

Markup are the tags we use in HTML to structure and format the text on a web page. These tags are the instructions that tell the browser how and where to display the content on a page.

Did You Know? HTML is not a programming language because it does not include any logic or algorithms.

Features of HTML 1

Easy to Learn: HTML is an easy language to learn, even for beginners. It is made up of tags that tell the browser what to do.

Platform Independent: HTML is platform independent, which means that it can be used to create web pages that can be viewed on any device, regardless of the operating system or web browser.

Media Support: HTML can be used to display images, videos, and audio on web pages.

Hypertext: HTML supports hypertext, which means that text on a web page can be linked to other web pages or resources.

Semantic Structure: HTML introduced many new semantic elements, which can be used to improve the accessibility and SEO of web pages.

Case Insensitive: HTML is a case-insensitive language.

Basic Structure of an HTML Document An HTML document is structured into two main parts: the head and the body. The head contains information about the document, such as the title. The body contains the content of the web page, such as text, images, and videos. The body is displayed in the browser window. The basic structure of an HTML document looks like this: 1

The <html> and </html> tags enclose the entire document.

The <head> and </head> tags enclose the head section of the document.

The <title> and </title> tags enclose the title of the document.

The <body> and </body> tags enclose the body section of the document.

HTML Document Basic Structure <html> <head> <title> Document Title</title> </head> <body>  </body>

Web Browser A web browser is a software application that allows you to access and view web pages. There are many web browsers available, such as Google Chrome, Mozilla Firefox, Microsoft Edge, and Apple Safari. All web browsers work in a similar way, but they may have different features and user interfaces.

Chapter 2 • Introduction to Web Development

C024_Co70.indb 11

Google Chrome

Mozilla Firefox

Apple Safari

Opera

Microsoft Edge

11/6/2023 7:20:19 PM

They allow us to browse websites, watch videos, listen to music, and play games. Some of the basic components of a web browser are as follows:

• Address bar: The address bar is where you type the URL of the website you want to visit. • Navigation buttons: The navigation buttons allow you to move forward, back, and refresh the current web page.

• Tabs: Tabs allow you to have multiple web pages open at the same time. • Bookmarks: Bookmarks allow you to save the URLs of your favourite websites so that you can easily access them later.

• History: The history feature allows you to view a list of the websites you have recently visited. Basic HTML Terminologies Tags A tag tells the browser how to display the content that follows it. Tags are enclosed in angle brackets (< and >). For example, <h1> is the opening tag for heading and </h1> is the closing tag for heading. To create an HTML document, we have the following tags: Tag

Purpose

Syntax

Used to insert comments in the HTML code. <!--comment–->

<p>

It is used as the paragraph tag that is used <p>content</p> to add a paragraph.

Heading tags

HTML heading tags are used to add <h1>Most important heading</h1> headings and sub-headings to the content <h2>content</h2> you want to display on a web page. HTML has six levels of heading from <h1> to <h6>. <h3>content</h3> <h4>content</h4> <h5>content</h5> <h6>Least important heading</h6>

<div>

This tag is used in HTML to make divisions of content in the web page such as text, images, and header.

<div>content</div>

<br>

Inserts a single line break

Should be added where the line break is needed.

<b>

Converts the text into bold

<i>

Converts the text into italics

<img>

Displays an image

<a>

Creates a link. Links can be used to link <a href=”https://example.com”>This is a link to to other web pages, images, or other the example website.</a> resources.

C024_Co70.indb 12

11/6/2023 7:20:19 PM

Elements An element is a combination of a tag and its content.

Opening Tag

For example, the <h1> element is a heading element. There are mainly two types of HTML elements: 1

Container Elements: Container elements are HTML elements that can contain other elements or text within them. They have both an opening tag and a closing tag to enclose their content.

Content

Closing Tag

<h1> This is my ﬁrst HTML document. </h1>

Element

Examples: <html></html>, <head></head>, <body></body>. 2

Empty Elements: Empty elements, also known as void elements or self-closing elements, do not contain any content between opening and closing tags. They are self-contained and do not require a closing tag. Examples: <br>, <hr>, <img>.

Attribute It is used to define the character of an HTML element. An attribute is always placed in the opening tag of an element and generally provides additional styling (an attribute) to the element.

<h1> <font color= ''red''> This is my ﬁrst HTML document. </font> </h1>

Attribute

Project: Space Exploration Let us build a simple Space Exploration web page project while learning the concepts in the chapter. We will be building this project by dividing it into tasks. Task 1: Create a web page and name it Space Exploration. Add the heading ‘Space Exploration’ and then add an introduction for it. Code <html>

<title>Space Exploration</title>

<h1>Space Exploration</h1> <div> <p><b>Space exploration</b> is the study of space and everything beyond Earth’s atmosphere. We use robots and spacecrafts to explore space and learn new things about it. <br><br> Space exploration has led to many <i><b>amazing discoveries</b></i>, such as exoplanets (planets that orbit other stars), water on Mars, and black holes. <br><br> Space exploration is also important for inspiring people and showing us what is possible. </p> </div> </body> </html>

Chapter 2 • Introduction to Web Development

C024_Co70.indb 13

11/6/2023 7:20:19 PM

Output

Space Exploration Space exploration is the study of space and everything beyond Earth's atmosphere. We use robots and spacecrafts to explore space and learn new things about it. Space exploration has led to many amazing discoveries, such as exoplanets (planets that orbit other stars), water on Mars, and black holes. Space exploration is also important for inspiring people and showing us what is possible.

Do It Yourself 4A Match the following terms with their descriptions.

Column A

Column B

<h1>

Is a language for structuring web content.

Converts the text into bold.

<div>

Is used for inserting comments in HTML code.

HTML

Is used to create a division within a web page.

<b>

Defines the main heading of a web page.

Identify the error in the following element examples:

<h1>Welcome to My Page<h1>

<p>This is a paragraph</h>

CSS CSS stands for Cascading Style Sheets. It is a language used to style HTML elements. CSS can be used to change the appearance of HTML elements, such as their font, colour, and size.

Features of CSS Some key features of CSS include: 1

Selectivity: CSS can be used to select specific HTML elements to style such as changing colours, styling fonts, spacing elements, and resizing them.

Consistency: You can use the same styles for many pages on a website to make them look similar.

C024_Co70.indb 14

11/6/2023 7:20:19 PM

Cascading: CSS styles are applied in cascading order. This means that the most specific style will be applied to an element, even if there are other styles that are more general.

Responsive design: CSS can be used to create responsive web pages that work on all devices, from desktop computers to smartphones.

Animations and transitions: CSS can be used to add animations and transitions to web pages, which can make them more visually appealing and engaging.

Adding Style to an HTML Document There are three ways to add style to an HTML document: 1

Inline CSS: Inline CSS is used to style a single HTML element. To add inline CSS, you use the style attribute. For example, the following code will make the <h1> element red and 20 pixels in size: <h1 style=”color: red; font-size: 20px;”>This is a heading</h1>

Internal CSS: Internal CSS is used to style all the elements on a single HTML page. To add internal CSS, you use the <style> tag. The <style> tag should be placed in the <head> section of your HTML document. For example, the following code will make all <h1> elements on the page red and 20 pixels in size: Code <html> <head>

<style>

h1 { }

color: red; font-size: 20px;

</style> </head> <body> <h1>This is a heading</h1> <h1>This is another heading</h1> </body> </html> 3

External CSS: External CSS is used to style all the elements on all of the pages of a website. To add external CSS, you use the <link> tag. The <link> tag should be placed in the <head> section of your HTML document. For example, the following code will link to an external CSS file called style.css: Code <html> <head> <link rel=”stylesheet” href=”style.css”> </head> <body> <h1>This is a heading</h1> </body> </html>

Chapter 2 • Introduction to Web Development

C024_Co70.indb 15

11/6/2023 7:20:19 PM

The style.css file would contain the following CSS:

Think and Tell

Code

What CSS will you use to style a web page?

h1 { color: red; font-size: 20px; } If you only need to style a single element, then use inline CSS.

If you need to style all the elements on a single page, then use internal CSS.

If you need to style all the elements on all the pages in a website, then use external CSS. CSS Classes CSS classes are a way to group similar HTML elements together so that you can style them all at once. This can save you a lot of time and effort, especially if you have a lot of similar elements on your page. To create a CSS class, you add the class attribute to an HTML element and assign it a unique name. For example, the following code would create a CSS class called my-class: <p class=”my-class”>This is a paragraph</p> Once you have created a CSS class, you can style it using the . (dot) character and the class name.

For example, the following CSS code will make all paragraphs with the my-class class red and 20 pixels in size: .my-class {

color: red;

font-size: 20px;

}

Selectors and Properties Selectors are used to select the HTML elements that you want to style, and properties are used to define the styles that you want to apply to those elements. Some of the most common selectors in HTML include: 1

Element Selectors: Select elements by their tag name, such as h1, p, or img.

Class Selectors: Select elements by their CSS class.

ID Selectors: Select elements by their ID.

Combination Selectors: Combine multiple selectors to target specific elements.

There are many CSS properties, including: CSS Property

Purpose

Syntax

color

Sets the colour of the text.

color:blue

font-family

Sets the font family of the text.

Font-family:cambria

font-size

Sets the size of the text.

Font-size:x-small Note: x-small, small, medium, large, x-large, xx-large can also be used as values.

C024_Co70.indb 16

11/6/2023 7:20:19 PM

CSS Property

Purpose

Syntax

font-weight

Sets the weight or thickness of the text.

Font-weight: bold Note: lighter, or any number can also be used

text-decoration

Formats the text.

Text-decoration: underline Note: line-through, overline can be used.

Text-align

Aligns the text.

Text-align: left Note: right, center, justify can be used.

background-color

Sets the background colour of the element.

background-image

Sets background images for an element, Background-image:url(”https://example. you can set one or more images. com/image.png”)

border

To set the border around the element.

Border: solid

border-color

Sets the colour of the border of an element.

border-color:blue

border-radius

Round the corners of the outer border edges of an element.

border-radius:30px

padding

To set the space around the content of the element.

padding:40px

To set the space around the element itself.

margin:20px

margin

Background-color:red

Note: Any number can be added according to the use. Note: Any number can be added according to the use.

You can also use a shortcut called the background property to set multiple background-related properties in one declaration. For example, you can use the background property to set the background colour, image, size, and position of a div element all at once. Here is an example: div { }

background: blue url(‘image.jpg’) no-repeat center/cover;

Think and Tell How are Selectors and Properties different?

Discuss

What are the benefits of having classes in an HTML document?

In this example:

• blue sets the background colour to blue. • url(‘image.jpg’) sets the background image to the image named image.jpg. • no-repeat prevents the image from repeating. • center/cover positions and sizes the image so that it covers the entire div element.

You can apply the background property to any HTML element, not just to div elements. For example, you can apply it to the <body> element to set the background of your entire web page.

Chapter 2 • Introduction to Web Development

C024_Co70.indb 17

11/6/2023 7:20:19 PM

Project: Space Exploration Task 2: Use internal CSS to make the project colourful and attractive. 1

Inside the head element, create a style element and: a

Add a style for body elements.

b Create a content class for styling internal content. Code <html> <head> <title>Space Exploration</title> <style> body { background-color: powderblue; color: black; text-align: center; }

</head>

.content{ color: darkred; text-align: left; } </style>

Update the body element by applying the content style in content div. Code <body>

<h1>Space Exploration</h1>

<div class=content> <p><b>Space exploration</ b> is the study of space and everything beyond Earth’s atmosphere. We use robots and spacecrafts to explore space and learn new things about it. <br><br> Space exploration has led to many <i><b>amazing discoveries</b></i>, such as exoplanets (planets that orbit other stars), water on Mars, and black holes. <br><br> Space exploration is also important for inspiring people and showing us what is possible. </p> </div> </body> </html>

Output

CO24IC0702.indd 18

11/6/2023 7:51:47 PM

Do It Yourself 4B 1

Fill in the Blanks. background-color

Hints

background

internal

If you want to style all elements on a single HTML page, you can use

CSS classes are used to group

similar

<link> CSS.

HTML elements together.

c The shorthand for setting multiple background-related properties in one declaration is the property.

To set the background colour of an element, you can use the

property.

External stylesheets are linked to HTML documents using the

element.

Write T for True and F for False. a

Internal CSS is added to the <body> section of an HTML document.

You can create a CSS class by adding the class attribute to an HTML element.

The no-repeat property of CSS prevents the image from repeating.

External stylesheets are included directly within an HTML document, using the <style> element.

CSS can be used to change the colour and size of HTML elements.

Coding Challenge 1.

Create a web page with the following content: a. A title: My Dream Vacation

b. A paragraph describing my dream vacation c. Set the font and background colour. 2.

Create a web page with the following content: a. A title: My Favourite Game

b. A CSS class called ‘my-favourite-game’ that sets the background colour of the page to cyan. c. A paragraph describing my favourite game and why I like it.

Chapter Checkup A

Fill in the Blanks. Hints

head

Web development involves designing, building, and maintaining

The basic structure of an HTML document consists of the

Chapter 2 • Introduction to Web Development

CO24IC0702.indd 19

web applications

angle

body

external

. and the

11/6/2023 7:51:47 PM

HTML tags are enclosed in

brackets.

You can apply CSS using three main methods: inline styles, internal stylesheets, and

stylesheets.

Tick () the Correct Option. 1 Which type of CSS would you suggest to style a single HTML element?

a Internal CSS

b External CSS

d Outline CSS

Inline CSS

2 Which HTML tag is used to create a single line break? a <newline>

b <line-break>

d br>

<b>

3 Which of the following is an example of a CSS class? a .my-class

b my-class

d my.class

<class=”my-class”>

4 Which of the following HTML elements is used to create a link? a <p> c

<h1>

b <img> d <a>

5 Which of the following CSS properties is used to set the colour of the border of an element? a border-color

b color

d border

bordercolor

Who am I? 1

I define the characteristics of an HTML element and am placed in the opening tag.

I make divisions of content on a web page, like sections of text, images, headers, and more.

I am a CSS property to set the space around the element itself.

I convert text into an italic format in HTML.

5 I display images on a web page. You can specify the image source and alternative text using attributes with me. I am called an <img> tag.

CO24IC0702.indd 20

11/6/2023 7:51:48 PM

Write T for True or F for False. 1

A web browser is a software application that allows you to access and view web pages.

CSS-created web pages don’t work on all devices.

You can use the . (dot) character and the class name to style a CSS class.

Element selectors select elements by their tag name, such as h1, p, or img.

Class Selectors select elements using their ID.

Answer the Following. 1

What is web development, and what are its two main categories?

What is the basic structure of an HTML document?

What does the HTML tag <img> do, and how can you specify the source of an image?

What is CSS, and what are some of its features?

What are selectors and properties in CSS? Provide examples of each.

Apply Your Learning. 1

In CSS, how would you make all paragraphs with the class “my-class” blue in colour and 30 pixels in size?

When you use the HTML tag <div>, what purpose does it serve?

You have a paragraph of text that you want to make bold. How would you do this using HTML tags?

4 Create a CSS class named “highlight” that changes the text colour to yellow and applies the ‘back.png’ images as background of the web page.

Chapter 2 • Introduction to Web Development

C024_Co70.indb 21

11/6/2023 7:20:20 PM

Images and Hyperlinks in HTML

Just like pictures make a book more interesting, images make websites more exciting and interesting. Images are used for many purposes, such as providing visual support to written content, conveying feelings, telling stories, providing clarity of purpose, and making the content easy to remember.

Let us learn to add and style images.

Adding Images In an HTML document, you can add images using the following methods: 1

Using the <img> element: The most common way to add images is by using the <img> element. You need to specify the source (URL) of the image, using the src attribute. Here is an example: <img src=”image.jpg” alt=”A beautiful landscape”> In this example, ‘image.jpg’ is the source file for the image, and “A beautiful landscape” is the alternative text (alt text) that appears if the image cannot be displayed.

Using background images: You can set background images for HTML elements (like <div> or the entire <body>), using CSS.

Note the following points while adding images in a web page: 1

You can acquire the image to be inserted into the web page from any resource. It can be a file downloaded and saved on your computer, or you can provide a direct link to an online resource.

C024_Co70.indb 22

11/6/2023 7:20:28 PM

If the image is on your computer, both the image and your web page should be saved in the same folder or location. In this case, you can reference the image file like this: <img src=”image.jpg”>

If the image and the HTML file are in different folders, then you should give the full path or relative path to the image in the code. The corrected example should look like this: <img src=”C:\images\image.jpg”> or using a relative path like: <img src=”../images/image.jpg”>.

You can provide the URL of the image directly if it’s hosted on the internet: <img src=”https://www.example.com/image.jpg”>.

In case you are using the Tekie platform for developing your project, then you will get the required resources for the respective projects on the platform. Here is an example of setting a background image for a <div> element: <style> .my-div { background-image: url(‘background.jpg’); background-size: cover; /* Adjust the size as needed */ } </style> <div class=”my-div”>  </div>

In this example, ‘background.jpg’ is the source file for the background image and ‘background-size: cover;’ ensures that the image covers the entire div. In the last chapter, we created a project called Space Exploration. In this chapter, we will add an astronaut image to the project. Project: Space Exploration Task 3: Adding an astronaut image Code <body> <h1>Space Exploration</h1> <img src=”rocket.jpg” alt=”rocket” width=”100” height=”100”> <div class=content>

Chapter 3 • Images and Hyperlinks in HTML

C024_Co70.indb 23

11/6/2023 7:20:32 PM

Output

Task 4: Adding a background image and changing the text colour Code <html> <head> <title>Space Exploration</title> <style> body { background-image: url(“space_background.jpg”); color: white; text-align: center; } .content{ text-align: left; } </style> </head> Output

C024_Co70.indb 24

11/6/2023 7:20:33 PM

Styling Images We can style an image in two ways: 1

Using a style attribute: To use a style attribute, specify the CSS properties you want to apply to the image, separated by semicolons. For example, the following code makes the image 100% wide and auto height: <img src=”https://example.com/image.jpg” style=”width: 100%; height: auto;”>

Using a class: To use CSS to style an image, you can either create a CSS class or ID and apply it to the image using the class or id attribute, or you can use an inline CSS block. Here is an example of how to use a CSS class to style an image: <img src=”https://example.com/image.jpg” class=”image-style”> .image-style { width: 100%; height: auto; margin: 10px; }

You can use CSS to style images in many ways. Here are some of the most common CSS properties used to style images:

• width: Specifies the width of the image. • height: Specifies the height of the image. • margin: Specifies the amount of space around the image. • padding: Specifies the amount of space between the border of the image and its contents. • border: Specifies the border around the image. • border-radius: Specifies the radius of the corners of the image border. • box-shadow: Specifies a shadow around the image. • opacity: Specifies the transparency of the image. • filter: Specifies a filter to apply to the image. Project: Space Exploration Task 5: Adding an image and styling it using a class Code <html> <head> <title>Space Exploration</title> <style> body { background-image: url(“space_background.jpg”); color: white; text-align: center; } Chapter 3 • Images and Hyperlinks in HTML

C024_Co70.indb 25

11/6/2023 7:20:33 PM

Code .img-style{ border: 5px solid orangered; border-radius: 15px; width: 120px; height: 80px; margin: 10px; } .content{ text-align: left; margin: 10px; } </style> </head> <body> <img src=”planet.jpg” align=left class=”img-style”> <h1>Space Exploration</h1>  Output

Do It Yourself 5A 1

Match the columns. Column A

Column B

Is an attribute for specifying the source of an image

Used to provide alternative text for images

Is an HTML element for adding images

Using a class

Is a purpose of the alt attribute

margin

Is a way to apply CSS styles directly to an HTML element

src

Specifies the amount of space around the image

<img>

C024_Co70.indb 26

11/6/2023 7:20:33 PM

Fill in the blanks. class

Hints

height

border-radius

<img>

background-image

In an HTML document, you can add images using the

The

attribute of an <img> tag is used to style an image using a class.

The

property specifies the height of the image.

To set background images for HTML elements, you use the

The

element.

property.

property can make the corners of an image round.

Flexbox Imagine that a container element is like a box and the flex items are like the objects inside the box. A flexbox is a CSS layout module that allows you to easily create flexible and responsive layouts by arranging the objects inside the box in a flexible and responsive way. You can line up the objects in a row or a column, and you can control how much space each object takes up. You can also control how the objects are aligned inside the box, such as horizontally centred or vertically centred. A flexbox works by dividing a container element into flex items. These items can be any type of an HTML element, such as divs, spans, and images. Flex items can be resized and rearranged to fit the available space in the container. Here is a simple example of how to use a flexbox: <div class=”container”> <div class=”item”>Item 1</div> <div class=”item”>Item 2</div> <div class=”item”>Item 3</div> </div> .container { display: flex; } .item { flex: 1; } This code creates a container element with three flex items. The flex items are arranged horizontally and take up equal amounts of space. You can also use a flexbox to control the alignment of flex items.

For example, the following code vertically aligns the flex items in the centre of the container: .container {

display: flex;

}

align-items: center;

You can also use a flexbox to control the direction of flex items.

Chapter 3 • Images and Hyperlinks in HTML

C024_Co70.indb 27

Discuss

Share some of the applications or websites where you notice the use of flexboxes.

11/6/2023 7:20:33 PM

For example, the following code arranges the flex items vertically instead of horizontally: .container {

display: flex;

}

flex-direction: column;

Properties of a Parent (Flex Container) Property

Purpose

display: flex

Makes the parent container flexible.

flex-direction: row | column

Allows flex items of the container to be displayed row-wise or column-wise.

flex-wrap: wrap | nowrap

Allows flex items to wrap onto more than one line.

justify-content: centre | flex-start | flex-end Allows items to align along the main axis.

align-items: centre | flex-start | flex-end

Allows multiple lines of items to align along the cross axis.

C024_Co70.indb 28

11/6/2023 7:20:34 PM

Property align-content: centre | flex-start | flex-end

Purpose Allows items to align along the cross axis in a single line.

Properties of a Child (Flex Item) Property

Purpose

order

allows the change in order of items without altering the source order.

flex-grow

allows an item to fill up the available free space.

flex-shrink

allows an item to shrink if there is not enough free space available.

flex-basis

defines the size of an item before space is distributed.

flex

shorthand for flex-grow + flex-shrink + flex-basis.

flex-self

can align a single item within the flex container.

Project: Space Exploration Task 6: Use a flexbox to place items within a web page. 1

Replace the body element with the header class and update as shown to add a flex container for the header part of your web page.

Update the content class by adding a flex container. Code

<html> <head> <title>Space Exploration</title> <style> .header{ display: flex; background-image: url”(space_background.jpg”); justify-content: center; color: white; border-radius: 5px; width: 100%; } .img-style{ border: 5px solid orangered; border-radius: 15px; width: 120px; height: 80px; margin: 10px; } Chapter 3 • Images and Hyperlinks in HTML

C024_Co70.indb 29

11/6/2023 7:20:34 PM

Code .content{ display:flex; text-align: left; margin: 10px; } 3

Add the new classes for cards. a

.card-holder – a flex container for flex items

.cards - flex items

.cards-img - for images in flex items

.cards:hover - to add a hover feature Code .card-holder { display: flex; justify-content: space-around; flex-wrap: wrap; } .cards { width: 16%; color: white; background-color: #2c3350; padding: 10px; border-radius: 5px; margin: 0.35%; font-size: 14px; text-align: center; } .cards-img { position: relative; width: 90px; height: 65px; border-radius: 5px; } .cards:hover { background-color: #646f9a; box-shadow: 5px 5px 5px 5px #d3d3d3; } </style> </head>

Add the header division. Code <body> <div class=header> <img src=”planet.jpg align=left class=img-style>

C024_Co70.indb 30

11/6/2023 7:20:34 PM

Code <h1>Space Exploration</h1> <img src=”rocket.jpg”alt=”rocket” width=”100” height=”100”> </div> 5

Add a sub-heading for the article cards. Code <div class=content> <p><b>Space exploration</b> is the study of space and everything beyond Earth’s atmosphere. We use robots and spacecrafts to explore space and learn new things about it. <br><br> Space exploration has led to many <i><b>amazing discoveries</b></i>, such as exoplanets (planets that orbit other stars), water on Mars, and black holes. <br><br> Space exploration is also important for inspiring people and showing us what is possible. </p> </div> <h3> Links of interesting articles about Space:</h3>

Add the card-holder and cards div tags.

Add the image and text for the first article card. Code <div class=card-holder> <div class=cards> <img src=”exoplanet.jpg” class=cards-img> <p>What is an exoplanet?</p> </div>

Duplicate the cards div of the first card.

Change the details of the second card. Code <div class=cards> <img src=”another_Earth.jpg” class=cards-img> <p>Another earth?</p> </div>

Repeat the process to create remaining cards. Code <div class=cards> <img src=”neutron_star.jpg” class=cards-img> <p>Neutron Star</p> </div> <div class=cards> <img src=”far_away_galaxies.jpg” class=cards-img> <p>Far-away Galaxies</p> </div>

Chapter 3 • Images and Hyperlinks in HTML

C024_Co70.indb 31

11/6/2023 7:20:34 PM

Code </div> </body> </html> When done, run your code to test it. Output

Hyperlinks Hyperlinks, also known as links, allow users to navigate from one web page to another by clicking a text or an image link. To create a hyperlink in HTML, use the <a> tag. The <a> tag has the required href attribute, which specifies the URL of the linked page. The text or the image that you want to be the link should be between the opening and closing <a> tags. For example, the following HTML code creates a hyperlink to the Uolo home page: Code <a href=“https://www.uolo.com”>Uolo</a>

C024_Co70.indb 32

11/6/2023 7:20:35 PM

Output Uolo When a user clicks the word “Uolo”, the web browser opens the Uolo home page.

You can also use the <a> tag to create links to other resources, such as images, PDFs, and other types of files. Let us hyperlink the article cards for the Space Exploration project. Project: Space Exploration Task 7: Hyperlink the card images. Use an anchor tag to add a link to the card image. Don’t forget to close the tag. Code <div class=cards> <a href=”https://en.wikipedia.org/wiki/Exoplanet”> <img src=”exoplanet.jpg” class=cards-img> </a> Code <div class=cards> <a href=”https://www.space.com/30172-six-most-earth-like-alien-planets.html”> <img src=”another_Earth.jpg” class=cards-img> </a>

Chapter 3 • Images and Hyperlinks in HTML

C024_Co70.indb 33

11/6/2023 7:20:35 PM

Repeat the process for the remaining cards. Code <div class=cards> <a href=”https://en.wikipedia.org/wiki/Neutron_star”> <img src=”neutron_star.jpg” class=cards-img> </a> <p>Neutron Star</p> </div> <div class=cards> <a href=”https://en.wikipedia.org/wiki/List_of_galaxies”> <img src=”far_away_galaxies.jpg” class=cards-img> </a> <p>Far-away Galaxies</p> </div> </div> </body> </html> Output

C024_Co70.indb 34

11/6/2023 7:20:35 PM

Click a card to check if the link is opening or not.

Coding Challenge Consider any four famous persons from the past in whom who you are interested. Make a web page about them using flexboxes. Include a picture of them, a short story about their lives, and a link to another web page with more information about them.

Chapter Checkup A

Fill in the Blanks. Hints

anchor

align-items

child

alt

flex-wrap

attribute is used to display the alternative text describing the image, if the image does not 1 The load on the web page. 2

The

property allows flex items to wrap onto more than one line.

The

tag is used to create a hyperlink.

The

property allows multiple lines of items to align along the cross axis.

The flex container can change the width, height, and order of the

Chapter 3 • Images and Hyperlinks in HTML

C024_Co70.indb 35

elements.

11/6/2023 7:20:37 PM

Tick () the Correct Option. 1

How do you create a hyperlink to an external website, using the <a> tag in HTML?

<a href=”#external-website”>External Website</a>

<a href=”http://www.example.com”>Visit Website</a>

<a link=”http://www.example.com”>Go There</a>

Which CSS property is used to create rounded images?

b image-shape border-radius

round-image d

Image-border

What is the main purpose of flexboxes in web development?

To add images to a web page

To create flexible layouts and arrange elements flexibly

d To add animations to web pages c To change the font style on a web page 4

How can you set a background image for an HTML <div> element, using CSS?

b Using the background-image property Using the <background> element

Using the src attribute

Which CSS property is used to make a parent container flexible in flexbox?

display: flex

flex-direction d

Using the alt attribute

flex-grow align-items

Who am I? 1

I have attributes like ‘src’ and ‘alt’ to specify the image source and the alternative text.

I ensure that a background image covers the entire HTML element.

I create a shadow around an image, using CSS.

I am a CSS property to specify a filter to apply to the image.

I control the alignment of items in a flex container.

C024_Co70.indb 36

11/6/2023 7:20:37 PM

Write T for True and F for False. 1

In CSS, the ‘border-radius’ property is used to make images transparent.

You can style images using CSS in two ways—using the style attribute and using classes.

Hyperlinks can be created using text only, and images cannot be linked to other web pages.

The ‘margin’ property in CSS determines the space around an image.

The ‘flex-direction’ property determines whether flex items are arranged horizontally or vertically.

Answer the Following. 1 Identify and correct the error in the following HTML code for inserting an image: </img src=”image.jpg” alt=”A beautiful landscape”>

Which CSS property is used to specify the amount of space between the border of the image and its contents?

3 Correct the CSS code that sets the background image for a <div> with class “my-div” and ensures that it covers the entire div: .my-div {

background: url(‘background.jpg’);

background-size: cover;

} 4

Find the error in the following CSS code that arranges the flex items vertically in a flexbox:

.container {

display: flex;

flex-direction: row;

} 5

Explain the purpose of the ‘flex-grow’ property in a CSS flexbox.

Chapter 3 • Images and Hyperlinks in HTML

C024_Co70.indb 37

11/6/2023 7:20:37 PM

Apply your Learning.

Given the following HTML and CSS code, what will be the background colour of the div when you hover over it?

<div class=”hover-button”>Hover Me</div>

.hover-button:hover {

}

background-color: yellow;

2 If you have a web page with three images styled using the class ‘image-style’ and the following CSS code, what will be the output? <img src=”image1.jpg” class=”image-style”>

.image-style {

width: 80%;

}

margin: 10px;

What is the output of the following HTML code?

What error will you get if you try to display an image that is not found?

What error will you get if you forget to add the alt attribute to an image tag?

Consider the following HTML code:

<a href=”https://example.com/cat-breeds”>Read more about cat breeds</a>

</div>

What output will you get if you try to display the above HTML code without using a flexbox?

C024_Co70.indb 38

11/6/2023 7:20:37 PM

Lists and Tables in HTML

In this chapter, we will learn about lists and tables in HTML. Lists in HTML are similar to a shopping list or a to-do list. They help us organise items in a neat and easy-to-read way on a web page.

Adding Lists In HTML, we can create three types of lists:

• Ordered (numbered) • Unordered (bulleted) • Description Ordered Lists

Ordered lists, also known as numbered lists, are used to list items in a specific order. They are defined using the <ol> tag. Each list item in an ordered list is defined using the <li> tag. Here is an example of an ordered list: Code

Output

<ol>

1. Item 1

2. Item 2

3. Item 3

</ol> You can use the type attribute to specify the type of numbering for your ordered list. The default numbering type is numbers, but you can also use uppercase letters, lowercase letters, or Roman numerals. Code

Output

I. Item 1

II. Item 2

III. Item 3

</ol>

C024_Co70.indb 39

11/6/2023 7:20:37 PM

Here are some examples of different numbering schemes: Types of Numbering

Description

type=” 1”

The list items will be numbered with numbers (default).

type=” A”

The list items will be numbered with uppercase letters.

type=” a”

The list items will be numbered with lowercase letters.

type=” I”

The list items will be numbered with uppercase Roman numbers.

type=” i”

The list items will be numbered with lowercase Roman numbers.

Unordered Lists Unordered lists, also known as bulleted lists, are used to list items in no particular order. They are defined using the <ul> tag. Each list item on an unordered list is defined using the <li> tag. Here is an example of an unordered list: Code

Output

<ul>

 Item 1

 Item 2

 Item 3

<li>Item 3</li> </ul> You can use the style attribute to specify the bullet style for your unordered list. The default bullet style is a disc, but you can also use squares, circles, or other symbols. Code

Output

 Item 1

 Item 2

 Item 3

<li>Item 3</li> </ul> Here are some examples of different bullet point styles: Bullet Style

Description

disc

Change the list item marker to a bullet.

circle

Change the list item marker to a circle.

square

Change the list item marker to a square.

none

No list item marker will be displayed

C024_Co70.indb 40

11/6/2023 7:20:38 PM

Description Lists Description lists are used to display a list of terms and their definitions. They are defined using the <dl> tag. Each term in a description list is defined using the <dt> tag, and each definition is defined using the <dd> tag. Here is an example of a description list: Code

Output

<dl>

Term 1 Definition 1

<dt>Term 1</dt> <dd>Definition 1</dd>

Term 2 Definition 2

<dt>Term 2</dt> <dd>Definition 2</dd>

Term 3

Definition 3

<dd>Definition 3</dd> </dl>

Styling Lists Styling lists means improving the appearance of the list items, such as the bullet style, numbering, padding, and margin. There are two main ways to style HTML lists: 1

Using the style attribute

Using CSS classes

Using the style attribute The style attribute can be used to specify the appearance of individual list items or entire lists. To use the style attribute, simply add it to the opening tag of the list or list item and specify the desired CSS properties. Styling a List Item: We can style a list item in a list using the style attribute. For example, the following HTML code styles a list item to have grey background colour: Code

Output

<ul>

 Item 1

 Item 2

 Item 3

<li>Item 3</li> </ul> Styling a List: We can also use the style attribute to style entire lists.

Chapter 4 • Lists and Tables in HTML

C024_Co70.indb 41

11/6/2023 7:20:38 PM

For example, the following HTML code defines an unordered list with square bullet points and 10px padding and margin: Code

Output

 Item 1

 Item 2

 Item 3

<li>Item 3</li> </ul> Here are some of the most common CSS properties that can be used to style lists:

• List-style-type: Specifies the style of the bullet points or numbers in a list. • List-style-position: Specifies whether the bullet points or numbers are placed inside or outside of the list items. • List-style-image: Specifies an image to use as the bullet points in a list. • Padding: Specifies the amount of padding around the list items. • Margin: Specifies the amount of margin around the list items. • Font-size: Specifies the font size of the text in the list items. • Font-colour: Specifies the font colour of the text in the list items. • Border: Specifies a border around the list items. Using CSS Classes CSS classes can be used to style lists in a more reusable way. To use a CSS class to style a list, simply add the class name to the opening tag of the list or list item. For example, the following HTML code adds the CSS class list-style-square to an unordered list: <ul class="list-style-square"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> Then, you can use CSS to style the list items with the list-style-square class. For example, the following CSS will give all list items with the list-style-square class square bullet points and 10px padding and margin: .list-style-square {

list-style-type: square; padding: 10px; margin: 10px;

}

Discuss

How are the list style and type different?

If you need to style only a few individual list items or lists, then using the style attribute is fine.

C024_Co70.indb 42

11/6/2023 7:20:38 PM

However, if you need to style a lot of lists or you need to reuse the same list style throughout your web page, then it is better to use CSS classes. Project: Space Exploration Task 8: Create and style an unordered list of fun facts about space. To do so, we first need to identify where the list will appear and what flex container do we need. We need four flex containers to place our content on the web page as shown.

Create an unordered list of fun facts about space in sub-holder2 after the cards’ code. Code

<div class=sub-holder2> <div> <h3> Fun Facts About Space </h3> <ul> <li>Space is so quiet because there is no air for sound waves to travel through.</li> <li>There is an uncountable number of stars in the known universe.</li> <li>One day on Venus is longer than one year on Earth.</li> </ul> </div> </div> 2

Update and add div for containers for header, holder and sub-holder1. Code

<body> <div class=header> <img src="planet.jpg"align=left class=img-style> <h1>Space Exploration</h1> <img src="rocket.jpg" alt="rocket" width="100" height="100"> </div>

Chapter 4 • Lists and Tables in HTML

C024_Co70.indb 43

11/6/2023 7:20:38 PM

Code <div class=holder> <div class=sub-holder1> <div> <p><b>Space exploration</b> is the study of space and everything beyond Earth's atmosphere. We use robots and spacecraft to explore space and learn new things about it. <br><br> Space exploration has led to many <i><b>amazing discoveries</b></i>, such as exoplanets (planets that orbit other stars), water on Mars, and black holes. <br><br> Space exploration is also important for inspiring people and showing us what is possible. </p> </div> 3

Create style classes for containers and the list inside the style tag. Code .holder { display: flex; justify-content: space-around; } .sub-holder1 { width: 65%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); padding: 5px; } .sub-holder2 { width: 25%; } ul{ box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } </style> Output

C024_Co70.indb 44

11/6/2023 7:20:38 PM

Bookmark Just like the bookmarks we use in our books to quickly jump to a specific page, HTML bookmarks help us jump to a specific part of a web page on the internet. Adding a Bookmark To add a bookmark in an HTML document, follow these steps: 1

Choose the element you want to bookmark. This could be a heading, a paragraph, an image, or any other HTML element.

Add an id attribute to the element. The id attribute must be unique on the page.

<h2 id=”mybookmark”>This is my bookmark</h2> 3

Create a link to the bookmark. To do this, use the a element and the href attribute. The href attribute should point to the id of the element you want to bookmark.

<a href=”#mybookmark”>Click here to go to my bookmark</a> Project: Space Exploration Task 9: Add Bookmarks 1

Add information about Documentaries on Space Exploration after the cards’ details. Code

<p>Far-away Galaxies</p> </div> <h3>Documentaries on Space Explorations</h3> <p><b>Cosmos: Possible Worlds (2020):</b> This 13-part documentary series hosted by Neil deGrasse Tyson explores the universe and humanity's place in it. It covers a wide range of topics, including the origins of the universe, the search for life beyond Earth, and the future of space exploration.<br><br> <b>Voyage of Time (2016):</b> This Terrence Malick-directed documentary is a visually stunning meditation on the cosmic journey of the universe, from the Big Bang to the present day. It features a voiceover by Brad Pitt.<br><br> <b>One Strange Rock (2018):</b> This 10-part documentary series hosted by Will Smith explores the wonders of Earth and humanity's place in the universe. Each episode focuses on a different aspect of Earth, such as its atmosphere, oceans, and life forms.<br><br> <b> The Last Man on the Moon (2019):</b> This documentary tells the story of Eugene Cernan, the last astronaut to walk on the moon. It features interviews with Cernan and his fellow Apollo 17 crew members, as well as archival footage from the mission.<br><br> <b>Apollo 11 (2019):</b> This documentary tells the story of the Apollo 11 mission, which landed the first humans on the moon. It features restored footage from the mission, as well as interviews with the astronauts and other people involved in the mission.<br><br><br></p>

Chapter 4 • Lists and Tables in HTML

C024_Co70.indb 45

11/6/2023 7:20:38 PM

Add an id attribute to the elements you want to bookmark: a

The h3 element for the articles section.

<h3 id=b1> Links of interesting articles about Space:</h3> b The h3 element for the documentaries section. <h3 id=b2>Documentaries on Space Explorations</h3> c The h3 element for Fun facts. <h3 id=b3> Fun Facts About Space </h3> 3 Create link to the bookmarks Code <div class=holder> <div class=sub-holder1> <div> <p><a href="#b1">Interesting Articles</a></p> <p><a href="#b2">Documentaries on Space Explorations</a></p> <p><a href="#b3">Fun Facts about Space</a></p> <p><b>Space exploration</b> is the study of space and everything beyond Earth's atmosphere. We use robots and spacecrafts to explore space and learn new things about it. <br><br> Space exploration has led to many <i><b>amazing discoveries</b></i>, such as exoplanets (planets that orbit other stars), water on Mars, and black holes. <br><br> Space exploration is also important for inspiring people and showing us what is possible. </p> Output

C024_Co70.indb 46

11/6/2023 7:20:39 PM

Do It Yourself 6A 1 Read the statements and solve the puzzle. Across a CSS property can be used to add space around list items. b The HTML tag used to create an unordered list. c This HTML tag is used to create an ordered list.

Down

a A type of HTML list that doesn’t have any specific order. b The HTML tag is used for individual list items.

a U

b L

N G

2 Match the Following. Column A

Column B

HTML tag used for ordered lists

disc

The default bullet style for an unordered list

CSS property used to specify the style of bullet points or numbers in a list

style an individual list item using HTML attributes

Using the style attribute

list-style-type

Tables Imagine you have a list of your favourite video games. You want to write down the name of each game, the genre, and the release date. You could write this information in a list, but it would be difficult to read and understand. A better way to organise this information is to use a table. A table is a grid of rows and columns. Each row represents one item on your list, and each column represents a different piece of information about that item.

Did You Know? Web designers choose colours for websites based on colour psychology. Like blue is often used for trustworthiness, while red can create a sense of urgency.

Creating Tables To create a table in HTML, we use the following tags: Tag

Purpose

This tag is used to create a table.

This tag is used to add table headers. The headings are bold and centred by default.

This tag is used to create table rows.

Chapter 4 • Lists and Tables in HTML

C024_Co70.indb 47

11/6/2023 7:20:39 PM

Tag

Purpose

<td></td

This tag is used to create a data cell and add data to the cell. The data in a cell is left-aligned by default.

This tag is used to add captions to a table. It must be added right after the <table> tag. A table caption will be centred above a table by default.

This stands for ‘table header’ and is used to group the header content in your table.

This stands for ‘table body’ and contains the main content of your table, such as data rows with <td> (table data) elements.

This stands for ‘table footer’ and is used for any footer content in your table.

Here is an example of a simple HTML table: Code <table>

<tbody>

<caption>Favourite Video Games</caption>

<tfoot>

<tr>

<td>Minecraft</td>

<thead>

<td>

<td>Sandbox</td>

<tr>

Total Games: 2

<th>Video Game</th> <th>Genre</th> <th>Release Date</th> </tr>

</td>

</tr>

<tr>

</tfoot>

<td>Fortnite</td>

</table>

<td>Battle Royale</td>

</thead>

<td>2017</td> </tr> </tbody> Output Favourite Video Games

Video Game

Genre

Release Date

Minecraft

Sandbox

2011

Fortnite

Battle Royale

2017

Total Games: 2

C024_Co70.indb 48

11/6/2023 7:20:39 PM

Styling Table To style tables in HTML, you can use CSS. CSS is a language that allows you to control the appearance of HTML elements. Here are some basic CSS properties that you can use to style tables:

• Border: This property controls the border of the table. You can specify the border thickness, style, and colour. • Border-collapse: This property controls the collapse of table borders. By default, the borders of adjacent table cells will touch each other. You can use the border-collapse property to collapse the borders of adjacent table cells into a single border.

• Margin: This property controls the margin around the table. The margin is the space between the table and the other elements on the web page.

• Padding: This property controls the padding inside the table. The padding is the space between the border of the table and the content of the table cells.

• Width: This property controls the width of the table. • Height: This property controls the height of the table.

You can also use CSS to style the individual elements of a table, such as the table header cells, table data cells, and table caption. Here is an example of how to use CSS to style a table: Code <html>

<body>

<head>

<table>

<td>Fortnite</td>

<style>

<tr>

<td>Battle Royale</td>

table {

<th>Video Game</th>

border: 1px solid black;

<th>Genre</th>

</tr>

border-collapse: collapse;

<th>Release Date</th>

<tr>

margin: 0 auto;

</tr>

<td>Among Us</td>

padding: 10px;

<tr>

<td>Social Deduction</td>

width: 400px;

<td>Minecraft</td>

}

<td>Sandbox</td>

</tr>

th {

</table>

background-color: #ab2f;

</tr>

</body>

text-align: center; } td {

<tr>

</html> Output

text-align: center; } </style> </head>

Chapter 4 • Lists and Tables in HTML

C024_Co70.indb 49

11/6/2023 7:20:40 PM

Project: Space Exploration Task 10: Add a table and style it. 1

Add the table on Stars with Exoplanets in sub-holder2 before Fun facts. Code <div class=sub-holder2> <div> <h3 id=b3>Stars with Exoplanets</h3> <table> <tr> <th>Name of the Star</th> <th>Number of Exoplanets</th> </tr> <tr> <td>Epsilon Eridani</td> <td>3</td> </tr> <tr> <td>Lacaille 9352</td> <td>2</td> </tr> <tr> <td>Ross 128</td> <td>1</td> </tr> <tr> <td>Epsilon Indi</td> <td>6</td> </tr> </table> </div> <div> <h3 id=b4> Fun Facts About Space </h3>

Style the table by adding shadow. Code

table {

box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);

} </style>

C024_Co70.indb 50

11/6/2023 7:20:40 PM

Output

You can add a bookmark for the newly added table as well.

Coding Challenge 1.

Think and Tell

Create a web page for your travel bucket list.

Does CSS allow us to change the appearance of multiple web page by modifying just one stylesheet?

2. Create a web page about your favourite book. Add bookmarks to different sections of the book, such as chapters or characters, and create links to jump to those bookmarks.

Chapter Checkup A

Fill in the Blanks. Hints

list-style-type

type

numbered

tbody

Ordered lists are also known as

You can change the style of unordered list items using the

To style an individual list item using HTML attributes, we can use the

You can change the type of numbering in ordered lists using the

style

lists and are used to list items in a specific order. property. attribute. attribute.

5 The HTML tag used to contain the main content of your table, such as data rows with <td> (table data) elements is tag.

Chapter 4 • Lists and Tables in HTML

C024_Co70.indb 51

11/6/2023 7:20:40 PM

Tick () the Correct Option. 1

Which CSS property specifies an image to use as the bullet points in a list?

List-style-image b

Padding

List-style-type d

None of these

Which tag is used to define a term in a description list?

<dd> b

<dt>

<dl> d

<li>

What property is used to add a border to a table in CSS?

Border-style

Border

Border-collapse

Table-border-style

The data in a table's cell is:

Left-aligned by default.

Right-aligned by default.

Centre-aligned by default.

Top Left-aligned by default.

Who am I? 1

I am an attribute to specify the type of numbering for your ordered list.

I am an HTML tag used to create a table header. I am commonly found inside the <thead> element.

3 I am a CSS property that helps you set the background colour for table cells. I can make your tables visually distinct.

I am centred above the table by default.

I am used to mark a specific spot on a web page to quickly jump back to it when needed.

Write T for True and F for False.

There must be at least one ‘tr’ tag inside the ‘thead’ element.

<style>

table,th,td{

margin:2px;

}

border-collapse: collapse;

</style>

C024_Co70.indb 52

11/6/2023 7:20:40 PM

In the code snippet other than ‘solid’, you can use any other style. 3

<th> tag does not have a closing tag.

<td> tag is used to create a row in a table.

<a href=”#bookmark”> is a valid way to create a link to a bookmark within the same HTML document.

Answer the Following. 1

What happens when you click on a link with the following HTML code? <a href=”#myBookmark”>Jump to Important Information</a>

Write the code to change the bullet style of the list to squares.

How would you change the text colour of all the list items to blue?

What is the purpose of using the id attribute when creating bookmarks?

Identify the error in this CSS code and provide the corrected version:

body {

background-color: #f0f0f0;

font-color: #333;

font:size: 14px;

margin 15px;

}

padding: 10px;

Apply Your Learning. 1

Make an ordered list of your hobbies and number the list with lowercase letters.

Identify the error in the following HTML code snippets: a

<ol>

<table>

<caption>Table of Products</capiton>

<tr>

<th>Product</th>

</ol>

<th>Price</th> <tr> </table>

Chapter 4 • Lists and Tables in HTML

C024_Co70.indb 53

11/6/2023 7:20:41 PM

What’s the mistake in this code for creating a bookmark link? <a href=”section2”>Jump to Section 2</a>

4 Write a program that creates a table of the planets in the solar system, including their names, distances from the sun, and number of moons.

5 Write a program that creates a table of the scores for a soccer game, including the team names, goals scored, and yellow and red cards received.

6 Create an HTML list of your favourite foods. Add CSS to change the colour of the list items when you hover over them.

C024_Co70.indb 54

11/6/2023 7:20:41 PM

Singapore

Gurugram

CS_CB_Coding_ICSE_Grade7_Cover.indd All Pages

Bengaluru

hello@uolo.com `xxx

NEP 2020 based

ICSE compliant

Technology powered

06/11/23 4:28 PM