1. A Brief Intro to the Internet

1
1. A Brief Intro to the Internet - Origins
- ARPAnet - late 1960s - Network
reliability - For ARPA-funded research
organizations - BITnet, CSnet - late 1970s
early 1980s - email and file transfer for
other institutions - NSFnet - 1986 -
Originally for non-DOD funded places -
Initially connected five supercomputer centers
- By 1990, it had replaced ARPAnet for non-
military uses - Soon became the
network for all - NSFnet eventually became
known as Internet - What the Internet is -
A world-wide network of computer networks -
At the lowest level, since 1982, all connections
use TCP/IP - TCP/IP hides the
differences among devices connected to the
Internet
2
1. A Brief Intro to the Internet (continued) -
Internet Protocol (IP) Addresses - Every node
has a unique numeric address - Form 32-bit
binary number - Organizations are assigned
groups of IPs for their computers -
Domain names - Form host-name.domain-names
- First domain is the smallest last is the
largest - Last domain specifies the type of
organization - Fully qualified domain name -
the host name and all of the domain names
- DNS servers - convert fully qualified
domain names to Ips - Problem By the
mid-1980s, several different protocols had
been invented and were being used on the
Internet, all with different user interfaces
(Telnet, FTP, Usenet, mailto
3
1.2 The World-Wide Web - A possible solution to
the proliferation of different protocols
being used on the Internet - Origins - Tim
Berners-Lee at CERN proposed the Web in
1989 - Purpose to allow scientists to
have access to many databases of
scientific work through their own
computers - Document form hypertext -
Pages? Documents? Resources? - Well call
them documents - Hypermedia - documents with
links to other documents - Web or
Internet? - The Web uses one of the
protocols, http, that runs on the
Internet--there are several others
(telnet, mailto, etc.)
4
1.3 Web Browsers - Mosaic - NCSA (Univ.
of Illinois), in early 1993 - First to use a
GUI, led to explosion of Web use - Initially
for X-Windows, under UNIX, but was ported
to other platforms by late 1993 - Browsers are
clients - always initiate, servers react
(although sometimes servers require
responses) - Most requests are for existing
documents, using HyperText Transfer Protocol
(HTTP) - But some requests are for program
execution, with the output being returned
as a document 1.4 Web Servers - Provide
responses to browser requests, either
existing documents or dynamically built
documents - Browser-server connection is now
maintained through more than one
request-response cycle
5
1.5 URLs - General form
schemeobject-address - The scheme is often
a communications protocol, such as telnet
or ftp - For the http protocol, the
object-address is fully qualified domain
name/doc path - For the file protocol, only the
doc path is needed - Host name may include a
port number, as in zeppo80 (80 is the
default, so this is silly) - URLs cannot
include spaces or any of a collection of other
special characters (semicolons, colons, ...) -
The doc path may be abbreviated as a partial
path - The rest is furnished by the server
configuration - If the doc path ends with a
slash, it means it is a directory - If no
directory name is included, but the URL ends
with a slash, the server looks for index.html
6
1.6 Multipurpose Internet Mail
Extensions - Originally developed for email -
Used to specify to the browser the form of a
file returned by the server (attached by the
server to the beginning of the document) -
Type specifications - Form
type/subtype - Examples text/plain,
text/html, image/gif,
image/jpeg - Server gets type from the
requested file names suffix (.html implies
text/html) - Browser gets the type explicitly
from the server - Experimental types -
Subtype begins with x- e.g.,
video/x-msvideo - Experimental types require
the server to send a helper application or
plug-in so the browser can deal with the
file

7
1.7 The HyperText Transfer Protocol - The
protocol used by ALL Web communications -
Request Phase - Form HTTP method
domain part of URL HTTP ver. Header
fields blank line Message body
- An example of the first line of a request
GET /cs.uccp.edu/degrees.html
HTTP/1.1 - Most commonly used methods
GET - Fetch a document POST - Execute the
document, using the data in
body HEAD - Fetch just the header of the
document PUT - Store a new document on the
server DELETE - Remove a document from the
server - Header fields for requests -
Accept image/jpeg - subtype can be an
8
1.7 The HyperText Transfer Protocol
(continued) - Response Phase - Form
Status line Response header fields
blank line Response body - Status
line format HTTP version status code
explanation - Example HTTP/1.1 200 OK
(Current version is 1.1) - Status code
is a three-digit number first digit
specifies the general status 1 gt
Informational 2 gt Success 3
gt Redirection 4 gt Client error
5 gt Server error - The header field,
Content-type, is required
9
1.8 The Web Programmers Toolbox - HTML -
To describe the general form and layout of
documents - Not the first computer markup
language (LaTeX) - An HTML document is a mix
of content and controls - Controls
are tags and their attributes - Tags
often delimit content and specify
something about how it should be arranged in
the document - Attributes provide
additional information about the content
of a tag - Tools for creating HTML
documents - HTML editors - make document
creation easier - Shortcuts to typing
tag names, spell-checker, - WYSIWYG HTML
editors - Need not know HTML to create
HTML documents - But the
quality of the documents sometimes is
poor and may use non-standard tags
10
1.8 The Web Programmers Toolbox
(continued) - Overview of Perl -
Provides computation for documents, through
CGI - CGI provides a standard means of
communication between an HTML document
being displayed on a browser and the software
resources on the server - Perl is good
for CGI programming because - Direct
access to operating systems functions -
Powerful character string pattern-matching
operations - Access to database
systems - Perl is highly platform
independent, and has been ported to all
common platforms - Perl is not just for
CGI
11
1.8 The Web Programmers Toolbox
(continued) - Overview of JavaScript - An
alternative to CGI, where the computation is
done on the client - Less powerful than
Perl, but more focussed on HTML documents
- Only related to Java through syntax -
Dynamic typing, not really object-oriented -
Provides a way to access elements of HTML
documents and dynamically change them -
Typically embedded in HTML documents -
Overview of Java - General purpose
object-oriented programming language
- Based on C, but simpler and safer - Our
focus is on applets and servlets,
12
1.8 The Web Programmers Toolbox
(continued) - Plug ins - Integrated into
tools like word processors, effectively
converting them to WYSIWYG HTML editors
- Filters - Convert documents in other formats
to HTML - Advantages of both filters and
plug-ins - Existing documents produced
with other tools can be converted to HTML
documents - Use a tool you already know to
produce HTML - Disadvantages of both filters
and plug-ins - HTML output of both is not
perfect - must be fine tuned - HTML
may be non-standard - You have two versions
of the document, which are difficult to
synchronize
13
Chapter 2

• Sebesta
• Programming the
• World Wide Web

14
2.1 Origins and Evolution of HTML - Derived
from SGML - Original intent General layout of
documents that could be displayed by a wide
variety of computers - Recent versions -
HTML 4.0 - 1997 - Introduced many new
features and deprecated many older
features - HTML 4.01 - 1998 - A cleanup of
4.0 - XHTML 1.0 - Just 4.01 modified to
fit the XML syntax - Well stick to nearly
all of this syntax 2.2 Basic Syntax -
Elements are defined by tags (markers) - Tag
format - Opening tag ltname /gt -
Closing tag lt/namegt
15
2.2 Basic Syntax (continued) - The content of a
tag appears between its opening tag and its
closing tag - Not all tags have content -
If a tag has no content, its form is ltname /gt -
If a tag has attributes, they appear between its
name and the right bracket (later) - Tag
names and attribute names must be written in
lowercase letters - Every tag that has content
must have a closing tag - Tags must be properly
nested - Comment form lt!-- --gt - Browsers
ignore comments, unrecognizable tags, line
breaks, multiple spaces, and tabs - Tags are
suggestions to the browser, even if they are
recognized by the browser
16
2.3 Standard HTML Document Structure - lthtmlgt,
ltheadgt, lttitlegt, ltbodygt are required - All
four can have attributes, but well ignore them
for now - The whole document must have
lthtmlgt as its root - A document consists of a
head and a body - The head has information
about the document - Content of the ltheadgt
tag - The body has the content of the
document - Content of the ltbodygt tag - The
lttitlegt tag is used to give the document a
title, which is normally displayed in the
browsers window title bar (at the top of
the display) - To comply completely with XHTML
1.0, every document must have a DOCTYPE
command, but we do not include them in our
documents - Can confuse some browsers
17
2.3 Standard HTML Document Structure
(continued) lt!-- ch2_1.hmtl An example to
illustrate document form --gt lthtmlgt ltheadgt ltt
itlegt Our first document lt/titlegt lt/headgt ltbodygt G
reetings from your Webmaster! lt/bodygt lt/htmlgt 2
.4 Basic Text Formatting - Text without tags is
displayed in lines, with as many words as
will fit in each line - Paragraphs - The
ltpgt tag breaks the current line and inserts a
blank line - closing tag is required by XHTML
- Meant to enclose paragraphs
18
2.4 Basic Text Formatting (continued) - Line
breaks - The effect of the ltbr /gt tag is the
same as that of ltpgt, except for the blank
line - No closing tag! - Example of
paragraphs and line breaks On the plains of
hesitation ltpgt bleach the bones of countless
millions lt/pgt ltbr /gt who, at the dawn of
victory ltbr /gt sat down to wait, and waiting,
died. -Typical display of this text On
the plains of hesitation bleach the bones of
countless millions who, at the dawn of victory
sat down to wait, and waiting, died.
19
2.4 Basic Text Formatting (continued) -
Headings - Six sizes, 1 - 6, specified with
lth1gt to lth6gt - 1, 2, and 3 use font sizes
that are larger than the default font
size - 4 uses the default size - 5 and 6
use smaller font sizes - Browsers usually put
some vertical space before and after a
heading lt!-- ch2_2.html An example to
illustrate headings --gt lthtmlgt ltheadgt lttitlegt
Headings lt/titlegt lt/headgt ltbodygt lth1gt Aidans
Airplanes lt/h1gt lth2gt The best in used airplanes
lt/h2gt lth3gt "Weve got them by the hangarful"
lt/h3gt lt/bodygt lt/htmlgt

20
2.4 Basic Text Formatting (continued)
- Blockquotes - Content of ltblockquotegt
- To set a block of text off from the normal flow
and appearance of text - Browsers often
indent, and sometimes italicize - Font Styles
and Sizes (can be nested) - Boldface - ltbgt
- Italics - ltigt - Larger - ltbiggt - Smaller
- ltsmallgt - Monospace - ltttgt
21
2.4 Basic Text Formatting (continued)
The ltbiggt sleet ltbiggt in ltbiggt ltigt Crete
lt/igtltbr /gt lies lt/biggt completely lt/biggt
in lt/biggt the street The sleet in
Crete lies completely in the street
- These tags are not affected if they appear
in the content of a ltblockquotegt,
unless there is a conflict (e.g.,
italics) - Superscripts and subscripts
- Subscripts with ltsubgt -
Superscripts with ltsupgt Example
xltsubgt2lt/subgtltsupgt3lt/supgt Display
x23 - All of this font size and font style
stuff can be done with style sheets, but
these tags are not yet deprecated

22
2.4 Basic Text Formatting (continued) -
Horizontal rules - lthr /gt draws a line
across the display, after a line
break 2.5 Images - GIF (Graphic Interchange
Format) - 8-bit color (256 different
colors) - JPEG (Joint Photographic Experts
Group) - 24-bit color (16 million different
colors) - Both used compression, but JPEG
compression is better - Images are
inserted into a document with the ltimg /gt
tag with the src attribute ltimg src
"comets.jpg" /gt - Attribute values must be
delimited with double quotes - Without
a path, the file must be in the directory
with the HTML - If its elsewhere,
provide the path to it
23
2.5 Images (continued) lt!-- Ch2_4.html
An example to illustrate an image
--gt lthtmlgt ltheadgt lttitlegt Images
lt/titlegt lt/headgt ltbodygt lth1gt Aidan's Airplanes
lt/h1gt lth2gt The best in used airplanes lt/h2gt lth3gt
"We've got them by the hangarful" lt/h3gt lth2gt
Special of the month lt/h2gt 1960 Cessna 210 ltbr
/gt 577 hours since major engine overhaulltbr
/gt 1022 hours since prop overhaul ltbr /gtltbr /gt
ltimg src "c210.jpg" /gt ltbr /gt Buy this fine
airplane today at a remarkably low price ltbr
/gt Call 999-555-1111 today! lt/bodygt lt/htmlgt
24
2.5 Images (continued)
25
2.5 Images (continued) - The alt attribute of
ltimg /gt is used to display text for
browsers than cannot display an image
ltimg src "c210a.jpg" alt "(picture
of airplane)" /gt 2.6 Hypertext Links -
Hypertext is the essence of the Web! - Both
links (sometimes called sources) and
targets of links are specified with the anchor
tag (ltagt) - A link is specified with the
href (hypertext reference) attribute of
ltagt - The content of ltagt is the visual link
in the document - If the target is
a whole document (not the one in which
the link appears), the target need not be
specified in the target document
26
2.6 Hypertext Links (continued) lt!--
Ch2_5.html An example to illustrate a link
--gt lthtmlgt ltheadgt lttitlegt Links
lt/titlegt lt/headgt ltbodygt lth1gt Aidan's Airplanes
lt/h1gt lth2gt The best in used airplanes lt/h2gt lth3gt
"We've got them by the hangarful" lt/h3gt lth2gt
Special of the month lt/h2gt 1960 Cessna 210 ltbr
/gt lta href "C210data.html"gt Information on
the Cessna 210 lt/agt lt/bodygt lt/htmlgt
27
2.6 Hypertext Links (continued)
28
2.6 Hypertext Links (continued) - Targets that
are document fragments or parts - In these
cases, the target spot must be marked with
an anchor tag - Target labels can be defined
in many different tags with the id
attribute, as in lth1 id "baskets"gt
Baskets lt/h1gt - The link to an id must be
preceded by a pound sign () If the id is
in the same document, this target could
be lta href baskets"gt
What about baskets? lt/agt - If the link
is in a different document, the document
reference must be included lta href
"myAd.htmlbasketsgt link lt/agt - Style note
links should blend in with the surrounding
text, so reading it without taking the link
should not be made less pleasant - Links can
have images lta href "c210data.html" ltimg
src "smallplane.jpg" /gtgt Info on C210
lt/agt
29
2.7 Lists - Unordered lists - The list is
the content of the ltulgt tag - List elements
are the content of the ltligt tag lth3gt Some
Common Single-Engine Aircraft lt/h3gt ltulgt
ltligt Cessna Skyhawk lt/ligt ltligt
Beechcraft Bonanza lt/ligt ltligt Piper
Cherokee lt/ligt lt/ulgt
- Ordered lists - The list is the content of
the ltolgt tag - Each item in the display is
preceded by a sequence value
30
2.7 Lists (continued) lth3gt Cessna 210 Engine
Starting Instructions lt/h3gt ltolgt ltligt Set
mixture to rich lt/ligt ltligt Set propeller to
high RPM lt/ligt ltligt Set ignition switch to
"BOTH" lt/ligt ltligt Set auxiliary fuel pump
switch to "LOW PRIME" lt/ligt ltligt
When fuel pressure reaches 2 to 2.5
PSI, push starter button lt/ligt lt/olgt
- Definition lists - List is the content
of the ltdlgt tag - Terms being defined
are the content of the ltdtgt tag
- The definitions themselves are the content
of the ltddgt tag
31
2.7 Lists (continued) lth3gt Single-Engine Cessna
Airplanes lt/h3gt ltdl gt ltdtgt 152 lt/dtgt ltddgt
Two-place trainer lt/ddgt ltdtgt 172 lt/dtgt
ltddgt Smaller four-place airplane lt/ddgt ltdtgt
182 lt/dtgt ltddgt Larger four-place airplane
lt/ddgt ltdtgt 210 lt/dtgt ltddgt Six-place
airplane - high performance lt/ddgt lt/dlgt
32
2.8 Tables - A table is a matrix of rows and
columns, each possibly having content -
Each position in a table is called a cell -
Some cells have labels, but most have data - A
table is specified as the content of a lttablegt
tag - A border attribute in the lttablegt tag
specifies a border between the cells - If
border is set to "border", the browsers
default width border is used - The border
attribute can be set to a number, which
will be the border width - Without the
border attribute, the table will have
no lines! - Tables are given titles with the
ltcaptiongt tag, which can immediately follow
lttablegt
33
2.8 Tables (continued) - Each row of a table
is specified as the content of a lttrgt
tag - The row headings are specified as the
content of a ltthgt tag - The contents
of a data cell is specified as the content
of a lttdgt tag lttable border "border"gt
ltcaptiongt Fruit Juice Drinks lt/captiongt
lttrgt ltthgt lt/thgt ltthgt Apple
lt/thgt ltthgt Orange lt/thgt
ltthgt Screwdriver lt/thgt lt/trgt lttrgt
ltthgt Breakfast lt/thgt lttdgt 0
lt/tdgt lttdgt 1 lt/tdgt lttdgt 0
lt/tdgt lt/trgt lttrgt ltthgt
Lunch lt/thgt lttdgt 1 lt/tdgt
lttdgt 0 lt/tdgt lttdgt 0 lt/tdgt
lt/trgt lt/tablegt
34
2.8 Tables (continued)
- A table can have two levels of column labels
- If so, the colspan attribute must be set
in the ltthgt tag to specify that the
label must span some number of
columns lttrgt ltth colspan "3"gt Fruit Juice
Drinks lt/thgt lt/trgt lttrgt ltthgt Orange lt/thgt
ltthgt Apple lt/thgt ltthgt Screwdriver lt/thgt lt/trgt
35
2.8 Tables (continued) - If the rows have
labels and there is a spanning column label,
the upper left corner must be made larger,
using rowspan lttable border "border"gt ltcaptiongt
Fruit Juice Drinks and Meals lt/captiongt
lttrgt lttd rowspan "2"gt lt/tdgt ltth
colspan "3"gt Fruit Juice Drinks lt/thgt
lt/trgt lttrgt ltthgt Apple lt/thgt
ltthgt Orange lt/thgt ltthgt Screwdriver
lt/thgt lt/trgt lt/tablegt
36
2.9 Frames - Frames are rectangular sections of
the display window - Each frame can display a
different document - One common use of frames is
to have a list of links in a left frame and
use the right frame to display the
destination document of the chosen link - The
ltframesetgt tag specifies the number of frames
and their layout in the window - ltframesetgt
takes the place of ltbodygt - Cannot have
both! - ltframesetgt must have either a rows
attribute or a cols attribute, or both
(usually the case) - Default is 1 - The
possible values for rows and cols are
numbers, percentages, and asterisks - A
number value specifies the row height in
pixels - Not terribly useful! - A
percentage specifies the percentage of
total window height for the row - Very useful!
37
2.9 Frames (continued) - An asterisk after
some other specification gives the
remainder of the height of the window -
Examples ltframeset rows "150, 200,
300"gt ltframeset rows "25, 50, 25"gt
ltframeset rows "50, 20, " gt
ltframeset rows "50, 25, 25"
cols "40, "gt - The ltframegt tag specifies the
content of a frame - ltframegt can only appear
in a ltframesetgt - The first ltframegt tag in a
ltframesetgt specifies the content of the
first frame, etc. - Row-major order is
used - Frame content is specified with
the src attribute -
Without a src attribute, the frame will be
empty (such a frame CANNOT be filled later)
- If ltframesetgt has fewer ltframegt tags than
frames, the extra frames are empty
38
2.9 Frames (continued) - Scrollbars are
implicitly included if needed (they are
needed if the specified document will not fit)
- If a name attribute is included, the
content of the frame can be changed
later (by selection of a link in some
other frame) - An example lt!-- ch2_16.html
An example to illustrate frames --gt
lthtmlgt ltheadgt lttitlegt Frames lt/titlegt
lt/headgt ltframeset cols "20, "gt ltframe
src "contents.html /gt ltframe src
"fruits.html" name "descriptions
/gt lt/framesetgt lt/htmlgt
39
2.9 Frames (continued) lt!-- contents.html
The contents of the first frame of
ch2_16.html, which is the table of contents
for the second frame --gt lthtmlgt ltheadgt lttitle
gt Table of Contents Frame lt/titlegt lt/headgt ltbodygt
lth4gt Fruits lt/h4gt ltulgt ltligt lta href
"apples.html" target
"descriptions"gt apples lt/agt ltligt
lta href "bananas.html" target
"descriptions"gt bananas lt/agt ltligt
lta href "oranges.html" target
"descriptions"gt oranges
lt/agt lt/ulgt lt/bodygt lt/htmlgt
40
2.9 Frames (continued)
41
Chapter 3

• Sebesta
• Programming the
• World Wide Web

42
3.1 Introduction - HTML is primarily concerned
with content, rather than style -
However, tags have presentation properties, for
which browsers have default values - The
CSS1 cascading style sheet specification was
developed in 1996 followed by CSS2 in 1998
- Provide the means to control and change
presentation of HTML documents - Not
technically HTML, but can be embedded in
HTML documents - One of the most important
capabilities of style sheets is that they
allow you to impose a standard style on a
whole document, or even a whole collection
of documents - Style is specified for a tag by
the values of its properties - Current
browsers do not implement all of CSS2
43
3.2 Levels of Style Sheets - There are three
levels of style sheets - Inline - specified
for a specific occurrence of a tag and
apply only to that tag - This is
fine-grain style, which defeats the
purpose of style sheets - uniform style -
Document-level style sheets - apply to the
whole document in which they appear -
External style sheets - can be applied to any
number of documents - When more than one
style sheet applies to a specific tag in a
document, the lowest level style sheet has
precedence - In a sense, the browser
searches for a style property spec,
starting with inline, until it finds one
(or there isnt one) - Browsers can ignore
style sheets or use their own default values
for properties
44
3.2 Levels of Style Sheets (continued) - Inline
style sheets appear in the tag itself -
Document-level style sheets appear in the head
of the document - External style sheets are
in separate files, potentially on any server
on the Internet - Written as text files with
the MIME type text/css - A ltlinkgt tag is
used to specify that the browser is to
fetch and use an external style sheet file ltlink
rel stylesheet type "text/css" href
"http//www.wherever.org/termpaper.css"gt lt/linkgt

45
3.3 Style Specification Formats - Format
depends on the level of the style sheet -
Inline - Style sheet appears as the value of
the style attribute - General form
style "property_1 value_1
property_2 value_2
property_n
value_n - Scope of an inline style sheet is
the content of the tag - Document-level
- Style sheet appears as a list of rules that
are the content of a ltstylegt tag -
The ltstylegt tag must include the type attribute,
set to text/css - The list of rules
must be placed in an HTML comment,
because it is not HTML - Comments in the
rule list must have a different form - use
C comments (//)
46
3.3 Style Specification Formats (continued)
- General form ltstyle type
"text/css"gt lt!-- rule list
--gt lt/stylegt - Form of the
rules selector list of
property/values - The selector is a
tag name or a list of tag names,
separated by commas - Examples
h1, h3 p - Each
property/value pair has the form
property value - Pairs are separated
by semicolons, just as in the value
of a ltstylegt tag - External style sheets
- Form is a list of style rules, as in the
content of a ltstylegt tag for
document-level style sheets
47
3.4 Style Classes - Used to allow different
occurrences of the same tag to use different
style specifications - A style class has a
name, which is attached to a tag name -
For example, p.normal property/value
list p.special property/value list -
The class you want on a particular occurrence of
a tag is specified with the class attribute of
the tag - For example, ltp class
"normal"gt ... lt/pgt ... ltp class
"special"gt ... lt/pgt

48
3.4 Style Classes (continued) - A generic
class can be defined if you want a style to
apply to more than one kind of tag - A
generic class must be named, and the name
must begin with a period - Example,
.really-big - Use it as if it were a
normal style class lth1 class
"really-big"gt lt/h1gt ... ltp class
"really-big"gt lt/pgt
49
3.5 Properties Property Values - There are 53
different properties in 6 categories - Fonts
- Colors and backgrounds - Text - Boxes
and layouts - Lists - Tags - Property
Value Forms - Keywords - left, small,
- Not case sensitive - Length - numbers,
maybe with decimal points - Units
px - pixels in - inches cm -
centimeters mm - millimeters pt
- points pc - picas (12 points)
em - height of the letter m x-height -
height of the letter x - No space is
allowed between the number and the
unit specification e.g., 1.5 in is
illegal!
50
3.5 Properties Property Values
(continued) - Percentage - just a
number followed immediately by a
percent sign - URL values -
url(protocol//server/pathname) -
Colors - Color name -
rgb(n1, n2, n3) - Numbers can be
decimal or percentages - Hex form
XXXXXX - Property values are inherited by
all nested tags, unless overriden
- Font Properties - font-family -
Value is a list of font names - browser uses
the first in the list it has -
font-family Arial, Helvetica, Courier
- Generic fonts serif, sans-serif, cursive,
fantasy, and monospace (defined in CSS)
- Browser has a specific font for each
51
3.5 Properties Property Values
(continued) - If a font name has more than
one word, it should be single-quoted
- font-size - Possible values a length
number or a name, such as smaller,
xx-large, etc. - font-style - italic,
oblique (useless), normal - font-weight -
degrees of boldness - bolder, lighter,
bold, normal - font - For specifying a
list of font properties font bolder
14pt Arial Helvetica - Order must be
style, weight, size, name(s)
52
3.5 Properties Property Values (continued)
- Example ch3_1.html) lthtmlgt ltheadgt lttitlegt
Font Properties lt/TITLEgt ltstyle type
"text/css"gt lt!-- / Document-level style
sheet/ p.big font-size 14pt
font-style italic
font-family 'Times New Roman'
p.small font-size 10pt
font-weight bold font-family
'Courier New' --gt
lt/stylegt lt/headgt ltbodygt ltp class "big"gt If a
job is worth doing, its worth doing
right. lt/pgt ltp class "small"gt Two wrongs don't
make a right, but they certainly can get you in a
lot of trouble. lt/pgt lth2 style "font-family
'Times New Roman' font-size 24pt
font-weight bold"gt Chapter 1
Introduction lt/h2gt lth3 style "font-family
'Courier New' font-size 18pt"gt
1.1 The Basics of Computer Networks lt/h3gt lt/bodygt
lt/htmlgt
53
3.5 Properties Property Values (continued)

- List properties - list-style-type -
Unordered lists - Bullet can be a disc
(default), a square, or a circle
- Set it on either the ltulgt or ltligt tag
- On ltulgt, it applies to list items lth3gt
Some Common Single-Engine Aircraft lt/h3gt ltul
style "list-style-type square"gt ltligt
Cessna Skyhawk lt/ligt ltligt Beechcraft
Bonanza lt/ligt ltligt Piper Cherokee lt/ligt
lt/ulgt
54
3.5 Properties Property Values
(continued) - On ltligt, list-style-type
applies to just that item lth3gt Some
Common Single-Engine Aircraft lt/h3gt ltulgt
ltli style "list-style-type disc"gt
Cessna Skyhawk lt/ligt ltli style
"list-style-type square"gt Beechcraft
Bonanza lt/ligt ltli style "list-style-type
circle"gt Piper Cherokee lt/ligt lt/ulgt
55
3.5 Properties Property Values
(continued) - On ordered lists -
list-style-type can be used to change the
sequence values Property value Sequence
type First four decimal Arabic
numerals 1, 2, 3, 4 upper-alpha Uc
letters A, B, C, D lower-alpha
Lc letters a, b, c, d
upper-roman Uc Roman I, II,
III, IV lower-roman Lc Roman
i, ii, iii, iv
56
3.5 Properties Property Values
(continued) lth3gt Aircraft Types lt/h3gt ltol style
"list-style-type upper-roman"gt ltligt
General Aviation (piston-driven engines) lt/ligt
ltol style "list-style-type upper-alpha"gt
ltligt Single-Engine Aircraft lt/ligt ltol
style "list-style-type decimal"gt
ltligt Tail wheel lt/ligt ltligt Tricycle
lt/ligt lt/olgt ltbr /gt ltligt Dual-Engine
Aircraft lt/ligt ltol style "list-style-type
decimal"gt ltligt Wing-mounted engines
lt/ligt ltligt Push-pull fuselage-mounted
engines lt/ligt lt/olgt lt/olgt ltbr /gt
ltligt Commercial Aviation (jet engines) lt/ligt
ltol style "list-style-type upper-alpha"gt
ltligt Dual-Engine lt/ligt ltol style
"list-style-type decimal"gt ltligt
Wing-mounted engines lt/ligt ltligt
Fuselage-mounted engines lt/ligt lt/olgt ltbr
/gt ltligt Tri-Engine lt/ligt ltol
style "list-style-type decimal"gt
ltligt Third engine in vertical stabilizer
lt/ligt ltligt Third engine in fuselage
lt/ligt lt/olgt lt/olgt lt/olgt
57
3.5 Properties Property Values
(continued)
58
3.5 Properties Property Values
(continued) - Alignment of text - The
text-align property has the possible
values, left (the default), center, right, or
justify - Sometimes we want text to flow
around another element - the float
property - The float property has the
possible values, left, right, and none
(the default) - If we have an element we
want on the right, with text flowing on
its left, we use the default text-align
value (left) for the text and the right
value for float on the element we want
on the right
59
3.5 Properties Property Values
(continued) ltimg src "c210.jpg"
style "float right" /gt -- Some text
with the default alignment - left
60
3.5 Properties Property Values
(continued) - Margins - The margins around
an HTML object can be set with margin-left,
etc. - just assign them a length value
ltimg src "c210.jpg " style "float right
margin-left 0.5in margin-bottom 0.5in" /gt
61
3.6 Colors - Color is a problem for the Web for
two reasons 1. Monitors vary widely 2.
Browsers vary widely - There is a set of 16
colors that are guaranteed to be displayable
by all graphical browsers on all color
monitors black 000000 green
008000 silver C0C0C0 lime
00FF00 gray 808080 olive
808000 white FFFFFF yellow
FFFF00 maroon 800000 navy
000080 red FF0000 blue
0000FF purple 800080 teal
008080 fuchia FF00FF aqua
00FFFF - There is a much larger set, the Web
Palette - 216 colors - Use hex color
values of 00, 33, 66, 99, CC, and FF -
Inside back cover of this book has them!
62
3.6 Colors (continued) - The color
property specifies the foreground color
of elements lttable border "5px"gt lttrgt
ltth style "color red"gt Apple lt/thgt
ltth style "color orange"gt Orange lt/thgt
ltth style "color orange"gt Screwdriver
lt/thgt lt/trgt lt/tablegt - The
background-color property specifies the
background color of elements ltp style
"font-size 24 color blue
background-color red"gt To really make it
stand out, use a red background! lt/pgt
63
3.7 The ltspangt and ltdivgt tags - One problem with
the font properties is that they apply to whole
elements, which are often too large -
Solution a new tag to define an element in the
content of a larger element - ltspangt - The
default meaning of ltspangt is to leave the
content as it is - e.g.,
ltpgt Now is the ltspangt best time lt/spangt
ever! lt/pgt - Use ltspangt to apply an
inline style sheet to its content
ltpgt Now is the ltspan style
"font-size 40
font-family Ariel
color red"gt best time lt/spangt ever!
lt/pgt
64
3.7 The ltspangt and ltdivgt tags (continued)
- The ltspangt tag is similar to other HTML tags,
they can be nested and they have id and class
attributes - Another tag that is useful for
style specifications ltdivgt - Used to
create document sections (or divisions) for
which style can be specified - e.g., A
section of five paragraphs for which
you want some particular style
65
Chapter 4

• Sebesta
• Programming the
• World Wide Web

66
4.1 Origins and Uses of Perl - Began in the
late 1980s as a more powerful replacement for
the capabilities of awk (text file processing)
and sh (UNIX system administration) - Now
includes sockets for communications and
modules for OOP, among other things - Now the
most commonly used language for CGI, in part
because of its pattern matching capabilities -
Perl programs are usually processed the same way
as many Java programs, compilation to an
intermediate form, followed by interpretation 4.
2 Scalars and Their Operations - Scalars are
variables that can store either numbers,
strings, or references (discussed later) -
Numbers are stored in double format integers
are rarely used - Numeric literals have the
same form as in other common languages
67
4.2 Scalars and Their Operations
(continued) - Perl has two kinds of string
literals, those delimited by double quotes
and those delimited by single quotes -
Single-quoted literals cannot include escape
sequences - Double-quoted literals can
include them - In both cases, the delimiting
quote can be embedded by preceding it with
a backslash - If you want a string literal
with single-quote characteristics, but dont
want delimit it with single quotes, use qx,
where x is a new delimiter - For double
quotes, use qq - If the new delimiter is a
parenthesis, a brace, a bracket, or a
pointed bracket, the right delimiter must
be the other member of the pair - A null
string can be '' or ""
68
4.2 Scalars and Their Operations
(continued) - Scalar type is specified by
preceding the name with a - Name must
begin with a letter any number of letters,
digits, or underscore characters can follow -
Names are case sensitive - By convention,
names of variables use only lowercase
letters - Names embedded in double-quoted
string literals are interpolated e.g.,
If the value of salary is 47500, the value of
"Jack makes salary dollars per year"
is "Jack makes 47500 dollars per
year" - Variables are implicitly declared - A
scalar variable that has not been assigned a
value has the value undef (numeric value is 0
string value is the null string) - Perl has
many implicit variables, the most common of
which is _
69
4.2 Scalars and Their Operations
(continued) - Numeric Operators -
Like those of C, Java, etc. Operator Associativi
ty , -- nonassociative unary
- right right , /, left binary ,
- left - String Operators - Catenation -
denoted by a period e.g., If the value of
dessert is "apple", the value of
dessert . " pie" is "apple pie" -
Repetition - denoted by x e.g., If the value
of greeting is "hello ", the value
of greeting x 3 is "hello hello
hello "
70
4.2 Scalars and Their Operations
(continued) - String Functions - Functions
and operators are closely related in Perl -
e.g., if cube is a predefined function, it can be
called with either
cube(x) or cube x
Name Parameters Result chomp a string the
string w/terminating newline characters
removed length a string the number of
characters in the string lc a string the
string with uppercase letters converted to
lower uc a string the string with lowercase
letters converted to upper hex a string the
decimal value of the hexadecimal number in
the string join a character and the strings
catenated a list of strings together with
the character inserted between them
71
4.3 Assignment Statements and Simple Input
and Output - Assignment statements are as those
in C Java - All Perl statements except
those at the end of blocks must be terminated
with semicolons - Comments are specified with
- Keyboard Input - Files are referenced
in Perl programs with filehandles -
STDIN is the predefined filehandle for standard
input, the keyboard - The line input
operator is specified with ltfilehandlegt
new ltSTDINgt - If the input is
a string value, we often want to trim off
the trailing newline, so we use chomp(new
ltSTDINgt)

72
4.3 Assignment Statements and Simple Input
and Output (continued) - Screen Output
print one or more string literals, separated by
commas e.g., print "The answer
is result \n" - Example program print
"Please input the circles radius " radius
ltSTDINgt area 3.14159265 radius
radius print "The area is area \n" -
One way to run a Perl program perl
prog1.pl - Two useful flags -c
means compile only (for error checking)
-w means produce warnings for suspicious
stuff (you should always use this!) -
To get input from a file (read with ltgt)
perl prog1.pl prog1.dat
73
4.4 Control Statements - Control
Expressions 1. Scalar-valued expressions
- If its a string, its true unless it is
either the null string or its "0"
- If its a number, its true unless it is zero
2. Relational Expressions - Operands
can be any scalar-valued expressions Numeric
Operands String Operands eq ! ne lt
lt gt gt lt le gt ge - If a
string operator gets a numeric operand, the
operand is coerced to a string likewise for
numeric operators
74
4.4 Control Statements (continued) 3. Boolean
Expressions - Operators , , ! (higher
precedence), as well as and, or, and not
(lower precedence) - See Table 4.4, pp. 97-98
for the precedence and the associativity of
operators - Assignment statements have values,
so they can be used as control expressions
while (next ltSTDINgt) - Because EOF is
returned as the null string, this
works - The keyboard EOF is specified with
ControlD for UNIX ControlZ for Windows
COMMAND. For Macintosh
75
4.4 Control Statements (continued) -
Selection Statements if (control expression)
then-clause else
else-clause - Braces are required
- elsif clauses can be included unless
(control expression) unless-clause
- Uses the inverse of the value of the
control expression - Loop
Statements while (control expression)
loop-body until (control
expression) loop-body
76
4.4 Control Statements (continued) - Loop
Statements (continued) for (initial-expr
control-expr increment-expr) loop-body
- The initial and increment
expressions can be comma expressions
- Switch - Perl does not have one - Can be
built with the last operator, which transfers
control out of the block whose label is given
as its operand SWITCH SWITCH is the
block label if (input eq "bunny")
rabbit last SWITCH if
(input eq "puppy") dog
last SWITCH print "\input is neither
a bunny", " nor a puppy \n"
77
4.4 Control Statements (continued) - The
implicit variable _ is used as the default
operand for operators and the default parameter
in function calls while (ltSTDINgt)
print chomp if (_ eq "gold")
print "Im rich, Im rich!!! \n" 4.5
Fundamentals of Arrays - Perl arrays store only
scalar values, which can store strings,
numbers, and references - A list is an ordered
sequence of scalar values - A list literal is a
parenthesized list of scalar expressions
- Used to specify lists in programs -
Examples ("Apples", sum / quantity,
2.732e-21) qw(Bob bib Bing bobble)
78
4.5 Fundamentals of Arrays (continued) - An
array is a variable that can store a list -
Array names all begin with at signs (_at_) -
Arrays can be assigned other arrays or list
literals _at_list (2, 4, 6, 8)
_at_list2 _at_list - If an array is used where a
scalar is expected, the length of the array is
used _at_list (1, 55, 193) len
_at_list len now has the value 3 - A list
literal that has only scalar names can be the
target of a list assignment (one, two,
three) (1, 2, 3) - When an array element is
referenced or assigned, the name is a scalar
name list3 17 age
list1 - The length of an array is dynamic
it is always the highest subscript that has
been assigned, plus 1 (It is NOT necessarily
the number of elements)
79
4.5 Fundamentals of Arrays (continued) - The
last subscript of an array is its name,
preceded by - This value can be assigned -
Scalar context versus list context - Often
forced by an operator or a function - Scalar
context can be forced with the scalar
function - The foreach statement - to process
arrays and hashes foreach price
(_at_price_list) price 0.20
- The foreach variable acts as an alias for the
elements of the array - List Operators
shift - removes and returns the first element
of its list operand left
shift _at_list
80
4.5 Fundamentals of Arrays (continued) - List
Operators (continued) unshift - puts its
second operand (a scalar of a
list) on the left end of its first operand
(an array) unshift _at_list,
47 pop - a shift on the right end push -
an unshift of the right end split - breaks
strings into parts using a specific
character as the split character
stuff "233466688" numbers split
//, stuff sort - sorts using string
comparisons (numbers are coerced
to strings)
81
4.5 Fundamentals of Arrays (continued)
process_names.pl - A simple program to
illustrate the use of arrays Input A file,
specified on the command line, of
lines of text, where each line is a
person's name Output The input names, after
all letters are converted to
uppercase, in alphabetical order
index 0 Loop to read the names and
process them while(name ltgt) Convert the
name's letters to uppercase and put it in the
names array namesindex
uc(name) Display the sorted list of
names print "\nThe sorted list of names
is\n\n\n" foreach name (sort _at_names)
print ("name \n")
82
4.6 Hashes - Differ from arrays in two
fundamental ways 1. Arrays use numerics as
indices, hashes use strings 2. Array
elements are ordered, hash elements are
not - Hash names begin with percent signs ()
- List literals are used to initialize hashes
- Can be comma-separated values, as in hash1
("Monday", 10451, "Tuesday", 10580) - Or,
implication symbols can be used between a
key and its value, as in hash2 ("Monday"
gt 10451, "Tuesday" gt 10580)
- The left operand of gt need not be quoted -
Subscripts are keys (strings) placed in braces
salary salaries"Joe Schmoe"
salaries"Michel Angelo" 1000000
83
4.6 Hashes (continued) - Elements can be
deleted with delete delete salaries"Bill
Clinton" - Use exists to determine whether a
key is in a hash if (exists
salaries"George Bush") - Keys and values
can be moved from a hash to an array with
keys and values foreach name (keys
salaries) print "Salary of name is
salariesname \n" - Perl has a
predefined hash named ENV, which stores
operating system environment variables and
their values
84
4.7 References - A reference is a scalar
variable that references another variable or
a literal - A reference to an existing variable
is obtained with the backslash operator
ref_sum \sum - A reference to a list
literal is created by placing the literal in
brackets ref_list 2, 4, 6, 8 - A
reference to a hash literal is created by
placing the literal in braces ref_hash
Mom gt 47, Dad gt 48 - All dereferencing in
Perl is explicit - For scalars, add a to
the beginning - For arrays and hashes,
1. Add a to the beginning of the name, or
2. Put the -gt operator between the name and its
subscript ref_hash -gt "Mom"
48
85
4.8 Functions - A function definition is the
function header and a block of code that
defines its actions - A function header is the
reserved word sub and the functions name -
A function declaration is a message to the
compiler that the given name is a function that
will be defined somewhere in the program -
Syntactically, a function declaration is just the
functions header - Function definitions
can appear anywhere in a program - Function
calls can be embedded in expressions (if they
return something useful) or they can be
standalone statements (if they dont) - A
function that has been previously declared can
be treated as a list operator - A function can
specify a return value in two ways 1. As
the operand of a return statement (a
function can have zero or more returns) 2. As
the value of the last evaluated expression
in the function
86
4.8 Functions (continued) - Implicitly declared
variables have global scope - Variables can be
forced to be local to a function by naming
them in a my declaration, which can include
initial values my sum 0 my
(total, pi) (0, 3.14159265) - Parameters
- Actual parameters vs. formal parameters -
Pass-by-value is one-way, to the function -
Pass-by-reference is two-way - Parameters are
passed through the implicit array, _at__
(implicitly copied in) - Elements of _at__
are aliases for the actual parameters
- Every function call has its own version of
_at__ - In the called function, parameters can
be manipulated directly in _at__, or in local
variables initialized to elements of _at__
87
4.8 Functions (continued) sub fun1
my(first) _0 first _1
- Pass-by-reference parameters can be
implemented by passing references sub sub1
my(ref_len, ref_list) _at__ my count
for (count 0 count lt ref_len
ref_listcount--) - An example
call to sub1 sub1(\len, \_at_mylist)
88
4.8 Functions (continued) sub median my
len _0 my _at_list _at__ Discard the
first element of the array shift(_at_list)
Sort the parameter array _at_list sort
_at_list Compute the median if (len 2
1) length is odd return listlen /
2 else length is even return
(listlen / 2 listlen /
2 - 1) / 2 End of function
median med median(len, _at_my_list) print
"The median of \_at_my_list is med \n"
89
4.9 The pack and unpack Functions - Used to
convert numbers to text and vice versa - Both
take two parameters, a template and a list -
The template specifies the particular
conversion - The list specifies the data to
be packed or unpacked - pack is used to
build a text string from an array of numbers
- unpack can be used to get the numeric codes of
the characters in a string and make them
elements of an array - Both of these
conversions are specified with the "C"
template str0 'C' str1
'U' cu_str pack("CC", _at_str) - Now,
cu_str has "CU" _at_str2 unpack("CC",
cu_str) - Now, _at_str2 has (67, 85)
90
4.10 Pattern Matching - The pattern-matching
operator is m, but if slashes are used to
delimit the pattern operand, the m can be
omitted - The default string against which the
pattern is matched is in _ - Character and
character-class patterns - Metacharacters \
( ) ? . - A non-meta,
or normal character matches itself if
(/gold/) print "There's gold in
that thar string!! \n" - Metacharacters
can match themselves if they are
backslashed - The period matches any
character except newline /a.b/
matches "aab", "abb", "acb", ...
91
4.10 Pattern Matching (continued) - A
character class is a string in brackets
abc means a b c - A dash can be
used to specify a range of characters
A-Za-z - If a character
class begins with a circumflex, it
means the opposite A-Z matches any
character except an uppercase letter
- Predefined character classes
Name Equivalent Pattern Matches \d 0-9 a
digit \D 0-9 not a digit \w A-Za-z_0-9 a
word character \W A-Za-z_0-9 not a word
character \s \r\t\n\f a whitespace
character \S \r\t\n\f not a whitespace
character
92
4.10 Pattern Matching (continued) - Pattern
Quantifiers - patternn means repeat the
pattern n times /a5bc5/ - pattern
means repeat the pattern zero or more
times /abc/ - pattern means repeat
the pattern 1 or more times - pattern?
means zero or one match /\db?c/ -
Two more useful predefined patterns \b -
matches the boundary position between a \w
character and a \W character, in either order
\B - matches a non-word boundary - These
two do not match characters, they match
positions between characters
93
4.10 Pattern Matching (continued) - Binding
Operators - to match against a string other
than the string in _ str /\w/
str ! /\w/ - Anchors - match positions,
not characters 1. in front of a pattern
(not in a character class) means the
pattern must match at the beginning 2. at
the end of a pattern means the pattern m