CS541 Preview of Week 1 CS 541: WEB TECHNOLOGY Peter Stanchev Module 1 – Course information Module 2 – Introduction to Computers Module 3 – Introduction to Internet Module 4 – Web browsers Module 5 – MS Explorer, Netscape Module 6- Adobe Photoshop Elements: Creating Web Graphics Module 7 – Wrap-up 1 CS541 Course information 2 Syllabus The concepts, principles, issues and techniques for web technology. The main principles and protocols in Internet, the key components in XHTML, JavaScript, PERL, CGI, Java Applets, XML. Web database applications using MySQL and PHP. Contact Information Course Description/Objectives Schedule Grades Policies Assignments 3 BlackBoard Use More on BlackBoard Email and WWW (including BlackBoard) is mandatory in this course Technical Notes Important points in BlackBoard Course Information – syllabus Instructor Information Course Documents – home for slides Assignments Tools – Note Digital Drop Box Accessible via a brower any where, any time at blackboard.kettering.edu Default id/password: 4 ID - First four of last name, last four of student number as in borc7566 Password – First letter of first name, student number as in a700067566 Logging into BlackBoard Updating your email address and password 5 Home for revised schedule 6 1 End of Module 1 CS541 Week 1 Module 2 – Introduction to Computers 8 7 What is a Computer? CPU and Main Memory Central Processing Unit Input unit. Output unit. Memory unit. Arithmetic and logic unit (ALU). Central processing unit (CPU). Secondary storage unit. Chip that executes program commands Intel Pentium III Sun Sparc Processor Primary storage area for programs and data that are in active use Synonymous with RAM Main Memory 9 Secondary Memory Devices Secondary memory devices provide longlong-term storage Central Processing Unit 10 Input / Output Devices Information is moved between main memory and secondary memory as needed Monitor Central Processing Unit I/O devices allow user interaction Keyboard Hard disks Floppy disks ZIP disks Writable CDs Tapes Monitor screen Keyboard Mouse Bar code scanner Light pen Touch screen Hard Disk Main Memory Floppy Disk 11 Hard Disk Main Memory Floppy Disk 12 2 Types of Programming Languages Software Categories Operating System controls all machine activities provides the user interface to the computer manages resources such as the CPU and memory Windows 98, Windows NT, Unix, Linux, Mac OS Machine languages Assembly languages High-level languages +1300042774 +1400593419 +1200274027 LOAD BASEPAY ADD OVERPAY STORE GROSSPAY 13 14 Structured Programming Personal Computing Pascal programming language by Nicklaus Wirth in 1971. The Ada programming language was developed under the sponsorship of the United States Department of Defense (DOD) during the 1970s and early 1980s. Other widely used high-level languages such as C and C++ generally allow programs to perform only one activity at a time. Java, through a technique called multithreading, also enables programmers to write programs with parallel activities. In 1977, Apple Computer popularized the phenomenon of personal computing. In 1981, IBM, the world's largest computer vendor, introduced the IBM Personal Computer , making, personal computing legitimate in business, industry and government organizations. 15 16 End of Module 2 CS541 – Week 1 17 Module 3 – Introduction to INTERNET 18 3 The Internet Internet started in late 1960 Research project of ARPA The Internet ARPANET Advanced Research Project Agency A communications system able to keep its integrity under a nuclear attack Based on host-to-host protocol called the Network Control Protocol (NCP) Services build on top of TCP/IP First remote terminal connection from UCLA to SRI in November 1969 remote login (telnet) file transfer (ftp) email Ping, finger About 200 sites in 1981 19 The Internet The Internet ARPANET New protocol developed to link with other vendors’ networks 20 Transmission Control Protocol/Internet Protocol (TCP/IP protocol suite) Switch from NCP to TCP/IP took place January 1, 1983 In March 1986, there were about 3000 sites Initiation of NSFNET backbone, connecting 6 NSF supercomputer centers By late 1989, there were about 150,000 sites around the world In January 1992, the Internet Society (ISOC), a voluntary, non-profit group, was founded to oversee development of the net 21 Internet Protocols Internet Protocols Internet is a packet-switched network IP is the underlying protocol TCP built on top of basic service Provides packets for up to 1500 bytes of data Each packet contains unique source and destination address Packets passed from router to router from source to destination 22 Occasionally, they get damaged or arrive out of order 23 Breaks messages larger than 1500 bytes into a sequence of small IP packets On receiving end, packets are collected, ordered, and data extracted from them Missing and corrupted packets are retransmitted Defines concept of ports Logical addresses Well-known port numbers assigned by IANA Internet Assigned Number Authority 24 4 Internet Addresses Basic Internet Services DNS name servers used to find internet address corresponding to domain name If local DNS server doesn’t know address, it asks DNS server of top level domain for address of DNS server responsible for the next lower domain, and proceeds downward until address is found Traditionally most widely used applications are, Remote login telnet File transfer ftp Identified Anonymous 25 Motivation 26 Heterogeneous Environment Connecting multiple physical networks into a single logical communication system No single networking technology suffices for all circumstances Cannot just connect the wiring from one network to another to form a common network Bridges connect similar networks Routers connect heterogeneous networks 27 Router 28 Router Special-purpose computer for interconnecting networks CPU Memory I/O interface for each network to which it is connected 29 30 5 Internet Architecture Internet Architecture An internet comprises a set of networks interconnected by routers Independent parameters Number of networks Types of networks Number of routers Interconnection topology 31 32 Internet: Layers of connected networks Internet Architecture Workstation Internet A Bridge joins 2 physical networks into 1 logical net A Router moves data between two networks A Gateway moves data between 2 networks with different protocols Token ring network Gateway Workstation Router Ethernet Bridge Workstation Workstation Ethernet Workstation Server 33 Internet Architecture Internet Architecture IP (Internet Protocol) means a big chunk of data are sent by dividing them into several smaller packets and shooting them over to the destination TCP (Transmission Control Protocol) means we guarantee the reliable delivery of packets in the right order, by holding open a path between the source and destination, acknowledging packets and resending if necessary 34 35 Individually TCP and IP are two protocols used to interconnect networks Together, they are a suite of protocols that has been made a standard for the Internet by U.S. Secretary of Defense 36 6 Layer 1 Layer 2 RS-232 Network interface layer How data is organized into frames How a computer transmits frames over the network Address resolution 37 Layer 3 Layer 4 Internet layer 38 Specifies format of packets sent across the internet Specifies methods used to forward packets through one or more routers to its destination Transport layer Specifies how reliable transfer is ensured 39 Layer 5 IP Addresses Application layer 40 Specifies how applications use the internet Protocol software defines an addressing scheme that is independent of underlying physical addresses Addressing specified by the Internet Each host assigned a unique 32-bit number Protocol (IP) 41 Internet Protocol address IP address 42 7 IP Addresses Internet Addresses Each 32-bit IP address divided into 2 parts (makes routing more efficient) Division of the address space Prefix Identifies physical network to which the computer is attached Network number, associated with every network; assigned globally by Internet Service Provider (ISP) Suffix Identifies the individual computer on that network 43 Internet Addresses 44 Internet Addresses Dotted decimal notation 45 Internet Addresses 46 Address Resolution An internet with IP addresses assigned to hosts Transformation between IP address and hardware address 47 Local to a network If A wants to send a message to B and they reside on different networks, then the address of the first appropriate router must initially be resolved 48 8 Address Resolution IP Datagram Header 0 4 8 16 19 24 49 Transmission Across an Internet 31 50 Transmission Across an Internet After sender selects a next hop, the sender encapsulates the datagram in a frame and transmits the result across the physical network to the next hop When frame reaches next hop, the receiving software removes the IP datagram and discards the frame If datagram must be forwarded across another network, a new frame is created 51 Maximum Transmission Unit 52 Fragmentation When datagram is larger than MTU, the router divides it into pieces called fragments 53 Bit in FLAGS field of header indicates whether datagram is a fragment Header field FRAGMENT OFFSET specifies where this particular fragment is placed 54 9 Fragmentation Fragmentation Only final destination reassembles fragments Reduces amount of state information in router Router doesn’t have to know that datagram is a fragment Allows routes to change dynamically If an intermediate route reassembled fragments, all the fragments would have to reach that router 55 Identifying a Fragment Fragment Loss Individual fragments can be lost or delivered out of order 56 When a router fragments the datagram, the router copies Value in IDENTIFICATION header field of datagram to each fragment A receiver uses the identification number and IP source address in an incoming fragment to determine the datagram to which the fragment belongs. Destination cannot hold fragments for an arbitrary time waiting for all of them to be delivered IP defines maximum time to hold fragments All or nothing Cannot request sender to resend certain fragments as sender doesn’t know about fragmentation 57 Recursive Fragmentation 58 Services & Port Numbers Fragments can themselves be fragmented A receiver doesn’t know whether an incoming fragment is an original fragment or a subfragment The many standard IP Services on UNIX Service Port #/Protocol used 59 ftp telnet finger csnet-ns http tftp(trivial ftp) smtp(simple mail) 21/tcp 23/tcp 79/tcp 105/tcp 80 69/udp 25/tcp 60 10 Domain Name System The naming system used in the Internet is called the Domain Name System (DNS) nova.kettering.edu DNS doesn’t specify an exact number of segments in each name nor what those segments represent Each organization can choose how many segments to use and what those segments represent DNS specifies values for most significant segment 61 Domain Name System Top-level DNS Server Hierarchy Possible top level domains Each server is configured to know the addresses of servers corresponding to its subhierarchies Server for .com knows address of server for foobar.com Server for foobar.com knows address of server for walnut.candy.foobar.com 63 Resorses for chapter 1 www.deitel.com netforbeginners.about.com 64 Recourses for chapter 1 Please check this site for updates, corrections and additional resources for all Deitel & Associates, Inc., publications. The About.com Internet for Beginners guide provides valuable resources for further exploration of the history and workings of the Internet and the World Wide Web. the World Wide Web and the underlying technologies. The site contains much information appropriate for novices. 65 This site introduces novices to the Internet and the World Wide Web, targeting users who will be surfing the Web in a classroom setting. www.ed.gov/pubs/OR/ConsumerGuides/internet.html The World Wide Web Consortium (W3C) Web site offers a comprehensive description of Web technologies. For each Internet technology with which the W3C is involved, the site provides a description of the technology, its benefits to Web designers, the history of the technology and the future goals of the W3C in developing the technology. This University of Kansas Web site gives a comprehensive overview of the Internet and the World Wide Web, with an interactive slide presentation of each topic covered. members.tripod.com/~teachers/index.html Learn the Net is a Web site containing a complete overview of the Internet, www.w3.org www.ukans.edu/cwis/units/coms2/class/intro/index.htm www.learnthenet.com/english/index.html 62 The U.S. Department of Education's Consumer Guide provides a clear, concise tutorial on the structure, content and compatibilities of the Internet and the Web. 66 11 End of Module 3 CS451 Week 1 Module 4 – Web browsers 68 67 World-Wide Web Capsule History March 1989 Tim Berners-Lee circulates Information Management: A Proposal at CERN January 1992 May 1992 A draft of HTML 1.0, among other information on the World-Wide Web is posted to several newsgroups May 1991 www, a line mode browser, is written Stanford Linear Accelerator Laboratory sets up first U.S. server General release of www over CERN network 70 World-Wide Web Capsule History August 1991 World-Wide Web Capsule History March 1991 WWW browser created by Berners-Lee on NeXT computer 69 Project presented to CERN Proposal redrafted World-Wide Web named November 1990 February 1991 October 1990 World-Wide Web Capsule History www available by ftp Graphical browser Viola is released by Pei Wei at Berkeley 71 January 1993 Other browsers become available A few dozen web servers are online February 1993 NCSA (National center for Supercomputing Applications, University of Illinois), Mosaic for X is released September 1993 NCSA releases early versions of Mosaic for common operating systems 72 12 World-Wide Web Capsule History October 1993 World-Wide Web Capsule History There are approximately 200 web servers online November 1993 HTML+ is made available for informal January 1994 April 1994 discussion General releases of commercial software to allow home users to connect to WorldWide Web via the Internet Initial draft of HTML 2.0 released to the public July 1994 CERN and MIT announce an agreement to form the W3C 73 World-Wide Web Capsule History Netscape 1.0 beta released First meeting of the W3C held at MIT Netscape 1.0 finalized April 1995 May 1995 HTML 2.0 released as an RFC (Request for Comments) 76 November 1995 Internet Explorer 1.0 finalized September 1995 Netscape 1.2 released August 1995 W3C announces selection of Cascading Style Sheets to provide visual effects W3C provides initial information on HTML World-Wide Web Capsule History July 1995 Netscape 1.1 released 3.0 75 World-Wide Web Capsule History HTML 3.0 released as an RFC February 1995 March 1995 December 1994 World-Wide Web Capsule History October 1994 74 W3C workshop on style sheets Internet Explorer 2.0 finalized January 1996 NCSA Mosaic 2.1 released RFC for HTML 2.0 approved October 1995 NCSA Mosaic final beta released Netscape 2.0b1 released 77 78 13 World-Wide Web Capsule History World-Wide Web Capsule History March 1996 W3C announces that the market leaders will work with the W3C to establish interoperability standards Netscape 2.0 finalized Internet Explorer 3.0a1 released April 1996 NCSA Mosaic 3.0 beta released Netscape 3.0b1 released May 1996 July 1996 HTML 3.2 released as an RFC Cougar (HTML 4.0) released to the public 79 World-Wide Web Capsule History Netscape 3.0 finalized Internet Explorer 3.0 finalized Internet Explorer 3.01 released W3C recommends Cascading Style Sheets, level 1 Netscape 4.0b1 released 81 History of HTML May 1997 Internet Explorer 4.0 Developer Release announced 82 1990 A DTD of SGML Platform independent content markup Netscape 4.0b2 released History of HTML Level 0 W3C recommends HTML 3.2 NCSA ends development with Mosaic 2.0 February 1997 December 1996 January 1997 October 1996 World-Wide Web Capsule History August 1996 80 Level 0 The only required element was TITLE Users to provide formatting through their clients, which wouldn’t be known at the time of document creation and markup HTML nodes could provide access to other HTML nodes via HTTP 83 <HTML>, <BODY>, </BODY>, </HTML> not required Paragraph element, P, was used to separate paragraphs, rather than as a container of paragraphs Thus, <P> was used between paragraphs </P> not required 84 14 History of HTML History of HTML Level 0 Six levels of headers provided Level 1 Each level was expected to be used only once, and in sequence Dan Connolly began development in 1992 Released on the Internet in 1992 RFC released in mid-1993 HEAD element separate from BODY element Along with TITLE, the HEAD element could contain other attributes Opening and closing tags required for some elements ANCHOR element introduced 85 86 History of HTML History of HTML Level 1 GIF files could be displayed Horizontal rule introduced The FORM element was introduced Various style elements Emphasis Keyboard Strong Bold Italic 87 Subscripting Superscripting Footnotes Margins Alignments Tabs Tables Mathematical formulas MIME (Multipurpose Internet Mail Extensions) used to extend HTML file types 88 Attributes for PostScript GIFs JPEGs MPEGs Sounds History of HTML HTML+ Proposal by Dave Raggett Could link to History of HTML HTML+ HTML+ 89 HTML+ parsers ignored tags they didn’t recognize 90 15 History of HTML History of HTML HTML 2 People wanted a standard W3C established for this RFC was drafted and published Stage set for HTML 2.0 as a recognized standard This was a structured response to Netscape Corporation’s various additions to HTML HTML 2.0 91 History of HTML Added the break element, BR Added the META element FORM element ANCHOR element BODY element HEAD element TITLE element Lists Images Links HTML 3 Describes document Provides for indexing and cataloging of the contents David Raggett was point person Proposed as attempt to address the competing demands for a markup language that operated over all platforms Proposed to be acceptable to software companies in addition to Netscape 93 History of HTML FIG element proposed HTML 3 Allowed for Text flow around figures Support for mathematical equations ALIGN attribute added to certain elements 94 History of HTML HTML 3 92 History of HTML HTML 2.0 Reimplemented IMG P HR Underlined text Bigger text Smaller text Subscripts Superscripts Background images Tabs Banners 95 Part of HTML document that wouldn’t scroll, but always remain on top 96 16 History of HTML History of HTML HTML 3 Could work with style sheets Removal of display control elements from HTML Link to a separate style sheet or by use of a STYLE element Different tags supported Approval date for HTML 3.0 passed and nothing 97 happened History of HTML 98 History of HTML Netscape proprietary additions By this time, Microsoft’s Internet Explorer was free and Netscape Navigator was, for all purposes, also free Several books written discussing the migration from Level 2.0 to Level 3.0 and the dangers of using markup not yet an approved standard HTML 3 Didn’t publish DTD’s for these additions HTML 3.2 BLINK element Attributes to HR (horizontal line) element Different types of bullets for bulleted lists Alignment for images Font sizes HTML 3.2 became the standard, replacing HTML 2.0 Added the SCRIPT and STYLE elements Formalized Background, text, and link colors Image width, height, alignment, and spacing 99 History of HTML History of HTML HTML 4.0 Code named Cougar An attempt to set standards to divide markup of content from appearance 100 Other proposals Dynamic HTML Embedded objects and scripting for animation More reliance on style sheets Introduces OBJECT element, to replace IMG 101 102 17 Browser History Browser History Viola 1991-1992 Allowed user to have more than one font Links were boxed History Bookmarks Could display source markup NCSA National Center for Supercomputing Applications One of its missions was the creation of free software to aid the scientific research community Began project to create interface to WWW In February 1992, Mosaic for the X window system was released 103 Browser History Browser History NCSA 104 By September 1992, browsers for X, Microsoft Windows, and Macintosh computers were released In February 1993, Mark Andreessen and others left NCSA and formed Mosaic Communications Corporation Netscape Referred to prototype browser as Mozilla Company was later renamed Netscape Rumor has it that Mozilla means Mosaic killer When company still called Mosaic, the browser was called Netscape After company changed its name to Netscape, its browser was still called Netscape 105 Browser History Browser History Netscape Version 2 106 Netscape Browser called Navigator Added scripting via JavaScript Could run Java applets Version 4 LAYER tag for layout Cascading style sheets Proprietary JavaScript style sheets Version 3 Support for color backgrounds in tables 107 108 18 Browser History Browser History Microsoft Licensed Mosaic, rewrote some of its appearance functions, and released it as Internet Explorer Proprietary features Microsoft Proprietary features Its own version of dynamic HTML Its own features for tables and frames Scripting JScript VBScript 109 JavaScript: Object-Based Scripting for the Web 110 Java JavaScript is an object-based language with strong support for proper software engineering techniques. JavaScript mostly by reading our live-code examples and examining the corresponding input/output screens. Nonprogrammers will learn computer programming in these carefully paced chapters with a large number of exercises. Java source code Java compiler Java bytecode Java interpreter Bytecode compiler Machine code 111 Quiz 1a 112 Thought Question 1 The _______ is the grandparent of today’s Internet. a) Infonet b) Multi-user line c) ARPANET d) Dial-up network 2.The _______ _______ _______ (TCP) ensures that messages are properly routed from sender to receiver and that the messages arrive intact. a) Transportation Conform Practicum b) Trransmission Care Protocol c) Transfer Control Placement d) Transmission Control Protocol 3.Tim Berners-Lee developed the _______. a) Internet b) World Wide Web (WWW) c) Desktop computer d) TCP/IP 4. Tim Berners Lee founded the _______ in 1994 to promote interoperability and accessibility on the Web. a) WWW b) Internet c) MSN d) W3C 5. _______ are programs used to view documents on the Internet and World Wide Web. a) Explorers b) Browsers c) Navigators d) Managers 113 Answer the selfreview questions on page 22 from the first textbook Send the answer of the quiz 1 114 19 End of Module 4 CS 541: WEB TECHNOLOGY Peter Stanchev 116 115 Web applications CS541 – Week 1 Europrix Web pages Module 5 – MS Explorer, Netscape 117 MS Explorer 118 MS Explorer Click to Enlarge 119 120 20 MS Explorer MS Explorer 121 MS Explorer 122 MS Explorer tutorial 123 Netscape 124 End of Module 5 Mozilla.org Opera.com W3.org 125 126 21 CS541 – Week 1 CS541 – Week 1 Module 6 – Adobe Photoshop Elements: Creating Web Graphics Corel draw Illustrator MS Paint MS Front page 127 Adobe Photoshop Elements: Creating Web Graphics www.adobe.com (Adobe Inc.'s home page) to stay up-to-date on general information about Photoshop Elements. Most of the information on the Web, however, is available at user-run sites offering general information, examples and tutorials. www.photoshopcafe.com has excellent in-depth tutorials, for both Photoshop beginners and experts who want to explore new techniques. Another site for tutorials is located at www.planetphotoshop.com. Many Photoshop tutorials were written for versions of Photoshop other than Elements, but many of the main concepts carry over to the Elements version. If looking for effects more diverse than those included in Photoshop Elements, new filters can be downloaded for free from sites such as www.plugins.com/plugins/photoshop. Plug-in filters, brushes and fonts are installed to the hard drive of the computer under the Photoshop Elements directory. 128 Quiz 1b 1. A Web browser is a(n) ______ that renders Internet documents. a) hardware b) software c) search engine d) firmware 2 ______ and ______ are the two most popular Web browsers. a) Opera and Mosaic b) Amazon and E-bay c) Netscape and Internet Explorer d) America Online and MSN 3 The acronym URL stands for ______. a) Universal Required Label b) Universal Remote Locator c) Uniform Resource Locator d) Uniform Resource Label 4 Typically, Web pages are delivered via which protocol: a) Netscape b) HTTP c) FTP d) QTP 5 Restricted access FTP sites require that the user ______. a) login b) register c) send an email address d) download a file 129 End of Module 6 130 Thought Question 131 Answer the selfreview questions on page 43 from the first textbook Send the answers of the quiz 1b 132 22 Assignments • Read chapter 1-3 of the text book 1 CS541 – Week 1 • Send the answers of quiz 1a and 1b • Work with BlackBoard • Set e-mail preference • Reset password • Download the slides for week 1 Module 7 – Wrap-up 133 134 23