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”