Sebesta:

1
Chapter 2

• Sebesta
• Programming the
• World Wide Web

2
2.1 Origins and Evolution of HTML - Derived
from SGML (Standard Generalized Markup
Language) - 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 - 2000 - Just 4.01
modified to fit the XML syntax - Well
stick to nearly all of this syntax -
www.w3c.org 2.2 Basic Syntax - Elements are
defined by tags (markers) - Tag format
- Opening tag ltname /gt - Closing tag
lt/namegt
3
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
4
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
5
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
6
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.
7
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

8
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
9
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

10
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" alt " picture of comets"
/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
11
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" alt "(picture of
airplane)" /gt ltbr /gt Buy this fine airplane today
at a remarkably low price ltbr /gt Call
999-555-1111 today! lt/bodygt lt/htmlgt
12
2.5 Images (continued)
13
2.5 Images (continued) - The alt attribute of
ltimg /gt is used to display text for
browsers that dont 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
another document , the anchor for the
target need not be specified in the target
document
14
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
15
2.6 Hypertext Links (continued)
16
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
17
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
18
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
19
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
20
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
21
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
22
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
23
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
24
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!
25
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
26
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
27
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
28
2.9 Frames (continued)
29
Appendix A.1 Head - The head part contains
general information, or meta-information,
about the document. - The contents of the head
are not displayed as part of the document
text the displayed material is found within
the body. - The mark-up elements can be placed
within the head are - base A record
of the original URL of the document this
allows you to move the document to a new
directory (or even a new site) and have
relative URLs access the appropriate place
with respect to the original URL. -
isindex Usually placed in the head by the
server or a server script/program to indicate
that a document is searchable. - link
Defines the relationship(s) between this
document and another or others. A document
can have several link elements.
30

• A.1 Head (Continued)
• - meta A container for document
• metainformation.
• - title The title of the document. This
  element is
• mandatory - all documents must have a title.
  
• - style Stylesheet instructions, written in a
  
• stylesheet language. Stylesheet
  instructions
• specify how the document should be
• formatted for display. Very few browser
• currently support stylesheets.
• - script Script program code that should be
  run
• with and that can interact with the
  document.
• Example lanuages are JavaScript and
• VBScript.

31
A.1 Head (Continued) - The ltmetagt tag is a
general element for document
meta-information. - Sometimes you want a
header to contain information that
would ordinarily be returned by the
server as a field in the HTTP headers. -
Example. You could use ltmetagt to include
an expiry date for files that are periodically
updated. The ltmetagt element would be
ltmeta http-equiv"Expires"
content"25-Dec-2002 120000 GMT"gt -
Most browsers support this 'Refresh"
header. - Example. The browser will, after a
delay of 12 seconds, access the indicated
URL. ltmeta http-equiv"Refresh" content"12
urlhttp//foo.bar/blatz.html"gt
- A user might want to include information
about the document, such as keywords for
indexing, the name of the author, and so on.
32
A.1 Head (Continued) - Example ltmeta
name "keywords" content " World Wide
Web, Web, WWW" gt ltmeta name
"description" content "A page introduces
the Web technologies." gt ltmeta name
" author" content " John Wayne" gt
33

• A.2 Character Encoding
• - In many cases, some characters need to be
• presented in a HTML document.
• - To specify a character, begin with a ,
  follow
• by the numeric coding or symbol for this
• code, end with a .
• - Full list of character references can be
  found
• at http//www.w3.org/TR/REC-html40/sgml/entit
  ies.html
• Example
• "lt" or "60" represents the lt sign.
• "gt" "62" represents the gt sign.
• "amp" "38" represents the sign.
• "quot" "34" represents the " mark.
• "nbsp" "160" represents a space.