CS 4126 : Internet Technology
Lecture-4
Internet and Web Programming
& Architecture – Part 1
Programming the Web
Client-Side Programming
Static document formats for the web
Document forms: HTML and CSS
Data forms: XML, DTDs and Schemas, XSL
High-end graphics forms: VRML, SVG
Client-side interactive web pages
Client-Side Scripting languages: JavaScript, VBScript
Client-Side embedded applications: Java applets, ActiveX,
Flash
Server-Side Programming
Server-side web page creation
Scripting languages: CGI and Perl, PHP, ColdFusion
High-level frameworks: Servlets and JSP, ASP, ASP.NET
Web Programming – Language Model
Client Side
Server Side
Cascading
ActiveX HTML
JavaScript Style
Controls Controls
C# Sheets
ASP generates HTML XML
WebForms JavaScript
VBScript
XHTML
Static document
formats for the web
HTML
HyperText Markup Language
Primary document type for the web
Transmitted using the HTTP protocol
Describes document content and structure
HTML is good for developing static pages
can specify text/image layout, presentation, links, …
web page looks the same each time it is accessed
in order to develop interactive/reactive pages, must integrate
programming in some form or another
Advantages of HTML
Browser Compatibility
Web browsers like Chrome, Firefox, Safari, and Internet Explorer
obey HTML standards so that their web pages look the same on
all different platforms.
Cost-Efficient
Developers don’t need to purchase licenses or additional
software to create HTML content.
Easy to Learn
HTML is easy to use and understand.
Flexibility
HTML’s loose syntax grants developers flexibility.
Speed and Efficiency
Data Storage
HTML extends its capabilities to data storage with technologies
like XML.
Disadvantages of HTML
Static Nature
HTML is a static language. It defines the structure and
presentation of web content but cannot produce dynamic
interactions by itself.
Complexity in Structure
Creating and maintaining the structure of HTML documents is
complex, mainly for large-scale projects.
Limited Security
HTML alone does not provide strong security features. It can’t
protect against various web weaknesses, like cross-site scripting
(XSS) or SQL injection. These security weaknesses can lead to
data hacking.
Code Length
Creating a simple webpage using pure HTML can result in many
lines of code.
Wireless Markup Language
(WML)
Markup language for WAP browsers
WAP = Wireless Application Protocol
Based on limited HTML, uses XML notation
Uses WMLScript scripting language, based on
JavaScript
WML is applied for wireless devices i.e. cellular
phones, PDAs.
A page is called a “deck”, displayed in individual
sections called “cards”
Tasks are used to perform events
Variables used to maintain state between cards
Advantages and Disadvantages
of WML
WML is very easy to use and understand.
Requires less bandwidth for transmission of
WML documents.
Displaying WML documents requires less
processing power.
It supports limited graphics with limited gray
scale.
Client-side: Cascading
Style Sheets
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
No support for some styling features
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>
Styles can be embedded inline with the style attribute
Style sheets can be chosen by media type
HTML document can provide several stylesheet options
Cascading
Most properties are inherited
From enclosing element to internal element
Sort order for conflict resolution:
Origin (page>user>browser)
How is CSS applied?
1. Source document is parsed into a
Document Object Model (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)
CSS2
Extends CSS1
Many new properties and built-in classes
Better support for media types
Stylesheet can specify type in selector
Better support for accessibility
Better support for internationalization
Document Formats:
XML
XML, DOM, DTD,
XML-SCHEMA, XSL, XMLFO
XML
Extensible Markup Language
Based on Standard Generalized Markup Language
(SGML) format
Intended to facilitate data exchange
Documents consist of tags and data
Data is usually untyped characters
Tags have names and attributes
Document has tree structure
Tags are nested <?xml version="1.0"?>
<person>
Data areas are <name type=“full”>John Doe</name>
considered leafs <tel type=“home”>412-555-4444</tel>
<tel type=“work”>412-268-5555</tel>
One root <email>
[email protected]</email>
</person>
XML Structure
XML documents have no semantics
It is up to the programs using them
XML does not enforce structure
No restriction on possible tags
No restriction on order, repeats, etc.
Mixed content allowed
Text followed by tags followed by text
Allows HTML compatibility (XHTML)
“Well-Formed Document”
Tree structure with proper nesting
Attributes are not repeated in same tag
Document Object Model (DOM)
When a web page is loaded, the browser creates
a Document Object Model of the page.
DOM is a programming interface for web (Web APIs)
documents.
It represents the page so that programs can change the
document structure, style, and content.
The DOM represents the document as nodes and
objects; that way, programming languages can interact
with the page.
HTML DOM Node Tree
XML Programming with DOM
XML DOM is a standard object model for XML.
XML documents have a hierarchy of informational
units called nodes;
DOM is a standard programming interface of
describing those nodes and the relationships between
them.
XML DOM also provides an API that allows a
developer to add, edit, move or remove nodes at
any point on the tree in order to create an
application.
Advantages of XML DOM
XML DOM is language and platform
independent.
XML DOM is traversable
Information in XML DOM is organized in a hierarchy
which allows developer to navigate around the
hierarchy looking for specific information.
XML DOM is modifiable
It is dynamic in nature providing the developer a
scope to add, edit, move or remove nodes at any
point on the tree.
DTD
A document type definition (DTD) provides you with the
means to validate XML files against a set of rules.
When you create a DTD file, you can specify rules that control
the structure of any XML files that reference the DTD file.
A DTD can contain declarations that define elements,
attributes, notations, and entities for any XML files that
reference the DTD file.
Usually placed in separate file
XML refers to HTML file using following header:
<!DOCTYPE root-element SYSTEM
"filename">
DTD can be placed inline
An XML document is Valid if it conforms to the DTD
Limitations of DTD
DTD is weaker than database schemas
DTD does not have XML syntax and offers only
limited support for types or name spaces
No abstractions such as sets
DTD provides very limited support for modularity,
reuse, and evolution of schemas.
No constraints
XML-Schema provides these capabilities
Important for e-commerce
XML-Schema
Replacement for DTDs
Written in XML
More extensible to future additions
Support built-in and user-defined data types
Including typed references and complex data
types
Support constraints
XML-Schema
<xs:schema> header has following attributes:
Namespace for XML Schema built-in tags
xmlns:xs="http://www.w3.org/2001/XMLSchema"
Namespace for elements defined by schema
targetNamespace=“http://www.uridekel.com”
Default namespace
xmlns=“http://www.uridekel.com”
Whether documents must use qualified names
elementFormDefault="qualified"
XML file refers to schema :
<note xmlns="http://www.uridekel.com"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation=http://www.uridekel.com/pers.xsd>
Advantages of XML-Schema
It is easier to describe allowable document
content.
It is easier to validate the correctness of data.
It is easier to define data facets (restrictions on
data)
It is easier to define data patterns (data formats)
It is easier to convert data between different data
types.
XSL
Extensible Stylesheet Language
Intended to assist in presenting XML data
CSS is not enough because it refers to HTML tags that
have some display semantics
Responsible for transforming an XML document into an
XHTML document
Consists of three languages:
XSLT for transforming XML documents
XPath for defining parts of XML documents
XSL-FO for formatting the elements
XSLT
XSL (eXtensible Stylesheet Language) is a
styling language for XML.
XSLT stands for XSL Transformations.
XSLT is most often used to convert data
between different XML schemas or to convert
XML data into web pages or PDF documents.
Activating XSL
Include <?xml-stylesheet directive in XML
XML can be displayed in browser
Couples data and presentation
Use offline XSLT transformator
Typically useful for data processing
Programmatically perform transformation in HTML
file using scripting <html><body>
<script type="text/javascript">
xml = new ActiveXObject("Microsoft.XMLDOM")
xml.load("cdcatalog.xml")
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.load("cdcatalog.xsl")
document.write(xml.transformNode(xsl))
</script> </body> </html>
XPath
A system for referring to XML tree elements
Used in XSLT for matching templates
Similar to directory structure
Absolute paths start with /
Relative paths starts start with child name
Parent is selected with ..
Ignore ancestors with //
e.g., //cd selects all cd elements
Variety of special functions
XML-FO
Extensible Stylesheet Language Formatting
Objects
A W3C language for formatting XML data
XSL-FO (XSL Formatting Objects) is a markup
language for XML document formatting that is
most often used to generate PDF files.
XSL-FO is part of XSL (Extensible Stylesheet
Language), a set of W3C technologies designed
for the transformation and formatting of XML
data.
XQuery
A standard for SQL-like queries on XML data
Still at the W3C draft stage
Relies on XPath and uses its data model
Supports simple queries:
e.g., doc("books.xml")/bib/book[price<50]
Supports complex queries with FLWOR:
e.g., for $x in doc("books.xml")/bib/book
where $x/price>50 order by $x/title return
$x/title
XForms
A new infrastructure for web forms
XForms is an XML format used for collecting inputs from
web forms
XForms was designed to be the next generation of
HTML/XHTML forms, but is generic
In contrast to the original web forms (originally defined in
HTML), the creators of XForms have used a model-view-
controller (MVC) approach.
Separates form functionality from presentation
Document Format:
Vector and 3D Graphics
VRML, X3D, SVG
Virtual Reality Modeling
Language (VRML)
Is an open-standard programming language used to
create 3D interactive scenes and objects for the web.
It was created in the 1990s as a way to represent virtual
reality environments in a standard format that could be
easily shared and viewed over the internet.
It is very similar to Hypertext Markup Language (HTML).
VRML files contain information about the geometry,
appearance, and behavior of 3D objects and can include
textures, colors, animations, and interactivity.
VRML scenes can be viewed using a VRML browser
plug-in or a standalone VRML viewer.
X3D
X3D (Extensible 3D) is a set of royalty-free ISO/IEC
standards for declaratively representing 3D
computer graphics.
Successor of VRML
Developed by Web3D consortium
XML based
X3D includes multiple graphics file formats,
programming-language API definitions, and run-time
specifications for both delivery and integration of
interactive network-capable 3D data.
Scalable Vector Graphics
(SVG)
Scalable Vector Graphics (SVG) is an image format
based on XML, a language used to store and transport
data.
Allow for the creation of two-dimensional graphics that
can be interactively animated.
Standard for 2D graphics and applications
W3C XML based standard
Requires browser plug-in to view
Client Side:
Scripting Languages
JavaScript, JSON, VBScript,
DHTML
Client-Side Scripting
Programs are written in a separate programming (or
scripting) language
e.g., JavaScript, JScript, VBScript
Programs are embedded in the HTML of a Web page,
with (HTML) tags to identify the program component
e.g., <script type="text/javascript"> … </script>
The browser executes the program as it loads the
page, integrating the dynamic output of the program
with the static content of HTML
Could also allow the user (client) to input information
and process it, might be used to validate input before
it’s submitted to a remote server
Client-Side Scripting
A scripting language is a simple, interpreted programming
language:
scripts are embedded as plain text, interpreted by
application
simpler execution model: don't need compiler or
development environment
saves bandwidth: source code is downloaded, not
compiled executable
platform-independence: code interpreted by any script-
enabled browser
but: slower than compiled code, not as powerful/full-
featured
Limitations of Client-Side
Scripting
Since script code is embedded in the page, it is
viewable to the world
For security reasons, scripts are limited in what they
can do
e.g., can't access the client's hard drive
Since they are designed to run on any machine
platform, scripts do not contain platform specific
commands
Script languages are not full-featured
e.g., JavaScript objects are very crude, not good for
large project development
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
Often used to validate form data
Weak typing
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.
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
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
JavaScript Object Notation
(JSON)
A common use of JSON is to read data from a web
server, and display the data in a web page.
JSON stands for JavaScript Object Notation.
JSON is lightweight data-interchange format.
JSON is easy to read and write than XML.
JSON is language independent.
JSON supports array, object, string, number and
values.
VBScript
Microsoft’s answer to JavaScript
Never been supported by Netscape
Less in use now
Use <script type="text/vbscript">
Similar to JavaScript
Follows Visual Basic look and feel
Possible to declare variables
Separates procedures and functions
Dynamic HTML (DHTML)
is a web-development technique combining HTML, CSS,
and JavaScript to create dynamic, interactive web pages
and complex web applications.
It uses the Document Object Model (DOM) to manipulate
content spontaneously and respond to user interactions
in real time without reloading the entire page
DHTML is a marketing buzzword
It is not a W3C standard
Client Side: Embedding
Interactive Content
Java Applets, ActiveX controls,
ASP.NET controls
Java Applets
Precompiled Java programs which can run
independently within a browser
Main applet class inherits from
java.applet.Applet
Can be included in an HTML page, much in the same
way an image is included in a page.
Run by the browser's Java virtual machine.
The HTML document contains tags, which specify the
name of the Java applet and its Uniform Resource
Locator (URL).
These Java applets are what enable Web pages to
contain animated graphics or interactive content.
Java Applets
Applet API facilitates browser-related tasks
Obtain parameters from the <APPLET> tag
Load files relative to the applet or page URL
Setting status messages on the browser
Interact with other applets on the page
Make the browser display a document.
Play sounds.
ActiveX Controls
An ActiveX control is a small program that other
applications can reuse to enable the applications to
perform specific functions, such as displaying a calendar
or playing a video., without the extra development work.
ActiveX adds web-related features
Security
Digital signatures and licensing
Many limitations
Works only in Microsoft browsers
Numerous security holes
Very difficult to develop in C++
Simple in visual basic, but not as powerful
More component and UI oriented than Java applets
ASP.NET Controls
The equivalents of ActiveX controls in the Microsoft .NET
Framework
ASP.NET provides web forms controls that are used to
create HTML components.
Categories as server and client based.
ASP.NET uses five types of web controls, which are:
HTML controls
HTML Server controls
ASP.NET Server controls
ASP.NET Ajax Server controls
User controls and custom controls
