Today’s topics Networks & the Internet Basic HTML Data Representation
advertisement
Today’s topics
Networks & the Internet
Basic HTML
The basis for web pages
CSS
Data Representation
Upcoming
Connections
Algorithms
Reading
Internet history readings
Computer Science, Chapter 4
CompSci 001
2.1
The Internet
How valuable is a network?
Metcalfe’s Law
Domain Name Service: translates betweens names and IP
addresses
Properties of the Internet
Heterogeneity
Redundancy
Packet-switched
1.46 billion online (Internet World Stats 2008)
Warriors of the Net!
Who has access?
How important is access?
CompSci 001
2.2
HTML
Specifying Colors
Can be specified in different ways
e.g., for standard colors can specify “white” or “red”
Can specify arbitrary colors by specifying the amount of
red, blue, and green involved. (RGB)
Uses base 16 arithmetic: 0, 1, …, 9, a, b, c, d, e, f
Red: “ff0000”
Green: “00ff00”
Blue: “0000ff”
Black: “000000”
Gray: ”7f7f7f”
White:”ffffff”
Yellow: ”ffff00” Orange: “ff7f00” Purple: ”c000e0”
Can experiment!
CompSci 001
2.3
More Hexadecimal
CompSci 001
from L. Snyder, Fluency with Information Technology
2.4
HTML/Web/UNIX practice
In UNIX, your web page folder is found in a standard location:
~userID/public_html/
and for OIT Duke files is accessed with a web browser at
//www.duke.edu/~userID
Many people don’t code in raw HTML
Write in TextPad
Save as Web Page in Microsoft Word
Netscape Composer, Macromedia Dreamweaver, Bluefish
These all generate HTML for you
View other people’s web page source (HTML) from most browsers -learn from others
CompSci 001
2.5
Lab 2
In Lab 1, you created a webpage. How does it differ from
webpages of the past 4 years?
Design?
Content?
Web 2.0?
In Lab 2, you will create a somewhat more modern webpage
Find a page & design that you like.
Can you adapt it and use as your own?
Ideas: Cascading Style Sheets, embedded video or maps,
2.6
CompSci 001mashups
What makes for a good website?
"Success has 100 parents, failure is an orphan” – J R Ashton
What makes for a bad one?
http://www.webpagesthatsuck.com
CompSci 001
2.7
Cascading Style Sheets (CSS)
Style sheets describe how documents are presented
CSS is a standard for providing formatting (i.e. style)
information for web documents
Specify fonts, colors, spacing, etc.
Why would we want to separate the style information from
the content?
In the CSS file, you specify:
a selector, that picks out the element you want
the properties and values that you want to apply to the
selected element (or elements)
select everything in the <body> tag
and use a serif font for the text
body {
font-family: serif;
}
2.8
CompSci 001
from © 2006 DW Johnson & University of Washington
Selectors
The element type: body, div, span, h1, h2, img, p, a, …
selected with
<h1>Introduction</h1>
html file
h1 {
color: green;
}
css file
Specific "id" given for the element
<div id="footer">
…
</div>
selected with
html file
div#footer {
font-family: sans-serif;
}
css file
General "class" given for the element
<span class="familyMember">
…
</span>
html file
selected with
span.familyMember {
font-weight: bold;
}
css file
2.9
CompSci 001
from © 2006 DW Johnson & University of Washingtonton
Properties
The properties of the element determine how it it styled, including:
background of the element
text colors, alignment, spacing
font selection
border thickness, color, style
padding and margins around the element
list styles
Some properties and their values
color: and background-color:and norder-color
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple,
red, silver, teal, white, and yellow
font-family:
serif, sans-serif, cursive, fantasy, monospace
font-style:
normal, italic
font-weight:
normal, bold
border-width:
thin, medium, thick
border-style:
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
2.10
CompSci 001
See Lab 1 for CSS tutorials
Digital Computers
What are computers made up of?
Lowest level of abstraction: atoms
Higher level: transistors
Transistors
Invented in 1951 at Bell Labs
An electronic switch
Building block for all modern electronics
Transistors are packaged as Integrated Circuits (ICs)
40 million transistors in 1 IC
CompSci 001
2.11
Binary Digits (Bits)
Yes or No
On or Off
One or Zero
10010010
CompSci 001
2.12
More on binary
Byte
A sequence of bits
8 bits = 1 byte
2 bytes = 1 word (sometimes 4 or 8 bytes)
Powers of two
How do binary numbers work?
CompSci 001
2.13
Data Encoding
Text: Each character (letter, punctuation, etc.) is assigned a
unique bit pattern.
ASCII: Uses patterns of 7-bits to represent most symbols
used in written English text
Unicode: Uses patterns of 16-bits to represent the major
symbols used in languages world side
ISO standard: Uses patterns of 32-bits to represent most
symbols used in languages world wide
Numbers: Uses bits to represent a number in base two
Limitations of computer representations of numeric values
Overflow – happens when a value is too big to be
represented
Truncation – happens when a value is between two
representable values
CompSci 001
2.14
Images, Sound, & Compression
Images
Store as bit map: define each pixel
• RGB
• Luminance and chrominance
Vector techniques
• Scalable
• TrueType and PostScript
Audio
Sampling
Compression
Lossless: Huffman, LZW, GIF
Lossy: JPEG, MPEG, MP3
CompSci 001
2.15
Decimal (Base 10) Numbers
Each digit in a decimal number is chosen from ten symbols:
{ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 }
The position (right to left) of each digit represents a power of ten.
Example: Consider the decimal number 2307
2
position:
3
2
1
3
0
7
0
2307 = 2103 + 3102 + 0101 + 7100
CompSci 001
2.16
Binary (Base 2) Numbers
Each digit in a binary number is chosen from two symbols:
{ 0, 1 }
The position (right to left) of each digit represents a power
of two.
Example: Convert binary number 1101 to decimal
position:
1101 =
=
CompSci 001
1
1
0
1
3
2
1
0
123 + 122 + 021 + 120
18 + 14 + 02 + 11
= 8 + 4 + 1 = 13
2.17
Powers of Two
Decimal
CompSci 001
Binary
Power of 2
1
1
20
2
10
4
100
8
1000
21
22
23
16
10000
32
100000
64
1000000
128
10000000
24
25
26
27
2.18
Famous Powers of Two
CompSci 001
Images from http://courses.cs.vt.edu/~csonline/MachineArchitecture/Lessons/Circuits/index.html
2.19
Other Number Systems
CompSci 001
2.20
Images from http://courses.cs.vt.edu/~csonline/MachineArchitecture/Lessons/Circuits/index.html
Binary Addition
Also: 1 + 1 + 1 = 1 with a carry of 1
CompSci 001
2.21
Images from http://courses.cs.vt.edu/~csonline/MachineArchitecture/Lessons/Circuits/index.html
Adding Binary Numbers
101
+ 10
-------111
101 + 10 = ( 122 + 021 + 120 ) + ( 121 + 020 )
= ( 14 + 02 + 11 ) + ( 12 + 01 )
Add like terms: There is one 4, one 2, one 1
= 14 + 12 + 11 = 111
CompSci 001
2.22
Adding Binary Numbers
11
carry
111
+ 110
--------1101
111 + 110 = ( 122 + 121 + 120 ) + (122 + 121 + 020 )
= ( 14 + 12 + 11 ) + (14 + 12 + 01 )
Add like terms: There are two 4s, two 2s, one 1
= 24 + 22 + 11
= 18 + 14 + 02 + 11 = 1101
BinaryNumber Applet
CompSci 001
2.23
Converting Decimal to Binary
Decimal
0
1
2
3
4
5
6
7
8
CompSci 001
conversion
0 = 020
1 = 120
2 = 121 + 020
3 = 2+1 = 121 + 020
4 = 122 + 021 + 020
5 = 4+1 = 122 + 021 + 120
6 = 4+2 = 122 + 121 + 020
7 = 4+2+1 = 122 + 121 + 120
8 = 122 + 022 + 021 + 020
Binary
0
1
10
11
100
101
110
111
1000
2.24
Converting Decimal to Binary
Repeated division by two until the quotient is zero
Example: Convert decimal number 54 to binary
0
21
2
2
2
2
CompSci 001
1
1
2 3
0
6
1
13
1
27
0
54
Binary representation of
54 is 110110
remainder
2.25
Converting Decimal to Binary
1
1 32 =
0
1
6
1 32 plus 1 sixteen
2 3
0
3 16s =
3 16 plus 0 eights
6
1
13 4s =
6 8s plus 1 four
13
1
27 2s = 13 4s plus 1 two
27
0
54
0
21
2
2
2
2
8s =
plus 1 thirty-two
= 27 2s plus 0 ones
54
Subtracting highest
power of two
54 - 25 = 22
1s in positions 5,4,2,1
6 - 22 = 2
CompSci 001
22 - 24 = 6
2 - 21 = 0
110110
2.26
Problems
Convert 1011000 to decimal representation
Add the binary numbers 1011001 and 10101 and express
their sum in binary representation
Convert 77 to binary representation
CompSci 001
2.27
Solutions
Convert 1011000 to decimal representation
1011000 = 126 + 025 + 124 + 123 + 022 + 021 + 020
= 164 + 032 + 116 + 18 + 04 + 02 + 01
= 64 + 16 + 8 = 88
Add the binary numbers 1011001 and 10101 and express their sum
in binary representation
1011001
+ 10101
------------1101110
CompSci 001
2.28
Solutions
Convert 77 to binary representation
2
2
2
2
2
CompSci 001
0
21
1
2 2
0
4
1
9
1
19
0
38
1
0
Binary representation of
77 is 1001101
77
2.29
Boolean Logic
AND, OR, NOT, NOR, NAND, XOR
Each operator has a set of rules for combining two binary inputs
These rules are defined in a Truth Table
(This term is from the field of Logic)
Each implemented in an electronic device called a gate
Gates operate on inputs of 0’s and 1’s
These are more basic than operations like addition
Gates are used to build up circuits that
• Compute addition, subtraction, etc
• Store values to be used later
• Translate values from one format to another
CompSci 001
2.30
Truth Tables
CompSci 001
Images from http://courses.cs.vt.edu/~csonline/MachineArchitecture/Lessons/Circuits/index.html
2.31
In-Class Questions
1.
How many different bit patterns can be formed if each must consist of
exactly 6 bits?
2.
Represent the bit pattern 1011010010011111 in hexadecimal notation.
3.
Translate each of the following binary representations into its
equivalent base ten representation.
1. 1100
2. 10.011
Translate 231 in decimal to binary
4.
CompSci 001
2.32
