Presentation is loading. Please wait.

Presentation is loading. Please wait.

2440: 211 Interactive Web Programming Introduction to the Internet & the World Wide Web.

Similar presentations


Presentation on theme: "2440: 211 Interactive Web Programming Introduction to the Internet & the World Wide Web."— Presentation transcript:

1 2440: 211 Interactive Web Programming Introduction to the Internet & the World Wide Web

2 Introduction to Web Design2 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

3 Introduction to Web Design3 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 Introduction to Web Design4 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

5 Introduction to Web Design5 XML  XML (eXtensible Markup Language)  A set of guidelines for delimiting text through a system of tags  Follows rigid guidelines

6 Introduction to Web Design6 XHTML  eXtensible HyperText Markup Language  Slowly replacing HTML  Combines the strict rules and syntax guidelines of XML (eXtensible Markup Language) with HTML

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 Design7

8 8 Versions of HTML & XHTML

9 Introduction to Web Design9 HTML Page Format  HTML pages follow a basic structure as follows 1. 1. 2. 2. 3. 3. 4. 4. 5. 5. 6. 6. 7. 7.

10 Introduction to Web Design10 XHTML Page Format  XHTML pages follow a basic structure as follows 1. 1. 2.<!DOCTYPE html public “-//W3C//DTD XHTML 1.0 Stric//ENhttp://www.w3.org/TRxhtml1/DTD/xhtml1-stric.dtd http://www.w3.org/TRxhtml1/DTD/xhtml1-stric.dtd 3. 3. 4. 4. 5. 5. 6. 6. 7. 7. 8. 8. 9. 9.

11 Introduction to Web Design11 XHTML Page Format…  Below are the explanations to the XHTML page structure 1.XML declaration – identifies document as XHTML document 2.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)

12 Introduction to Web Design12 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

13 Introduction to Web Design13 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

14 Introduction to Web Design14 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

15 Introduction to Web Design15 Attributes Prohibited in the Strict DTD

16 Introduction to Web Design16 Required XHTML Attributes

17 Introduction to Web Design17 Inserting the DOCTYPE Declaration The DOCTYPE declaration tells XML parsers what DTD is associated with the document The DOCTYPE declaration tells XML parsers what DTD is associated with the document

18 Introduction to Web Design18 The XHTML Namespace A namespace is a unique identifier for elements and attributes originating from a particular document type (like XHTML or MathML) A namespace is a unique identifier for elements and attributes originating from a particular document type (like XHTML or MathML) Two types of namespaces: Two types of namespaces: -Default: applied to a root element and any element within it - - New Perspectives on HTML and XHTML, Comprehensive18

19 Introduction to Web Design19 The XHTML Namespace Local: applies to only select elements 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

20 Introduction to Web Design20 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: To set XHTML as the default namespace for a document, add the xmlns attribute to the html element with the following value:   New Perspectives on HTML and XHTML, Comprehensive20

21 Introduction to Web Design21 Using Style Sheets and XHTML Parsed character data (PCDATA) is text parsed by a browser or parser 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 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, Comprehensive21

22 Introduction to Web Design22 HTML vs. XHTML  Some major differences between HTML and XHTML include the following:  All element attributes names are in lowercases  E.g. instead of  E.g. instead of  All attribute values must be contained within single or double quotes  E.g. instead of  E.g. instead of  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  E.g. instead of

23 Introduction to Web Design23 HTML vs. XHTML

24 Introduction to Web Design24 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

25 Introduction to Web Design25 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

26 Introduction to Web Design26 Attribute minimization in HTML and XHTML

27 Introduction to Web Design27 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

28 Introduction to Web Design28 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)

29 Introduction to Web Design29 DHTML  DHTML (Dynamic HTML)  A collection of different technologies including:  XHTML  JavaScript  DOM (Document Object Model)  CSS

30 Introduction to Web Design30 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

31 Introduction to Web Design31 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

32 Introduction to Web Design32 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

33 Introduction to Web Design33 JavaScript vs. Java  Below is a comparison between JavaScript and Java JavaScriptJava An 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

34 Introduction to Web Design34 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

35 Introduction to Web Design35 Web Application  Web site that delivers dynamic data  Uses resources like:  Client-side scripting  Server-side scripting  Databases

36 Introduction to Web Design36 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

37 Introduction to Web Design37 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

38 Introduction to Web Design38 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


Download ppt "2440: 211 Interactive Web Programming Introduction to the Internet & the World Wide Web."

Similar presentations


Ads by Google