From administrivia to what really matters Questions about the syllabus? Logistics Daily lectures, quizzes and labs Two exams and one long project My teaching philosophy...... is informed by my passion for learning What s your approach to learning? My expectations Are they too high? Some of my students disagree with me on this point... In any case, by signing up for this course, you have made a full-time commitment: 14 weeks worth of fun in 14 days!!! What about your expectations? You ll share those with me as part of today s lab 1-1
Introduction to the Internet and the WWW Internet: What is it? How did it get started? How did it evolve? How does it work? Server/client model Communication protocols Domain names, URLs Who governs it? World Wide Web What is it? How did it get started? How does it work? Web servers and web browsers Markup languages 1-2
The Internet Internet = Interconnected network of computer networks 1960s: ARPAnet (Advanced Research Project Agency now DARPA) 1969: four computers connected NSFnet (National Science Foundation) Use of the Internet is limited to government, research and academic use 1991: Commercial ban is lifted Development of the World Wide Web by Tim Berners-Lee at CERN Development of Mosaic, the first graphics-based web browser at NCSA Internet versus... WWW (starting on slide 1-9) Internet versus... intranet: private network accessible only within an organization or business Internet versus... extranet: private network used securely by an organization and its external partners 1-3
Networks A network is comprised of two or more computers connected together for the purpose of communicating and sharing resources. Types of networks: LAN or local area networks MAN or metropolitan area networks WAN or wide area networks Internet 1-4
Internet infrastructure 1-5
TCP/IP Since the Internet connects millions of computers in schools, libraries, universities, organizations, and homes around the world, it must allow computers with different hardware, software programs, operating systems, etc., to share information. In order for this diverse collection of computers to communicate, they need a common language or communication protocol. Most of the data transferred via the Internet is handled by TCP/IP or Transmission Control Protocol / Internet Protocol, protocols that allow software to send and receive information in small packets, which include addressing information (the IP part): Each computer connected to the Internet is given a unique numeric address called an IP address. Example: 129.237.33.3 TCP allows packets to be sent to a specific computer via different routes; the packets are re-assembled into a coherent whole at the destination. What the coherent whole is depends upon the software that is interpreting it. Any computer on the Internet can put packets on the network; the Internet supports end-to-end (E2E) connectivity, like our highway system. This was an important design decision, keeping the network simple, with intelligence occurring after a packet gets off the network. 1-6
The client/server model This model describes a relationship between two computer programs, namely the client and the server. The client program requests some type of service (such as a file or database access) from the server. The server fulfills the request and transmits the results to the client over the network. The client/server model applied to the Internet: Your computer connects to the Internet and runs a Web browser, which is the client program that requests web pages. Somewhere on the Internet is the Web server, which is always connected to the Internet, waiting for requests from clients; it delivers the requested web pages and other files to the client. 1-7
Higher-level protocols Many different applications and services move their data over the Internet using protocols that are built on top of TCP/IP: Email: Sending: SMTP Receiving: POP (POP3) IMAP File copy: FTP Remote logins: TELNET World Wide Web: HTTP 1-8
The World Wide Web (or the acronym zoo ) The WWW or Web is a system of linked documents built on top of the Internet that can be navigated by following hyperlinks contained in web pages. Internet standards and coordination: ISOC: Internet Society - A non-profit organization that provides leadership in Internetrelated standards, education and policy. It is the home of groups responsible for Internet infrastructure standards: http://www.internetsociety.org/ IETF: Internet Engineering Task Force http://www.ietf.org/ The mission of the IETF is to make the Internet work better by producing high quality, relevant technical documents that influence the way people design, use, and manage the Internet. IAB: Internet Architecture Board http://www.iab.org/ Provides oversight of the architecture for the protocols and procedures used by the Internet. 1-9
Internet standards and coordination (continued): ICANN: The Internet Corporation for Assigned Numbers and Names - A non-profit organization whose main function is to coordinate the assignment of: Internet domain names IP address numbers Protocol parameters and port numbers http://www.icann.org/ W3C: World Wide Web Consortium - Develops recommendations and prototype technologies related to the Web in an effort to standardize web technologies. http://www.w3.org/ WAI: Web Accessibility Initiative Develops strategies, guidelines, and resources to help make the Web accessible to as many people as possible. http://www.w3.org/wai/ 1-10
HTTP The Hypertext Transfer Protocol is a set of rules for exchanging files such as text files, image files, sound files, video files, and other multimedia files on the Web. Web browsers send HTTP requests for web pages and their associated files. Web servers send HTTP responses back to the web browsers. 1-11
URLs and domain names When you request a web page, you do not type in an IP address into your browser; instead you type in a Uniform Resource Locator (or URL), which represents the network location of the resource (web page, image, mp3 file, etc.) you want to access. A URL is a symbolic, human-readable alias for the IP address. The domain name system (DNS) divides the Internet into named domains and subdomains. A top-level domain (TLD) identifies the largest possible domain (such as.com,.org,.net,.mil,.gov,.edu and country codes such as.fr,.cn,.au). Within each top-level domain, each organization has a unique symbolic name (such as google, uwosh). Within each organization, there may be more than one web server (or host). Each web server has access to a hierarchically-organized collection of documents. Actual URL: http://www.webdevfoundations.net/7e/chapter1.html 1-12
URL examples http://www.google.com/ http://www.google.fr/ http://www.google.com.au/ http://www.google.com/index.html http://www.google.com/about.html A.html file is a plain text (not a word-processed document) that has been formatted (or marked up) for display by a Web browser. 1-13
Markup languages Not discussed in this course: SGML: Standard Generalized Markup Language XML: extensible Markup Language HTML 4.01 XHTML 1.0 In this course, we focus on: HTML5 HTML is the HyperText Markup Language. This language defines the set of markup symbols or codes that can be placed in a file intended for display by a web browser. This language was originally developed by Tim Berners-Lee to share scientific documents. Fortunately, he convinced CERN to put HTML in the public domain. HTML markup gives the content of the Web page (plain text, images, etc.) a structure, which is used by the Web browser to arrange and display the page on the screen. Be aware that not all browsers display Web pages the same way. 1-14
HTML elements An HTML document is a plain text file that contains elements. The root element is called html. Most elements are comprised of an opening tag and a closing tag with the contents of the element placed between these tags. So the file example.html contains the text shown on the right (top). All HTML documents contain two sections called the head and the body of the document. Hence, the HTML file contains two new elements that are nested in the root element, as shown on the right (middle). The parts of the document that are displayed in the browser s main window go inside the body. So what is the head for? This header section is for describing the document. It should contain the title of the document, and other meta-level descriptors. <html>... </html> <html> <head>... </head> <body>... </body> </html> <html> <head> <title>cs125</title> </head> <body> This course is fun!... </body> </html> 1-15
Creating and testing your web pages 1. Type your HTML code in your favorite text editor (e.g., Notepad). 2. Save your code as a text file with a.html extension. 3. Load your web page in your favorite browser. For instance, in Firefox, select File > Open File... to select your HTML file. Repeat these three steps each time you make changes to your HTML file. It is also a good idea to validate your HTML code by running your file through a markup validator, such as the one at: http://validator.w3.org/ Here is the (partial) output of the validator for our sample file: Validation Output: 3 Errors 1. Line 1, Column 1: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>"... What gives? 1-16
HTML syntax Since there are several dialects of HTML, you must use a Document Type Definition (or DTD) to identify the type of markup language used in a web page, among: XHTML 1.0 Transitional (this is the least strict specification for XHTML 1.0) XHTML 1.0 Strict XHTML 1.0 Frameset XHTML 1.1 HTML5 (experimental) Since we will use the last DTD in this course (with a DTD name of html, NOT html5 ), the first line of each web page you create must be: <!DOCTYPE html> <!DOCTYPE html> <html lang="en">... </html> 1-17
HTML5 template I have posted on the course web site, as part of the Lab 1 handout, an HTML5 template for you to copy. It is a valid (well-formed) empty HTML5 file that you should use as a starting point for each web page that you create in this course: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body>... </body> </html> You do not need to worry about the details of the <meta> element. 1-18
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>cs125</title> </head> <body> This course is fun! </body> </html> Let s fix our example page 1-19
Your first lab, that is, Lab 0 All you have to do (for part 1 of the lab) is modify the parts in red: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>home page of [type your first and last name here]</title> </head> <body> <h3>sir Timothy John "Tim" Berners-Lee</h3> <img src="me.jpg" alt="a picture of Tim Berners-Lee"> </body> </html> Note that meta and img are void elements. 1-20