sheet 1xml technology in e-commerce 2001lecture 1 xml technology in e-commerce lecture 1 www, html,...

Sheet 1XML Technology in E-Commerce 2001 Lecture 1

XML Technology in E-Commerce

Lecture 1

WWW, HTML, CSS, XML, Meta-modeling


Lecture Outline

• World Wide Web - facts, architecture;

• HTML;

• CSS;

• XML– Markups;– Well-formedness;– Meta-modeling;


• WWW– Global hypertext project at CERN;– Proposed by Tim Berners-Lee in 1989;

• Web Consortium (W3C) - www.w3.org– Founded in 1994;– Three hosts - MIT, INRIA, Keio University;– Leads the evolution of the Web;– More than 20 web-related specifications;

World Wide Web


World Wide WebArchitecture

Web Server

Web Browser

HTTP request for Web Resource

HTTP response - usually a Web page

• HTTP - Hypertext Transport Protocol;

• HTML - Hypertext Markup Language;

• URI - Uniform Resource Identifier - a naming scheme for resources on the Web;


HTMLExample

<html>

<head>

<title> XML Technology in E-Commerce</title>

</head>

<body>

<h1>Lecture 1</h1>

<p> Example of HTML</P>

<p> Resources: <a href=“http://www.w3.org”> W3C </a> Web Consortium</p>

</body>

</html>

Other Examples - Deitel 2.4, page 26; 3.2, page 47


• Enable development of web applications - user interface is presented by the browser;

• Web server handles form data through server extensions;

• Opens a possibility for dynamic web pages;

• CGI (Common Gateway Interface) - protocol for data exchange between the server and its extensions (CGI scripts);

• Popular languages for CGI programming - Perl, C, Python, Java, VBScript, JavaScript;

HTMLForms

Examples - Deitel 3.4, page 52


HTMLLinks

Web page

Web Resource

• Link has two ends (anchors) and direction;• A element - sets up an anchor:

– <a href=“http://java.sun.com”>Java Home</a> sets up a source anchor. href attribute contains an URI;

– <a name=“dest”> TOC </a> - sets up a destination anchor;

• Link behavior - destination resource is retrieved and displayed;


• Meta data about the document:

<meta name=“author” content=“John Smith”>

<meta name=“address” content=“an address”>

• HTTP response headers:

<meta http-equiv=“refresh” content=“1000;

http://www.foo.com”>

• Data for search agents:

<meta name=“keywords” content=“XML, WEB”>

HTML<meta> tags usage


• Multimedia content - plug-in and ActiveX technology;

• Scripts - dynamic and interactive web pages on the

client side;

• Java Applets - programs executed in the browser

environment;

• HTML editors - FrontPage, Dreamweaver, NetObjects

Fusion, Adobe GoLive;

Demo: Editing web pages with FrontPage

HTMLMultimedia, extra functionality, editors


CSSCascading Style Sheets

• Purpose - specify the layout of web pages;• Benefits:

– Separate structure from presentation;

– Impose consistent look and feel to the entire site;

– Promotes reusability;

• Specifications:– CSS level 1 and 2;

– CSS level 3 - work in progress;


• Inline styles<p style=“font-size: 20 pt; color: blue”> some text </p>

• style element<style type=“text/css”>

p {font-size : 20pt; color : blue;}

</style>

• External style sheets<head> <link rel=“stylesheet” type=“text/css”

href=“aStyle.css”></head>

CSSDeclaration


• Style origin:– User agent (browser) default style sheet;

– User style;

– Author style;

• Cascading order - how to resolve conflicts between style rules;

• Inheritance - an element inherits style properties

from its ancestors;

CSSCascading and Inheritance

More info - Deitel 4.4, page 84


XMLXML, HTML, SGML

HTML Drawbacks:

• Fixed Tags Set

• Poor Linking

• Does not support validation

• Simple structures

• Specifies only presentation

Relations between SGML, HTML and XML:


XMLIdea

Sherlock Holmes

Baker Street 221b

London

England

<name> </name>

<street> </street>

<city> </city>

<country> </country>

<address>

</address>


XMLBasic terms

Annotated XML Specification: http://www.xml.com/axml/testaxml.htm


• Characters in the XML document form markups and character data;

• Markups:

– start, end and empty element tags;

– entity and character references;

– comments;

– CDATA delimiters;

– Document type declarations;

– Processing Instructions;

• All other characters form character data;

XMLCharacters and Markups


<name attr1=“value1” >……..Content………..</name>

XMLElements and element’s content

Start tag End tagElement’s content

Element’s content:

• Only elements;

• Empty;

• Mixed (character data and other elements);

<img src=“anImage.gif” /> - Empty element

Attribute specification


<person age=“45”>

<name>Sherlock Holmes</name>

<address>

<street>Baker Street 221b</street>

<zip>1111</zip>

<city>London</city>

<country>England</country>

</address>

<homepage href=“http://www.sherlock-holmes.co.uk/”/>

<note><em>Sherlock Holmes</em> and <em>Doctor Watson</em> lived at 221b Baker Street between 1881-1904, according to the stories written by <em>Sir Arthur Conan Doyle</em>.</note>

</person>

XMLExample


• Processing Instructions:<?xml:stylesheet type="text/css" href="bach.css"?>

<?cocoon-process type="xslt"?>

• CDATA Sections:<![CDATA[ <H1> Hello World! </H1> ]]>

<![CDATA[

if((x==0) && (y <2)) System.out.println(“Ok!”);

]]>

XMLProcessing Instructions and CDATA Sections


• Purpose - resolve name collisions in a single XML document;

• Definition - Set of names uniquely identified by URI, used for element types and attribute names;

• Namespace declaration:<html:html xmlns:html=“http://www.w3.org/TR/REC-html40”>

<html:head>……….</html:head>

<html:body>……….</html:body>

</html:html>

XMLNamespaces

Examples - Deitel 5.8, page 123


XML Meta-modelling - well-formedness

EBNF

Pascal Grammar

a Pascal Program

Defines

Defines

EBNF

XML GrammarWF Constraints

an XML Document

Defines

Defines


XML Meta-modelling - validity


• Browser support:– Netscape - XML, CSS1, CSS2 (partly);

– IE 5 - XML, CSS1, CSS2 (partly), XSLT;

– Opera - XML, CSS1, CSS2(partly);

• XML Editors:– XML Spy 3.5;

– XMetal;

– Epic;

– FrameMaker;

Demo: Visualizing XML files in IE5, editing with XML Spy

XML Tool Support


Summary• Today’s Web - HTTP, URI, HTML, CSS;

• XML is a technology for creating markup languages;

• XML documents contain character data and markups;

• Elements are the main building blocks for the document

structure;

• Document well-formedness means conformance to the

XML grammar and constraints;

Read: Deitel 1..5, Well-formedness and Validity of XML Documents

Skip: Deitel 3.3, 3.5, 3.7, 3.9, 3.10, 4.6 .. 4.10;

Assignment: Deitel Ex 5.4 and Ex 5.7, pages 132, 133