CompSci 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 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?

CompSci 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: “ ” Gray: ”7f7f7f” White:” ffffff ” Yellow: ” ffff00 ” Orange: “ ff7f00 ” Purple: ” c000e0 ” ä Can experiment!

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

CompSci 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 ä // 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

CompSci 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

CompSci What makes for a good website? " Success has 100 parents, failure is an orphan ” – J R Ashton l What makes for a bad one? ä

CompSci 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

CompSci 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

CompSci 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

CompSci 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

CompSci Binary Digits (Bits) l Yes or No l On or Off l One or Zero l

CompSci 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?

CompSci 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

CompSci 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

CompSci 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   position: = 2     10 0

CompSci 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   position: = 1     2 0 =1     1= = 13

CompSci Powers of Two DecimalBinaryPower of

CompSci Famous Powers of Two Images from

CompSci Other Number Systems Images from

CompSci Binary Addition Images from Also: = 1 with a carry of 1

CompSci Adding Binary Numbers l = ( 1    2 0 ) + ( 1   2 0 ) = ( 1    1 ) + ( 1   1 ) l Add like terms: There is one 4, one 2, one 1 = 1    1 = 111

CompSci Adding Binary Numbers 1 1  carry l = ( 1    2 0 ) + (1    2 0 ) = ( 1    1 ) + (1    1 ) l Add like terms: There are two 4s, two 2s, one 1 = 2    1 = 1     1 = 1101 l BinaryNumber Applet

CompSci Converting Decimal to Binary Decimal Binary   conversion   0 = 0  = 1  = 1   = 2+1 = 1   = 1    = 4+1 = 1    = 4+2 = 1    = = 1    = 1     2 0

CompSci 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 remainder

CompSci 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, = = = = 0 

CompSci Problems l Convert to decimal representation l Add the binary numbers and and express their sum in binary representation l Convert 77 to binary representation

CompSci Solutions l Convert to decimal representation = 1        2 0 = 1        1 = = 88 l Add the binary numbers and and express their sum in binary representation

CompSci Solutions l Convert 77 to binary representation  1  0  1  0  1 Binary representation of 77 is

CompSci 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

CompSci Truth Tables Images from

CompSci 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 in hexadecimal notation. 3. Translate each of the following binary representations into its equivalent base ten representation Translate 231 in decimal to binary