<meta http-equiv="refresh"
name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body 
<!--- {font-family: Verdana, sans-serif; margin:0}   ---- Cheung -->
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1200px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text --- Originally: top: -35px;  Cheung */

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: -55px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

text = "#000000"
link="#00ff00"
vlink="#f00000"
bgcolor="#ffffff"
</style>

<!------------------------------ POP UP ------------------------>

<style>
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 600px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
</style>

<!------------------------------ POP UP ------------------------>





</head>

<!-- ------------------------------------------------------------------- -->

<body>



<body
text = "#000000"
link="#00ff00"
vlink="#f00000"
bgcolor="#ffffff"
>

<!---------------  Changes the first line height in slide -------------->
&nbsp;
<P>
&nbsp;

<!-- Slideshow container -->
<div class="slideshow-container">

<!-- Full-width images with number and caption text -->



<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->



<!----------------- SKIP ----------------------

<div class="mySlides">
  <div class="text">
  <FONT color="red" size=+2><B>
  <SPAN style="BACKGROUND-COLOR: yellow">
  <FONT color="blue">What</FONT> is a
  <FONT color="blue">memory</FONT> device ?
  </SPAN>
  </B></FONT>
  </div>

  <p style="margin-left: 1.2in">
  <font size="+2">
 
  </font>
  </p>

  <center>
  <TABLE bgcolor="lightcyan" BORDER="5" width=850>
  <TR> <TD>
  <font size="+2">
  <UL>
  <LI> A <FONT color="red"><B>memory device</B></FONT> is a
      <B>device (= something)</B> that can
      <FONT color="blue"><B>record</B></FONT>
      <FONT color="red"><B>data/information</B></FONT> <B>and</B>
    <SPAN style="BACKGROUND-COLOR: #aaffaa">
  <FONT color="blue"><B>recall</B></FONT></SPAN> it
    at a 
 <SPAN style="BACKGROUND-COLOR: #ffdd00">
  <FONT color="red"><B>later time</B></FONT></SPAN>
 <P>
 <B>Example</B> of a <FONT color="red"><B>memory device</B></FONT>:
<P>

  <center>
  <img src="FIGS/0/string-on-finger.jpg" style="width:20%">
  </center>
<P>
<LI> <FONT color="red"><B>However</B></FONT>... there is
    a <FONT color="blue"><B>requirement</B></FONT> !
  </UL>
  </font>
  </TD> </TR>
  </TABLE>
  </center>

  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <p style="padding: 0.0in">
  </p>
</div>



<div class="mySlides">
  <div class="text">
  <FONT color="red" size=+2><B>
  <SPAN style="BACKGROUND-COLOR: yellow">
  <FONT color="blue">Requirement</FONT> of a
  <FONT color="blue">memory</FONT> device 
  </SPAN>
  </B></FONT>
  </div>

  <p style="margin-left: 1.2in">
  <font size="+2">
 
  </font>
  </p>

  <center>
  <TABLE bgcolor="lightcyan" BORDER="5" width=850>
  <TR> <TD>
  <font size="+2">
  <UL>
  <LI> A <FONT color="red"><B>memory device</B></FONT>
       <FONT color="blue"><B>must</B></FONT> have the
       <B>ability</B> to
       <SPAN style="BACKGROUND-COLOR: #ffdd00">
    <FONT color="red"><B>erase</B></FONT></SPAN> itself !!!
  <P>
  <LI> <B>Therefore</B>: &nbsp; a <FONT color="red"><B>memory device</B></FONT> 
     <FONT color="blue"><B>must</B></FONT> have
   <SPAN style="BACKGROUND-COLOR: #aaffaa">
   <FONT color="red"><B>more than 1 state</B></FONT></SPAN>
 <P>
 <LI>
 The <FONT color="red"><B>minimum</B></FONT>
    <FONT color="blue"><B>number</B></FONT> of
    <FONT color="red"><B>states</B></FONT> of
   a <FONT color="blue"><B>memory device</B></FONT> is
     <B>therefore</B> <FONT color="red"><B>two (2)</B></FONT>
<P>
 <B>Example</B>:

<P>
<UL>
<TABLE BORDER="5">

<TR bgcolor="lightyellow"> 
<TH>
<font size="+2">
&nbsp;&nbsp; Memory device in 
 <FONT color="blue">state 0</FONT> &nbsp;&nbsp;
</FONT>
</TH> 
<TH>
<font size="+2">
&nbsp;&nbsp; Memory device in 
  <FONT color="blue">state 1</FONT> &nbsp;&nbsp;
</font>
</TH> 
</TH>

<TR bgcolor="white"> 
<TD align="center">
<IMG SRC="FIGS/0/string-on-finger0.jpg" height=200></IMG>
</TD> 
<TD align="center">
<IMG SRC="FIGS/0/string-on-finger.jpg" height=200></IMG>
</TD> 
</TR>

</TABLE>
</UL>
<P>

  </UL>
  </font>
  </TD> </TR>
  </TABLE>
  </center>

  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <p style="padding: 0.0in">
  </p>
</div>
-------------------------------------------->


<!-------------- Computer memory -------------->




<div class="mySlides">
  <div class="text">
  <FONT color="red" size=+2><B>
  <SPAN style="BACKGROUND-COLOR: yellow">
  The <FONT color="blue">smallest unit</FONT> of Computer Memory: 
  <FONT color="blue">bit</FONT>
  </SPAN>
  </B></FONT>
  </div>

  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>


  <center>
  <TABLE bgcolor="lightcyan" BORDER="5" width=850>
  <TR> <TD>
  <font size="+2">
  <UL>
  <LI> <FONT color="red"><B>Computers</B></FONT>  use
      <FONT color="red"><B>memory devices</B></FONT> built with
      <FONT color="blue"><B>electronics</B></FONT>
  <P>
  <LI> The <FONT color="red"><B>smallest</B></FONT>
       <FONT color="blue"><B>memory device</B></FONT> used
       by the <FONT color="red"><B>computer</B></FONT> works like
       a <FONT color="blue"><B>switch</B></FONT>:
<P>
  <center>
  <img src="FIGS/0/switch.gif" style="width:30%">
  </center>
<P>
 <LI> The <FONT color="red"><B>smallest</B></FONT>
       <FONT color="blue"><B>memory device</B></FONT>
       can be in <B>one</B> of
      <FONT color="red"><B>2 states</B></FONT>:
<P>
<UL>
<TABLE bgcolor="lightyellow" BORDER="5">
<TR> <TD>
 <font size="+2">
 <UL> 
 <LI> <FONT color="red"><B>off</B></FONT> <B>state</B>
      (which we call <FONT color="blue"><B>state 0</B></FONT>)
 <LI> <FONT color="red"><B>on</B></FONT> <B>state</B>
      (which we call <FONT color="blue"><B>state 1</B></FONT>)
   &nbsp; -- (0 and 1 are called 
    <FONT color="red"><B>binary digits</B></FONT>)
  &nbsp;
 </UL>

</TD> </TR>
</TABLE>
</UL>
<P>
<LI> The <FONT color="red"><B>smallest</B></FONT>
       <FONT color="blue"><B>memory device</B></FONT> is called
   a <FONT color="red"><B>bit</B></FONT>
   (= <FONT color="blue"><B>
  <FONT color="red">bi</FONT>nary digi<FONT color="red">t</FONT></B></FONT>)
  </UL>
  </font>
  </TD> </TR>
  </TABLE>
  </center>


  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <p style="padding: 0.0in">
  </p>
</div>







<div class="mySlides">
  <div class="text">
  <FONT color="red" size=+2><B>
  <SPAN style="BACKGROUND-COLOR: yellow">
  Building computer memory that can
  store <FONT color="blue">larger</FONT> numbers
  </SPAN>
  </B></FONT>
  </div>

  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>


  <center>
  <TABLE bgcolor="lightcyan" BORDER="5" width=850>
  <TR> <TD>
  <font size="+2">
  <UL>
  <LI> A <FONT color="red"><B>bit</B></FONT> can
    be in <FONT color="blue"><B>one</B></FONT> of 
   <FONT color="red"><B>2 states</B></FONT>:
    &nbsp; <B>0</B> or <B>1</B>
  <P>
   <SPAN style="BACKGROUND-COLOR: #aaffaa"><B>Therefore</B></SPAN>,
    a <FONT color="red"><B>bit</B></FONT> can
   <SPAN style="BACKGROUND-COLOR: #aaffaa">
    <FONT color="blue"><B>store (= remember)</B></FONT></SPAN>
    <B>one</B> of <FONT color="red"><B>2 values</B></FONT>:
    &nbsp; <B>0</B> or <B>1</B>
<P>
  <LI> A <FONT color="red"><B>row</B></FONT> of
      <FONT color="blue"><B>n bits</B></FONT> can be in
    <B>one</B> of 
     <FONT color="red"><B>2<sup>n</sup> states</B></FONT>
<P>
  <center>
  <img src="FIGS/0/row-switch.jpg" style="width:30%">
  </center>
<P>
Each <B>switch</B> can be
  in <FONT color="red"><B>2 states</B></FONT>.
<BR>
The <FONT color="red"><B>total # combinations</B></FONT> =
  <FONT color="blue"><B>2 &times; 2 &times; ... &times; 2 =
   2<sup>n</sup></B></FONT>
<P>
  </UL>
  </font>
  </TD> </TR>
  </TABLE>
  </center>

 

  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <p style="padding: 0.0in">
  </p>
</div>




<!------------------ Deleted for CS110 ----------------------------



<div class="mySlides">
  <div class="text">
  <FONT color="red" size=+2><B>
  <SPAN style="BACKGROUND-COLOR: yellow">
  <FONT color="blue">Example:</FONT> building a
  <FONT color="blue">larger</FONT> computer memory using
  <FONT color="blue">3 switches</FONT>
  </SPAN>
  </B></FONT>
  </div>

  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <center>
  <TABLE bgcolor="lightcyan" BORDER="5" width=850>
  <TR> <TD>
  <font size="+2">
  <UL>
  <LI> <FONT color="red"><B>Example:</B></FONT>
    &nbsp; 
    a <FONT color="blue"><B>row</B></FONT> of
   <FONT color="red"><B>3 swicthes</B></FONT> can be in
   <B>one</B> of <FONT color="blue"><B>2<sup>3</sup> = 8 states</B></FONT>:

<P>
  <center>
  <img src="FIGS/memory10.png" style="width:60%">
  </center>
<P>
<LI> We can 
   <SPAN style="BACKGROUND-COLOR: #aaffaa">
   <FONT color="red"><B>assign</B></FONT>
     a <FONT color="blue"><B>number</B></FONT></SPAN> to
   <FONT color="red"><B>each state</B></FONT> (i.e.: a <B>code</B>) !!!
  </UL>
  </font>
  </TD> </TR>
  </TABLE>
  </center>

 

  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <p style="padding: 0.0in">
  </p>
</div>




<div class="mySlides">
  <div class="text">
  <FONT color="red" size=+2><B>
  <SPAN style="BACKGROUND-COLOR: yellow">
 Assigning a <FONT color="blue">number</FONT> to each
  <FONT color="blue">state</FONT> comprised of  
  <FONT color="blue">3 switches</FONT>
  </SPAN>
  </B></FONT>
  </div>

  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <center>
  <TABLE bgcolor="lightcyan" BORDER="5" width=850>
  <TR> <TD>
  <font size="+2">
  <UL>
  <LI> <FONT color="red"><B>Example:</B></FONT>
    &nbsp; 
    how to <FONT color="red"><B>assign</B></FONT>
    a <FONT color="blue"><B>number</B></FONT> to
  <FONT color="red"><B>each state</B></FONT> of 
   <FONT color="blue"><B>3 switches</B></FONT>:

<P>
  <center>
  <img src="FIGS/memory11.png" style="width:60%">
  </center>
<P>
<LI> This <FONT color="red"><B>code</B></FONT> is called: the
   <SPAN style="BACKGROUND-COLOR: #aaffaa">
   <FONT color="red"><B>binary number</B></FONT>
    <FONT color="blue"><B>system</B></FONT></SPAN> 
   in <B>Mathematics</B>
  </UL>
  </font>
  </TD> </TR>
  </TABLE>
  </center>

 

  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <p style="padding: 0.0in">
  </p>
</div>
----------------------------------------------------------------------->

<!----------------- Binary number system --------------->




<div class="mySlides">
  <div class="text">
  <FONT color="red" size=+2><B>
  <SPAN style="BACKGROUND-COLOR: yellow">
  The <FONT color="blue">binary number</FONT> system
  </SPAN>
  </B></FONT>
  </div>

  <p style="margin-left: 1.2in">
  <font size="+2">

  </font>
  </p>

  <center>
  <TABLE bgcolor="lightcyan" BORDER="5" width=850>
  <TR> <TD>
  <font size="+2">
  <UL>
  <LI> The <FONT color="red"><B>binary number</B></FONT>
     <FONT color="blue"><B>system</B></FONT> uses 
     <FONT color="red"><B>2 digits</B></FONT> to 
     <FONT color="blue"><B>represent/encode</B></FONT> a 
      <FONT color="red"><B>number</B></FONT>: 
<P>
<UL>
<TABLE bgcolor="lightyellow" BORDER="5">
<TR> <TD>
<font size="+2">
 <UL>
 <LI> <FONT color="blue"><B>0</B></FONT> = represents 
    <FONT color="red"><B>no value = (zero)</B></FONT>
 <LI> <FONT color="blue"><B>1</B></FONT> = represents a 
    <FONT color="red"><B>unit value (= one)</B></FONT>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 </UL>

</TD> </TR>
</TABLE>
</UL>
<P>
<B>This means</B> that you can <FONT color="red"><B><I>only</I> use</B></FONT>
 the digits <FONT color="blue"><B>0</B></FONT> and 
 <FONT color="blue"><B>1</B></FONT> to
 <FONT color="red"><B>write a <I>binary number</I></B></FONT>
<P>
<LI> <FONT color="red"><B>Examples</B></FONT> of 
   <FONT color="blue"><B>binary numbers</B></FONT>:
<P>
<UL>
<TABLE bgcolor="#CCFFCC" BORDER="5">
<TR> <TD>
<font size="+2">
 <UL>
 <LI> <FONT color="blue"><B>10</B></FONT>
 <LI> <FONT color="blue"><B>1010</B></FONT>
 <LI> <FONT color="blue"><B>10101101</B></FONT>

 <LI> and so on. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 </UL>

</TD> </TR>
</TABLE>
</UL>
<P>
<LI> <SPAN style="BACKGROUND-COLOR: #000000">
  <FONT color="yellow"><B>Question:</B></FONT>
  </SPAN> &nbsp; <FONT color="red"><B>How</B></FONT> do we 
   <FONT color="blue"><B>assign</B></FONT> a
    <FONT color="red"><B>decimal value</B></FONT> to
    a <FONT color="blue"><B>binary number</B></FONT> ???
  </UL>
  </font>
  </TD> </TR>
  </TABLE>
  </center>


  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <p style="padding: 0.0in">
  </p>
</div>





<div class="mySlides">
  <div class="text">
  <FONT color="red" size=+2><B>
  <SPAN style="BACKGROUND-COLOR: yellow">
  The <FONT color="blue">binary number</FONT> system 
  </SPAN>
  </B></FONT>
  </div>

  <p style="margin-left: 1.2in">
  <font size="+2">

  </font>
  </p>

  <center>
  <TABLE bgcolor="lightcyan" BORDER="5" width=850>
  <TR> <TD>
  <font size="+2">
  <UL>
  <LI> The <FONT color="red"><B>decimal value</B></FONT> that is
     <FONT color="blue"><B><I>encoded (represented)</I></B></FONT> by a
     <FONT color="red"><B>binary number</B></FONT> is computed
     as follows:
  (each <FONT color="blue"><B>d<sub>i</sub></B></FONT> is a
  <FONT color="red"><B>binary digit (0 or 1)</B></FONT>)

<P>
<UL>
<TABLE bgcolor="lightyellow" BORDER="5">

<TR bgcolor="#CCFFCC">
<TH>
<font size="+2">
Binary number
</font>
</TH>
<TH>
<font size="+2">
Corresponding decimal value
</font>
</TH>
</TR>

<TR> 
<TD>
<font size="+2">
<FONT color="blue"><B>
&nbsp;&nbsp;
 <FONT color="red">d<sub>n-1</sub></FONT> 
 <FONT color="brown">d<sub>n-2</sub></FONT> ... d<sub>1</sub> d<sub>0</sub>
&nbsp;&nbsp
</B></FONT>
</font>
</TD> 
<TD>
<font size="+2">
<FONT color="blue"><B>
&nbsp;&nbsp;
 <FONT color="red">d<sub>n-1</sub></FONT>&times;2<sup>n-1</sup>
 + <FONT color="brown">d<sub>n-2</sub></FONT>&times;2<sup>n-2</sup>
 + ...
 + d<sub>1</sub>&times;2<sup>1</sup>
 + d<sub>0</sub>&times;2<sup>0</sup>
&nbsp;&nbsp;
</B></FONT>
</font>
</TD> 
</TR>

</TABLE>
</UL>
<P>

<B>Examples:</B>
<P>
<UL>
<TABLE bgcolor="lightyellow" BORDER="5">

<TR bgcolor="#CCFFCC">
<TH>
<font size="+2">
Binary number
</font>
</TH>
<TH>
<font size="+2">
Corresponding decimal value
</font>
</TH>
</TR>

<TR> 
<TD>
<font size="+2">
<FONT color="blue"><B>
&nbsp;&nbsp;
0
&nbsp;&nbsp
</B></FONT>
</font>
</TD> 
<TD>
<font size="+2">
<FONT color="blue"><B>
&nbsp;&nbsp;
0<FONT color="red">&times;2<sup>0</sup></FONT> = 0
&nbsp;&nbsp;
</B></FONT>
</font>
</TD> 
</TR>

<TR> 
<TD>
<font size="+2">
<FONT color="blue"><B>
&nbsp;&nbsp;
1
&nbsp;&nbsp
</B></FONT>
</font>
</TD> 
<TD>
<font size="+2">
<FONT color="blue"><B>
&nbsp;&nbsp;
1<FONT color="red">&times;2<sup>0</sup></FONT> = 1
&nbsp;&nbsp;
</B></FONT>
</font>
</TD> 
</TR>

<TR> 
<TD>
<font size="+2">
<FONT color="blue"><B>
&nbsp;&nbsp;
10
&nbsp;&nbsp
</B></FONT>
</font>
</TD> 
<TD>
<font size="+2">
<FONT color="blue"><B>
&nbsp;&nbsp;
1<FONT color="red">&times;2<sup>1</sup></FONT> + 0
<FONT color="red">&times;2<sup>0</sup></FONT> = 2
&nbsp;&nbsp;
</B></FONT>
</font>
</TD> 
</TR>




<TR> 
<TD>
<font size="+2">
<FONT color="blue"><B>
&nbsp;&nbsp;
1010
&nbsp;&nbsp
</B></FONT>
</font>
</TD> 
<TD>
<font size="+2">
<FONT color="blue"><B>
&nbsp;&nbsp;
1<FONT color="red">&times;2<sup>3</sup></FONT> 
+ 0<FONT color="red">&times;2<sup>2</sup></FONT> 
+ 1<FONT color="red">&times;2<sup>1</sup></FONT> 
+ 0<FONT color="red">&times;2<sup>0</sup></FONT> 
= 8 + 2 = 10
&nbsp;&nbsp;
</B></FONT>
</font>
</TD> 
</TR>




</TABLE>
</UL>
<P>
  </UL>
  </font>
  </TD> </TR>
  </TABLE>
  </center>

 

  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <p style="padding: 0.0in">
  </p>
</div>


<!------------------ Quiz ------------------>




<div class="mySlides">
  <div class="text">
  <FONT color="red" size=+2><B>
  <SPAN style="BACKGROUND-COLOR: yellow">
  Quiz: what is written on this T-shirt ?
  </SPAN>
  </B></FONT>
  </div>

  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

 

  <center>
  <TABLE bgcolor="lightcyan" BORDER="5" width=850>
  <TR> <TD>
  <font size="+2">
  <UL>
  <LI> <FONT color="red"><B>What</B></FONT> is the
   <FONT color="blue"><B>message</B></FONT> on this
   <FONT color="red"><B>T-shirt</B></FONT> ?
<P>
 <center>
  <img src="FIGS/0/10-types-people.jpg" style="width:45%">
  </center>
<P>
<LI> <FONT color="red"><B>Answer:</B></FONT> ???
  </UL>
  </font>
  </TD> </TR>
  </TABLE>
  </center>



  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <p style="padding: 0.0in">
  </p>
</div>



<div class="mySlides">
  <div class="text">
  <FONT color="red" size=+2><B>
  <SPAN style="BACKGROUND-COLOR: yellow">
  Quiz: what is written on this T-shirt ?
  </SPAN>
  </B></FONT>
  </div>

  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

 

  <center>
  <TABLE bgcolor="lightcyan" BORDER="5" width=850>
  <TR> <TD>
  <font size="+2">
  <UL>
  <LI> <FONT color="red"><B>What</B></FONT> is the
   <FONT color="blue"><B>message</B></FONT> on this
   <FONT color="red"><B>T-shirt</B></FONT> ?
<P>
 <center>
  <img src="FIGS/0/10-types-people.jpg" style="width:45%">
  </center>
<P>
<LI> <FONT color="red"><B>Answer:</B></FONT> 
   There are <FONT color="red"><B>2</B></FONT>
   (<FONT color="blue"><B>binary number 10</B></FONT>) types of people
  in the world: ....
  </UL>
  </font>
  </TD> </TR>
  </TABLE>
  </center>



  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <p style="padding: 0.0in">
  </p>
</div>


<!------------------- Application to computer memory ---------------->




<div class="mySlides">
  <div class="text">
  <FONT color="red" size=+2><B>
  <SPAN style="BACKGROUND-COLOR: yellow">
  What does the <FONT color="blue">binary number system</FONT>
  has to do with <FONT color="blue">computer memory</FONT> ?
  </SPAN>
  </B></FONT>
  </div>

  <p style="margin-left: 1.2in">
  <font size="+2">

  </font>
  </p>

  <center>
  <TABLE bgcolor="lightcyan" BORDER="5" width=850>
  <TR> <TD>
  <font size="+2">
  <UL>
  <LI> <FONT color="red"><B>Recall</B></FONT> that
     <FONT color="blue"><B>computer memory</B></FONT> consists of
      <FONT color="red"><B>memory cells</B></FONT>:
<P>
  <center>
  <img src="FIGS/memory.gif" style="width:70%">
  </center>
<P>
<LI> <B>Each</B> <FONT color="red"><B> memory cell</B></FONT> is
  <FONT color="blue"><B>identified</B></FONT> by
  a <B>unique</B>
  <FONT color="red"><B>address (= a number)</B></FONT>
<P>
<LI> <B>Each</B> <FONT color="red"><B> memory cell</B></FONT> 
  <FONT color="blue"><B>stores</B></FONT> 
  a
  <FONT color="red"><B> number</B></FONT>
<P>
  </UL>
  </font>
  </TD> </TR>
  </TABLE>
  </center>


  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <p style="padding: 0.2in">
  </p>
</div>



<div class="mySlides">
  <div class="text">
  <FONT color="red" size=+2><B>
  <SPAN style="BACKGROUND-COLOR: yellow">
  What does the <FONT color="blue">binary number system</FONT>
  has to do with <FONT color="blue">computer memory</FONT> ?
  </SPAN>
  </B></FONT>
  </div>

  <p style="margin-left: 1.2in">
  <font size="+2">

  </font>
  </p>

  <center>
  <TABLE bgcolor="lightcyan" BORDER="5" width=850>
  <TR> <TD>
  <font size="+2">
  <UL>
  <LI> The <FONT color="red"><B>computer</B></FONT>
    uses the 
  <SPAN style="BACKGROUND-COLOR: #aaffaa">
   <FONT color="blue"><B>binary number system</B></FONT></SPAN>
    to <FONT color="red"><B>represent</B></FONT>
     the <FONT color="blue"><B>numbers</B></FONT>:
<P>
  <center>
  <img src="FIGS/memory13.gif" style="width:80%">
  </center>
<P>
<LI> <B>Each</B> <FONT color="red"><B> memory cell</B></FONT> is
  <FONT color="blue"><B>identified</B></FONT> by
  a <B>unique</B>
  <FONT color="red"><B>address</B></FONT>
  <SPAN style="BACKGROUND-COLOR: #aaffaa">
  as a <FONT color="blue"><B>binary number</B></FONT></SPAN>
<P>
<LI> <B>Each</B> <FONT color="red"><B> memory cell</B></FONT> 
  <FONT color="blue"><B>stores</B></FONT> 
  a
  <FONT color="red"><B> number</B></FONT>
   <SPAN style="BACKGROUND-COLOR: #aaffaa">
 as a <FONT color="blue"><B>binary number</B></FONT></SPAN>
<P>
  </UL>
  </font>
  </TD> </TR>
  </TABLE>
  </center>


  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <p style="padding: 0.0in">
  </p>
</div>


<!---------------------------- Computer memory - byte --------------->




<div class="mySlides">
  <div class="text">
  <FONT color="red" size=+2><B>
  <SPAN style="BACKGROUND-COLOR: yellow">
  <FONT color="blue">Structure</FONT> of the
  <FONT color="blue">computer memory</FONT>
  </SPAN>
  </B></FONT>
  </div>

  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <center>
  <TABLE bgcolor="lightcyan" BORDER="5" width=850>
  <TR> <TD>
  <font size="+2">
  <UL>
  <LI> <FONT color="red"><B>In theory</B></FONT>, we 
      can make <FONT color="blue"><B>computer memory</B></FONT> with
      <FONT color="red"><B>any number</B></FONT> of
      <FONT color="blue"><B>bits</B></FONT>
 <P>
 <LI> For <FONT color="red"><B>historical reasons</B></FONT>,
      <FONT color="blue"><B>computer manufacturers</B></FONT> have 
      <B>decided</B> on
      <FONT color="red"><B>memory cells</B></FONT> that contains
      <SPAN style="BACKGROUND-COLOR: #aaffaa">
     <FONT color="blue"><B>8 bits</B></FONT></SPAN>:


<P>

  <center>
  <img src="FIGS/mem-content.gif" style="width:50%">
  </center>

<P>
<LI> We call a <FONT color="red"><B>memory cell of 8 bits</B></FONT>:
     <SPAN style="BACKGROUND-COLOR: #aaffaa">
    one <FONT color="blue"><B>byte</B></FONT> of <B>memory</B></SPAN>
  </UL>
  </font>
  </TD> </TR>
  </TABLE>
  </center>


  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <p style="padding: 0.0in">
  </p>
</div>





<div class="mySlides">
  <div class="text">
  <FONT color="red" size=+2><B>
  <SPAN style="BACKGROUND-COLOR: yellow">
  Computer memory <FONT color="blue">jargon</FONT>
  </SPAN>
  </B></FONT>
  </div>

  <p style="margin-left: 1.2in">
  <font size="+2">
 
  </font>
  </p>


  <center>
  <TABLE bgcolor="lightcyan" BORDER="5" width=850>
  <TR> <TD>
  <font size="+2">
  <UL>
  <LI> A <FONT color="red"><B>bit</B></FONT> =
       a <FONT color="blue"><B>
    <FONT color="red">bi</FONT>nary digi<FONT color="red">t</FONT></B></FONT>
    &nbsp; <B>--</B> &nbsp; 
    which is
       the <FONT color="red"><B>unit (= building block)</B></FONT> of
       the <FONT color="blue"><B>computer memory</B></FONT>
  <P>
  <LI> A <FONT color="red"><B>byte</B></FONT> =
       <FONT color="blue"><B>8 bits</B></FONT> 
   &nbsp; <B>--</B> &nbsp; 
   which is
     the 
   <FONT color="red"><B>unit</B></FONT> of
     <SPAN style="BACKGROUND-COLOR: #aaffaa">
    <FONT color="blue"><B>addressable/identfiable</B></FONT></SPAN>
     <FONT color="red"><B>computer memory</B></FONT>
    (you 
  <SPAN style="BACKGROUND-COLOR: #aaffaa">
   <B>cannot</B> use <FONT color="blue"><B>less</B></FONT> than
    <FONT color="red"><B>1 byte</B></FONT></SPAN> in
   <B>any</B> <FONT color="blue"><B>computer operations</B></FONT>)
  <P>
  <LI> <FONT color="red"><B>KByte</B></FONT> =
      <FONT color="blue"><B>kilo byte</B></FONT> =
    <FONT color="red"><B>1024 (= 2<sup>10</sup>) bytes</B></FONT>
    (approximately <B>10<sup>3</sup></B> bytes)
 <P>
 <LI> <FONT color="red"><B>MByte</B></FONT> = 
  <FONT color="blue"><B>mega byte</B></FONT> = 
     <FONT color="red"><B>1048576 (= 2<sup>20</sup>) bytes</B></FONT>
       (approximately <B>10<sup>6</sup></B> bytes)
 <P>
 <LI> <FONT color="red"><B>GByte</B></FONT> = 
   <FONT color="blue"><B>giga byte</B></FONT> = 
     <FONT color="red"><B>1073741824 (= 2<sup>30</sup>) bytes</B></FONT>
       (approximately <B>10<sup>9</sup></B> bytes)
  <BR>
  <B>*****</B> &nbsp;
  <FONT color="red"><B>Today's</B></FONT>
  <FONT color="blue"><B>computers</B></FONT> has <B>about</B>
  <FONT color="red"><B>8-16 GBytes</B></FONT> of 
  <FONT color="blue"><B>RAM</B></FONT>
 <P>
 <LI> <FONT color="red"><B>TByte</B></FONT> = 
    <FONT color="blue"><B>tera byte</B></FONT> =
    <FONT color="red"><B>1099511627776 (= 2<sup>40</sup>) bytes</B></FONT>
       (approximately <B>10<sup>12</sup></B> bytes)
  <BR>
  <B>*****</B> &nbsp;
  <FONT color="red"><B>Today's</B></FONT>
  <FONT color="blue"><B>hard disks</B></FONT> can hold <B>about</B>
  <FONT color="red"><B>2-10 TBytes</B></FONT> of 
  <FONT color="blue"><B>data</B></FONT>
  </UL>
  </font>
  </TD> </TR>
  </TABLE>
  </center>

  <p style="margin-left: 1.2in">
  <font size="+2">
  </font>
  </p>

  <p style="padding: 0.0in">
  </p>
</div>





<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

<!------------------------------------------------------------------->


<!-- The dots/circles -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
  <span class="dot" onclick="currentSlide(4)"></span>
  <span class="dot" onclick="currentSlide(5)"></span>
  <span class="dot" onclick="currentSlide(6)"></span>
  <span class="dot" onclick="currentSlide(7)"></span>
  <span class="dot" onclick="currentSlide(8)"></span>
  <span class="dot" onclick="currentSlide(9)"></span>
  <span class="dot" onclick="currentSlide(10)"></span>
</div> 







  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">
       <FONT size="+2" color="red"><B>&#10094;</B></FONT></a>
  <a class="next" onclick="plusSlides(1)">
       <FONT size="+2" color="red"><B>&#10095;</B></FONT></a>

</div>
<br>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>

<P>
