Introduction to Programming the WWW I

Introduction to Programming the WWW I

CMSC 10100-1

Summer 2004

Lecture 1

2

Today’s TopicsToday’s Topics

• Course overview

• Introduction to the Internet and WWW

• Introduction to HTML, HTML elements

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)

Example1 Example2

Cascading Style Sheets (CSS) Example

Common Gateway Interface (CGI) scripting with Perl

Example Client-side scripting with JavaScript (optional)

Example

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• Chap 1 Introductions• Chap2 Writing code

7

Overview: TextbooksOverview: Textbooks• Required:

The Web Wizard's Guide to HTML, by Wendy Lehnert• Book “Lehnet”

The Web Wizard's Guide to DHMTL and CSS, by Steven Estrella• Book “Estrella”

Elements of Programming with Perl, by Andrew Johnson• Book “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/summer/10100-1/

• Mailing list No official mailing list Send emails to instructor directly

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, Cubicle #3

By appointment (773) 834-4416

hai@cs.uchicago.edu

11

A history of InternetA history of Internet

• Refer to the Internet History Web page at www.computerhistory.org

• Timeline starts from 1962

• Timeline ends in 1992 the Internet has over 7,500 networks and one million

hosts computers are nine orders (33MHZ) of magnitude

faster network bandwidth is twenty million times greater

12

Early years of Internet Early years of Internet

• 1960’s: DoD wanted large-scale network data communication programs support robust

• has no single point of failure

• ARPAnet: 1969 connected 4 super-computers using network control

protocol (NCP) packet-switched network only for ARPA-related research

13

ARPAnet: Years of GrowthARPAnet: Years of Growth

• 1970 Bell lab releases UNIX system• 1971 Telnet protocol• 1972 First email delivery• 1973 Bob Metcalfe’s PhD thesis outlines the design

of Ethernet• 1973 FTP (file transport protocol)• 1974 TCP (transmission control protocol) specified

by Cerf and Kahn• 1976 Berkley UNIX incorporates TCP/IP protocols

and UUCP (unix to unix copy) for system to use dial-up connections

14

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

15

NSFNet: Building the NetworkNSFNet: 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.

16

NSFNet: Total VictoryNSFNet: Total Victory

• 1989 ARPANet dissolved. NSFNet upgrades backbone to T1 (1.54Mbps). NSFNet contains 100,000 nodes. World Wide Web proposed by Tim Berners-Lee

• 1991 WAIS by Kahle of Thinking Machines and Gopher by Linder and McCahill of University of Minnesota are released. NSFNet backbone upgrades to T3 (44 Mbps). HTTP version 0.9 released.

• 1992 Internet established (networks over 7500, computers over 1,000,000). MOSAIC released.

17

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 Example: 128.135.197.76 How to find the IP address of my computer?

• Since numbers are difficult to remember, the Internet evolved DNS addresses

18

Characteristics of the InternetCharacteristics of the Internet

• A DNS address (abyss.cs.uchicago.edu) consists of: Domain name for organizations (cs.uchicago.edu)

• institutional site name (cs.uchicago)• top-level domain name (edu)

host name for individual machines (abyss)

• Domain Name Service (DNS) A system (protocol) translates domain names into IP

addresses

19

World Wide Web (Web)World Wide Web (Web)

• The WWW is not the Internet• It is an application to share and access Web

documents on top of the Internet Other applications: email, FTP, newsgroups, instant

messaging, etc.

• WWW uses HyperText Transfer Protocol (HTTP) to transmit data Protocols for other Internet applications?

• Web documents (Web pages) are formatted in HyperText Markup Language

20

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 (optional)• A filename

• Example: http://www.cs.uchicago.edu/courses/index.html

21

Client/Server Model of The Web

Client/Server Model of The Web

• Client/Server model Client: information consumer Server: information provider Work together to provide services

• WWW: Client: your Web browser Server: Web server (Web services)

• Counterpart of C/S model: peer-to-peer (P2P) model Napster, Gnutella, Morpheus,

KaZaA, etc

22

HTTP Transaction HTTP Transaction

http://www.cs.uchicago.edu/courses/index.html

…

www.cs.uchicago.edu

23

Web Page DisplaysWeb Page Displays

• All browsers are designed to display .html and .htm files

• Web page authors cannot completely control their page displays Browsers have to rework their page displays

whenever a browser window is resized Web pages can look different on different computers

• Users uses different typeface

• Web page authors do have some control and can even make a few non-negotiable demands HTML

24

Introduction to HTMLIntroduction to HTML

• HyperText Markup Language The authoring language to create Web

documents hypertext: enhanced texts and links between

documents markup: uses tags to specify structure,

layout, and other extra information language: you must learn the syntax and

semantics

25

HTML ElementsHTML Elements

• HTML formatting commands to control Web page displays and formatting

• An HTML element is a block of text with special syntax and it contains Tags

• Will not show in browser but define the structure and layout of the content

• Tags often come in pairs (starting tag and ending tag) Example: <HTML> </HTML>

• Note: some tags don’t need ending tag and some don’t have ending tag (stand-alone tags)

Content

• HTML elements may be nested

26

Element attributesElement attributes

• Properties of HTML elements• Each consists of a name and value

Format: name=“value” Default values are assumed if none given Note: some attributes don’t need value part

• 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

27

A Web Page StructureA Web Page Structure

<html><head>

<title> (insert text for the browser’s title bar

here)</title>

</head><body>

(insert visible Web page elements here)</body>

</html>

28

The First HTML PageThe 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

29

Colors in HTMLColors in HTML

• Colors can be defined using color names and color values

• Color names Most browsers recognize a list of text names• aqua, black, blue, green, red, etc• See book Lehnert page 43 for a list

30

Colors in HTML (cont’d)Colors in HTML (cont’d)

• Color values Using a hexadecimal notation for the combination of

Red, Green and Blue (RGB) Hexadecimal notation

• Base 16 instead of 10 (uses 0 - 9 plus A - F) “FF” = 15 * 16 + 15 * 1 = 255; “13” = 1 * 16 + 3 = 19

• Use “#” followed by three two-digit numbers in sequence for a color

red = #ff0000

Prefer to use 216 “Web safe” colors • They are fairly consistent across platforms• Check 216 Web-safe color table or book Lehnert last page

31

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

• Examples HelloWorld1.html HellowWorld2.html

32

Element ClassificationElement Classification

• HTML classifies elements appearing in body element into two categories based on content model and formatting Block-level elements

• Contain inline elements and other block-level elements• Begin on a new line when rendered• Ref: HTML 4.0 block-level elements

Inline elements• Contain texts and other inline elements• Don’t begin on a new line when rendered• Ref: HTML 4.0 Inline elements

33

A Complicated Web Page Structure

A Complicated Web Page Structure

34

Division ElementDivision Element

• <div></div> A block-level element to define logical

divisions in your Web page Used in conjunction with align attribute to

format that section of your page• div.html• div1.html

In CSS, it gives you the ability to name certain sections so that you can affect them with style sheets

35

HeadingsHeadings

• Headings are used to indicate structure for a document by providing titles or descriptions of the material following

• There are six levels of heading tags, denoted <h1></h1> through <h6></h6> Look at: allheadings.html Note some browser-dependence

• Example: headsample1.html headsample2.html (alignment attribute)

36

Paragraph ElementsParagraph Elements

• Division and headings break up sections of documents

• Each section can be broken into more than one paragraph by the <p></p> tag

• Paragraphs have the align attribute: “left”,“center”,“right”

• E.g.: paragraphsample1.html

37

A noteA note

• In our first Web page (helloworld.html), we just had text sitting inside <body></body> but not inside a paragraph

• In paragraphsample1.html, we put all the text inside <p></p> tags

• This is preferable: Conforms to “strict” rules Makes adding formatting easier later

38

Line BreaksLine Breaks

• Browsers automatically wrap text

• You can force the end a line without ending a paragraph by using <br>

• This is a stand-alone tag No </p>

• Example: linebreak.html

39

Block quotesBlock quotes

• <blockquote></blockquote> defines a block quotation Sets off a quotation, important note, etc Usually renders text as an indented block

• May contain block-level elements(<p>) but may not be contained within a paragraph

• Example: blockquote.html

40

Preformatted textPreformatted text

• <pre></pre> Renders with line breaks corresponding to

source file Useful for putting in “visual” poetry or

computer code Typically appears in a monospaced font

• Example: Preexample1.html Same page without <pre>

41

Horizontal rulesHorizontal rules

• <hr></hr> Rendered as a line that runs horizontally across your

page Useful when you need to separate sections on your

page

• Attributes and values: align = “left”, “right”, “center” width = “n” or “n%” size = “n” (thickness, in pixels) noshade (turns off 3d effect)

• Example: horrule.html

42

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

• Send me an email with your full name and your CS account name

• Read the following Web page Introduction to telnet, ftp, SSH and SCP