Lecture 2 Web Technologies Part 1 1

Web Technologies l l l HTML XHTML CSS XML Java. Script VBSCRIPT DOM DHTML AJAX E 4 X WMLScript l l l SQL ASP ADO PHP. NET SMIL SVG FLASH Java applets Java servlets Java Server Page 2

HTML l l l HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor 3

HTML <html> <head> <title> Title of page </title> </head> <body> This is my first homepage. <b> This text is bold </b> </body> </html> 4

HTML Versions l l l The history of HTML at W 3 C starts with HTML 3. 2. New versions were followed a few years later by HTML 4. 0, then HTML 4. 01 is the last version of HTML, and is also the final W 3 C specification to define the semantics of markup. 5

What Is XHTML? l l l XHTML stands for EXtensible Hyper. Text Markup Language. XHTML is aimed to replace HTML. XHTML is almost identical to HTML 4. 01. XHTML is a stricter and cleaner version of HTML. XHTML is HTML defined as an XML application. XHTML is a W 3 C Recommendation. 6

XHTML l l l XHTML 1. 0 was created shortly after HTML 4. 01 to help the transition of hypertext to a new generation of mark-up languages for text. XHTML 1. 1 is an additional step toward a more flexible version of hypertext with the full benefits of XML architecture and integration of different technologies. Note that XHTML 1. 1 has slightly improved the semantics of HTML 4. 01 by including the Ruby module, used in particular languages like Japanese scripts. 7

Why XHTML? l l l XML is a markup language where everything has to be marked up correctly, which results in "well-formed" documents. XML was designed to describe data and HTML was designed to display data. Today's market consists of different browser technologies: computers, mobile phones and helds. Mobile phones and held devices do not have the resources or power to interpret a "bad" markup language. Therefore - by combining HTML and XML, we got a markup language that is useful now and in the future - XHTML pages can be read by all XML enabled devices AND XHTML gives you the opportunity to write "well-formed" documents now, that work in all browsers and that are backward browser compatible 8

Advantages of XHTML l l XHTML is easier to maintain. XHTML is XSL ready. XHTML is easier to teach and to learn. XHTML is ready for the future. 9

XHTML is easier to maintain l l l XHTML elements must be properly nested. All elements and attribute names must appear in lower case. All attribute values must be quoted. Non-Empty Elements require a closing tag. Empty elements are terminated using a space and a trailing slash. No attribute minimization is allowed. 10

XHTML is XSL ready l l XHTML 1. 0 is the reformulation of HTML 4. 01 in XML. Therefore, XHTML documents are hypertext documents and XML documents. XSL is a stylesheet language for XML. A powerful technology has been developed at W 3 C to manipulate and transform XML documents: the Extensible Style sheet Language Transformations (XSLT). 11

XHTML is easier to teach and to learn l The syntax rules defined by XML are far more consistent than those found in HTML and therefore easier to explain than the SGML rules on which HTML is based. 12

XHTML is ready for the future l l When the new version of XHTML becomes a recommendation, XHTML 1. 0 documents will be easily upgradable to this new version, to allow to take advantages of its exciting new features. It’s likely that an XSLT style sheet will be available by then to help you move your XHTML 1. 0 (strict) documents to XHTML 2. 0 documents. 13

What is CSS? l l l l CSS stands for Cascading Style Sheets. Styles define how to display HTML elements. Styles are normally stored in Style Sheets. Styles were added to HTML 4. 0 to solve a problem. (Netscape vs MS Internet Explorer) External Style Sheets can save you a lot of work. External Style Sheets are stored in CSS files. Multiple style definitions will cascade into one. priority: • • Inline Style (inside HTML element) Internal Style Sheet (inside the <head> tag) External Style Sheet Browser default style 14

CSS Versions l The World Wide Web Consortium (http: //www. w 3. org/) has published two main CSS recommendations of style sheets - CSS 1 and CSS 2. l CSS 1 became a recommendation in 1996. l CSS 2 became a recommendation in 1998. 15

CSS Syntax The CSS syntax is made up of three parts: a selector, a property and a value: selector {property: value} body {bgcolor: black} p {font-family: "sans serif"} p {text-align: center ; color: red} 16

CSS l l l Internal style sheet, included within the head element. In-line definition as attributes of elements within the body of a document. External specification in a style sheet. 17

Internal style sheet <head> <style type="text/css"> h 1 {color: red} h 3 {color: blue} </style> </head> 18

In-line Style Sheet <html> <body> <a href="lastpage. htm" style="text-decoration: none"> THIS IS A LINK! </a> </body> </html> 19

External Style Sheet Myhtml … <head> <link rel="stylesheet" type="text/css" href="mystyle. css" /> </head> …. Mystyle. css hr {color: sienna} p {margin-left: 20 px} body {background-image: url("images/back 40. gif")} 20

CSS, Why ? l l l l l By editing a single CSS file, you can make site-wide design changes in seconds. CSS lets you output to multiple formats quickly. CSS lets you use logical names for page elements. You can, for example, give a DIV the name "header", or a H 1 the class "headline". It's self-describing. External CSS files are cached by browsers, improving load time. CSS eliminates the need for messy code -- namely font tags, spacer GIFs and nested tables. CSS lets you do things normal HTML doesn't. Examples: better font control, absolute positioning, nifty borders. Practical use of CSS encourages proper HTML structure, which will improve accessibility and search engine placement. CSS's : hover Pseudo. Class cuts down on the need to use Java. Script onmouseover calls. 21 If you want valid XHTML Strict you have to use it anyway.

What is XML? l l l l XML stands for EXtensible Markup Language. XML is a markup language much like HTML. XML was designed to describe data. XML tags are not predefined. You must define your own tags. XML uses a Document Type Definition (DTD) or an XML Schema to describe the data. XML with a DTD or XML Schema is designed to be self-descriptive. XML is a W 3 C Recommendation. 22

The Main Differences Between XML and HTML • XML was designed to carry data. • XML is not a replacement for HTML. • XML and HTML were designed with different goals: • XML was designed to describe data and to focus on what data is. • HTML was designed to display data and to focus on how data looks. • HTML is about displaying information, while XML is about describing information. 23

XML • Best description of XML is this: XML is a cross-platform, software and hardware independent tool for transmitting information. 24

An example of an XML document <? xml version="1. 0" encoding="ISO-8859 -1"? > <bookstore> <book category="COOKING"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30. 00</price> </book> <book category="CHILDREN"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29. 99</price> </book> ……………. </bookstore> 25

HTML-XML Example (1) XML document : (file name: “xml_note. xml”) <? xml version="1. 0" encoding="ISO-8859 -1" ? > <note> <to>Tove</to> <from>Jani</from> <header>Reminder</header> <body>Don't forget me this weekend!</body> </note> 26

HTML-XML Example (2) <html> <head> <script type="text/javascript“ for="window" event="onload"> var xml. Doc=new Active. XObject("Microsoft. XMLDOM") xml. Doc. async="false" xml. Doc. load("xml_note. xml") nodes=xml. Doc. document. Element. child. Nodes to. inner. Text= nodes. item(0). text from. inner. Text= nodes. item(1). text header. inner. Text=nodes. item(2). text body. inner. Text= nodes. item(3). text </script> <title>HTML using XML data</title> </head> 27

HTML-XML Example (3) <body bgcolor="yellow"> <h 1>W 3 Schools. com Internal Note</h 1> <b>To: </b> <span id="to"> </span> <b>From: </b> <span id="from"></span> <hr> <b><span id="header"></span></b> <hr> <span id="body"></span> </body> </html> 28

HTML-XML Example (4) Output: Tove From: Jani Reminder Don't forget me this weekend! 29

Browser Scripting l l Browser scripting languages allow dynamic behavior to be specified within HTML documents. A scripting language is a lightweight programming language Browsers must support the used scripting language. Browsers are disabled for scripting to prevent the risk of misuse. 30

What is Java. Script? l Java. Script was designed to add interactivity to HTML pages. l Java. Script is a scripting language. l A Java. Script consists of lines of executable computer code. l l l A Java. Script is usually embedded directly into HTML pages. Java. Script is an interpreted language (means that scripts execute without preliminary compilation). Everyone can use Java. Script without purchasing a license. 31

Java. Script l Are Java and Java. Script the Same? l NO! l l Java and Java. Script are two completely different languages in both concept and design! Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++. 32

What can a Java. Script Do? l l l l Java. Script gives HTML designers a programming tool. Java. Script can put dynamic text into an HTML page. Java. Script can react to event. Java. Script can read and write HTML elements. Java. Script can be used to validate data. Java. Script can be used to detect the visitor's browser. Java. Script can be used to create cookies. 33

How to Put a Java. Script Into an HTML Page <html> <body> <script type="text/javascript"> document. write("Hello World!") </script> </body> </html> 34

Where to Put the Java. Script l Head section l Body section l External scripts 35

Java. Script in the head section <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event") } </script> </head> <body onload="message()"> </body> </html> 36

Scripts in the body section <html> <head> </head> <body> <script type="text/javascript"> document. write("Hello World!") </script> </body> 37

Using External Java. Script <html> <head> <script src="xxx. js"> </script> </head> <body> </html> 38

What can a Java. Script Do? <html> <body> <script type="text/javascript"> var d = new Date() var time = d. get. Hours() if (time < 10) { document. write("<b>Good morning</b>") } else { document. write("<b>Good day</b>") } </script> … 39

What can a Java. Script Do? <html> <body> <script type="text/javascript"> for (i = 0; i <= 5; i++) { document. write("The number is " + i) document. write(" ") } </script> <p>Explanation: </p> <p>This for loop starts with i=0. </p> <p>As long as <b>i</b> is less than, or equal to 5, the loop will continue to run. </p> <p><b>i</b> will increase by 1 each time the loop runs. </p> </body> </html> 40

What is VBScript? l l VBScript is a Microsoft scripting language. A scripting language is a lightweight programming language. l VBScript is a light version of Microsoft's programming language Visual Basic. 41

How Does it Work? l When a VBScript is inserted into a HTML document, the Internet browser will read the HTML and interpret the VBScript. l The VBScript can be executed immediately, or at a later event. 42

How to Put VBScript Code in an HTML Document <html> <head> </head> <body> <script type="text/vbscript"> document. write("Hello from VBScript!") </script> </body> </html> 43

Where to Put the VBScript <html> <head> <script type="text/vbscript"> some statements </script> </head> <body> <script type="text/vbscript"> some statements </script> </body> 44

VBScript (Example) html> <head> <script type="text/vbscript"> function greeting() i=hour(time) if i < 10 then document. write("Good morning!") else document. write("Have a nice day!") end if end function </script> </head> <body onload="greeting()"> </body> </html> 45

VBScript (Example) <html> <body> <script type="text/vbscript"> for i = 0 to 5 document. write("The number is " & i & " ") next </script> </body> </html> 46

What is the DOM? l l The HTML Document Object Model (HTML DOM) defines a standard way for accessing and manipulating HTML documents. The DOM presents an HTML document as a tree-structure (a node tree), with elements, attributes, and text. 47

What is the DOM? l l With Java. Script you can restructure an entire HTML document. You can add, remove, change, or reorder items on a page. This access, along with methods and properties to add, move, change, or remove HTML elements, is given through the Document Object Model (DOM). All browsers have implemented this recommendation, and therefore, incompatibility problems in the DOM have almost disappeared. The DOM can be used by Java. Script to read and change HTML, XHTML, and XML documents. 48

Document Tree (Node Tree) <html> <head> <title> My title </title> </head> <body> <h 1> My header </h 1> <a href=“http: //. . > My link </a> </body> </html> 49

Document Tree (Node Tree) 50

HTML DOM Example <html> <head> <script type="text/javascript"> function Change. Color() { document. body. bg. Color="yellow" } </script> </head> <body onclick="Change. Color()"> Click on this document! </body> </html> 51

HTML DOM Access Nodes The get. Element. By. Id() method returns the element with the specified ID: document. get. Element. By. Id("some. ID"); var x=document. get. Element. By. Id("maindiv"); x. parent. Node. remove. Child(x); 52

HTML DOM Access Nodes l The get. Elements. By. Tag. Name() method returns all elements (as a node. List) with the specified tag name. document. get. Elements. By. Tag. Name("p"); var x=document. get. Elements. By. Tag. Name("p"); for (var i=0; i<x. length; i++) { // do something with each paragraph } 53

Java. Script Objects l Window: The top level object in the Java. Script hierarchy. The Window object represents a browser window. A Window object is created automatically with every instance of a <body> or <frameset> tag l Navigator: Contains information about the client's browser l Screen: Contains information about the client's display screen l History: Contains the visited URLs in the browser window l Location: Contains information about the current URL 54

DOM Objects l DOM Anchor DOM Base DOM Button DOM Form DOM Frameset DOM Image DOM Input Checkbox DOM Input Hidden DOM Input Radio DOM Input Submit DOM Link DOM Object DOM Select DOM Table. Row DOM Area DOM Body DOM Event DOM Frame DOM Input Button DOM Input File DOM Input Password DOM Input Reset DOM Input Text DOM Meta DOM Option DOM Style DOM Table. Cell DOM Textarea 55

Window Example <html> <body> <script type="text/javascript"> window. status="Some text in the status bar!!" </script> </body> </html> 56

Window Example <html> <body> <script type="text/javascript"> my. Window=window. open('', 'width=200, height=100') my. Window. document. write("This is 'my. Window'") my. Window. focus() </script> </body> </html> 57

Browser Example <html> <body> <script type="text/javascript"> document. write("<p>Name: ") document. write(navigator. app. Name + "</p>") </script> </body> </html> 58

Screen Example <html> <body> <script type="text/javascript"> document. write("<p>Width: ") document. write(screen. width + "</p>") </script> </body> </html> 59

Anchor Example <html> <head> <script type="text/javascript"> function change. Link() { document. get. Element. By. Id('my. Anchor'). inner. HTML="W 3 Schools"; document. get. Element. By. Id('my. Anchor'). href="http: //www. w 3 schools. com"; document. get. Element. By. Id('my. Anchor'). target="_blank"; } </script> </head> <body> <a id="my. Anchor" href="http: //www. microsoft. com">Microsoft</a> <input type="button" onclick="change. Link()" value="Change link"> </body> </html> 60

Table Example <head> <script type="text/javascript"> function changevalue() { var x=document. get. Element. By. Id('mytable'). cells x[0]. inner. HTML=“Ali" x[1]. inner. HTML=“Veli" x[2]. inner. HTML=“Selami" } </script> </head> <body> <table id="mytable" border=1> <tr> <td id="col 1"> John </td> <td id="col 2"> Doe </td> <td id="col 3"> Alaska </td> </tr> </table> <input type="button" value="Change value" onclick="changevalue()"> …… 61

What is DHTML? l l DHTML stands for Dynamic HTML. DHTML is the art of making HTML pages dynamic. DHTML is a combination of technologies used to create dynamic and interactive Web sites. (Combination of HTML 4. 0, Style Sheets, DOM and Java. Script) DHTML is not a standard defined by W 3 C. DHTML is a "marketing term" - used by Netscape and Microsoft to describe the new technologies the 4. x generation browsers would support. 62

DHTML Technologies l l HTML 4. 0 Cascading Style Sheets (CSS) The Document Object Model (DOM) Java. Script 63

DHTML CSS Positioning l l First, the element must specify the position attribute (relative or absolute). Then we can set the following CSS-P attributes: • • • left - the element's left position top - the element's top position visibility - specifies whether an element should be visible or hidden z-index - the element's stack order filter - add more style effects to your text and images 64

DHTML CSS Positioning <div style="position: relative; font-size: 50 px; z-index: 2; ">LAYER 1</div> <div style="position: relative; top: -50; left: 5; color: red; font-size: 80 px; z-index: 1">LAYER 2</div> 65

DHTML Document Object Model l Remember DOM from previous slides <html> <body> <h 1 id="header">My header </h 1> <script type="text/javascript"> document. get. Element. By. Id('header'). style. color="red" </script> </body> </html> 66

DHTML Event Handlers With an event handler you can do something with an element when an event occurs. <html> <head> <script type="text/javascript"> function changecolor() { document. get. Element. By. Id('header'). style. color="red" } </script> </head> <body> <h 1 id="header" onclick="changecolor()"> Click on this text</h 1> </body> </html> l 67

HTML 4. 0 Event Handlers Event Occurs when. . . onabort a user aborts page loading onblur a user leaves an object onchange a user changes the value of an object onclick a user clicks on an object ondblclick a user double-clicks on an object onfocus a user makes an object active onkeydown a keyboard key is on its way down onkeypress a keyboard key is pressed onkeyup a keyboard key is released onload a page is finished loading. Note: In Netscape this event occurs during the loading of a page! onmousedown a user presses a mouse-button onmousemove a cursor moves on an object onmouseover a cursor moves over an object onmouseout a cursor moves off an object onmouseup a user releases a mouse-button onreset a user resets a form onselect a user selects content on a page onsubmit a user submits a form onunload a user closes a page 68

What is AJAX? l l AJAX stands for Asynchronous Java. Script and XML. AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications. AJAX is a browser technology independent of web server software. AJAX is based on the following web standards: • • Java. Script XML HTML CSS 69

What is AJAX? Ajax is a way of developing Web applications that combines: l XHTML and CSS standards based presentation. l Interaction with the page through the DOM. l Data interchange with XML and XSLT. l Asynchronous data retrieval with XMLHttp. Request. l Java. Script to tie it all together. 70

AJAX = Asynchronous Java. Script and XML l l l With AJAX, your Java. Script can communicate directly with the server, using the Java. Script XMLHttp. Request object. With this object, your Java. Script can trade data with a web server, without reloading the page. AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. The AJAX technique makes Internet applications smaller, faster and more user-friendly. 71

AJAX Uses HTTP Requests l l In traditional web applications, the user will have to click the "Submit" button to send/get the information, wait for the server to respond, then a new page will load with the results. With AJAX, your Java. Script communicates directly with the server, through the Java. Script XMLHttp. Request object. With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will notice that scripts request pages, or send data to a server in the background. 72

The XMLHttp. Request Object l l l By using the XMLHttp. Request object, a web developer can update a page with data from the server after the page has loaded. AJAX was made popular in 2005 by Google (with Google Suggest). Try out Google Maps for a few seconds. 73

AJAX Browser Support l l Different browsers use different methods to create the XMLHttp. Request object. Internet Explorer uses an Active. XObject, while other browsers uses the built-in Java. Script object called XMLHttp. Request. 74

The XMLHttp. Request Object l l l The onreadystatechange Property: stores the function that will process the response from a server. The ready. State Property: The ready. State property holds the status of the server's response. The response. Text Property: The data sent back from the server can be retrieved with the response. Text property. 75

AJAX Example <html> <body> <script type="text/javascript"> function ajax. Function() { var xml. Http; try { // Firefox, Opera 8. 0+, Safari xml. Http=new XMLHttp. Request(); } catch (e) { // Internet Explorer try { xml. Http=new active. XObject("Msxml 2. XMLHTTP"); } catch (e) 76

AJAX Example { try { xml. Http=new Active. XObject("Microsoft. XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } xml. Http. onreadystatechange=function() { if(xml. Http. ready. State==4) { document. my. Form. time. value=xml. Http. response. Text; } } xml. Http. open("GET", "time. asp", true); xml. Http. send(null); } </script> 77

AJAX Example <form name="my. Form"> Name: <input type="text" onkeyup="ajax. Function(); “ name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> 78

What is E 4 X? l E 4 X is a new extension to Java. Script. l E 4 X adds direct support for XML to Java. Script. l E 4 X is an official Java. Script standard. 79

What is E 4 X? l l l Java. Script = ECMAScript is the official name for Java. Script. ECMAScript is the same as Java. Script. ECMA (The European Computer Manufacturers Association) is the organization standardizing Java. Script. E 4 X = Java. Script for XML. 80

XML As a Java. Script Object l With E 4 X, you can declare an XML object variable the same way as you declare a Date or an Array object variable: var x = new XML() var y = new Date() var z = new Array() 81

E 4 X Example <note> <date>2002 -08 -01</date> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body> Don't forget me this weekend! </body> </note> 82

E 4 X Example var x = new XML() x= <note> <date>2002 -08 -01</date> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> 83

E 4 X Example l For the XML example above, the Java. Script statement: document. write(x. from) l will produce the output: Jani l Quite simple. Don't you think? 84

Example without E 4 X var xml. Doc //code for Internet Explorer if (window. Active. XObject) { xml. Doc = new Active. XObject("Microsoft. XMLDOM") xml. Doc. async=false; xml. Doc. load("note. xml") displaymessage() } // code for Mozilla, Firefox, etc. else (document. implementation && document. implementation. create. Document) { xml. Doc= document. implementation. create. Document("", null) xml. Doc. load("note. xml"); xml. Doc. onload=displaymessage } function displaymessage() { document. write(xml. Doc. get. Elements. By. Tag. Name("body")[0]. first. Chi ld. node. Value) } 85

Example with E 4 X var xml. Doc=new XML() xml. Doc. load("note. xml") document. write(xml. Doc. body) 86

Limited Browser Support for E 4 X l l l None of the mainstream browsers are currently supporting E 4 X. A beta version of the Mozilla engine (1. 8) has limited support for E 4 X. The first browser to support E 4 X is expected to be Firefox 1. 1. Support for E 4 X is also expected in a later version of Internet Explorer. 87

What is WML? l l l Wireless Markup Language. WML is a content format for devices that implement the Wireless Application Protocol (WAP) specification, such as mobile phones. WML documents are XML documents that validate against the WML (currently version 1. 3) DTD (Document Type Definition). 88

What is WML? l l WML is used to create pages that can be displayed in a WAP browser. Pages in WML are called DECKS. Decks are constructed as a set of CARDS. 89

What is WML? <? xml version="1. 0"? > <!DOCTYPE wml PUBLIC "-//PHONE. COM//DTD WML 1. 1//EN" "http: //www. phone. com/dtd/wml 11. dtd" > <wml> <card id="main" title="First Card"> <p mode="wrap">This is a sample WML page. </p> </card> </wml> 90

What is WMLScript? l l l WMLScript is the scripting language used in WML pages. WMLScript is a light version of the Java. Script language. WML scripts are not embedded in the WML pages only contains references to script URLs. WMLScript is compiled into byte code on the server before it is sent to the WAP browser. WMLScript is a part of the WAP specification. 91

What is WMLScript used for? l l l WMLScript is used to validate user input. WMLScript is used to generate message boxes and dialog boxes locally, to view error messages and confirmations faster. WMLScript is used to access facilities of the user agent. 92

How to call a WMLScript from a WML page (1) <? xml version="1. 0"? > <!DOCTYPE wml PUBLIC "//WAPFORUM//DTD WML 1. 1//EN" "http: //www. wapforum. org/DTD/wml_1. 1. xml"> <wml> <card id="no 1" title="Go to URL"> <do type="options" label="Go"> <go href="check. wmls#go_url('W 3 Schools')"/> </do> </card> </wml> 93

How to call a WMLScript from a WML page (2) Here is the WML page called check. wmls: extern function go_url(the_url){ if (the_url=="W 3 Schools") { WMLBrowser. go ("http: //www. w 3 schools. com/wap. wml") } } 94

End of Lecture 2 95