CIS 336 Website Design, Implementation and Management

1
CIS 336Website Design, Implementation and
Management

• Revision Lecture
• Dr. Michael Casey
• 05/05/05

2
Overview

• The World Wide Web Environment
• HTML / XHTML
• Cascading Style Sheets (CSS)
• Client side scripting
• XML and XSLT
• Server-side scripting
• Your Exam timing, answering questions

3
WWW Environment
SERVER doc.gold.ac.uk
client
client
client
client
4
WWW Environment
SERVER doc.gold.ac.uk
Open TCP Connection
tcp port 80
client
client
client
client
5
WWW Environment
SERVER doc.gold.ac.uk
HTTP Request
GET /staff/MC.html HTTP/1.1 HOSTdoc.gold.ac.uk80
User-Agent Firefox/1.0 blank line here
tcp port 80
client
client
client
client
6
WWW Environment
HTTP Response
HTTP/1.1 200 OK Date Thu, 5 May 2005 101259
GMT Content-Type text/html Content-Length
1354 lthtmlgt ltbodygt lth1gtWelcomelt/h1gt ... lt/bodygt lt/
htmlgt
SERVER doc.gold.ac.uk
tcp port 80
client
client
client
client
7
MANUAL USER AGENT
telnet doc.gold.ac.uk 80 Trying
158.223.1.108... Connected to doc.gold.ac.uk. Esca
pe character is ''. GET /staff/MC.html
HTTP/1.1 HOSTdoc.gold.ac.uk80 HTTP/1.1 200
OK Date Thu, 05 May 2005 043142 GMT Server
Apache/1.3.31 (Unix) mod_jk/1.2.0
mod_python/2.7.10 Python/2.3.3 PHP/5.0.3
mod_fastcgi/2.4.2 mod_gzip/1.3.26.1a
mod_perl/1.29 mod_ssl/2.8.19 OpenSSL/0.9.7a Vary
Last-Modified Thu, 05 May 2005 031925
GMT ETag "15837d-3e51-427990bd" Accept-Ranges
bytes Connection
close Content-Type text/html ltHTMLgt ltHEADgt ltTITLE
gtGoldsmiths College gt Department of
Computinglt/TITLEgt
HTTP REQUEST
(Blank line)
HTTP Response
8
HTML
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loo
se.dtd"gt lthtmlgtltheadgtlttitlegtThis is only a
testlt/titlegtlt/headgt ltbodygt lth1 idmyTitle
classaClass namemainTitle
stylecolorredgt An HTML Example lt/h1gt The
rest of my document...ltbr/gt lt/bodygt lt/htmlgt
9
HTML
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loo
se.dtd"gt lthtmlgtltheadgtlttitlegtThis is only a
testlt/titlegtlt/headgt ltbodygt lth1 idmyTitle
classaClass namemainTitle
stylecolorredgt An HTML Example lt/h1gt The
rest of my document...ltbr/gt lt/bodygt lt/htmlgt
VALID HTML Must have a lt!DOCTYPE...gt
declaration. Otherwise document is WELL-FORMED
but NOT VALID.
10
HTML
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loo
se.dtd"gt lthtmlgtltheadgtlttitlegtThis is only a
testlt/titlegtlt/headgt ltbodygt lth1 idmyTitle
classaClass namemainTitle
stylecolorredgt An HTML Example lt/h1gt The
rest of my document...ltbr/gt lt/bodygt lt/htmlgt
Document must have lthtmlgt...lt/htmlgt element
(tag) ltheadgt...lt/headgt is optional, but it is
recommended to include an (invisible)
lttitlegt...lt/titlegt
11
HTML
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loo
se.dtd"gt lthtmlgtltheadgtlttitlegtThis is only a
testlt/titlegtlt/headgt ltbodygt lth1 idmyTitle
classaClass namemainTitle
stylecolorredgt An HTML Example lt/h1gt The
rest of my document...ltbr/gt lt/bodygt lt/htmlgt
Most documents must have ltbodygt...lt/bodygt Frames
do not have a ltbodygt...lt/bodygt
12
HTMLELEMENTS
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loo
se.dtd"gt lthtmlgt ltbodygt lth1 idmyTitle
classaClass namemainTitle
stylecolorredgt An HTML Example lt/h1gt The
rest of my document...ltbr/gt lt/bodygt lt/htmlgt
13
HTMLATTRIBUTES
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loo
se.dtd"gt lthtmlgt ltbodygt lth1 idmyTitle
classaClass namemainTitle
stylecolorredgt An HTML Example lt/h1gt The
rest of my document...ltbr/gt lt/bodygt lt/htmlgt
14
HTMLCORE ATTRIBUTES
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loo
se.dtd"gt lthtmlgt ltbodygt lth1 idmyTitle
classaClass namemainTitle
stylecolorredgt An HTML Example lt/h1gt The
rest of my document...ltbr/gt lt/bodygt lt/htmlgt
15
Lists
Unordered List
Nested Lists

16
Tables
lttable border"1"gt lttrgtltthgtYearlt/thgtltthgtSaleslt/thgt
lt/trgt lttrgtlttdgt2000lt/tdgtlttdgt18Mlt/tdgtlt/trgt lttrgtlttdgt
2001lt/tdgtlttdgt25Mlt/tdgtlt/trgt lttrgtlttdgt2002lt/tdgtlttdgt
36Mlt/tdgtlt/trgt lt/tablegt
3 Column Article
lttable border"1" cellpadding"10"gt
lttable style"width100"gt lttrgt lttd
style"width33.33"gt column 1 text lt/tdgt lttd
style"width33.33"gt column 2 textlt/tdgt lttd
style"width33.33"gt column 3 textlt/tdgt lt/trgt
lt/tablegt
lttable border"1" cellpadding"10"
cellspacing"10"gt
17
Absolute/Relative URLs, Anchors and Fragments
lta href"/staff"gtList of Faculty Memberslt/agt
lta hrefhttp//doc.gold.ac.uk/staff"gtSame
thinglt/agt
lta hrefindex.html"gtSame if page is in /stafflt/agt
lta href"bottom"gtthe bottom of this pagelt/agt
lth4 id"bottom"gtThe Bottom of This Pagelt/h4gt
ltbase hrefhttp//host/dir" target_parent"/gt _p
arent _blank _self _top
18
Style Sheets
Three ways to use inline styles lth1
style"font-size12ptcolorFF0000"gtA
Headinglt/h1gt document level styles
ltheadgt ltstyle type"text/css"gt
h1font-size12ptcolorFF0000
lt/stylegt lt/headgt external style sheets
ltheadgt ltlink rel"stylesheet"
href"stylesheet.css"/gtlt/headgt
19
CSS Rules
standard rules selector property1value1
property2value2 ... import rules _at_import
url(http//somesite.com/styles/stylesheet.css)
media rules _at_media screen background-color
black _at_media print background-colorwhite

20
XPath selectors
elements acolorred ol lipositionrelative
left-10 nesting ol li ol lipositionrelativ
eleft-10 div h1font-size150 attributes
h1aligncentercolorblue classes h1class
chapterTitleline-height10em divclassoffdi
splaynone id foocolorred use with ltp
id"foogt psuedo classes (dymanic)
alinkcolorblue avisitedcolorred
ahovercolorF740F7 generic classes
.foocolorred .barpositionabsoluteleft20
top20
21
CSS Box Layout
lthtmlgt ltheadgt ltstyle type"text/css"gt divclass"a
"? divclass"b"? divclass"c"? lt/stylegt
lt/headgt ltbodygt ltdiv class"a"gt ltdiv
class"b"gt ltdiv class"c"gt lt/divgt lt/divgt lt/divgt lt/
bodygt lt/htmlgt
500
300
100
22
CSS Box Layout Solution
lthtmlgt ltheadgt ltstyle type"text/css"gt divclass"a
"border-colorblackborder-stylesolid width5
00pxheight500px divclass"b"border-colorbla
ckborder-stylesolid positionrelativeleft100
pxtop100pxwidth300pxheight300px divclass"
c"border-colorblackborder-stylesolid positi
onrelativeleft100pxtop100pxwidth100pxheigh
t100px lt/stylegt lt/headgt ltbodygt ltdiv
class"a"gt ltdiv class"b"gt ltdiv
class"c"gt lt/divgt lt/divgt lt/divgt lt/bodygt lt/htmlgt
23
Javascript HTML DoM
Document Object The Document object is used to
access all elements in a page.
Syntax document.objectindex
24
Javascript Methods
Syntax document.method_name()
25
Javascript Events
Events Syntax document.event_name"someJavaScrip
tCode"
Syntax document.event_name"someJavaScriptCode"
26
Javascript Examplesin Lab 7
ltimg onmouseoverjavascriptimageRollover()/gt
27
XML Document Tree
Every XML document can be represented by a tree,
including HTML. In the tree, each node is an
element or text content. Two nodes are connected
if the upper tag contains the lower tag as
content. For example, consider the simple HTML
document lthtmlgt ltheadgt lttitlegtAll about
foolt/titlegt ltauthorgtA. Foollt/authorgt lt/headgt
ltbodygt I can't really say anything about foo,
legally. lt/bodygt lt/htmlgt
28
Constructing the Document Tree
lthtmlgt ltheadgt lttitlegtAll about foolt/titlegt
ltauthorgtA. Foollt/authorgt lt/headgt ltbodygt I
can't really say anything about foo, legally.
lt/bodygt lt/htmlgt
29
eXtensible Markup Language (XML)
lt?xml version"1.0"?gt ltmusiccataloguegt ltitem
type"mp3"gt ltgenregtRaplt/genregt ltartistgt50
Centlt/artistgt ltsongnamegtLouderlt/songnamegt
ltdurationgt000355lt/durationgt lt/itemgt ltitem
type"cd"gt ltgenregtClassicallt/genregt ltartistgtBee
thovenlt/artistgt ltsongnamegt5th Symphonylt/songnamegt
ltdurationgt010500lt/durationgt lt/itemgt lt/musiccat
aloguegt
30
Document Type Definition(for Valid XML)
lt?xml version"1.0"?gt lt!DOCTYPE musiccatalogue
lt!ELEMENT musiccatalogue (item)gt lt!ELEMENT
item (genre,artist,songname,duration)gt
lt!ATTLIST item type CDATA REQUIREDgt
lt!ELEMENT genre (PCDATA)gt lt!ELEMENT artist
(PCDATA)gt lt!ELEMENT songname (PCDATA)gt
lt!ELEMENT duration (PCDATA)gt gt
ltmusiccataloguegt ltitem type"mp3"gt
ltgenregtRaplt/genregt ltartistgt50 Centlt/artistgt
ltsongnamegtLouderlt/songnamegt ltdurationgt000355lt
/durationgt lt/itemgt lt/musiccataloguegt
31
XML Schema (xml-based DTD)
Document Type Definition
XML Document
lt?xml version"1.0"?gt ltnotegt lttogtClasslt/togt
ltfromgtCaseylt/fromgt ltheadinggtExamslt/headinggt
ltbodygt Some Text lt/bodygt lt/notegt
lt!DOCTYPE textnote lt!ELEMENT note (to, from,
heading, body)gt lt!ELEMENT to (PCDATA)gt
lt!ELEMENT from (PCDATA)gt lt!ELEMENT heading
(PCDATA)gt lt!ELEMENT body (PCDATA)gt gt
XML Schema Definition
ltschema xmlns"http//www.w3.org/2001/XMLSchema"gt
ltelement name"note"gt ltcomplexTypegt ltsequencegt lt
element name"to" type"string"/gt ltelement
name"from" type"string"/gt ltelement
name"heading" type"string"/gt ltelement
name"body" type"string"/gt lt/sequencegt lt/complex
Typegt lt/elementgt lt/schemagt
XML Schema is an XML language, it defines XML
document types like a DTD.
32
XML Stylesheet Language (XSL)

• XSL XSLTXPath (XSL-FO)

CSS HTML Style Sheets HTML uses predefined tags
and the meanings of tags are well understood. The
lttablegt element in HTML defines a table - and a
browser knows how to display it. Adding styles to
HTML elements are simple. Telling a browser to
display an element in a special font or color, is
easy with CSS. 
XSL XML Style Sheets XML does not use
predefined tags (we can use any tag-names we
like), and the meanings of these tags are not
well understood. A lttablegt element could mean an
HTML table, a piece of furniture, or something
else - and a browser does not know how to display
it. XSL describes how the XML document should be
displayed!
33
XSLT Examples

• lt?xml version"1.0"?gt
• ltxslstylesheet xmlnsxsl"http//www.w3.org/1999/
  XSL/Transform" version"1.0"gt
• ltxsltemplate match"/flights"gt
• ...
• ltxslif test"_at_airline'Delta'"gt
• ltfont color"red"gtltxslvalue-of
  select"_at_airline"/gt
• lt/fontgt
• lt/xslifgt
• ltxslapply-templates/gt
• lt/xsltemplategt
• lt/xslstylesheetgt

34
Server Side Scripting

• Using PHP to generate XML/HTML/XHTML
• Variables, Strings, Expressions, Operators
• Associative Arrays
• Multidimensional Associative Arrays
• Persistence Cookies, Sessions
• File I/O
• Database connectivity (mySql)
• Control structures (if...else, switch)

35
Your Exam

• DONT PANIC
• Read all of the questions before starting each
  section.
• 2nd years -- divide your time equally between
  sections.
• Do not answer more than required number of
  questions.
• Tackle those you know first.
• Credit will be given for partially correct
  answers.
• GOOD LUCK