B118

1
B118

• Web Page Development

2
Serving Up Web Pages

• User interfaceweb browser
• Backend web server
• Microsoft Internet Information Server (IIS)
• Netscape
• Apache

3
What is HTML?

• Markup language, not a programming language
• Describes document structure, not presentation
  (original intent)
• Web browser handles presentation
• Hypertext linking capability

4
HTML Development Tools

• Notepad
• Microsoft Front Page Express
• Netscape Composer
• Microsoft Word

5
Notepad
lthtmlgt ltbodygt Hello, World! ltpgt(from
Notepad) lt/bodygt lt/htmlgt
6
Front Page Express
lthtmlgt ltheadgt ltmeta http-equiv"Content-Type" cont
ent"text/html charsetiso-8859-1"gt ltmeta
name"GENERATOR" content"Microsoft FrontPage
Express 2.0"gt lttitlegtHello, World!lt/titlegt lt/headgt
ltbody bgcolor"FFFFFF"gt ltpgtHello,
World!lt/pgt ltpgt(from FrontPage Express)lt/pgt lt/bodygt
lt/htmlgt

• Front Page Express can let you set Base Location
  Background properties

7
Base Location Background
lthtmlgt ltheadgt ltmeta http-equiv"Content-Type" cont
ent"text/html charsetiso-8859-1"gt ltmeta
name"GENERATOR" content"Microsoft FrontPage
Express 2.0"gt lttitlegtBase Location
Demolt/titlegt ltbase href"www.cob.sjsu.edu/wong_r/b
118/"gt lt/headgt ltbody bgcolor"FFFFFF"gt ltpgtltfont
face"Verdana"gtLocation of the lt/fontgtlta href"ind
ex.htm"gtltfont face"Verdana"gtltstronggtHome
Pagelt/stronggtlt/fontgtlt/agtltfont face"Verdana"gt
changes depending on the Base Location
settinglt/fontgt.lt/pgt lt/bodygt lt/htmlgt
8
Netscape Composer
lt!doctype html public "-//w3c//dtd html 4.0
transitional//en"gt lthtmlgt ltheadgt ltmeta
http-equiv"Content-Type" content"text/html
charsetiso-8859-1"gt ltmeta name"Author"
content"Ron Wong"gt ltmeta name"GENERATOR"
content"Mozilla/4.73 en (Win98 U)
Netscape"gt lttitlegtHello, World!lt/titlegt lt/hea
dgt ltbodygt ltbgtltigtltfont size3gtHello,
World!lt/fontgtlt/igtlt/bgt ltpgtlta NAME"author"gtlt/agtltfon
t face"Verdana"gt(from Netscape
Composer)lt/fontgt lt/bodygt lt/htmlgt
9
Microsoft Word 97
ltHTMLgt ltHEADgt ltMETA HTTP-EQUIV"Content-Type"
CONTENT"text/html charsetwindows-1252"gt ltMETA
NAME"Generator" CONTENT"Microsoft Word
97"gt ltTITLEgtHello, Worldlt/TITLEgt lt/HEADgt ltBODYgt ltB
gtltFONT FACE"Book Antiqua" SIZE6gtltPgtHello,
World!lt/Pgt lt/BgtltIgtltPgt(from Microsoft
Word97)lt/Pgtlt/Igtlt/FONTgtlt/BODYgt lt/HTMLgt
10
Microsoft Word 2000

• Cascading Style Sheets (CSS)
• Also uses XML
• 171 lines long!

11
Intermediate HTML Techniques

• Anchor Points
• Tables
• Frames

12
Anchor Points
ltfont face"Verdana"gtltfont size-1gt lta
href"classrooms"gtClassroomslt/agt lt/fontgtlt/fontgtlt/
ligt lta NAME"classrooms"gtlt/agt ltfont
face"Verdana"gtltfont size0gtClassroomslt/fontgtlt/fo
ntgtlt/h2gt ltfont face"Verdana"gtltfont
size-1gtSection 1 class meets Monday, 600 PM to
915 PM and Wednesday, 600 PM to
915PM,lt/fontgtlt/fontgt ltbrgtltfont
face"Verdana"gtltfont size-1gtBC 210lt/fontgtlt/fontgt
13
Tables
ltTABLE WIDTH"600" BGCOLOR"white"gt ltTRgt
ltTD HEIGHT"50" VALIGN"TOP" COLSPAN"2"gt B240
Home Page (Summer Session II 2000) lt/TDgt
lt/TRgt ltTRgt ltTD WIDTH"200" VALIGN"TOP"gt
ltA HREF"syllabus/course-calendar.shtm"gtCalendar
lt/Agt ltA HREF"syllabus/syllabus.shtm"gtSyllabu
slt/Agt lt/TDgt ltTD WIDTH"804"
VALIGN"TOP"gt ltPgtJuly 22lt/Pgt ltULgt
ltLIgtThere's no case study for the Monday
(7/24) session - work on your Access
project lt/ULgt lt/TDgt lt/TRgt lt/TABLEgt
14
Frames
ltFRAMESET COLS "21,79 " gt ltFRAME
SRC"toc.htm" NAME"Frame573187" RESIZEgt ltFRAME
SRC"news.htm" NAME"Frame573189"
RESIZEgt lt/FRAMESETgt

• toc.htm news.htm are regular HTML files,
  capable of being displayed by themselves

15
Extended Markup Language (XML)

• Adds definable meaning to HTML pages
• Essentially a database record definition
• Not just for display of web pages!

16
Dynamic HTML Pages

• Server-Side Includes (SSI)
• Web Application Servers

17
Server-Side Includes

• Gives you re-usable pieces of HTML

.SHTM fileltTABLE BGCOLOR"white"gt ltTRgt ltTD
WIDTH"600" VALIGN"TOP"gt ltH1gtB240 Syllabus
(Summer II 2000) lt/TDgtlt/TRgt ltTRgt ltTD
WIDTH"600" VALIGN"TOP"gt lt!-- include
file"classrooms.inc" --gt ltPgtltBgtCourse
Calendarlt/Bgtlt/Pgt lt!-- include
file"course-calendar.inc" --gt
lt/TDgtlt/TRgt lt/TABLEgt
.INC filelt!-- include file "classrooms.inc"--gt
ltPgtltBgtClassroomslt/Bgtlt/Pgt ltPgtSection 1 class
meets Monday, 600 PM to 915 PM and Wednesday,
600 PM to 915PM, BC 210lt/Pgt
18
Web Application Servers

• Constructs HTML pages on-the-fly
• Implications for layout design
• Embedded hyperlinks not good
• Standardizes layout

19
Allaires Cold Fusion Product
Whats stored on the web server ltCFQUERY
NAME"ProductList" DATASOURCE"CompanyDB"gt SELEC
T FROM Products lt/CFQUERYgt ltHTMLgt ltHEADgt
ltTITLEgtProduct Listlt/TITLEgt lt/HEADgt ltBODYgt ltH1gt
Company X Productslt/H1gt ltCFOUTPUT
QUERY"ProductList"gt ProductName Price
ltBRgt lt/CFOUTPUTgt lt/BODYgt lt/HTMLgt
What gets sent over to the web browser ltHTMLgt ltHE
ADgt ltTITLEgtProduct Listlt/TITLEgt
lt/HEADgt ltBODYgt ltH1gtCompany X Productslt/H1gt Widget
s 4.00 ltBRgt Diggers 5.00 ltBRgt Dingers 20.00
ltBRgt Dongers 15.00 ltBRgt lt/BODYgt lt/HTMLgt
20
Forms Processing

• CGI scripting
• Form information delivered as tagged data

21
Scripting Languages

• JavaScript
• Visual Basic Script