Computing Wonders Grade 7 Book

05 Robotics Computing Wonders

5.1 What is Robotics?

Robotics is a branch of science, engineering, and technology dealing with the
creation, construction, and operation of machines (Robots). The goal of robotics
is to develop intelligent devices that can help people in several ways.

The branch of technology deals with the design, construction,
operation, and application of robots.

5.2 What is a Robot?

A robot is an output of the robotics industry, A machine resembles
which involves the creation of programmable a human being and is
machines that can help people or replicate their able to replicate certain
actions. human movements and
functions automatically.
Each robot has a different amount of control,
ranging from human-controlled bots that conduct
tasks that a human has complete control over to
fully autonomous bots that accomplish tasks
without any external influences.

5.2.1 Types of Robots?

Robots come in various types from all shapes and
sizes to perform the tasks they are designed for.
Following are some common types of robots:

• Programmable Robots, • Industrials Robots,
• Humanoid Robots,
• Autonomous Robots, • Exoskeletons,

• Drones, etc. Fig 6.1- Edison Programmable Robot

100

05 Robotics Computing Wonders

Fig 6.3- Industrial Robot

Fig 6.2- Exoskeleton Robot

Fig 6.4- Drones Fig 6.5- Humanoid Robots

5.2.2 What are Robots made of? Control System – The Brain

• Control system – The Brain Control systems assist in controlling the
• Sensors – Inputs robot’s motions and functions. Control
• Actuators – Outputs systems are built to teach a robot how
• Power Supply – The Electric Juice to use its parts, like how the human
• End Effectors – The Hands brain transmits signals throughout the
body to achieve a given task. Different
microcontrollers can be used as control
systems like Arduino, Raspberry Pi, etc.

101

05 Robotics Computing Wonders

Sensors – Inputs

A sensor is used to measure the condition of the robot and its surrounding
environment. Sensors provide a robot with stimuli in the form of electrical sig-
nals that are processed by the controller and allow the robot to interact with the
outside world. Some common sensors are photoresistors that react to light, an
ultrasonic sensor that measures the distance of obstacles, etc.

Actuators – Outputs

Actuators are the components that control the movement of robots. These parts
are made up of motors that receive commands from the control system and work
together to carry out the movements required to perform the task.

Power Supply – The Electric Juice

For the robot to work, energy is required. Power supplies provide robots with
sufficient electrical energy for smooth operation. Depending on the type of ro-
bot, electric requirements may vary. For example, some robots need AC power,
others can simply run on a 12V DC battery.

End Effectors – The Hands

An end effector is a device that connects to a robot’s wrist and allows it to en-
gage with its job. Most end effectors are mechanical or electromechanical and
function as grippers, process tools, or sensors. Interchangeable equipment, such
as paint sprayers and drills, is commonly used by factory robots. Other types of
robots can be designed with gripping claws or even hands for duties such as de-
livery, packing, bomb diffusion, and much more.

102

End of Section - 05 Robotics
Answer the following!

1. What is robotics?
2. What are Robots?
3. How many types of robots are there?
4. What are Robots made of?

103

0 6S e ct i o n

Web
Designing

Students will learn :

1. Introduction to Web designing
2. Working with tags.
3. Working with List
4. Working with Images
5. Project – Design a WebPage

06 Web Designing Computing Wonders

6.1 Introduction to Web Designing

6.1.1 What is a Webpage? Fig 6.1 TechTree’s Web-

A Webpage is a document coded in HTML.
Any online browser, such as Google Chrome,
Mozilla Firefox, or Safari, can display Web-
page. We can access Webpages using an URL
– Uniform Resource Locator. URL is a web
address to search webpages, enter an URL
address into a web browser’s address bar.

A Webpage provides the users with information about different topics. Pictures or
videos can also be used to help users with a better understanding of the topic. A
Website contains multiple Webpages.

There are two types of Webpages:
1. Static – display fixed content for every user.
2. Dynamic – display different content and provide
user interaction.

Fig 6.2 URL preview

6.1.1.1 How to open a Webpage?

To open a Webpage, we use web browsers like Google Chrome, Mozilla Firefox, or
Safari. After opening a web browser enter the URL for any webpage in the address bar,
then press Enter.

Fact: The very first Webpage was created at CERN by Tim Berners-Lee on August 6,
1991. Info.cern.ch is the first webpage created.

6.1.2 What is HTML?

HTML is the abbreviation for HyperText Markup Language. HMTL application includes
creating and structuring Webpages. HTML consists of different Elements; these el-
ements display a webpage’s content over a web browser. Any online browser, such as
Google Chrome, Mozilla Firefox, or Safari, can display HTML code. HTML is not a pro-
gramming language. HTML is the worldwide standard for Web designing.
There are different versions for HTML like HTML3, HTML4, HTML5, and many more.
We will be practicing HTML5.
We have different HTML editing software, such as Notepad, Notepad++, Adobe Dream-
weaver, and Visual Studio Code. We will be using Visual Studio Code in this book.

105

06 Web Designing Computing Wonders

6.1.3 Webpage Structure – HTML Page

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

<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>

</head>
<body>

<h1>H1 Heading</h1>
<p>Paragraph Tag.</p>

</body>
</html>

Now let us see the Webpage structure.

106

06 Web Designing Computing Wonders

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

How to install Visual Studio Code

1. Search “visual studio code download”
on “Google.com”.

2. Click on the link show in Fig 74. .

3. Choose the Operating System you are
currently using. We will follow Windows.
Click Windows. See Fig 7.5

4. After the downloading is completed,
double-click the file.

5. Software installation wizard will open.
Select “I accept the agreement”, then
click Next. See Fig 7.6.

6. On the Select Destination Location
window, Click Next. See Fig 7.7

Fig 6.7 Fig 6.6 107

06 Web Designing Computing Wonders

7. On the Select Start Menu Folder
window click Next. See Fig 7.8.

8. On the Select Additional Tasks Fig 6.8
window, select “Create a desktop
icon”, then click Next. See Fig 7.9.
Make sure “Add to PATH (require
shell restart)” is selected.

9. On the Ready to Install window
click Install. See Fig 7.10.

10. Now wait for the installation to be Fig6.9
finished.

11. After the installation is finished.
Click Finish. See Fig 7.12.

12. After clicking Finish, the software
will launch. See Fig 7.13.

Fig 6.10

Fig 6.12
Fig 6.11

108

06 Web Designing Computing Wonders

Fig 6.13 Fig 6.14
Fig 6.15
How to code a Webpage in Visual Studio

1. Open VS Code and click Open Folder. See
Fig 7.14.

2. Now navigate to the folder you want to
save the Webpage files. Note: if you don’t
have any folder for saving the files create a
new folder by clicking New Folder.
See Fig 7.15.

3. Open the folder by double-clicking the
folder, then click Select Folder.
See Fig 7.16.

4. The folder will be opened in VS Code.
Now we need to create a new file by clicking
the New File icon. See Fig 7.17.

5. Now type the file as “index.html”, then
press Enter. See Fig 7.18.

109

06 Web Designing Computing Wonders

6. After pressing Enter, the file will open Fig 6.16
in the Editor Groups. Start coding
your first Webpage.
7. To view the Webpage open the “index.
html” file in any web browser.

Fig 6.17

Fig 6.18

6.2 HTML Structure Tags

To write code for a Webpage there are different tags in HTML that are used. Every
tag has a different function. All tags start with “<”, and end with a “>”. Every tag has
a unique name. For example, <body> is the tag for defining the body of the Webpage.
Most of the tags have a starting as well as an ending tag. For example, to start the
body of a Webpage we use <body>, and to end the body we use the </body> tag. Ev-
erything inside these tags will be considered as a body of the Webpage. Note that the
ending tag contains a “/” before the tag name.

How to use tags: <tag name>Content…</tag name>
Now let us learn different HTML tags and their functions.

110

06 Web Designing Computing Wonders

6.2.1 <!DOCTYPE> Declaration

<!DOCTYPE> is used to represent the document type. This tag helps the web browsers
load the web pages accurately. For coding a Webpage, we type html in this tag.
An example is given below.
<!DOCTYPE html>

This is the first tag used while coding a Webpage and is only used once. This tag does
not have an ending tag.

6.2.2 HTML Tag

The <html> tag is core of an HTML document. It has an ending tag as well </html>. All
the elements will be inside this tag. Consider it as a container for the elements. It is
usually the second tag used after the <!DOCTYPE> tag.

6.2.3 Head Tag

Head tag contains all the data about the document title, character fonts, styles, and
other important information. This is placed between <html> and <body> tags. The
starting head tag is <head> while the ending tag is </head>.

6.2.4 Body Tag

This tag defines the document body. <body> tag contains most of the content for a

Webpage such as headings, paragraphs, lists, tables, images, videos, hyperlinks, etc. This

tag behaves like a container for the Webpage’s content. </body> is the ending tag.

6.2.5 Title Tag <!DOCTYPE html>
<html>
This HTML tag defines the title of the
document, the title is displayed on the <head>
web browser’s page’s tab. <title> tag <title>First Webpage</title>
is a must in every HTML document. It is
very important when it comes to search- </head>
ing your webpage via search engines. </ <body>
title> is the ending tag. This tag is placed </body>
inside the <head> tag. See Fig 7.19. </html

Fig 6.19

111

06 Web Designing Computing Wonders

6.3 Tags for Text

6.3.1 Heading Tags

Headings in HTML are defined in different sizes. HTML has six different heading tags
from <h1> to <h6>. <h1> being the biggest, used for the most prominent headings.
<h6> is the smallest heading available in HTML used for least prominent headings.
Every heading tag have an ending tag as well, </h1> will be ending tag for <h1>. Now let
us see how these tags will look on a Webpage. Practice the following code in VS Code.
Open the file in any browser to see the output. See Fig 7.20 for output.

<!DOCTYPE html> Fig 6.20
<html>

<head>
<title>First Webpage</title>

</head>
<body>

<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is heading 6</h6>
</body>

6.3.2 Paragraph Tags

To define a paragraph in an HTML document <p> is used. While using the <p> tag keep
in mind that paragraphs always start with a new line. To end the <p> tag use </p> tag.
Let’s see an example for <p> tag.

<!DOCTYPE html> Fig 6.21
<html>

<head>
<title>First Webpage</title>

</head>
<body>

<p>This is the first paragraph on my
first Webpage.</p>

<p>This this the second para-
graph.</p>

</body>
</html>

112

06 Web Designing Computing Wonders

6.3.3 Text Formatting Tags

Text can be formatted in an HTML document just like it can be formatted in any
word pressing software. There are multiple tags for text formatting in
HTML. Let’s have a look at these tags.

Style

To change the font, color, size, and different text properties style attribute is used.
Remember this is not a tag but an attribute.
Let’s learn how to use style attribute.

<tag name style=”property:value;”>Content…</tag name>

Let’s change the font.

<!DOCTYPE html>

<html>

<head>

<title>First Webpage</title> Fig 6.22
</head>

<body>

<p style=”font-family:consolas;”>This paragraph font is Consolas.</p>

<p style=”font-family:courier;”>This paragraph font is Courier.</p>

</body>

</html>

Let’s change the text color.

<!DOCTYPE html>

<html>

<head>

<title>First Webpage</title> Fig 6.23
</head>

<body>

<p style=”color:red;”>This paragraph text is Red.</p>

<p style=”color:blue;”>This paragraph text is Blue.</p>

</body>
</html>

113

06 Web Designing Computing Wonders

Let’s do it!

Write some text on your Webpage. Change the text size and background color.

Strong or Bold

<b> tag is used to bold a given text, whereas <strong> tag also displays text in bold,
but with extra importance.
For example;

<!DOCTYPE html>

<html>

<head>

<title>First Webpage</title> Fig 6.24

</head>

<body>

<p><b>Bold Text</b></p>

<p><strong>This text is important!</strong></p>

</body>

</html>

Note: We can use tags within tags. Just like we used <b> tag inside a <p> tag.

Italic or Emphasis

To display text in italic we have a <i> tag. This tag is usually used to indicate technical
terms. We can also <em> tag for italic text. <em> is called emphasis.
Let’s see an example.

<!DOCTYPE html> Fig 6.25
<html>

<head>
<title>First Webpage</title>

</head>
<body>

<p><i>This text is Italic</i></p>
<p><em>This text is emphasised</em></p>
</body>
</html>

114

06 Web Designing Computing Wonders

Insert or Underline

Text can be inserted into an HMTL document using the <ins> tag. Inserted is highlight-
ed using an underline. An alternative for <ins> tag is <u> tag. <u> tag is used to un-
derline text.

Consider the following example. Fig 6.26
<!DOCTYPE html>
<html>

<head>
<title>First Webpage</title>

</head>
<body>

<p><ins>This text is Italic</ins></p>
<p><u>This text is emphasised</u></p>
</body>
</html>

Subscript Text

<sub> is used for subscripted text. Subscripted text appears below the normal text

line. Let’s consider the example of Oxygen gas, the molecular formula of Oxygen gas is

O2. The number 2 is the subscripted text.
<!DOCTYPE html>
<html>

<head>
<title>First Webpage</title>

</head>
<body>

<p>The molecular formula for Oxygen gas is O₂.</p>
</body>
</html>

Fig 6.27

115

06 Web Designing Computing Wonders

Superscript Text

<sup> is used for superscripted text. Superscripted text appears above the normal
text line. Let’s consider the example of the area of a square.

Area of Square=l2
The exponent “2” is superscripted text in the above formula.

<!DOCTYPE html> Fig 6.28
<html>

<head>
<title>First Webpage</title>

</head>
<body>

<p>The formula for area of square is L².</p>
</body>
</html>

Let’s do it!

Write the following equation in an HTML document. x2+x+1=0

Line Break Tag

<br> tag is used to insert a new line. This tag does not have an ending tag.
Let’s consider the following example.

<!DOCTYPE html>
<html>

<head>
<title>First Webpage</title>

</head>
<body>

<p>This is the first line.
<br>This is the second line.</p>

Fig 6.29

Let’s do it!

Write your favorite poem in an HTML document with the help of the <br> tag.

116

06 Web Designing Computing Wonders

Horizontal Line Tag

<hr> tag is used to insert a horizontal line on a Webpage. It notifies the end of a topic
or the end of a Webpage. This tag does not have an ending tag.
Let’s look to the following example.

<!DOCTYPE html>
<html>

<head>
<title>First Webpage</title>

</head>
<body>

<p>This is the first line. <hr>This is the second line.</p>
</body>
</html>

Fig 6.30

6.4 Lists

A list is a set of related data or items. There are two types of lists Unordered and Or-
dered. Let’s learn both types of lists and how to use them in an HTML document.
To define a list in an HTML document, use the following syntax.
<list type>

<list item>Content…</list item>
<list item>Content…</list item>
</list type>

117

06 Web Designing Computing Wonders

6.4.1 Unordered Lists

To define an unordered list <ul> tag is used in HTML. <li> tag is used for the entries

of list items.

Let’s make a list of the capital cities of Pakistan’s provinces.

<!DOCTYPE html>

<html>

<head>

<title>First Webpage</title>

</head>

<body>

<ul>

<li>Karachi</li>

<li>Lahore</li>

<li>Quetta</li>

<li>Peshawar</li>

<li>Islamabad</li>

<li>Gilgit</li>

</ul>

</body> Fig 6.31
</html>

6.4.2 Ordered Lists

To define an ordered list <ol> tag is used in HTML. <li> tag is used for the entries of

list items.

Let’s make a list of the top 3 highest mountains.

<!DOCTYPE html>

<html>

<head>

<title>First Webpage</title>

</head>

<body>

<ol>

<li>Everest</li>

<li>K2</li>

<li>Kangchenjunga</li>

</ol>

</body> Fig 6.32

</html>

118

06 Web Designing Computing Wonders

Let’s do it!

Create a list of your top five favorite places.

6.5 Images

To embed images to an HTML document use <img> tag. Note that images are not in-
serted in a Webpage but instead linked to the Webpage. Use the following syntax when
embedding images to an HTML document.

<img src=”image path” alt=”alternate text”>

What is src?

“src” is an attribute for <img> tag. The path or URL for the image is specified in this
attribute. There are two ways to embed images, either by copying the link of an image
over the internet or providing the path of locally saved images on your computer.

Note: It is good practice to create a separate folder for all your images. It is good
practice to save images locally on your computer.

What is alt?

“alt” or Alternate Text is an attribute for <img> tag used to provide an alternate text
for an image. If by any chance the web browser is unable to locate the image it will dis-
play the value of the alt attribute.

Let’s embed the image of Pakistan’s map.
1. Create a new folder in the same folder as your “index.html” file.

2. Name the new folder as “images”. See Fig 7.33.

Fig 6.33

119

06 Web Designing Computing Wonders

3. Download an image of Pakistan’s map from the internet and save it to the images
folder. Note: Don’t use space while naming the image file. Instead, use the hyphen “-“.

4. Now copy the image path by clicking the Address Bar in Windows. See Fig 7.34 and
7.35

Fig 6,35

Fig 6.34

5. Use “F:\TechTree Books\Grade 7\Webpage\images\pakistan-map.webp” in src at-
tribute.
<!DOCTYPE html>
<html>

<head>
<title>First Webpage</title>

</head>
<body>

<img src=”F:\TechTree Books\Grade 7\Webpage\images\pakistan-map.webp”
alt=”Pakistan’s Map”>

</body>
</html>

120

End of Section - 06 Web Designing

Choose the right one!

1) Version of HTML we are using in this book?
HTML2
HMTL3
HTML4
HTML5

2) HTML tag that contains the Title of the Webpage?
<body>
<html>
<head>
<br>

3) Which of the following is or are heading tags?
<h1>
<h2>
<h3>
All of the above.

4) HTML tag for writing a paragraph on a Webpage?
<p>
<para>
<b>
None of the above.

5) Which of the following can be used for formatting text?
<em>
<ins>
<strong>
All of the above.

121

End of Section - 06 Web Designing

Answer the following:

1) Write down the list of all the HTML versions.

2) Define the basic structure of an HMTL document.

3) Define all the tags and attributes used for formatting text.

122

EnEdnodfoSfeScetciotnio-n 0-60W7 eWbeDbeDseigsniginnging

4) Differentiate between tag and attribute.

5) Briefly explain the tag used for embedding images. Also, write its syntax.

Project!

Create a Webpage that provides information about the northern areas of
Pakistan.

Include facts and images as well.

123

Computing Wo n d e rs i s a n ex te n si ve c o m p u t i n g
curriculum se r ies of books tha t a dopts a new
activity based learning approach. The book
he l p s the st u d e nts u n d e rsta n d the c o n ce pts of
computer science and also helps them learn
21st Century skills.

Key Features:

-Ea sy to u n d e rsta n d ste p-by-ste p l e a r n i n g.
-E x te n si ve cove ra g e of cu r r i culu m.
-Effe cti ve i nte g ra tio n of 21st ce nt u ry sk ill s l ike co ll a bo ra tio n,
c r i ti c al th i n k i n g, c re a ti v i ty, p robl e m-so l v i n g a n d d e c i sio n-m a k i n g.
-E x te n si ve co nte nt to d eve lo p co d i n g sk ill s fo r a va r iety of
p ro g ra m mi n g l a n gu a g e s a n d too l s a n d e d u c a tio n al robots.
-O n l i n e re so u rce s to p rov i d e gui d a n ce to st u d e nts a n d te a c he rs al ike.
-Te a c he r gui d e s to supp o rt the m w i th ste p-by-ste p l e sso n pl a n s

Contact Us