introduction to programming the www i cmsc 10100-1 winter 2004 lecture 1
TRANSCRIPT
![Page 1: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/1.jpg)
Introduction to Programming the WWW I
Introduction to Programming the WWW I
CMSC 10100-1
Winter 2004
Lecture 1
![Page 2: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/2.jpg)
2
Today’s TopicsToday’s Topics
• Course overview
• Introduction to the Internet and WWW
• The Client/server model of the Web
• Introduction to HTML
![Page 3: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/3.jpg)
3
Overview: A Brief IntroductionOverview: A Brief Introduction
• What is this course about? This course teaches the basics of building
and maintaining a site on the World Wide Web. We discuss Internet terminology and how the Internet and its associated technologies work
![Page 4: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/4.jpg)
4
Overview: Course TopicsOverview: Course Topics
• Topics include: HyperText Markup Language (HTML) Cascading Style Sheets (CSS) Common Gateway Interface (CGI) scripting with
Perl Client-side scripting with JavaScript
![Page 5: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/5.jpg)
5
Overview: ObjectivesOverview: Objectives
• By the end of this course you could: Design and maintain your own Web site Study other Web technologies (other scripting
languages, incorporating more advanced multimedia, etc.)
Keep up with emerging and developing standards for Web programming
Interact with Web programmers in a professional setting
![Page 6: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/6.jpg)
6
Overview: PrerequisitesOverview: Prerequisites
• No official prerequisites
• Prior knowledge of programming languages is helpful Start reading the Perl textbook if you do not
have any experience with programming
![Page 7: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/7.jpg)
7
Overview: TextbooksOverview: Textbooks
• Required: The Web Wizard's Guide to HTML, by Wendy Lehnert The Web Wizard's Guide to DHMTL and CSS, by
Steven Estrella Elements of Programming with Perl, by Andrew
Johnson
• Optional: The Web Wizard's Guide to JavaScript, by Steven
Estrella The Web Wizard's Guide to Web Design, by James
Lengel
![Page 8: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/8.jpg)
8
Overview: Course ResourcesOverview: Course Resources
• Homepage http://www.classes.cs.uchicago.edu
/classes/archive/2004/winter/10100-1/01/
• Mailing list http://mailman.cs.uchicago.edu/mailman/
listinfo/cmsc10100-1
![Page 9: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/9.jpg)
9
Overview: AssessmentOverview: Assessment
• The course grade will be computed as follows: Homework: 30% Midterm Exam: 30% Final Project: 40%
• No make-up exams nor extra credit assignments
![Page 10: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/10.jpg)
10
Overview: Contact Info.Overview: Contact Info.
Name Role Office Office Hours
Phone Email
Xuehai Zhang
Instructor Ry 177, Cubile #3
By appointment (773) 834-4416
hai@cs
Ioan Raicu TA 028 Hinds TBA N/A iraicu@cs
Gohar Margaryan
TA TBA TBA (773) 702-6614
goharik@ yandex.ru
![Page 11: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/11.jpg)
11
Pre-history of Internet Pre-history of Internet
• 1960’s: DoD wanted large-scale network communicated data programs have no single point of failure
• ARPAnet: 1969 connected 4 super-computers using network
control protocol (NCP) only for ARPA-related research
![Page 12: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/12.jpg)
12
ARPAnet: Years of GrowthARPAnet: Years of Growth
• 1973Bob Metcalfe’s PhD thesis outlines the design of Ethernet
• 1973FTP (file transport protocol)
• 1974TCP (transmission control protocol) specified by Cerf and Kahn
• 1976UUCP (unix to unix copy) distributed by AT&T with its UNIX system
![Page 13: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/13.jpg)
13
ARPAnet: The Final YearsARPAnet: The Final Years
• 1979USENET established between Duke and UNC by Truscott, Bellovin, Ellis
• 1982TCP/IP standard finalized
• 1983ARPANet splits into ARPANet and MILNet. TCP/IP replaces NCP
• 1984DNS (domain name server) released. ARPANet contains 1000 nodes
![Page 14: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/14.jpg)
14
NSFNet: Building the Network
NSFNet: Building the Network
• 1986NSFNet formed to link 5 university super-computers. 56Kbps backbone with regional networks
• 1987APRANet and NSFNet contain 10,000 nodes
• 1988IRC (Internet relay chat) released by Jarkko Oikarinen
![Page 15: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/15.jpg)
15
NSFNet: Total VictoryNSFNet: Total Victory
• 1989ARPANet dissolved. NSFNet Upgrades backbone to T1 (1.54Mbps). NSFNet contains 100,000 nodes
• 1991WAIS (wide area information servers) by Kahle of Thinking Machines and Gopher by Linder and McCahill of University of Minnesota are released
• 1993Internet
![Page 16: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/16.jpg)
16
Characteristics of the InternetCharacteristics of the Internet
• Not a computer network Network of networks Connected by TCP/IP protocols
• IP addresses Set of four integers uniquely identifying each node
• Domain names Most nodes also have text names Name servers convert between text and numbers
![Page 17: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/17.jpg)
17
Characteristics of the InternetCharacteristics of the Internet
• A DNS address (abyss.cs.uchicago.edu) consists of: Hostname (abyss) Domain name (cs.uchicago.edu)
• The domain name consists of: institutional site name (cs.uchicago) top-level domain name (edu)
• DNS An Internet service that translates domain names into
IP addresses
![Page 18: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/18.jpg)
18
World Wide WebWorld Wide Web
• The WWW is not the Internet
• It is an application that runs on the Internet Other applications: email, FTP, newsgroups
• Web = hypertext + multimedia Original Web browsers were only hypertext Hyperlinks make documents interconnected
• WWW obeys the client/server architecture and HyperText Transfer Protocol (HTTP)
• Resources are identified by URLs
![Page 19: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/19.jpg)
19
Client/Server Model of The Web
Client/Server Model of The Web
• Client: information consumer
• Server: information provider
• Work together to provide services
• Example: Web server:
www.cs.uchicago.edu Client: your Web browser
![Page 20: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/20.jpg)
20
HTTP Transaction HTTP Transaction
![Page 21: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/21.jpg)
21
Uniform Resource Locator (URL)
Uniform Resource Locator (URL)
• All Web pages are addressed with URLs
• Format: protocol:address protocol may be
• ftp, http, mailto, telnet, etc
address specifies• A server name• A directory path• A filename
• Example: http://www.cs.uchicago.edu/courses/index.html
![Page 22: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/22.jpg)
22
Web Page DisplaysWeb Page Displays
• All browsers are designed to display .html and .htm files• Browsers have to rework their page
displays whenever a browser window is resized• Web pages can look a little different on
different computers• Web page authors cannot completely
control their page displays
![Page 23: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/23.jpg)
23
Introduction to HTMLIntroduction to HTML
• Hypertext Markup Language backbone of Web hypertext: contains links between documents markup: uses tags to specify formatting, extra
information language: you must learn the syntax and
semantics HTML stored as pure text: not proprietary
format
![Page 24: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/24.jpg)
24
HTML ElementsHTML Elements
• HTML formatting commands control Web page displays and formatting is achieved with HTML elements
• HTML elements are blocks of text with special syntax
• HTML elements consists of tags and content Strict requirements on tag syntax
• Elements may be nested e.g. <head></head> and <body></body> are
nested inside <html></html>
![Page 25: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/25.jpg)
25
A HTML TagTemplateA HTML TagTemplate
<html><head>
<title> (insert text for the browser’s title bar here)</title>
</head><body>
(insert visible Web page elements here)</body>
</html>
![Page 26: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/26.jpg)
26
Your First HTML PageYour First HTML Page
• All HTML documents begin and end with the tags <html> and </html>
• Contained in these tags are two elements: <head></head> (the head)
• contains <title></title> tag to give the title to the browser window
<body></body> (the body)• The material inside gets displayed in the browser window
• Our first Web page: HelloWorld.html
![Page 27: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/27.jpg)
27
Element attributesElement attributes
• Properties of HTML elements
• Each consists of a name and value Format: name=“value” Default values are assumed if none given
• Quotation marks: required in HTML only if value has more than
one word (e.g. some font names) required always in XML, XHTML, so use them
![Page 28: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/28.jpg)
28
Attributes of body tagAttributes of body tag
• bgcolor To designate the browser window background color Value is a color name or a RGB triplet
• background To designate the image placed into the background of the document Value is the URL of the image
• text To designate the text color of the document Value is a color name or a RGB triplet
• link, vlink, and alink To designate the states of the hyperlinks of the document Value is a color name or a RGB triplet
• Example: HelloWord1.html
![Page 29: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 1](https://reader035.vdocuments.site/reader035/viewer/2022062315/5697c0121a28abf838ccc435/html5/thumbnails/29.jpg)
29
Assignment (not for grading purpose)
Assignment (not for grading purpose)
• Request a CS account ASAP https://www.cs.uchicago.edu/info/services/a
ccount_request
• Enroll online once you have your account http://people.cs.uchicago.edu/~hai/courses/c
msc10100/cgi-bin/register.cgi
• Read “Introduction to telnet, ftp, SSH and SCP”