Upload
olwen
View
40
Download
0
Embed Size (px)
DESCRIPTION
2440: 211 Interactive Web Programming. Introduction to the Internet & the World Wide Web. World Wide Web. Also called the Web A resource on the Internet to access data - PowerPoint PPT Presentation
Citation preview
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
Introduction to Web Design 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
Introduction to Web Design 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
Introduction to Web Design 5
XML
XML (eXtensible Markup Language) A set of guidelines for delimiting text
through a system of tags Follows rigid guidelines
Introduction to Web Design 6
XHTML
eXtensible HyperText Markup Language Slowly replacing HTML Combines the strict rules and syntax
guidelines of XML (eXtensible Markup Language) with HTML
Introduction to Web Design 7
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
Introduction to Web Design 8
Versions of HTML & XHTML
Introduction to Web Design 9
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>
Introduction to Web Design 10
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>
Introduction to Web Design 11
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)
Introduction to Web Design 12
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
Introduction to Web Design 13
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
Introduction to Web Design 14
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
Introduction to Web Design 15
Attributes Prohibited in the Strict DTD
Introduction to Web Design 16
Required XHTML Attributes
Introduction to Web Design 17
Inserting the DOCTYPE Declaration
• The DOCTYPE declaration tells XML parsers what DTD is associated with the document
<!DOCTYPE root type “id” “url”>
Introduction to Web Design 18
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
Introduction to Web Design 19
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
Introduction to Web Design 20
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>
New Perspectives on HTML and XHTML, Comprehensive 20
Introduction to Web Design 21
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 21
Introduction to Web Design 22
HTML vs. XHTML Some major differences between HTML and
XHTML include the following: All element attributes names are in lowercases
E.g. <p> instead of <P> 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. <p>XHTML</p> instead of <p>HTML
All empty tags should be written with a space and a / symbol at the end of the tag E.g. <br /> instead of <br>
Introduction to Web Design 23
HTML vs. XHTML
Introduction to Web Design 24
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
Introduction to Web Design 25
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
Introduction to Web Design 26
Attribute minimization in HTML and XHTML
Introduction to Web Design 27
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
Introduction to Web Design 28
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)
Introduction to Web Design 29
DHTML
DHTML (Dynamic HTML) A collection of different technologies
including: XHTML JavaScript
DOM (Document Object Model) CSS
Introduction to Web Design 30
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
Introduction to Web Design 31
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
Introduction to Web Design 32
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
Introduction to Web Design 33
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
Introduction to Web Design 34
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
Introduction to Web Design 35
Web Application
Web site that delivers dynamic data Uses resources like:
Client-side scripting Server-side scripting Databases
Introduction to Web Design 36
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
Introduction to Web Design 37
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
Introduction to Web Design 38
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