Robot Programmer Knowledge Constructor Empowered Learner Digital Citizen Computational Thinker Innovative Designer Technology Explorer ICTECH Computing EdTech Department Developed By: The City School Third Edition
Education Technology Acknowledgements Project Lead 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 Project Team All rights reserved. No part of this publication may be reproduced or transmitted in any part by any means at any time. The entire computing curriculum is mapped with the attainment levels of the UK National Curriculum, ICDL and ISTE Student Standards 2017-2018. ICDL
Table of Contents 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 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 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
Table of Contents 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 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 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
Table of Contents 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 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 7.4. Working with Sound........................................................................................................................................................................................................................167 7.5. Working with Images.....................................................................................................................................................................................................................168 7.6. Designing an App .............................................................................................................................................................................................................................170 Glossary.......................................................................................................................................................174
What is ICTECH Computing? Structure of the Book Book Features Student Learning Outcomes ISTE Student Standard Coverage 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. These appear at the start of each chapter and define the skills students will be equipped with after completing the lesson. These represent the ISTE student standards covered in each chapter. A complete description of ISTE student standard can be found here. • 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
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. Checkpoints are learning bits that appear within the chapter at different stages to reinforce the important learning concepts. Food for neurons consist of fun facts or trending news about the topic. These appear within each chapter. Checkpoint Food for Neurons Let’s Review My Notes Chapter Highlights Each chapter ends with the key learning points that provide a complete overview of the chapter. Key terms appearing throughout the chapter are highlighted to draw learner’s attention. 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 Data analytics applications, or, more specifically, predictive analysis help in minimizing crime rates. Logistic companies are using data analysis to examine collected data and improve their overall efficiency. Self-learning healthcare programs, are able to work on data of individual patients to provide a personalized health recommendation. Big Data allows urban planners to develop a new understanding of how cities function. Data analysis allows smart meters to self-regulate energy consumption for the most efficient energy use. Security Delivery Healthcare Urban Planning Energy Consumption
Student Learning Outcomes ISTE Student Standard Coverage 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 4. Understand and correct error messages 5. Work with power and percentage formula 6. Format different types of chart 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 11. Generate pivot charts on desired variables from the given data set using filters and slicers 12. Save and print the pivot table and charts After going through this chapter, students will be able to: Empowered Learner Creative Communicator Computational Thinker 1a 1d 5a 5b 5d 6d Data Handling
1.1. Understanding Databases 1.2. Relative and Absolute References in Excel 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). 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 2023-2024
Data Handling Relative Reference Absolute 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 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. 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 2023-2024
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 2023-2024
Data Handling 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. 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 2023-2024
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 2023-2024
Data Handling 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. 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 2023-2024
1.5. Working with Power and Percentage Formula Power In complex calculations, there is more than one part to the formula, the order of the calculations is from left to right, but any part of the formula in parentheses will be calculated first. 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 Checkpoint A database (DB), is an organized collection of data. Relative Reference is the cell reference. When you copy a cell that has a formula, 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. 18 The City School 2023-2024
Data Handling 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 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 2023-2024
3. Percentage can be applied through formula directly putting *100 at the end of the formula. 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. 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. ###### #DIV/0! 1.6. Common Error Messages in Excel 20 The City School 2023-2024
Data Handling #Name? #VALUE! Error 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. This error appears when your formula includes cells that contain text and numbers. You can correct it by correcting data types. 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 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. 1.7. Advance Charts Charts in Excel Column/Bar Chart 21 The City School 2023-2024
Line Chart Pie Chart Creating Chart in Excel 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. 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. 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. The City School 22 2023-2024
Data Handling 2. On the Insert tab, in the Charts group, select the chart type. 3. Choose the desired chart type from the drop-down menu. 4. The selected chart will be inserted in the worksheet. The City School 23 2023-2024
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 2023-2024
Data Handling 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. 1.8. Modifying and Formatting Chart Design To modify the charts, select the chart and go to Design. Following modification options are available: Chart layouts Chart Design 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 dropdown menu. The Quick Layout option allows you to select a predefined chart style. The City School 25 2023-2024
The estimated amount of data on the internet created daily will be 463 exabytes* in 2025. * an exabyte is 1,000 bytes to the sixth power. Chart styles Data Excel also includes several different chart styles, which allow you to quickly modify the look and feel of your chart. To change the chart style, select the desired style from the Chart styles group. 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 2023-2024
Data Handling Type The Change Chart Type option allows to change the type of your current chart. Every element of the chart is editable, to do that select that element of the chart and go to Format tab. Chart Formatting The City School 27 2023-2024
1.9. Conditional Formatting Applying Conditional Formatting 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. To do this, you’ll need to create a conditional formatting rule. For example, a conditional formatting rule might be: If the value is less than $2000, color the cell red. By applying this rule, you’d be able to quickly see which cells contain values less than $2000. 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. Checkpoint Column/bar chart is used to illustrate comparisons between a series of data. Line chart shows the changes in data over a period of time. Pie chart shows the relationship of the parts to the whole. 28 The City School 2023-2024
Data Handling 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 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. The City School 29 2023-2024
1.10. Import and Export Data as CSV Files Import a CSV File 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. 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. The City School 30 2023-2024
Data Handling Export Data in CSV 3. After selecting the file select delimited from the Text Import Wizard. 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. Open an Excel file, on the File tab click Save As and click Browse. Select the file type as CSV and click save. The City School 31 2023-2024
1.11. Pivot Table Using Pivot Tables to Answer Questions 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. 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: The City School 32 2023-2024
Data Handling 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 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. The City School 33 2023-2024
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. The City School 34 2023-2024
Data Handling 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 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. The City School 35 2023-2024
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. 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. Pivoting Data The City School 36 2023-2024
Data Handling 1. Click, hold, and drag any existing fields out of the Rows area. The field will 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. To change row: The City School 37 2023-2024
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. The City School 38 2023-2024
Data Handling 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 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. The City School 39 2023-2024
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. The City School 40 2023-2024
1. Select any cell in the PivotTable. From the Analyze tab, click the Insert Slicer Data Handling 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. 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. Adding Slicers The City School 41 2023-2024
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. 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. The City School 42 2023-2024
Data Handling 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. 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. Pivot Charts Adding Pivot Charts The City School 43 2023-2024
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. The City School 44 2023-2024
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 Business Websites e-Commerce Websites Social Media Websites Forum Websites Features regularly updated articles, photos and videos. Committed to depicting a particular business. It conveys the sorts of items as well as services the company/ business offers. An online shopping destination where users can purchase products or services from your company. These websites are normally made to let individuals share contemplations, pictures or thoughts, or just associate with others corresponding to a specific topic. 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.
Student Learning Outcomes ISTE Student Standard Coverage 1. Understand what a webpage is 2. Familiarize with HTML, common tags of HTML and HTML 5 3. Familiarize with Adobe Dreamweaver interface. 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 7. Embed video and audio in website 8. Understand CSS, its types and syntax 9. Work with CSS using UI of DW 10. Apply CSS on HTML script 11. Understand what web forms are 12. Create a web form with DW Empowered Learner Creative Communicator Innovative Designer 1a 1d 4a 4c 6d After going through this chapter, students will be able to: 2. Building a Website
2.1. What is a Webpage 2.2. Getting Started with HTML A web page or webpage is a document commonly written in HTML (Hypertext Markup 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. 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. The City School 48 2023-2024
Building a Website HTML Tags Paired HTML Tags • <li> </li> List Items 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: The <li> tag defines a list item. The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>). There are two types of HTML tags Types of HTML tags Paired HTML tags Unpaired HTML tags < > < /> < > <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> <li>Water</li> <li>Juice</li> <li>Shake</li> </ol> Sample Code 1. Coffee 2. Tea 3. Milk 4. Water 5. Juice 6. Shake Output The City School 49 2023-2024
• <ul> </ul> Unordered list items • <p> </p> Paragraph The <ul> tag defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create unordered lists. The paragraph tag defines a paragraph. 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. 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. <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> <li>Water</li> </ul> Sample Code <h1>The p element</h1> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> Sample Code Sample Code <html> <body> <h1>The br element</h1> <p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p> </body> </html> Coffee Tea Milk Water Output Output The p element This is a paragraph. This is a paragraph. This is a paragraph. Output The br element To force line breaks in a text, use the br element. Unpaired HTML Tags • <br> Break The City School 50 2023-2024