Innovative Technology
Designer Explorer
Computational
Thinker
Robot Digital
Programmer Citizen
Empowered Knowledge
Learner Constructor
ICTECH
Computing
D e v el oped By:
EdTech Department
The City School
Acknowledgements
Project Lead
General Manager Education Technology
Project Team
EDTECH Department
&
Regional Computing Curriculum Leaders
Group Head Office: 31 – Industrial Area, Guru Mangat Road,
Gulberg III, Lahore, Pakistan.
Ph: +92 (42) 111 444 123
Fax: +92 (42) 35773065
Website: www.thecityschool.edu.pk
The entire computing curriculum is mapped with the attainment levels of the
UK National Curriculum, ICDL and ISTE Student Standards 2017-2018.
ICDL
All rights reserved. No part of this publication may be reproduced or transmitted in any part by any
means at any time.
Data Handling .........................................................................................................................................11
1.1. Understanding Databases .......................................................................................................................................................................................................12
1.2. Relative and Absolute References in Excel ................................................................................................................................................................12
1.3. Format Sheet as Table ................................................................................................................................................................................................................14
1.4. Advance Filters and Sort Features ....................................................................................................................................................................................16
1.5. Working with Power and Percentage Formula ......................................................................................................................................................18
1.6. Common Error Messages in Excel ....................................................................................................................................................................................20
1.7. Advance Charts .................................................................................................................................................................................................................................21
1.8. Modifying and Formatting Chart Design ...................................................................................................................................................................25
able of Contents
1.9. Conditional Formatting ..............................................................................................................................................................................................................28
1.10. Import and Export Data as CSV Files ............................................................................................................................................................................30
1.11. Pivot Table .............................................................................................................................................................................................................................................32
Building a Website............................................................................................................................. 47
2.1. What is a Webpage....................................................................................................................................................................................................................48
2.2. Getting Started with HTML ...................................................................................................................................................................................................48
2.3. Creating a Webpage .................................................................................................................................................................................................................51
2.4. Common HTML Tags ................................................................................................................................................................................................................53
2.5. Introduction to Adobe Dreamweaver .........................................................................................................................................................................55
2.6. Getting Started with Adobe Dreamweaver ..........................................................................................................................................................55
T 2.7. Creating Webpage in Dreamweaver ..........................................................................................................................................................................56
2.8. Creating Website in Dreamweaver...............................................................................................................................................................................59
2.9. Inserting Media with HTML5 ...............................................................................................................................................................................................64
2.10. Getting Started with CSS ........................................................................................................................................................................................................68
2.11. CSS with Dreamweaver ..........................................................................................................................................................................................................70
2.12. Creating Web Forms .................................................................................................................................................................................................................72
All About Cloud .................................................................................................................................. 79
3.1. What is a Computer Network...........................................................................................................................................................................................80
3.2. Network Topology and Type ............................................................................................................................................................................................81
3.3. Types of Area Network ..........................................................................................................................................................................................................81
3.4. How Does the Internet Work .............................................................................................................................................................................................83
3.5. Internet Functions .......................................................................................................................................................................................................................84
3.6. Communication Links ..............................................................................................................................................................................................................84
3.7. Data and Network Security ...............................................................................................................................................................................................85
3.8. Understanding Digital Citizenship .................................................................................................................................................................................86
3.9. Cloud Storage ................................................................................................................................................................................................................................88
3.10. Getting Familiar with Google Workspace ..............................................................................................................................................................90
3.11. Google Drive ....................................................................................................................................................................................................................................90
3.12. Getting Started with Google Docs ................................................................................................................................................................................93
3.13. Google Translate .........................................................................................................................................................................................................................97
able of Contents
3.14. Google Maps ...................................................................................................................................................................................................................................99
Presenting Your Ideas ...................................................................................................................... 105
4.1. What is Sway? ..................................................................................................................................................................................................................................106
4.2. What Can I Create with Sway? ..........................................................................................................................................................................................106
4.3. Getting Started with MS Sway ............................................................................................................................................................................................107
Programming the Computer-Python ........................................................................................ 112
5.1. Overview .................................................................................................................................................................................................................................................113
5.2. Flowcharts and Algorithms.....................................................................................................................................................................................................113
5.3. Pseudocode .........................................................................................................................................................................................................................................115
5.4. What is a Program .........................................................................................................................................................................................................................116
T 5.5. Getting Started with Python...................................................................................................................................................................................................116
5.6. Variables and Data Types .......................................................................................................................................................................................................119
5.7. Comments .............................................................................................................................................................................................................................................121
5.8. Python Numbers ..............................................................................................................................................................................................................................122
5.9. Calculation with Numbers ........................................................................................................................................................................................................123
5.10. LIST in Python ....................................................................................................................................................................................................................................124
5.11. Conditional Statements in Python ....................................................................................................................................................................................125
5.12. Loops in Python ................................................................................................................................................................................................................................127
5.13. Functions in Python .......................................................................................................................................................................................................................128
5.14. Error Handling in Python ..........................................................................................................................................................................................................130
5.15. Creating Graphics with Python ............................................................................................................................................................................................131
5.16. Event Handling in Python .........................................................................................................................................................................................................134
Robotics ...................................................................................................................................................138
6.1. What is Robotics ...........................................................................................................................................................................................................................139
6.2. Getting Started with Edison .................................................................................................................................................................................................143
6.3. Introduction to EdPy ..................................................................................................................................................................................................................145
6.4. Starting to Code in EdPy ........................................................................................................................................................................................................147
6.5. Edison Drive Function in EdPy ..........................................................................................................................................................................................148
6.6. Variables in Edison ......................................................................................................................................................................................................................150
6.7. Looping Structures in Edison..............................................................................................................................................................................................151
6.8. Play Tunes on Edison ................................................................................................................................................................................................................153
able of Contents
6.9. Conditional Structures in Edison .....................................................................................................................................................................................154
6.10. Obstacle Detection .....................................................................................................................................................................................................................156
6.11. Clap Control Drive .......................................................................................................................................................................................................................157
6.12. Line Tracking Sensor .................................................................................................................................................................................................................158
6.13. Light Sensors ...................................................................................................................................................................................................................................159
6.14. Light Sensors ...................................................................................................................................................................................................................................160
Mobile App Development ............................................................................................................... 163
7.1. Getting Started with AppLab ...................................................................................................................................................................................................164
7.2. setProperty( ) Block ........................................................................................................................................................................................................................164
7.3. Event Handling ....................................................................................................................................................................................................................................165
T 7.4. Working with Sound ........................................................................................................................................................................................................................167
7.5. Working with Images .....................................................................................................................................................................................................................168
7.6. Designing an App .............................................................................................................................................................................................................................170
Glossary .......................................................................................................................................................174
What is ICTECH Computing?
The ICTech (Innovation in Curriculum through Technology) Curriculum is based on
the best practices in learning and teaching with technology to improve higher order
thinking skills of students to prepare them for their future in a competitive global
job market. In this curriculum, technology is used as a tool to integrate 21st century
competencies and expertise such as communication, leadership, critical thinking,
complex problem solving and collaboration in different subjects.
Structure of the Book
• Data Handling: techniques to surf internet and staying safe in online world
• Building a Website: designing and developing a website from scratch using HTML
and CSS
• All about Cloud: getting familiar with cloud storage services
• Presenting Your Ideas: designing professional presentations using templates
• Programming the Computer-Python using python language to program computers
• Robotics: getting familiar with robot programming
• Mobile App Development: designing and developing mobile applications
Book Features
Student Learning Outcomes
These appear at the start of each chapter and define the skills students will be
equipped with after completing the lesson.
ISTE Student Standard Coverage
These represent the ISTE student standards covered in each chapter. A complete
description of ISTE student standard can be found here.
Chapter Opener
These appear at the start of every chapter and are designed to grasp learners
attention related to the topic. Chapter openers consist of useful bits of information
related to the topic.
Checkpoint
Checkpoints are learning bits that appear within the chapter at different stages to
reinforce the important learning concepts.
Food for Neurons
Food for neurons consist of fun facts or trending news about the topic. These appear
within each chapter.
Let’s Review
Each chapter ends with the key learning points that provide a complete overview of
the chapter.
Chapter Highlights
Key terms appearing throughout the chapter are highlighted to draw learner’s
attention.
My Notes
My Notes section appears at the end of the chapter. Here learners can write important
learning points or reflect on their learning.
Glossary
Contains the important terminology covered in the book.
Data Analysis-Application
Security
Data analytics applications, or, more specifically,
predictive analysis help in minimizing crime rates.
Delivery
Logistic companies are using data analysis to
examine collected data and improve their overall
efficiency.
Healthcare
Self-learning healthcare programs, are able to work on
data of individual patients to provide a personalized
health recommendation.
Urban Planning
Big Data allows urban planners to develop a new
understanding of how cities function.
Energy Consumption
Data analysis allows smart meters to self-regulate
energy consumption for the most efficient energy use.
Data Analysis-Application Data Handling
Security
Data analytics applications, or, more specifically,
predictive analysis help in minimizing crime rates.
Delivery Student Learning Outcomes
Logistic companies are using data analysis to After going through this chapter, students will be able to:
examine collected data and improve their overall
efficiency. 1. Understand the concept of databases
2. Format data as table and use advance filters and sorting techniques on the data.
3. Understand and use relative and absolute references
Healthcare 4. Understand and correct error messages
Self-learning healthcare programs, are able to work on 5. Work with power and percentage formula
data of individual patients to provide a personalized 6. Format different types of chart
health recommendation. 7. Create pivot tables on a given data set
8. Generate different data sets by using selected headings and filters
9. Use slicer feature to create different data sets
10. Create pivot charts based on pivot table data
Urban Planning 11. Generate pivot charts on desired variables from the given data set using filters and slicers
Big Data allows urban planners to develop a new 12. Save and print the pivot table and charts
understanding of how cities function.
ISTE Student Standard Coverage
Empowered Computational Creative
Energy Consumption Learner Thinker Communicator
Data analysis allows smart meters to self-regulate 1a 1d 5a 5b 5d 6d
energy consumption for the most efficient energy use.
The City School 2021-2022
1.1. Understanding Databases
A database (DB), in the most general sense, is an
organized collection of data. In other words, a
database is used by an organization as a method
of storing, managing and retrieving information.
Modern databases are managed using a Database
Management System (DBMS).
1.2. Relative and Absolute References in Excel
In MS Excel all the cells have an address, for example, the first cell is known as A1. This
address is taken from rows and columns, A is for the column and 1 is for the row. A cell
reference is the address of the cell and identifies its location. When you want to copy
the same formula to new cells, you can use the relative and absolute references.
12
The City School 2021-2022
Relative Reference
Relative Reference is the cell reference. When you copy a cell that has a formula, the
formula changes automatically. The change depends on the relative position of rows
Data Handling
and columns. For example, type the contents of columns A and B below and in cell C2,
type =A2*B2. If you copy the formula A2*B2 to cell C3, it will become A3*B3.
Absolute Reference
An absolute reference is used when we want to keep a cell, a row or a column
constant when copying a formula. You have to declare it when you create the formula
by using the $ (dollar sign). This way you create an absolute reference which doesn’t
change when it’s copied or filled.
Syntax Description
$E$1 Cell reference will not update while copying or filling
$E1 Only the row reference will update and the column remains the
same
E$1 Only column reference will update and row remains same
13
The City School 2021-2022
1.3. Format Sheet as Table
In Excel, a table is a specially designated range of numbers. This special range of
numbers has added functionality that other cell ranges do not have. You can have
more than one table in a workbook or worksheet if you want, and tables can be as
large or small as the amount of data you want to work with.
Normally a table is made from adjacent columns of data, with a unique label or
heading for each column. Each row in the table should have entries organized
according to the column headings. You should keep your table data adjacent in a
block to take advantage of all of Excel’s table features. Some Excel features, like filters
and PivotTables, will not work correctly if the data is not blocked together in adjacent
columns as a table.
To create a table from existing data in your spreadsheet:
1. Select a range of data in adjacent columns or click any cell within the required data
range. In the example below, we selet cell range A2:D9.
2. On the Home Ribbon, Style group, click on the Format as Table button.
14
The City School 2021-2022
3. This will display a menu of table formatting options. If you click on one of the table
menu options, the selected range will be formatted as a table based on the style of
your choice.
Data Handling
4. When you choose a table format, you will see a Format as Table dialogue box
appear. Make sure the cell range shown is the range that you want for your table;
Click the OK button to create your table.
15
The City School 2021-2022
1.4. Advance Filters and Sort Features
Sorting Data
If you have a lot of records, it’s a good idea to sort them because this way it will be
easier to find what you are looking for. You can put the data in alphabetical order for
text fields or start from the smallest to the largest (and vice versa) for numbers. To sort
data do the folowing:
1. Choose a column that you want to sort by. Click on the Sort & Filter option on
the Home tab and select the order either ascending or descending as per your
necessity.
2. If there is any data in your other adjacent columns a warning window will appear
before performing the sorting option to expand the selection or continue with the
existing selection.
16
The City School 2021-2022
Advanced Filters
Advanced filters can be constructed to get more control over your data tables.
1. As an example, we want to display the records of people who purchased camera.
Data Handling
Click the arrow button next to a field header Type.
2. Click Text Filters and then click Custom Filter. In the camera list, click contains and
in the text box next to it, type camera.
3. Click OK. Then only those records whose Type field contains the word camera are
displayed.
17
The City School 2021-2022
1.5. Working with Power and Percentage Formula
Power
In complex calculations, there is more than one Checkpoint
part to the formula, the order of the calculations A database (DB), is an organized
collection of data.
is from left to right, but any part of the formula in Relative Reference is the cell reference.
When you copy a cell that has a formula,
parentheses will be calculated first. the formula changes automatically.
An absolute reference is used when we
want to keep a cell, a row or a column
constant when copying a formula.
Try simple exponent/power calculation using a ^ symbol in your formula answer will
be 4.
Type the numbers below. Click any cell and type =((C1^A1)-(D1^B1))+((B1/A1)*A1)^2
18
The City School 2021-2022
Percentage
Values can be changed from a decimal number to a percentage by applying the
percentage format. Microsoft Excel multiplies the cell by 100 and displays the result
Data Handling
with the percentage sign.
1. Enter the data shown in the image below
2. Click cell B3 and type =B2/D2 and click cell C3 and type =C2/D2.
3. Select the cells which contain the numbers you want to format, in this case, B3 and
C3. On the Home tab, in the Number group, click the Percentage symbol button %.
19
The City School 2021-2022
3. Percentage can be applied through formula directly putting *100 at the end of the
formula.
1.6. Common Error Messages in Excel
If we do mistake while typing formulas. MS Excel will show you different types of
errors relevant to the mistake we have made in a formula. The most common error
messages are:
######
This message appears when the column is not
wide enough to display all of its content. You can
correct it by increasing the width of the column to
fit the content correctly.
#DIV/0!
This error message appears when you divide
something by 0. You can correct it by changing
the divider in the function or formula so it is not
zero or blank.
20
The City School 2021-2022
#Name?
This error message appears when you have
typed a wrong formula and MS Excel cannot
recognize it. You can correct it by typing the
correct formula’s name. Data Handling
#VALUE! Error
This error appears when your formula includes
cells that contain text and numbers. You can
correct it by correcting data types.
1.7. Advance Charts
Charts in Excel
A chart is a graphical representation of data and describes the overall analysis
visually. There are several type charts in MS Excel for different sorts of data.
Column/Bar Chart
Column/bar chart is used to illustrate
comparisons between a series of data.
In a column chart, categories appear
horizontally (x-axis) and numeric values
appear vertically (y-axis). The opposite
happens in a bar chart which is one of the
most commonly used chart types.
21
The City School 2021-2022
Line Chart
It is used to display trends. It shows the
changes in data over a period of time.
Numeric values always appear vertically
(y-axis) and categories horizontally (x-axis).
It is suitable for showing data for a large
number of groups.
Pie Chart
It used to display only one series of data.
It shows the relationship of the parts to the
whole. You have to pay attention. It is suitable
for showing data for one group.
Creating Chart in Excel
To create a column chart, execute the following steps:
1. Select the cells you want to chart, including the column titles and row labels. These
cells will be the source data for the chart. In our example, we’ll select cells A1:F6.
22
The City School 2021-2022
2. On the Insert tab, in the Charts group, select the chart type.
Data Handling
3. Choose the desired chart type from the drop-down menu.
4. The selected chart will be inserted in the worksheet.
23
The City School 2021-2022
5. To visualize data of a selected range of data, hold the ctrl key and select your
desired columns. For instance, in this example, we need to visualize fiction book
sales in the year 2010 only. Select the range A1:A6 hold down the ctrl key and select
the cell range D1:D6.
6. On the Insert tab, in the Charts group, select column chart option. Select your
desired chart style.
24
The City School 2021-2022
7. In order to visualize the fiction book sale from 2009 to 2011, select the desired
columns. On the Insert tab select Line Chart option. Select your desired chart style
from the drop-down menu.
Data Handling
1.8. Modifying and Formatting Chart Design
Chart Design
To modify the charts, select the chart and go to Design. Following modification options
are available:
Chart layouts
Excel allows you to add chart elements—such as chart titles, legends, and data
labels—to make your chart easier to read. To add a chart element, click the Add Chart
Element command on the Design tab, then choose the desired element from the drop-
down menu. The Quick Layout option allows you to select a predefined chart style.
25
The City School 2021-2022
Chart styles
Excel also includes several different chart styles,
The estimated amount of data on
which allow you to quickly modify the look and feel the internet created daily will be
of your chart. To change the chart style, select the 463 exabytes* in 2025.
desired style from the Chart styles group. * an exabyte is 1,000 bytes to the sixth power.
Data
The Data tab allows to switch the rows and columns of the chart. The Switch Rows/
Columns option swaps the data over the axis. Data being charted on the x-axis will
move to y-axis and vice-versa. On the other hand, the Select Data option allows you to
change the data range included in the chart.
26
The City School 2021-2022
Type
The Change Chart Type option allows to change the type of your current chart.
Data Handling
Chart Formatting
Every element of the chart is editable, to do that select that element of the chart and
go to Format tab.
27
The City School 2021-2022
1.9. Conditional Formatting
Conditional formatting allows you to
automatically apply formatting—such as Checkpoint
colors, icons, and data bars—to one or
more cells based on the cell value. To do Column/bar chart is used to illustrate
comparisons between a series of data.
this, you’ll need to create a conditional Line chart shows the changes in data
over a period of time.
formatting rule. For example, a conditional
Pie chart shows the relationship of the
formatting rule might be: If the value is less parts to the whole.
than $2000, color the cell red. By applying
this rule, you’d be able to quickly see which cells contain values less
than $2000.
Applying Conditional Formatting
In our example, we have a worksheet containing sales data, and we’d like to see which
salespeople are meeting their monthly sales goals. The sales goal is $4000 per month,
so we’ll create a conditional formatting rule for any cells containing a value higher
than 4000.
1. Select the desired cells for the conditional formatting rule.
28
The City School 2021-2022
2. From the Home tab, click the Conditional Formatting command. A drop-down
menu will appear.
3. Hover the mouse over the desired conditional formatting type, then select the
desired rule from the menu that appears. In our example, we want to highlight cells
Data Handling
that are greater than $4000.
4. A dialog box will appear. Enter the desired value(s) into the blank field. In our
example, we’ll enter $4000 as our value.
5. Select a formatting style from the drop-down menu. In our example, we’ll choose
Green Fill with Dark Green Text, then click OK.
6. The conditional formatting will be applied to the selected cells. In our example, it’s
easy to see which salespeople reached the $4000 sales goal for each month.
29
The City School 2021-2022
1.10. Import and Export Data as CSV Files
In MS Excel we can import and export data from many sources to many types of file.
One of the most common sources for import and export is the CSV file. CSV files are
Comma-Separated Values and can be incorporated in any software or database.
Import a CSV File
To import a CSV file, follow these steps:
1. From the office ribbon go to the Data Tab and click the From Text button.
2. Select the CSV file from the file browser window that just opened.
30
The City School 2021-2022
3. After selecting the file select delimited from the Text Import Wizard.
Data Handling
4. Click next and at this point, data can be separated through a Tab, Semicolon,
Comma, or Space and can be specified in the Other: box and click next and Finish.
Export Data in CSV
Open an Excel file, on the File tab click Save As and click Browse. Select the file type as
CSV and click save.
31
The City School 2021-2022
1.11. Pivot Table
When you have a lot of data, it can sometimes be difficult to analyze all of the
information in your worksheet. PivotTables can help make your worksheets more
manageable by summarizing your data and allowing you to manipulate it in different
ways.
Using Pivot Tables to Answer Questions
Consider the example below. Let’s say we wanted to answer the question What is the
amount sold by each salesperson? Answering it could be time consuming and difficult;
each salesperson appears on multiple rows, and we would need to total all of their
different orders individually. We could use the Subtotal command to help find the total
for each salesperson, but we would still have a lot of data to work with.
Fortunately, a PivotTable can instantly calculate and summarize the data in a way
that’s both easy to read and manipulate. When we are done, the PivotTable will look
something like this:
32
The City School 2021-2022
Once you’ve created a PivotTable, you can use it to answer different questions by
rearranging—or pivoting—the data. For example, let’s say we wanted to answer What
is the total amount sold in each month? We could modify our PivotTable to look like
Data Handling
this:
Creating Pivot Table
1. Select the table or cells (including column headers) you want to include in your
PivotTable.
2. From the Insert tab, click the PivotTable command.
33
The City School 2021-2022
3. The Create PivotTable dialog box will appear. Choose your settings, then click OK. In
our example, we’ll use Table1 as our source data and place the PivotTable on a new
worksheet.
4. A blank PivotTable and Field List will appear on a new worksheet.
5. Once you create a PivotTable, you will need to decide which fields to add. Each field
is simply a column header from the source data. In the PivotTable Field List, check
the box for each field you want to add. In our example, we want to know the total
amount sold by each salesperson, so we will check the Salesperson and Order
Amount fields.
34
The City School 2021-2022
6. The selected fields will be added to one of the four areas below the Field List. In our
example, the Salesperson field has been added to the Rows area, while the Order
Amount has been added to the Values area. Alternatively, you can click, hold, and
Data Handling
drag a field to the desired area.
7. The PivotTable will calculate and summarize the selected fields. In our example, the
PivotTable shows the amount sold by each salesperson.
35
The City School 2021-2022
Just like with normal spreadsheets, you can sort the data in a PivotTable using the
Sort & Filter command on the Home tab. You can also apply any type of number
formatting you want. For example, you may want to change the number format to
Currency. However, be aware that some types of formatting may disappear when you
modify the PivotTable.
If you change any of the data in your source worksheet, the PivotTable will not update
automatically. To manually update it, select the PivotTable and then go to Analyse >
Refresh.
Pivoting Data
One of the best things about PivotTables is that they can quickly pivot or reorganize
data, allowing you to look at your worksheet data in different ways. Pivoting data can
help you answer different questions and even experiment with the data to discover
new trends and patterns.
In our example, we used the PivotTable to answer the question: What is the total
amount sold by each salesperson? But now we’d like to answer a new question: What
is the total amount sold in each month? We can do this by simply changing the field in
the Rows area.
36
The City School 2021-2022
To change row:
1. Click, hold, and drag any existing fields out of the Rows area. The field will
Data Handling
disappear.
2. Drag a new field from the Field List into the Rows area. In our example, we will use
the Month field.
3. The PivotTable will adjust or pivot to show the new data. In our example, it now
shows the total order amount for each month.
37
The City School 2021-2022
To add a column
So far, our PivotTable has only shown one column of data at a time. To show multiple
columns, you will need to add a field to the Columns area.
1. Drag a field from the Field List into the Columns area. In our example, we will use
the Region field.
2. The PivotTable will include multiple columns. In our example, there is now a column
for each region.
38
The City School 2021-2022
3. The PivotTable will include multiple columns. In our example, there is now a column
for each region.
Adding Filters
In our example, we will filter out certain salespeople to determine how they affect the Data Handling
total sales.
1. Drag a field from the Field List to the Filters area. In this example, we will use the
Salesperson field.
2. The filter will appear above the PivotTable. Click the drop-down arrow, then check
the box next to Select Multiple Items.
39
The City School 2021-2022
3. Uncheck the box next to any item you don’t want to include in the PivotTable. In our
example, we’ll uncheck the boxes for a few salespeople, then click OK.
4. The PivotTable will adjust to reflect the changes.
40
The City School 2021-2022
Slicers
Slicers make filtering data in PivotTables even easier. Slicers are just like filters, but
they’re easier and faster to use, allowing you to instantly pivot your data. If you
frequently filter your PivotTables, you may want to consider using slicers instead of
filters. Data Handling
Adding Slicers
1. Select any cell in the PivotTable. From the Analyze tab, click the Insert Slicer
command.
2. A dialog box will appear. Check the box next to the desired field. In our example,
we’ll select Salesperson, then click OK.
41
The City School 2021-2022
3. The slicer will appear next to the PivotTable. Each selected item will be highlighted
in blue. In the example below, the slicer contains all eight salespeople, but only five
of them are currently selected.
4. Just like filters, only selected items are used in the PivotTable. When you select
or deselect an item, the PivotTable will instantly reflect the change. Try selecting
different items to see how they affect the PivotTable. Press and hold the Ctrl key on
your keyboard to select multiple items at once.
42
The City School 2021-2022
Pivot Charts
Pivot Charts are like regular charts, except they display data from a Pivot Table. Just
like regular charts, you’ll be able to select a chart type, layout, and style that will best
represent the data.
Adding Pivot Charts Data Handling
In the example below, our PivotTable is showing a portion of each region’s sales
figures. We’ll use a PivotChart so we can see the information more clearly.
1. Select any cell in your Pivot Table. From the Insert tab, click the PivotChart
command.
2. The Insert Chart dialog box will appear. Select the desired chart type and layout,
then click OK.
43
The City School 2021-2022
3. The PivotChart will appear.
4. Try using filters or slicers to narrow down the data in your PivotChart. To view
different subsets of information, change the columns or rows in your PivotTable.
In the example below, we’ve changed the PivotTable to view the monthly sales for
each salesperson.
44
Let’s Review
1. A database (DB), is an organized collection of data.
2. ###### message appears when the column is not wide enough to display all of its
content.
3. #DIV/0! error message appears when you divide something by 0.
4. #Name? This error message appears when you have typed a wrong formula and MS
Excel cannot recognize it.
5. #Value! error appears when your formula includes cells that contain text and numbers.
6. Column/bar chart is used to illustrate comparisons between a series of data.
7. Line chart used to display trends.
8. Pie chart is used to display only one series of data.
9. Conditional formatting allows you to automatically apply formatting—such as colors,
icons, and data bars—to one or more cells based on the cell value.
10. CSV files are Comma-Separated Values and can be incorporated in any software or
database
11. PivotTables can help make your worksheets more manageable by summarizing your
data and allowing you to manipulate it in different ways.
12. Slicers are just like filters, but they’re easier and faster to use, allowing you to instantly
pivot your data.
13. PivotCharts are like regular charts, except they display data from a PivotTable.
My Notes!
45
Different Types of Websites
Blogging Websites
Features regularly updated articles, photos and
videos.
Business Websites
Committed to depicting a particular business. It conveys
the sorts of items as well as services the company/
business offers.
e-Commerce Websites
An online shopping destination where users can purchase
products or services from your company.
Social Media Websites
These websites are normally made to let individuals share
contemplations, pictures or thoughts, or just associate with
others corresponding to a specific topic.
Forum Websites
Network or Social Forums are an incredible method to
connect and share thoughts with individuals with similar
interests or from comparative foundations through the
internet.
2. Building a Website
Different Types of Websites
Blogging Websites
Features regularly updated articles, photos and
videos.
Business Websites
Committed to depicting a particular business. It conveys Student Learning Outcomes
the sorts of items as well as services the company/
business offers. After going through this chapter, students will be able to:
1. Understand what a webpage is
e-Commerce Websites 2. Familiarize with HTML, common tags of HTML and HTML 5
An online shopping destination where users can purchase 3. Familiarize with Adobe Dreamweaver interface.
products or services from your company. 4. Create a webpage, add content and create hyperlinks in DW
5. Work with tables in DW and manage website layout using tables
6. Work with inserting images in DW
Social Media Websites 7. Embed video and audio in website
These websites are normally made to let individuals share 8. Understand CSS, its types and syntax
contemplations, pictures or thoughts, or just associate with 9. Work with CSS using UI of DW
others corresponding to a specific topic. 10. Apply CSS on HTML script
11. Understand what web forms are
Forum Websites 12. Create a web form with DW
Network or Social Forums are an incredible method to ISTE Student Standard Coverage
connect and share thoughts with individuals with similar
interests or from comparative foundations through the
internet. Empowered Innovative Creative
Learner Designer Communicator
1a 1d 4a 4c 6d
The City School 2021-2022
2.1. What is a Webpage
A web page or webpage is a document commonly written in HTML (Hypertext Mark-
up Language) that is accessible through the Internet or other networks using an
Internet browser. A web page is accessed by entering a URL address and may contain
text, graphics, and hyperlinks to other web pages and files.
A webpage can contain multiple types of scripting and programming languages such
as HTML, CSS, JavaScript, Python, PHP, ASP.Net etc.
2.2. Getting Started with HTML
Hypertext Mark-up Language (HTML) is the standard mark-up language for
documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages such as
JavaScript.
HTML elements are the building blocks of HTML pages. With HTML constructs, images
and other objects such as interactive forms may be embedded into the rendered
page. HTML provides a means to create structured documents by denoting structural
semantics for text such as headings, paragraphs, lists, links, quotes and other items.
HTML elements are delineated by tags, written using angle brackets. Tags such as
<img /> and <input /> directly introduce content into the page. Other tags such as <p>
surround and provide information about document text and may include other tags
as sub-elements. Browsers do not display the HTML tags but use them to interpret the
content of the page.
HTML5 is the latest version of Hypertext Mark-up Language, HTML5 has been
designed to deliver almost everything you’d want to do online without requiring
additional software such as browser plugins. It does everything from animation
to apps, music to movies, and can also be used to build incredibly complicated
applications that run in your browser.
48
The City School 2021-2022
HTML Tags
There are two types of HTML tags
Building a Website
Types of
HTML tags
Paired Unpaired
HTML tags HTML tags
< > < /> < >
Paired HTML Tags
A paired tag consists of two tags, the first one is called an opening tag and the second
one is called closing tag. These tags contain the text in between at which the effect of
that tag will be applied. For example: <b>ABC</b>
Here <b> is the opening tag, </b> is the closing tag and ABC the text in between which
will result as ABC on the browser screen. Some more examples of paired HTML tags
are given below:
• <li> </li> List Items
The <li> tag defines a list item. The <li> tag is used inside ordered lists(<ol>), unordered
lists (<ul>).
Sample Code Output
<ol> 1. Coffee
<li>Coffee</li> 2. Tea
<li>Tea</li> 3. Milk
<li>Milk</li> 4. Water
<li>Water</li> 5. Juice
<li>Juice</li> 6. Shake
<li>Shake</li>
</ol>
49
The City School 2021-2022
• <ul> </ul> Unordered list items
The <ul> tag defines an unordered (bulleted) list. Use the <ul> tag together with the <li>
tag to create unordered lists.
Sample Code Output
<ul> Coffee
<li>Coffee</li> Tea
<li>Tea</li> Milk
<li>Milk</li> Water
<li>Water</li>
</ul>
• <p> </p> Paragraph
The paragraph tag defines a paragraph.
Sample Code Output
The p element
<h1>The p element</h1>
<p>This is a paragraph.</p> This is a paragraph.
<p>This is a paragraph.</p>
<p>This is a paragraph.</p> This is a paragraph.
This is a paragraph.
Unpaired HTML Tags
An Unpaired tag is a single tag which does not need a companion tag. These tags can
be written like < > or < /> both works as same, it’s your choice which style you choose.
• <br> Break
An Unpaired tag is a single tag which does not need a companion tag. These tags can
be written like < > or < /> both works as same, it’s your choice which style you choose.
Sample Code Output
<html>
<body> The br element
<h1>The br element</h1> To force
<p>To force<br> line breaks<br> in line breaks
a text,<br> use the br<br> in a text,
element.</p> use the br
</body> element.
</html>
50