1028232381

AlTarbiyah AlNamouthajiyah International Schools
ICT Booklet
2nd Trimester
Grade 7 ( )
Name: __________________________________
Chapter 1: Stylesheet
Key Vocabulary:
1. HTML: HTML stands for Hyper Text Markup Language. It is a special (markup)
language used to create webpages.
2. HTML Tags: To create a webpage, HTML has pre-defined keywords, called
TAGS. They are used to add content in a webpage.
3. Webpage: A document created using HTML that can only be viewed in a
browser.
4. Website: A collection of web pages with related content that has a common
domain name.
5. CSS: CSS stands for Cascading Style Sheet. It is a language used to design
webpage e.g., specifying colors, layout of webpages etc.
Exercises:
Circle the correct answer for each of the following:
1- HTML creates the _______ of a website

a- Structure b- Design c- Backend d- None of these
2- Which is the primary html tag used to create a webpage?

a- <html> </html> b- <head> </head> c- <body> </body> d- <p> </p>
3- Which heading tag displays text in the largest size?

a- h6 b- h2 c- h4 d-h1
4- Which tag creates a heading for the page which appears at the top of the
browser in the title bar?
a-<head> </head> b-<body> </body> c-<title> </title> d-<h1> </h1>
5-The main tag inside which all HTML code is written is ___________
a-<img> b-<body> </body> c-<p> <p> d-<title></title>
6-Which of the following tag has no closing tag?

a- <p> b- <h1> c- <img> d- <head>
7- The _____________ attribute is used to apply Inline CSS.

a- Src b- Style c- Date d- Type
1
8- If multiple CSS properties are specified inside one STYLE tag, they must be
separated using a ___________ symbol.
a- ; Semicolon b- , Common c- : Colon d- . Full stop
9-The _______ CSS property is used to set or change the color of texts on a web
page.
a- Color style b- Text-color c- color d- bg-color
State, whether the given statements are “TRUE” or “FALSE”:

1. The <head> tag is used to display webpage content.
2. Correct syntax for a paragraph tag is <p>…. </p>.
3. All elements in HTML must have opening and closing tags.

4. In inline CSS, we add CSS code inside an HTML element in the form of
attributes.
5. Tags are pre-defined sets of words used to add content in a webpage
6. A webpage can be viewed without a browser.
Fill in the blank with the help of the given word bank:
Website Align-text .html

Tags font-family src
1. ________________CSS property is used to set or change the font of a text in a

web page.
2. ________________ is a collection of webpages.
3. __________________ attribute is used in <img> tag to add the image path.
4. We will align our text to the center of the webpage using ___________________
property.
5. HTML files are saved using the ____________________ file extension.
Match the Column A to Column B:

Column A Column B
1 <img> Hypertext Markup Language
2 <p> A property used to align text inside a div container.
3 HTML Tag used to add an image in a webpage
4 CSS Tag to create empty container
2
5 Text-align Cascading Style Sheet
6 <div> </div> Tag used to add a paragraph
Answer the following questions:
1. What are three different methods to include CSS designs on a webpage?
2. What is HTML?
3. What is CSS and why is it important?
Fill in the missing tags to complete the basic structure of html document:
<body> </title> </html> <head>
Chapter 2: Web Layout Design
3
Key Vocabulary:
1. CSS Grid Layout: It is a layout system that allows us to divide a webpage into
sections.
2. Website Layout: This defines a website structure. It defines how components
will be arranged in a website.
3. Minimalist Web Design: A website design concept which implements the
following principles:
a. User-friendly interface.
b. Limiting the color scheme to only 2-3 colors.
c. Plenty of empty space in between components.
d. Fewer details like, color transitions, shadows, textures, etc.
Exercises:
1-The __________tag is used to define a section or division in an HTML page.

a-<div> b-<class> c-<title> d-
2-To access a class name, we use the ________________ operator.

a- ,comma b-: colon c-.dot d - ;semicolon
3-To create a Grid Container, we set the display property to __________________

a-Grid b-Grid Area c-Grid Template d-Grid Template Area
4-To arrange grid area items within a grid container, we use the _________ property.
a-Grid-Template b-Grid-Template-Area c-Grid d-Grid-Area
5-We can align HTML components at the center of a page by setting the margin
property to ________________.
a-Center b-Middle c-Auto d-None
6-Which of the following property will be used to add a border only to the bottom?
a-border-left b- border-right c- border-top d- border-bottom
4
1. To specify the size of background image of a webpage three values
can be used.
2. Background-size property can have values: cover, contain and auto
3. In a minimalistic web design, we can add many details like shadows,

textures etc.
4. CSS grid layout allows us to divide a webpage into sections.
5. Grid makes it easy to create complex layouts.
padding Website Layout
border-top
1. _____________________defines website structure.

2. ________________property will be used to add a border only to the top only.
3. ________________property is used to leave gap between components.
Column A Column B
1 Background-image A property which specifies the size of a

background image
2 text-align: center Centre align the content
3 Background-size A property used to add an image as

background.
5
1. Which of the property here is used to add a gap from the top of the
webpage?
2. In given code, what each of the following element specifies:
a. 2px: __________________________
b. Solid: _________________________
c. Orange: ______________________
3. What is a minimalistic web design?
Chapter 3: Design Frameworks
Key Vocabulary:
6
1. Responsive Web design: Responsive web design is about creating web
pages that look good on all devices. A responsive web design will
automatically adjust for different screen sizes and viewports.
2. Bootstrap: It is a framework which provides built-in components to create
responsive websites.
3. Carousel: A collection of images which appear one after another in a
horizontal direction.
4. Cards: A small rectangular or square shaped container with images or
buttons within it.
Exercises:
1-To include internal CSS designs, <style> tag is written within ___________ tag.
a-<body> b- <head> c- <img> d- <div>
2- In HTML, to insert images use ____________ tag.

a-<body> b- <head> c- <img> d- <div>
3- To add JavaScript link in HTML, __________ tag is used

a-<script> b- <head> c- <style> d- <div>
4-Websites that display fixed content are known as _________________.

a- Dynamic b-Static c- Responsive d-None
5- The Bootstrap class ___________ creates a button with a red background.

a-product-container b-btn-danger c-btn btn-danger d- None of the above
6-A Bootstrap carousel displays ______________ that play one after another
a- Images b- Videos c-Text d-Audio
1. To use Flexbox, we set the display property to flex.
2. Use the background-size property so that the image occupies the

entire card element.
7
3. Use background-position property to place the image at the center.
4. Carousal is a collection of videos which appear one after another in a

horizontal direction.
Flexbox hover :hover

transition Border-bottom Static Websites
1. The ___________________ CSS property displays a border at the bottom of an

HTML element.
2. To create a hover effect, the ___________________ selector is used.
3. Using__________________, we can align HTML components horizontally or
vertically.
4. Websites that display fixed content are known as Static_________________.
5. The____________________ effect is displayed when we place the cursor over an
HTML element.
6. Use the ___________________property to make the image slowly appear.

Column A Column B
1 ‘src’ attribute Ready-made components
2 Bootstrap Used to write title
3 cards Name of the image
4 <h1> Square-shaped containers in webpage
1. What is image carousal?
2. What is a responsive web design?
8
3. Answer with reference to the given code:
a. What is the name of image?
b. What happens if the image can’t be displayed on the webpage?
Chapter 4: Bluetooth Communication
9
Key Vocabulary:
1. Bluetooth: Bluetooth is an open wireless technology used to transfer data

over short distances from fixed or mobile devices.
2. Packets: Pieces of information that go from one device to another.
3. MIT App Inventor: Platform that allows anyone to build fully functional apps
for smartphones and tablets.
4. Bluetooth Server: The Bluetooth server accepts request of the client and
then transmits data to any of the connected clients.
5. Bluetooth Client: Bluetooth client is the device which receives data. To
establish connection Bluetooth client sends request to the Server.
Exercises:
1- Bluetooth devices should be ____________first and establish a connection

a- paired b- joined c-communicate d-wired
2-How many Bluetooth devices can communicate at any one time?

a-2 b-6 c-8 d-10
3- MIT APP inventor uses ___________ to create apps.

a-object-client relation b-block-based tools c- OOP d- Functions
4-When naming a project in MIT App inventor don’t use ____________.

a-Letters b-Numbers c-Spaces d-None of these
5- _________________are used to design the functionality of components.

a-Components b-Properties c-Designer Screen d-Blocks
6- UI stands for:
a- User Interface b-User Experience c-Unit Interface d-None of these

1. Clients can transmit data to server only and not to each other.
2. In MIT App inventor switching between designer and blocks editor is

not allowed.
3. To start designing a project, place a component on the Blocks Editor
10
4. There are two sections to the Blocks Editor: Blocks and Viewer.
5. If two devices want to communicate, they pick a random channel. If

that channel is already occupied, no communication can happen.
6. When two or more devices communicate, one will act as a Bluetooth
Server and others will act as Bluetooth Clients.
APK file Packet Emulator

Bluetooth MIT App Inventor Sensor
1. ___________________is a software used to create applications.

2. We use android ______________________ to test the app on PC.
3. After building app we download and install _______________ on the mobile
phone.
4. Piece of information that goes from one device to another is called
_____________
5. ____________________is an open wireless technology to transfer data.

Column A Column B
1 Designer Used to set component setting
2 Palette Add here the components that you want to see on app screen
3 Viewer Holds all components used to build an app

5 Properties Also called User Interface
1. Define the role of Bluetooth server and client?
11
2. What are three components of MIT APP?
Label the following:
User Interface Components Viewer Palette Properties
1. 2. 4. 5.
3.
12

1028232381

Uploaded by

Copyright:

Available Formats

1028232381

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1028232381

Uploaded by

Copyright:

Available Formats

AlTarbiyah AlNamouthajiyah International Schools

Circle the correct answer for each of the following:

1- HTML creates the _______ of a website

2- Which is the primary html tag used to create a webpage?

3- Which heading tag displays text in the largest size?

6-Which of the following tag has no closing tag?

7- The _____________ attribute is used to apply Inline CSS.

State, whether the given statements are “TRUE” or “FALSE”:

2. Correct syntax for a paragraph tag is <p>…. </p>.

3. All elements in HTML must have opening and closing tags.

6. A webpage can be viewed without a browser.

Website Align-text .html

1. ________________CSS property is used to set or change the font of a text in a

Match the Column A to Column B:

Answer the following questions:

1. What are three different methods to include CSS designs on a webpage?

3. What is CSS and why is it important?

<body> </title> </html> <head>

Chapter 2: Web Layout Design

Circle the correct answer for each of the following:

1-The __________tag is used to define a section or division in an HTML page.

2-To access a class name, we use the ________________ operator.

3-To create a Grid Container, we set the display property to __________________

2. Background-size property can have values: cover, contain and auto

3. In a minimalistic web design, we can add many details like shadows,

4. CSS grid layout allows us to divide a webpage into sections.

5. Grid makes it easy to create complex layouts.

padding Website Layout

1. _____________________defines website structure.

Match the Column A to Column B:

1 Background-image A property which specifies the size of a

2 text-align: center Centre align the content

3 Background-size A property used to add an image as

Answer the following questions:

2. In given code, what each of the following element specifies:

3. What is a minimalistic web design?

Chapter 3: Design Frameworks

Circle the correct answer for each of the following:

2- In HTML, to insert images use ____________ tag.

3- To add JavaScript link in HTML, __________ tag is used

4-Websites that display fixed content are known as _________________.

5- The Bootstrap class ___________ creates a button with a red background.

State, whether the given statements are “TRUE” or “FALSE”:

1. To use Flexbox, we set the display property to flex.

2. Use the background-size property so that the image occupies the

4. Carousal is a collection of videos which appear one after another in a

Flexbox hover :hover

1. The ___________________ CSS property displays a border at the bottom of an

Match the Column A to Column B:

2 Bootstrap Used to write title

3 cards Name of the image

4 <h1> Square-shaped containers in webpage

Answer the following questions:

1. What is image carousal?

2. What is a responsive web design?

a. What is the name of image?

b. What happens if the image can’t be displayed on the webpage?

Chapter 4: Bluetooth Communication

1. Bluetooth: Bluetooth is an open wireless technology used to transfer data

Circle the correct answer for each of the following: