Post on 21-Jan-2016
Introduction to Programming the WWW I
Introduction to Programming the WWW I
CMSC 10100-1
Winter 2004
Lecture 1
2
Today’s TopicsToday’s Topics
• Course overview
• Introduction to the Internet and WWW
• The Client/server model of the Web
• Introduction to HTML
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
20
HTTP Transaction HTTP Transaction
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
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
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
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>
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>
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
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
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
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”