How the World Wide Web works UC Santa Cruz CMPS 10 – Introduction to Computer Science 9 May 2011.

Slides:



Advertisements
Similar presentations
Web development  World Wide Web (web) is the Internet system for hypertext linking.  A hypertext document (web page) is an online document. It contains.
Advertisements

CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.
DNS – HTTP – DHTML - CSS ICW Lecture 5 Hasan Qunoo.
Web applications. Javascript. Web 2.0: The dynamic, read-write web UC Santa Cruz CMPS 10 – Introduction to Computer Science
CIS101 Introduction to Computing Week 05. Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML.
CIS101 Introduction to Computing
World Wide Web1 Applications World Wide Web. 2 Introduction What is hypertext model? Use of hypertext in World Wide Web (WWW) – HTML. WWW client-server.
Tutorial 1 Developing a Basic Web Page
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Creating Web Pages Getting Started. Overview What Web Pages Are How Web Pages are Formatted Putting Graphics on Web Pages How Web Pages are Linked Linking.
Emergence of the internet. Basics of internetworking UC Santa Cruz CMPS 10 – Introduction to Computer Science
IST 221 Internet Concepts and Applications Internet, WWW and HTML 1.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction 2: Internet, Intranet, and Extranet J394 – Perancangan Situs Web Program Sudi Manajemen Universitas Bina Nusantara.
Computer Science 103 Chapter 2 HyperText Markup Language (HTML)
1 The World Wide Web. 2  Web Fundamentals  Pages are defined by the Hypertext Markup Language (HTML) and contain text, graphics, audio, video and software.
Developing a Basic Web Page with HTML
CORE 2: Information systems and Databases HYPERTEXT/ HYPERMEDIA.
HTML CS1315 Fall What You Need to Get Started A *simple* text editor to write HTML – Windows: notepad – Mac: textedit (be sure to pick Format 
Chapter 14 Introduction to HTML
CIS101 Introduction to Computing Week 06. Agenda Your questions Excel Exam during second hour Our status after the snow day Introduction to the Internet.
Introduction to HTML. What is a Web site? A collection of "pages" or files linked together and available on the World Wide Web What do you need to create.
UNDERSTANDING WEB AND WEB PROJECT PLANNING AND DESIGNING AND EFFECTIVE WEBSITE Garni Dadaian.
Computer Science 101 HTML. World Wide Web Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly.
1 Networks and the Internet A network is a structure linking computers together for the purpose of sharing resources such as printers and files Users typically.
Chapter 16 The World Wide Web Chapter Goals ( ) Compare and contrast the Internet and the World Wide Web Describe general Web processing.
INFORMATION TECHNOLOGY IN BUSINESS AND SOCIETY SESSION 7 – THE WEB SEAN J. TAYLOR.
Chapter 16 The World Wide Web. 2 The Web An infrastructure of information combined and the network software used to access it Web page A document that.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
Internet Concept and Terminology. The Internet The Internet is the largest computer system in the world. The Internet is often called the Net, the Information.
Website Development & Management Creating Web Pages CIT Fall Instructor: John Seydel, Ph.D.
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 1 Creating Effective Web Pages Creating HTML Documents Tutorial 8.
1 What is HTML? Standardized codes Web pages SGML Descriptive markup Tags.
Chapter 8 Introduction to HTML and Applets Fundamentals of Java.
Chapter 13. Applets and HTML HTML Applets Computer Programming with JAVA.
Web Design 3080 – Week 2 More Fun With Delicious.com Setting up a ‘network’. 1.Go to Delicious.com and sign up for a personal account 2.Once your account.
Lesson 7 – World Wide Web. What is the World Wide Web?  The content of the worldwide web is held on individual web pages gathered together to form websites.
1 John Magee 9 November 2012 CS120 Lecture 17: The World Wide Web and HTML Web Publishing.
CA Professional Web Site Development Class 2: Anatomy of a Web Site and Web Page & Intro to HTML.
XHTML By Trevor Adams. Topics Covered XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags)
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
Introducing the World Wide Web Internet- a structure made up of millions of interconnected computers whose users communicate with each other and share.
CPSC 203 Introduction to Computers Lab 66 By Jie Gao.
HTML BTEC National in Computing Section5. Create Information “HTML: defining HTML, discussing HTML uses and demonstrating HTML basics, HTML structure…..
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 4 Applets Cop Why Applets? WWW makes huge information available to anyone with web browser. Web server send web pages and images to your.
Tutorial 1 Developing a Basic Web Page. Objectives Learn the history of the Web and HTML Describe HTML standards and specifications Understand HTML elements.
Website design and structure. A Website is a collection of webpages that are linked together. Webpages contain text, graphics, sound and video clips.
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
LBSC 690 Session 4 Programming. Languages How do we learn a language? Learn by listening Then reading Then writing How do we teach programming? Learn.
Introduction to the World Wide Web & Internet CIS 101.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
CompSci 1 Lecture 2 HTML Webpages. Today’s Topics Basic HTML The basis for web pages “Almost” programming Upcoming Programming Java Reading Great Ideas.
Introduction to Hypertext Markup Language James H. Harrison, Jr., M.D., Ph.D. Center for Biomedical Informatics University of Pittsburgh Medical Center.
Web Design – Week 2 Introduction to website basics Website basics: How the Web Works Client / server architecture Packet switching URL components.
Web Design Terminology Unit 2 STEM. 1. Accessibility – a web page or site that address the users limitations or disabilities 2. Active server page (ASP)
Introduction to HTML Dave Edsall IAGenWeb County Coordinator’s Conference June 30, 2007.
Objectives At the end of this session students will: Define the following terms in two sentences or less Website Web page Browser Html URL Hyperlink Explain.
Finally getting to html and CSS… Tim Berners-Lee, the writer of the software program that makes him the inventor of the WWW, defines the Internet as a.
Introduction to HTML.
4.01 How Web Pages Work.
Sec (4.3) The World Wide Web.
What is HTML? Standardized codes Web pages SGML Descriptive markup
Introduction to XHTML.
Web Page Concept and Design :
Chapter 16 The World Wide Web.
Presentation transcript:

How the World Wide Web works UC Santa Cruz CMPS 10 – Introduction to Computer Science 9 May 2011

UC SANTA CRUZ Homework #3  Will be an assignment working with Context Free Art  Described in class today  Context Free Art is a domain specific programming language for creating computer-generated artwork   Program is freely available, PC/Mac/Linux  Standalone version works in PC labs (BE 109)  In the assignment, you will 1.Take an existing context free art program and modify some of the numbers in it, and then describe the impact on the final artworks generated 2.In the same program, you will add a few new lines to an existing rule, and then describe the impact on the final artworks 3.In the same program, you will add a new duplicate rule, then describe the impact 4.For extra credit, you can write a context free art program that is completely new (from scratch), describe how it works, and give an example of some artwork

UC SANTA CRUZ Homework #3  Assignment due Friday, May 13  Help sessions:  Tuesday, May 10, 3-5pm, E2 307  Thursday, May 12, 4-6pm, location TBD  Assignment details now on web

UC SANTA CRUZ The three key advances of the Web  When Tim Berners-Lee invented the Web, he had to solve three key problems:  Addressing (URL)  How to uniquely identify each web page in a human-friendly way  Presentation (HTML)  How to present the information in a web page to a human reader in a standard way  Transport (HTTP)  How to quickly transmit information from a remote computer to the user’s computer  Especially, how to do this faster than FTP Tim Berners-Lee (1993) These three technologies form the technical pillars of the World Wide Web

UC SANTA CRUZ Development context of the web  When the web was under development, , there was no one dominant internet information system  A collection of systems, including Usenet News, FTP, Gopher  Many different types of machines  PCs and Macs were not typically connected to the Internet  Most users of the Internet were academics on Unix workstations  But, many other kinds of computers existed as well: mainframes, DEC workstations, NeXT machines, etc.  In general, was a challenge to access information uniformly from all computers  A given information system might be accessible from some, but not all types of computer

UC SANTA CRUZ Addressing the internet, circa 1989/1990  Before the web, there was no uniform way to describe a specific information resource  One might say, “Go to the FTP server at ftp.ucsc.edu, login anonymously, then get file /games/rogue.tar”  Worked OK for humans, but,  Hard for computers to understand  Not very compact – what if you wanted to make a list of these?  Or, what if you wanted to embed them in a link in a document?  Ideally, one might want a way of identifying internet resources that includes:  The way to access it (i.e., which protocol? FTP? Gopher? Etc.)  The name of the machine that has the resource (i.e., a domain name like ftp.ucsc.edu)  The local name of the resource – i.e., once you get to a given machine with a given protocol, what identifier (name) should be used to retrieve the resource?

UC SANTA CRUZ URL  Uniform Resource Locator  Uniform: the same format is used in a standard way for identifying all resources on the Internet  Resource: a specific chunk of information available on the internet, or, a specific computational process (e.g., “current temperature”) on the internet  Locator: contains all of the information necessary to retrieve a web resource  A URL should contain, within itself, all of the information necessary to identify and retrieve a specific resource on the internet

UC SANTA CRUZ Significance of the URL  Any web resource can be retrieved using a URL  That is, URLs work at Internet scale  Most hypertext systems prior to the Web did not work at Internet scale: required a significant shift in thinking  Provides a standard way of writing down internet identifiers  Extensible syntax: not limited to just protocols and information systems available when URLs were invented  Has room to grow well into the future  Compact representation  Easy to write down and share with other humans  Easy to embed within computer documents (such as links in HTML)  Could easily map to file system paths, but was not required to exactly map to file system paths.  The web was not intended to be a wide area network file system  In retrospect, URLs have a kind of obvious, inevitable quality. This was not obvious at the time, and several other schemes existed prior to URLs that lacked some of the qualities above.

UC SANTA CRUZ Anatomy of a URL  {scheme}://{scheme-specific part}  Usually:  {scheme}://{domain name}/{local identifier}  For Web URLs:  Scheme = http (i.e., the protocol used to access it, HTTP)  Domain name = the name of the machine holding the web resource  Local identifier  A name that the machine identified by “domain name” understands, and can use to access a specific resource  Often a file name  Not required to be a file name

UC SANTA CRUZ Document formats, circa 1989/90  In 1989/90, there were two main document formats n the PC, Word and WordPerfect  But, these only worked on PCs  Complex document formats. Mostly publically undocumented.  Not really feasible for a single programmer to write a universal viewer for Word or Word Perfect documents.  No Unix support  On Unix, Framemaker, Latex, and text were the main file formats  Framemaker was also complex, like Word, and tied to a specific application  Latex was freely available, but required a compilation step to produce output (too slow for a web browser)  Text was freely available, and rendered quickly, but had limited typographic potential  Fixed width fonts  No choice of fonts, different width fonts, lists, tables, etc.  None of these document formats had built-in hypertext links

UC SANTA CRUZ HTML  In order to create a universal viewer for web resources, a new, simple document language was needed  Through the 1980s, the Standard Generalized Markup Language was in limited use  But, the ideas behind SGML were known to most hypertext system researchers  HTML took SGML, and simplified it  Followed the same syntax, more or less, and created a set of standard tags (elements) for describing simple documents  HTML: Hypertext Markup Language  Hypertext: the language needed to support hypertext linking  Markup: the style of language was a markup language  Textual content has additional annotations added that specify structure and formatting  Language: not a programming language, but a domain-specific document description language

UC SANTA CRUZ Significance of HTML  A simple document format that is  (relatively) easy render to a screen  Can be edited using simple text editors  Is more-or-less human-readable  Relatively space efficient  An open standard  The document format is not owned and controlled by a single for-profit company  Prevents lock-in to a standard where a company might start charging high licensing fees for its use  Implementation of HTML has grown to the point where it is supported by most general purpose computers  Writing a document in HTML means that you don’t have to worry whether people will be able to view it on their computer

UC SANTA CRUZ HTML document structure  Learning HTML is complex, and beyond the scope of a single lecture  A document consists of a metadata portion (the head) and the main content (the body) … metadata goes here, such as the title of the page … … main page content goes here …

UC SANTA CRUZ HTML markup  The general idea of markup is that you add annotations to the core text of a document  The annotations indicate the type of text (i.e., structural markup, such as heading, list item, etc.) or the presentation of the text (italics, bold, etc.) Sample page Chapter 1 heading This is a paragraph. It has sentences. It also has an italicized and a bolded word. HTML elements “mark up” the text in the document Chapter 1 heading This is a paragraph. It has sentences. It also has an italicized and a bolded word.

UC SANTA CRUZ HTTP  HTTP – Hypertext Transfer Protocol  An Internet protocol that is used by Web browsers to retrieve information (web pages, images, etc.) from a remote web server  Key qualities  Much faster than FTP for retrieving Internet resources  Extensible design, permitted web to grow to large scale  See example  net_ubuntu.png