2440: 211 Interactive Web Programming

1
2440 211 Interactive Web Programming

• Introduction to the Internet
• the World Wide Web

2
World Wide Web

• Also called the Web
• Origins started at the European Laboratory for
  Particle Physics (CERN) in Geneva, Switzerland
• By Tim Berners-Lee
• In 1990/91

3
Web Terminologies

• Link (hyperlink or hypertext link) text,
  graphic, or other Web elements that connects to
  additional data on the Web
• Web Page a document on the Web
• Uniform Resource Locator (URL) - a unique address
  used to identify documents on the Web
• Web Browser software for displaying Web pages
• E.g. Mosaic, Navigator, Internet Explorer,
  Mozilla, Opera
• Web server makes Web pages available to the Web
• HyperText Transfer Protocol (HTTP) program used
  to help transfer files over the Web
• HyperText Markup Language (HTML) the language
  used to define the structure and content of Web
  pages

4
HTML

• HTML (HyperText Markup Language)
• Used to be the heart of every Web page
• A derivative of SGML (Standard Generalized Markup
  Language)
• SGML is an international standard for
  representing text in an electronic form for
  exchanging documents independently
• The World Wide Web Consortium (W3C) decided to
  discontinue HTML, as of October 2001
• W3C is the Web standards committee

5
XML

• XML (eXtensible Markup Language)
• A set of guidelines for delimiting text through a
  system of tags
• Follows rigid guidelines

6
XHTML

• eXtensible HyperText Markup Language
• Slowly replacing HTML
• Combines the strict rules and syntax guidelines
  of XML (eXtensible Markup Language) with HTML

7
Versions of HTML XHTML
8
HTML Page Format

• HTML pages follow a basic structure as follows

9
XHTML Page Format

• XHTML pages follow a basic structure as follows

10
XHTML Page Format

• Below are the explanations to the XHTML page
  structure
• XML declaration identifies document as XHTML
  document
• Document Type Definition (DTD) URL points to a
  file that outlines the available elements,
  attributes, and usage
• Name Space URL points to a files that gives
  detailed information about the particular XML
  vocabulary (XHTML)

11
DTDs

• Transitional supports many of the
  presentational features of HTML, including the
  deprecated elements and attributes
• Best used for older documents with deprecated
  features
• Frameset used for documents containing frames,
  and also supports deprecated elements and
  attributes
• Strict does not allow any presentational
  features or deprecated HTML elements and
  attributes
• Does not support frames or inline frames
• Best used for documents that need to strictly
  conform to the latest standards

12
Creating Valid XHTML Documents

• The DTD used depends on the content of the
  document and the needs of your users
• To support old browsers, use the transitional DTD
• To support old browsers in a framed Web site, use
  the frameset DTD
• To support more current browsers and to weed out
  any use of deprecated features, use the strict DTD

13
Creating a Valid Document

• Elements not allowed under the strict DTD
• applet - iframe
• basefont - isindex
• center - menu
• dir - noframes
• font - s
• frame - strike
• frameset - u

14
Attributes Prohibited in the Strict DTD
15
Required XHTML Attributes
16
Inserting the DOCTYPE Declaration

• The DOCTYPE declaration tells XML parsers what
  DTD is associated with the document
• lt!DOCTYPE root type id urlgt

17
The XHTML Namespace

• A namespace is a unique identifier for elements
  and attributes originating from a particular
  document type (like XHTML or MathML)
• Two types of namespaces
• Default applied to a root element and any
  element within it
• ltroot xmlnsnamespacegt

New Perspectives on HTML and XHTML, Comprehensive
17
18
The XHTML Namespace

• Local applies to only select elements
• Each element in the local namespace is marked by
  a prefix attached to the element name
• xmlns prefixnamespace
• Identify any element belonging to that namespace
  by modifying the element name in the tag
• prefixelement

19
Setting the XHTML Namespace

• To set XHTML as the default namespace for a
  document, add the xmlns attribute to the html
  element with the following value
• lthtml xmlnshttp//www.w3.org/1999/xhtmlgt

New Perspectives on HTML and XHTML, Comprehensive
19
20
Using Style Sheets and XHTML

• Parsed character data (PCDATA) is text parsed by
  a browser or parser
• Unparsed character data (CDATA) is text not
  processed by the browser or parser
• A CDATA section marks a block of text as CDATA
  so that parsers ignore any text within it

New Perspectives on HTML and XHTML, Comprehensive
20
21
HTML vs. XHTML

• Some major differences between HTML and XHTML
  include the following
• All element attributes names are in lowercases
• E.g. ltpgt instead of ltPgt
• All attribute values must be contained within
  single or double quotes
• E.g. ltbody bgcolorffffffgt instead of ltbody
  bgcolorffffffgt
• All nonempty elements must have a closing tag
• E.g. ltpgtXHTMLlt/pgt instead of ltpgtHTML
• All empty tags should be written with a space and
  a / symbol at the end of the tag
• E.g. ltbr /gt instead of ltbrgt

22
HTML vs. XHTML
23
Creating a Well-Formed Document

• XHTML documents must also include a single root
  element that contains all other elements
• For XHTML, that root element is the html element
• Attribute minimization is when some attributes
  lack attribute values
• XHTML doesnt allow attribute minimization

24
File-Naming Conventions

• XHTML is much more restrictive
• The following restrictions relate to file-naming
  conventions
• Do not use spaces
• Avoid capital letters
• Avoid illegal characters

25
Attribute minimization in HTML and XHTML
26
CSS

• CSS (Cascading Style Sheet)
• Used for many different purposes
• Used mainly to separate presentation from the
  structure of a page
• Presentation looks of a page
• Structure meaning of a pages content

27
CSS Versions

• CSS1 (1996) introduced styles for
• Fonts
• Text
• Color
• Background
• Block-level elements
• CSS2 (1998) added support for
• Positioning
• Visual formatting
• Media types
• Interfaces
• CSS3 (still in development)

28
DHTML

• DHTML (Dynamic HTML)
• A collection of different technologies including
• XHTML
• JavaScript
• DOM (Document Object Model)
• CSS

29
JavaScript

• Developed by Netscape in 1996
• Has become almost as popular as HTML
• Has nothing to do with the Java Programming
  Language
• But Netscape licensed the name from Sun
  Microsystems in hopes of increasing acceptance of
  the new scripting protocol

30
Web Application

• Web site that delivers dynamic data
• Other names include
• Data-driven
• Database-driven
• Dynamic sites
• Involves tools like
• Database
• Server-side scripting such as like Active
  Server Pages (ASP), Java Server Pages (JSP),
  ASP.NET, ColdFusion, PHP, etc

31
JavaScript

• A client-side scripting language
• Language that runs (interpreted) on a local Web
  browser
• An interpreter executes the language with a
  scripting engine
• Enables interactivity on Web pages
• Developed by Netscape in 1996
• First introduced in the Netscape Navigator
  browser as LiveScript
• Different from the Java programming language
• Microsoft developed a version of JavaScript
  called JScript for its Internet Explorer browser
• European Computer Manufacturers Association
  (ECMA) developed a standard called ECMAScript
  to avoid the differences in commands between
  JavaScript and Jscript
• Some Jscript commands cannot be executed on the
  Navigator browser
• Some JavaScript commands cannot be executed on
  the Internet Explorer browser

32
JavaScript vs. Java

• Below is a comparison between JavaScript and Java

33
Versions of JavaScript

• JavaScript 1.0 (1995)
• JavaScript 1.1 (1996)
• JavaScript 1.2 (1997)
• JavaScript 1.3 (1998)
• JavaScript 1.5 (2001)
• Both JScript 5.5 and JavaScript 1.5 conform to
  ECMAScript 3
• Web browsers still refer to ECMAScript as
  JavaScript

34
Web Application

• Web site that delivers dynamic data
• Uses resources like
• Client-side scripting
• Server-side scripting
• Databases

35
Client-Side Scripting

• Scripting language that runs on a local Web
  browser
• Examples
• JavaScript by Netscape
• JScript by Microsoft Corporation
• ECMAScript standards by ECMA
• VBScript by Microsoft Corporation

36
Server-Side Scripting

• Scripting language that executes on a Web server
• Examples
• Active Server Pages (ASP) uses JavaScript or
  VBScript
• ASP.NET uses C or Visual Basic
• Java Server Pages uses Java
• PHP HyperText Preprocessor (PHP) syntax
  borrowed from C, Java Perl
• ColdFusion
• Common Gateway Interface (CGI) mostly with Perl
• Perl has features from C, BASIC, etc

37
Databases

• A collection of information about related
  entities
• Entity (relation or table) a set of records
• Record (tuple or row) a collection of fields
• Field (attribute or column) a property or
  characteristic of an entity
• Relationship an association between entities
• Defined and manipulated using the Structured
  Query Language (SQL) on DataBase Management
  Systems (DBMS)
• SQL the universal language for database
  definition, and management
• DBMS the software for managing databases