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
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
Overview: Course Topics
• Topics include:
 HyperText Markup Language (HTML)
 Example1
 Example2
 Cascading Style Sheets (CSS)
 Example
 Common Gateway Interface (CGI) scripting with
 Example
 Client-side scripting with JavaScript (optional)
 Example
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
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
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
• Book “Johnson”
• Optional:
 The Web Wizard's Guide to JavaScript, by Steven
 The Web Wizard's Guide to Web Design, by James
Overview: Course Resources
• Homepage
• Mailing list
 No official mailing list
 Send emails to instructor directly
Overview: Assessment
• The course grade will be computed as
 Homework:
 Midterm Exam:
 Final Project:
• No make-up exams nor extra credit
Overview: Contact Info.
Office Hours
Xuehai Zhang
Ry 177,
Cubicle #3
By appointment
(773) 8344416
[email protected]
A history of Internet
• Refer to the Internet History Web page at
Timeline starts from 1962
Timeline ends in 1992
 the Internet has over 7,500 networks and one million
 computers are nine orders (33MHZ) of magnitude
 network bandwidth is twenty million times greater
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
ARPAnet: Years of Growth
Bell lab releases UNIX system
Telnet protocol
First email delivery
Bob Metcalfe’s PhD thesis outlines the
design of Ethernet
FTP (file transport protocol)
TCP (transmission control protocol)
specified by Cerf and Kahn
Berkley UNIX incorporates TCP/IP
protocols and UUCP (unix to unix copy) for
system to use dial-up connections
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
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.
NSFNet: Total Victory
• 1989
ARPANet dissolved. NSFNet upgrades
backbone to T1 (1.54Mbps). NSFNet contains
100,000 nodes. World Wide Web proposed by Tim
• 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
• 1992
Internet established (networks over 7500,
computers over 1,000,000). MOSAIC released.
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:
 How to find the IP address of my computer?
• Since numbers are difficult to remember, the
Internet evolved DNS addresses
Characteristics of the Internet
• A DNS address (
consists of:
 Domain name for organizations (
• 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
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
Uniform Resource Locator
• 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:
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
HTTP Transaction
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
Introduction to HTML
• HyperText Markup Language
 The authoring language to create Web
 hypertext: enhanced texts and links between
 markup: uses tags to specify structure,
layout, and other extra information
 language: you must learn the syntax and
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
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
A Web Page Structure
(insert text for the browser’s title bar here)
(insert visible Web page elements here)
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
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
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
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
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
A Complicated Web Page
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
• 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)
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:
• E.g.: paragraphsample1.html
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
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
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
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>
Horizontal rules
• <hr></hr>
 Rendered as a line that runs horizontally across your
 Useful when you need to separate sections on your
• Attributes and values:
align = “left”, “right”, “center”
width = “n” or “n%”
size = “n” (thickness, in pixels)
noshade (turns off 3d effect)
• Example: horrule.html
(not for grading purpose)
• Request a CS account ASAP
• 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

Introduction to Programming the WWW I