Computer Studies Doc
Computer Studies Doc
Name: ………………………………………………………………
Class: ………………………………………………………………
1
2
Table of Contents
Data ……………………. 19
3
4
Number System in
Computers
5
Learning Objectives
• What is number system in computers?
• Types of number system in computers
• Applications of various number systems
• Which number system is used for processing in computers and why?
• Why do we need hexadecimal (hex)number system?
• What is decimal or denary number system? How does it work?
• What is binary number system? How does it work?
• Conversion from a decimal number into its binary equivalent
• Conversion from a binary number into its decimal equivalent
• Conversion Table
S. Base or
Number System Digits/ Symbols used
No. Radix
1 Binary 0, 1 2
2 Octal 0, 1, 2, 3, 4, 5, 6, 7 8
3 Decimal or Denary 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 10
4 Hexadecimal 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F 16
6
Applications of various number systems
Applications of Binary number system
7
Applications of Decimal or Denary number system
• To display images: The images you see on your computer screen have
been encoded with a binary line for each pixel.
• To define locations in memory: Hexadecimals can characterize every byte
as two hexadecimal digits only compared to eight digits when using
binary.
• To define colours on web pages: Each primary colour – red, green, and
blue is characterized by two hexadecimal digits. The format being used is
#RRGGBB. RR stands for red; GG stands for green, and BB stands for blue.
• To represent Media Access Control (MAC) addresses: MAC addresses
consist of 12-digit hexadecimal numbers.
8
Which number system is used for processing in computers and why?
Computers use binary, the digits 0 and 1, to store data. A binary digit, or bit, is
the smallest unit of data in computing. It is represented by a 0 or a 1. Binary
numbers are made up of binary digits (bits), e.g., the binary number 1001.
You might be wondering why computers use binary instead of the decimal
system we use for counting things in our daily lives. As mentioned above, binary
has two states: off and on. If computers were to use the decimal system, there
would be 10 states instead and they would have to work a lot harder to process
them all. Binary is easier for computers to process, and it also takes up less
space.
This problem can be solved with the help of hexadecimal number system. Each
group of four digits of binary numbers can be written into a single digit of the
hexadecimal number. Thus, hexadecimal number reduces the length of the
number representation by 1/4th.
9
What is the decimal or denary number system? How does it work?
• As the decimal or denary number system uses ten digits, it is referred to
as a base 10 number system.
• Using the ten digits available in decimal number system, we can represent
any number by applying place values to each digit.
10
• We can combine multiple bits in different patterns by applying place
values to each digit. This works in a very similar way to the decimal
number system. We use 2 rather than 10 because it is a base 2 number
system. So, using this equation we can generate the following place
values:
Conversion from decimal (base 10) number into its binary (base 2) equivalent
Method 1 (Successive Division Method)
The steps to convert a decimal number into its binary equivalent are as under:
1. Write down the decimal number that is to be converted into its binary
equivalent.
2. Divide the decimal number and write down the quotient below and the
remainder on the right.
3. Repeat step 2 until you reach a situation where further division is not
possible.
11
4. Write down all the remainders upside down. The number thus formed will
be the binary equivalent of the decimal number you started with.
128 64 32 16 8 4 2 1
2. Place a 1 under each place value ensuring that when added together they
equal your desired decimal number, in this case we want to find the binary
equivalent for 25. Place a 0 under each of the place values that you will
not need.
128 64 32 16 8 4 2 1
0 0 0 1 1 0 0 1
In the table above we have determined that 16 + 8 + 1 = 25. Due to this fact,
we have placed a 1 under each of the corresponding place values. This allows us
to conclude that (25) 10 = (11001) 2.
12
Conversion from binary (base 2) number into its decimal (base 10) equivalent
Method 1 (Positional Notation Method)
256 128 64 32 16 8 4 2 1
0 0 0 1 0 1 1 0 1
2. Add together the place values that have a 1 beneath them. Ignore the
place values that have a 0 beneath them.
13
Conversion Table
14
Glossary
15
Notes
16
Notes
17
Notes
18
Data
19
Learning Objectives
• What are data?
• What is information?
• Some examples of data and information
• What is Data Processing?
• What is Data Analysis?
• Types of data
• How is quantitative data classified?
• What is Big Data?
• What is a Database?
• What is Data Science?
• What is Data Visualization?
20
What is information?
• Information is processed data and it has got meaning. Information is
defined as knowledge gained through study, communication, research, or
instruction.
• Essentially, information is the result of analyzing and interpreting pieces
of data, whereas, data is the individual figures, numbers, or graphs,
information is the perception of those pieces of knowledge.
• For example, a set of data could include temperature readings in a
location over several years. Without any additional context, those
temperatures have no meaning. However, when you analyze and organize
that information, you could determine seasonal temperature patterns or
even broader climate trends.
• Only when the data is organized and compiled in a useful way can it
provide information that is beneficial to others.
21
What is Data Processing?
• Data processing is the conversion of data into a usable and desirable form.
• Data processing can be done using one of the following methods:
o Manual Data Processing
▪ In manual data processing, data is processed manually
without using any machine or tool to get required results.
▪ This method of data processing is very slow, and errors may
occur in the output.
o Mechanical Data Processing
▪ In mechanical data processing, data is processed using
different devices like typewriters, mechanical printers, or
other mechanical devices.
o Electronic Data Processing (EDP)
▪ Electronic data processing is the modern technique to
process data. This method of processing data is very fast and
accurate.
▪ The data is processed through computer; Data and set of
instructions are given to the computer as input and the
computer automatically processes the data according to the
given set of instructions.
▪ For example, in a computerized education environment
results of students are prepared through computer; in banks,
accounts of customers are maintained (or processed)
through computers etc.
22
Types of data
• At the highest level, two types of data exist,
o Quantitative (Numerical) and
o Qualitative (Non-numerical or Descriptive)
23
pets in your family is discrete data, because you are counting whole,
indivisible things; you cannot have 21.5 students or 2.3 pets.
• Continuous data can take any value within a range, also called analog
data. A common example of analog data is the human voice in the air. The
data that is classified as continuous can be further reduced to finer levels
as per convenience. For example, you can measure the length of a
classroom blackboard more detailed and exact scales, i.e., meters,
centimetres, millimetres, and beyond — so length is continuous data.
• A form of discrete data is digital data, this is data transmitted in binary
format (zeros and ones). Examples of digital data includes data used in
computers, CDs, DVDs, and related electronic devices.
• Here are some examples of discrete data and continuous data for further
clarity.
24
Picture Courtesy: https://www.researchgate.net/
What is Database?
• A database is an organized collection of structured information, or data,
typically stored electronically in a computer system. Databases make data
management easy.
• An online telephone directory uses a database to store data of people,
phone numbers, and other contact details.
• Your electricity service provider uses a database to manage billing, client-
related issues, handle fault data, etc.
25
• Social media platform like Facebook needs to store, manipulate, and
present data related to members, their friends, member activities,
messages, advertisements, and a lot more.
26
Glossary
analog data refers to data that is continuous, e.g. speed measured by the
speedometer, temperature recorded by the thermometer
big data data that is so large, fast, or complex that it's difficult or impossible
to process using traditional methods
data analysis finding useful patterns in data based on the goals or purpose of the
data analysis activity
data processing the conversion of data into a usable and desirable form
data science a field of applied mathematics and statistics that provides useful
information based on large amounts of complex data or big data
manual data data processing method where data is processed manually without
processing using any machine or tool to get required results
mechanical data data processing method where data is processed using different
processing devices like typewriters, mechanical printers, or other mechanical
devices
qualitative data non- numerical or descriptive data obtained after classification and
categorization based on specific criteria
27
Notes
28
Notes
29
Notes
30
Electronic
Spreadsheet-
Microsoft Excel
31
Learning Objectives
• What is Microsoft Excel?
• User Interface
• The Home tab
• The Wrap Text tool
• The Merge Cells tool
• The AutoSum tool
• Formulas and Functions
• The Autofill feature
• Conditional Formatting
• Sorting and Filtering Data
• Data Visualization using Charts
User Interface
This is how the user interface of Microsoft Excel 2016 looks like:
32
The Home tab
There are seven groups in the Microsoft Excel Home tab: Clipboard, Font,
Alignment, Number, Styles, Cells, and Editing.
Cut- Cut does not mean delete. It means to move data from one place to another
place. If you want to cut something, then first you select the thing, then by
clicking on cut, it will be cut and moved to the clipboard.
Copy- Copy means to duplicate the selected data. If you want to copy something,
then first you select the thing.
Paste- Paste means any cut or copied data and place it somewhere else. There
are various type of function in Paste option such as formulas, paste value, etc.
Format Painter- Use Format Painter to quickly apply the same formatting, such
as color, font style and size, or border style, to multiple pieces of text or graphics.
33
The Font group
1. Font- To set the font. A font is the specific
style of text that is printed on a page or
displayed on a computer screen.
2. Font size- To set the size of the font.
3. Increase Font Size- To increase the size of
the font.
4. Decrease Font Size- To decrease the size of the font.
5. Bold- To mark the selected text as bold.
6. Italic- To mark the selected text as italicized.
7. Underline- To mark the selected text as underlined.
8. Border- To apply the border to the currently selected cell (s).
9. Fill Color- To color the background of cells to make them stand out.
10.Font Color- To change the color of he selected text.
11.Font Settings- To customize the selected text to give it the exact look you
want. Clicking this tool will open the Format Cells dialog box.
34
Cell Alignment
By default, the contents of a cell appear at the bottom of the cell, with numbers
aligned to the right and text aligned to the left.
35
Manual Line Break
To insert a manual line break,
execute the following steps:
1. For example, double click
cell A1.
2. Place your cursor at the
location where you want the
line to break.
3. Press Alt + Enter.
36
The cells are merged into a single cell. If there was text in multiple cells, only the
value in the upper-left cell will remain.
Merge & Center Combine and center the contents of the selected
cells into a single, larger cell.
Merge Across Merge selected cells in the same row into a single
cell.
Merge Cells
Merge the selected cells into one cell.
Number Format with drop-down- Provides a list of all the available number
formats. The built-in number formats are: General, Number, Currency,
Accounting, Short Date, Long Date, Time, Percentage, Fraction, Scientific and
Text.
Accounting Number Format button with
drop-down- The button applies your
'default' accounting number format to the
current selection. The drop-down contains
the commands: English (UK), English (US),
Euro and More Accounting Formats.
Percent Style- Applies the percent number
format to the current selection.
37
Comma Style- Applies the comma style number format to the current selection.
Increase Decimal- Shows more decimal places for a more precise value.
Decrease Decimal- Shows fewer decimal places.
Number Format- To check out the full set of number formatting options.
Insert with drop-down- To add new cells, rows, columns, or sheets to the
workbook. Clicking on the drop-down will show the options as shown in the
image given below:
38
The Insert Cells… option is used to insert cells, rows or
column into the sheet or table. Clicking on this option
will open the dialog box as shown in the image on the
left. Select the required option and click on the OK
button.
Note: To insert multiple rows or columns at a time, select multiple rows and columns in the
sheet and click Insert. The new column (s) is/ are inserted on the left side of the currently
selected column (s). The new row (s) is/ are inserted above the currently selected row (s).
Delete with drop-down- To delete cells, rows, column, or sheet from the
workbook. Clicking on the drop-down will show the options as shown in the
image given below:
39
The Editing group and the AutoSum tool
If you need to sum a column or row of numbers, let Excel do the math for you.
Select a cell next to the numbers you want to sum, click AutoSum on
the Home tab, press Enter, and you’re done.
When you click AutoSum, Excel automatically enters a formula (that uses
the SUM () function) to sum the numbers.
Press Enter to display the result (95.94) in cell B7. You can also see the formula
in the formula bar at the top of the Excel window.
Notes:
• To sum a column of numbers, select the cell immediately below the last number in the
column. To sum a row of numbers, select the cell immediately to the right.
• AutoSum is in two locations: Home > AutoSum, and Formulas > AutoSum.
40
• Once you create a formula, you can copy it to other cells instead of typing it over and
over. For example, if you copy the formula in cell B7 to cell C7, the formula in C7
automatically adjusts to the new location and calculates the numbers in C3:C6.
• You can also use AutoSum on more than one cell at a time. For example, you could
highlight both cell B7 and C7, click AutoSum, and total both columns at the same time.
• You can also sum numbers by creating a simple formula.
• For example, cell A3 below contains the SUM function which calculates
the sum of the range A1:A2.
Enter a Formula
To enter a formula, execute the following steps.
1. Select a cell.
2. To let Excel know that you want to enter a formula, type an equal sign (=).
3. Type the formula A1 + A2. Instead of typing A1 and A2, simply select cell
A1 and cell A2.
41
4. Change the value of cell A1 to 3.
Excel automatically recalculates the value of cell A3. This is one of Excel's most
powerful features!
Edit a Formula
When you select a cell, Excel shows the value or formula of the cell in the
formula bar.
To edit a formula, click in the formula bar and change the formula.
Operator Precedence
Excel uses a default order in which calculations occur. If a part of the formula is
in parentheses, that part will be calculated first. It then performs multiplication
42
or division calculations. Once this is complete, Excel will add and subtract the
remainder of your formula. See the example below.
First, Excel performs multiplication (A1 * A2). Next, Excel adds the value of cell
A3 to this result.
Another example,
First, Excel calculates the part in parentheses (A2+A3). Next, it multiplies this
result by the value of cell A1.
43
There are a variety of functions available in Excel. Here are some of the most
common functions you'll use:
SUM (): This function adds all the values of the cells in the argument.
AVERAGE (): This function determines the average of the values included in the
argument. It calculates the sum of the cells and then divides that value by the
number of cells in the argument.
COUNT (): This function counts the number of cells with numerical data in the
argument. This function is useful for quickly counting items in a cell range.
MAX (): This function determines the highest cell value included in the
argument.
MIN (): This function determines the lowest cell value included in the argument.
44
One of the most popular questions is how to autofill numbers is Excel. This can
also be dates, times, days of the week, months, years and so on. In addition,
Excel's AutoFill will follow any pattern.
For example, if you need to continue a sequence, just enter the first two values
into the starting cell and grab the fill handle to copy the data across the specified
range.
You can also auto-populate any arithmetic progression sequence where the
difference between numbers is constant.
Conditional Formatting
Conditional formatting makes it easy to highlight certain values or make cells
easy to identify. This changes the appearance of a cell range based on a
condition (or criteria). You can use conditional formatting to highlight cells that
contain values which meet a certain condition. Some options to use conditional
formatting are as follows:
45
• Apply conditional formatting to text
o Select the range of cells, the table, or the whole sheet
that you want to apply conditional formatting to.
o On the Home tab, click Conditional Formatting.
o Point to Highlight Cells Rules, and then click Text that
Contains.
o Type the text that you want to highlight, and then click OK.
46
Sort by specifying criteria
Use this technique to choose the column you want to sort, together
with other criteria such as font or cell colors.
1. Select a single cell anywhere in the range that you want to sort.
2. On the Data tab, in the Sort & Filter group, click Sort to display the
Sort popup window.
3. In the Sort by dropdown list, select the first column on which you want
to sort.
4. In the Sort On list, choose Values, Cell Color, Font Color, or Cell Icon.
5. In the Order list, choose the order that you want to apply to the sort
operation—alphabetically or numerically, ascending or descending
(that is, from A to Z (or Z to A) for text, or lower to higher, or higher to
lower for numbers).
47
Filter data in a table
When you put your data in a table, filter controls are automatically added to
the table headers.
1. Select the column header arrow for the column you want to filter.
2. Uncheck (Select All) and select the boxes you want to show.
48
3. Click OK.
The column header arrow changes to a Filter icon. Select this icon to
change or clear the filter.
The following table shows some of the most used Excel charts and when you
should consider using them.
S. Chart
When to use? Example
No. Type
1 Pie When you want to
Chart quantify items and show
them as percentages.
50
3 Column When you want to
Chart compare values across a
few categories. The
values run vertically
51
The importance of charts
• Allows you to visualize data graphically
• It is easier to analyze trends and patterns using charts in MS Excel
• Easy to interpret compared to data in cells
To get the desired chart you must follow the following steps:
52
You should be able to see the following chart:
Glossary
alignment how is data positioned within a cell
argument the value (s) that a function expects and works on;
autofill the feature used to fill cells with data that follows a pattern or are
based on data in other cells
autosum the tool that automatically enters a formula (that uses SUM ()
function) to sum the numbers when the user clicks on it
cell the basic structural and the functional unit of a worksheet formed
by the intersection of a row and a column
53
conditional formatting a feature used to highlight cells that contain values which meet a
certain condition or criteria
fill handle a small black square at the bottom right corner of the active cell
filter the tool that helps display relevant data by temporarily hiding the
irrelevant entries from the view
formula bar the bar above the worksheet columns used to enter, view, or edit
the contents of the active cell
merge & center a tool used to combine and center the contents of two or more
selected cells
name box the box on the left side of the formula bar that shows the cell
address of the active cell
operator precedence the rule defining which operator will be evaluated first in an
expression or formula
status bar the bar at the bottom of the window that displays information
like the Cell Mode options, Calculation options, etc.
wrap text a tool that wraps or fits the contents within a cell, displaying them
on multiple lines within a cell
54
Notes
55
Notes
56
HyperText Markup
Language (HTML)
57
Learning Objectives
• What is HTML?
• Features of HTML
• Tools required for HTML Coding
• Saving an HTML Document
• HTML Elements
• Types of HTML Elements
o Container Elements
o Empty Elements
• HTML Attributes
• Basic Structure of an HTML document
• HTML Title
• HTML Headings
• HTML Paragraphs
• HTML Formatting Elements
• HTML Comments
• HTML Lists
o Ordered List or Numbered List
o Unordered List or Bulleted List
o Definition List or Description List
• HTML Images
• HTML Links
• HTML Tables
What is HTML?
• HTML stands for Hyper Text Markup Language.
• HTML is the standard markup language for creating webpages.
• HTML describes the structure of a webpage.
• The first version of HTML was written by Sir Tim Berners-Lee in 1993.
• HTML has evolved with the passage of time. HTML5 is the latest version
of HTML.
58
Features of HTML
• Not a programming language
• Easy to learn and easy to use
• Platform independent
• Case insensitive
• Images, videos, and audio can be added to a web page
• Supported by all web browsers
Note: Basic text editors are entirely sufficient when you’re just getting started.
As you progress, there are many feature-rich text editors available which allow
for greater function and flexibility. For example, Brackets, Kompozer,
Notepad++, Visual Studio Code.
HTML Elements
• HTML elements are used to define the content that we put on a webpage.
• HTML elements tell a web browser how to structure and interpret a part
of the HTML document.
• An HTML element is enclosed between angle brackets < >.
• For example, <HTML>, <HEAD>, <TITLE>, <BODY>, etc.
59
Types of HTML Elements
There are two types of HTML elements, Container and Empty.
Container Elements
A container element in HTML is defined by a starting tag followed by the
content. A container element ends with a closing tag.
For example, the <H1> element is a container element used to insert a heading
(largest size) in a webpage.
Usage:
<H1>This is a dummy heading at level 1.</H1>
where,
<H1> is the opening tag of the <H1> element.
This is a dummy heading at level 1. is the content that will get displayed on the
webpage.
</H1> is the closing tag of the <H1> element. Observe the ‘/’ (forward slash)
before H1.
Empty Elements
An empty element in HTML is defined by a starting tag only. It does not need to
be ended as it does not contain anything. Some examples of the empty elements
are <BR>, <HR>, <IMG>
Usage:
<BR>
where,
<BR> is an empty element used to insert a line break in a webpage.
We just need to type <BR> wherever we need to break a line to move the
content that follows to the next line.
Similarly, we use the <HR> element to insert a horizontal rule (line) to demarcate
two sections in a webpage.
60
HTML Attributes
• HTML Attributes provide additional information about an HTML element.
• Attributes are always typed within the starting tag of an HTML element.
For example,
<IMG src = “image.png”> where,
<IMG> is the HTML element used to insert an image in a webpage
src (source) is the attribute to define the image that is to be inserted
image.png is the name of the file (image) that is to be inserted.
61
HTML Headings
• HTML headings are titles or subtitles that you want to display on a
webpage.
• HTML defines six levels of headings.
• The heading elements are <H1>, <H2>, <H3>, <H4>, <H5>, and <H6> with
<H1> being the highest (or most important) level and <H6> the least.
• A heading element implies all the font changes, paragraph breaks before
and after, and any white space necessary to render the heading.
• Example,
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML Paragraphs
• The <P> element defines a paragraph.
• A paragraph is usually a block of text.
• A paragraph always starts on a new line, and browsers automatically add
some white space (a margin) before and after a paragraph.
• Example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Comments
• HTML comments are not displayed in the browser, but they can help
document your HTML source code.
• You can add comments to your HTML source by using the following
syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the start tag, but not in the end
tag.
62
HTML Formatting Elements
Formatting elements were designed to display text that appears different from
rest of the text on the webpage:
• <b> - To mark the enclosed text as boldfaced
• <em> - To mark the enclosed text as emphasized
• <strong> - To mark the enclosed text as important
• <i> - To mark the enclosed text as italicized
• <u> - To mark the enclosed text as underlined
• <sub> - To mark the enclosed text as subscript (slightly below the base
line) e.g. H2O, H2SO4
• <sup> - To mark the enclosed text as superscript (slightly above the base
line) e.g. 23 = 2 x 2 x 2 = 8
HTML Lists
• HTML lists allow to group a set of related items in lists.
• HTML allows you to create three types of lists:
o Ordered List or Numbered List
o Unordered List or Bulleted List
o Description List or Definition List or Glossary List
63
• The type attribute may be used to change the numbering style before
each list item in an ordered list.
• Possible values for the type attribute with the <OL> element are:
64
• The type attribute may be used to change the bullet style before each list
item in an unordered list.
• Possible values for the type attribute with the <UL> element are:
65
HTML Images
• The HTML <img> element is used to embed an image in a web page.
• The <img> element is empty, it contains attributes only, and does not
have a closing tag.
• The <img> element has two required attributes:
o src - Specifies the path to the image
o alt - Specifies an alternate text for the image
• Syntax: <img src="image url" alt="alternatetext">
Image Size
You can use the style attribute to specify the width and height of an image.
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
Image Floating
Use the CSS float property to let the image float to the right or to the left of a
text.
Example:
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
Image as a link
To use an image as a link, put the <img> tag inside the <a> tag.
Example:
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
66
HTML Links
• HTML links are hyperlinks. You can click on a link and jump to another
document.
• When you move the mouse over a link, the mouse arrow will turn into a
little hand.
• The HTML <a> element defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
• The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
• The link text is the part that will be visible to the reader.
• Clicking on the link text, will send the reader to the specified URL address.
HTML Tables
• HTML tables allow web developers to arrange data into rows and
columns.
• To arrange the content in a tabular manner, we must use a combination
of the following HTML elements:
o <TABLE> - To start a table
o <TR> - To define a table row
o <TH> - To define a table header (topmost row with boldfaced and
centered text)
o <TD> - To define table data
67
Example Code Output
<table>
<tr>
<th>S. No.</th>
<th>Name</th>
<th>House</th>
</tr>
<tr>
<td>1</td>
<td>Aarav</td>
<td>Sagar</td>
</tr>
<tr>
<td>2</td>
<td>Akshhat</td>
<td>Srishti</td>
</tr>
<tr>
<td>3</td>
<td>Dhruv</td>
<td>Himgiri</td>
</tr>
<tr>
<td>4</td>
<td>Taarini</td>
<td>Vasundhara</td>
</tr>
</table>
68
Notes
69
Notes
70
Cascading Stylesheets
(CSS)
71
Learning Objectives
• What is CSS?
• CSS Syntax
• Ways to insert CSS
• Common CSS Properties
What is CSS?
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen, paper,
or in other media.
• CSS saves a lot of work.
• External stylesheets are stored in CSS files. With an external stylesheet
file, you can change the look of an entire website by changing just one
file!
CSS Syntax
• A CSS rule consists of a selector and a declaration block.
• CSS selector: The selector points to the HTML element you want to style.
• Declaration block: The declaration block contains one or more
declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by
a colon.
• Multiple CSS declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.
72
Example
In this example all <p> elements will be center-aligned, with a red text color:
p
{
color:red;
text-align:center;
}
Example explained
p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value
Inline CSS
An inline style may be used to apply a unique style for a single element. To use
inline styles, add the style attribute to the relevant element. The style attribute
can contain any CSS property.
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
where,
73
<h1> and <p> are the HTML elements,
style is the attribute,
color and text-align are the names of the CSS property and
blue and center are the values of the color and the text-align CSS property
respectively.
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, within the <head>
element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:linen;
}
h1
{
color:maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
74
Each HTML page must include a reference to the external style sheet file inside
the <link> element within the <head> element of an HTML document.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet can be written in any text editor and must be saved with
the .css extension. The .css file must not contain any HTML element.
Example
body{
background-color:lightblue;
}
h1{
color:navy;
margin-left:20px;
}
Note: Do not add a space between the property value and the unit:
Incorrect (space): margin-left:20 px;
Correct (nospace): margin-left:20px;
Notes
76
77
Notes
78
Artificial Intelligence
(AI)
79
Learning Objectives
• What is Artificial Intelligence (AI)?
• Stages of Artificial Intelligence (AI)
• Domains of Artificial Intelligence (AI)
• Artificial Intelligence (AI)Ethics
• Ethical issues with Artificial Intelligence (AI)
80
Stages of Artificial Intelligence
Artificial intelligence can be categorized into several stages, depending upon the
role they play. In modern science, Artificial Intelligence has three stages. They
are as follows:
1. Artificial Narrow Intelligence (ANI)
2. Artificial General Intelligence (AGI)
3. Artificial Super Intelligence (ASI)
81
way better than human, then it is termed as Super Intelligence. In simple
words, it is the system which surpasses human abilities.
• In the present industry, this type of system is available only in the form of
fictions. For example, in Avengers: Endgame (Movie), the Jarvis was able
to make decisions better than humans so that it can be considered as
Artificial Super Intelligence system.
82
Data Sciences
• There is a vast amount of data available today. There are certain
questions, like:
o What does one do with all this data?
o How much sense does one make of this huge data?
o How do we make it useful to us?
o What are its applications in the real world?
• Data Science is the extraction of meaningful insights from raw data.
• Data Science uses various tools, algorithms, and machine learning
principles to discover hidden patterns from raw data.
• This is where the role of data scientists come into play. They sift through
a huge volume of data, looking for patterns for the data to make sense
and to draw meaning from it. Data scientists create models and make
predictions using various techniques and algorithms.
• Data Science can be used for:
o Automation o Fraud detection
o Forecasting o Giving
o Pattern detection recommendations
• Data Science plays an important role in several industries, such as,
healthcare, logistics, finance, entertainment, cybersecurity, etc.
Computer Vision
• Human beings use their eyes to see the world around them.
• Computer Vision means getting computers to “see” by using machine
learning and deep learning algorithms and models.
• Computer Vision is the field of study of how computers see and
understand digital images and videos.
• Computer Vision includes all tasks, such as, “seeing” or sensing a visual
stimulus, understanding what is being seen and extracting meaningful
information from it for further use.
• Computer Vision is used for:
o Facial recognition
o Searching images
o Robotics
o Self-driving vehicles
83
Natural Language Processing (NLP)
• Computers do not speak language the way human beings do. They
communicate using millions of zeroes (0s) and ones (1s) called machine
code.
84
Ethical issues with AI
1. Data security and privacy
Development of AI tools requires huge amount of data and includes
personal and private data. Large amount of data continues to be
generated and there always is a possibility of its misuse if it is not
adequately protected. Sensitive data, if falls in the hands of wrong
persons or institutions can cause a lot of harm to persons psychologically,
emotionally, and financially. It is important that the organizations
collecting this data take all measures to keep it safe.
2. Accountability
When an AI system fails to deliver an assigned task or delivers incorrectly,
who is to be held accountable? As AI is progressing and creating robots
with many advanced features, the question arises that if the robot makes
a mistake, who is to be held accountable? Should it be the individual who
programmed the robot? On the other hand, in deep learning, the
technology learns and grows on its own. Will it be ethical to hold the
programmer accountable?
3. Dependency
Human beings may start to experience cognitive decline if all problems
requiring intelligent solutions are left to machines. The dependency on
machines for performing tasks will increase. If the AI machines
malfunction, what would happen? This level of dependency on machines
would be a cause of concern.
4. Addiction
Already we are witnessing the addictions that AI-powered video games,
smart phones, AI-based apps are causing amongst people. These can
prevent people from using their time productively in doing other
productive tasks.
5. Unemployment and AI
Most people sell most of their waking time just to have enough income to
keep themselves and their families alive. The success of AI, because of the
85
amount of time it saves, will provide people the opportunity to spend
more time caring for their families, become involved in their communities
and experience new ways of contributing to human society.
Let’s take, for example, the trucking industry, where millions of people
are employed in the United States alone. If Tesla’s Elon Musk delivers on
his promise of offering true self-driving cars (and by extension, delivery
trucks) and they become widely available within the next decade, then
what’s going to happen to those millions of people? But self-driving trucks
do seem like an ethical option when we consider their ability to lower our
accident rates.
Already, we are seeing start-up founders take home most of the economic
surplus they generate. So how do we equitably distribute the wealth
created by machines?
While this can prove very useful in nudging society toward more beneficial
behavior, it can also prove detrimental in the wrong hands.
86
8. Possible Detrimental Mistakes and AI
Intelligence results from learning, whether you’re human or machine.
Systems normally have a training phase where they “learn” to detect the
right patterns and act according to their input. After the training phase,
the system then goes to the test phase where more scenarios are thrown
at it to see how it performs.
Because it is highly unlikely that the training phase can cover all the
possible scenarios that the system may encounter in the real world, the
system can be fooled in ways that humans wouldn’t be. Therefore, if we
are to rely on AI to replace human labor, we need to ensure it performs
as planned and cannot be overpowered by humans with selfish
intentions.
9. AI Bias
AI systems are created by humans, who can sometimes be very
judgmental and biased. Yes, AI, if used right, can become a catalyst for
positive change, but it can also fuel discrimination. AI has the capability of
speed and capacity processing that far exceeds the capabilities of
humans; however, due to human influence, it cannot always be trusted
to be neutral and fair.
87
Notes
88
Notes
89
Bibliography
https://archive.org/
https://www.coursehero.com/
https://ncert.nic.in/
https://www.scribd.com/
https://www.teachmint.com/
https://www.udemy.com/
90