Download html

Introduction to Programming
the WWW I
CMSC 10100-1
Summer 2004
Lecture 1
Today’s Topics
• Course overview
• Introduction to the Internet and WWW
• Introduction to HTML, HTML elements
2
Overview: 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
3
Overview: 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
4
Overview: 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
5
Overview: 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
6
Overview: 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
7
Overview: Course Resources
• Homepage
 http://www.classes.cs.uchicago.edu/classes/ar
chive/2004/summer/10100-1/
• Mailing list
 No official mailing list
 Send emails to instructor directly
8
Overview: Assessment
• The course grade will be computed as
follows:
 Homework:
 Midterm Exam:
 Final Project:
30%
30%
40%
• No make-up exams nor extra credit
assignments
9
Overview: Contact Info.
Name
Role
Office
Office Hours
Phone
Email
Xuehai Zhang
Instructor
Ry 177,
Cubicle #3
By appointment
(773) 8344416
[email protected].
edu
10
A 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
11
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
12
ARPAnet: 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
13
ARPAnet: The Final Years
• 1979
USENET established between
Duke and UNC by Truscott, Bellovin, Ellis
• 1982 TCP/IP standard finalized
• 1983 ARPANet splits into ARPANet and
MILNet. TCP/IP replaces NCP
• 1984 DNS (domain name server)
released. ARPANet contains 1000 nodes
14
NSFNet: Building the Network
• 1986
NSFNet formed to link 5 university
super-computers. 56Kbps backbone with
regional networks
• 1987 APRANet and NSFNet contain
10,000 nodes
• 1988 IRC (Internet relay chat) released
by Jarkko Oikarinen.
15
NSFNet: 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.
16
Characteristics 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
17
Characteristics 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
18
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
19
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
20
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: peerto-peer (P2P) model
 Napster, Gnutella, Morpheus,
KaZaA, etc
21
HTTP Transaction
…
http://www.cs.uchicago.edu/courses/index.html
www.cs.uchicago.edu
22
Web 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
23
Introduction 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
24
HTML 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
25
Element 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
26
A 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>
27
The 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
28
Colors 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
29
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
30
Attributes 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
31
Element 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
32
A Complicated Web Page
Structure
33
Division 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
34
Headings
• 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)
35
Paragraph 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
36
A 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
37
Line 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
38
Block 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
39
Preformatted 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>
40
Horizontal 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
41
Assignment
(not for grading purpose)
• Request a CS account ASAP

https://www.cs.uchicago.edu/info/services/ac
count_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
42