MWENGE CATHOLIC UNIVERSITY

CSC 224-Web Programming and Applications

Languages and Tools for Web Programming

1
Outline
 Part 1: Static document formats for the web
 Document forms: HTML and CSS
 Data forms: XML, DTDs and Schemas, XSL
 High-end graphics forms: VRML, SVG
 Part 2: Client-side interactive web pages
 Client-Side Scripting languages: JavaScript, VBScript
 Client-Side embedded applications: Java applets, ActiveX, Flash
 Part 3: Server-side web page creation
 Scripting languages: CGI and Perl, PHP, ColdFusion
 High-level frameworks: Servlets and JSP, ASP, ASP.NET

 Part 4: Web service architectures

 WSDL, SOAP

2
HTML
 HyperText Markup Language
 Primary document type for the web
 Transmitted using the HyperText Transfer Protocol
 Client sends request string (with parameters)
 Server returns a document
 Stateless protocol
 Describes document content and structure
 Precise formatting directives added later
 Content and structure in same document
 Browser or formatter responsible for rendering
 Can partially render malformed documents
 Different browsers render differently

3
HTML structure
 HTML document is a text based
representation of a tree of tags
 General structure:
<OUTERTAG attribute1=‘val1’ attribute2=‘val2’>
<INNERTAG attribute3=‘val3’>some text</INNERTAG>
</OUTERTAG>

4
HTML evolution
 HTML 1 [early ‘90s]
 Invented by Tim Berners-Lee of CERN
 Aimed as standard format to faciliate collaboration
between physicists
 Based on the SGML framework
 Old ISO standard for structuring documents
 Tags for paragraphs, headings, lists, etc.
 HTML added the hyperlinks, thus creating the web
 Rendered on prototype formatters

5
HTML evolution
 HTML+ [mid ‘94]
 Defined by small group of researchers
 Several new tags
 Most notably, IMG for embedding images
 Many browsers
 First text-based browser (Lynx) released in 03/93
 First graphical browser (Mosaic) released in 04/93
 First W3 conference [5/94]
 HTML+ presented
6
HTML evolution
 HTML 2 [7/94-11/95]
 Prompted by variety of diverging language
variants and additions of different browsers
 Adds many widely used tags
 e.g., forms
 No custom style support
 e.g., no colors
 W3 consortium formed [Late 94]
 Mission: Open standards for the web
7
HTML evolution
 Netscape formed [11/94]
 Becomes immediate market leader
 Support for home users
 Forms a de-facto standard
 Use of “Netscape proprietary tags”
 Difficult for other browsers to replicate
 Documents start rendering differently
 Addition of stylistic tags
 e.g., font color and size, backgrounds, image alignment
 Frowned upon by structure-only advocates

8
HTML evolution
 HTML 3.0 draft proposed
 Huge language overhaul
 Tables, math, footnotes
 Support for style sheets (discussed later)
 Too difficult for browsers to adapt
 Every browser implemented different subset
 But claimed to support the standard
 And added new tags…
 Standard abandoned
 Incremental changes from here on
9
HTML evolution
 Microsoft introduces Internet explorer [8/95]
 First serious competition to Netscape
 Starts introducing its own tags
 e.g., MARQUEE
 Effectively splitting web sites into Microsoft and Netscape
pages
 Many sites have two versions
 Microsoft starts supporting interactive application
embedding with ActiveX
 Netscape responds with the emerging Java technology
 Starts supporting JavaScript
 Microsoft introduces VBScript

10
HTML evolution
 HTML 3.2 [1/97]
 Implements some of the HTML 3.0 proposals
 Essentially catches up with some widespread
features.
 Supports applets
 Placeholders for scripting and stylesheet support

11
HTML evolution
 HTML 4 [12/97]
 Major overhaul
 Stylesheet support
 Tag identifier attribute
 Internationalization and bidirectional text
 Accessibility
 Frames and inline frames
 <object> tag for multimedia and embedded objects
 Adapted by IE (market leader)
 Slow adaptation by Netscape
 XML 1.0 standard [2/98]
 XHTML 1.0 [1/00, 8/02]

12
Limitations of HTML
 No support for accessibility until HTML 4
 No support for internationalization until HTML 4
 No dynamic content in original definition
 No inherent support for different display
configurations (e.g., grayscale screen)
 Except for alt tag for images
 Added in CSS2
 No separation of data, structure and formatting
 Until version 4

13
Client-side:
Cascading Style Sheets

CSS
Why CSS?
 HTML was not meant to support styling
information
 But browsers started supporting inline style
changes to make web look better
 Inline styling information is problematic
 Difficult to change
 Lack of consistency
 No support for different display formats
 Bloats pages
 No support for some styling features
15
Connecting HTML to CSS
 HTML document typically refers to external
style sheet
<HEAD>
<LINK rel="stylesheet" type="text/css“
href="fluorescent.css">
</HEAD>
 Style sheets can be embedded:
<HEAD><STYLE type="text/css">
<!-- …CSS DEFINITIONS.. -->
</STYLE></HEAD>

16
Connecting HTML to CSS
 Styles can be embedded inline with the style attribute
 Style sheets can be chosen by media type
 Simply add a media attribute to the link or style tags
 Choose from: screen, tty, tv, projection, handheld, braille, aural, all
 HTML document can provide several stylesheet options
 Give titles to each stylesheet
 One preferred (default) style, the rest are alternates
 e.g.,
http://www.w3.org/Style/Examples/007/alternatives.html
 Default configuration in internal browser stylesheet and
user stylesheet

17
Style sheet structure
 Declaration gives value to property
 Property: value
 e.g., color: red
 Styles are applied to selectors
 Selector describes element
 Simplest form is tag type
 e.g., P {color:red; font-size: 16px}
 Style sheet is a series of style applications
 Can import other stylesheets
 @import url(corestyles.css);
BODY {color: red; background-color: black}
 Style of enclosing element is inherited by enclosed
18
Selectors
 Type selectors
 Name of HTML elements
 Pseudo-class
 Specific subset of an HTML elements
 e.g., :link, :visited, :active for the A tag

 Pseudo-element
 Specific subset of any element
 e.g., :first-line, :first-letter

 Context sensitive elements

 e.g., H2 I {color:green}
19
Selectors
 Element classes
 HTML document can classify tags
 e.g., <P class=“warning”>…</P>
 Can refer to element type with specific class
 e.g., P.warning {color:red}
 Can refer to all elements with specific class
 e.g., .warning {color:red}
 Use HTML tags <div> and <span>
 Element IDs
 HTML entity can have a unique id attribute
 e.g., <P id=“copyright”>…</P>
#copyright {color:blue}

20
Cascading
 Most properties are inherited
 From enclosing element to internal element
 Sort order for conflict resolution:
 Origin (page>user>browser)
 Weight (!important symbol allows overriding)
 Specificity
 Order

21
How is CSS applied?
1. Source document is parsed into a DOM tree
2. Media type is identified
3. Relevant stylesheets obtained
4. DOM tree annotated with values to every
property
5. Formatting structure generated
6. Formatting structure presented (rendered)

22
Client Side:
Scripting Languages

JavaScript
JavaScript
 The most common scripting language
 Originally supported by Netscape, eventually by IE
 Typically embedded in HTML page
 Executable computer code within the HTML content
 Interpreted at runtime on the client side
 Can be used to dynamically manipulate an HTML
document
 Has access to the document’s object model
 Can react to events
 Can be used to dynamically place data in the first place
 Often used to validate form data
 Weak typing
24
JavaScript Syntax
 Code written within <script> element
 e.g., <script type="text/javascript">
document.write("Hello World!")
</script>
 Use src attribute for scripts in external files
 Placement determines execution time
 Scripts in header must be invoked explicitly
 e.g., during events
 Scripts in body executed when that part is being
processed.
25
JavaScript Syntax
 User can declare variables
 e.g., var name = “user”;
 Variables can be global to the page
 User can declare functions
 function func(argument1,argument2,…)
{ some statements }
 Function can return values with return
 Standard conditionals
 if..then..else, switch, ?: operator
 Standard loops
 while, do..while, for
26
JavaScript Syntax
 JavaScript has built-in “Object” types
 Variety of operators and built-in functions
 Arrays, Booleans, Dates, Math, Strings
 Direct access to the HTML DOM model
 HTML Elements have script-specific event attributes
 e.g., <body onmousedown="whichButton()">
 e.g., <input type="button" onclick="uncheck()"

value="Uncheck Checkbox">

27