2440: 211 interactive web programming

2440: 211 Interactive Web Programming

Introduction to the Internet& the World Wide Web

Introduction to Web Design 2

World Wide Web Also called the Web A resource on the Internet to access data Origins started at around 1989 at the European

particle physics (nuclear) research laboratory (CERN) near Geneva, Switzerland By Timothy Berners-Lee and other researchers Hypertext was used to organize interconnected data

sources to be accessed through hyperlinks


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


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


XML

XML (eXtensible Markup Language) A set of guidelines for delimiting text

through a system of tags Follows rigid guidelines


XHTML

eXtensible HyperText Markup Language Slowly replacing HTML Combines the strict rules and syntax

guidelines of XML (eXtensible Markup Language) with HTML


HTML & XHTML HTML versions 1.0, 2.0, 3.0, 3.2, 4.01 released

from 1989 through 1999 XHTML versions 1.0, 1.1 released in 2001, 2002

respectively XHTML version 2.0 was discontinued

HTML 5.0 and XHTML 5.0 in development HTML – by Web Hypertext Application Technology

Working Group (WHATWG) led by Ian Hickson (from Google, formerly of Opera Software)

XHTML 5.0 – by an HTML Working Group


Versions of HTML & XHTML

HTML Page Format HTML pages follow a basic structure as follows

1. <html>2. <head>3. <title> </title>4. </head>5. <body>6. </body>7. </html>

XHTML Page Format XHTML pages follow a basic structure as

follows1. <?xml version”1.0”?>2. <!DOCTYPE html public “-//W3C//DTD XHTML 1.0 Stric//EN

http://www.w3.org/TRxhtml1/DTD/xhtml1-stric.dtd3. <html xmlns=“http://www.w3.org/19999/xhtml”>4. <head>5. <title></title>6. </head>7. <body>8. </body>9. </html>

http://www.w3.org/TRxhtml1/DTD/xhtml1-stric.dtd


XHTML Page Format… Below are the explanations to the

XHTML page structure1. XML declaration – identifies document as

XHTML document2. Document Type Definition (DTD) – URL

points to a file that outlines the available elements, attributes, and usage

3. Name Space – URL points to a files that gives detailed information about the particular XML vocabulary (XHTML)


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


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


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


Attributes Prohibited in the Strict DTD


Required XHTML Attributes

Inserting the DOCTYPE Declaration

• The DOCTYPE declaration tells XML parsers what DTD is associated with the document

<!DOCTYPE root type “id” “url”>

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- <root xmlns=“namespace”>

New Perspectives on HTML and XHTML, Comprehensive 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: prefix=“namespace” Identify any element belonging to that

namespace by modifying the element name in the tag: prefix:element

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: <html xmlns=http://www.w3.org/1999/xhtml>


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


HTML vs. XHTML Some major differences between HTML and

XHTML include the following: All element attributes names are in lowercases

E.g. instead of All attribute values must be contained within single or

double quotes E.g. <body bgcolor=“#ffffff”> instead of <body bgcolor=#ffffff>

All nonempty elements must have a closing tag E.g. XHTML instead of HTML

All empty tags should be written with a space and a / symbol at the end of the tag E.g. instead of


HTML vs. XHTML


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 doesn’t allow attribute minimization


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


Attribute minimization in HTML and XHTML


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 page’s content


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)


DHTML

DHTML (Dynamic HTML) A collection of different technologies

including: XHTML JavaScript

DOM (Document Object Model) CSS


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


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


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


JavaScript vs. Java Below is a comparison between JavaScript and

JavaJavaScript JavaAn interpreted language A compiled language

Requires a text editor Requires a Java Developers Kit (JDK) for create applets

Requires a browser that can interpret code Requires a Java Virtual Machine (JVM) or interpreter to run applets

Program files are integrated with HTML/XHTML code

Program files are distinct from the HTML/XHTML code

Source code is accessible to the user Source code is hidden from the user

Simpler, requiring less programming knowledge and experience

Powerful, requiring programming knowledge and experience

Object-based language Object-oriented language


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


Web Application

Web site that delivers dynamic data Uses resources like:

Client-side scripting Server-side scripting Databases


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


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


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