Upload
gary-craig
View
214
Download
1
Embed Size (px)
Citation preview
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
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