1. Local to Global Building the Internet CPSC 120 Principles of Computer Science March 7, 2012

2. Quick Overview  Models of computer communication  Networks  Networking terminology  Internet history in a nutshell  World Wide Web design basics  HTML, browsers, protocols make it work  Coding in HTML for the Internet  Extensions to HTML and future trends

3. General Hardware Diagram for Networks  Data transfer requires specific medium: copper wire, fiber optic cable, radio signals (wireless)  Each computer must have an appropriate network interface device or card (NIC): serial, Ethernet, wireless, etc

4. General Software Diagram for Networking  Data exchange requires protocols (agreed upon rules of communication) between programs that control hardware.  Protocols involve signaling, response, data content, timing, etc.  Layers are used to handle the complexity/changes inherent in hardware. Recall using subroutines to handle hardware access in BOE-BOT.

5. Network Topologies (Shapes)  Various connection styles were explored: backbone, Token ring, star topology, etc  This creates a Local Area Network (LAN)

6. Casting a Wider Net  By the 1970’s, LANs needed to communicate across longer distances  A system of protocols for addressing computers and sharing data was needed  There was a confusing mixture of computer types, file formats, media, and operating systems  US government encouraged the development of networks as a security issue

7. ARPANET in early 1970’s

8. ARPANET in mid-1980’s

9. The Internet Recently

10. Networking Protocols  LANs and Wide Area Networks (WANs) require some addressing method to route messages to specific computers  Transmission Control Protocol/Internetworking Protocol (TCP/IP) has been the most successful  Addresses are given in a dot notation: 172.21.7.11 is a typical IP address  Some arithmetic: Addresses range from 0.0.0.0 to 255.255.255.255 giving us 32 bits of address  This means about 2 32 or about 4 billion addresses are possible. These are filled! IPv6 now in effect.  Routers use lookup tables to send packets of data across network boundaries for delivery.

11. The Internet: LAN Point of View

12. Names Instead of Numbers  It is hard to remember and type IP addresses like 172.21.7.11 instead of natural names.  Enter Domain Name Service or DNS. This allows computer addresses to be arranged in clusters, or domains, and addressed using names instead of IP numbers.  Example: math.hws.edu indicates some computer found in the domain hws.edu. This domain name is attached to routing tables so routers know to send packets of data to our campus firewall which forwards it to the server in our campus LAN named math.  Looks promising but there are still problems!

13. Documents Have Structure  By the 1980s, many vendors offered competing document formats, file systems, operating systems, etc.  You needed to have technical skills and persistence in locating, downloading or uploading a file, and determining which application could view or print it!  Also, hypertext authors were experimenting with links to allow readers to move between documents using graphical links. Example: Apple Computer’s Hypercard.  No single system was in place to tie all this together and allow non-specialists to post and/or have access to the hundreds of Internet documents beginning to appear.  Consequently, Internet commerce and novice user participation was minimal due to these constraints.

14. The World Wide Web (WWW) Arrives  Tim Berners-Lee, computer scientist at CERN, made a number of important contributions which address these problems.  HTTP: Hypertext Transfer Protocol: How to name, request, and transfer documents over the Internet.  HTTPD: HTTP Daemon. Non-proprietary, client-server oriented open source software to actually carry out the HTTP protocol on many different operating systems.  HTML: Hypertext Markup Language. A common formatting language to allow consistent document display on all computers. HTML documents also may contain hypertext links to allow users to easily move from one HTML file to another or browse the Web.  HTML documents are typically named with extensions.htm or.html and contain plain ASCII text. Coding!!!!

15. HTTP and Browser Basics  An address or Uniform Resource Locator (URL) such as http://math.hws.edu/vaughn/index.html indicates we are referencing a document using the HTTP protocol from the server math in domain hws.edu. The document itself is found inside directory vaughn with its individual file name index.html. http://math.hws.edu/vaughn/index.html  To send this request, we use a Web browser, a local application which interacts with the Internet, and can form HTTP requests, display HTML documents, etc.  Common browsers: Internet Explorer, FireFox, Opera, Chrome, etc.  Other protocols and documents work with WWW. ftp://math.hws.edu/vaughn/myFile.doc or (File Transfer Protocol) ftp://math.hws.edu/vaughn/myFile.doc  https://math.hws.edu/vaughn/secrets.pdf (Secure HTTP uses encryption) https://math.hws.edu/vaughn/secrets.pdf

16. HTML Basics  HTML documents are plain ASCII text created by users, like you, using a simple ASCII text editor.  HTML documents are rendered by Web browsers to appear with colors, fonts, images, formatting, tables, etc.  Control over the document display is done with HTML tags such as This text is bold.  In order to have Web site content, most beginners learn how to code in basic HTML then move on to using a WYSIWYG HTML editor such as Dreamweaver, GoLive, Aptana Studio, etc. You documents must be made available on a Web Server which handles retrieval requests.  Just like spreadsheets, HTML documents can be enhanced with active, executing programs (VBScript, Javascript, Flash, etc) to create DHTML or XHTML pages.

17. Our First HTML Document My First Page This is my first web page!

18. Rendering the HTML via a Web browser

19. Where We are Going  Learn the basic HTML tags to compose Web pages.  Learn how to post pages on a campus server so anyone on the Internet can access and see your pages.  Learn more complex page design, composition techniques, and the corresponding HTML tags.  Add Javascript code to HTML web pages to make them active, not just static.  Introduction to an industrial-quality HTML editor.