The City School 2021-2022
• <hr> Horizontal rule
The <hr> element is most often displayed as a horizontal rule that is used to separate
content.
Sample Code Output
<html> Building a Website
<body> Line-1
<p>Line-1</p>
<hr>
<p>Line-2</p> Line-2
</body>
</html>
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 a notepad document, Follow the steps below
to save an HTML using a simple text editor like Notepad.
1. Open notepad and create the basic HTML structure based on the following tags:
51
The City School 2021-2022
2. Save the file on your computer. Select File > Save as in the Notepad menu and
manually change the index.txt to index.html. Always save the first page of your web
with the name index as index.html is the most common name used for the default
page shown on a website if no other page is specified when a visitor requests the
site. In other words, index.html is the name used for the homepage of the website.
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.
4. To edit the same file with text editor simply right click on the file and open with
notepad.
52
The City School 2021-2022
2.4. Common HTML Tags
<html>...</html>
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 HTML5 – the
latest version of the language. Also known as the root element, this tag can be thought Building a Website
of as a parent tag for every other tag used in the page.
<head> … </head>
This tag is used to specify metadata about the webpage. It includes the webpage’s
name<Title>…</Title>, its dependencies (JS and CSS scripts), font usage etc.
<title> … </title>
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.
<body> … </body>
Everything the user sees on a webpage is written inside this tag. It is a container for all
the contents of the webpage.
<h1..h6> … </h1..h6>
Six different variations of writing a heading. <h1> has the largest font size, while <h6>
has the smallest.
<div> … </div>
A webpage’s content is usually divided into blocks, specified by the div tag also known
as division.
53
The City School 2021-2022
<p> … </p>
Plain text is placed inside this tag.
<br/>
A line break for webpages. Is used when wanting to write a new line.
<sub> … </sub>
Used for writing a subscript (smaller font just below the mid-point of normal font).
Example: H O
2
<sup> … </sup>
Similar to the above tag, but for superscripting. Example 12 .
th
<b>…</b> OR <strong>…</strong>
For making the text bold.
<u>…</u>
For the underline.
<i>…</i> OR <em>…</em>
For making the text bold and em means to emphasize.
<a href=“”> … </a>
Anchor tag. Primarily used for including hyperlinks.
<img src= “” Alt/>
A tag to display images in the webpage followed by the URL 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.
54
The City School 2021-2022
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 Building a Website
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 a thorough understanding of the code as well its structure.
2.6. Getting Started with Adobe Dreamweaver
Welcome Screen
On welcome screen select HTML to open a blank HTML file and save it in a 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 embedded through the URL and improper placements
may cause malfunction of content.
55
The City School 2021-2022
Dreamweaver Interface
2.7. Creating Webpage in Dreamweaver
To add content on your webpage, we will use
the design view of DW (Dreamweaver). This Checkpoint
UI looks similar to a word processing software A webpage can contain multiple types
but there are some limitations due to the HTML of scripting and programming
languages such as HTML, CSS,
code. JavaScript, Python, PHP, ASP.Net etc.
WYSIWYG stands for What You
Follow the steps below to create an HTML See Is What You Get
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.
56
The City School 2021-2022
3. Add the HTML title to About Pakistan.
Building a Website
4. Select the text of Pakistan heading and change it to Heading 1 from the Properties
option at the bottom.
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.
57
The City School 2021-2022
6. Once the colour is applied DW will automatically create a CSS with the name of
style1 as a default action, this style can also be used to apply the same formatting
to any other text as well.
7. Create a five-point bulleted list for the information of Pakistan using the Bullet
option from the Properties on the bottom.
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.
58
The City School 2021-2022
9. Save the file and click on the globe icon or press F12 to preview it on the default
web browser.
Building a Website
10. The preview would look like this:
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 a 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
59
The City School 2021-2022
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 automatically add CSS in the code.
2. Add the HTML webpage title as Search Engine Database.
60
The City School 2021-2022
3. Insert a table from Insert> Table.
Building a Website
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.
61
The City School 2021-2022
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. In the 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.
62
The City School 2021-2022
8. Change the font color to white by clicking on the Page Properties option.
Building a Website
9. Download the logos of these search engines and place them in the third row.
Images can be inserted from Insert>Image. 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.
63
The City School 2021-2022
11. Merge the remaining columns and insert some relevant information about each
search engine.
2.9. Inserting Media with HTML5
HTML5 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 CS5 HTML
web page:
1. To insert audio, go the to Split View in the Dreamweaver.
64
The City School 2021-2022
2. In Split view, place your cursor after the opening <body> tag, and press Enter to
create a new line of code. Type <au and then press Tab to complete the beginning
Building a Website
of the <audio> tag.
3. Press the spacebar and double-click src in the pop-up list.
4. Press the spacebar and double-click src in the pop-up list.
65
The City School 2021-2022
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 <audio> and </audio> tags will only be displayed in browsers that
do not support the <audio> element.
<audio> can be used to play sound files in the following formats:
• .mp3: Supported by all modern browsers.
• .wav: Not supported by Internet Explorer.
• .ogg: Not supported by Internet Explorer and Safari.
• audio can be placed like an object similar to images or text in DIV or Table.
Inserting Video with HTML5
In HTML or on the website, the videos can be placed by two methods. Either we embed
the video from an external website like YouTube or we can place the video along with
our website. Embedding a video from YouTube is always recommended as it does not
occupy space on our server and it does not affect the traffic of our website.
Embedding video from YouTube
1. Access the video which you want to embed in HTML.
66
The City School 2021-2022
2. Click on share and then click on Embed.
Building a Website
3. YouTube will automatically give you the code for embedding, add that code to your
HTML and resize height and width from the iframe code if necessary.
Embedding Video using <video> tag
To embed video using the video tag, it is important to have downloaded on your
computer. Enter the following code in the Split view.
67
The City School 2021-2022
Important to note:
• the controls attribute adds video controls, like play, pause, and volume.
• it is a good idea to always include width and height attributes. If height and width
are not set, the page might flicker while the video loads.
• the <source> element allows you to specify alternative video files which the browser
may choose from. The browser will use the first recognized format.
• the text between the <video> and </video> tags will only be displayed in browsers
that do not support the <video> element.
• video can be placed like an object similar to images or text in DIV or Table.
2.10. Getting Started with CSS
CSS stands for Cascading Style Sheets,
CSS describes how HTML elements are to
be displayed in web browsers, CSS typically CSS = Styles
creates design profiles for any HTML element
for reuse and overall layout control of the and Colors
document layout.
There are three methods of CSS integration in M anipula t e T e x t
HTML: C olors , B o xe s
• inline CSS
• internal CSS
• external CSS.
A CSS rule consists of a selector and a declaration block:
selector Declaration
h1 { color : blue ; font-size : 12px; }
property value property value
The selector points to the HTML element to style (h1). The declaration block (in curly
braces) contains one or more declarations separated by semicolons. Each declaration
includes a CSS property name and a value, separated by a colon.
68
The City School 2021-2022
Inline CSS
Building a Website
An inline CSS is used to apply a unique style to a single HTML element. An inline CSS
uses the style attribute of an HTML element.
Internal CSS
An internal CSS is used to define a style for a single HTML page. An internal CSS is
defined in the <head> section of an HTML page, within a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to
blue, and the text color of ALL the <p> elements to red. In addition, the page will be
displayed with a powderblue background color:
69
The City School 2021-2022
2.11. CSS with Dreamweaver
CSS can be added and edit using GUI of DW as well and DW will automatically add the
CSS code respectively.
Follow the steps below to add CSS using GUI of DW:
1. Start DW with a new HTML document. Right-click on the blank area of CSS Styles
panel which is usually located on the right side and click New.
2. Select Tag from the Selector Type drop-down list. Select h1 from the Selector Name
drop-down list. This will add the style to the Heading1 of the document. Click OK.
70
The City School 2021-2022
3. The next window that pops up, allows you to define CSS rule definition for heading-1
i.e. About Pakistan. The Category panel on the left provides different options to
Building a Website
work with. For this example we will add CSS rule definition to the Type category.
4. After defining the properties of CSS, it will be added and available in CSS Style
Panel on the right side for further editing and addition. By clicking on Add Property
option more properties can be added for the whole class.
5. By clicking on the Split view, you can see the underlying CSS code to style
heading-1. You can style the other HTML tags in the similar manner.
71
The City School 2021-2022
2.12. Creating Web Forms
A webform, web form or HTML form on a web
page allows a user to enter data that is sent to a Checkpoint
server for processing. Forms can resemble paper CSS stands for Cascading Style Sheets
or database forms because web users fill out the An inline CSS is used to apply a unique
style to a single HTML element.
forms using checkboxes, radio buttons, or text An internal CSS is used to define a style
for a single HTML page. An internal CSS
fields. For example, forms can be used to enter is defined in the <head> section of an
HTML page, within a <style> element.
shipping or credit card data to order a product
or can be used to retrieve search results from a
search engine.
One of the most common and important uses of web forms in a website is the
Contact Form in which developers or site owners ask the relevant information from
the user to contact them in terms of sales or technical support.
Creating Web Forms Using Dreamweaver
Follow the steps below to create a contact form:
1. Create a new HTML document and set any desired from the page properties panel.
Enter the contact us text as a heading using H1 heading.
72
The City School 2021-2022
2. From the Insert option, click on Forms Tab and insert the form to let the HTML
knows that this is the form area. After clicking on this button, a red dashed line will
Building a Website
appear to represent that this is the form area, from this point onward we will be
working inside the <form> tag.
3. Create a table of 10 rows and 2 columns while setting its cell spacing to 4,
border and padding to Using a table to manage the forms elements is highly
recommended for place management. Recommended width 500px.
4. On the left column, we will enter the title of information required such as name,
address etc. whereas on the right side we will enter the form elements.
5. The first element we will insert is a text field. Click on this button and another will
appear with numerous information required:
• ID: information is used to program the form text field with programming languages
like PHP, JavaScript etc.
73
The City School 2021-2022
• Label: information is used to place the title along with form element, but in this case,
we are already using the table, therefore, no need to fill in the label information and
also select the option of “No Label tag”.
• The access key: is used to assign a specific hotkey to directly shift the cursor focus
by pressing Alt+“Access Key”.
• Tab index: is the sequence of cursor focus, if we enter 3 over here then the cursor
will focus this specific text field on the third press of the TAB key.
6. The next form element we will enter is List/Menu to create a drop-down list for
selecting an option from a list given. HTML tag for form list is <select> </select>.
7. The number of list item can be inserted from List Values… button on the bottom
from the properties panel, click on the List Values… button and another window will
appear, click on the + icon to add the list menu items.
74
The City School 2021-2022
8. The next form element is Radio buttons, the function of a radio button is to get one
single answer from the multiple choices given.
Building a Website
9. The next form element is checkboxes, the function of checkboxes is to get multiple
answers from the multiple choices given.
10. The next form element is the Text area. Text area works like a simple text field but
it can accommodate more words than a normal text field and its layout is like a
paragraph.
75
The City School 2021-2022
11. Buttons are the action element of form to submit or reset the form.
12. Preview your form in the web browser.
76
The City School 2020-2021
Let’s Review
1. 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.
2. Hypertext Mark-up Language (HTML) is the standard mark-up language for
documents designed to be displayed in a web browser.
3. A paired tag consists of two tags, the first one is called an opening tag and the
second one is called closing tag.
4. An Unpaired tag is a single tag which does not need a companion tag.
5. Attributes define additional characteristics or properties of the element such as
width and height of an image.
6. Dreamweaver is a web development tool. It is basically for generating HTML while
using an editable front end.
7. Content management on a webpage can be Tables and DIVs.
8. CSS stands for Cascading Style Sheets. It typically creates design profiles for
overall document layout.
9. An inline CSS is used to apply a unique style to a single HTML element.
10. An internal CSS is used to define a style for a single HTML page.
11. A webform, web form or HTML form on a web page allows a user to enter data
that is sent to a server for processing.
My Notes!
77
Adults V/S Teens
The Pew Research Center recently released a study about how adults
use social media, which made us wonder how teens and adults stack
up when it comes to social media use. Teenagers today grow up in a
digital world, so it is no surprise that they are pretty savy when it
comes to all things online and technology. Surprisingly, though, when
it comes to early adoption of newer social mediums like Pinterest and
Instagram, adults seem to have teens beat, if only slightly.
Adults Teens
72% 81%
94%
Who uses which social media network most?
Adults Teens
Teens seem to dominate the traditional social networks like
Facebook and Twitter, while adults use Instagram, Tumblr and
Pinterest more than teens 67%
26%
13% 11% 15% 18%
6% 5%
1%
Tumblr Instagram Pinterest Twitter Facebook
All About Cloud
Student Learning Outcomes
After going through this chapter, students will be able to:
1. Understand Data and Network Security (WEP, WPA, WPA2)
2. Understand how the Internet works
3. Understand Computer Networks (LAN, WAN, MAN, Wireless, 3G, 4G & 5G)
4. Understand Digital Citizenship (Personal data, intellectual property law, license,
freeware and shareware)
5. Familiarize with cloud storage and cloud services
6. Use different services of Google Suite
ISTE Student Standard Coverage
Empowered Digital Creative Global
Learner Citizenship Communicator Collaborator
1b 2b 6d 7b 7d
The City School 2021-2022
3.1. What is a Computer Network
A network, in computing, is a group of two
or more devices that can communicate. In
practice, a network is comprised of several
different computer systems connected by
physical and/or wireless connections. The
scale can range from a single PC with some
basic peripherals to massive data centres
located around the World, to the Internet
itself. Regardless of scope, all networks allow computers and/or individuals to
share information and resources.
Computer networks serve many purposes, some of which include:
@
Communications such as Shared hardware such
file transfer, email, instant as printers and input
messaging, chat rooms, devices.
etc.
Shared data and information Shared software, which is
through the use of shared achieved by running applications
storage devices. on remote computers.
80
The City School 2021-2022
3.2. Network Topology and Type
Network Topology is the schematic description of a network arrangement, connecting
various nodes (sender and receiver) through lines of connection. Networks can be
arranged in three ways:
• Star topology
• Bus topology All About Cloud
• Ring topology
• Star topology: All computers and devices are connected to a network switch and
this is one of the common topologies nowadays.
• Bus topology: In this arrangement computers and devices are connected to a
single linear cable called a trunk.
• Ring topology: Computers and devices are connected to a closed-loop cable.
3.3. Types of Area Network
The Network allows computers to connect and communicate with different computers
via any medium. LAN, MAN and WAN are the three major types of the network
designed to operate over the area they cover. There are some similarities and
dissimilarities between them. One major difference is the geographical area they
cover, i.e. LAN covers the smallest area; MAN covers an area larger than LAN and
WAN comprises the largest of all.
81
The City School 2021-2022
LAN - Local Area Network:
LAN is an interconnection of computers and
its related devices within a small geographical
area or a building, home, office, school, where
the distance between the computers is small.
Mostly the LANs are built to share vital resources
such as printers and exchanging files. LAN is
also used in providing other services such as
sharing applications, games, files, accessing
the Internet. A speed of LAN is higher than WAN
i.e. 1000 Mbps. Ownership of this network is private and maintained by a single
organization.
WAN - Wide Area Network:
WAN is a computer network that
covers broad and large areas such as
small towns and cities. The design and
maintenance are more difficult than LAN.
Ownership of the network can be private
or public as well. WANs are very complex
to manage by private administrators and
they usually have public ownership. WAN is
a connection between multiple geographic
locations which is composed of multiple LAN’s. The best example of a WAN is
the Internet which connects many smaller LANs and MANs through ISPs. A speed
of WAN is comparatively low than LAN i.e. 150 Mbps. It ranges up to 10000 Km.
WANs are more congested than LANs. WANs have a lower data transfer rate
compared to LANs.
82
The City School 2021-2022
4G Network
4G is the fourth generation of broadband cellular network technology, succeeding 3G.
Potential and current applications include amended mobile web access, IP telephony,
gaming services, highdefinition mobile TV, video conferencing, and 3D television.
5G Network All About Cloud
5G is the fifth generation of mobile networks, a significant evolution of today’s
4G LTE networks. 5G has been designed to meet the very large growth in data
and connectivity of today’s modern society, The Internet of things with billions of
connected devices, and tomorrow’s innovations. 5G will initially operate in conjunction
with existing 4G networks before evolving to fully standalone networks in subsequent
releases and coverage expansions.
3.4. How Does the Internet Work
1. You either type an address (URL) into your
address Bar or click on a hyperlink.
2. Your browser sends a request to your ISP server
asking for the page. When the browser sends a
request to the ISP the following information is
transferred from user PC:
• Web Page Request
• User ID
• IP Address
3. The ISP server forwards the request to the country’s gateway. After receiving the
user request, the ISP transmits the following information to the country’s gateway:
• Web Page Request
• User ID
• IP Address
• ISP ID
4. The host server sends the requested page back to the country gateway and
similarly, the country gateway sends the page back to the concerned ISP server.
5. Your ISP sends the page to your browser and you see it displayed on your screen.
83
The City School 2021-2022
3.5. Internet Functions
The Internet is a worldwide network of computers linked together by telephone wires,
satellite links and other means. All computers on the Internet can be divided into two
categories: servers and browsers.
Server: are where most of the information on the Internet
lives. These are specialized computers which store
information, share information with other servers, and
make this information available to the general public.
Browser: ISP servers receive requests from browsers to
view web pages, check email, etc. As each server cannot
hold all the information from the entire Internet, so in order
to provide browsers with the pages and files they ask for,
ISP servers must connect to other Internet servers. This
brings us to the next common type of server: the Host Server.
3.6. Communication Links
1. Dialup connection
2. DSL Connection Checkpoint
3. Cable Net (Coaxial Cable) Star topology: computers and devices
4. Fibre-Optic are connected to a network switch
Bus topology: computers and devices
5. Satellite Links are connected to a single linear cable
Ring toplogy: computers and devices
are connected to a closed-loop cable.
84
The City School 2021-2022
3.7. Data and Network Security
Wi-Fi Protected Access (WPA), Wi-Fi
Protected Access II (WPA2), and Wi-Fi $
Protected Access 3 (WPA3) are three
security protocols and security certification All About Cloud
programs developed by the Wi-Fi Alliance to
secure wireless computer networks.
Different types of wireless security protocols
were developed for home wireless networks
protection. Not only do the wireless security
protocols prevent unwanted parties from
connecting to your wireless network, but also encrypt your private data sent over the
airwaves.
WEP-Wired Equivalent Privacy
WEP was developed for wireless networks and approved as a Wi-Fi security standard
in September 1999. WEP was supposed to offer the same security level as wired
networks, however, there are a lot of well-known security issues in WEP, which is
also easy to break and hard to configure. Despite all the work that has been done to
improve the WEP system it still is a highly vulnerable solution.
WPA-Wired Protected Access
For the time the 802.11i wireless security standard was in development, WPA was used
as a temporary security enhancement for WEP. One year before WEP was officially
abandoned, WPA was formally adopted. Most modern WPA applications use a pre-
shared key (PSK), most often referred to as WPA Personal, and the Temporal Key
Integrity Protocol (TKIP) for encryption. WPA Enterprise uses an authentication server
for keys and certificates generation. Still, WPA2, WPA’s newest version, is more secure
and even better than WPA. WPA2 is the latest and strongest wireless security and
encryption standard. Almost all modern routers support it and you should definitely
use this option to protect your home network.
85
The City School 2021-2022
3.8. Understanding Digital Citizenship
You probably have heard that it is important
to be a good citizen. So, what would it mean
to be a good digital citizen? The word digital
refers to any type of technology that you use.
• If you are a citizen, this means you
belong to a group of people. So you Adnrea Bilarosa
could be a citizen of your classroom or
your neighbourhood.
• Being a digital citizen means you are a part of the group of people that use
technology to communicate.
• There are rules that you need to follow when you are a digital citizen, to protect
yourself and to protect others.
Personal Data
Personal data, also known as personal information, personally identifying information
(PII), or Sensitive Personal Information (SPI) is any information relating to identifying a
person. Some examples of PII are:
• Names: your full name, your maiden name, and your mother’s maiden name
• Personal ID numbers: NIC#, driver’s license#, passport#, patient ID#, taxpayer
ID# etc
• Addresses: your street address and email address
• Biometrics: retina scans, fingerprints, facial geometry, or voice signatures,
Vehicle ID or title numbers
• Technology asset information: Media Access Control (MAC) or Internet
Protocol (IP) addresses that are tied to a certain individual.
We must never give our name, address, telephone number or other personal data to
strangers or unknown websites to avoid identity theft or to protect our financials.
86
The City School 2021-2022
Intellectual Property (IP)
It is a category of property that includes intangible
creations of the human intellect. There are many types
of intellectual property, the most well-known types are
copyright, patents, trademarks, industrial design rights,
plant variety rights etc. All About Cloud
Intellectual Property Law (IP)
It is the area of law that deals with legal rights to creative works and inventions. It
controls who gets to use creations including new products, artistic works and designs.
The purpose of intellectual property law is to allow the people who create and invent
things to profit from their work. Lawmakers believe that it is fair for creators to profit
from their own work product.
Software Licensing
Software licenses typically provide end-users with the
right to one or more copies of the software without
violating copyrights. The license also defines the
responsibilities of the parties entering into the license
agreement and may impose restrictions on how the
software can be used. Software licensing terms and
conditions usually include fair use of the software, the
limitations of liability, warranties and disclaimers and
protections if the software or its use invades on the
intellectual property rights of others.
Freeware
Freeware is software, most often proprietary, that is distributed at no financial cost
to the end-user. There is no agreed-upon set of rights, license, or EULA that defines
freeware unambiguously; every publisher defines its own rules for the freeware
it offers. For instance, modification, redistribution by third parties, and reverse
87
The City School 2021-2022
engineering without the author’s permission
are permitted by some publishers but
prohibited by others. Unlike with free and
open-source software, which are also often The most popular at the
moment are iCloud on Mac, and
distributed free of charge, the source code for Dropbox, both of which attract
freeware is typically not made available. an impressive 300 million users
to their platforms.
Shareware
Shareware is a type of proprietary software which is initially provided free of charge
to users, who are allowed and encouraged to make and share copies of the program.
Shareware is often offered as a download from a website or as a compact disc
included with a magazine. There are numerous platforms which offer shareware like
GitHub, Stack Overflow, Source Forge etc
3.9. Cloud Storage
Cloud storage is a model of computer data storage
in which the digital data is stored in logical pools.
The physical storage spans multiple servers
(sometimes in multiple locations), and the physical
environment is typically owned and managed by
a hosting company. These cloud storage providers
are responsible for keeping the data available and
accessible, and the physical environment protected
and running. People and organizations buy or lease
storage capacity from the providers to store user, organization, or application data.
The widespread cloud services are Google Drive, One Drive, DropBox, Media Fire,
Mega.nz, pCloud, iCloud, Amazon Drive etc.
88
The City School 2021-2022
Advantages of Cloud Storage
• Data safety: your files are protected against physical disasters because they are
stored in multiple remote servers. This means that you don’t have to worry if your
hard drive fails.
• Access your data from anywhere: no need to transfer files across your computers All About Cloud
with USB drives anymore.
• Sharing & collaboration: you can easily send a link to one of your files to all your
friends and they can download it. You can also share entire folders, which enables
you to work collaboratively on group projects via the Internet.
• Cost-Effective: reduced energy costs, a significant portion of an organization’s
energy bill stems from server power consumption and maintenance is reduced.
Disadvantages of Cloud Storage
• It needs an Internet connection: if you find that you urgently need to access your
files and don’t have an Internet connection or have a very slow one, then this could
lead to delays.
• Security: if you don’t use strong passwords or if the cloud service is not secure
enough, you may face security issues.
• Unavailability risks: although very rare, the cloud service may be temporarily
unavailable, perhaps when you most need it. Another slight risk is that the
company offering the service might go out of business and you may lose your
data.
89
The City School 2021-2022
3.10. Getting Familiar with Google Workspace
G Workspace, also known as Google Suite or
G Suite, is a collection of business, productivity,
collaboration, and education software developed
and powered by Google. The primary G Suite tools
include Gmail, Drive, Docs, Sheets, Slides, Forms,
Calendar, Google+, Sites, Hangouts, and Keep.
3.11. Google Drive
The newest cloud-based storage system, Google Drive allows
users to store files on their servers, synchronize files across
devices, and share files. In addition to a website, Google Drive
offers apps with offline capabilities for Windows and MacOS
computers, and Android and iOS smartphones and tablets.
Google Drive encompasses Google Docs, Google Sheets, and
Google Slides, which are a part of an office suite that permits collaborative editing of
documents, spreadsheets, presentations, drawings, forms, and more. Files created and
edited through the office suite are saved in Google Drive and can be downloaded to a
device in numerous formats especially which are compatible with Microsoft office.
Accessing Google Drive
There are a few methods in which we can access Google Drive. The easiest way is by
using the Chrome browser. In Chrome, we click on a new browser or a new tab, we will
be presented with the following page. From here click on next to your profile icon.
90
The City School 2021-2022
Signing up for a Google Account
To use Google Drive, we are required to have a Google account. If you already own
a Google account then just continue with signing in, for those of us who have yet to
create an account, we will continue with signing up for Google account.
1. On the Google Drive welcome page, click on Go to Drive button. You will be
redirected to the sign-in page. Sign-in with your Google account, if you already All About Cloud
have one. Alternatively, click on Create account.
2. You can either create account for personal use or to manage your business.
3. Fill out the information on the signup page and click Next.
91
The City School 2021-2022
4. On this page, all the information is required except for the field mobile phone
and your current email address. Both these fields will only be used for security
purposes such as when you would like to prove that you are the owner of the
account.
There are cases where an account was hacked. To get the account back, Google
would ask you to verify that you are the owner by sending messages or an email to
the phone number and email address provided. It is recommended that you fill in both
these fields but it does not have to be filled during registration and you can always fill
them up later.
5. Once we have completed the form, please make sure you click on the I agree
button or you will not be able to submit. Verify that all information is correct and
submit the form.
6. After submitting the form, you would be redirected to Google Drive page.
92
The City School 2021-2022
3.12. Getting Started with Google Docs
Google Docs is an online version of Microsoft Word,
PowerPoint and Excel. In Google Docs they are called
Google Document, Spreadsheet and Presentation.
After we complete our registration, we will be All About Cloud
directed to the following Google Drive page:
1. On the left is the folder view which shows any files shared with us, starred files and
recently modified files.
2. At the top is the menu bar i.e. My Drive, contains options such as creating new
folders and files.
3. The centre is the area where files in the Drive will be displayed, but since we do not
have any files yet, this shows information about Google Drive.
User interface of Google Docs, Spreadsheet and Slides
Google doc
93
The City School 2021-2022
Google spreadsheet
Google slides
Adding Files to Google Drive
Google has always intended to make its product user friendly and therefore using
Google Drive and Google Docs is much easier than most cloud storage solutions.
To add a file to Google Drive, click on the My Drive button and choose the option to
create a new folder or to create any office document.
94
The City School 2021-2022
Whereas if you need to upload an existing file in your google drive simply drag and
drop the file in that folder or root to begin your upload.
All About Cloud
Alternatively, you can upload file or folders by selecting Upload File or Upload Folder
option from My Drive drop-down menu.
After uploading the file, we can also share that file or data with anyone specific or can
create a public link to share without any restriction. To do that right-click on the file
and select share option.
95
The City School 2021-2022
In the sharing window there will be two procedures to share the file. We can share this
file to an individual by entering the email address of the recipient or we can click on
the Copy Link button to get a shareable link.
You can either allow certain members to have access to your files or folders by
selecting Restricted option or you can allow anyone with the link to have access to
your files.
Restricted: when you change a link’s setting to Restricted, the only people who can still
see the file or folder are those you have directly shared with in the ‘Share with people
and groups’ section.
Anyone with the Link: allows your document to be accessed by any person who has
the URL of the file or the folder.
96
The City School 2021-2022
Real Time Collaboration
Google Drive lets multiple people
in different locations collaborate
simultaneously on the same file from
any computer with Internet access. When
someone is viewing or editing something All About Cloud
at the same time as you, you’ll see a
coloured tile with their name in the top
right of your screen.
3.13. Google Translate
Google Translate is a free multilingual machine translation service
developed by Google, to translate text. It also offers a website
interface for mobile apps for Android and iOS, and an API that helps
developers build browser extensions and software applications.
Google Translate supports over 100 languages at various levels and
serves over 500 million people daily. To access Google Translate use the URL: translate.
google.com or search on google for google translate.
97
The City School 2021-2022
1. Enter text for translation
2. Select source language
3. Select the language translation
4. Switch the language
5. Input through speech and hear the input
6. Hear the translation
7. Copy the translation
8. Share the translation
Google Translate Text from Photos
You can translate text in photos you’ve already taken. You can also take a new photo
in the Translate app and translate text on the new photo.
1. On your Android phone or tablet, open the
Translate app.
2. Pick the languages. Checkpoint
• At the top left, choose the language
Software licenses provides end-users with
you want to translate or Detect the right to one or more copies of the
software without violating copyrights.
language. Freeware is software, is distributed at
no financial cost.
• At the top right, choose a language
Shareware is initially provided free of charge
you read. to users, who are allowed and encouraged
to make and share copies of the program.
98
The City School 2021-2022
3. Beneath the text box, tap Camera
• To translate the whole text instantly, tap Instant Instant.
• To translate part of the document:
a. Tap Scan and then Capture .
b. Use your finger to highlight the text you want to translate, or tap Select
all. All About Cloud
• To choose an existing photo to translate, at the bottom right, tap Import .
4. Use your finger to highlight the text you want to translate, or tap Select all.
3.14. Google Maps
Google Maps is a web-based service that provides
detailed information about geographical regions and
sites around the world. In addition to conventional road
maps, Google Maps offers aerial and satellite views of
many places. In some cities, Google Maps offers street
views comprising photographs taken from vehicles. To
access Google Maps on a desktop, use the URL: google.
maps.com or search on Google for Google Maps.
Google Maps offers several services as part of the
larger Web application, as follows:
• A route planner offers directions for drivers, bikers, walkers, and users of public
• transportation who want to take a trip from one specific location to another.
• The Google Maps application program interface (API) makes it possible for web
site administrators to embed Google Maps into a proprietary site such as a real
estate guide or community service page.
• Google Maps for Mobile offers a location service for motorists that utilizes the
Global Positioning System (GPS) location of the mobile device (if available) along
with data from wireless and cellular networks.
• Google Street View enables users to view and navigate through horizontal and
vertical panoramic street-level images of various cities around the world.
• Supplemental services offer images of the moon, Mars, and the heavens for hobby
astronomers.
99
The City School 2021-2022
Types of Maps
Google Maps is a web-based service that provides detailed information about
geographical regions and sites around the world. In addition to conventional road
maps, Google Maps offers aerial and satellite views of many places. In some cities,
Google Maps offers street views comprising photographs taken from vehicles.
Google Maps offers several services as part of the larger Web application, as follows:
Roadmap: this is the Satellite: this is the map Terrain: this is the
default type. It shows the type that shows the map type that shows
street view of the selected satellite images of the the terrain and
region. selected region. vegetation.
To switch to a particular map type, click on the top left corner.
100
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
First Term
Discover the best professional documents and content resources in AnyFlip Document Base.
Search