1. CompSci 001 2.1 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

2. CompSci 001 2.2 The Internet l How valuable is a network? ä Metcalfe’s Law l Domain Name Service: translates betweens names and IP addresses l Properties of the Internet ä Heterogeneity ä Redundancy ä Packet-switched ä 1.46 billion online (Internet World Stats 2008) l Warriors of the Net! Warriors of the Net l Who has access? l How important is access?

3. CompSci 001 2.3 HTML l 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!

4. CompSci 001 2.4 More Hexadecimal from L. Snyder, Fluency with Information Technology

5. CompSci 001 2.5 HTML/Web/UNIX practice l 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 l Many people don’t code in raw HTML ä Write in TextPad ä Save as Web Page in Microsoft Word ä Netscape Composer, Macromedia Dreamweaver, Bluefish l These all generate HTML for you l View other people’s web page source (HTML) from most browsers -- learn from others

6. CompSci 001 2.6 Lab 2 l In Lab 1, you created a webpage. How does it differ from webpages of the past 4 years? ä Design? ä Content? ä Web 2.0? l 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, mashups

7. CompSci 001 2.7 What makes for a good website? " Success has 100 parents, failure is an orphan ” – J R Ashton l What makes for a bad one? ä http://www.webpagesthatsuck.com

8. CompSci 001 2.8 Cascading Style Sheets (CSS) l Style sheets describe how documents are presented l 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? l 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) body { font-family: serif; } select everything in the tag and use a serif font for the text from © 2006 DW Johnson & University of Washington

9. CompSci 001 2.9 The element type : body, div, span, h1, h2, img, p, a, … Specific "id" given for the element General "class" given for the element Selectors … div#footer { font-family: sans-serif; } selected with html file css file Introduction h1 { color: green; } selected with html file css file … span.familyMember { font-weight: bold; } selected with html file css file from © 2006 DW Johnson & University of Washingtonton

10. CompSci 001 2.10 Properties l 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 l 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 See Lab 1 for CSS tutorials

11. CompSci 001 2.11 Digital Computers l What are computers made up of? ä Lowest level of abstraction: atoms ä Higher level: transistors l 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

12. CompSci 001 2.12 Binary Digits (Bits) l Yes or No l On or Off l One or Zero l 10010010

13. CompSci 001 2.13 More on binary l Byte ä A sequence of bits ä 8 bits = 1 byte ä 2 bytes = 1 word (sometimes 4 or 8 bytes) l Powers of two l How do binary numbers work?

14. CompSci 001 2.14 Data Encoding l 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 l Numbers: Uses bits to represent a number in base two l 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

15. CompSci 001 2.15 Images, Sound, & Compression l Images ä Store as bit map: define each pixel RGB Luminance and chrominance ä Vector techniques Scalable TrueType and PostScript l Audio ä Sampling l Compression ä Lossless: Huffman, LZW, GIF ä Lossy: JPEG, MPEG, MP3

16. CompSci 001 2.16 Decimal (Base 10) Numbers l Each digit in a decimal number is chosen from ten symbols: { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 } l The position (right to left) of each digit represents a power of ten. l Example: Consider the decimal number 2307 2 3 0 7   position: 3 2 1 0 2307 = 2  10 3 + 3  10 2 + 0  10 1 + 7  10 0

17. CompSci 001 2.17 Binary (Base 2) Numbers l Each digit in a binary number is chosen from two symbols: { 0, 1 } l The position (right to left) of each digit represents a power of two. l Example: Convert binary number 1101 to decimal 1 1 0 1   position: 3 2 1 0 1101 = 1  2 3 + 1  2 2 + 0  2 1 + 1  2 0 =1  8 + 1  4 + 0  2 + 1  1= 8 + 4 + 1 = 13

18. CompSci 001 2.18 Powers of Two DecimalBinaryPower of 2 11 210 4100 81000 1610000 32100000 641000000 12810000000

19. CompSci 001 2.19 Famous Powers of Two Images from http://courses.cs.vt.edu/~csonline/MachineArchitecture/Lessons/Circuits/index.html

20. CompSci 001 2.20 Other Number Systems Images from http://courses.cs.vt.edu/~csonline/MachineArchitecture/Lessons/Circuits/index.html

21. CompSci 001 2.21 Binary Addition Images from http://courses.cs.vt.edu/~csonline/MachineArchitecture/Lessons/Circuits/index.html Also: 1 + 1 + 1 = 1 with a carry of 1

22. CompSci 001 2.22 Adding Binary Numbers 101 + 10 -------- 111 l 101 + 10 = ( 1  2 2 + 0  2 1 + 1  2 0 ) + ( 1  2 1 + 0  2 0 ) = ( 1  4 + 0  2 + 1  1 ) + ( 1  2 + 0  1 ) l Add like terms: There is one 4, one 2, one 1 = 1  4 + 1  2 + 1  1 = 111

23. CompSci 001 2.23 Adding Binary Numbers 1 1  carry 111 + 110 --------- 1101 l 111 + 110= ( 1  2 2 + 1  2 1 + 1  2 0 ) + (1  2 2 + 1  2 1 + 0  2 0 ) = ( 1  4 + 1  2 + 1  1 ) + (1  4 + 1  2 + 0  1 ) l Add like terms: There are two 4s, two 2s, one 1 = 2  4 + 2  2 + 1  1 = 1  8 + 1  4 + 0  2 + 1  1 = 1101 l BinaryNumber Applet

24. CompSci 001 2.24 Converting Decimal to Binary Decimal 0 1 2 3 4 5 6 7 8 Binary 0 1 10 11 100 101 110 111 1000   conversion   0 = 0  2 0 1 = 1  2 0 2 = 1  2 1 + 0  2 0 3 = 2+1 = 1  2 1 + 0  2 0 4 = 1  2 2 + 0  2 1 + 0  2 0 5 = 4+1 = 1  2 2 + 0  2 1 + 1  2 0 6 = 4+2 = 1  2 2 + 1  2 1 + 0  2 0 7 = 4+2+1 = 1  2 2 + 1  2 1 + 1  2 0 8 = 1  2 2 + 0  2 2 + 0  2 1 + 0  2 0

25. CompSci 001 2.25 Converting Decimal to Binary l Repeated division by two until the quotient is zero l Example: Convert decimal number 54 to binary  1  0  1  0 Binary representation of 54 is 110110 remainder

26. CompSci 001 2.26 Converting Decimal to Binary l 1 32 = 0 plus 1 thirty-two l 6 8s = 1 32 plus 1 sixteen l 3 16s = 3 16 plus 0 eights l 13 4s = 6 8s plus 1 four l 27 2s = 13 4s plus 1 two l 54 = 27 2s plus 0 ones  1  0  1  0 l Subtracting highest power of two l 1s in positions 5,4,2,1 54 - 2 5 = 22 22 - 2 4 = 6 6 - 2 2 = 2 2 - 2 1 = 0  110110

27. CompSci 001 2.27 Problems l Convert 1011000 to decimal representation l Add the binary numbers 1011001 and 10101 and express their sum in binary representation l Convert 77 to binary representation

28. CompSci 001 2.28 Solutions l Convert 1011000 to decimal representation 1011000 = 1  2 6 + 0  2 5 + 1  2 4 + 1  2 3 + 0  2 2 + 0  2 1 + 0  2 0 = 1  64 + 0  32 + 1  16 + 1  8 + 0  4 + 0  2 + 0  1 = 64 + 16 + 8 = 88 l Add the binary numbers 1011001 and 10101 and express their sum in binary representation 1011001 + 10101 ------------- 1101110

29. CompSci 001 2.29 Solutions l Convert 77 to binary representation  1  0  1  0  1 Binary representation of 77 is 1001101

30. CompSci 001 2.30 Boolean Logic l AND, OR, NOT, NOR, NAND, XOR l 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) l 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

31. CompSci 001 2.31 Truth Tables Images from http://courses.cs.vt.edu/~csonline/MachineArchitecture/Lessons/Circuits/index.html

32. CompSci 001 2.32 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 4. Translate 231 in decimal to binary