S™ a, Technology Crug ieyfetlele Citizen Sat OI Ter feeremtacsls ICTECH Computing Prey tty) EdTech Department ¢) She C7, IATA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 Ill, Lahore, Pakistan. Ph: +92 (42) 111 444 123 Fax: +92 (42) 35773065 Website: www.thecityschooledupk The entire computing curriculum is Mapped with the attainment levels of the UK National Curriculum, ICDL and ISTE Student Standards 2017-2018. sett ©) | C D L ISTE. for Education Since 1978 The City Tehoal All rights reserved, No part of this publication may be reproduced or transmitted in any part by any means at any time,Table of Contents Data Handling sas TW. Understanding Databases. ee ened 12, Relative and Absolute References i EXC uncer 13. Format Sheet OS TabIe o-nnnmseninnnnnsinarnisnsinsnttnen 14, Advance Filters and Sort Features. mn 15, Werking with Power and Percentage FOFMUG ance een nen neenneneeinecnc 16. Common Error Mess006s ExCeL nmin co . 20 ne 18, Modifying and Formatting Chart DeSigh se enn ee ennnnninennn 19. Conditional Formatting. -.usmsevsin-nnnsinaenennniensntinaniaennnnennnn nanan 28 ‘M10. Import ond Export Data as CSV Files... AA PNG ose ce suc aamscnisnmna raster dD Building a Website. 21. What is 0 Webpage nnn 22. Getting Started with HTML orsnsa-nmnnineninninivaninenitnatienninninieaninaninnannnentnan 23. Creating @ WebpOGE ennnnnne iiiicnasannnascraeananncane 94: COPARTIDN HIME TR soon enon rae aorr rn one Een AS 25. Introduction to Adobe Dreamweaver... - - - concn 26 Getting Started with Adobe Dream WEQ¥er senescence SS 27. Creating Webpage in Dreamweaver... 28. Creating Website in DreamWeOVEt-wnmmnn-ninsnininaninenitnnetienninnininanianinnmienennnnsS9 29. Inserting Media With HTML wu-seomnenem peau Get SHUT NSS een oc oan Se eee! 21, CSS with Dreamweaver 70 212. Creating Web FOMMS wun-ommen - - - - cennnannsnnT2 All About Cloud BL What is @ Computer NetWork on -ise-nin-neninnstnttnntiennnniannninnencnecenn 8 52. Network Topology and Type... sicnitencariaratncmaunoasercaru 33, Types of Area NetWork nonsom - - a - coon 34, How Does the Internet Wot. coun nie eters nnnnnnininnneninineneenecnnen lSTable of Contents 35. Intemet Functions, carapace ee sunset 3.6, Communication LINKS. unsere - - a - co 4 37. Dato ond Network SECUritY —.o-ssas oneness cn 5 38. Understanding Digital Citizenship. 3, ClOUd StOFAGE wn nnn 7 310.Getting Familiar with Google WOrkSPACE emennennnnnn 5.1, Google Drive... 5312, Getting Started with Google Docs. - - - - oon 3 B13. Google THONSIOtE. nee nnn cece 314, Google MOPS oe oe nen oe a) JA Wiha lb Sway tiscccaceaaecneaancaans atc seccgacS 4.2, What Can | Create with Swou?.. - - - - olO6 43, Getting Started with M3 SWAy..—esco0-eseevnse one nnnnnnnennenneesnecne OF Programming the Computer-Python a a si 5.2. FIOWCHATIS ONG AIGOFIINTS ann-narnnennnenenn passes i 53, Pseudocode nn a - - - once 5.4. What Is @ PrOGIOM n-ne tenn 55. Getting Started with Python... $56. Vertobtes: nid Dat TY annette end 57 CSIR nme 58. Python NUMBEFS a cesar ceca 59. Calculation with NUMBENS cere 510, LIST in Python - ee - . 124 51, Conditional Statements in PUthoN cnn so 125 512. LOOPS IM PYTNON eevee sen eT 5515, Functions in PYlNOM ooeeeeenne er) 2314, EFTOF HOPING I PYNOR nese sasccasesctI30 515. Creating Graphics with Python. se nnn 11 S516. Event Handing in Python eee ee ree en SATable of Contents Robotics 61. What is Robotics, 6.2. Getting Started with Edls0n 0 nnn 63. Introduction 10 EAPY enna 64, Starting to Code in EAP Ye eeeenee 65. Edison Drive Function in EoPy... 66. Variables in Edis 07 an 67. Looping Structures in Edison, 6.8, Play Tunes on EdISOM eevee oon 69. Conditional Structures In E4800 nna 610, Obstacle Detection a 6M, Clap Control DIV ern 6.12 Line Tracking Sensor... 613, Light Sensors. 6.4 Light Sens0FS cece ne Mobile App Development 1. TA, Getting Storted with APPLODenen 72. setProperty() Block en 75, Event Handling nese 7.4, Working with Sound... 75. Working with Images seen 76, Designing an App. Glossary. 5 167 70What is ICTECH Computing? The ICTech (Innovation in Curriculurn 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 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. om 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.PELE Marlette Student Learning Outcomes After going through this chapter, students will be able to: 1. Understand the concept of databas: Format data as table and use advance filters and sorting techniques on the data. Understand and use relative and absolute references Aw Understand and correct error messages Work with power and percentage formula Format different types of chart Create pivot tables on a given data set oy an Generate different dota 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 1. Generute pivot charts or Uesired vuriubles frum Ue giver datu sel using fillers und slivers 12. Save and print the pivot table and charts ISTE Student Standard Coverage er fatty Per lle [ I éd1.1. Understanding Databases A database (D8), 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 Al. 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. (Genera! =| IEiContional Formatting = + Zeit $-%> ee eC Ba 7 Broma- & Paste . 9 aACR ed 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 2 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, Data Hand 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 Pyar toa) $ES1 Cell reference will not update while copying or filling $e1 Only the row reference will update and the column remains the some ESI Only column reference will update and row remains same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 ¢ 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, lke 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 dota range. In the example below, we selet cell range A2:D9.CR ed 3. This will disploy 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 hi your choice. - £ co] £6 =O Pewee lee E eal =a = Fe eI es | Com =~ las cod gemsTEne = ro] . ‘ ° 2 3 a Catering Invoice ae 05/0/16 UUwiTpRIce “QUANTI “LINE TOTAL S99 a 1 a0 0 ne 2» 220 » su 0 240, Da i su 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. Catering Invoica ie er Ser Catrng noice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.CR ed Advanced Filters Advanced filters can be constructed to get more control over your data tables 1. Asan example, we want to display the records of people who purchased camera. Click the arrow button next to a field header Type. Data Handling 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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 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. PE esa oan 2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. Enter the data shown in the image below ‘4go1con0 510072000 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 % Data HandERS 3. Percentage can be applied through formula directly putting “100 at the end of the formula. eee en ed Pern) Betas) 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: seater 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. 361132000 148940000 510072000#Name? This error message appears when you have typed @ wrong formula and MS Cxcel cannot recognize it. You can correct it by typing the correct formule’s name. #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 CR ed 5 A chart is a graphical representation of data and describes the overall analysis, visuallly. There are several type charts in MS Excel for different sorts of data Column/Bar Chart Column/bar chart is used to illustrate Chart Title comparisons between a series of data, 140000 Ina column chart, categories appear horizontally (x-axis) and numeric values | som appear vertically (y-axis). The opposite na | inl | il most commonly used chart types. happens In a bar chart which is one of the | = Data HandERS Line Chart Its used to display trends. it shows the — comme changes in data over a period of time. Sne Numeric values always appear vertically a (y-axis) and categories horizontally (x-axis). | sas It is suitable for showing data for a large sono NOE number of groups = ee Pie Chart Chart Title 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 fms Wry force SGA Fear oe hi 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 ALF6. Gena! -) TiConsonl Ferman $-% > Formos Tle Pete BA Beatsytes- [Bromar~ Fiction Book Sales | challenge | @ q o Se EPiva pir’ Data Hand hea ln 4 'ERS 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 A186 hold down the ctrl key and select the cell range DLD6. S10017 $26,134 378.870 . s49385 $73,428 $24,236 $71,009 $81474 $16,730 x $11355 $17,686 $35,358 $21,388, 6. On the Insert tab, in the Charts group, select column chart option. Select your desired chart style =) Fe a & at ills Balan CODE lates estore es ‘Book Salen 2010Piva pir’ 7. In order to visualize the fiction book sale from 2009 to 201, select the desired columns, On the Insert tab select Line Chart option. Select your desired chart style from the drop-down menu D o£ Data Hand 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. chart Tae har TleChart styles 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. CHART TITLE = all 4 “ etn Beko ge |S . 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-cxis will move to y-oxis and vice-versa. On the other hand, the Select Data option allows you to change the data range included in the chart.Type The Change Chart Type option allows to change the type of your current chart. Data Hand Chart Formatting Every element of the chart Is editable, to do that select that element of the chart and go to Format tab. 4 ° z 4 : chart Te : Saree 00 ; | tense hen £ Ld ‘Albertson, Kathy brennan, Michel Davis, Wiliam Dumilao, Richard Flores, Tia Post, Melisse JO thompson, shannon 1 Wolters, Chris |2[Grand Total 723565 Is A b [Row Labels ~|sum ot 8 Order Amount 2650 Siu 1935 1490 4565 1590 31460 4375 PivotTable FieldsERS 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. > PivotTable Fields \Albertson. Kathy Sassen Brennan Michel Davis item — 'Dumico, Richord a Flores, Tia fous Dalene Fost, Melisa che eae thompson, shannon wetter, Cas 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 ond even experiment with the data te 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.CR ed To change row: 1. Click, hold, and drag any existing fields out of the Rows area. The field will disoppecr. 2 pee) oe eee be] 3140} ao coun 5 4375) Ea 5 ame vas g sage) | ee sad 8 a es ery Drag a new field from the Field List into the Rows area. In our example, we will use the Month field. PivotTable Fields Croat ie ts pat a Ken 2 ty ete aye a 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, ne ge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 Re egion field. PivotTable Fields mags 2. The PivotTable will include multiple columns. In our example, there is now a column, for each region A e| Die | pyuotTable Feiss ™ ‘um of Order Amount Column Labels a Row Labels “East North south West Grand Total n=. January 1690 1140 3110 3150-9090 | = February [79H] 1720. 9975 1515 9160, | aterm artton March 700200 3790 525 _S915_| raw cane Grand Total 4240 3140 10875 519023565, teCR ed 3. The PivotTable will include multiple columns. In our example, there is now a column. for each region. oe 2 Adding Filters Sj = In our example, we will filter out certain salespeople to determine how they affect the is total sales. = i BS} 1. Drag a field from the Field List to the Filters area, In this example, we will use the ‘3 Salesperson field. PivotTable Fields 7 ren . 2. The filter will oppear above the PivotTable. Click the drop-down arrow, then check the box next to Select Multiple Items. 5 iene th n 4 1 Salesperson zB 3 sumotorderan =. RowLabels [North South West Grand Total 5 lanvary = Ti40 2110 a1S0 9000 & [February = [1720 3975 1515 9160) 7 Moron si L200, 5790 152815 8 Grand Total 3160 10875 519073565 & emu 10 aoe > Pivot Table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. = oe oe 4 A cloner arin sor 1" Solesperson ae 2 ovepert _ 3. Sumo Order An i F 2 4 Row Labels North South West Grand Total = Ei Jcrvcry Nap aio 0160 7000, SS 6 |February 1720 3975 15159160, ns I 7 March | 200 3790. 525 5915) | oeyeuadsanaan 8 Grand Total | 3160 10875 519023565, 2 7 ae arsss 10, = eee W 12 ows | = vans, i vn seats M4 15 i Ee ees a 4, The PivotTable will adjust to reflect the changes. Wite esos A 1 Salesperson (Molle items) = 2 3 Sum of Order Amount Column Labels |= 4 Row Labels ~ East 5 January 6 |Fobruary 7 March 3. Grand Total South West Grand Total 765 1100 2750 4615 (575) 25 “550 130 350600400, 1350 1490 1935 37007325 sent [HORSE TS) 1 pivotrable Fie.. *Slicers Slicers make filtering data in PivotTables even easier. Slicers are just lke 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 1. Select any cell in the PivotTable. From the Analyze tab, click the Insert Slicer command. Teese aselect~ ate CH oe ee 2. Adialog box will appear. Check the box next to the desired field. In our example, welll select Salesperson, then click OK mo ie > 8 | a Prat Ramee Show A A L om ~ PivotTable Fie 1 Salesperson z pserccmeeni 2 | Seroe 3. Sum of Order A\ F = 5 4 Row Labels | South West Grar = 5 January 5 1100 2750 a necate 6 |February 5] 235 550 a 7 (March |D 600 _400 Yomrers | cowmns 8 Grand Total D 1935 3700 Sale. = [EI] nogion = Ff 9 Sows E values 10 Noam > | Samot. = u 57) etertaout Sia 8-4 + ww Sheet! [751 QuaAePSSIE] Fr ie Piva pir’ Data Hand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, oe 4 rs 2 €joj e F 64 J] Solespenon | solespenon | S'Sum@tORErAM) Albertson, Kathy | $ lcnvory | iSthatchest 9) tp rsp as 6 Febuary | Davis Wim 5550 1380 7 March 904001350 8 GrandTotal —° DUMIGO.Richaré 55 57997325 3 |e a 2 | Post, Melisa: 2 | esueonstarnon 13 @ |, Watters, hi 4, Just lke 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. a A 3 [enn En] A 1 |Salesperson (Multiple Items) |_| Salesperson 2 2 RowLabels| Sum of Order Amount _lberlson. Kathy 4 [North 3160 | [Brennan, Michael —_| 5 |South 1675 | 6 |West si90._| [Davis Wiliam | 7 |Grand Total 19225 Gumiao, Rienara | ; u _ Fil | Flores, ia J 10 Post, Melissa ti | [Thompson Shannon | ne alors. Chi 14Piva pir’ Pivot Charts Pivot Charts are like regular charts, except they display data from a Pivot Table, Just like reqular charts, you'll be able to select a chart tupe, layout, and stule that will best represent the data. Adding Pivot Charts In the example below, our PivotTable is showing a portion of each region's soles 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. Mae Page Layout Formas ded Table Mutations yy addins ~ nay Line Column Win 5 Loss sacsins a tours Spactnes 2. The Insert Chart dialog box will appear. Select the desired chart type and layout. then click OK. iy 4 A oy 9 3 “cutee Colunn soe [OES |G Data Hand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. fe 1 Salesperson (Mitipie terns) = 2 ——"— ProtChat i MarchLet’s Review A database (D8), is an organized collection of data HHS message appears when the column is not wide enough ta display all of its content. 3. #DIV/O! 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 #Value! error appears when your formula includes cells that contain text and numbers Column/bar chart is used to illustrate comparisons between a series of data Line chart used to display trends. Pie chart is used to display only one series of data. 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. CSV files are Comma-Separated Values and can be incorporated in any software or database PivotTables can help make your worksheets more manageable by summarizing your data and allowing you to manipulate it in different ways. Slicers are just like filters, but they're easier and faster to use, allowing you to instantly pivot your data, PivotCharts are like regular charts, except they display data from a PivotTable. My Notes!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. bsite: 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 simila interests or from cornparalive foundations through U internet.2. Building a Website Student Learning Outcomes After going through this chapter, students will be able to: Understand what a webpage is . Familiarize with HTML, common tags of HTML and HTML 5 Familiarize with Adobe Dreamweaver interface. Create a webpage, add content and create hyperlinks in DW . Work with tables in DW and manage website layout using tables 2. 3 4. 5 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 Ul of DW 10. Apply CSS on HTML seript 1. Understand what web forms are 12. Create a web form with DW ISTE Student Standard Coverage Empowered ee ieee Deen eat) CrtRee Eerie) 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 and directly introduce content into the page. Other tags such as

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. HTMLS Is the latest version of Hypertext Mark-up Language, HTMLS 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.AE) HTML Tags There are two types of HTML tags Building a Website Pele) re cue Vices 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: ABC Here is the opening tag, is the closing tag and ABC the text in between wi will result os ABC on the browser screen. Some more examples of paired HTML tags are given below’ +

List Items The

tag defines a list 'tem, The

tag is used inside ordered lists(

), unordered lists (
). Sample Code a peer eae pares erent Pareertetyaet Parris por renbeeyatT
Unordered list items The
tag defines an unordered (bulleted) list. Use the
tag together with the
• tag to create unordered lists. Sample Code Output rt pSPeren cage renege ast +
  Paragraph The paragraph tag defines a paragraph | Sample code output pesca Ug eee eC Ce eg Ca ee ened Ree ees es UC Ue oe 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. +
  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 ce aso Us cn Peetu raat eee reo an element. or fees Sern icesAE) «

  ---

  Horizontal rule The

  ---

  element is most often displayed as a horizontal rule that is used to separate content. Sample Code Output Erreney CN rr Building a Website ares HTML Tag Attributes Attributes define additional characteristics or properties of the element such as width and height of an image. Attributes are always specified in the start tag (or opening tag) and usually consists of name/value pairs like name="value”. 2.3. Creating a Webpage Creating an HTML page Is easy as saving @ notepad document, Follow the steps below to save an HTML using a simple text editor like Notepod. 1. Open notepad and create the basic HTML structure based on the following tags: i *Unsitied - Notepad File Edit Format View Help Jchtmi> lcHead> leTatle> My First weh page k/Title> k/Head> choy First Heading l

  My First paragraph.

  k/body> ] lc2. Save the file on your computer. Select File > Save as in the Notepad menu and manually change the indextxt to index html. Always save the first page of your web with the name index as indexhtml is the most common name used for the default paye shown on a website if no other page Is specified when a visitor requests the site. In other words, index.htm is the name used for the homepage of the website. Pras x 63 nee oe] Cae ere ewc f= . cmmadtnd ee Bron a mes 5 Decmaets «SR >] ———— one xy ee ete) CD | 3. After saving the file, close the notepad and double click on the file to execute. You will notice instead of opening this file in notepad it will open in your default web browser. SiBllinininiceaingininay) + a © > S @ File| DyTCS/eBooks-2/f0. & ORG: My First Heading My rt perneroph, 4, To edit the same file with text editor simply right click on the file and open with notepad.Eee 2.4. Common HTML Tags ... This tag specifies that the webpage is written in HTML. It appears at the very first and last line of the webpage. It is mainly used to show that the page uses HTMLS - the latest version of the language. Also known as the root element, this tag can be thought of as a parent tag for every other tag used in the page. ing a Website ... This tag is used to specify metadata about the webpage. It includes the webpage's namecTitle>..., its dependencies (JS and CSS scripts), font usage etc. stitle> ... As the name suggests, this tag contains the title/name of the webpage. You can see this in your browser's title bar for every webpage open in the browser. Search engines use this tag to extract the topic of the webpage. which is quite convenient when ranking relevant search results. ... Everything the user sees on a webpage is written inside this tag. It is a container for all the contents of the webpage. ... Six different variations of writing « heading.

  has the largest font size, while

  has the smallest.

  ...

  ‘A webpage's content is usually divided into blocks, specified by the div tag also known as division.

  ...

  Plain text is placed inside this tag,
  Aline break for webpages. Is used when wanting to write a new line. _... Used for writing a subscript (smaller font just below the mid-point of normal font). Example: HO ^... Similar to the above tag, but for superscripting. Example 12", ... OR ... For muking Ute lext bold ... For the underline. ... OR ... For making the text bold and em means to emphasize. ... Anchor tag. Primarily used for including hyperlinks. A tag ta display images in the webpage followed by the IRI or path where the image is located either on your drive or on the web, The alt tag is alternative is a contingency that If the Image Is not loaded from the server due to the wrong URL or non-responsive. connection from server a text related to the image will appear.AE) 2.5. Introduction to Adobe Dreamweaver Dreamweaver is a web development tool. It is basically for generating HTML while using an editable front end, kind of like using Word to do all your layout, and the end result is an HTML code. The idea Is that you should be able to do all of your layouts visually without having to worry about the underlying generated code. Adobe Dreamweaver is one of many HTML editors. It is used to edit HTML, PHP, JavaScript, CSS and related files and can also be used to upload them to one’s Web server. Dreamweaver is considered to be a WYSIWYG (What You See Is What You Get) editor, although what you see in the program Is not always an exact match of what you would see on a live page as that requires 0 thorough understanding of the code as well its structure. 2.6. Get ig Started with Adobe Dreamweaver Welcome Screen (On welcome screen select HTML to open a blank HTML file and save it in @ folder. Unlikely notepad Dreamweaver will save the document in HTML format. It is highly recommended to save your HTML documents in a separate folder as other documents like CSS and Images will also need to save in this folder, the reason behind this Is that other external resources will be ernbedded through the URL and Improper placements may cause malfunction of content. ing a Websiterere) Dreamweaver Interface DW Fie fot View inser Modify Format Comments Ste Winton Help lly Ov dv Designer» La Le mae me ee |SplR view to see both wae = [carent| eee ST mete eases — pee Sune rT ae Teena — [oan oom area = ———-_ ee eee IpoewranceanaadswTuL | ESE Bere | “loo ee Jmchor tinks to any er a Nemern Page Pacers te 2.7. Creating Webpage in Dreamweaver To add content on your webpage, we will use /) the design view of DW (Dreamweaver). This Checkpoint Ul looks similar to a word processing software but there are some limitations due to the HTML code. Follow the steps below to create an HTML. document about General information of Pakistan: 1. Open DW and copy-paste the text from google. 2. DW supports all the external HTML items. Therefore any data, text, and images copied from other sources will be pasted here with all the relevant formatting and hyperlinks, which might disturb the existing HTML layout, therefore while pasting external content use the Ctrl+Shift+V to Paste Special and select the option of Text only.Eee 3. Add the HTML title to About Pakistan, pee ee Sera ei 4. Select the text of Pakistan heading and change it to Heading 1 from the Properties option at the bottom. ‘ae tant snip ‘Sibeenanem trace gene tiiou sear kieaes oS eevee) are da 6h a sar sg ‘Stand at Onan tty randy nein 5. To change the font colour of the heading, select Page Properties. A dialog box will open. From the Category menu, select Headings (CSS) and select the desired font colour. eS ee Oo a [ser oe GE OE BRE} cme Pakistan ing a Website6 Once the colour is applied DW will automatically create a CSS with the name of stylel as a default action, this style can also be used to apply the same formatting ‘to any other text as well. Sh Sakeeeo == | Pakistan pk 7. Create five-point bulleted list for the information of Pakistan using the Bullet option from the Properties on the bottom. Siar PUR S eee Pakistan 8. To add hyperlink, add a simple text Click here for more information. Copy and poste the URL in the Link section in the Properties panel at the bottom. Ei aco sh 2S [iim] ese 2 me Une UI Foptin ama] | Forms Paraoah ss [none uu me | Thess a ae | |9. Save the file and click on the globe icon or press F12 to preview it on the defauit web browser. Building a Website 10. The preview would look like this: /O[M [mM IN| w/OlS|m/6[N [ele x + < > C(O rie) DRESARcCRERSCTM +) ODO * 7G : Pakistan isan, ficial the llanic Republic of Pakistan i cou in South Asia Ii the wor kamen populous county vhs population exceeding 2122 mca, and haste world’s second ages Mesin popultion, Pakistan isthe eines cout by rea, spaning 881913, Sere itr (340,59 ear en) Tas a 1 06-30) coin song the [Srsins Senso} Golf of Oram x the south an oraz by nda te east Afshin tothe rem coro a Chat orate sper fom Tan | AfphanrasWatan Conor inthe northwest, nd also shares a mune border ith Ora 2.8. Creating Website in Dreamweaver In a traditional website, there Is a lot of content containing text, images, videos, sounds, etc. this content needs proper management to effectively use the space and also provide a clear and aesthetic look To users/viewer, Content management on @ webpage can be achieved in several ways but the two most common ways are: + Tables * DIVs. Tables in HTML can be formed using the Table icon which will later ask for theproperties of the table like the number of rows and column, table width, border thickness, cell padding and spacing (cell margins). The table can also have tables inside to manage the content more symmetrically, and this table is called a nested table/s. Follow the steps below to create a webpage with navigation using tables: 1. Add background colour or a background image to the page from Page Properties option on the bottom, also set the font to Verdana from the same menu so the whole text in this document should be displayed with Verdana font. These formatting will cutomatically add CSS in the code. SS — 2. Add the HTML webpage title as Search Engine Database. oeAE) 3. Insert a table from Insert> Table. a = a rey o cE ° a = is} tires = ‘Emat ink ES ey Wrainde ohana econ oO 4. Create a new table with 1000px width and 6 rows and 4 columns. Set cell border, cell padding, cell spacing to 0. by doing this the table will not visible and can be used only for the structure and content management. Dw om & ay File Edt View Insert Modify Fermat Commands Site Window Helprere) 5. Select the cells of the first row, right-click to open the menu and from the menu select Table> Merge Cells or press CTRL+ALT+M after selecting the cells. 6. Insert a relevant header image to the topic in a merged cell as a header of the website, Using the insert image option by clicking Insert>Image 7. Inthe next line write the name of search engines in the centre of the cells column- wise: Google, Bing, Yahoo and Baidu and also create a link to each of them to their respective websites. To center align the text, hilight the text and right click. Select Align>Left.9. Download the logos of these search engines and place them in the third row. Images can be inserted from Insertslmage. Resize the image size to your desired size. To align the images, right click the image and select the desired alignment 10. To hyperlink the images with the relevant websites, select the image and enter the search engine's URL in the Link section in Properties panel. Se mentee re Ea Meo Eiamemeniah 7 oo SAO! ao11. Merge the remaining columns and insert some relevant information about each search engine. 2.9. Inserting Media with HTML5 HTMLS supports video and audio tags that allow users to play video and audio files in a browser, without an external plug-in or player. Dreamweaver supports code hints for adding video and audio tags. Inserting Sound with HTML5. Follow these steps to embed an Audio element in an open Dreamweaver CSS HTML web page: 1. To insert audio, go the to Split View in the Dreamweaver.2. In Split view, place your cursor after the opening tag, and press Enter to create a new line of code. Type tag ea Oe Corere) 5. Next, we'll add a parameter to display a controller (player) for the audio. Press the spacebar, and double-click controls from the code hints. Important to note: the text between the tags will only be displayed in browsers that do not support the